@dxos/ui-theme 0.8.4-main.ef1bc66f44 → 0.8.4-main.fcfe5033a5

package/src/config/tailwind.ts

@@ -1,265 +0,0 @@
-//
-// Copyright 2022 DXOS.org
-//
-
-import tailwindcssContainerQueries 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(
-      {
-        // Generates is-card-default-width, is-card-min-width, etc.
-        spacing: {
-          '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))',
-          'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
-        },
-        borderRadius: {
-          none: '0',
-          sm: '0.25rem',
-          DEFAULT: '0.5rem',
-          md: '0.75rem',
-          lg: '1rem',
-        },
-        screens: {
-          'pointer-fine': { raw: '(pointer: fine)' },
-          'hover-hover': { raw: '(hover: hover)' },
-          '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' }],
-          '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: {
-          // Fade
-          'fade-in': {
-            from: { opacity: 0 },
-            to: { opacity: 1 },
-          },
-          'fade-out': {
-            from: { opacity: 1 },
-            to: { opacity: 0 },
-          },
-
-          // Popper chrome
-          'slide-down-and-fade': {
-            from: { opacity: 1, transform: 'translateY(0)' },
-            to: { opacity: 0, transform: 'translateY(16px)' },
-          },
-          'slide-left-and-fade': {
-            from: { opacity: 0, transform: 'translateX(-16px)' },
-            to: { opacity: 1, transform: 'translateX(0)' },
-          },
-          'slide-up-and-fade': {
-            from: { opacity: 0, transform: 'translateY(16px)' },
-            to: { opacity: 1, transform: 'translateY(0)' },
-          },
-          'slide-right-and-fade': {
-            from: { opacity: 0, transform: 'translateX(16px)' },
-            to: { opacity: 1, transform: 'translateX(0)' },
-          },
-
-          // 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))',
-            },
-          },
-
-          // 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%': {
-              transform: 'translateX(100%)',
-            },
-          },
-
-          // HALO
-          'halo-pulse': {
-            '0%': {
-              opacity: 0.3,
-            },
-            '5%': {
-              opacity: 1,
-            },
-            '100%': {
-              opacity: 0.3,
-            },
-          },
-
-          // Progress
-          'progress-indeterminate': {
-            '0%': {
-              left: 0,
-              width: '0%',
-            },
-            '25%': {
-              left: '25%',
-              width: '50%',
-            },
-            '75%': {
-              left: '50%',
-              width: '100%',
-            },
-            '100%': {
-              left: '100%',
-              width: '0%',
-            },
-          },
-
-          // Border trail effect
-          'trail': {
-            to: { 'offset-distance': '100%' },
-          },
-          'trail-offset': {
-            '0%': { 'offset-distance': '50%' },
-            '100%': { 'offset-distance': '150%' },
-          },
-        },
-        animation: {
-          // Fade
-          'fade-in': 'fade-in 200ms ease-out',
-          'fade-out': 'fade-out 400ms ease-out',
-
-          // Popper chrome
-          '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',
-
-          // Accordion
-          '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)',
-
-          // Border trail effect
-          'trail': 'trail 6s linear infinite',
-          'trail-offset': 'trail-offset 6s linear 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,
-      ...extensions,
-    ),
-    ...overrideTokens,
-    colors: {
-      ...overrideTokens.colors,
-      inherit: 'inherit',
-      current: 'currentColor',
-      transparent: 'transparent',
-      black: 'black',
-      white: 'white',
-    },
-  },
-  plugins: [
-    tailwindcssContainerQueries,
-    tailwindcssForms,
-    tailwindcssLogical,
-    tailwindcssRadix(),
-    // https://adoxography.github.io/tailwind-scrollbar/utilities
-    tailwindScrollbar({
-      nocompatible: true,
-      preferredStrategy: 'pseudoelements',
-    }),
-  ],
-  ...(env === 'development' && { mode: 'jit' }),
-  content,
-  future: {
-    hoverOnlyWhenSupported: true,
-  },
-});

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

@@ -1,39 +0,0 @@
-//
-// 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(', '),
-    ],
-    gridFocusStack: ['[data-grid-focus-indicator-variant="stack"]'],
-  },
-  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

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

package/src/config/tokens/lengths.ts

