unholy-design-tokens 1.0.0

package/dist/scripts/build-style-dictionary.js

@@ -0,0 +1,32 @@
+import path from 'node:path';
+import StyleDictionary from 'style-dictionary';
+import { logVerbosityLevels } from 'style-dictionary/enums';
+import styleDictionaryConfig from '../src/style-dictionary.config';
+import { tokensDeclarationFormatter, typesDeclarationFormatter, } from '../src/type-declarations/type-declarations.formatter.js';
+import { generateTypographyTokens } from './generate-typography-tokens';
+function ensureTrailingSlash(p) {
+    // Style Dictionary wants POSIX-ish trailing slash, even on Windows it accepts `/`
+    return p.endsWith(path.sep) ? p : p + path.sep;
+}
+export async function buildStyleDictionary(outDir) {
+    // 1️⃣ Generate typography tokens FIRST
+    generateTypographyTokens();
+    // clone config so we can override buildPath safely
+    const config = {
+        ...styleDictionaryConfig,
+        platforms: Object.fromEntries(Object.entries(styleDictionaryConfig.platforms).map(([name, platform]) => [
+            name,
+            { ...platform },
+        ])),
+    };
+    for (const platform of Object.values(config.platforms)) {
+        platform.buildPath = ensureTrailingSlash(path.resolve(outDir, platform.buildPath ?? './build/'));
+    }
+    let sd = new StyleDictionary(config, {
+        verbosity: logVerbosityLevels.verbose,
+    });
+    // Types formatters
+    StyleDictionary.registerFormat(typesDeclarationFormatter);
+    StyleDictionary.registerFormat(tokensDeclarationFormatter);
+    await sd.buildAllPlatforms();
+}

package/dist/scripts/generate-typography-tokens.js

@@ -0,0 +1,125 @@
+// scripts/generate-typography-tokens.js
+// ---------------------------------------------------------
+// Generate ALL typography tokens from primitives/font.json
+// ---------------------------------------------------------
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { generateUtopiaScale } from '../src/utils';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const INPUT_FILE = path.join(__dirname, `../src/tokens/1 - primitives/font.json`);
+const PRIMITIVES_OUT = path.join(__dirname, `../src/tokens/1 - primitives/font-scale.json`);
+const INTENT_OUT = path.join(__dirname, '../src/tokens/3 - intent/font.json');
+// -----------------------------------
+// Load primitive inputs for typography
+// -----------------------------------
+export function generateTypographyTokens() {
+    if (!fs.existsSync(INPUT_FILE)) {
+        process.exit(1);
+    }
+    let configToken;
+    try {
+        configToken = JSON.parse(fs.readFileSync(INPUT_FILE, 'utf8')).font;
+    }
+    catch {
+        process.exit(1);
+    }
+    const config = {
+        minFont: configToken.minFont?.value ?? 16,
+        maxFont: configToken.maxFont?.value ?? 20,
+        minViewport: configToken.minViewport?.value ?? 360,
+        maxViewport: configToken.maxViewport?.value ?? 1280,
+        scaleMin: configToken.scaleMin?.value ?? 1.2,
+        scaleMax: configToken.scaleMax?.value ?? 1.25,
+        steps: configToken.steps?.value ?? [0, 1, 2, 3, 4, 5, 6],
+    };
+    // -----------------------------------
+    // Build Utopia scale
+    // -----------------------------------
+    const scale = generateUtopiaScale(config);
+    // -----------------------------------
+    // Output primitive scale tokens
+    // -----------------------------------
+    const primitives = {
+        font: {
+            scale: Object.fromEntries(Object.entries(scale).map(([step, value]) => [step, { value }])),
+        },
+    };
+    // -----------------------------------
+    // Define intent tokens
+    // -----------------------------------
+    const intent = {
+        text: {
+            body: {
+                size: {
+                    value: 'var(--font-scale-0)',
+                },
+                lineHeight: {
+                    value: '1.5',
+                },
+                weight: {
+                    value: 'var(--font-weight-regular)',
+                },
+            },
+            caption: {
+                size: {
+                    value: 'var(--font-scale--2)',
+                },
+                lineHeight: {
+                    value: '1.4',
+                },
+                weight: {
+                    value: 'var(--font-weight-regular)',
+                },
+            },
+            small: {
+                size: {
+                    value: 'var(--font-scale--1)',
+                },
+                lineHeight: {
+                    value: '1.4',
+                },
+                weight: {
+                    value: 'var(--font-weight-regular)',
+                },
+            },
+        },
+        heading: {
+            h1: {
+                size: {
+                    value: 'var(--font-scale-4)',
+                },
+                lineHeight: {
+                    value: '1.1',
+                },
+                weight: {
+                    value: 'var(--font-weight-bold)',
+                },
+            },
+            h2: {
+                size: {
+                    value: 'var(--font-scale-3)',
+                },
+                lineHeight: {
+                    value: '1.15',
+                },
+                weight: {
+                    value: 'var(--font-weight-bold)',
+                },
+            },
+        },
+    };
+    // -----------------------------------
+    // Write JSON files
+    // -----------------------------------
+    function writeJSON(file, data) {
+        const dir = path.dirname(file);
+        if (!fs.existsSync(dir))
+            fs.mkdirSync(dir, { recursive: true });
+        fs.writeFileSync(file, JSON.stringify(data, null, 2));
+    }
+    writeJSON(PRIMITIVES_OUT, primitives);
+    // writeJSON(SEMANTIC_OUT, semantic);
+    writeJSON(INTENT_OUT, intent);
+}

