@apify/ui-library 1.150.0 → 1.151.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "1.150.0",
+    "version": "1.151.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -83,5 +83,5 @@
         "src",
         "style"
     ],
-    "gitHead": "9bab807c13c3db944300da3795de893a82990a1d"
+    "gitHead": "d784b4847b2b7b2c4eeeb14e631da99ebbf15bcf"
 }

package/src/design_system/colors/build_color_tokens.js

@@ -30,97 +30,103 @@ function objectToTSLiteral(obj, indentLevel = 0) {
     return String(obj);
 }
 
+// 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 a plain CSS file with tokens inside a :root block
+StyleDictionary.registerFormat({
+    name: 'css/custom-properties',
+    format: ({ dictionary }) => {
+        const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
+        return `${DO_NOT_EXPORT_COMMENT}\n:root {\n${lines.join('\n')}\n}\n`;
+    },
+});
+
+// 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', 'Brand'].includes(token.path[0]),
+});
+
+// Select only the semantic neutral tokens (used for the brand dark neutral override)
+StyleDictionary.registerFilter({
+    name: 'only-neutral',
+    filter: (token) => token.path[0] === 'Semantic' && token.path[1] === 'Neutral',
+});
+
 /**
  * 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 a plain CSS file with tokens inside a :root block
-    StyleDictionary.registerFormat({
-        name: 'css/custom-properties',
-        format: ({ dictionary }) => {
-            const lines = dictionary.allTokens.map((token) => `  --${token.name}: ${token.$value};`);
-            return `${DO_NOT_EXPORT_COMMENT}\n:root {\n${lines.join('\n')}\n}\n`;
-        },
-    });
-
-    // 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', 'Brand'].includes(token.path[0]),
-    });
-
     const styleDictionary = await new StyleDictionary().extend({
         source: [`src/design_system/colors/figma_color_tokens.${theme}.json`],
         platforms: {
@@ -187,4 +193,33 @@ async function buildTheme(theme) {
     await styleDictionary.buildPlatform('style');
 }
 
-await Promise.all([buildTheme('light'), buildTheme('dark')]);
+/**
+ * Build the brand dark neutral override (`css_variables_brand_neutrals.dark.ts`).
+ *
+ * apify.com's dark mode uses a darker neutral palette than the library's default
+ * dark tokens. Only the `--color-neutral-*` variables differ, so we emit just the
+ * `Semantic.Neutral` group from its own Figma export; `cssColorsVariablesBrandDark`
+ * layers these over the base dark tokens and the cascade does the rest.
+ */
+async function buildBrandDarkNeutrals() {
+    const styleDictionary = await new StyleDictionary().extend({
+        source: ['src/design_system/colors/figma_color_tokens.brand_neutrals.dark.json'],
+        platforms: {
+            ts: {
+                transformGroup: 'scss',
+                transforms: ['name/prefix-color-name'],
+                buildPath: 'src/design_system/colors/generated/',
+                files: [
+                    {
+                        destination: `css_variables_brand_neutrals.dark.ts`,
+                        format: 'typescript/css-variables-string',
+                        filter: 'only-neutral',
+                    },
+                ],
+            },
+        },
+    });
+    await styleDictionary.buildPlatform('ts');
+}
+
+await Promise.all([buildTheme('light'), buildTheme('dark'), buildBrandDarkNeutrals()]);

package/src/design_system/colors/css_variables_brand_dark.ts

@@ -0,0 +1,15 @@
+import { tokens as cssColorsVariablesDark } from './generated/css_variables.dark';
+import { tokens as brandDarkNeutralOverrides } from './generated/css_variables_brand_neutrals.dark';
+
+/**
+ * Full dark theme using apify.com's darker brand neutral palette.
+ *
+ * Every `theme.color.neutral.*` value is a `var(--color-neutral-*)` reference,
+ * so we ship the standard dark tokens and then re-declare only the neutral
+ * variables with the brand palette — the cascade does the rest. The non-neutral
+ * tokens therefore stay in sync with `cssColorsVariablesDark` automatically.
+ *
+ * Apply this on its own as a complete theme (it already includes the base dark
+ * tokens); there is no need to also apply `cssColorsVariablesDark`.
+ */
+export const cssColorsVariablesBrandDark = `${cssColorsVariablesDark}${brandDarkNeutralOverrides}`;

package/src/design_system/colors/figma_color_tokens.brand_neutrals.dark.json

