Styling

The components follow the same styling contract as the other Insane Lab products: a theme attribute, public CSS custom properties (--sr-*) and public parts. A page that themes one product can theme the others with the same base names (accent, bg, panel, text, muted, border, danger, radius, font).

Light, dark and auto#

Every component takes theme="light" (the default), theme="dark" or theme="auto", which follows the user's system setting (prefers-color-scheme).

html

<sorter-station wave-id="WAVE-0815" theme="auto"></sorter-station>

Custom properties#

Set them on the elements or on any ancestor; they inherit into the shadow roots. A value you set wins over the theme's default in both light and dark mode, so set dark values inside your own dark-mode selector if you need both. The derived colours (soft tints, bin states) default to mixes of the base colours, so they follow your palette when you change only --sr-accent, --sr-panel and friends.

Property	Light	Dark	For
`--sr-accent`	`#1f6feb`	`#4493f8`	Primary buttons, selection, focus
`--sr-accent-hover`	`#1858c4`	`#539bf5`	Primary button hover
`--sr-accent-soft`	`color-mix(in srgb, var(--accent) 14%, var(--panel))`	`color-mix(in srgb, var(--accent) 22%, var(--panel))`	Selected rows, active tabs
`--sr-accent-text`	`#ffffff`	`#0d1117`	Text on accent backgrounds (primary buttons, the target bin)
`--sr-bg`	`#f3f4f6`	`#0d1117`	Component background
`--sr-panel`	`#ffffff`	`#161b22`	Panels, cards, tables
`--sr-surface`	`#f6f8fa`	`#1c2128`	Headers, tabs, tiles
`--sr-input-bg`	`#ffffff`	`#0d1117`	Inputs, selects, buttons
`--sr-text`	`#1f2933`	`#e6edf3`	Text
`--sr-muted`	`#616e7c`	`#8b949e`	Secondary text
`--sr-border`	`#d9dce1`	`#30363d`	Borders
`--sr-border-strong`	`#8c959f`	`#6e7681`	Bin outlines, focused inputs
`--sr-danger`	`#cf222e`	`#f85149`	Errors, delete buttons, "put aside" states
`--sr-warn`	`#9a6700`	`#d29922`	Warnings
`--sr-ok`	`#1a7f37`	`#3fb950`	Order complete, success messages
`--sr-radius`	`6px`	`6px`	Corner radius of controls and panels
`--sr-font`	`system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`	`system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`	UI font
`--sr-font-mono`	`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`	`ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`	Bin ids and SKUs in tables
`--sr-font-size`	`14px`	`14px`	Base text size
`--sr-target-size`	`clamp(64px, 16vw, 220px)`	`clamp(64px, 16vw, 220px)`	Font size of the target bin on the station
`--sr-wall-height`	`360px`	`360px`	Maximum height of a wall drawing
`--sr-bin-free`	`color-mix(in srgb, var(--ok) 8%, var(--panel))`	`color-mix(in srgb, var(--ok) 10%, var(--panel))`	Free bins
`--sr-bin-occupied`	`color-mix(in srgb, var(--muted) 30%, var(--panel))`	`color-mix(in srgb, var(--muted) 40%, var(--panel))`	Bins held by an order
`--sr-bin-order`	`color-mix(in srgb, var(--accent) 35%, var(--panel))`	`color-mix(in srgb, var(--accent) 40%, var(--panel))`	Bins of the emphasised order
`--sr-bin-target`	`var(--accent)`	`var(--accent)`	The bin to put into (station), highlighted bins
`--sr-bin-disabled`	`color-mix(in srgb, var(--border) 70%, var(--bg))`	`color-mix(in srgb, var(--border) 70%, var(--bg))`	Disabled bins
`--sr-target-pending`	`var(--warn)`	`var(--warn)`	The station's target while a put waits for its confirmation scan
`--sr-light-put`	`var(--accent)`	`var(--accent)`	Lit bins (wall with lights): put here, pulsing
`--sr-light-complete`	`var(--ok)`	`var(--ok)`	Lit bins (wall with lights): order complete, pack out (steady)
`--sr-light-text`	`var(--accent-text)`	`var(--accent-text)`	Bin id and quantity on a lit bin

css

sorter-station, sorter-wall, sorter-setup, sorter-wave-monitor {
    --sr-accent: #0f766e;
    --sr-accent-hover: #115e59;
    --sr-radius: 4px;
    --sr-font: "Inter", system-ui, sans-serif;
}

/* A bigger target bin on a wall-mounted screen. */
sorter-station.big-screen {
    --sr-target-size: clamp(120px, 24vw, 320px);
}

The TRIAL mark has fixed colours on purpose and can't be themed.

Parts#

For anything the properties don't cover, style the parts with ::part(). Parts are public API.

Element	Parts
all	`content` (the wrapper of the content), `blocked` (the "not licensed" notice), `trial-mark`
`sorter-wall`	`wall`, `caption`, `svg`, `bin` (highlighted bins also `bin-target`; lit bins also `bin-lit` and `bin-lit-put` or `bin-lit-complete`), `lights-status` (why the lights can't be shown), `empty`
`sorter-station`	`station`, `header`, `wave`, `wave-status`, `wave-progress`, `wave-progress-text`, `offline`, `scan-row`, `input`, `scan-input`, `quantity-input`, `button`, `button-primary`, `scan-button`, `undo-button`, `retry-button`, `dismiss-button`, `target` (also `target-idle`, `target-pending` while a put waits for its bin scan, `target-confirmed`), `target-caption`, `target-bin`, `target-detail`, `confirm-prompt` ("Scan bin ... to confirm"), `alert` (also `alert-aside`, `alert-retry`, `alert-error`), `info`, `order`, `order-id`, `order-units`, `order-progress`, `remaining`, `order-complete`, `order-bins`, `bin-chip`, `wall` (the inner `<sorter-wall>`)
`sorter-setup`	`setup`, `header-fields`, `field`, `hint`, `input`, `file-input`, `import`, `tabs`, `tab`, `import-dxf`, `import-csv`, `import-grid`, `import-photo`, `ai-note`, `import-button`, `import-status`, `warnings`, `preview`, `wall-picker`, `wall-button`, `wall-fields`, `delete-wall`, `wall` (the inner `<sorter-wall>`), `bins`, `table`, `row` (also `row-invalid`, `row-selected`), `delete-bin`, `pager`, `issues`, `validate-button`, `save-button`, `save-status`, `button`, `button-primary`
`sorter-wave-monitor`	`monitor`, `header`, `wave`, `wave-status`, `updated`, `error`, `tiles`, `tile`, `value`, `label`, `wave-progress`, `walls`, `wall`, `status-filter`, `input`, `table`, `row`

css

sorter-station::part(target-bin) {
    letter-spacing: 0.05em;
}

sorter-station::part(alert-aside) {
    border-width: 3px;
}

/* Put-to-light colours that match the hardware. */
sorter-wall {
    --sr-light-put: #2563eb;
    --sr-light-complete: #16a34a;
}

Content-Security-Policy#

The components inject nothing into your page's document. Their styles are constructed stylesheets inside their shadow roots, they set no style="" attributes and build no code from strings, so they work under style-src 'self' and script-src without 'unsafe-inline' or 'unsafe-eval'.