@dxos/ui-theme 0.9.1-main.c7dcc2e112 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/ui-theme",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.10.0",
   "description": "A set of design system tokens to use with DXOS UI.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -48,21 +48,22 @@
     "postcss-nesting": "^13.0.1",
     "tailwind-merge": "^3.5.0",
     "tailwind-scrollbar": "^4.0.0",
+    "tailwind-variants": "^3.2.2",
     "tailwindcss": "^4.3.0",
     "tailwindcss-radix": "^4.0.2",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/node-std": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112"
+    "@dxos/log": "0.10.0",
+    "@dxos/node-std": "0.10.0",
+    "@dxos/util": "0.10.0"
   },
   "devDependencies": {
     "@types/lodash.merge": "^4.6.6",
     "@types/postcss-import": "^14.0.3",
     "esbuild": "0.28.1",
     "vite": "^8.0.16",
-    "@dxos/ui-types": "0.9.1-main.c7dcc2e112"
+    "@dxos/ui-types": "0.10.0"
   },
   "peerDependencies": {
-    "react": "~19.2.3"
+    "react": "~19.2.7"
   },
   "publishConfig": {
     "access": "public"

package/src/Theme.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
-import { hueShades, hues } from './defs';
+import { hues, hueShades } from './defs';
 import { mx } from './util';
 
 // prettier-ignore

package/src/css/components/button.css

@@ -18,9 +18,15 @@
       color: var(--dx-valence-text, inherit);
       background: var(--dx-valence-bg, var(--color-input-bg));
     }
+    /* Toggle / tab group: the selected item reads as standard text on a surface-relative fill (selected-surface
+     * tracks the enclosing --surface-bg, so it stays visible on any surface); unselected items recede to subdued. */
     &[aria-pressed='true'],
     &[aria-checked='true'] {
-      @apply text-accent-text bg-attention-surface;
+      @apply text-base-fg bg-selected-surface;
+    }
+    &[aria-pressed='false'],
+    &[aria-checked='false'] {
+      @apply text-description;
     }
 
     /* Disabled styles */

package/src/css/components/tag.css

@@ -11,9 +11,9 @@
 
   .dx-tag--anchor {
     /* NOTE: Margin offsets padding so that border is flush with text. This should only apply to anchor tags inside of Codemirror. */
-    @apply inline cursor-pointer px-[4px] py-0.5;
+    @apply inline-block cursor-pointer px-[4px] py-0.5;
     /** TODO(burdon): Configure secondary color. */
-    @apply bg-input-surface ring ring-neutral-border rounded-sm;
+    @apply bg-input-surface ring-inset ring ring-neutral-border rounded-sm;
     &:hover {
       @apply bg-hover-surface;
     }

package/src/css/theme/semantic.css

@@ -26,13 +26,14 @@
    * These are private (--dx-*) knobs — use named surface tokens in components, not these directly.
    */
   --dx-elevation-0: light-dark(var(--color-neutral-300), var(--color-neutral-950));
-  --dx-elevation-1: light-dark(var(--color-neutral-200), var(--color-neutral-900));
-  --dx-elevation-2: light-dark(var(--color-neutral-125), var(--color-neutral-875));
-  --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-850));
-  --dx-elevation-4: light-dark(var(--color-neutral-100), var(--color-neutral-825));
-  --dx-elevation-5: light-dark(var(--color-neutral-75), var(--color-neutral-800));
-  --dx-elevation-6: light-dark(var(--color-neutral-50), var(--color-neutral-775));
-  --dx-elevation-7: light-dark(white, var(--color-neutral-750));
+  --dx-elevation-1: light-dark(var(--color-neutral-300), var(--color-neutral-925));
+  --dx-elevation-2: light-dark(var(--color-neutral-200), var(--color-neutral-900));
+  --dx-elevation-3: light-dark(var(--color-neutral-125), var(--color-neutral-875));
+  --dx-elevation-4: light-dark(var(--color-neutral-125), var(--color-neutral-850));
+  --dx-elevation-5: light-dark(var(--color-neutral-100), var(--color-neutral-825));
+  --dx-elevation-6: light-dark(var(--color-neutral-75), var(--color-neutral-800));
+  --dx-elevation-7: light-dark(var(--color-neutral-50), var(--color-neutral-775));
+  --dx-elevation-8: light-dark(white, var(--color-neutral-750));
 
   /** 
    * Elevation 0
@@ -50,71 +51,75 @@
    * Elevation 1
    */
 
