@ebay/skin 19.14.3 → 19.16.0

package/dist/tokens/evo-core.css

@@ -1,60 +1,28 @@
 :root {
-    --border-radius-50: 8px;
-    --border-radius-100: 16px;
-    --border-radius-150: 24px;
-    --color-neutral-100: #fff;
-    --color-neutral-100-rgb: 255, 255, 255;
-    --color-neutral-200: #f7f7f7;
-    --color-neutral-200-rgb: 247, 247, 247;
-    --color-neutral-300: #e5e5e5;
-    --color-neutral-400: #c7c7c7;
-    --color-neutral-500: #8f8f8f;
-    --color-neutral-600: #707070;
-    --color-neutral-700: #363636;
-    --color-neutral-800: #191919;
-    --color-neutral-800-rgb: 25, 25, 25;
-    --color-neutral-900: #000;
-    --color-neutral-900-rgb: 0, 0, 0;
-    --color-orange-100: #fffaf5;
-    --color-orange-200: #ffead3;
-    --color-orange-300: #ffc382;
-    --color-orange-400: #ff8806;
-    --color-orange-500: #ec7303;
-    --color-orange-600: #c15100;
-    --color-orange-700: #562501;
-    --color-orange-800: #2f1604;
-    --color-coral-100: #fff7f5;
-    --color-coral-200: #ffe1d7;
-    --color-coral-300: #ffa78a;
-    --color-coral-400: #ff6a38;
-    --color-coral-500: #f3511b;
-    --color-coral-600: #d03706;
-    --color-coral-700: #5e1d08;
-    --color-coral-800: #2f0e04;
-    --color-red-100: #fff5f5;
-    --color-red-200: #ffdede;
-    --color-red-300: #ffa0a0;
-    --color-red-400: #ff5c5c;
-    --color-red-500: #f02d2d;
-    --color-red-600: #d50b0b;
-    --color-red-700: #570303;
-    --color-red-800: #2a0303;
-    --color-pink-100: #fef6fa;
-    --color-pink-200: #fcdcec;
-    --color-pink-300: #f79cc8;
-    --color-pink-400: #f155a0;
-    --color-pink-500: #de458e;
-    --color-pink-600: #a51359;
-    --color-pink-700: #4b112d;
-    --color-pink-800: #360606;
-    --color-indigo-100: #f5fbff;
-    --color-indigo-200: #d3effe;
-    --color-indigo-300: #80d0fd;
-    --color-indigo-400: #0aa7ff;
-    --color-indigo-500: #0099f0;
-    --color-indigo-600: #0364ab;
-    --color-indigo-700: #003c66;
-    --color-indigo-800: #01193d;
+    --border-width-medium: 1px;
+    --border-width-thick: 2px;
+    --border-width-thin: 0.5px;
+    --breakpoint-android-compact: 320px;
+    --breakpoint-android-expanded: 800px;
+    --breakpoint-android-medium: 600px;
+    --breakpoint-extra-large-2: 1400px;
+    --breakpoint-extra-large-3: 1920px;
+    --breakpoint-extra-large: 1100px;
+    --breakpoint-extra-small: 320px;
+    --breakpoint-ios-compact: 320px;
+    --breakpoint-ios-expanded: 800px;
+    --breakpoint-ios-regular: 600px;
+    --breakpoint-large: 800px;
+    --breakpoint-medium: 600px;
+    --breakpoint-small: 512px;
+    --color-avocado-100: #fdfef6;
+    --color-avocado-200: #f8fcde;
+    --color-avocado-300: #e9f5a0;
+    --color-avocado-400: #e3f13c;
+    --color-avocado-500: #c1d737;
+    --color-avocado-600: #68770d;
+    --color-avocado-700: #4e4e0c;
+    --color-avocado-800: #282306;
     --color-blue-100: #f5f9ff;
     --color-blue-200: #d4e5fe;
     --color-blue-300: #84b4fb;
@@ -64,22 +32,23 @@
     --color-blue-650: #003aa5;
     --color-blue-700: #002a69;
     --color-blue-800: #19133a;
-    --color-violet-100: #f6f5fe;
-    --color-violet-200: #e2ddfd;
-    --color-violet-300: #ad9efa;
-    --color-violet-400: #836bff;
-    --color-violet-500: #583aee;
-    --color-violet-600: #3b1fc6;
-    --color-violet-700: #271a68;
-    --color-violet-800: #20092b;
-    --color-lilac-100: #faf5fe;
-    --color-lilac-200: #efddfd;
-    --color-lilac-300: #cc9ef0;
-    --color-lilac-400: #b56bf0;
-    --color-lilac-500: #8935cb;
-    --color-lilac-600: #631f99;
-    --color-lilac-700: #3e135f;
-    --color-lilac-800: #2f041e;
+    --color-clear: rgba(255, 255, 255, 0);
+    --color-coral-100: #fff7f5;
+    --color-coral-200: #ffe1d7;
+    --color-coral-300: #ffa78a;
+    --color-coral-400: #ff6a38;
+    --color-coral-500: #f3511b;
+    --color-coral-600: #d03706;
+    --color-coral-700: #5e1d08;
+    --color-coral-800: #2f0e04;
+    --color-dijon-100: #fffdf5;
+    --color-dijon-200: #fcf9de;
+    --color-dijon-300: #faef8a;
+    --color-dijon-400: #f6e016;
+    --color-dijon-500: #e8d20c;
+    --color-dijon-600: #766f28;
+    --color-dijon-700: #524500;
+    --color-dijon-800: #2e2400;
     --color-green-100: #fbfef6;
     --color-green-200: #f0fce1;
     --color-green-300: #d5f6aa;
@@ -88,6 +57,14 @@
     --color-green-600: #507d17;
     --color-green-700: #345110;
     --color-green-800: #1c2d06;
+    --color-indigo-100: #f5fbff;
+    --color-indigo-200: #d3effe;
+    --color-indigo-300: #80d0fd;
+    --color-indigo-400: #0aa7ff;
+    --color-indigo-500: #0099f0;
+    --color-indigo-600: #0364ab;
+    --color-indigo-700: #003c66;
+    --color-indigo-800: #01193d;
     --color-jade-100: #f7fdfb;
     --color-jade-200: #d8f8ee;
     --color-jade-300: #8feace;
@@ -104,6 +81,14 @@
     --color-kiwi-600: #288034;
     --color-kiwi-700: #1b561a;
     --color-kiwi-800: #0c310d;
+    --color-lilac-100: #faf5fe;
+    --color-lilac-200: #efddfd;
+    --color-lilac-300: #cc9ef0;
+    --color-lilac-400: #b56bf0;
+    --color-lilac-500: #8935cb;
+    --color-lilac-600: #631f99;
+    --color-lilac-700: #3e135f;
+    --color-lilac-800: #2f041e;
     --color-marigold-100: #fffbf5;
     --color-marigold-200: #fff0d3;
     --color-marigold-300: #ffd480;
@@ -112,22 +97,39 @@
     --color-marigold-600: #a36302;
     --color-marigold-700: #562f01;
     --color-marigold-800: #2f1b04;
-    --color-yellow-100: #fffcf5;
-    --color-yellow-200: #fff8d5;
-    --color-yellow-300: #ffe58a;
-    --color-yellow-400: #ffbd14;
-    --color-yellow-500: #eebb04;
-    --color-yellow-600: #855f00;
-    --color-yellow-700: #553b06;
-    --color-yellow-800: #312102;
-    --color-dijon-100: #fffdf5;
-    --color-dijon-200: #fcf9de;
-    --color-dijon-300: #faef8a;
-    --color-dijon-400: #f6e016;
-    --color-dijon-500: #e8d20c;
-    --color-dijon-600: #766f28;
-    --color-dijon-700: #524500;
-    --color-dijon-800: #2e2400;
+    --color-neutral-100: #ffffff;
+    --color-neutral-200: #f7f7f7;
+    --color-neutral-300: #e5e5e5;
+    --color-neutral-400: #c7c7c7;
+    --color-neutral-500: #8f8f8f;
+    --color-neutral-600: #707070;
+    --color-neutral-700: #363636;
+    --color-neutral-800: #191919;
+    --color-neutral-900: #000000;
+    --color-orange-100: #fffaf5;
+    --color-orange-200: #ffead3;
+    --color-orange-300: #ffc382;
+    --color-orange-400: #ff8806;
+    --color-orange-500: #ec7303;
+    --color-orange-600: #c15100;
+    --color-orange-700: #562501;
+    --color-orange-800: #2f1604;
+    --color-pink-100: #fef6fa;
+    --color-pink-200: #fcdcec;
+    --color-pink-300: #f79cc8;
+    --color-pink-400: #f155a0;
+    --color-pink-500: #de458e;
+    --color-pink-600: #a51359;
+    --color-pink-700: #4b112d;
+    --color-pink-800: #360606;
+    --color-red-100: #fff5f5;
+    --color-red-200: #ffdede;
+    --color-red-300: #ffa0a0;
+    --color-red-400: #ff5c5c;
+    --color-red-500: #f02d2d;
+    --color-red-600: #d50b0b;
+    --color-red-700: #570303;
+    --color-red-800: #2a0303;
     --color-teal-100: #f7fdfd;
     --color-teal-200: #d7f4f6;
     --color-teal-300: #8edfe5;
@@ -136,71 +138,281 @@
     --color-teal-600: #006f93;
     --color-teal-700: #07465a;
     --color-teal-800: #04252f;
-    --color-avocado-100: #fdfef6;
-    --color-avocado-200: #f8fcde;
-    --color-avocado-300: #e9f5a0;
-    --color-avocado-400: #e3f13c;
-    --color-avocado-500: #c1d737;
-    --color-avocado-600: #68770d;
-    --color-avocado-700: #4e4e0c;
-    --color-avocado-800: #282306;
-    --color-ai-solid-green-strong: #4ee04b;
-    --color-ai-solid-green-subtle: #f1fdf1;
+    --color-violet-100: #f6f5fe;
+    --color-violet-200: #e2ddfd;
+    --color-violet-300: #ad9efa;
+    --color-violet-400: #836bff;
+    --color-violet-500: #583aee;
+    --color-violet-600: #3b1fc6;
+    --color-violet-700: #271a68;
+    --color-violet-800: #20092b;
+    --color-yellow-100: #fffcf5;
+    --color-yellow-200: #fff8d5;
+    --color-yellow-300: #ffe58a;
+    --color-yellow-400: #ffbd14;
+    --color-yellow-500: #eebb04;
+    --color-yellow-600: #855f00;
+    --color-yellow-700: #553b06;
+    --color-yellow-800: #312102;
+    --dimension-0: 0px;
+    --dimension-1000: 80px;
+    --dimension-100: 8px;
+    --dimension-150: 12px;
+    --dimension-200: 16px;
+    --dimension-250: 20px;
+    --dimension-25: 2px;
+    --dimension-300: 24px;
+    --dimension-400: 32px;
+    --dimension-500: 40px;
+    --dimension-50: 4px;
+    --dimension-600: 48px;
+    --dimension-75: 6px;
+    --dimension-800: 64px;
+    --dimension-action-height-large: 48px;
+    --dimension-action-height-medium: 40px;
+    --dimension-action-height-small: 32px;
+    --dimension-icon-extra-large: 64px;
+    --dimension-icon-extra-small: 12px;
+    --dimension-icon-large: 32px;
+    --dimension-icon-medium: 24px;
+    --dimension-icon-small: 16px;
+    --dimension-tap-target-minimum: 48px;
+    --expressive-theme-avocado-dark-background: #4e4e0c;
+    --expressive-theme-avocado-dark-foreground: #f8fcde;
+    --expressive-theme-avocado-light-background: #e3f13c;
+    --expressive-theme-avocado-light-foreground: #4e4e0c;
+    --expressive-theme-avocado-medium-background: #c1d737;
+    --expressive-theme-avocado-medium-foreground: #4e4e0c;
+    --expressive-theme-blue-dark-background: #002a69;
+    --expressive-theme-blue-dark-foreground: #d4e5fe;
+    --expressive-theme-blue-light-background: #4d93fc;
+    --expressive-theme-blue-light-foreground: #19133a;
+    --expressive-theme-blue-medium-background: #0968f6;
+    --expressive-theme-blue-medium-foreground: #f5f9ff;
+    --expressive-theme-coral-dark-background: #5e1d08;
+    --expressive-theme-coral-dark-foreground: #ffe1d7;
+    --expressive-theme-coral-light-background: #ff6a38;
+    --expressive-theme-coral-light-foreground: #2f0e04;
+    --expressive-theme-coral-medium-background: #f3511b;
+    --expressive-theme-coral-medium-foreground: #2f0e04;
+    --expressive-theme-dijon-dark-background: #524500;
+    --expressive-theme-dijon-dark-foreground: #fcf9de;
+    --expressive-theme-dijon-light-background: #f6e016;
+    --expressive-theme-dijon-light-foreground: #524500;
+    --expressive-theme-dijon-medium-background: #e8d20c;
+    --expressive-theme-dijon-medium-foreground: #524500;
+    --expressive-theme-green-dark-background: #345110;
+    --expressive-theme-green-dark-foreground: #f0fce1;
+    --expressive-theme-green-light-background: #aaed56;
+    --expressive-theme-green-light-foreground: #345110;
+    --expressive-theme-green-medium-background: #92c821;
+    --expressive-theme-green-medium-foreground: #345110;
+    --expressive-theme-indigo-dark-background: #003c66;
+    --expressive-theme-indigo-dark-foreground: #d3effe;
+    --expressive-theme-indigo-light-background: #0aa7ff;
+    --expressive-theme-indigo-light-foreground: #01193d;
+    --expressive-theme-indigo-medium-background: #0099f0;
+    --expressive-theme-indigo-medium-foreground: #01193d;
+    --expressive-theme-jade-dark-background: #055743;
+    --expressive-theme-jade-dark-foreground: #d8f8ee;
+    --expressive-theme-jade-light-background: #1ed49e;
+    --expressive-theme-jade-light-foreground: #002b20;
+    --expressive-theme-jade-medium-background: #17c28f;
+    --expressive-theme-jade-medium-foreground: #002b20;
+    --expressive-theme-kiwi-dark-background: #1b561a;
+    --expressive-theme-kiwi-dark-foreground: #e0fae0;
+    --expressive-theme-kiwi-light-background: #4ce160;
+    --expressive-theme-kiwi-light-foreground: #0c310d;
+    --expressive-theme-kiwi-medium-background: #3cc14e;
+    --expressive-theme-kiwi-medium-foreground: #0c310d;
+    --expressive-theme-lilac-dark-background: #3e135f;
+    --expressive-theme-lilac-dark-foreground: #efddfd;
+    --expressive-theme-lilac-light-background: #b56bf0;
+    --expressive-theme-lilac-light-foreground: #2f041e;
+    --expressive-theme-lilac-medium-background: #8935cb;
+    --expressive-theme-lilac-medium-foreground: #faf5fe;
+    --expressive-theme-live-dark-background: #3b1fc6;
+    --expressive-theme-live-dark-foreground: #f6f5fe;
+    --expressive-theme-live-light-background: #3b1fc6;
+    --expressive-theme-live-light-foreground: #f6f5fe;
+    --expressive-theme-live-medium-background: #3b1fc6;
+    --expressive-theme-live-medium-foreground: #f6f5fe;
+    --expressive-theme-marigold-dark-background: #562f01;
+    --expressive-theme-marigold-dark-foreground: #fff0d3;
+    --expressive-theme-marigold-light-background: #ffa800;
+    --expressive-theme-marigold-light-foreground: #562f01;
+    --expressive-theme-marigold-medium-background: #e99a02;
+    --expressive-theme-marigold-medium-foreground: #562f01;
+    --expressive-theme-neutral-dark-background: #191919;
+    --expressive-theme-neutral-dark-foreground: #ffffff;
+    --expressive-theme-neutral-light-background: #f7f7f7;
+    --expressive-theme-neutral-light-foreground: #191919;
+    --expressive-theme-neutral-medium-background: #f7f7f7;
+    --expressive-theme-neutral-medium-foreground: #191919;
+    --expressive-theme-orange-dark-background: #562501;
+    --expressive-theme-orange-dark-foreground: #ffead3;
+    --expressive-theme-orange-light-background: #ff8806;
+    --expressive-theme-orange-light-foreground: #562501;
+    --expressive-theme-orange-medium-background: #ec7303;
+    --expressive-theme-orange-medium-foreground: #2f1604;
+    --expressive-theme-pink-dark-background: #4b112d;
+    --expressive-theme-pink-dark-foreground: #fcdcec;
+    --expressive-theme-pink-light-background: #f155a0;
+    --expressive-theme-pink-light-foreground: #360606;
+    --expressive-theme-pink-medium-background: #de458e;
+    --expressive-theme-pink-medium-foreground: #360606;
+    --expressive-theme-red-dark-background: #570303;
+    --expressive-theme-red-dark-foreground: #ffdede;
+    --expressive-theme-red-light-background: #ff5c5c;
+    --expressive-theme-red-light-foreground: #570303;
+    --expressive-theme-red-medium-background: #f02d2d;
+    --expressive-theme-red-medium-foreground: #2a0303;
+    --expressive-theme-teal-dark-background: #07465a;
+    --expressive-theme-teal-dark-foreground: #d7f4f6;
+    --expressive-theme-teal-light-background: #44ccd5;
+    --expressive-theme-teal-light-foreground: #07465a;
+    --expressive-theme-teal-medium-background: #1bbfca;
+    --expressive-theme-teal-medium-foreground: #07465a;
+    --expressive-theme-violet-dark-background: #271a68;
+    --expressive-theme-violet-dark-foreground: #e2ddfd;
+    --expressive-theme-violet-light-background: #836bff;
+    --expressive-theme-violet-light-foreground: #20092b;
+    --expressive-theme-violet-medium-background: #583aee;
+    --expressive-theme-violet-medium-foreground: #e2ddfd;
+    --expressive-theme-yellow-dark-background: #553b06;
+    --expressive-theme-yellow-dark-foreground: #fff8d5;
+    --expressive-theme-yellow-light-background: #ffbd14;
+    --expressive-theme-yellow-light-foreground: #553b06;
+    --expressive-theme-yellow-medium-background: #eebb04;
+    --expressive-theme-yellow-medium-foreground: #553b06;
+    --font-family-market-sans: "Market Sans";
+    --font-letter-spacing-display-1: -0.92px;
+    --font-letter-spacing-display-2: -0.72px;
+    --font-letter-spacing-display-3: -0.6px;
+    --font-letter-spacing-none: 0px;
+    --font-letter-spacing-signal-1: 0.7px;
+    --font-letter-spacing-signal-2: 0.5px;
+    --font-line-height-150: 12px;
+    --font-line-height-200: 16px;
+    --font-line-height-250: 20px;
+    --font-line-height-300: 24px;
+    --font-line-height-350: 28px;
+    --font-line-height-400: 32px;
+    --font-line-height-500: 40px;
+    --font-line-height-575: 46px;
+    --font-line-height-600: 56px;
+    --font-paragraph-spacing-none: 0px;
+    --font-size-body: 0.875rem;
+    --font-size-giant-1: 1.875rem;
+    --font-size-giant-2: 2.25rem;
+    --font-size-giant-3: 2.875rem;
+    --font-size-large-1: 1.25rem;
+    --font-size-large-2: 1.5rem;
+    --font-size-medium: 1rem;
+    --font-size-small: 0.75rem;
+    --font-size-smallest: 0.625rem;
+    --font-text-case-none: none;
+    --font-text-case-uppercase: uppercase;
+    --font-text-decoration-none: none;
+    --font-text-decoration-underline: underline;
+    --font-weight-400: Regular;
+    --font-weight-600: Bold;
+    --motion-duration-instant: 17ms;
+    --motion-duration-long-1: 667ms;
+    --motion-duration-long-2: 833ms;
+    --motion-duration-long-3: 1000ms;
+    --motion-duration-medium-1: 250ms;
+    --motion-duration-medium-2: 333ms;
+    --motion-duration-medium-3: 500ms;
+    --motion-duration-short-1: 50ms;
+    --motion-duration-short-2: 83ms;
+    --motion-duration-short-3: 167ms;
+    --motion-easing-bounce: cubic-bezier(0.3, 0, 0, 1.25);
+    --motion-easing-continuous: cubic-bezier(0.3, 0, 0.7, 1);
+    --motion-easing-linear: cubic-bezier(0, 0, 1, 1);
+    --motion-easing-quick-enter: cubic-bezier(0, 0, 0, 1);
+    --motion-easing-quick-exit: cubic-bezier(1, 0, 1, 1);
+    --motion-easing-soft-enter: cubic-bezier(0, 0, 0.7, 1);
+    --motion-easing-soft-exit: cubic-bezier(0.3, 0, 1, 1);
+    --motion-easing-standard: cubic-bezier(0.3, 0, 0, 1);
+    --opacity-state-active: 0.12;
+    --opacity-state-focus: 0.04;
+    --opacity-state-hover: 0.04;
+    --opacity-state-press: 0.08;
+    --radius-extra-large: 24px;
+    --radius-form-input: 8px;
+    --radius-large: 16px;
+    --radius-medium: 8px;
+    --radius-none: 0px;
+    --radius-photo-large: 16px;
+    --radius-photo-small: 8px;
+    --radius-popover-container: 16px;
+    --radius-small: 4px;
+    --shadow-strong:
+        0px 5px 17px 0px rgba(0, 0, 0, 0.2), 0px 2px 7px 0px rgba(0, 0, 0, 0.15);
+    --shadow-subtle: 0px 4px 12px 0px rgba(0, 0, 0, 0.07);
+    --spacing-0: 0px;
+    --spacing-100: 8px;
+    --spacing-150: 12px;
+    --spacing-200: 16px;
+    --spacing-250: 20px;
+    --spacing-25: 2px;
+    --spacing-300: 24px;
+    --spacing-400: 32px;
+    --spacing-500: 40px;
+    --spacing-50: 4px;
+    --spacing-600: 48px;
+    --spacing-75: 6px;
+    --spacing-page-grid-gutter: 8px;
+    --spacing-page-grid-margin: 16px;
+    --typography-body-bold: Bold 0.875rem/20px "Market Sans";
+    --typography-body: Regular 0.875rem/20px "Market Sans";
+    --typography-caption-bold: Bold 0.75rem/16px "Market Sans";
+    --typography-caption: Regular 0.75rem/16px "Market Sans";
+    --typography-display-1: Bold 2.875rem/56px "Market Sans";
+    --typography-display-2: Bold 2.25rem/46px "Market Sans";
+    --typography-display-3: Bold 1.875rem/40px "Market Sans";
+    --typography-signal-1: Regular 0.875rem/20px "Market Sans";
+    --typography-signal-2: Bold 0.625rem/12px "Market Sans";
+    --typography-subtitle-1: Regular 1.25rem/28px "Market Sans";
+    --typography-subtitle-2: Regular 1rem/24px "Market Sans";
+    --typography-title-1: Bold 1.5rem/32px "Market Sans";
+    --typography-title-2: Bold 1.25rem/28px "Market Sans";
+    --typography-title-3: Bold 1rem/24px "Market Sans";
+    --border-radius-50: 8px;
+    --border-radius-100: 16px;
+    --border-radius-150: 24px;
+    --color-neutral-100-rgb: 255, 255, 255;
+    --color-neutral-200-rgb: 247, 247, 247;
+    --color-neutral-800-rgb: 25, 25, 25;
+    --color-neutral-900-rgb: 0, 0, 0;
     --color-ai-solid-green-subtle-dark: #112611;
-    --color-ai-solid-blue-strong: #0968f6;
-    --color-ai-solid-blue-subtle: #f0f6fe;
     --color-ai-solid-blue-subtle-dark: #112c31;
-    --color-ai-solid-purple-strong: #993ee0;
-    --color-ai-solid-purple-subtle: #f9f3fd;
     --color-ai-solid-purple-subtle-dark: #20172f;
-    --color-ai-solid-red-strong: #ff4242;
-    --color-ai-solid-red-subtle: #fff4f4;
     --color-ai-solid-red-subtle-dark: #321919;
-    --color-ai-solid-yellow-strong: #ffd80e;
     --opacity-50: 0.04;
     --opacity-100: 0.08;
     --opacity-150: 0.12;
     --opacity-200: 0.16;
-    --font-size-10: 0.625rem;
-    --font-size-12: 0.75rem;
-    --font-size-14: 0.875rem;
-    --font-size-16: 1rem;
+    --font-size-10: var(--font-size-smallest);
+    --font-size-12: var(--font-size-small);
+    --font-size-14: var(--font-size-body);
+    --font-size-16: var(--font-size-medium);
     --font-size-18: 1.125rem;
-    --font-size-20: 1.25rem;
-    --font-size-24: 1.5rem;
-    --font-size-30: 1.875rem;
-    --font-size-36: 2.25rem;
-    --font-size-46: 2.875rem;
+    --font-size-20: var(--font-size-large-1);
+    --font-size-24: var(--font-size-large-2);
+    --font-size-30: var(--font-size-giant-1);
+    --font-size-36: var(--font-size-giant-2);
+    --font-size-46: var(--font-size-giant-3);
     --font-size-64: 4rem;
-    --font-size-smallest: var(--font-size-10);
-    --font-size-small: var(--font-size-12);
-    --font-size-default: var(--font-size-14);
-    --font-size-medium: var(--font-size-16);
-    --font-size-large-1: var(--font-size-20);
-    --font-size-large-2: var(--font-size-24);
-    --font-size-giant-1: var(--font-size-30);
-    --font-size-giant-2: var(--font-size-36);
-    --font-size-giant-3: var(--font-size-46);
+    --font-size-default: var(--font-size-body);
     --font-size-giant-4: var(--font-size-64);
-    /*
-    Ratio of 20px (base line height) / 14px (body font)
-    This needs to be unitless for optimal scaling
-    */
-    --font-line-height-250: 1.4286;
-    --font-weight-regular: 500;
-    --font-weight-bold: 700;
-    --spacing-25: 2px;
-    --spacing-50: 4px;
-    --spacing-75: 6px;
-    --spacing-100: 8px;
+    --font-weight-regular: var(--font-weight-400);
+    --font-weight-bold: var(--font-weight-600);
     --spacing-125: 10px;
-    --spacing-150: 12px;
-    --spacing-200: 16px;
-    --spacing-250: 20px;
-    --spacing-300: 24px;
-    --spacing-400: 32px;
     --spacing-450: 36px;
-    --spacing-600: 48px;
     --spacing-700: 56px;
     --spacing-800: 64px;
+    --color-media-disabled-filter: grayscale(1) opacity(0.25);
+    --font-line-height-default: 1.4286;
 }

