@dxos/ui-theme 0.0.0

package/src/index.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type TailwindConfig, tailwindConfig } from './config';
+
+export { cardMinInlineSize, cardMaxInlineSize, hues, userDefaultTokenSet } from './config';
+export * from './styles';
+export * from './types';
+export * from './util';
+
+const tokens: TailwindConfig['theme'] = tailwindConfig({}).theme;
+
+export { tokens };
+
+/**
+ * Translation namespace for OS-level translations.
+ */
+export const osTranslations = 'dxos.org/i18n/os';

package/src/plugins/esbuild-plugin.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { cp, mkdir } from 'node:fs/promises';
+import { basename, join, relative, resolve } from 'node:path';
+
+import autoprefixer from 'autoprefixer';
+import type { Plugin } from 'esbuild';
+import stylePlugin from 'esbuild-style-plugin';
+import tailwindcss from 'tailwindcss';
+import type { ThemeConfig } from 'tailwindcss/types/config';
+
+import { tailwindConfig } from '../config';
+
+import { resolveKnownPeers } from './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/ui-theme/fonts');
+        try {
+          await mkdir(fontsDir);
+        } catch {}
+        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 {}
+          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,130 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+/* eslint-disable no-console */
+
+import { readFile, writeFile } from 'node:fs/promises';
+import { resolve } from 'node:path';
+
+import chTokens from '@ch-ui/tokens/postcss';
+import autoprefixer from 'autoprefixer';
+import postcss from 'postcss';
+import postcssImport from 'postcss-import';
+import tailwindcss from 'tailwindcss';
+import nesting from 'tailwindcss/nesting/index.js';
+import { type ThemeConfig } from 'tailwindcss/types/config';
+import { type Plugin, type UserConfig } from 'vite';
+
+import { tailwindConfig, tokenSet } from '../config';
+
+import { resolveKnownPeers } from './resolveContent';
+
+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(import.meta.dirname, '../theme.css'),
+    srcCssPath: resolve(import.meta.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);
+        }
+      }
+    },
+  };
+};
+
+ThemePlugin.foo = 'bar';

package/src/plugins/resolveContent.ts

@@ -0,0 +1,51 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { promisify } from 'node:util';
+
+import Glob from 'glob';
+
+const glob = promisify(Glob.glob);
+
+// TODO(burdon): Comment.
+const knownIndirectPeers = [
+  '@dxos/devtools',
+  '@dxos/react-*',
+  '@dxos/react-ui-*',
+  // 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',
+  '@dxos/shell',
+];
+
+const knownDirectPeers = ['@dxos/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 @dxos/plugin-*/node_modules
+  const indirectPeers = await Promise.all(
+    knownIndirectPeers.map((peer) => glob(`./node_modules/@dxos/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`);
+
+  return [...content, ...knownPeerContent];
+};

package/src/styles/components/README.md

@@ -0,0 +1,6 @@
+# react-ui-theme
+
+References: 
+- https://tailwindcss-radix.vercel.app
+- https://github.com/ecklf/tailwindcss-radix
+- https://www.radix-ui.com/primitives/docs/components

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

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/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,
+};

package/src/styles/components/avatar.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { descriptionText, getSize, getSizeHeight } from '../fragments';
+
+export type AvatarStyleProps = Partial<{
+  size: Size;
+  srOnly: boolean;
+  status: 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
+  animation: 'pulse' | 'none';
+  variant: 'circle' | 'square';
+  inGroup: boolean;
+}>;
+
+export const avatarRoot: ComponentFunction<AvatarStyleProps> = ({ size = 10, inGroup }, ...etc) =>
+  mx(
+    'relative inline-flex shrink-0',
+    getSize(size),
+    inGroup && (size === 'px' || size <= 3 ? '-mie-1' : '-mie-2'),
+    ...etc,
+  );
+
+export const avatarLabel: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) => mx(srOnly && 'sr-only', ...etc);
+
+export const avatarDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx(descriptionText, srOnly && 'sr-only', ...etc);
+
+export const avatarFrame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
+  mx('is-full bs-full bg-[--surface-bg]', variant === 'circle' ? 'rounded-full' : 'rounded', ...etc);
+
+export const avatarStatusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
+  mx(
+    'absolute block-end-0 inline-end-0',
+    getSize(size),
+    status === 'inactive'
+      ? 'text-amber-350 dark:text-amber-250'
+      : status === 'active'
+        ? 'text-emerald-350 dark:text-emerald-250'
+        : 'text-neutral-350 dark:text-neutral-250',
+    ...etc,
+  );
+
+export const avatarRing: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
+  mx(
+    'absolute inset-0 border-2',
+    variant === 'circle' ? 'rounded-full' : 'rounded',
+    status === 'current'
+      ? 'border-primary-400 dark:border-primary-500'
+      : status === 'active'
+        ? 'border-emerald-400 dark:border-emerald-400'
+        : status === 'error'
+          ? 'border-rose-400 dark:border-rose-500'
+          : status === 'warning'
+            ? 'border-amber-400 dark:border-amber-500'
+            : status === 'inactive'
+              ? 'border-separator'
+              : status === 'internal'
+                ? 'border-fuchsia-600'
+                : 'border-[color:var(--surface-bg)]',
+    animation === 'pulse' ? 'animate-halo-pulse' : '',
+    ...etc,
+  );
+
+export const avatarFallbackText: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('fill-white', ...etc);
+
+export const avatarGroup: ComponentFunction<AvatarStyleProps> = (_props, ...etc) =>
+  mx('inline-flex items-center', ...etc);
+
+export const avatarGroupLabel: ComponentFunction<AvatarStyleProps> = ({ size, srOnly }, ...etc) =>
+  mx(
+    srOnly
+      ? 'sr-only'
+      : 'rounded-full truncate text-sm leading-none plb-1 pli-2 relative z-[1] flex items-center justify-center',
+    size && getSizeHeight(size),
+    ...etc,
+  );
+
+export const avatarGroupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx(srOnly ? 'sr-only' : descriptionText, ...etc);
+
+export const avatarTheme: Theme<AvatarStyleProps> = {
+  root: avatarRoot,
+  label: avatarLabel,
+  description: avatarDescription,
+  statusIcon: avatarStatusIcon,
+  frame: avatarFrame,
+  ring: avatarRing,
+  fallbackText: avatarFallbackText,
+  group: avatarGroup,
+  groupLabel: avatarGroupLabel,
+  groupDescription: avatarGroupDescription,
+};

