@commercetools/nimbus-design-token-ts-plugin 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# @commercetools/nimbus-design-token-ts-plugin
+
+TypeScript language service plugin that shows design token CSS values in
+autocomplete when editing Chakra UI styled-system properties.
+
+When you type `gap="` in a component, the autocomplete dropdown shows entries
+like:
+
+```
+600  = 24px
+400  = 16px
+200  = 8px
+```
+
+instead of just the raw token names.
+
+## Supported Token Categories
+
+- **Spacing** (including negatives): `gap`, `padding`, `margin`, etc.
+- **Font sizes**: `fontSize`
+- **Border radius**: `borderRadius`
+- **Colors**: `color`, `bg`, `borderColor`, etc.
+- **Blur**: `blur`
+- **Shadows**: `shadow`, `boxShadow`
+- **Font weights**: `fontWeight`
+- **Line heights**: `lineHeight`
+- **Sizes**: `width`, `height`, `minWidth`, etc.
+- **Opacity**: `opacity`
+- **Z-index**: `zIndex`
+- **Durations**: `transitionDuration`, `animationDuration`
+- And more
+
+## Installation
+
+```bash
+pnpm add -D @commercetools/nimbus-design-token-ts-plugin
+```
+
+## Configuration
+
+Add the plugin to your `tsconfig.json` (or `tsconfig.app.json` if using project
+references):
+
+```json
+{
+  "compilerOptions": {
+    "plugins": [{ "name": "@commercetools/nimbus-design-token-ts-plugin" }]
+  }
+}
+```
+
+## VS Code Setup
+
+1. Open the command palette (Cmd+Shift+P / Ctrl+Shift+P)
+2. Run **"TypeScript: Select TypeScript Version"**
+3. Select **"Use Workspace Version"**
+4. Restart the TS server: **"TypeScript: Restart TS Server"**
+
+The plugin only works with the workspace TypeScript version, not VS Code's
+built-in version.
+
+## How It Works
+
+The plugin intercepts TypeScript's `getCompletionsAtPosition` calls. When it
+detects that the completion entries match a known design token category (by
+fingerprinting the set of available values), it annotates each entry with the
+resolved CSS value from `@commercetools/nimbus-tokens`.
+
+The detection is automatic - no configuration of which properties map to which
+token categories is needed. The plugin infers the category from the completions
+TypeScript already provides.
+
+## Requirements
+
+- `@commercetools/nimbus-tokens` must be installed (defined as peer dependency)
+- TypeScript >= 5.0
+- VS Code or any editor that supports TypeScript language service plugins

package/dist/category-detector.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Detects which token category a set of completion entries belongs to
+ * by computing overlap scores against known category fingerprints.
+ */
+import type { CategorySets } from "./token-data";
+/**
+ * Given a list of completion entry names from TS, determine which token
+ * category they belong to by finding the category with the highest overlap.
+ *
+ * Returns the category name or undefined if no match exceeds the threshold.
+ */
+export declare function detectCategory(entryNames: string[], categorySets: CategorySets): string | undefined;

package/dist/category-detector.js

