UI: Tokens

Als Markdown ansehen

@pithyx/ui/tokens.css ist die einzige Token-Datei von Pithyx und braucht kein JavaScript. Farben nutzen light-dark(): Das Theme folgt dem System, außer <html data-theme="light"> oder "dark" erzwingt eines, und <html data-accent="..."> wählt eine Akzent-Vorgabe. Die Komponenten lesen diese Tokens; das SDK gibt Apps stattdessen die Variablen --pithyx-* des Themes.

Beim Build aus packages/ui/tokens.css von @pithyx/ui 1.0.0-rc.9 erzeugt; Gruppentitel und Hinweise sind die Kommentare in der Datei und bleiben Englisch.

Tokens nach Gruppe

Brand palette from the logo

Token	Wert
`--petrol-50`	`#e8f3f5`
`--petrol-100`	`#cde6ec`
`--petrol-200`	`#9fd0dc`
`--petrol-300`	`#5fb3c6`
`--petrol-400`	`#3e93a7`
`--petrol-500`	`#1a6e82`
`--petrol-600`	`#135d6e`
`--petrol-700`	`#0e4a5a`
`--petrol-800`	`#0a3945`
`--petrol-900`	`#062a33`
`--petrol-950`	`#041c22`
`--amber-100`	`#fbeccb`
`--amber-200`	`#f5d699`
`--amber-300`	`#eebf66`
`--amber-400`	`#f2c063`
`--amber-500`	`#e0a33a`
`--amber-600`	`#c88b2b`
`--amber-650`	`#b37a1f`
`--amber-700`	`#8f6214`
`--amber-900`	`#3d2a08`

Neutrals tinted toward petrol

Token	Wert
`--neutral-0`	`#ffffff`
`--neutral-25`	`#f7fafa`
`--neutral-50`	`#eff4f5`
`--neutral-100`	`#e3ebed`
`--neutral-200`	`#cfdbde`
`--neutral-300`	`#adbfc4`
`--neutral-400`	`#7d9399`
`--neutral-500`	`#5e757b`
`--neutral-600`	`#475c62`
`--neutral-700`	`#33464b`
`--neutral-750`	`#283c42`
`--neutral-800`	`#1c3036`
`--neutral-850`	`#14272c`
`--neutral-900`	`#0f2126`
`--neutral-950`	`#0a191d`
`--neutral-1000`	`#061215`

Semantic colors, separate from the brand

Warning orange is kept clearly apart from the amber accent.

Token	Wert
`--green-light`	`#1b7a40`
`--green-dark`	`#6fd394`
`--orange-light`	`#b3470c`
`--orange-dark`	`#ff9b5c`
`--red-light`	`#c0262d`
`--red-dark`	`#ff8f8a`

Semantic tokens

Token	Wert
`--color-bg`	`light-dark(var(--neutral-50), var(--neutral-1000))`
`--color-surface-1`	`light-dark(var(--neutral-0), var(--neutral-900))`
`--color-surface-2`	`light-dark(var(--neutral-25), var(--neutral-950))`
`--color-surface-3`	`light-dark(var(--neutral-50), var(--neutral-850))`
`--color-surface-hover`	`light-dark(var(--neutral-100), var(--neutral-800))`
`--color-surface-pressed`	`light-dark(var(--neutral-200), var(--neutral-750))`
`--color-text`	`light-dark(var(--neutral-900), #e6f0f2)`
`--color-text-muted`	`light-dark(var(--neutral-600), #a2b8be)`
`--color-text-disabled`	`light-dark(var(--neutral-400), var(--neutral-500))`
`--color-border`	`light-dark(var(--neutral-200), var(--neutral-750))`
`--color-border-strong`	`light-dark(#71878d, #5d7c85)`
`--color-overlay`	`light-dark(rgb(6 42 51 / 32%), rgb(0 0 0 / 55%))`
`--color-focus`	`var(--color-accent)`
`--color-selection`	`var(--color-accent-subtle)`
`--color-success`	`light-dark(var(--green-light), var(--green-dark))`
`--color-success-surface`	`light-dark(#e3f4e9, #0f2d1c)`
`--color-warning`	`light-dark(var(--orange-light), var(--orange-dark))`
`--color-warning-surface`	`light-dark(#fdeee3, #3a1e0c)`
`--color-danger`	`light-dark(var(--red-light), var(--red-dark))`
`--color-danger-surface`	`light-dark(#fcebeb, #3a1416)`
`--color-danger-contrast`	`light-dark(#ffffff, #2a0708)`

