@purpur/library 9.7.4 → 9.7.5

package/tokens/color/variables.json

@@ -0,0 +1,307 @@
+{
+  "color": {
+    "purple": {
+      "50": "#faf0ff",
+      "100": "#f4e0ff",
+      "200": "#e4b6fb",
+      "300": "#d58df9",
+      "400": "#c461f7",
+      "500": "#b12df4",
+      "550": "#990ae3",
+      "600": "#8c07d0",
+      "700": "#6d02a3",
+      "800": "#4e0174",
+      "900": "#29003e",
+      "950": "#1f002e"
+    },
+    "beige": {
+      "50": "#f9f1ec",
+      "100": "#ede1d8",
+      "200": "#d7c3b5",
+      "300": "#bba494",
+      "400": "#a08877",
+      "500": "#807268",
+      "600": "#665e58",
+      "700": "#4f4741",
+      "800": "#3b332d",
+      "900": "#2d2824",
+      "950": "#170f09"
+    },
+    "teal": {
+      "50": "#edf5f5",
+      "100": "#d5eae9",
+      "200": "#a1cfcd",
+      "300": "#6eb5b2",
+      "400": "#3a9b96",
+      "500": "#00847e",
+      "600": "#006c67",
+      "700": "#02534f",
+      "800": "#063c39",
+      "900": "#032220",
+      "950": "#011413"
+    },
+    "gray": {
+      "50": "#f5f5fa",
+      "100": "#e5e5eb",
+      "150": "#d6d6dd",
+      "200": "#c6c6cd",
+      "300": "#aaaab0",
+      "400": "#8d8d94",
+      "500": "#757579",
+      "600": "#5f5f63",
+      "700": "#4a4a4d",
+      "800": "#353537",
+      "850": "#2a2a2c",
+      "900": "#202022",
+      "950": "#121212"
+    },
+    "green": {
+      "50": "#e1f9ec",
+      "100": "#c5efd9",
+      "200": "#79d9a7",
+      "300": "#3dbf7c",
+      "400": "#1fa15e",
+      "500": "#018842",
+      "600": "#017037",
+      "700": "#02562b",
+      "800": "#003e1e",
+      "900": "#002411",
+      "950": "#00150a"
+    },
+    "red": {
+      "50": "#fff0f5",
+      "100": "#ffdde8",
+      "200": "#ffafc9",
+      "300": "#ff80ab",
+      "400": "#fb4885",
+      "500": "#e4175c",
+      "600": "#c00543",
+      "700": "#980233",
+      "800": "#700025",
+      "900": "#440016",
+      "950": "#2c000e"
+    },
+    "orange": {
+      "50": "#fff2de",
+      "100": "#ffe1b3",
+      "200": "#f9bb5b",
+      "300": "#f39200",
+      "400": "#cc7a00",
+      "500": "#a86602",
+      "600": "#8b5301",
+      "700": "#6a4102",
+      "800": "#4c2f03",
+      "900": "#2b1b03",
+      "950": "#1a0f00"
+    },
+    "blue": {
+      "50": "#e8f6ff",
+      "100": "#caeaff",
+      "200": "#91cdf4",
+      "300": "#62b2e7",
+      "400": "#3694d3",
+      "500": "#0078cb",
+      "600": "#0063a6",
+      "700": "#014d80",
+      "800": "#03385b",
+      "900": "#002036",
+      "950": "#011320"
+    },
+    "transparent-black": {
+      "50": "rgba(0, 0, 0, 0.05)",
+      "100": "rgba(0, 0, 0, 0.1)",
+      "150": "rgba(0, 0, 0, 0.16)",
+      "200": "rgba(0, 0, 0, 0.22)",
+      "300": "rgba(0, 0, 0, 0.33)",
+      "400": "rgba(0, 0, 0, 0.44)",
+      "500": "rgba(0, 0, 0, 0.54)",
+      "600": "rgba(0, 0, 0, 0.62)",
+      "700": "rgba(0, 0, 0, 0.71)",
+      "800": "rgba(0, 0, 0, 0.8)",
+      "850": "rgba(0, 0, 0, 0.84)",
+      "900": "rgba(0, 0, 0, 0.88)",
+      "950": "rgba(0, 0, 0, 0.93)"
+    },
+    "transparent-white": {
+      "50": "rgba(255, 255, 255, 0.07)",
+      "100": "rgba(255, 255, 255, 0.11)",
+      "150": "rgba(255, 255, 255, 0.16)",
+      "200": "rgba(255, 255, 255, 0.21)",
+      "300": "rgba(255, 255, 255, 0.29)",
+      "400": "rgba(255, 255, 255, 0.37)",
+      "500": "rgba(255, 255, 255, 0.46)",
+      "600": "rgba(255, 255, 255, 0.55)",
+      "700": "rgba(255, 255, 255, 0.66)",
+      "800": "rgba(255, 255, 255, 0.79)",
+      "850": "rgba(255, 255, 255, 0.84)",
+      "900": "rgba(255, 255, 255, 0.89)",
+      "950": "rgba(255, 255, 255, 0.95)"
+    },
+    "functional": {
+      "black": "#000000",
+      "white": "#ffffff",
+      "transparent": "rgba(255, 255, 255, 0)"
+    },
+    "brand": {
+      "deep-purple": "#29003e",
+      "core-purple": "#990ae3",
+      "light-purple": "#f4e0ff",
+      "deep-beige": "#4f4741",
+      "beige": "#ede1d8",
+      "light-beige": "#f9f1ec",
+      "off-black": "#202022",
+      "white": "#ffffff"
+    },
+    "text": {
+      "default": "rgba(0, 0, 0, 0.84)",
+      "medium": "rgba(0, 0, 0, 0.62)",
+      "weak": "rgba(0, 0, 0, 0.44)",
+      "default-negative": "rgba(255, 255, 255, 0.95)",
+      "medium-negative": "rgba(255, 255, 255, 0.66)",
+      "weak-negative": "rgba(255, 255, 255, 0.37)",
+      "interactive": {
+        "primary": "#6d02a3",
+        "primary-hover": "#4e0174",
+        "primary-active": "#29003e",
+        "on-primary": "#ffffff",
+        "on-primary-negative": "#4e0174",
+        "primary-negative": "#f4e0ff",
+        "primary-hover-negative": "#faf0ff",
+        "primary-active-negative": "#ffffff",
+        "on-expressive": "#ffffff",
+        "on-expressive-negative": "#ffffff",
+        "on-expressive-hover": "#ffffff",
+        "on-expressive-hover-negative": "#29003e",
+        "on-expressive-active": "#ffffff",
+        "on-expressive-active-negative": "#29003e",
+        "on-destructive": "#ffffff",
+        "selected": "#990ae3",
+        "selected-negative": "#d58df9"
+      },
+      "status": {
+        "discount": "#990ae3",
+        "error-strong": "#980233",
+        "error-strong-negative": "#ff80ab",
+        "error-medium": "#e4175c",
+        "error-medium-negative": "#fb4885",
+        "success-strong": "#02562b",
+        "success-strong-negative": "#3dbf7c",
+        "success-medium": "#018842",
+        "success-medium-negative": "#1fa15e",
+        "warning-strong": "#6a4102",
+        "warning-medium": "#a86602",
+        "warning-medium-negative": "#f39200",
+        "info-strong": "#014d80",
+        "info-medium": "#0078cb",
+        "neutral": "rgba(0, 0, 0, 0.71)",
+        "special": "#4e0174",
+        "attention": "#ffffff",
+        "black-friday": "#ffffff"
+      },
+      "tone-on-tone": {
+        "primary": "#f4e0ff",
+        "secondary": "#29003e",
+        "tertiary": "#4f4741"
+      }
+    },
+    "background": {
+      "primary": "#ffffff",
+      "primary-negative": "#1f002e",
+      "secondary": "#f5f5fa",
+      "secondary-negative": "#29003e",
+      "on-image": "rgba(255, 255, 255, 0.84)",
+      "on-image-negative": "rgba(0, 0, 0, 0.71)",
+      "interactive": {
+        "auto-fill": "#e8f6ff",
+        "primary": "#4e0174",
+        "primary-hover": "#6d02a3",
+        "primary-active": "#8c07d0",
+        "primary-negative": "#f4e0ff",
+        "primary-hover-negative": "#e4b6fb",
+        "primary-active-negative": "#d58df9",
+        "expressive": "#990ae3",
+        "expressive-hover": "#6d02a3",
+        "expressive-active": "#4e0174",
+        "expressive-negative": "#990ae3",
+        "expressive-hover-negative": "#c461f7",
+        "expressive-active-negative": "#d58df9",
+        "disabled": "rgba(0, 0, 0, 0.1)",
+        "disabled-negative": "rgba(255, 255, 255, 0.11)",
+        "transparent-hover": "#f4e0ff",
+        "transparent-hover-negative": "#4e0174",
+        "transparent-active": "#e4b6fb",
+        "transparent-active-negative": "#6d02a3",
+        "inactive": "rgba(0, 0, 0, 0.05)",
+        "inactive-negative": "rgba(255, 255, 255, 0.16)",
+        "read-only": "rgba(0, 0, 0, 0.05)",
+        "read-only-negative": "rgba(255, 255, 255, 0.11)",
+        "destructive": "#e4175c",
+        "destructive-hover": "#c00543",
+        "destructive-active": "#980233"
+      },
+      "status": {
+        "info-medium": "#caeaff",
+        "info-strong": "#3694d3",
+        "success-medium": "#c5efd9",
+        "success-strong": "#1fa15e",
+        "success-strong-negative": "#3dbf7c",
+        "error-medium": "#ffdde8",
+        "error-strong": "#fb4885",
+        "error-strong-negative": "#ff80ab",
+        "warning-medium": "#ffe1b3",
+        "warning-strong": "#cc7a00",
+        "warning-strong-negative": "#f39200",
+        "neutral": "#d6d6dd",
+        "special": "#f4e0ff",
+        "attention": "#6d02a3",
+        "black-friday": "#202022"
+      },
+      "tone-on-tone": {
+        "primary": "#29003e",
+        "secondary": "#f4e0ff",
+        "tertiary": "#ede1d8",
+        "quaternary": "#f9f1ec"
+      }
+    },
+    "border": {
+      "medium": "rgba(0, 0, 0, 0.33)",
+      "medium-negative": "rgba(255, 255, 255, 0.29)",
+      "strong": "rgba(0, 0, 0, 0.54)",
+      "strong-negative": "rgba(255, 255, 255, 0.46)",
+      "weak": "rgba(0, 0, 0, 0.16)",
+      "weak-negative": "rgba(255, 255, 255, 0.16)",
+      "interactive": {
+        "focus": "#b12df4",
+        "primary": "#6d02a3",
+        "primary-negative": "#f4e0ff",
+        "primary-hover": "#4e0174",
+        "primary-active": "#29003e",
+        "primary-hover-negative": "#faf0ff",
+        "primary-active-negative": "#ffffff",
+        "expressive": "#990ae3",
+        "selected": "#990ae3",
+        "subtle": "rgba(0, 0, 0, 0.44)",
+        "subtle-negative": "rgba(255, 255, 255, 0.46)",
+        "subtle-hover": "#6d02a3",
+        "subtle-hover-negative": "#c461f7"
+      },
+      "status": {
+        "error": "#e4175c",
+        "error-negative": "#fb4885",
+        "warning": "#cc7a00",
+        "info": "#0078cb",
+        "success": "#018842",
+        "success-negative": "#1fa15e"
+      }
+    },
+    "overlay": {
+      "default": "rgba(0, 0, 0, 0.33)"
+    },
+    "gradient-ai": {
+      "bottom": "#3694d3",
+      "bottom-negative": "#62b2e7",
+      "top": "#b12df4",
+      "top-negative": "#d58df9"
+    }
+  }
+}

