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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.71.1-featcolortokens-178953.55+af467915b4b",
+    "version": "0.71.1-featcolortokens-178953.56+f2721db5883",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -69,5 +69,5 @@
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "af467915b4b5c3c48c090c932c5f9b51ab765411"
+    "gitHead": "f2721db58831367f5fa059e0fa1e1d9224ff5624"
 }

package/src/design_system/colors/build_color_tokens.js

@@ -1,20 +1,24 @@
 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 (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') {
+    if (obj && typeof obj === 'object') {
         const entries = Object.entries(obj);
         if (entries.length === 0) return '{}';
         return `{\n${entries
@@ -23,35 +27,40 @@ function objectToTSLiteral(obj, indentLevel = 0) {
             )
             .join('\n')}\n${indent(indentLevel)}}${indentLevel > 0 ? ',' : ''}`;
     } if (typeof obj === 'string') {
-        return `'${obj}',`; // add quotes and escape
+        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) => {
-            // replace 'semantic' and 'decorative' with 'color' in the full token name
             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 edit directly, this file was auto-generated.
- */
-
-export const ${options.varName ?? 'tokens'} = \`\n${lines.join('\n')}\n\`;\n`;
+            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-properties',
         format: ({ dictionary, options }) => {
@@ -69,14 +78,12 @@ export const ${options.varName ?? 'tokens'} = \`\n${lines.join('\n')}\n\`;\n`;
                 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`;
+            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-colors',
         format: ({ dictionary, options }) => {
@@ -87,24 +94,23 @@ export const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} a
                 properties[name] = token.$value;
             });
 
-            return `/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const ${options.varName ?? 'tokens'} = ${objectToTSLiteral(properties)} as const;\n`;
+            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]),

package/style-dictionary.config.json

@@ -1,29 +0,0 @@
-{
-    "source": ["src/design_system/figma_color_tokens.light.json", "src/design_system/figma_color_tokens.dark.json"],
-    "platforms": {
-        "scss": {
-            "transformGroup": "scss",
-            "buildPath": "build/",
-            "files": [
-                {
-                    "destination": "scss/_variables.scss",
-                    "format": "css/variables"
-                },
-                {
-                    "destination": "scss/_variables.dark.scss",
-                    "format": "css/variables-dark"
-                }
-            ]
-        },
-        "android": {
-            "transformGroup": "android",
-            "buildPath": "build/android/",
-            "files": [
-                {
-                    "destination": "font_dimens.xml",
-                    "format": "android/fontDimens"
-                }
-            ]
-        }
-    }
-}