@calibrate-ds/generator-react 0.1.87 → 0.1.88

package/dist/tokens/generate-token-css.js

@@ -1,4 +1,5 @@
 import { getPTBTokenVariableName, formatPx } from "@calibrate-ds/core";
+import { isEmittableColorValue } from "./token-value-utils.js";
 function getActiveValue(value) {
     if (value === null || value === undefined)
         return value;
@@ -201,18 +202,6 @@ function formatCompositeToken(rawValue) {
 function formatPxLocal(value) {
     return `${Math.round(value * 1000) / 1000}px`;
 }
-/**
- * E-9: a value that looks like a hex color (leading '#') but contains non-hex
- * digits (e.g. "#GGGGGG") or the wrong length is invalid CSS and must not be
- * emitted verbatim — it silently breaks the whole custom-property. Returns true
- * only for well-formed #RGB / #RGBA / #RRGGBB / #RRGGBBAA. Non-'#' strings are
- * not our concern here (they take other paths) and return true.
- */
-function isEmittableColorValue(value) {
-    if (!value.startsWith("#"))
-        return true;
-    return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value);
-}
 /**
  * Formats a resolved scalar value for CSS output (px suffix, units, font fallbacks).
  */
@@ -426,7 +415,11 @@ export function generateTokenCssContent(collection, richGlobalMap) {
     }
     const header = `/**\n * Generated Design Tokens: ${collection.name} (CSS Variables)\n * Do not edit. This file is auto-generated by Calibrate.\n */\n`;
     const skippedComment = skippedCount > 0 ? `\n/* Note: ${skippedCount} tokens were skipped from this local CSS output (unresolved or non-scalar). */\n` : "";
-    return `${header}${skippedComment}\n:root {\n${cssVars}}\n`;
+    // E-19 parity: per-collection CSS also emits [data-theme] override blocks for
+    // multi-mode collections, mirroring the unified tokens.css path. Uses resolveMap
+    // (local + any cross-collection alias targets) so alias mode values still resolve.
+    const modeBlocks = generateModeOverrideBlocks([collection], resolveMap);
+    return `${header}${skippedComment}\n:root {\n${cssVars}}\n${modeBlocks}`;
 }
 /**
  * Generates a unified CSS Variables file containing all tokens from all collections.
@@ -567,7 +560,7 @@ export function generateUnifiedTokenCssContent(model) {
     // re-emitted — alias tokens stay in :root as var() and cascade automatically,
     // which is exactly the theming architecture (primitives flip, semantics follow).
     // Modes with the same (slugified) name across collections merge into one block.
-    const modeBlocks = generateModeOverrideBlocks(model, allTokens);
+    const modeBlocks = generateModeOverrideBlocks(model.tokens, allTokens);
     const content = `/**
  * Generated Design Tokens (Unified CSS Variables)
  * Do not edit. This file is auto-generated by Calibrate.
@@ -596,10 +589,10 @@ function slugifyModeName(name) {
  * common case and adds nothing). Emits a token override only when that mode's value
  * actually differs from the default mode's — so the block stays minimal.
  */