@@ -0,0 +1,63 @@
+"use strict";
+/**
+ * Detects which token category a set of completion entries belongs to
+ * by computing overlap scores against known category fingerprints.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectCategory = detectCategory;
+/** Names to exclude from fingerprint matching */
+const EXCLUDED_PATTERNS = [
+    /^\[/, // array-like entries
+    /^currentBg$/,
+    /^currentColor$/,
+    /^colorPalette/,
+    /^true$/,
+    /^false$/,
+    /!/, // entries with "!" (important modifiers)
+    /^inherit$/,
+    /^initial$/,
+    /^unset$/,
+    /^auto$/,
+    /^none$/,
+    /^transparent$/,
+    /^current$/,
+];
+/**
+ * Given a list of completion entry names from TS, determine which token
+ * category they belong to by finding the category with the highest overlap.
+ *
+ * Returns the category name or undefined if no match exceeds the threshold.
+ */
+function detectCategory(entryNames, categorySets) {
+    // Filter out non-token entries
+    const filtered = entryNames.filter((name) => !EXCLUDED_PATTERNS.some((pattern) => pattern.test(name)));
+    if (filtered.length === 0)
+        return undefined;
+    const filteredSet = new Set(filtered);
+    // Collect all candidates that exceed the overlap threshold
+    const candidates = [];
+    for (const [category, tokenSet] of Object.entries(categorySets)) {
+        let intersection = 0;
+        for (const token of tokenSet) {
+            if (filteredSet.has(token)) {
+                intersection++;
+            }
+        }
+        const ratio = intersection / tokenSet.size;
+        // Require > 50% of the category's tokens to appear in completions
+        if (ratio > 0.5) {
+            candidates.push({ category, ratio, intersection });
+        }
+    }
+    if (candidates.length === 0)
+        return undefined;
+    // When multiple categories match (e.g. fontWeights is a subset of spacing),
+    // prefer the one with the most matching tokens (largest intersection).
+    // If tied on intersection, prefer the higher ratio.
+    candidates.sort((a, b) => {
+        if (b.intersection !== a.intersection)
+            return b.intersection - a.intersection;
+        return b.ratio - a.ratio;
+    });
+    return candidates[0].category;
+}

package/dist/category-detector.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/category-detector.spec.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const category_detector_1 = require("./category-detector");
+const token_data_1 = require("./token-data");
+const data = (0, token_data_1.loadTokenData)();
+const { categorySets } = data;
+/** Helper: get all token names for a category plus some CSS keywords */
+function entriesFor(category, extras = []) {
+    return [...categorySets[category], ...extras];
+}
+(0, vitest_1.describe)("detectCategory", () => {
+    (0, vitest_1.it)("detects spacing tokens", () => {
+        const entries = entriesFor("spacing", ["auto", "inherit"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("spacing");
+    });
+    (0, vitest_1.it)("detects fontSize tokens", () => {
+        const entries = entriesFor("fontSizes", ["inherit"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("fontSizes");
+    });
+    (0, vitest_1.it)("detects borderRadius tokens", () => {
+        const entries = entriesFor("radii", ["none", "inherit"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("radii");
+    });
+    (0, vitest_1.it)("detects blur tokens", () => {
+        const entries = entriesFor("blurs", ["none"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("blurs");
+    });
+    (0, vitest_1.it)("detects fontWeight tokens", () => {
+        const entries = entriesFor("fontWeights", ["inherit"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("fontWeights");
+    });
+    (0, vitest_1.it)("detects color tokens", () => {
+        const entries = entriesFor("colors", [
+            "transparent",
+            "currentColor",
+            "inherit",
+        ]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("colors");
+    });
+    (0, vitest_1.it)("detects shadow tokens", () => {
+        const entries = entriesFor("shadows", ["none"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("shadows");
+    });
+    (0, vitest_1.it)("detects opacity tokens", () => {
+        const entries = entriesFor("opacity", ["inherit"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("opacity");
+    });
+    (0, vitest_1.it)("detects zIndex tokens", () => {
+        const entries = entriesFor("zIndex", ["auto"]);
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("zIndex");
+    });
+    (0, vitest_1.it)("returns undefined for unrecognized entries", () => {
+        const entries = ["foo", "bar", "baz", "qux"];
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBeUndefined();
+    });
+    (0, vitest_1.it)("returns undefined for empty entries", () => {
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)([], categorySets)).toBeUndefined();
+    });
+    (0, vitest_1.it)("returns undefined when only excluded entries are present", () => {
+        const entries = ["inherit", "initial", "auto", "none", "transparent"];
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBeUndefined();
+    });
+    (0, vitest_1.it)("prefers spacing over fontWeights when both match (subset handling)", () => {
+        // Spacing includes all fontWeight values (100-900) plus many more
+        // When all spacing tokens are present, spacing should win
+        const entries = entriesFor("spacing");
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("spacing");
+    });
+    (0, vitest_1.it)("correctly identifies fontWeights when only weight values are present", () => {
+        // When only 100-900 are present (no other spacing tokens),
+        // fontWeights should win since it has higher ratio
+        const entries = [
+            "100",
+            "200",
+            "300",
+            "400",
+            "500",
+            "600",
+            "700",
+            "800",
+            "900",
+        ];
+        (0, vitest_1.expect)((0, category_detector_1.detectCategory)(entries, categorySets)).toBe("fontWeights");
+    });
+});

package/dist/create-plugin.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Creates a proxy LanguageService that enriches completions with
+ * design token CSS values.
+ */
+import type typescript from "typescript";
+import type { TokenData } from "./token-data";
+export declare function createPlugin(_ts: typeof typescript, info: typescript.server.PluginCreateInfo, tokenData: TokenData): typescript.LanguageService;

package/dist/create-plugin.js

@@ -0,0 +1,46 @@
+"use strict";
+/**
+ * Creates a proxy LanguageService that enriches completions with
+ * design token CSS values.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createPlugin = createPlugin;
+const category_detector_1 = require("./category-detector");
+function createPlugin(_ts, info, tokenData) {
+    const proxy = Object.create(null);
+    // Copy all methods from the original language service
+    const ls = info.languageService;
+    const p = proxy;
+    for (const key of Object.keys(ls)) {
+        const value = ls[key];
+        if (typeof value === "function") {
+            p[key] = value.bind(info.languageService);
+        }
+    }
+    // Override getCompletionsAtPosition to enrich entries
+    proxy.getCompletionsAtPosition = (fileName, position, options) => {
+        const original = info.languageService.getCompletionsAtPosition(fileName, position, options);
+        if (!original || original.entries.length === 0) {
+            return original;
+        }
+        // Extract entry names for category detection
+        const entryNames = original.entries.map((e) => e.name);
+        const category = (0, category_detector_1.detectCategory)(entryNames, tokenData.categorySets);
+        if (!category) {
+            return original;
+        }
+        const values = tokenData.categoryValues[category];
+        if (!values) {
+            return original;
+        }
+        // Enrich each entry with its CSS value
+        for (const entry of original.entries) {
+            const cssValue = values[entry.name];
+            if (cssValue !== undefined) {
+                entry.labelDetails = { detail: ` = ${cssValue}` };
+            }
+        }
+        return original;
+    };
+    return proxy;
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * TypeScript Language Service Plugin entry point.
+ *
+ * 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";
+declare function init(_modules: {
+    typescript: typeof typescript;
+}): {
+    create(info: typescript.server.PluginCreateInfo): typescript.LanguageService;
+};
+export = init;

package/dist/index.js

@@ -0,0 +1,26 @@
+"use strict";
+/**
+ * TypeScript Language Service Plugin entry point.
+ *
+ * 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");
+const create_plugin_1 = require("./create-plugin");
+function init(_modules) {
+    return {
+        create(info) {
+            info.project.projectService.logger.info("[nimbus-design-token-ts-plugin] Initializing...");
+            const tokenData = (0, token_data_1.loadTokenData)();
+            if (!tokenData) {
+                info.project.projectService.logger.info("[nimbus-design-token-ts-plugin] Could not load token data, plugin disabled.");
+                return info.languageService;
+            }
+            const categoryCount = Object.keys(tokenData.categorySets).length;
+            const totalTokens = Object.values(tokenData.categorySets).reduce((sum, set) => sum + set.size, 0);
+            info.project.projectService.logger.info(`[nimbus-design-token-ts-plugin] Loaded ${totalTokens} tokens across ${categoryCount} categories.`);
+            return (0, create_plugin_1.createPlugin)(_modules.typescript, info, tokenData);
+        },
+    };
+}
+module.exports = init;

package/dist/token-data.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Loads design token data from @commercetools/nimbus-tokens and builds
+ * lookup maps for enriching autocomplete with CSS values.
+ */
+/** category name → { token name → CSS value string } */
+export type CategoryValues = Record<string, Record<string, string>>;
+/** category name → Set of all token names in that category */
+export type CategorySets = Record<string, Set<string>>;
+export interface TokenData {
+    categoryValues: CategoryValues;
+    categorySets: CategorySets;
+}
+export declare function loadTokenData(): TokenData | undefined;

package/dist/token-data.js

@@ -0,0 +1,199 @@
+"use strict";
+/**
+ * Loads design token data from @commercetools/nimbus-tokens and builds
+ * lookup maps for enriching autocomplete with CSS values.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTokenData = loadTokenData;
+/**
+ * Attempt to load tokens and build lookup maps.
+ * Returns undefined if token loading fails (graceful degradation).
+ */
+function loadDesignTokens() {
+    // Try main entrypoint first
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require("@commercetools/nimbus-tokens");
+        if (mod.designTokens)
+            return mod.designTokens;
+    }
+    catch {
+        // Main entrypoint may fail in some Node/ESM contexts
+    }
+    // Fallback: resolve the package directory and load the generated CJS entrypoint
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const path = require("path");
+        // Resolve any file from the package to find its directory
+        // Use require.resolve with paths to find the package location
+        const mainPath = require.resolve("@commercetools/nimbus-tokens");
+        // mainPath is something like .../packages/tokens/dist/commercetools-nimbus-tokens.esm.js
+        // Navigate up to the package root, then down to the generated CJS file
+        const distDir = path.dirname(mainPath);
+        const pkgDir = path.dirname(distDir);
+        const generatedCjsPath = path.join(pkgDir, "generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.dev.js");
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const mod = require(generatedCjsPath);
+        if (mod.designTokens)
+            return mod.designTokens;
+    }
+    catch {
+        // Fallback also failed
+    }
+    return undefined;
+}
+function loadTokenData() {
+    try {
+        const tokens = loadDesignTokens();
+        if (!tokens)
+            return undefined;
+        const categoryValues = {};
+        const categorySets = {};
+        // Simple flat categories: key → string value
+        const flatCategories = {
+            spacing: "spacing",
+            blur: "blurs",
+            borderRadius: "radii",
+            borderWidth: "borderWidths",
+            fontSize: "fontSizes",
+            lineHeight: "lineHeights",
+            size: "sizes",
+            border: "borders",
+            shadow: "shadows",
+            duration: "durations",
+            easing: "easings",
+            fontFamily: "fonts",
+            breakpoints: "breakpoints",
+        };
+        for (const [tokenKey, categoryName] of Object.entries(flatCategories)) {
+            const data = tokens[tokenKey];
+            if (!data || typeof data !== "object")
+                continue;
+            const values = {};
+            for (const [name, val] of Object.entries(data)) {
+                if (typeof val === "string") {
+                    values[name] = val;
+                }
+                else if (typeof val === "number") {
+                    values[name] = String(val);
+                }
+                // Skip composite objects (e.g. textStyle entries, letterSpacing with {value})
+            }
+            if (Object.keys(values).length > 0) {
+                categoryValues[categoryName] = values;
+                categorySets[categoryName] = new Set(Object.keys(values));
+            }
+        }
+        // Spacing: also generate negative tokens
+        if (categoryValues["spacing"]) {
+            const negValues = {
+                ...categoryValues["spacing"],
+            };
+            for (const [name, val] of Object.entries(categoryValues["spacing"])) {
+                // Only negate numeric token names
+                if (/^\d+$/.test(name) && val.endsWith("px")) {
+                    const px = parseFloat(val);
+                    negValues[`-${name}`] = `-${px}px`;
+                }
+            }
+            categoryValues["spacing"] = negValues;
+            categorySets["spacing"] = new Set(Object.keys(negValues));
+        }
+        // Font weight: numeric values
+        if (tokens.fontWeight && typeof tokens.fontWeight === "object") {
+            const values = {};
+            for (const [name, val] of Object.entries(tokens.fontWeight)) {
+                if (typeof val === "number") {
+                    values[name] = String(val);
+                }
+                else if (typeof val === "string") {
+                    values[name] = val;
+                }
+            }
+            if (Object.keys(values).length > 0) {
+                categoryValues["fontWeights"] = values;
+                categorySets["fontWeights"] = new Set(Object.keys(values));
+            }
+        }
+        // Opacity: numeric values
+        if (tokens.opacity && typeof tokens.opacity === "object") {
+            const values = {};
+            for (const [name, val] of Object.entries(tokens.opacity)) {
+                if (typeof val === "number") {
+                    values[name] = String(val);
+                }
+                else if (typeof val === "string") {
+                    values[name] = val;
+                }
+            }
+            if (Object.keys(values).length > 0) {
+                categoryValues["opacity"] = values;
+                categorySets["opacity"] = new Set(Object.keys(values));
+            }
+        }
+        // Colors: flatten nested structure into dot-notation keys
+        // The color object has sub-groups: "blacks-and-whites", "system-palettes",
+        // "brand-palettes", "semantic-palettes"
+        if (tokens.color && typeof tokens.color === "object") {
+            const colorValues = {};
+            for (const groupObj of Object.values(tokens.color)) {
+                if (!groupObj || typeof groupObj !== "object")
+                    continue;
+                flattenColors(groupObj, "", colorValues);
+            }
+            if (Object.keys(colorValues).length > 0) {
+                categoryValues["colors"] = colorValues;
+                categorySets["colors"] = new Set(Object.keys(colorValues));
+            }
+        }
+        // zIndex
+        if (tokens.zIndex && typeof tokens.zIndex === "object") {
+            const values = {};
+            for (const [name, val] of Object.entries(tokens.zIndex)) {
+                if (typeof val === "number") {
+                    values[name] = String(val);
+                }
+                else if (typeof val === "string") {
+                    values[name] = val;
+                }
+            }
+            if (Object.keys(values).length > 0) {
+                categoryValues["zIndex"] = values;
+                categorySets["zIndex"] = new Set(Object.keys(values));
+            }
+        }
+        return { categoryValues, categorySets };
+    }
+    catch {
+        // Token loading failed — plugin degrades gracefully
+        return undefined;
+    }
+}
+/**
+ * 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(...)"
+ */
+function flattenColors(obj, prefix, result) {
+    for (const [key, val] of Object.entries(obj)) {
+        const fullKey = prefix ? `${prefix}.${key}` : key;
+        if (typeof val === "string") {
+            result[fullKey] = val;
+        }
+        else if (val && typeof val === "object") {
+            const record = val;
+            // If this object has "light" and "dark" keys, use the light values
+            if ("light" in record && "dark" in record) {
+                const lightObj = record.light;
+                if (lightObj && typeof lightObj === "object") {
+                    flattenColors(lightObj, prefix ? `${prefix}.${key}` : key, result);
+                }
+            }
+            else {
+                // Regular nested object — recurse
+                flattenColors(record, fullKey, result);
+            }
+        }
+    }
+}

package/dist/token-data.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/token-data.spec.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const token_data_1 = require("./token-data");
+const nimbus_tokens_1 = require("@commercetools/nimbus-tokens");
+(0, vitest_1.describe)("loadTokenData", () => {
+    const data = (0, token_data_1.loadTokenData)();
+    (0, vitest_1.it)("loads token data successfully", () => {
+        (0, vitest_1.expect)(data).toBeDefined();
+    });
+    (0, vitest_1.it)("contains expected categories", () => {
+        const categories = Object.keys(data.categorySets);
+        (0, vitest_1.expect)(categories).toContain("spacing");
+        (0, vitest_1.expect)(categories).toContain("fontSizes");
+        (0, vitest_1.expect)(categories).toContain("radii");
+        (0, vitest_1.expect)(categories).toContain("blurs");
+        (0, vitest_1.expect)(categories).toContain("colors");
+        (0, vitest_1.expect)(categories).toContain("fontWeights");
+        (0, vitest_1.expect)(categories).toContain("shadows");
+        (0, vitest_1.expect)(categories).toContain("opacity");
+        (0, vitest_1.expect)(categories).toContain("zIndex");
+    });
+    (0, vitest_1.describe)("spacing tokens", () => {
+        (0, vitest_1.it)("maps token names to CSS values from source tokens", () => {
+            const spacing = data.categoryValues["spacing"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.spacing)) {
+                if (typeof value === "string") {
+                    (0, vitest_1.expect)(spacing[name]).toBe(value);
+                }
+            }
+        });
+        (0, vitest_1.it)("includes negative tokens derived from source", () => {
+            const spacing = data.categoryValues["spacing"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.spacing)) {
+                if (typeof value === "string" &&
+                    /^\d+$/.test(name) &&
+                    value.endsWith("px")) {
+                    const px = parseFloat(value);
+                    (0, vitest_1.expect)(spacing[`-${name}`]).toBe(`-${px}px`);
+                }
+            }
+        });
+        (0, vitest_1.it)("has matching sets and values", () => {
+            const set = data.categorySets["spacing"];
+            const values = data.categoryValues["spacing"];
+            (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)("fontSize tokens", () => {
+        (0, vitest_1.it)("maps all source fontSize tokens", () => {
+            const fontSizes = data.categoryValues["fontSizes"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.fontSize)) {
+                if (typeof value === "string") {
+                    (0, vitest_1.expect)(fontSizes[name]).toBe(value);
+                }
+            }
+        });
+    });
+    (0, vitest_1.describe)("borderRadius tokens", () => {
+        (0, vitest_1.it)("maps all source borderRadius tokens", () => {
+            const radii = data.categoryValues["radii"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.borderRadius)) {
+                if (typeof value === "string") {
+                    (0, vitest_1.expect)(radii[name]).toBe(value);
+                }
+            }
+        });
+    });
+    (0, vitest_1.describe)("color tokens", () => {
+        (0, vitest_1.it)("includes flat colors from blacks-and-whites", () => {
+            const colors = data.categoryValues["colors"];
+            const bw = nimbus_tokens_1.designTokens.color["blacks-and-whites"];
+            (0, vitest_1.expect)(colors["black"]).toBe(bw.black);
+            (0, vitest_1.expect)(colors["white"]).toBe(bw.white);
+        });
+        (0, vitest_1.it)("includes alpha colors with dot notation", () => {
+            const colors = data.categoryValues["colors"];
+            const bw = nimbus_tokens_1.designTokens.color["blacks-and-whites"];
+            for (const [name, value] of Object.entries(bw.blackAlpha)) {
+                (0, vitest_1.expect)(colors[`blackAlpha.${name}`]).toBe(value);
+            }
+        });
+        (0, vitest_1.it)("flattens palette colors using light 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);
+            }
+        });
+        (0, vitest_1.it)("includes semantic palette colors", () => {
+            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);
+            }
+        });
+    });
+    (0, vitest_1.describe)("fontWeight tokens", () => {
+        (0, vitest_1.it)("maps all source fontWeight tokens", () => {
+            const weights = data.categoryValues["fontWeights"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.fontWeight)) {
+                (0, vitest_1.expect)(weights[name]).toBe(String(value));
+            }
+        });
+    });
+    (0, vitest_1.describe)("opacity tokens", () => {
+        (0, vitest_1.it)("maps all source opacity tokens", () => {
+            const opacity = data.categoryValues["opacity"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.opacity)) {
+                (0, vitest_1.expect)(opacity[name]).toBe(String(value));
+            }
+        });
+    });
+    (0, vitest_1.describe)("zIndex tokens", () => {
+        (0, vitest_1.it)("maps all source zIndex tokens", () => {
+            const zIndex = data.categoryValues["zIndex"];
+            for (const [name, value] of Object.entries(nimbus_tokens_1.designTokens.zIndex)) {
+                (0, vitest_1.expect)(zIndex[name]).toBe(String(value));
+            }
+        });
+    });
+});

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@commercetools/nimbus-design-token-ts-plugin",
+  "version": "0.1.0",
+  "description": "TypeScript language service plugin that shows design token CSS values in autocomplete",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/nimbus.git"
+  },
+  "peerDependencies": {
+    "@commercetools/nimbus-tokens": "^2.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "typescript": "~5.9.3",
+    "vitest": "^4.0.18",
+    "@commercetools/nimbus-tokens": "^2.5.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && echo '🎉 Nimbus design token typescript plugin built'",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}