@dxos/ui-theme 0.8.4-staging.ac66bdf99f → 0.9.0

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.
    */

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,157 @@
 /**
  * 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).
    *
-   * TODO(burdon): Align suffix with styles.css?
-   * -xxx-surface
-   * -xxx-surface-text
+   * Level  Name    Roles
+   *   0    void    window gaps, scrim base
+   *   1    rail    L0 icon rail
+   *   2    chrome  L1/R sidebars, header
+   *   3    canvas  base, deck
+   *   4    raised  card, group, input
+   *   5    bar     toolbar (sticky, drop-shadowed)
+   *   6    modal   dialog, modal, popover
+   *   7    float   menu, toast, tooltip
+   *
+   * 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));
+
+  /* Surfaces — each maps to exactly one elevation level */
+  --color-sidebar-surface: var(--dx-elevation-2);
+  --color-header-surface: var(--dx-elevation-2);
+  --color-deck-surface: var(--dx-elevation-3);
+  --color-base-surface: var(--dx-elevation-3);
+  --color-card-surface: var(--dx-elevation-3);
+  --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-input-surface: var(--dx-elevation-4);
+  --color-toolbar-surface: var(--dx-elevation-5);
+  --color-modal-surface: var(--dx-elevation-6);
+  --color-popover-surface: var(--dx-elevation-6);
 
-  --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));
+  /* 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);
 
-  --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: 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-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-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));
 
-  --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-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));
 
-  /** 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));
+  /* 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));
 
-  /** 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));
+  /* Focus */
+  --color-focus-surface: light-dark(var(--color-neutral-50), var(--color-neutral-850));
+  --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));
 
   /* 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));
-
-  /* Highlight and Selected */
+  --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3);
 
-  --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));
+  /* input */
+  --color-input-bg: light-dark(var(--color-neutral-250), var(--color-neutral-700));
+  --color-input-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));
 
-  --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));
+  /* 
+   * hover (:hover, data-highlighted)
+   * `*-base` primitives are the un-offset values; 
+   * surface contexts (e.g. .dx-main-sidebar in state.css) re-derive the public token off the base via relative oklch. 
+   */
+  --dx-hover-surface-base: light-dark(var(--color-neutral-200), var(--color-neutral-850));
+  --color-hover-surface: var(--dx-hover-surface-base);
+  --color-hover-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));
+
+  /* current (aria-current) */
+  --dx-current-surface-base: light-dark(var(--color-neutral-150), var(--color-neutral-800));
+  --dx-current-surface-hover-base: light-dark(var(--color-neutral-150), var(--color-neutral-600));
+  --color-current-surface: var(--dx-current-surface-base);
+  --color-current-surface-hover: var(--dx-current-surface-hover-base);
+  --color-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* selected (aria-selected) */
+  --color-selected-surface: var(--color-current-surface);
+  --color-selected-surface-hover: var(--color-current-surface-hover);
+  --color-selected-fg: var(--color-current-fg);
 
   /* Accent (primary) */
-  /* TODO(burdon): Rename primary */
-
-  --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-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));
 
   --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 */
-
   --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 */
-
+  /*
+   * Grid
+   * NOTE: Update main.css when changing grid tokens (and restart dev server).
+   */
   --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-subdued: light-dark(var(--color-neutral-500), var(--color-neutral-600));
   --color-description: light-dark(var(--color-neutral-600), var(--color-neutral-400));
 }

package/src/css/theme/spacing.css

@@ -34,7 +34,7 @@
   --spacing-form-section-gap: var(--spacing-trim-lg);
 
   /**
-   * Density: fine
+   * Density: md (default).
    */
   --spacing-form-padding: var(--spacing-trim-sm);
   --spacing-icon-button-padding: var(--spacing-trim-xs);
@@ -43,15 +43,31 @@
 
 @layer dx-tokens {
   /**
-   * TODO(burdon): Density: coarse
+   * Density: lg — large touch targets (~40px controls).
    */
-  /*
-  .dx-density-coarse {
+  .dx-density-lg {
     --spacing-form-padding: var(--spacing-trim-md);
     --spacing-icon-button-padding: var(--spacing-trim-sm);
     --spacing-scroll-padding: 8px;
   }
-  */
+
+  /**
+   * Density: sm — compact (~28px controls).
+   */
+  .dx-density-sm {
+    --spacing-form-padding: var(--spacing-trim-xs);
+    --spacing-icon-button-padding: var(--spacing-trim-xs);
+    --spacing-scroll-padding: 2px;
+  }
+
+  /**
+   * Density: xs — ultra-compact (~24px controls).
+   */
+  .dx-density-xs {
+    --spacing-form-padding: var(--spacing-trim-xs);
+    --spacing-icon-button-padding: var(--spacing-trim-xs);
+    --spacing-scroll-padding: 2px;
+  }
 }
 
 /**
@@ -69,9 +85,9 @@
     --dx-lacuna-6: 0.75rem;
 
     --dx-gutter-xs: 0.25rem; /* Input rings */
-    --dx-gutter-sm: 1rem;
-    --dx-gutter-md: 2rem; /* 32px (fine card) */
-    --dx-gutter-lg: 2.5rem; /* 40px (dialog, coarse card) */
+    --dx-gutter-sm: 1rem; /* 16px (sm density card) */
+    --dx-gutter-md: 2rem; /* 32px (md density card — default) */
+    --dx-gutter-lg: 2.5rem; /* 40px (dialog, lg density card) */
   }
 
   :root {
@@ -91,10 +107,11 @@
     --dx-modal-line: var(--dx-hair-line);
     --dx-grid-focus-indicator-width: var(--dx-hair-line);
 
-    --dx-input-fine: var(--dx-lacuna-3);
-    --dx-input-coarse: var(--dx-lacuna-4);
+    --dx-input-md: var(--dx-lacuna-3);
+    --dx-input-lg: var(--dx-lacuna-4);
+    --dx-input-sm: var(--dx-lacuna-3);
 
-    --dx-default-icons-size: 1.25rem; /* size=5 */
+    --dx-default-icons-size: 1rem; /* size=4 */
   }
 
   [data-grid-focus-indicator-variant='stack'] {
@@ -124,7 +141,7 @@
     --dx-l0-avatar-size: 3rem;
     --dx-l1-size: calc(var(--dx-nav-sidebar-size) - var(--dx-l0-size));
     --dx-r0-size: var(--dx-rail-size);
-    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size));
+    --dx-r1-size: calc(var(--dx-complementary-sidebar-size) - var(--dx-r0-size) - 1px);
   }
 
   :root {