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

package/src/css/theme/styles.css

@@ -1,145 +1,198 @@
 /**
- * Color styles
+ * Color styles.
+ *
+ * Roles:
+ * -bg        background fill (e.g., button)
+ * -bg-hover  hover background fill
+ * -fg        foreground for text on surface
+ * -surface   background for surface
+ * -text      text on base surface
+ * -border    border for surface
+ *
+ * Hue/role tokens: each hue exposes bg / bg-hover / surface / fg / text / border.
+ * `fg` is the on-color for a colored bg/surface; `text` is the hue as standalone
+ * colored text on the neutral background. Semantic names (primary, error, …) alias a source hue.
+ *
+ * These tokens are literal custom properties on disk (not expanded at PostCSS time) because
+ * several pipelines read the theme without our Vite plugin chain — notably Tailwind's
+ * `@reference "…/main.css"` loader used by the lit-* packages, and tailwindcss's design-system
+ * loader used in tests. Edit them here directly.
  */
 
 @theme {
   /*
-   * Semantic
+   * Semantic — each name aliases a source hue.
    */
 
-  --color-info-fill: var(--color-cyan-fill);
+  --color-primary-bg: var(--color-blue-bg);
+  --color-primary-bg-hover: var(--color-blue-bg-hover);
+  --color-primary-fg: var(--color-blue-fg);
+  --color-primary-surface: var(--color-blue-surface);
+  --color-primary-text: var(--color-blue-text);
+  --color-primary-border: var(--color-blue-border);
+
+  --color-secondary-bg: var(--color-green-bg);
+  --color-secondary-bg-hover: var(--color-green-bg-hover);
+  --color-secondary-fg: var(--color-green-fg);
+  --color-secondary-surface: var(--color-green-surface);
+  --color-secondary-text: var(--color-green-text);
+  --color-secondary-border: var(--color-green-border);
+
+  --color-info-bg: var(--color-cyan-bg);
+  --color-info-bg-hover: var(--color-cyan-bg-hover);
+  --color-info-fg: var(--color-cyan-fg);
   --color-info-surface: var(--color-cyan-surface);
-  --color-info-surface-text: var(--color-cyan-surface-text);
   --color-info-text: var(--color-cyan-text);
   --color-info-border: var(--color-cyan-border);
 
-  --color-success-fill: var(--color-emerald-fill);
+  --color-success-bg: var(--color-emerald-bg);
+  --color-success-bg-hover: var(--color-emerald-bg-hover);
+  --color-success-fg: var(--color-emerald-fg);
   --color-success-surface: var(--color-emerald-surface);
-  --color-success-surface-text: var(--color-emerald-surface-text);
   --color-success-text: var(--color-emerald-text);
   --color-success-border: var(--color-emerald-border);
 
-  --color-warning-fill: var(--color-amber-fill);
+  --color-warning-bg: var(--color-amber-bg);
+  --color-warning-bg-hover: var(--color-amber-bg-hover);
+  --color-warning-fg: var(--color-amber-fg);
   --color-warning-surface: var(--color-amber-surface);
-  --color-warning-surface-text: var(--color-amber-surface-text);
   --color-warning-text: var(--color-amber-text);
   --color-warning-border: var(--color-amber-border);
 
-  --color-error-fill: var(--color-rose-fill);
+  --color-error-bg: var(--color-rose-bg);
+  --color-error-bg-hover: var(--color-rose-bg-hover);
+  --color-error-fg: var(--color-rose-fg);
   --color-error-surface: var(--color-rose-surface);
-  --color-error-surface-text: var(--color-rose-surface-text);
   --color-error-text: var(--color-rose-text);
   --color-error-border: var(--color-rose-border);
 
-  /**
-   * Hue
+  /*
+   * Hue.
    */
 
-  --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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-text: light-dark(var(--color-rose-700), var(--color-rose-300));
-  --color-rose-border: light-dark(var(--color-rose-400), var(--color-rose-600));
+  --color-neutral-bg: var(--color-neutral-600);
+  --color-neutral-bg-hover: var(--color-neutral-700);
+  --color-neutral-fg: var(--color-neutral-900);
+  --color-neutral-surface: var(--color-neutral-400);
+  --color-neutral-text: light-dark(var(--color-neutral-800), var(--color-neutral-500));
+  --color-neutral-border: var(--color-neutral-600);
+
+  --color-red-bg: var(--color-red-600);
+  --color-red-bg-hover: var(--color-red-700);
+  --color-red-fg: var(--color-red-900);
+  --color-red-surface: var(--color-red-400);
+  --color-red-text: light-dark(var(--color-red-800), var(--color-red-500));
+  --color-red-border: var(--color-red-600);
+
+  --color-orange-bg: var(--color-orange-600);
+  --color-orange-bg-hover: var(--color-orange-700);
+  --color-orange-fg: var(--color-orange-900);
+  --color-orange-surface: var(--color-orange-400);
+  --color-orange-text: light-dark(var(--color-orange-800), var(--color-orange-500));
+  --color-orange-border: var(--color-orange-600);
+
+  --color-amber-bg: var(--color-amber-600);
+  --color-amber-bg-hover: var(--color-amber-700);
+  --color-amber-fg: var(--color-amber-900);
+  --color-amber-surface: var(--color-amber-400);
+  --color-amber-text: light-dark(var(--color-amber-800), var(--color-amber-500));
+  --color-amber-border: var(--color-amber-600);
+
+  --color-yellow-bg: var(--color-yellow-600);
+  --color-yellow-bg-hover: var(--color-yellow-700);
+  --color-yellow-fg: var(--color-yellow-900);
+  --color-yellow-surface: var(--color-yellow-400);
+  --color-yellow-text: light-dark(var(--color-yellow-800), var(--color-yellow-500));
+  --color-yellow-border: var(--color-yellow-600);
+
+  --color-lime-bg: var(--color-lime-600);
+  --color-lime-bg-hover: var(--color-lime-700);
+  --color-lime-fg: var(--color-lime-900);
+  --color-lime-surface: var(--color-lime-400);
+  --color-lime-text: light-dark(var(--color-lime-800), var(--color-lime-500));
+  --color-lime-border: var(--color-lime-600);
+
+  --color-green-bg: var(--color-green-600);
+  --color-green-bg-hover: var(--color-green-700);
+  --color-green-fg: var(--color-green-900);
+  --color-green-surface: var(--color-green-400);
+  --color-green-text: light-dark(var(--color-green-800), var(--color-green-500));
+  --color-green-border: var(--color-green-600);
+
+  --color-emerald-bg: var(--color-emerald-600);
+  --color-emerald-bg-hover: var(--color-emerald-700);
+  --color-emerald-fg: var(--color-emerald-900);
+  --color-emerald-surface: var(--color-emerald-400);
+  --color-emerald-text: light-dark(var(--color-emerald-800), var(--color-emerald-500));
+  --color-emerald-border: var(--color-emerald-600);
+
+  --color-teal-bg: var(--color-teal-600);
+  --color-teal-bg-hover: var(--color-teal-700);
+  --color-teal-fg: var(--color-teal-900);
+  --color-teal-surface: var(--color-teal-400);
+  --color-teal-text: light-dark(var(--color-teal-800), var(--color-teal-500));
+  --color-teal-border: var(--color-teal-600);
+
+  --color-cyan-bg: var(--color-cyan-600);
+  --color-cyan-bg-hover: var(--color-cyan-700);
+  --color-cyan-fg: var(--color-cyan-900);
+  --color-cyan-surface: var(--color-cyan-400);
+  --color-cyan-text: light-dark(var(--color-cyan-800), var(--color-cyan-500));
+  --color-cyan-border: var(--color-cyan-600);
+
+  --color-sky-bg: var(--color-sky-600);
+  --color-sky-bg-hover: var(--color-sky-700);
+  --color-sky-fg: var(--color-sky-900);
+  --color-sky-surface: var(--color-sky-400);
+  --color-sky-text: light-dark(var(--color-sky-800), var(--color-sky-500));
+  --color-sky-border: var(--color-sky-600);
+
+  --color-blue-bg: var(--color-blue-600);
+  --color-blue-bg-hover: var(--color-blue-700);
+  --color-blue-fg: var(--color-blue-900);
+  --color-blue-surface: var(--color-blue-400);
+  --color-blue-text: light-dark(var(--color-blue-800), var(--color-blue-500));
+  --color-blue-border: var(--color-blue-600);
+
+  --color-indigo-bg: var(--color-indigo-600);
+  --color-indigo-bg-hover: var(--color-indigo-700);
+  --color-indigo-fg: var(--color-indigo-900);
+  --color-indigo-surface: var(--color-indigo-400);
+  --color-indigo-text: light-dark(var(--color-indigo-800), var(--color-indigo-500));
+  --color-indigo-border: var(--color-indigo-600);
+
+  --color-violet-bg: var(--color-violet-600);
+  --color-violet-bg-hover: var(--color-violet-700);
+  --color-violet-fg: var(--color-violet-900);
+  --color-violet-surface: var(--color-violet-400);
+  --color-violet-text: light-dark(var(--color-violet-800), var(--color-violet-500));
+  --color-violet-border: var(--color-violet-600);
+
+  --color-purple-bg: var(--color-purple-600);
+  --color-purple-bg-hover: var(--color-purple-700);
+  --color-purple-fg: var(--color-purple-900);
+  --color-purple-surface: var(--color-purple-400);
+  --color-purple-text: light-dark(var(--color-purple-800), var(--color-purple-500));
+  --color-purple-border: var(--color-purple-600);
+
+  --color-fuchsia-bg: var(--color-fuchsia-600);
+  --color-fuchsia-bg-hover: var(--color-fuchsia-700);
+  --color-fuchsia-fg: var(--color-fuchsia-900);
+  --color-fuchsia-surface: var(--color-fuchsia-400);
+  --color-fuchsia-text: light-dark(var(--color-fuchsia-800), var(--color-fuchsia-500));
+  --color-fuchsia-border: var(--color-fuchsia-600);
+
+  --color-pink-bg: var(--color-pink-600);
+  --color-pink-bg-hover: var(--color-pink-700);
+  --color-pink-fg: var(--color-pink-900);
+  --color-pink-surface: var(--color-pink-400);
+  --color-pink-text: light-dark(var(--color-pink-800), var(--color-pink-500));
+  --color-pink-border: var(--color-pink-600);
+
+  --color-rose-bg: var(--color-rose-600);
+  --color-rose-bg-hover: var(--color-rose-700);
+  --color-rose-fg: var(--color-rose-900);
+  --color-rose-surface: var(--color-rose-400);
+  --color-rose-text: light-dark(var(--color-rose-800), var(--color-rose-500));
+  --color-rose-border: var(--color-rose-600);
 }