package/dist/src/colors/color.config.js

@@ -0,0 +1,45 @@
+import StyleDictionary from 'style-dictionary';
+import { isColorToken } from './color.filter';
+import { colorFormatter } from './color.formatter';
+StyleDictionary.registerFormat(colorFormatter);
+export default [
+    {
+        destination: 'colors.css',
+        transformGroup: 'css',
+        format: 'format/color',
+        // format: "css/variables",
+        filter: (token) => isColorToken(token),
+        options: {
+        // outputReferences: true,
+        // fileHeader: () => {
+        //   return ["Collection name: Color Primitives", "Mode: Light"];
+        // },
+        },
+    },
+    // {
+    //   destination: "colors.semantic.css",
+    //   transformGroup: "css",
+    //   // format: "css/variables",
+    //   format: "format/color",
+    //   filter: (token) => isSemanticColor(token),
+    //   options: {
+    //     outputReferences: true,
+    //     fileHeader: () => {
+    //       return ["Collection name: Color Semantics", "Mode: Light"];
+    //     },
+    //   },
+    // },
+    // {
+    //   destination: "colors.intent.css",
+    //   transformGroup: "css",
+    //   // format: "css/variables",
+    //   format: "format/color",
+    //   filter: (token) => isIntentColor(token),
+    //   options: {
+    //     outputReferences: true,
+    //     fileHeader: () => {
+    //       return ["Collection name: Color Intents", "Mode: Light"];
+    //     },
+    //   },
+    // },
+];

package/dist/src/colors/color.filter.js

@@ -0,0 +1,19 @@
+export function isPrimitiveColor(token) {
+    if (token.attributes?.tokenTier)
+        return token.attributes?.tokenTier === 'primitive' && token.attributes?.category === 'color';
+}
+export function isSemanticColor(token) {
+    return token.attributes?.tokenTier === 'semantic' && token.attributes?.category === 'color';
+}
+export function isIntentColor(token) {
+    return token.attributes?.tokenTier === 'intent' && token.attributes?.category === 'color';
+}
+export function isPoolColor(token) {
+    return token.attributes?.tokenTier === 'color-pool' && token.attributes?.category === 'color-pool';
+}
+export function isColorToken(token) {
+    return (isPoolColor(token) || isPrimitiveColor(token) || isSemanticColor(token) || isIntentColor(token));
+}
+export function filterThemeTokens(token) {
+    return isPrimitiveColor(token);
+}