@@ -0,0 +1,154 @@
+{
+    "Semantic": {
+        "Neutral": {
+            "Text": {
+                "$type": "color",
+                "$value": "#dfdfdf"
+            },
+            "Text_Muted": {
+                "$type": "color",
+                "$value": "#a3a3a3"
+            },
+            "Text_Subtle": {
+                "$type": "color",
+                "$value": "#888888"
+            },
+            "Text_Disabled": {
+                "$type": "color",
+                "$value": "#454545"
+            },
+            "Text_On_Primary": {
+                "$type": "color",
+                "$value": "#161616"
+            },
+            "Icon_On_Primary": {
+                "$type": "color",
+                "$value": "#161616"
+            },
+            "Background": {
+                "$type": "color",
+                "$value": "#020202"
+            },
+            "Background_Muted": {
+                "$type": "color",
+                "$value": "#0f0f0f"
+            },
+            "Background_Subtle": {
+                "$type": "color",
+                "$value": "#1d1d1d"
+            },
+            "Background_White": {
+                "$type": "color",
+                "$value": "#f3f3f3"
+            },
+            "Card_Background": {
+                "$type": "color",
+                "$value": "#0f0f0f"
+            },
+            "Card_Background_Hover": {
+                "$type": "color",
+                "$value": "#1d1d1d"
+            },
+            "Border": {
+                "$type": "color",
+                "$value": "#2a2a2a"
+            },
+            "Separator_Subtle": {
+                "$type": "color",
+                "$value": "#161616"
+            },
+            "Hover": {
+                "$type": "color",
+                "$value": "#313131"
+            },
+            "Disabled": {
+                "$type": "color",
+                "$value": "#383838"
+            },
+            "Overflow": {
+                "$type": "color",
+                "$value": "#2a2a2a"
+            },
+            "Icon": {
+                "$type": "color",
+                "$value": "#d8d8d8"
+            },
+            "Icon_Subtle": {
+                "$type": "color",
+                "$value": "#6d6d6d"
+            },
+            "Icon_Disabled": {
+                "$type": "color",
+                "$value": "#454545"
+            },
+            "Field_Border": {
+                "$type": "color",
+                "$value": "#454545"
+            },
+            "Action_Secondary": {
+                "$type": "color",
+                "$value": "#2a2a2a"
+            },
+            "Action_Secondary_Hover": {
+                "$type": "color",
+                "$value": "#454545"
+            },
+            "Action_Secondary_Active": {
+                "$type": "color",
+                "$value": "#454545"
+            },
+            "Chip_Background": {
+                "$type": "color",
+                "$value": "#606060"
+            },
+            "Chip_Background_Hover": {
+                "$type": "color",
+                "$value": "#7b7b7b"
+            },
+            "Chip_Background_Active": {
+                "$type": "color",
+                "$value": "#959595"
+            },
+            "Chip_Background_Disabled": {
+                "$type": "color",
+                "$value": "#959595"
+            },
+            "Large_Tooltip_Background": {
+                "$type": "color",
+                "$value": "#2a2a2a"
+            },
+            "Large_Tooltip_Border": {
+                "$type": "color",
+                "$value": "#383838"
+            },
+            "Small_Tooltip_Text": {
+                "$type": "color",
+                "$value": "#ffffff"
+            },
+            "Small_Tooltip_Background": {
+                "$type": "color",
+                "$value": "#2a2a2a"
+            },
+            "Small_Tooltip_Border": {
+                "$type": "color",
+                "$value": "#383838"
+            },
+            "Overlay": {
+                "$type": "color",
+                "$value": "#101114"
+            },
+            "Field_Background": {
+                "$type": "color",
+                "$value": "#0f0f0f"
+            },
+            "Text_Placeholder": {
+                "$type": "color",
+                "$value": "#7b7b7b"
+            },
+            "On_Surface": {
+                "$type": "color",
+                "$value": "rgba(109, 113, 120, 0.22)"
+            }
+        }
+    }
+}

package/src/design_system/colors/generated/css_variables_brand_neutrals.dark.ts

@@ -0,0 +1,43 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const tokens = `
+  --color-neutral-text: #dfdfdf;
+  --color-neutral-text-muted: #a3a3a3;
+  --color-neutral-text-subtle: #888888;
+  --color-neutral-text-disabled: #454545;
+  --color-neutral-text-on-primary: #161616;
+  --color-neutral-icon-on-primary: #161616;
+  --color-neutral-background: #020202;
+  --color-neutral-background-muted: #0f0f0f;
+  --color-neutral-background-subtle: #1d1d1d;
+  --color-neutral-background-white: #f3f3f3;
+  --color-neutral-card-background: #0f0f0f;
+  --color-neutral-card-background-hover: #1d1d1d;
+  --color-neutral-border: #2a2a2a;
+  --color-neutral-separator-subtle: #161616;
+  --color-neutral-hover: #313131;
+  --color-neutral-disabled: #383838;
+  --color-neutral-overflow: #2a2a2a;
+  --color-neutral-icon: #d8d8d8;
+  --color-neutral-icon-subtle: #6d6d6d;
+  --color-neutral-icon-disabled: #454545;
+  --color-neutral-field-border: #454545;
+  --color-neutral-action-secondary: #2a2a2a;
+  --color-neutral-action-secondary-hover: #454545;
+  --color-neutral-action-secondary-active: #454545;
+  --color-neutral-chip-background: #606060;
+  --color-neutral-chip-background-hover: #7b7b7b;
+  --color-neutral-chip-background-active: #959595;
+  --color-neutral-chip-background-disabled: #959595;
+  --color-neutral-large-tooltip-background: #2a2a2a;
+  --color-neutral-large-tooltip-border: #383838;
+  --color-neutral-small-tooltip-text: #ffffff;
+  --color-neutral-small-tooltip-background: #2a2a2a;
+  --color-neutral-small-tooltip-border: #383838;
+  --color-neutral-overlay: #101114;
+  --color-neutral-field-background: #0f0f0f;
+  --color-neutral-text-placeholder: #7b7b7b;
+  --color-neutral-on-surface: rgba(109, 113, 120, 0.22);
+`;

package/src/design_system/colors/index.ts

@@ -2,6 +2,7 @@ export { tokens as cssColorsVariablesLight } from './generated/css_variables.lig
 export { tokens as cssColorsVariablesDark } from './generated/css_variables.dark';
 export { tokens as cssColorsVariablesPaletteLight } from './generated/css_variables_palette.light';
 export { tokens as cssColorsVariablesPaletteDark } from './generated/css_variables_palette.dark';
+export { cssColorsVariablesBrandDark } from './css_variables_brand_dark';
 export { darkTheme } from './generated/colors_theme.dark';
 export { lightTheme } from './generated/colors_theme.light';
 export { colorProperties } from './generated/properties_theme';