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

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

@@ -2,15 +2,16 @@
 // 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,
+  focusTheme,
   iconButtonTheme,
   iconTheme,
   inputTheme,
@@ -23,6 +24,8 @@ import {
   scrollAreaTheme,
   selectTheme,
   separatorTheme,
+  skeletonTheme,
+  splitterTheme,
   statusTheme,
   tagTheme,
   toastTheme,
@@ -30,15 +33,28 @@ 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,
+  focus: focusTheme,
   icon: iconTheme,
   iconButton: iconButtonTheme,
   input: inputTheme,
@@ -48,9 +64,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 +77,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/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:

package/src/util/hash-styles.ts

@@ -6,163 +6,183 @@ import { type ChromaticPalette } from '@dxos/ui-types';
 
 export type Hue = ChromaticPalette | 'neutral';
 
-// TODO(burdon): Rename?
+// TODO(burdon): Reconcile with ui-theme/theme/roles.css
 export type ColorStyles = {
   hue: Hue;
-  text: string;
-  icon: string;
-  bg: string;
-  surface: string;
-  border: string;
+  fill: string; // -fill
+  surface: string; // -surface
+  surfaceText: string; // -surface-text
+  text: string; // -text
+  border: string; // -border
 };
 
-const neutralColor: ColorStyles = {
+const neutral: ColorStyles = {
   hue: 'neutral',
-  text: 'text-neutralFill',
-  icon: 'text-neutralSurfaceText',
-  bg: 'bg-neutralFill',
-  surface: 'bg-neutralSurface',
-  border: 'border-neutralFill',
+  fill: 'bg-neutral-fill',
+  surface: 'bg-neutral-surface',
+  surfaceText: 'text-neutral-surface-text',
+  text: 'text-neutral-text',
+  border: 'border-neutral-border',
 };
 
-// NOTE: Don't include blue/red which are used as system colors.
-// NOTE: Cordinated with `tag.css`.
+// NOTE: Coordinated with `tag.css`.
 // https://github.com/dxos/dxos/blob/main/packages/ui/react-ui-theme/src/styles/layers/tag.css
-export const styles: ColorStyles[] = [
+const styles: ColorStyles[] = [
+  {
+    hue: 'red',
+    fill: 'bg-red-fill',
+    surface: 'bg-red-surface',
+    surfaceText: 'text-red-surface-text',
+    text: 'text-red-text',
+    border: 'border-red-border',
+  },
   {
     hue: 'orange',
-    text: 'text-orangeFill',
-    icon: 'text-orangeSurfaceText',
-    bg: 'bg-orangeFill',
-    surface: 'bg-orangeSurface',
-    border: 'border-orangeFill',
+    fill: 'bg-orange-fill',
+    surface: 'bg-orange-surface',
+    surfaceText: 'text-orange-surface-text',
+    text: 'text-orange-text',
+    border: 'border-orange-border',
   },
   {
     hue: 'amber',
-    text: 'text-amberFill',
-    icon: 'text-amberSurfaceText',
-    bg: 'bg-amberFill',
-    surface: 'bg-amberSurface',
-    border: 'border-amberFill',
+    fill: 'bg-amber-fill',
+    surface: 'bg-amber-surface',
+    surfaceText: 'text-amber-surface-text',
+    text: 'text-amber-text',
+    border: 'border-amber-border',
   },
   {
     hue: 'yellow',
-    text: 'text-yellowFill',
-    icon: 'text-yellowSurfaceText',
-    bg: 'bg-yellowFill',
-    surface: 'bg-yellowSurface',
-    border: 'border-yellowFill',
+    fill: 'bg-yellow-fill',
+    surface: 'bg-yellow-surface',
+    surfaceText: 'text-yellow-surface-text',
+    text: 'text-yellow-text',
+    border: 'border-yellow-border',
   },
   {
     hue: 'lime',
-    text: 'text-limeFill',
-    icon: 'text-limeSurfaceText',
-    bg: 'bg-limeFill',
-    surface: 'bg-limeSurface',
-    border: 'border-limeFill',
+    fill: 'bg-lime-fill',
+    surface: 'bg-lime-surface',
+    surfaceText: 'text-lime-surface-text',
+    text: 'text-lime-text',
+    border: 'border-lime-border',
   },
   {
     hue: 'green',
-    text: 'text-greenFill',
-    icon: 'text-greenSurfaceText',
-    bg: 'bg-greenFill',
-    surface: 'bg-greenSurface',
-    border: 'border-greenFill',
+    fill: 'bg-green-fill',
+    surface: 'bg-green-surface',
+    surfaceText: 'text-green-surface-text',
+    text: 'text-green-text',
+    border: 'border-green-border',
   },
   {
     hue: 'emerald',
-    text: 'text-emeraldFill',
-    icon: 'text-emeraldSurfaceText',
-    bg: 'bg-emeraldFill',
-    surface: 'bg-emeraldSurface',
-    border: 'border-emeraldFill',
+    fill: 'bg-emerald-fill',
+    surface: 'bg-emerald-surface',
+    surfaceText: 'text-emerald-surface-text',
+    text: 'text-emerald-text',
+    border: 'border-emerald-border',
   },
   {
     hue: 'teal',
-    text: 'text-tealFill',
-    icon: 'text-tealSurfaceText',
-    bg: 'bg-tealFill',
-    surface: 'bg-tealSurface',
-    border: 'border-tealFill',
+    fill: 'bg-teal-fill',
+    surface: 'bg-teal-surface',
+    surfaceText: 'text-teal-surface-text',
+    text: 'text-teal-text',
+    border: 'border-teal-border',
   },
   {
     hue: 'cyan',
-    text: 'text-cyanFill',
-    icon: 'text-cyanSurfaceText',
-    bg: 'bg-cyanFill',
-    surface: 'bg-cyanSurface',
-    border: 'border-cyanFill',
+    fill: 'bg-cyan-fill',
+    surface: 'bg-cyan-surface',
+    surfaceText: 'text-cyan-surface-text',
+    text: 'text-cyan-text',
+    border: 'border-cyan-border',
   },
   {
     hue: 'sky',
-    text: 'text-skyFill',
-    icon: 'text-skySurfaceText',
-    bg: 'bg-skyFill',
-    surface: 'bg-skySurface',
-    border: 'border-skyFill',
+    fill: 'bg-sky-fill',
+    surface: 'bg-sky-surface',
+    surfaceText: 'text-sky-surface-text',
+    text: 'text-sky-text',
+    border: 'border-sky-border',
+  },
+  {
+    hue: 'blue',
+    fill: 'bg-blue-fill',
+    surface: 'bg-blue-surface',
+    surfaceText: 'text-blue-surface-text',
+    text: 'text-blue-text',
+    border: 'border-blue-border',
   },
   {
     hue: 'indigo',
-    text: 'text-indigoFill',
-    icon: 'text-indigoSurfaceText',
-    bg: 'bg-indigoFill',
-    surface: 'bg-indigoSurface',
-    border: 'border-indigoFill',
+    fill: 'bg-indigo-fill',
+    surface: 'bg-indigo-surface',
+    surfaceText: 'text-indigo-surface-text',
+    text: 'text-indigo-text',
+    border: 'border-indigo-border',
   },
   {
     hue: 'violet',
-    text: 'text-violetFill',
-    icon: 'text-violetSurfaceText',
-    bg: 'bg-violetFill',
-    surface: 'bg-violetSurface',
-    border: 'border-violetFill',
+    fill: 'bg-violet-fill',
+    surface: 'bg-violet-surface',
+    surfaceText: 'text-violet-surface-text',
+    text: 'text-violet-text',
+    border: 'border-violet-border',
   },
   {
     hue: 'purple',
-    text: 'text-purpleFill',
-    icon: 'text-purpleSurfaceText',
-    bg: 'bg-purpleFill',
-    surface: 'bg-purpleSurface',
-    border: 'border-purpleFill',
+    fill: 'bg-purple-fill',
+    surface: 'bg-purple-surface',
+    surfaceText: 'text-purple-surface-text',
+    text: 'text-purple-text',
+    border: 'border-purple-border',
   },
   {
     hue: 'fuchsia',
-    text: 'text-fuchsiaFill',
-    icon: 'text-fuchsiaSurfaceText',
-    bg: 'bg-fuchsiaFill',
-    surface: 'bg-fuchsiaSurface',
-    border: 'border-fuchsiaFill',
+    fill: 'bg-fuchsia-fill',
+    surface: 'bg-fuchsia-surface',
+    surfaceText: 'text-fuchsia-surface-text',
+    text: 'text-fuchsia-text',
+    border: 'border-fuchsia-border',
   },
   {
-    hue: 'rose',
-    text: 'text-roseFill',
-    icon: 'text-roseSurfaceText',
-    bg: 'bg-roseFill',
-    surface: 'bg-roseSurface',
-    border: 'border-roseFill',
+    hue: 'pink',
+    fill: 'bg-pink-fill',
+    surface: 'bg-pink-surface',
+    surfaceText: 'text-pink-surface-text',
+    text: 'text-pink-text',
+    border: 'border-pink-border',
   },
   {
-    hue: 'pink',
-    text: 'text-pinkFill',
-    icon: 'text-pinkSurfaceText',
-    bg: 'bg-pinkFill',
-    surface: 'bg-pinkSurface',
-    border: 'border-pinkFill',
+    hue: 'rose',
+    fill: 'bg-rose-fill',
+    surface: 'bg-rose-surface',
+    surfaceText: 'text-rose-surface-text',
+    text: 'text-rose-text',
+    border: 'border-rose-border',
   },
 ];
 
-export const getStyles = (hue: string): ColorStyles => {
-  return styles.find((color) => color.hue === hue) || neutralColor;
+export const palette = {
+  neutral,
+  hues: styles,
 };
 
-export const getHashHue = (id: string | undefined): Hue => {
-  return id ? styles[getHash(id) % styles.length].hue : 'neutral';
+// TODO(burdon): Rename getClassNames.
+export const getStyles = (hue: string): ColorStyles => {
+  return styles.find((color) => color.hue === hue) || neutral;
 };
 
 // TODO(thure): Reconcile with `to-fallback.ts` which exports `toHue` which overlaps a lot.
 export const getHashStyles = (id: string | undefined): ColorStyles => {
-  const hue = getHashHue(id);
-  return getStyles(hue);
+  return getStyles(getHashHue(id));
+};
+
+export const getHashHue = (id: string | undefined): Hue => {
+  return id ? styles[getHash(id) % styles.length].hue : 'neutral';
 };
 
 const getHash = (id: string): number => id.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);

package/src/util/index.ts

@@ -2,5 +2,8 @@
 // Copyright 2022 DXOS.org
 //
 
+export * from './elevation';
 export * from './hash-styles';
 export * from './mx';
+export * from './size';
+export * from './valence';

package/src/util/mx.ts

@@ -2,50 +2,172 @@
 // Copyright 2022 DXOS.org
 //
 
+import {
+  Children,
+  createElement,
+  forwardRef,
+  type ForwardRefExoticComponent,
+  type ForwardedRef,
+  type HTMLAttributes,
+  isValidElement,
+  type ReactNode,
+  type RefAttributes,
+  CSSProperties,
+} from 'react';
 import { extendTailwindMerge, validators } from 'tailwind-merge';
 
-import { type WithLogicalClassGroups, withLogical } from './withLogical';
-
-type AdditionalClassGroups = 'density' | 'dx-focus-ring' | WithLogicalClassGroups;
-
-export const mx = extendTailwindMerge<AdditionalClassGroups>(
-  {
-    extend: {
-      classGroups: {
-        'font-family': ['font-body', 'font-mono'],
-        'font-weight': [
-          // App weights
-          'font-thin',
-          'font-extralight',
-          'font-light',
-          'font-normal',
-          'font-medium',
-          'font-semibold',
-          'font-bold',
-          'font-extrabold',
-          'font-black',
-          // Arbitrary numbers
-          validators.isArbitraryNumber,
-        ],
-        density: ['density-fine', 'density-coarse'],
-        'dx-focus-ring': [
-          'dx-focus-ring',
-          'dx-focus-ring-inset',
-          'dx-focus-ring-always',
-          'dx-focus-ring-inset-always',
-          'dx-focus-ring-group',
-          'dx-focus-ring-group-x',
-          'dx-focus-ring-group-y',
-          'dx-focus-ring-group-always',
-          'dx-focus-ring-group-x-always',
-          'dx-focus-ring-group-y-always',
-          'dx-focus-ring-inset-over-all',
-          'dx-focus-ring-inset-over-all-always',
-          'dx-focus-ring-main',
-          'dx-focus-ring-main-always',
-        ],
-      },
+import { log } from '@dxos/log';
+import { ThemedClassName, type ComposableProps, type SlottableProps } from '@dxos/ui-types';
+
+type AdditionalClassGroups = 'density' | 'dx-focus-ring';
+
+export const mx = extendTailwindMerge<AdditionalClassGroups>({
+  extend: {
+    classGroups: {
+      'font-family': ['font-body', 'font-mono'],
+      'font-weight': [
+        // App weights
+        'font-thin',
+        'font-extralight',
+        'font-light',
+        'font-normal',
+        'font-medium',
+        'font-semibold',
+        'font-bold',
+        'font-extrabold',
+        'font-black',
+        // Arbitrary numbers
+        validators.isArbitraryNumber,
+      ],
+
+      density: ['dx-density-fine', 'dx-density-coarse'],
+
+      'dx-focus-ring': [
+        'dx-focus-ring',
+        'dx-focus-ring-inset',
+        'dx-focus-ring-always',
+        'dx-focus-ring-inset-always',
+        'dx-focus-ring-group',
+        'dx-focus-ring-group-x',
+        'dx-focus-ring-group-y',
+        'dx-focus-ring-group-always',
+        'dx-focus-ring-group-x-always',
+        'dx-focus-ring-group-y-always',
+        'dx-focus-ring-inset-over-all',
+        'dx-focus-ring-inset-over-all-always',
+        'dx-focus-ring-main',
+        'dx-focus-ring-main-always',
+      ],
     },
   },
-  withLogical,
-);
+});
+
+/**
+ * Reconciles className properties from a parent slot.
+ * - `className` is set by the Slot merge mechanism.
+ * - `classNames` is the consumer-facing prop for theming overrides.
+ * Use `composableProps` to reconcile both into a single `className`.
+ */
+// TODO(burdon): Move to react-ui.
+export const composableProps = <P extends HTMLElement = HTMLElement>(
+  { className, classNames, role, style, ...props }: ComposableProps,
+  { classNames: defaultClassNames, ...defaults }: ThemedClassName<Partial<HTMLAttributes<P>>> | undefined = {},
+) => ({
+  // Default props.
+  ...(defaults as object),
+
+  // Spread supplied props.
+  ...props,
+
+  // Prefer explicit role, then defaults role, then 'none'.
+  role: role ?? defaults.role ?? 'none',
+
+  // Merge styles.
+  style: { ...defaults.style, ...style } as CSSProperties,
+
+  // Compose classnames.
+  className: mx(defaultClassNames, className, classNames),
+});
+
+/**
+ * Factory for slottable components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `SlottableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, `asChild`, and the custom props `P`.
+ *
+ * @example
+ * ```tsx
+ * const MyPanel = slottable<HTMLDivElement, { border?: boolean }>(
+ *   ({ children, asChild, border, ...props }, forwardedRef) => {
+ *     const Comp = asChild ? Slot : Primitive.div;
+ *     return (
+ *       <Comp {...composableProps(props, { classNames: border && 'border' })} ref={forwardedRef}>
+ *         {children}
+ *       </Comp>
+ *     );
+ *   },
+ * );
+ * ```
+ */
+/** 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>> {
+  const wrapped = (props: SlottableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => {
+    let warn = false;
+    if (props.asChild) {
+      try {
+        const child = Children.only(props.children);
+        if (isValidElement(child) && typeof child.type !== 'string' && !(child.type as any)[COMPOSABLE]) {
+          warn = true;
+          log.warn('slot child is not composable; create it with composable() or slottable()', {
+            child: (child.type as any).displayName ?? (child.type as any).name,
+          });
+        }
+      } catch {
+        // Children.only throws if not exactly one child — Slot handles this.
+      }
+    }
+
+    const result = render(props, forwardedRef);
+    if (warn) {
+      return createElement('div', { role: 'none', className: 'dx-slot-warning' }, result);
+    }
+
+    return result;
+  };
+
+  const component = forwardRef(wrapped as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}
+
+/**
+ * Factory for composable (leaf) components.
+ * The implementation receives full `HTMLAttributes<E>` so it can destructure `role`, `style`, etc.
+ * Consumers see only `ComposableProps<P>` — a narrow type exposing `classNames`, `className`,
+ * `children`, and the custom props `P`.
+ *
+ * For generic components, use `any` for the type parameter inside `composable` and
+ * cast the result to restore the generic signature for consumers.
+ *
+ * @example
+ * ```tsx
+ * const Leaf = composable<HTMLButtonElement>(({ children, ...props }, forwardedRef) => {
+ *   return (
+ *     <button {...composableProps(props, { classNames: 'btn' })} ref={forwardedRef}>
+ *       {children}
+ *     </button>
+ *   );
+ * });
+ * ```
+ */
+export function composable<E extends HTMLElement, P extends object = {}>(
+  render: (props: ComposableProps<P> & HTMLAttributes<E>, forwardedRef: ForwardedRef<E>) => ReactNode,
+): ForwardRefExoticComponent<ComposableProps<P> & RefAttributes<E>> {
+  const component = forwardRef(render as any) as any;
+  (component as any)[COMPOSABLE] = true;
+  return component;
+}