package/dist/src/colors/color.formatter.js

@@ -0,0 +1,25 @@
+import { capitalizeFirstLetter, generateFigmaHeaderReference, generateHeader, resolveTokenReferences, toKebab, tokenName, } from '../utils';
+export const colorFormatter = {
+    name: 'format/color',
+    format: ({ dictionary, options }) => {
+        // Get color tier from first token
+        // e.g. 'primitive', 'semantic', 'intent'
+        const colorTier = dictionary.allTokens[0].attributes?.tokenTier;
+        let content = '';
+        const header = generateFigmaHeaderReference(`Color ${capitalizeFirstLetter(colorTier)}`, options?.mode || 'Light');
+        let currentTier = null;
+        dictionary.allTokens.forEach((token) => {
+            const value = resolveTokenReferences(token, options, dictionary);
+            let usedSubsections = new Set(); // resets per category
+            const tier = token?.attributes?.tokenTier;
+            if (tier && tier !== currentTier) {
+                currentTier = tier;
+                usedSubsections = new Set();
+                content += generateHeader(tier);
+            }
+            const name = `--${toKebab(tokenName(token))}`;
+            content += `${name}: ${value};\n`;
+        });
+        return `${header}\n:root {\n${content}}`;
+    },
+};

package/dist/src/colors/index.js

@@ -0,0 +1,2 @@
+export { isIntentColor, isPrimitiveColor, isSemanticColor, } from './color.filter.js';
+export { default as colorConfig } from './color.config.js';

package/dist/src/cube-css/cube.config.js

@@ -0,0 +1,42 @@
+// cube.files.js
+import StyleDictionary from 'style-dictionary';
+import { formats } from 'style-dictionary/enums';
+import { cubeUtilityFormatter } from './cube.formatter';
+const cubeBuildPath = 'cube';
+// registers "cube/utility"
+StyleDictionary.registerFormat(cubeUtilityFormatter);
+export default [
+    // Composition → @layer objects
+    {
+        destination: `${cubeBuildPath}/cube.composition.css`,
+        format: formats.cssVariables,
+        filter: (token) => token.attributes?.category === 'cube' && token.attributes?.type === 'composition',
+        options: {
+            layerName: 'objects',
+            selector: ':root',
+            // if your cube values are already "var(...)" and not "{...}",
+            // you don't need SD reference output:
+            outputReferences: false,
+        },
+    },
+    // Block → @layer components
+    {
+        destination: `${cubeBuildPath}/cube.block.css`,
+        format: formats.cssVariables,
+        filter: (token) => token.attributes?.category === 'cube' && token.attributes?.type === 'block',
+        options: {
+            layerName: 'components',
+            selector: ':root',
+            outputReferences: false,
+        },
+    },
+    // Utility → custom formatter
+    {
+        destination: `${cubeBuildPath}/cube.utility.css`,
+        format: 'cube/utility',
+        filter: (token) => token.attributes?.category === 'cube' && token.attributes?.type === 'utility',
+        options: {
+            outputReferences: false,
+        },
+    },
+];

package/dist/src/cube-css/cube.formatter.js

