@blotch/dolan 22.2.2 → 22.2.4

package/dist/ui/components/icon/icon-theme.ts

@@ -0,0 +1,227 @@
+import {
+  computed,
+  inject,
+  InjectionToken,
+  type Provider,
+  type Signal,
+} from '@angular/core';
+import { LynxTheme } from '@blotch/angular-lynx';
+
+/**
+ * Colors for the components that draw with Lynx's `<svg>`: `<ui-icon>`,
+ * `<ui-spinner>`, and the parts built on them (pagination's chevrons, a loading
+ * button's spinner).
+ *
+ * ## Why colors live in TypeScript as well as CSS
+ * `<svg>` parses its markup by itself. It never sees the page's CSS: on the web
+ * preview the markup becomes an `<img>`, and the native elements in Lynx 4.1
+ * read only a literal `current-color`. So `var(--foreground)` and text color
+ * classes can't reach a stroke, and Lynx has no computed-style API to read a
+ * variable's value from JS. Instead these components take `var(--token)` colors
+ * and swap each for its value in the active table below before they write the
+ * markup. This mirrors how `<ui-chart>` colors its marks (`chart-theme.ts`).
+ *
+ * The tables mirror `default.css` and `dark.css` (a test in the theme folder
+ * keeps them in step). If you change a color there, change it here too, or pass
+ * your own with {@link provideIconTheme}.
+ */
+
+/** Theme token name (without `--`) to a complete CSS color. */
+export type IconColorTokens = Readonly<Record<string, string>>;
+
+export type IconColorScheme = 'light' | 'dark';
+
+/**
+ * Which table the colors come from: a fixed scheme, `'system'` to follow the
+ * device appearance (`LynxTheme`), or a function reading the app's own theme
+ * state.
+ *
+ * It has to match how the app switches its CSS theme, since the text next to an
+ * icon reads the CSS variables. The ui theme's dark mode is opt-in (the app
+ * toggles the `.dark` class), so the default is `'light'`: an icon in an app
+ * without dark mode stays visible when the device is dark.
+ */
+export type IconColorSchemeOption =
+  | IconColorScheme
+  | 'system'
+  | (() => IconColorScheme);
+
+export type UiIconTheme = {
+  /** Token values for light mode; mirrors `default.css`. */
+  readonly light: IconColorTokens;
+  /** Token values for dark mode; mirrors `dark.css`. */
+  readonly dark: IconColorTokens;
+  /** See {@link IconColorSchemeOption}; `'light'` when unset. */
+  readonly colorScheme?: IconColorSchemeOption;
+};
+
+export const ICON_LIGHT_COLORS: IconColorTokens = {
+  background: 'rgba(255, 255, 255, 1)',
+  foreground: 'rgba(9, 9, 11, 1)',
+  card: 'rgba(255, 255, 255, 1)',
+  'card-foreground': 'rgba(9, 9, 11, 1)',
+  primary: 'rgba(24, 24, 27, 1)',
+  'primary-foreground': 'rgba(250, 250, 250, 1)',
+  secondary: 'rgba(244, 244, 245, 1)',
+  'secondary-foreground': 'rgba(24, 24, 27, 1)',
+  muted: 'rgba(244, 244, 245, 1)',
+  'muted-foreground': 'rgba(113, 113, 122, 1)',
+  accent: 'rgba(244, 244, 245, 1)',
+  'accent-foreground': 'rgba(24, 24, 27, 1)',
+  destructive: 'rgba(239, 68, 68, 1)',
+  'destructive-foreground': 'rgba(250, 250, 250, 1)',
+  'destructive-subtle': 'rgba(239, 68, 68, 0.1)',
+  border: 'rgba(228, 228, 231, 1)',
+  input: 'rgba(228, 228, 231, 1)',
+  ring: 'rgba(24, 24, 27, 1)',
+  'ring-subtle': 'rgba(24, 24, 27, 0.4)',
+  'chart-1': 'rgba(231, 110, 80, 1)',
+  'chart-2': 'rgba(42, 157, 144, 1)',
+  'chart-3': 'rgba(39, 71, 84, 1)',
+  'chart-4': 'rgba(232, 196, 104, 1)',
+  'chart-5': 'rgba(244, 164, 98, 1)',
+  'glass-tint': 'rgba(24, 24, 27, 1)',
+  'glass-tint-foreground': 'rgba(250, 250, 250, 1)',
+  'glass-foreground': 'rgba(9, 9, 11, 1)',
+  'glass-muted-foreground': 'rgba(63, 63, 70, 1)',
+  'glass-clear-foreground': 'rgba(255, 255, 255, 1)',
+  'glass-dim': 'rgba(0, 0, 0, 0.35)',
+};
+
+export const ICON_DARK_COLORS: IconColorTokens = {
+  background: 'rgba(9, 9, 11, 1)',
+  foreground: 'rgba(250, 250, 250, 1)',
+  card: 'rgba(9, 9, 11, 1)',
+  'card-foreground': 'rgba(250, 250, 250, 1)',
+  primary: 'rgba(250, 250, 250, 1)',
+  'primary-foreground': 'rgba(24, 24, 27, 1)',
+  secondary: 'rgba(39, 39, 42, 1)',
+  'secondary-foreground': 'rgba(250, 250, 250, 1)',
+  muted: 'rgba(39, 39, 42, 1)',
+  'muted-foreground': 'rgba(161, 161, 170, 1)',
+  accent: 'rgba(39, 39, 42, 1)',
+  'accent-foreground': 'rgba(250, 250, 250, 1)',
+  destructive: 'rgba(127, 29, 29, 1)',
+  'destructive-foreground': 'rgba(250, 250, 250, 1)',
+  'destructive-subtle': 'rgba(127, 29, 29, 0.1)',
+  border: 'rgba(39, 39, 42, 1)',
+  input: 'rgba(39, 39, 42, 1)',
+  ring: 'rgba(212, 212, 216, 1)',
+  'ring-subtle': 'rgba(212, 212, 216, 0.4)',
+  'chart-1': 'rgba(38, 98, 217, 1)',
+  'chart-2': 'rgba(46, 184, 138, 1)',
+  'chart-3': 'rgba(232, 140, 48, 1)',
+  'chart-4': 'rgba(175, 87, 219, 1)',
+  'chart-5': 'rgba(226, 54, 112, 1)',
+  'glass-tint': 'rgba(250, 250, 250, 1)',
+  'glass-tint-foreground': 'rgba(24, 24, 27, 1)',
+  'glass-foreground': 'rgba(250, 250, 250, 1)',
+  'glass-muted-foreground': 'rgba(212, 212, 216, 1)',
+  'glass-clear-foreground': 'rgba(255, 255, 255, 1)',
+  'glass-dim': 'rgba(0, 0, 0, 0.35)',
+};
+
+export const UI_ICON_THEME = new InjectionToken<UiIconTheme>('UI_ICON_THEME', {
+  providedIn: 'root',
+  factory: () => ({ light: ICON_LIGHT_COLORS, dark: ICON_DARK_COLORS }),
+});
+
+/**
+ * Overrides icon colors, merged over the defaults: pass only the tokens you
+ * changed in your CSS, or just a color scheme.
+ *
+ * ```ts
+ * // An app that switches .dark with the device appearance:
+ * providers: [provideIconTheme({ colorScheme: 'system' })]
+ * ```
+ */
+export const provideIconTheme = (theme: {
+  light?: IconColorTokens;
+  dark?: IconColorTokens;
+  colorScheme?: IconColorSchemeOption;
+}): Provider => ({
+  provide: UI_ICON_THEME,
+  useValue: {
+    light: { ...ICON_LIGHT_COLORS, ...theme.light },
+    dark: { ...ICON_DARK_COLORS, ...theme.dark },
+    colorScheme: theme.colorScheme,
+  } satisfies UiIconTheme,
+});
+
+/**
+ * The color icons inside an element use when they're given none. A container
+ * whose variant recolors its content (a destructive nav drawer item) provides
+ * it, and every `<ui-icon>` projected into it picks it up through DI, the way
+ * text would inherit `color` on the web.
+ */
+export const UI_ICON_COLOR = new InjectionToken<Signal<string | undefined>>(
+  'UI_ICON_COLOR',
+);
+
+/** What an icon draws with when nothing sets its color. */
+export const DEFAULT_ICON_COLOR = 'var(--foreground)';
+
+/**
+ * Turns a color into one an SVG parser can draw: `var(--token)` (with or
+ * without a fallback) becomes the token's value. Anything else (`#2563eb`,
+ * `rgba(…)`) is already concrete and passes through.
+ */
+export const resolveIconColor = (
+  color: string,
+  tokens: IconColorTokens,
+): string => {
+  const value = color.trim();
+  if (!value.startsWith('var(') || !value.endsWith(')')) return value;
+
+  const inner = value.slice(4, -1);
+  // A custom property name can't contain a comma, so the first comma always
+  // separates the name from the fallback.
+  const comma = inner.indexOf(',');
+  const name = (comma < 0 ? inner : inner.slice(0, comma)).trim();
+  const token = tokens[name.replace(/^--/, '')];
+  if (token !== undefined) return token;
+  // An unknown token falls back the way CSS does: to the var()'s fallback when
+  // it has one, and otherwise to the foreground so the icon stays visible.
+  return comma < 0
+    ? (tokens['foreground'] ?? value)
+    : resolveIconColor(inner.slice(comma + 1), tokens);
+};
+
+/**
+ * The color scheme the app's theme is in, as {@link provideIconTheme} sets it
+ * (`'light'` unless it says otherwise). For what has to match the app's CSS
+ * theme but can't read it: icons pick their color table with it, and glass
+ * picks a light or dark material.
+ */
+export const injectColorScheme = (): Signal<IconColorScheme> => {
+  const option = inject(UI_ICON_THEME).colorScheme ?? 'light';
+  const appearance = inject(LynxTheme);
+  return computed(() =>
+    option === 'system'
+      ? appearance.isDarkMode()
+        ? 'dark'
+        : 'light'
+      : typeof option === 'function'
+        ? option()
+        : option,
+  );
+};
+
+/**
+ * For an SVG component's constructor: a function that resolves its `color`
+ * input (or, without one, the surrounding {@link UI_ICON_COLOR}, then the
+ * foreground) against the active color table. It reads signals, so a
+ * `computed()` calling it follows scheme and theme changes.
+ */
+export const injectIconColor = (): ((color: string | undefined) => string) => {
+  const theme = inject(UI_ICON_THEME);
+  const scheme = injectColorScheme();
+  const inherited = inject(UI_ICON_COLOR, { optional: true });
+
+  const tokens = computed(() =>
+    scheme() === 'dark' ? theme.dark : theme.light,
+  );
+
+  return (color) =>
+    resolveIconColor(color ?? inherited?.() ?? DEFAULT_ICON_COLOR, tokens());
+};

