@dxos/ui-theme 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/css/theme/semantic.css

@@ -1,110 +1,111 @@
 /**
  * Tokens
+ *
+ * Naming convention: --color-{name}-{part}[-{state}]
+ *   part  : surface | foreground | border | fill | text
+ *   state : hover | active (optional)
+ *
+ * See DESIGN_SYSTEM.md.
  */
 
 @theme {
   /**
-   * Surfaces 
-   *
-   * TODO(burdon): Align suffix with styles.css?
-   * -xxx-surface
-   * -xxx-surface-text
+   * Surfaces
    */
 
   --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-base-foreground: 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-inverse-foreground: 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-focus-surface: 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-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));
 
-  /** TODO(burdon): current vs active vs selected */
+  /* input */
+  --color-input-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
+  --color-input-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* current (aria-current) */
   --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-current-surface-hover: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  --color-current-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* selected (aria-selected) */
+  --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-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
+
+  /* hover (:hover, data-highlighted) */
   --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-hover-foreground: light-dark(var(--color-neutral-950), var(--color-neutral-50));
 
   /* 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-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 */
-
-  --color-accent-surface: light-dark(var(--color-blue-600), var(--color-blue-600));
+  /* Accent (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-text: light-dark(var(--color-blue-600), var(--color-blue-600));
+  --color-accent-foreground: 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 */
+  /* Focus rings (global) */
+  --color-focus-ring: light-dark(var(--color-blue-600), var(--color-blue-600));
+  --color-focus-ring-subtle: light-dark(var(--color-neutral-400), var(--color-neutral-600));
 
+  /* 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 */
-
   --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-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-foreground: 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-foreground: 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));

package/src/css/theme/spacing.css

@@ -2,13 +2,18 @@
  * Tokens
  */
 
+/**
+ * Utility classes 
+ */
 @theme {
   /** Minimum inset from the viewport edge for floating surfaces. */
-  --spacing-screen-border: 1rem;
+  --spacing-screen-border: 2rem;
 
-  --spacing-document-max-width: 50rem;
+  --spacing-popover-default-width: 20rem;
+  --spacing-popover-min-width: 16rem;
 
-  --spacing-popover-min-width: 12rem;
+  --spacing-document-max-width: 50rem;
+  --spacing-document-width: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
 
   --spacing-card-default-width: 20rem;
   --spacing-card-min-width: 18rem;
@@ -16,16 +21,17 @@
   --spacing-card-min-height: 18rem;
   --spacing-card-max-height: 30rem;
 
-  --spacing-trim-xs: 0.375rem;
+  --spacing-tag-padding-block: 0.125rem;
+
+  --spacing-trim-xs: 0.25rem;
   --spacing-trim-sm: 0.5rem;
   --spacing-trim-md: 0.75rem;
   --spacing-trim-lg: 1.5rem;
 
-  --spacing-tag-padding-block: 0.125rem;
-  --spacing-text-content: calc(50rem - env(safe-area-inset-left) - env(safe-area-inset-right));
-
   /** Minimal trim to allow for ring/outline. */
   --spacing-form-chrome: var(--spacing-trim-xs);
+  --spacing-form-gap: var(--spacing-trim-sm);
+  --spacing-form-section-gap: var(--spacing-trim-lg);
 
   /**
    * Density: fine
@@ -37,15 +43,20 @@
 
 @layer dx-tokens {
   /**
-   * Density: coarse
+   * TODO(burdon): Density: coarse
    */
+  /*
   .dx-density-coarse {
     --spacing-form-padding: var(--spacing-trim-md);
-    /* --spacing-icon-button-padding: var(--spacing-trim-sm); */
+    --spacing-icon-button-padding: var(--spacing-trim-sm);
     --spacing-scroll-padding: 8px;
   }
+  */
 }
 
+/**
+ * CSS variables.
+ */
 @layer dx-tokens {
   :root {
     --dx-line-0: 0px;
@@ -57,8 +68,8 @@
     --dx-lacuna-4: 0.5rem;
     --dx-lacuna-6: 0.75rem;
 
-    --dx-gutter-xs: 0.125rem; /* Input rings */
-    --dx-gutter-sm: 0.5rem;
+    --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) */
   }
