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

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

@@ -0,0 +1,147 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+export const tokens = `
+  --color-neutral-text: #242836;
+  --color-neutral-text-muted: #3f475d;
+  --color-neutral-text-subtle: #6c7590;
+  --color-neutral-text-disabled: #c0c6de;
+  --color-neutral-text-on-primary: #ffffff;
+  --color-neutral-icon-on-primary: #ffffff;
+  --color-neutral-background: #ffffff;
+  --color-neutral-background-muted: #f8f9fc;
+  --color-neutral-background-subtle: #f3f4fa;
+  --color-neutral-background-white: #ffffff;
+  --color-neutral-card-background: #ffffff;
+  --color-neutral-card-background-hover: #ffffff;
+  --color-neutral-border: #d0d5e9;
+  --color-neutral-separator-subtle: #e0e3f2;
+  --color-neutral-hover: #eef0f8;
+  --color-neutral-disabled: #f3f4fa;
+  --color-neutral-overflow: #e0e3f2;
+  --color-neutral-icon: #555d76;
+  --color-neutral-icon-subtle: #8a93ae;
+  --color-neutral-icon-disabled: #b0b8d1;
+  --color-neutral-field-border: #c0c6de;
+  --color-neutral-action-secondary: #d0d5e9;
+  --color-neutral-action-secondary-hover: #e0e3f2;
+  --color-neutral-action-secondary-active: #d0d5e9;
+  --color-neutral-chip-background: #e0e3f2;
+  --color-neutral-chip-background-hover: #d0d5e9;
+  --color-neutral-chip-background-active: #c0c6de;
+  --color-neutral-chip-background-disabled: #d0d5e9;
+  --color-neutral-large-tooltip-background: #ffffff;
+  --color-neutral-large-tooltip-border: #e0e3f2;
+  --color-neutral-small-tooltip-text: #ffffff;
+  --color-neutral-small-tooltip-background: #191b22;
+  --color-neutral-small-tooltip-border: #242836;
+  --color-neutral-overlay: #191b22;
+  --color-neutral-field-background: #f8f9fc;
+  --color-neutral-text-placeholder: #969eb8;
+  --color-primary-text: #1672eb;
+  --color-primary-text-interactive: #1672eb;
+  --color-primary-icon: #1672eb;
+  --color-primary-action: #1672eb;
+  --color-primary-action-hover: #5290f9;
+  --color-primary-action-active: #1a57da;
+  --color-primary-field-border-active: #1672eb;
+  --color-primary-border-subtle: #b2c6ff;
+  --color-primary-background: #ecf1ff;
+  --color-primary-background-subtle: #f0f8ff;
+  --color-primary-background-hover: #d8e2ff;
+  --color-primary-chip-background: #ecf1ff;
+  --color-primary-chip-background-subtle: #f0f8ff;
+  --color-primary-chip-background-hover: #d8e2ff;
+  --color-primary-chip-text: #1a57da;
+  --color-primary-shadow-active: #b2c6ff;
+  --color-primary-black-action: #272d3e;
+  --color-primary-black-action-hover: #2b3143;
+  --color-primary-black-action-active: #0a0b0f;
+  --color-primary-black-background: #1d202a;
+  --color-primary-black-background-hover: #3f475d;
+  --color-primary-black-chip-text: #f8f9fc;
+  --color-success-text: #008a27;
+  --color-success-icon: #008a27;
+  --color-success-background: #e4f5e5;
+  --color-success-background-hover: #cfe9d1;
+  --color-success-background-subtle: #e8f9ef;
+  --color-success-background-subtle-hover: #cfe9d1;
+  --color-success-background-subtle-active: #80da8d;
+  --color-success-chip-background: #e4f5e5;
+  --color-success-chip-background-hover: #cfe9d1;
+  --color-success-chip-text: #086e08;
+  --color-success-border: #00ab46;
+  --color-success-border-subtle: #80da8d;
+  --color-success-action: #008a27;
+  --color-success-action-hover: #00ab46;
+  --color-success-action-active: #086e08;
+  --color-warning-text: #a96600;
+  --color-warning-icon: #f5b315;
+  --color-warning-background: #f9f0db;
+  --color-warning-background-hover: #f7dfb1;
+  --color-warning-background-subtle: #f9f6ea;
+  --color-warning-chip-background: #f9f0db;
+  --color-warning-chip-background-hover: #f7dfb1;
+  --color-warning-chip-text: #8c4e02;
+  --color-warning-border: #ca8200;
+  --color-warning-border-subtle: #f5b315;
+  --color-warning-field-border: #f5b315;
+  --color-danger-text: #e3231d;
+  --color-danger-icon: #e3231d;
+  --color-danger-background: #fff0ec;
+  --color-danger-background-hover: #fedad1;
+  --color-danger-background-subtle: #fcf2ef;
+  --color-danger-background-subtle-hover: #fedad1;
+  --color-danger-background-subtle-active: #ffb39f;
+  --color-danger-chip-background: #fff0ec;
+  --color-danger-chip-background-hover: #fedad1;
+  --color-danger-chip-text: #bb0401;
+  --color-danger-border: #fa4d37;
+  --color-danger-border-subtle: #ffb39f;
+  --color-danger-field-border: #fa4d37;
+  --color-danger-action: #e3231d;
+  --color-danger-action-hover: #fa4d37;
+  --color-danger-action-active: #bb0401;
+  --color-special-free-plan-background: #ffc89f;
+  --color-special-starter-plan-background: #ffdd96;
+  --color-special-scale-plan-background: #a1b7ff;
+  --color-special-business-plan-background: #a7f2ed;
+  --color-special-enterprise-plan-background: #bf97ed;
+  --color-rose-light: #f483b5;
+  --color-rose-base: #c6387d;
+  --color-rose-dark: #781552;
+  --color-rose-text: #b6006b;
+  --color-buttercup-light: #ffdd96;
+  --color-buttercup-base: #f0b21b;
+  --color-buttercup-dark: #c37319;
+  --color-buttercup-text: #a65d00;
+  --color-paprika-light: #e44467;
+  --color-paprika-base: #9b0238;
+  --color-paprika-dark: #4a0018;
+  --color-paprika-text: #ba0044;
+  --color-teal-light: #a7f2ed;
+  --color-teal-base: #30c0bb;
+  --color-teal-dark: #297774;
+  --color-teal-text: #018181;
+  --color-indigo-light: #a1b7ff;
+  --color-indigo-base: #5d85e1;
+  --color-indigo-dark: #365494;
+  --color-indigo-text: #2563c1;
+  --color-slate-light: #c1c5e1;
+  --color-slate-base: #8490c4;
+  --color-slate-dark: #525c85;
+  --color-slate-text: #566087;
+  --color-coral-light: #ffc89f;
+  --color-coral-base: #fa8136;
+  --color-coral-dark: #bb4511;
+  --color-coral-text: #c74000;
+  --color-lavender-light: #bf97ed;
+  --color-lavender-base: #6a14de;
+  --color-lavender-dark: #330276;
+  --color-lavender-text: #6e00f4;
+  --color-bamboo-light: #64cda5;
+  --color-bamboo-base: #12966f;
+  --color-bamboo-dark: #195d46;
+  --color-bamboo-text: #007455;
+`;