package/tokens/color/variables.scss

@@ -0,0 +1,253 @@
+$purpur-color-purple-50: #faf0ff;
+$purpur-color-purple-100: #f4e0ff;
+$purpur-color-purple-200: #e4b6fb;
+$purpur-color-purple-300: #d58df9;
+$purpur-color-purple-400: #c461f7;
+$purpur-color-purple-500: #b12df4;
+$purpur-color-purple-550: #990ae3;
+$purpur-color-purple-600: #8c07d0;
+$purpur-color-purple-700: #6d02a3;
+$purpur-color-purple-800: #4e0174;
+$purpur-color-purple-900: #29003e;
+$purpur-color-purple-950: #1f002e;
+$purpur-color-beige-50: #f9f1ec;
+$purpur-color-beige-100: #ede1d8;
+$purpur-color-beige-200: #d7c3b5;
+$purpur-color-beige-300: #bba494;
+$purpur-color-beige-400: #a08877;
+$purpur-color-beige-500: #807268;
+$purpur-color-beige-600: #665e58;
+$purpur-color-beige-700: #4f4741;
+$purpur-color-beige-800: #3b332d;
+$purpur-color-beige-900: #2d2824;
+$purpur-color-beige-950: #170f09;
+$purpur-color-teal-50: #edf5f5;
+$purpur-color-teal-100: #d5eae9;
+$purpur-color-teal-200: #a1cfcd;
+$purpur-color-teal-300: #6eb5b2;
+$purpur-color-teal-400: #3a9b96;
+$purpur-color-teal-500: #00847e;
+$purpur-color-teal-600: #006c67;
+$purpur-color-teal-700: #02534f;
+$purpur-color-teal-800: #063c39;
+$purpur-color-teal-900: #032220;
+$purpur-color-teal-950: #011413;
+$purpur-color-gray-50: #f5f5fa;
+$purpur-color-gray-100: #e5e5eb;
+$purpur-color-gray-150: #d6d6dd;
+$purpur-color-gray-200: #c6c6cd;
+$purpur-color-gray-300: #aaaab0;
+$purpur-color-gray-400: #8d8d94;
+$purpur-color-gray-500: #757579;
+$purpur-color-gray-600: #5f5f63;
+$purpur-color-gray-700: #4a4a4d;
+$purpur-color-gray-800: #353537;
+$purpur-color-gray-850: #2a2a2c;
+$purpur-color-gray-900: #202022;
+$purpur-color-gray-950: #121212;
+$purpur-color-green-50: #e1f9ec;
+$purpur-color-green-100: #c5efd9;
+$purpur-color-green-200: #79d9a7;
+$purpur-color-green-300: #3dbf7c;
+$purpur-color-green-400: #1fa15e;
+$purpur-color-green-500: #018842;
+$purpur-color-green-600: #017037;
+$purpur-color-green-700: #02562b;
+$purpur-color-green-800: #003e1e;
+$purpur-color-green-900: #002411;
+$purpur-color-green-950: #00150a;
+$purpur-color-red-50: #fff0f5;
+$purpur-color-red-100: #ffdde8;
+$purpur-color-red-200: #ffafc9;
+$purpur-color-red-300: #ff80ab;
+$purpur-color-red-400: #fb4885;
+$purpur-color-red-500: #e4175c;
+$purpur-color-red-600: #c00543;
+$purpur-color-red-700: #980233;
+$purpur-color-red-800: #700025;
+$purpur-color-red-900: #440016;
+$purpur-color-red-950: #2c000e;
+$purpur-color-orange-50: #fff2de;
+$purpur-color-orange-100: #ffe1b3;
+$purpur-color-orange-200: #f9bb5b;
+$purpur-color-orange-300: #f39200;
+$purpur-color-orange-400: #cc7a00;
+$purpur-color-orange-500: #a86602;
+$purpur-color-orange-600: #8b5301;
+$purpur-color-orange-700: #6a4102;
+$purpur-color-orange-800: #4c2f03;
+$purpur-color-orange-900: #2b1b03;
+$purpur-color-orange-950: #1a0f00;
+$purpur-color-blue-50: #e8f6ff;
+$purpur-color-blue-100: #caeaff;
+$purpur-color-blue-200: #91cdf4;
+$purpur-color-blue-300: #62b2e7;
+$purpur-color-blue-400: #3694d3;
+$purpur-color-blue-500: #0078cb;
+$purpur-color-blue-600: #0063a6;
+$purpur-color-blue-700: #014d80;
+$purpur-color-blue-800: #03385b;
+$purpur-color-blue-900: #002036;
+$purpur-color-blue-950: #011320;
+$purpur-color-transparent-black-50: rgba(0, 0, 0, 0.05);
+$purpur-color-transparent-black-100: rgba(0, 0, 0, 0.1);
+$purpur-color-transparent-black-150: rgba(0, 0, 0, 0.16);
+$purpur-color-transparent-black-200: rgba(0, 0, 0, 0.22);
+$purpur-color-transparent-black-300: rgba(0, 0, 0, 0.33);
+$purpur-color-transparent-black-400: rgba(0, 0, 0, 0.44);
+$purpur-color-transparent-black-500: rgba(0, 0, 0, 0.54);
+$purpur-color-transparent-black-600: rgba(0, 0, 0, 0.62);
+$purpur-color-transparent-black-700: rgba(0, 0, 0, 0.71);
+$purpur-color-transparent-black-800: rgba(0, 0, 0, 0.8);
+$purpur-color-transparent-black-850: rgba(0, 0, 0, 0.84);
+$purpur-color-transparent-black-900: rgba(0, 0, 0, 0.88);
+$purpur-color-transparent-black-950: rgba(0, 0, 0, 0.93);
+$purpur-color-transparent-white-50: rgba(255, 255, 255, 0.07);
+$purpur-color-transparent-white-100: rgba(255, 255, 255, 0.11);
+$purpur-color-transparent-white-150: rgba(255, 255, 255, 0.16);
+$purpur-color-transparent-white-200: rgba(255, 255, 255, 0.21);
+$purpur-color-transparent-white-300: rgba(255, 255, 255, 0.29);
+$purpur-color-transparent-white-400: rgba(255, 255, 255, 0.37);
+$purpur-color-transparent-white-500: rgba(255, 255, 255, 0.46);
+$purpur-color-transparent-white-600: rgba(255, 255, 255, 0.55);
+$purpur-color-transparent-white-700: rgba(255, 255, 255, 0.66);
+$purpur-color-transparent-white-800: rgba(255, 255, 255, 0.79);
+$purpur-color-transparent-white-850: rgba(255, 255, 255, 0.84);
+$purpur-color-transparent-white-900: rgba(255, 255, 255, 0.89);
+$purpur-color-transparent-white-950: rgba(255, 255, 255, 0.95);
+$purpur-color-functional-black: #000000;
+$purpur-color-functional-white: #ffffff;
+$purpur-color-functional-transparent: rgba(255, 255, 255, 0);
+$purpur-color-brand-deep-purple: $purpur-color-purple-900;
+$purpur-color-brand-core-purple: $purpur-color-purple-550;
+$purpur-color-brand-light-purple: $purpur-color-purple-100;
+$purpur-color-brand-deep-beige: $purpur-color-beige-700;
+$purpur-color-brand-beige: $purpur-color-beige-100;
+$purpur-color-brand-light-beige: $purpur-color-beige-50;
+$purpur-color-brand-off-black: $purpur-color-gray-900;
+$purpur-color-brand-white: $purpur-color-functional-white;
+$purpur-color-text-default: $purpur-color-transparent-black-850;
+$purpur-color-text-medium: $purpur-color-transparent-black-600;
+$purpur-color-text-weak: $purpur-color-transparent-black-400;
+$purpur-color-text-default-negative: $purpur-color-transparent-white-950;
+$purpur-color-text-medium-negative: $purpur-color-transparent-white-700;
+$purpur-color-text-weak-negative: $purpur-color-transparent-white-400;
+$purpur-color-text-interactive-primary: $purpur-color-purple-700;
+$purpur-color-text-interactive-primary-hover: $purpur-color-purple-800;
+$purpur-color-text-interactive-primary-active: $purpur-color-purple-900;
+$purpur-color-text-interactive-on-primary: $purpur-color-functional-white;
+$purpur-color-text-interactive-on-primary-negative: $purpur-color-purple-800;
+$purpur-color-text-interactive-primary-negative: $purpur-color-purple-100;
+$purpur-color-text-interactive-primary-hover-negative: $purpur-color-purple-50;
+$purpur-color-text-interactive-primary-active-negative: $purpur-color-functional-white;
+$purpur-color-text-interactive-on-expressive: $purpur-color-functional-white;
+$purpur-color-text-interactive-on-expressive-negative: $purpur-color-functional-white;
+$purpur-color-text-interactive-on-expressive-hover: $purpur-color-functional-white;
+$purpur-color-text-interactive-on-expressive-hover-negative: $purpur-color-purple-900;
+$purpur-color-text-interactive-on-expressive-active: $purpur-color-functional-white;
+$purpur-color-text-interactive-on-expressive-active-negative: $purpur-color-purple-900;
+$purpur-color-text-interactive-on-destructive: $purpur-color-functional-white;
+$purpur-color-text-interactive-selected: $purpur-color-purple-550;
+$purpur-color-text-interactive-selected-negative: $purpur-color-purple-300;
+$purpur-color-text-status-discount: $purpur-color-purple-550;
+$purpur-color-text-status-error-strong: $purpur-color-red-700;
+$purpur-color-text-status-error-strong-negative: $purpur-color-red-300;
+$purpur-color-text-status-error-medium: $purpur-color-red-500;
+$purpur-color-text-status-error-medium-negative: $purpur-color-red-400;
+$purpur-color-text-status-success-strong: $purpur-color-green-700;
+$purpur-color-text-status-success-strong-negative: $purpur-color-green-300;
+$purpur-color-text-status-success-medium: $purpur-color-green-500;
+$purpur-color-text-status-success-medium-negative: $purpur-color-green-400;
+$purpur-color-text-status-warning-strong: $purpur-color-orange-700;
+$purpur-color-text-status-warning-medium: $purpur-color-orange-500;
+$purpur-color-text-status-warning-medium-negative: $purpur-color-orange-300;
+$purpur-color-text-status-info-strong: $purpur-color-blue-700;
+$purpur-color-text-status-info-medium: $purpur-color-blue-500;
+$purpur-color-text-status-neutral: $purpur-color-transparent-black-700;
+$purpur-color-text-status-special: $purpur-color-purple-800;
+$purpur-color-text-status-attention: $purpur-color-functional-white;
+$purpur-color-text-status-black-friday: $purpur-color-functional-white;
+$purpur-color-text-tone-on-tone-primary: $purpur-color-purple-100;
+$purpur-color-text-tone-on-tone-secondary: $purpur-color-purple-900;
+$purpur-color-text-tone-on-tone-tertiary: $purpur-color-beige-700;
+$purpur-color-background-primary: $purpur-color-functional-white;
+$purpur-color-background-primary-negative: $purpur-color-purple-950;
+$purpur-color-background-secondary: $purpur-color-gray-50;
+$purpur-color-background-secondary-negative: $purpur-color-purple-900;
+$purpur-color-background-on-image: $purpur-color-transparent-white-850;
+$purpur-color-background-on-image-negative: $purpur-color-transparent-black-700;
+$purpur-color-background-interactive-auto-fill: $purpur-color-blue-50;
+$purpur-color-background-interactive-primary: $purpur-color-purple-800;
+$purpur-color-background-interactive-primary-hover: $purpur-color-purple-700;
+$purpur-color-background-interactive-primary-active: $purpur-color-purple-600;
+$purpur-color-background-interactive-primary-negative: $purpur-color-purple-100;
+$purpur-color-background-interactive-primary-hover-negative: $purpur-color-purple-200;
+$purpur-color-background-interactive-primary-active-negative: $purpur-color-purple-300;
+$purpur-color-background-interactive-expressive: $purpur-color-purple-550;
+$purpur-color-background-interactive-expressive-hover: $purpur-color-purple-700;
+$purpur-color-background-interactive-expressive-active: $purpur-color-purple-800;
+$purpur-color-background-interactive-expressive-negative: $purpur-color-purple-550;
+$purpur-color-background-interactive-expressive-hover-negative: $purpur-color-purple-400;
+$purpur-color-background-interactive-expressive-active-negative: $purpur-color-purple-300;
+$purpur-color-background-interactive-disabled: $purpur-color-transparent-black-100;
+$purpur-color-background-interactive-disabled-negative: $purpur-color-transparent-white-100;
+$purpur-color-background-interactive-transparent-hover: $purpur-color-purple-100;
+$purpur-color-background-interactive-transparent-hover-negative: $purpur-color-purple-800;
+$purpur-color-background-interactive-transparent-active: $purpur-color-purple-200;
+$purpur-color-background-interactive-transparent-active-negative: $purpur-color-purple-700;
+$purpur-color-background-interactive-inactive: $purpur-color-transparent-black-50;
+$purpur-color-background-interactive-inactive-negative: $purpur-color-transparent-white-150;
+$purpur-color-background-interactive-read-only: $purpur-color-transparent-black-50;
+$purpur-color-background-interactive-read-only-negative: $purpur-color-transparent-white-100;
+$purpur-color-background-interactive-destructive: $purpur-color-red-500;
+$purpur-color-background-interactive-destructive-hover: $purpur-color-red-600;
+$purpur-color-background-interactive-destructive-active: $purpur-color-red-700;
+$purpur-color-background-status-info-medium: $purpur-color-blue-100;
+$purpur-color-background-status-info-strong: $purpur-color-blue-400;
+$purpur-color-background-status-success-medium: $purpur-color-green-100;
+$purpur-color-background-status-success-strong: $purpur-color-green-400;
+$purpur-color-background-status-success-strong-negative: $purpur-color-green-300;
+$purpur-color-background-status-error-medium: $purpur-color-red-100;
+$purpur-color-background-status-error-strong: $purpur-color-red-400;
+$purpur-color-background-status-error-strong-negative: $purpur-color-red-300;
+$purpur-color-background-status-warning-medium: $purpur-color-orange-100;
+$purpur-color-background-status-warning-strong: $purpur-color-orange-400;
+$purpur-color-background-status-warning-strong-negative: $purpur-color-orange-300;
+$purpur-color-background-status-neutral: $purpur-color-gray-150;
+$purpur-color-background-status-special: $purpur-color-purple-100;
+$purpur-color-background-status-attention: $purpur-color-purple-700;
+$purpur-color-background-status-black-friday: $purpur-color-gray-900;
+$purpur-color-background-tone-on-tone-primary: $purpur-color-purple-900;
+$purpur-color-background-tone-on-tone-secondary: $purpur-color-purple-100;
+$purpur-color-background-tone-on-tone-tertiary: $purpur-color-beige-100;
+$purpur-color-background-tone-on-tone-quaternary: $purpur-color-beige-50;
+$purpur-color-border-medium: $purpur-color-transparent-black-300;
+$purpur-color-border-medium-negative: $purpur-color-transparent-white-300;
+$purpur-color-border-strong: $purpur-color-transparent-black-500;
+$purpur-color-border-strong-negative: $purpur-color-transparent-white-500;
+$purpur-color-border-weak: $purpur-color-transparent-black-150;
+$purpur-color-border-weak-negative: $purpur-color-transparent-white-150;
+$purpur-color-border-interactive-focus: $purpur-color-purple-500;
+$purpur-color-border-interactive-primary: $purpur-color-purple-700;
+$purpur-color-border-interactive-primary-negative: $purpur-color-purple-100;
+$purpur-color-border-interactive-primary-hover: $purpur-color-purple-800;
+$purpur-color-border-interactive-primary-active: $purpur-color-purple-900;
+$purpur-color-border-interactive-primary-hover-negative: $purpur-color-purple-50;
+$purpur-color-border-interactive-primary-active-negative: $purpur-color-functional-white;
+$purpur-color-border-interactive-expressive: $purpur-color-purple-550;
+$purpur-color-border-interactive-selected: $purpur-color-purple-550;
+$purpur-color-border-interactive-subtle: $purpur-color-transparent-black-400;
+$purpur-color-border-interactive-subtle-negative: $purpur-color-transparent-white-500;
+$purpur-color-border-interactive-subtle-hover: $purpur-color-purple-700;
+$purpur-color-border-interactive-subtle-hover-negative: $purpur-color-purple-400;
+$purpur-color-border-status-error: $purpur-color-red-500;
+$purpur-color-border-status-error-negative: $purpur-color-red-400;
+$purpur-color-border-status-warning: $purpur-color-orange-400;
+$purpur-color-border-status-info: $purpur-color-blue-500;
+$purpur-color-border-status-success: $purpur-color-green-500;
+$purpur-color-border-status-success-negative: $purpur-color-green-400;
+$purpur-color-overlay-default: $purpur-color-transparent-black-300;
+$purpur-color-gradient-ai-bottom: $purpur-color-blue-400;
+$purpur-color-gradient-ai-bottom-negative: $purpur-color-blue-300;
+$purpur-color-gradient-ai-top: $purpur-color-purple-500;
+$purpur-color-gradient-ai-top-negative: $purpur-color-purple-300;