@@ -82,6 +93,8 @@
 
     --dx-input-fine: var(--dx-lacuna-3);
     --dx-input-coarse: var(--dx-lacuna-4);
+
+    --dx-default-icons-size: 1rem; /* size=4 */
   }
 
   [data-grid-focus-indicator-variant='stack'] {
@@ -98,19 +111,20 @@
     /* TODO(burdon): Remove direct usage. */
     --dx-rail-action: calc(var(--dx-rail-content) - 0.5rem);
 
-    --dx-topbar-size: var(--dx-rail-size);
-    --dx-toolbar-size: var(--dx-rail-action);
-    --dx-statusbar-size: var(--dx-rail-action);
+    --dx-topbar-size: var(--dx-rail-size); /* 50px */
+    --dx-toolbar-size: var(--dx-rail-action); /* 40px */
+    --dx-statusbar-size: var(--dx-rail-item); /* 32px */
 
-    --dx-nav-sidebar-size: 23rem;
+    /** NOTE: Sidebar optimized to show plank + companion with sidebar open on 16" MBP. */
+    --dx-nav-sidebar-size: 350px;
     --dx-complementary-sidebar-size: 25rem;
     --dx-drawer-size: 50dvh;
 
-    --dx-l0-size: 74px; /* MacOS windowing controls. */
+    --dx-l0-size: 72px;
     --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 {

package/src/css/theme/styles.css

@@ -9,25 +9,25 @@
 
   --color-info-fill: var(--color-cyan-fill);
   --color-info-surface: var(--color-cyan-surface);
-  --color-info-surface-text: var(--color-cyan-surface-text);
+  --color-info-foreground: var(--color-cyan-foreground);
   --color-info-text: var(--color-cyan-text);
   --color-info-border: var(--color-cyan-border);
 
   --color-success-fill: var(--color-emerald-fill);
   --color-success-surface: var(--color-emerald-surface);
-  --color-success-surface-text: var(--color-emerald-surface-text);
+  --color-success-foreground: var(--color-emerald-foreground);
   --color-success-text: var(--color-emerald-text);
   --color-success-border: var(--color-emerald-border);
 
   --color-warning-fill: var(--color-amber-fill);
   --color-warning-surface: var(--color-amber-surface);
-  --color-warning-surface-text: var(--color-amber-surface-text);
+  --color-warning-foreground: var(--color-amber-foreground);
   --color-warning-text: var(--color-amber-text);
   --color-warning-border: var(--color-amber-border);
 
   --color-error-fill: var(--color-rose-fill);
   --color-error-surface: var(--color-rose-surface);
-  --color-error-surface-text: var(--color-rose-surface-text);
+  --color-error-foreground: var(--color-rose-foreground);
   --color-error-text: var(--color-rose-text);
   --color-error-border: var(--color-rose-border);
 
@@ -37,109 +37,109 @@
 
   --color-neutral-fill: light-dark(var(--color-neutral-300), var(--color-neutral-700));
   --color-neutral-surface: light-dark(var(--color-neutral-200), var(--color-neutral-800));
-  --color-neutral-surface-text: light-dark(var(--color-neutral-800), var(--color-neutral-200));
+  --color-neutral-foreground: light-dark(var(--color-neutral-800), var(--color-neutral-200));
   --color-neutral-text: light-dark(var(--color-neutral-700), var(--color-neutral-300));
   --color-neutral-border: light-dark(var(--color-neutral-400), var(--color-neutral-600));
 
   --color-red-fill: light-dark(var(--color-red-300), var(--color-red-700));
   --color-red-surface: light-dark(var(--color-red-200), var(--color-red-800));
-  --color-red-surface-text: light-dark(var(--color-red-800), var(--color-red-200));
+  --color-red-foreground: light-dark(var(--color-red-800), var(--color-red-200));
   --color-red-text: light-dark(var(--color-red-700), var(--color-red-300));
   --color-red-border: light-dark(var(--color-red-400), var(--color-red-600));
 
   --color-orange-fill: light-dark(var(--color-orange-300), var(--color-orange-700));
   --color-orange-surface: light-dark(var(--color-orange-200), var(--color-orange-800));
-  --color-orange-surface-text: light-dark(var(--color-orange-800), var(--color-orange-200));
+  --color-orange-foreground: light-dark(var(--color-orange-800), var(--color-orange-200));
   --color-orange-text: light-dark(var(--color-orange-700), var(--color-orange-300));
   --color-orange-border: light-dark(var(--color-orange-400), var(--color-orange-600));
 
   --color-amber-fill: light-dark(var(--color-amber-300), var(--color-amber-700));
   --color-amber-surface: light-dark(var(--color-amber-200), var(--color-amber-800));
-  --color-amber-surface-text: light-dark(var(--color-amber-800), var(--color-amber-200));
+  --color-amber-foreground: light-dark(var(--color-amber-800), var(--color-amber-200));
   --color-amber-text: light-dark(var(--color-amber-700), var(--color-amber-300));
   --color-amber-border: light-dark(var(--color-amber-400), var(--color-amber-600));
 
   --color-yellow-fill: light-dark(var(--color-yellow-300), var(--color-yellow-700));
   --color-yellow-surface: light-dark(var(--color-yellow-200), var(--color-yellow-800));
-  --color-yellow-surface-text: light-dark(var(--color-yellow-800), var(--color-yellow-200));
+  --color-yellow-foreground: light-dark(var(--color-yellow-800), var(--color-yellow-200));
   --color-yellow-text: light-dark(var(--color-yellow-700), var(--color-yellow-300));
   --color-yellow-border: light-dark(var(--color-yellow-400), var(--color-yellow-600));
 
   --color-lime-fill: light-dark(var(--color-lime-300), var(--color-lime-700));
   --color-lime-surface: light-dark(var(--color-lime-200), var(--color-lime-800));
-  --color-lime-surface-text: light-dark(var(--color-lime-800), var(--color-lime-200));
+  --color-lime-foreground: light-dark(var(--color-lime-800), var(--color-lime-200));
   --color-lime-text: light-dark(var(--color-lime-700), var(--color-lime-300));
   --color-lime-border: light-dark(var(--color-lime-400), var(--color-lime-600));
 
   --color-green-fill: light-dark(var(--color-green-300), var(--color-green-700));
   --color-green-surface: light-dark(var(--color-green-200), var(--color-green-800));
-  --color-green-surface-text: light-dark(var(--color-green-800), var(--color-green-200));
+  --color-green-foreground: light-dark(var(--color-green-800), var(--color-green-200));
   --color-green-text: light-dark(var(--color-green-700), var(--color-green-300));
   --color-green-border: light-dark(var(--color-green-400), var(--color-green-600));
 
   --color-emerald-fill: light-dark(var(--color-emerald-300), var(--color-emerald-700));
   --color-emerald-surface: light-dark(var(--color-emerald-200), var(--color-emerald-800));
-  --color-emerald-surface-text: light-dark(var(--color-emerald-800), var(--color-emerald-200));
+  --color-emerald-foreground: light-dark(var(--color-emerald-800), var(--color-emerald-200));
   --color-emerald-text: light-dark(var(--color-emerald-700), var(--color-emerald-300));
   --color-emerald-border: light-dark(var(--color-emerald-400), var(--color-emerald-600));
 
   --color-teal-fill: light-dark(var(--color-teal-300), var(--color-teal-700));
   --color-teal-surface: light-dark(var(--color-teal-200), var(--color-teal-800));
-  --color-teal-surface-text: light-dark(var(--color-teal-800), var(--color-teal-200));
+  --color-teal-foreground: light-dark(var(--color-teal-800), var(--color-teal-200));
   --color-teal-text: light-dark(var(--color-teal-700), var(--color-teal-300));
   --color-teal-border: light-dark(var(--color-teal-400), var(--color-teal-600));
 
   --color-cyan-fill: light-dark(var(--color-cyan-300), var(--color-cyan-700));
   --color-cyan-surface: light-dark(var(--color-cyan-200), var(--color-cyan-800));
-  --color-cyan-surface-text: light-dark(var(--color-cyan-800), var(--color-cyan-200));
+  --color-cyan-foreground: light-dark(var(--color-cyan-800), var(--color-cyan-200));
   --color-cyan-text: light-dark(var(--color-cyan-700), var(--color-cyan-300));
   --color-cyan-border: light-dark(var(--color-cyan-400), var(--color-cyan-600));
 
   --color-sky-fill: light-dark(var(--color-sky-300), var(--color-sky-700));
   --color-sky-surface: light-dark(var(--color-sky-200), var(--color-sky-800));
-  --color-sky-surface-text: light-dark(var(--color-sky-800), var(--color-sky-200));
+  --color-sky-foreground: light-dark(var(--color-sky-800), var(--color-sky-200));
   --color-sky-text: light-dark(var(--color-sky-700), var(--color-sky-300));
   --color-sky-border: light-dark(var(--color-sky-400), var(--color-sky-600));
 
   --color-blue-fill: light-dark(var(--color-blue-300), var(--color-blue-700));
   --color-blue-surface: light-dark(var(--color-blue-200), var(--color-blue-800));
-  --color-blue-surface-text: light-dark(var(--color-blue-800), var(--color-blue-200));
+  --color-blue-foreground: light-dark(var(--color-blue-800), var(--color-blue-200));
   --color-blue-text: light-dark(var(--color-blue-700), var(--color-blue-300));
   --color-blue-border: light-dark(var(--color-blue-400), var(--color-blue-600));
 
   --color-indigo-fill: light-dark(var(--color-indigo-300), var(--color-indigo-700));
   --color-indigo-surface: light-dark(var(--color-indigo-200), var(--color-indigo-800));
-  --color-indigo-surface-text: light-dark(var(--color-indigo-800), var(--color-indigo-200));
+  --color-indigo-foreground: light-dark(var(--color-indigo-800), var(--color-indigo-200));
   --color-indigo-text: light-dark(var(--color-indigo-700), var(--color-indigo-300));
   --color-indigo-border: light-dark(var(--color-indigo-400), var(--color-indigo-600));
 
   --color-violet-fill: light-dark(var(--color-violet-300), var(--color-violet-700));
   --color-violet-surface: light-dark(var(--color-violet-200), var(--color-violet-800));
-  --color-violet-surface-text: light-dark(var(--color-violet-800), var(--color-violet-200));
+  --color-violet-foreground: light-dark(var(--color-violet-800), var(--color-violet-200));
   --color-violet-text: light-dark(var(--color-violet-700), var(--color-violet-300));
   --color-violet-border: light-dark(var(--color-violet-400), var(--color-violet-600));
 
   --color-purple-fill: light-dark(var(--color-purple-300), var(--color-purple-700));
   --color-purple-surface: light-dark(var(--color-purple-200), var(--color-purple-800));
-  --color-purple-surface-text: light-dark(var(--color-purple-800), var(--color-purple-200));
+  --color-purple-foreground: light-dark(var(--color-purple-800), var(--color-purple-200));
   --color-purple-text: light-dark(var(--color-purple-700), var(--color-purple-300));
   --color-purple-border: light-dark(var(--color-purple-400), var(--color-purple-600));
 
   --color-fuchsia-fill: light-dark(var(--color-fuchsia-300), var(--color-fuchsia-700));
   --color-fuchsia-surface: light-dark(var(--color-fuchsia-200), var(--color-fuchsia-800));
-  --color-fuchsia-surface-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200));
+  --color-fuchsia-foreground: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-200));
   --color-fuchsia-text: light-dark(var(--color-fuchsia-700), var(--color-fuchsia-300));
   --color-fuchsia-border: light-dark(var(--color-fuchsia-400), var(--color-fuchsia-600));
 
   --color-pink-fill: light-dark(var(--color-pink-300), var(--color-pink-700));
   --color-pink-surface: light-dark(var(--color-pink-200), var(--color-pink-800));
