@apify/ui-library 0.76.2 → 0.76.4-featcolortokens-178953.36

package/src/design_system/colors/generated/css_variables_palette.light.ts

@@ -0,0 +1,74 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const tokens = `
+  --palette-neutral-0: #ffffff;
+  --palette-neutral-25: #f8f9fc;
+  --palette-neutral-50: #f3f4fa;
+  --palette-neutral-75: #eef0f8;
+  --palette-neutral-100: #e0e3f2;
+  --palette-neutral-150: #d0d5e9;
+  --palette-neutral-200: #c0c6de;
+  --palette-neutral-250: #b0b8d1;
+  --palette-neutral-300: #a3abc5;
+  --palette-neutral-350: #969eb8;
+  --palette-neutral-400: #8a93ae;
+  --palette-neutral-450: #7b84a0;
+  --palette-neutral-500: #6c7590;
+  --palette-neutral-550: #626a85;
+  --palette-neutral-600: #555d76;
+  --palette-neutral-650: #4b526b;
+  --palette-neutral-700: #3f475d;
+  --palette-neutral-750: #31384d;
+  --palette-neutral-775: #2b3143;
+  --palette-neutral-800: #272d3e;
+  --palette-neutral-850: #242836;
+  --palette-neutral-875: #1d202a;
+  --palette-neutral-900: #191b22;
+  --palette-neutral-950: #0a0b0f;
+  --palette-yellow-25: #f9f6ea;
+  --palette-yellow-50: #f9f0db;
+  --palette-yellow-75: #f7e8c4;
+  --palette-yellow-100: #f7dfb1;
+  --palette-yellow-200: #f5b315;
+  --palette-yellow-300: #e39c04;
+  --palette-yellow-350: #d58e00;
+  --palette-yellow-400: #ca8200;
+  --palette-yellow-500: #a96600;
+  --palette-yellow-600: #8c4e02;
+  --palette-yellow-700: #864906;
+  --palette-red-25: #fcf2ef;
+  --palette-red-50: #fff0ec;
+  --palette-red-75: #ffe3dc;
+  --palette-red-100: #fedad1;
+  --palette-red-200: #ffb39f;
+  --palette-red-300: #ff886e;
+  --palette-red-350: #fc7156;
+  --palette-red-400: #fa4d37;
+  --palette-red-500: #e3231d;
+  --palette-red-600: #bb0401;
+  --palette-red-700: #af0600;
+  --palette-green-25: #e8f9ef;
+  --palette-green-50: #e4f5e5;
+  --palette-green-75: #daefdc;
+  --palette-green-100: #cfe9d1;
+  --palette-green-200: #80da8d;
+  --palette-green-300: #46c263;
+  --palette-green-350: #22b551;
+  --palette-green-400: #00ab46;
+  --palette-green-500: #008a27;
+  --palette-green-600: #086e08;
+  --palette-green-700: #176b08;
+  --palette-blue-25: #f0f8ff;
+  --palette-blue-50: #ecf1ff;
+  --palette-blue-75: #e1eaff;
+  --palette-blue-100: #d8e2ff;
+  --palette-blue-200: #b2c6ff;
+  --palette-blue-300: #88abfe;
+  --palette-blue-350: #709efd;
+  --palette-blue-400: #5290f9;
+  --palette-blue-500: #1672eb;
+  --palette-blue-600: #1a57da;
+  --palette-blue-700: #224ed5;
+`;

package/src/design_system/{properties_theme.ts → colors/generated/properties_theme.ts}

