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

package/src/css/theme/spacing.css

@@ -31,10 +31,10 @@
   /** 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);
+  --spacing-form-section-gap: var(--spacing-trim-md);
 
   /**
-   * 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 {

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';