@commercetools/nimbus-design-token-ts-plugin 2.6.0 → 2.8.0

package/dist/create-plugin.js

@@ -37,7 +37,7 @@ function createPlugin(_ts, info, tokenData) {
         for (const entry of original.entries) {
             const cssValue = values[entry.name];
             if (cssValue !== undefined) {
-                entry.labelDetails = { detail: ` = ${cssValue}` };
+                entry.labelDetails = { detail: ` ${cssValue}` };
             }
         }
         return original;

package/dist/generated-token-mapping.json

@@ -0,0 +1,43 @@
+{
+  "semanticColors": {
+    "bg": "#fff / hsl(0, 0%, 7%) (d)",
+    "fg": "hsl(0, 0%, 13%) / hsl(0, 0%, 93%) (d)",
+    "border": "hsl(0, 0%, 85%) / hsl(0, 0%, 23%) (d)",
+    "border.muted": "hsl(0, 0%, 81%) / hsl(0, 0%, 28%) (d)",
+    "border.subtle": "hsl(0, 0%, 85%) / hsl(0, 0%, 23%) (d)",
+    "border.emphasized": "hsl(0, 0%, 73%) / hsl(0, 0%, 38%) (d)",
+    "border.inverted": "hsl(0, 0%, 55%) / hsl(0, 0%, 43%) (d)",
+    "border.critical": "hsl(359, 70%, 74%) / hsl(358, 45%, 49%) (d)",
+    "border.warning": "hsl(38, 75%, 55%) / hsl(36, 60%, 35%) (d)",
+    "border.positive": "hsl(131, 38%, 56%) / hsl(131, 32%, 36%) (d)",
+    "border.info": "hsl(206, 82%, 65%) / hsl(211, 65%, 45%) (d)"
+  },
+  "textStyles": {
+    "2xs": "fontSize: 10px, lineHeight: 14px",
+    "xs": "fontSize: 12px, lineHeight: 18px",
+    "sm": "fontSize: 14px, lineHeight: 22px",
+    "md": "fontSize: 16px, lineHeight: 22px",
+    "lg": "fontSize: 18px, lineHeight: 24px",
+    "xl": "fontSize: 20px, lineHeight: 28px",
+    "2xl": "fontSize: 24px, lineHeight: 28px",
+    "3xl": "fontSize: 30px, lineHeight: 36px",
+    "4xl": "fontSize: 36px, lineHeight: 44px",
+    "5xl": "fontSize: 48px, lineHeight: 60px",
+    "6xl": "fontSize: 60px, lineHeight: 72px",
+    "7xl": "fontSize: 72px, lineHeight: 92px",
+    "caption": "fontSize: 12px, lineHeight: 18px",
+    "detail": "fontSize: 14px, lineHeight: 22px",
+    "body": "fontSize: 16px, lineHeight: 26px"
+  },
+  "layerStyles": {
+    "disabled": "opacity: 0.5, cursor: not-allowed",
+    "focusRing": "outlineWidth: var(--focus-ring-width), outlineColor: var(--focus-ring-color), outlineStyle: var(--focus-ring-style), outlineOffset: var(--focus-ring-offset)"
+  },
+  "letterSpacing": {
+    "tighter": "-5%",
+    "tight": "-2.5%",
+    "wide": "2.5%",
+    "wider": "5%",
+    "widest": "10%"
+  }
+}

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * TypeScript Language Service Plugin entry point.
  *
- * Shows design token CSS values (e.g., "= 24px") next to token names
+ * Shows design token CSS values (e.g., "24px") next to token names
  * in autocomplete when editing Chakra styled-system properties.
  */
 import type typescript from "typescript";

package/dist/index.js

@@ -2,7 +2,7 @@
 /**
  * TypeScript Language Service Plugin entry point.
  *
- * Shows design token CSS values (e.g., "= 24px") next to token names
+ * Shows design token CSS values (e.g., "24px") next to token names
  * in autocomplete when editing Chakra styled-system properties.
  */
 const token_data_1 = require("./token-data");

package/dist/token-data.d.ts

@@ -1,6 +1,9 @@
 /**
  * Loads design token data from @commercetools/nimbus-tokens and builds
  * lookup maps for enriching autocomplete with CSS values.
+ *
+ * Also loads a generated mapping for tokens that aren't simple key→string pairs:
+ * semantic colors (bg, fg, border.*), textStyles, layerStyles, letterSpacing.
  */
 /** category name → { token name → CSS value string } */
 export type CategoryValues = Record<string, Record<string, string>>;

package/dist/token-data.js

@@ -2,6 +2,9 @@
 /**
  * Loads design token data from @commercetools/nimbus-tokens and builds
  * lookup maps for enriching autocomplete with CSS values.
+ *
+ * Also loads a generated mapping for tokens that aren't simple key→string pairs:
+ * semantic colors (bg, fg, border.*), textStyles, layerStyles, letterSpacing.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadTokenData = loadTokenData;
@@ -42,6 +45,22 @@ function loadDesignTokens() {
     }
     return undefined;
 }
+/**
+ * Load the generated token mapping JSON from the same directory as the compiled plugin.
+ * Falls back to undefined if the file doesn't exist (graceful degradation).
+ */
+function loadGeneratedMapping() {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const path = require("path");
+        const mappingPath = path.join(__dirname, "generated-token-mapping.json");
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        return require(mappingPath);
+    }
+    catch {
+        return undefined;
+    }
+}
 function loadTokenData() {
     try {
         const tokens = loadDesignTokens();
@@ -162,6 +181,34 @@ function loadTokenData() {
                 categorySets["zIndex"] = new Set(Object.keys(values));
             }
         }
+        // Load generated token mapping for semantic colors, composite tokens, etc.
+        const mapping = loadGeneratedMapping();
+        if (mapping) {
+            // Merge semantic colors into existing colors category
+            if (mapping.semanticColors) {
+                if (!categoryValues["colors"]) {
+                    categoryValues["colors"] = {};
+                }
+                Object.assign(categoryValues["colors"], mapping.semanticColors);
+                categorySets["colors"] = new Set(Object.keys(categoryValues["colors"]));
+            }
+            // Add textStyles category
+            if (mapping.textStyles && Object.keys(mapping.textStyles).length > 0) {
+                categoryValues["textStyles"] = mapping.textStyles;
+                categorySets["textStyles"] = new Set(Object.keys(mapping.textStyles));
+            }
+            // Add layerStyles category
+            if (mapping.layerStyles && Object.keys(mapping.layerStyles).length > 0) {
+                categoryValues["layerStyles"] = mapping.layerStyles;
+                categorySets["layerStyles"] = new Set(Object.keys(mapping.layerStyles));
+            }
+            // Add letterSpacing category
+            if (mapping.letterSpacing &&
+                Object.keys(mapping.letterSpacing).length > 0) {
+                categoryValues["letterSpacing"] = mapping.letterSpacing;
+                categorySets["letterSpacing"] = new Set(Object.keys(mapping.letterSpacing));
+            }
+        }
         return { categoryValues, categorySets };
     }
     catch {
@@ -171,9 +218,10 @@ function loadTokenData() {
 }
 /**
  * Recursively flatten a color object into dot-notation keys.
- * For light/dark structures, use the light value.
- * E.g. { amber: { light: { "1": "hsl(...)" } } } → "amber.1" = "hsl(...)"
- * E.g. { black: "hsl(...)" } → "black" = "hsl(...)"
+ * For light/dark structures, show both values as "<light> / <dark> (d)".
+ * E.g. { amber: { light: { "1": "hsl(a)" }, dark: { "1": "hsl(b)" } } }
+ *   → "amber.1" → "hsl(a) / hsl(b) (d)"
+ * E.g. { black: "hsl(...)" } → "black" → "hsl(...)"
  */
 function flattenColors(obj, prefix, result) {
     for (const [key, val] of Object.entries(obj)) {
@@ -183,11 +231,24 @@ function flattenColors(obj, prefix, result) {
         }
         else if (val && typeof val === "object") {
             const record = val;
-            // If this object has "light" and "dark" keys, use the light values
+            // If this object has "light" and "dark" keys, merge both
             if ("light" in record && "dark" in record) {
                 const lightObj = record.light;
+                const darkObj = record.dark;
+                const colorPrefix = prefix ? `${prefix}.${key}` : key;
                 if (lightObj && typeof lightObj === "object") {
-                    flattenColors(lightObj, prefix ? `${prefix}.${key}` : key, result);
+                    for (const [step, lightVal] of Object.entries(lightObj)) {
+                        if (typeof lightVal !== "string")
+                            continue;
+                        const darkVal = darkObj?.[step];
+                        const stepKey = `${colorPrefix}.${step}`;
+                        if (typeof darkVal === "string" && darkVal !== lightVal) {
+                            result[stepKey] = `${lightVal} / ${darkVal} (d)`;
+                        }
+                        else {
+                            result[stepKey] = lightVal;
+                        }
+                    }
                 }
             }
             else {

package/dist/token-data.spec.js

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const vitest_1 = require("vitest");
+const node_fs_1 = require("node:fs");
+const node_path_1 = require("node:path");
 const token_data_1 = require("./token-data");
 const nimbus_tokens_1 = require("@commercetools/nimbus-tokens");
+/** Load the generated mapping as the source of truth for generated categories */
+const generatedMapping = JSON.parse((0, node_fs_1.readFileSync)((0, node_path_1.join)(__dirname, "generated-token-mapping.json"), "utf-8"));
 (0, vitest_1.describe)("loadTokenData", () => {
     const data = (0, token_data_1.loadTokenData)();
     (0, vitest_1.it)("loads token data successfully", () => {
@@ -19,6 +23,9 @@ const nimbus_tokens_1 = require("@commercetools/nimbus-tokens");
         (0, vitest_1.expect)(categories).toContain("shadows");
         (0, vitest_1.expect)(categories).toContain("opacity");
         (0, vitest_1.expect)(categories).toContain("zIndex");
+        (0, vitest_1.expect)(categories).toContain("textStyles");
+        (0, vitest_1.expect)(categories).toContain("layerStyles");
+        (0, vitest_1.expect)(categories).toContain("letterSpacing");
     });
     (0, vitest_1.describe)("spacing tokens", () => {
         (0, vitest_1.it)("maps token names to CSS values from source tokens", () => {
@@ -83,18 +90,22 @@ const nimbus_tokens_1 = require("@commercetools/nimbus-tokens");
                 (0, vitest_1.expect)(colors[`blackAlpha.${name}`]).toBe(value);
             }
         });
-        (0, vitest_1.it)("flattens palette colors using light values", () => {
+        (0, vitest_1.it)("flattens palette colors with light/dark values", () => {
             const colors = data.categoryValues["colors"];
             const amber = nimbus_tokens_1.designTokens.color["system-palettes"].amber;
-            for (const [name, value] of Object.entries(amber.light)) {
-                (0, vitest_1.expect)(colors[`amber.${name}`]).toBe(value);
+            for (const [name, lightVal] of Object.entries(amber.light)) {
+                const darkVal = amber.dark[name];
+                const expected = lightVal === darkVal ? lightVal : `${lightVal} / ${darkVal} (d)`;
+                (0, vitest_1.expect)(colors[`amber.${name}`]).toBe(expected);
             }
         });
-        (0, vitest_1.it)("includes semantic palette colors", () => {
+        (0, vitest_1.it)("includes semantic palette colors with light/dark values", () => {
             const colors = data.categoryValues["colors"];
             const neutral = nimbus_tokens_1.designTokens.color["semantic-palettes"].neutral;
-            for (const [name, value] of Object.entries(neutral.light)) {
-                (0, vitest_1.expect)(colors[`neutral.${name}`]).toBe(value);
+            for (const [name, lightVal] of Object.entries(neutral.light)) {
+                const darkVal = neutral.dark[name];
+                const expected = lightVal === darkVal ? lightVal : `${lightVal} / ${darkVal} (d)`;
+                (0, vitest_1.expect)(colors[`neutral.${name}`]).toBe(expected);
             }
         });
     });
@@ -122,4 +133,103 @@ const nimbus_tokens_1 = require("@commercetools/nimbus-tokens");
             }
         });
     });
+    (0, vitest_1.describe)("semantic color tokens (from generated mapping)", () => {
+        (0, vitest_1.it)("includes all semantic colors from generated mapping", () => {
+            const colors = data.categoryValues["colors"];
+            for (const name of Object.keys(generatedMapping.semanticColors)) {
+                (0, vitest_1.expect)(colors[name]).toBeDefined();
+            }
+        });
+        (0, vitest_1.it)("matches resolved values from generated mapping", () => {
+            const colors = data.categoryValues["colors"];
+            for (const [name, expected] of Object.entries(generatedMapping.semanticColors)) {
+                (0, vitest_1.expect)(colors[name]).toBe(expected);
+            }
+        });
+        (0, vitest_1.it)("resolves semantic colors to CSS values (not token references)", () => {
+            const colors = data.categoryValues["colors"];
+            for (const name of Object.keys(generatedMapping.semanticColors)) {
+                (0, vitest_1.expect)(colors[name]).not.toMatch(/^\{/);
+            }
+        });
+        (0, vitest_1.it)("merges with existing palette colors", () => {
+            const colors = data.categoryValues["colors"];
+            // Semantic shortcuts should coexist with palette colors
+            (0, vitest_1.expect)(Object.keys(generatedMapping.semanticColors).length).toBeGreaterThan(0);
+            (0, vitest_1.expect)(colors["neutral.12"]).toBeDefined();
+        });
+    });
+    (0, vitest_1.describe)("textStyle tokens (from generated mapping)", () => {
+        (0, vitest_1.it)("contains all textStyle entries from designTokens", () => {
+            const textStyles = data.categoryValues["textStyles"];
+            for (const name of Object.keys(nimbus_tokens_1.designTokens.textStyle)) {
+                (0, vitest_1.expect)(textStyles[name]).toBeDefined();
+            }
+        });
+        (0, vitest_1.it)("formats composites as display strings derived from source", () => {
+            const textStyles = data.categoryValues["textStyles"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.textStyle)) {
+                if (value && typeof value === "object") {
+                    const expected = Object.entries(value)
+                        .map(([prop, val]) => `${prop}: ${val}`)
+                        .join(", ");
+                    (0, vitest_1.expect)(textStyles[name]).toBe(expected);
+                }
+            }
+        });
+        (0, vitest_1.it)("has matching sets and values", () => {
+            const set = data.categorySets["textStyles"];
+            const values = data.categoryValues["textStyles"];
+            (0, vitest_1.expect)(set.size).toBe(Object.keys(values).length);
+            for (const name of set) {
+                (0, vitest_1.expect)(values[name]).toBeDefined();
+            }
+        });
+    });
+    (0, vitest_1.describe)("layerStyle tokens (from generated mapping)", () => {
+        (0, vitest_1.it)("contains all layerStyle entries from generated mapping", () => {
+            const layerStyles = data.categoryValues["layerStyles"];
+            for (const name of Object.keys(generatedMapping.layerStyles)) {
+                (0, vitest_1.expect)(layerStyles[name]).toBeDefined();
+            }
+        });
+        (0, vitest_1.it)("matches values from generated mapping", () => {
+            const layerStyles = data.categoryValues["layerStyles"];
+            for (const [name, expected] of Object.entries(generatedMapping.layerStyles)) {
+                (0, vitest_1.expect)(layerStyles[name]).toBe(expected);
+            }
+        });
+        (0, vitest_1.it)("has matching sets and values", () => {
+            const set = data.categorySets["layerStyles"];
+            const values = data.categoryValues["layerStyles"];
+            (0, vitest_1.expect)(set.size).toBe(Object.keys(values).length);
+            for (const name of set) {
+                (0, vitest_1.expect)(values[name]).toBeDefined();
+            }
+        });
+    });
+    (0, vitest_1.describe)("letterSpacing tokens (from generated mapping)", () => {
+        (0, vitest_1.it)("contains all letterSpacing entries from designTokens", () => {
+            const letterSpacing = data.categoryValues["letterSpacing"];
+            for (const name of Object.keys(nimbus_tokens_1.designTokens.letterSpacing)) {
+                (0, vitest_1.expect)(letterSpacing[name]).toBeDefined();
+            }
+        });
+        (0, vitest_1.it)("unwraps {value} objects to plain strings from source", () => {
+            const letterSpacing = data.categoryValues["letterSpacing"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.letterSpacing)) {
+                if (value && typeof value === "object" && "value" in value) {
+                    (0, vitest_1.expect)(letterSpacing[name]).toBe(value.value);
+                }
+            }
+        });
+        (0, vitest_1.it)("has matching sets and values", () => {
+            const set = data.categorySets["letterSpacing"];
+            const values = data.categoryValues["letterSpacing"];
+            (0, vitest_1.expect)(set.size).toBe(Object.keys(values).length);
+            for (const name of set) {
+                (0, vitest_1.expect)(values[name]).toBeDefined();
+            }
+        });
+    });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercetools/nimbus-design-token-ts-plugin",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "TypeScript language service plugin that shows design token CSS values in autocomplete",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -13,19 +13,20 @@
     "url": "https://github.com/commercetools/nimbus.git"
   },
   "peerDependencies": {
-    "@commercetools/nimbus-tokens": "^2.6.0"
+    "@commercetools/nimbus-tokens": "^2.8.0"
   },
   "devDependencies": {
-    "@types/node": "^24.10.1",
+    "@types/node": "^24.11.0",
     "typescript": "~5.9.3",
     "vitest": "^4.0.18",
-    "@commercetools/nimbus-tokens": "^2.6.0"
+    "@commercetools/nimbus-tokens": "^2.8.0"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc && echo '🎉 Nimbus design token typescript plugin built'",
+    "generate:tokens": "node --disable-warning=MODULE_TYPELESS_PACKAGE_JSON scripts/generate-token-mapping.mjs",
+    "build": "pnpm generate:tokens && tsc && cp src/generated-token-mapping.json dist/ && echo '🎉 Nimbus design token typescript plugin built'",
     "typecheck": "tsc --noEmit",
     "test": "vitest run"
   }