package/src/design_system/colors/generated/palette.dark.scss

@@ -0,0 +1,75 @@
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+$tokens: (
+  'palette-neutral-0': #ffffff,
+  'palette-neutral-25': #f8f9fc,
+  'palette-neutral-50': #f3f4fa,
+  'palette-neutral-75': #eef0f8,
+  'palette-neutral-100': #e1e3ed,
+  'palette-neutral-150': #d1d5e4,
+  'palette-neutral-200': #c1c6d9,
+  'palette-neutral-250': #b2b8cc,
+  'palette-neutral-300': #a5abc0,
+  'palette-neutral-350': #989eb3,
+  'palette-neutral-400': #8c93a8,
+  'palette-neutral-450': #7d8499,
+  'palette-neutral-500': #6e758a,
+  'palette-neutral-550': #646a7f,
+  'palette-neutral-600': #575d71,
+  'palette-neutral-650': #4d5265,
+  'palette-neutral-700': #414758,
+  'palette-neutral-750': #343847,
+  'palette-neutral-775': #2d313e,
+  'palette-neutral-800': #2a2d39,
+  'palette-neutral-850': #252832,
+  'palette-neutral-875': #1e2027,
+  'palette-neutral-900': #1a1b21,
+  'palette-neutral-950': #101114,
+  'palette-yellow-25': #fcdc73,
+  'palette-yellow-50': #ffd761,
+  'palette-yellow-75': #f9ce4b,
+  'palette-yellow-100': #f5bc38,
+  'palette-yellow-200': #cf9117,
+  'palette-yellow-300': #a56909,
+  'palette-yellow-350': #8a4f05,
+  'palette-yellow-400': #6d3806,
+  'palette-yellow-500': #5d2e0e,
+  'palette-yellow-600': #3f1b07,
+  'palette-yellow-700': #301806,
+  'palette-red-25': #f5a790,
+  'palette-red-50': #fe9e8a,
+  'palette-red-75': #ff8770,
+  'palette-red-100': #ff7157,
+  'palette-red-200': #ef6045,
+  'palette-red-300': #cf4436,
+  'palette-red-350': #aa3229,
+  'palette-red-400': #812420,
+  'palette-red-500': #672523,
+  'palette-red-600': #40191b,
+  'palette-red-700': #381719,
+  'palette-green-25': #74d584,
+  'palette-green-50': #6ccd7c,
+  'palette-green-75': #55c06a,
+  'palette-green-100': #3bb358,
+  'palette-green-200': #23a64a,
+  'palette-green-300': #068a35,
+  'palette-green-350': #006e29,
+  'palette-green-400': #00531e,
+  'palette-green-500': #14441f,
+  'palette-green-600': #0f2b14,
+  'palette-green-700': #09260f,
+  'palette-blue-25': #92c0ff,
+  'palette-blue-50': #8ebcff,
+  'palette-blue-75': #80a9ff,
+  'palette-blue-100': #6f9dff,
+  'palette-blue-200': #5990ff,
+  'palette-blue-300': #3970d7,
+  'palette-blue-350': #295cbb,
+  'palette-blue-400': #194594,
+  'palette-blue-500': #1a3a78,
+  'palette-blue-600': #0d2550,
+  'palette-blue-700': #151d34
+);

