@ohos-ports/dxos-react-ui-theme 0.8.3-beta.0

package/src/config/tailwind.ts

@@ -0,0 +1,236 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import tailwindContainers from '@tailwindcss/container-queries';
+import tailwindcssForms from '@tailwindcss/forms';
+import merge from 'lodash.merge';
+import tailwindScrollbar from 'tailwind-scrollbar';
+import defaultConfig from 'tailwindcss/stubs/config.full.js';
+import { type Config, type ThemeConfig } from 'tailwindcss/types/config';
+import tailwindcssLogical from 'tailwindcss-logical';
+import tailwindcssRadix from 'tailwindcss-radix';
+
+import { tokensTailwindConfig } from './tokens';
+
+export type TailwindConfig = Config;
+export type TailwindThemeConfig = ThemeConfig;
+
+const { extend: extendTokens, ...overrideTokens } = tokensTailwindConfig;
+
+export const tailwindConfig = ({
+  env = 'production',
+  content = [],
+  extensions = [],
+}: {
+  env?: string;
+  content?: string[];
+  extensions?: Partial<TailwindThemeConfig>[];
+}): TailwindConfig => ({
+  darkMode: 'class',
+  theme: {
+    // Configure fonts in theme.css and package.json.
+    fontFamily: {
+      body: ['Inter Variable', ...defaultConfig.theme.fontFamily.sans],
+      mono: ['JetBrains Mono Variable', ...defaultConfig.theme.fontFamily.mono],
+    },
+    extend: merge(
+      {
+        spacing: {
+          prose: 'var(--dx-prose)',
+          containerMaxWidth: 'var(--dx-containerMaxWidth)',
+          popoverMaxWidth: 'var(--dx-popoverMaxWidth)',
+        },
+        borderRadius: {
+          none: '0',
+          sm: '0.25rem',
+          DEFAULT: '0.5rem',
+          md: '.75rem',
+          lg: '1rem',
+        },
+        screens: {
+          'pointer-fine': { raw: '(pointer: fine)' },
+          'hover-hover': { raw: '(hover: hover)' },
+        },
+        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' }],
+          '2xl': ['1.424rem', { lineHeight: '2rem' }],
+          '3xl': ['1.602rem', { lineHeight: '2.25rem' }],
+          '4xl': ['1.802rem', { lineHeight: '2.5rem' }],
+          '5xl': ['2.027rem', { lineHeight: '2.5rem' }],
+          '6xl': ['2.281rem', { lineHeight: '2.5rem' }],
+          '7xl': ['2.566rem', { lineHeight: '2.75rem' }],
+          '8xl': ['2.887rem', { lineHeight: '3rem' }],
+          '9xl': ['3.247rem', { lineHeight: '3.25rem' }],
+        },
+        boxShadow: {
+          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)',
+        },
+        keyframes: {
+          // Popper chrome
+          slideDownAndFade: {
+            from: { opacity: 0, transform: 'translateY(-2px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+          },
+          slideLeftAndFade: {
+            from: { opacity: 0, transform: 'translateX(2px)' },
+            to: { opacity: 1, transform: 'translateX(0)' },
+          },
+          slideUpAndFade: {
+            from: { opacity: 0, transform: 'translateY(2px)' },
+            to: { opacity: 1, transform: 'translateY(0)' },
+          },
+          slideRightAndFade: {
+            from: { opacity: 0, transform: 'translateX(-2px)' },
+            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': {
+            '0%': { opacity: '1' },
+            '100%': { opacity: '0' },
+          },
+          'toast-slide-in-right': {
+            '0%': { transform: 'translateX(calc(100% + 1rem))' },
+            '100%': { transform: 'translateX(0)' },
+          },
+          'toast-slide-in-bottom': {
+            '0%': { transform: 'translateY(calc(100% + 1rem))' },
+            '100%': { transform: 'translateY(0)' },
+          },
+          'toast-swipe-out': {
+            '0%': {
+              transform: 'translateX(var(--radix-toast-swipe-end-x))',
+            },
+            '100%': {
+              transform: 'translateX(calc(100% + 1rem))',
+            },
+          },
+
+          // Shimmer
+          'shimmer-loop': {
+            '100%': {
+              transform: 'translateX(100%)',
+            },
+          },
+
+          'halo-pulse': {
+            '0%': {
+              opacity: 0.3,
+            },
+            '5%': {
+              opacity: 1,
+            },
+            '100%': {
+              opacity: 0.3,
+            },
+          },
+
+          'progress-indeterminate': {
+            '0%': {
+              left: 0,
+              width: '0%',
+            },
+            '25%': {
+              left: '25%',
+              width: '50%',
+            },
+            '75%': {
+              left: '50%',
+              width: '100%',
+            },
+            '100%': {
+              left: '100%',
+              width: '0%',
+            },
+          },
+
+          'progress-linear': {
+            '0%': {
+              transform: 'translateX(-100%)',
+            },
+            '85%, 100%': {
+              transform: `translateX(${(100 / 28) * 100}%)`,
+            },
+          },
+        },
+        animation: {
+          'fade-in': 'fadeIn 100ms ease-in forwards',
+
+          // 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)',
+
+          // 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',
+
+          // Accordion
+          slideDown: 'slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+          slideUp: 'slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)',
+
+          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,
+      ...extensions,
+    ),
+    ...overrideTokens,
+    colors: {
+      ...overrideTokens.colors,
+      inherit: 'inherit',
+      current: 'currentColor',
+      transparent: 'transparent',
+      black: 'black',
+      white: 'white',
+    },
+  },
+  plugins: [
+    tailwindcssLogical,
+    tailwindcssForms,
+    tailwindcssRadix(),
+    tailwindContainers,
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    tailwindScrollbar,
+  ],
+  ...(env === 'development' && { mode: 'jit' }),
+  content,
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+});

package/src/config/tokens/Tokens.stories.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+import { auditFacet, type HelicalArcSeries, type TokenAudit, parseAlphaLuminosity } from '@ch-ui/tokens';
+import { type Meta } from '@storybook/react';
+import React from 'react';
+
+import { tokenSet } from './index';
+
+const colorAudit = auditFacet(tokenSet.colors, { condition: 'p3' });
+
+const Swatch = ({ variableName, value, semantic, physical }: TokenAudit<HelicalArcSeries>) => {
+  const [luminosity, alpha] = parseAlphaLuminosity(value);
+  return (
+    <div className='shrink-0 is-40 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'>
+          {luminosity}
+          {typeof alpha !== 'undefined' && ` / ${alpha}`}
+        </p>
+        {physical.includes('values') && <p>values</p>}
+        {physical.includes('naming') && <p>naming</p>}
+        {semantic.length > 0 && (
+          <ul>
+            {semantic.map(({ sememeName, conditionId }) => {
+              const sememeCondition = `${sememeName} / ${conditionId}`;
+              return <li key={sememeCondition}>{sememeCondition}</li>;
+            })}
+          </ul>
+        )}
+      </dt>
+    </div>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-theme/Tokens',
+};
+
+export default meta;
+
+export const Tokens = () => {
+  if (typeof colorAudit === 'string') {
+    return null;
+  }
+  return (
+    <>
+      <style>{`html{
+        background-color: #888;
+        background-image: linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%, #777),
+        linear-gradient(45deg, #777 25%, transparent 25%, transparent 75%, #777 75%, #777);
+        background-size: 32px 32px;
+        background-position: 0 0, 16px 16px;
+      }`}</style>
+      <div className='flex'>
+        <div className='p-2 bg-baseSurface rounded'>
+          <h1 className='text-lg mbe-2'>Physical color token audit</h1>
+          <pre className='text-xs'>
+            Luminosity (/ alpha)?
+            <br />
+            value // (whether added directly as a physical value)
+            <br />
+            naming // (whether added as a named physical value)
+            <br />
+            ...`semantic token name / theme`[]
+          </pre>
+        </div>
+      </div>
+      {Object.entries(colorAudit).map(([seriesId, audits]) => {
+        return (
+          <>
+            <h2 className='mbs-12 mbe-4'>
+              <span className='pli-2 plb-1 bg-baseSurface rounded'>{seriesId}</span>
+            </h2>
+            <dl className='flex flex-wrap gap-2'>
+              {audits
+                .sort((a, b) => {
+                  const [aL, aA] = parseAlphaLuminosity(a.value);
+                  const [bL, bA] = parseAlphaLuminosity(b.value);
+                  return aL - bL - (Number.isFinite(aA) && Number.isFinite(bA) ? aA! - bA! : 0);
+                })
+                .map((audit) => (
+                  <Swatch key={audit.variableName} {...audit} />
+                ))}
+            </dl>
+          </>
+        );
+      })}
+    </>
+  );
+};

package/src/config/tokens/alias-colors.ts

@@ -0,0 +1,38 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type AliasLayer } from '@ch-ui/tokens';
+
+import { valenceAliases } from './sememes-hue';
+import { sheetAliases } from './sememes-sheet';
+import { systemAliases } from './sememes-system';
+
+const groupAliases = ['groupSurface', ...(systemAliases.groupSurface?.root ?? [])];
+const modalAliases = ['modalSurface', ...(systemAliases.modalSurface?.root ?? [])];
+
+export const aliasColors = {
+  conditions: {
+    root: [':root, .dark'],
+    group: [
+      [
+        '.sidebar-surface, .dark .sidebar-surface',
+        ...groupAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`),
+      ].join(', '),
+    ],
+    modal: [
+      [
+        '.modal-surface, .dark .modal-surface',
+        ...modalAliases.map((alias) => `.bg-${alias}, .dark .bg-${alias}`),
+        //
+      ].join(', '),
+    ],
+  },
+  aliases: {
+    // TODO(thure): Aliases should be merged more elegantly, this causes overwrites.
+    ...sheetAliases,
+    ...systemAliases,
+    ...valenceAliases,
+  },
+  namespace: 'dx-',
+} satisfies AliasLayer<string>;

package/src/config/tokens/index.ts

@@ -0,0 +1,90 @@
+//
+// Copyright 2024 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 const tokenSet = {
+  colors: {
+    physical: physicalColors,
+    semantic: semanticColors,
+    alias: aliasColors,
+  },
+  lengths: lengthsFacet,
+  maxSizes: maxSizesFacet,
+} satisfies TokenSet;
+
+export const hues = Object.keys(huePalettes);
+
+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);

package/src/config/tokens/lengths.ts

@@ -0,0 +1,87 @@
+//
+
+// Copyright 2025 DXOS.org
+//
+
+import { type Facet, type LinearPhysicalLayer } from '@ch-ui/tokens';
+
+export const lengthsFacet = {
+  physical: {
+    namespace: 'dx-',
+    conditions: { root: [':root'] },
+    series: {
+      line: {
+        root: {
+          unit: 'px',
+          initial: 0,
+          slope: 1,
+        },
+      },
+      lacuna: {
+        root: {
+          unit: 'rem',
+          initial: 0,
+          slope: 0.125,
+        },
+      },
+    },
+  } satisfies LinearPhysicalLayer,
+
+  semantic: {
+    namespace: 'dx-',
+    conditions: { root: [':root'] },
+    sememes: {
+      noLine: { root: ['line', 0] },
+      hairLine: { root: ['line', 1] },
+      thickLine: { root: ['line', 2] },
+      // TODO(burdon): Can/should these be hyphenated?
+      trimXs: { root: ['lacuna', 3] },
+      trimSm: { root: ['lacuna', 6] },
+      trimMd: { root: ['lacuna', 9] },
+      trimLg: { root: ['lacuna', 12] },
+    },
+  },
+
+  alias: {
+    namespace: 'dx-',
+    conditions: {
+      fine: [':root, .density-fine, [data-density="fine"]'],
+      coarse: ['.density-coarse, [data-density="coarse"]'],
+      flush: ['.density-flush, [data-density="flush"]'],
+    },
+    aliases: {
+      noLine: { fine: ['focusOffset'] },
+      hairLine: { fine: ['modalLine', 'landmarkLine', 'positionedLine', 'gridGap'] },
+      thickLine: { fine: ['focusLine'] },
+      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock'] },
+      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'inputSpacingBlock'] },
+      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock'] },
+    },
+  },
+} satisfies Facet;
+
+export const maxSizesFacet = {
+  physical: {
+    namespace: 'dx-',
+    conditions: { root: [':root'] },
+    series: {
+      size: {
+        root: {
+          unit: 'rem',
+          initial: 0,
+          slope: 10,
+        },
+      },
+    },
+  } satisfies LinearPhysicalLayer,
+
+  semantic: {
+    namespace: 'dx-',
+    conditions: { root: [':root'] },
+    sememes: {
+      prose: { root: ['size', 5] },
+      containerMaxWidth: { root: ['size', 5] },
+      popoverMaxWidth: { root: ['size', 2] },
+    },
+  },
+} satisfies Facet;

package/src/config/tokens/physical-colors.ts

@@ -0,0 +1,125 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { AccompanyingSeries, ColorsPhysicalLayer, Gamut, HelicalArcSeries, PhysicalSeries } from '@ch-ui/tokens';
+
+import { type PhysicalPalette } from './types';
+
+const reflectiveRelation = {
+  initial: 1_000,
+  slope: -1_000,
+  method: 'floor',
+} satisfies AccompanyingSeries;
+
+const gamuts: (Gamut & string)[] = ['srgb', 'p3', 'rec2020'];
+
+const DEG_RAD = Math.PI / 180;
+
+/**
+ * Creates a color palette configuration for a given hue value.
+ *
+ * @param hue - A number from 0-16 representing different hue angles
+ * @returns A PhysicalPalette configuration with:
+ * - keyPoint: [lightness, chroma, hue] in LCH color space
+ *   - lightness: Fixed at 0.5 (50%)
+ *   - chroma: Varies sinusoidally around 0.13 based on hue angle
+ *   - hue: Calculated by mapping input 0-16 to 26-386 degrees
+ * - Control points and torsion for color interpolation
+ */
+const hueKeyPoint = (hue: number): PhysicalPalette => {
+  const hueDeg = (360 * (hue / 17) + 26) % 360;
+  return {
+    keyPoint: [0.5, 0.13 + 0.024 * Math.sin((hueDeg - 15) * DEG_RAD), hueDeg],
+    lowerCp: 1,
+    upperCp: 1,
+    torsion: 0,
+  };
+};
+
+export const huePalettes = {
+  red: hueKeyPoint(0),
+  orange: hueKeyPoint(1),
+  amber: hueKeyPoint(2),
+  yellow: hueKeyPoint(3),
+  lime: hueKeyPoint(4),
+  green: hueKeyPoint(5),
+  emerald: hueKeyPoint(6),
+  teal: hueKeyPoint(7),
+  cyan: hueKeyPoint(8),
+  sky: hueKeyPoint(9),
+  blue: hueKeyPoint(10),
+  indigo: hueKeyPoint(11),
+  violet: hueKeyPoint(12),
+  purple: hueKeyPoint(13),
+  fuchsia: hueKeyPoint(14),
+  pink: hueKeyPoint(15),
+  rose: hueKeyPoint(16),
+};
+
+/**
+ * The keyPoint represents the LCH value:
+ * - Lightness: 0-1, should usually set the keyPoint at or near 0.5
+ * - Chroma: min 0, max 0.08–0.5 depending on hue and gamut, theme will clamp final value to within gamut’s range
+ * - Hue: 0-360 (~26 “red”, ~141 “green”, ~262 “blue”)
+ *
+ * NOTE: Rebuild the theme and restart the dev server to see changes.
+ *
+ * Theme references:
+ * https://oklch.com
+ * https://colorsublime.github.io
+ * https://github.com/microsoft/vscode-docs/blob/main/api/extension-guides/color-theme.md#create-a-new-color-theme
+ * https://raw.githubusercontent.com/microsoft/vscode/main/src/vs/workbench/services/themes/common/colorThemeSchema.ts
+ * https://tailwindcss.com/docs/colors
+ */
+const systemPalettes = {
+  neutral: {
+    keyPoint: [0.5, 0.001, 260],
+    lowerCp: 0,
+    upperCp: 0,
+    torsion: 0,
+    // Values used directly.
+    // TODO(burdon): Audit.
+    values: [25, 50, 75, 100, 150, 200, 250, 300, 400, 500, 600, 700, 750, 800, 850, 900],
+  } satisfies PhysicalPalette,
+
+  // https://oklch.com/#0.5,0.2,260,100 (#0559d2)
+  primary: {
+    keyPoint: [0.5, 0.2, 260],
+    lowerCp: 0.86,
+    upperCp: 1,
+    torsion: -30,
+    // Values used directly.
+    // TODO(burdon): Audit.
+    values: [100, 150, 200, 350, 400, 450, 500, 750, 800, 850],
+  } satisfies PhysicalPalette,
+};
+
+const physicalSeries = {
+  ...huePalettes,
+  ...systemPalettes,
+};
+
+export const physicalColors: ColorsPhysicalLayer = {
+  namespace: 'dx-',
+  definitions: {
+    // @ts-ignore
+    series: physicalSeries,
+    accompanyingSeries: { reflectiveRelation },
+  },
+  conditions: {
+    srgb: [':root, .dark'],
+    p3: ['@media (color-gamut: p3)', ':root, .dark'],
+    rec2020: ['@media (color-gamut: rec2020)', ':root, .dark'],
+  },
+  series: Object.entries(physicalSeries).reduce((acc: ColorsPhysicalLayer['series'], [id]) => {
+    acc[id] = gamuts.reduce((acc: PhysicalSeries<Gamut & string, HelicalArcSeries>, gamut) => {
+      acc[gamut] = {
+        extends: id,
+        physicalValueRelation: { extends: 'reflectiveRelation' },
+      };
+      return acc;
+    }, {});
+    return acc;
+  }, {}),
+};

package/src/config/tokens/semantic-colors.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { HelicalArcValue, SemanticLayer } from '@ch-ui/tokens';
+
+import { callsSememes } from './sememes-calls';
+import { codemirrorSememes } from './sememes-codemirror';
+import { hueSememes } from './sememes-hue';
+import { sheetSememes } from './sememes-sheet';
+import { systemSememes } from './sememes-system';
+
+export const semanticColors = {
+  conditions: {
+    light: [':root'],
+    dark: ['.dark'],
+  },
+  sememes: {
+    // Please define each set of sememes in its own file.
+    ...callsSememes,
+    ...codemirrorSememes,
+    ...sheetSememes,
+    ...hueSememes,
+    ...systemSememes,
+  },
+  namespace: 'dx-',
+} satisfies SemanticLayer<string, string, HelicalArcValue>;