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

package/src/design_system/colors/generated/properties_theme.ts

@@ -1,179 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-export const colorProperties = {
-    neutral: {
-        text: 'var(--color-neutral-text)',
-        textMuted: 'var(--color-neutral-text-muted)',
-        textSubtle: 'var(--color-neutral-text-subtle)',
-        textDisabled: 'var(--color-neutral-text-disabled)',
-        textOnPrimary: 'var(--color-neutral-text-on-primary)',
-        iconOnPrimary: 'var(--color-neutral-icon-on-primary)',
-        background: 'var(--color-neutral-background)',
-        backgroundMuted: 'var(--color-neutral-background-muted)',
-        backgroundSubtle: 'var(--color-neutral-background-subtle)',
-        backgroundWhite: 'var(--color-neutral-background-white)',
-        cardBackground: 'var(--color-neutral-card-background)',
-        cardBackgroundHover: 'var(--color-neutral-card-background-hover)',
-        border: 'var(--color-neutral-border)',
-        separatorSubtle: 'var(--color-neutral-separator-subtle)',
-        hover: 'var(--color-neutral-hover)',
-        disabled: 'var(--color-neutral-disabled)',
-        overflow: 'var(--color-neutral-overflow)',
-        icon: 'var(--color-neutral-icon)',
-        iconSubtle: 'var(--color-neutral-icon-subtle)',
-        iconDisabled: 'var(--color-neutral-icon-disabled)',
-        fieldBorder: 'var(--color-neutral-field-border)',
-        actionSecondary: 'var(--color-neutral-action-secondary)',
-        actionSecondaryHover: 'var(--color-neutral-action-secondary-hover)',
-        actionSecondaryActive: 'var(--color-neutral-action-secondary-active)',
-        chipBackground: 'var(--color-neutral-chip-background)',
-        chipBackgroundHover: 'var(--color-neutral-chip-background-hover)',
-        chipBackgroundActive: 'var(--color-neutral-chip-background-active)',
-        chipBackgroundDisabled: 'var(--color-neutral-chip-background-disabled)',
-        largeTooltipBackground: 'var(--color-neutral-large-tooltip-background)',
-        largeTooltipBorder: 'var(--color-neutral-large-tooltip-border)',
-        smallTooltipText: 'var(--color-neutral-small-tooltip-text)',
-        smallTooltipBackground: 'var(--color-neutral-small-tooltip-background)',
-        smallTooltipBorder: 'var(--color-neutral-small-tooltip-border)',
-        overlay: 'var(--color-neutral-overlay)',
-        fieldBackground: 'var(--color-neutral-field-background)',
-        textPlaceholder: 'var(--color-neutral-text-placeholder)',
-    },
-    primary: {
-        text: 'var(--color-primary-text)',
-        textInteractive: 'var(--color-primary-text-interactive)',
-        icon: 'var(--color-primary-icon)',
-        action: 'var(--color-primary-action)',
-        actionHover: 'var(--color-primary-action-hover)',
-        actionActive: 'var(--color-primary-action-active)',
-        fieldBorderActive: 'var(--color-primary-field-border-active)',
-        borderSubtle: 'var(--color-primary-border-subtle)',
-        background: 'var(--color-primary-background)',
-        backgroundSubtle: 'var(--color-primary-background-subtle)',
-        backgroundHover: 'var(--color-primary-background-hover)',
-        chipBackground: 'var(--color-primary-chip-background)',
-        chipBackgroundSubtle: 'var(--color-primary-chip-background-subtle)',
-        chipBackgroundHover: 'var(--color-primary-chip-background-hover)',
-        chipText: 'var(--color-primary-chip-text)',
-        shadowActive: 'var(--color-primary-shadow-active)',
-    },
-    primaryBlack: {
-        action: 'var(--color-primary-black-action)',
-        actionHover: 'var(--color-primary-black-action-hover)',
-        actionActive: 'var(--color-primary-black-action-active)',
-        background: 'var(--color-primary-black-background)',
-        backgroundHover: 'var(--color-primary-black-background-hover)',
-        chipText: 'var(--color-primary-black-chip-text)',
-    },
-    success: {
-        text: 'var(--color-success-text)',
-        icon: 'var(--color-success-icon)',
-        background: 'var(--color-success-background)',
-        backgroundHover: 'var(--color-success-background-hover)',
-        backgroundSubtle: 'var(--color-success-background-subtle)',
-        backgroundSubtleHover: 'var(--color-success-background-subtle-hover)',
-        backgroundSubtleActive: 'var(--color-success-background-subtle-active)',
-        chipBackground: 'var(--color-success-chip-background)',
-        chipBackgroundHover: 'var(--color-success-chip-background-hover)',
-        chipText: 'var(--color-success-chip-text)',
-        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: {
-        text: 'var(--color-warning-text)',
-        icon: 'var(--color-warning-icon)',
-        background: 'var(--color-warning-background)',
-        backgroundHover: 'var(--color-warning-background-hover)',
-        backgroundSubtle: 'var(--color-warning-background-subtle)',
-        chipBackground: 'var(--color-warning-chip-background)',
-        chipBackgroundHover: 'var(--color-warning-chip-background-hover)',
-        chipText: 'var(--color-warning-chip-text)',
-        border: 'var(--color-warning-border)',
-        borderSubtle: 'var(--color-warning-border-subtle)',
-        fieldBorder: 'var(--color-warning-field-border)',
-    },
-    danger: {
-        text: 'var(--color-danger-text)',
-        icon: 'var(--color-danger-icon)',
-        background: 'var(--color-danger-background)',
-        backgroundHover: 'var(--color-danger-background-hover)',
-        backgroundSubtle: 'var(--color-danger-background-subtle)',
-        backgroundSubtleHover: 'var(--color-danger-background-subtle-hover)',
-        backgroundSubtleActive: 'var(--color-danger-background-subtle-active)',
-        chipBackground: 'var(--color-danger-chip-background)',
-        chipBackgroundHover: 'var(--color-danger-chip-background-hover)',
-        chipText: 'var(--color-danger-chip-text)',
-        border: 'var(--color-danger-border)',
-        borderSubtle: 'var(--color-danger-border-subtle)',
-        fieldBorder: 'var(--color-danger-field-border)',
-        action: 'var(--color-danger-action)',
-        actionHover: 'var(--color-danger-action-hover)',
-        actionActive: 'var(--color-danger-action-active)',
-    },
-    special: {
-        freePlanBackground: 'var(--color-special-free-plan-background)',
-        starterPlanBackground: 'var(--color-special-starter-plan-background)',
-        scalePlanBackground: 'var(--color-special-scale-plan-background)',
-        businessPlanBackground: 'var(--color-special-business-plan-background)',
-        enterprisePlanBackground: 'var(--color-special-enterprise-plan-background)',
-    },
-    rose: {
-        light: 'var(--color-rose-light)',
-        base: 'var(--color-rose-base)',
-        dark: 'var(--color-rose-dark)',
-        text: 'var(--color-rose-text)',
-    },
-    buttercup: {
-        light: 'var(--color-buttercup-light)',
-        base: 'var(--color-buttercup-base)',
-        dark: 'var(--color-buttercup-dark)',
-        text: 'var(--color-buttercup-text)',
-    },
-    paprika: {
-        light: 'var(--color-paprika-light)',
-        base: 'var(--color-paprika-base)',
-        dark: 'var(--color-paprika-dark)',
-        text: 'var(--color-paprika-text)',
-    },
-    teal: {
-        light: 'var(--color-teal-light)',
-        base: 'var(--color-teal-base)',
-        dark: 'var(--color-teal-dark)',
-        text: 'var(--color-teal-text)',
-    },
-    indigo: {
-        light: 'var(--color-indigo-light)',
-        base: 'var(--color-indigo-base)',
-        dark: 'var(--color-indigo-dark)',
-        text: 'var(--color-indigo-text)',
-    },
-    slate: {
-        light: 'var(--color-slate-light)',
-        base: 'var(--color-slate-base)',
-        dark: 'var(--color-slate-dark)',
-        text: 'var(--color-slate-text)',
-    },
-    coral: {
-        light: 'var(--color-coral-light)',
-        base: 'var(--color-coral-base)',
-        dark: 'var(--color-coral-dark)',
-        text: 'var(--color-coral-text)',
-    },
-    lavender: {
-        light: 'var(--color-lavender-light)',
-        base: 'var(--color-lavender-base)',
-        dark: 'var(--color-lavender-dark)',
-        text: 'var(--color-lavender-text)',
-    },
-    bamboo: {
-        light: 'var(--color-bamboo-light)',
-        base: 'var(--color-bamboo-base)',
-        dark: 'var(--color-bamboo-dark)',
-        text: 'var(--color-bamboo-text)',
-    },
-} as const;

package/src/design_system/colors/index.ts

@@ -1,7 +0,0 @@
-export { tokens as colorsStylesLight } from './generated/light.js';
-export { tokens as colorsStylesDark } from './generated/dark.js';
-export { tokens as paletteColorsStylesLight } from './generated/palette.light.js';
-export { tokens as paletteColorsStylesDark } from './generated/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/colors_theme.ts

@@ -1,213 +0,0 @@
-export const lightTheme = {
-    neutral0: '#ffffff',
-    neutral25: '#f8f9fc',
-    neutral50: '#f3f4fa',
-    neutral75: '#eef0f8',
-    neutral100: '#e0e3f2',
-    neutral150: '#d0d5e9',
-    neutral200: '#c0c6de',
-    neutral250: '#b0b8d1',
-    neutral300: '#a3abc5',
-    neutral350: '#969eb8',
-    neutral400: '#8a93ae',
-    neutral450: '#7b84a0',
-    neutral500: '#6c7590',
-    neutral550: '#626a85',
-    neutral600: '#555d76',
-    neutral650: '#4b526b',
-    neutral700: '#3f475d',
-    neutral750: '#31384d',
-    neutral775: '#2b3143',
-    neutral800: '#272d3e',
-    neutral850: '#242836',
-    neutral875: '#1d202a',
-    neutral900: '#191b22',
-    neutral950: '#0a0b0f',
-    yellow25: '#f9f6ea',
-    yellow50: '#f9f0db',
-    yellow75: '#f7e8c4',
-    yellow100: '#f7dfb1',
-    yellow200: '#f5b315',
-    yellow300: '#e39c04',
-    yellow350: '#d58e00',
-    yellow400: '#ca8200',
-    yellow500: '#a96600',
-    yellow600: '#8c4e02',
-    yellow700: '#864906',
-    red25: '#fcf2ef',
-    red50: '#fff0ec',
-    red75: '#ffe3dc',
-    red100: '#fedad1',
-    red200: '#ffb39f',
-    red300: '#ff886e',
-    red350: '#fc7156',
-    red400: '#fa4d37',
-    red500: '#e3231d',
-    red600: '#bb0401',
-    red700: '#af0600',
-    green25: '#e8f9ef',
-    green50: '#e4f5e5',
-    green75: '#daefdc',
-    green100: '#cfe9d1',
-    green200: '#80da8d',
-    green300: '#46c263',
-    green350: '#22b551',
-    green400: '#00ab46',
-    green500: '#008a27',
-    green600: '#086e08',
-    green700: '#176b08',
-    blue25: '#f0f8ff',
-    blue50: '#ecf1ff',
-    blue75: '#e1eaff',
-    blue100: '#d8e2ff',
-    blue200: '#b2c6ff',
-    blue300: '#88abfe',
-    blue350: '#709efd',
-    blue400: '#5290f9',
-    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;