@@ -0,0 +1,89 @@
+import { generateHeader, toKebab } from '../utils';
+/**
+ * Build public/private CSS var names from tokens.
+ *
+ * Rules:
+ * - For "normal" tokens (color, border, space, etc.), keep:
+ *     --{type}-{item}[-{subitem}]
+ *   e.g. --border-width-default, --space-md
+ *
+ * - For cube tokens (category: "cube"):
+ *   - type = "block", "composition", "utility", ...
+ *   - item = e.g. "card", "stack", "cluster"
+ *   - subitem = e.g. "background", "borderColor", "gap"
+ *
+ *   Option A mapping:
+ *   - block/card/background  → --block-card-background
+ *   - composition/stack/gap  → --stack-gap
+ *   - utility/spacing/mt-0   → --utility-spacing-mt-0
+ *
+ */
+export function generateThemeCubeCSS(tokens) {
+    const order = ['global', 'composition', 'block', 'utility'];
+    return tokens
+        .filter((t) => t.attributes?.category === 'cube')
+        .sort((a, b) => {
+        const aType = a.attributes?.type;
+        const bType = b.attributes?.type;
+        const aIndex = order.indexOf(aType);
+        const bIndex = order.indexOf(bType);
+        return aIndex - bIndex;
+    })
+        .map((t) => generateThemeCubeCSSVariables(t));
+}
+export function generateThemeCubeCSSVariables(token) {
+    const attrs = token.attributes || {};
+    const path = token.path || [];
+    const item = attrs.item || path[1] || 'default';
+    const subitem = attrs.subitem;
+    const base = subitem ? `${item}-${subitem}` : `${item}`; // no dangling "-"
+    const publicName = `--${toKebab(base)}`;
+    const privateName = publicName.replace(/^--/, '--_');
+    return {
+        publicName,
+        privateName,
+        value: token.value,
+        category: attrs.category, // "cube"
+        subsection: attrs.type, // ✅ "block" | "composition" | ...
+    };
+}
+/**
+ * CUBE: Utility → @layer utilities
+ * Generate utility classes from tokens.
+ */
+export const cubeUtilityFormatter = {
+    name: 'cube/utility',
+    format: ({ dictionary }) => {
+        let content = '';
+        const usedItems = new Set();
+        dictionary.allTokens.forEach((token) => {
+            const item = token.attributes?.item;
+            if (item && !usedItems.has(item)) {
+                usedItems.add(item);
+                content += generateHeader(item);
+            }
+            content += generateCubeUtilityClass(token);
+        });
+        return content;
+    },
+};
+export function generateCubeUtilityClass(token) {
+    // fallback for other cube types, e.g. utility/spacing/mt-0 → --utility-spacing-mt-0
+    const attrs = token.attributes || {};
+    const path = token.path || [];
+    const item = attrs.item || path[1] || '';
+    let className = '';
+    const hideItems = ['display'];
+    if (!hideItems.includes(item)) {
+        className = `${item}-`;
+    }
+    else {
+        className = ``;
+    }
+    const subitem = attrs.subitem ? `${attrs.subitem}` : '';
+    const state = attrs.state ? `-${attrs.state}` : '';
+    className = `${className}${subitem}${state}`;
+    className = `.${toKebab(className)}`;
+    const classCssContent = `${token.value}`;
+    return `${className} { ${classCssContent} } \n`;
+}

package/dist/src/style-dictionary.config.js

