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, selected rows and the checkboxes.
Controls
Rescales the whole component (8–16px).
Open the dropdown — the checkbox box, border and radius scale together.
Reads
--base-checkbox-scale when set on a theme layer.Applied CSS
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). |
--ms-checkbox-scale v2.3.0 | number | var(--base-checkbox-scale, 1) | Scales the option checkbox independently of --ms-rem. Bridges to --base-checkbox-scale, so one theme-layer knob sizes checkboxes across every Keenmate component. The box width/height, border width (--ms-checkbox-border-width-scaled) and corner radius all scale together via calc — not a transform — so the masked check/dash stays crisp and centred at any scale. |
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. |
--ms-group-label-* | various | — | Group header styling — --ms-group-label-color, -font-size, -font-weight, -padding, -transform, -letter-spacing. v2.2.0: the per-group selected-count chip reuses the in-input counter’s --ms-counter-* variables and inherits the group-label font-size, so theming the counter themes both and the chip scales with the header (incl. the phone fullscreen overlay). |
--ms-option-icon-size / --ms-option-content-gap v2.5.0 | length | — | The option icon slot box (width & height) and the gap between the icon and the label — both scale with --ms-rem (defaults calc(2 * --ms-rem) and calc(0.8 * --ms-rem)). --ms-option-icon-size is also the fixed gutter width when reserve-icon-slot is on. |
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). |