Border Colors
These utility classes set border colors using semantic names for various states and contexts. Use them to ensure consistent border color application across your UI.
Usage
| Class Name | Description | Example Color Token |
|---|---|---|
.spr-border-color-strong | Strong border color for high emphasis | spr-border-mushroom-500 |
.spr-border-color-supporting | Supporting border color | spr-border-mushroom-400 |
.spr-border-color-base | Base border color for default state | spr-border-mushroom-300 |
.spr-border-color-hover | Border color on hover state | spr-border-mushroom-400 |
.spr-border-color-pressed | Border color on pressed state | spr-border-mushroom-500 |
.spr-border-color-weak | Weak border color for subtle separation | spr-border-mushroom-200 |
.spr-border-color-disabled | Border color for disabled elements | spr-border-white-100 |
.spr-border-color-on-fill-disabled | Border color on disabled filled backgrounds | spr-border-white-200 |
.spr-border-color-brand-base | Brand border color (base state) | spr-border-kangkong-700 |
.spr-border-color-brand-hover | Brand border color (hover state) | spr-border-kangkong-800 |
.spr-border-color-brand-pressed | Brand border color (pressed state) | spr-border-kangkong-900 |
.spr-border-color-success-base | Success border color (base state) | spr-border-kangkong-700 |
.spr-border-color-success-hover | Success border color (hover state) | spr-border-kangkong-800 |
.spr-border-color-success-pressed | Success border color (pressed state) | spr-border-kangkong-900 |
.spr-border-color-information-base | Information border color (base state) | spr-border-blueberry-700 |
.spr-border-color-information-hover | Information border color (hover state) | spr-border-blueberry-800 |
.spr-border-color-information-pressed | Information border color (pressed state) | spr-border-blueberry-900 |
.spr-border-color-danger-base | Danger border color (base state) | spr-border-tomato-600 |
.spr-border-color-danger-hover | Danger border color (hover state) | spr-border-tomato-700 |
.spr-border-color-danger-pressed | Danger border color (pressed state) | spr-border-tomato-800 |
.spr-border-color-pending-base | Pending border color (base state) | spr-border-mango-700 |
.spr-border-color-pending-hover | Pending border color (hover state) | spr-border-mango-800 |
.spr-border-color-pending-pressed | Pending border color (pressed state) | spr-border-mango-900 |
.spr-border-color-caution-base | Caution border color (base state) | spr-border-carrot-700 |
.spr-border-color-caution-hover | Caution border color (hover state) | spr-border-carrot-800 |
.spr-border-color-caution-pressed | Caution border color (pressed state) | spr-border-carrot-900 |
.spr-border-color-accent-base | Accent border color (base state) | spr-border-wintermelon-700 |
.spr-border-color-accent-hover | Accent border color (hover state) | spr-border-wintermelon-800 |
.spr-border-color-accent-pressed | Accent border color (pressed state) | spr-border-wintermelon-900 |
Between children
Provides utility classes for setting divider (border) colors, Apply the desired class to an element to set its divider color.
| Class Name | Description | Example Color Token |
|---|---|---|
.spr-divide-color-strong | Strong divider color for high emphasis | spr-divide-mushroom-500 |
.spr-divide-color-supporting | Supporting divider color | spr-divide-mushroom-400 |
.spr-divide-color-base | Base divider color for default state | spr-divide-mushroom-300 |
.spr-divide-color-hover | Divider color on hover state | spr-divide-mushroom-400 |
.spr-divide-color-pressed | Divider color on pressed state | spr-divide-mushroom-500 |
.spr-divide-color-weak | Weak divider color for subtle separation | spr-divide-mushroom-200 |
.spr-divide-color-disabled | Divider color for disabled elements | spr-divide-white-100 |
.spr-divide-color-on-fill-disabled | Divider color on disabled filled backgrounds | spr-divide-white-200 |
.spr-divide-color-brand-base | Brand divider color (base state) | spr-divide-kangkong-700 |
.spr-divide-color-brand-hover | Brand divider color (hover state) | spr-divide-kangkong-800 |
.spr-divide-color-brand-pressed | Brand divider color (pressed state) | spr-divide-kangkong-900 |
.spr-divide-color-success-base | Success divider color (base state) | spr-divide-kangkong-700 |
.spr-divide-color-success-hover | Success divider color (hover state) | spr-divide-kangkong-800 |
.spr-divide-color-success-pressed | Success divider color (pressed state) | spr-divide-kangkong-900 |
.spr-divide-color-information-base | Information divider color (base state) | spr-divide-blueberry-700 |
.spr-divide-color-information-hover | Information divider color (hover state) | spr-divide-blueberry-800 |
.spr-divide-color-information-pressed | Information divider color (pressed state) | spr-divide-blueberry-900 |
.spr-divide-color-danger-base | Danger divider color (base state) | spr-divide-tomato-600 |
.spr-divide-color-danger-hover | Danger divider color (hover state) | spr-divide-tomato-700 |
.spr-divide-color-danger-pressed | Danger divider color (pressed state) | spr-divide-tomato-800 |
.spr-divide-color-pending-base | Pending divider color (base state) | spr-divide-mango-700 |
.spr-divide-color-pending-hover | Pending divider color (hover state) | spr-divide-mango-800 |
.spr-divide-color-pending-pressed | Pending divider color (pressed state) | spr-divide-mango-900 |
.spr-divide-color-caution-base | Caution divider color (base state) | spr-divide-carrot-700 |
.spr-divide-color-caution-hover | Caution divider color (hover state) | spr-divide-carrot-800 |
.spr-divide-color-caution-pressed | Caution divider color (pressed state) | spr-divide-carrot-900 |
.spr-divide-color-accent-base | Accent divider color (base state) | spr-divide-wintermelon-700 |
.spr-divide-color-accent-hover | Accent divider color (hover state) | spr-divide-wintermelon-800 |
.spr-divide-color-accent-pressed | Accent divider color (pressed state) | spr-divide-wintermelon-900 |