package/dist/ui/components/icon/icon.test.ts

@@ -1,47 +1,107 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { render, waitForUpdate } from '@blotch/angular-lynx-testing-library';
-import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 import { describe, expect, it } from 'vitest';
-import { setInputSignal } from '../../../test-utils/set-input-signal';
 import { UiIcon } from './icon';
+import {
+  ICON_DARK_COLORS,
+  ICON_LIGHT_COLORS,
+  UI_ICON_COLOR,
+  provideIconTheme,
+} from './icon-theme';
 import { ICONS, type IconName } from './icons';
 
 @Component({
-  standalone: true,
-  imports: [UiIcon, LYNX_ELEMENTS],
-  template: `<ui-icon [name]="name" [size]="size" [color]="color" />`,
+  imports: [UiIcon],
+  template: `
+    <ui-icon
+      [name]="name()"
+      [size]="size()"
+      [color]="color()"
+      [class]="className()"
+    />
+  `,
 })
 class IconHost {
-  name: IconName = 'check';
-  size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
-  color?: string;
+  readonly name = signal<IconName>('check');
+  readonly size = signal<'xs' | 'sm' | 'md' | 'lg'>('md');
+  readonly color = signal<string | undefined>(undefined);
+  readonly className = signal('');
 }
 
+const renderIcon = async (providers: Parameters<typeof render>[1] = {}) => {
+  const result = await render(IconHost, providers);
+  return {
+    ...result,
+    host: result.componentRef.instance as IconHost,
+    svg: () => result.container.querySelector('svg')!,
+  };
+};
+
 describe('UiIcon', () => {
-  it('renders the requested icon at default size', async () => {
-    const { container } = await render(IconHost);
-    expect(container).toBeTruthy();
+  it('draws the named icon at the default size', async () => {
+    const { svg } = await renderIcon();
+    expect(svg().getAttribute('style')).toContain('24px');
+    expect(svg().getAttribute('content')).toContain('<svg');
+  });
+
+  it('draws another icon when the name changes', async () => {
+    const { host, svg } = await renderIcon();
+    const check = svg().getAttribute('content');
+    host.name.set('x');
+    await waitForUpdate();
+    expect(svg().getAttribute('content')).not.toBe(check);
   });
 
   it('applies the size input to the width/height style', async () => {
-    // JIT template bindings are inert against `input()` — drive the signals
-    // directly so sizeStyle and svgContent both re-run.
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    setInputSignal((componentRef.instance as UiIcon).size, 'xs');
+    const { host, svg } = await renderIcon();
+    host.size.set('xs');
     await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('style')).toContain('16px');
+    expect(svg().getAttribute('style')).toContain('16px');
   });
 
   it('substitutes currentColor with the color input value', async () => {
-    const { componentRef, container } = await render(UiIcon);
-    setInputSignal((componentRef.instance as UiIcon).name, 'check' as IconName);
-    setInputSignal((componentRef.instance as UiIcon).color, 'rgb(255, 0, 0)');
+    // Lynx's SVG parser reads neither `currentColor` nor CSS variables.
+    const { host, svg } = await renderIcon();
+    host.color.set('rgb(255, 0, 0)');
+    await waitForUpdate();
+    expect(svg().getAttribute('content')).toContain('rgb(255, 0, 0)');
+    expect(svg().getAttribute('content')).not.toContain('currentColor');
+  });
+
+  it("draws in the light theme's foreground when no color is set", async () => {
+    const { svg } = await renderIcon();
+    const content = svg().getAttribute('content');
+    expect(content).toContain(ICON_LIGHT_COLORS['foreground']);
+    expect(content).not.toContain('currentColor');
+  });
+
+  it('resolves a theme token against the active color scheme', async () => {
+    const { host, svg } = await renderIcon({
+      providers: [provideIconTheme({ colorScheme: 'dark' })],
+    });
+    host.color.set('var(--primary)');
+    await waitForUpdate();
+    expect(svg().getAttribute('content')).toContain(
+      ICON_DARK_COLORS['primary'],
+    );
+  });
+
+  it("takes its container's color when it sets none", async () => {
+    const { svg } = await renderIcon({
+      providers: [
+        { provide: UI_ICON_COLOR, useValue: signal('var(--destructive)') },
+      ],
+    });
+    expect(svg().getAttribute('content')).toContain(
+      ICON_LIGHT_COLORS['destructive'],
+    );
+  });
+
+  it('applies the class input to the svg', async () => {
+    const { host, svg } = await renderIcon();
+    host.className.set('mr-2');
     await waitForUpdate();
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('content')).toContain('rgb(255, 0, 0)');
-    expect(svg?.getAttribute('content')).not.toContain('currentColor');
+    expect(svg().getAttribute('class')).toBe('mr-2');
   });
 });
 

