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

package/dist/src/design_system/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/design_system/theme.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKd,4FAA4F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAM/F,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/design_system/theme.ts"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKd,4FAA4F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAM/F,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA"}

package/dist/src/design_system/theme.js

@@ -1,5 +1,4 @@
-import { darkTheme, lightTheme } from './colors_theme.js';
-import { colorProperties } from './properties_theme.js';
+import { colorProperties, darkTheme, lightTheme } from './colors/index.js';
 import { devices, layouts, radiuses, shadows, spaces, transitions, } from './tokens/index.js';
 import { typographyTokens } from './typography_theme.js';
 export const theme = {

package/dist/src/design_system/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/design_system/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EACH,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,WAAW,GACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,KAAK,EAAE,eAAe;IACtB,YAAY,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,4FAA4F;IAC5F,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,WAAW;IACvB,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,gBAAgB;CAC/B,CAAC"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/design_system/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC3E,OAAO,EACH,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,MAAM,EACN,WAAW,GACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,CAAC,MAAM,KAAK,GAAG;IACjB,KAAK,EAAE,eAAe;IACtB,YAAY,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,QAAQ;IAChB,4FAA4F;IAC5F,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,WAAW;IACvB,MAAM,EAAE,OAAO;IACf,UAAU,EAAE,gBAAgB;CAC/B,CAAC"}

package/dist/src/index.d.ts

@@ -3,5 +3,6 @@ export * from './utils/index.js';
 export * from './design_system/tokens/index.js';
 export * from './design_system/theme.js';
 export * from './ui_dependency_provider.js';
+export * from './design_system/colors/index.js';
 export * from './type_utils.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAEhD,cAAc,iBAAiB,CAAC"}

package/dist/src/index.js

@@ -3,5 +3,6 @@ export * from './utils/index.js';
 export * from './design_system/tokens/index.js';
 export * from './design_system/theme.js';
 export * from './ui_dependency_provider.js';
+export * from './design_system/colors/index.js';
 export * from './type_utils.js';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAE5C,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iCAAiC,CAAC;AAChD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAEhD,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.70.1",
+    "version": "0.71.1-featcolortokens-178953.55+af467915b4b",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -14,11 +14,12 @@
         "test": "echo \"Warning: no test specified\" && exit 0",
         "lint": "eslint .",
         "lint:fix": "eslint . --fix",
-        "build": "npm run clean && npm run compile",
+        "build": "npm run clean && npm run compile && npm run copy-styles",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
-        "generate-theme": "node ./src/codemods/generate_color_theme_files.mjs && node src/codemods/generate_color_property_tokens.mjs && node src/codemods/generate_typograpy_tokens_files.mjs  && npm run lint:fix",
-        "generate-color-definition": "node ./src/design_system/generate_color_definitions.js",
+        "generate-theme": "node src/codemods/generate_typograpy_tokens_files.mjs  && npm run lint:fix",
+        "build-color-tokens": "node src/design_system/colors/build_color_tokens.js",
+        "copy-styles": "cpx \"src/design_system/colors/generated/*.scss\" dist/styles",
         "postpublish": "npm run clean"
     },
     "//": [
@@ -57,14 +58,16 @@
         "@types/node": "^22.10.5",
         "@types/react": "^18.2.74",
         "@types/styled-components": "^5.1.34",
+        "cpx": "^1.5.0",
         "eslint": "^9.22.0",
         "eslint-plugin-import": "2.26.0",
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-sonarjs": "^1.0.3",
         "recast": "^0.23.9",
+        "style-dictionary": "^4.4.0",
         "typescript": "^5.1.6",
         "typescript-eslint": "^8.24.0"
     },
-    "gitHead": "9ae74a1661aa362bf700530e566f338c797b6b0f"
+    "gitHead": "af467915b4b5c3c48c090c932c5f9b51ab765411"
 }

package/src/components/code/code_block/code_block_with_tabs.tsx

@@ -66,6 +66,7 @@ export type CodeBlockTabProps = {
     key: CodeBlockTabKey;
     bashCommandsStart?: number[];
     content: string;
+    languageOverride?: string;
     onClick?: (e: React.MouseEvent) => void;
 } & Partial<SharedLinkProps>;
 
@@ -246,7 +247,7 @@ export const CodeBlockWithTabs = ({ className, codeBlockProps, currentTabKey, ta
             <CodeBlock
                 bashCommandsStart={currentTab?.bashCommandsStart}
                 content={currentTab?.content ?? ''}
-                language={CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language}
+                language={currentTab.languageOverride ?? CODE_BLOCK_TAB_CATALOG[currentTab?.key]?.language}
                 className={CODE_BLOCK_WITH_TABS_CLASSNAMES.CONTENT}
                 hideBashHeader
                 {...codeBlockProps}

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'),
+]);