@apify/ui-library 0.71.0 → 0.71.1-featcolortokens-178953.55

package/src/design_system/colors/build_color_tokens.js

@@ -0,0 +1,169 @@
+import StyleDictionary from 'style-dictionary';
+
+function toCamelCase(str) {
+    return str
+        .toLowerCase()
+        .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
+}
+
+function objectToTSLiteral(obj, indentLevel = 0) {
+    const indent = (level) => '    '.repeat(level); // 2-space indent
+
+    if (Array.isArray(obj)) {
+        if (obj.length === 0) return '[]';
+        return `[\n${obj
+            .map((item) => indent(indentLevel + 1) + objectToTSLiteral(item, indentLevel + 1))
+            .join(',\n')}\n${indent(indentLevel)}]`;
+    } 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}',`; // add quotes and escape
+    }
+    return String(obj);
+}
+
+async function buildTheme(theme) {
+    StyleDictionary.registerTransform({
+        name: 'name/prefix-color-name',
+        type: 'name',
+        transform: (prop) => {
+            // replace 'semantic' and 'decorative' with 'color' in the full token name
+            return prop.name
+                .replace(/^semantic/, 'color')
+                .replace(/^decorative/, 'color');
+        },
+    });
+
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-variables-string',
+        format: ({ dictionary, options }) => {
+            const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
+            return `/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const ${options.varName ?? 'tokens'} = \`\n${lines.join('\n')}\n\`;\n`;
+        },
+    });
+
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-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 edit directly, this file was auto-generated.
+ */
+
+export const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+        },
+    });
+
+    StyleDictionary.registerFormat({
+        name: 'typescript/css-colors',
+        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 edit directly, this file was auto-generated.
+ */
+
+export const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+        },
+    });
+
+    StyleDictionary.registerFilter({
+        name: 'only-colors',
+        filter: (token) => ['Semantic', 'Decorative'].includes(token.path[0]),
+    });
+
+    StyleDictionary.registerFilter({
+        name: 'only-palette',
+        filter: (token) => ['Palette'].includes(token.path[0]),
+    });
+
+    StyleDictionary.registerFilter({
+        name: 'only-theme',
+        filter: (token) => ['Decorative', 'Palette'].includes(token.path[0]),
+    });
+
+    const sd = await (new StyleDictionary()).extend({
+        source: [`src/design_system/colors/figma_color_tokens.${theme}.json`],
+        platforms: {
+            main: {
+                transformGroup: 'scss',
+                transforms: ['name/prefix-color-name'],
+                buildPath: 'src/design_system/colors/generated/',
+                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',
+                    },
+                    {
+                        destination: `${theme}.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-colors',
+                    },
+                    {
+                        destination: `palette.${theme}.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-palette',
+                    },
+                    {
+                        destination: `properties_theme.ts`,
+                        format: 'typescript/css-properties',
+                        filter: 'only-colors',
+                        options: {
+                            varName: 'colorProperties',
+                        },
+                    },
+                    {
+                        destination: `colors_theme.${theme}.ts`,
+                        format: 'typescript/css-colors',
+                        filter: 'only-theme',
+                        options: {
+                            varName: `${theme}Theme`,
+                        },
+                    },
+                ],
+            },
+        },
+    });
+    await sd.buildPlatform('main');
+}
+
+await Promise.all([
+    buildTheme('light'),
+    buildTheme('dark'),
+]);