@dxos/ui-theme 0.0.0 → 0.8.4-main.16b68245aa

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);
-}, {});

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

@@ -1,62 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { ColorAliases, ColorSememes } from './types';
-
-export const sheetSememes = {
-  // NOTE: background styles for the main content area must have transparency otherwise they will mask the selection.
-  axisSurface: {
-    light: ['neutral', 50],
-    dark: ['neutral', 800],
-  },
-  axisText: {
-    light: ['neutral', 800],
-    dark: ['neutral', 200],
-  },
-  axisSelectedSurface: {
-    light: ['neutral', 100],
-    dark: ['neutral', 900],
-  },
-  axisSelectedText: {
-    light: ['neutral', 100],
-    dark: ['neutral', 900],
-  },
-  gridCell: {
-    // TODO(thure): Why override only dark?
-    light: ['neutral', '50/0'],
-    dark: ['neutral', 850],
-  },
-  gridCellSelected: {
-    // TODO(thure): Can this not just use `attention`?
-    light: ['neutral', 50],
-    dark: ['neutral', 800],
-  },
-  gridOverlay: {
-    light: ['primary', '500/.5'],
-    dark: ['primary', '500/.5'],
-  },
-  gridSelectionOverlay: {
-    light: ['primary', '500/.2'],
-    dark: ['primary', '500/.2'],
-  },
-  gridHighlight: {
-    light: ['emerald', '500/.5'],
-    dark: ['emerald', '500/.5'],
-  },
-  // TODO(burdon): Factor out def (in common with editor).
-  gridCommented: {
-    light: ['green', 200],
-    dark: ['green', 600],
-  },
-  gridCommentedActive: {
-    light: ['green', '200/.5'],
-    dark: ['green', '600/.5'],
-  },
-} satisfies ColorSememes;
-
-export const sheetAliases = {
-  activeSurface: { root: ['gridLine'] },
-  accentFocusIndicator: { root: ['gridFocusIndicatorColor'] },
-  neutralFocusIndicator: { gridFocusStack: ['gridFocusIndicatorColor'] },
-} satisfies ColorAliases;

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