-  --color-base-surface: var(--dx-elevation-1);
+  --color-card-surface: var(--dx-elevation-1);
+
+  /** 
+   * Elevation 2
+   */
+
+  --color-base-surface: var(--dx-elevation-2);
   --color-base-fg: light-dark(var(--color-neutral-950), var(--color-neutral-150));
 
+  /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
+  --color-attention-surface: var(--dx-elevation-2);
+  --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3);
+
   /**
-   * Elevation 2
+   * Elevation 3
    */
 
-  --color-header-surface: var(--dx-elevation-2);
+  --color-header-surface: var(--dx-elevation-3);
 
-  --color-sidebar-surface: var(--dx-elevation-2);
+  --color-sidebar-surface: var(--dx-elevation-3);
   /* Sidebar body text. Default sits one ramp stop below the current/selected emphasis. */
   --color-sidebar-fg: light-dark(var(--color-neutral-700), var(--color-neutral-250));
   --color-sidebar-current-fg: light-dark(var(--color-neutral-950), var(--color-neutral-75));
 
   /* Sidebar / panel layout levels */
-  --color-l0-surface: var(--dx-elevation-1);
-  --color-l1-surface: var(--dx-elevation-2);
-  --color-r0-surface: var(--dx-elevation-2);
-  --color-r1-surface: var(--dx-elevation-2);
+  --color-l0-surface: var(--dx-elevation-2);
+  --color-l1-surface: var(--dx-elevation-3);
+  --color-r0-surface: var(--dx-elevation-3);
+  --color-r1-surface: var(--dx-elevation-3);
 
   /** 
-   * Elevation 3
+   * Elevation 4
    */
 
-  --color-card-surface: var(--dx-elevation-3);
-
-  /* Map attention to focus-surface logic so that elements acting as active attention zones highlight correctly on focus. */
-  --color-attention-surface: var(--dx-elevation-3);
-  --color-attention-contains: oklch(from var(--color-accent-bg) l c h / 0.3);
+  --color-toolbar-surface: var(--dx-elevation-4);
 
   /** 
-   * Elevation 4
+   * Elevation 5
    */
 
   /* Focus — a raised content surface (one level above card) so an attended pane reads as lifted. */
-  --color-focus-surface: var(--dx-elevation-4);
+  --color-focus-surface: var(--dx-elevation-5);
   --color-focus-ring: light-dark(var(--color-blue-400), var(--color-blue-600));
   --color-focus-ring-subtle: light-dark(var(--color-neutral-300), var(--color-neutral-600));
 
-  --color-group-surface: var(--dx-elevation-4);
+  --color-group-surface: var(--dx-elevation-5);
   /* Subtle alternate of group-surface for zebra striping (e.g. calendar months) — offset off
    * elevation-4 via relative oklch so it tracks the ramp: darker in light mode, lighter in dark. */
   --color-group-alt-surface: light-dark(
-    oklch(from var(--dx-elevation-4) calc(l - 0.03) c h),
-    oklch(from var(--dx-elevation-4) calc(l + 0.03) c h)
+    oklch(from var(--dx-elevation-5) calc(l - 0.03) c h),
+    oklch(from var(--dx-elevation-5) calc(l + 0.03) c h)
   );
 
-  --color-input-surface: var(--dx-elevation-4);
+  --color-input-surface: var(--dx-elevation-5);
 
   /**
-   * Elevation 5
+   * Elevation 6
    */
 
