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

package/src/theme/primitives/column.ts

@@ -6,42 +6,66 @@ import { type ComponentFunction } from '@dxos/ui-types';
 
 import { mx } from '../../util';
 
-export type ColumnStyleProps = {
-  fullWidth?: boolean;
-  center?: boolean;
+/**
+ * Column-aware theme utilities.
+ * Components apply these in their theme functions to participate in the Column grid
+ * without importing Column React components.
+ *
+ * CSS custom property cascade:
+ * - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
+ * - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
+ * - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
+ *   or do nothing outside Column / inside ScrollArea.
+ */
+export const withColumn = {
+  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
+  center: () => '[grid-column:var(--dx-col,auto)]',
+
+  /** Propagates the Column grid to children via subgrid. No-op outside Column.
+   *  Direct children default to center column unless they are a dx-container (ScrollArea). */
+  propagate: () =>
+    '[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]',
+
+  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
+  consumed: () => '[--dx-col:auto]',
 };
 
+export type ColumnStyleProps = {};
+
 const columnRoot: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('dx-column grid', ...etc);
+  return mx('dx-column-root grid', ...etc);
 };
 
 /**
- * Full-width content area that inherits the parent Column.Root's 3-column grid via subgrid.
- * Non-scrolling children default to column 2 (center, between gutters).
- * ScrollArea children span all 3 columns via the existing `[.dx-column_&]:col-span-full` selector.
- * This avoids padding/overflow conflicts — gutters come from the grid, not padding.
+ * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
+ * Uses CSS subgrid to inherit column sizing from the parent Column.
+ * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
  */
-const columnContent: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx('col-span-full grid grid-cols-subgrid min-h-0 [&>:not(.dx-container)]:col-start-2', ...etc);
+const columnRow: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
 };
 
-const columnViewport: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
-  return mx(...etc);
+/**
+ * Bleed placement: spans all 3 columns of the parent Column.Root grid (gutter-to-gutter).
+ * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore gutters.
+ */
+const columnBleed: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-full grid grid-cols-subgrid min-h-0', ...etc);
 };
 
 /**
- * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
- * Uses CSS subgrid to inherit column sizing from the parent Column.
- * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
- * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ * Center placement: places the element in column 2 (the central track between gutters) of the
+ * parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
+ * Safe to nest arbitrary compound components (including those that render `display: contents`).
  */
-const columnRow: ComponentFunction<ColumnStyleProps> = ({ fullWidth, center }, ...etc) => {
-  return mx('col-span-3 grid grid-cols-subgrid', fullWidth ? 'col-span-3' : center && 'col-start-2 col-span-1', ...etc);
+const columnCenter: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(withColumn.center(), 'min-h-0', ...etc);
 };
 
 export const columnTheme = {
   root: columnRoot,
-  content: columnContent,
-  viewport: columnViewport,
   row: columnRow,
+  bleed: columnBleed,
+  center: columnCenter,
 };

package/src/util/hash-styles.ts

@@ -11,7 +11,7 @@ export type ColorStyles = {
   hue: Hue;
   fill: string; // -fill
   surface: string; // -surface
-  surfaceText: string; // -surface-text
+  foreground: string; // -foreground
   text: string; // -text
   border: string; // -border
 };
@@ -20,7 +20,7 @@ const neutral: ColorStyles = {
   hue: 'neutral',
   fill: 'bg-neutral-fill',
   surface: 'bg-neutral-surface',
-  surfaceText: 'text-neutral-surface-text',
+  foreground: 'text-neutral-foreground',
   text: 'text-neutral-text',
   border: 'border-neutral-border',
 };
@@ -32,7 +32,7 @@ const styles: ColorStyles[] = [
     hue: 'red',
     fill: 'bg-red-fill',
     surface: 'bg-red-surface',
-    surfaceText: 'text-red-surface-text',
+    foreground: 'text-red-foreground',
     text: 'text-red-text',
     border: 'border-red-border',
   },
@@ -40,7 +40,7 @@ const styles: ColorStyles[] = [
     hue: 'orange',
     fill: 'bg-orange-fill',
     surface: 'bg-orange-surface',
-    surfaceText: 'text-orange-surface-text',
+    foreground: 'text-orange-foreground',
     text: 'text-orange-text',
     border: 'border-orange-border',
   },
@@ -48,7 +48,7 @@ const styles: ColorStyles[] = [
     hue: 'amber',
     fill: 'bg-amber-fill',
     surface: 'bg-amber-surface',
-    surfaceText: 'text-amber-surface-text',
+    foreground: 'text-amber-foreground',
     text: 'text-amber-text',
     border: 'border-amber-border',
   },
@@ -56,7 +56,7 @@ const styles: ColorStyles[] = [
     hue: 'yellow',
     fill: 'bg-yellow-fill',
     surface: 'bg-yellow-surface',
-    surfaceText: 'text-yellow-surface-text',
+    foreground: 'text-yellow-foreground',
     text: 'text-yellow-text',
     border: 'border-yellow-border',
   },
@@ -64,7 +64,7 @@ const styles: ColorStyles[] = [
     hue: 'lime',
     fill: 'bg-lime-fill',
     surface: 'bg-lime-surface',
-    surfaceText: 'text-lime-surface-text',
+    foreground: 'text-lime-foreground',
     text: 'text-lime-text',
     border: 'border-lime-border',
   },
