@astryxdesign/core 0.4.2 → 0.4.3-canary.00bed29

package/src/hooks/useInputStatusIcon.test.tsx

@@ -159,6 +159,25 @@ describe('useInputStatusIcon — no dangling aria-describedby (WCAG 1.3.1)', ()
     ).not.toBeInTheDocument();
     expectNoDanglingDescribedBy(container);
   });
+
+  it('keeps the tooltip status button interactive inside a non-interactive trailing slot', () => {
+    // TextArea positions its trailing slot as an absolute overlay with
+    // `pointer-events: none` (correct for the decorative spinner/icon it was
+    // built for). The focusable status button owns its own interactivity so
+    // hover still opens the tooltip there — keyboard focus always worked, the
+    // pointer path did not until the button set `pointer-events: auto`.
+    render(
+      <TextArea
+        label="Field"
+        value=""
+        onChange={() => {}}
+        status={{type: 'error', message: 'Message'}}
+        statusVariant="tooltip"
+      />,
+    );
+    const statusButton = screen.getByRole('button', {name: 'Error details'});
+    expect(statusButton).toHaveStyle({pointerEvents: 'auto'});
+  });
 });
 
 describe('useInputStatusIcon — input-status-icon theme target', () => {

package/src/hooks/useInputStatusIcon.tsx

@@ -82,6 +82,13 @@ const styles = stylex.create({
     background: 'none',
     color: 'inherit',
     cursor: 'pointer',
+    // Own the interactivity so the tooltip opens on hover even when the field
+    // renders this affordance inside a non-interactive trailing slot. TextArea
+    // positions its end slot as an absolute overlay with `pointer-events: none`
+    // (right for the decorative spinner/icon it was built for), which otherwise
+    // swallows this button's hover — keyboard focus still worked, pointer did
+    // not.
+    pointerEvents: 'auto',
     borderRadius: radiusVars['--radius-full'],
     // Not the shared offset: this button sits inside the field, and measured at
     // the standard 3px its ring crosses the field border.

package/src/index.ts

@@ -22,6 +22,7 @@ export * from './AvatarGroup';
 export * from './Badge';
 export * from './Banner';
 export * from './Blockquote';
+export * from './BottomSheet';
 export * from './Breadcrumbs';
 export * from './Button';
 export * from './ButtonGroup';

package/src/theme/defineTheme.test.ts

@@ -2,6 +2,7 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import type {IconRegistry} from '../Icon/globalIconRegistry';
+import type {DefinedTheme} from './defineTheme';
 import {defineTheme, generateThemeCSS, isDefinedTheme} from './defineTheme';
 
 function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
@@ -1126,4 +1127,130 @@ describe('defineTheme extends', () => {
       base.tokens['--font-size-base'],
     );
   });
+
+  it('inherits indicators when the child has none', () => {
+    const indicator = (() => null) as unknown as NonNullable<
+      DefinedTheme['indicators']
+    >['check'];
+    const base = defineTheme({name: 'base', indicators: {check: indicator}});
+    const child = defineTheme({name: 'child', extends: base});
+    expect(child.indicators?.check).toBe(indicator);
+  });
+
+  it('inherits onDark token overrides from base theme', () => {
+    const base = defineTheme({
+      name: 'base',
+      onDark: {tokens: {'--color-border': '#ffffff'}},
+    });
+    const child = defineTheme({name: 'child', extends: base});
+    expect(child.__onDark?.tokens['--color-border']).toBe('#ffffff');
+  });
+
+  it('inherits onLight token overrides from base theme', () => {
+    const base = defineTheme({
+      name: 'base',
+      onLight: {tokens: {'--color-border': '#000000'}},
+    });
+    const child = defineTheme({name: 'child', extends: base});
+    expect(child.__onLight?.tokens['--color-border']).toBe('#000000');
+  });
+
+  it('lets the child override an inherited onDark token', () => {
+    const base = defineTheme({
+      name: 'base',
+      onDark: {tokens: {'--color-border': '#ffffff', '--color-track': '#eee'}},
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      onDark: {tokens: {'--color-border': '#cccccc'}},
+    });
+    expect(child.__onDark?.tokens['--color-border']).toBe('#cccccc');
+    expect(child.__onDark?.tokens['--color-track']).toBe('#eee');
+  });
+
+  it('inherits and deep-merges onDark component overrides', () => {
+    const base = defineTheme({
+      name: 'base',
+      onDark: {
+        components: {
+          card: {base: {borderColor: '#fff', backgroundColor: '#111'}},
+          badge: {base: {color: '#fff'}},
+        },
+      },
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      onDark: {components: {card: {base: {borderColor: '#ccc'}}}},
+    });
+    expect(child.__onDark?.components?.card?.base).toEqual({
+      borderColor: '#ccc',
+      backgroundColor: '#111',
+    });
+    expect(child.__onDark?.components?.badge?.base).toEqual({color: '#fff'});
+  });
+
+  it('inherits __inputTokens so inherited [light, dark] tuples survive', () => {
+    const base = defineTheme({
+      name: 'base',
+      tokens: {'--color-accent': ['#111111', '#eeeeee']},
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      tokens: {'--color-border': '#cccccc'},
+    });
+    expect(child.__inputTokens?.['--color-accent']).toEqual([
+      '#111111',
+      '#eeeeee',
+    ]);
+    expect(child.__inputTokens?.['--color-border']).toBe('#cccccc');
+  });
+
+  it('__inputTokens from the child win over the base', () => {
+    const base = defineTheme({
+      name: 'base',
+      tokens: {'--color-accent': ['#111111', '#eeeeee']},
+    });
+    const child = defineTheme({
+      name: 'child',
+      extends: base,
+      tokens: {'--color-accent': '#ff0000'},
+    });
+    expect(child.__inputTokens?.['--color-accent']).toBe('#ff0000');
+  });
+
+  // The failure that motivated these: `extends` resolving to `undefined` (a
+  // named import that silently missed — see the theme-build resolution tests)
+  // used to inherit nothing and build a stylesheet that looked fine.
+  it('throws when extends is present but undefined', () => {
+    expect(() =>
+      defineTheme({
+        name: 'child',
+        extends: undefined,
+        tokens: {'--color-accent': '#ff0000'},
+      }),
+    ).toThrow(/extends/);
+  });
+
+  it('throws when extends is not a theme', () => {
+    expect(() =>
+      defineTheme({
+        name: 'child',
+        // A module namespace object is the shape a bad import hands over.
+        extends: {foo: 'bar'} as unknown as DefinedTheme,
+      }),
+    ).toThrow(/extends/);
+  });
+
+  it('accepts a pre-built theme module as a base', () => {
+    const built = {
+      name: 'built-base',
+      __built: true,
+      tokens: {'--color-accent': '#111111'},
+    } as DefinedTheme;
+    const child = defineTheme({name: 'child', extends: built});
+    expect(child.tokens['--color-accent']).toBe('#111111');
+  });
 });

package/src/theme/defineTheme.ts

@@ -72,6 +72,7 @@ import type {DomainTokenName} from './domainTokens';
 import {domainTokenDefaults} from './domainTokens';
 import type {SyntaxThemeDefinition} from './syntax';
 import {registerTheme} from './themeRegistry';
+import {deepMergeComponents} from './mergeComponents';
 
 // =============================================================================
 // Types
@@ -165,9 +166,14 @@ export interface DefineThemeInput {
   name: string;
 
   /**
-   * Base theme to extend. When provided, the new theme starts with the
-   * base theme's tokens, components, and fonts, then applies overrides
-   * from this input on top. The base theme's values have lowest precedence.
+   * Base theme to extend. When provided, the new theme starts with everything
+   * the base resolved to — tokens, component overrides, icons, indicators, and
+   * its `onDark`/`onLight` surfaces — then applies this input on top. The base
+   * theme's values have lowest precedence.
+   *
+   * The result is flat: an extended theme carries its inheritance in its own
+   * resolved output, so `astryx theme build` emits one self-contained
+   * stylesheet and the base's CSS does not need to be loaded alongside it.
    *
    * Use this to create variant themes that customize only a few aspects
    * (e.g. icons, accent color) without re-specifying the full theme.
@@ -242,20 +248,38 @@ export interface DefineThemeInput {
    */
   radius?: RadiusScaleConfig;
   /**
-   * Color scale configuration. Generates color token overrides from a
-   * single accent color using the HCT perceptual color model.
+   * Color scale configuration. Generates color token overrides from an
+   * accent seed using the HCT perceptual color model.
    *
    * Only generates tokens derivable from the accent — status colors,
    * categorical hues, and fixed tokens (on-dark/on-light) use defaults.
-   * Explicit `tokens` entries always take precedence.
+   *
+   * `accent` accepts a single hex (same seed for both color schemes) or a
+   * `[light, dark]` tuple, matching `TokenValue`. With a tuple, the light
+   * scheme's full palette derives from the light seed and the dark
+   * scheme's from the dark seed.
    *
    * `accent` is optional — omit it for a neutral-only theme, which keeps
    * the default accent tokens and only themes the neutrals.
    *
+   * Precedence vs `tokens`: explicit `tokens` entries win over generated
+   * values, token by token. Because `--color-accent-muted`,
+   * `--color-text-accent` and `--color-icon-accent` are generated as
+   * `var(--color-accent)` references, a `tokens['--color-accent']`
+   * override re-points them at runtime. `--color-on-accent` does NOT
+   * follow: it is baked from the `color.accent` seed (a contrast
+   * computation CSS cannot express), so overriding the accent through
+   * `tokens` without also overriding `--color-on-accent` leaves the two
+   * out of sync. To re-seat the whole palette per scheme, prefer a tuple
+   * `color.accent` over the `tokens['--color-accent']` workaround.
+   *
    * @example
-   * ```tsx
+   * ```
    * color: { accent: '#0064E0', neutralStyle: 'cool', contrast: 'standard' }
    *
+   * // Per-scheme accents — light palette from the first seed, dark from the second
+   * color: { accent: ['#0064E0', '#48CAE4'] }
+   *
    * // Neutral-only — accent tokens stay at their defaults
    * color: { neutralStyle: 'warm' }
    * ```
@@ -416,49 +440,6 @@ function resolveTokenValue(value: TokenValue): string {
   return value;
 }
 
-/**
- * Deep-merge two component style maps.
- * Properties in `overrides` take precedence over `base`.
- * This allows typeScale-generated rules to be overridden by explicit components.
- */
-function deepMergeComponents(
-  base?: ComponentStyleMap,
-  overrides?: ComponentStyleMap,
-): ComponentStyleMap | undefined {
-  if (!base && !overrides) {
-    return undefined;
-  }
-  if (!base) {
-    return overrides;
-  }
-  if (!overrides) {
-    return base;
-  }
-
-  const result: ComponentStyleMap = {};
-
-  // Start with all base entries
-  for (const [component, rules] of Object.entries(base)) {
-    result[component] = {...rules};
-  }
-
-  // Merge overrides on top
-  for (const [component, rules] of Object.entries(overrides)) {
-    if (!result[component]) {
-      result[component] = {...rules};
-    } else {
-      for (const [key, styles] of Object.entries(rules)) {
-        result[component][key] = {
-          ...result[component][key],
-          ...styles,
-        };
-      }
-    }
-  }
-
-  return result;
-}
-
 /**
  * Resolve a FontWeight name to a var() reference.
  * Named weights map to var(--font-weight-*); raw values pass through.
@@ -491,6 +472,24 @@ function buildFontFamily(
   return quoted;
 }
 
+/**
+ * Describe a rejected `extends` value for the error message — enough to tell a
+ * missed import (`undefined`) from a module namespace or a plain object.
+ */
+function describeBadBase(value: unknown): string {
+  if (value === undefined) {
+    return 'undefined';
+  }
+  if (value === null) {
+    return 'null';
+  }
+  if (typeof value !== 'object') {
+    return typeof value;
+  }
+  const keys = Object.keys(value);
+  return `an object with keys [${keys.slice(0, 4).join(', ')}${keys.length > 4 ? ', …' : ''}]`;
+}
+
 /**
  * Create an Astryx theme.
  *
@@ -504,7 +503,19 @@ function buildFontFamily(
 export function defineTheme(input: DefineThemeInput): DefinedTheme {
   const tokens: Record<string, string> = {};
 
-  // 0. Pre-seed from base theme when `extends` is provided (lowest precedence)
+  // 0. Pre-seed from base theme when `extends` is provided (lowest precedence).
+  // A base that is not a theme is refused rather than ignored: `extends` used
+  // to inherit nothing when its value was undefined, which is what a named
+  // import silently resolving to the wrong module hands over, and the theme
+  // then built into a plausible-looking stylesheet missing everything it was
+  // supposed to inherit.
+  if ('extends' in input && !isDefinedTheme(input.extends)) {
+    throw new Error(
+      `defineTheme("${input.name}"): \`extends\` must be a theme from defineTheme(), got ${describeBadBase(input.extends)}. ` +
+        `Check that the import naming your base theme resolves to its source and exports that name — ` +
+        `a generated \`<theme>.js\` artifact sitting next to the source exports \`<name>Theme\`, not the source's own export.`,
+    );
+  }
   const base = input.extends;
   if (base) {
     for (const [key, value] of Object.entries(base.tokens)) {
@@ -640,9 +651,10 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
     components = deepMergeComponents(base.components, components);
   }
 
-  // 4. Resolve on-media token overrides (defaults + user overrides)
-  const __onDark = resolveOnMedia('dark', input.onDark);
-  const __onLight = resolveOnMedia('light', input.onLight);
+  // 4. Resolve on-media token overrides (base's resolved surface, then
+  // defaults, then this theme's own overrides)
+  const __onDark = resolveOnMedia('dark', input.onDark, base?.__onDark);
+  const __onLight = resolveOnMedia('light', input.onLight, base?.__onLight);
 
   // 5. Merge icons — input icons override base icons
   const icons =
@@ -663,7 +675,10 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
     components,
     icons,
     indicators,
-    __inputTokens: input.tokens,
+    __inputTokens:
+      base?.__inputTokens || input.tokens
+        ? {...base?.__inputTokens, ...input.tokens}
+        : undefined,
     __onDark,
     __onLight,
   };

package/src/theme/expandColorScale.test.ts

@@ -192,6 +192,144 @@ describe('expandColorScale — neutral-only themes (#2279)', () => {
   });
 });
 
+describe('expandColorScale — tuple accent (#2279)', () => {
+  const LIGHT_SEED = '#B7410E';
+  const DARK_SEED = '#48CAE4';
+
+  it('accepts a [light, dark] tuple and generates the accent tokens', () => {
+    const tokens = expandColorScale({accent: [LIGHT_SEED, DARK_SEED]});
+    for (const key of ACCENT_TOKENS) {
+      expect(tokens).toHaveProperty(key);
+    }
+    expect(tokens['--color-accent']).toMatch(/^light-dark\(#/);
+    expect(tokens['--color-on-accent']).toMatch(/^light-dark\(#/);
+  });
+
+  it('a same-halves tuple matches the single-string expansion, token for token', () => {
+    // Pins the string path as the tuple fast path: introducing tuples must
+    // not re-color any existing single-accent theme.
+    const fromString = expandColorScale({accent: LIGHT_SEED});
+    const fromTuple = expandColorScale({accent: [LIGHT_SEED, LIGHT_SEED]});
+    expect(fromTuple).toEqual(fromString);
+  });
+
+  it('derives the light palette from the light seed and the dark palette from the dark seed', () => {
+    // Every generated light-dark() pair takes its light half from the light
+    // seed's palettes and its dark half from the dark seed's, so resolving
+    // each mode must agree with the matching single-accent expansion.
+    const tuple = defineTheme({
+      name: 'tuple',
+      color: {accent: [LIGHT_SEED, DARK_SEED]},
+    });
+    const fromLight = defineTheme({name: 'light', color: {accent: LIGHT_SEED}});
+    const fromDark = defineTheme({name: 'dark', color: {accent: DARK_SEED}});
+
+    const generatedKeys = Object.keys(
+      expandColorScale({accent: [LIGHT_SEED, DARK_SEED]}),
+    );
+    const tupleLight = resolveThemeTokens(tuple, {mode: 'light'});
+    const refLight = resolveThemeTokens(fromLight, {mode: 'light'});
+    const tupleDark = resolveThemeTokens(tuple, {mode: 'dark'});
+    const refDark = resolveThemeTokens(fromDark, {mode: 'dark'});
+    for (const key of generatedKeys) {
+      expect(tupleLight[key], `${key} (light)`).toBe(refLight[key]);
+      expect(tupleDark[key], `${key} (dark)`).toBe(refDark[key]);
+    }
+  });
+
+  it('differing seeds produce a dark half the light seed would not', () => {
+    // Regression guard: the dark half must not silently reuse the light seed.
+    const tuple = defineTheme({
+      name: 'tuple-differs',
+      color: {accent: [LIGHT_SEED, DARK_SEED]},
+    });
+    const single = defineTheme({
+      name: 'single',
+      color: {accent: LIGHT_SEED},
+    });
+    expect(
+      resolveThemeTokens(tuple, {mode: 'dark'})['--color-accent'],
+    ).not.toBe(resolveThemeTokens(single, {mode: 'dark'})['--color-accent']);
+  });
+
+  it('keeps the derived accent tokens as references with a tuple accent', () => {
+    const tokens = expandColorScale({accent: [LIGHT_SEED, DARK_SEED]});
+    expect(tokens['--color-text-accent']).toBe('var(--color-accent)');
+    expect(tokens['--color-icon-accent']).toBe('var(--color-accent)');
+    expect(tokens['--color-accent-muted']).toContain('var(--color-accent)');
+  });
+
+  it('honours neutralStyle with a tuple accent', () => {
+    const warm = expandColorScale({
+      accent: [LIGHT_SEED, DARK_SEED],
+      neutralStyle: 'warm',
+    });
+    const cool = expandColorScale({
+      accent: [LIGHT_SEED, DARK_SEED],
+      neutralStyle: 'cool',
+    });
+    expect(warm['--color-neutral']).not.toBe(cool['--color-neutral']);
+  });
+});
+
+describe('accent precedence — color config vs tokens overrides (#2279)', () => {
+  const CONFIG_ACCENT: [string, string] = ['#B7410E', '#48CAE4'];
+  const TOKEN_ACCENT: [string, string] = ['#AA0000', '#FF5555'];
+
+  it('tokens["--color-accent"] wins over the color-generated accent', () => {
+    const theme = defineTheme({
+      name: 'precedence-base',
+      color: {accent: CONFIG_ACCENT},
+      tokens: {'--color-accent': TOKEN_ACCENT},
+    });
+    expect(theme.tokens['--color-accent']).toBe(
+      `light-dark(${TOKEN_ACCENT[0]}, ${TOKEN_ACCENT[1]})`,
+    );
+  });
+
+  it('reference tokens follow the tokens override at runtime', () => {
+    const theme = defineTheme({
+      name: 'precedence-refs',
+      color: {accent: CONFIG_ACCENT},
+      tokens: {'--color-accent': TOKEN_ACCENT},
+    });
+    const light = resolveThemeTokens(theme, {mode: 'light'});
+    expect(light['--color-text-accent']).toBe(TOKEN_ACCENT[0]);
+    expect(light['--color-icon-accent']).toBe(TOKEN_ACCENT[0]);
+    const dark = resolveThemeTokens(theme, {mode: 'dark'});
+    expect(dark['--color-text-accent']).toBe(TOKEN_ACCENT[1]);
+  });
+
+  it('baked --color-on-accent stays derived from the color.accent seed', () => {
+    // Documented divergence: a tokens override of --color-accent does not
+    // re-derive --color-on-accent, which is a baked contrast computation
+    // against the color.accent seed. Consumers who override the accent via
+    // tokens must override --color-on-accent too (or pass the tuple through
+    // color.accent so the whole palette re-derives).
+    const overridden = defineTheme({
+      name: 'precedence-on-accent',
+      color: {accent: CONFIG_ACCENT},
+      tokens: {'--color-accent': TOKEN_ACCENT},
+    });
+    const generated = defineTheme({
+      name: 'generated-on-accent',
+      color: {accent: CONFIG_ACCENT},
+    });
+    expect(overridden.tokens['--color-on-accent']).toBe(
+      generated.tokens['--color-on-accent'],
+    );
+  });
+
+  it('an explicit --color-on-accent token wins over the generated one', () => {
+    const theme = defineTheme({
+      name: 'precedence-on-accent-explicit',
+      color: {accent: CONFIG_ACCENT},
+      tokens: {'--color-on-accent': '#FFFFFF'},
+    });
+    expect(theme.tokens['--color-on-accent']).toBe('#FFFFFF');
+  });
+});
+
 describe('expandColorScale + defineTheme integration', () => {
   it('explicit token overrides win over generated values', () => {
     const theme = defineTheme({