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

package/src/css/components/tag.css

@@ -11,8 +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 px-[4px] py-0.5;
+    /** TODO(burdon): Configure secondary color. */
+    @apply bg-input-surface ring ring-neutral-border rounded-sm;
     &:hover {
       @apply bg-hover-surface;
     }
@@ -20,111 +21,111 @@
 
   .dx-tag[data-hue='neutral'],
   .dx-tag--neutral {
-    @apply bg-neutral-surface text-neutral-surface-text;
+    @apply bg-neutral-surface text-neutral-fg;
   }
 
   .dx-tag[data-hue='red'],
   .dx-tag--red {
-    @apply bg-red-surface text-red-surface-text;
+    @apply bg-red-surface text-red-fg;
   }
 
   .dx-tag[data-hue='orange'],
   .dx-tag--orange {
-    @apply bg-orange-surface text-orange-surface-text;
+    @apply bg-orange-surface text-orange-fg;
   }
 
   .dx-tag[data-hue='amber'],
   .dx-tag--amber {
-    @apply bg-amber-surface text-amber-surface-text;
+    @apply bg-amber-surface text-amber-fg;
   }
 
   .dx-tag[data-hue='yellow'],
   .dx-tag--yellow {
-    @apply bg-yellow-surface text-yellow-surface-text;
+    @apply bg-yellow-surface text-yellow-fg;
   }
 
   .dx-tag[data-hue='lime'],
   .dx-tag--lime {
-    @apply bg-lime-surface text-lime-surface-text;
+    @apply bg-lime-surface text-lime-fg;
   }
 
   .dx-tag[data-hue='green'],
   .dx-tag--green {
-    @apply bg-green-surface text-green-surface-text;
+    @apply bg-green-surface text-green-fg;
   }
 
   .dx-tag[data-hue='emerald'],
   .dx-tag--emerald {
-    @apply bg-emerald-surface text-emerald-surface-text;
+    @apply bg-emerald-surface text-emerald-fg;
   }
 
   .dx-tag[data-hue='teal'],
   .dx-tag--teal {
-    @apply bg-teal-surface text-teal-surface-text;
+    @apply bg-teal-surface text-teal-fg;
   }
 
   .dx-tag[data-hue='cyan'],
   .dx-tag--cyan {
-    @apply bg-cyan-surface text-cyan-surface-text;
+    @apply bg-cyan-surface text-cyan-fg;
   }
 
   .dx-tag[data-hue='sky'],
   .dx-tag--sky {
-    @apply bg-sky-surface text-sky-surface-text;
+    @apply bg-sky-surface text-sky-fg;
   }
 
   .dx-tag[data-hue='blue'],
   .dx-tag--blue {
-    @apply bg-blue-surface text-blue-surface-text;
+    @apply bg-blue-surface text-blue-fg;
   }
 
   .dx-tag[data-hue='indigo'],
   .dx-tag--indigo {
-    @apply bg-indigo-surface text-indigo-surface-text;
+    @apply bg-indigo-surface text-indigo-fg;
   }
 
   .dx-tag[data-hue='violet'],
   .dx-tag--violet {
-    @apply bg-violet-surface text-violet-surface-text;
+    @apply bg-violet-surface text-violet-fg;
   }
 
   .dx-tag[data-hue='purple'],
   .dx-tag--purple {
-    @apply bg-purple-surface text-purple-surface-text;
+    @apply bg-purple-surface text-purple-fg;
   }
 
   .dx-tag[data-hue='fuchsia'],
   .dx-tag--fuchsia {
-    @apply bg-fuchsia-surface text-fuchsia-surface-text;
+    @apply bg-fuchsia-surface text-fuchsia-fg;
   }
 
   .dx-tag[data-hue='pink'],
   .dx-tag--pink {
-    @apply bg-pink-surface text-pink-surface-text;
+    @apply bg-pink-surface text-pink-fg;
   }
 
   .dx-tag[data-hue='rose'],
   .dx-tag--rose {
-    @apply bg-rose-surface text-rose-surface-text;
+    @apply bg-rose-surface text-rose-fg;
   }
 
   .dx-tag[data-hue='info'],
   .dx-tag--info {
-    @apply bg-cyan-surface text-cyan-surface-text;
+    @apply bg-cyan-surface text-cyan-fg;
   }
 
   .dx-tag[data-hue='success'],
   .dx-tag--success {
-    @apply bg-emerald-surface text-emerald-surface-text;
+    @apply bg-emerald-surface text-emerald-fg;
   }
 
   .dx-tag[data-hue='warning'],
   .dx-tag--warning {
-    @apply bg-amber-surface text-amber-surface-text;
+    @apply bg-amber-surface text-amber-fg;
   }
 
   .dx-tag[data-hue='error'],
   .dx-tag--error {
-    @apply bg-rose-surface text-rose-surface-text;
+    @apply bg-rose-surface text-rose-fg;
   }
 }

