@astryxdesign/cli 0.5.0-canary.07f6c33 → 0.5.0-canary.09d191c

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 _dataTokenDefaults = null;
 /** @type {any} */ let _coreImportError = null;
 try {
   const coreTheme = await import('@astryxdesign/core/theme');
   _defineTheme = coreTheme.defineTheme;
   _generateThemeRulesSplit = coreTheme.generateThemeRulesSplit;
   _generateOnMediaCSS = coreTheme.generateOnMediaCSS;
+  _dataTokenDefaults = coreTheme.dataTokenDefaults;
 } 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
@@ -349,8 +351,8 @@ const _augmentationTargetCache = new Map();
  * Resolve a rendered theme class token (the key without `astryx-`) to candidate
  * public core subpaths and interface prefixes that may own its augmentable prop
  * maps. Some tokens are subtargets documented by a parent component
- * (`avatar-status-dot` augments `@astryxdesign/core/Avatar`), and some stable
- * class tokens intentionally omit word separators (`progressbar`, `statusdot`)
+ * (`avatar-status-dot` augments `@astryxdesign/core/Avatar`), and some
+ * deprecated tokens still omit word separators (`progressbar`, `statusdot`)
  * while the public API keeps `ProgressBar`/`StatusDot` casing. Component docs
  * are the source of truth for the target token → owning component relationship.
  *
@@ -428,8 +430,8 @@ async function resolveAugmentationTargetCandidates(componentName) {
 
       // Try the exact rendered token first for documented subtargets such as
       // avatar-status-dot → AvatarStatusDotVariantMap, then the owning public
-      // component name for unhyphenated public casings such as progressbar →
-      // ProgressBarVariantMap/statusdot → StatusDotVariantMap.
+      // component name for the deprecated unhyphenated tokens such as
+      // progressbar → ProgressBarVariantMap/statusdot → StatusDotVariantMap.
       addCandidate(moduleName, toPascalCase(componentName));
       addCandidate(moduleName, moduleName);
       if (Array.isArray(doc?.components)) {
@@ -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,26 @@ 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. Formatted here from the
+    // public `dataTokenDefaults` export, byte for byte as the `<Theme>`
+    // runtime emits it — build-theme.data-tokens.test.mjs is the drift guard.
+    // 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 = _dataTokenDefaults
+      ? `:root {\n${Object.entries(_dataTokenDefaults)
+          .map(([name, value]) => `  ${name}: ${value};`)
+          .join('\n')}\n}`
+      : '';
+    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/targets/targets.test.mjs

@@ -34,6 +34,7 @@ describe('themeTargets (api/theme/targets)', () => {
     expect(data.targets.map(t => t.key)).toEqual([
       'switch',
       'switch-field',
+      'switch-label',
       'switch-thumb',
     ]);
   }, 60_000);

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/DateInput/DateInputClearable.tsx

@@ -16,7 +16,11 @@ export default function DateInputClearable() {
   );
 
   return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      gap={4}
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <Text type="supporting" color="secondary">
         {value ? `Selected: ${value}` : 'No date selected'}
       </Text>

package/assets/templates/blocks/components/DateInput/DateInputDateRange.tsx

@@ -27,7 +27,11 @@ export default function DateInputDateRange() {
   const [value, setValue] = useState<DateString | undefined>(undefined);
 
   return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      gap={4}
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <Text type="supporting" color="secondary">
         {value ? `Booked: ${value}` : 'Pick a date in the available range'}
       </Text>
@@ -37,6 +41,7 @@ export default function DateInputDateRange() {
         max={max}
         description={description}
         placeholder="Select a booking date"
+        nativePicker="never"
         value={value}
         onChange={setValue}
       />

package/assets/templates/blocks/components/DateInput/DateInputFormats.tsx

@@ -16,7 +16,11 @@ export default function DateInputFormats() {
   );
 
   return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      gap={4}
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <Text type="supporting" color="secondary">
         The same committed date, displayed with different formats.
       </Text>

package/assets/templates/blocks/components/DateInput/DateInputShowcase.tsx

@@ -13,7 +13,10 @@ export default function DateInputShowcase() {
   const [date, setDate] = useState<DateString | undefined>(undefined);
 
   return (
-    <Stack direction="vertical" width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <DateInput
         label="Start date"
         placeholder="Select a date"

package/assets/templates/blocks/components/DateInput/DateInputWithDescription.tsx

@@ -14,7 +14,11 @@ export default function DateInputWithDescription() {
   const [value, setValue] = useState<DateString | undefined>(undefined);
 
   return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      gap={4}
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <Text type="supporting" color="secondary">
         Helper text explains what the field expects
       </Text>

package/assets/templates/blocks/components/DateInput/DateInputWithValidation.tsx

@@ -21,7 +21,11 @@ export default function DateInputWithValidation() {
   );
 
   return (
-    <Stack direction="vertical" gap={4} width="100%" style={{maxWidth: 400}}>
+    <Stack
+      direction="vertical"
+      gap={4}
+      width="100%"
+      style={{minWidth: 240, maxWidth: 400}}>
       <DateInput
         label="Event date"
         value={errorVal}

package/assets/templates/blocks/components/HoverCard/HoverCardHookUsage.tsx

@@ -13,6 +13,7 @@ export default function HoverCardHookUsage() {
     placement: 'below',
     delay: 100,
     isDefaultOpen: true,
+    label: 'Alex Morgan',
   });
 
   return (
@@ -20,7 +21,9 @@ export default function HoverCardHookUsage() {
       <Button
         label="Hover profile"
         ref={hoverCard.ref}
-        aria-describedby={hoverCard.describedBy}
+        aria-haspopup="dialog"
+        aria-controls={hoverCard.isOpen ? hoverCard.id : undefined}
+        aria-expanded={hoverCard.isOpen}
       />
       {hoverCard.renderHoverCard(
         <VStack gap={1}>

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},