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

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 def (in common with sheet).
+  cmComment: {
+    light: ['neutral', 950],
+    dark: ['neutral', 50],
+  },
+  cmCommentSurface: {
+    light: ['green', 200],
+    dark: ['green', 600],
+  },
+} 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,60 @@
+//
+// 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'] },
+} satisfies ColorAliases;

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

@@ -0,0 +1,255 @@
+//
+// 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(1, 0.5),
+  inputSurfaceGroup: contrastCadence(1, 1),
+  inputSurfaceModal: contrastCadence(1, 1.5),
+
+  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],
+  },
+
+  // 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', 500],
+    dark: ['neutral', 400],
+  },
+  subdued: {
+    light: ['neutral', 700],
+    dark: ['neutral', 300],
+  },
+  accentText: {
+    light: ['primary', 550],
+    dark: ['primary', 400],
+  },
+  accentTextHover: {
+    light: ['primary', 500],
+    dark: ['primary', 350],
+  },
+  neutralFocusIndicator: {
+    light: ['neutral', 300],
+    dark: ['neutral', 450],
+  },
+  accentFocusIndicator: {
+    light: ['primary', 300],
+    dark: ['primary', 450],
+  },
+  accentSurfaceText: {
+    light: ['neutral', 0],
+    dark: ['neutral', 0],
+  },
+} satisfies ColorSememes;
+
+type SememeName = keyof typeof systemSememes;
+
+/**
+ * Alias map.
+ */
+const aliasDefs: Record<string, Record<string, SememeName>> = {
+  // The background color appearing in overscroll and between planks when Deck is enabled.
+  deckSurface: { 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' },
+  separator: { root: 'separatorBase', group: 'separatorGroup', modal: 'separatorModal' },
+
+  // Selected items, current items, other surfaces needing special contrast against baseSurface.
+  activeSurface: { root: 'inputSurface' as any /* TODO(thure): strongly type secondary aliases. */ },
+
+  // Main sidebar panel.
+  sidebarSurface: { root: 'groupSurface' },
+
+  // Plank header.
+  headerSurface: { root: 'groupSurface' },
+
+  // Forms, cards, etc.
+  cardSurface: { root: 'groupSurface' },
+
+  // Toolbars, table/sheet headers, etc.
+  toolbarSurface: { root: 'groupSurface' },
+
+  // TODO: 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.
+  currentRelated: { root: 'accentSurfaceRelated' },
+};
+
+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/types.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import type { AliasLayer, ResolvedHelicalArcSeries, HelicalArcValue, 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'];

package/src/index.ts

@@ -0,0 +1,15 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { tailwindConfig, type TailwindConfig } from './config';
+
+const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+
+export * from './styles';
+export * from './types';
+export * from './util';
+
+export { userDefaultTokenSet, hues } from './config/tokens';
+
+export { tokens };

package/src/plugins/esbuild-plugin.ts

@@ -0,0 +1,60 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import autoprefixer from 'autoprefixer';
+import type { Plugin } from 'esbuild';
+import stylePlugin from 'esbuild-style-plugin';
+import { mkdir, cp } from 'node:fs/promises';
+import { resolve, relative, join, basename } from 'node:path';
+import tailwindcss from 'tailwindcss';
+import type { ThemeConfig } from 'tailwindcss/types/config';
+
+import { resolveKnownPeers } from './resolveContent';
+import { tailwindConfig } from '../config';
+
+export const ThemePlugins = async (options: {
+  content: string[];
+  root?: string;
+  outdir: string;
+  extensions?: Partial<ThemeConfig>[];
+}): Promise<Plugin[]> => {
+  const resolvedContent = options.root ? await resolveKnownPeers(options.content, options.root) : options.content;
+  return [
+    // TODO(thure): This really shouldn’t be this way, but after hours of searching for a reasonable way to do this I came up empty. The prior art I found was mainly this thread, though it’s only tangentially related: https://github.com/evanw/esbuild/issues/800#issuecomment-786151076
+    {
+      name: 'esbuild-plugin-dxos-ui-theme-resolvers',
+      setup: async (build) => {
+        const fontsDir = join(options.outdir, 'node_modules/@dxos/react-ui-theme/fonts');
+        try {
+          await mkdir(fontsDir);
+        } catch (_err) {}
+        build.onResolve({ filter: /\.woff2$/ }, async (args) => {
+          const depPath = resolve(args.resolveDir, args.path);
+          const destPath = join(fontsDir, basename(args.path));
+          try {
+            await cp(depPath, destPath);
+          } catch (_err) {}
+          return { path: `./${relative(options.outdir, join('fonts', basename(args.path)))}`, external: true };
+        });
+      },
+    },
+    // TODO(thure): theme.css must be part of entryPoints in order to be processed with `stylePlugin`, but this should not be necessary. ESBuild would not load theme.css using stylePlugin if referenced within index.ts(x) as with the Vite plugin.
+    // TODO(thure): Note also that because it is an entryPoint, the developer has to reference the built theme.css from `index.html`, which is inflexible and possibly inconvenient.
+    // TODO(zhenyasav): autoprefixer version misalignment with esbuild-style-plugin requires the `as any`
+    stylePlugin({
+      postcss: {
+        plugins: [
+          tailwindcss(
+            tailwindConfig({
+              env: process.env.NODE_ENV,
+              content: resolvedContent,
+              extensions: options.extensions,
+            }),
+          ),
+          autoprefixer as any,
+        ],
+      },
+    }),
+  ];
+};

package/src/plugins/plugin.ts

@@ -0,0 +1,127 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/* eslint-disable no-console */
+
+import chTokens from '@ch-ui/tokens';
+import autoprefixer from 'autoprefixer';
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+import postcss from 'postcss';
+import postcssImport from 'postcss-import';
+import tailwindcss from 'tailwindcss';
+import nesting from 'tailwindcss/nesting';
+import { type ThemeConfig } from 'tailwindcss/types/config';
+import { type UserConfig, type Plugin } from 'vite';
+
+import { resolveKnownPeers } from './resolveContent';
+import { tailwindConfig, tokenSet } from '../config';
+
+export type ThemePluginOptions = {
+  jit?: boolean;
+  cssPath?: string;
+  srcCssPath?: string;
+  virtualFileId?: string;
+  content?: string[];
+  root?: string;
+  verbose?: boolean;
+  extensions?: Partial<ThemeConfig>[];
+};
+
+let environment!: string;
+
+/**
+ * Configures PostCSS pipeline for theme.css processing.
+ * @param environment - The current environment (development/production).
+ * @param config - Theme plugin configuration options.
+ * @returns Array of PostCSS plugins.
+ */
+const createPostCSSPipeline = (environment: string, config: ThemePluginOptions): postcss.Transformer[] => [
+  // Handles @import statements in CSS.
+  postcssImport(),
+  // Processes CSS nesting syntax.
+  nesting,
+  // Processes custom design tokens.
+  chTokens({ config: () => tokenSet }),
+  // Processes Tailwind directives and utilities.
+  tailwindcss(
+    tailwindConfig({
+      env: environment,
+      content: config.content,
+      extensions: config.extensions,
+    }),
+  ),
+  // Adds vendor prefixes.
+  autoprefixer as any,
+];
+
+/**
+ * Vite plugin to configure theme.
+ */
+export const ThemePlugin = (options: ThemePluginOptions): Plugin => {
+  const config: ThemePluginOptions = {
+    jit: true,
+    cssPath: resolve(__dirname, '../theme.css'),
+    srcCssPath: resolve(__dirname, '../../../../src/theme.css'),
+    virtualFileId: '@dxos-theme',
+    ...options,
+  };
+
+  if (process.env.DEBUG) {
+    console.log('ThemePlugin config:\n', JSON.stringify(config, null, 2));
+  }
+
+  return {
+    name: 'vite-plugin-dxos-ui-theme',
+    config: async ({ root }, env): Promise<UserConfig> => {
+      environment = env.mode;
+      const content = root ? await resolveKnownPeers(config.content ?? [], root) : config.content;
+      if (options.verbose) {
+        console.log('content', content);
+      }
+
+      return {
+        css: {
+          postcss: {
+            plugins: createPostCSSPipeline(environment, config),
+          },
+        },
+      };
+    },
+    resolveId: (id) => {
+      if (id === config.virtualFileId) {
+        return config.cssPath;
+      }
+    },
+    handleHotUpdate: async ({ file, server }) => {
+      // NOTE(ZaymonFC): Changes to *any* CSS file triggers this step. We might want to refine this.
+      //   Ignore the output file to prevent infinite loops.
+      if (file.endsWith('.css') && file !== config.cssPath) {
+        try {
+          // Get reference to the theme virtual module.
+          const module = server.moduleGraph.getModuleById(config.cssPath!);
+
+          if (module) {
+            // Read the source theme file that imports all other CSS files.
+            const css = await readFile(config.srcCssPath!, 'utf8');
+            const processor = postcss(createPostCSSPipeline(environment, config));
+            console.log('[theme-plugin] Reprocessing CSS with PostCSS.');
+            const result = await processor.process(css, {
+              from: config.srcCssPath,
+              to: config.cssPath,
+            });
+
+            if (result.css) {
+              await writeFile(config.cssPath!, result.css);
+              // Return the module to trigger HMR update.
+              return [];
+            }
+          }
+        } catch (err) {
+          console.error('[theme-plugin] Error:', err);
+        }
+      }
+    },
+  };
+};