Border
We use borders to define elements and create visual separation, making content easier to scan and understand.
| Token | Value | Example |
|---|---|---|
borderInteractive | var(--sizeBorderDefault) solid var(--colorBorderInteractive) | |
borderInteractiveQuiet | var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet) | |
borderInteractiveLoud | var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud) | |
borderInteractiveHover | var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover) | |
borderInteractiveDisabled | var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled) | |
borderInteractiveSelected | var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected) | |
borderInteractiveSelectedHover | var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelectedHover) | |
borderStatic | var(--sizeBorderDefault) solid var(--colorBorderStatic) | |
borderStaticLoud | var(--sizeBorderDefault) solid var(--colorBorderStaticLoud) | |
borderNeutral | var(--sizeBorderDefault) solid var(--colorBorderNeutral) | |
borderNegative | var(--sizeBorderDefault) solid var(--colorBorderNegative) | |
borderNegativeHover | var(--sizeBorderDefault) solid var(--colorBorderNegativeHover) | |
borderPositive | var(--sizeBorderDefault) solid var(--colorBorderPositive) | |
borderWarning | var(--sizeBorderDefault) solid var(--colorBorderWarning) | |
borderInfo | var(--sizeBorderDefault) solid var(--colorBorderInfo) | |
borderDiscover | var(--sizeBorderDefault) solid var(--colorBorderDiscover) | |
borderDark | 1px solid #333333 | |
borderDarkest | 1px solid #000000 | |
borderError | 1px solid #e91c1c | |
borderLight | 1px solid #f5f5f5 | |
borderLightest | 1px solid #ffffff | |
borderPrimary | 1px solid #ececec | |
borderSuccess | 1px solid #85d69e | |
sizeBorderDefault | 1px | |
sizeBorderThick | 2px | |
sizeBorderThickest | 3px |