@dxos/ui-theme 0.8.4-main.ef1bc66f44 → 0.8.4-main.fcc0d83b33

package/src/{styles → theme}/components/toast.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import { descriptionText, focusRing, modalSurface, surfaceShadow } from '../fragments';
+import { mx, surfaceShadow } from '../../util';
 
 export type ToastStyleProps = Partial<{
   srOnly: boolean;
@@ -14,27 +13,26 @@ export type ToastStyleProps = Partial<{
 export const toastViewport: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
   mx(
     // TODO(burdon): block-end should take into account status bar.
-    'z-40 fixed block-end-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] is-auto md:inline-end-[calc(env(safe-area-inset-right)+1rem)] md:inline-start-auto md:is-full md:max-is-sm',
+    'z-40 fixed bottom-[calc(env(safe-area-inset-bottom)+1rem)] inset-start-[calc(env(safe-area-inset-left)+1rem)] inset-end-[calc(env(safe-area-inset-right)+1rem)] w-auto md:end-[calc(env(safe-area-inset-right)+1rem)] md:left-auto md:w-full md:max-w-sm',
     'rounded-md flex flex-col gap-2',
     ...etc,
   );
 
 export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
   mx(
-    'rounded-md flex p-2 gap-2',
-    modalSurface,
+    'dx-modal-surface rounded-md flex p-2 gap-2',
     surfaceShadow({ elevation: 'toast' }),
     'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
     'radix-state-closed:animate-toast-hide',
     'radix-swipe-end:animate-toast-swipe-out',
     'translate-x-radix-toast-swipe-move-x',
     'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]',
-    focusRing,
+    'dx-focus-ring',
     ...etc,
   );
 
 export const toastBody: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
-  mx('grow flex flex-col gap-1 justify-center pis-2', ...etc);
+  mx('grow flex flex-col gap-1 justify-center pl-2', ...etc);
 
 export const toastActions: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
   mx('shrink-0 flex flex-col gap-1 justify-center', ...etc);
@@ -43,7 +41,7 @@ export const toastTitle: ComponentFunction<ToastStyleProps> = ({ srOnly }, ...et
   mx('shrink-0 font-medium', srOnly && 'sr-only', ...etc);
 
 export const toastDescription: ComponentFunction<ToastStyleProps> = ({ srOnly }, ...etc) =>
-  mx(descriptionText, 'shrink-0', srOnly && 'sr-only', ...etc);
+  mx('text-description', 'shrink-0', srOnly && 'sr-only', ...etc);
 
 export const toastTheme: Theme<ToastStyleProps> = {
   viewport: toastViewport,

package/src/{styles → theme}/components/toolbar.ts

@@ -5,7 +5,6 @@
 import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import { textBlockWidth } from '../fragments';
 
 export type ToolbarStyleProps = Partial<{
   density: Density;
@@ -14,23 +13,23 @@ export type ToolbarStyleProps = Partial<{
 }>;
 
 export const toolbarLayout =
-  'is-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none contain-layout';
+  'w-full shrink-0 flex flex-nowrap p-1 gap-1 items-center overflow-x-auto scrollbar-none dx-contain-layout';
 
 export const toolbarRoot: ComponentFunction<ToolbarStyleProps> = ({ density, disabled, layoutManaged }, ...etc) => {
   return mx(
-    'bg-toolbarSurface dx-toolbar',
-    density === 'coarse' && 'bs-[var(--rail-size)] !pli-3',
+    'bg-toolbar-surface dx-toolbar',
+    density === 'coarse' && 'h-(--dx-rail-size) px-3!',
     disabled && '*:opacity-20',
     !layoutManaged && toolbarLayout,
     ...etc,
   );
 };
 
-export const toolbarInner: ComponentFunction<ToolbarStyleProps> = ({ layoutManaged }, ...etc) => {
-  return mx(!layoutManaged && ['flex gap-1', textBlockWidth], ...etc);
+export const toolbarText: ComponentFunction<ToolbarStyleProps> = (_, ...etc) => {
+  return mx('px-2 grow truncate items-center', ...etc);
 };
 
 export const toolbarTheme: Theme<ToolbarStyleProps> = {
   root: toolbarRoot,
-  inner: toolbarInner,
+  text: toolbarText,
 };

package/src/{styles → theme}/components/tooltip.ts

@@ -4,8 +4,7 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
-import { mx } from '../../util';
-import { chromeText, surfaceShadow, surfaceZIndex } from '../fragments';
+import { mx, surfaceShadow, surfaceZIndex } from '../../util';
 
 export type TooltipStyleProps = Partial<{
   elevation: Elevation;
@@ -13,15 +12,14 @@ export type TooltipStyleProps = Partial<{
 
 export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
   mx(
-    'inline-flex items-center rounded-sm plb-1 pli-2 max-is-64 bg-inverseSurface text-inverseSurfaceText',
-    // popperMotion,
+    'inline-flex items-center p-1 max-w-64 text-sm bg-inverse-surface text-inverse-surface-text rounded-sm',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'tooltip' }),
-    chromeText,
     ...etc,
   );
 
-export const tooltipArrow: ComponentFunction<TooltipStyleProps> = (_props, ...etc) => mx('fill-inverseSurface', ...etc);
+export const tooltipArrow: ComponentFunction<TooltipStyleProps> = (_props, ...etc) =>
+  mx('fill-inverse-surface', ...etc);
 
 export const tooltipTheme: Theme<TooltipStyleProps> = {
   content: tooltipContent,

package/src/{styles → theme}/components/treegrid.ts

@@ -12,20 +12,20 @@ export type TreegridStyleProps = Partial<{
 }>;
 
 const levelStyles = new Map<number, string>([
-  [1, '[&>.indent:first-of-type]:pis-0 font-medium'],
-  [2, '[&>.indent:first-of-type]:pis-0'],
-  [3, '[&>.indent:first-of-type]:pis-1'],
-  [4, '[&>.indent:first-of-type]:pis-2'],
-  [5, '[&>.indent:first-of-type]:pis-3'],
-  [6, '[&>.indent:first-of-type]:pis-4'],
-  [7, '[&>.indent:first-of-type]:pis-5'],
-  [8, '[&>.indent:first-of-type]:pis-6'],
+  [1, '[&>.indent:first-of-type]:pl-0 font-medium'],
+  [2, '[&>.indent:first-of-type]:pl-0'],
+  [3, '[&>.indent:first-of-type]:pl-1'],
+  [4, '[&>.indent:first-of-type]:pl-2'],
+  [5, '[&>.indent:first-of-type]:pl-3'],
+  [6, '[&>.indent:first-of-type]:pl-4'],
+  [7, '[&>.indent:first-of-type]:pl-5'],
+  [8, '[&>.indent:first-of-type]:pl-6'],
 ]);
 
 export const treegridRoot: ComponentFunction<TreegridStyleProps> = (_, ...etc) => mx('grid', ...etc);
 
 export const treegridRow: ComponentFunction<TreegridStyleProps> = ({ level = 1 }, ...etc) =>
-  mx('contents', levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
+  mx(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
 
 export const treegridCell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) =>
   mx(indent && 'indent', ...etc);

package/src/{styles → theme}/index.ts

@@ -1,8 +1,7 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2022 DXOS.org
 //
 
 export * from './components';
-export * from './fragments';
 export * from './primitives';
 export * from './theme';

package/src/theme/primitives/column.ts

@@ -0,0 +1,71 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+/**
+ * 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-root grid', ...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.
+ */
+const columnRow: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', ...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);
+};
+
+/**
+ * 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 columnCenter: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(withColumn.center(), 'min-h-0', ...etc);
+};
+
+export const columnTheme = {
+  root: columnRoot,
+  row: columnRow,
+  bleed: columnBleed,
+  center: columnCenter,
+};

package/src/theme/primitives/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './column';
+export * from './panel';

package/src/theme/primitives/panel.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+type Size = 'lg' | 'md' | 'sm';
+
+export type PanelStyleProps = {
+  size?: Size;
+};
+
+const sizes: Record<Size, string> = {
+  lg: 'h-(--dx-topbar-size)',
+  md: 'h-(--dx-toolbar-size)',
+  sm: 'h-(--dx-statusbar-size)',
+};
+
+const panelRoot: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
+  mx(
+    // prettier-ignore
+    'dx-container grid grid-cols-[100%] overflow-hidden',
+    // Add uncategorized children to content slot.
+    '[&>*:not([data-slot])]:[grid-area:content]',
+    ...etc,
+  );
+
+const panelToolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:toolbar]', 'shrink-0', sizes[size], ...etc);
+
+const panelContent: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
+
+const panelStatusbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:statusbar]', 'shrink-0', sizes[size], ...etc);
+
+export const panelTheme = {
+  root: panelRoot,
+  toolbar: panelToolbar,
+  content: panelContent,
+  statusbar: panelStatusbar,
+};

package/src/{styles → theme}/theme.ts

@@ -3,14 +3,15 @@
 //
 
 import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
-import { get } from '@dxos/util';
+import { getDeep } from '@dxos/util';
 
 import {
-  anchoredOverflowTheme,
   avatarTheme,
   breadcrumbTheme,
   buttonTheme,
+  cardTheme,
   dialogTheme,
+  focusTheme,
   iconButtonTheme,
   iconTheme,
   inputTheme,
@@ -24,6 +25,7 @@ import {
   selectTheme,
   separatorTheme,
   skeletonTheme,
+  splitterTheme,
   statusTheme,
   tagTheme,
   toastTheme,
@@ -31,7 +33,7 @@ import {
   tooltipTheme,
   treegridTheme,
 } from './components';
-import { containerTheme } from './primitives';
+import { columnTheme, panelTheme } from './primitives';
 
 export const defaultTheme: Theme<Record<string, any>> = {
   themeName: () => 'default',
@@ -40,17 +42,19 @@ export const defaultTheme: Theme<Record<string, any>> = {
   // Primitives
   //
 
-  container: containerTheme,
+  column: columnTheme,
+  panel: panelTheme,
 
   //
   // Components
   //
 
-  anchoredOverflow: anchoredOverflowTheme,
   avatar: avatarTheme,
   breadcrumb: breadcrumbTheme,
   button: buttonTheme,
+  card: cardTheme,
   dialog: dialogTheme,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,
@@ -64,6 +68,7 @@ export const defaultTheme: Theme<Record<string, any>> = {
   select: selectTheme,
   separator: separatorTheme,
   skeleton: skeletonTheme,
+  splitter: splitterTheme,
   status: statusTheme,
   tag: tagTheme,
   toast: toastTheme,
@@ -72,21 +77,10 @@ export const defaultTheme: Theme<Record<string, any>> = {
   treegrid: treegridTheme,
 };
 
-// TODO(burdon): Missing!
-// treegrid.cell => treegrid__cell
-const missing = new Set();
-
 export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>): ThemeFunction<P> => {
-  return (path: string, defaultClassName: string, styleProps?: P, ...etc: ClassNameArray): string => {
-    const result: Theme<P> | ComponentFunction<P> = get(theme, path);
-    const className = typeof result === 'function' && result(styleProps ?? ({} as P), ...etc);
-    if (!className) {
-      if (!missing.has(path)) {
-        // console.warn(`Missing theme path: ${path} => ${defaultClassName}`);
-        missing.add(path);
-      }
-    }
-    return className || defaultClassName;
+  return (path: string, styleProps?: P, ...etc: ClassNameArray) => {
+    const result = getDeep<Theme<P> | ComponentFunction<P>>(theme, path.split('.'));
+    return typeof result === 'function' ? result(styleProps ?? ({} as P), ...etc) : undefined;
   };
 };
 

package/src/typings.d.ts

@@ -5,4 +5,6 @@
 declare module 'fast-glob';
 declare module 'tailwindcss/stubs/config.full.js';
 declare module 'tailwindcss-radix';
-declare module 'tailwindcss-logical';
+
+/** Virtual CSS entry from ThemePlugin (`virtualFileId: '@dxos-theme'`). */
+declare module '@dxos-theme';

package/src/{styles/fragments → util}/elevation.ts

@@ -4,14 +4,12 @@
 
 import { type ComponentFragment, type Elevation, type SurfaceLevel } from '@dxos/ui-types';
 
-/**
- * @deprecated
- */
-export const contentShadow: ComponentFragment<{ elevation?: Elevation }> = (_) => ['shadow-none'];
-
-// TODO(thure): These should become tokens.
 export const surfaceShadow: ComponentFragment<{ elevation?: Elevation }> = ({ elevation }) => [
-  elevation === 'positioned' ? 'shadow' : elevation === 'dialog' || elevation === 'toast' ? 'shadow-md' : 'shadow-none',
+  elevation === 'positioned'
+    ? 'shadow-sm'
+    : elevation === 'dialog' || elevation === 'toast'
+      ? 'shadow-md'
+      : 'shadow-none',
 ];
 
 export const surfaceZIndex: ComponentFragment<{ level?: SurfaceLevel; elevation?: Elevation }> = ({
@@ -20,7 +18,7 @@ export const surfaceZIndex: ComponentFragment<{ level?: SurfaceLevel; elevation?
 }) => {
   switch (level) {
     case 'tooltip':
-      return elevation === 'dialog' ? ['z-[53]'] : elevation === 'toast' ? ['z-[43]'] : ['z-30'];
+      return elevation === 'dialog' ? ['z-[53]'] : elevation === 'toast' ? ['z-[43]'] : ['z-50'];
     case 'menu':
       return elevation === 'dialog' ? ['z-[52]'] : elevation === 'toast' ? ['z-[42]'] : ['z-20'];
     default: