@baloise/ds-tokens 19.9.4 → 20.0.0-next.4

package/dist/out-tsc/config.base.js

@@ -0,0 +1,85 @@
+const basePxFontSize = 16;
+const mode = 'Base';
+const config = {
+    source: [`tokens/${mode}.tokens.json`],
+    platforms: {
+        css: {
+            transformGroup: 'css',
+            transforms: ['ds/css/name', 'ds/color/rgba', 'ds/size/round', 'ds/size/rem'],
+            basePxFontSize,
+            buildPath: 'dist/',
+            prefix: 'ds',
+            files: [
+                {
+                    format: 'ds/css/variables-responsive',
+                    destination: `css/${mode.toLowerCase()}.tokens.css`,
+                },
+            ],
+            options: {
+                outputReferences: true,
+            },
+        },
+        scss: {
+            transformGroup: 'scss',
+            transforms: ['ds/css/name', 'ds/color/rgba', 'ds/size/round', 'ds/size/rem'],
+            basePxFontSize,
+            buildPath: 'dist/',
+            prefix: 'ds',
+            files: [
+                {
+                    format: 'scss/variables',
+                    destination: `sass/${mode.toLowerCase()}.tokens.scss`,
+                },
+            ],
+            options: {
+                outputReferences: true,
+            },
+        },
+        web: {
+            transformGroup: 'web',
+            transforms: ['ds/css/name', 'ds/color/hex', 'ds/size/rem'],
+            prefix: 'ds',
+            buildPath: 'dist/',
+            files: [
+                {
+                    format: 'json/flat',
+                    destination: `web/${mode.toLowerCase()}.tokens.json`,
+                },
+            ],
+            options: {
+                outputReferences: true,
+            },
+        },
+        docs: {
+            transformGroup: 'web',
+            transforms: ['ds/css/name', 'ds/color/hex', 'ds/size/rem'],
+            prefix: 'ds',
+            buildPath: 'dist/',
+            files: [
+                {
+                    format: 'json',
+                    destination: `docs/${mode.toLowerCase()}.tokens.json`,
+                },
+            ],
+            options: {
+                outputReferences: true,
+            },
+        },
+        javascript: {
+            transformGroup: 'js',
+            transforms: ['ds/js/name', 'ds/color/hex', 'ds/size/round'],
+            prefix: 'ds',
+            buildPath: 'dist/',
+            files: [
+                {
+                    format: 'javascript/es6',
+                    destination: `js/${mode.toLowerCase()}.tokens.js`,
+                },
+            ],
+            options: {
+                outputReferences: true,
+            },
+        },
+    },
+};
+export default config;

package/dist/out-tsc/config.brand.js

