@dxos/ui-theme 0.8.4-main.9be5663bfe → 0.8.4-main.bc2380dfbc

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

@@ -31,17 +31,17 @@
 }
 
 /**
- * Column that fills the available space (extends dx-expander with overflow clipping).
+ * Container that fills the available space (extends dx-expander with overflow clipping).
  */
-@utility dx-column {
-  @apply flex-1 min-w-0 w-full;
+@utility dx-container {
+  @apply dx-expander overflow-hidden;
 }
 
 /**
- * Container that fills the available space (extends dx-expander with overflow clipping).
+ * Column that fills the available space (extends dx-expander with overflow clipping).
  */
-@utility dx-container {
-  @apply dx-expander overflow-hidden;
+@utility dx-column {
+  @apply flex-1 min-w-0 w-full;
 }
 
 /**
@@ -74,3 +74,45 @@
   @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

@@ -16,7 +16,6 @@ External packages importing fragment definitions from `ui-theme/src/fragments`.
 | `focus.ts`    | `focusRing`                           | 2        | 5        |
 | `focus.ts`    | `subduedFocus`                        | -        | 2        |
 | `focus.ts`    | `staticFocusRing`                     | -        | 1        |
-| `hover.ts`    | `subtleHover`                         | 4        | -        |
 | `hover.ts`    | `ghostHover`                          | 8        | 2        |
 | `hover.ts`    | `ghostFocusWithin`                    | 1        | -        |
 | `hover.ts`    | `hoverableControls`                   | 9        | -        |
@@ -53,6 +52,4 @@ External packages importing fragment definitions from `ui-theme/src/fragments`.
 
 **Completely unused:** 7 fragments
 
-- `subtleHover` from `hover.ts`
 - `hoverableOpenControlItem`, `groupHoverControlItemWithTransition` from `hover.ts` (only 2-3 uses)
-- `descriptionTextPrimary` from `text.ts` (only 1 use)

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/text.ts

@@ -2,5 +2,5 @@
 // Copyright 2022 DXOS.org
 //
 
-export const descriptionTextPrimary = 'text-sm font-normal text-base-surface-text';
+// TODO(burdon): Replace with Message component.
 export const descriptionMessage = 'text-description border border-dashed border-separator rounded-sm p-4';

package/src/main.css

@@ -11,7 +11,17 @@
  */
 @layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
 
-@import 'tailwindcss';
+/**
+ * `source(none)` disables Tailwind 4's automatic content discovery (which
+ * scans the project root, including `publicDir`). With auto-detection on,
+ * every write to `public/icons.svg` from `vite-plugin-icons` triggers a
+ * Tailwind CSS regeneration, which invalidates `main.css` through its
+ * import graph and produces a 3–5-ping HMR storm per icon-sprite write
+ * during cold-start (icons land in tight bursts as plugin chunks stream
+ * in). Explicit `@source` directives below replace the auto-scan with a
+ * stable, source-only set.
+ */
+@import 'tailwindcss' source(none);
 
 /* @theme extensions */
 @import './css/theme/animation.css';
@@ -54,16 +64,40 @@
 @import './css/integrations/tldraw.css';
 
 /**
- * Force-emit CSS variables for the full color palette for all: 
+ * With `source(none)` on the Tailwind import above, these are the *only*
+ * paths Tailwind scans for utility classes. Cover every workspace source
+ * directory so lazy-loaded plugin / UI / SDK chunks don't surface new
+ * utilities mid-session, and root-level HTML entrypoints (index.html,
+ * internal.html, …) are visible too.
+ *
+ * Paths are relative to this file (`packages/ui/ui-theme/src/main.css`):
+ *   ../../../          → `packages/`
+ *   ../../../../tools/ → `tools/`
+ *
+ * Tailwind ignores `node_modules` and common build/output dirs by default,
+ * so a broad workspace glob is safe.
+ */
+@source "../../../**/*.{ts,tsx,html}";
+@source "../../../../tools/**/*.{ts,tsx,html}";
+
+/**
+ * Force-emit CSS variables for the full color palette for all:
  * --color-{hue}-{shade}
  * --color-{hue}-{style}
  */
 @source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}");
-@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,surface-text,text,border}");
+@source inline("bg-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{fill,surface,foreground,text,border}");
 @source inline("border-{neutral,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-border");
-@source inline("bg-{info,success,warning,error}-{fill,surface,surface-text,text,border}");
+@source inline("bg-{info,success,warning,error}-{fill,surface,foreground,text,border}");
 @source inline("border-{info,success,warning,error}-border");
 
+/**
+ * Force-emit tokens consumed by web components / .pcss files outside the
+ * Tailwind source-scan graph (e.g. lit-grid's dx-grid.pcss uses
+ * var(--color-grid-line)).
+ */
+@source inline("bg-grid-{surface,foreground,line,highlight,comment,comment-active,selection-surface,selection-foreground}");
+
 /**
  * Plugins must come after all imports.
  */