package/src/css/utilities.css

@@ -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,9 @@ 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;
+// NOTE: These are the JS-side style-API role keys (see ColorStyles in util/hash-styles.ts), kept
+// distinct from the renamed CSS custom-property suffixes (`-bg`/`-fg`).
+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,5 +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)

package/src/fragments/density.ts

@@ -4,13 +4,40 @@
 
 import { type Density } from '@dxos/ui-types';
 
-const fineBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
-const coarseBlockSize = 'min-h-[2.5rem]';
+const lgBlockSize = 'min-h-[2.5rem]';
+const mdBlockSize = 'min-h-[2.5rem] pointer-fine:min-h-[2rem]';
+const smBlockSize = 'min-h-[1.75rem]';
+const xsBlockSize = 'min-h-[1.5rem]';
 
-const fineDimensions = `${fineBlockSize} px-2`;
-const coarseDimensions = `${coarseBlockSize} px-3`;
+const lgDimensions = `${lgBlockSize} px-3`;
+const mdDimensions = `${mdBlockSize} px-2`;
+const smDimensions = `${smBlockSize} px-1.5`;
+const xsDimensions = `${xsBlockSize} px-1`;
 
-export const densityDimensions = (density: Density = 'fine') =>
-  density === 'fine' ? fineDimensions : coarseDimensions;
+export const densityDimensions = (density: Density = 'md') => {
+  switch (density) {
+    case 'lg':
+      return lgDimensions;
+    case 'sm':
+      return smDimensions;
+    case 'xs':
+      return xsDimensions;
+    case 'md':
+    default:
+      return mdDimensions;
+  }
+};
 
