@astryxdesign/cli 0.5.0-canary.32a62fd → 0.5.0-canary.38e58e4

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
@@ -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/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/Step/StepIndicator.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Step — Indicator',
   displayName: 'Step — Indicator',
   description:
-    'Everything the indicator prop accepts: the auto default, an always-number badge, a custom ReactNode, and none — each on its own completed Step so the prop is the only difference between them. Every variant occupies the same 16px box, so a step swapping its number for a check as it completes never shifts the label beside it. The last cell shows that a custom node can be live rather than static: a Spinner on a step that is in progress, shaded `inherit` so it picks up the step\u2019s own tint like any other glyph.',
+    'Everything the indicator prop accepts: the auto default, an always-number badge, a custom ReactNode, and none, each on its own completed Step so the prop is the only difference between them. Every variant occupies the same 16px box, so a step swapping its number for a check as it completes never shifts the label beside it. The last cell shows that a custom node can be live rather than static: a Spinner on a step that is in progress, shaded `inherit` so it picks up the step\'s own tint like any other glyph.',
   isReady: true,
   aspectRatio: 4 / 3,
   componentsUsed: ['Stepper', 'Step', 'Icon', 'Spinner', 'Text'],

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

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Step',
   displayName: 'Step',
   description:
-    'A single Step, with every part it can render: the indicator, the label with its optional marker and trailing endContent, and the description beneath. A Step never sets its own completed/current state — it declares its index and derives the rest from the parent Stepper, so one Step in one Stepper is a complete example.',
+    'A single Step, with every part it can render: the indicator, the label with its optional marker and trailing endContent, and the description beneath. A Step never sets its own completed/current state. It declares its index and derives the rest from the parent Stepper, so one Step in one Stepper is a complete example.',
   isReady: true,
   isShowcase: true,
   aspectRatio: 16 / 9,

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/blocks/components/Stepper/StepperShowcase.doc.mjs

@@ -7,7 +7,7 @@ export const doc = {
   name: 'Stepper — Checkout Progress',
   displayName: 'Stepper — Checkout Progress',
   description:
-    'The default stepper: a horizontal track where every step owns an equal segment of the progress bar above its label. The default auto indicator resolves itself per step — a check once the step is done, a ring on the current step, a number for the ones still ahead. Click any step to jump.',
+    'The default stepper: a horizontal track where every step owns an equal segment of the progress bar above its label. The default auto indicator resolves itself per step: a check once the step is done, a ring on the current step, a number for the ones still ahead. Click any step to jump.',
   isReady: true,
   isShowcase: true,
   aspectRatio: 16 / 9,

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