# UI: Tokens

> Jedes Design-Token von @pithyx/ui/tokens.css mit seinem Wert, die Akzent-Vorgaben und die Media-Overrides.

Source: https://pithyx.org/de/docs/reference/sdk/ui/tokens/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/tokens.md

`@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](https://pithyx.org/de/docs/reference/sdk/theme/).

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)`    |