Variables must be set on the
<web-multiselect> element itself (not a wrapper),
because the component uses Shadow DOM. See the
Theming page for
live examples.
How --base-* variables work
Every --ms-* variable resolves through a three-step fallback chain, so you
can theme at whichever level you own:
- Per-instance override — set the
--ms-* variable directly
(e.g. --ms-accent-color: #6366f1). Wins over everything. - Shared base token — if you don’t, it inherits a
--base-* counterpart. Setting --base-accent-color once on :root themes this multiselect and every other Keenmate component
(date-range picker, treeview, …) together — a single design-system layer. - Built-in default — with no base layer loaded, a hardcoded fallback
applies. Color defaults are wrapped in
light-dark(), so they adapt to the
page’s color-scheme automatically.
So --ms-accent-color: var(--base-accent-color, #3b82f6) means: your override → the shared token → a sensible blue. Two base knobs stand out: --base-rem (global sizing — --ms-rem bridges to it) and the --base-icon-* contract (new in v2.0.0), where each glyph
(chevron, checkbox check/dash, ✕, search/filter, add-new) flows from a --base-icon-* token with a Lucide SVG fallback — point one token at your own
SVG to reskin the glyph across all components.
Scaling & typography
--ms-rem bridges to --base-rem (default 10px) — one knob rescales everything.
| Variable | Type | Default | Description |
|---|
--ms-rem | length | var(--base-rem, 10px) | Global sizing unit. Font sizes are unitless multipliers of this. |
--ms-font-family | font | — | Component font family (inherits --base-font-family). |
--ms-input-font-size | multiplier | — | Input font size (× --ms-rem). |
Colors & accent
The accent drives focus borders, checkboxes, selected rows and badges — set --ms-accent-color alone to recolor most of the component. Each falls back to a --base-* token (see the note at the top), then a hardcoded, light-dark()-aware default.
| Variable | Type | Default | Description |
|---|
--ms-accent-color | color | var(--base-accent-color, #3b82f6) | Primary accent — focus border, checkbox fill, selected/matched tint, counter, badge remove. |
--ms-accent-color-hover | color | var(--base-accent-color-hover) | Accent hover state. |
--ms-accent-color-light | color | — | Soft accent tint used behind badges / “+X more” / popover header (a light-dark() pair). |
--ms-text-color-1 | color | — | Primary text (headings/labels). --ms-text-color-2/3/4 step down to muted/disabled. |
--ms-border-color | color | var(--base-border-color) | Shared border color for the field, dropdown, groups and checkboxes. One knob for every edge. |
Input / field
| Variable | Type | Default | Description |
|---|
--ms-input-bg | color | — | Field background. |
--ms-input-border | border | — | Field border (shorthand, e.g. 1px solid #cbd5e1). Defaults to 1px solid var(--ms-border-color) — set --ms-border-color to recolor every edge at once. |
--ms-input-border-hover | border | — | Field border on hover. Defaults to 1px solid var(--ms-accent-color). |
--ms-input-border-focus | border | — | Field border on focus. Defaults to 1px solid var(--ms-accent-color). |
--ms-input-border-radius | length | — | Field corner radius. |
--ms-input-padding-h v2.0.0 | length | — | Horizontal field padding (replaces removed --ms-input-padding*). |
--ms-input-gap v2.0.0 | length | — | Spacing between input, counter, clear and toggle. |
--ms-input-current-width | length | — | Resolved field width (drives dropdown/popover default width). |
Options & dropdown
| Variable | Type | Default | Description |
|---|
--ms-dropdown-bg | color | — | Dropdown background. |
--ms-dropdown-width | length | — | Dropdown width (see dropdown-width). |
--ms-option-bg-hover | color | — | Option background on hover/focus. |
--ms-option-bg-selected | color | — | Selected option background. |
--ms-option-min-height | length | — | Minimum option row height. |
--ms-tree-indent v2.0.0 | length | — | Indent step per tree level. |
--ms-tree-base-indent v2.0.0 | length | — | Indent of the first tree level. |
Badges & tooltips
| Variable | Type | Default | Description |
|---|
--ms-badge-bg | color | — | Badge background. |
--ms-badge-text-color | color | — | Badge text color. |
--ms-tooltip-bg | color | — | Shared tooltip background. |
--ms-option-tooltip-bg | color | — | Option tooltip background (overrides shared). |
--ms-option-tooltip-max-width | length | — | Option tooltip max width. |
Transient message / toast (v2.0.0)
The showMessage() toast (also raised by a veto callback returning a reason). Per-variant colors default to --base-* status tones.
| Variable | Type | Default | Description |
|---|
--ms-message-info-bg / --ms-message-info-color v2.0.0 | color | — | Info variant (reuses the tooltip surface). |
--ms-message-warning-bg / --ms-message-error-bg / --ms-message-success-bg v2.0.0 | color | — | Status-tone backgrounds (default to --base-warning/danger/success-bg). |
--ms-message-border-radius / --ms-message-padding v2.0.0 | length | — | Toast shape. |
Icons (base contract, v2.0.0)
Each glyph flows from a --base-icon-* counterpart with a Lucide SVG fallback, so a theme can reskin all Keenmate components at once.
| Variable | Type | Default | Description |
|---|
--ms-icon-chevron v2.0.0 | image | — | Dropdown toggle chevron. |
--ms-icon-check / --ms-icon-indeterminate v2.0.0 | image | — | Checkbox check / dash (mask glyphs). |
--ms-icon-clear / --ms-icon-remove v2.0.0 | image | — | Clear button / badge remove. |
--ms-icon-search / --ms-icon-filter v2.0.0 | image | — | Search / filter glyphs (fullscreen toggle). |
--ms-add-new-* v2.0.0 | various | — | Add-new prompt row styling (--ms-icon-add-new glyph). |