@@ -0,0 +1,143 @@
+import StyleDictionary from 'style-dictionary';
+import { formats, transformGroups } from 'style-dictionary/enums';
+// @ts-expect-error - JS module without type declarations
+import { themeConfig } from './theme/index.js';
+import typeDeclarationsConfig from './type-declarations/type-declarations.config.js';
+// import { cubeCssVariablesLayerFormatter } from './cube-css/formatters/cube-css.js';
+import cubeConfig from './cube-css/cube.config.js';
+// @ts-expect-error - JS module without type declarations
+import { spacingFluid } from './formatters/spacing.js';
+// import "./theme/formatters/theme.format.js"; // your file shown above (theme formats)
+import colorConfig from './colors/color.config.js';
+// import themeConfig from './theme/theme.config.js';
+StyleDictionary.registerFormat(spacingFluid);
+function generateThemeFiles(directories) {
+    const genericAttributes = {
+        format: formats.cssVariables,
+        options: {
+        // outputReferences: true,
+        },
+    };
+    return directories.map((dir) => {
+        return {
+            ...genericAttributes,
+            // output the dironent tokens in the right folder and file e.g. dironents/button/button-vars.css
+            destination: `${dir}/${dir}.css`,
+            format: formats.cssVariables,
+            // only include the tokens that are inside this dironent token group
+            filter: (token) => {
+                return token.path[0] === dir || token.attributes?.type === dir;
+            },
+        };
+    });
+}
+StyleDictionary.registerFormat({
+    name: 'conditional-css',
+    format: function ({ dictionary }) {
+        let output = `:root {\n`;
+        output += dictionary.allTokens
+            .map((token) => {
+            const { type } = token.attributes || {};
+            return `  --${type}: ${token.value};`;
+        })
+            .join('\n');
+        output += `\n}\n`;
+        return output;
+    },
+});
+export default {
+    // parser: 'initial-theme-parser',
+    source: ['src/tokens/**/*.json'],
+    // action: ['generate-utopia-typography'],
+    platforms: {
+        css: {
+            transformGroup: transformGroups.css,
+            transforms: [
+                'attribute/cti', // pick up category/type/item
+            ],
+            buildPath: 'css/',
+            clearBuildPath: true,
+            outputReferences: true,
+            files: [
+                {
+                    destination: 'tokens.css',
+                    format: 'css/variables',
+                    filter: (token) => {
+                        return token.attributes?.category === 'typography';
+                    },
+                    actions: ['generate-utopia-typography'], // <- here
+                    options: {
+                        outputReferences: true,
+                    },
+                },
+                {
+                    destination: 'conditional.css',
+                    filter: (token) => token.attributes?.category === 'conditional',
+                    format: 'conditional-css',
+                    transformGroup: 'css',
+                    options: {
+                        outputReferences: true,
+                    },
+                },
+                ...themeConfig,
+                {
+                    destination: 'space.css',
+                    // format: "css/spacing-fluid",
+                    format: formats.cssVariables,
+                    filter: (token) => {
+                        return token.attributes?.category === 'space' || token.attributes?.type === 'space';
+                    },
+                    options: {
+                        outputReferences: true,
+                    },
+                },
+                // -------------------------------------------------------
+                /**
+                 * OKlch tokens
+                 */
+                // {
+                //   destination: 'primitives.css',
+                //   format: formats.cssVariables,
+                //   filter: (token) => {
+                //     return token.attributes?.type === 'primitive'
+                //   },
+                // },
+                // {
+                //   destination: 'variant.css',
+                //   format: formats.cssVariables,
+                //   filter: (token) => {
+                //     return token.attributes?.category === 'variant'
+                //   },
+                //   options: {
+                //     fileHeader: (defaultMessage: string[]) => {
+                //       return [...defaultMessage, 'Variant tokens']
+                //     },
+                //   },
+                // },
+                {
+                    destination: 'variants.css',
+                    format: formats.cssVariables,
+                    filter: (token) => {
+                        const variants = ['variant', 'state', 'color'];
+                        const category = token.attributes?.category;
+                        return (variants.includes(category) &&
+                            token.attributes?.tokenTier !== 'intent' &&
+                            token.attributes?.tokenTier !== 'semantic' &&
+                            token.attributes?.tokenTier !== 'primitive');
+                    },
+                    options: {
+                        fileHeader: (defaultMessage) => {
+                            return [...defaultMessage, 'Variant tokens'];
+                        },
+                        outputReferences: true,
+                    },
+                },
+                ...colorConfig,
+                ...cubeConfig,
+                ...generateThemeFiles(['components', 'font', 'bg', 'border', 'text', 'variant']),
+            ],
+        },
+        // Type declarations
+        ...typeDeclarationsConfig,
+    },
+};

package/dist/src/type-declarations/type-declarations.config.js

@@ -0,0 +1,29 @@
+import StyleDictionary from 'style-dictionary';
+import { tokensDeclarationFormatter, typesDeclarationFormatter, } from './type-declarations.formatter';
+StyleDictionary.registerFormat(typesDeclarationFormatter);
+StyleDictionary.registerFormat(tokensDeclarationFormatter);
+export default {
+    ts: {
+        // transformGroup: "js",
+        // transformGroup: "js",
+        buildPath: 'types/',
+        files: [
+            {
+                destination: 'theme.d.ts',
+                format: 'typescript/types-declaration',
+                transformGroup: 'js',
+            },
+        ],
+    },
+    // Tokens declarations
+    tokens: {
+        transformGroup: 'css',
+        buildPath: 'types/',
+        files: [
+            {
+                destination: 'tokens.ts',
+                format: 'typescript/tokens-declaration',
+            },
+        ],
+    },
+};

