@astryxdesign/core 0.1.7 → 0.1.8-canary.0c4d8d7

package/src/theme/defineTheme.ts

@@ -5,7 +5,7 @@
  *
  * Two distribution modes:
  * - Unbuilt: Theme generates CSS and injects a <style> tag at runtime
- * - Built: `npx astryx theme build` pre-compiles to a CSS file; Theme just
+ * - Built: `astryx theme build` pre-compiles to a CSS file; Theme just
  *   sets the data-astryx-theme attribute
  *
  * Token values can be:

package/src/theme/generateThemeRules.test.ts

@@ -190,6 +190,61 @@ describe('generateThemeRules', () => {
     expect(rules.some(r => r.includes('.astryx-text.accent'))).toBe(true);
   });
 
+  // --- Size-prop overrides (so `size` beats a themed `type`) ---
+
+  it('emits Text size-prop font-size overrides in the same layer as type rules', () => {
+    // Digit-leading sizes are prefixed (size-2xs); word sizes stay bare.
+    const sizeRule = rules.find(
+      r => r.includes('.astryx-text.size-2xs') && r.includes('font-size'),
+    );
+    expect(sizeRule).toBeDefined();
+    expect(sizeRule).toContain('var(--font-size-2xs)');
+
+    // `xsm` maps to the --font-size-xs token (matches sizeStyles).
+    const xsmRule = rules.find(r => r.includes('.astryx-text.xsm'));
+    expect(xsmRule).toBeDefined();
+    expect(xsmRule).toContain('var(--font-size-xs)');
+
+    // Overrides set only font-size — line-height/family come from `type`.
+    expect(xsmRule).not.toContain('line-height');
+  });
+
+  it('emits a size override for every TextSize value', () => {
+    const sizes = [
+      'size-4xs',
+      'size-3xs',
+      'size-2xs',
+      'xsm',
+      'sm',
+      'base',
+      'lg',
+      'xl',
+      'size-2xl',
+      'size-3xl',
+      'size-4xl',
+    ];
+    for (const cls of sizes) {
+      expect(
+        rules.some(
+          r => r.includes(`.astryx-text.${cls}`) && r.includes('font-size'),
+        ),
+      ).toBe(true);
+    }
+  });
+
+  it('orders size overrides after the themed type font-size rules', () => {
+    // Source order breaks specificity ties within a layer, so the size
+    // override must come after the `.astryx-text.<type>` type rule.
+    const typeIdx = rules.findIndex(
+      r => r.includes('.astryx-text.supporting') && r.includes('font-size'),
+    );
+    const sizeIdx = rules.findIndex(
+      r => r.includes('.astryx-text.size-2xs') && r.includes('font-size'),
+    );
+    expect(typeIdx).toBeGreaterThanOrEqual(0);
+    expect(sizeIdx).toBeGreaterThan(typeIdx);
+  });
+
   // --- Consistency ---
 
   it('generateThemeCSS returns prose and component blocks with @scope', () => {
@@ -202,6 +257,16 @@ describe('generateThemeRules', () => {
       expect(combined).toContain(rule);
     }
   });
+
+  it('routes Text size overrides into the component (astryx-theme) block', () => {
+    // The size override only beats a themed type if it lands in the same
+    // layer as the type rules (astryx-theme / component block), not the
+    // reset-tier prose block.
+    const {prose, component} = generateThemeCSS(theme);
+    expect(component).toContain('.astryx-text.size-2xs');
+    expect(component).toContain('.astryx-text.xsm');
+    expect(prose).not.toContain('.astryx-text.size-2xs');
+  });
 });
 
 describe('generateThemeRules with weight overrides', () => {

package/src/theme/generateThemeRules.ts

@@ -301,6 +301,10 @@ export function generateThemeRules(theme: DefinedTheme): string[] {
   // 4. Prop-level color overrides (for text/heading/link specificity)
   generateColorOverrides(theme.components || {}, parts);
 
+  // 5. Text `size`-prop font-size overrides (so an explicit size beats a
+  //    themed type's font-size across the astryx-base → astryx-theme layers)
+  generateSizeOverrides(theme.components || {}, parts);
+
   // (on-media rules are generated separately — see generateOnMediaCSS)
 
   return parts;
@@ -500,6 +504,58 @@ function generateColorOverrides(
   }
 }
 
+/**
+ * Map a Text `size` prop value to its raw font-size token.
+ * Mirrors `sizeStyles` in `Text/text.stylex.ts` (note `xsm` → `--font-size-xs`).
+ * <!-- SYNC: packages/core/src/Text/text.stylex.ts (sizeStyles) -->
+ */
+const TEXT_SIZE_TOKEN_MAP: Record<string, string> = {
+  '4xs': 'var(--font-size-4xs)',
+  '3xs': 'var(--font-size-3xs)',
+  '2xs': 'var(--font-size-2xs)',
+  xsm: 'var(--font-size-xs)',
+  sm: 'var(--font-size-sm)',
+  base: 'var(--font-size-base)',
+  lg: 'var(--font-size-lg)',
+  xl: 'var(--font-size-xl)',
+  '2xl': 'var(--font-size-2xl)',
+  '3xl': 'var(--font-size-3xl)',
+  '4xl': 'var(--font-size-4xl)',
+};
+
+/**
+ * Generate `size`-prop font-size overrides for the Text component.
+ *
+ * The `size` prop is documented as a font-size override that wins over the
+ * size implied by `type`. Its StyleX class lives in `@layer astryx-base`, but a
+ * theme's per-type font-size rule (`.astryx-text.<type>`) lives in the higher
+ * `@layer astryx-theme`, so the layer cascade let the theme silently shadow
+ * `size` for any `type` the theme styled. Re-emitting the size classes here —
+ * same layer as the type rules, same `.astryx-text.<x>` specificity, later in
+ * source — restores `size` as a real override.
+ *
+ * Only `font-size` is overridden; line-height and other type properties are
+ * intentionally preserved, matching the prop's documented contract.
+ *
+ * Gated on the theme touching `text` (which includes the auto-generated
+ * type-scale rules) — with no theme type rule to beat, the base-layer StyleX
+ * class already wins and no override is needed.
+ */
+function generateSizeOverrides(
+  components: Record<string, unknown>,
+  parts: string[],
+): void {
+  if (!('text' in components)) {
+    return;
+  }
+  for (const [sizeName, sizeValue] of Object.entries(TEXT_SIZE_TOKEN_MAP)) {
+    const suffix = parseStyleKey(`size:${sizeName}`);
+    parts.push(
+      `  ${componentClassSelector('text', suffix)} { font-size: ${sizeValue}; }`,
+    );
+  }
+}
+
 /**
  * Generate theme rules split into component and prose groups.
  *

package/src/theme/hct.ts

@@ -114,10 +114,6 @@ export function toneToY(tone: number): number {
   return labFInv((tone + 16) / 116);
 }
 
-export function yToTone(y: number): number {
-  return 116 * labF(y) - 16;
-}
-
 // =============================================================================
 // Hex <-> RGB
 // =============================================================================

package/src/utils/types.ts

@@ -12,6 +12,20 @@
  */
 export type SizeValue = number | string;
 
+/**
+ * Resting elevation level for configurable surfaces.
+ *
+ * Maps to the shadow token scale:
+ * - `none` = flat (`box-shadow: none`)
+ * - `low`  = `--shadow-low`
+ * - `med`  = `--shadow-med`
+ * - `high` = `--shadow-high`
+ *
+ * Components narrow this union to the steps they actually need — e.g. Card
+ * exposes all four, while ChatComposer exposes only `'none' | 'low'`.
+ */
+export type Elevation = 'none' | 'low' | 'med' | 'high';
+
 /**
  * Numeric spacing step from the Astryx spacing scale.
  *

package/dist/TreeList/treeListItem.markers.stylex.d.ts

@@ -1,16 +0,0 @@
-/**
- * @file treeListItem.markers.stylex.ts
- * @input Uses StyleX defineMarker
- * @output Exports treeItemScope marker
- * @position Scoped marker; consumed by TreeListItem.tsx
- *
- * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
- */
-import * as stylex from '@stylexjs/stylex';
-/**
- * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
- * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
- * a parent treeitem does not leak the focus ring onto descendant rows.
- */
-export declare const treeItemScope: ReturnType<typeof stylex.defineMarker>;
-//# sourceMappingURL=treeListItem.markers.stylex.d.ts.map

package/dist/TreeList/treeListItem.markers.stylex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"treeListItem.markers.stylex.d.ts","sourceRoot":"","sources":["../../src/TreeList/treeListItem.markers.stylex.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAE3C;;;;GAIG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,YAAY,CAC1C,CAAC"}

package/dist/TreeList/treeListItem.markers.stylex.js

@@ -1,22 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file treeListItem.markers.stylex.ts
- * @input Uses StyleX defineMarker
- * @output Exports treeItemScope marker
- * @position Scoped marker; consumed by TreeListItem.tsx
- *
- * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
- */
-
-import * as stylex from '@stylexjs/stylex';
-
-/**
- * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
- * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
- * a parent treeitem does not leak the focus ring onto descendant rows.
- */
-export const treeItemScope = {
-  x1g2q90y: "x1g2q90y",
-  $$css: true
-};

package/src/TreeList/treeListItem.markers.stylex.ts

@@ -1,20 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file treeListItem.markers.stylex.ts
- * @input Uses StyleX defineMarker
- * @output Exports treeItemScope marker
- * @position Scoped marker; consumed by TreeListItem.tsx
- *
- * SYNC: When modified, update /packages/core/src/TreeList/TreeListItem.tsx
- */
-
-import * as stylex from '@stylexjs/stylex';
-
-/**
- * Scoped marker placed on each treeitem row (`<li role="treeitem">`).
- * Binds the row's `:focus-visible` outline to its OWN treeitem, so focusing
- * a parent treeitem does not leak the focus ring onto descendant rows.
- */
-export const treeItemScope: ReturnType<typeof stylex.defineMarker> =
-  stylex.defineMarker();