-function generateModeOverrideBlocks(model, allTokens) {
+function generateModeOverrideBlocks(collections, allTokens) {
     // slug → mode display name (first wins) and accumulated CSS lines
     const blocks = new Map();
-    for (const collection of model.tokens) {
+    for (const collection of collections) {
         const modes = collection.modes;
         if (!modes || modes.length < 2)
             continue;
@@ -632,6 +625,9 @@ function generateModeOverrideBlocks(model, allTokens) {
                             continue;
                     }
                 }
+                // E-9 parity: never emit a malformed hex override.
+                if (typeof value === "string" && !isEmittableColorValue(value))
+                    continue;
                 const varName = getPTBTokenVariableName(collection.name, t.name);
                 const line = `  ${varName}: ${formatCssValue(value, t.type, t.name)};`;
                 const bucket = blocks.get(slug) ?? { name: mode.name, lines: [] };

package/dist/tokens/generate-token-file-content.js

@@ -1,4 +1,5 @@
 import { formatCollectionImportName } from "../components/token-helpers.js";
+import { isEmittableColorValue } from "./token-value-utils.js";
 /**
  * Converts a raw Figma token name to a camelCase JS identifier key.
  * Must produce the same result as the camelCase logic in token-helpers.ts selectTokensForSlots,
@@ -10,6 +11,10 @@ export function tokenNameToKey(name) {
     // Guard against keys that start with a digit (invalid unquoted JS identifier)
     return /^\d/.test(camel) ? `_${camel}` : (camel || "unknown");
 }
+/** Slugify a design-tool mode name into a stable object key ("Dark Mode" → "dark-mode"). */
+function slugifyModeKey(name) {
+    return (name ?? "").toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || "mode";
+}
 /**
  * Generates TypeScript constant file content for a Token Collection.
  */
@@ -20,16 +25,40 @@ export function generateTokenFileContent(collection) {
     const exportIdent = `${formatCollectionImportName(collection.name)}Tokens`;
     let tokensContent = "";
     for (const t of collection.tokens ?? []) {
+        // E-9 parity: a malformed hex value (e.g. "#GGGGGG") is skipped here just as it is
+        // in the CSS emitters, so invalid values never leak into the TS export either.
+        if (typeof t.value === "string" && !isEmittableColorValue(t.value))
+            continue;
         // Key is camelCase-normalized to match dot-accessor references generated by token-helpers.ts.
         // E.g. Figma token "color/brand/700" → key "colorBrand700" → accessible as tokens.colorBrand700.
         const key = tokenNameToKey(t.name);
         const jsonValue = JSON.stringify(t.value ?? null, null, 4).replace(/\n/g, "\n    ");
+        // E-19 parity: for multi-mode collections, also emit the per-mode values (keyed by
+        // slugified mode name, e.g. { light, dark }) so the TS export carries every theme —
+        // not just the default mode — mirroring the [data-theme] blocks in the CSS output.
+        // Malformed hex mode values are dropped, consistent with the default value above.
+        let byModeLine = "";
+        if (t.valuesByMode && collection.modes && collection.modes.length > 1) {
+            const byMode = {};
+            for (const mode of collection.modes) {
+                const mv = t.valuesByMode[mode.id];
+                if (mv === undefined)
+                    continue;
+                if (typeof mv === "string" && !isEmittableColorValue(mv))
+                    continue;
+                byMode[slugifyModeKey(mode.name)] = mv;
+            }
+            if (Object.keys(byMode).length > 0) {
+                const byModeJson = JSON.stringify(byMode, null, 4).replace(/\n/g, "\n    ");
+                byModeLine = `,\n    valuesByMode: ${byModeJson}`;
+            }
+        }
         tokensContent += `
   "${key}": {
     id: "${t.id}",
     name: "${t.name}",
     type: "${t.type}",
-    value: ${jsonValue}
+    value: ${jsonValue}${byModeLine}
   },`;
     }
     return `/**

package/dist/tokens/token-value-utils.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Shared token-value guards used by every token emitter (unified CSS, per-collection
+ * CSS, and the TypeScript export) so a fix applies uniformly instead of to one emitter.
+ */
+/**
+ * E-9: a value that looks like a hex color (leading '#') but is malformed — contains
+ * non-hex digits (e.g. "#GGGGGG") or is the wrong length — is invalid and must not be
+ * emitted verbatim, whether into CSS or the TS token export. Returns true only for
+ * well-formed #RGB / #RGBA / #RRGGBB / #RRGGBBAA. Non-'#' strings take other paths and
+ * are not this function's concern (returns true).
+ */
+export declare function isEmittableColorValue(value: string): boolean;
+//# sourceMappingURL=token-value-utils.d.ts.map

package/dist/tokens/token-value-utils.js

@@ -0,0 +1,17 @@
+/**
+ * Shared token-value guards used by every token emitter (unified CSS, per-collection
+ * CSS, and the TypeScript export) so a fix applies uniformly instead of to one emitter.
+ */
+/**
+ * E-9: a value that looks like a hex color (leading '#') but is malformed — contains
+ * non-hex digits (e.g. "#GGGGGG") or is the wrong length — is invalid and must not be
+ * emitted verbatim, whether into CSS or the TS token export. Returns true only for
+ * well-formed #RGB / #RGBA / #RRGGBB / #RRGGBBAA. Non-'#' strings take other paths and
+ * are not this function's concern (returns true).
+ */
+export function isEmittableColorValue(value) {
+    if (!value.startsWith("#"))
+        return true;
+    return /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(value);
+}
+//# sourceMappingURL=token-value-utils.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@calibrate-ds/generator-react",
-  "version": "0.1.87",
+  "version": "0.1.88",
   "license": "FSL-1.1-MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -35,8 +35,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "@calibrate-ds/shared-types": "^0.1.87",
-    "@calibrate-ds/core": "^0.1.87"
+    "@calibrate-ds/core": "^0.1.88",
+    "@calibrate-ds/shared-types": "^0.1.88"
   },
   "devDependencies": {
     "typescript": "^5.7.3",