package/src/css/integrations/codemirror.css

@@ -19,11 +19,12 @@
     oklch(from var(--color-blue-400) l c h / 0.5),
     oklch(from var(--color-blue-600) l c h / 0.5)
   );
-  --color-cm-focused-selection: light-dark(var(--color-blue-400), var(--color-blue-600));
+  --color-cm-focused-selection: light-dark(var(--color-blue-400), oklch(0.445 0.057 256)); /* #3f5573 */
   --color-cm-highlight: light-dark(var(--color-neutral-950), var(--color-neutral-50));
   --color-cm-highlight-surface: light-dark(var(--color-sky-200), var(--color-cyan-800));
-  --color-cm-comment-text: light-dark(var(--color-neutral-50), var(--color-neutral-950));
-  --color-cm-comment-surface: light-dark(var(--color-amber-800), var(--color-amber-200));
+  --color-cm-comment-text: light-dark(var(--color-neutral-950), var(--color-neutral-950));
+  --color-cm-comment-surface: light-dark(var(--color-teal-200), var(--color-teal-200));
+  --color-cm-comment-current-surface: light-dark(var(--color-orange-200), var(--color-orange-200));
 
   /* Markdown syntax highlighting */
   --color-cm-code: light-dark(var(--color-stone-600), var(--color-stone-400));

package/src/css/integrations/tldraw.css

@@ -8,7 +8,7 @@
 }
 .tl-container.tl-theme__light,
 .tl-container.tl-theme__dark {
-  --color-selected: var(--color-accent-surface);
+  --color-selected: var(--color-accent-bg);
   --color-panel: var(--color-modal-surface);
   --color-panel-contrast: var(--color-separator);
 }

package/src/css/layout/main.css

@@ -81,8 +81,14 @@
       @apply backdrop-blur-lg;
     }
     background-color: var(--color-sidebar-surface);
+    color: var(--color-sidebar-fg);
     --surface-bg: var(--color-sidebar-surface);
 
+    /* Current / selected items read one stop brighter than default body text. */
+    & :is([aria-current]:not([aria-current='false']), [aria-selected='true']) {
+      color: var(--color-sidebar-current-fg);
+    }
+
     transition-property: inset-inline-start, inset-inline-end, inline-size;
     inset-block-start: max(0.5rem, env(safe-area-inset-top));
     inset-block-end: max(0.5rem, env(safe-area-inset-bottom));

package/src/css/layout/size.css

@@ -3,15 +3,28 @@
  */
 
 @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 units (e.g., max-w-[100cqi])
+   * 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;
   }
 
+  /**
+   * 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-inline-size-container {
+    container-type: inline-size;
+  }
+
   /**
    * Document width.
    */
@@ -51,7 +64,7 @@
   }
 
   .dx-card-popover {
-    @apply inline-card-max-width bg-card-surface;
+    @apply inline-card-max-width bg-popover-surface;
     max-width: min(var(--radix-popper-available-width), var(--spacing-card-max-width));
     max-height: min(var(--radix-popper-available-height), var(--spacing-card-max-height));
   }

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

