@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/src/design_system/properties_theme.ts

@@ -0,0 +1,453 @@
+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 */
+        background: 'var(--color-primary-background)',
+
+        /* #d8e2ff */
+        backgroundHover: 'var(--color-primary-background-hover)',
+
+        /* #f0f8ff */
+        backgroundSubtle: 'var(--color-primary-background-subtle)',
+
+        /* #ecf1ff */
+        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 */
+        borderSubtle: 'var(--color-success-border-subtle)',
+    },
+
+    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 */
+        borderSubtle: 'var(--color-warning-border-subtle)',
+    },
+
+    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 */
+        border: 'var(--color-danger-border)',
+
+        /* #fa4d37 */
+        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 */
+        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)',
+    },
+
+    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;