-  --color-toolbar-surface: var(--dx-elevation-5);
-
-  --color-modal-surface: var(--dx-elevation-5);
+  --color-modal-surface: var(--dx-elevation-6);
 
   /**
-   * Elevation 6
+   * Elevation 7
    */
 
-  --color-popover-surface: var(--dx-elevation-6);
+  --color-popover-surface: var(--dx-elevation-7);
 
   /**
-   * Elevation 7
+   * Elevation 8
    */
 
   /**
@@ -198,9 +203,10 @@
   --color-un-accent-hover: var(--color-neutral-500);
 
   /* Separator */
-  --color-primary-separator: light-dark(var(--color-neutral-300), var(--color-neutral-700));
+  --color-primary-separator: light-dark(var(--color-neutral-200), var(--color-neutral-800));
   --color-separator: light-dark(var(--color-neutral-200), var(--color-neutral-700));
-  --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-input-separator: light-dark(var(--color-neutral-250), var(--color-neutral-750));
+  --color-subdued-separator: light-dark(var(--color-neutral-250), var(--color-neutral-775));
   --color-active-separator: light-dark(var(--color-blue-500), var(--color-blue-500));
 
   /* Scrollbar */

package/src/css/theme/spacing.css

@@ -84,10 +84,12 @@
     --dx-lacuna-4: 0.5rem;
     --dx-lacuna-6: 0.75rem;
 
-    --dx-gutter-xs: 0.25rem; /* Input rings */
-    --dx-gutter-sm: 1rem; /* 16px (sm density card) */
-    --dx-gutter-md: 2rem; /* 32px (md density card — default) */
-    --dx-gutter-lg: 2.5rem; /* 40px (dialog, lg density card) */
+    /* Form:   8px */
+    --dx-gutter-sm: 0.5rem;
+    /* Dialog: 16px */
+    --dx-gutter-md: 1rem;
+    /* Card:   32px */
+    --dx-gutter-lg: 2rem;
   }
 
   :root {

package/src/util/index.ts

@@ -6,4 +6,6 @@ export * from './elevation';
 export * from './hash-styles';
 export * from './mx';
 export * from './size';
+export * from './tv';
+export * from './tw-merge-config';
 export * from './valence';

package/src/util/mx.ts

@@ -4,45 +4,15 @@
 
 import { extendTailwindMerge, validators } from 'tailwind-merge';
 
-type AdditionalClassGroups = 'density' | 'dx-focus-ring';
+import { type AdditionalClassGroups, twMergeConfig } from './tw-merge-config';
 
 export const mx = extendTailwindMerge<AdditionalClassGroups>({
   extend: {
+    ...twMergeConfig.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-sm', 'dx-density-md', 'dx-density-lg'],
-
-      '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',
-      ],
+      ...twMergeConfig.extend.classGroups,
+      // Arbitrary numeric font-weights require a validator (not expressible as a plain string token).
+      'font-weight': [...twMergeConfig.extend.classGroups['font-weight'], validators.isArbitraryNumber],
     },
   },
 });

package/src/util/tv.test.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { mx } from './mx';
+import { bridgeTv, tv } from './tv';
+
+describe('tv', () => {
+  test('resolves standard tailwind conflicts like mx', ({ expect }) => {
+    const recipe = tv({ base: 'text-sm', variants: { big: { true: 'text-lg' } } });
+    expect(recipe({ big: true })).toBe(mx('text-sm', 'text-lg'));
+    expect(recipe({ big: true })).toContain('text-lg');
+    expect(recipe({ big: true })).not.toContain('text-sm');
+  });
+
+  test('keeps dxos custom color tokens (text-base-fg over text-description)', ({ expect }) => {
+    const recipe = tv({ base: 'text-description', variants: { strong: { true: 'text-base-fg' } } });
+    expect(recipe({ strong: true })).toBe(mx('text-description', 'text-base-fg'));
+    expect(recipe({ strong: true })).toContain('text-base-fg');
+  });
+});
+
+describe('bridgeTv', () => {
+  test('adapts a slots recipe into Theme<P> functions with overrides', ({ expect }) => {
+    const recipe = tv({
+      slots: { root: 'p-1', label: 'text-sm' },
+      variants: { variant: { settings: { root: 'p-4', label: 'text-lg' } } },
+    });
+    const theme = bridgeTv(recipe, ['root', 'label']);
+    expect(typeof theme.root).toBe('function');
+    expect(theme.root({ variant: 'settings' })).toContain('p-4');
+    // consumer override wins via per-slot merge.
+    expect(theme.label({ variant: 'settings' }, 'text-xl')).toContain('text-xl');
+    expect(theme.label({ variant: 'settings' }, 'text-xl')).not.toContain('text-lg');
+  });
+});

