Background Colors
These utility classes set background colors using semantic names for various states and contexts. Use them to ensure consistent background color application across your UI.
Usage
Base Background Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color | Primary background color | spr-bg-white-50 |
.spr-background-color-default | Default background color | spr-bg-mushroom-200 |
.spr-background-color-surface | Surface background color | spr-bg-mushroom-50 |
.spr-background-color-surface-adaptive | Adaptive surface background with opacity | spr-bg-mushroom-950/[0.05] |
.spr-background-color-base | Base background color | spr-bg-mushroom-100 |
Interactive States
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-hover | Background color on hover state | spr-bg-mushroom-950/[0.08] |
.spr-background-color-pressed | Background color on pressed state | spr-bg-mushroom-950/[0.12] |
.spr-background-color-disabled | Background color for disabled elements | spr-bg-white-100 |
Inverted Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-inverted | Inverted background color | spr-bg-mushroom-950 |
.spr-background-color-inverted-hover | Inverted background on hover | spr-bg-mushroom-900 |
.spr-background-color-inverted-pressed | Inverted background on pressed | spr-bg-mushroom-800 |
Active States
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-single-active | Background for single active items | spr-bg-kangkong-100 |
.spr-background-color-multiple-active | Background for multiple active items | spr-bg-kangkong-50 |
Brand Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-brand-base | Brand background color | spr-bg-kangkong-700 |
.spr-background-color-brand-hover | Brand background on hover | spr-bg-kangkong-800 |
.spr-background-color-brand-pressed | Brand background on pressed | spr-bg-kangkong-900 |
.spr-background-color-brand-weak | Subtle brand background | spr-bg-kangkong-100 |
.spr-background-color-brand-weak-hover | Subtle brand background on hover | spr-bg-kangkong-200 |
.spr-background-color-brand-weak-pressed | Subtle brand background on pressed | spr-bg-kangkong-300 |
Success Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-success-base | Success background color | spr-bg-kangkong-600 |
.spr-background-color-success-hover | Success background on hover | spr-bg-kangkong-700 |
.spr-background-color-success-pressed | Success background on pressed | spr-bg-kangkong-800 |
.spr-background-color-success-weak | Subtle success background | spr-bg-kangkong-100 |
.spr-background-color-success-weak-hover | Subtle success background on hover | spr-bg-kangkong-200 |
.spr-background-color-success-weak-pressed | Subtle success background on pressed | spr-bg-kangkong-300 |
Information Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-information-base | Information background color | spr-bg-blueberry-600 |
.spr-background-color-information-hover | Information background on hover | spr-bg-blueberry-700 |
.spr-background-color-information-pressed | Information background on pressed | spr-bg-blueberry-800 |
.spr-background-color-information-weak | Subtle information background | spr-bg-blueberry-100 |
.spr-background-color-information-weak-hover | Subtle information background on hover | spr-bg-blueberry-200 |
.spr-background-color-information-weak-pressed | Subtle information background on pressed | spr-bg-blueberry-300 |
Danger Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-danger-base | Danger background color | spr-bg-tomato-600 |
.spr-background-color-danger-hover | Danger background on hover | spr-bg-tomato-700 |
.spr-background-color-danger-pressed | Danger background on pressed | spr-bg-tomato-800 |
.spr-background-color-danger-weak | Subtle danger background | spr-bg-tomato-100 |
.spr-background-color-danger-weak-hover | Subtle danger background on hover | spr-bg-tomato-200 |
.spr-background-color-danger-weak-pressed | Subtle danger background on pressed | spr-bg-tomato-300 |
Pending Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-pending-base | Pending background color | spr-bg-mango-500 |
.spr-background-color-pending-hover | Pending background on hover | spr-bg-mango-600 |
.spr-background-color-pending-pressed | Pending background on pressed | spr-bg-mango-700 |
.spr-background-color-pending-weak | Subtle pending background | spr-bg-mango-100 |
.spr-background-color-pending-weak-hover | Subtle pending background on hover | spr-bg-mango-200 |
.spr-background-color-pending-weak-pressed | Subtle pending background on pressed | spr-bg-mango-300 |
Caution Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-caution-base | Caution background color | spr-bg-carrot-500 |
.spr-background-color-caution-hover | Caution background on hover | spr-bg-carrot-600 |
.spr-background-color-caution-pressed | Caution background on pressed | spr-bg-carrot-700 |
.spr-background-color-caution-weak | Subtle caution background | spr-bg-carrot-100 |
.spr-background-color-caution-weak-hover | Subtle caution background on hover | spr-bg-carrot-200 |
.spr-background-color-caution-weak-pressed | Subtle caution background on pressed | spr-bg-carrot-300 |
Accent Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-background-color-accent-base | Accent background color | spr-bg-wintermelon-600 |
.spr-background-color-accent-hover | Accent background on hover | spr-bg-wintermelon-700 |
.spr-background-color-accent-pressed | Accent background on pressed | spr-bg-wintermelon-800 |
.spr-background-color-accent-weak | Subtle accent background | spr-bg-wintermelon-100 |
.spr-background-color-accent-weak-hover | Subtle accent background on hover | spr-bg-wintermelon-200 |
.spr-background-color-accent-weak-pressed | Subtle accent background on pressed | spr-bg-wintermelon-300 |
Switch Colors
| Class Name | Description | Color Token |
|---|---|---|
.spr-switch-background-default | Switch background default color | spr-bg-mushroom-200 |
.spr-switch-background-hover | Switch background on hover | spr-bg-mushroom-300 |
.spr-switch-background-pressed | Switch background on pressed | spr-bg-mushroom-400 |
Examples
html
<!-- Basic usage -->
<div class="spr-background-color">Primary background</div>
<div class="spr-background-color-surface">Surface background</div>
<!-- Interactive states -->
<button class="spr-background-color-brand-base hover:spr-background-color-brand-hover">Brand button</button>
<!-- Status colors -->
<div class="spr-background-color-success-weak">Success message</div>
<div class="spr-background-color-danger-weak">Error message</div>
<div class="spr-background-color-information-weak">Info message</div>