Amber highlights the brand (logo, badges)

Never text on light backgrounds.

Token	Wert
`--color-highlight`	`var(--amber-500)`
`--color-highlight-contrast`	`var(--petrol-900)`

Desktop shell

Token	Wert
`--color-desktop`	`light-dark(#dce9ec, var(--petrol-950))`
`--color-taskbar`	`light-dark(rgb(247 250 250 / 80%), rgb(10 25 29 / 74%))`
`--color-taskbar-solid`	`light-dark(var(--neutral-25), var(--neutral-950))`
`--color-taskbar-border`	`light-dark(rgb(6 42 51 / 12%), rgb(255 255 255 / 8%))`
`--color-menu`	`light-dark(rgb(255 255 255 / 88%), rgb(15 33 38 / 86%))`
`--color-menu-solid`	`var(--color-surface-1)`
`--color-window-border`	`light-dark(rgb(6 42 51 / 16%), rgb(255 255 255 / 10%))`
`--color-window-border-focused`	`light-dark(rgb(6 42 51 / 24%), rgb(255 255 255 / 16%))`
`--color-titlebar`	`var(--color-surface-1)`
`--color-titlebar-unfocused`	`var(--color-surface-2)`
`--color-desktop-label`	`#ffffff`
`--color-desktop-label-bg`	`rgb(4 28 34 / 64%)`
`--color-note`	`light-dark(var(--amber-100), #3a2c10)`
`--color-note-text`	`light-dark(#3a2a0a, #f6e6c4)`
`--color-note-bar`	`light-dark(var(--amber-200), #4a3814)`

Typography

Token	Wert
`--font-sans`	`'IBM Plex Sans', system-ui, sans-serif`
`--font-display`	`'Sora', 'IBM Plex Sans', system-ui, sans-serif`
`--font-mono`	`'JetBrains Mono', ui-monospace, monospace`
`--font-size-xs`	`0.75rem`
`--font-size-sm`	`0.8125rem`
`--font-size-md`	`0.875rem`
`--font-size-lg`	`1rem`
`--font-size-xl`	`1.25rem`
`--font-size-2xl`	`1.5rem`
`--font-size-display-1`	`2rem`
`--font-size-display-2`	`2.5rem`
`--font-weight-regular`	`400`
`--font-weight-medium`	`500`
`--font-weight-semibold`	`600`
`--font-weight-bold`	`700`
`--line-height-tight`	`1.2`
`--line-height-normal`	`1.45`
`--line-height-relaxed`	`1.6`
`--letter-spacing-display`	`-0.02em`

Spacing on a 4 px grid

Token	Wert
`--space-0`	`2px`
`--space-1`	`4px`
`--space-2`	`8px`
`--space-3`	`12px`
`--space-4`	`16px`
`--space-5`	`24px`
`--space-6`	`32px`
`--space-7`	`48px`

Radii

Token	Wert
`--radius-xs`	`4px`
`--radius-sm`	`6px`
`--radius-md`	`10px`
`--radius-lg`	`14px`
`--radius-full`	`999px`

Elevation

The shadow color is darker and denser in the dark theme.

Token	Wert
`--shadow-color`	`light-dark(rgb(6 42 51 / 14%), rgb(0 0 0 / 45%))`
`--shadow-color-strong`	`light-dark(rgb(6 42 51 / 22%), rgb(0 0 0 / 60%))`
`--shadow-1`	`0 1px 2px var(--shadow-color)`
`--shadow-2`	`0 2px 6px var(--shadow-color), 0 1px 2px var(--shadow-color)`
`--shadow-3`	`0 10px 28px var(--shadow-color-strong), 0 2px 6px var(--shadow-color)`
`--shadow-4`	`0 24px 64px var(--shadow-color-strong), 0 4px 12px var(--shadow-color)`

Motion

Fades stay under reduced motion; movement collapses.

Token	Wert
`--duration-instant`	`100ms`
`--duration-fast`	`160ms`
`--duration-normal`	`240ms`
`--duration-slow`	`400ms`
`--duration-fade`	`160ms`
`--ease-standard`	`cubic-bezier(0.2, 0, 0, 1)`
`--ease-enter`	`cubic-bezier(0, 0, 0, 1)`
`--ease-exit`	`cubic-bezier(0.3, 0, 1, 1)`

