@apify/ui-library 0.71.1-featcolortokens-178953.70 → 0.72.0

package/eslint.config.mjs

@@ -0,0 +1,44 @@
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import sonarjs from 'eslint-plugin-sonarjs';
+
+import apifyJestConfig from '@apify/eslint-config/jest.js';
+import apifyTypescriptConfig from '@apify/eslint-config/ts.js';
+
+// eslint-disable-next-line import/no-default-export
+export default [
+    { ignores: ['**/dist'] }, // Ignores need to happen first
+    ...apifyTypescriptConfig,
+    ...apifyJestConfig,
+
+    {
+        files: ['**/*.ts', '**/*.tsx'],
+        settings: {
+            react: {
+                version: 'detect',
+            },
+        },
+        ...react.configs.flat.recommended,
+    },
+    {
+        plugins: {
+            sonarjs,
+            'react-hooks': reactHooks,
+        },
+        languageOptions: {
+            sourceType: 'module',
+
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+        rules: {
+            'react/react-in-jsx-scope': 'off',
+            'no-void': 'off',
+            'react/display-name': 'off',
+            'react-hooks/exhaustive-deps': 'error',
+            ...reactHooks.configs.recommended.rules,
+        },
+    },
+];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@apify/ui-library",
-    "version": "0.71.1-featcolortokens-178953.70+6c2ae39f4a2",
+    "version": "0.72.0",
     "description": "React UI library used by apify.com",
     "license": "Apache-2.0",
     "type": "module",
@@ -17,8 +17,8 @@
         "build": "npm run clean && npm run compile",
         "clean": "rimraf ./dist",
         "compile": "tsc -p tsconfig.build.json",
-        "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",
+        "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",
         "postpublish": "npm run clean"
     },
     "//": [
@@ -63,14 +63,8 @@
         "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"
     },
-    "files": [
-        "dist",
-        "src",
-        "style"
-    ],
-    "gitHead": "6c2ae39f4a2f422e75ad9b1648cc07fc8e1bd701"
+    "gitHead": "f8569562bb250e8d86523ad05e5c54e662b6636b"
 }

package/src/codemods/generate_color_property_tokens.mjs

@@ -0,0 +1,98 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { print, types } from 'recast';
+
+const { builders } = types;
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const lightColorTokens = JSON.parse(code).light;
+
+const getObjectValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+};
+
+const getColorPropertyName = (semanticCategory, property) => {
+    const semanticColorName = `${property.split(/[_ ]/).map((semanticPartName) => semanticPartName.toLowerCase()).join('-')}`;
+
+    // lower case and replace spaces with dashes
+    const semanticCategoryName = semanticCategory.toLowerCase().split(' ').join('-');
+
+    return `--color-${semanticCategoryName}-${semanticColorName}`;
+};
+
+const generateColorPropertyTokens = (supernovaColorsDefinitions) => {
+    const mergedPalettes = { ...supernovaColorsDefinitions.Semantic, ...supernovaColorsDefinitions.Decorative };
+
+    const colorTheme = {};
+    for (const [category, palette] of Object.entries(mergedPalettes)) {
+        // convert to camelCase if there are multiple words in the category name
+        const categoryName = category
+            .split(' ')
+            .map((word, i) => (i === 0
+                ? word.toLocaleLowerCase()
+                : `${word.charAt(0).toUpperCase()}${word.slice(1)}`),
+            )
+            .join('');
+        colorTheme[categoryName] = {};
+
+        for (const [key, { value }] of Object.entries(palette)) {
+            const [firstPart, ...rest] = key.split(' ');
+            const propertyName = `${firstPart.toLowerCase()}${rest.join('')}`;
+
+            const hexLocator = value.slice(1, -1);
+            const hex = value.startsWith('#') ? value : getObjectValueByPath(supernovaColorsDefinitions, hexLocator)?.value;
+
+            colorTheme[categoryName][propertyName] = {
+                variable: `var(${getColorPropertyName(category, key)})`,
+                hex,
+            };
+        }
+    }
+
+    return colorTheme;
+};
+
+const createPropertyDeclaration = (tokens) => {
+    const paletteArray = [];
+
+    for (const [paletteName, paletteProps] of [...Object.entries(tokens)]) {
+        const paletteItemsArray = [];
+
+        for (const [paletteItemName, { variable, hex }] of Object.entries(paletteProps)) {
+            const objectPropertyItem = builders.property(
+                'init',
+                builders.identifier(paletteItemName),
+                builders.literal(variable),
+            );
+
+            objectPropertyItem.comments = [builders.commentBlock(` ${hex} `)];
+
+            paletteItemsArray.push(objectPropertyItem);
+        }
+
+        paletteArray.push(builders.property(
+            'init',
+            builders.identifier(paletteName),
+            builders.objectExpression(paletteItemsArray),
+        ));
+    }
+
+    return builders.exportNamedDeclaration(
+        builders.variableDeclaration('const', [
+            builders.variableDeclarator(
+                builders.identifier('colorProperties'),
+                builders.tsAsExpression(builders.objectExpression(paletteArray), builders.tsTypeReference(builders.identifier('const'))),
+            )]),
+        [],
+    );
+};
+
+const generatedTokens = generateColorPropertyTokens(lightColorTokens);
+
+const lightThemeDeclaration = createPropertyDeclaration(generatedTokens);
+
+const printedCode = print(builders.program([lightThemeDeclaration])).code;
+
+writeFileSync('./src/design_system/properties_theme.ts', printedCode);