@@ -1,302 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-// TODO(thure): TS2742
-/* eslint-disable unused-imports/no-unused-imports */
-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) {
-    value = defaultValue();
-    map[key] = value;
-  }
-  return value;
-};
-
-type Sememe = ColorSememes[string];
-
-const applyAlpha = (sememe: Sememe, alpha: number): Sememe => {
-  if (alpha >= 1) {
-    return sememe;
-  } else {
-    return {
-      light: [sememe.light![0], `${sememe.light![1]}/${alpha}`],
-      dark: [sememe.dark![0], `${sememe.dark![1]}/${alpha}`],
-    };
-  }
-};
-
-// Luminosity extrema and key points.
-
-// Both elevation cadences go from darker to lighter from “elevation” 0 to `ELEVATION_SCALE`,
-// whereas both contrast cadences go from highest contrast at 0 to lowest contrast at `CONTRAST_SCALE`.
-
-const DARK_ELEVATION_MIN = 855;
-const DARK_ELEVATION_MAX = 731;
-
-const DARK_CONTRAST_MIN = 750;
-const DARK_CONTRAST_MAX = 665;
-
-const LIGHT_ELEVATION_MIN = 0;
-const LIGHT_ELEVATION_MAX = 0;
-
-const LIGHT_CONTRAST_MIN = 82;
-const LIGHT_CONTRAST_MAX = 24;
-
-const ELEVATION_SCALE = 2;
-const CONTRAST_SCALE = 3;
-
-const darkElevationCadence = (depth: number) =>
-  Math.round(
-    DARK_ELEVATION_MAX + (DARK_ELEVATION_MIN - DARK_ELEVATION_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE),
-  );
-const darkContrastCadence = (depth: number) =>
-  Math.round(
-    DARK_CONTRAST_MAX + (DARK_CONTRAST_MIN - DARK_CONTRAST_MAX) * ((ELEVATION_SCALE - depth) / ELEVATION_SCALE),
-  );
-
-const lightElevationCadence = (depth: number) =>
-  Math.round(
-    LIGHT_ELEVATION_MIN + (LIGHT_ELEVATION_MAX - LIGHT_ELEVATION_MIN) * ((CONTRAST_SCALE - depth) / CONTRAST_SCALE),
-  );
-const lightContrastCadence = (depth: number) =>
-  Math.round(LIGHT_CONTRAST_MAX + (LIGHT_CONTRAST_MIN - LIGHT_CONTRAST_MAX) * (depth / CONTRAST_SCALE));
-
-const elevationCadence = (lightDepth: number, darkDepth: number = lightDepth, alpha: number = 1): Sememe =>
-  applyAlpha(
-    {
-      light: ['neutral', lightElevationCadence(lightDepth)],
-      dark: ['neutral', darkElevationCadence(darkDepth)],
-    },
-    alpha,
-  );
-
-const contrastCadence = (lightDepth: number, darkDepth: number = lightDepth, alpha: number = 1): Sememe =>
-  applyAlpha(
-    {
-      light: ['neutral', lightContrastCadence(lightDepth)],
-      dark: ['neutral', darkContrastCadence(darkDepth)],
-    },
-    alpha,
-  );
-
-export const systemSememes = {
-  //
-  // Elevation cadence tokens
-  //
-
-  baseSurface: elevationCadence(0),
-  groupSurface: elevationCadence(1),
-  modalSurface: elevationCadence(2, 1.7),
-
-  //
-  // Contrast cadence tokens
-  //
-
-  textInputSurfaceBase: contrastCadence(0, 0),
-  textInputSurfaceGroup: contrastCadence(0, 0.5),
-  textInputSurfaceModal: contrastCadence(0, 1),
-
-  inputSurfaceBase: contrastCadence(0.8, 0.33),
-  inputSurfaceGroup: contrastCadence(0.8, 0.66),
-  inputSurfaceModal: contrastCadence(0.8, 1),
-
-  hoverSurfaceBase: contrastCadence(2, 1.5),
-  hoverSurfaceGroup: contrastCadence(2, 2),
-  hoverSurfaceModal: contrastCadence(2, 2.5),
-
-  separatorBase: contrastCadence(3, 2),
-  separatorGroup: contrastCadence(3, 2.5),
-  separatorModal: contrastCadence(3, 3),
-
-  subduedSeparator: contrastCadence(3, 1),
-
-  unAccent: {
-    light: ['neutral', 400],
-    dark: ['neutral', 400],
-  },
-  unAccentHover: {
-    light: ['neutral', 450],
-    dark: ['neutral', 450],
-  },
-  hoverOverlay: {
-    light: ['neutral', '450/.1'],
-    dark: ['neutral', '450/.1'],
-  },
-
-  //
-  // Special surfaces.
-  //
-
-  // Screen overlay for modal dialogs.
-  scrimSurface: applyAlpha(
-    {
-      light: ['neutral', LIGHT_CONTRAST_MAX],
-      dark: ['neutral', DARK_ELEVATION_MIN],
-    },
-    0.65,
-  ),
-
-  // High contrast for focused interactive elements. (Technically this is part of the surface cadence, but the contrast cadence is on the opposite side of the elevation cadence as this point.)
-  focusSurface: {
-    light: ['neutral', 0],
-    dark: ['neutral', 1000],
-  },
-
-  deckSurface: {
-    light: ['neutral', 50],
-    dark: ['neutral', 950],
-  },
-
-  // For tooltips only; the highest elevation from the opposite theme
-  inverseSurface: {
-    light: ['neutral', DARK_ELEVATION_MIN],
-    dark: ['neutral', LIGHT_ELEVATION_MIN],
-  },
-
-  //
-  // Accent surfaces
-  //
-
-  accentSurfaceRelated: {
-    light: ['primary', '300/.1'],
-    dark: ['primary', '400/.1'],
-  },
-  accentSurfaceHover: {
-    light: ['primary', 600],
-    dark: ['primary', 475],
-  },
-  accentSurface: {
-    light: ['primary', 500],
-    dark: ['primary', 500],
-  },
-
-  //
-  // Text (text-) and other foregrounds
-  // TODO(thure): Establish contrast-order cadence for text.
-  //
-
-  baseText: {
-    light: ['neutral', 1000],
-    dark: ['neutral', 50],
-  },
-  inverseSurfaceText: {
-    light: ['neutral', 50],
-    dark: ['neutral', 1000],
-  },
-  description: {
-    light: ['neutral', 550],
-    dark: ['neutral', 350],
-  },
-  subdued: {
-    light: ['neutral', 700],
-    dark: ['neutral', 300],
-  },
-  placeholder: {
-    light: ['neutral', 500],
-    dark: ['neutral', 500],
-  },
-  accentText: {
-    light: ['primary', 550],
-    dark: ['primary', 400],
-  },
-  accentSurfaceText: {
-    light: ['neutral', 0],
-    dark: ['neutral', 0],
-  },
-  accentTextHover: {
-    light: ['primary', 500],
-    dark: ['primary', 350],
-  },
-  accentFocusIndicator: {
-    light: ['primary', 300],
-    dark: ['primary', 450],
-  },
-  neutralFocusIndicator: {
-    light: ['neutral', 300],
-    dark: ['neutral', 550],
-  },
-} 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, () => ({}));
-    const list = getMapValue<string[]>(record, key, () => []);
-    list.push(alias);
-  });
-
-  return aliases;
-}, {} as ColorAliases);

package/src/config/tokens/sizes.ts

@@ -1,7 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-export const cardMinInlineSize = 18;
-export const cardDefaultInlineSize = 20;
-export const cardMaxInlineSize = 25;

package/src/config/tokens/types.ts

@@ -1,9 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import type { AliasLayer, HelicalArcValue, ResolvedHelicalArcSeries, SemanticLayer } from '@ch-ui/tokens';
-
-export type PhysicalPalette = Omit<ResolvedHelicalArcSeries, 'extends' | 'physicalValueRelation'>;
-export type ColorSememes = SemanticLayer<string, string, HelicalArcValue>['sememes'];
-export type ColorAliases = AliasLayer<string>['aliases'];