@astryxdesign/core 0.2.0 → 0.3.0-canary.0b5a38e

package/src/theme/SyntaxTheme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'SyntaxTheme',
@@ -74,7 +74,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/theme/Theme.doc.mjs

@@ -1,6 +1,6 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-/** @type {import('../docs-types').ComponentDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentDoc} */
 
 export const docs = {
   name: 'Theme',
@@ -86,7 +86,7 @@ export const docs = {
   ],
 };
 
-/** @type {import('../docs-types').TranslationDoc} */
+/** @type {import('@astryxdesign/cli/authoring').ComponentTranslationDoc} */
 export const docsDense = {
   usage: {
     description:

package/src/theme/Theme.tsx

@@ -41,8 +41,8 @@ import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 import * as stylex from '@stylexjs/stylex';
 import type {ThemeMode} from './types';
 import {colorVars, typographyVars} from './tokens.stylex';
-import {registerIcons} from '../Icon/globalIconRegistry';
 import {generateThemeCSS, type DefinedTheme} from './defineTheme';
+import {registerTheme} from './themeRegistry';
 import {dataAttr} from '../naming';
 import {ThemeContext} from './useTheme';
 import {warnOnce} from '../utils/devWarning';
@@ -243,6 +243,8 @@ export function Theme({
 }: ThemeProps): React.ReactElement {
   const isNested = use(ThemeNestingContext);
 
+  registerTheme(theme);
+
   useThemeStyleInjection(theme);
   useRootThemeSync(isNested, mode, theme.name);
 
@@ -254,12 +256,6 @@ export function Theme({
         ? wrapperStyles.light
         : wrapperStyles.system;
 
-  // Icons — register globally (works in both server and client environments)
-  const icons = theme.icons;
-  if (icons != null) {
-    registerIcons(icons);
-  }
-
   // Memoize the context value to prevent unnecessary re-renders
   const ctxValue = useMemo(() => ({theme, mode}), [theme, mode]);
 

package/src/theme/contrast.test.ts

@@ -0,0 +1,94 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {relativeLuminance, compositeOver, contrastRatio} from './contrast';
+import {parseColor} from '../utils/color';
+
+describe('relativeLuminance', () => {
+  it('is 0 for black and 1 for white', () => {
+    expect(relativeLuminance({r: 0, g: 0, b: 0, a: 1})).toBe(0);
+    expect(relativeLuminance({r: 255, g: 255, b: 255, a: 1})).toBeCloseTo(
+      1,
+      10,
+    );
+  });
+
+  it('weights channels per WCAG (green brightest, blue darkest)', () => {
+    const red = relativeLuminance({r: 255, g: 0, b: 0, a: 1});
+    const green = relativeLuminance({r: 0, g: 255, b: 0, a: 1});
+    const blue = relativeLuminance({r: 0, g: 0, b: 255, a: 1});
+    expect(red).toBeCloseTo(0.2126, 4);
+    expect(green).toBeCloseTo(0.7152, 4);
+    expect(blue).toBeCloseTo(0.0722, 4);
+  });
+});
+
+describe('contrastRatio', () => {
+  it('is 21 for black on white and 1 for identical colors', () => {
+    expect(contrastRatio('#000000', '#FFFFFF')).toBeCloseTo(21, 5);
+    expect(contrastRatio('#3B82F6', '#3B82F6')).toBe(1);
+  });
+
+  it('is symmetric in fg/bg for opaque colors', () => {
+    expect(contrastRatio('#0064E0', '#FCFDFE')).toBeCloseTo(
+      contrastRatio('#FCFDFE', '#0064E0'),
+      10,
+    );
+  });
+
+  it('matches the canonical 4.5:1 boundary gray (#767676 on white)', () => {
+    const ratio = contrastRatio('#767676', '#FFFFFF');
+    expect(ratio).toBeGreaterThanOrEqual(4.5);
+    expect(ratio).toBeLessThan(4.6);
+  });
+
+  it('composites a translucent foreground over the background', () => {
+    // 50% black over white paints as mid-gray, not black.
+    const composited = contrastRatio('rgba(0, 0, 0, 0.5)', '#FFFFFF');
+    expect(composited).toBeLessThan(contrastRatio('#000000', '#FFFFFF'));
+    expect(composited).toBeCloseTo(
+      contrastRatio('rgb(127.5, 127.5, 127.5)', '#FFFFFF'),
+      10,
+    );
+  });
+
+  it('rejects a translucent background', () => {
+    expect(() => contrastRatio('#000000', '#FFFFFF80')).toThrow(
+      /background must be opaque/,
+    );
+  });
+
+  it('rejects unparseable colors', () => {
+    expect(() => contrastRatio('var(--color-accent)', '#FFFFFF')).toThrow(
+      /could not parse foreground/,
+    );
+    expect(() => contrastRatio('#000000', 'oklch(0.5 0.1 200)')).toThrow(
+      /could not parse background/,
+    );
+  });
+});
+
+describe('compositeOver', () => {
+  it('returns the foreground when opaque and the backdrop at alpha 0', () => {
+    const fg = parseColor('#123456');
+    const bg = parseColor('#FFFFFF');
+    if (fg === null || bg === null) {
+      throw new Error('fixture colors must parse');
+    }
+    expect(compositeOver(fg, bg)).toEqual({...fg, a: 1});
+    expect(compositeOver({...fg, a: 0}, bg)).toEqual({...bg, a: 1});
+  });
+
+  it('blends in gamma-encoded sRGB space like CSS', () => {
+    const fg = parseColor('rgba(0, 0, 0, 0.5)');
+    const bg = parseColor('#FFFFFF');
+    if (fg === null || bg === null) {
+      throw new Error('fixture colors must parse');
+    }
+    const out = compositeOver(fg, bg);
+    expect(out.r).toBeCloseTo(127.5, 5);
+    expect(out.g).toBeCloseTo(127.5, 5);
+    expect(out.b).toBeCloseTo(127.5, 5);
+    expect(out.a).toBe(1);
+  });
+});

package/src/theme/contrast.ts

@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file contrast.ts
+ * @input CSS color strings (hex, rgb()/rgba()) or parsed RGBA values
+ * @output WCAG 2.x relative luminance and contrast ratios
+ * @position Theme utility; consumed by expandColorScale.ts and theme tests
+ *
+ * Dependency-free WCAG 2.x contrast math. Backs the contrast guarantees
+ * for generated color tokens (WCAG 1.4.3 text contrast >= 4.5:1,
+ * WCAG 1.4.11 non-text contrast >= 3:1).
+ *
+ * Semi-transparent foregrounds are composited over their backdrop in
+ * gamma-encoded sRGB space (matching CSS alpha compositing) before the
+ * ratio is measured — a translucent token has no contrast of its own,
+ * only against what it renders on.
+ */
+
+import type {RGBA} from '../utils/color';
+import {parseColor} from '../utils/color';
+
+/**
+ * WCAG 2.x relative luminance of an sRGB color (alpha ignored).
+ * 0 = black, 1 = white.
+ *
+ * https://www.w3.org/WAI/WCAG22/Techniques/general/G18
+ */
+export function relativeLuminance(color: RGBA): number {
+  const channel = (c: number): number => {
+    const s = c / 255;
+    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+  };
+  return (
+    0.2126 * channel(color.r) +
+    0.7152 * channel(color.g) +
+    0.0722 * channel(color.b)
+  );
+}
+
+/**
+ * Composite a (possibly translucent) foreground over an opaque backdrop
+ * using standard source-over alpha blending in gamma-encoded sRGB space,
+ * matching how CSS paints translucent tokens. Returns an opaque color.
+ */
+export function compositeOver(foreground: RGBA, backdrop: RGBA): RGBA {
+  const a = foreground.a;
+  return {
+    r: foreground.r * a + backdrop.r * (1 - a),
+    g: foreground.g * a + backdrop.g * (1 - a),
+    b: foreground.b * a + backdrop.b * (1 - a),
+    a: 1,
+  };
+}
+
+function resolve(value: string | RGBA, label: string): RGBA {
+  if (typeof value !== 'string') {
+    return value;
+  }
+  const parsed = parseColor(value);
+  if (parsed === null) {
+    throw new TypeError(`contrastRatio: could not parse ${label} "${value}"`);
+  }
+  return parsed;
+}
+
+/**
+ * WCAG 2.x contrast ratio between a foreground and an opaque background.
+ * Returns a value in [1, 21].
+ *
+ * A translucent foreground is composited over the background first.
+ * A translucent background is rejected — composite it over its own
+ * backdrop before calling, since its rendered color is unknowable here.
+ *
+ * @example
+ * ```
+ * contrastRatio('#000000', '#FFFFFF'); // 21
+ * contrastRatio('#0D131A', '#FCFDFE') >= 4.5; // text-on-surface check
+ * ```
+ */
+export function contrastRatio(
+  foreground: string | RGBA,
+  background: string | RGBA,
+): number {
+  const bg = resolve(background, 'background');
+  if (bg.a < 1) {
+    throw new TypeError(
+      'contrastRatio: background must be opaque — composite it over its backdrop first',
+    );
+  }
+  let fg = resolve(foreground, 'foreground');
+  if (fg.a < 1) {
+    fg = compositeOver(fg, bg);
+  }
+  const lumA = relativeLuminance(fg);
+  const lumB = relativeLuminance(bg);
+  const lighter = Math.max(lumA, lumB);
+  const darker = Math.min(lumA, lumB);
+  return (lighter + 0.05) / (darker + 0.05);
+}

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,
+    },
+  ],
 };
 
 /**