package/tokens/dark.css

@@ -0,0 +1,9 @@
+@import "./border/variables.dark.css";
+@import "./breakpoint/variables.dark.css";
+@import "./color/variables.dark.css";
+@import "./filter/variables.dark.css";
+@import "./gradient/variables.dark.css";
+@import "./motion/variables.dark.css";
+@import "./shadow/variables.dark.css";
+@import "./spacing/variables.dark.css";
+@import "./typography/variables.dark.css";

package/tokens/dark.d.ts

@@ -0,0 +1,9 @@
+export * from "./border/variables.dark";
+export * from "./breakpoint/variables.dark";
+export * from "./color/variables.dark";
+export * from "./filter/variables.dark";
+export * from "./gradient/variables.dark";
+export * from "./motion/variables.dark";
+export * from "./shadow/variables.dark";
+export * from "./spacing/variables.dark";
+export * from "./typography/variables.dark";

package/tokens/dark.js

@@ -0,0 +1,9 @@
+export * from "./border/variables.dark";
+export * from "./breakpoint/variables.dark";
+export * from "./color/variables.dark";
+export * from "./filter/variables.dark";
+export * from "./gradient/variables.dark";
+export * from "./motion/variables.dark";
+export * from "./shadow/variables.dark";
+export * from "./spacing/variables.dark";
+export * from "./typography/variables.dark";

