@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/hooks/useFocusTrap.doc.mjs

@@ -39,11 +39,10 @@ export const docs = {
   ],
   usage: {
     description:
-      'Traps focus within a container element following the WAI-ARIA dialog focus trap pattern. Listens to focus events on the document and redirects focus back into the container if it escapes via keyboard navigation. Handles both Tab and Shift+Tab wrapping. When the trap deactivates or unmounts, focus is restored to the element that was focused before activation, unless focus was already moved elsewhere. Mouse clicks outside the container are not intercepted; use a light-dismiss handler for that.',
+      'Traps focus within a container element following the WAI-ARIA dialog focus trap pattern. Listens to focus events on the document and redirects focus back into the container if it escapes via keyboard navigation. Handles both Tab and Shift+Tab wrapping. Mouse clicks outside the container are not intercepted; use a light-dismiss handler for that.',
     bestPractices: [
       { guidance: true, description: 'Call focusFirst() when opening a dialog/modal to move focus into the trapped region.' },
       { guidance: true, description: 'Provide an onEscape callback to close the dialog when Escape is pressed.' },
-      { guidance: true, description: 'Rely on the built-in focus restoration on close; only add your own onHide focus handling when you need to send focus somewhere other than the previously-focused element.' },
       { guidance: false, description: 'Use on non-modal content like tooltips or dropdowns; those need light-dismiss, not focus trapping.' },
     ],
   },
@@ -68,11 +67,10 @@ export const docsDense = {
   },
   usage: {
     description:
-      'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if it escapes via keyboard navigation. Handles both Tab + Shift+Tab wrapping. On deactivate/unmount, restores focus to the element focused before activation unless focus already moved elsewhere. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',
+      'Traps focus within container element following WAI-ARIA dialog focus trap pattern. Listens to document focus events + redirects focus back into container if it escapes via keyboard navigation. Handles both Tab + Shift+Tab wrapping. Mouse clicks outside container not intercepted; use light-dismiss handler for that.',
     bestPractices: [
       { guidance: true, description: 'Call focusFirst() when opening dialog/modal to move focus into trapped region.' },
       { guidance: true, description: 'Provide onEscape callback to close dialog when Escape pressed.' },
-      { guidance: true, description: 'Rely on built-in focus restoration on close; add own onHide focus handling only to send focus somewhere other than previously-focused element.' },
       { guidance: false, description: 'Use on non-modal content like tooltips / dropdowns; those need light-dismiss, not focus trapping.' },
     ],
   },

package/src/hooks/useFocusTrap.test.tsx

