@dxos/ui-theme 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.cb12b3f963",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,13 +27,6 @@
       "require": "./dist/plugin/node-cjs/plugins/ThemePlugin.cjs"
     }
   },
-  "typesVersions": {
-    "*": {
-      "plugin": [
-        "dist/types/src/plugins/ThemePlugin.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -42,29 +35,33 @@
     "@fontsource-variable/inter": "5.2.8",
     "@fontsource-variable/jetbrains-mono": "5.0.21",
     "@fontsource/poiret-one": "^5.0.20",
+    "@radix-ui/react-slot": "1.1.2",
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/postcss": "^4.2.0",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.5.0",
     "esbuild-style-plugin": "^1.6.1",
-    "glob": "^7.2.3",
     "globby": "14.1.0",
     "lodash.merge": "^4.6.2",
-    "postcss": "^8.4.41",
+    "postcss": "^8.5.12",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
     "tailwind-merge": "^3.5.0",
     "tailwind-scrollbar": "^4.0.0",
     "tailwindcss": "^4.2.0",
     "tailwindcss-radix": "^4.0.2",
-    "@dxos/util": "0.8.4-main.c85a9c8dae",
-    "@dxos/node-std": "0.8.4-main.c85a9c8dae"
+    "@dxos/log": "0.8.4-main.cb12b3f963",
+    "@dxos/node-std": "0.8.4-main.cb12b3f963",
+    "@dxos/util": "0.8.4-main.cb12b3f963"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
-    "esbuild": "0.25.11",
-    "vite": "^7.1.11",
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae"
+    "esbuild": "0.28.0",
+    "vite": "^8.0.10",
+    "@dxos/ui-types": "0.8.4-main.cb12b3f963"
+  },
+  "peerDependencies": {
+    "react": "~19.2.3"
   },
   "publishConfig": {
     "access": "public"

package/src/css/components/button.css

@@ -10,7 +10,8 @@
 
   /* Base styles */
   .dx-button {
-    @apply font-medium shrink-0 inline-flex select-none items-center justify-center overflow-hidden transition-colors duration-100 ease-linear bg-input-surface min-h-[2.5rem] px-3;
+    @apply shrink-0 inline-flex select-none items-center justify-center overflow-hidden min-h-[2.5rem] px-3;
+    @apply font-medium transition-colors duration-100 ease-linear bg-input-surface;
     &[aria-pressed='true'],
     &[aria-checked='true'] {
       @apply text-accent-text bg-attention-surface;

package/src/css/components/{focus-ring.css → focus.css}

@@ -29,6 +29,13 @@
     }
   }
 
+  .dx-focus-ring-none {
+    &:focus,
+    &:focus-visible {
+      @apply outline-hidden! ring-0!;
+    }
+  }
+
   .dx-focus-ring-always,
   .dx-focus-ring-inset-always {
     &:not([disabled]),
@@ -180,7 +187,6 @@
 
         &:hover {
           @apply outline-hidden;
-
           .dark & {
             @apply outline-hidden;
           }
@@ -226,4 +232,12 @@
       }
     }
   }
+
+  .dx-focus-subdued {
+    @apply focus:outline-hidden focus-visible:outline-hidden focus:ring-0 ring-0 focus:border-0 border-0;
+  }
+
+  .dx-focus-static {
+    @apply ring-2 ring-offset-0 ring-primary-300 ring-offset-white dark:ring-primary-400 dark:ring-offset-black;
+  }
 }

package/src/css/components/icon.css

@@ -0,0 +1,9 @@
+/**
+ * Icons
+ */
+
+@layer dx-components {
+  .dx-icon-inline {
+    @apply inline-block align-[-0.125em];
+  }
+}

package/src/css/components/panel.css

@@ -5,112 +5,112 @@
  */
 
 @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;
   }
 
-  .dx-panel[data-hue='red'],
+  [data-hue='red'] .dx-panel,
   .dx-panel--red {
     @apply bg-red-surface text-red-surface-text 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;
   }
 
-  .dx-panel[data-hue='amber'],
+  [data-hue='amber'] .dx-panel,
   .dx-panel--amber {
     @apply bg-amber-surface text-amber-surface-text 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;
   }
 
