@astryxdesign/cli 0.5.0-canary.32a62fd → 0.5.0-canary.408cef2

package/api/template/data-token-fallbacks.test.mjs

@@ -0,0 +1,85 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Asserts every `var(--color-data-*, <hex>)` fallback in the dashboard
+ * templates equals the token's own default.
+ *
+ * The fallback is what paints when the token does not resolve, so a fallback
+ * that differs from its token makes the same chart series two different colours
+ * depending on whether a theme is present. Three of them had drifted
+ * (`#22c55e`, `#E5484D`, `#008E80`), which is also why "the defaults are
+ * byte-identical to the template fallbacks" was not true.
+ */
+
+import {describe, it, expect} from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import {fileURLToPath} from 'node:url';
+import {dataTokenDefaults} from '@astryxdesign/core/theme';
+
+const TEMPLATES_DIR = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../assets/templates',
+);
+const CALL_SITE = /var\(\s*(--color-data-[a-z0-9-]+)\s*,\s*([^)]+?)\s*\)/g;
+
+/** The light side of a `light-dark(a, b)` pair — what a template falls back to. */
+function lightSide(value) {
+  const match = /^light-dark\(\s*([^,]+?)\s*,/.exec(value);
+  return match ? match[1] : value;
+}
+
+function walk(dir) {
+  return fs.readdirSync(dir, {withFileTypes: true}).flatMap(entry => {
+    const full = path.join(dir, entry.name);
+    return entry.isDirectory() ? walk(full) : [full];
+  });
+}
+
+function callSites() {
+  const sites = [];
+  for (const file of walk(TEMPLATES_DIR)) {
+    if (!/\.(tsx|ts|jsx|js|mjs|css)$/.test(file)) {
+      continue;
+    }
+    fs.readFileSync(file, 'utf-8')
+      .split('\n')
+      .forEach((line, index) => {
+        for (const match of line.matchAll(CALL_SITE)) {
+          sites.push({
+            where: `${path.relative(TEMPLATES_DIR, file)}:${index + 1}`,
+            token: match[1],
+            fallback: match[2],
+          });
+        }
+      });
+  }
+  return sites;
+}
+
+describe('template --color-data-* fallbacks', () => {
+  const sites = callSites();
+
+  it('finds the call sites at all', () => {
+    expect(sites.length).toBeGreaterThan(40);
+  });
+
+  it('names a real token at every call site', () => {
+    const unknown = sites.filter(site => !dataTokenDefaults[site.token]);
+    expect(unknown.map(site => `${site.where} ${site.token}`)).toEqual([]);
+  });
+
+  it('matches each token default exactly', () => {
+    const drifted = sites
+      .filter(site => dataTokenDefaults[site.token])
+      .filter(
+        site => site.fallback !== lightSide(dataTokenDefaults[site.token]),
+      )
+      .map(
+        site =>
+          `${site.where} ${site.token}: ${site.fallback} != ${lightSide(dataTokenDefaults[site.token])}`,
+      );
+
+    expect(drifted).toEqual([]);
+  });
+});

package/api/theme/build/build.mjs

@@ -62,12 +62,14 @@ import {
 /** @type {any} */ let _defineTheme = null;
 /** @type {any} */ let _generateThemeRulesSplit = null;
 /** @type {any} */ let _generateOnMediaCSS = null;
+/** @type {any} */ let _generateThemeCSS = null;
 /** @type {any} */ let _coreImportError = null;
 try {
   const coreTheme = await import('@astryxdesign/core/theme');
   _defineTheme = coreTheme.defineTheme;
   _generateThemeRulesSplit = coreTheme.generateThemeRulesSplit;
   _generateOnMediaCSS = coreTheme.generateOnMediaCSS;
+  _generateThemeCSS = coreTheme.generateThemeCSS;
 } catch (e) {
   // Capture the reason so the theme action can surface a precise, actionable
   // error. We don't throw here: this module is imported eagerly by the CLI
@@ -1166,8 +1168,15 @@ export async function themeBuild(
     if (component.length > 0) {
       const componentInner = component.join('\n\n');
       const componentScope = `@scope (${scopeSelector}) to (${scopeTo}) {\n${componentInner}\n}`;
-      // #3658: also emit attribute-specific rules so <Theme mode> can override color-scheme
-      const colorSchemeDecl = componentScope.includes('light-dark(')
+      // #3658: also emit attribute-specific rules so <Theme mode> can override color-scheme.
+      // Decided from the theme's own values, not the generated CSS: that CSS
+      // also carries the data-token defaults, which are light-dark() pairs, so
+      // a substring check on it would fire for every theme.
+      const themeOwnValues = JSON.stringify([
+        resolvedTheme.tokens ?? {},
+        resolvedTheme.components ?? {},
+      ]);
+      const colorSchemeDecl = themeOwnValues.includes('light-dark(')
         ? '  :root { color-scheme: light dark; }\n  html[data-theme="light"] { color-scheme: light; }\n  html[data-theme="dark"] { color-scheme: dark; }\n\n'
         : '';
       cssParts.push(
@@ -1185,6 +1194,23 @@ export async function themeBuild(
       logger.log('No overrides found — nothing to build.');
       return null;
     }
+    // The data-token defaults are theme-independent and go in @layer
+    // astryx-base, below the theme's own overrides. Taken from the runtime's
+    // own generator so the two paths cannot emit different bytes.
+    // Placed after the reset block and before the theme block: a layer's order
+    // is fixed by where it is first declared, so emitting it anywhere else in
+    // the file would invert reset < astryx-base < astryx-theme for a consumer
+    // who imports this stylesheet on its own.
+    const baseCss = _generateThemeCSS
+      ? _generateThemeCSS(resolvedTheme).base
+      : '';
+    if (baseCss) {
+      cssParts.splice(
+        prose.length > 0 ? 1 : 0,
+        0,
+        `@layer astryx-base {\n${baseCss}\n}`,
+      );
+    }
     css = cssParts.join('\n\n') + '\n';
   }
 

package/api/theme/themeTargets.doc.mjs

@@ -18,9 +18,9 @@ export const doc = {
     'Enumerates the whole themeable surface: each `defineTheme` components key, the stable ' +
     'class it paints, the component that declares it, and the props and states that are legal ' +
     'override keys under it. Same source as the Theming table `astryx component <Name>` prints ' +
-    '— the component docs — so the list cannot drift from the components, and `theme build` ' +
+    '(the component docs), so the list cannot drift from the components, and `theme build` ' +
     'validates overrides against this exact set. A filter naming a component gives that ' +
-    'component\u2019s set; anything else is a substring search over the keys.',
+    'component\'s set; anything else is a substring search over the keys.',
   importPath: '@astryxdesign/cli/api',
   signature:
     'themeTargets(filter?: string, ctx?: {cwd?: string}): Promise<ThemeTargetsResponse>',
@@ -35,7 +35,7 @@ export const doc = {
     {
       name: 'ctx.cwd',
       type: 'string',
-      description: 'Directory the project’s @astryxdesign/core is resolved from.',
+      description: 'Directory the project\'s @astryxdesign/core is resolved from.',
     },
   ],
   returns: [

package/assets/templates/blocks/components/Step/StepContent.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Step — Content Slot',
   displayName: 'Step — Content Slot',
   description:
-    'Children passed to a Step render below its description, indented to line up with the label rather than the indicator, and stay outside the clickable label area so buttons inside remain their own targets. In a full flow you gate the slot on the step being active — that is what turns a vertical stepper into an expanding one.',
+    'Children passed to a Step render below its description, indented to line up with the label rather than the indicator, and stay outside the clickable label area so buttons inside remain their own targets. In a full flow you gate the slot on the step being active. That is what turns a vertical stepper into an expanding one.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Stepper', 'Step', 'TextInput', 'Button'],

package/assets/templates/blocks/components/Stepper/StepperCustomContent.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Stepper — Custom Content',
   displayName: 'Stepper — Custom Content',
   description:
-    'A vertical stepper where each step owns a slice of the page. The content slot takes any node — form fields, a summary panel, a banner — so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
+    'A vertical stepper where each step owns a slice of the page. The content slot takes any node (form fields, a summary panel, a banner), so a stepper is not limited to multi-step forms. Rendering the slot only for the active step is what makes the flow expand one step at a time.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: [

package/assets/templates/pages/dashboard-cohort-funnel/page.tsx

@@ -79,7 +79,7 @@ const COLORS = {
   green: 'var(--color-data-categorical-green, #0B991F)',
   orange: 'var(--color-data-categorical-orange, #EB6E00)',
   purple: 'var(--color-data-categorical-purple, #6B1EFD)',
-  teal: 'var(--color-data-categorical-teal, #008E80)',
+  teal: 'var(--color-data-categorical-teal, #08A3A3)',
 };
 const GRID_STROKE = 'var(--color-border, rgba(5, 54, 89, 0.1))';
 const AXIS_TICK = {

package/assets/templates/pages/dashboard-data/page.tsx

@@ -98,7 +98,7 @@ const COLORS = {
   green: 'var(--color-data-categorical-green, #0B991F)',
   orange: 'var(--color-data-categorical-orange, #EB6E00)',
   purple: 'var(--color-data-categorical-purple, #6B1EFD)',
-  teal: 'var(--color-data-categorical-teal, #008E80)',
+  teal: 'var(--color-data-categorical-teal, #08A3A3)',
   neutral: 'var(--color-data-neutral, #8494A3)',
 };
 const GRID_STROKE = 'var(--color-border, rgba(5, 54, 89, 0.1))';

package/assets/templates/pages/dashboard-portfolio/page.tsx

@@ -370,12 +370,12 @@ function PortfolioChart() {
           <linearGradient id="portfolioGradient" x1="0" y1="0" x2="0" y2="1">
             <stop
               offset="5%"
-              stopColor="var(--color-data-categorical-green, #22c55e)"
+              stopColor="var(--color-data-categorical-green, #0B991F)"
               stopOpacity={0.3}
             />
             <stop
               offset="95%"
-              stopColor="var(--color-data-categorical-green, #22c55e)"
+              stopColor="var(--color-data-categorical-green, #0B991F)"
               stopOpacity={0.05}
             />
           </linearGradient>
@@ -417,7 +417,7 @@ function PortfolioChart() {
         <Area
           type="linear"
           dataKey="value"
-          stroke="var(--color-data-categorical-green, #22c55e)"
+          stroke="var(--color-data-categorical-green, #0B991F)"
           strokeWidth={1.5}
           fill="url(#portfolioGradient)"
           dot={false}
@@ -434,7 +434,7 @@ function Sparkline({data, positive}: {data: number[]; positive: boolean}) {
   const chartData = data.map((v, i) => ({i, v}));
   const color = positive
     ? 'var(--color-data-categorical-green, #0B991F)'
-    : 'var(--color-data-categorical-red, #E5484D)';
+    : 'var(--color-data-categorical-red, #F5394F)';
   return (
     <ResponsiveContainer width="100%" height={40}>
       <LineChart
@@ -503,7 +503,7 @@ function TrendSparkline({data, positive}: {data: number[]; positive: boolean}) {
   const chartData = data.map((v, i) => ({i, v}));
   const color = positive
     ? 'var(--color-data-categorical-green, #0B991F)'
-    : 'var(--color-data-categorical-red, #E5484D)';
+    : 'var(--color-data-categorical-red, #F5394F)';
   return (
     <ResponsiveContainer width="100%" height={24}>
       <LineChart

package/assets/templates/pages/dashboard-service-monitoring/page.tsx

@@ -727,7 +727,7 @@ interface ChartLine {
 const BLUE = 'var(--color-data-categorical-blue, #0171E3)';
 const ORANGE = 'var(--color-data-categorical-orange, #EB6E00)';
 const PURPLE = 'var(--color-data-categorical-purple, #6B1EFD)';
-const TEAL = 'var(--color-data-categorical-teal, #008E80)';
+const TEAL = 'var(--color-data-categorical-teal, #08A3A3)';
 
 const LATENCY_LINES: ChartLine[] = [
   {key: 'p50', name: 'p50', color: BLUE},

package/assets/templates/pages/theme-showcase/page.tsx

@@ -153,14 +153,16 @@ const styles: Record<string, CSSProperties> = {
     flex: 1,
   },
   quantityInput: {
-    // minWidth (not a hard width) so the field grows to fit the digit + the
-    // theme's input padding. A fixed 40px was too tight on themes with larger
-    // padding / bigger type scale (e.g. Matcha, Y2K), clipping the value.
-    minWidth: 64,
     flexShrink: 0,
   },
+  // `auto` basis so the button wraps to its own line rather than ellipsizing.
   cartButton: {
-    flex: 1,
+    flex: '1 1 auto',
+    minWidth: 0,
+  },
+  cartRow: {
+    width: '100%',
+    minWidth: 0,
   },
 };
 
@@ -236,6 +238,18 @@ const inlineStyles: Record<string, CSSProperties> = {
     display: 'flex',
     flexDirection: 'column',
   },
+  // Flex bases, not grid tracks: the checkout form needs a width floor, and the
+  // chat wraps to its own row rather than squeezing it under one.
+  checkoutColumn: {
+    flex: '1 1 300px',
+    minWidth: 0,
+    display: 'grid',
+  },
+  chatColumn: {
+    flex: '2 1 520px',
+    minWidth: 0,
+    display: 'grid',
+  },
 };
 
 const PRODUCT_IMAGE_KEYS = ['watch', 'headphones', 'backpack'];
@@ -284,8 +298,7 @@ const DEFAULT_PRODUCTS: ProductSpec[] = [
 // scaffolded template renders real imagery without needing local public assets.
 const DEFAULT_IMAGES: Record<string, string> = {
   watch: '/template-assets/Neutral-Watch.png',
-  headphones:
-    '/template-assets/Neutral-Headphones.png',
+  headphones: '/template-assets/Neutral-Headphones.png',
   backpack: '/template-assets/Neutral-Backpack.png',
   wallet: '/template-assets/Neutral-Wallet.png',
   tumbler: '/template-assets/Neutral-Tumbler.png',
@@ -350,14 +363,14 @@ function CardShowcase({
 
   return (
     <VStack gap={8}>
-      <Grid columns={columns} gap={4}>
-        <GridSpan columns={1}>
+      <HStack gap={4} wrap="wrap">
+        <div style={inlineStyles.checkoutColumn}>
           <CheckoutCard isMobile={isMobile} />
-        </GridSpan>
-        <GridSpan columns={isMobile ? 1 : 2}>
+        </div>
+        <div style={inlineStyles.chatColumn}>
           <ChatCard />
-        </GridSpan>
-      </Grid>
+        </div>
+      </HStack>
       <Grid columns={columns} gap={4}>
         <GridSpan columns={isMobile ? 1 : 3}>
           <InventoryCard images={images} inventory={inventory} />
@@ -472,7 +485,12 @@ function StorePreview({
                           }}>
                           {p.description}
                         </Text>
-                        <HStack gap={2} vAlign="center" hAlign="center">
+                        <HStack
+                          gap={2}
+                          vAlign="center"
+                          hAlign="center"
+                          wrap="wrap"
+                          style={styles.cartRow}>
                           <NumberInput
                             label="Quantity"
                             isLabelHidden
@@ -481,6 +499,7 @@ function StorePreview({
                             min={1}
                             max={99}
                             size="sm"
+                            width={72}
                             style={styles.quantityInput}
                           />
                           <Button
@@ -506,7 +525,7 @@ function StorePreview({
 
 function CheckoutCard({isMobile}: {isMobile: boolean}) {
   return (
-    <Card padding={5} style={styles.card}>
+    <Card padding={isMobile ? 4 : 5} style={styles.card}>
       <VStack gap={4} style={styles.checkoutStack}>
         <Heading level={2}>Checkout</Heading>
 
@@ -560,7 +579,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             <Text type="supporting" weight="bold">
               Payment method
             </Text>
-            <Grid columns={isMobile ? 1 : {minWidth: 70, max: 3}} gap={2}>
+            <Grid columns={isMobile ? 1 : {minWidth: 80, max: 3}} gap={2}>
               <SelectableCard
                 label="Pay with card"
                 isSelected={true}
@@ -614,7 +633,7 @@ function CheckoutCard({isMobile}: {isMobile: boolean}) {
             placeholder="1234 1234 1234 1234"
             value=""
             onChange={() => {}}
-            startIcon={<CreditCard size={16} />}
+            startIcon={isMobile ? undefined : <CreditCard size={16} />}
             size="lg"
           />
 

package/assets/templates/themes/stone/stoneTheme.ts

@@ -105,7 +105,9 @@ export const stoneTheme = defineTheme({
 
     // Text — H=291
     '--color-text-primary': ['#25252a', '#f3f3f5'], // light: Stone Neutral T15
-    '--color-text-secondary': ['#83838a', '#9d9da3'], // T55 C=4 / T65 C=3
+    // T40/T70 keeps normal secondary text above AA on every stone surface,
+    // including the muted and tinted fills that components pair it with.
+    '--color-text-secondary': ['#5e5e63', '#ababb0'], // Stone Neutral T40 / T70
     '--color-text-disabled': ['#d7d7da', '#5e5e61'], // T86 C=1.6 / T40 C=2
     '--color-text-accent': ['#25252a', '#f3f3f5'], // light: Stone Neutral T15
     '--color-on-dark': '#FFFFFF',

package/clients/cli/commands/build-theme.color-scheme.test.mjs

@@ -17,7 +17,9 @@
  *   html[data-theme="dark"] { color-scheme: dark; }
  *
  * Themes that never use `light-dark()` have no `color-scheme` ambiguity to
- * resolve, so none of the three rules should be emitted for them.
+ * resolve, so none of the three rules should be emitted for them — the
+ * generated CSS still carries the `--color-data-*` defaults, which are
+ * `light-dark()` pairs, so the decision reads the theme's own values.
  *
  * Building `astryx theme build` requires a compiled @astryxdesign/core (there is no in-CLI
  * fallback generator), so this suite builds core once in beforeAll via the
@@ -67,10 +69,9 @@ describe('theme build color-scheme output', () => {
     const project = path.join(tmpDir, 'project');
     const themesDir = path.join(project, 'themes');
     // A raw light-dark() token value is what triggers the color-scheme
-    // injection in build-theme.mjs (it checks the generated CSS for the
-    // literal substring). `defineTheme.test.ts` already covers the separate
-    // [light, dark] tuple -> light-dark() conversion; this fixture writes
-    // the string directly so this test stays focused on the CLI's own
+    // injection in build-theme.mjs. `defineTheme.test.ts` already covers the
+    // separate [light, dark] tuple -> light-dark() conversion; this fixture
+    // writes the string directly so this test stays focused on the CLI's own
     // color-scheme decision, not on that conversion.
     const themeFile = writeTheme(themesDir, 'with-light-dark', {
       '--color-accent': 'light-dark(#0077B6, #48CAE4)',
@@ -123,7 +124,7 @@ describe('theme build color-scheme output', () => {
     expect(fs.existsSync(cssPath)).toBe(true);
     const css = fs.readFileSync(cssPath, 'utf-8');
 
-    expect(css).not.toContain('light-dark(');
+    expect(css).toContain('--color-accent: #0077B6');
     expect(css).not.toContain(COLOR_SCHEME_ROOT_DECL);
     expect(css).not.toContain(COLOR_SCHEME_LIGHT_DECL);
     expect(css).not.toContain(COLOR_SCHEME_DARK_DECL);

package/clients/cli/commands/build-theme.data-tokens.test.mjs

@@ -0,0 +1,115 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Asserts `astryx theme build` emits the `--color-data-*` defaults the
+ * way the `<Theme>` runtime does — once, at `:root`, in `@layer astryx-base`.
+ *
+ * Seeding them into the theme's own `@scope` block instead makes every nested
+ * `<Theme>` re-declare the default and shadow a parent theme's override, which
+ * no other token family does. Layer order is fixed by first declaration, so
+ * the base block also has to sit after `@layer reset` and before
+ * `@layer astryx-theme` for a consumer who imports this stylesheet alone.
+ *
+ * Building requires a compiled @astryxdesign/core, so this suite builds core
+ * once in beforeAll via the shared ensureCoreBuilt() helper.
+ */
+
+import {describe, it, expect, beforeAll, beforeEach, afterEach} from 'vitest';
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as os from 'node:os';
+import {ensureCoreBuilt} from './ensure-core-built.mjs';
+import {runCli} from '../../../test-utils/run-cli.mjs';
+
+function writeTheme(dir, name, theme) {
+  fs.mkdirSync(dir, {recursive: true});
+  const file = path.join(dir, `${name}.mjs`);
+  fs.writeFileSync(
+    file,
+    `export default ${JSON.stringify({name, ...theme})};\n`,
+  );
+  return file;
+}
+
+async function buildTheme(tmpDir, name, theme) {
+  const project = path.join(tmpDir, 'project');
+  const themesDir = path.join(project, 'themes');
+  const themeFile = writeTheme(themesDir, name, theme);
+
+  const result = await runCli(
+    ['theme', 'build', path.relative(project, themeFile)],
+    project,
+  );
+  expect(result.code).toBe(0);
+
+  return fs.readFileSync(path.join(themesDir, `${name}.css`), 'utf-8');
+}
+
+beforeAll(() => {
+  ensureCoreBuilt();
+}, 200_000);
+
+let tmpDir;
+beforeEach(() => {
+  tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'astryx-build-theme-data-'));
+});
+afterEach(() => {
+  fs.rmSync(tmpDir, {recursive: true, force: true});
+});
+
+describe('theme build data token output', () => {
+  it('emits the defaults once, at :root, in @layer astryx-base', async () => {
+    const css = await buildTheme(tmpDir, 'charts-untouched', {
+      tokens: {'--color-accent': '#0077B6'},
+    });
+
+    const baseStart = css.indexOf('@layer astryx-base');
+    expect(baseStart).toBeGreaterThanOrEqual(0);
+
+    const baseBlock = css.slice(baseStart, css.indexOf('@layer astryx-theme'));
+    expect(baseBlock).toContain(':root {');
+    expect(baseBlock).toContain('--color-data-categorical-blue:');
+    expect(baseBlock).toContain('--color-data-gray-1:');
+    expect(css.match(/--color-data-categorical-blue:/g)).toHaveLength(1);
+    expect(css.match(/@layer astryx-base/g)).toHaveLength(1);
+  });
+
+  it('declares astryx-base after reset and before astryx-theme', async () => {
+    const css = await buildTheme(tmpDir, 'charts-order', {
+      tokens: {'--color-accent': '#0077B6'},
+    });
+
+    const reset = css.indexOf('@layer reset');
+    const base = css.indexOf('@layer astryx-base');
+    const theme = css.indexOf('@layer astryx-theme');
+
+    expect(reset).toBeGreaterThanOrEqual(0);
+    expect(base).toBeGreaterThan(reset);
+    expect(theme).toBeGreaterThan(base);
+  });
+
+  it("puts only the theme's own data token in its scope block", async () => {
+    const css = await buildTheme(tmpDir, 'charts-override', {
+      tokens: {'--color-data-categorical-blue': '#00A3FF'},
+    });
+
+    const themeBlock = css.slice(css.indexOf('@layer astryx-theme'));
+    expect(themeBlock).toContain('--color-data-categorical-blue: #00A3FF;');
+    expect(themeBlock).not.toContain('--color-data-categorical-orange');
+    expect(themeBlock).not.toContain('--color-data-gray-1');
+  });
+
+  it('emits the bytes the runtime generator emits', async () => {
+    const tokens = {'--color-accent': '#0077B6'};
+    const css = await buildTheme(tmpDir, 'charts-parity', {tokens});
+
+    const {defineTheme, generateThemeCSS} = await import(
+      '@astryxdesign/core/theme'
+    );
+    const {base} = generateThemeCSS(
+      defineTheme({name: 'charts-parity', tokens}),
+    );
+
+    expect(css).toContain(`@layer astryx-base {\n${base}\n}`);
+  });
+});

package/clients/cli/commands/build-theme.variants.test.mjs

@@ -164,6 +164,7 @@ describe('theme build custom-variant augmentations', () => {
           },
           breadcrumbs: { 'variant:customBreadcrumbs': { color: 'currentColor' } },
           button: { 'variant:customButton': { backgroundColor: 'transparent' } },
+          card: { 'variant:customCard': { backgroundColor: 'transparent' } },
           dialog: { 'variant:customDialog': { backgroundColor: 'transparent' } },
           divider: { 'variant:customDivider': { borderColor: 'currentColor' } },
           'field-status': { 'variant:customFieldStatus': { color: 'currentColor' } },
@@ -204,6 +205,7 @@ describe('theme build custom-variant augmentations', () => {
         `import {Banner} from '@astryxdesign/core/Banner';\n` +
         `import {Breadcrumbs} from '@astryxdesign/core/Breadcrumbs';\n` +
         `import {Button} from '@astryxdesign/core/Button';\n` +
+        `import {Card} from '@astryxdesign/core/Card';\n` +
         `import {Dialog} from '@astryxdesign/core/Dialog';\n` +
         `import {Divider} from '@astryxdesign/core/Divider';\n` +
         `import {FieldStatus} from '@astryxdesign/core/FieldStatus';\n` +
@@ -222,6 +224,7 @@ describe('theme build custom-variant augmentations', () => {
         `      <Banner title="Banner" status="customBannerStatus" container="customBannerContainer" />\n` +
         `      <Breadcrumbs variant="customBreadcrumbs">Crumbs</Breadcrumbs>\n` +
         `      <Button label="Button" variant="customButton" />\n` +
+        `      <Card variant="customCard">Card</Card>\n` +
         `      <Dialog isOpen onOpenChange={() => {}} variant="customDialog">Body</Dialog>\n` +
         `      <Divider variant="customDivider" />\n` +
         `      <FieldStatus type="success" message="Ok" variant="customFieldStatus" />\n` +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/cli",
-  "version": "0.5.0-canary.32a62fd",
+  "version": "0.5.0-canary.408cef2",
   "displayName": "CLI",
   "description": "Scaffold projects, browse templates, generate themes, and get agent-ready docs from the command line.",
   "author": "Meta Open Source",
@@ -87,10 +87,10 @@
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@astryxdesign/charts": "0.5.0-canary.32a62fd",
-    "@astryxdesign/core": "0.5.0-canary.32a62fd",
-    "@astryxdesign/lab": "0.5.0-canary.32a62fd",
-    "@astryxdesign/theme-neutral": "0.5.0-canary.32a62fd",
+    "@astryxdesign/charts": "0.5.0-canary.408cef2",
+    "@astryxdesign/core": "0.5.0-canary.408cef2",
+    "@astryxdesign/lab": "0.5.0-canary.408cef2",
+    "@astryxdesign/theme-neutral": "0.5.0-canary.408cef2",
     "gpt-tokenizer": "^3.4.0"
   },
   "peerDependenciesMeta": {
@@ -108,10 +108,10 @@
     }
   },
   "devDependencies": {
-    "@astryxdesign/charts": "0.5.0-canary.32a62fd",
-    "@astryxdesign/core": "0.5.0-canary.32a62fd",
-    "@astryxdesign/lab": "0.5.0-canary.32a62fd",
-    "@astryxdesign/theme-neutral": "0.5.0-canary.32a62fd",
+    "@astryxdesign/charts": "0.5.0-canary.408cef2",
+    "@astryxdesign/core": "0.5.0-canary.408cef2",
+    "@astryxdesign/lab": "0.5.0-canary.408cef2",
+    "@astryxdesign/theme-neutral": "0.5.0-canary.408cef2",
     "gpt-tokenizer": "^3.4.0"
   },
   "scripts": {