@dxos/ui-theme 0.0.0

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: {
+    // 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

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

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

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

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

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

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

package/src/config/tokens/types.ts

@@ -0,0 +1,9 @@
+//
+// 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'];