@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/src/theme/index.ts

@@ -49,10 +49,13 @@ export type {
 
 // Ordered environment-conditioned theme adaptations
 export {
+  DEFAULT_COMPACT_DEFINITION,
   DEFAULT_WIDTH_BREAKPOINTS,
   WIDTH_BREAKPOINT_NAMES,
+  compactDefinition,
 } from './themeAdaptations';
 export type {
+  CompactDefinition,
   WidthBreakpointName,
   WidthBreakpoints,
   ThemeAdaptations,

package/src/theme/onMediaTokens.test.ts

@@ -146,6 +146,7 @@ describe('generateOnMediaCSS', () => {
     expect(css).toContain('[data-astryx-media="dark"]');
     expect(css).toContain('color-scheme: dark');
     expect(css).toContain('var(--color-on-dark)');
+    expect(css).not.toContain('--color-text-info: var(--color-text-blue);');
   });
 
   it('emits light media rules', () => {
@@ -155,6 +156,191 @@ describe('generateOnMediaCSS', () => {
     expect(css).toContain('color-scheme: light');
   });
 
+  it('keeps concrete root roles while rebinding default aliases on media surfaces', () => {
+    const concrete = defineTheme({
+      name: 'status-role-media',
+      tokens: {
+        '--color-text-blue': '#0074E2',
+        '--color-text-info': '#6D9CFE',
+      },
+      onDark: {tokens: {'--color-text-blue': '#FFFFFF'}},
+    });
+    const concreteCss = generateOnMediaCSS(concrete);
+
+    expect(concreteCss).toContain('--color-text-blue: #FFFFFF;');
+    expect(concreteCss).not.toContain(
+      '--color-text-info: var(--color-text-blue);',
+    );
+
+    const canonical = defineTheme({
+      name: 'status-role-media-alias',
+      tokens: {
+        '--color-text-blue': '#0074E2',
+        '--color-text-info': 'var(--color-text-blue)',
+      },
+      onDark: {
+        tokens: {
+          '--color-text-blue': '#FFFFFF',
+        },
+      },
+    });
+    const canonicalCss = generateOnMediaCSS(canonical);
+
+    expect(canonicalCss).toContain('--color-text-blue: #FFFFFF;');
+    expect(canonicalCss).toContain(
+      '--color-text-info: var(--color-text-blue);',
+    );
+  });
+
+  it.each([
+    'VAR( /*x*/ --color-text-blue ) !important',
+    'v\\61r(--color-text-blue)',
+    'var( --color-text-blue )',
+    'var(--color-text-blue) !important',
+  ])('rebinds a semantically equivalent authored root alias: %s', info => {
+    const theme = defineTheme({
+      name: 'status-role-media-equivalent-alias',
+      tokens: {
+        '--color-text-blue': '#0074E2',
+        '--color-text-info': info,
+      },
+      onDark: {
+        tokens: {
+          '--color-text-blue': '#FFFFFF',
+        },
+      },
+    });
+
+    expect(generateOnMediaCSS(theme)).toContain(
+      '--color-text-info: var(--color-text-blue);',
+    );
+  });
+
+  it('does not let a media alias override an adaptation-authored role', () => {
+    const theme = defineTheme({
+      name: 'status-role-media-adaptation',
+      adaptations: {
+        rules: [
+          {
+            when: {contrast: 'more'},
+            value: {tokens: {'--color-text-info': '#123456'}},
+          },
+        ],
+      },
+      onDark: {
+        tokens: {
+          '--color-text-blue': '#FFFFFF',
+        },
+      },
+    });
+    const css = generateOnMediaCSS(theme);
+
+    expect(css).toContain('--color-text-blue: #FFFFFF;');
+    expect(css).toContain('--color-text-info: var(--color-text-blue);');
+    expect(css).toContain('--color-text-info: inherit;');
+    expect(css.lastIndexOf('--color-text-info: inherit;')).toBeGreaterThan(
+      css.lastIndexOf('--color-text-info: var(--color-text-blue);'),
+    );
+  });
+
+  it('inherits non-default adaptation roles instead of re-resolving them locally', () => {
+    const theme = defineTheme({
+      name: 'status-role-media-inherit',
+      tokens: {'--color-text-purple': '#123456'},
+      adaptations: {
+        rules: [
+          {
+            when: {contrast: 'more'},
+            value: {
+              tokens: {'--color-text-info': 'var(--color-text-purple)'},
+            },
+          },
+        ],
+      },
+      onDark: {
+        tokens: {
+          '--color-text-purple': '#ffffff',
+          '--color-text-blue': '#ffffff',
+        },
+      },
+    });
+    const css = generateOnMediaCSS(theme);
+
+    expect(css).toContain('--color-text-info: inherit;');
+    expect(css).not.toContain('--color-text-info: var(--color-text-purple);');
+  });
+
+  it('avoids a descendant-local cycle while replaying an adaptation role', () => {
+    const theme = defineTheme({
+      name: 'status-role-media-replay-cycle',
+      adaptations: {
+        rules: [
+          {
+            when: {contrast: 'more'},
+            value: {
+              tokens: {'--color-text-info': 'var(--color-text-blue)'},
+            },
+          },
+        ],
+      },
+      onDark: {tokens: {'--color-text-blue': 'var(--color-text-info)'}},
+    });
+    const css = generateOnMediaCSS(theme);
+    const darkBlocks = Array.from(
+      css.matchAll(/\[data-astryx-media="dark"\] \{([\s\S]*?)\n\s*\}/g),
+      match => match[1],
+    );
+
+    expect(darkBlocks.length).toBeGreaterThan(0);
+    for (const block of darkBlocks) {
+      expect(block).not.toContain('--color-text-info: var(--color-text-blue);');
+      expect(block).not.toContain('--color-text-info: var(--color-text-blue);');
+    }
+  });
+
+  it('uses inheritance when multiple local role replays would form a cycle', () => {
+    const theme = defineTheme({
+      name: 'status-role-multi-replay-cycle',
+      adaptations: {
+        rules: [
+          {
+            when: {contrast: 'more'},
+            value: {
+              tokens: {
+                '--color-text-info': 'var(--color-on-info-muted)',
+                '--color-on-info-muted': 'var(--color-text-green)',
+              },
+            },
+          },
+        ],
+      },
+      onDark: {
+        tokens: {
+          '--color-text-blue': '#ffffff',
+          '--color-text-green': 'var(--color-text-info)',
+        },
+      },
+    });
+    const css = generateOnMediaCSS(theme);
+    const alias = '--color-on-info-muted: var(--color-text-blue);';
+    const restoration = '--color-on-info-muted: inherit;';
+    expect(css).toContain(alias);
+    expect(css).toContain(restoration);
+    expect(css.lastIndexOf(restoration)).toBeGreaterThan(
+      css.lastIndexOf(alias),
+    );
+  });
+
+  it('stringifies a legacy non-string media status source without throwing', () => {
+    const theme = defineTheme({
+      name: 'legacy-media-status-source',
+      onDark: {tokens: {'--color-text-blue': null as never}},
+    });
+
+    expect(() => generateOnMediaCSS(theme)).not.toThrow();
+    expect(generateOnMediaCSS(theme)).toContain('--color-text-blue: null;');
+  });
+
   it('emits component override rules', () => {
     const theme = defineTheme({
       name: 'test',

package/src/theme/statusColor.ts

@@ -0,0 +1,189 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file statusColor.ts
+ * @input Concrete sRGB colours (hex or rgb()) from resolved theme tokens
+ * @output Contrast, OKLCH, chroma, and lightness-solving helpers for status roles
+ * @position Pure colour maths shared by status-role derivation
+ *   (architecture:theme-compilation INV17) and the status contrast checks.
+ *
+ * Contrast follows WCAG 2.x relative luminance. Lightness adjustments move a
+ * colour along OKLCH lightness at its own hue, reducing chroma only as far as
+ * needed to stay inside sRGB, so a derived role keeps its status hue.
+ */
+
+import {formatHex, parseColor, type RGBA} from '../utils/color';
+
+export interface OKLCH {
+  l: number;
+  c: number;
+  h: number;
+}
+
+const toLinear = (v: number): number => {
+  const c = v / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+};
+
+const fromLinear = (v: number): number => {
+  const c = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+  return c * 255;
+};
+
+/** Composite a possibly translucent colour over an opaque backdrop. */
+export function composite(top: RGBA, under: RGBA): RGBA {
+  const a = top.a;
+  return {
+    r: top.r * a + under.r * (1 - a),
+    g: top.g * a + under.g * (1 - a),
+    b: top.b * a + under.b * (1 - a),
+    a: 1,
+  };
+}
+
+/** WCAG relative luminance of an opaque colour. */
+export function relativeLuminance({r, g, b}: RGBA): number {
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+
+/** WCAG contrast ratio. A translucent foreground is composited over the background first. */
+export function contrastRatio(foreground: RGBA, background: RGBA): number {
+  const bg =
+    background.a < 1
+      ? composite(background, {r: 255, g: 255, b: 255, a: 1})
+      : background;
+  const fg = foreground.a < 1 ? composite(foreground, bg) : foreground;
+  const a = relativeLuminance(fg);
+  const b = relativeLuminance(bg);
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05);
+}
+
+/** Convert opaque sRGB to OKLCH. */
+export function toOklch({r, g, b}: RGBA): OKLCH {
+  const lr = toLinear(r);
+  const lg = toLinear(g);
+  const lb = toLinear(b);
+  const l = Math.cbrt(
+    0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb,
+  );
+  const m = Math.cbrt(
+    0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb,
+  );
+  const s = Math.cbrt(
+    0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb,
+  );
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  return {l: L, c: Math.hypot(A, B), h: Math.atan2(B, A)};
+}
+
+function oklchToLinear({l: L, c, h}: OKLCH): [number, number, number] {
+  const A = c * Math.cos(h);
+  const B = c * Math.sin(h);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+  ];
+}
+
+/** Convert OKLCH to sRGB, reducing chroma at the same lightness and hue until it fits. */
+export function fromOklch(color: OKLCH): RGBA {
+  let c = color.c;
+  for (let i = 0; i < 40; i++) {
+    const rgb = oklchToLinear({...color, c});
+    if (rgb.every(v => v >= -1e-4 && v <= 1 + 1e-4)) {
+      const [r, g, b] = rgb.map(v => fromLinear(Math.min(1, Math.max(0, v))));
+      return {r, g, b, a: 1};
+    }
+    c *= 0.9;
+  }
+  const [r, g, b] = oklchToLinear({...color, c: 0}).map(v =>
+    fromLinear(Math.min(1, Math.max(0, v))),
+  );
+  return {r, g, b, a: 1};
+}
+
+/** Lowest chroma and lightness band a status colour may occupy and still read as a hue. */
+export const STATUS_CHROMA_FLOOR = 0.03;
+export const STATUS_LIGHTNESS_RANGE: readonly [number, number] = [0.2, 0.95];
+
+/**
+ * Whether a colour reads as a hue rather than a neutral grey, near-black, or
+ * near-white (architecture:theme-tokens INV11). Translucent colours are judged
+ * on their own channels.
+ */
+export function isChromatic(color: RGBA): boolean {
+  const {l, c} = toOklch(color);
+  return (
+    c >= STATUS_CHROMA_FLOOR &&
+    l >= STATUS_LIGHTNESS_RANGE[0] &&
+    l <= STATUS_LIGHTNESS_RANGE[1]
+  );
+}
+
+/**
+ * Move `color` along OKLCH lightness, at its own hue, until it reaches
+ * `ratio` against every backdrop. Moves away from the backdrops' luminance;
+ * returns the colour unchanged when it already passes, or null when no
+ * lightness at that hue reaches the ratio.
+ */
+export function solveLightness(
+  color: RGBA,
+  backdrops: ReadonlyArray<RGBA>,
+  ratio: number,
+): RGBA | null {
+  const passes = (candidate: RGBA): boolean =>
+    backdrops.every(backdrop => contrastRatio(candidate, backdrop) >= ratio);
+  const opaque = {...color, a: 1};
+  if (passes(opaque)) {
+    return opaque;
+  }
+  const meanLuminance =
+    backdrops.reduce((sum, b) => sum + relativeLuminance(b), 0) /
+    backdrops.length;
+  const base = toOklch(opaque);
+  // Light backdrops need a darker colour; dark backdrops a lighter one.
+  const darker = meanLuminance > 0.18;
+  let lo = darker ? 0 : base.l;
+  let hi = darker ? base.l : 1;
+  const at = (l: number): RGBA => fromOklch({...base, l});
+  const target = darker ? at(0) : at(1);
+  if (!passes(target)) {
+    return null;
+  }
+  // Binary search for the passing lightness closest to the original.
+  for (let i = 0; i < 32; i++) {
+    const mid = (lo + hi) / 2;
+    const ok = passes(at(mid));
+    if (darker) {
+      if (ok) {lo = mid;}
+      else {hi = mid;}
+    } else if (ok) {hi = mid;}
+    else {lo = mid;}
+  }
+  const solved = at(darker ? lo : hi);
+  return passes(solved) ? solved : target;
+}
+
+/** Parse a concrete colour, returning null for anything unresolved. */
+export function parseConcreteColor(value: string | undefined): RGBA | null {
+  return value === undefined ? null : parseColor(value);
+}
+
+/** `#RRGGBB` or `#RRGGBBAA` for a colour. */
+export function toHex(color: RGBA): string {
+  const hex = formatHex(color.r, color.g, color.b);
+  if (color.a >= 1) {
+    return hex;
+  }
+  const alpha = Math.round(color.a * 255)
+    .toString(16)
+    .padStart(2, '0')
+    .toUpperCase();
+  return `${hex}${alpha}`;
+}

package/src/theme/statusRoleDerivation.ts

@@ -0,0 +1,289 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file statusRoleDerivation.ts
+ * @input A theme's portable and local token maps
+ * @output Concrete values for the status roles the theme does not set
+ * @position Theme generation step for architecture:theme-compilation INV17,
+ *   called by generateThemeRules for runtime and static output alike.
+ *
+ * Each status (`info`, `success`, `warning`, `error`) has one strong fill,
+ * `--color-<status>`. A theme that sets a fill, its content, its pale fill, or
+ * a surface gets the roles it leaves unset, computed against its own colours:
+ * - `--color-on-<status>`: the theme's light or dark content colour
+ *   (`--color-on-dark` or `--color-on-light`), whichever contrasts more with
+ *   the fill, or pure white or black when neither reaches 4.5:1;
+ * - `--color-text-<status>`: the fill's hue at 4.5:1 on surface and card;
+ * - `--color-on-<status>-muted`: the fill's hue at 4.5:1 on the pale fill over
+ *   the surface.
+ * Fills are never derived: a fill a theme does not set is Core's. Icon and
+ * border roles alias the text role through the scoped status-role aliases in
+ * generateThemeRules, so they are not computed here.
+ */
+
+import {colorDefaults} from './tokens.stylex';
+import {
+  composite,
+  contrastRatio,
+  isChromatic,
+  parseConcreteColor,
+  solveLightness,
+  toHex,
+} from './statusColor';
+import type {RGBA} from '../utils/color';
+
+export const STATUS_NAMES = ['info', 'success', 'warning', 'error'] as const;
+export type StatusName = (typeof STATUS_NAMES)[number];
+
+type ResolvedThemeMode = 'light' | 'dark';
+
+const TEXT_RATIO = 4.5;
+// Solve slightly above the floor so rounding to #RRGGBB never lands below it.
+const SOLVE_RATIO = TEXT_RATIO + 0.08;
+const MODES: ReadonlyArray<ResolvedThemeMode> = ['light', 'dark'];
+
+/** The strong fill of a status, the source its other roles derive from. */
+export function statusSourceToken(status: StatusName): string {
+  return `--color-${status}`;
+}
+
+function splitTopLevel(input: string): string[] {
+  const parts: string[] = [];
+  let depth = 0;
+  let current = '';
+  for (const ch of input) {
+    if (ch === '(') {
+      depth++;
+    }
+    if (ch === ')') {
+      depth--;
+    }
+    if (ch === ',' && depth === 0) {
+      parts.push(current.trim());
+      current = '';
+      continue;
+    }
+    current += ch;
+  }
+  parts.push(current.trim());
+  return parts;
+}
+
+/**
+ * Resolve one token to a concrete value for a mode, following `light-dark()`
+ * and `var()` through the theme's tokens and then Core's colour defaults.
+ * This stays local (rather than using tokens.ts) so theme generation does not
+ * import the runtime token helpers that themselves depend on defineTheme.
+ */
+function resolveToken(
+  tokens: Record<string, unknown>,
+  name: string,
+  mode: ResolvedThemeMode,
+  seen: ReadonlySet<string> = new Set(),
+): string | undefined {
+  if (seen.has(name)) {
+    return undefined;
+  }
+  const raw = tokens[name] ?? (colorDefaults as Record<string, string>)[name];
+  return resolveValue(tokens, raw, mode, new Set([...seen, name]));
+}
+
+function resolveValue(
+  tokens: Record<string, unknown>,
+  raw: unknown,
+  mode: ResolvedThemeMode,
+  seen: ReadonlySet<string>,
+): string | undefined {
+  if (Array.isArray(raw)) {
+    return resolveValue(tokens, raw[mode === 'light' ? 0 : 1], mode, seen);
+  }
+  if (typeof raw !== 'string') {
+    return undefined;
+  }
+  const value = raw.trim();
+  if (/^light-dark\(/i.test(value) && value.endsWith(')')) {
+    const [light, dark] = splitTopLevel(
+      value.slice(value.indexOf('(') + 1, -1),
+    );
+    return resolveValue(tokens, mode === 'light' ? light : dark, mode, seen);
+  }
+  const ref = /^var\(\s*(--[\w-]+)\s*(?:,(.*))?\)$/s.exec(value);
+  if (ref) {
+    const resolved = resolveToken(tokens, ref[1], mode, seen);
+    return (
+      resolved ??
+      (ref[2] ? resolveValue(tokens, ref[2], mode, seen) : undefined)
+    );
+  }
+  return value;
+}
+
+const CORE_TOKENS: Record<string, unknown> = {};
+
+function resolveModes(
+  tokens: Record<string, unknown>,
+): Record<ResolvedThemeMode, Record<string, string>> {
+  const names = new Set([
+    ...Object.keys(colorDefaults),
+    ...Object.keys(tokens),
+  ]);
+  const at = (mode: ResolvedThemeMode): Record<string, string> => {
+    const out: Record<string, string> = {};
+    for (const name of names) {
+      const value = resolveToken(tokens, name, mode);
+      if (value !== undefined) {
+        out[name] = value;
+      }
+    }
+    return out;
+  };
+  return {light: at('light'), dark: at('dark')};
+}
+
+let coreCache: Record<ResolvedThemeMode, Record<string, string>> | undefined;
+function core(): Record<ResolvedThemeMode, Record<string, string>> {
+  coreCache ??= resolveModes(CORE_TOKENS);
+  return coreCache;
+}
+
+function statusHue(
+  status: StatusName,
+  resolved: Record<string, string>,
+  mode: ResolvedThemeMode,
+): RGBA | null {
+  const color = parseConcreteColor(resolved[statusSourceToken(status)]);
+  if (color !== null && isChromatic(color)) {
+    return {...color, a: 1};
+  }
+  // A grey source falls back to Core's own status hue, so derived text stays
+  // chromatic.
+  const fallback = parseConcreteColor(core()[mode][statusSourceToken(status)]);
+  return fallback === null ? null : {...fallback, a: 1};
+}
+
+function opaqueOver(color: RGBA, under: RGBA): RGBA {
+  return color.a < 1 ? composite(color, under) : color;
+}
+
+interface ModeRoles {
+  on?: RGBA;
+  text?: RGBA;
+  onMuted?: RGBA;
+}
+
+function deriveForMode(
+  status: StatusName,
+  resolved: Record<string, string>,
+  mode: ResolvedThemeMode,
+): ModeRoles | null {
+  // Every colour the computations measure must be concrete. When one is not
+  // (an oklch() value, an unknown reference), the status keeps its scoped
+  // aliases instead of a guess (architecture:theme-compilation INV17).
+  const source = parseConcreteColor(resolved[statusSourceToken(status)]);
+  const hue = statusHue(status, resolved, mode);
+  const surface = parseConcreteColor(resolved['--color-background-surface']);
+  const cardColor = parseConcreteColor(resolved['--color-background-card']);
+  const muted = parseConcreteColor(resolved[`--color-${status}-muted`]);
+  const onDark = parseConcreteColor(resolved['--color-on-dark']);
+  const onLight = parseConcreteColor(resolved['--color-on-light']);
+  if (
+    source === null ||
+    hue === null ||
+    surface === null ||
+    cardColor === null ||
+    muted === null ||
+    onDark === null ||
+    onLight === null
+  ) {
+    return null;
+  }
+  const opaqueSurface = opaqueOver(surface, {r: 255, g: 255, b: 255, a: 1});
+  const card = opaqueOver(cardColor, opaqueSurface);
+  const fill = opaqueOver(source, opaqueSurface);
+  const roles: ModeRoles = {};
+
+  const lightInk = opaqueOver(onDark, fill);
+  const darkInk = opaqueOver(onLight, fill);
+  const themeInk =
+    contrastRatio(lightInk, fill) >= contrastRatio(darkInk, fill)
+      ? lightInk
+      : darkInk;
+  // A theme's off-white and off-black content can both miss the floor on a
+  // mid-tone fill; pure white or black always reaches it.
+  const white = {r: 255, g: 255, b: 255, a: 1};
+  const black = {r: 0, g: 0, b: 0, a: 1};
+  roles.on =
+    contrastRatio(themeInk, fill) >= TEXT_RATIO
+      ? themeInk
+      : contrastRatio(white, fill) >= contrastRatio(black, fill)
+        ? white
+        : black;
+
+  const text = solveLightness(hue, [opaqueSurface, card], SOLVE_RATIO);
+  if (text !== null) {
+    roles.text = text;
+  }
+
+  const pale = composite(muted.a < 1 ? muted : {...muted, a: 1}, opaqueSurface);
+  const onMuted = solveLightness(hue, [pale], SOLVE_RATIO);
+  if (onMuted !== null) {
+    roles.onMuted = onMuted;
+  }
+  return roles;
+}
+
+const ROLE_TOKENS: Record<keyof ModeRoles, (status: StatusName) => string> = {
+  on: s => `--color-on-${s}`,
+  text: s => `--color-text-${s}`,
+  onMuted: s => `--color-on-${s}-muted`,
+};
+
+/**
+ * Concrete `light-dark()` values for every status role a theme leaves unset
+ * while setting a colour that role is measured against. Authored roles are
+ * never overridden.
+ */
+export function deriveStatusRoleTokens(
+  tokens: Record<string, string>,
+  localTokens: Record<string, string> = {},
+): [string, string][] {
+  const authored = new Set(Object.keys(tokens));
+  const surfaceSet =
+    authored.has('--color-background-surface') ||
+    authored.has('--color-background-card');
+  const inkSet =
+    authored.has('--color-on-dark') || authored.has('--color-on-light');
+  const resolved = resolveModes({...localTokens, ...tokens});
+  const entries: [string, string][] = [];
+  for (const status of STATUS_NAMES) {
+    const fillSet = authored.has(statusSourceToken(status));
+    const mutedSet = authored.has(`--color-${status}-muted`);
+    // Which roles this theme's own colours affect.
+    const affects: Record<keyof ModeRoles, boolean> = {
+      on: fillSet || inkSet,
+      text: fillSet || surfaceSet,
+      onMuted: fillSet || mutedSet || surfaceSet,
+    };
+    if (!affects.on && !affects.text && !affects.onMuted) {
+      continue;
+    }
+    const perMode = MODES.map(mode =>
+      deriveForMode(status, resolved[mode], mode),
+    );
+    if (perMode.some(r => r === null)) {
+      continue;
+    }
+    for (const key of Object.keys(ROLE_TOKENS) as (keyof ModeRoles)[]) {
+      const token = ROLE_TOKENS[key](status);
+      if (!affects[key] || authored.has(token)) {
+        continue;
+      }
+      const [light, dark] = perMode.map(r => r?.[key]);
+      if (light === undefined || dark === undefined) {
+        continue;
+      }
+      entries.push([token, `light-dark(${toHex(light)}, ${toHex(dark)})`]);
+    }
+  }
+  return entries;
+}

package/src/theme/syntax/SyntaxTheme.tsx

@@ -8,7 +8,7 @@
  * @output SyntaxTheme provider, useSyntaxTheme hook
  * @position Provider component; wraps code surfaces to apply syntax coloring
  *
- * @see https://github.com/facebook/astryx/issues/1148
+ * @see https://github.com/meta/astryx/issues/1148
  */
 
 import React, {createContext, use, useMemo} from 'react';