fix(theme): make shared focus outlines themeable

[cixzhang]

Why

General interactive focus outlines were defined independently across components, which made small geometry/color differences easy to introduce and made product-style replication harder. This gap showed up while evaluating agentcloud and trying to replicate its styling through Astryx themes.

Astryx also has a design split: input/field focus treatments are distinct from general interactive chrome. This PR intentionally targets the general outline only.

Theme API

This PR makes the general focus outline themeable as a virtual component target:

defineTheme({
  name: 'custom',
  components: {
    'focus-outline': {
      base: {
        outlineOffset: '4px',
        ':focus-visible': {
          outline: '2px solid var(--color-accent)',
        },
        ':has(:focus-visible)': {
          outline: '2px solid var(--color-accent)',
        },
      },
    },
  },
});

Rendered general controls receive the shared astryx-focus-outline class through the new internal focusOutlineProps helper, so theme overrides attach to a single shared class instead of each component reconstructing outline CSS independently.

What

• Adds an internal focus-outline prop helper that applies both:
  • the default StyleX focus outline class, and
  • themeProps('focus-outline') / .astryx-focus-outline.
• Reuses that helper across general interactive chrome: buttons, links, navigation, cards, list/tree items, tabs, pagination, dialogs, and similar non-form controls.
• Keeps outline primitive values private inside the helper.
• Leaves form/input focus treatments out of scope.
• Documents astryx-focus-outline as a theme target and updates the theme-build registry test so virtual non-TSX targets are discovered.

Why not tokens?

Tokens would cover simple color/width/offset cases, but they do not model richer CSS treatments well: animated outlines, layered rings, or state-specific outline behavior. A virtual component-style target gives theme authors normal CSS override expressiveness without adding new outline tokens.

Open question

If we want a more guided API later, we can still add a top-level focusOutline config that compiles down to this same focus-outline theme target. This PR establishes the shared class target first.

Risk

Low-to-medium. The intended visual output stays the same for default themes, but the focus outline class is now shared and themeable across general controls. Inputs are intentionally unchanged.

Testing

• git diff --check
• pnpm -F @astryxdesign/core typecheck
• pnpm exec vitest run packages/cli/clients/cli/commands/build-theme.registry.test.mjs
• Commit hook: pnpm check:sync && pnpm check:package-boundaries && pnpm check:changesets && pnpm check:demo-media && pnpm check:executable-bits

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Error		Aug 3, 2026 3:08am

[cixzhang]

This is kind of nice to have which is an error-specific outline color.