-export const densityBlockSize = (density: Density = 'fine') => (density === 'fine' ? fineBlockSize : coarseBlockSize);
+export const densityBlockSize = (density: Density = 'md') => {
+  switch (density) {
+    case 'lg':
+      return lgBlockSize;
+    case 'sm':
+      return smBlockSize;
+    case 'xs':
+      return xsBlockSize;
+    case 'md':
+    default:
+      return mdBlockSize;
+  }
+};

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

@@ -4,5 +4,5 @@
 
 export * from './defs';
 export * from './fragments';
-export * from './theme';
+
 export * from './util';

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';
@@ -28,6 +38,7 @@
 
 /* @layer dx-components (components) */
 @import './css/components/button.css';
+@import './css/components/card.css';
 @import './css/components/checkbox.css';
 @import './css/components/dialog.css';
 @import './css/components/focus.css';
@@ -35,7 +46,7 @@
 @import './css/components/panel.css';
 @import './css/components/link.css';
 @import './css/components/scrollbar.css';
-@import './css/components/selected.css';
+@import './css/components/state.css';
 @import './css/components/surface.css';
 @import './css/components/tag.css';
 @import './css/components/text.css';
@@ -54,15 +65,63 @@
 @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 *for scanning*.
+ *
+ * NOTE: Tailwind's scanner respects `.gitignore` (so `dist/` is never
+ * scanned), but it hands Vite a coarse `dir-dependency` glob and Vite
+ * re-expands that itself, ignoring only `node_modules`. That re-expansion
+ * sweeps `dist/**` `.d.ts` files into the watch set and causes a `main.css`
+ * HMR storm on every package rebuild. Build outputs are excluded from the
+ * dev watcher in `plugins/ThemePlugin.ts` (`server.watch.ignored`) rather
+ * than here, because `@source not` does NOT propagate to the glob Vite
+ * re-expands.
+ */
+@source '../../../**/*.{ts,tsx,html}';
+@source '../../../../tools/**/*.{ts,tsx,html}';
+
+/**
+ * Exclude generated/static data files that have no Tailwind classes but are
+ * large enough to dominate scan time. The oxide scanner tokenizes every byte;
+ * a single 5MB geo-data file can pin Vite at 100% CPU for tens of seconds on
+ * a cold start.
+ */
+@source not '../../../ui/react-ui-geo/data/**';
+@source not '../../../ui/solid-ui-geo/data/**';
+@source not '../../../apps/composer-app/src/plugins/welcome/components/Welcome/hero-image.ts';
+
+/**
+ * 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("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("border-{info,success,warning,error}-border");
+@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}-{bg,bg-hover,fg,surface,text,border}');
+@source inline('bg-{primary,secondary}-{50,100,200,300,400,500,600,700,800,900,950}');
+@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}-{bg,surface,fg,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,fg,line,highlight,comment,comment-active,selection-surface,selection-fg}');
+/* 
+ * Sidebar surfaces alias each other (e.g. header-surface -> l0-surface); force-emit so the vars
+ * exist in apps that use the alias but not the underlying utility (e.g. devtools). 
+ */
+@source inline('bg-{l0,r0,l1,r1}-surface');
 
 /**
  * Plugins must come after all imports.
@@ -84,4 +143,4 @@
 /** Supports mouse/trackpad (Web) */
 @custom-variant hover-hover (@media (hover: hover));
 /** Active navigation */
-@custom-variant is-current (&[aria-current]:not([aria-current="false"]));
+@custom-variant is-current (&[aria-current]:not([aria-current='false']));