@@ -9,13 +9,47 @@
  */
 
 @theme {
+  /**
+   * Neutral ramp.
+   *
+   * Warm-tinted gray (not pure neutral): every level shares --dx-neutral-chroma / --dx-neutral-hue,
+   * so those two knobs shift the warmth across the whole ramp (and everything derived from it). The
+   * light end is re-spread vs Tailwind's defaults — which squeeze 50–300 into ~0.11 L while the dark
+   * end spans ~0.23 — so light steps (~0.025 L) roughly match dark steps (~0.030 L).
+   *
+   * Two kinds of level, listed below in ascending (darkening) order:
+   *  - Anchors — the Tailwind hundreds (50…950), defined by explicit lightness.
+   *  - In-between steps — `color-mix` interpolations of the surrounding anchors.
+   */
+  --dx-neutral-hue: 190;
+  --dx-neutral-chroma: 0.001;
+
+  --color-neutral-50: oklch(0.985 var(--dx-neutral-chroma) var(--dx-neutral-hue));
   --color-neutral-75: color-mix(in oklch, var(--color-neutral-50) 50%, var(--color-neutral-100) 50%);
+  --color-neutral-100: oklch(0.935 var(--dx-neutral-chroma) var(--dx-neutral-hue));
+  --color-neutral-125: color-mix(in oklch, var(--color-neutral-100) 75%, var(--color-neutral-200) 25%);
   --color-neutral-150: color-mix(in oklch, var(--color-neutral-100) 50%, var(--color-neutral-200) 50%);
+  --color-neutral-175: color-mix(in oklch, var(--color-neutral-150) 50%, var(--color-neutral-200) 50%);
+  --color-neutral-200: oklch(0.875 var(--dx-neutral-chroma) var(--dx-neutral-hue));
   --color-neutral-250: color-mix(in oklch, var(--color-neutral-200) 50%, var(--color-neutral-300) 50%);
+  --color-neutral-300: oklch(0.8 var(--dx-neutral-chroma) var(--dx-neutral-hue));
+  --color-neutral-400: oklch(0.708 var(--dx-neutral-chroma) var(--dx-neutral-hue));
+  --color-neutral-500: oklch(0.556 var(--dx-neutral-chroma) var(--dx-neutral-hue));
+  --color-neutral-600: oklch(0.439 var(--dx-neutral-chroma) var(--dx-neutral-hue));
+  --color-neutral-700: oklch(0.371 var(--dx-neutral-chroma) var(--dx-neutral-hue));
   --color-neutral-750: color-mix(in oklch, var(--color-neutral-700) 50%, var(--color-neutral-800) 50%);
+  --color-neutral-775: color-mix(in oklch, var(--color-neutral-750) 50%, var(--color-neutral-800) 50%);
+  --color-neutral-800: oklch(0.269 var(--dx-neutral-chroma) var(--dx-neutral-hue));
+  --color-neutral-825: color-mix(in oklch, var(--color-neutral-800) 75%, var(--color-neutral-900) 25%);
   --color-neutral-850: color-mix(in oklch, var(--color-neutral-800) 50%, var(--color-neutral-900) 50%);
+  --color-neutral-875: color-mix(in oklch, var(--color-neutral-800) 25%, var(--color-neutral-900) 75%);
+  --color-neutral-900: oklch(0.205 var(--dx-neutral-chroma) var(--dx-neutral-hue));
   --color-neutral-925: color-mix(in oklch, var(--color-neutral-900) 50%, var(--color-neutral-950) 50%);
+  --color-neutral-950: oklch(0.145 var(--dx-neutral-chroma) var(--dx-neutral-hue));
 
+  /*
+   * Primary
+   */
   --color-primary-50: var(--color-blue-50);
   --color-primary-100: var(--color-blue-100);
   --color-primary-200: var(--color-blue-200);

package/src/css/theme/semantic.css

@@ -1,116 +1,238 @@
 /**
  * Tokens
+ *
+ * Naming convention: --color-{name}-{part}[-{state}]
+ *   part  : surface | fg | border | bg | text
+ *   state : hover | active (optional)
+ *
+ * See DESIGN_SYSTEM.md.
  */
 
 @theme {
-  /**
-   * Surfaces 
+  /*
+   * Elevation ladder — strictly monotonic, z-order low → high.
+   * Dark: darker = lower. Light: lighter = higher (inverted toward white).
+   *
+   * Level  Name     Roles
+   *   0    void     deck, scrim base
+   *   1    base     base content, L0 icon rail
+   *   2    chrome   L1/R sidebars, header
+   *   3    card     card
+   *   4    raised   group, input, focus/attention
+   *   5    bar      dialog/modal, toolbar (sticky, drop-shadowed)
+   *   6    modal    popover, menu, toast, tooltip
+   *   7    float    
    *
-   * TODO(burdon): Align suffix with styles.css?
-   * -xxx-surface
-   * -xxx-surface-text
+   * These are private (--dx-*) knobs — use named surface tokens in components, not these directly.
+   */
+  --dx-elevation-0: light-dark(var(--color-neutral-300), var(--color-neutral-950));
+  --dx-elevation-1: light-dark(var(--color-neutral-200), var(--color-neutral-900));
+  --dx-elevation-2: light-dark(var(--color-neutral-125), var(--color-neutral-875));
+  --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-850));
+  --dx-elevation-4: light-dark(var(--color-neutral-100), var(--color-neutral-825));
+  --dx-elevation-5: light-dark(var(--color-neutral-75), var(--color-neutral-800));
+  --dx-elevation-6: light-dark(var(--color-neutral-50), var(--color-neutral-775));
+  --dx-elevation-7: light-dark(white, var(--color-neutral-750));
+
+  /** 
+   * Elevation 0
    */
 