-  --color-pink-surface-text: light-dark(var(--color-pink-800), var(--color-pink-200));
+  --color-pink-foreground: light-dark(var(--color-pink-800), var(--color-pink-200));
   --color-pink-text: light-dark(var(--color-pink-700), var(--color-pink-300));
   --color-pink-border: light-dark(var(--color-pink-400), var(--color-pink-600));
 
   --color-rose-fill: light-dark(var(--color-rose-300), var(--color-rose-700));
   --color-rose-surface: light-dark(var(--color-rose-200), var(--color-rose-800));
-  --color-rose-surface-text: light-dark(var(--color-rose-800), var(--color-rose-200));
+  --color-rose-foreground: light-dark(var(--color-rose-800), var(--color-rose-200));
   --color-rose-text: light-dark(var(--color-rose-700), var(--color-rose-300));
   --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600));
 }

package/src/css/utilities.css

@@ -1,7 +1,118 @@
 /**
- * Misc
+ * Tailwind utility classes.
  */
 
-@utility dx-icon-inline {
-  @apply inline-block align-[-0.125em];
+/**
+ * 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)
+ */
+
+/**
+ * Fills the available space.
+ */
+@utility dx-expander {
+  @apply flex-1 min-h-0 min-w-0 h-full w-full;
+}
+
+/**
+ * Container that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-container {
+  @apply dx-expander overflow-hidden;
+}
+
+/**
+ * Column that fills the available space (extends dx-expander with overflow clipping).
+ */
+@utility dx-column {
+  @apply flex-1 min-w-0 w-full;
+}
+
+/**
+ * Fullscreen
+ */
+@utility dx-fullscreen {
+  @apply absolute inset-0;
+}
+
+/**
+ * Visual warning to indicate incorrect usage of `slottable`.
+ */
+@utility dx-slot-warning {
+  @apply border border-rose-500 border-dashed;
+}
+
+/**
+ * Pseudo-element overlay for ring indicators (focus, current, etc.).
+ *
+ * A standard CSS `box-shadow` ring is painted behind child content, so children with
+ * opaque backgrounds (e.g., cards, avatars) obscure it. By painting the ring on an
+ * absolutely-positioned `::after` pseudo-element that sits above the element's children
+ * in stacking order, the ring is always visible regardless of child backgrounds.
+ *
+ * The pseudo-element inherits `border-radius` from its parent and is `pointer-events-none`
+ * so it doesn't interfere with interactions. The ring starts transparent; consumers
+ * activate it conditionally (e.g., `focus:after:ring-*`, `aria-[current=true]:after:ring-*`).
+ */
+@utility dx-ring-pseudo {
+  @apply relative after:content-[""] after:absolute after:inset-0 after:rounded-[inherit]
+    after:pointer-events-none after:ring after:ring-inset after:ring-transparent;
+}
+
+/**
+ * Shimmer text — animates opacity left → right across the contained text.
+ * See @keyframes shimmer-text in theme/animation.css for the keyframe definition.
+ * Geometry: mask-size 200% 100% with mask-repeat: repeat-x means each tile is
+ * 2× the element width; the keyframe slides mask-position-x by 200% (one full
+ * tile period), giving a seamless loop. The 5-stop gradient (0.4 → 1.0 → 0.4)
+ * produces a single bright pulse per cycle that traverses left → right during
+ * the first half, with a brief calm interval during the second half.
+ */
+@utility shimmer-text {
+  mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.4) 0%,
+    rgba(0, 0, 0, 0.4) 30%,
+    rgba(0, 0, 0, 1) 50%,
+    rgba(0, 0, 0, 0.4) 70%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
+  mask-size: 200% 100%;
+  -webkit-mask-size: 200% 100%;
+  mask-repeat: repeat-x;
+  -webkit-mask-repeat: repeat-x;
+  animation: shimmer-text 2s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shimmer-text {
+    animation: none;
+    mask-image: none;
+    -webkit-mask-image: none;
+    opacity: 0.6;
+  }
 }

