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

package/src/theme/components/separator.ts

@@ -1,24 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type SeparatorStyleProps = {
-  orientation?: 'horizontal' | 'vertical';
-  subdued?: boolean;
-};
-
-export const separatorRoot: ComponentFunction<SeparatorStyleProps> = ({ orientation, subdued }, ...etc) =>
-  mx(
-    'self-stretch',
-    orientation === 'vertical' ? 'border-e mx-1' : 'border-b my-1',
-    subdued ? 'border-subdued-separator' : 'border-separator',
-    ...etc,
-  );
-
-export const separatorTheme: Theme<SeparatorStyleProps> = {
-  root: separatorRoot,
-};

package/src/theme/components/skeleton.ts

@@ -1,23 +0,0 @@
-//
-// 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

@@ -1,20 +0,0 @@
-//
-// 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/theme/components/status.ts

@@ -1,32 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type StatusStyleProps = {
-  variant?: 'default' | 'main-bottom';
-  indeterminate?: boolean;
-};
-
-export const statusRoot: ComponentFunction<StatusStyleProps> = ({ variant = 'default' }, ...etc) =>
-  mx(
-    'h-1 relative rounded-full overflow-hidden',
-    variant === 'main-bottom' ? 'w-full block' : 'inline-20 inline-block bg-base-surface',
-    ...etc,
-  );
-
-export const statusBar: ComponentFunction<StatusStyleProps> = ({ variant = 'default', indeterminate }, ...etc) =>
-  mx(
-    'absolute inset-y-0 block rounded-full',
-    variant === 'main-bottom' ? 'bg-composer-300' : 'bg-un-accent',
-    indeterminate ? 'animate-progress-indeterminate' : 'start-0',
-    ...etc,
-  );
-
-export const statusTheme: Theme<StatusStyleProps> = {
-  root: statusRoot,
-  bar: statusBar,
-};

package/src/theme/components/tag.ts

@@ -1,23 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import {
-  type ChromaticPalette,
-  type ComponentFunction,
-  type MessageValence,
-  type NeutralPalette,
-  type Theme,
-} from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type TagStyleProps = {
-  palette?: ChromaticPalette | NeutralPalette | MessageValence;
-};
-
-export const tagRoot: ComponentFunction<TagStyleProps> = (_, ...etc) => mx('dx-tag', ...etc);
-
-export const tagTheme: Theme<TagStyleProps> = {
-  root: tagRoot,
-};

package/src/theme/components/toast.ts

@@ -1,53 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Theme } from '@dxos/ui-types';
-
-import { mx, surfaceShadow } from '../../util';
-
-export type ToastStyleProps = Partial<{
-  srOnly: boolean;
-}>;
-
-export const toastViewport: ComponentFunction<ToastStyleProps> = (_props, ...etc) =>
-  mx(
-    // TODO(burdon): block-end should take into account status bar.
-    '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(
-    '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]',
-    'dx-focus-ring',
-    ...etc,
-  );
-
-export const toastBody: ComponentFunction<ToastStyleProps> = (_props, ...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);
-
-export const toastTitle: ComponentFunction<ToastStyleProps> = ({ srOnly }, ...etc) =>
-  mx('shrink-0 font-medium', srOnly && 'sr-only', ...etc);
-
-export const toastDescription: ComponentFunction<ToastStyleProps> = ({ srOnly }, ...etc) =>
-  mx('text-description', 'shrink-0', srOnly && 'sr-only', ...etc);
-
-export const toastTheme: Theme<ToastStyleProps> = {
-  viewport: toastViewport,
-  root: toastRoot,
-  body: toastBody,
-  title: toastTitle,
-  description: toastDescription,
-  actions: toastActions,
-};

package/src/theme/components/toolbar.ts

@@ -1,35 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
-
-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 toolbarText: ComponentFunction<ToolbarStyleProps> = (_, ...etc) => {
-  return mx('px-2 grow truncate items-center', ...etc);
-};
-
-export const toolbarTheme: Theme<ToolbarStyleProps> = {
-  root: toolbarRoot,
-  text: toolbarText,
-};