package/tokens/filter/variables.css

@@ -0,0 +1,4 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-filter-blur-on-image: blur(24px);
+}

package/tokens/filter/variables.d.ts

@@ -0,0 +1 @@
+export const purpurFilterBlurOnImage: string;

package/tokens/filter/variables.dark.css

@@ -0,0 +1,3 @@
+[data-color-scheme="dark"] {
+  --purpur-filter-blur-on-image: blur(24px);
+}

package/tokens/filter/variables.dark.d.ts

@@ -0,0 +1 @@
+export const purpurFilterBlurOnImage: string;

package/tokens/filter/variables.dark.js

@@ -0,0 +1 @@
+export const purpurFilterBlurOnImage = "blur(24px)";

package/tokens/filter/variables.dark.json

@@ -0,0 +1,7 @@
+{
+  "filter": {
+    "blur": {
+      "on-image": "blur(24px)"
+    }
+  }
+}

package/tokens/filter/variables.dark.scss

@@ -0,0 +1 @@
+$purpur-filter-blur-on-image: blur(24px);

package/tokens/filter/variables.js

@@ -0,0 +1 @@
+export const purpurFilterBlurOnImage = "blur(24px)";

package/tokens/filter/variables.json

@@ -0,0 +1,7 @@
+{
+  "filter": {
+    "blur": {
+      "on-image": "blur(24px)"
+    }
+  }
+}

package/tokens/filter/variables.scss

@@ -0,0 +1 @@
+$purpur-filter-blur-on-image: blur(24px);