@dxos/ui-theme 0.8.4-main.bc674ce → 0.8.4-main.c85a9c8dae

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

@@ -0,0 +1,103 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type ScrollAreaStyleProps = {
+  orientation?: AllowedAxis;
+  autoHide?: boolean;
+  /** Balance left/right, top/bottom "margin" with scrollbar. */
+  margin?: boolean;
+  /** Add default padding. */
+  /** TODO(burdon): Integrate with Column.Root padding. */
+  padding?: boolean;
+  /** Use thin scrollbars. */
+  /** TODO(burdon): Density fine/course. */
+  thin?: boolean;
+  /** Enable snap scrolling. */
+  snap?: boolean;
+};
+
+export const scrollAreaRoot: ComponentFunction<ScrollAreaStyleProps> = ({ orientation, margin, thin }, ...etc) =>
+  mx(
+    'overflow-hidden',
+
+    orientation === 'vertical' && 'group/scroll-v dx-container',
+    orientation === 'horizontal' && 'group/scroll-h dx-container',
+    orientation === 'all' && 'group/scroll-all dx-container',
+
+    // TODO(burdon): Audit composition.
+    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column marker).
+    '[.dx-column_&]:col-span-full',
+
+    // NOTE: Uses --gutter CSS variable
+    // If contained within Column.Root grid, the gutter is set by that component.
+    margin && [
+      orientation === 'vertical' &&
+        (thin
+          ? 'pl-[var(--gutter,4px)] pr-[calc(var(--gutter,4px)-4px)]'
+          : 'pl-[var(--gutter,8px)] pr-[calc(var(--gutter,8px)-8px)]'),
+      orientation === 'horizontal' && (thin ? 'py-[var(--gutter,4px)]' : 'py-[var(--gutter,8px)]'),
+      orientation === 'all' &&
+        (thin ? 'pl-[var(--gutter,4px)] py-[var(--gutter,8px)]' : 'pl-[var(--gutter,8px)] py-[var(--gutter,8px)]'),
+    ],
+
+    ...etc,
+  );
+
+/**
+ * NOTE: The browser reserves space for scrollbars.
+ */
+export const scrollAreaViewport: ComponentFunction<ScrollAreaStyleProps> = (
+  { orientation, autoHide, padding, snap, thin },
+  ...etc
+) =>
+  mx(
+    'h-full w-full',
+
+    orientation === 'vertical' && 'flex flex-col overflow-y-scroll',
+    orientation === 'horizontal' && 'flex overflow-x-scroll',
+    orientation === 'all' && 'overflow-scroll',
+
+    thin
+      ? '[&::-webkit-scrollbar]:w-[4px] [&::-webkit-scrollbar]:h-[4px]'
+      : '[&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:h-[8px]',
+
+    '[&::-webkit-scrollbar-corner]:bg-transparent',
+    '[&::-webkit-scrollbar-track]:bg-transparent',
+    '[&::-webkit-scrollbar-thumb]:rounded-none',
+
+    autoHide
+      ? [
+          orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ]
+      : [
+          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ],
+
+    padding && [
+      orientation === 'vertical' && 'px-[4px]',
+      orientation === 'horizontal' && 'pb-[4px]',
+      orientation === 'all' && 'pl-[4px] pb-[4px]',
+    ],
+
+    snap && [
+      orientation === 'vertical' && 'snap-y snap-mandatory',
+      orientation === 'horizontal' && 'snap-x snap-mandatory',
+      orientation === 'all' && 'snap-both snap-mandatory',
+    ],
+
+    ...etc,
+  );
+
+export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
+  root: scrollAreaRoot,
+  viewport: scrollAreaViewport,
+};

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

@@ -4,15 +4,8 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
+import { ghostHighlighted, surfaceShadow, surfaceZIndex } from '../../fragments';
 import { mx } from '../../util';
