Component
My Presets
No presets saved yet
Base Colors
Main background color
Primary text color
Brand/highlight color
Typography
The quick brown fox jumps over the lazy dog
0123456789
CSS Variables
Lock to preserve value | Reset to calculated
Live Preview
Different multiselect configurations showing various theme variables
Variable Reference
How base variables map to multiselect UI elements:
| Variable | Affects | Design Impact |
|---|---|---|
--base-accent-color | Checkboxes, focus ring, badge remove button | Primary brand color for selections |
--base-accent-color-hover | Checkbox hover, badge remove hover | Interactive feedback on accent elements |
--base-accent-color-light | Badge background, selected option tint | Subtle accent for backgrounds (10-15% opacity) |
--base-primary-bg | Input background, dropdown background | Main surface color |
--base-primary-bg-hover | Option hover background | Row highlight on hover |
--base-text-color-1 | Option labels, input text | Primary readable text |
--base-text-color-3 | Option subtitles, group labels | Secondary/muted text |
--base-text-color-4 | Placeholder text | Input hints/captions |
--base-text-color-on-accent | Badge remove icon, checkbox checkmark | Contrast text on accent backgrounds |
--base-border-color | Input border, dropdown border, group dividers | Element separation |
--base-input-border-focus | Input focus ring | Focus indicator (uses accent) |
--base-dropdown-box-shadow | Dropdown elevation | Depth/layering effect |
--base-tooltip-bg | Badge tooltips | Tooltip surface color |
--base-font-family | All text | Typography |
--base-border-radius-* | Input, badges, dropdown, checkboxes | Roundness style (sm/md/lg) |
Preview background matches your selected background color