Tokens
oklch colors, inverse accent, compact controls
Import @wrkspace/shell/styles.css. Colors are the --shell-* variables below. Light on :root, dark on .dark (the theme switch in the topbar).
--shell-bgpage / panel background--shell-fgprimary text--shell-mutedsecondary text--shell-borderborders, separators--shell-accentinteractive fill--shell-accent-fgtext on accent--shell-dangerdestructive fill--shell-danger-fgtext on danger--shell-warningwarning--shell-successsuccess fill--shell-success-fgtext on success--shell-selectionhighlighted rows--shell-selection-fgtext on selection--shell-ringfocus ringValues are oklch. Set the same names after the stylesheet import to change the palette. Radius is --shell-radius, 0px. There is no --shell-primary.
Filled controls paint --shell-accent, which defaults to the foreground. Phosphor is green, amber is yellow.
data-shell-accent="phosphor" on <html>, or {...shellThemeProps({ accent: "phosphor" })} on a wrapper. Leave the attribute off for inverse.
data-shell-density="compact" drops control height from 2rem to 1.75rem. Button, Input, Combobox, Autocomplete, Select, Textarea, NumberInput, TagsInput, and Otp/Pin read those variables. Stack gaps stay put.
| token | comfortable | compact |
|---|---|---|
| --shell-control-h-sm | 1.75rem | 1.5rem |
| --shell-control-h | 2rem | 1.75rem |
| --shell-control-h-lg | 2.5rem | 2.25rem |
| --shell-control-px-sm | 0.5rem | 0.375rem |
| --shell-control-px | 0.75rem | 0.5rem |
| --shell-control-px-lg | 1rem | 0.75rem |
On document.documentElement, or spread onto a div:
import { applyShellTheme, shellThemeProps } from "@wrkspace/shell";
applyShellTheme(document.documentElement, {
accent: "phosphor",
density: "compact",
});
<div {...shellThemeProps({ accent: "amber" })} />