@@ -72,7 +72,7 @@ const styles: ColorStyles[] = [
     hue: 'green',
     fill: 'bg-green-fill',
     surface: 'bg-green-surface',
-    surfaceText: 'text-green-surface-text',
+    foreground: 'text-green-foreground',
     text: 'text-green-text',
     border: 'border-green-border',
   },
@@ -80,7 +80,7 @@ const styles: ColorStyles[] = [
     hue: 'emerald',
     fill: 'bg-emerald-fill',
     surface: 'bg-emerald-surface',
-    surfaceText: 'text-emerald-surface-text',
+    foreground: 'text-emerald-foreground',
     text: 'text-emerald-text',
     border: 'border-emerald-border',
   },
@@ -88,7 +88,7 @@ const styles: ColorStyles[] = [
     hue: 'teal',
     fill: 'bg-teal-fill',
     surface: 'bg-teal-surface',
-    surfaceText: 'text-teal-surface-text',
+    foreground: 'text-teal-foreground',
     text: 'text-teal-text',
     border: 'border-teal-border',
   },
@@ -96,7 +96,7 @@ const styles: ColorStyles[] = [
     hue: 'cyan',
     fill: 'bg-cyan-fill',
     surface: 'bg-cyan-surface',
-    surfaceText: 'text-cyan-surface-text',
+    foreground: 'text-cyan-foreground',
     text: 'text-cyan-text',
     border: 'border-cyan-border',
   },
@@ -104,7 +104,7 @@ const styles: ColorStyles[] = [
     hue: 'sky',
     fill: 'bg-sky-fill',
     surface: 'bg-sky-surface',
-    surfaceText: 'text-sky-surface-text',
+    foreground: 'text-sky-foreground',
     text: 'text-sky-text',
     border: 'border-sky-border',
   },
@@ -112,7 +112,7 @@ const styles: ColorStyles[] = [
     hue: 'blue',
     fill: 'bg-blue-fill',
     surface: 'bg-blue-surface',
-    surfaceText: 'text-blue-surface-text',
+    foreground: 'text-blue-foreground',
     text: 'text-blue-text',
     border: 'border-blue-border',
   },
@@ -120,7 +120,7 @@ const styles: ColorStyles[] = [
     hue: 'indigo',
     fill: 'bg-indigo-fill',
     surface: 'bg-indigo-surface',
-    surfaceText: 'text-indigo-surface-text',
+    foreground: 'text-indigo-foreground',
     text: 'text-indigo-text',
     border: 'border-indigo-border',
   },
@@ -128,7 +128,7 @@ const styles: ColorStyles[] = [
     hue: 'violet',
     fill: 'bg-violet-fill',
     surface: 'bg-violet-surface',
-    surfaceText: 'text-violet-surface-text',
+    foreground: 'text-violet-foreground',
     text: 'text-violet-text',
     border: 'border-violet-border',
   },
@@ -136,7 +136,7 @@ const styles: ColorStyles[] = [
     hue: 'purple',
     fill: 'bg-purple-fill',
     surface: 'bg-purple-surface',
-    surfaceText: 'text-purple-surface-text',
+    foreground: 'text-purple-foreground',
     text: 'text-purple-text',
     border: 'border-purple-border',
   },
@@ -144,7 +144,7 @@ const styles: ColorStyles[] = [
     hue: 'fuchsia',
     fill: 'bg-fuchsia-fill',
     surface: 'bg-fuchsia-surface',
-    surfaceText: 'text-fuchsia-surface-text',
+    foreground: 'text-fuchsia-foreground',
     text: 'text-fuchsia-text',
     border: 'border-fuchsia-border',
   },
@@ -152,7 +152,7 @@ const styles: ColorStyles[] = [
     hue: 'pink',
     fill: 'bg-pink-fill',
     surface: 'bg-pink-surface',
-    surfaceText: 'text-pink-surface-text',
+    foreground: 'text-pink-foreground',
     text: 'text-pink-text',
     border: 'border-pink-border',
   },
@@ -160,7 +160,7 @@ const styles: ColorStyles[] = [
     hue: 'rose',
     fill: 'bg-rose-fill',
     surface: 'bg-rose-surface',
-    surfaceText: 'text-rose-surface-text',
+    foreground: 'text-rose-foreground',
     text: 'text-rose-text',
     border: 'border-rose-border',
   },

package/src/util/mx.ts

@@ -89,6 +89,9 @@ export const composableProps = <P extends HTMLElement = HTMLElement>(
   className: mx(defaultClassNames, className, classNames),
 });
 
+/** Symbol used to mark components created by `composable()` or `slottable()`. */
+const COMPOSABLE = Symbol.for('dxos.composable');
+
 /**
  * Factory for slottable components.
  * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
@@ -109,9 +112,6 @@ export const composableProps = <P extends HTMLElement = HTMLElement>(
  * );
  * ```
  */
-/** Symbol used to mark components created by `composable()` or `slottable()`. */
-const COMPOSABLE = Symbol.for('dxos.composable');
-
 export function slottable<E extends HTMLElement, P extends object = {}>(
   render: (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
 ): ForwardRefExoticComponent<SlottableProps<P> & RefAttributes<E>> {