package/dist/ui/components/icon/icon.ts

@@ -1,6 +1,8 @@
 import { Component, ViewEncapsulation, input } from '@angular/core';
 import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
 
+import { cn } from '../../utils/cn';
+import { injectIconColor } from './icon-theme';
 import { type IconName, ICONS } from './icons';
 
 const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
@@ -16,39 +18,54 @@ const SIZE_MAP = { xs: 16, sm: 20, md: 24, lg: 32 } as const;
   imports: [LYNX_ELEMENTS],
   encapsulation: ViewEncapsulation.None,
   template: `
-    <svg [attr.content]="svgContent()" [attr.style]="sizeStyle()" />
+    <svg
+      [attr.content]="svgContent()"
+      [attr.style]="sizeStyle()"
+      [class]="svgClass()"
+    />
   `,
 })
 export class UiIcon {
   readonly name = input.required<IconName>();
   readonly size = input<'xs' | 'sm' | 'md' | 'lg'>('md');
+  /**
+   * A literal color or a theme token (`var(--primary)`). Without one, the icon
+   * takes the color its container sets (see `UI_ICON_COLOR`), then the theme's
+   * foreground.
+   */
   readonly color = input<string | undefined>(undefined);
+  readonly userClass = input<string>('', { alias: 'class' });
+
+  readonly #resolveColor = injectIconColor();
 
   protected svgContent(): string {
-    let svg = ICONS[this.name()];
-    const c = this.color();
-    if (c) {
-      // Lynx SVG elements don't propagate the CSS `color` property into SVG
-      // stroke attributes, so we substitute the literal `currentColor` in the
-      // markup string rather than relying on `currentColor` CSS propagation.
-      //
-      // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
-      // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
-      // because it's a runtime method (not syntax) the build's down-leveling does
-      // not polyfill it, so it simply doesn't exist there. Calling it throws
-      // "main-thread.js exception: not a function" from inside Angular change
-      // detection, which aborts the whole tick before Lynx flushes the element
-      // tree — so NO icon paints (not just a colored one), and the error count
-      // climbs on every render/interaction as each tick re-runs and re-throws.
-      // split/join is ES2019-safe and is preferred over `replace(/.../g)` here
-      // because the search term is a plain literal and needs no regex escaping.
-      svg = svg.split('currentColor').join(c);
-    }
-    return svg;
+    // Lynx SVG elements don't propagate the CSS `color` property into SVG
+    // stroke attributes, so we substitute the literal `currentColor` in the
+    // markup string rather than relying on `currentColor` CSS propagation.
+    // The color is resolved first: the SVG parser can't read `var(--x)` either
+    // (see icon-theme.ts).
+    //
+    // Uses split().join() instead of String.prototype.replaceAll(). replaceAll
+    // is ES2021, but Lynx's main thread runs on PrimJS at an ES2019 target;
+    // because it's a runtime method (not syntax) the build's down-leveling does
+    // not polyfill it, so it simply doesn't exist there. Calling it throws
+    // "main-thread.js exception: not a function" from inside Angular change
+    // detection, which aborts the whole tick before Lynx flushes the element
+    // tree — so NO icon paints (not just a colored one), and the error count
+    // climbs on every render/interaction as each tick re-runs and re-throws.
+    // split/join is ES2019-safe and is preferred over `replace(/.../g)` here
+    // because the search term is a plain literal and needs no regex escaping.
+    return ICONS[this.name()]
+      .split('currentColor')
+      .join(this.#resolveColor(this.color()));
   }
 
   protected sizeStyle(): string {
     const px = SIZE_MAP[this.size()];
     return `width: ${px}px; height: ${px}px;`;
   }
+
+  protected svgClass(): string {
+    return cn(this.userClass());
+  }
 }