@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/src/config/colors.ts

@@ -0,0 +1,293 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import {
+  curvePathFromPalette,
+  paletteShadesFromCurve,
+  hex_to_LCH as hexToLch,
+  Lab_to_hex as labToHex,
+} from '@ch-ui/colors';
+
+export type PaletteConfig = {
+  keyColor: string;
+  darkCp: number;
+  lightCp: number;
+  hueTorsion: number;
+};
+
+const shadeNumbers: number[] = /* [...Array(19)].map((_, i) => 50 + i * 50); */ [
+  50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950,
+];
+
+const broadShadeNumbers: number[] = [
+  12, 25, 37, 50, 75, 100, 125, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 825, 850, 875,
+  900, 925, 950, 975,
+];
+
+const dtor = Math.PI / 180;
+
+export type HuePalette =
+  | 'red'
+  | 'orange'
+  | 'amber'
+  | 'yellow'
+  | 'lime'
+  | 'green'
+  | 'emerald'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'blue'
+  | 'indigo'
+  | 'violet'
+  | 'purple'
+  | 'fuchsia'
+  | 'pink'
+  | 'rose';
+
+export type ConfigPalette = HuePalette | 'primary' | 'neutral';
+
+export const paletteConfigs: Record<ConfigPalette, PaletteConfig> = {
+  red: {
+    keyColor: '#ee003b',
+    darkCp: 1,
+    lightCp: 0.13,
+    hueTorsion: 5.5 * dtor,
+  },
+  orange: {
+    keyColor: '#fa6b32',
+    darkCp: 0.725,
+    lightCp: 1,
+    hueTorsion: 13 * dtor,
+  },
+  amber: {
+    keyColor: '#f08c00',
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 24 * dtor,
+  },
+  yellow: {
+    keyColor: '#ffd900',
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 32 * dtor,
+  },
+  lime: {
+    keyColor: '#99c400',
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: -3.5 * dtor,
+  },
+  green: {
+    keyColor: '#30a908',
+    darkCp: 0.35,
+    lightCp: 0.665,
+    hueTorsion: -10.5 * dtor,
+  },
+  emerald: {
+    keyColor: '#15e066',
+    darkCp: 1,
+    lightCp: 0.735,
+    hueTorsion: -7 * dtor,
+  },
+  teal: {
+    keyColor: '#00a270',
+    darkCp: 1,
+    lightCp: 0.755,
+    hueTorsion: -12 * dtor,
+  },
+  cyan: {
+    keyColor: '#048992',
+    darkCp: 1,
+    lightCp: 0.855,
+    hueTorsion: -15 * dtor,
+  },
+  sky: {
+    keyColor: '#007bc2',
+    darkCp: 1,
+    lightCp: 0.64,
+    hueTorsion: 0,
+  },
+  blue: {
+    keyColor: '#0058cb',
+    darkCp: 1,
+    lightCp: 0.495,
+    hueTorsion: -7 * dtor,
+  },
+  indigo: {
+    keyColor: '#1b45c5',
+    darkCp: 0.495,
+    lightCp: 0.55,
+    hueTorsion: 0,
+  },
+  violet: {
+    keyColor: '#080886',
+    darkCp: 0.195,
+    lightCp: 0.635,
+    hueTorsion: -5 * dtor,
+  },
+  purple: {
+    keyColor: '#2c0073',
+    darkCp: 0,
+    lightCp: 0.63,
+    hueTorsion: 0,
+  },
+  fuchsia: {
+    keyColor: '#6d0085',
+    darkCp: 1,
+    lightCp: 0.695,
+    hueTorsion: 0,
+  },
+  pink: {
+    keyColor: '#a5006d',
+    darkCp: 1,
+    lightCp: 0.775,
+    hueTorsion: 0,
+  },
+  rose: {
+    keyColor: '#d00054',
+    darkCp: 1,
+    lightCp: 1,
+    hueTorsion: 0,
+  },
+  neutral: {
+    keyColor: '#707076',
+    darkCp: 0.8,
+    lightCp: 0.88,
+    hueTorsion: 0,
+  },
+  primary: {
+    keyColor: '#1662d9',
+    darkCp: 0.86,
+    lightCp: 1,
+    hueTorsion: -30 * dtor,
+  },
+};
+
+export const physicalColors = Object.keys(paletteConfigs).reduce(
+  (acc: Record<string, Record<string, string>>, palette) => {
+    const isBroad = palette === 'neutral' || palette === 'primary';
+    const paletteConfig = paletteConfigs[palette as ConfigPalette];
+    const curve = curvePathFromPalette({
+      ...paletteConfig,
+      keyColor: hexToLch(paletteConfig.keyColor),
+    });
+    const defaultShades = paletteShadesFromCurve(curve, 21, [0, 100 * (22 / 21)], 1, 24).reverse();
+    const renderCssValue = (shadeNumber: number) => {
+      if (shadeNumber > 999) {
+        return '#000000';
+      } else if (shadeNumber < 1) {
+        return '#ffffff';
+      } else if (shadeNumber % 50 === 0) {
+        return labToHex(defaultShades[shadeNumber / 50]);
+      } else {
+        const k2 = (shadeNumber % 50) / 50;
+        const k1 = 1 - k2;
+        const [l1, a1, b1] = defaultShades[Math.floor(shadeNumber / 50)];
+        const [l2, a2, b2] = defaultShades[Math.ceil(shadeNumber / 50)];
+        return labToHex([l1 * k1 + l2 * k2, a1 * k1 + a2 * k2, b1 * k1 + b2 * k2]);
+      }
+    };
+    acc[palette] = (isBroad ? broadShadeNumbers : shadeNumbers).reduce((acc: Record<string, string>, shadeNumber) => {
+      acc[shadeNumber] = renderCssValue(shadeNumber);
+      return acc;
+    }, {});
+
+    return acc;
+  },
+  {},
+);
+
+export const semanticColors = {
+  scrim: {
+    light: `${physicalColors.neutral['75']}A6`,
+    dark: `${physicalColors.neutral['900']}A6`,
+  },
+  attention: {
+    light: '#ffffff',
+    dark: physicalColors.neutral['900'],
+  },
+  deck: {
+    light: physicalColors.neutral['75'],
+    dark: physicalColors.neutral['875'],
+  },
+  base: {
+    light: physicalColors.neutral['25'],
+    dark: physicalColors.neutral['850'],
+    fg: { light: '#000000', dark: '#ffffff' },
+  },
+  fgHover: {
+    light: physicalColors.neutral['900'],
+    dark: physicalColors.neutral['100'],
+  },
+  description: {
+    light: physicalColors.neutral['500'],
+    dark: physicalColors.neutral['400'],
+  },
+  subdued: {
+    light: physicalColors.neutral['700'],
+    dark: physicalColors.neutral['300'],
+  },
+  error: {
+    light: physicalColors.red['700'],
+    dark: physicalColors.red['300'],
+  },
+  baseGlass: {
+    light: `${physicalColors.neutral['12']}e0`,
+    dark: `${physicalColors.neutral['850']}e0`,
+  },
+  input: {
+    light: physicalColors.neutral['50'],
+    dark: physicalColors.neutral['825'],
+  },
+  modal: {
+    light: '#ffffff',
+    dark: `${physicalColors.neutral['750']}`,
+  },
+  modalSelected: {
+    light: physicalColors.neutral['50'],
+    dark: physicalColors.neutral['825'],
+  },
+  hover: {
+    light: physicalColors.neutral['37'],
+    dark: physicalColors.neutral['800'],
+  },
+  accent: {
+    light: physicalColors.primary['550'],
+    dark: physicalColors.primary['550'],
+    fg: { light: physicalColors.primary['550'], dark: physicalColors.primary['400'] },
+  },
+  accentHover: {
+    light: physicalColors.primary['600'],
+    dark: physicalColors.primary['500'],
+  },
+  accentFocusIndicator: {
+    light: physicalColors.primary['350'],
+    dark: physicalColors.primary['450'],
+  },
+  unAccent: {
+    light: physicalColors.neutral['500'],
+    dark: physicalColors.neutral['400'],
+  },
+  unAccentHover: {
+    light: physicalColors.neutral['400'],
+    dark: physicalColors.neutral['500'],
+  },
+  separator: {
+    light: physicalColors.neutral['50'],
+    dark: physicalColors.neutral['700'],
+  },
+  inverse: {
+    light: '#ffffff',
+    dark: '#ffffff',
+  },
+  transparent: {
+    light: 'transparent',
+    dark: 'transparent',
+  },
+  unavailable: {
+    light: physicalColors.neutral['100'],
+    dark: physicalColors.neutral['600'],
+  },
+};

