@dxos/ui-theme 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/src/css/components/focus.css

@@ -12,10 +12,10 @@
       }
 
       &:focus-visible {
-        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
 
         &[data-variant='primary'] {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
@@ -45,10 +45,10 @@
       }
 
       &:focus {
-        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-neutral-focus-indicator)];
+        @apply ring-focus-line ring-offset-focus-offset z-[1] ring-[var(--color-focus-ring-subtle)];
 
         &[data-variant='primary'] {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
@@ -79,10 +79,10 @@
   .dx-focus-ring-group:focus-visible .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x:focus-visible .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y:focus-visible .dx-focus-ring-group-y-indicator {
-    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
 
     &[data-variant='primary'] {
-      @apply ring-[var(--color-accent-focus-indicator)];
+      @apply ring-[var(--color-focus-ring)];
     }
 
     &:hover {
@@ -97,10 +97,10 @@
   .dx-focus-ring-group-always:focus .dx-focus-ring-group-indicator,
   .dx-focus-ring-group-x-always:focus .dx-focus-ring-group-x-indicator,
   .dx-focus-ring-group-y-always:focus .dx-focus-ring-group-y-indicator {
-    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-neutral-focus-indicator)];
+    @apply ring-focus-line ring-offset-focus-offset ring-[var(--color-focus-ring-subtle)];
 
     &[data-variant='primary'] {
-      @apply ring-[var(--color-accent-focus-indicator)];
+      @apply ring-[var(--color-focus-ring)];
     }
 
     &:hover {
@@ -145,11 +145,11 @@
 
       &:focus-visible {
         &::after {
-          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {
@@ -178,11 +178,11 @@
 
       &:focus {
         &::after {
-          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-neutral-focus-indicator)];
+          @apply ring-focus-line ring-offset-focus-offset ring-inset z-[1] ring-[var(--color-focus-ring-subtle)];
         }
 
         &[data-variant='primary']::after {
-          @apply ring-[var(--color-accent-focus-indicator)];
+          @apply ring-[var(--color-focus-ring)];
         }
 
         &:hover {

package/src/css/components/link.css

@@ -4,6 +4,9 @@
 
 @layer dx-components {
   .dx-link {
-    @apply text-accent-text hover:text-accent-text-hover;
+    @apply text-accent-text hover:text-accent-text-hover cursor-pointer;
+  }
+  .dx-link-hover {
+    @apply hover:text-accent-text-hover! cursor-pointer;
   }
 }

package/src/css/components/panel.css

@@ -1,117 +1,117 @@
 /**
- * Panel — applies bg-{hue}-surface / text-{hue}-surface-text / border-{hue}-border tokens via data-hue attribute or BEM modifier.
+ * Panel — applies bg-{hue}-surface / text-{hue}-fg / border-{hue}-border tokens via data-hue attribute or BEM modifier.
  * Example: <div className='dx-panel' data-hue='blue'>...</div>
  * Example: <div className='dx-panel dx-panel--blue'>...</div>
  */
 
 @layer dx-components {
-  .dx-panel[data-hue='neutral'],
+  [data-hue='neutral'] .dx-panel,
   .dx-panel--neutral {
-    @apply bg-neutral-surface text-neutral-surface-text border-neutral-border;
+    @apply bg-neutral-surface text-neutral-fg border-neutral-border;
   }
 
-  .dx-panel[data-hue='red'],
+  [data-hue='red'] .dx-panel,
   .dx-panel--red {
-    @apply bg-red-surface text-red-surface-text border-red-border;
+    @apply bg-red-surface text-red-fg border-red-border;
   }
 
-  .dx-panel[data-hue='orange'],
+  [data-hue='orange'] .dx-panel,
   .dx-panel--orange {
-    @apply bg-orange-surface text-orange-surface-text border-orange-border;
+    @apply bg-orange-surface text-orange-fg border-orange-border;
   }
 
-  .dx-panel[data-hue='amber'],
+  [data-hue='amber'] .dx-panel,
   .dx-panel--amber {
-    @apply bg-amber-surface text-amber-surface-text border-amber-border;
+    @apply bg-amber-surface text-amber-fg border-amber-border;
   }
 
-  .dx-panel[data-hue='yellow'],
+  [data-hue='yellow'] .dx-panel,
   .dx-panel--yellow {
-    @apply bg-yellow-surface text-yellow-surface-text border-yellow-border;
+    @apply bg-yellow-surface text-yellow-fg border-yellow-border;
   }
 
-  .dx-panel[data-hue='lime'],
+  [data-hue='lime'] .dx-panel,
   .dx-panel--lime {
-    @apply bg-lime-surface text-lime-surface-text border-lime-border;
+    @apply bg-lime-surface text-lime-fg border-lime-border;
   }
 
-  .dx-panel[data-hue='green'],
+  [data-hue='green'] .dx-panel,
   .dx-panel--green {
-    @apply bg-green-surface text-green-surface-text border-green-border;
+    @apply bg-green-surface text-green-fg border-green-border;
   }
 
-  .dx-panel[data-hue='emerald'],
+  [data-hue='emerald'] .dx-panel,
   .dx-panel--emerald {
-    @apply bg-emerald-surface text-emerald-surface-text border-emerald-border;
+    @apply bg-emerald-surface text-emerald-fg border-emerald-border;
   }
 
-  .dx-panel[data-hue='teal'],
+  [data-hue='teal'] .dx-panel,
   .dx-panel--teal {
-    @apply bg-teal-surface text-teal-surface-text border-teal-border;
+    @apply bg-teal-surface text-teal-fg border-teal-border;
   }
 
-  .dx-panel[data-hue='cyan'],
+  [data-hue='cyan'] .dx-panel,
   .dx-panel--cyan {
-    @apply bg-cyan-surface text-cyan-surface-text border-cyan-border;
+    @apply bg-cyan-surface text-cyan-fg border-cyan-border;
   }
 
-  .dx-panel[data-hue='sky'],
+  [data-hue='sky'] .dx-panel,
   .dx-panel--sky {
-    @apply bg-sky-surface text-sky-surface-text border-sky-border;
+    @apply bg-sky-surface text-sky-fg border-sky-border;
   }
 
-  .dx-panel[data-hue='blue'],
+  [data-hue='blue'] .dx-panel,
   .dx-panel--blue {
-    @apply bg-blue-surface text-blue-surface-text border-blue-border;
+    @apply bg-blue-surface text-blue-fg border-blue-border;
   }
 
-  .dx-panel[data-hue='indigo'],
+  [data-hue='indigo'] .dx-panel,
   .dx-panel--indigo {
-    @apply bg-indigo-surface text-indigo-surface-text border-indigo-border;
+    @apply bg-indigo-surface text-indigo-fg border-indigo-border;
   }
 
-  .dx-panel[data-hue='violet'],
+  [data-hue='violet'] .dx-panel,
   .dx-panel--violet {
-    @apply bg-violet-surface text-violet-surface-text border-violet-border;
+    @apply bg-violet-surface text-violet-fg border-violet-border;
   }
 
-  .dx-panel[data-hue='purple'],
+  [data-hue='purple'] .dx-panel,
   .dx-panel--purple {
-    @apply bg-purple-surface text-purple-surface-text border-purple-border;
+    @apply bg-purple-surface text-purple-fg border-purple-border;
   }
 
-  .dx-panel[data-hue='fuchsia'],
+  [data-hue='fuchsia'] .dx-panel,
   .dx-panel--fuchsia {
-    @apply bg-fuchsia-surface text-fuchsia-surface-text border-fuchsia-border;
+    @apply bg-fuchsia-surface text-fuchsia-fg border-fuchsia-border;
   }
 
-  .dx-panel[data-hue='pink'],
+  [data-hue='pink'] .dx-panel,
   .dx-panel--pink {
-    @apply bg-pink-surface text-pink-surface-text border-pink-border;
+    @apply bg-pink-surface text-pink-fg border-pink-border;
   }
 
-  .dx-panel[data-hue='rose'],
+  [data-hue='rose'] .dx-panel,
   .dx-panel--rose {
-    @apply bg-rose-surface text-rose-surface-text border-rose-border;
+    @apply bg-rose-surface text-rose-fg border-rose-border;
   }
 
-  .dx-panel[data-hue='info'],
+  [data-hue='info'] .dx-panel,
   .dx-panel--info {
-    @apply bg-info-surface text-info-surface-text border-info-border;
+    @apply bg-info-surface text-info-fg border-info-border;
   }
 
-  .dx-panel[data-hue='success'],
+  [data-hue='success'] .dx-panel,
   .dx-panel--success {
-    @apply bg-success-surface text-success-surface-text border-success-border;
+    @apply bg-success-surface text-success-fg border-success-border;
   }
 
-  .dx-panel[data-hue='warning'],
+  [data-hue='warning'] .dx-panel,
   .dx-panel--warning {
-    @apply bg-warning-surface text-warning-surface-text border-warning-border;
+    @apply bg-warning-surface text-warning-fg border-warning-border;
   }
 
-  .dx-panel[data-hue='error'],
+  [data-hue='error'] .dx-panel,
   .dx-panel--error {
-    @apply bg-error-surface text-error-surface-text border-error-border;
+    @apply bg-error-surface text-error-fg border-error-border;
   }
 }

package/src/css/components/state.css

@@ -0,0 +1,76 @@
+/**
+ * Selected / Current / Highlighted state utilities.
+ *
+ * See `./selected.md` for the ARIA pairing grammar — every class below
+ * fires off a specific attribute and silently does nothing without it.
+ */
+
+@layer dx-components {
+  /*
+   * Pure visual affordance, no ARIA pair. Combine with dx-selected or dx-current.
+   *
+   * Picks the hover variant matching the element's underlying state:
+   *   - neither aria-selected nor aria-current → hover-surface
+   *   - aria-selected="true"                   → selected-surface-hover
+   *   - aria-current="true"                    → current-surface-hover (wins if both)
+   *
+   * Higher-specificity rules (attribute selectors) override the plain :hover rule,
+   * and `aria-current` is listed last so it beats `aria-selected` at equal specificity.
+   */
+  .dx-hover {
+    @apply cursor-pointer
+      hover:bg-hover-surface-subtle! hover:text-hover-fg!
+      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).
+   * `!` is required: these utilities live in the `dx-components` layer, but
+   * background utilities like `bg-card-surface` live in Tailwind's
+   * `utilities` layer (declared later in the cascade), so without
+   * `!important` the card background would override the state colour.
+   *
+   * NOTE: Declared before `.dx-current` so that when an element has both
+   * `aria-selected="true"` and `aria-current="true"`, `dx-current` wins at
+   * equal specificity (consistent with how `dx-hover` resolves the same
+   * conflict).
+   */
+  .dx-selected {
+    @apply aria-selected:bg-selected-surface! aria-selected:text-selected-fg!
+      aria-selected:font-semibold aria-selected:tracking-normal
+      transition-[color,font-variation-settings,letter-spacing];
+  }
+
+  /*
+   * Pairs with `aria-current="true|page|…"`. Use for "you are here" navigation.
+   *
+   * The ring uses the subdued focus indicator (neutral) rather than the
+   * accent blue — `dx-current` marks position, not focus, so a saturated
+   * ring would compete with the actual keyboard focus ring.
+   */
+  .dx-current {
+    @apply dx-ring-pseudo
+      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.
+   */
+  .dx-highlighted {
+    @apply data-[highlighted]:bg-current-surface
+      data-[highlighted]:text-current-fg
+      hover:data-[highlighted]:bg-current-surface-hover;
+  }
+}

package/src/css/components/state.md

@@ -0,0 +1,101 @@
+# `dx-*` selection / navigation grammar
+
+Companion to `selected.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`)
+silently render as a plain row.
+
+| Class            | Bound selector         | Pair with                          | Use when                                                                                                                                                                                                    |
+| ---------------- | ---------------------- | ---------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `dx-hover`       | `hover:`               | (no ARIA — pure visual affordance) | Always, on any clickable row. Adds the cursor + hover bg/text.                                                                                                                                              |
+| `dx-selected`    | `aria-selected:`       | `aria-selected={boolean}`          | A row is "the chosen one" driving a master/detail panel. Listbox / option pattern. Multi-select OK.                                                                                                         |
+| `dx-current`     | `aria-[current=true]:` | `aria-current='true'`              | A row is "where you are" in a navigation set (current page, current step). At most one current per group. The CSS variant fires only on `aria-current='true'`, so use that literal even on `<a>`/nav links. |
+| `dx-highlighted` | `data-[highlighted]:`  | Radix `data-highlighted` (managed) | A Radix-managed transient highlight (menu / combobox active option). Don't set the attribute manually.                                                                                                      |
+
+## Rules
+
+1. **Never combine `dx-selected` and `dx-current` on the same element**
+   unless you also set both `aria-selected` and `aria-current`. They
+   express different things (chosen vs you-are-here) and the visual
+   weight is similar enough that combining them defeats both.
+2. **`aria-pressed`, `aria-checked`, `aria-expanded`, `aria-disabled`
+   are not selection-row attributes.** None of the `dx-*` selection
+   utilities pair with them. Toggle buttons (mute/unmute) want
+   `aria-pressed`; a selection row wants `aria-selected`.
+3. **`aria-selected` is only valid on roles that admit it** — `option`,
+   `tab`, `gridcell`, `row`, `treeitem`, `columnheader`, `rowheader`.
+   On a plain `<button>` inside a `<ul role='listbox'>`, give the button
+   `role='option'` so assistive tech sees the attribute.
+4. **`dx-active` does not exist.** If you see it in code it's a no-op
+   string. Use `dx-selected` (selection) or `dx-current` (navigation)
+   instead.
+5. **Set ARIA before adding the class.** The class is inert without
+   the attribute; it's not a fallback styler. Reviewers should reject
+   PRs that add `dx-selected` without `aria-selected`.
+
+## Canonical patterns
+
+### Selectable row in a list (master/detail)
+
+```tsx
+<ul role='listbox' aria-label='…'>
+  {items.map((item) => (
+    <li key={item.id} role='presentation'>
+      <button
+        type='button'
+        role='option'
+        aria-selected={item.id === selectedId}
+        className='dx-hover dx-selected'
+        onClick={() => onSelect(item.id)}
+      >
+        {item.label}
+      </button>
+    </li>
+  ))}
+</ul>
+```
+
+### "You are here" in a navigation list
+
+```tsx
+<nav>
+  <ul>
+    {pages.map((page) => (
+      <li key={page.href}>
+        <a
+          href={page.href}
+          aria-current={page.href === currentHref ? 'true' : undefined}
+          className='dx-hover dx-current'
+        >
+          {page.label}
+        </a>
+      </li>
+    ))}
+  </ul>
+</nav>
+```
+
+### Toggle button (NOT a row)
+
+Don't reach for `dx-selected` here. Toggle buttons want their own
+visual treatment via `aria-pressed:` variants — out of scope for this
+file.
+
+```tsx
+<button type='button' aria-pressed={muted} onClick={toggleMute}>
+  {muted ? 'Unmute' : 'Mute'}
+</button>
+```
+
+## Enforcing the grammar
+
+A future ESLint rule could flag:
+
+- `dx-selected` without `aria-selected` on the same element.
+- `dx-current` without `aria-current` on the same element.
+- `dx-active` literal anywhere.
+
+Until that exists, reviewers and the `react-ui-list` `RowList` /
+`CardList` containers (which set both attribute and class together)
+are the enforcement.

package/src/css/components/surface.css

@@ -1,34 +1,109 @@
 /**
  * Surfaces
+ *
+ * A surface zone paints a background AND publishes its colour as `--surface-bg`, so descendant
+ * controls can derive a visible hover/current highlight from the actual surface (see the
+ * derivation block below) and surface-matching elements (avatars, gradients) can read it directly.
+ *
+ * Always enter a surface via one of these `dx-*-surface` classes. A bare `bg-*-surface` utility
+ * paints the colour but does NOT publish `--surface-bg`, so control hover collapses onto the
+ * base-surface fallback and can become invisible when the surface shares that elevation.
  */
 
 @layer dx-components {
   .dx-base-surface {
-    @apply bg-base-surface text-base-surface-text;
+    @apply bg-base-surface text-base-fg;
     --surface-bg: var(--color-base-surface);
   }
 
+  .dx-deck-surface {
+    @apply bg-deck-surface text-base-fg;
+    --surface-bg: var(--color-deck-surface);
+  }
+
   .dx-sidebar-surface {
-    @apply bg-sidebar-surface text-base-surface-text;
+    @apply bg-sidebar-surface text-base-fg;
     --surface-bg: var(--color-sidebar-surface);
   }
 
+  .dx-header-surface {
+    @apply bg-header-surface text-base-fg;
+    --surface-bg: var(--color-header-surface);
+  }
+
+  .dx-card-surface {
+    @apply bg-card-surface text-base-fg;
+    --surface-bg: var(--color-card-surface);
+  }
+
+  .dx-group-surface {
+    @apply bg-group-surface text-base-fg;
+    --surface-bg: var(--color-group-surface);
+  }
+
+  .dx-input-surface {
+    @apply bg-input-surface text-base-fg;
+    --surface-bg: var(--color-input-surface);
+  }
+
+  .dx-toolbar-surface {
+    @apply bg-toolbar-surface text-base-fg;
+    --surface-bg: var(--color-toolbar-surface);
+  }
+
   .dx-modal-surface {
-    @apply bg-modal-surface text-base-surface-text backdrop-blur-md;
+    @apply bg-modal-surface text-base-fg backdrop-blur-md;
     --surface-bg: var(--color-modal-surface);
   }
 
+  .dx-popover-surface {
+    @apply bg-popover-surface text-base-fg backdrop-blur-md;
+    --surface-bg: var(--color-popover-surface);
+  }
+
   .dx-attention-surface {
-    @apply bg-attention-surface text-base-surface-text;
+    @apply bg-attention-surface text-base-fg;
     --surface-bg: var(--color-attention-surface);
   }
 }
 
-/* TODO(burdon): Resolve. */
-/* @layer dx-tokens {
-  .dx-sidebar-surface, .dx-modal-surface {
-    --color-hover-surface: light-dark(var(--color-neutral-300), var(--color-neutral-700));
-    --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-    --color-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+@layer dx-tokens {
+  /*
+   * Re-derive the state colours (hover, current, selected) off the host surface for every context
+   * that publishes its own --surface-bg. Custom-property substitution runs once per scope, so the
+   * formula must be repeated here (it cannot simply inherit from semantic.css, which resolved it
+   * against the root surface). Listing all surface zones in one block keeps the offsets identical
+   * across surfaces — there is no per-surface divergence to tune.
+   *
+   * Magnitudes mirror semantic.css; selected-* track current-* via the aliases declared there.
+   */
+  .dx-base-surface,
+  .dx-deck-surface,
+  .dx-sidebar-surface,
+  .dx-header-surface,
+  .dx-card-surface,
+  .dx-group-surface,
+  .dx-input-surface,
+  .dx-toolbar-surface,
+  .dx-modal-surface,
+  .dx-popover-surface,
+  .dx-attention-surface,
+  .dx-main-sidebar {
+    --color-hover-surface: light-dark(
+      oklch(from var(--surface-bg) calc(l - 0.08) c h),
+      oklch(from var(--surface-bg) calc(l + 0.08) c h)
+    );
+    --color-hover-surface-subtle: light-dark(
+      oklch(from var(--surface-bg) calc(l - 0.02) c h),
+      oklch(from var(--surface-bg) calc(l + 0.02) c h)
+    );
+    --color-current-surface: light-dark(
+      oklch(from var(--surface-bg) calc(l - 0.1) c h),
+      oklch(from var(--surface-bg) calc(l + 0.1) c h)
+    );
+    --color-current-surface-hover: light-dark(
+      oklch(from var(--surface-bg) calc(l - 0.12) c h),
+      oklch(from var(--surface-bg) calc(l + 0.12) c h)
+    );
   }
-} */
+}