-  .dx-panel[data-hue='lime'],
+  [data-hue='lime'] .dx-panel,
   .dx-panel--lime {
     @apply bg-lime-surface text-lime-surface-text 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;
   }
 
-  .dx-panel[data-hue='emerald'],
+  [data-hue='emerald'] .dx-panel,
   .dx-panel--emerald {
     @apply bg-emerald-surface text-emerald-surface-text 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;
   }
 
-  .dx-panel[data-hue='cyan'],
+  [data-hue='cyan'] .dx-panel,
   .dx-panel--cyan {
     @apply bg-cyan-surface text-cyan-surface-text 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;
   }
 
-  .dx-panel[data-hue='blue'],
+  [data-hue='blue'] .dx-panel,
   .dx-panel--blue {
     @apply bg-blue-surface text-blue-surface-text 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;
   }
 
-  .dx-panel[data-hue='violet'],
+  [data-hue='violet'] .dx-panel,
   .dx-panel--violet {
     @apply bg-violet-surface text-violet-surface-text 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;
   }
 
-  .dx-panel[data-hue='fuchsia'],
+  [data-hue='fuchsia'] .dx-panel,
   .dx-panel--fuchsia {
     @apply bg-fuchsia-surface text-fuchsia-surface-text 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;
   }
 
-  .dx-panel[data-hue='rose'],
+  [data-hue='rose'] .dx-panel,
   .dx-panel--rose {
     @apply bg-rose-surface text-rose-surface-text 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;
   }
 
-  .dx-panel[data-hue='success'],
+  [data-hue='success'] .dx-panel,
   .dx-panel--success {
     @apply bg-success-surface text-success-surface-text 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;
   }
 
-  .dx-panel[data-hue='error'],
+  [data-hue='error'] .dx-panel,
   .dx-panel--error {
     @apply bg-error-surface text-error-surface-text border-error-border;
   }

package/src/css/components/selected.css

@@ -0,0 +1,35 @@
+/**
+ * Selected / 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. */
+  .dx-hover {
+    @apply cursor-pointer hover:bg-highlight-surface! hover:text-highlight-surface-text!;
+  }
+
+  /* Pairs with Radix-managed `data-highlighted`. Don't set the attribute manually. */
+  .dx-highlighted {
+    @apply data-[highlighted]:bg-highlight-surface
+      data-[highlighted]:text-highlight-surface-text
+      hover:data-[highlighted]:bg-highlight-surface-hover;
+  }
+
+  /* Pairs with `aria-current="true|page|…"`. Use for "you are here" navigation. */
+  .dx-current {
+    @apply dx-ring-pseudo
+      aria-[current=true]:bg-highlight-surface aria-[current=true]:text-highlight-surface-text
+      aria-[current=true]:after:ring-active-separator!;
+  }
+
+  /* Pairs with `aria-selected`. Use for listbox/option selection (master/detail). */
+  .dx-selected {
+    @apply aria-selected:bg-selected-surface
+      aria-selected:text-selected-surface-text hover:aria-selected:text-selected-surface-text
+      aria-selected:font-semibold aria-selected:tracking-normal
+      transition-[color,font-variation-settings,letter-spacing];
+  }
+}

package/src/css/components/selected.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/tag.css

@@ -11,7 +11,9 @@
 
   .dx-tag--anchor {
     /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
-    @apply inline cursor-pointer -mx-[4px] px-[3px] py-0.5 border border-separator rounded-xs bg-group-surface transition-colors;
+    @apply inline cursor-pointer -mx-[3px] px-[2px] py-0.5 border rounded-xs transition-colors;
+    /** TODO(burdon): Configure secondary color. */
+    @apply bg-group-surface text-sky-surface-text border-sky-border;
 
     &:hover {
       @apply bg-hover-surface;

package/src/css/integrations/codemirror.css

@@ -6,6 +6,7 @@
  * TODO(burdon): This could move into the ui-editor package (similar to graph.css).
  */
 
+/** TODO(burdon): Move to ui-editor */
 @theme {
   --color-cm-codeblock: oklch(from var(--color-neutral-500) l c h / 0.1);
   --color-cm-active-line: light-dark(
@@ -25,8 +26,9 @@
   --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200));
 
   /* Markdown syntax highlighting */
-  --color-cm-code: light-dark(var(--color-neutral-700), var(--color-neutral-300));
+  --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400));
+  --color-cm-code-inline: light-dark(var(--color-green-500), var(--color-green-500));
   --color-cm-code-mark: var(--color-blue-500);
