@xplortech/apollo-core 2.10.0 → 2.12.0

package/build/variables/apollo.css

@@ -0,0 +1,779 @@
+/* Apollo brand variables — light mode :root plus .dark overrides.
+   Proxy to @xplortech/apollo-foundation so the two-file CSS pattern stays
+   stable even if the Foundation import path changes. */
+:root {
+  --xpl-color-brand-primary-deepspace: #220021; /** Primary Xplor brand deep purple */
+  --xpl-color-brand-secondary-sunray: #ECFD91; /** Secondary Xplor yellow typically used for highlights and infographics */
+  --xpl-color-neutral-0: #FFFFFF; /** Pure white, base neutral color */
+  --xpl-color-neutral-50: #F8F9FA; /** Base neutral color */
+  --xpl-color-neutral-100: #F3F4F6; /** Base neutral color */
+  --xpl-color-neutral-200: #EEEFF3; /** Base neutral color */
+  --xpl-color-neutral-300: #EAEBEF; /** Base neutral color */
+  --xpl-color-neutral-400: #E1E2E8; /** Base neutral color */
+  --xpl-color-neutral-500: #999BA8; /** Base neutral color */
+  --xpl-color-neutral-600: #6A6D7D; /** Base neutral color */
+  --xpl-color-neutral-700: #3C3847; /** Base neutral color */
+  --xpl-color-neutral-800: #363240; /** Base neutral color */
+  --xpl-color-neutral-900: #302D3B; /** Base neutral color */
+  --xpl-color-neutral-1000: #292632; /** Base neutral color */
+  --xpl-color-neutral-1100: #201E29; /** Base neutral color */
+  --xpl-color-neutral-1200: #18161F; /** Base neutral color */
+  --xpl-color-gray-0: #FFFFFF;
+  --xpl-color-gray-50: #F8F9FA;
+  --xpl-color-gray-100: #F3F4F6;
+  --xpl-color-gray-200: #EEEFF3;
+  --xpl-color-gray-300: #EAEBEF;
+  --xpl-color-gray-400: #E1E2E8;
+  --xpl-color-gray-500: #999BA8;
+  --xpl-color-gray-600: #6A6D7D;
+  --xpl-color-gray-700: #3C3847;
+  --xpl-color-gray-800: #363240;
+  --xpl-color-gray-900: #302D3B;
+  --xpl-color-gray-1000: #292632;
+  --xpl-color-gray-1100: #201E29;
+  --xpl-color-gray-1200: #18161F;
+  --xpl-color-purple-50: #F4F2FF; /** Base purple color */
+  --xpl-color-purple-100: #EBE5FF; /** Base purple color */
+  --xpl-color-purple-200: #DDD1FF; /** Base purple color */
+  --xpl-color-purple-300: #C3ADFF; /** Base purple color */
+  --xpl-color-purple-400: #A480FF; /** Base purple color */
+  --xpl-color-purple-500: #8857FA; /** Base purple color */
+  --xpl-color-purple-600: #793EF7; /** Base purple color */
+  --xpl-color-purple-700: #6923F4; /** Base purple color */
+  --xpl-color-purple-800: #4D1AB2; /** Base purple color */
+  --xpl-color-purple-900: #330D80; /** Base purple color */
+  --xpl-color-orange-50: #FEF7F3; /** Base orange color */
+  --xpl-color-orange-100: #FEEDE4; /** Base orange color */
+  --xpl-color-orange-200: #FFDCCC; /** Base orange color */
+  --xpl-color-orange-300: #FFBDA8; /** Base orange color */
+  --xpl-color-orange-400: #F99170; /** Base orange color */
+  --xpl-color-orange-500: #F76D43; /** Base orange color */
+  --xpl-color-orange-600: #F44E27; /** Base orange color */
+  --xpl-color-orange-700: #CC4121; /** Base orange color */
+  --xpl-color-orange-800: #A6361A; /** Base orange color */
+  --xpl-color-orange-900: #7A2714; /** Base orange color */
+  --xpl-color-blue-50: #E8FCFF; /** Base blue color */
+  --xpl-color-blue-100: #D1F9FF; /** Base blue color */
+  --xpl-color-blue-200: #BAF6FF; /** Base blue color */
+  --xpl-color-blue-300: #9FDAF5; /** Base blue color */
+  --xpl-color-blue-400: #85BFEB; /** Base blue color */
+  --xpl-color-blue-500: #6AA3E0; /** Base blue color */
+  --xpl-color-blue-600: #5088D6; /** Base blue color */
+  --xpl-color-blue-700: #356CCC; /** Base blue color */
+  --xpl-color-blue-800: #2253B3; /** Base blue color */
+  --xpl-color-blue-900: #0F3999; /** Base blue color */
+  --xpl-color-green-50: #EBFFF8; /** Base green color */
+  --xpl-color-green-100: #C4FFED; /** Base green color */
+  --xpl-color-green-200: #74FBD0; /** Base green color */
+  --xpl-color-green-300: #52EBBA; /** Base green color */
+  --xpl-color-green-400: #4AD4A8; /** Base green color */
+  --xpl-color-green-500: #37B88F; /** Base green color */
+  --xpl-color-green-600: #2E9977; /** Base green color */
+  --xpl-color-green-700: #24785D; /** Base green color */
+  --xpl-color-green-800: #1D614B; /** Base green color */
+  --xpl-color-green-900: #154737; /** Base green color */
+  --xpl-color-yellow-50: #FFF8E6; /** Base yellow color */
+  --xpl-color-yellow-100: #FFEDBA; /** Base yellow color */
+  --xpl-color-yellow-200: #FFE18F; /** Base yellow color */
+  --xpl-color-yellow-300: #FFD563; /** Base yellow color */
+  --xpl-color-yellow-400: #FFC937; /** Base yellow color */
+  --xpl-color-yellow-500: #FFBE0B; /** Base yellow color */
+  --xpl-color-yellow-600: #D69D00; /** Base yellow color */
+  --xpl-color-yellow-700: #AD7F00; /** Base yellow color */
+  --xpl-color-yellow-800: #856100; /** Base yellow color */
+  --xpl-color-yellow-900: #5C4300; /** Base yellow color */
+  --xpl-color-pink-50: #FFF0FE; /** Base pink color */
+  --xpl-color-pink-100: #FFD9FB; /** Base pink color */
+  --xpl-color-pink-200: #FFB8F9; /** Base pink color */
+  --xpl-color-pink-300: #FF8DF4; /** Base pink color */
+  --xpl-color-pink-400: #F26DDC; /** Base pink color */
+  --xpl-color-pink-500: #E550C8; /** Base pink color */
+  --xpl-color-pink-600: #CC3399; /** Base pink color */
+  --xpl-color-pink-700: #BF1D7B; /** Base pink color */
+  --xpl-color-pink-800: #990F54; /** Base pink color */
+  --xpl-color-pink-900: #730B3F; /** Base pink color */
+  --xpl-color-red-50: #FEF7F3; /** Base red color */
+  --xpl-color-red-100: #FED9D5; /** Base red color */
+  --xpl-color-red-200: #FEC5BE; /** Base red color */
+  --xpl-color-red-300: #FF9387; /** Base red color */
+  --xpl-color-red-400: #F87263; /** Base red color */
+  --xpl-color-red-500: #F24F3D; /** Base red color */
+  --xpl-color-red-600: #DB321F; /** Base red color */
+  --xpl-color-red-700: #C2210F; /** Base red color */
+  --xpl-color-red-800: #961305; /** Base red color */
+  --xpl-color-red-900: #731409; /** Base red color */
+  --xpl-color-transparent-0: rgba(255, 255, 255, 0); /** Clear transparent color */
+  --xpl-color-transparent-light-5: rgba(255, 255, 255, 0.05); /** Light transparent color @ 5% opacity. */
+  --xpl-color-transparent-light-10: rgba(255, 255, 255, 0.1); /** Light transparent color @ 10% opacity. */
+  --xpl-color-transparent-light-25: rgba(255, 255, 255, 0.25); /** Light transparent color @ 25% opacity. */
+  --xpl-color-transparent-light-50: rgba(255, 255, 255, 0.5); /** Light transparent color @ 50% opacity. */
+  --xpl-color-transparent-light-75: rgba(255, 255, 255, 0.75); /** Light transparent color @ 75% opacity. */
+  --xpl-color-transparent-neutral-5: rgba(48, 45, 59, 0.05); /** Neutral transparent color @ 5% opacity */
+  --xpl-color-transparent-neutral-10: rgba(48, 45, 59, 0.1); /** Neutral transparent color @ 10% opacity */
+  --xpl-color-transparent-neutral-25: rgba(48, 45, 59, 0.25); /** Neutral transparent color @ 25% opacity */
+  --xpl-color-transparent-neutral-50: rgba(48, 45, 59, 0.5); /** Neutral transparent color @ 50% opacity */
+  --xpl-color-transparent-neutral-75: rgba(48, 45, 59, 0.75); /** Neutral transparent color @ 75% opacity */
+  --xpl-color-teal-50: #EAFBFF; /** Base teal color */
+  --xpl-color-teal-100: #BCF1FF; /** Base teal color */
+  --xpl-color-teal-200: #8EE8FF; /** Base teal color */
+  --xpl-color-teal-300: #60DEFF; /** Base teal color */
+  --xpl-color-teal-400: #31CFF8; /** Base teal color */
+  --xpl-color-teal-500: #1DB0D6; /** Base teal color */
+  --xpl-color-teal-600: #0D92B4; /** Base teal color */
+  --xpl-color-teal-700: #017492; /** Base teal color */
+  --xpl-color-teal-800: #005970; /** Base teal color */
+  --xpl-color-teal-900: #003E4E; /** Base teal color */
+  --xpl-font-family-default: apple-system, system-ui, 'Segoe UI', Arial, Helvetica, Roboto, sans-serif;
+  --xpl-font-weight-normal: 400; /** Bold type, used in Title typography styles */
+  --xpl-font-weight-medium: 500; /** Semibold type, used in Display typography styles */
+  --xpl-font-weight-semibold: 600; /** Medium type, used in Caption typography styles */
+  --xpl-font-weight-bold: 700; /** Default type weight, used in body and caption typography styles */
+  --xpl-size-0: 0; /** 0px/0rem */
+  --xpl-size-100: 1rem; /** 16px/1rem (base value) */
+  --xpl-size-125: 1.25rem; /** 20px/1.25rem */
+  --xpl-size-150: 1.5rem; /** 24px/1.5rem */
+  --xpl-size-175: 1.75rem; /** 28px/1.75rem */
+  --xpl-size-200: 2rem; /** 32px/2rem */
+  --xpl-size-225: 2.25rem; /** 36px/2.25rem */
+  --xpl-size-250: 2.5rem; /** 40px/2.5rem */
+  --xpl-size-300: 3rem; /** 48px/3rem */
+  --xpl-size-350: 3.5rem; /** 56px/3.5rem */
+  --xpl-size-400: 4rem; /** 64px/4rem */
+  --xpl-size-450: 4.5rem; /** 72px/4.5rem */
+  --xpl-size-500: 5rem; /** 80px/5rem */
+  --xpl-size-600: 6rem; /** 96px/6rem */
+  --xpl-size-700: 7rem; /** 112px/7rem */
+  --xpl-size-800: 8rem; /** 128px/8rem */
+  --xpl-size-900: 9rem; /** 144px/9rem */
+  --xpl-size-1125: 1.125rem; /** 18px/1.125 (base value) */
+  --xpl-size-0125: 0.125rem; /** 2px/0.125rem */
+  --xpl-size-025: 0.25rem; /** 4px/0.25rem */
+  --xpl-size-0375: 0.375rem; /** 6px/0.375rem */
+  --xpl-size-050: 0.5rem; /** 8px/0.5rem */
+  --xpl-size-0625: 0.625rem; /** 10px/0.625rem */
+  --xpl-size-075: 0.75rem; /** 12px/0.75rem */
+  --xpl-size-0875: 0.875rem; /** 14px/0.875rem */
+  --xpl-size-radius-none: 0;
+  --xpl-size-radius-small: 0.125rem;
+  --xpl-size-radius-default: 0.5rem;
+  --xpl-size-radius-large: 1rem;
+  --xpl-size-radius-full: 62.4375rem;
+  --xpl-size-spacing-0: 0; /** 0px/0rem */
+  --xpl-size-spacing-2: 0.125rem; /** 2px/0.125rem */
+  --xpl-size-spacing-4: 0.25rem; /** 4px/0.25rem */
+  --xpl-size-spacing-6: 0.375rem; /** 6px/0.375rem */
+  --xpl-size-spacing-8: 0.5rem; /** 8px/0.5rem */
+  --xpl-size-spacing-10: 0.625rem; /** 10px/0.625rem */
+  --xpl-size-spacing-12: 0.75rem; /** 12px/0.75rem */
+  --xpl-size-spacing-14: 0.875rem; /** 14px/0.875rem */
+  --xpl-size-spacing-16: 1rem; /** 16px/1rem (base value) */
+  --xpl-size-spacing-20: 1.25rem; /** 20px/1.25rem */
+  --xpl-size-spacing-24: 1.5rem; /** 24px/1.5rem */
+  --xpl-size-spacing-28: 1.75rem; /** 28px/1.75rem */
+  --xpl-size-spacing-32: 2rem; /** 32px/2rem */
+  --xpl-size-spacing-36: 2.25rem; /** 36px/2.25rem */
+  --xpl-size-spacing-40: 2.5rem; /** 40px/2.5rem */
+  --xpl-size-spacing-48: 3rem; /** 48px/3rem */
+  --xpl-size-spacing-56: 3.5rem; /** 56px/3.5rem */
+  --xpl-size-spacing-64: 4rem; /** 64px/4rem */
+  --xpl-size-spacing-72: 4.5rem; /** 72px/4.5rem */
+  --xpl-size-spacing-80: 5rem; /** 80px/5rem */
+  --xpl-size-spacing-96: 6rem; /** 96px/6rem */
+  --xpl-size-spacing-112: 7rem; /** 112px/7rem */
+  --xpl-size-spacing-128: 8rem; /** 128px/8rem */
+  --xpl-size-spacing-144: 9rem; /** 144px/9rem */
+  --xpl-border-small: 0.0625rem;
+  --xpl-border-radius-full: 624.9375rem;
+  --xpl-space-0: 0; /** 0px/0rem */
+  --xpl-space-2: 0.125rem; /** 2px/0.125rem */
+  --xpl-space-4: 0.25rem; /** 4px/0.25rem */
+  --xpl-space-6: 0.375rem; /** 6px/0.375rem */
+  --xpl-space-8: 0.5rem; /** 8px/0.5rem */
+  --xpl-space-10: 0.625rem; /** 10px/0.625rem */
+  --xpl-space-12: 0.75rem; /** 12px/0.75rem */
+  --xpl-space-16: 1rem; /** 16px/1rem */
+  --xpl-space-24: 1.5rem; /** 24px/1.5rem */
+  --xpl-space-32: 2rem; /** 32px/2rem */
+  --xpl-space-40: 2.5rem; /** 40px/2.5rem */
+  --xpl-space-48: 3rem; /** 48px/3rem */
+  --xpl-space-56: 3.5rem; /** 56px/3.5rem */
+  --xpl-space-64: 4rem; /** 64px/4rem */
+  --xpl-space-72: 4.5rem; /** 72px/4.5rem */
+  --xpl-space-80: 5rem; /** 80px/5rem */
+  --xpl-space-112: 7rem; /** 112px/7rem */
+  --xpl-space-144: 9rem; /** 144px/8.75rem */
+  --xpl-z-index-100: 100;
+  --xpl-z-index-200: 200;
+  --xpl-z-index-300: 300;
+  --xpl-z-index-400: 400;
+  --xpl-z-index-500: 500;
+  --xpl-z-index-600: 600;
+  --xpl-z-index-700: 700;
+  --xpl-z-index-800: 800;
+  --xpl-z-index-900: 900;
+  --xpl-color-positive-lm: var(--xpl-color-green-500);
+  --xpl-color-positive-dm: var(--xpl-color-green-300);
+  --xpl-color-positive-bg-lm: var(--xpl-color-green-100);
+  --xpl-color-positive-bg-dm: var(--xpl-color-transparent-0);
+  --xpl-color-negative-lm: var(--xpl-color-red-600);
+  --xpl-color-negative-dm: var(--xpl-color-red-300);
+  --xpl-color-negative-bg-lm: var(--xpl-color-red-100);
+  --xpl-color-negative-bg-dm: var(--xpl-color-transparent-0);
+  --xpl-color-highlight-lm: var(--xpl-color-yellow-500);
+  --xpl-color-highlight-dm: var(--xpl-color-yellow-200);
+  --xpl-color-highlight-bg-lm: var(--xpl-color-yellow-200);
+  --xpl-color-highlight-bg-dm: var(--xpl-color-transparent-0);
+  --xpl-color-information-bg-dm: var(--xpl-color-transparent-0);
+  --xpl-color-trivial-lm: var(--xpl-color-gray-600);
+  --xpl-color-trivial-dm: var(--xpl-color-gray-500);
+  --xpl-color-trivial-bg-lm: var(--xpl-color-gray-400);
+  --xpl-color-trivial-bg-dm: var(--xpl-color-transparent-0);
+  --xpl-color-action-primary-lm: var(--xpl-color-purple-700);
+  --xpl-color-action-primary-dm: var(--xpl-color-purple-300);
+  --xpl-color-action-primary-hover-lm: var(--xpl-color-purple-800);
+  --xpl-color-action-primary-hover-dm: var(--xpl-color-purple-400);
+  --xpl-color-action-disabled-lm: var(--xpl-color-gray-100);
+  --xpl-color-action-disabled-dm: var(--xpl-color-gray-800);
+  --xpl-color-action-warning-lm: var(--xpl-color-red-700);
+  --xpl-color-action-warning-dm: var(--xpl-color-red-300);
+  --xpl-color-action-warning-hover-lm: var(--xpl-color-red-800);
+  --xpl-color-action-warning-hover-dm: var(--xpl-color-red-400);
+  --xpl-color-accent-green: var(--xpl-color-green-200);
+  --xpl-color-accent-yellow: var(--xpl-color-yellow-200);
+  --xpl-color-accent-pink: var(--xpl-color-pink-300);
+  --xpl-color-accent-purple: var(--xpl-color-purple-300);
+  --xpl-color-accent-blue-lm: var(--xpl-color-blue-500);
+  --xpl-color-accent-blue-dm: var(--xpl-color-blue-200);
+  --xpl-color-brand-primary-xplorange: var(--xpl-color-orange-600); /** Primary Xplor brand orange */
+  --xpl-color-brand-primary-starwhite: var(--xpl-color-orange-50); /** Used for brand colored surfaces */
+  --xpl-color-brand-secondary-supernova: var(--xpl-color-green-200); /** Secondary Xplor green typically used for highlights and infographics */
+  --xpl-color-brand-secondary-neptune: var(--xpl-color-purple-600); /** Secondary Xplor purple typically used for UI elements and active states, highlights and infographics */
+  --xpl-color-brand-secondary-pinkplanet: var(--xpl-color-pink-300); /** Secondary Xplor pink typically used for highlights and infographics */
+  --xpl-color-brand-secondary-skyblue: var(--xpl-color-blue-200); /** Secondary Xplor blue typically used for highlights and infographics */
+  --xpl-color-foreground-lm: var(--xpl-color-neutral-0);
+  --xpl-color-foreground-dm: var(--xpl-color-neutral-1000);
+  --xpl-color-background-lm: var(--xpl-color-neutral-50);
+  --xpl-color-background-dm: var(--xpl-color-neutral-1200);
+  --xpl-color-background-2-lm: var(--xpl-color-neutral-100);
+  --xpl-color-background-2-dm: var(--xpl-color-neutral-1100);
+  --xpl-color-navigation-lm: var(--xpl-color-neutral-1000);
+  --xpl-color-navigation-dm: var(--xpl-color-neutral-1000);
+  --xpl-color-stroke-lm: var(--xpl-color-neutral-400);
+  --xpl-color-stroke-dm: var(--xpl-color-neutral-600);
+  --xpl-color-primary-lm: var(--xpl-color-orange-600); /** themable */
+  --xpl-color-primary-dm: var(--xpl-color-orange-400); /** themable */
+  --xpl-color-primary-bg-lm: var(--xpl-color-orange-50); /** themable */
+  --xpl-color-primary-bg-dm: var(--xpl-color-neutral-900); /** themable */
+  --xpl-color-secondary-lm: var(--xpl-color-purple-700); /** themable */
+  --xpl-color-secondary-dm: var(--xpl-color-purple-300); /** themable */
+  --xpl-color-secondary-hover-lm: var(--xpl-color-purple-800); /** themable */
+  --xpl-color-secondary-hover-dm: var(--xpl-color-purple-400); /** themable */
+  --xpl-color-secondary-bg-lm: var(--xpl-color-purple-50); /** themable */
+  --xpl-color-secondary-bg-dm: var(--xpl-color-neutral-900); /** themable */
+  --xpl-color-text-primary-lm: var(--xpl-color-gray-900);
+  --xpl-color-text-primary-dm: var(--xpl-color-gray-0);
+  --xpl-color-text-secondary-lm: var(--xpl-color-gray-600);
+  --xpl-color-text-secondary-dm: var(--xpl-color-gray-500);
+  --xpl-color-text-reverse-lm: var(--xpl-color-gray-0);
+  --xpl-color-text-reverse-dm: var(--xpl-color-gray-1000);
+  --xpl-color-text-warning-lm: var(--xpl-color-red-700);
+  --xpl-color-text-warning-dm: var(--xpl-color-red-300);
+  --xpl-font-weight-label-default: var(--xpl-font-weight-medium); /** Default weight labels, typically on forms */
+  --xpl-font-weight-label-strong: var(--xpl-font-weight-bold); /** Bold weight labels, typically on forms */
+  --xpl-font-size-display-1: var(--xpl-size-350); /** Title size typography */
+  --xpl-font-size-display-2: var(--xpl-size-300); /** Title size typography */
+  --xpl-font-size-display-3: var(--xpl-size-250); /** Title size typography */
+  --xpl-font-size-title-1: var(--xpl-size-200); /** Title size typography */
+  --xpl-font-size-title-2: var(--xpl-size-150); /** Title size typography */
+  --xpl-font-size-title-3: var(--xpl-size-125); /** Title size typography */
+  --xpl-font-size-title-4: var(--xpl-size-100); /** Title size typography */
+  --xpl-font-size-title-5: var(--xpl-size-0875); /** Smallest Title size typography */
+  --xpl-font-size-body: var(--xpl-size-0875); /** Default body size typography */
+  --xpl-font-size-callout: var(--xpl-size-075); /** Callout size typography */
+  --xpl-font-size-caption: var(--xpl-size-0625); /** Caption size typography */
+  --xpl-size-font-title-1: var(--xpl-size-175);
+  --xpl-size-font-title-2: var(--xpl-size-150);
+  --xpl-size-font-title-3: var(--xpl-size-125);
+  --xpl-size-font-title-4: var(--xpl-size-100);
+  --xpl-size-font-title-5: var(--xpl-size-0875);
+  --xpl-size-font-body: var(--xpl-size-0875);
+  --xpl-size-font-callout: var(--xpl-size-075);
+  --xpl-size-font-caption: var(--xpl-size-0625);
+  --xpl-size-radius-button: var(--xpl-size-radius-full); /** themable */
+  --xpl-border-none: var(--xpl-size-0);
+  --xpl-border-large: var(--xpl-size-0125);
+  --xpl-border-radius-none: var(--xpl-size-0);
+  --xpl-border-radius-small: var(--xpl-size-025);
+  --xpl-border-radius-default: var(--xpl-size-050);
+  --xpl-border-radius-large: var(--xpl-size-100);
+  --xpl-border-radius-button: var(--xpl-border-radius-full);
+  --xpl-border-default: var(--xpl-color-neutral-400); /** Default border color */
+  --xpl-border-strong: var(--xpl-color-neutral-600); /** Use for strong weight borders */
+  --xpl-border-subtle: var(--xpl-color-neutral-200); /** Use for subtle weight borders */
+  --xpl-border-inverse: var(--xpl-color-neutral-0); /** Use for inverse borders (light on dark/dark on light) */
+  --xpl-border-hover: var(--xpl-color-purple-700); /** Use for borders in a hover state */
+  --xpl-border-active: var(--xpl-color-purple-700); /** Use for borders in an active state */
+  --xpl-border-focus: var(--xpl-color-purple-800); /** Use for borders in a focus state */
+  --xpl-border-negative: var(--xpl-color-red-700); /** Use for negative sentiment borders */
+  --xpl-border-positive: var(--xpl-color-green-700); /** Use for positive sentiment borders */
+  --xpl-border-accent-default: var(--xpl-color-purple-700); /** Default color accented borders */
+  --xpl-border-accent-brand: var(--xpl-color-orange-600); /** Brand color accented borders */
+  --xpl-border-accent-information: var(--xpl-color-purple-700); /** Informational accented borders */
+  --xpl-border-accent-highlight: var(--xpl-color-yellow-200); /** Highlight accented borders */
+  --xpl-border-accent-warning: var(--xpl-color-yellow-500); /** Highlight accented borders */
+  --xpl-border-accent-subtle: var(--xpl-color-neutral-500); /** Subtle accented borders */
+  --xpl-border-accent-alternative: var(--xpl-color-blue-100); /** Alternative accented borders */
+  --xpl-background-surface-default: var(--xpl-color-neutral-0); /** The default surface for pages and containers */
+  --xpl-background-surface-subtlest: var(--xpl-color-neutral-50); /** Use for the subtlest surfaces */
+  --xpl-background-surface-subtle: var(--xpl-color-neutral-100); /** Use for subtle surfaces */
+  --xpl-background-surface-bold: var(--xpl-color-neutral-1000); /** Use for bold dark surfaces */
+  --xpl-background-surface-backdrop: var(--xpl-color-transparent-neutral-50); /** Use on transparent backdrops; eg. behind a modal */
+  --xpl-background-surface-inverse-on-light: var(--xpl-color-neutral-1000); /** Use for inverse surfaces on light surfaces where mode switching is not needed */
+  --xpl-background-surface-inverse-on-dark: var(--xpl-color-neutral-0); /** Use for inverse surfaces on dark surfaces where mode switching is not needed */
+  --xpl-background-surface-information: var(--xpl-color-purple-50); /** Use for informational surfaces */
+  --xpl-background-surface-information-bold: var(--xpl-color-purple-100); /** Use for informational surfaces where a bold weight is needed */
+  --xpl-background-surface-positive: var(--xpl-color-green-100); /** Use for positive sentiment surfaces */
+  --xpl-background-surface-negative: var(--xpl-color-red-100); /** Use for negative sentiment surfaces */
+  --xpl-background-surface-transparent-0: var(--xpl-color-transparent-0); /** Use for transparent surfaces */
+  --xpl-background-surface-transparent-5: var(--xpl-color-transparent-neutral-5); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-10: var(--xpl-color-transparent-neutral-10); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-25: var(--xpl-color-transparent-neutral-25); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-50: var(--xpl-color-transparent-neutral-50); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-75: var(--xpl-color-transparent-neutral-75); /** Use for elevation shadows and overlays */
+  --xpl-background-action-disabled: var(--xpl-color-neutral-100); /** Use for disabled action states */
+  --xpl-background-action-primary-default: var(--xpl-color-purple-700); /** Use for primary action default state */
+  --xpl-background-action-primary-hover: var(--xpl-color-purple-800); /** Use for primary action hover state */
+  --xpl-background-action-primary-active: var(--xpl-color-purple-800); /** Use for primary action active state */
+  --xpl-background-action-primary-focus: var(--xpl-color-purple-700); /** Use for primary action focus state */
+  --xpl-background-action-secondary-default: var(--xpl-color-neutral-0); /** Use for secondary action default state */
+  --xpl-background-action-secondary-hover: var(--xpl-color-neutral-0); /** Use for secondary action hover state */
+  --xpl-background-action-secondary-active: var(--xpl-color-neutral-0); /** Use for secondary action active state */
+  --xpl-background-action-secondary-focus: var(--xpl-color-neutral-0); /** Use for secondary action focus state */
+  --xpl-background-action-tertiary-default: var(--xpl-color-transparent-0); /** Use for tertiary action default state */
+  --xpl-background-action-tertiary-hover: var(--xpl-color-neutral-100); /** Use for tertiary action hover state */
+  --xpl-background-action-tertiary-active: var(--xpl-color-neutral-300); /** Use for tertiary action active state */
+  --xpl-background-action-tertiary-focus: var(--xpl-color-neutral-100); /** Use for tertiary action focus state */
+  --xpl-background-action-positive-default: var(--xpl-color-green-700); /** Use for positive actions default state */
+  --xpl-background-action-positive-hover: var(--xpl-color-green-800); /** Use for positive actions hover state */
+  --xpl-background-action-positive-active: var(--xpl-color-green-800); /** Use for positive actions active state */
+  --xpl-background-action-positive-focus: var(--xpl-color-green-700); /** Use for positive actions focused state */
+  --xpl-background-action-negative-default: var(--xpl-color-red-700); /** Use for negative actions default state */
+  --xpl-background-action-negative-hover: var(--xpl-color-red-800); /** Use for negative actions hover state */
+  --xpl-background-action-negative-active: var(--xpl-color-red-800); /** Use for negative actions active state */
+  --xpl-background-action-negative-focus: var(--xpl-color-red-700); /** Use for negative actions focused state */
+  --xpl-background-accent-default: var(--xpl-color-purple-700); /** Use for default accent backgrounds */
+  --xpl-background-accent-pink: var(--xpl-color-pink-400); /** Use for pink accent backgrounds */
+  --xpl-background-accent-highlight: var(--xpl-color-yellow-500); /** Use for highlighted accent backgrounds */
+  --xpl-background-accent-positive: var(--xpl-color-green-400); /** Use for positive sentiment accents */
+  --xpl-background-accent-positive-bold: var(--xpl-color-green-700); /** Use for positive sentiments when a bold weight is needed */
+  --xpl-background-accent-negative: var(--xpl-color-red-600); /** Use for negative sentiments */
+  --xpl-background-accent-negative-bold: var(--xpl-color-red-800); /** Use for negative sentiments when a bold weight is needed */
+  --xpl-background-accent-alternative: var(--xpl-color-blue-400); /** Alternative accent color */
+  --xpl-background-accent-alternative-bold: var(--xpl-color-blue-700); /** Alternative accent color in a bold weight */
+  --xpl-background-accent-brand: var(--xpl-color-orange-600); /** Use for brand color accents */
+  --xpl-background-accent-brand-subtle: var(--xpl-color-orange-200); /** Use for subtle brand accents */
+  --xpl-background-accent-neutral: var(--xpl-color-neutral-400); /** Use for neutral accents */
+  --xpl-background-accent-neutral-bold: var(--xpl-color-neutral-500); /** Use for neutral accents that need a bolder weight */
+  --xpl-background-brand-primary: var(--xpl-color-orange-600); /** Primary brand color. Used for logos and brand accents */
+  --xpl-background-brand-primary-surface: var(--xpl-color-orange-50); /** Primary brand surface color */
+  --xpl-background-brand-secondary: var(--xpl-color-purple-700); /** Secondary brand color */
+  --xpl-background-brand-secondary-surface: var(--xpl-color-purple-50); /** Secondary brand surface color */
+  --xpl-background-badge-yellow: var(--xpl-color-yellow-100); /** Neutral sentiment Toast surface */
+  --xpl-background-badge-blue: var(--xpl-color-blue-100); /** Positive sentiment toast surface */
+  --xpl-background-badge-orange: var(--xpl-color-orange-100); /** Orange badge surface */
+  --xpl-background-messaging-warning: var(--xpl-color-yellow-100); /** Negative sentiment Toast surface */
+  --xpl-background-messaging-warning-bold: var(--xpl-color-yellow-300); /** Yellow Badge surface */
+  --xpl-background-messaging-negative-bold: var(--xpl-color-red-700); /** Blue badge surface */
+  --xpl-chart-theme-warm-5: var(--xpl-color-orange-600); /** Warm theme color for the 5th data point */
+  --xpl-chart-neutral-lighter: var(--xpl-color-neutral-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-light: var(--xpl-color-neutral-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-normal: var(--xpl-color-neutral-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-bold: var(--xpl-color-neutral-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-bolder: var(--xpl-color-neutral-1000); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-boldest: var(--xpl-color-neutral-1200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-lighter: var(--xpl-color-orange-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-light: var(--xpl-color-orange-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-normal: var(--xpl-color-orange-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-bold: var(--xpl-color-orange-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-bolder: var(--xpl-color-orange-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-boldest: var(--xpl-color-orange-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-lighter: var(--xpl-color-purple-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-light: var(--xpl-color-purple-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-normal: var(--xpl-color-purple-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-bold: var(--xpl-color-purple-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-bolder: var(--xpl-color-purple-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-boldest: var(--xpl-color-purple-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-lighter: var(--xpl-color-green-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-light: var(--xpl-color-green-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-normal: var(--xpl-color-green-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-bold: var(--xpl-color-green-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-bolder: var(--xpl-color-green-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-boldest: var(--xpl-color-green-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-lighter: var(--xpl-color-yellow-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-light: var(--xpl-color-yellow-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-normal: var(--xpl-color-yellow-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-bold: var(--xpl-color-yellow-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-bolder: var(--xpl-color-yellow-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-boldest: var(--xpl-color-yellow-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-lighter: var(--xpl-color-red-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-light: var(--xpl-color-red-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-normal: var(--xpl-color-red-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-bold: var(--xpl-color-red-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-bolder: var(--xpl-color-red-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-boldest: var(--xpl-color-red-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-lighter: var(--xpl-color-pink-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-light: var(--xpl-color-pink-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-normal: var(--xpl-color-pink-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-bold: var(--xpl-color-pink-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-bolder: var(--xpl-color-pink-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-boldest: var(--xpl-color-pink-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-lighter: var(--xpl-color-blue-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-light: var(--xpl-color-blue-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-normal: var(--xpl-color-blue-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-bold: var(--xpl-color-blue-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-bolder: var(--xpl-color-blue-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-boldest: var(--xpl-color-blue-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-lighter: var(--xpl-color-teal-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-light: var(--xpl-color-teal-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-normal: var(--xpl-color-teal-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-bold: var(--xpl-color-teal-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-bolder: var(--xpl-color-teal-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-boldest: var(--xpl-color-teal-900); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-icon-default: var(--xpl-color-neutral-1000); /** Default icon color and when paired with default or strong text. */
+  --xpl-icon-subtle: var(--xpl-color-neutral-500); /** Use when paired with subtle text colors or inactive actions. */
+  --xpl-icon-inverse: var(--xpl-color-neutral-0); /** Inverse color icons (white on dark surfaces, dark on light surfaces) */
+  --xpl-icon-inverse-on-light: var(--xpl-color-neutral-1000); /** Dark icons on light backgrounds that do not mode switch. */
+  --xpl-icon-inverse-on-dark: var(--xpl-color-neutral-0); /** White icons on dark backgrounds that do not mode switch. */
+  --xpl-icon-disabled: var(--xpl-color-neutral-600); /** Use for icons paired with disabled text or actions. */
+  --xpl-icon-negative: var(--xpl-color-red-700); /** Use for icons with negative sentiment, or paired with negative text. */
+  --xpl-icon-warning: var(--xpl-color-yellow-600); /** Highlight accented borders. */
+  --xpl-icon-positive: var(--xpl-color-green-700); /** Use for icons in a positive sentiment or paired with positive text. */
+  --xpl-icon-information: var(--xpl-color-purple-700); /** Use for icons communicating information */
+  --xpl-text-strong: var(--xpl-color-neutral-1100); /** Bold text color, use for display text styles, page headings */
+  --xpl-text-default: var(--xpl-color-neutral-900); /** Use for primary text color such as body or titles in sentence case */
+  --xpl-text-subdued: var(--xpl-color-neutral-600); /** Use for subdued text such as descriptions and details */
+  --xpl-text-inverse: var(--xpl-color-neutral-0); /** Use on inverse surfaces (light on dark surface, dark on light surface) */
+  --xpl-text-inverse-on-light: var(--xpl-color-neutral-1000); /** Use on a light surface that does not mode switch */
+  --xpl-text-inverse-on-dark: var(--xpl-color-neutral-0); /** Use on text on a dark surface that does not mode switch */
+  --xpl-text-positive: var(--xpl-color-green-700); /** Use on positive sentiment text */
+  --xpl-text-negative: var(--xpl-color-red-700); /** Use on negative sentiment text */
+  --xpl-text-link-default: var(--xpl-color-purple-700); /** Use for link text */
+  --xpl-text-link-hovered: var(--xpl-color-purple-800); /** Use for default badge text */
+  --xpl-text-link-visited: var(--xpl-color-pink-800); /** Use for yellow badge text */
+  --xpl-color-information-lm: var(--xpl-color-secondary-lm); /** uses themable token */
+  --xpl-color-information-dm: var(--xpl-color-secondary-dm); /** uses themable token */
+  --xpl-color-information-bg-lm: var(--xpl-color-secondary-bg-lm); /** uses themable token */
+  --xpl-color-text-action-lm: var(--xpl-color-primary-lm); /** uses themable token */
+  --xpl-color-text-action-dm: var(--xpl-color-primary-dm); /** uses themable token */
+  --xpl-border-badge-purple: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
+  --xpl-border-badge-yellow: var(--xpl-background-surface-transparent-0); /** Yellow badge surface */
+  --xpl-border-badge-green: var(--xpl-background-surface-transparent-0); /** Green badge surface */
+  --xpl-border-badge-grey: var(--xpl-background-surface-transparent-0); /** Grey badge surface */
+  --xpl-border-badge-blue: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
+  --xpl-border-badge-red: var(--xpl-background-surface-transparent-0); /** Red badge surface */
+  --xpl-border-badge-orange: var(--xpl-background-surface-transparent-0); /** Orange badge border */
+  --xpl-background-brand-tertiary: var(--xpl-color-brand-primary-starwhite); /** Brand tertiary color. Used primarily for surfaces */
+  --xpl-background-badge-default: var(--xpl-background-surface-information-bold); /** Default Badge surface */
+  --xpl-background-badge-green: var(--xpl-background-surface-positive); /** Neutral sentiment Toast surface */
+  --xpl-background-badge-red: var(--xpl-background-surface-negative); /** Neutral sentiment Toast surface */
+  --xpl-background-badge-grey: var(--xpl-background-accent-neutral); /** Positive sentiment toast surface */
+  --xpl-background-messaging-information: var(--xpl-background-surface-information); /** Negative sentiment Toast surface */
+  --xpl-background-messaging-positive: var(--xpl-background-surface-positive); /** Green badge surface */
+  --xpl-background-messaging-positive-bold: var(--xpl-background-accent-positive-bold); /** Red Badge surface */
+  --xpl-background-messaging-negative: var(--xpl-background-surface-negative); /** Grey Badge surface */
+  --xpl-chart-theme-vibrant-1: var(--xpl-chart-purple-bolder); /** Vibrant theme color for the 1st data point */
+  --xpl-chart-theme-vibrant-2: var(--xpl-chart-orange-normal); /** Vibrant theme color for the 2nd data point */
+  --xpl-chart-theme-vibrant-3: var(--xpl-chart-pink-normal); /** Vibrant theme color for the 3rd data point */
+  --xpl-chart-theme-vibrant-4: var(--xpl-chart-yellow-light); /** Vibrant theme color for the 4th data point */
+  --xpl-chart-theme-vibrant-5: var(--xpl-chart-purple-bold); /** Vibrant theme color for the 5th data point */
+  --xpl-chart-theme-vibrant-6: var(--xpl-chart-green-normal); /** Vibrant theme color for the 6th data point */
+  --xpl-chart-theme-vibrant-7: var(--xpl-chart-pink-bold); /** Vibrant theme color for the 7th data point */
+  --xpl-chart-theme-vibrant-8: var(--xpl-chart-teal-light); /** Vibrant theme color for the 8th data point */
+  --xpl-chart-theme-sunset-1: var(--xpl-chart-purple-bolder); /** Sunset theme color for the 1st data point */
+  --xpl-chart-theme-sunset-2: var(--xpl-chart-purple-bold); /** Sunset theme color for the 2nd data point */
+  --xpl-chart-theme-sunset-3: var(--xpl-chart-orange-bold); /** Sunset theme color for the 3rd data point */
+  --xpl-chart-theme-sunset-4: var(--xpl-chart-orange-light); /** Sunset theme color for the 4th data point */
+  --xpl-chart-theme-sunset-5: var(--xpl-chart-yellow-light); /** Sunset theme color for the 5th data point */
+  --xpl-chart-theme-sunset-6: var(--xpl-chart-green-normal); /** Sunset theme color for the 6th data point */
+  --xpl-chart-theme-sunset-7: var(--xpl-chart-blue-normal); /** Sunset theme color for the 7th data point */
+  --xpl-chart-theme-sunset-8: var(--xpl-chart-blue-bolder); /** Sunset theme color for the 8th data point */
+  --xpl-chart-theme-warm-1: var(--xpl-chart-purple-bolder); /** Warm theme color for the 1st data point */
+  --xpl-chart-theme-warm-2: var(--xpl-chart-purple-bold); /** Warm theme color for the 2th data point */
+  --xpl-chart-theme-warm-3: var(--xpl-chart-pink-normal); /** Warm theme color for the 3th data point */
+  --xpl-chart-theme-warm-4: var(--xpl-chart-pink-light); /** Warm theme color for the 4th data point */
+  --xpl-chart-theme-warm-6: var(--xpl-chart-orange-normal); /** Warm theme color for the 6th data point */
+  --xpl-chart-theme-warm-7: var(--xpl-chart-yellow-normal); /** Warm theme color for the 7th data point */
+  --xpl-chart-theme-warm-8: var(--xpl-chart-yellow-bolder); /** Warm theme color for the 8th data point */
+  --xpl-chart-theme-cool-1: var(--xpl-chart-purple-boldest); /** Cool theme color for the 1st data point */
+  --xpl-chart-theme-cool-2: var(--xpl-chart-teal-lighter); /** Cool theme color for the 2nd data point */
+  --xpl-chart-theme-cool-3: var(--xpl-chart-purple-bold); /** Cool theme color for the 3rd data point */
+  --xpl-chart-theme-cool-4: var(--xpl-chart-teal-normal); /** Cool theme color for the 4th data point */
+  --xpl-chart-theme-cool-5: var(--xpl-chart-purple-bolder); /** Cool theme color for the 5th data point */
+  --xpl-chart-theme-cool-6: var(--xpl-chart-blue-normal); /** Cool theme color for the 6th data point */
+  --xpl-chart-theme-cool-7: var(--xpl-chart-purple-light); /** Cool theme color for the 7th data point */
+  --xpl-chart-theme-cool-8: var(--xpl-chart-blue-boldest); /** Cool theme color for the 8th data point */
+  --xpl-chart-theme-fun-1: var(--xpl-chart-blue-boldest); /** Fun theme color for the 1st data point */
+  --xpl-chart-theme-fun-2: var(--xpl-chart-teal-normal); /** Fun theme color for the 2nd data point */
+  --xpl-chart-theme-fun-3: var(--xpl-chart-green-bold); /** Fun theme color for the 3th data point */
+  --xpl-chart-theme-fun-4: var(--xpl-chart-purple-bold); /** Fun theme color for the 4th data point */
+  --xpl-chart-theme-fun-5: var(--xpl-chart-purple-light); /** Fun theme color for the 5th data point */
+  --xpl-chart-theme-fun-6: var(--xpl-chart-pink-normal); /** Fun theme color for the 6th data point */
+  --xpl-chart-theme-fun-7: var(--xpl-chart-orange-normal); /** Fun theme color for the 7th data point */
+  --xpl-chart-theme-fun-8: var(--xpl-chart-teal-light); /** Fun theme color for the 8th data point */
+  --xpl-chart-theme-twilight-1: var(--xpl-chart-purple-boldest); /** Twilight theme color for the 1st data point */
+  --xpl-chart-theme-twilight-2: var(--xpl-chart-purple-bold); /** Twilight theme color for the 2nd data point */
+  --xpl-chart-theme-twilight-3: var(--xpl-chart-purple-light); /** Twilight theme color for the 3rd data point */
+  --xpl-chart-theme-twilight-4: var(--xpl-chart-pink-light); /** Twilight theme color for the 4th data point */
+  --xpl-chart-theme-twilight-5: var(--xpl-chart-pink-normal); /** Twilight theme color for the 5th data point */
+  --xpl-chart-theme-twilight-6: var(--xpl-chart-orange-bold); /** Twilight theme color for the 6th data point */
+  --xpl-chart-theme-twilight-7: var(--xpl-chart-yellow-light); /** Twilight theme color for the 7th data point */
+  --xpl-chart-theme-twilight-8: var(--xpl-chart-green-bold); /** Twilight theme color for the 8th data point */
+  --xpl-icon-brand: var(--xpl-color-brand-primary-xplorange); /** Use for brand logos and icons paired with primary brand color. */
+  --xpl-icon-badge-default: var(--xpl-background-accent-default);
+  --xpl-icon-badge-yellow: var(--xpl-background-accent-highlight);
+  --xpl-icon-badge-green: var(--xpl-background-accent-positive-bold);
+  --xpl-icon-badge-red: var(--xpl-background-accent-negative);
+  --xpl-icon-badge-grey: var(--xpl-icon-subtle);
+  --xpl-icon-badge-blue: var(--xpl-background-accent-alternative-bold);
+  --xpl-text-disabled: var(--xpl-text-subdued); /** Use on disabled text */
+  --xpl-text-badge-default: var(--xpl-text-strong); /** Use for green badge text */
+  --xpl-text-badge-yellow: var(--xpl-text-strong); /** Use for red badge text */
+  --xpl-text-badge-green: var(--xpl-text-strong); /** Use for gray badge text */
+  --xpl-text-badge-red: var(--xpl-text-strong); /** Use for blue badge text */
+  --xpl-text-badge-gray: var(--xpl-text-strong); /** Use on link hover states */
+  --xpl-text-badge-blue: var(--xpl-text-strong); /** Use on links that have been visited */
+  --xpl-color-transparent: var(--xpl-color-transparent-0); /** Backwards-compatible alias. Use --xpl-color-transparent-0 instead. */
+}
+
+.dark {
+  --xpl-background-surface-default: var(--xpl-color-neutral-1000); /** The default surface for pages and containers */
+  --xpl-background-surface-subtlest: var(--xpl-color-neutral-900); /** Use for the subtlest surfaces */
+  --xpl-background-surface-subtle: var(--xpl-color-neutral-1200); /** Use for subtle surfaces */
+  --xpl-background-surface-bold: var(--xpl-color-neutral-200); /** Use for bold dark surfaces */
+  --xpl-background-surface-backdrop: var(--xpl-color-transparent-neutral-75); /** Use on transparent backdrops; eg. behind a modal */
+  --xpl-background-surface-inverse-on-light: var(--xpl-color-neutral-1000); /** Use for inverse surfaces on light surfaces where mode switching is not needed */
+  --xpl-background-surface-inverse-on-dark: var(--xpl-color-neutral-0); /** Use for inverse surfaces on dark surfaces where mode switching is not needed */
+  --xpl-background-surface-information: var(--xpl-color-neutral-700); /** Use for informational surfaces */
+  --xpl-background-surface-information-bold: var(--xpl-color-neutral-600); /** Use for informational surfaces where a bold weight is needed */
+  --xpl-background-surface-positive: var(--xpl-color-green-300); /** Use for positive sentiment surfaces */
+  --xpl-background-surface-negative: var(--xpl-color-red-300); /** Use for negative sentiment surfaces */
+  --xpl-background-surface-transparent-0: var(--xpl-color-transparent-0); /** Use for transparent surfaces */
+  --xpl-background-surface-transparent-5: var(--xpl-color-transparent-light-5); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-10: var(--xpl-color-transparent-light-10); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-25: var(--xpl-color-transparent-light-25); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-50: var(--xpl-color-transparent-light-50); /** Use for elevation shadows and overlays */
+  --xpl-background-surface-transparent-75: var(--xpl-color-transparent-light-75); /** Use for elevation shadows and overlays */
+  --xpl-background-action-disabled: var(--xpl-color-neutral-800); /** Use for disabled action states */
+  --xpl-background-action-primary-default: var(--xpl-color-purple-300); /** Use for primary action default state */
+  --xpl-background-action-primary-hover: var(--xpl-color-purple-400); /** Use for primary action hover state */
+  --xpl-background-action-primary-active: var(--xpl-color-purple-400); /** Use for primary action active state */
+  --xpl-background-action-primary-focus: var(--xpl-color-purple-300); /** Use for primary action focus state */
+  --xpl-background-action-secondary-default: var(--xpl-color-neutral-1000); /** Use for secondary action default state */
+  --xpl-background-action-secondary-hover: var(--xpl-color-neutral-1000); /** Use for secondary action hover state */
+  --xpl-background-action-secondary-active: var(--xpl-color-neutral-1000); /** Use for secondary action active state */
+  --xpl-background-action-secondary-focus: var(--xpl-color-neutral-1000); /** Use for secondary action focus state */
+  --xpl-background-action-tertiary-default: var(--xpl-color-transparent-0); /** Use for tertiary action default state */
+  --xpl-background-action-tertiary-hover: var(--xpl-color-neutral-800); /** Use for tertiary action hover state */
+  --xpl-background-action-tertiary-active: var(--xpl-color-neutral-700); /** Use for tertiary action active state */
+  --xpl-background-action-tertiary-focus: var(--xpl-color-neutral-1000); /** Use for tertiary action focus state */
+  --xpl-background-action-positive-default: var(--xpl-color-green-300); /** Use for positive actions default state */
+  --xpl-background-action-positive-hover: var(--xpl-color-green-400); /** Use for positive actions hover state */
+  --xpl-background-action-positive-active: var(--xpl-color-green-400); /** Use for positive actions active state */
+  --xpl-background-action-positive-focus: var(--xpl-color-green-300); /** Use for positive actions focused state */
+  --xpl-background-action-negative-default: var(--xpl-color-red-300); /** Use for negative actions default state */
+  --xpl-background-action-negative-hover: var(--xpl-color-red-400); /** Use for negative actions hover state */
+  --xpl-background-action-negative-active: var(--xpl-color-red-400); /** Use for negative actions active state */
+  --xpl-background-action-negative-focus: var(--xpl-color-red-300); /** Use for negative actions focused state */
+  --xpl-background-accent-default: var(--xpl-color-purple-300); /** Use for default accent backgrounds */
+  --xpl-background-accent-pink: var(--xpl-color-pink-300); /** Use for pink accent backgrounds */
+  --xpl-background-accent-highlight: var(--xpl-color-yellow-200); /** Use for highlighted accent backgrounds */
+  --xpl-background-accent-positive: var(--xpl-color-green-700); /** Use for positive sentiment accents */
+  --xpl-background-accent-positive-bold: var(--xpl-color-green-400); /** Use for positive sentiments when a bold weight is needed */
+  --xpl-background-accent-negative: var(--xpl-color-red-300); /** Use for negative sentiments */
+  --xpl-background-accent-negative-bold: var(--xpl-color-red-600); /** Use for negative sentiments when a bold weight is needed */
+  --xpl-background-accent-alternative: var(--xpl-color-blue-200); /** Alternative accent color */
+  --xpl-background-accent-alternative-bold: var(--xpl-color-blue-300); /** Alternative accent color in a bold weight */
+  --xpl-background-accent-brand: var(--xpl-color-orange-400); /** Use for brand color accents */
+  --xpl-background-accent-brand-subtle: var(--xpl-color-orange-500); /** Use for subtle brand accents */
+  --xpl-background-accent-neutral: var(--xpl-color-neutral-600); /** Use for neutral accents */
+  --xpl-background-accent-neutral-bold: var(--xpl-color-neutral-400); /** Use for neutral accents that need a bolder weight */
+  --xpl-background-brand-primary: var(--xpl-color-orange-200); /** Primary brand color. Used for logos and brand accents */
+  --xpl-background-brand-primary-surface: var(--xpl-color-orange-900); /** Primary brand surface color */
+  --xpl-background-brand-secondary: var(--xpl-color-purple-300); /** Secondary brand color */
+  --xpl-background-brand-secondary-surface: var(--xpl-color-purple-900); /** Secondary brand surface color */
+  --xpl-border-default: var(--xpl-color-neutral-600); /** Default border color */
+  --xpl-border-strong: var(--xpl-color-neutral-400); /** Use for strong weight borders */
+  --xpl-border-subtle: var(--xpl-color-neutral-800); /** Use for subtle weight borders */
+  --xpl-border-inverse: var(--xpl-color-neutral-1000); /** Use for inverse borders (light on dark/dark on light) */
+  --xpl-border-hover: var(--xpl-color-purple-300); /** Use for borders in a hover state */
+  --xpl-border-active: var(--xpl-color-purple-300); /** Use for borders in an active state */
+  --xpl-border-focus: var(--xpl-color-purple-400); /** Use for borders in a focus state */
+  --xpl-border-negative: var(--xpl-color-red-300); /** Use for negative sentiment borders */
+  --xpl-border-positive: var(--xpl-color-green-300); /** Use for positive sentiment borders */
+  --xpl-border-accent-default: var(--xpl-color-purple-300); /** Default color accented borders */
+  --xpl-border-accent-brand: var(--xpl-color-orange-500); /** Brand color accented borders */
+  --xpl-border-accent-information: var(--xpl-color-purple-300); /** Informational accented borders */
+  --xpl-border-accent-highlight: var(--xpl-color-yellow-200); /** Highlight accented borders */
+  --xpl-border-accent-warning: var(--xpl-color-yellow-200); /** Highlight accented borders */
+  --xpl-border-accent-subtle: var(--xpl-color-neutral-500); /** Subtle accented borders */
+  --xpl-border-accent-alternative: var(--xpl-color-blue-300); /** Alternative accented borders */
+  --xpl-border-badge-purple: var(--xpl-color-purple-300); /** Blue badge surface */
+  --xpl-border-badge-yellow: var(--xpl-color-yellow-200); /** Yellow badge surface */
+  --xpl-border-badge-green: var(--xpl-color-green-300); /** Green badge surface */
+  --xpl-border-badge-grey: var(--xpl-color-neutral-500); /** Grey badge surface */
+  --xpl-border-badge-blue: var(--xpl-color-blue-300); /** Blue badge surface */
+  --xpl-border-badge-red: var(--xpl-color-red-300); /** Red badge surface */
+  --xpl-border-badge-orange: var(--xpl-color-orange-300); /** Orange badge border */
+  --xpl-chart-theme-warm-5: var(--xpl-color-orange-500); /** Warm theme color for the 5th data point */
+  --xpl-chart-neutral-lighter: var(--xpl-color-neutral-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-light: var(--xpl-color-neutral-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-normal: var(--xpl-color-neutral-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-bold: var(--xpl-color-neutral-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-bolder: var(--xpl-color-neutral-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-neutral-boldest: var(--xpl-color-neutral-50); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-lighter: var(--xpl-color-orange-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-light: var(--xpl-color-orange-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-normal: var(--xpl-color-orange-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-bold: var(--xpl-color-orange-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-bolder: var(--xpl-color-orange-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-orange-boldest: var(--xpl-color-orange-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-lighter: var(--xpl-color-purple-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-light: var(--xpl-color-purple-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-normal: var(--xpl-color-purple-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-bold: var(--xpl-color-purple-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-bolder: var(--xpl-color-purple-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-purple-boldest: var(--xpl-color-purple-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-lighter: var(--xpl-color-green-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-light: var(--xpl-color-green-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-normal: var(--xpl-color-green-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-bold: var(--xpl-color-green-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-bolder: var(--xpl-color-green-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-green-boldest: var(--xpl-color-green-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-lighter: var(--xpl-color-yellow-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-light: var(--xpl-color-yellow-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-normal: var(--xpl-color-yellow-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-bold: var(--xpl-color-yellow-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-bolder: var(--xpl-color-yellow-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-yellow-boldest: var(--xpl-color-yellow-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-lighter: var(--xpl-color-red-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-light: var(--xpl-color-red-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-normal: var(--xpl-color-red-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-bold: var(--xpl-color-red-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-bolder: var(--xpl-color-red-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-red-boldest: var(--xpl-color-red-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-lighter: var(--xpl-color-pink-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-light: var(--xpl-color-pink-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-normal: var(--xpl-color-pink-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-bold: var(--xpl-color-pink-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-bolder: var(--xpl-color-pink-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-pink-boldest: var(--xpl-color-pink-50); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-lighter: var(--xpl-color-blue-800); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-light: var(--xpl-color-blue-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-normal: var(--xpl-color-blue-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-bold: var(--xpl-color-blue-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-bolder: var(--xpl-color-blue-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-blue-boldest: var(--xpl-color-blue-300); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-lighter: var(--xpl-color-teal-700); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-light: var(--xpl-color-teal-600); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-normal: var(--xpl-color-teal-500); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-bold: var(--xpl-color-teal-400); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-bolder: var(--xpl-color-teal-200); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-chart-teal-boldest: var(--xpl-color-teal-100); /** Use for monochromatic charts where color weight is the differentiator */
+  --xpl-icon-default: var(--xpl-color-neutral-0); /** Default icon color and when paired with default or strong text */
+  --xpl-icon-subtle: var(--xpl-color-neutral-500); /** Use when paired with subtle text colors or inactive actions */
+  --xpl-icon-inverse: var(--xpl-color-neutral-1000); /** Inverse color icons (white on dark surfaces, dark on light surfaces) */
+  --xpl-icon-inverse-on-light: var(--xpl-color-neutral-1000); /** Dark icons on light backgrounds that do not mode switch */
+  --xpl-icon-inverse-on-dark: var(--xpl-color-neutral-0); /** White icons on dark backgrounds that do not mode switch */
+  --xpl-icon-disabled: var(--xpl-color-neutral-500); /** Use for icons paired with disabled text or actions */
+  --xpl-icon-brand: var(--xpl-color-orange-300); /** Use for brand logos and icons paired with primary brand color */
+  --xpl-icon-negative: var(--xpl-color-red-300); /** Use for icons with negative sentiment, or paired with negative text */
+  --xpl-icon-warning: var(--xpl-color-yellow-200); /** Highlight accented borders */
+  --xpl-icon-positive: var(--xpl-color-green-300); /** Use for icons in a positive sentiment or paired with positive text */
+  --xpl-icon-information: var(--xpl-color-purple-300); /** Use for icons communicating information */
+  --xpl-text-strong: var(--xpl-color-neutral-0); /** Bold text color, use for display text styles, page headings */
+  --xpl-text-default: var(--xpl-color-neutral-50); /** Use for primary text color such as body or titles in sentence case */
+  --xpl-text-subdued: var(--xpl-color-neutral-500); /** Use for subdued text such as descriptions and details */
+  --xpl-text-inverse: var(--xpl-color-neutral-1000); /** Use on inverse surfaces (light on dark surface, dark on light surface) */
+  --xpl-text-inverse-on-light: var(--xpl-color-neutral-1000); /** Use on a light surface that does not mode switch */
+  --xpl-text-inverse-on-dark: var(--xpl-color-neutral-0); /** Use on text on a dark surface that does not mode switch */
+  --xpl-text-positive: var(--xpl-color-green-300); /** Use on positive sentiment text */
+  --xpl-text-negative: var(--xpl-color-red-300); /** Use on negative sentiment text */
+  --xpl-text-link-default: var(--xpl-color-purple-300); /** Use for link text */
+  --xpl-text-link-hovered: var(--xpl-color-purple-400); /** Use for default badge text */
+  --xpl-text-link-visited: var(--xpl-color-pink-300); /** Use for yellow badge text */
+  --xpl-background-brand-tertiary: var(--xpl-color-brand-primary-starwhite); /** Brand tertiary color. Used primarily for surfaces */
+  --xpl-background-badge-default: var(--xpl-background-surface-transparent-0); /** Default Badge surface */
+  --xpl-background-badge-yellow: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
+  --xpl-background-badge-green: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
+  --xpl-background-badge-red: var(--xpl-background-surface-transparent-0); /** Neutral sentiment Toast surface */
+  --xpl-background-badge-grey: var(--xpl-background-surface-transparent-0); /** Positive sentiment toast surface */
+  --xpl-background-badge-blue: var(--xpl-background-surface-transparent-0); /** Positive sentiment toast surface */
+  --xpl-background-badge-orange: var(--xpl-background-surface-transparent-0); /** Orange badge surface */
+  --xpl-background-messaging-information: var(--xpl-background-surface-transparent-0); /** Negative sentiment Toast surface */
+  --xpl-background-messaging-warning: var(--xpl-background-surface-transparent-0); /** Negative sentiment Toast surface */
+  --xpl-background-messaging-warning-bold: var(--xpl-background-surface-transparent-0); /** Yellow Badge surface */
+  --xpl-background-messaging-positive: var(--xpl-background-surface-transparent-0); /** Green badge surface */
+  --xpl-background-messaging-positive-bold: var(--xpl-background-surface-transparent-0); /** Red Badge surface */
+  --xpl-background-messaging-negative: var(--xpl-background-surface-transparent-0); /** Grey Badge surface */
+  --xpl-background-messaging-negative-bold: var(--xpl-background-surface-transparent-0); /** Blue badge surface */
+  --xpl-chart-theme-vibrant-1: var(--xpl-chart-purple-bolder); /** Vibrant theme color for the 1st data point */
+  --xpl-chart-theme-vibrant-2: var(--xpl-chart-orange-normal); /** Vibrant theme color for the 2nd data point */
+  --xpl-chart-theme-vibrant-3: var(--xpl-chart-pink-normal); /** Vibrant theme color for the 3rd data point */
+  --xpl-chart-theme-vibrant-4: var(--xpl-chart-yellow-light); /** Vibrant theme color for the 4th data point */
+  --xpl-chart-theme-vibrant-5: var(--xpl-chart-purple-bold); /** Vibrant theme color for the 5th data point */
+  --xpl-chart-theme-vibrant-6: var(--xpl-chart-green-normal); /** Vibrant theme color for the 6th data point */
+  --xpl-chart-theme-vibrant-7: var(--xpl-chart-pink-bold); /** Vibrant theme color for the 7th data point */
+  --xpl-chart-theme-vibrant-8: var(--xpl-chart-teal-light); /** Vibrant theme color for the 8th data point */
+  --xpl-chart-theme-sunset-1: var(--xpl-chart-purple-bolder); /** Sunset theme color for the 1st data point */
+  --xpl-chart-theme-sunset-2: var(--xpl-chart-purple-bold); /** Sunset theme color for the 2nd data point */
+  --xpl-chart-theme-sunset-3: var(--xpl-chart-orange-bold); /** Sunset theme color for the 3rd data point */
+  --xpl-chart-theme-sunset-4: var(--xpl-chart-orange-light); /** Sunset theme color for the 4th data point */
+  --xpl-chart-theme-sunset-5: var(--xpl-chart-yellow-light); /** Sunset theme color for the 5th data point */
+  --xpl-chart-theme-sunset-6: var(--xpl-chart-green-normal); /** Sunset theme color for the 6th data point */
+  --xpl-chart-theme-sunset-7: var(--xpl-chart-blue-normal); /** Sunset theme color for the 7th data point */
+  --xpl-chart-theme-sunset-8: var(--xpl-chart-blue-bolder); /** Sunset theme color for the 8th data point */
+  --xpl-chart-theme-warm-1: var(--xpl-chart-purple-bolder); /** Warm theme color for the 1st data point */
+  --xpl-chart-theme-warm-2: var(--xpl-chart-purple-bold); /** Warm theme color for the 2th data point */
+  --xpl-chart-theme-warm-3: var(--xpl-chart-pink-normal); /** Warm theme color for the 3th data point */
+  --xpl-chart-theme-warm-4: var(--xpl-chart-pink-light); /** Warm theme color for the 4th data point */
+  --xpl-chart-theme-warm-6: var(--xpl-chart-orange-normal); /** Warm theme color for the 6th data point */
+  --xpl-chart-theme-warm-7: var(--xpl-chart-yellow-normal); /** Warm theme color for the 7th data point */
+  --xpl-chart-theme-warm-8: var(--xpl-chart-yellow-bolder); /** Warm theme color for the 8th data point */
+  --xpl-chart-theme-cool-1: var(--xpl-chart-purple-boldest); /** Cool theme color for the 1st data point */
+  --xpl-chart-theme-cool-2: var(--xpl-chart-teal-lighter); /** Cool theme color for the 2nd data point */
+  --xpl-chart-theme-cool-3: var(--xpl-chart-purple-bold); /** Cool theme color for the 3rd data point */
+  --xpl-chart-theme-cool-4: var(--xpl-chart-teal-normal); /** Cool theme color for the 4th data point */
+  --xpl-chart-theme-cool-5: var(--xpl-chart-purple-bolder); /** Cool theme color for the 5th data point */
+  --xpl-chart-theme-cool-6: var(--xpl-chart-blue-normal); /** Cool theme color for the 6th data point */
+  --xpl-chart-theme-cool-7: var(--xpl-chart-purple-light); /** Cool theme color for the 7th data point */
+  --xpl-chart-theme-cool-8: var(--xpl-chart-blue-boldest); /** Cool theme color for the 8th data point */
+  --xpl-chart-theme-fun-1: var(--xpl-chart-blue-boldest); /** Fun theme color for the 1st data point */
+  --xpl-chart-theme-fun-2: var(--xpl-chart-teal-normal); /** Fun theme color for the 2nd data point */
+  --xpl-chart-theme-fun-3: var(--xpl-chart-green-bold); /** Fun theme color for the 3th data point */
+  --xpl-chart-theme-fun-4: var(--xpl-chart-purple-bold); /** Fun theme color for the 4th data point */
+  --xpl-chart-theme-fun-5: var(--xpl-chart-purple-light); /** Fun theme color for the 5th data point */
+  --xpl-chart-theme-fun-6: var(--xpl-chart-pink-normal); /** Fun theme color for the 6th data point */
+  --xpl-chart-theme-fun-7: var(--xpl-chart-orange-normal); /** Fun theme color for the 7th data point */
+  --xpl-chart-theme-fun-8: var(--xpl-chart-teal-light); /** Fun theme color for the 8th data point */
+  --xpl-chart-theme-twilight-1: var(--xpl-chart-purple-boldest); /** Twilight theme color for the 1st data point */
+  --xpl-chart-theme-twilight-2: var(--xpl-chart-purple-bold); /** Twilight theme color for the 2nd data point */
+  --xpl-chart-theme-twilight-3: var(--xpl-chart-purple-light); /** Twilight theme color for the 3rd data point */
+  --xpl-chart-theme-twilight-4: var(--xpl-chart-pink-light); /** Twilight theme color for the 4th data point */
+  --xpl-chart-theme-twilight-5: var(--xpl-chart-pink-normal); /** Twilight theme color for the 5th data point */
+  --xpl-chart-theme-twilight-6: var(--xpl-chart-orange-bold); /** Twilight theme color for the 6th data point */
+  --xpl-chart-theme-twilight-7: var(--xpl-chart-yellow-bold); /** Twilight theme color for the 7th data point */
+  --xpl-chart-theme-twilight-8: var(--xpl-chart-green-bold); /** Twilight theme color for the 8th data point */
+  --xpl-icon-badge-default: var(--xpl-background-accent-default);
+  --xpl-icon-badge-yellow: var(--xpl-background-accent-highlight);
+  --xpl-icon-badge-green: var(--xpl-background-accent-positive-bold);
+  --xpl-icon-badge-red: var(--xpl-background-accent-negative);
+  --xpl-icon-badge-grey: var(--xpl-icon-subtle);
+  --xpl-icon-badge-blue: var(--xpl-background-accent-alternative-bold);
+  --xpl-text-disabled: var(--xpl-text-subdued); /** Use on disabled text */
+  --xpl-text-badge-default: var(--xpl-text-strong); /** Use for green badge text */
+  --xpl-text-badge-yellow: var(--xpl-text-strong); /** Use for red badge text */
+  --xpl-text-badge-green: var(--xpl-text-strong); /** Use for gray badge text */
+  --xpl-text-badge-red: var(--xpl-text-strong); /** Use for blue badge text */
+  --xpl-text-badge-gray: var(--xpl-text-strong); /** Use on link hover states */
+  --xpl-text-badge-blue: var(--xpl-text-strong); /** Use on links that have been visited */
+}