-  --color-base-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
-  --color-base-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
-
-  --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-deck-surface: var(--dx-elevation-0);
 
-  --color-deck-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  /* Translucent dimming layer; tracks the lowest elevation (void) rather than a raw neutral. */
   --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)
+    oklch(from var(--dx-elevation-0) l c h / 0.5),
+    oklch(from var(--dx-elevation-0) 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));
+  /** 
+   * Elevation 1
+   */
 
-  --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-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-base-surface: var(--dx-elevation-1);
+  --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));
 
-  --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));
+  /**
+   * Elevation 2
+   */
 
-  /** 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));
+  --color-header-surface: var(--dx-elevation-2);
 
-  /** 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));
-  --color-hover-surface-text: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-sidebar-surface: var(--dx-elevation-2);
+  /* Sidebar body text. Default sits one ramp stop below the current/selected emphasis. */
+  --color-sidebar-fg: light-dark(var(--color-neutral-700), var(--color-neutral-250));
+  --color-sidebar-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-75));
+
+  /* Sidebar / panel layout levels */
+  --color-l0-surface: var(--dx-elevation-1);
+  --color-l1-surface: var(--dx-elevation-2);
+  --color-r0-surface: var(--dx-elevation-2);
+  --color-r1-surface: var(--dx-elevation-2);
+
+  /** 
+   * Elevation 3
+   */
+
+  --color-card-surface: var(--dx-elevation-3);
 
   /* 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));
+  --color-attention-surface: var(--dx-elevation-3);
+  --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3);
 
-  /* Highlight and Selected */
+  /** 
+   * Elevation 4
+   */
 
-  --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));
+  /* Focus — a raised content surface (one level above card) so an attended pane reads as lifted. */
+  --color-focus-surface: var(--dx-elevation-4);
+  --color-focus-ring: light-dark(var(--color-blue-400), var(--color-blue-600));
+  --color-focus-ring-subtle: light-dark(var(--color-neutral-300), var(--color-neutral-600));
+
+  --color-group-surface: var(--dx-elevation-4);
+  /* Subtle alternate of group-surface for zebra striping (e.g. calendar months) — offset off
+   * elevation-4 via relative oklch so it tracks the ramp: darker in light mode, lighter in dark. */
+  --color-group-alt-surface: light-dark(
+    oklch(from var(--dx-elevation-4) calc(l - 0.03) c h),
+    oklch(from var(--dx-elevation-4) calc(l + 0.03) c h)
+  );
 
-  --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));
+  --color-input-surface: var(--dx-elevation-4);
 
-  /* Accent (primary) */
-  /* TODO(burdon): Rename primary */
+  /**
+   * Elevation 5
+   */
+
+  --color-toolbar-surface: var(--dx-elevation-5);
+
+  --color-modal-surface: var(--dx-elevation-5);
+
+  /**
+   * Elevation 6
+   */
+
+  --color-popover-surface: var(--dx-elevation-6);
+
+  /**
+   * Elevation 7
+   */
+
+  /**
+   * Misc
+   */
+
+  --color-inverse-surface: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-inverse-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+
+  /*
+   * Text emphasis — foregrounds at decreasing emphasis, anchored on --color-base-fg (strongest):
+   *   base-fg → description → subdued → placeholder (weakest).
+   * Tuned for legibility against the surfaces rather than mapped to the elevation ladder (which
+   * governs backgrounds, not text contrast), so these stay explicit neutrals.
+   */
+  --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+  --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600));
+  --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600));
+
+  /*
+   * Controls — the input/control fill is a deliberate off-ladder token (cf. the grid "paper"
+   * surfaces). It backs text inputs and the default/ghost button (bg-input-bg) and must contrast
+   * whatever surface it sits on: a subtle inset well in light mode, a raised fill in dark mode that
+   * reads lighter than the topmost surface. Do not map it to an elevation level.
+   */
+  --color-input-bg: light-dark(var(--color-neutral-250), var(--color-neutral-700));
+  --color-input-fg: var(--color-base-fg);
+
+  /*
+   * State surfaces (hover, current, selected) are derived from the host surface (--surface-bg) via
+   * relative oklch — darker in light mode, lighter in dark — so a highlight stays visible at any
+   * elevation. The values here resolve against the root --surface-bg (= base-surface, set in
+   * base.css), giving the correct default for content outside any surface zone. Surface zones
+   * publish their own --surface-bg and re-derive these tokens in surface.css, which is where the
+   * substitution re-runs for that subtree.
+   *
+   * Offset magnitudes (lightness): hover ∓0.08, subtle ∓0.02, current ∓0.10, current-hover ∓0.12.
+   * Keep these in sync with the per-zone re-derivation in components/surface.css.
+   */
+  --color-hover-surface: light-dark(
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.08) c h),
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.08) c h)
+  );
+  --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));
+
+  /*
+   * Subtle region hover for large highlight targets (list rows, tiles) where the full
+   * control-strength hover reads as too heavy. Consumed by `.dx-hover` / `.dx-hover-row`;
+   * controls (buttons) keep --color-hover-surface.
+   */
+  --color-hover-surface-subtle: light-dark(
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.02) c h),
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.02) c h)
+  );
+
+  /* current (aria-current) */
+  --color-current-surface: light-dark(
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.1) c h),
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.1) c h)
+  );
+  --color-current-surface-hover: light-dark(
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l - 0.12) c h),
+    oklch(from var(--surface-bg, var(--color-base-surface)) calc(l + 0.12) c h)
+  );
+  --color-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* selected (aria-selected) tracks current */
+  --color-selected-surface: var(--color-current-surface);
+  --color-selected-surface-hover: var(--color-current-surface-hover);
+  --color-selected-fg: var(--color-current-fg);
 