-  --color-cm-mark-opacity: 0.5;
-  --color-cm-heading: light-dark(var(--color-neutral-900), var(--color-neutral-400));
+  --color-cm-heading: light-dark(var(--color-blue-700), var(--color-blue-300));
+  --color-cm-heading-number: light-dark(var(--color-blue-600), var(--color-blue-400));
 }

package/src/css/integrations/tldraw.css

@@ -2,6 +2,7 @@
  * Tldraw
  */
 
+/** TODO(burdon): Move to tldraw */
 .tl-background {
   --color-background: var(--color-base-surface);
 }

package/src/css/layout/main.css

@@ -18,13 +18,6 @@
     z-index: 0;
   }
 
-  /**
-   * Main Mobile app.
-   */
-  .dx-main-mobile-layout {
-    @apply absolute inset-0 overflow-hidden flex flex-col;
-  }
-
   /** TODO(burdon): Reconcile with dx-main-bounce-layout */
   .dx-main-content-padding-transitions {
     transition-duration: 200ms;

package/src/css/layout/size.css

@@ -3,51 +3,43 @@
  */
 
 @layer dx-components {
-  /** 
-   * Registers the element as a size query container. 
+  /**
+   * Registers the element as a size query container.
    * Children can use @container queries to apply styles based on the container's dimensions (both width and height).
+   * Also enables children to use cqi/cqb units (e.g., max-w-[100cqi]).
+   * NOTE: `container-type: size` implies layout/size containment, which breaks CodeMirror's
+   * coordinate measurement (causes blank viewport sections during scroll until a click forces
+   * a re-measure). For editor content where only inline (width-based) queries are needed,
+   * use `.dx-inline-size-container` instead.
    */
   .dx-size-container {
     container-type: size;
   }
 
   /**
-   * Layout rules for flex-based scroll containment:
-   * `flex flex-col`
-   *   On a container: makes it a flex column so children stack and can use `flex-1`.
-   * `flex-1`
-   *   On a child: grows to fill the flex parent. Requires the parent to be `flex`.
-   * `min-h-0` (alongside `flex-1`):
-   *   Overrides default flex children: `min-height:auto` (sized to content), which prevents shrinking.
-   *   Allows element to shrink and trigger overflow/scrolling.
-   *   Always pair with `flex-1` when scroll is needed.
-   * `h-full`:
-   *   Fills 100% of the parent's *computed* height.
-   *   Use when the parent has a definite height but is not a flex container (e.g. `overflow:hidden` wrapper).
-   *   Unlike `flex-1`, does not require the parent to be flex.
-   *
-   * Pattern for a scrollable region inside a flex ancestor:
-   *   ancestor         → `flex flex-col`             (or `flex flex-row`)
-   *   scroll root      → `flex-1 min-h-0`            (fills ancestor, can shrink)
-   *   scroll viewport  → `h-full overflow-y-scroll`  (fills root, scrolls)
+   * Inline-only size query container. Provides cqi units for children without the layout
+   * containment side-effects of `container-type: size`. Use this in CodeMirror content
+   * wrappers where size containment would break viewport measurement.
    */
-
-  .dx-container {
-    @apply flex-1 min-h-0 min-w-0 h-full w-full;
+  .dx-inline-size-container {
+    container-type: inline-size;
   }
 
   /**
-   * Article
+   * Document width.
    */
-
-  .dx-article {
-    @apply w-full max-w-article-max-width mx-auto;
+  .dx-document {
+    @apply mx-auto w-full max-w-document-max-width;
   }
 
   /**
    * Card
    */
 
+  .dx-card {
+    @apply flex flex-col w-full;
+  }
+
   .dx-card-square {
     inline-size: min(
       min(var(--radix-popper-available-width), var(--spacing-card-max-width)),

package/src/css/theme/animation.css

@@ -227,3 +227,34 @@
   }
   --animate-blink: blink 1s step-start infinite;
 }
+
+/**
+ * Shimmer (text)
+ * Sweeps a brighter band across text via mask alpha — preserves the consumer's color.
+ * Translates exactly one tile period (2× element width) per cycle so the loop seam is invisible.
+ */
+@keyframes shimmer-text {
+  from {
+    mask-position-x: 100%;
+    -webkit-mask-position-x: 100%;
+  }
+  to {
+    mask-position-x: -100%;
+    -webkit-mask-position-x: -100%;
+  }
+}
+
+/**
+ * Honor user reduced-motion preference for decorative animations.
+ * Functional transitions (fade/slide/toast/blink) are intentionally excluded —
+ * suppressing them would hide UI state changes.
+ */
+@media (prefers-reduced-motion: reduce) {
+  .animate-halo-pulse,
+  .animate-spin-slow,
+  .animate-trail,
+  .animate-trail-offset,
+  .animate-shimmer {
+    animation: none;
+  }
+}

package/src/css/theme/palette.css

@@ -10,8 +10,10 @@
 
 @theme {
   --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%);
+  --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%);
   --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%);
   --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%);
+  --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%);
   --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%);
 
   --color-primary-50: var(--color-blue-50);