package/src/config/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './colors';
+export * from './tailwind';

package/src/config/resolveContent.ts

@@ -0,0 +1,50 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { glob as globCb } from 'glob';
+import { promisify } from 'node:util';
+
+const glob = promisify(globCb);
+
+const knownIndirectPeers = [
+  '@dxos/react-*',
+  '@dxos/react-ui-*',
+  '@dxos/devtools',
+  '@dxos/shell',
+  // TODO(thure): glob v7 runs out of memory if we do a `**` search, and this is (hopefully) the only L3 content package; find a better solution.
+  '@dxos/react-ui-table/node_modules/@dxos/react-ui-searchlist',
+];
+
+const knownDirectPeers = ['@braneframe/plugin-*', ...knownIndirectPeers];
+
+const packageNamePattern = /.*node_modules\/(.+?)$/;
+const packageName = (path: string) => path.match(packageNamePattern)?.[1];
+
+const flatten = (acc: string[], group: string[]) => [...acc, ...group];
+const dedupe = (acc: Record<string, string>, path: string) => {
+  const name = packageName(path);
+  if (name && !acc[name]) {
+    acc[name] = path;
+  }
+  return acc;
+};
+
+export const resolveKnownPeers = async (content: string[], cwd: string): Promise<string[]> => {
+  const globOptions = { cwd, absolute: true };
+
+  const directPeers = await Promise.all(knownDirectPeers.map((peer) => glob(`./node_modules/${peer}`, globOptions)));
+
+  // NOTE(thure): With glob v7, JS runs out of memory if `**` is used, so this limits the search to @braneframe/plugin-*/node_modules
+  const indirectPeers = await Promise.all(
+    knownIndirectPeers.map((peer) => glob(`./node_modules/@braneframe/plugin-*/node_modules/${peer}`, globOptions)),
+  );
+
+  const knownPeerContent = Object.values(
+    indirectPeers.reduce(flatten, []).reduce(dedupe, directPeers.reduce(flatten, []).reduce(dedupe, {})),
+  ).map((value) => `${value}/dist/lib/**/*.mjs`);
+
+  // console.log('[found known peer content paths]', knownPeerContent);
+
+  return [...content, ...knownPeerContent];
+};

package/src/config/tailwind.ts

@@ -0,0 +1,200 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import tailwindcssForms from '@tailwindcss/forms';
+import merge from 'lodash.merge';
+import tailwindScrollbar from 'tailwind-scrollbar';
+import tailwindColors from 'tailwindcss/colors.js';
+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 { physicalColors, semanticColors } from './colors';
+import { semanticColors as semanticColorsPlugin } from '../util/semanticColors';
+
+export type TailwindConfig = Config;
+export type TailwindThemeConfig = ThemeConfig;
+
+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(
+      {
+        screens: {
+          'pointer-fine': { raw: '(pointer: fine)' },
+          'hover-hover': { raw: '(hover: hover)' },
+        },
+        colors: {
+          ...physicalColors,
+          slate: tailwindColors.slate,
+          gray: tailwindColors.gray,
+          zinc: tailwindColors.zinc,
+          stone: tailwindColors.stone,
+          success: physicalColors.emerald,
+          warning: physicalColors.amber,
+          error: physicalColors.rose,
+          info: physicalColors.cyan,
+          transparent: 'transparent',
+          current: 'currentColor',
+          white: '#ffffff',
+          black: '#000000',
+        },
+        semanticColors,
+        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' }],
+        },
+        outlineWidth: {
+          3: '3px',
+        },
+        boxShadow: {
+          slider: '0 0 0 5px rgba(0, 0, 0, 0.3)',
+        },
+        transitionProperty: {
+          'max-height': 'max-height',
+        },
+        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)' },
+          },
+
+          // 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%',
+            },
+          },
+        },
+        animation: {
+          // 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',
+
+          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',
+        },
+      },
+      ...extensions,
+    ),
+  },
+  plugins: [
+    semanticColorsPlugin,
+    tailwindcssLogical,
+    tailwindcssForms,
+    tailwindcssRadix(),
+    // https://adoxography.github.io/tailwind-scrollbar/utilities
+    tailwindScrollbar,
+  ],
+  ...(env === 'development' && { mode: 'jit' }),
+  content,
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
+});