Layers

Token	Wert
`--z-desktop`	`0`
`--z-windows`	`100`
`--z-taskbar`	`5000`
`--z-menu`	`6000`
`--z-toast`	`7000`
`--z-modal`	`8000`
`--z-tooltip`	`9000`

Sizes

Token	Wert	Hinweis
`--touch-target`	`44px`
`--control-height`	`36px`
`--taskbar-size`	`52px`
`--titlebar-height`	`40px`
`--desktop-icon-width`	`88px`
`--desktop-cell-width`	`96px`	The icon grid; keep in step with desktop/src/items/grid.ts.
`--desktop-cell-height`	`112px`
`--desktop-grid-padding`	`12px`

Akzent-Vorgaben

petrol ist die Vorgabe und gilt auch ohne data-accent. Jede Vorgabe hält in beiden Themes AA-Kontrast.

`petrol`

Token	Wert
`--color-accent`	`light-dark(#1a6e82, #5fb3c6)`
`--color-accent-hover`	`light-dark(#135d6e, #7fc4d3)`
`--color-accent-pressed`	`light-dark(#0e4a5a, #9fd0dc)`
`--color-accent-contrast`	`light-dark(#ffffff, #062a33)`
`--color-accent-subtle`	`light-dark(#e8f3f5, #123a44)`

`ocean`

Token	Wert
`--color-accent`	`light-dark(#1f5fae, #7ab2f0)`
`--color-accent-hover`	`light-dark(#184d8f, #99c4f4)`
`--color-accent-pressed`	`light-dark(#133d72, #b6d5f7)`
`--color-accent-contrast`	`light-dark(#ffffff, #0a1a2e)`
`--color-accent-subtle`	`light-dark(#e8f0fa, #16304f)`

`indigo`

Token	Wert
`--color-accent`	`light-dark(#4a4fb8, #a3a7f5)`
`--color-accent-hover`	`light-dark(#3b3f97, #b9bcf7)`
`--color-accent-pressed`	`light-dark(#2f3279, #cdcffa)`
`--color-accent-contrast`	`light-dark(#ffffff, #14163a)`
`--color-accent-subtle`	`light-dark(#eeeefb, #262a55)`

`plum`

Token	Wert
`--color-accent`	`light-dark(#7d3b8c, #d59ae3)`
`--color-accent-hover`	`light-dark(#652f72, #e0b2ea)`
`--color-accent-pressed`	`light-dark(#50255a, #eac8f1)`
`--color-accent-contrast`	`light-dark(#ffffff, #2a0f31)`
`--color-accent-subtle`	`light-dark(#f5ecf7, #3a2141)`

`moss`

Token	Wert
`--color-accent`	`light-dark(#4f6b1f, #aed17a)`
`--color-accent-hover`	`light-dark(#3f5619, #c0dc96)`
`--color-accent-pressed`	`light-dark(#314313, #d0e6b0)`
`--color-accent-contrast`	`light-dark(#ffffff, #18230a)`
`--color-accent-subtle`	`light-dark(#eef3e6, #2a3718)`

`graphite`

Token	Wert
`--color-accent`	`light-dark(#3f4a55, #c3ccd4)`
`--color-accent-hover`	`light-dark(#2f3841, #d4dbe1)`
`--color-accent-pressed`	`light-dark(#222931, #e2e7eb)`
`--color-accent-contrast`	`light-dark(#ffffff, #14191e)`
`--color-accent-subtle`	`light-dark(#eef0f2, #2c343c)`

Media-Overrides

`(pointer: coarse)`

Token	Wert
`--control-height`	`var(--touch-target)`
`--titlebar-height`	`var(--touch-target)`
`--taskbar-size`	`60px`

`(prefers-reduced-motion: reduce)`

Token	Wert
`--duration-instant`	`1ms`
`--duration-fast`	`1ms`
`--duration-normal`	`1ms`
`--duration-slow`	`1ms`

`(prefers-reduced-transparency: reduce), (forced-colors: active)`

Token	Wert
`--color-taskbar`	`var(--color-taskbar-solid)`
`--color-menu`	`var(--color-menu-solid)`