# UX4G Tokens — Border This page lists every primitive and semantic token for the **Border** family. - Primitive token source: `src/tokens/border.tokens.css` - Semantic token source: `src/semantic/border.semantic.css` ## Primitive tokens ```css :root { --ux4g-border-none: 0px; --ux4g-border-thin: 1px; --ux4g-border-thick: 2px; --ux4g-border-thicker: 3px; --ux4g-border-thickest: 4px; } ``` ## Semantic tokens ```css :root { /* Border Width */ --ux4g-border-width-none: var(--ux4g-border-none); --ux4g-border-width-sm: var(--ux4g-border-thin); --ux4g-border-width-md: var(--ux4g-border-thick); --ux4g-border-width-lg: var(--ux4g-border-thicker); --ux4g-border-width-xl: var(--ux4g-border-thickest); /* Border Color - Neutral */ --ux4g-border-color-neutral-default: var(--ux4g-color-neutral-300); --ux4g-border-color-neutral-subtle: var(--ux4g-color-neutral-200); --ux4g-border-color-neutral-strong: var(--ux4g-color-neutral-500); --ux4g-border-color-neutral-focus: var(--ux4g-color-neutral-600); --ux4g-border-color-neutral-hover: var(--ux4g-color-neutral-300); --ux4g-border-color-neutral-active: var(--ux4g-color-neutral-400); --ux4g-border-color-neutral-elevated: var(--ux4g-color-neutral-0); /* Status Borders */ --ux4g-border-color-success-default: var(--ux4g-color-green-300); --ux4g-border-color-success-strong: var(--ux4g-color-green-600); --ux4g-border-color-info-default: var(--ux4g-color-cyan-300); --ux4g-border-color-info-strong: var(--ux4g-color-cyan-600); --ux4g-border-color-error-default: var(--ux4g-color-red-300); --ux4g-border-color-error-strong: var(--ux4g-color-red-600); --ux4g-border-color-warning-default: var(--ux4g-color-orange-300); --ux4g-border-color-warning-strong: var(--ux4g-color-orange-600); /* Brand Borders */ --ux4g-border-color-primary-default: var(--ux4g-color-primary-300); --ux4g-border-color-primary-strong: var(--ux4g-color-primary-600); --ux4g-border-color-primary-hover: var(--ux4g-color-primary-700); --ux4g-border-color-primary-active: var(--ux4g-color-primary-800); --ux4g-border-color-secondary-default: var(--ux4g-color-secondary-300); --ux4g-border-color-tertiary-default: var(--ux4g-color-tertiary-300); /* Brand Borders */ --ux4g-control-border-default: var(--ux4g-color-neutral-200); --ux4x-icon-border-desabled: rgba(229, 229, 229, 1) } ``` ## Dark theme Add `data-theme="dark"` to `` or any ancestor to switch to the dark semantic token set.