package/dist/tokens/evo-dark-class.css

@@ -0,0 +1,127 @@
+@media (prefers-color-scheme: dark) {
+    .evo-theme {
+        --color-ai-solid-blue-strong: #0968f6;
+        --color-ai-solid-blue-subtle: #112c31;
+        --color-ai-solid-green-strong: #4ee04b;
+        --color-ai-solid-green-subtle: #112611;
+        --color-ai-solid-purple-strong: #993ee0;
+        --color-ai-solid-purple-subtle: #20172f;
+        --color-ai-solid-red-strong: #ff4242;
+        --color-ai-solid-red-subtle: #321919;
+        --color-ai-solid-yellow-strong: #ffd80e;
+        --color-background-accent: var(--color-blue-400);
+        --color-background-attention: var(--color-red-400);
+        --color-background-disabled: var(--color-neutral-600);
+        --color-background-education: var(--color-indigo-800);
+        --color-background-elevated: var(--color-neutral-800);
+        --color-background-inverse: var(--color-neutral-300);
+        --color-background-on-image: rgba(0, 0, 0, 0.9);
+        --color-background-on-secondary: var(--color-neutral-900);
+        --color-background-primary: var(--color-neutral-900);
+        --color-background-secondary-on-elevated: var(--color-neutral-900);
+        --color-background-secondary: var(--color-neutral-800);
+        --color-background-strong: var(--color-neutral-200);
+        --color-background-success: var(--color-kiwi-500);
+        --color-background-tertiary: var(--color-neutral-700);
+        --color-background-transparent: var(--color-clear);
+        --color-border-accent: var(--color-blue-400);
+        --color-border-attention: var(--color-red-400);
+        --color-border-disabled: var(--color-neutral-700);
+        --color-border-medium: var(--color-neutral-600);
+        --color-border-on-accent: var(--color-neutral-800);
+        --color-border-on-attention: var(--color-neutral-800);
+        --color-border-on-disabled: var(--color-neutral-800);
+        --color-border-on-inverse: var(--color-neutral-800);
+        --color-border-on-success: var(--color-neutral-800);
+        --color-border-strong: var(--color-neutral-100);
+        --color-border-subtle: var(--color-neutral-700);
+        --color-border-success: var(--color-kiwi-500);
+        --color-brand-1: var(--color-red-500);
+        --color-brand-2: var(--color-blue-500);
+        --color-brand-3: var(--color-yellow-400);
+        --color-brand-4: var(--color-green-500);
+        --color-foreground-accent: var(--color-blue-400);
+        --color-foreground-attention: var(--color-red-400);
+        --color-foreground-disabled: var(--color-neutral-600);
+        --color-foreground-link-legal: var(--color-blue-400);
+        --color-foreground-link-primary: var(--color-foreground-primary);
+        --color-foreground-link-visited: var(--color-pink-400);
+        --color-foreground-on-accent: var(--color-neutral-800);
+        --color-foreground-on-attention: var(--color-neutral-800);
+        --color-foreground-on-disabled: var(--color-neutral-800);
+        --color-foreground-on-inverse: var(--color-neutral-800);
+        --color-foreground-on-strong: var(--color-neutral-800);
+        --color-foreground-on-success: var(--color-neutral-800);
+        --color-foreground-primary: var(--color-neutral-200);
+        --color-foreground-secondary: var(--color-neutral-500);
+        --color-foreground-success: var(--color-kiwi-400);
+        --color-gradient-ai-blue-strong: linear-gradient(
+            var(--color-ai-solid-purple-strong),
+            var(--color-ai-solid-blue-strong) 50%,
+            var(--color-ai-solid-green-strong) 100%
+        );
+        --color-gradient-ai-blue-subtle: linear-gradient(
+            var(--color-ai-solid-purple-subtle),
+            var(--color-ai-solid-blue-subtle) 50%,
+            var(--color-ai-solid-green-subtle) 100%
+        );
+        --color-gradient-ai-full-color-diagonal: linear-gradient(
+            var(--color-ai-solid-green-strong) 10%,
+            var(--color-ai-solid-blue-strong) 27%,
+            var(--color-ai-solid-purple-strong) 42%,
+            var(--color-ai-solid-red-strong) 56%,
+            var(--color-ai-solid-yellow-strong) 78%
+        );
+        --color-gradient-ai-green-strong: linear-gradient(
+            var(--color-ai-solid-blue-strong),
+            var(--color-ai-solid-green-strong) 100%
+        );
+        --color-gradient-ai-green-subtle: linear-gradient(
+            var(--color-ai-solid-blue-subtle),
+            var(--color-ai-solid-green-subtle) 100%
+        );
+        --color-gradient-ai-purple-strong: linear-gradient(
+            var(--color-ai-solid-red-strong),
+            var(--color-ai-solid-purple-strong) 100%
+        );
+        --color-gradient-ai-purple-subtle: linear-gradient(
+            var(--color-ai-solid-red-subtle),
+            var(--color-ai-solid-purple-subtle) 100%
+        );
+        --color-gradient-image-scrim: linear-gradient(
+            rgba(248, 248, 248, 0) 52%,
+            rgba(248, 248, 248, 0.03)
+        );
+        --color-gradient-loading-shimmer-on-secondary: linear-gradient(
+            rgba(35, 35, 35, 0),
+            rgba(35, 35, 35, 0.6) 25%,
+            rgba(35, 35, 35, 0.85) 37%,
+            rgba(35, 35, 35, 0.95) 48%,
+            rgba(35, 35, 35, 0.95) 51%,
+            rgba(35, 35, 35, 0.85) 61%,
+            rgba(35, 35, 35, 0.6) 74%,
+            rgba(35, 35, 35, 0)
+        );
+        --color-gradient-loading-shimmer: linear-gradient(
+            rgba(27, 27, 27, 0),
+            rgba(27, 27, 27, 0.6) 25%,
+            rgba(27, 27, 27, 0.85) 37%,
+            rgba(27, 27, 27, 0.95) 48%,
+            rgba(27, 27, 27, 0.95) 51%,
+            rgba(27, 27, 27, 0.85) 61%,
+            rgba(27, 27, 27, 0.6) 74%,
+            rgba(27, 27, 27, 0)
+        );
+        --color-loading-fill-on-secondary: #353535;
+        --color-loading-fill: #2d2d2d;
+        --color-scrim-background: rgba(0, 0, 0, 0.64);
+        --color-state-layer-focus-on-strong: rgba(0, 0, 0, 0.08);
+        --color-state-layer-focus: rgba(255, 255, 255, 0.08);
+        --color-state-layer-hover-on-strong: rgba(0, 0, 0, 0.08);
+        --color-state-layer-hover: rgba(255, 255, 255, 0.08);
+        --color-state-layer-pressed-on-strong: rgba(0, 0, 0, 0.12);
+        --color-state-layer-pressed: rgba(255, 255, 255, 0.12);
+        --color-state-layer-selected-on-strong: rgba(0, 0, 0, 0.16);
+        --color-state-layer-selected: rgba(255, 255, 255, 0.16);
+    }
+}