package/dist/src/type-declarations/type-declarations.formatter.js

@@ -0,0 +1,111 @@
+import StyleDictionary from 'style-dictionary';
+/**
+ * Generates a TypeScript interface declaration for all design tokens.
+ *
+ * @type {{ name: string; format: ({ dictionary }: FormatFnArguments) => string; }}
+ *
+ * Will return:
+ * export interface YThemeToken {
+ *   tokenName1: string;
+ *   tokenName2: string;
+ *   ...
+ * }
+ */
+StyleDictionary.registerFormat({
+    name: 'typescript/types-declaration',
+    format: function ({ dictionary }) {
+        const props = dictionary.tokens;
+        console.log('📟 - props → ', props);
+        // const types = props.map((token) => `  '${token.name}': string;`).join("\n");
+        // return `export interface YThemeToken {\n${types}\n}\n`;
+    },
+});
+/**
+ * Generates a TypeScript interface declaration for all design tokens.
+ *
+ * Will return:
+ * export interface YThemeToken {
+ *   tokenName1: string;
+ *   tokenName2: string;
+ *   ...
+ * }
+ *
+ * where tokenName is the name of the token e.g. 'color-primary-100'
+ */
+export const tokensDeclarationFormatter = {
+    name: 'typescript/tokens-declaration',
+    format: function ({ dictionary }) {
+        const myMap = dictionary.tokenMap;
+        let types = '';
+        for (const value of myMap.values()) {
+            const name = value.name;
+            types += `  '${name}': string;\n`;
+        }
+        return `export interface YThemeToken {\n${types}\n}\n`;
+    },
+};
+/**
+ * @type {{ name: string; format: ({ dictionary }: FormatFnArguments) => string; }}
+ *
+ * Will return:
+ * export interface DesignTokens {
+ *   border: {
+ *     width: {
+ *       base: string;
+ *       scale: string;
+ *     };
+ *   };
+ *   ...
+ * }
+ */
+export const typesDeclarationFormatter = {
+    name: 'typescript/types-declaration',
+    format: function ({ dictionary }) {
+        const interfaceBody = generateNestedInterface(dictionary.tokens, 1);
+        return `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export interface DesignTokens {
+${interfaceBody}}
+`;
+    },
+};
+/**
+ * Check if an object is a leaf token (has $value or value property)
+ */
+function isToken(obj) {
+    return obj && typeof obj === 'object' && ('$value' in obj || 'value' in obj);
+}
+/**
+ * Escape property name if it contains special characters
+ */
+function formatKey(key) {
+    // If key starts with a number or contains special chars, quote it
+    if (/^[0-9]/.test(key) || /[^a-zA-Z0-9_$]/.test(key)) {
+        return `'${key}'`;
+    }
+    return key;
+}
+/**
+ * Recursively generate nested interface from token tree
+ */
+function generateNestedInterface(obj, depth = 0) {
+    const indent = '  '.repeat(depth);
+    let result = '';
+    for (const key of Object.keys(obj)) {
+        const value = obj[key];
+        if (isToken(value)) {
+            // Leaf token - output as string type
+            result += `${indent}${formatKey(key)}: string;\n`;
+        }
+        else if (typeof value === 'object' && value !== null) {
+            // Nested object - recurse
+            const nested = generateNestedInterface(value, depth + 1);
+            if (nested.trim()) {
+                result += `${indent}${formatKey(key)}: {\n${nested}${indent}};\n`;
+            }
+        }
+    }
+    return result;
+}

package/dist/src/utils/helpers.js

@@ -0,0 +1,9 @@
+export function capitalizeFirstLetter(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+export function toKebab(s) {
+    return String(s)
+        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
+        .replace(/[_.]/g, "-")
+        .toLowerCase();
+}