@@ -0,0 +1,82 @@
+import { readFileSync, writeFileSync, unlinkSync } from 'fs';
+const basePxFontSize = 16;
+/**
+ * Recursively walks both token trees and returns only the tokens whose
+ * `$value` differs from the base. Keeps the full hierarchy so Style
+ * Dictionary can still resolve references.
+ */
+function computeTokenDiff(base, brand) {
+    const result = {};
+    for (const [key, brandVal] of Object.entries(brand)) {
+        if (typeof brandVal !== 'object' || brandVal === null)
+            continue;
+        const baseVal = (base?.[key] ?? {});
+        if ('$value' in brandVal) {
+            // Token leaf — only keep it when the value actually changed
+            const brandSerialized = JSON.stringify(brandVal['$value']);
+            const baseSerialized = JSON.stringify(baseVal['$value']);
+            if (brandSerialized !== baseSerialized) {
+                result[key] = brandVal;
+            }
+        }
+        else {
+            // Group node — recurse and only include if something inside changed
+            const nested = computeTokenDiff(baseVal, brandVal);
+            if (Object.keys(nested).length > 0) {
+                result[key] = nested;
+            }
+        }
+    }
+    return result;
+}
+/**
+ * Creates a Style Dictionary config for a brand override build.
+ *
+ * Computes the diff between Base and the brand token file so that only
+ * genuinely changed tokens end up in the output CSS. Works whether the brand
+ * file is a minimal override or a full Figma-mode export with all tokens.
+ *
+ * Returns the config and a `cleanup` function that removes the temporary diff
+ * file that was written to disk so Style Dictionary can mark it as `source`.
+ */
+export function createBrandConfig(mode) {
+    const selector = `[data-theme="${mode.toLowerCase()}"]`;
+    const tmpFile = `tokens/.${mode.toLowerCase()}-diff.tmp.json`;
+    const baseJson = JSON.parse(readFileSync(`tokens/Base.tokens.json`, 'utf8'));
+    const brandJson = JSON.parse(readFileSync(`tokens/${mode}.tokens.json`, 'utf8'));
+    const diffTokens = computeTokenDiff(baseJson, brandJson);
+    // Write diff to a temp file — Style Dictionary only marks file-based source
+    // tokens as isSource:true, which is required for the brand formatter filter.
+    writeFileSync(tmpFile, JSON.stringify(diffTokens));
+    const config = {
+        include: [`tokens/Base.tokens.json`],
+        source: [tmpFile],
+        platforms: {
+            css: {
+                transforms: ['name/kebab', 'ds/css/name', 'ds/color/rgba', 'ds/size/round', 'ds/size/rem'],
+                basePxFontSize,
+                buildPath: 'dist/',
+                prefix: 'ds',
+                files: [
+                    {
+                        format: 'ds/css/variables-brand',
+                        destination: `css/${mode.toLowerCase()}.tokens.css`,
+                        options: {
+                            selector,
+                            outputReferences: true,
+                        },
+                    },
+                ],
+            },
+        },
+    };
+    const cleanup = () => {
+        try {
+            unlinkSync(tmpFile);
+        }
+        catch {
+            // ignore — file may already be gone
+        }
+    };
+    return { config, cleanup };
+}

package/dist/out-tsc/formatter.js