-  --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);
+  /* Accent (primary) */
+  --color-accent-bg: light-dark(var(--color-blue-600), var(--color-blue-700));
+  --color-accent-bg-hover: light-dark(var(--color-blue-700), var(--color-blue-800));
+  --color-accent-fg: var(--color-blue-100);
   --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));
 
+  /* Unaccented */
   --color-un-accent: var(--color-neutral-400);
   --color-un-accent-hover: var(--color-neutral-500);
 
   /* Separator */
-
-  --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --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-primary-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750));
   --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));
 
   /* Scrollbar */
-
   --color-scrollbar-track: light-dark(var(--color-neutral-50), var(--color-neutral-950));
-  --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-700));
+  --color-scrollbar-thumb: light-dark(var(--color-neutral-200), var(--color-neutral-600));
   --color-scrollbar-thumb-active: light-dark(var(--color-neutral-200), var(--color-neutral-600));
   --color-scrollbar-thumb-hover: light-dark(var(--color-neutral-200), var(--color-neutral-600));
 
-  /* Sheet */
-
+  /*
+   * Sheet / Grid — intentionally OFF the elevation ladder.
+   * NOTE: Update main.css when changing grid tokens (and restart dev server).
+   *
+   * These are "paper" surfaces for the data grid: maximum-contrast canvases (near-white in light,
+   * near-black in dark) plus saturated selection/comment accents. The elevation ladder is
+   * monotonic (light: lighter = higher), so it cannot express a surface that is simultaneously the
+   * lightest in light mode and the darkest in dark mode. Keep these as explicit neutrals/accents;
+   * do not fold them into --dx-elevation-*.
+   */
+  --color-axis-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
+  --color-axis-text: light-dark(var(--color-neutral-700), var(--color-neutral-300));
   --color-axis-selected-surface: light-dark(var(--color-neutral-100), var(--color-neutral-900));
   --color-axis-selected-text: light-dark(var(--color-neutral-100), var(--color-neutral-900));
-  --color-axis-surface: light-dark(var(--color-neutral-50), var(--color-neutral-800));
-  --color-axis-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
-
-  /* Grid */
 
   --color-grid-surface: light-dark(var(--color-neutral-50), var(--color-neutral-950));
+  --color-grid-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+  --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --color-grid-highlight: oklch(from var(--color-emerald-500) l c h / 0.5);
+  --color-grid-selection-surface: light-dark(var(--color-blue-500), var(--color-blue-400));
+  --color-grid-selection-fg: light-dark(var(--color-neutral-50), var(--color-neutral-950));
   --color-grid-comment: light-dark(var(--color-green-400), var(--color-green-600));
   --color-grid-comment-active: light-dark(
     oklch(from var(--color-green-400) l c h / 0.5),
     oklch(from var(--color-green-600) l c h / 0.5)
   );
-  --color-grid-hover-overlay: oklch(from var(--color-neutral-500) l c h / 0.1);
-  --color-grid-selection-overlay: var(--color-blue-500);
-  --color-grid-line: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-grid-focus-indicator: light-dark(var(--color-primary-600), var(--color-primary-600));
-
-  /* Text */
-
-  --color-placeholder: light-dark(var(--color-neutral-400), var(--color-neutral-600));
-  --color-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-500));
-  --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }