@apify/ui-library 0.76.2-featcolortokens-178953.24 → 0.76.3

package/src/design_system/colors/build_color_tokens.js

@@ -1,183 +0,0 @@
-import StyleDictionary from 'style-dictionary';
-
-const DO_NOT_EXPORT_COMMENT = `/**
- * Do not edit directly, this file was auto-generated.
- */
-`;
-
-function toCamelCase(str) {
-    return str
-        .toLowerCase()
-        .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
-}
-
-/**
- * Converts an object to a TypeScript literal representation with proper indentation
- * that can be written to a TypeScript file.
- */
-function objectToTSLiteral(obj, indentLevel = 0) {
-    const indent = (level) => '    '.repeat(level); // 2-space indent
-
-    if (obj && typeof obj === 'object') {
-        const entries = Object.entries(obj);
-        if (entries.length === 0) return '{}';
-        return `{\n${entries
-            .map(
-                ([key, value]) => `${indent(indentLevel + 1)}${key}: ${objectToTSLiteral(value, indentLevel + 1)}`,
-            )
-            .join('\n')}\n${indent(indentLevel)}}${indentLevel > 0 ? ',' : ''}`;
-    } if (typeof obj === 'string') {
-        return `'${obj}',`;
-    }
-    return String(obj);
-}
-
-/**
- * Build color tokens for a given theme.
- * @param theme {string} - The theme to build tokens, 'light' or 'dark'.
- */
-async function buildTheme(theme) {
-    // Transform to replace 'semantic' and 'decorative' with 'color' in token names
-    // Example: 'semantic-neutral-text' becomes 'color-neutral-text'
-    StyleDictionary.registerTransform({
-        name: 'name/prefix-color-name',
-        type: 'name',
-        transform: (prop) => {
-            return prop.name
-                .replace(/^semantic/, 'color')
-                .replace(/^decorative/, 'color');
-        },
-    });
-
-    // Format to generate typescript file that exports CSS variables as a string
-    // Example: export const tokens = `--color-neutral-text: #000; --color-primary: #fff;`
-    StyleDictionary.registerFormat({
-        name: 'typescript/css-variables-string',
-        format: ({ dictionary, options }) => {
-            const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
-            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = \`\n${lines.join('\n')}\n\`;\n`;
-        },
-    });
-
-    // Format to generate typescript file that exports CSS properties as an object
-    // Example: export const tokens = { colorNeutralText: 'var(--color-neutral-text)', colorPrimary: 'var(--color-primary)' };
-    StyleDictionary.registerFormat({
-        name: 'typescript/css-color-properties',
-        format: ({ dictionary, options }) => {
-            const properties = {};
-            dictionary.allTokens.forEach((token) => {
-                const path = token.path.slice(1).map(toCamelCase);
-                let current = properties;
-                for (let i = 0; i < path.length - 1; i++) {
-                    const key = path[i];
-                    if (!(key in current)) {
-                        current[key] = {};
-                    }
-                    current = current[key];
-                }
-                current[path[path.length - 1]] = `var(--${token.name})`;
-            });
-
-            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
-        },
-    });
-
-    // Format to generate typescript file that exports CSS colors as an object
-    // Example: export const tokens = { colorNeutralText: '#000', colorPrimary: '#fff' };
-    StyleDictionary.registerFormat({
-        name: 'typescript/css-color-values',
-        format: ({ dictionary, options }) => {
-            const properties = {};
-            dictionary.allTokens.forEach((token) => {
-                const path = token.path.slice(1);
-                const name = toCamelCase(path.join(' '));
-                properties[name] = token.$value;
-            });
-
-            return `${DO_NOT_EXPORT_COMMENT}\nexport const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
-        },
-    });
-
-    // Select only tokens for semantic and decorative colors
-    StyleDictionary.registerFilter({
-        name: 'only-colors',
-        filter: (token) => ['Semantic', 'Decorative'].includes(token.path[0]),
-    });
-
-    // Select only tokens for palette colors
-    StyleDictionary.registerFilter({
-        name: 'only-palette',
-        filter: (token) => ['Palette'].includes(token.path[0]),
-    });
-
-    // Select only tokens for theme colors (Decorative and Palette)
-    StyleDictionary.registerFilter({
-        name: 'only-theme',
-        filter: (token) => ['Decorative', 'Palette'].includes(token.path[0]),
-    });
-
-    const styleDictionary = await (new StyleDictionary()).extend({
-        source: [`src/design_system/colors/figma_color_tokens.${theme}.json`],
-        platforms: {
-            ts: {
-                transformGroup: 'scss',
-                transforms: ['name/prefix-color-name'],
-                buildPath: 'src/design_system/colors/generated/',
-                files: [
-                    {
-                        destination: `css_variables.${theme}.ts`,
-                        format: 'typescript/css-variables-string',
-                        filter: 'only-colors',
-                    },
-                    {
-                        destination: `css_variables_palette.${theme}.ts`,
-                        format: 'typescript/css-variables-string',
-                        filter: 'only-palette',
-                    },
-                    {
-                        destination: `properties_theme.ts`,
-                        format: 'typescript/css-color-properties',
-                        filter: 'only-colors',
-                        options: {
-                            varName: 'colorProperties',
-                        },
-                    },
-                    {
-                        destination: `colors_theme.${theme}.ts`,
-                        format: 'typescript/css-color-values',
-                        filter: 'only-theme',
-                        options: {
-                            varName: `${theme}Theme`,
-                        },
-                    },
-                ],
-            },
-            style: {
-                transformGroup: 'scss',
-                transforms: ['name/prefix-color-name'],
-                buildPath: 'style/colors/',
-                files: [
-                    {
-                        destination: `${theme}.scss`,
-                        format: 'scss/map-flat',
-                        mapName: 'tokens',
-                        filter: 'only-colors',
-                    },
-                    {
-                        destination: `palette.${theme}.scss`,
-                        format: 'scss/map-flat',
-                        mapName: 'tokens',
-                        filter: 'only-palette',
-                    },
-                ],
-            },
-        },
-    });
-    await styleDictionary.buildPlatform('ts');
-    await styleDictionary.buildPlatform('style');
-}
-
-await Promise.all([
-    buildTheme('light'),
-    buildTheme('dark'),
-]);