package/src/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 { tailwindConfig } from './config';
+import { resolveKnownPeers } from './config/resolveContent';
+
+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/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './config';
+export * from './styles';
+export * from './util';

package/src/plugin.ts

@@ -0,0 +1,63 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import autoprefixer from 'autoprefixer';
+import { resolve } from 'node:path';
+import tailwindcss from 'tailwindcss';
+import nesting from 'tailwindcss/nesting';
+import type { ThemeConfig } from 'tailwindcss/types/config';
+import { type Plugin } from 'vite';
+
+import { tailwindConfig } from './config';
+import { resolveKnownPeers } from './config/resolveContent';
+
+export interface VitePluginTailwindOptions {
+  jit?: boolean;
+  cssPath?: string;
+  virtualFileId?: string;
+  content?: string[];
+  root?: string;
+}
+
+// TODO(zhenyasav): Make it easy to override the tailwind config.
+// TODO(zhenyasav): Make it easy to add postcss plugins?
+export const ThemePlugin = (
+  options: Pick<VitePluginTailwindOptions, 'content' | 'root'> & { extensions?: Partial<ThemeConfig>[] },
+) => {
+  const config: VitePluginTailwindOptions & Pick<typeof options, 'extensions'> = {
+    jit: true,
+    cssPath: resolve(__dirname, './theme.css'),
+    virtualFileId: '@dxosTheme', // TODO(burdon): Rename '@dxos-theme'?
+    ...options,
+  };
+
+  return {
+    name: 'vite-plugin-dxos-ui-theme',
+    config: async ({ root }, env) => {
+      const content = root ? await resolveKnownPeers(config.content ?? [], root) : config.content;
+      return {
+        css: {
+          postcss: {
+            plugins: [
+              nesting,
+              tailwindcss(
+                tailwindConfig({
+                  env: env.mode,
+                  content,
+                  extensions: config.extensions,
+                }),
+              ),
+              autoprefixer,
+            ],
+          },
+        },
+      };
+    },
+    resolveId: (id) => {
+      if (id === config.virtualFileId) {
+        return config.cssPath;
+      }
+    },
+  } as Plugin;
+};

package/src/styles/components/anchored-overflow.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import { mx } from '../../util';
+
+export type AnchoredOverflowStyleProps = {};
+
+export const anchoredOverflowRoot: ComponentFunction<AnchoredOverflowStyleProps> = (_props, ...etc) =>
+  mx('overflow-anchored overflow-auto', ...etc);
+
+export const anchoredOverflowAnchor: ComponentFunction<AnchoredOverflowStyleProps> = (_props, ...etc) =>
+  mx('overflow-anchor is-px bs-px', ...etc);
+
+export const anchoredOverflowTheme: Theme<AnchoredOverflowStyleProps> = {
+  root: anchoredOverflowRoot,
+  anchor: anchoredOverflowAnchor,
+};