@@ -25,4 +27,10 @@
   --color-primary-800: var(--color-blue-800);
   --color-primary-900: var(--color-blue-900);
   --color-primary-950: var(--color-blue-950);
+
+  /* Composer logo colors */
+  --color-composer-100: rgb(5 40 61);
+  --color-composer-200: rgb(10 75 105);
+  --color-composer-300: rgb(1 122 183);
+  --color-composer-400: rgb(6 197 253);
 }

package/src/css/theme/semantic.css

@@ -17,25 +17,28 @@
   --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200));
   --color-inverse-surface-text: light-dark(var(--color-neutral-50), var(--color-neutral-950));
 
-  --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-
   --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-scrim-surface: light-dark(
     oklch(from var(--color-neutral-50) l c h / 0.5),
     oklch(from var(--color-neutral-950) l c h / 0.25)
   );
+
   --color-toolbar-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925));
+  --color-card-surface: light-dark(var(--color-neutral-75), var(--color-neutral-925));
+
   --color-group-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-modal-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
-  --color-card-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-sidebar-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-header-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
 
+  --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-input-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
   /** TODO(burdon): current vs active vs selected */
   --color-current-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --color-active-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --color-active-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
   /** TODO(burdon): Merge overlay/surface? */
   --color-hover-overlay: light-dark(var(--color-neutral-250), var(--color-neutral-750));
   --color-hover-surface: light-dark(var(--color-neutral-250), var(--color-neutral-750));
@@ -43,15 +46,27 @@
 
   /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
   --color-attention-surface: var(--color-focus-surface);
+  --color-attention-contains: oklch(from var(--color-accent-surface) l c h / 0.3);
   --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-neutral-focus-indicator: light-dark(var(--color-neutral-400), var(--color-neutral-600));
 
-  /* Accent */
+  /* Highlight and Selected */
+
+  --color-highlight-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-highlight-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-highlight-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  --color-selected-surface: light-dark(var(--color-neutral-150), var(--color-neutral-850));
+  --color-selected-surface-hover: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-selected-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* Accent (primary) */
+  /* TODO(burdon): Rename primary */
 
-  --color-accent-surface: light-dark(var(--color-blue-600), var(--color-blue-600));
+  --color-accent-surface: light-dark(var(--color-blue-500), var(--color-blue-700));
   --color-accent-surface-hover: light-dark(var(--color-blue-800), var(--color-blue-800));
   --color-accent-surface-text: var(--color-blue-100);
-  --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-600));
+  --color-accent-text: light-dark(var(--color-blue-600), var(--color-blue-400));
   --color-accent-text-hover: light-dark(var(--color-blue-500), var(--color-blue-500));
   --color-accent-focus-indicator: light-dark(var(--color-blue-600), var(--color-blue-600));
 
@@ -61,8 +76,9 @@
   /* Separator */
 
   --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-primary-separator: light-dark(var(--color-neutral-400), var(--color-neutral-800));
-  --color-subdued-separator: light-dark(var(--color-neutral-300), var(--color-neutral-900));
+  --color-subdued-separator: light-dark(var(--color-neutral-150), var(--color-neutral-850));
+  --color-primary-separator: light-dark(var(--color-neutral-500), var(--color-neutral-700));
+  --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));
 
   /* Scrollbar */