Theming is done entirely through CSS custom properties — there are no styling
attributes. Because the component lives in a Shadow DOM, variables must be set on
the <web-multiselect> element itself (or a theme layer above it),
never on an inner wrapper.
--ms-remis the global sizing unit. It bridges to--base-rem(default10px), so a single knob rescales the input, options, checkboxes, badges and dropdown together. Font sizes are unitless multipliers of it (e.g.1.4 × --ms-rem).- Colors, borders and radii are per-concern
--ms-*variables that default to--base-*tokens, so a design system can theme every Keenmate component at once. - Icons flow from a
--base-icon-*contract (new in v2.0.0) with a Lucide SVG fallback — swap one token and the chevron, checkbox glyphs and every ✕ reskin centrally.
TH01 Live theming
Drag the sliders and pick an accent — the variables are written straight onto the element, and the CSS snippet below updates to match.
Open the dropdown to see the accent carry into hover and selected rows.
CSS variables reference
A curated selection grouped by concern. See the full CSS variables reference for the complete list.
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). |