package/src/design_system/colors/generated/palette.dark.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: #e1e3ed;
+  --palette-neutral-150: #d1d5e4;
+  --palette-neutral-200: #c1c6d9;
+  --palette-neutral-250: #b2b8cc;
+  --palette-neutral-300: #a5abc0;
+  --palette-neutral-350: #989eb3;
+  --palette-neutral-400: #8c93a8;
+  --palette-neutral-450: #7d8499;
+  --palette-neutral-500: #6e758a;
+  --palette-neutral-550: #646a7f;
+  --palette-neutral-600: #575d71;
+  --palette-neutral-650: #4d5265;
+  --palette-neutral-700: #414758;
+  --palette-neutral-750: #343847;
+  --palette-neutral-775: #2d313e;
+  --palette-neutral-800: #2a2d39;
+  --palette-neutral-850: #252832;
+  --palette-neutral-875: #1e2027;
+  --palette-neutral-900: #1a1b21;
+  --palette-neutral-950: #101114;
+  --palette-yellow-25: #fcdc73;
+  --palette-yellow-50: #ffd761;
+  --palette-yellow-75: #f9ce4b;
+  --palette-yellow-100: #f5bc38;
+  --palette-yellow-200: #cf9117;
+  --palette-yellow-300: #a56909;
+  --palette-yellow-350: #8a4f05;
+  --palette-yellow-400: #6d3806;
+  --palette-yellow-500: #5d2e0e;
+  --palette-yellow-600: #3f1b07;
+  --palette-yellow-700: #301806;
+  --palette-red-25: #f5a790;
+  --palette-red-50: #fe9e8a;
+  --palette-red-75: #ff8770;
+  --palette-red-100: #ff7157;
+  --palette-red-200: #ef6045;
+  --palette-red-300: #cf4436;
+  --palette-red-350: #aa3229;
+  --palette-red-400: #812420;
+  --palette-red-500: #672523;
+  --palette-red-600: #40191b;
+  --palette-red-700: #381719;
+  --palette-green-25: #74d584;
+  --palette-green-50: #6ccd7c;
+  --palette-green-75: #55c06a;
+  --palette-green-100: #3bb358;
+  --palette-green-200: #23a64a;
+  --palette-green-300: #068a35;
+  --palette-green-350: #006e29;
+  --palette-green-400: #00531e;
+  --palette-green-500: #14441f;
+  --palette-green-600: #0f2b14;
+  --palette-green-700: #09260f;
+  --palette-blue-25: #92c0ff;
+  --palette-blue-50: #8ebcff;
+  --palette-blue-75: #80a9ff;
+  --palette-blue-100: #6f9dff;
+  --palette-blue-200: #5990ff;
+  --palette-blue-300: #3970d7;
+  --palette-blue-350: #295cbb;
+  --palette-blue-400: #194594;
+  --palette-blue-500: #1a3a78;
+  --palette-blue-600: #0d2550;
+  --palette-blue-700: #151d34;
+`;

package/src/design_system/colors/generated/palette.light.scss

@@ -0,0 +1,75 @@
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+$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/colors/generated/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/colors/generated/properties_theme.ts

@@ -0,0 +1,179 @@
+/**
+ * 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

@@ -0,0 +1,7 @@
+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/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';

package/style-dictionary.config.json

@@ -0,0 +1,29 @@
+{
+    "source": ["src/design_system/figma_color_tokens.light.json", "src/design_system/figma_color_tokens.dark.json"],
+    "platforms": {
+        "scss": {
+            "transformGroup": "scss",
+            "buildPath": "build/",
+            "files": [
+                {
+                    "destination": "scss/_variables.scss",
+                    "format": "css/variables"
+                },
+                {
+                    "destination": "scss/_variables.dark.scss",
+                    "format": "css/variables-dark"
+                }
+            ]
+        },
+        "android": {
+            "transformGroup": "android",
+            "buildPath": "build/android/",
+            "files": [
+                {
+                    "destination": "font_dimens.xml",
+                    "format": "android/fontDimens"
+                }
+            ]
+        }
+    }
+}