package/src/codemods/generate_color_theme_files.mjs

@@ -0,0 +1,47 @@
+import { readFileSync, writeFileSync } from 'node:fs';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { print, types } from 'recast';
+
+const { builders } = types;
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const colorTokens = JSON.parse(code);
+
+const lightThemeProperty = colorTokens.light;
+const darkThemeProperty = colorTokens.dark;
+
+function createThemeDeclaration(themeProperty, variableName) {
+    const paletteArray = [];
+
+    const { Decorative, Palette } = themeProperty;
+
+    for (const [paletteName, paletteProps] of [...Object.entries(Palette), ...Object.entries(Decorative)]) {
+        for (const [paletteItemName, paletteItem] of Object.entries(paletteProps)) {
+            paletteArray.push(
+                builders.property(
+                    'init',
+                    builders.identifier(`${paletteName.toLowerCase()}${paletteItemName}`),
+                    builders.literal(paletteItem.value),
+                ),
+            );
+        }
+    }
+
+    return builders.exportNamedDeclaration(
+        builders.variableDeclaration('const', [
+            builders.variableDeclarator(
+                builders.identifier(variableName),
+                builders.tsAsExpression(builders.objectExpression(paletteArray), builders.tsTypeReference(builders.identifier('const'))),
+            )]),
+        [],
+    );
+}
+
+const lightThemeDeclaration = createThemeDeclaration(lightThemeProperty, 'lightTheme');
+const darkThemeDeclaration = createThemeDeclaration(darkThemeProperty, 'darkTheme');
+
+const printedCode = print(builders.program([lightThemeDeclaration, darkThemeDeclaration])).code;
+
+writeFileSync('./src/design_system/colors_theme.ts', printedCode);

package/src/components/button.tsx

@@ -11,7 +11,7 @@ import { isUrlExternal, Link, type LinkProps } from './link.js';
 
 type ButtonSize = 'medium' | 'small';
 type ButtonColor = 'default' | 'success' | 'danger';
-type ButtonVariant = 'primary' | 'secondary' | 'text';
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 
 export interface TransientButtonProps {
     size?: ButtonSize;
@@ -46,13 +46,17 @@ type ButtonColorCombinations = {
             borderColor: string
             backgroundColor: string,
 
-            // hover & active state affects both border & background.
-            hoverColor?: string,
-            activeColor?: string,
+            // hover & active state effects
             actionTextColor?: string,
-
             // only exception is primary outlined button
             actionBorderColor?: string
+
+            // hover state effects override
+            hoverColor?: string,
+
+            // active state effects override
+            activeColor?: string,
+            activeTextColor?: string,
         }
     };
 };
@@ -110,12 +114,13 @@ const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
             textColor: theme.color.danger.text,
             backgroundColor: theme.color.neutral.backgroundMuted,
             borderColor: theme.color.neutral.border,