@@ -0,0 +1,236 @@
+import { fileHeader, formattedVariables } from 'style-dictionary/utils';
+import { propertyFormatNames } from 'style-dictionary/enums';
+export const registerCustomFormatters = (sd) => {
+    /**
+     * CSS Responsive Formatter
+     * ------------------------------------------------------
+     */
+    sd.registerFormat({
+        name: 'ds/css/variables-responsive',
+        format: async ({ dictionary, file, options }) => {
+            const { outputReferences } = options;
+            const header = await fileHeader({ file });
+            // find reponsive tokens in dictionary which ends with -mobile, -tablet or -desktop
+            const baseTokensOriginal = dictionary.allTokens.filter(token => token.name.endsWith('-mobile'));
+            // create a deeop copy of base tokens
+            const baseTokens = JSON.parse(JSON.stringify(baseTokensOriginal));
+            const deviceBaseTokens = JSON.parse(JSON.stringify(baseTokensOriginal));
+            //
+            // Base tokens
+            // ------------------------------------------------------
+            // same as mobile but without the suffix
+            baseTokens.forEach(token => {
+                token.name = token.name.replace('-mobile', '');
+            });
+            const baseDictionary = {
+                ...dictionary,
+                allTokens: baseTokens,
+            };
+            //
+            // Device tokens
+            // ------------------------------------------------------
+            // same as mobile but without the suffix
+            deviceBaseTokens.forEach(token => {
+                token.name = token.name.replace('-mobile', '-device');
+            });
+            const deviceBaseDictionary = {
+                ...dictionary,
+                allTokens: deviceBaseTokens,
+            };
+            const tabletTokensOriginal = dictionary.allTokens.filter(token => token.name.endsWith('-tablet'));
+            const deviceTabletTokens = JSON.parse(JSON.stringify(tabletTokensOriginal));
+            deviceTabletTokens.forEach(token => {
+                token.name = token.name.replace('-tablet', '-device');
+            });
+            const deviceTabletDictionary = {
+                ...dictionary,
+                allTokens: deviceTabletTokens,
+            };
+            const desktopTokensOriginal = dictionary.allTokens.filter(token => token.name.endsWith('-desktop'));
+            const deviceDesktopTokens = JSON.parse(JSON.stringify(desktopTokensOriginal));
+            deviceDesktopTokens.forEach(token => {
+                token.name = token.name.replace('-desktop', '-device');
+            });
+            const deviceDesktopDictionary = {
+                ...dictionary,
+                allTokens: deviceDesktopTokens,
+            };
+            // const mobileCss =
+            //   ':root {\n' +
+            //   formattedVariables({
+            //     format: propertyFormatNames.css,
+            //     dictionary,
+            //     outputReferences,
+            //     usesDtcg: true,
+            //   }) +
+            //   '\n\n' +
+            //   '  /* Base tokens */\n' +
+            //   formattedVariables({
+            //     format: propertyFormatNames.css,
+            //     dictionary: baseDictionary,
+            //     outputReferences,
+            //     usesDtcg: true,
+            //   }) +
+            //   '\n\n' +
+            //   '  /* Device tokens */\n' +
+            //   formattedVariables({
+            //     format: propertyFormatNames.css,
+            //     dictionary: deviceBaseDictionary,
+            //     outputReferences,
+            //     usesDtcg: true,
+            //   }) +
+            //   '\n}\n\n' +
+            //   '/* Device tokens: Tablet */\n' +
+            //   `\n@media (min-width: 769px) {\n` +
+            //   formattedVariables({
+            //     format: propertyFormatNames.css,
+            //     dictionary: deviceTabletDictionary,
+            //     outputReferences,
+            //     usesDtcg: true,
+            //   }) +
+            //   `\n}\n\n` +
+            //   '/* Device tokens: Desktop */\n' +
+            //   `\n@media (min-width: 1024px) {\n` +
+            //   formattedVariables({
+            //     format: propertyFormatNames.css,
+            //     dictionary: deviceDesktopDictionary,
+            //     outputReferences,
+            //     usesDtcg: true,
+            //   }) +
+            //   `\n}\n` +
+            //   '\n'
+            return (header +
+                ':root {\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n\n' +
+                '  /* Base tokens */\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: baseDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n\n' +
+                '  /* Device tokens */\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceBaseDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n}\n\n' +
+                '/* Device tokens: Tablet */\n' +
+                `\n@media (min-width: 769px) {\n` +
+                ':root {\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceTabletDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n\n` +
+                '/* Device tokens: Desktop */\n' +
+                `\n@media (min-width: 1024px) {\n` +
+                ':root {\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceDesktopDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n` +
+                '\n');
+        },
+    });
+    /**
+     * CSS Brand Formatter
+     * ------------------------------------------------------
+     */
+    sd.registerFormat({
+        name: 'ds/css/variables-brand',
+        format: async ({ dictionary, file, options }) => {
+            const { outputReferences } = options;
+            const selector = options.selector ?? '[data-theme="brand"]';
+            const header = await fileHeader({ file });
+            // Only emit tokens that come from the brand source file, not from include (base)
+            const sourceTokens = dictionary.allTokens.filter(token => token.isSource);
+            const sourceDictionary = { ...dictionary, allTokens: sourceTokens };
+            const baseTokensOriginal = sourceTokens.filter(token => token.name.endsWith('-mobile'));
+            const baseTokens = JSON.parse(JSON.stringify(baseTokensOriginal));
+            const deviceBaseTokens = JSON.parse(JSON.stringify(baseTokensOriginal));
+            baseTokens.forEach(token => {
+                token.name = token.name.replace('-mobile', '');
+            });
+            deviceBaseTokens.forEach(token => {
+                token.name = token.name.replace('-mobile', '-device');
+            });
+            const baseDictionary = { ...dictionary, allTokens: baseTokens };
+            const deviceBaseDictionary = { ...dictionary, allTokens: deviceBaseTokens };
+            const tabletTokensOriginal = sourceTokens.filter(token => token.name.endsWith('-tablet'));
+            const deviceTabletTokens = JSON.parse(JSON.stringify(tabletTokensOriginal));
+            deviceTabletTokens.forEach(token => {
+                token.name = token.name.replace('-tablet', '-device');
+            });
+            const deviceTabletDictionary = { ...dictionary, allTokens: deviceTabletTokens };
+            const desktopTokensOriginal = sourceTokens.filter(token => token.name.endsWith('-desktop'));
+            const deviceDesktopTokens = JSON.parse(JSON.stringify(desktopTokensOriginal));
+            deviceDesktopTokens.forEach(token => {
+                token.name = token.name.replace('-desktop', '-device');
+            });
+            const deviceDesktopDictionary = { ...dictionary, allTokens: deviceDesktopTokens };
+            return (header +
+                `${selector} {\n` +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: sourceDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n\n  /* Base tokens */\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: baseDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n\n  /* Device tokens */\n' +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceBaseDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                '\n}\n\n' +
+                '/* Device tokens: Tablet */\n' +
+                `\n@media (min-width: 769px) {\n` +
+                `${selector} {\n` +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceTabletDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n\n` +
+                '/* Device tokens: Desktop */\n' +
+                `\n@media (min-width: 1024px) {\n` +
+                `${selector} {\n` +
+                formattedVariables({
+                    format: propertyFormatNames.css,
+                    dictionary: deviceDesktopDictionary,
+                    outputReferences,
+                    usesDtcg: true,
+                }) +
+                `\n}` +
+                `\n}\n` +
+                '\n');
+        },
+    });
+};

package/dist/out-tsc/index.js

@@ -0,0 +1,43 @@
+import StyleDictionary from 'style-dictionary';
+import { copy, ensureDir, pathExists } from 'fs-extra';
+import { resolve } from 'path';
+console.log(`
+\x1b[35m┃\x1b[0m
+\x1b[35m┃\x1b[0m  \x1b[1;37m🧩 Helvetia Design System\x1b[0m
+\x1b[35m┃\x1b[0m  \x1b[90m🎨 Building Tokens Package\x1b[0m
+\x1b[35m┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\x1b[0m
+`);
+import { registerCustomTransformers } from './transformers.js';
+import { registerCustomFormatters } from './formatter.js';
+registerCustomTransformers(StyleDictionary);
+registerCustomFormatters(StyleDictionary);
+import ConfigBase from './config.base.js';
+import { createBrandConfig } from './config.brand.js';
+// Base build
+const StyleDictionaryBase = new StyleDictionary(ConfigBase);
+StyleDictionaryBase.buildAllPlatforms();
+// Brand builds — add new brand names here (must match tokens/<Name>.tokens.json)
+const brands = ['Tcs'];
+for (const brand of brands) {
+    const { config, cleanup } = createBrandConfig(brand);
+    try {
+        const sd = new StyleDictionary(config);
+        await sd.buildAllPlatforms();
+    }
+    finally {
+        cleanup();
+    }
+}
+// copy generated files to css folder in core assets
+const projectRoot = process.cwd();
+const sourceDir = resolve(projectRoot, 'dist', 'css');
+const targetDir = resolve(projectRoot, '..', 'core', 'www', 'assets', 'tokens');
+(async () => {
+    await ensureDir(targetDir);
+    if (await pathExists(sourceDir)) {
+        await copy(sourceDir, targetDir, { overwrite: true });
+    }
+    else {
+        console.warn(`Tokens CSS directory not found at: ${sourceDir}`);
+    }
+})();

package/dist/out-tsc/transformers.js

@@ -0,0 +1,150 @@
+export const registerCustomTransformers = (sd) => {
+    /**
+     * Transform color tokens with hex and alpha properties to rgba() format
+     */
+    sd.registerTransform({
+        type: `value`,
+        transitive: true,
+        name: `ds/color/rgba`,
+        filter: token => token.$type === 'color',
+        transform: token => {
+            const value = token.$value ?? token.value;
+            // Handle object values with hex and alpha properties
+            if (typeof value === 'object' && value !== null && 'hex' in value && 'alpha' in value && value.alpha < 1) {
+                const hex = value.hex.replace('#', '');
+                const r = parseInt(hex.substring(0, 2), 16);
+                const g = parseInt(hex.substring(2, 4), 16);
+                const b = parseInt(hex.substring(4, 6), 16);
+                const a = parseFloat(value.alpha);
+                return `rgba(${r}, ${g}, ${b}, ${a})`;
+            }
+            if (value.hex) {
+                return value.hex;
+            }
+            return value;
+        },
+    });
+    /**
+     * Transform color tokens with hex
+     */
+    sd.registerTransform({
+        type: `value`,
+        transitive: true,
+        name: `ds/color/hex`,
+        filter: token => token.$type === 'color',
+        transform: token => {
+            const value = token.$value ?? token.value;
+            // Handle object values with hex and alpha properties
+            if (typeof value === 'object' && value !== null && 'hex' in value && 'alpha' in value) {
+                return value.hex;
+            }
+            return value;
+        },
+    });
+    /**
+     * Transform token names for CSS usage
+     */
+    sd.registerTransform({
+        type: `name`,
+        transitive: true,
+        name: `ds/css/name`,
+        transform: token => {
+            let tokenName = token.name;
+            const isComponent = token.path.includes('🧩 Component');
+            if (isComponent) {
+                tokenName = tokenName.replace('-component', '');
+            }
+            // we use t-shirt sizes and need to make sure that 2xl becomes 2xl and not 2-xl
+            // check if token names has number followed by xl or xs and replace it with numberxl without dash
+            if (/-?([0-9]+)-(xl|xs)/.test(tokenName)) {
+                tokenName = tokenName.replace(/-?([0-9]+)-(xl|xs)/, '-$1$2');
+            }
+            // check that no name has double dash and replace it with single dash
+            if (tokenName.includes('--')) {
+                tokenName = tokenName.replace(/--+/g, '-');
+            }
+            return tokenName;
+        },
+    });
+    /**
+     * Transform token names for CSS usage
+     */
+    sd.registerTransform({
+        type: `name`,
+        transitive: true,
+        name: `ds/js/name`,
+        transform: token => {
+            let tokenName = token.name;
+            tokenName = tokenName.replace('Primitive', 'Global');
+            tokenName = tokenName.replace('Semantic', 'Alias');
+            return tokenName;
+        },
+    });
+    /**
+     * Transform size tokens from px to rem
+     */
+    sd.registerTransform({
+        type: `value`,
+        transitive: true,
+        name: `ds/size/rem`,
+        filter: token => token.$type === 'number',
+        transform: token => {
+            // const name = token.name
+            const value = token.$value;
+            // const originalValue = token.original.$value
+            const path = token.path;
+            // const isReference =
+            //   typeof originalValue === 'string' && originalValue.startsWith('{') && originalValue.endsWith('}')
+            if (`${value}`.endsWith('px')) {
+                return value;
+            }
+            if (`${value}`.endsWith('rem')) {
+                return value;
+            }
+            // Number only values with no unit
+            const tokenToBeNumberOnly = [
+                'LineHeight',
+                'FontWeight',
+                'Opacity',
+                '🌫️ Opacity',
+                'Z-Index',
+                '🗂️ Z-Index',
+                'Interaction',
+                '✨ Interaction',
+            ];
+            if (tokenToBeNumberOnly.some(ignored => path.includes(ignored))) {
+                return Math.round(value * 10) / 10;
+            }
+            // Number only values with no unit
+            const tokenToBeNumberPixel = ['📐 Breakpoint', 'Breakpoint', '🗃️ Container', 'Container'];
+            if (tokenToBeNumberPixel.some(ignored => path.includes(ignored))) {
+                return value + 'px';
+            }
+            // Extra case for rounded radius
+            if (value === 9999) {
+                return value + 'px';
+            }
+            // turn pixel into rem
+            return value / 16 + 'rem';
+        },
+    });
+    sd.registerTransform({
+        type: `value`,
+        transitive: true,
+        name: `ds/size/round`,
+        filter: token => token.$type === 'number',
+        transform: token => {
+            const value = token.$value ?? token.value;
+            const name = token.name;
+            const tokenName = Array.isArray(name) ? name.join('-') : String(name ?? '');
+            // if line-height round the value to 1 decimal place
+            if (tokenName.includes('line-height') ||
+                tokenName.includes('opacity') ||
+                tokenName.includes('LineHeight') ||
+                tokenName.includes('Opacity')) {
+                return Math.round(value * 10) / 10;
+            }
+            return value;
+        },
+    });
+};