@@ -1,453 +1,179 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
 export const colorProperties = {
     neutral: {
-        /* #242836 */
         text: 'var(--color-neutral-text)',
-
-        /* #3f475d */
         textMuted: 'var(--color-neutral-text-muted)',
-
-        /* #6c7590 */
         textSubtle: 'var(--color-neutral-text-subtle)',
-
-        /* #c0c6de */
         textDisabled: 'var(--color-neutral-text-disabled)',
-
-        /* #ffffff */
         textOnPrimary: 'var(--color-neutral-text-on-primary)',
-
-        /* #ffffff */
         iconOnPrimary: 'var(--color-neutral-icon-on-primary)',
-
-        /* #ffffff */
         background: 'var(--color-neutral-background)',
-
-        /* #f8f9fc */
         backgroundMuted: 'var(--color-neutral-background-muted)',
-
-        /* #f3f4fa */
         backgroundSubtle: 'var(--color-neutral-background-subtle)',
-
-        /* #ffffff */
         backgroundWhite: 'var(--color-neutral-background-white)',
-
-        /* #ffffff */
         cardBackground: 'var(--color-neutral-card-background)',
-
-        /* #ffffff */
         cardBackgroundHover: 'var(--color-neutral-card-background-hover)',
-
-        /* #d0d5e9 */
         border: 'var(--color-neutral-border)',
-
-        /* #e0e3f2 */
         separatorSubtle: 'var(--color-neutral-separator-subtle)',
-
-        /* #eef0f8 */
         hover: 'var(--color-neutral-hover)',
-
-        /* #f3f4fa */
         disabled: 'var(--color-neutral-disabled)',
-
-        /* #e0e3f2 */
         overflow: 'var(--color-neutral-overflow)',
-
-        /* #555d76 */
         icon: 'var(--color-neutral-icon)',
-
-        /* #8a93ae */
         iconSubtle: 'var(--color-neutral-icon-subtle)',
-
-        /* #b0b8d1 */
         iconDisabled: 'var(--color-neutral-icon-disabled)',
-
-        /* #c0c6de */
         fieldBorder: 'var(--color-neutral-field-border)',
-
-        /* #d0d5e9 */
         actionSecondary: 'var(--color-neutral-action-secondary)',
-
-        /* #e0e3f2 */
         actionSecondaryHover: 'var(--color-neutral-action-secondary-hover)',
-
-        /* #c0c6de */
         actionSecondaryActive: 'var(--color-neutral-action-secondary-active)',
-
-        /* #e0e3f2 */
         chipBackground: 'var(--color-neutral-chip-background)',
-
-        /* #d0d5e9 */
         chipBackgroundHover: 'var(--color-neutral-chip-background-hover)',
-
-        /* #c0c6de */
         chipBackgroundActive: 'var(--color-neutral-chip-background-active)',
-
-        /* #d0d5e9 */
         chipBackgroundDisabled: 'var(--color-neutral-chip-background-disabled)',
-
-        /* #ffffff */
         largeTooltipBackground: 'var(--color-neutral-large-tooltip-background)',
-
-        /* #e0e3f2 */
         largeTooltipBorder: 'var(--color-neutral-large-tooltip-border)',
-
-        /* #ffffff */
         smallTooltipText: 'var(--color-neutral-small-tooltip-text)',
-
-        /* #191b22 */
         smallTooltipBackground: 'var(--color-neutral-small-tooltip-background)',
-
-        /* #242836 */
         smallTooltipBorder: 'var(--color-neutral-small-tooltip-border)',
-
-        /* #191b22cc */
         overlay: 'var(--color-neutral-overlay)',
-
-        /* #f8f9fc */
         fieldBackground: 'var(--color-neutral-field-background)',
-
-        /* #969eb8 */
         textPlaceholder: 'var(--color-neutral-text-placeholder)',
     },
-
     primary: {
-        /* #1672eb */
         text: 'var(--color-primary-text)',
-
-        /* #1672eb */
         textInteractive: 'var(--color-primary-text-interactive)',
-
-        /* #1672eb */
         icon: 'var(--color-primary-icon)',
-
-        /* #1672eb */
         action: 'var(--color-primary-action)',
-
-        /* #5290f9 */
         actionHover: 'var(--color-primary-action-hover)',
-
-        /* #1a57da */
         actionActive: 'var(--color-primary-action-active)',
-
-        /* #1672eb */
         fieldBorderActive: 'var(--color-primary-field-border-active)',
-
-        /* #ecf1ff */
+        borderSubtle: 'var(--color-primary-border-subtle)',
         background: 'var(--color-primary-background)',
-
-        /* #d8e2ff */
-        backgroundHover: 'var(--color-primary-background-hover)',
-
-        /* #f0f8ff */
         backgroundSubtle: 'var(--color-primary-background-subtle)',
-
-        /* #ecf1ff */
+        backgroundHover: 'var(--color-primary-background-hover)',
         chipBackground: 'var(--color-primary-chip-background)',
-
-        /* #f0f8ff */
         chipBackgroundSubtle: 'var(--color-primary-chip-background-subtle)',
-
-        /* #d8e2ff */
         chipBackgroundHover: 'var(--color-primary-chip-background-hover)',
-
-        /* #1a57da */
         chipText: 'var(--color-primary-chip-text)',
-
-        /* #b2c6ff */
         shadowActive: 'var(--color-primary-shadow-active)',
-
-        /* #b2c6ff */
-        borderSubtle: 'var(--color-primary-border-subtle)',
     },
-
     primaryBlack: {
-        /* #272d3e */
         action: 'var(--color-primary-black-action)',
-
-        /* #2b3143 */
         actionHover: 'var(--color-primary-black-action-hover)',
-
-        /* #0a0b0f */
         actionActive: 'var(--color-primary-black-action-active)',
-
-        /* #1d202a */
         background: 'var(--color-primary-black-background)',
-
-        /* #3f475d */
         backgroundHover: 'var(--color-primary-black-background-hover)',
-
-        /* #ffffff */
         chipText: 'var(--color-primary-black-chip-text)',
     },
-
     success: {
-        /* #008a27 */
         text: 'var(--color-success-text)',
-
-        /* #008a27 */
         icon: 'var(--color-success-icon)',
-
-        /* #e4f5e5 */
         background: 'var(--color-success-background)',
-
-        /* #cfe9d1 */
         backgroundHover: 'var(--color-success-background-hover)',
-
-        /* #e8f9ef */
         backgroundSubtle: 'var(--color-success-background-subtle)',
-
-        /* #cfe9d1 */
         backgroundSubtleHover: 'var(--color-success-background-subtle-hover)',
-
-        /* #80da8d */
         backgroundSubtleActive: 'var(--color-success-background-subtle-active)',
-
-        /* #00ab46 */
-        border: 'var(--color-success-border)',
-
-        /* #008a27 */
-        action: 'var(--color-success-action)',
-
-        /* #00ab46 */
-        actionHover: 'var(--color-success-action-hover)',
-
-        /* #086e08 */
-        actionActive: 'var(--color-success-action-active)',
-
-        /* #daefdc */
         chipBackground: 'var(--color-success-chip-background)',
-
-        /* #cfe9d1 */
         chipBackgroundHover: 'var(--color-success-chip-background-hover)',
-
-        /* #086e08 */
         chipText: 'var(--color-success-chip-text)',
-
-        /* #80da8d */
+        border: 'var(--color-success-border)',
         borderSubtle: 'var(--color-success-border-subtle)',
+        action: 'var(--color-success-action)',
+        actionHover: 'var(--color-success-action-hover)',
+        actionActive: 'var(--color-success-action-active)',
     },
-
     warning: {
-        /* #a96600 */
         text: 'var(--color-warning-text)',
-
-        /* #f5b315 */
         icon: 'var(--color-warning-icon)',
-
-        /* #f9f0db */
         background: 'var(--color-warning-background)',
-
-        /* #f7dfb1 */
         backgroundHover: 'var(--color-warning-background-hover)',
-
-        /* #f9f6ea */
         backgroundSubtle: 'var(--color-warning-background-subtle)',
-
-        /* #f5b315 */
-        fieldborder: 'var(--color-warning-field-border)',
-
-        /* #f7e8c4 */
         chipBackground: 'var(--color-warning-chip-background)',
-
-        /* #f7dfb1 */
         chipBackgroundHover: 'var(--color-warning-chip-background-hover)',
-
-        /* #8c4e02 */
         chipText: 'var(--color-warning-chip-text)',
-
-        /* #f5b315 */
+        border: 'var(--color-warning-border)',
         borderSubtle: 'var(--color-warning-border-subtle)',
+        fieldBorder: 'var(--color-warning-field-border)',
     },
-
     danger: {
-        /* #e3231d */
         text: 'var(--color-danger-text)',
-
-        /* #e3231d */
         icon: 'var(--color-danger-icon)',
-
-        /* #fff0ec */
         background: 'var(--color-danger-background)',
-
-        /* #fedad1 */
         backgroundHover: 'var(--color-danger-background-hover)',
-
-        /* #fcf2ef */
         backgroundSubtle: 'var(--color-danger-background-subtle)',
-
-        /* #fedad1 */
         backgroundSubtleHover: 'var(--color-danger-background-subtle-hover)',
-
-        /* #ffb39f */
         backgroundSubtleActive: 'var(--color-danger-background-subtle-active)',
-
-        /* #fa4d37 */
+        chipBackground: 'var(--color-danger-chip-background)',
+        chipBackgroundHover: 'var(--color-danger-chip-background-hover)',
+        chipText: 'var(--color-danger-chip-text)',
         border: 'var(--color-danger-border)',
-
-        /* #fa4d37 */
+        borderSubtle: 'var(--color-danger-border-subtle)',
         fieldBorder: 'var(--color-danger-field-border)',
-
-        /* #e3231d */
         action: 'var(--color-danger-action)',
-
-        /* #fa4d37 */
         actionHover: 'var(--color-danger-action-hover)',
-
-        /* #bb0401 */
         actionActive: 'var(--color-danger-action-active)',
-
-        /* #ffe3dc */
-        chipBackground: 'var(--color-danger-chip-background)',
-
-        /* #fedad1 */
-        chipBackgroundHover: 'var(--color-danger-chip-background-hover)',
-
-        /* #bb0401 */
-        chipText: 'var(--color-danger-chip-text)',
-
-        /* #ffb39f */
-        borderSubtle: 'var(--color-danger-border-subtle)',
     },
-
     special: {
-        /* #ffdd96 */
+        freePlanBackground: 'var(--color-special-free-plan-background)',
         starterPlanBackground: 'var(--color-special-starter-plan-background)',
-
-        /* #bf97ed */
-        enterprisePlanBackground: 'var(--color-special-enterprise-plan-background)',
-
-        /* #a7f2ed */
-        businessPlanBackground: 'var(--color-special-business-plan-background)',
-
-        /* #a1b7ff */
         scalePlanBackground: 'var(--color-special-scale-plan-background)',
-
-        /* #ffc89f */
-        freePlanBackground: 'var(--color-special-free-plan-background)',
+        businessPlanBackground: 'var(--color-special-business-plan-background)',
+        enterprisePlanBackground: 'var(--color-special-enterprise-plan-background)',
     },
-
     rose: {
-        /* #f483b5 */
         light: 'var(--color-rose-light)',
-
-        /* #c6387d */
         base: 'var(--color-rose-base)',
-
-        /* #781552 */
         dark: 'var(--color-rose-dark)',
-
-        /* #b6006b */
         text: 'var(--color-rose-text)',
     },
-
     buttercup: {
-        /* #ffdd96 */
         light: 'var(--color-buttercup-light)',
-
-        /* #f0b21b */
         base: 'var(--color-buttercup-base)',
-
-        /* #c37319 */
         dark: 'var(--color-buttercup-dark)',
-
-        /* #a65d00 */
         text: 'var(--color-buttercup-text)',
     },
-
     paprika: {
-        /* #e44467 */
         light: 'var(--color-paprika-light)',
-
-        /* #9b0238 */
         base: 'var(--color-paprika-base)',
-
-        /* #4a0018 */
         dark: 'var(--color-paprika-dark)',
-
-        /* #ba0044 */
         text: 'var(--color-paprika-text)',
     },
-
     teal: {
-        /* #a7f2ed */
         light: 'var(--color-teal-light)',
-
-        /* #30c0bb */
         base: 'var(--color-teal-base)',
-
-        /* #297774 */
         dark: 'var(--color-teal-dark)',
-
-        /* #018181 */
         text: 'var(--color-teal-text)',
     },
-
     indigo: {
-        /* #a1b7ff */
         light: 'var(--color-indigo-light)',
-
-        /* #5d85e1 */
         base: 'var(--color-indigo-base)',
-
-        /* #365494 */
         dark: 'var(--color-indigo-dark)',
-
-        /* #2563c1 */
         text: 'var(--color-indigo-text)',
     },
-
     slate: {
-        /* #c1c5e1 */
         light: 'var(--color-slate-light)',
-
-        /* #8490c4 */
         base: 'var(--color-slate-base)',
-
-        /* #525c85 */
         dark: 'var(--color-slate-dark)',
-
-        /* #566087 */
         text: 'var(--color-slate-text)',
     },
-
     coral: {
-        /* #ffc89f */
         light: 'var(--color-coral-light)',
-
-        /* #fa8136 */
         base: 'var(--color-coral-base)',
-
-        /* #bb4511 */
         dark: 'var(--color-coral-dark)',
-
-        /* #c74000 */
         text: 'var(--color-coral-text)',
     },
-
     lavender: {
-        /* #bf97ed */
         light: 'var(--color-lavender-light)',
-
-        /* #6a14de */
         base: 'var(--color-lavender-base)',
-
-        /* #330276 */
         dark: 'var(--color-lavender-dark)',
-
-        /* #6e00f4 */
         text: 'var(--color-lavender-text)',
     },
-
     bamboo: {
-        /* #64cda5 */
         light: 'var(--color-bamboo-light)',
-
-        /* #12966f */
         base: 'var(--color-bamboo-base)',
-
-        /* #195d46 */
         dark: 'var(--color-bamboo-dark)',
-
-        /* #007455 */
         text: 'var(--color-bamboo-text)',
     },
 } as const;

package/src/design_system/colors/index.ts

@@ -0,0 +1,7 @@
+export { tokens as cssColorsVariablesLight } from './generated/css_variables.light.js';
+export { tokens as cssColorsVariablesDark } from './generated/css_variables.dark.js';
+export { tokens as cssColorsVariablesPaletteLight } from './generated/css_variables_palette.light.js';
+export { tokens as cssColorsVariablesPaletteDark } from './generated/css_variables_palette.dark.js';
+export { darkTheme } from './generated/colors_theme.dark.js';
+export { lightTheme } from './generated/colors_theme.light.js';
+export { colorProperties } from './generated/properties_theme.js';

package/src/design_system/theme.ts

@@ -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,

package/src/index.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';