-            hoverColor: theme.color.danger.actionHover,
+            hoverColor: theme.color.danger.backgroundHover,
+            actionBorderColor: theme.color.danger.borderSubtle,
             activeColor: theme.color.danger.actionActive,
-            actionTextColor: theme.color.neutral.background,
+            activeTextColor: theme.color.neutral.textOnPrimary,
         },
     },
-    text: {
+    tertiary: {
         default: {
             textColor: theme.color.neutral.text,
             backgroundColor: 'transparent',
@@ -144,7 +149,7 @@ const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations = {
 export const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations = {
     medium: {
         fontSize: 14,
-        height: 36,
+        height: 32,
         horizontalPadding: 12,
     },
     small: {
@@ -159,10 +164,11 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         backgroundColor,
         borderColor,
         textColor,
+        actionBorderColor,
         actionTextColor,
-        activeColor,
         hoverColor,
-        actionBorderColor,
+        activeColor,
+        activeTextColor,
     } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
 
     return css`
@@ -177,7 +183,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         }
 
         &:active {
-            color: ${actionTextColor || textColor};
+            color: ${activeTextColor || actionTextColor || textColor};
             background-color: ${activeColor};
             border-color: ${actionBorderColor || activeColor};
         }
@@ -185,7 +191,7 @@ export const getButtonColorStyles = (variant: ButtonVariant = 'primary', color:
         &:disabled {
             color: ${theme.color.neutral.textDisabled};
             background-color: ${theme.color.neutral.disabled};
-            border-color: ${variant === 'text' ? 'transparent' : theme.color.neutral.disabled};
+            border-color: ${variant === 'tertiary' ? 'transparent' : theme.color.neutral.disabled};
 
             cursor: default;
         }
@@ -260,6 +266,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps | AnchorButtonProps>((
     };
 
     const iconSize = size === 'medium' ? '16' : '12';
+    console.log('variant', variant);
 
     if (isAnchorButton(props)) {
         const isExternal = isUrlExternal(props.to, windowLocationHost);

package/src/components/message.tsx

@@ -133,7 +133,7 @@ export const Message: React.FC<MessageProps> = ({
             {onDismissClick && (
                 <Button
                     size='small'
-                    variant='text'
+                    variant='tertiary'
                     trackingId={dismissTrackingId}
                     onClick={onDismissClick}
                     className={messageClassNames.dismiss}

package/src/components/tabs/tab.tsx

@@ -118,11 +118,10 @@ const tabVariantStyle = {
     `,
     buttoned: css`
         height: 3.2rem;
-        margin: 0 ${theme.space.space4};
         padding: 0 ${theme.space.space8};
         background-color: transparent;
         border: 1px solid transparent;
-        border-radius: ${theme.radius.radius8};
+        border-radius: ${theme.radius.radius6};
         color: ${theme.color.neutral.textMuted};
 
         &:hover {

package/src/components/tabs/tabs.tsx

@@ -53,6 +53,7 @@ const tabsVariantStyle = {
     `,
     buttoned: css`
         align-items: center;
+        gap: ${theme.space.space4};
     `,
 } satisfies Record<TabVariant, FlattenSimpleInterpolation>;
 

package/src/components/to_consolidate/pagination.tsx

@@ -11,7 +11,7 @@ import { Button } from '../button.js';
 const LEADING_THREE_DOTS_PAGE_KEY = -1;
 const TRAILING_THREE_DOTS_PAGE_KEY = -2;
 
-const PaginationButtonBase = styled(Button).attrs({ variant: 'text' })`
+const PaginationButtonBase = styled(Button).attrs({ variant: 'tertiary' })`
     padding: 0;
     height: 28px;
     min-width: 28px;

package/src/design_system/{colors/generated/colors_theme.light.ts → colors_theme.ts}

@@ -1,44 +1,4 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
 export const lightTheme = {
-    roseLight: '#f483b5',
-    roseBase: '#c6387d',
-    roseDark: '#781552',
-    roseText: '#b6006b',
-    buttercupLight: '#ffdd96',
-    buttercupBase: '#f0b21b',
-    buttercupDark: '#c37319',
-    buttercupText: '#a65d00',
-    paprikaLight: '#e44467',
-    paprikaBase: '#9b0238',
-    paprikaDark: '#4a0018',
-    paprikaText: '#ba0044',
-    tealLight: '#a7f2ed',
-    tealBase: '#30c0bb',
-    tealDark: '#297774',
-    tealText: '#018181',
-    indigoLight: '#a1b7ff',
-    indigoBase: '#5d85e1',
-    indigoDark: '#365494',
-    indigoText: '#2563c1',
-    slateLight: '#c1c5e1',
-    slateBase: '#8490c4',
-    slateDark: '#525c85',
-    slateText: '#566087',
-    coralLight: '#ffc89f',
-    coralBase: '#fa8136',
-    coralDark: '#bb4511',
-    coralText: '#c74000',
-    lavenderLight: '#bf97ed',
-    lavenderBase: '#6a14de',
-    lavenderDark: '#330276',
-    lavenderText: '#6e00f4',
-    bambooLight: '#64cda5',
-    bambooBase: '#12966f',
-    bambooDark: '#195d46',
-    bambooText: '#007455',
     neutral0: '#ffffff',
     neutral25: '#f8f9fc',
     neutral50: '#f3f4fa',
@@ -107,4 +67,147 @@ export const lightTheme = {
     blue500: '#1672eb',
     blue600: '#1a57da',
     blue700: '#224ed5',
+    roseLight: '#f483b5',
+    roseBase: '#c6387d',
+    roseDark: '#781552',
+    roseText: '#b6006b',
+    buttercupLight: '#ffdd96',
+    buttercupBase: '#f0b21b',
+    buttercupDark: '#c37319',
+    buttercupText: '#a65d00',
+    paprikaLight: '#e44467',
+    paprikaBase: '#9b0238',
+    paprikaDark: '#4a0018',
+    paprikaText: '#ba0044',
+    tealLight: '#a7f2ed',
+    tealBase: '#30c0bb',
+    tealDark: '#297774',
+    tealText: '#018181',
+    indigoLight: '#a1b7ff',
+    indigoBase: '#5d85e1',
+    indigoDark: '#365494',
+    indigoText: '#2563c1',
+    slateLight: '#c1c5e1',
+    slateBase: '#8490c4',
+    slateDark: '#525c85',
+    slateText: '#566087',
+    coralLight: '#ffc89f',
+    coralBase: '#fa8136',
+    coralDark: '#bb4511',
+    coralText: '#c74000',
+    lavenderLight: '#bf97ed',
+    lavenderBase: '#6a14de',
+    lavenderDark: '#330276',
+    lavenderText: '#6e00f4',
+    bambooLight: '#64cda5',
+    bambooBase: '#12966f',
+    bambooDark: '#195d46',
+    bambooText: '#007455',
+} as const;
+
+export const darkTheme = {
+    neutral0: '#ffffff',
+    neutral25: '#f8f9fc',
+    neutral50: '#f3f4fa',
+    neutral75: '#eef0f8',
+    neutral100: '#e1e3ed',
+    neutral150: '#d1d5e4',
+    neutral200: '#c1c6d9',
+    neutral250: '#b2b8cc',
+    neutral300: '#a5abc0',
+    neutral350: '#989eb3',
+    neutral400: '#8c93a8',
+    neutral450: '#7d8499',
+    neutral500: '#6e758a',
+    neutral550: '#646a7f',
+    neutral600: '#575d71',
+    neutral650: '#4d5265',
+    neutral700: '#414758',
+    neutral750: '#343847',
+    neutral775: '#2d313e',
+    neutral800: '#2a2d39',
+    neutral850: '#252832',
+    neutral875: '#1e2027',
+    neutral900: '#1a1b21',
+    neutral950: '#101114',
+    yellow25: '#fcdc73',
+    yellow50: '#ffd761',
+    yellow75: '#f9ce4b',
+    yellow100: '#f5bc38',
+    yellow200: '#cf9117',
+    yellow300: '#a56909',
+    yellow350: '#8a4f05',
+    yellow400: '#6d3806',
+    yellow500: '#5d2e0e',
+    yellow600: '#3f1b07',
+    yellow700: '#301806',
+    red25: '#f5a790',
+    red50: '#fe9e8a',
+    red75: '#ff8770',
+    red100: '#ff7157',
+    red200: '#ef6045',
+    red300: '#cf4436',
+    red350: '#aa3229',
+    red400: '#812420',
+    red500: '#672523',
+    red600: '#40191b',
+    red700: '#381719',
+    green25: '#74d584',
+    green50: '#6ccd7c',
+    green75: '#55c06a',
+    green100: '#3bb358',
+    green200: '#23a64a',
+    green300: '#068a35',
+    green350: '#006e29',
+    green400: '#00531e',
+    green500: '#14441f',
+    green600: '#0f2b14',
+    green700: '#09260f',
+    blue25: '#92C0ff',
+    blue50: '#8ebcff',
+    blue75: '#80a9ff',
+    blue100: '#6f9dff',
+    blue200: '#5990ff',
+    blue300: '#3970d7',
+    blue350: '#295cbb',
+    blue400: '#194594',
+    blue500: '#1a3a78',
+    blue600: '#0d2550',
+    blue700: '#151d34',
+    roseLight: '#e88bb3',
+    roseBase: '#b8487b',
+    roseDark: '#6f234f',
+    roseText: '#ed8bb5',
+    buttercupLight: '#f9deaa',
+    buttercupBase: '#e5b557',
+    buttercupDark: '#b87939',
+    buttercupText: '#ebbf6c',
+    paprikaLight: '#e26c7d',
+    paprikaBase: '#9e384b',
+    paprikaDark: '#511d27',
+    paprikaText: '#f67c8d',
+    tealLight: '#aef0f5',
+    tealBase: '#58bcc4',
+    tealDark: '#408288',
+    tealText: '#62c1c8',
+    indigoLight: '#a8b7ed',
+    indigoBase: '#6d85ca',
+    indigoDark: '#425484',
+    indigoText: '#a2b2eb',
+    slateLight: '#c2c5dc',
+    slateBase: '#8690bf',
+    slateDark: '#535c81',
+    slateText: '#afb2c9',
+    coralLight: '#f3ccb0',
+    coralBase: '#f08848',
+    coralDark: '#9a4e2d',
+    coralText: '#f9b27b',
+    lavenderLight: '#b482ed',
+    lavenderBase: '#8148c9',
+    lavenderDark: '#48296f',
+    lavenderText: '#be8af9',
+    bambooLight: '#7acaa9',
+    bambooBase: '#439274',
+    bambooDark: '#305b4a',
+    bambooText: '#65bc99',
 } as const;

package/src/design_system/generate_color_definitions.js

@@ -0,0 +1,44 @@
+import { readFileSync } from 'node:fs';
+
+const code = readFileSync('./src/design_system/supernova_color_tokens.json', 'utf-8');
+
+const colorsDefinitions = JSON.parse(code);
+
+const getObjectValueByPath = (obj, path) => {
+    return path.split('.').reduce((acc, part) => {
+        return acc && acc[part];
+    }, obj);
+};
+
+const getColorPropertyName = (semanticCategory, property) => {
+    const semanticColorName = `${property.split(/[_ ]/).map((semanticPartName) => semanticPartName.toLowerCase()).join('-')}`;
+
+    // lower case and replace spaces with dashes
+    const semanticCategoryName = semanticCategory.toLowerCase().split(' ').join('-');
+
+    return `--color-${semanticCategoryName}-${semanticColorName}`;
+};
+
+const generateColorDefinitions = (themeVariant) => {
+    const mergedPalette = {
+        ...colorsDefinitions[themeVariant].Semantic,
+        ...colorsDefinitions[themeVariant].Decorative,
+    };
+
+    const colorDefinitions = [];
+    for (const [semanticCategory, palette] of Object.entries(mergedPalette)) {
+        for (const [key, { value }] of Object.entries(palette)) {
+            colorDefinitions.push(
+
+                `${getColorPropertyName(semanticCategory, key)}: ${value.startsWith('#') ? value : getObjectValueByPath(colorsDefinitions[themeVariant], value.slice(1, -1)).value};`,
+            );
+        }
+    }
+
+    return colorDefinitions.join('\n');
+};
+
+['light', 'dark'].forEach((themeVariant) => {
+    // eslint-disable-next-line no-console
+    console.log(`\n*** CSS variables from ${themeVariant} mode ***\n`, generateColorDefinitions(themeVariant));
+});