-import {
-  blockSeparator,
-  ghostHighlighted,
-  modalSurface,
-  separatorBorderColor,
-  surfaceShadow,
-  surfaceZIndex,
-} from '../fragments';
 
 export type SelectStyleProps = Partial<{
   elevation: Elevation;
@@ -20,8 +13,8 @@ export type SelectStyleProps = Partial<{
 
 export const selectContent: ComponentFunction<SelectStyleProps> = ({ elevation }, ...etc) => {
   return mx(
-    'min-w-[--radix-select-trigger-width] rounded max-bs-[--radix-select-content-available-height] border border-separator',
-    modalSurface,
+    'dx-modal-surface rounded-sm border border-separator',
+    'min-w-(--radix-select-trigger-width) max-h-(--radix-select-content-available-height)',
     surfaceShadow({ elevation: 'positioned' }),
     surfaceZIndex({ elevation, level: 'menu' }),
     ...etc,
@@ -32,8 +25,8 @@ export const selectViewport: ComponentFunction<SelectStyleProps> = (_props, ...e
 
 export const selectItem: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
   mx(
-    'flex items-center min-bs-[2rem] pli-3 plb-1 gap-2',
-    'text-baseText leading-none select-none outline-none',
+    'flex items-center min-h-[2rem] px-3 py-1 gap-2',
+    'text-base-surface-text leading-none select-none outline-hidden',
     '[&>svg]:invisible [&[data-state=checked]>svg]:visible',
     ghostHighlighted,
     ...etc,
@@ -44,10 +37,10 @@ export const selectItemIndicator: ComponentFunction<SelectStyleProps> = (_props,
 export const selectArrow: ComponentFunction<SelectStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
 
 export const selectSeparator: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx(blockSeparator, separatorBorderColor, ...etc);
+  mx('self-stretch border-b my-1 border-separator', ...etc);
 
 export const selectScrollButton: ComponentFunction<SelectStyleProps> = (_props, ...etc) =>
-  mx(modalSurface, 'flex items-center justify-center cursor-default bs-6 is-full', ...etc);
+  mx('dx-modal-surface flex items-center justify-center cursor-default h-6 w-full', ...etc);
 
 export const selectTheme: Theme<SelectStyleProps> = {
   content: selectContent,

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

@@ -5,7 +5,6 @@
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
 import { mx } from '../../util';
-import { blockSeparator, inlineSeparator, separatorBorderColor, subduedSeparatorBorderColor } from '../fragments';
 
 export type SeparatorStyleProps = {
   orientation?: 'horizontal' | 'vertical';
@@ -14,8 +13,9 @@ export type SeparatorStyleProps = {
 
 export const separatorRoot: ComponentFunction<SeparatorStyleProps> = ({ orientation, subdued }, ...etc) =>
   mx(
-    orientation === 'vertical' ? inlineSeparator : blockSeparator,
-    subdued ? subduedSeparatorBorderColor : separatorBorderColor,
+    'self-stretch',
+    orientation === 'vertical' ? 'border-e mx-1' : 'border-b my-1',
+    subdued ? 'border-subdued-separator' : 'border-separator',
     ...etc,
   );
 

package/src/theme/components/skeleton.ts

@@ -0,0 +1,23 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type SkeletonStyleProps = {
+  variant?: 'default' | 'circle' | 'text';
+};
+
+export const skeletonRoot: ComponentFunction<SkeletonStyleProps> = ({ variant = 'default' }, ...etc) =>
+  mx(
+    'animate-pulse bg-neutral-300 dark:bg-neutral-700 rounded-md',
+    variant === 'circle' && 'rounded-full',
+    variant === 'text' && 'rounded-sm',
+    ...etc,
+  );
+
+export const skeletonTheme: Theme<SkeletonStyleProps> = {
+  root: skeletonRoot,
+};

package/src/theme/components/splitter.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type SplitterStyleProps = {};
+
+const splitterRoot: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
+  mx('relative h-full overflow-hidden', ...etc);
+
+const splitterPanel: ComponentFunction<SplitterStyleProps> = (_props, ...etc) =>
+  mx('absolute inset-x-0 flex flex-col overflow-hidden', ...etc);
+
+export const splitterTheme: Theme<SplitterStyleProps> = {
+  root: splitterRoot,
+  panel: splitterPanel,
+};

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

@@ -13,16 +13,16 @@ export type StatusStyleProps = {
 
 export const statusRoot: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
   mx(
-    'bs-1 relative bg-hoverOverlay rounded-full overflow-hidden',
-    variant === 'main-bottom' ? 'is-full block' : 'is-20 inline-block',
+    'h-1 relative bg-hover-overlay rounded-full overflow-hidden',
+    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block',
     ...etc,
   );
 
 export const statusBar: ComponentFunction<StatusStyleProps> = ({ indeterminate, variant = 'default' }, ...etc) =>
   mx(
-    'absolute inset-block-0 block rounded-full',
-    variant === 'main-bottom' ? 'bg-accentSurface' : 'bg-unAccent',
-    indeterminate ? 'animate-progress-indeterminate' : 'inline-start-0',
+    'absolute inset-y-0 block rounded-full',
+    variant === 'main-bottom' ? 'bg-accent-surface' : 'bg-un-accent',
+    indeterminate ? 'animate-progress-indeterminate' : 'start-0',
     ...etc,
   );
 

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

@@ -16,7 +16,7 @@ export type TagStyleProps = {
   palette?: ChromaticPalette | NeutralPalette | MessageValence;
 };
 
-export const tagRoot: ComponentFunction<TagStyleProps> = ({ palette = 'neutral' }, ...etc) => mx('dx-tag', ...etc);
+export const tagRoot: ComponentFunction<TagStyleProps> = (_, ...etc) => mx('dx-tag', ...etc);
 
 export const tagTheme: Theme<TagStyleProps> = {
   root: tagRoot,

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

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Theme } from '@dxos/ui-types';
 
+import { focusRing, surfaceShadow } from '../../fragments';
 import { mx } from '../../util';
-import { descriptionText, focusRing, modalSurface, surfaceShadow } from '../fragments';
 
 export type ToastStyleProps = Partial<{
   srOnly: boolean;
@@ -14,15 +14,14 @@ 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',
@@ -34,7 +33,7 @@ export const toastRoot: ComponentFunction<ToastStyleProps> = (_props, ...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 +42,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/theme/components/toolbar.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
+
+import { textBlockWidth } from '../../fragments';
+import { mx } from '../../util';
+
+export type ToolbarStyleProps = Partial<{
+  density: Density;
+  disabled: boolean;
+  layoutManaged: boolean;
+}>;
+
+export const toolbarLayout =
+  '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-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('grow truncate items-center', textBlockWidth, ...etc);
+};
+
+export const toolbarTheme: Theme<ToolbarStyleProps> = {
+  root: toolbarRoot,
+  inner: toolbarInner,
+  text: toolbarText,
+};

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

@@ -4,8 +4,8 @@
 
 import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
 
+import { surfaceShadow, surfaceZIndex } from '../../fragments';
 import { mx } from '../../util';
-import { chromeText, popperMotion, surfaceShadow, surfaceZIndex } from '../fragments';
 
 export type TooltipStyleProps = Partial<{
   elevation: Elevation;
@@ -13,15 +13,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,14 +12,14 @@ 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);

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

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

package/src/theme/primitives/column.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+const columnRoot: ComponentFunction<Record<string, any>> = (_, ...etc) => mx('dx-column w-full min-w-0 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].
+ */
+const columnRow: ComponentFunction<Record<string, any>> = (_, ...etc) =>
+  mx('col-span-3 grid grid-cols-subgrid', ...etc);
+
+/**
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ * Occupies only the center column (col-2) of the parent Column.Root grid.
+ */
+const columnSegment: ComponentFunction<Record<string, any>> = (_, ...etc) =>
+  mx('col-start-2 col-span-1 min-w-0', ...etc);
+
+export const columnTheme = {
+  root: columnRoot,
+  row: columnRow,
+  segment: columnSegment,
+};

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,47 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type PanelProps = {};
+
+const panelRoot: ComponentFunction<PanelProps> = (_, ...etc) =>
+  mx(
+    // prettier-ignore
+    'h-full w-full grid grid-cols-[100%] overflow-hidden',
+    '[&>*:not([data-slot])]:[grid-area:content]',
+    ...etc,
+  );
+
+const panelToolbar: ComponentFunction<PanelProps> = (_, ...etc) =>
+  mx(
+    // prettier-ignore
+    '[grid-area:toolbar]',
+    'border-b border-subdued-separator relative',
+    '[.dx-main-mobile-layout_&]:px-3',
+    ...etc,
+  );
+
+const panelContent: ComponentFunction<PanelProps> = (_, ...etc) =>
+  mx(
+    // prettier-ignore
+    '[grid-area:content] overflow-hidden min-h-0',
+    ...etc,
+  );
+
+const panelStatusbar: ComponentFunction<PanelProps> = (_, ...etc) =>
+  mx(
+    // prettier-ignore
+    '[grid-area:statusbar]',
+    ...etc,
+  );
+
+export const panelTheme = {
+  root: panelRoot,
+  toolbar: panelToolbar,
+  content: panelContent,
+  statusbar: panelStatusbar,
+};

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

@@ -2,14 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-import { get } from '@dxos/util';
+import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
+import { getDeep } from '@dxos/util';
 
 import {
-  anchoredOverflowTheme,
   avatarTheme,
   breadcrumbTheme,
   buttonTheme,
+  cardTheme,
   dialogTheme,
   iconButtonTheme,
   iconTheme,
@@ -23,6 +23,8 @@ import {
   scrollAreaTheme,
   selectTheme,
   separatorTheme,
+  skeletonTheme,
+  splitterTheme,
   statusTheme,
   tagTheme,
   toastTheme,
@@ -30,14 +32,26 @@ import {
   tooltipTheme,
   treegridTheme,
 } from './components';
+import { columnTheme, panelTheme } from './primitives';
 
 export const defaultTheme: Theme<Record<string, any>> = {
   themeName: () => 'default',
 
-  anchoredOverflow: anchoredOverflowTheme,
+  //
+  // Primitives
+  //
+
+  column: columnTheme,
+  panel: panelTheme,
+
+  //
+  // Components
+  //
+
   avatar: avatarTheme,
   breadcrumb: breadcrumbTheme,
   button: buttonTheme,
+  card: cardTheme,
   dialog: dialogTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
@@ -48,9 +62,11 @@ export const defaultTheme: Theme<Record<string, any>> = {
   message: messageTheme,
   menu: menuTheme,
   popover: popoverTheme,
-  select: selectTheme,
   scrollArea: scrollAreaTheme,
+  select: selectTheme,
   separator: separatorTheme,
+  skeleton: skeletonTheme,
+  splitter: splitterTheme,
   status: statusTheme,
   tag: tagTheme,
   toast: toastTheme,
@@ -59,10 +75,10 @@ export const defaultTheme: Theme<Record<string, any>> = {
   treegrid: treegridTheme,
 };
 
-export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>) => {
-  return (path: string, defaultClassName: string, styleProps: P, ...options: any[]): string => {
-    const result: Theme<P> | ComponentFunction<P> = get(theme, path);
-    return typeof result === 'function' ? result(styleProps, ...options) : defaultClassName;
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>): ThemeFunction<P> => {
+  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/theme.css

@@ -2,8 +2,82 @@
  * Main theme.
  */
 
-@import 'tailwindcss/base' layer(tw-base);
-@import 'tailwindcss/utilities';
-@import 'tailwindcss/components' layer(tw-components);
+/**
+ * Establish CSS cascade layer order before Tailwind sets its own.
+ * First mention of a layer name wins its position in the order.
+ *
+ * NOTE: `utilities` must be last so it overrides all base and component layers.
+ * NOTE: This must be in sync with the `transformIndexHtml` function in `packages/ui/ui-theme/src/plugins/plugin.ts`.
+ */
+@layer properties, theme, dx-tokens, user-tokens, base, tw-base, dx-base, components, tw-components, dx-components, utilities;
+
+@import 'tailwindcss';
+
+/* @theme extensions */
+@import './css/theme/animation.css';
+@import './css/theme/border.css';
+@import './css/theme/palette.css';
+@import './css/theme/semantic.css';
+@import './css/theme/spacing.css';
+@import './css/theme/styles.css';
+@import './css/theme/text.css';
+
+/* @layer dx-base, dx-tokens */
+@import './css/base/base.css';
+@import './css/base/typography.css';
+
+/* @layer dx-components (components) */
+@import './css/components/button.css';
+@import './css/components/checkbox.css';
+@import './css/components/dialog.css';
+@import './css/components/focus-ring.css';
+@import './css/components/panel.css';
+@import './css/components/link.css';
+@import './css/components/scrollbar.css';
+@import './css/components/surface.css';
+@import './css/components/tag.css';
+@import './css/components/text.css';
+
+/* @layer dx-components (layout) */
+@import './css/layout/main.css';
+@import './css/layout/native.css';
+@import './css/layout/positioning.css';
+@import './css/layout/size.css';
+
+/* @layer dx-utilities */
+@import './css/utilities.css';
+
+/* Third-party integrations */
+@import './css/integrations/codemirror.css';
+@import './css/integrations/tldraw.css';
+
+/**
+ * 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");
+
+/**
+ * Plugins must come after all imports.
+ */
+@plugin '@tailwindcss/forms';
+@plugin 'tailwind-scrollbar';
+@plugin 'tailwindcss-radix';
 
-@import './styles/layers/index.css';
+/**
+ * Class-based dark mode.
+ * The `.dark` class on an ancestor toggles `dark:` utilities.
+ */
+@variant dark (&:where(.dark, .dark *));
+
+/**
+ * Custom variants.
+ */
+@custom-variant is-current (&[aria-current]:not([aria-current="false"]));
+@custom-variant hover-hover (@media (hover: hover));
+@custom-variant pointer-fine (@media (pointer: fine));

package/src/typings.d.ts

@@ -5,4 +5,3 @@
 declare module 'fast-glob';
 declare module 'tailwindcss/stubs/config.full.js';
 declare module 'tailwindcss-radix';
-declare module 'tailwindcss-logical';