package/src/defs.ts

@@ -34,7 +34,7 @@ export const hues: ChromaticPalette[] = [
 
 export const hueShades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const;
 
-export const roles = ['fill', 'surface', 'surface-text', 'text', 'border'] as const;
+export const roles = ['fill', 'surface', 'foreground', 'text', 'border'] as const;
 
 /**
  * Card size constants (Tailwind spacing units).

package/src/fragments/AUDIT.md

@@ -0,0 +1,55 @@
+# Fragment Definitions Audit
+
+External packages importing fragment definitions from `ui-theme/src/fragments`.
+
+## Current Fragment Exports
+
+| File          | Definition                            | External | Internal |
+| ------------- | ------------------------------------- | -------- | -------- |
+| `density.ts`  | `densityBlockSize`                    | -        | 1        |
+| `density.ts`  | `coarseBlockSize`                     | -        | 1        |
+| `density.ts`  | `coarseDimensions`                    | -        | 1        |
+| `density.ts`  | `fineBlockSize`                       | -        | 1        |
+| `density.ts`  | `fineDimensions`                      | -        | 1        |
+| `disabled.ts` | `staticDisabled`                      | -        | 1        |
+| `disabled.ts` | `dataDisabled`                        | -        | 1        |
+| `focus.ts`    | `focusRing`                           | 2        | 5        |
+| `focus.ts`    | `subduedFocus`                        | -        | 2        |
+| `focus.ts`    | `staticFocusRing`                     | -        | 1        |
+| `hover.ts`    | `ghostHover`                          | 8        | 2        |
+| `hover.ts`    | `ghostFocusWithin`                    | 1        | -        |
+| `hover.ts`    | `hoverableControls`                   | 9        | -        |
+| `hover.ts`    | `groupHoverControlItemWithTransition` | 2        | -        |
+| `hover.ts`    | `hoverableFocusedKeyboardControls`    | 1        | -        |
+| `hover.ts`    | `hoverableFocusedWithinControls`      | 9        | -        |
+| `hover.ts`    | `hoverableOpenControlItem`            | 3        | -        |
+| `hover.ts`    | `hoverableControlItem`                | 7        | -        |
+| `text.ts`     | `descriptionTextPrimary`              | 1        | -        |
+| `text.ts`     | `descriptionMessage`                  | 5        | -        |
+
+## Summary
+
+**Total fragments:** 21
+**Total imports (external + internal):** 96
+
+- **External:** 63
+- **Internal:** 33
+
+**Most imported overall:**
+
+- `hoverableControls` (9 external)
+- `hoverableFocusedWithinControls` (9 external)
+- `ghostHover` (8 external + 2 internal = 10 total)
+- `hoverableControlItem` (7 external)
+- `focusRing` (2 external + 5 internal = 7 total)
+
+**Internal imports by file:**
+
+- `input.ts`: 8 definitions (coarseBlockSize, coarseDimensions, fineBlockSize, fineDimensions, focusRing, staticDisabled, staticFocusRing, subduedFocus)
+- `list.ts`: 3 definitions (densityBlockSize, focusRing, ghostHover)
+- `menu.ts`: 2 definitions (dataDisabled, subduedFocus)
+- `button.ts`, `link.ts`, `popover.ts`, `toast.ts`: 1 definition each (ghostHover, focusRing, focusRing, focusRing)
+
+**Completely unused:** 7 fragments
+
+- `hoverableOpenControlItem`, `groupHoverControlItemWithTransition` from `hover.ts` (only 2-3 uses)

package/src/fragments/density.ts

@@ -4,10 +4,13 @@
 
 import { type Density } from '@dxos/ui-types';
 
-export const coarseBlockSize = 'min-h-[2.5rem]';
-export const coarseDimensions = `${coarseBlockSize} px-3`;
+const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
+const coarseBlockSize = 'min-h-[2.5rem]';
 
-export const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
-export const fineDimensions = `${fineBlockSize} px-2`;
+const fineDimensions = `${fineBlockSize} px-2`;
+const coarseDimensions = `${coarseBlockSize} px-3`;
 
-export const densityBlockSize = (density: Density = 'coarse') => (density === 'fine' ? fineBlockSize : coarseBlockSize);
+export const densityDimensions = (density: Density = 'fine') =>
+  density === 'fine' ? fineDimensions : coarseDimensions;
+
+export const densityBlockSize = (density: Density = 'fine') => (density === 'fine' ? fineBlockSize : coarseBlockSize);

package/src/fragments/hover.ts

@@ -2,8 +2,6 @@
 // Copyright 2022 DXOS.org
 //
 
-export const subtleHover = 'hover:bg-hover-overlay';
-
 export const ghostHover = 'hover:bg-hover-surface';
 export const ghostFocusWithin = 'focus-within:bg-hover-surface';
 

package/src/fragments/index.ts

@@ -2,13 +2,9 @@
 // Copyright 2022 DXOS.org
 //
 
-// TODO(burdon): Replace fragments with utility and component classes.
+// TODO(burdon): Remove export of fragments.
 
 export * from './density';
 export * from './disabled';
-export * from './elevation';
-export * from './focus';
 export * from './hover';
-export * from './size';
 export * from './text';
-export * from './valence';