package/src/theme/components/tooltip.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
-
-import { mx, surfaceShadow, surfaceZIndex } from '../../util';
-
-export type TooltipStyleProps = Partial<{
-  elevation: Elevation;
-}>;
-
-export const tooltipContent: ComponentFunction<TooltipStyleProps> = ({ elevation }, ...etc) =>
-  mx(
-    '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' }),
-    ...etc,
-  );
-
-export const tooltipArrow: ComponentFunction<TooltipStyleProps> = (_props, ...etc) =>
-  mx('fill-inverse-surface', ...etc);
-
-export const tooltipTheme: Theme<TooltipStyleProps> = {
-  content: tooltipContent,
-  arrow: tooltipArrow,
-};

package/src/theme/components/treegrid.ts

@@ -1,37 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { ComponentFunction, Theme } from '@dxos/ui-types';
-
-import { mx } from '../../util';
-
-export type TreegridStyleProps = Partial<{
-  level: number;
-  indent: boolean;
-}>;
-
-const levelStyles = new Map<number, string>([
-  [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(levelStyles.get(Math.min(Math.max(Math.round(level), 1), 8)), ...etc);
-
-export const treegridCell: ComponentFunction<TreegridStyleProps> = ({ indent }, ...etc) =>
-  mx(indent && 'indent', ...etc);
-
-export const treegridTheme: Theme<TreegridStyleProps> = {
-  root: treegridRoot,
-  row: treegridRow,
-  cell: treegridCell,
-};

package/src/theme/index.ts

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

package/src/theme/primitives/column.ts

@@ -1,71 +0,0 @@
-//
-// 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

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

package/src/theme/primitives/panel.ts

@@ -1,43 +0,0 @@
-//
-// 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/theme/theme.ts

@@ -1,87 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
-import { getDeep } from '@dxos/util';
-
-import {
-  avatarTheme,
-  breadcrumbTheme,
-  buttonTheme,
-  cardTheme,
-  dialogTheme,
-  focusTheme,
-  iconButtonTheme,
-  iconTheme,
-  inputTheme,
-  linkTheme,
-  listTheme,
-  mainTheme,
-  menuTheme,
-  messageTheme,
-  popoverTheme,
-  scrollAreaTheme,
-  selectTheme,
-  separatorTheme,
-  skeletonTheme,
-  splitterTheme,
-  statusTheme,
-  tagTheme,
-  toastTheme,
-  toolbarTheme,
-  tooltipTheme,
-  treegridTheme,
-} from './components';
-import { columnTheme, panelTheme } from './primitives';
-
-export const defaultTheme: Theme<Record<string, any>> = {
-  themeName: () => 'default',
-
-  //
-  // Primitives
-  //
-
-  column: columnTheme,
-  panel: panelTheme,
-
-  //
-  // Components
-  //
-
-  avatar: avatarTheme,
-  breadcrumb: breadcrumbTheme,
-  button: buttonTheme,
-  card: cardTheme,
-  dialog: dialogTheme,
-  focus: focusTheme,
-  icon: iconTheme,
-  iconButton: iconButtonTheme,
-  input: inputTheme,
-  link: linkTheme,
-  list: listTheme,
-  main: mainTheme,
-  message: messageTheme,
-  menu: menuTheme,
-  popover: popoverTheme,
-  scrollArea: scrollAreaTheme,
-  select: selectTheme,
-  separator: separatorTheme,
-  skeleton: skeletonTheme,
-  splitter: splitterTheme,
-  status: statusTheme,
-  tag: tagTheme,
-  toast: toastTheme,
-  toolbar: toolbarTheme,
-  tooltip: tooltipTheme,
-  treegrid: treegridTheme,
-};
-
-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;
-  };
-};
-
-export const defaultTx = bindTheme(defaultTheme);