package/src/theme/components/button.ts

@@ -8,9 +8,9 @@ import { ghostHover } from '../../fragments';
 import { mx } from '../../util';
 
 export const primaryButtonColors =
-  'text-accent-surface-text bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
+  'text-accent-foreground bg-accent-surface hover:bg-accent-surface-hover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
 
-export const staticDefaultButtonColors = 'bg-input-surface text-input-surface-text';
+export const staticDefaultButtonColors = 'bg-input-surface text-input-foreground';
 
 export const defaultButtonColors = mx(
   staticDefaultButtonColors,

package/src/theme/components/card.ts

@@ -73,6 +73,9 @@ const cardLink: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
 const cardLinkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
   mx('dx-card__link-label min-w-0 flex-1 truncate', ...etc);
 
+const cardRow: ComponentFunction<CardStyleProps> = (_, ...etc) =>
+  mx('dx-card__row col-span-3 grid grid-cols-subgrid', ...etc);
+
 const cardIconBlock: ComponentFunction<CardStyleProps> = ({ padding }, ...etc) =>
   mx(
     'dx-card__icon-block grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center',
@@ -85,6 +88,7 @@ export const cardTheme: Theme<CardStyleProps> = {
   toolbar: cardToolbar,
   title: cardTitle,
   content: cardContent,
+  row: cardRow,
   heading: cardHeading,
   text: cardText,
   'text-span': cardTextSpan,

package/src/theme/components/dialog.ts

@@ -5,6 +5,7 @@
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
+import { withColumn } from '../primitives/column';
 
 export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
 
@@ -35,12 +36,13 @@ export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLa
 };
 
 export const dialogHeader: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__header flex pb-4 items-center justify-between', ...etc);
+  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
 
-export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__body', ...etc);
+export const dialogBody: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
 
 export const dialogActionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
-  mx('dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse', ...etc);
+  mx('dx-dialog__actionbar flex items-center pt-4 gap-2 dx-density-coarse', withColumn.center(), ...etc);
 
 export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
   mx('dx-dialog__title', srOnly && 'sr-only', ...etc);

package/src/theme/components/focus.ts

@@ -20,8 +20,8 @@ export type FocusStyleProps = {
 const focusRing: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
   mx(
     'dx-ring-pseudo outline-hidden',
-    'focus:after:ring-neutral-focus-indicator',
-    'data-[focus-state=active]:after:ring-neutral-focus-indicator',
+    'focus:after:ring-focus-ring-subtle',
+    'data-[focus-state=active]:after:ring-focus-ring-subtle',
     'data-[focus-state=error]:after:ring-rose-500',
     border && 'border border-separator',
     ...etc,

package/src/theme/components/icon-button.ts

@@ -7,10 +7,13 @@ import type { ComponentFunction, Theme } from '@dxos/ui-types';
 import { mx } from '../../util';
 import { type ButtonStyleProps } from './button';
 
-export type IconButtonStyleProps = ButtonStyleProps & { iconOnly?: boolean };
+export type IconButtonStyleProps = ButtonStyleProps & {
+  iconOnly?: boolean;
+  square?: boolean;
+};
 
-export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly }, ...etc) => {
-  return mx('px-1.5', !iconOnly && 'gap-2', ...etc);
+export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
+  return mx('px-1.5', !iconOnly && 'gap-1.5', square && 'aspect-square', ...etc);
 };
 
 export const iconButtonTheme: Theme<IconButtonStyleProps> = {

package/src/theme/components/input.ts

@@ -11,7 +11,7 @@ import {
   type Size,
 } from '@dxos/ui-types';
 
-import { coarseBlockSize, coarseDimensions, fineBlockSize, fineDimensions, staticDisabled } from '../../fragments';
+import { densityDimensions, staticDisabled } from '../../fragments';
 import { getSize, getHeight, getWidth, mx, snapSize, sizeValue, textValence } from '../../util';
 
 export type InputStyleProps = Partial<{
@@ -58,24 +58,24 @@ const inputValence = (valence?: MessageValence) => {
 };
 
 const sharedSubduedInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full bg-transparent text-current placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
-  props.density === 'fine' ? fineBlockSize : coarseBlockSize,
+  'py-0 w-full bg-transparent text-current placeholder-placeholder',
   'dx-focus-subdued',
+  densityDimensions(props.density),
   props.disabled && staticDisabled,
 ];
 
 const sharedDefaultInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-foreground rounded-xs placeholder-placeholder',
   textInputSurfaceFocus,
-  props.density === 'fine' ? fineDimensions : coarseDimensions,
+  densityDimensions(props.density),
   props.disabled ? staticDisabled : textInputSurfaceHover,
 ];
 
 const sharedStaticInputStyles: ComponentFragment<InputStyleProps> = (props) => [
-  'py-0 w-full text-base-surface-text rounded-xs placeholder-placeholder',
   '[[data-drag-autoscroll="active"]_&]:pointer-events-none',
+  'py-0 w-full text-base-foreground rounded-xs placeholder-placeholder',
   textInputSurfaceFocus,
   textInputSurfaceHover,
   props.focused && 'bg-attention-surface',
@@ -135,9 +135,9 @@ const inputSegment: ComponentFunction<InputStyleProps> = (props, ...etc) =>
   mx(
     'flex items-center justify-center font-mono',
     props.density === 'fine' ? 'size-10 pointer-fine:size-8 rounded-xs' : 'size-12 rounded-xs',
-    'bg-input-surface text-base-surface-text transition-colors border border-separator',
-    'data-[focused]:bg-attention-surface data-[focused]:border-neutral-focus-indicator',
-    'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-neutral-focus-indicator',
+    'bg-input-surface text-base-foreground transition-colors border border-separator',
+    'data-[focused]:bg-attention-surface data-[focused]:border-focus-ring-subtle',
+    'data-[focused]:ring-2 data-[focused]:ring-offset-0 data-[focused]:ring-focus-ring-subtle',
     inputValence(props.validationValence),
     props.disabled && staticDisabled,
     ...etc,

package/src/theme/components/message.ts

@@ -12,23 +12,23 @@ export type MessageStyleProps = {
 };
 
 export const messageRoot: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
-  return mx('grid grid-cols-[min-content_1fr] gap-x-2 p-trim-sm rounded-sm', messageValence(valence), etc);
+  return mx('grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm', messageValence(valence), etc);
 };
 
 export const messageHeader: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-span-2 grid grid-cols-subgrid items-center', etc);
+  return mx('col-span-full grid grid-cols-subgrid items-center', etc);
 };
 
 export const messageTitle: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-2 gap-trim-sm [&>svg]:inline-block', etc);
+  return mx('col-start-2 truncate', etc);
 };
 
 export const messageIcon: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('col-start-1', etc);
+  return mx('col-start-1 grid place-items-center', etc);
 };
 
 export const messageContent: ComponentFunction<MessageStyleProps> = (_, etc) => {
-  return mx('grid grid-cols-subgrid col-start-2 first:font-medium', etc);
+  return mx('col-start-2 grid grid-cols-subgrid inline first:font-medium', etc);
 };
 
 export const messageTheme: Theme<MessageStyleProps> = {

package/src/theme/components/popover.ts

@@ -23,7 +23,7 @@ export const popoverContent: ComponentFunction<PopoverStyleProps> = ({ elevation
 
 export const popoverViewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
   mx(
-    'flex flex-col min-h-0 min-w-popover-min-width',
+    'grid grid-rows-[1fr] min-h-0 min-w-popover-min-width',
     (constrainBlock || constrainInline) && 'overflow-hidden',
     constrainBlock && 'max-h-(--radix-popover-content-available-height)',
     constrainBlock &&

package/src/theme/components/scroll-area.ts

@@ -5,6 +5,7 @@
 import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
+import { withColumn } from '../primitives/column';
 
 export const scrollbar = {
   thin: {
@@ -41,8 +42,8 @@ export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orient
     orientation === 'horizontal' && 'group/scroll-h flex',
     orientation === 'all' && 'group/scroll-all',
 
-    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
-    '[.dx-column_&]:col-span-full',
+    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+    '[.dx-column-root_&]:col-span-full',
 
     ...etc,
   );
@@ -51,13 +52,17 @@ export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orient
  * NOTE: The browser reserves space for scrollbars.
  */
 export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
-  { orientation, centered, padding, snap, thin, autoHide },
+  { orientation, centered, padding, snap, autoHide },
   ...etc
 ) => {
   return mx(
-    'h-full w-full',
+    'flex-1 min-h-0 w-full',
 
-    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
+
+    orientation === 'vertical' && 'overflow-y-scroll',
     orientation === 'horizontal' && 'flex overflow-x-scroll overscroll-x-contain',
     orientation === 'all' && 'overflow-scroll',
 

package/src/theme/components/select.ts

@@ -25,7 +25,7 @@ export const selectViewport: ComponentFunction<SelectStyleProps> = (_props, ...e
 export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
   mx(
     'flex items-center min-h-[2rem] px-3 py-1 gap-2',
-    'text-base-surface-text leading-none select-none outline-hidden',
+    'text-base-foreground leading-none select-none outline-hidden',
     '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
     'dx-highlighted',
     ...etc,

package/src/theme/components/tooltip.ts

@@ -12,7 +12,7 @@ export type TooltipStyleProps = Partial<{
 
 export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-surface-text rounded-sm',
+    'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-foreground rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'tooltip' }),
     ...etc,