@astryxdesign/core 0.2.0 → 0.3.0-canary.041a0ef

package/src/theme/defineTheme.test.ts

@@ -2,13 +2,12 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import type {IconRegistry} from '../Icon/globalIconRegistry';
-import {
-  defineTheme,
-  generateThemeCSS,
-  generateThemeCSSFlat,
-  isDefinedTheme,
-} from './defineTheme';
+import {defineTheme, generateThemeCSS, isDefinedTheme} from './defineTheme';
 
+function generateThemeTestCSS(theme: Parameters<typeof generateThemeCSS>[0]) {
+  const {prose, component} = generateThemeCSS(theme);
+  return [prose, component].filter(Boolean).join('\n\n');
+}
 describe('defineTheme', () => {
   it('creates a theme with name', () => {
     const theme = defineTheme({name: 'test'});
@@ -100,7 +99,7 @@ describe('generateThemeCSS', () => {
         '--radius-container': '16px',
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('@scope');
     expect(css).toContain('--color-accent: light-dark(#0077B6, #48CAE4)');
     expect(css).toContain('--radius-container: 16px');
@@ -110,7 +109,7 @@ describe('generateThemeCSS', () => {
 
   it('includes prose rules even with no overrides', () => {
     const theme = defineTheme({name: 'empty'});
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('@scope');
     expect(css).toContain(':where(h1, h2, h3, h4, h5, h6)');
     expect(css).toContain('font-family: var(--font-family-heading)');
@@ -192,7 +191,7 @@ describe('generateThemeCSS with components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-card {');
     expect(css).toContain('border-width: 2px');
     expect(css).toContain('border-color: var(--color-accent)');
@@ -211,7 +210,7 @@ describe('generateThemeCSS with components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-button.secondary');
     expect(css).toContain('background-color: rgba(0,0,0,0.06)');
   });
@@ -227,7 +226,7 @@ describe('generateThemeCSS with components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-button.destructive.sm');
     expect(css).toContain('padding: 2px 6px');
   });
@@ -241,7 +240,7 @@ describe('generateThemeCSS with components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('font-family: "Playfair Display", serif');
     expect(css).not.toContain('fontFamily');
   });
@@ -254,7 +253,7 @@ describe('generateThemeCSS with components', () => {
         card: {base: {borderWidth: '1px'}},
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('@scope');
     expect(css).toContain('--radius-container: 20px');
     expect(css).toContain('.astryx-card {');
@@ -488,7 +487,7 @@ describe('custom status via components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // parseStyleKey('status:neutral') → '.neutral', so CSS should have .astryx-banner.neutral
     expect(css).toContain('.astryx-banner.neutral');
     expect(css).toContain('background-color: var(--color-background-muted)');
@@ -521,7 +520,7 @@ describe('custom status via components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-button.primary-muted');
     expect(css).toContain('background-color: #ECF5FF');
   });
@@ -733,7 +732,7 @@ describe('pseudo-class overrides in components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // Base rule
     expect(css).toContain('.astryx-radio {');
     expect(css).toContain('border-color: #8F9296');
@@ -761,7 +760,7 @@ describe('pseudo-class overrides in components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-button.primary-muted {');
     expect(css).toContain('background-color: #ECF5FF');
     expect(css).toContain('.astryx-button.primary-muted:hover {');
@@ -783,7 +782,7 @@ describe('pseudo-class overrides in components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // Should NOT emit an empty base rule
     expect(css).not.toMatch(/\.astryx-switch\s*\{\s*\}/);
     // Should emit the pseudo rule
@@ -802,7 +801,7 @@ describe('pseudo-class overrides in components', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('.astryx-card {');
     expect(css).toContain('border-width: 2px');
     expect(css).toContain('border-color: var(--color-accent)');
@@ -821,7 +820,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // Should NOT emit raw padding property (only the scoped token)
     expect(css).not.toMatch(/[^-]padding: 20px/);
     // Should emit component-scoped shorthand token
@@ -840,7 +839,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-inline: 20px');
     expect(css).toContain('--astryx-card-padding-block-start: 16px');
     expect(css).toContain('--astryx-card-padding-block-end: 16px');
@@ -857,7 +856,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-inline: 16px');
     expect(css).toContain('--astryx-card-padding-block-start: 24px');
     expect(css).toContain('--astryx-card-padding-block-end: 24px');
@@ -875,7 +874,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // Section — uniform → shorthand
     expect(css).toContain('--astryx-section-padding: 12px');
     // Dialog — asymmetric → directional
@@ -892,7 +891,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // Button is not a container — padding passes through as-is
     expect(css).toContain('padding: 8px 16px');
     expect(css).not.toContain('--astryx-button-padding');
@@ -911,7 +910,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     // Non-padding props pass through
     expect(css).toContain('--_card-radius: 16px');
     expect(css).toContain('background-color: white');
@@ -929,7 +928,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-block-start: 16px');
     expect(css).toContain('--astryx-card-padding-block-end: 12px');
     expect(css).toContain('--astryx-card-padding-inline: 20px');
@@ -944,7 +943,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-block-start: 16px');
     expect(css).toContain('--astryx-card-padding-block-end: 24px');
   });
@@ -958,7 +957,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-inline-start: 12px');
     expect(css).toContain('--astryx-card-padding-inline-end: 20px');
   });
@@ -972,7 +971,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-block-start: 32px');
     expect(css).not.toContain('--astryx-card-padding-block-end');
     expect(css).not.toContain('--astryx-card-padding-inline');
@@ -987,7 +986,7 @@ describe('container padding mapping', () => {
         },
       },
     });
-    const css = generateThemeCSSFlat(theme);
+    const css = generateThemeTestCSS(theme);
     expect(css).toContain('--astryx-card-padding-inline-start: 8px');
     expect(css).toContain('--astryx-card-padding-inline-end: 24px');
   });

package/src/theme/defineTheme.ts

@@ -45,7 +45,6 @@ import {
   shadowDefaults,
   durationDefaults,
   easeDefaults,
-  transitionDefaults,
   typographyDefaults,
   textSizeDefaults,
   fontWeightDefaults,
@@ -63,6 +62,7 @@ import {expandColorScale, type ColorScaleConfig} from './expandColorScale';
 import type {DomainTokenName} from './domainTokens';
 import {domainTokenDefaults} from './domainTokens';
 import type {SyntaxThemeDefinition} from './syntax';
+import {registerTheme} from './themeRegistry';
 
 // =============================================================================
 // Types
@@ -77,7 +77,6 @@ export type CoreTokenName =
   | keyof typeof shadowDefaults
   | keyof typeof durationDefaults
   | keyof typeof easeDefaults
-  | keyof typeof transitionDefaults
   | keyof typeof typographyDefaults
   | keyof typeof textSizeDefaults
   | keyof typeof fontWeightDefaults
@@ -239,9 +238,15 @@ export interface DefineThemeInput {
    * categorical hues, and fixed tokens (on-dark/on-light) use defaults.
    * Explicit `tokens` entries always take precedence.
    *
+   * `accent` is optional — omit it for a neutral-only theme, which keeps
+   * the default accent tokens and only themes the neutrals.
+   *
    * @example
    * ```tsx
    * color: { accent: '#0064E0', neutralStyle: 'cool', contrast: 'standard' }
+   *
+   * // Neutral-only — accent tokens stay at their defaults
+   * color: { neutralStyle: 'warm' }
    * ```
    */
   color?: ColorScaleConfig;
@@ -360,7 +365,6 @@ export const tokenDefaults: Record<string, string> = {
   ...shadowDefaults,
   ...durationDefaults,
   ...easeDefaults,
-  ...transitionDefaults,
   ...typographyDefaults,
   ...textSizeDefaults,
   ...fontWeightDefaults,
@@ -618,7 +622,7 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
       ? {...base.icons, ...input.icons}
       : (input.icons ?? base?.icons);
 
-  return {
+  const theme: DefinedTheme = {
     name: input.name,
     tokens,
     components,
@@ -627,6 +631,9 @@ export function defineTheme(input: DefineThemeInput): DefinedTheme {
     __onDark,
     __onLight,
   };
+
+  registerTheme(theme);
+  return theme;
 }
 
 // =============================================================================
@@ -638,7 +645,6 @@ export {
   generateThemeRulesSplit,
   generateOnMediaCSS,
   generateThemeCSS,
-  generateThemeCSSFlat,
   type ThemeRulesSplit,
   type ThemeCSSOutput,
 } from './generateThemeRules';

package/src/theme/derivedVarRegistry.test.ts

@@ -186,7 +186,6 @@ function discoverComponents(): ComponentInfo[] {
 // ---------------------------------------------------------------------------
 
 const DIR_TO_REGISTRY_KEY: Record<string, string> = {
-  Avatar: 'avatar',
   Banner: 'banner',
   Button: 'button',
   Card: 'card',
@@ -198,6 +197,7 @@ const DIR_TO_REGISTRY_KEY: Record<string, string> = {
   Popover: 'popover',
   Section: 'section',
   SegmentedControl: 'segmented-control',
+  TextArea: 'textarea',
 };
 
 /**
@@ -340,4 +340,11 @@ describe('getDerivedVars', () => {
   it('returns empty for unregistered property', () => {
     expect(getDerivedVars('card', 'color')).toEqual([]);
   });
+
+  it('marks textarea paddingInline as replacing the source property', () => {
+    const result = getDerivedVars('textarea', 'paddingInline');
+    expect(result).toHaveLength(1);
+    expect(result[0].vars).toEqual(['--_textarea-inline-padding']);
+    expect(result[0].replaces).toBe(true);
+  });
 });

package/src/theme/derivedVarRegistry.ts

@@ -25,6 +25,14 @@ export interface DerivedVarEntry {
   vars?: string[];
   /** Named expansion strategy. 'container' expands padding to container tokens. */
   expand?: 'container';
+  /**
+   * Emit only the internal `vars`, dropping the source property from the rule.
+   * Use when the class-carrying element must NOT receive the standard property
+   * itself — the value is consumed by a child through the var instead. Without
+   * this, the property is emitted alongside the var (correct when the same
+   * element both reads the var and applies the property, e.g. Chat/DropdownMenu).
+   */
+  replaces?: boolean;
 }
 
 /**
@@ -35,12 +43,6 @@ export interface DerivedVarEntry {
  * entries share the same property.
  */
 export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
-  avatar: [
-    {property: 'fontSize', vars: ['--_avatar-fallback-font-size']},
-    {property: 'fontWeight', vars: ['--_avatar-fallback-font-weight']},
-    {property: 'color', vars: ['--_avatar-fallback-color']},
-    {property: 'backgroundColor', vars: ['--_avatar-fallback-background']},
-  ],
   banner: [{property: 'borderRadius', vars: ['--_banner-radius']}],
   button: [{property: 'borderRadius', vars: ['--_button-radius']}],
   card: [
@@ -67,6 +69,13 @@ export const derivedVarRegistry: Record<string, DerivedVarEntry[]> = {
     {property: 'borderRadius', vars: ['--_segmented-control-radius']},
     {property: 'padding', vars: ['--_segmented-control-padding']},
   ],
+  textarea: [
+    {
+      property: 'paddingInline',
+      vars: ['--_textarea-inline-padding'],
+      replaces: true,
+    },
+  ],
 };
 
 /**