@@ -1,106 +0,0 @@
-//
-
-// Copyright 2025 DXOS.org
-//
-
-import { type Facet, type LinearPhysicalLayer } from '@ch-ui/tokens';
-
-import {
-  cardDefaultInlineSize,
-  cardMaxBlockSize,
-  cardMaxInlineSize,
-  cardMinBlockSize,
-  cardMinInlineSize,
-} from './sizes';
-
-export const lengthsFacet = {
-  physical: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    series: {
-      line: {
-        root: {
-          unit: 'px',
-          initial: 0,
-          slope: 1,
-        },
-      },
-      // "gap"
-      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] },
-      trimXs: { root: ['lacuna', 3] },
-      trimSm: { root: ['lacuna', 4] },
-      trimMd: { root: ['lacuna', 6] },
-      trimLg: { root: ['lacuna', 12] },
-      inputFine: { root: ['lacuna', 3] },
-      inputCoarse: { root: ['lacuna', 4] },
-    },
-  },
-
-  alias: {
-    namespace: 'dx-',
-    conditions: {
-      fine: [':root, .density-fine'],
-      coarse: ['.density-coarse'],
-      flush: ['.density-flush'],
-      gridFocusStack: ['[data-grid-focus-indicator-variant="stack"]'],
-    },
-    aliases: {
-      noLine: { fine: ['focusOffset'] },
-      hairLine: { fine: ['modalLine', 'landmarkLine', 'positionedLine', 'gridGap', 'gridFocusIndicatorWidth'] },
-      thickLine: { fine: ['focusLine'], gridFocusStack: ['gridFocusIndicatorWidth'] },
-      inputFine: { fine: ['iconButtonPadding'] },
-      inputCoarse: { coarse: ['iconButtonPadding'] },
-
-      trimXs: { fine: ['cardSpacingChrome', 'labelSpacingBlock', 'inputSpacingBlock'] },
-      // TODO(burdon): Remove?
-      trimSm: { fine: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
-      trimMd: { coarse: ['cardSpacingInline', 'cardSpacingBlock', 'cardSpacingGap'] },
-    },
-  },
-} satisfies Facet;
-
-export const maxSizesFacet = {
-  physical: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    series: {
-      size: {
-        root: {
-          unit: 'rem',
-          initial: 0,
-          slope: 1,
-        },
-      },
-    },
-  } satisfies LinearPhysicalLayer,
-
-  semantic: {
-    namespace: 'dx-',
-    conditions: { root: [':root'] },
-    sememes: {
-      '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/physical-colors.ts

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

@@ -1,27 +0,0 @@
-//
-// 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: {
-    // Define each set of sememes in its own file.
-    ...callsSememes,
-    ...codemirrorSememes,
-    ...hueSememes,
-    ...sheetSememes,
-    ...systemSememes,
-  },
-  namespace: 'dx-',
-} satisfies SemanticLayer<string, string, HelicalArcValue>;

package/src/config/tokens/sememes-calls.ts

@@ -1,17 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type ColorSememes } from './types';
-
-// TODO(burdon): This should be broader than just calls.
-export const callsSememes: ColorSememes = {
-  callActive: {
-    light: ['green', '500'],
-    dark: ['green', '500'],
-  },
-  callAlert: {
-    light: ['rose', '500'],
-    dark: ['rose', '500'],
-  },
-};

package/src/config/tokens/sememes-codemirror.ts

@@ -1,50 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type ColorSememes } from './types';
-
-export const codemirrorSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  cmCodeblock: {
-    light: ['neutral', '500/.1'],
-    dark: ['neutral', '500/.1'],
-  },
-  cmActiveLine: {
-    light: ['neutral', '200/.5'],
-    dark: ['neutral', '800/.5'],
-  },
-  cmSeparator: {
-    light: ['primary', 500],
-    dark: ['primary', 500],
-  },
-  cmCursor: {
-    light: ['neutral', 900],
-    dark: ['neutral', 100],
-  },
-  cmSelection: {
-    light: ['primary', '400/.5'],
-    dark: ['primary', '600/.5'],
-  },
-  cmFocusedSelection: {
-    light: ['primary', 400],
-    dark: ['primary', 600],
-  },
-  cmHighlight: {
-    light: ['neutral', 950],
-    dark: ['neutral', 50],
-  },
-  cmHighlightSurface: {
-    light: ['sky', 200],
-    dark: ['cyan', 600],
-  },
-  // TODO(burdon): Factor out defs in common with sheet.
-  cmCommentText: {
-    light: ['neutral', 50],
-    dark: ['neutral', 950],
-  },
-  cmCommentSurface: {
-    light: ['amber', 700],
-    dark: ['amber', 200],
-  },
-} satisfies ColorSememes;

package/src/config/tokens/sememes-hue.ts

@@ -1,54 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { huePalettes } from './physical-colors';
-import { type ColorAliases, type ColorSememes } from './types';
-
-export const hueSememes: ColorSememes = [...Object.keys(huePalettes), 'neutral', 'primary'].reduce(
-  (acc: ColorSememes, palette) => {
-    acc[`${palette}Cursor`] = {
-      light: [palette, 400],
-      dark: [palette, 300],
-    };
-    acc[`${palette}Text`] = {
-      light: [palette, 550],
-      dark: [palette, 300],
-    };
-    acc[`${palette}Fill`] = {
-      light: [palette, 500],
-      dark: [palette, 500],
-    };
-    acc[`${palette}Surface`] = {
-      light: [palette, 200],
-      dark: [palette, 700],
-    };
-    acc[`${palette}SurfaceText`] = {
-      light: [palette, 700],
-      dark: [palette, 200],
-    };
-    acc[`${palette}Screen`] = {
-      light: [palette, 100],
-      dark: [palette, 800],
-    };
-    return acc;
-  },
-  {},
-);
-
-const valenceAliasSememeStems = ['Text', 'Surface', 'SurfaceText', 'Fill', 'Cursor'];
-const valenceMapping = {
-  emerald: ['success'],
-  cyan: ['info'],
-  amber: ['warning'],
-  rose: ['error'],
-  primary: ['current'],
-  fuchsia: ['internal'],
-};
-
-export const valenceAliases: ColorAliases = valenceAliasSememeStems.reduce((acc: ColorAliases, stem) => {
-  return Object.entries(valenceMapping).reduce((acc: ColorAliases, [hue, valences]) => {
-    acc[`${hue}${stem}`] = { root: valences.map((valence) => `${valence}${stem}`) };
-    return acc;
-  }, acc);
-}, {});