@dxos/ui-theme 0.0.0 → 0.8.4-main.52d7546f51

package/src/Tokens.stories.tsx

@@ -14,7 +14,7 @@ const Swatch = ({ variableName, value, semantic, physical }: TokenAudit<HelicalA
   const [luminosity, alpha] = parseAlphaLuminosity(value);
 
   return (
-    <div className='shrink-0 is-40 flex flex-col rounded overflow-hidden'>
+    <div className='shrink-0 is-48 flex flex-col rounded overflow-hidden'>
       <dd className='aspect-video' style={{ background: `var(${variableName})` }}></dd>
       <dt className='text-xs bg-baseSurface grow pli-2 plb-1'>
         <p className='text-sm'>
@@ -26,7 +26,7 @@ const Swatch = ({ variableName, value, semantic, physical }: TokenAudit<HelicalA
         {semantic.length > 0 && (
           <ul>
             {semantic.map(({ sememeName, conditionId }) => {
-              const sememeCondition = `${sememeName} / ${conditionId}`;
+              const sememeCondition = `${conditionId}:${sememeName}`;
               return <li key={sememeCondition}>{sememeCondition}</li>;
             })}
           </ul>

package/src/config/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2022 DXOS.org
 //
 
-export * from './tokens';
 export * from './tailwind';
+export * from './tokens';

package/src/config/tailwind.ts

@@ -36,13 +36,15 @@ export const tailwindConfig = ({
     },
     extend: merge(
       {
+        // Generates is-card-default-width, is-card-min-width, etc.
         spacing: {
-          prose: 'var(--dx-prose)',
-          containerMaxWidth: 'var(--dx-containerMaxWidth)',
-          cardDefaultWidth: 'var(--dx-cardDefaultWidth)',
-          cardMinWidth: 'var(--dx-cardMinWidth)',
-          cardMaxWidth: 'var(--dx-cardMaxWidth)',
-          popoverMaxWidth: 'var(--dx-popoverMaxWidth)',
+          'prose-max-width': 'var(--dx-prose-max-width)',
+          'container-max-width': 'var(--dx-container-max-width)',
+          'card-default-width': 'var(--dx-card-default-width)',
+          'card-min-width': 'var(--dx-card-min-width)',
+          'card-max-width': 'var(--dx-card-max-width)',
+          'card-min-height': 'var(--dx-card-min-height)',
+          'card-max-height': 'var(--dx-card-max-height)',
         },
         backgroundImage: {
           'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
@@ -52,23 +54,23 @@ export const tailwindConfig = ({
           none: '0',
           sm: '0.25rem',
           DEFAULT: '0.5rem',
-          md: '.75rem',
+          md: '0.75rem',
           lg: '1rem',
         },
         screens: {
           'pointer-fine': { raw: '(pointer: fine)' },
           'hover-hover': { raw: '(hover: hover)' },
-          md: '768px',
-          lg: '1024px',
+          'md': '768px',
+          'lg': '1024px',
         },
         fontSize: {
           // Base size 16px
           // Scale 1.125
-          xs: ['0.790rem', { lineHeight: '1rem' }],
-          sm: ['0.889rem', { lineHeight: '1.25rem' }],
-          base: ['1rem', { lineHeight: '1.5rem' }],
-          lg: ['1.125rem', { lineHeight: '1.75rem' }],
-          xl: ['1.266rem', { lineHeight: '1.75rem' }],
+          'xs': ['0.790rem', { lineHeight: '1rem' }],
+          'sm': ['0.889rem', { lineHeight: '1.25rem' }],
+          'base': ['1rem', { lineHeight: '1.5rem' }],
+          'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+          'xl': ['1.266rem', { lineHeight: '1.75rem' }],
           '2xl': ['1.424rem', { lineHeight: '2rem' }],
           '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
           '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
@@ -79,46 +81,42 @@ export const tailwindConfig = ({
           '9xl': ['3.247rem', { lineHeight: '3.25rem' }],
         },
         boxShadow: {
-          slider: '0 0 0 5px rgba(0, 0, 0, 0.3)',
+          'slider': '0 0 0 5px rgba(0, 0, 0, 0.3)',
         },
         transitionProperty: {
           'max-height': 'max-height',
         },
         transitionTimingFunction: {
-          'in-out-symmetric': 'cubic-bezier(0.5,0,0.5,1)',
+          'in-out-symmetric': 'cubic-bezier(0.5, 0, 0.5, 1)',
         },
         keyframes: {
+          // Fade
+          'fade-in': {
+            from: { opacity: 0 },
+            to: { opacity: 1 },
+          },
+          'fade-out': {
+            from: { opacity: 1 },
+            to: { opacity: 0 },
+          },
+
           // Popper chrome
-          slideDownAndFade: {
-            from: { opacity: 0, transform: 'translateY(-2px)' },
-            to: { opacity: 1, transform: 'translateY(0)' },
+          'slide-down-and-fade': {
+            from: { opacity: 1, transform: 'translateY(0)' },
+            to: { opacity: 0, transform: 'translateY(16px)' },
           },
-          slideLeftAndFade: {
-            from: { opacity: 0, transform: 'translateX(2px)' },
+          'slide-left-and-fade': {
+            from: { opacity: 0, transform: 'translateX(-16px)' },
             to: { opacity: 1, transform: 'translateX(0)' },
           },
-          slideUpAndFade: {
-            from: { opacity: 0, transform: 'translateY(2px)' },
+          'slide-up-and-fade': {
+            from: { opacity: 0, transform: 'translateY(16px)' },
             to: { opacity: 1, transform: 'translateY(0)' },
           },
-          slideRightAndFade: {
-            from: { opacity: 0, transform: 'translateX(-2px)' },
+          'slide-right-and-fade': {
+            from: { opacity: 0, transform: 'translateX(16px)' },
             to: { opacity: 1, transform: 'translateX(0)' },
           },
-          fadeIn: {
-            from: { opacity: 0 },
-            to: { opacity: 1 },
-          },
-
-          // Accordion
-          slideDown: {
-            from: { height: '0px' },
-            to: { height: 'var(--radix-accordion-content-height)' },
-          },
-          slideUp: {
-            from: { height: 'var(--radix-accordion-content-height)' },
-            to: { height: '0px' },
-          },
 
           // Toast
           'toast-hide': {
@@ -142,6 +140,16 @@ export const tailwindConfig = ({
             },
           },
 
+          // Accordion
+          'slide-down': {
+            from: { height: '0px' },
+            to: { height: 'var(--radix-accordion-content-height)' },
+          },
+          'slide-up': {
+            from: { height: 'var(--radix-accordion-content-height)' },
+            to: { height: '0px' },
+          },
+
           // Shimmer
           'shimmer-loop': {
             '100%': {
@@ -149,6 +157,7 @@ export const tailwindConfig = ({
             },
           },
 
+          // HALO
           'halo-pulse': {
             '0%': {
               opacity: 0.3,
@@ -161,6 +170,7 @@ export const tailwindConfig = ({
             },
           },
 
+          // Progress
           'progress-indeterminate': {
             '0%': {
               left: 0,
@@ -180,45 +190,47 @@ export const tailwindConfig = ({
             },
           },
 
-          // Border trail
-          ['trail']: {
+          // Border trail effect
+          'trail': {
             to: { 'offset-distance': '100%' },
           },
-          ['trail-offset']: {
+          'trail-offset': {
             '0%': { 'offset-distance': '50%' },
             '100%': { 'offset-distance': '150%' },
           },
         },
         animation: {
-          ['fade-in']: 'fadeIn 100ms ease-in forwards',
-
-          // Border trail
-          ['trail']: 'trail 6s linear infinite',
-          ['trail-offset']: 'trail-offset 6s linear infinite',
+          // Fade
+          'fade-in': 'fade-in 200ms ease-out',
+          'fade-out': 'fade-out 400ms ease-out',
 
           // Popper chrome
-          ['slideDownAndFade']: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideLeftAndFade']: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideUpAndFade']: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['slideRightAndFade']: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-down-and-fade': 'slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-left-and-fade': 'slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-up-and-fade': 'slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'slide-right-and-fade': 'slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
 
           // Toast
-          ['toast-hide']: 'toast-hide 100ms ease-in forwards',
-          ['toast-slide-in-right']: 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['toast-slide-in-bottom']: 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-          ['toast-swipe-out']: 'toast-swipe-out 100ms ease-out forwards',
+          'toast-hide': 'toast-hide 100ms ease-in forwards',
+          'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
+          'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
 
           // Accordion
-          ['slideDown']: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
-          ['slideUp']: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          'slide-down': 'slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          'slide-up': 'slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1)',
 
-          ['spin']: 'spin 1.5s linear infinite',
-          ['spin-slow']: 'spin 3s linear infinite',
+          // Border trail effect
+          'trail': 'trail 6s linear infinite',
+          'trail-offset': 'trail-offset 6s linear infinite',
 
-          ['shimmer']: 'shimmer-loop 2s infinite',
-          ['halo-pulse']: 'halo-pulse 2s ease-out infinite',
-          ['progress-indeterminate']: 'progress-indeterminate 2s ease-out infinite',
-          ['progress-linear']: 'progress-linear 2s ease-out infinite',
+          // Progress effects
+          'spin': 'spin 1.5s linear infinite',
+          'spin-slow': 'spin 3s linear infinite',
+          'shimmer': 'shimmer-loop 2s infinite',
+          'halo-pulse': 'halo-pulse 2s ease-out infinite',
+          'progress-indeterminate': 'progress-indeterminate 2s ease-out infinite',
+          'progress-linear': 'progress-linear 2s ease-out infinite',
         },
       },
       extendTokens,
@@ -240,7 +252,10 @@ export const tailwindConfig = ({
     tailwindcssLogical,
     tailwindcssRadix(),
     // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar,
+    tailwindScrollbar({
+      nocompatible: true,
+      preferredStrategy: 'pseudoelements',
+    }),
   ],
   ...(env === 'development' && { mode: 'jit' }),
   content,

package/src/config/tokens/colors/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './alias-colors';
+export * from './physical-colors';
+export * from './semantic-colors';
+export * from './sememes-system';

package/src/config/tokens/{sememes-system.ts → colors/sememes-system.ts}

@@ -8,7 +8,6 @@ import * as _colors from '@ch-ui/colors';
 
 import { type ColorAliases, type ColorSememes } from './types';
 
-// TODO(burdon): Move to util.
 const getMapValue = <T>(map: Record<string, T>, key: string, defaultValue: () => T): T => {
   let value = map[key];
   if (!value) {
@@ -85,6 +84,79 @@ const contrastCadence = (lightDepth: number, darkDepth: number = lightDepth, alp
     alpha,
   );
 
+type SememeName = keyof typeof systemSememes;
+type SememeKey = 'root' | 'group' | 'modal';
+
+/**
+ * Alias map.
+ */
+const aliasDefs: Record<string, Partial<Record<SememeKey, SememeName>>> = {
+  // Selected items, current items, other surfaces needing special contrast against baseSurface.
+  activeSurface: {
+    root: 'inputSurfaceBase',
+  },
+
+  // Main sidebar panel.
+  sidebarSurface: {
+    root: 'groupSurface',
+  },
+
+  // Plank header.
+  headerSurface: {
+    root: 'groupSurface',
+  },
+
+  // Toolbars, table/sheet headers, etc.
+  toolbarSurface: {
+    root: 'groupSurface',
+  },
+
+  // Forms, cards, etc.
+  cardSurface: {
+    root: 'groupSurface',
+  },
+
+  // Secondary aliases.
+  textInputSurface: {
+    root: 'textInputSurfaceBase',
+    group: 'textInputSurfaceGroup',
+    modal: 'textInputSurfaceModal',
+  },
+  inputSurface: {
+    root: 'inputSurfaceBase',
+    group: 'inputSurfaceGroup',
+    modal: 'inputSurfaceModal',
+  },
+  hoverSurface: {
+    root: 'hoverSurfaceBase',
+    group: 'hoverSurfaceGroup',
+    modal: 'hoverSurfaceModal',
+  },
+
+  // TODO(thure): Rename uses of this token to `focusSurface` and remove this alias.
+  attention: {
+    root: 'focusSurface',
+  },
+
+  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
+  // TODO(burdon): Review tokens.
+  currentRelated: {
+    root: 'modalSurface',
+  },
+
+  // Borders and dividers.
+  separator: {
+    root: 'separatorBase',
+    group: 'separatorGroup',
+    modal: 'separatorModal',
+  },
+};
+
+//
+// Exports
+//
+
+// TODO(burdon): Separate definitions from utils.
 export const systemSememes = {
   //
   // Elevation cadence tokens
@@ -113,9 +185,14 @@ export const systemSememes = {
   separatorBase: contrastCadence(3, 2),
   separatorGroup: contrastCadence(3, 2.5),
   separatorModal: contrastCadence(3, 3),
-
   subduedSeparator: contrastCadence(3, 1),
 
+  scrollbarTrack: contrastCadence(0),
+  scrollbarThumbSubdued: contrastCadence(1, 1),
+  scrollbarThumb: contrastCadence(2.5, 2.5),
+  scrollbarThumbHover: contrastCadence(3.5, 3.5),
+  scrollbarThumbActive: contrastCadence(4.5, 4.5),
+
   unAccent: {
     light: ['neutral', 400],
     dark: ['neutral', 400],
@@ -223,74 +300,6 @@ export const systemSememes = {
   },
 } satisfies ColorSememes;
 
-type SememeName = keyof typeof systemSememes;
-type SememeKey = 'root' | 'group' | 'modal';
-
-/**
- * Alias map.
- */
-const aliasDefs: Record<string, Partial<Record<SememeKey, SememeName>>> = {
-  // Selected items, current items, other surfaces needing special contrast against baseSurface.
-  activeSurface: {
-    root: 'inputSurfaceBase',
-  },
-
-  // Main sidebar panel.
-  sidebarSurface: {
-    root: 'groupSurface',
-  },
-
-  // Plank header.
-  headerSurface: {
-    root: 'groupSurface',
-  },
-
-  // Toolbars, table/sheet headers, etc.
-  toolbarSurface: {
-    root: 'groupSurface',
-  },
-
-  // Forms, cards, etc.
-  cardSurface: {
-    root: 'groupSurface',
-  },
-
-  // Secondary aliases.
-  textInputSurface: {
-    root: 'textInputSurfaceBase',
-    group: 'textInputSurfaceGroup',
-    modal: 'textInputSurfaceModal',
-  },
-  inputSurface: {
-    root: 'inputSurfaceBase',
-    group: 'inputSurfaceGroup',
-    modal: 'inputSurfaceModal',
-  },
-  hoverSurface: {
-    root: 'hoverSurfaceBase',
-    group: 'hoverSurfaceGroup',
-    modal: 'hoverSurfaceModal',
-  },
-
-  // TODO(thure): Rename uses of this token to `focusSurface` and remove this alias.
-  attention: {
-    root: 'focusSurface',
-  },
-
-  // In “master-detail” patterns, the background of the item in the list which is enumerated in the adjacent view.
-  // TODO(burdon): Review tokens.
-  currentRelated: {
-    root: 'modalSurface',
-  },
-
-  // Borders and dividers.
-  separator: {
-    root: 'separatorBase',
-    group: 'separatorGroup',
-    modal: 'separatorModal',
-  },
-};
-
 export const systemAliases: ColorAliases = Object.entries(aliasDefs).reduce((aliases, [alias, values]) => {
   Object.entries(values).forEach(([key, sememe]) => {
     const record = getMapValue(aliases, sememe, () => ({}));

package/src/config/tokens/index.ts

@@ -1,92 +1,6 @@
 //
-// Copyright 2024 DXOS.org
+// Copyright 2026 DXOS.org
 //
 
-import { type TailwindAdapterConfig } from '@ch-ui/tailwind-tokens';
-import adapter from '@ch-ui/tailwind-tokens';
-import { type TokenSet } from '@ch-ui/tokens';
-
-import { aliasColors } from './alias-colors';
-import { lengthsFacet, maxSizesFacet } from './lengths';
-import { huePalettes, physicalColors } from './physical-colors';
-import { semanticColors } from './semantic-colors';
-import { systemAliases, systemSememes } from './sememes-system';
-
 export * from './sizes';
-
-export const hues = Object.keys(huePalettes);
-
-export const tokenSet = {
-  colors: {
-    physical: physicalColors,
-    semantic: semanticColors,
-    alias: aliasColors,
-  },
-  lengths: lengthsFacet,
-  maxSizes: maxSizesFacet,
-} satisfies TokenSet;
-
-const adapterConfig: TailwindAdapterConfig = {
-  colors: {
-    facet: 'colors',
-    disposition: 'overwrite',
-    tokenization: 'recursive',
-  },
-  borderWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  ringWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  ringOffsetWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  outlineWidth: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'omit-series',
-  },
-  spacing: {
-    facet: 'lengths',
-    disposition: 'extend',
-    tokenization: 'keep-series',
-  },
-};
-
-export const userDefaultTokenSet = {
-  colors: {
-    physical: {
-      definitions: {
-        series: {
-          neutral: physicalColors.definitions!.series!.neutral,
-          primary: physicalColors.definitions!.series!.primary,
-        },
-        accompanyingSeries: physicalColors.definitions!.accompanyingSeries,
-      },
-      conditions: physicalColors.conditions,
-      series: {
-        neutral: physicalColors.series.neutral,
-        primary: physicalColors.series.primary,
-      },
-      namespace: physicalColors.namespace,
-    },
-    semantic: {
-      conditions: semanticColors.conditions,
-      sememes: systemSememes,
-      namespace: semanticColors.namespace,
-    },
-    alias: {
-      conditions: aliasColors.conditions,
-      aliases: systemAliases,
-      namespace: aliasColors.namespace,
-    },
-  },
-} satisfies TokenSet;
-
-export const tokensTailwindConfig = adapter(tokenSet, adapterConfig);
+export * from './tokens';

package/src/config/tokens/lengths.ts

@@ -5,7 +5,13 @@
 
 import { type Facet, type LinearPhysicalLayer } from '@ch-ui/tokens';
 
-import { cardDefaultInlineSize, cardMaxInlineSize, cardMinInlineSize } from './sizes';
+import {
+  cardDefaultInlineSize,
+  cardMaxBlockSize,
+  cardMaxInlineSize,
+  cardMinBlockSize,
+  cardMinInlineSize,
+} from './sizes';
 
 export const lengthsFacet = {
   physical: {
@@ -58,11 +64,12 @@ export const lengthsFacet = {
       noLine: { fine: ['focusOffset'] },
       hairLine: { fine: ['modalLine', 'landmarkLine', 'positionedLine', 'gridGap', 'gridFocusIndicatorWidth'] },
       thickLine: { fine: ['focusLine'], gridFocusStack: ['gridFocusIndicatorWidth'] },
-      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock', 'inputSpacingBlock'] }, // TODO(burdon): Remove need for this.
-      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
-      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
       inputFine: { fine: ['iconButtonPadding'] },
       inputCoarse: { coarse: ['iconButtonPadding'] },
+
+      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock', 'inputSpacingBlock'] },
+      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
+      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
     },
   },
 } satisfies Facet;
@@ -86,12 +93,13 @@ export const maxSizesFacet = {
     namespace: 'dx-',
     conditions: { root: [':root'] },
     sememes: {
-      prose: { root: ['size', 50] },
-      containerMaxWidth: { root: ['size', 50] },
-      popoverMaxWidth: { root: ['size', cardDefaultInlineSize] },
-      cardDefaultWidth: { root: ['size', cardDefaultInlineSize] },
-      cardMinWidth: { root: ['size', cardMinInlineSize] },
-      cardMaxWidth: { root: ['size', cardMaxInlineSize] },
+      'prose-max-width': { root: ['size', 50] },
+      'container-max-width': { root: ['size', 50] },
+      'card-default-width': { root: ['size', cardDefaultInlineSize] },
+      'card-min-width': { root: ['size', cardMinInlineSize] },
+      'card-max-width': { root: ['size', cardMaxInlineSize] },
+      'card-min-height': { root: ['size', cardMinBlockSize] },
+      'card-max-height': { root: ['size', cardMaxBlockSize] },
     },
   },
 } satisfies Facet;

package/src/config/tokens/sizes.ts

@@ -2,6 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+/**
+ * Cards should be no larger than 320px per WCAG 2.1 SC 1.4.10.
+ */
 export const cardMinInlineSize = 18;
-export const cardDefaultInlineSize = 20;
-export const cardMaxInlineSize = 25;
+export const cardDefaultInlineSize = 20; // 320px
+export const cardMaxInlineSize = 22;
+export const cardMinBlockSize = 18;
+export const cardMaxBlockSize = 30;