@dxos/ui-theme 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,6 +20,10 @@
       "types": "./dist/types/src/index.d.ts",
       "default": "./dist/lib/browser/index.mjs"
     },
+    "./tokens.css": {
+      "style": "./src/tokens.css",
+      "default": "./src/tokens.css"
+    },
     "./plugin": {
       "source": "./src/plugins/ThemePlugin.ts",
       "types": "./dist/types/src/plugins/ThemePlugin.d.ts",
@@ -34,6 +38,7 @@
   "dependencies": {
     "@fontsource-variable/inter": "5.2.8",
     "@fontsource-variable/jetbrains-mono": "5.0.21",
+    "@fontsource-variable/nunito": "5.2.7",
     "@fontsource/poiret-one": "^5.0.20",
     "@radix-ui/react-slot": "1.1.2",
     "@tailwindcss/forms": "^0.5.9",
@@ -51,16 +56,16 @@
     "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.3.0",
     "tailwindcss-radix": "^4.0.2",
-    "@dxos/log": "0.10.0",
-    "@dxos/node-std": "0.10.0",
-    "@dxos/util": "0.10.0"
+    "@dxos/log": "0.11.0",
+    "@dxos/node-std": "0.11.0",
+    "@dxos/util": "0.11.0"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
     "esbuild": "0.28.1",
-    "vite": "^8.0.16",
-    "@dxos/ui-types": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/ui-types": "0.11.0"
   },
   "peerDependencies": {
     "react": "~19.2.7"

package/src/Theme.stories.tsx

@@ -5,7 +5,9 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
-import { hues, hueShades } from './defs';
+import { hues } from '@dxos/ui-types';
+
+import { hueShades } from './defs';
 import { mx } from './util';
 
 // prettier-ignore

package/src/css/DESIGN_SYSTEM.md

@@ -6,11 +6,11 @@ This document describes how color tokens are organized in `ui-theme`, the naming
 
 Three layers, each consuming the one below:
 
-| Tier        | File                                         | Purpose                                                                                                                                                                 | Example                                                                 |
-| ----------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| 1. Scale    | [`theme/palette.css`](./theme/palette.css)   | Raw color values. Extends Tailwind's neutral/blue scales with intermediate stops and aliases the `primary-*` ramp to `blue-*`.                                          | `--color-neutral-150`, `--color-primary-500`                            |
-| 2. Hue role | [`theme/styles.css`](./theme/styles.css)     | Per-hue role tokens for every Tailwind hue plus `neutral`. Six roles each: `bg`, `bg-hover`, `surface`, `fg`, `text`, `border`. Light/dark resolved via `light-dark()`. | `--color-red-surface`, `--color-neutral-border`                         |
-| 3. Semantic | [`theme/semantic.css`](./theme/semantic.css) | Named UI surfaces and states. May reference hue-role tokens (e.g. `error-surface` → `rose-surface`) or compose directly from the scale.                                 | `--color-card-surface`, `--color-current-surface`, `--color-error-text` |
+| Tier        | File                                                                                  | Purpose                                                                                                                                                                 | Example                                                                 |
+| ----------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
+| 1. Scale    | [`theme/palette.css`](./theme/palette.css)                                            | Raw color values. Extends Tailwind's neutral/blue scales with intermediate stops and aliases the `primary-*` ramp to `blue-*`.                                          | `--color-neutral-150`, `--color-primary-500`                            |
+| 2. Hue role | [`theme/styles.css`](./theme/styles.css)                                              | Per-hue role tokens for every Tailwind hue plus `neutral`. Six roles each: `bg`, `bg-hover`, `surface`, `fg`, `text`, `border`. Light/dark resolved via `light-dark()`. | `--color-red-surface`, `--color-neutral-border`                         |
+| 3. Semantic | [`theme/surfaces.css`](./theme/surfaces.css) + [`theme/roles.css`](./theme/roles.css) | Named UI surfaces/aspects, and the non-surface roles. May reference hue-role tokens (e.g. `error-surface` → `rose-surface`) or compose directly from the scale.         | `--color-card-surface`, `--color-current-surface`, `--color-error-text` |
 
 A consumer should reach for the highest tier that fits. Use `bg-card-surface`, not `bg-neutral-825`. Use `text-error-text`, not `text-rose-700`.
 
@@ -38,76 +38,114 @@ Token names follow `--color-{name}-{part}[-{state}]`:
 ## Surfaces
 
 Surfaces are governed by a strict elevation ladder: **lighter = higher = closer to the viewer** in dark
-mode; inverted toward white in light mode. Every named surface token is an alias of exactly one
-`--dx-elevation-N` level. Never set a surface to a raw scale value — pick the level that matches the
-role and point the token there.
-
-| Level | Name     | Dark    | Light   | Named surfaces                                                                |
-| ----- | -------- | ------- | ------- | ----------------------------------------------------------------------------- |
-| 0     | `void`   | `n-950` | `n-200` | scrim base, window gaps                                                       |
-| 1     | `rail`   | `n-900` | `n-175` | `l0-surface` (icon rail)                                                      |
-| 2     | `chrome` | `n-875` | `n-150` | `sidebar-surface`, `header-surface`, `l1-surface`, `r0-surface`, `r1-surface` |
-| 3     | `canvas` | `n-850` | `n-125` | `base-surface`, `deck-surface`                                                |
-| 4     | `raised` | `n-825` | `n-100` | `card-surface`, `group-surface`, `input-surface`                              |
-| 5     | `bar`    | `n-800` | `n-75`  | `toolbar-surface` (sticky, drop-shadowed)                                     |
-| 6     | `modal`  | `n-775` | `n-50`  | `modal-surface` (dialogs)                                                     |
-| 7     | `float`  | `n-750` | `white` | `popover-surface` (menus, popovers, toasts, tooltips)                         |
-
-The primitive `--dx-elevation-0…7` is defined in `semantic.css` using `light-dark()`. Raw scale values
-(`n-*`) are in `palette.css` — the table above is for human reference only.
+mode; inverted toward white in light mode. Chrome sits **below** the document canvas and content
+surfaces sit **above** it, so the app reads as paper on a desk rather than paper in a well.
+
+There are exactly six **levels**. Every named surface token is an alias of exactly one of them —
+never set a surface to a raw scale value. This table mirrors the assignments in `surfaces.css`,
+which is the source of truth; update both together.
+
+| Level     | Dark    | Light   | Named surfaces                                             |
+| --------- | ------- | ------- | ---------------------------------------------------------- |
+| `sunken`  | `n-950` | `n-300` | `deck-surface`, scrim base                                 |
+| `chrome`  | `n-925` | `n-250` | `sidebar-surface`, `header-surface`, `l0/l1/r0/r1-surface` |
+| `base`    | `n-900` | `n-200` | `base-surface`, `attention-surface`                        |
+| `raised`  | `n-850` | `n-125` | `card-surface`                                             |
+| `overlay` | `n-800` | `n-75`  | `modal-surface` (dialogs, sheets, drawers)                 |
+| `popup`   | `n-775` | `n-50`  | `popover-surface` (menus, popovers, toasts, tooltips)      |
+
+The primitive `--dx-surface-{sunken…popup}` is defined in `surfaces.css` using `light-dark()`. Raw
+scale values (`n-*`) are in `palette.css` — the table above is for human reference only.
+
+### Aspects — derived, not levels
+
+Toolbars, groups and inputs are **not** levels. They are _aspects_: a step off whichever surface
+hosts them, computed with relative oklch from `--surface-bg` and stepped by `--dx-lift` (`+1` dark,
+`-1` light, set in `base.css`). That is what makes nesting work — a toolbar in a card and a toolbar
+on the canvas each read as a bar on their own host instead of jumping to one global tone.
+
+| Aspect        | Offset  | Tokens                                            |
+| ------------- | ------- | ------------------------------------------------- |
+| bar           | `0.025` | `toolbar-surface`                                 |
+| well          | `0.05`  | `group-surface`, `input-surface`, `focus-surface` |
+| hover-subtle  | `0.02`  | `hover-surface-subtle`                            |
+| hover         | `0.08`  | `hover-surface`, `group-alt-surface`              |
+| current       | `0.10`  | `current-surface`, `selected-surface`             |
+| current-hover | `0.12`  | `current-surface-hover`, `selected-surface-hover` |
+
+**Entering a zone.** A zone paints the level _and_ publishes `--surface-bg`, from which the aspects
+re-derive for that subtree. Use `data-surface="<level>"` or the equivalent `dx-*-surface` class — a
+bare `bg-*-surface` utility paints the colour but publishes nothing, so every aspect inside it
+collapses onto the base-surface fallback.
+
+Two mechanical rules govern the derivation blocks in `components/surface.css`:
+
+- **Aliases must be re-declared per zone.** A `--color-x: var(--color-y)` alias substitutes at the
+  scope that _declares_ it, so an alias written only at `:root` freezes to the root value.
+- **Bar and well re-derive only in level zones.** An aspect zone defines its own `--surface-bg`
+  _from_ those tokens, so re-deriving them there would be circular.
 
 ### Visual hierarchy (dark)
 
 ```text
-popover/float   n-750  ↑ highest / closest to viewer
-modal/dialog    n-775
-toolbar         n-800  (sticky bar; content passes beneath)
-card/raised     n-825
-canvas/deck     n-850
-chrome/sidebar  n-875
-rail/L0         n-900
-void            n-950  ↓ lowest
+popup           n-775  ↑ highest / closest to viewer
+overlay         n-800
+raised / card   n-850
+base / canvas   n-900
+chrome/sidebar  n-925
+sunken / deck   n-950  ↓ lowest
 ```
 
-Each surface that hosts text declares a matching `*-fg` (defaulting to `n-950 / n-50`).
+Each surface that hosts text declares a matching `*-fg` (defaulting to `n-950 / n-150`).
 
 ## Elevation primitive
 
-The `--dx-elevation-0…7` custom properties in `semantic.css` are the single source of truth for the
+The `--dx-surface-*` custom properties in `surfaces.css` are the single source of truth for the
 surface ladder. They are private (`--dx-*` prefix) — never use them directly in component CSS; use the
 named surface tokens (`bg-card-surface`, `dx-modal-surface`, etc.) instead.
 
 When adding a new surface:
 
-1. Decide which elevation level the new surface belongs to (see the table above).
-2. Add `--color-<name>-surface: var(--dx-elevation-N);` in the Surfaces block of `semantic.css`.
+1. Decide whether it is a **level** or an **aspect**. If it should shift with whatever hosts it
+   (a bar, a well, a state), it is an aspect — add it to the aspect block, not the ladder.
+2. For a level, add `--color-<name>-surface: var(--dx-surface-<level>);` in `surfaces.css`.
 3. Add a matching `--color-<name>-fg` if text/icons sit on it.
-4. If the surface needs a utility class (like `dx-modal-surface`), add it to `surface.css`.
+4. Add the zone to `surface.css` so it publishes `--surface-bg` and re-derives the aspects.
 
 ## State tokens (rationalized)
 
 The system has three orthogonal states. Pick by what the ARIA / markup is saying.
 
-| State                      | Token                    | When                                                             | Value             |
-| -------------------------- | ------------------------ | ---------------------------------------------------------------- | ----------------- |
-| Active item, one-of-N      | `current-surface`        | `aria-current=true` (nav cursor, current row, current path)      | `n-100` / `n-900` |
-| Hovering on current item   | `current-surface-hover`  | pointer-over on a `current` element                              | `n-200` / `n-800` |
-| Text on a current surface  | `current-fg`             | text/icon color paired with `current-surface`                    | `n-950` / `n-50`  |
-| Selected / checked         | `selected-surface`       | `aria-selected=true` (multi-select, listbox option, checked row) | `n-150` / `n-850` |
-| Hovering on selected       | `selected-surface-hover` | pointer-over on a `selected` element                             | `n-250` / `n-750` |
-| Text on a selected surface | `selected-fg`            | text/icon color paired with `selected-surface`                   | `n-950` / `n-50`  |
-| Transient pointer-over     | `hover-surface`          | `:hover`, Radix `data-highlighted` (keyboard cursor in menus)    | `n-250` / `n-750` |
-| Text on a transient hover  | `hover-fg`               | text/icon color paired with `hover-surface`                      | `n-950` / `n-50`  |
+State surfaces are **derived from the host surface**, not fixed scale values: each token is a
+relative-oklch lightness offset from `--surface-bg` (published by the enclosing `dx-*-surface` zone
+class — see `components/surface.css`), darker in light mode and lighter in dark mode, so a highlight
+stays visible at any elevation. Offsets (L): hover-subtle ∓0.02, hover ∓0.08, current ∓0.10,
+current-hover ∓0.12; `selected-*` aliases `current-*`.
+
+| State                      | Token                    | When                                                             |
+| -------------------------- | ------------------------ | ---------------------------------------------------------------- |
+| Active item, one-of-N      | `current-surface`        | `aria-current=true` (nav cursor, current row, current path)      |
+| Hovering on current item   | `current-surface-hover`  | pointer-over on a `current` element                              |
+| Text on a current surface  | `current-fg`             | text/icon color paired with `current-surface`                    |
+| Selected / checked         | `selected-surface`       | `aria-selected=true` (multi-select, listbox option, checked row) |
+| Hovering on selected       | `selected-surface-hover` | pointer-over on a `selected` element                             |
+| Text on a selected surface | `selected-fg`            | text/icon color paired with `selected-surface`                   |
+| Transient pointer-over     | `hover-surface`          | `:hover`, Radix `data-highlighted` (keyboard cursor in menus)    |
+| Subtle region hover        | `hover-surface-subtle`   | large targets (rows, tiles) via `dx-hover`                       |
+| Text on a transient hover  | `hover-fg`               | text/icon color paired with `hover-surface`                      |
 
 **Why these three.** `current` describes one-of-N navigation/selection state ("you are here"); `selected` describes a checked item in a set (multi-select-able); `hover` is transient pointer feedback. Driving the distinction off ARIA keeps markup and tokens in sync.
 
 ### Visual hierarchy (state, dark)
 
+Relative to the host surface `S` (= `--surface-bg`), in oklch lightness:
+
 ```text
-card-surface          n-825    resting
-current-surface       n-100 / n-900    "I am the active one"
-current-surface-hover n-200 / n-800    hovering the active one
-hover-surface         n-250 / n-750    transient pointer-over anywhere else
+S                     resting
+S + 0.02              subtle region hover (hover-surface-subtle)
+S + 0.08              transient pointer-over (hover-surface)
+S + 0.10              "I am the active one" (current-surface / selected-surface)
+S + 0.12              hovering the active one (current-surface-hover)
 ```
 
 ## Consolidation: tokens that go away
@@ -180,8 +218,8 @@ Each provides `bg`, `bg-hover`, `surface`, `fg`, `text`, `border`.
 
 ## Adding a new token
 
-1. Does an existing semantic token already cover it? For a new named surface, check the elevation ladder first — the new surface probably fits an existing level and should alias `--dx-elevation-N` rather than a raw scale value.
-2. Does it represent a new named surface, state, or status? Add it to `semantic.css` referencing scale or hue-role tokens — never raw hex.
+1. Does an existing semantic token already cover it? For a new named surface, check the elevation ladder first — the new surface probably fits an existing level and should alias `--dx-surface-<level>` rather than a raw scale value.
+2. Does it represent a new named surface, state, or status? Add it to `surfaces.css` (surfaces/aspects) or `roles.css` (everything else), referencing scale or hue-role tokens — never raw hex.
 3. Follow the suffix order: `{name}-{part}[-{state}]`.
 4. If the new token will be used through a Tailwind utility that the source-scan can't see (e.g. CSS file, dynamic class), add it to `@source inline(...)` in [`main.css`](./main.css).
 5. If it ships state variants (`-hover`, `-active`), declare them adjacent to the base in the same block.

package/src/css/base/base.css

@@ -5,6 +5,36 @@
 @layer dx-base {
   :root {
     color-scheme: light;
+    /* Direction an aspect moves off its host surface: away from the canvas in either theme.
+     * Aspects multiply their offset by this instead of branching on light-dark(), which resolves
+     * unreliably when nested inside a relative-color expression. */
+    --dx-lift: -1;
+    /*
+     * Light attenuation.
+     *
+     * Lightness is not perceptually symmetric: subtracting 0.10 L from a near-white surface reads
+     * far heavier than adding 0.10 to a near-black one. Every aspect family therefore multiplies
+     * its offset by a factor declared here — dark sets them all to 1, so the dark appearance is the
+     * reference and light is tuned against it. One family, one factor, one place.
+     *
+     * Family      Offsets (dark)          Light   Light dL on the canvas
+     *   state       .02 / .08 / .10 / .12   0.5     hover .04, selected .05
+     *   well        .05                     0.5     input fill .025
+     *   separator   .089 / .115 / .064      0.75    subdued .067, input .086
+     *   sep-line    .166                    0.45    .075 — near the floor; subdued is .067
+     *   bar         .025                    1       toolbars read correctly as-is
+     *   placeholder .30                     1       ink, not a surface; wants the contrast
+     *   scrollbar   .23 / .30 / .34         1       was invisible in light before deriving
+     *
+     * Adjust a family by changing its factor, not by editing offsets — those are the dark contract.
+     */
+    --dx-attenuate-state: 0.5;
+    --dx-attenuate-well: 0.5;
+    --dx-attenuate-separator: 0.75;
+    --dx-attenuate-separator-line: 0.45;
+    --dx-attenuate-bar: 1;
+    --dx-attenuate-placeholder: 1;
+    --dx-attenuate-scrollbar: 1;
     touch-action: pan-x pan-y;
     font-synthesis: none;
     font-variation-settings:
@@ -17,6 +47,15 @@
 
   .dark {
     color-scheme: dark;
+    --dx-lift: 1;
+    /* Dark is the reference: every family runs at full strength. */
+    --dx-attenuate-state: 1;
+    --dx-attenuate-well: 1;
+    --dx-attenuate-separator: 1;
+    --dx-attenuate-separator-line: 1;
+    --dx-attenuate-bar: 1;
+    --dx-attenuate-placeholder: 1;
+    --dx-attenuate-scrollbar: 1;
   }
 
   button {

package/src/css/components/button.css

@@ -10,12 +10,16 @@
 
   /* Base styles */
   .dx-button {
-    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2rem] px-3;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden;
+    /* Geometry comes from the density knobs, not from utilities in the class list: `utilities` is
+     * the last cascade layer, so any `px-*`/`h-*` a theme emits would silently beat a rule here. */
+    min-block-size: var(--dx-control);
+    padding-inline: var(--dx-control-pad);
     @apply font-medium transition-colors duration-100 ease-linear bg-input-bg;
     /* The default variant inherits ambient valence colors when rendered inside a valence surface
      * (e.g. Message.Root, which sets --dx-valence-*); otherwise it falls back to the base input styling. */
     &[data-variant='default'] {
-      color: var(--dx-valence-text, inherit);
+      /* color: var(--dx-valence-text, inherit); */
       background: var(--dx-valence-bg, var(--color-input-bg));
     }
     /* Toggle / tab group: the selected item reads as standard text on a surface-relative fill (selected-surface
@@ -64,8 +68,17 @@
         @apply bg-hover-surface;
       }
 
+      /*
+       * Light moves the button's OWN fill: the host-derived hover sits above the fill here, so it
+       * lightened on hover and landed on `--color-selected-surface`. Dark keeps the host tint — the
+       * dark ladder puts it clear of the fill already, and the token cannot carry it: declared at
+       * `:root`, `var(--color-hover-surface)` would freeze there and stop tracking the zone.
+       */
       &[data-variant='default']:hover {
         color: var(--dx-valence-text);
+        background-color: var(--dx-valence-bg-hover, var(--color-input-bg-hover));
+      }
+      .dark &[data-variant='default']:hover {
         background-color: var(--dx-valence-bg-hover, var(--color-hover-surface));
       }
 
@@ -116,21 +129,13 @@
   .dx-button:not([data-props~='wrap']) {
     @apply truncate;
   }
-  .dx-button[data-density='lg'] {
-    @apply min-h-[2.5rem] px-3;
-  }
+  /* `data-density` is handled by the shared density rule in theme/spacing.css, which sets
+   * --dx-control / --dx-control-pad; only the type-scale tweak is button-specific. */
   .dx-button[data-density='sm'] {
-    @apply min-h-[1.75rem] px-2;
+    @apply text-xs;
   }
-  .dx-button[data-density='xs'] {
-    @apply min-h-[1.5rem] px-1 text-xs;
-  }
-  .dx-button[data-density='xs'].aspect-square {
-    @apply size-6 px-0;
-  }
-  @media (pointer: fine) {
-    .dx-button[data-density='md'] {
-      @apply min-h-[2rem] px-2.5;
-    }
+  .dx-button.aspect-square {
+    padding-inline: 0;
+    inline-size: var(--dx-control);
   }
 }

package/src/css/components/callout.css

@@ -0,0 +1,140 @@
+/**
+ * Callout — hue-tinted panel: applies bg-{hue}-surface / border-{hue}-border / text-{hue}-fg via a
+ * data-hue attribute (on the element itself or an ancestor) or a BEM modifier.
+ * Example: <div className='dx-callout' data-hue='blue'>...</div>
+ * Example: <div className='dx-callout dx-callout--blue'>...</div>
+ */
+
+@layer dx-components {
+  .dx-callout[data-hue='neutral'],
+  :where([data-hue='neutral']) .dx-callout,
+  .dx-callout--neutral {
+    @apply bg-neutral-surface border-neutral-border text-neutral-fg;
+  }
+
+  .dx-callout[data-hue='red'],
+  :where([data-hue='red']) .dx-callout,
+  .dx-callout--red {
+    @apply bg-red-surface border-red-border text-red-fg;
+  }
+
+  .dx-callout[data-hue='orange'],
+  :where([data-hue='orange']) .dx-callout,
+  .dx-callout--orange {
+    @apply bg-orange-surface border-orange-border text-orange-fg;
+  }
+
+  .dx-callout[data-hue='amber'],
+  :where([data-hue='amber']) .dx-callout,
+  .dx-callout--amber {
+    @apply bg-amber-surface border-amber-border text-amber-fg;
+  }
+
+  .dx-callout[data-hue='yellow'],
+  :where([data-hue='yellow']) .dx-callout,
+  .dx-callout--yellow {
+    @apply bg-yellow-surface border-yellow-border text-yellow-fg;
+  }
+
+  .dx-callout[data-hue='lime'],
+  :where([data-hue='lime']) .dx-callout,
+  .dx-callout--lime {
+    @apply bg-lime-surface border-lime-border text-lime-fg;
+  }
+
+  .dx-callout[data-hue='green'],
+  :where([data-hue='green']) .dx-callout,
+  .dx-callout--green {
+    @apply bg-green-surface border-green-border text-green-fg;
+  }
+
+  .dx-callout[data-hue='emerald'],
+  :where([data-hue='emerald']) .dx-callout,
+  .dx-callout--emerald {
+    @apply bg-emerald-surface border-emerald-border text-emerald-fg;
+  }
+
+  .dx-callout[data-hue='teal'],
+  :where([data-hue='teal']) .dx-callout,
+  .dx-callout--teal {
+    @apply bg-teal-surface border-teal-border text-teal-fg;
+  }
+
+  .dx-callout[data-hue='cyan'],
+  :where([data-hue='cyan']) .dx-callout,
+  .dx-callout--cyan {
+    @apply bg-cyan-surface border-cyan-border text-cyan-fg;
+  }
+
+  .dx-callout[data-hue='sky'],
+  :where([data-hue='sky']) .dx-callout,
+  .dx-callout--sky {
+    @apply bg-sky-surface border-sky-border text-sky-fg;
+  }
+
+  .dx-callout[data-hue='blue'],
+  :where([data-hue='blue']) .dx-callout,
+  .dx-callout--blue {
+    @apply bg-blue-surface border-blue-border text-blue-fg;
+  }
+
+  .dx-callout[data-hue='indigo'],
+  :where([data-hue='indigo']) .dx-callout,
+  .dx-callout--indigo {
+    @apply bg-indigo-surface border-indigo-border text-indigo-fg;
+  }
+
+  .dx-callout[data-hue='violet'],
+  :where([data-hue='violet']) .dx-callout,
+  .dx-callout--violet {
+    @apply bg-violet-surface border-violet-border text-violet-fg;
+  }
+
+  .dx-callout[data-hue='purple'],
+  :where([data-hue='purple']) .dx-callout,
+  .dx-callout--purple {
+    @apply bg-purple-surface border-purple-border text-purple-fg;
+  }
+
+  .dx-callout[data-hue='fuchsia'],
+  :where([data-hue='fuchsia']) .dx-callout,
+  .dx-callout--fuchsia {
+    @apply bg-fuchsia-surface border-fuchsia-border text-fuchsia-fg;
+  }
+
+  .dx-callout[data-hue='pink'],
+  :where([data-hue='pink']) .dx-callout,
+  .dx-callout--pink {
+    @apply bg-pink-surface border-pink-border text-pink-fg;
+  }
+
+  .dx-callout[data-hue='rose'],
+  :where([data-hue='rose']) .dx-callout,
+  .dx-callout--rose {
+    @apply bg-rose-surface border-rose-border text-rose-fg;
+  }
+
+  .dx-callout[data-hue='info'],
+  :where([data-hue='info']) .dx-callout,
+  .dx-callout--info {
+    @apply bg-info-surface border-info-border text-info-fg;
+  }
+
+  .dx-callout[data-hue='success'],
+  :where([data-hue='success']) .dx-callout,
+  .dx-callout--success {
+    @apply bg-success-surface border-success-border text-success-fg;
+  }
+
+  .dx-callout[data-hue='warning'],
+  :where([data-hue='warning']) .dx-callout,
+  .dx-callout--warning {
+    @apply bg-warning-surface border-warning-border text-warning-fg;
+  }
+
+  .dx-callout[data-hue='error'],
+  :where([data-hue='error']) .dx-callout,
+  .dx-callout--error {
+    @apply bg-error-surface border-error-border text-error-fg;
+  }
+}

package/src/css/components/input.css

@@ -0,0 +1,36 @@
+@layer dx-components {
+  /*
+   * Shared input-box treatment — the hairline-bordered surface used by text inputs and by CodeMirror
+   * editors styled to match them (`Input` default variant, `MarkdownField`, `RefEditor`, the inbox
+   * composer `Editor`). Single source for the whole chrome: surface + border + radius + padding,
+   * the focus-within colour shift, and the subtle focus ring (mirrors `dx-focus-ring`) — applied
+   * whether the box itself is the focusable or it wraps an inner focusable (CodeMirror
+   * contenteditable, adorned field). Callers add only sizing (height/min-height) and layout;
+   * element paddings from density utilities (`px-*`/`py-0`) still win over the defaults here.
+   */
+  .dx-input {
+    @apply transition-colors border border-input-separator rounded-xs p-1 px-2;
+
+    /*
+     * A zone, not a bare fill: the input publishes its own surface so what sits on it — the
+     * placeholder above all — derives from the input's colour rather than from the host behind it.
+     * `@apply` cannot take a zone class, hence the two lines rather than `dx-input-surface`.
+     */
+    --surface-bg: var(--color-input-surface);
+    background-color: var(--surface-bg);
+
+    &:focus {
+      @apply outline-hidden;
+    }
+
+    &:focus-within {
+      @apply bg-focus-surface border-separator;
+    }
+
+    /* Border matches the ring while it shows, so the focus treatment reads as one band (no inner line). */
+    &:not([disabled]):focus-visible,
+    &:not([disabled]):has(:focus-visible) {
+      @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)] border-[color:var(--color-focus-ring-subtle)];
+    }
+  }
+}

package/src/css/components/state.css

@@ -1,7 +1,7 @@
 /**
  * Selected / Current / Highlighted state utilities.
  *
- * See `./selected.md` for the ARIA pairing grammar — every class below
+ * See `./state.md` for the ARIA pairing grammar — every class below
  * fires off a specific attribute and silently does nothing without it.
  */
 
@@ -23,13 +23,6 @@
       hover:aria-selected:bg-selected-surface-hover hover:aria-selected:text-selected-fg
       hover:aria-[current=true]:bg-current-surface-hover hover:aria-[current=true]:text-current-fg;
   }
-  .dx-hover-row {
-    @apply group-hover/row:bg-hover-surface-subtle! group-hover/row:text-hover-fg!
-      group-hover/row:group-aria-selected/row:bg-selected-surface-hover!
-      group-hover/row:group-aria-selected/row:text-selected-fg!
-      group-hover/row:group-aria-[current=true]/row:bg-current-surface-hover!
-      group-hover/row:group-aria-[current=true]/row:text-current-fg!;
-  }
 
   /*
    * Pairs with `aria-selected`. Use for listbox/option selection (master/detail).
@@ -61,9 +54,6 @@
       aria-[current=true]:bg-current-surface! aria-[current=true]:text-current-fg!
       aria-[current=true]:after:ring-focus-ring-subtle!;
   }
-  .dx-current-row {
-    @apply group-aria-[current=true]/row:bg-current-surface! group-aria-[current=true]/row:text-current-fg!;
-  }
 
   /*
    * Pairs with Radix-managed `data-highlighted`. Don't set the attribute manually.

package/src/css/components/state.md

@@ -1,6 +1,6 @@
 # `dx-*` selection / navigation grammar
 
-Companion to `selected.css`. The four selection-state utilities below are
+Companion to `state.css`. The four selection-state utilities below are
 each bound to a specific ARIA attribute (or `data-*`) selector. **The
 class only fires when the matching ARIA attribute is set on the same
 element.** Mismatches (e.g. `dx-current` paired with `aria-selected`)