@@ -11,7 +11,6 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen, fireEvent} from '@testing-library/react';
-import {FOCUSABLE_SELECTOR} from './focusableSelector';
 import {useFocusTrap} from './useFocusTrap';
 
 function Trap({children}: {children: React.ReactNode}) {
@@ -50,41 +49,6 @@ function EscapeTrap({
   );
 }
 
-function RestoreTrap({isActive}: {isActive: boolean}) {
-  const {containerRef} = useFocusTrap<HTMLDivElement>({isActive});
-  return (
-    <div ref={containerRef} data-testid="restore-trap">
-      <button type="button" data-testid="inside">
-        Inside trap
-      </button>
-    </div>
-  );
-}
-
-function RestoreFixture({
-  isActive,
-  showPrev = true,
-  showTrap = true,
-}: {
-  isActive: boolean;
-  showPrev?: boolean;
-  showTrap?: boolean;
-}) {
-  return (
-    <div>
-      {showPrev && (
-        <button type="button" data-testid="prev">
-          Previously focused
-        </button>
-      )}
-      <button type="button" data-testid="other">
-        Other outside
-      </button>
-      {showTrap && <RestoreTrap isActive={isActive} />}
-    </div>
-  );
-}
-
 describe('useFocusTrap tabbable model (infra-8)', () => {
   it('treats a contenteditable as focusable (focusFirst lands on it)', () => {
     render(
@@ -120,48 +84,6 @@ describe('useFocusTrap tabbable model (infra-8)', () => {
   });
 });
 
-describe('FOCUSABLE_SELECTOR href matching', () => {
-  // Only real links (<a href>/<area href>) are focusable via href. A bare
-  // [href] term also matched non-focusable elements carrying href (e.g. a
-  // <link> in the head, or a custom element), which useFocusTrap would then
-  // treat as tab stops when computing trap boundaries.
-  it('matches real links but not other elements carrying href', () => {
-    const container = document.createElement('div');
-    container.innerHTML =
-      '<a href="#a" data-testid="anchor">Anchor</a>' +
-      '<map name="m">' +
-      '<area href="#area" shape="rect" coords="0,0,1,1" data-testid="area" />' +
-      '</map>' +
-      '<span href="#span" data-testid="span">Span</span>' +
-      '<link href="#link" data-testid="link" />';
-
-    const matches = Array.from(
-      container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
-    );
-    const byTestId = (id: string) =>
-      container.querySelector(`[data-testid="${id}"]`);
-
-    // Real links are focusable via href.
-    expect(matches).toContain(byTestId('anchor'));
-    expect(matches).toContain(byTestId('area'));
-    // Non-link elements carrying href are not focusable and must be excluded.
-    expect(matches).not.toContain(byTestId('span'));
-    expect(matches).not.toContain(byTestId('link'));
-  });
-
-  it('treats an <a href> inside a trap as focusable (focusFirst lands on it)', () => {
-    render(
-      <Trap>
-        <a href="#link" data-testid="anchor">
-          Link
-        </a>
-      </Trap>,
-    );
-    fireEvent.click(screen.getByTestId('focus-first'));
-    expect(screen.getByTestId('anchor')).toHaveFocus();
-  });
-});
-
 describe('useFocusTrap Escape coordination', () => {
   it('calls onEscape for a single active trap', () => {
     const onEscape = vi.fn();
@@ -203,78 +125,8 @@ describe('useFocusTrap Escape coordination', () => {
     const {rerender} = render(
       <EscapeTrap isActive onEscape={onEscape} label="toggle" />,
     );
-    rerender(
-      <EscapeTrap isActive={false} onEscape={onEscape} label="toggle" />,
-    );
+    rerender(<EscapeTrap isActive={false} onEscape={onEscape} label="toggle" />);
     fireEvent.keyDown(document, {key: 'Escape'});
     expect(onEscape).not.toHaveBeenCalled();
   });
 });
-
-describe('useFocusTrap focus restoration', () => {
-  it('restores focus to the previously-focused element when deactivated', () => {
-    const {rerender} = render(<RestoreFixture isActive={false} />);
-    const prev = screen.getByTestId('prev');
-    prev.focus();
-    expect(prev).toHaveFocus();
-
-    // Activate the trap (captures `prev` as the restore target) and move focus
-    // inside it, as auto-focus or a keyboard user would.
-    rerender(<RestoreFixture isActive={true} />);
-    screen.getByTestId('inside').focus();
-    expect(screen.getByTestId('inside')).toHaveFocus();
-
-    // Deactivating returns focus to where it was before the trap opened.
-    rerender(<RestoreFixture isActive={false} />);
-    expect(prev).toHaveFocus();
-  });
-
-  it('does not steal focus when it was moved elsewhere outside the trap', () => {
-    const {rerender} = render(<RestoreFixture isActive={false} />);
-    const prev = screen.getByTestId('prev');
-    prev.focus();
-
-    rerender(<RestoreFixture isActive={true} />);
-    // The user (or a consumer that self-restores) moves focus to a different
-    // outside control while the trap is open.
-    const other = screen.getByTestId('other');
-    other.focus();
-
-    rerender(<RestoreFixture isActive={false} />);
-    // Focus is left where the user put it — not yanked back to `prev`.
-    expect(other).toHaveFocus();
-    expect(prev).not.toHaveFocus();
-  });
-
-  it('does not crash or restore when the captured element was removed', () => {
-    const {rerender} = render(<RestoreFixture isActive={false} />);
-    const prev = screen.getByTestId('prev');
-    prev.focus();
-
-    rerender(<RestoreFixture isActive={true} />);
-    screen.getByTestId('inside').focus();
-
-    // Remove the captured element from the DOM before the trap deactivates.
-    rerender(<RestoreFixture isActive={true} showPrev={false} />);
-    expect(() =>
-      rerender(<RestoreFixture isActive={false} showPrev={false} />),
-    ).not.toThrow();
-  });
-
-  it('restores focus when the trap unmounts while active', () => {
-    const {rerender} = render(
-      <RestoreFixture isActive={true} showTrap={false} />,
-    );
-    const prev = screen.getByTestId('prev');
-    prev.focus();
-
-    // Mounting the trap active captures `prev`; then focus moves inside it.
-    rerender(<RestoreFixture isActive={true} showTrap={true} />);
-    screen.getByTestId('inside').focus();
-    expect(screen.getByTestId('inside')).toHaveFocus();
-
-    // Unmounting the trap (cleanup path, not an isActive flip) still restores.
-    rerender(<RestoreFixture isActive={true} showTrap={false} />);
-    expect(prev).toHaveFocus();
-  });
-});

package/src/hooks/useFocusTrap.ts

@@ -5,8 +5,7 @@
 /**
  * @file useFocusTrap.ts
  * @input Uses React useCallback, useEffect, useRef
- * @output Exports useFocusTrap hook for trapping focus within a container and
- *   restoring focus to the previously-focused element on deactivation
+ * @output Exports useFocusTrap hook for trapping focus within a container
  * @position Core hook; used by dialogs, modals, date pickers
  *
  * Based on WAI-ARIA dialog pattern:
@@ -179,9 +178,6 @@ export interface UseFocusTrapReturn<T extends HTMLElement = HTMLElement> {
  * - Listens to focus events on the document
  * - Redirects focus back into the container if it escapes
  * - Handles both Tab and Shift+Tab navigation
- * - Restores focus to the element that was focused before activation when the
- *   trap deactivates or unmounts, unless focus was already moved elsewhere
- *   (so consumers that restore focus themselves are unaffected)
  *
  * @example
  * ```
@@ -221,51 +217,6 @@ export function useFocusTrap<T extends HTMLElement = HTMLElement>(
     }
   }, []);
 
-  /**
-   * Capture the element focused before the trap activated, and restore focus to
-   * it when the trap deactivates (or the component unmounts). Overlays are
-   * opened imperatively (e.g. `showPopover()`), so the browser's declarative
-   * popover focus restoration does not apply — without this, closing a Popover
-   * via Escape or light dismiss drops keyboard focus to `<body>`.
-   *
-   * The restore is guarded so it never steals focus a consumer moved on
-   * purpose: it only runs when focus would otherwise be lost — i.e. the active
-   * element is nothing, the document body/root, or still inside the (possibly
-   * now-unmounted) trap container. If focus already moved to some other element
-   * outside the trap (the user clicked elsewhere, or a consumer such as
-   * DropdownMenu already refocused its trigger), the restore is a no-op.
-   */
-  useEffect(() => {
-    if (!isActive) {
-      return;
-    }
-
-    const previouslyFocused = document.activeElement as HTMLElement | null;
-    // Snapshot the container now; by cleanup it may be detached or unmounted.
-    const container = containerRef.current;
-
-    return () => {
-      const active = document.activeElement;
-      const focusWasLost =
-        active == null ||
-        active === document.body ||
-        active === document.documentElement ||
-        (container != null && container.contains(active));
-
-      if (!focusWasLost) {
-        return;
-      }
-
-      if (
-        previouslyFocused != null &&
-        previouslyFocused.isConnected &&
-        typeof previouslyFocused.focus === 'function'
-      ) {
-        previouslyFocused.focus();
-      }
-    };
-  }, [isActive]);
-
   /**
    * Handle focus events - redirect focus back into container if it escapes.
    * Only redirects for keyboard navigation, not mouse clicks.

package/src/hooks/useInteractiveRole.ts

@@ -11,14 +11,11 @@
  * Centralizes the "what element should I render as?" decision for
  * polymorphic components. The priority order:
  *
- *   1. href → 'link' (navigation always wins, unless disabled)
+ *   1. href → 'link' (navigation always wins)
  *   2. onClick → 'button' (explicit interactivity)
  *   3. interactive trigger context → 'button' (implicit via parent)
  *   4. else → 'inert' (non-interactive)
  *
- * A disabled `href` is excluded at step 1 and therefore resolves via the
- * remaining steps — 'inert' when no onClick or context applies.
- *
  * This hook is the single place to add new context-based triggers
  * (e.g., Popover, DropdownMenu, Disclosure). Components that consume
  * this hook never need updating when new trigger contexts are added.
@@ -52,12 +49,8 @@ export interface UseInteractiveRoleOptions {
   onClick?: ((...args: never[]) => unknown) | null;
 
   /**
-   * Whether the component is disabled. When true, an `href` is ignored for
-   * role resolution (a disabled link is an a11y anti-pattern), so the role is
-   * decided by the remaining inputs: `onClick` → `'button'`, an interactive
-   * context → its role, otherwise `'inert'`. In particular a disabled `href`
-   * with no `onClick` and no context override resolves to `'inert'`, not a
-   * link or a button.
+   * Whether the component is disabled. When true and href is provided,
+   * falls back to button (disabled links are an a11y anti-pattern).
    * @default false
    */
   isDisabled?: boolean;
@@ -90,8 +83,7 @@ export function useInteractiveRole({
 }: UseInteractiveRoleOptions): InteractiveRole {
   const contextRole = useInteractiveRoleContext();
 
-  // 1. href → link (unless disabled — a disabled href is skipped here and
-  // resolved by the checks below, landing on 'inert' if nothing else applies)
+  // 1. href → link (unless disabled — disabled links fall through to button)
   if (href != null && !isDisabled) {
     return 'link';
   }

package/src/hooks/useStreamingText.test.ts

@@ -8,10 +8,6 @@ describe('useStreamingText', () => {
   let rafCallbacks: ((time: number) => void)[];
   let originalRAF: typeof requestAnimationFrame;
   let originalCAF: typeof cancelAnimationFrame;
-  let originalMatchMedia: typeof window.matchMedia | undefined;
-  // Toggled per-test to drive the reduced-motion media query. Reset in
-  // beforeEach so the preference never leaks between tests.
-  let prefersReducedMotion: boolean;
 
   beforeEach(() => {
     rafCallbacks = [];
@@ -23,44 +19,33 @@ describe('useStreamingText', () => {
     });
     globalThis.cancelAnimationFrame = vi.fn();
 
-    // Mock matchMedia for useTheme → useMediaQuery and the hook's own
-    // reduced-motion read. Only the reduced-motion query reflects
-    // `prefersReducedMotion`; theme media queries always report no match.
-    prefersReducedMotion = false;
-    originalMatchMedia = window.matchMedia;
-    Object.defineProperty(window, 'matchMedia', {
-      configurable: true,
-      writable: true,
-      value: vi.fn().mockImplementation((query: string) => ({
-        matches: query.includes('prefers-reduced-motion')
-          ? prefersReducedMotion
-          : false,
-        media: query,
-        onchange: null,
-        addListener: vi.fn(),
-        removeListener: vi.fn(),
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-        dispatchEvent: vi.fn(),
-      })),
-    });
+    // Mock matchMedia for useTheme → useMediaQuery
+    if (!window.matchMedia) {
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: vi.fn().mockImplementation((query: string) => ({
+          matches: false,
+          media: query,
+          onchange: null,
+          addListener: vi.fn(),
+          removeListener: vi.fn(),
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+          dispatchEvent: vi.fn(),
+        })),
+      });
+    }
   });
 
   afterEach(() => {
     globalThis.requestAnimationFrame = originalRAF;
     globalThis.cancelAnimationFrame = originalCAF;
-    // Restore matchMedia so the mock never leaks into other suites. jsdom
-    // has no matchMedia by default, so drop the property when there was none.
-    if (originalMatchMedia === undefined) {
-      // @ts-expect-error jsdom leaves matchMedia undefined by default
-      delete window.matchMedia;
-    } else {
-      window.matchMedia = originalMatchMedia;
-    }
   });
 
   it('returns full text when not streaming', () => {
-    const {result} = renderHook(() => useStreamingText('Hello world', false));
+    const {result} = renderHook(() =>
+      useStreamingText('Hello world', false),
+    );
     expect(result.current).toBe('Hello world');
   });
 
@@ -71,26 +56,6 @@ describe('useStreamingText', () => {
     expect(result.current).toBe('Hello world');
   });
 
-  it('snaps to full text immediately when reduced motion is preferred', () => {
-    prefersReducedMotion = true;
-    const {result} = renderHook(() => useStreamingText('Hello world', true));
-    expect(result.current).toBe('Hello world');
-  });
-
-  it('keeps snapping to the full text on updates when reduced motion is preferred', () => {
-    prefersReducedMotion = true;
-    const {result, rerender} = renderHook(
-      ({text}) => useStreamingText(text, true),
-      {initialProps: {text: 'Hello'}},
-    );
-
-    expect(result.current).toBe('Hello');
-
-    // A later chunk arrives — it should appear in full, not reveal char-by-char.
-    rerender({text: 'Hello world'});
-    expect(result.current).toBe('Hello world');
-  });
-
   it('starts with empty string when streaming', () => {
     const {result} = renderHook(() => useStreamingText('Hello world', true));
     expect(result.current).toBe('');

package/src/hooks/useStreamingText.ts

@@ -4,7 +4,7 @@
 
 /**
  * @file useStreamingText.ts
- * @input Uses React useState, useEffect, useRef, useMediaQuery, useTheme
+ * @input Uses React useState, useEffect, useRef, useTheme
  * @output Exports useStreamingText hook for smooth text streaming
  * @position Core hook; smooths bursty streamed text into steady character reveal
  *
@@ -23,7 +23,6 @@
  */
 
 import {useEffect, useMemo, useRef, useState} from 'react';
-import {useMediaQuery} from './useMediaQuery';
 import {useTheme} from '../theme/useTheme';
 
 /**
@@ -72,9 +71,7 @@ const CHARS_PER_TICK = {
  * Smooths bursty streamed text into a steady character-by-character reveal.
  *
  * Returns a string that grows steadily toward `targetText`. When `isStreaming`
- * is false, returns the full `targetText` immediately. When the user prefers
- * reduced motion, the progressive reveal is skipped entirely and the full
- * `targetText` is returned immediately.
+ * is false, returns the full `targetText` immediately.
  *
  * The hook advances on word and syntax boundaries, avoiding slices inside
  * markdown markers like `**`, backticks, `[]()`, etc. This prevents visual
@@ -146,17 +143,9 @@ export function useStreamingText(
     }
   }
 
-  // Respect the user's reduced-motion preference — skip the progressive
-  // reveal and snap straight to the full text. Uses the package's SSR-safe
-  // useMediaQuery (useMediaQuery.ts) so the read stays in sync if the
-  // preference changes mid-stream.
-  const prefersReducedMotion = useMediaQuery(
-    '(prefers-reduced-motion: reduce)',
-  );
-
   // Animation loop
   useEffect(() => {
-    if (!isStreaming || speed === 'instant' || prefersReducedMotion) {
+    if (!isStreaming || speed === 'instant') {
       return;
     }
 
@@ -185,9 +174,9 @@ export function useStreamingText(
         rafRef.current = null;
       }
     };
-  }, [isStreaming, charsPerTick, tickMs, speed, prefersReducedMotion]);
+  }, [isStreaming, charsPerTick, tickMs, speed]);
 
-  if (!isStreaming || speed === 'instant' || prefersReducedMotion) {
+  if (!isStreaming || speed === 'instant') {
     return targetText;
   }
 

package/src/hooks/useTreeFocus.test.tsx

@@ -44,7 +44,9 @@ function Tree({
   const nodes = isOpen && expanded.length > 0 ? expanded : collapsed;
   const {treeRef, handleKeyDown} = useTreeFocus<HTMLUListElement>({
     onToggleExpand: () => setIsOpen(o => !o),
-    onActivate: onActivate ? (_item, id) => onActivate(id) : undefined,
+    onActivate: onActivate
+      ? (_item, id) => onActivate(id)
+      : undefined,
   });
   return (
     <ul ref={treeRef} role="tree" onKeyDown={handleKeyDown}>

package/src/reset.css

@@ -200,35 +200,6 @@
     height: auto;
   }
 
-  /* ===========================================================================
-     AspectRatio Fit Baseline
-     =========================================================================== */
-
-  /*
-   * Child sizing for AspectRatio's `fit` prop — the component marks the
-   * child's direct parent with `data-astryx-aspect-ratio-override` (carrying
-   * the fit value), and these direct-child rules size the child, so
-   * consumers don't hand-write width/height/object-fit on every media child.
-   * The marker sits on the parent itself, so the rules don't depend on
-   * AspectRatio's internal element structure or its theming surface. As with
-   * the [data-astryx-media] baseline below, the rules are zero-specificity
-   * and any styling the child sets itself still wins. `fit="center"` needs
-   * no rules here — the component centers the child from its own wrapper.
-   */
-  :where([data-astryx-aspect-ratio-override="cover"], [data-astryx-aspect-ratio-override="contain"])
-    > :where(*) {
-    width: 100%;
-    height: 100%;
-  }
-
-  :where([data-astryx-aspect-ratio-override="cover"]) > :where(img, video) {
-    object-fit: cover;
-  }
-
-  :where([data-astryx-aspect-ratio-override="contain"]) > :where(img, video) {
-    object-fit: contain;
-  }
-
   /* ===========================================================================
      Forms
      =========================================================================== */

package/src/theme/SyntaxTheme.doc.mjs

@@ -50,9 +50,9 @@ export const docs = {
           'Syntax themes support light-dark() tuples: each token can have different values for light and dark mode, resolved automatically by the color scheme.',
       },
       {
-        guidance: true,
+        guidance: false,
         description:
-          'For a single CodeBlock, pass the syntaxTheme prop directly: it is shorthand for wrapping that block in SyntaxTheme. Use the SyntaxTheme wrapper when theming a whole region of code components.',
+          'Wrap individual CodeBlock instances with SyntaxTheme: use the syntaxTheme prop on CodeBlock directly for per-instance overrides.',
       },
     ],
   },
@@ -96,9 +96,9 @@ export const docsDense = {
           'Syntax themes support light-dark() tuples: each token can have different values for light/dark mode, resolved automatically by color scheme.',
       },
       {
-        guidance: true,
+        guidance: false,
         description:
-          'Single CodeBlock: pass syntaxTheme prop (shorthand for wrapping in SyntaxTheme). Whole region of code components: wrap w/ SyntaxTheme.',
+          'Wrap individual CodeBlock instances w/ SyntaxTheme: use syntaxTheme prop on CodeBlock directly for per-instance overrides instead.',
       },
     ],
   },

package/src/theme/defineTheme.ts

@@ -56,8 +56,14 @@ import {
   generateTypeScaleComponents,
   type TypeScaleConfig,
 } from './expandTypeScale';
-import {expandMotionScale, type MotionScaleConfig} from './expandMotionScale';
-import {expandRadiusScale, type RadiusScaleConfig} from './expandRadiusScale';
+import {
+  expandMotionScale,
+  type MotionScaleConfig,
+} from './expandMotionScale';
+import {
+  expandRadiusScale,
+  type RadiusScaleConfig,
+} from './expandRadiusScale';
 import {expandColorScale, type ColorScaleConfig} from './expandColorScale';
 
 import type {DomainTokenName} from './domainTokens';
@@ -147,7 +153,10 @@ export type StyleOverrides = Record<string, string | Record<string, string>>;
  * }
  * ```
  */
-export type ComponentStyleMap = Record<string, Record<string, StyleOverrides>>;
+export type ComponentStyleMap = Record<
+  string,
+  Record<string, StyleOverrides>
+>;
 
 /** Input to defineTheme */
 export interface DefineThemeInput {
@@ -278,7 +287,7 @@ export interface DefineThemeInput {
   /**
    * Default syntax highlighting theme for code components.
    * Sets --color-syntax-* tokens at the theme root. Can be overridden
-   * per-region (or per-instance) by wrapping in SyntaxTheme.
+   * per-region via SyntaxTheme or per-instance via syntaxTheme prop.
    *
    * @example
    * ```tsx

package/src/theme/derivedVarRegistry.test.ts

@@ -14,8 +14,8 @@
 
 import {describe, it, expect} from 'vitest';
 import {derivedVarRegistry, getDerivedVars} from './derivedVarRegistry';
-import {readdirSync, readFileSync} from 'node:fs';
-import {join} from 'node:path';
+import {readdirSync, readFileSync} from 'fs';
+import {join} from 'path';
 
 const SRC_DIR = join(__dirname, '..');
 

package/src/theme/expandColorScale.test.ts

@@ -3,7 +3,6 @@
 import {describe, it, expect} from 'vitest';
 import {expandColorScale} from './expandColorScale';
 import {defineTheme} from './defineTheme';
-import {generateThemeRules} from './generateThemeRules';
 
 describe('expandColorScale', () => {
   it('produces all expected token keys', () => {
@@ -61,19 +60,6 @@ describe('expandColorScale', () => {
     expect(warm['--color-neutral']).not.toBe(neutral['--color-neutral']);
   });
 
-  it('emits derived accent tokens as references to --color-accent', () => {
-    const tokens = expandColorScale({accent: '#0064E0'});
-    // Reference tokens follow a scoped --color-accent override at runtime.
-    expect(tokens['--color-text-accent']).toBe('var(--color-accent)');
-    expect(tokens['--color-icon-accent']).toBe('var(--color-accent)');
-    expect(tokens['--color-accent-muted']).toBe(
-      'light-dark(color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 25%, transparent))',
-    );
-    // The base token and the contrast-computed on-accent stay resolved.
-    expect(tokens['--color-accent']).toMatch(/^light-dark\(#/);
-    expect(tokens['--color-on-accent']).toMatch(/^light-dark\(#/);
-  });
-
   it('contrast high produces different --color-text-primary than standard', () => {
     const standard = expandColorScale({
       accent: '#0064E0',
@@ -95,19 +81,4 @@ describe('expandColorScale + defineTheme integration', () => {
     });
     expect(theme.tokens['--color-accent']).toBe('red');
   });
-
-  it('generated theme CSS keeps the accent references (#3495)', () => {
-    const theme = defineTheme({
-      name: 'test-accent-refs',
-      color: {accent: '#DC2626'},
-    });
-    const css = generateThemeRules(theme).join('\n');
-    expect(css).toContain('--color-text-accent: var(--color-accent);');
-    expect(css).toContain('--color-icon-accent: var(--color-accent);');
-    expect(css).toContain(
-      '--color-accent-muted: light-dark(color-mix(in srgb, var(--color-accent) 20%, transparent), color-mix(in srgb, var(--color-accent) 25%, transparent));',
-    );
-    // The base token itself stays a resolved color pair.
-    expect(css).toMatch(/--color-accent: light-dark\(#/);
-  });
 });