package/src/styles/components/breadcrumb.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+export type breadcrumbStyleProps = {};
+
+export const breadcrumbRoot: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
+  mx('shrink-0 flex items-center', ...etc);
+
+export const breadcrumbList: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+export const breadcrumbListItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+export const breadcrumbCurrent: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx(...etc);
+
+export const breadcrumbSeparator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) =>
+  mx('opacity-50', ...etc);
+
+export const breadcrumbTheme: Theme<breadcrumbStyleProps> = {
+  root: breadcrumbRoot,
+  list: breadcrumbList,
+  listItem: breadcrumbListItem,
+  current: breadcrumbCurrent,
+  separator: breadcrumbSeparator,
+};

package/src/styles/components/button.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { ghostHover } from '../fragments';
+
+export const primaryButtonColors =
+  'text-accentSurfaceText bg-accentSurface hover:bg-accentSurfaceHover aria-pressed:bg-primary-500 dark:aria-pressed:bg-primary-500 data-[state=open]:bg-primary-500 dark:data-[state=open]:bg-primary-500 aria-checked:bg-primary-500 dark:aria-checked:bg-primary-500 aria-checked:text-primary-100';
+
+export const staticDefaultButtonColors = 'bg-inputSurface';
+
+export const defaultButtonColors = mx(
+  staticDefaultButtonColors,
+  'data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface',
+);
+
+export const ghostButtonColors = mx(
+  ghostHover,
+  'hover:text-inherit data-[state=open]:bg-inputSurface aria-pressed:text-accentText aria-pressed:bg-baseSurface aria-checked:text-accentText aria-checked:bg-baseSurface',
+);
+
+export type ButtonStyleProps = Partial<{
+  inGroup?: boolean;
+  textWrap?: boolean;
+  density: Density;
+  elevation: Elevation;
+  disabled: boolean;
+  variant: 'default' | 'primary' | 'ghost' | 'outline';
+}>;
+
+export const buttonRoot: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('dx-button dx-focus-ring group max-is-full [&_span]:truncate', ...etc);
+};
+
+export const buttonGroup: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
+  return mx(
+    'inline-flex rounded-sm [&>:first-child]:rounded-is-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root: buttonRoot,
+  group: buttonGroup,
+};

package/src/styles/components/dialog.ts

@@ -0,0 +1,36 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { descriptionText } from '../fragments';
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+};
+
+export const dialogOverlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
+
+export const dialogContent: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout }, ...etc) =>
+  mx(
+    '@container dx-dialog__content dx-focus-ring modal-surface density-coarse',
+    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    ...etc,
+  );
+
+export const dialogTitle: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
+
+export const dialogDescription: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__description', descriptionText, srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay: dialogOverlay,
+  content: dialogContent,
+  title: dialogTitle,
+  description: dialogDescription,
+};

package/src/styles/components/icon-button.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+
+import { type ButtonStyleProps } from './button';
+
+export type IconButtonStyleProps = ButtonStyleProps & { iconOnly?: boolean };
+
+// TODO(burdon): Gap/font size should depend on density.
+export const iconButtonRoot: ComponentFunction<IconButtonStyleProps> = ({ iconOnly }, ...etc) => {
+  return mx('gap-2', iconOnly && 'p-iconButtonPadding min-bs-0', ...etc);
+};
+
+export const iconButtonTheme: Theme<IconButtonStyleProps> = {
+  root: iconButtonRoot,
+};

package/src/styles/components/icon.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+import { mx } from '../../util';
+import { getSize } from '../fragments';
+
+export type IconStyleProps = {
+  size?: Size;
+};
+
+export const iconRoot: ComponentFunction<IconStyleProps> = ({ size }, etc) =>
+  mx('shrink-0 bs-[1em] is-[1em] text-[var(--icons-color,currentColor)]', size && getSize(size), etc);
+
+export const iconTheme: Theme<IconStyleProps> = {
+  root: iconRoot,
+};

package/src/styles/components/index.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './anchored-overflow';
+export * from './avatar';
+export * from './breadcrumb';
+export * from './button';
+export * from './dialog';
+export * from './icon';
+export * from './icon-button';
+export * from './input';
+export * from './link';
+export * from './list';
+export * from './main';
+export * from './menu';
+export * from './message';
+export * from './popover';
+export * from './scroll-area';
+export * from './select';
+export * from './separator';
+export * from './status';
+export * from './tag';
+export * from './toast';
+export * from './toolbar';
+export * from './tooltip';
+export * from './treegrid';