package/src/util/tv.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createTV } from 'tailwind-variants';
+
+import { type ClassNameArray, type ClassNameValue, type Theme } from '@dxos/ui-types';
+
+import { twMergeConfig } from './tw-merge-config';
+
+export type { VariantProps } from 'tailwind-variants';
+
+/**
+ * Shared tailwind-variants instance bound to the dxos tailwind-merge config (see {@link twMergeConfig}),
+ * so recipes resolve class conflicts identically to {@link mx}. All component theme recipes import this,
+ * never the bare `tailwind-variants` package.
+ */
+export const tv = createTV({ twMerge: true, twMergeConfig });
+
+type SlotsRecipe<P extends Record<string, any>, S extends string> = (
+  props?: P,
+) => Record<S, (opts?: { class?: ClassNameValue }) => string>;
+
+/**
+ * The {@link Theme} sub-tree produced by {@link bridgeTv}, with each slot's resolver explicitly typed
+ * so call sites (and tests) stay fully typed instead of falling back to `any`.
+ */
+export type BridgedTheme<P extends Record<string, any>, S extends string> = Theme<P> & {
+  [K in S]: (styleProps: P, ...etc: ClassNameArray) => string;
+};
+
+/**
+ * Adapt a tailwind-variants slots recipe into the existing {@link Theme} shape (a map of
+ * {@link import('@dxos/ui-types').ComponentFunction}) so it can register in the `tx` theme tree and be
+ * consumed via `tx('component.slot', styleProps, ...classNames)`. Slots are enumerated explicitly (not
+ * via Proxy) so unknown paths resolve to `undefined` exactly as `getDeep` does today, and the result is
+ * a plain, inspectable object. Derive `slots` from `Object.keys(recipe())` at the call site.
+ */
+export const bridgeTv = <P extends Record<string, any>, S extends string>(
+  recipe: SlotsRecipe<P, S>,
+  slots: readonly S[],
+): BridgedTheme<P, S> =>
+  Object.fromEntries(
+    slots.map((slot) => [slot, (styleProps: P, ...etc: ClassNameArray) => recipe(styleProps)[slot]({ class: etc })]),
+  ) as BridgedTheme<P, S>;

package/src/util/tw-merge-config.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Shared tailwind-merge configuration. The single source for both {@link mx} (extendTailwindMerge)
+ * and the {@link tv} instance (createTV `twMergeConfig`) so conflict resolution can't drift —
+ * notably for dxos custom tokens (`text-base-fg`, density, focus-ring).
+ */
+export const twMergeConfig = {
+  extend: {
+    classGroups: {
+      'font-family': ['font-body', 'font-mono'],
+      'font-weight': [
+        'font-thin',
+        'font-extralight',
+        'font-light',
+        'font-normal',
+        'font-medium',
+        'font-semibold',
+        'font-bold',
+        'font-extrabold',
+        'font-black',
+      ],
+      'density': ['dx-density-sm', 'dx-density-md', 'dx-density-lg'],
+      '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',
+      ],
+    },
+  },
+} as const;
+
+export type AdditionalClassGroups = 'density' | 'dx-focus-ring';