// Do not edit directly, this file was auto-generated.

$xpl-color-brand-primary-deepspace: #220021; // Primary Xplor brand deep purple
$xpl-color-brand-primary-green: #47af4b;
$xpl-color-brand-secondary-sunray: #ecfd91; // Secondary Xplor yellow typically used for highlights and infographics
$xpl-color-neutral-0: #ffffff;
$xpl-color-neutral-50: #f5f5f5;
$xpl-color-neutral-100: #e0e0e0;
$xpl-color-neutral-200: #cccccc;
$xpl-color-neutral-300: #b8b8b8;
$xpl-color-neutral-400: #a3a3a3;
$xpl-color-neutral-500: #8f8f8f;
$xpl-color-neutral-600: #7a7a7a;
$xpl-color-neutral-700: #666666;
$xpl-color-neutral-800: #525252;
$xpl-color-neutral-900: #3d3d3d;
$xpl-color-neutral-1000: #222222;
$xpl-color-neutral-1100: #0e0e0e;
$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: #f5e8ff;
$xpl-color-purple-100: #e4beff;
$xpl-color-purple-200: #d294ff;
$xpl-color-purple-300: #c16aff;
$xpl-color-purple-400: #af40ff;
$xpl-color-purple-500: #9e16ff;
$xpl-color-purple-600: #7d00d6;
$xpl-color-purple-700: #6500ad;
$xpl-color-purple-800: #4d0085;
$xpl-color-purple-900: #36005c;
$xpl-color-orange-50: #ffeee8;
$xpl-color-orange-100: #ffd1be;
$xpl-color-orange-200: #ffb395;
$xpl-color-orange-300: #ff956c;
$xpl-color-orange-400: #ff7842;
$xpl-color-orange-500: #f95818;
$xpl-color-orange-600: #d03e05;
$xpl-color-orange-700: #a72f00;
$xpl-color-orange-800: #7e2400;
$xpl-color-orange-900: #561800;
$xpl-color-blue-50: #e9f2ff;
$xpl-color-blue-100: #c2dcff;
$xpl-color-blue-200: #9bc5ff;
$xpl-color-blue-300: #73afff;
$xpl-color-blue-400: #4c98ff;
$xpl-color-blue-500: #2582ff;
$xpl-color-blue-600: #0e64d8;
$xpl-color-blue-700: #004baf;
$xpl-color-blue-800: #003986;
$xpl-color-blue-900: #00285e;
$xpl-color-green-50: #f4fff4;
$xpl-color-green-100: #dbffdc;
$xpl-color-green-200: #c2ffc4;
$xpl-color-green-300: #a9ffab;
$xpl-color-green-400: #91ff93;
$xpl-color-green-500: #77ea7a;
$xpl-color-green-600: #5ac85d;
$xpl-color-green-700: #41a643;
$xpl-color-green-800: #2c842e;
$xpl-color-green-900: #1b621d;
$xpl-color-green-1000: #134614;
$xpl-color-green-1100: #0b2c0c;
$xpl-color-yellow-50: #fff8e6;
$xpl-color-yellow-100: #ffedba;
$xpl-color-yellow-200: #ffe18f;
$xpl-color-yellow-300: #ffd563;
$xpl-color-yellow-400: #ffc937;
$xpl-color-yellow-500: #ffbe0b;
$xpl-color-yellow-600: #d69d00;
$xpl-color-yellow-700: #ad7f00;
$xpl-color-yellow-800: #856100;
$xpl-color-yellow-900: #5c4300;
$xpl-color-pink-50: #ffe5f0;
$xpl-color-pink-100: #ffb7d6;
$xpl-color-pink-200: #ff8abc;
$xpl-color-pink-300: #ff5ca2;
$xpl-color-pink-400: #ff2e88;
$xpl-color-pink-500: #ff006e;
$xpl-color-pink-600: #d6005d;
$xpl-color-pink-700: #ad004b;
$xpl-color-pink-800: #850039;
$xpl-color-pink-900: #5c0028;
$xpl-color-red-50: #ffe8eb;
$xpl-color-red-100: #ffbec6;
$xpl-color-red-200: #ff95a2;
$xpl-color-red-300: #ff6c7d;
$xpl-color-red-400: #ff4259;
$xpl-color-red-500: #f91833;
$xpl-color-red-600: #d0021b;
$xpl-color-red-700: #a70014;
$xpl-color-red-800: #7e000f;
$xpl-color-red-900: #56000a;
$xpl-color-transparent-0: rgba(255, 255, 255, 0);
$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(61, 61, 61, 0.05);
$xpl-color-transparent-neutral-10: rgba(61, 61, 61, 0.1);
$xpl-color-transparent-neutral-25: rgba(61, 61, 61, 0.25);
$xpl-color-transparent-neutral-50: rgba(61, 61, 61, 0.5);
$xpl-color-transparent-neutral-75: rgba(61, 61, 61, 0.75);
$xpl-color-teal-50: #eafbff;
$xpl-color-teal-100: #bcf1ff;
$xpl-color-teal-200: #8ee8ff;
$xpl-color-teal-300: #60deff;
$xpl-color-teal-400: #31cff8;
$xpl-color-teal-500: #1db0d6;
$xpl-color-teal-600: #0d92b4;
$xpl-color-teal-700: #017492;
$xpl-color-teal-800: #005970;
$xpl-color-teal-900: #003e4e;
$xpl-font-family-default: Roboto, apple-system, system-ui, 'Segoe UI', Arial, Helvetica, sans-serif; // Default font
$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: $xpl-color-green-500;
$xpl-color-positive-dm: $xpl-color-green-300;
$xpl-color-positive-bg-lm: $xpl-color-green-100;
$xpl-color-positive-bg-dm: $xpl-color-transparent-0;
$xpl-color-negative-lm: $xpl-color-red-600;
$xpl-color-negative-dm: $xpl-color-red-300;
$xpl-color-negative-bg-lm: $xpl-color-red-100;
$xpl-color-negative-bg-dm: $xpl-color-transparent-0;
$xpl-color-highlight-lm: $xpl-color-yellow-500;
$xpl-color-highlight-dm: $xpl-color-yellow-200;
$xpl-color-highlight-bg-lm: $xpl-color-yellow-200;
$xpl-color-highlight-bg-dm: $xpl-color-transparent-0;
$xpl-color-information-bg-dm: $xpl-color-transparent-0;
$xpl-color-trivial-lm: $xpl-color-gray-600;
$xpl-color-trivial-dm: $xpl-color-gray-500;
$xpl-color-trivial-bg-lm: $xpl-color-gray-400;
$xpl-color-trivial-bg-dm: $xpl-color-transparent-0;
$xpl-color-action-primary-lm: $xpl-color-purple-700;
$xpl-color-action-primary-dm: $xpl-color-purple-300;
$xpl-color-action-primary-hover-lm: $xpl-color-purple-800;
$xpl-color-action-primary-hover-dm: $xpl-color-purple-400;
$xpl-color-action-disabled-lm: $xpl-color-gray-100;
$xpl-color-action-disabled-dm: $xpl-color-gray-800;
$xpl-color-action-warning-lm: $xpl-color-red-700;
$xpl-color-action-warning-dm: $xpl-color-red-300;
$xpl-color-action-warning-hover-lm: $xpl-color-red-800;
$xpl-color-action-warning-hover-dm: $xpl-color-red-400;
$xpl-color-accent-green: $xpl-color-green-200;
$xpl-color-accent-yellow: $xpl-color-yellow-200;
$xpl-color-accent-pink: $xpl-color-pink-300;
$xpl-color-accent-purple: $xpl-color-purple-300;
$xpl-color-accent-blue-lm: $xpl-color-blue-500;
$xpl-color-accent-blue-dm: $xpl-color-blue-200;
$xpl-color-brand-primary-xplorange: $xpl-color-orange-600; // Primary Xplor brand orange
$xpl-color-brand-primary-starwhite: $xpl-color-orange-50; // Used for brand colored surfaces
$xpl-color-brand-secondary-supernova: $xpl-color-green-200; // Secondary Xplor green typically used for highlights and infographics
$xpl-color-brand-secondary-neptune: $xpl-color-purple-600; // Secondary Xplor purple typically used for UI elements and active states, highlights and infographics
$xpl-color-brand-secondary-pinkplanet: $xpl-color-pink-300; // Secondary Xplor pink typically used for highlights and infographics
$xpl-color-brand-secondary-skyblue: $xpl-color-blue-200; // Secondary Xplor blue typically used for highlights and infographics
$xpl-color-brand-secondary-gray: $xpl-color-neutral-900;
$xpl-color-foreground-lm: $xpl-color-neutral-0;
$xpl-color-foreground-dm: $xpl-color-neutral-1000;
$xpl-color-background-lm: $xpl-color-neutral-50;
$xpl-color-background-dm: $xpl-color-neutral-1200;
$xpl-color-background-2-lm: $xpl-color-neutral-100;
$xpl-color-background-2-dm: $xpl-color-neutral-1100;
$xpl-color-navigation-lm: $xpl-color-neutral-1000;
$xpl-color-navigation-dm: $xpl-color-neutral-1000;
$xpl-color-stroke-lm: $xpl-color-neutral-400;
$xpl-color-stroke-dm: $xpl-color-neutral-600;
$xpl-color-primary-lm: $xpl-color-orange-600; // themable
$xpl-color-primary-dm: $xpl-color-orange-400; // themable
$xpl-color-primary-bg-lm: $xpl-color-orange-50; // themable
$xpl-color-primary-bg-dm: $xpl-color-neutral-900; // themable
$xpl-color-secondary-lm: $xpl-color-purple-700; // themable
$xpl-color-secondary-dm: $xpl-color-purple-300; // themable
$xpl-color-secondary-hover-lm: $xpl-color-purple-800; // themable
$xpl-color-secondary-hover-dm: $xpl-color-purple-400; // themable
$xpl-color-secondary-bg-lm: $xpl-color-purple-50; // themable
$xpl-color-secondary-bg-dm: $xpl-color-neutral-900; // themable
$xpl-color-text-primary-lm: $xpl-color-gray-900;
$xpl-color-text-primary-dm: $xpl-color-gray-0;
$xpl-color-text-secondary-lm: $xpl-color-gray-600;
$xpl-color-text-secondary-dm: $xpl-color-gray-500;
$xpl-color-text-reverse-lm: $xpl-color-gray-0;
$xpl-color-text-reverse-dm: $xpl-color-gray-1000;
$xpl-color-text-warning-lm: $xpl-color-red-700;
$xpl-color-text-warning-dm: $xpl-color-red-300;
$xpl-font-family-display: $xpl-font-family-default; // Default display font
$xpl-font-family-title: $xpl-font-family-default; // Default title font
$xpl-font-family-body: $xpl-font-family-default; // Default body font
$xpl-font-weight-label-default: $xpl-font-weight-normal; // Default weight labels, typically on forms
$xpl-font-weight-label-strong: $xpl-font-weight-medium; // Bold weight labels, typically on forms
$xpl-font-size-display-1: $xpl-size-350; // Title size typography
$xpl-font-size-display-2: $xpl-size-300; // Title size typography
$xpl-font-size-display-3: $xpl-size-250; // Title size typography
$xpl-font-size-title-1: $xpl-size-200; // Title size typography
$xpl-font-size-title-2: $xpl-size-175; // Title size typography
$xpl-font-size-title-3: $xpl-size-150; // Title size typography
$xpl-font-size-title-4: $xpl-size-1125; // Title size typography
$xpl-font-size-title-5: $xpl-size-100; // Smallest Title size typography
$xpl-font-size-body: $xpl-size-100; // Default body size typography
$xpl-font-size-callout: $xpl-size-0875; // Callout size typography
$xpl-font-size-caption: $xpl-size-0625; // Caption size typography
$xpl-size-font-title-1: $xpl-size-175;
$xpl-size-font-title-2: $xpl-size-150;
$xpl-size-font-title-3: $xpl-size-125;
$xpl-size-font-title-4: $xpl-size-100;
$xpl-size-font-title-5: $xpl-size-0875;
$xpl-size-font-body: $xpl-size-0875;
$xpl-size-font-callout: $xpl-size-075;
$xpl-size-font-caption: $xpl-size-0625;
$xpl-size-radius-button: $xpl-size-radius-full; // themable
$xpl-border-none: $xpl-size-0;
$xpl-border-large: $xpl-size-0125;
$xpl-border-radius-none: $xpl-size-0;
$xpl-border-radius-small: $xpl-size-050;
$xpl-border-radius-default: $xpl-size-050;
$xpl-border-radius-large: $xpl-size-100;
$xpl-border-radius-button: $xpl-border-radius-full;
$xpl-border-default: $xpl-color-neutral-300; // Default border color
$xpl-border-strong: $xpl-color-neutral-600; // Use for strong weight borders
$xpl-border-subtle: $xpl-color-neutral-200; // Use for subtle weight borders
$xpl-border-inverse: $xpl-color-neutral-0; // Use for inverse borders (light on dark/dark on light)
$xpl-border-hover: $xpl-color-green-800; // Use for borders in a hover state
$xpl-border-active: $xpl-color-neutral-900; // Use for borders in an active state
$xpl-border-focus: $xpl-color-green-900; // Use for borders in a focus state
$xpl-border-negative: $xpl-color-red-600; // Use for negative sentiment borders
$xpl-border-positive: $xpl-color-green-800; // Use for positive sentiment borders
$xpl-border-accent-default: $xpl-color-green-800; // Default color accented borders
$xpl-border-accent-brand: $xpl-color-green-800; // Brand color accented borders
$xpl-border-accent-information: $xpl-color-green-800; // Informational accented borders
$xpl-border-accent-highlight: $xpl-color-blue-50; // Highlight accented borders
$xpl-border-accent-warning: $xpl-color-yellow-500; // Highlight accented borders
$xpl-border-accent-subtle: $xpl-color-neutral-200; // Subtle accented borders
$xpl-border-accent-alternative: $xpl-color-green-200; // Alternative accented borders
$xpl-background-surface-default: $xpl-color-neutral-0; // The default surface for pages and containers
$xpl-background-surface-subtlest: $xpl-color-neutral-50; // Use for the subtlest surfaces
$xpl-background-surface-subtle: $xpl-color-neutral-100; // Use for subtle surfaces
$xpl-background-surface-bold: $xpl-color-neutral-1000; // Use for bold dark surfaces
$xpl-background-surface-backdrop: $xpl-color-transparent-neutral-50; // Use on transparent backdrops; eg. behind a modal
$xpl-background-surface-inverse-on-light: $xpl-color-neutral-1000; // Use for inverse surfaces on light surfaces where mode switching is not needed
$xpl-background-surface-inverse-on-dark: $xpl-color-neutral-0; // Use for inverse surfaces on dark surfaces where mode switching is not needed
$xpl-background-surface-information: $xpl-color-neutral-0; // Use for informational surfaces
$xpl-background-surface-information-bold: $xpl-color-neutral-50; // Use for informational surfaces where a bold weight is needed
$xpl-background-surface-positive: $xpl-color-green-50; // Use for positive sentiment surfaces
$xpl-background-surface-negative: $xpl-color-red-50; // Use for negative sentiment surfaces
$xpl-background-surface-transparent-0: $xpl-color-transparent-0; // Use for transparent surfaces
$xpl-background-surface-transparent-5: $xpl-color-transparent-neutral-5; // Use for elevation shadows and overlays
$xpl-background-surface-transparent-10: $xpl-color-transparent-neutral-10; // Use for elevation shadows and overlays
$xpl-background-surface-transparent-25: $xpl-color-transparent-neutral-25; // Use for elevation shadows and overlays
$xpl-background-surface-transparent-50: $xpl-color-transparent-neutral-50; // Use for elevation shadows and overlays
$xpl-background-surface-transparent-75: $xpl-color-transparent-neutral-75; // Use for elevation shadows and overlays
$xpl-background-action-disabled: $xpl-color-neutral-50; // Use for disabled action states
$xpl-background-action-primary-default: $xpl-color-green-800; // Use for primary action default state
$xpl-background-action-primary-hover: $xpl-color-green-900; // Use for primary action hover state
$xpl-background-action-primary-active: $xpl-color-green-900; // Use for primary action active state
$xpl-background-action-primary-focus: $xpl-color-green-800; // Use for primary action focus state
$xpl-background-action-secondary-default: $xpl-color-neutral-0; // Use for secondary action default state
$xpl-background-action-secondary-hover: $xpl-color-neutral-0; // Use for secondary action hover state
$xpl-background-action-secondary-active: $xpl-color-neutral-0; // Use for secondary action active state
$xpl-background-action-secondary-focus: $xpl-color-neutral-0; // Use for secondary action focus state
$xpl-background-action-tertiary-default: $xpl-color-transparent-0; // Use for tertiary action default state
$xpl-background-action-tertiary-hover: $xpl-color-neutral-50; // Use for tertiary action hover state
$xpl-background-action-tertiary-active: $xpl-color-neutral-50; // Use for tertiary action active state
$xpl-background-action-tertiary-focus: $xpl-color-neutral-0; // Use for tertiary action focus state
$xpl-background-action-positive-default: $xpl-color-green-800; // Use for positive actions default state
$xpl-background-action-positive-hover: $xpl-color-green-900; // Use for positive actions hover state
$xpl-background-action-positive-active: $xpl-color-green-900; // Use for positive actions active state
$xpl-background-action-positive-focus: $xpl-color-green-800; // Use for positive actions focused state
$xpl-background-action-negative-default: $xpl-color-red-600; // Use for negative actions default state
$xpl-background-action-negative-hover: $xpl-color-red-700; // Use for negative actions hover state
$xpl-background-action-negative-active: $xpl-color-red-700; // Use for negative actions active state
$xpl-background-action-negative-focus: $xpl-color-red-600; // Use for negative actions focused state
$xpl-background-accent-default: $xpl-color-brand-primary-green; // Use for default accent backgrounds
$xpl-background-accent-pink: $xpl-color-pink-500; // Use for pink accent backgrounds
$xpl-background-accent-highlight: $xpl-color-yellow-500; // Use for highlighted accent backgrounds
$xpl-background-accent-positive: $xpl-color-green-600; // Use for positive sentiment accents
$xpl-background-accent-positive-bold: $xpl-color-green-800; // Use for positive sentiments when a bold weight is needed
$xpl-background-accent-negative: $xpl-color-red-300; // Use for negative sentiments
$xpl-background-accent-negative-bold: $xpl-color-red-600; // Use for negative sentiments when a bold weight is needed
$xpl-background-accent-alternative: $xpl-color-blue-600; // Alternative accent color
$xpl-background-accent-alternative-bold: $xpl-color-blue-800; // Alternative accent color in a bold weight
$xpl-background-accent-brand: $xpl-color-brand-primary-green; // Use for brand color accents
$xpl-background-accent-brand-subtle: $xpl-color-green-100; // Use for subtle brand accents
$xpl-background-accent-neutral: $xpl-color-neutral-200; // Use for neutral accents
$xpl-background-accent-neutral-bold: $xpl-color-neutral-400; // Use for neutral accents that need a bolder weight
$xpl-background-brand-primary: $xpl-color-brand-primary-green; // Primary brand color. Used for logos and brand accents
$xpl-background-brand-primary-surface: $xpl-color-green-50; // Primary brand surface color
$xpl-background-brand-secondary-surface: $xpl-color-neutral-100; // Secondary brand surface color
$xpl-background-brand-tertiary: $xpl-color-neutral-50; // Brand tertiary color. Used primarily for surfaces
$xpl-background-badge-orange: $xpl-color-orange-700; // Default Badge surface
$xpl-background-badge-yellow: $xpl-color-yellow-800; // Neutral sentiment Toast surface
$xpl-background-badge-green: $xpl-color-green-900; // Neutral sentiment Toast surface
$xpl-background-badge-red: $xpl-color-red-700; // Neutral sentiment Toast surface
$xpl-background-badge-grey: $xpl-color-neutral-700; // Positive sentiment toast surface
$xpl-background-badge-blue: $xpl-color-blue-800; // Positive sentiment toast surface
$xpl-background-badge-purple: $xpl-color-purple-800; // Purple badge surface
$xpl-background-messaging-warning: $xpl-color-yellow-100; // Negative sentiment Toast surface
$xpl-background-messaging-warning-bold: $xpl-color-yellow-500; // Yellow Badge surface
$xpl-chart-theme-warm-5: $xpl-color-orange-600; // Warm theme color for the 5th data point
$xpl-chart-neutral-lighter: $xpl-color-neutral-50; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-neutral-light: $xpl-color-neutral-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-neutral-normal: $xpl-color-neutral-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-neutral-bold: $xpl-color-neutral-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-neutral-bolder: $xpl-color-neutral-500; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-neutral-boldest: $xpl-color-neutral-700; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-orange-lighter: $xpl-color-orange-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-orange-light: $xpl-color-orange-300; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-orange-normal: $xpl-color-orange-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-orange-bold: $xpl-color-orange-500; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-orange-bolder: $xpl-color-orange-600; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-orange-boldest: $xpl-color-orange-700; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-purple-lighter: $xpl-color-purple-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-purple-light: $xpl-color-purple-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-purple-normal: $xpl-color-purple-300; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-purple-bold: $xpl-color-purple-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-purple-bolder: $xpl-color-purple-600; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-purple-boldest: $xpl-color-purple-800; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-green-lighter: $xpl-color-green-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-green-light: $xpl-color-green-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-green-normal: $xpl-color-green-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-green-bold: $xpl-color-green-600; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-green-bolder: $xpl-color-green-800; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-green-boldest: $xpl-color-green-900; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-yellow-lighter: $xpl-color-yellow-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-yellow-light: $xpl-color-yellow-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-yellow-normal: $xpl-color-yellow-300; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-yellow-bold: $xpl-color-yellow-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-yellow-bolder: $xpl-color-yellow-500; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-yellow-boldest: $xpl-color-yellow-600; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-red-lighter: $xpl-color-red-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-red-light: $xpl-color-red-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-red-normal: $xpl-color-red-300; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-red-bold: $xpl-color-red-500; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-red-bolder: $xpl-color-red-700; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-red-boldest: $xpl-color-red-800; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-pink-lighter: $xpl-color-pink-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-pink-light: $xpl-color-pink-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-pink-normal: $xpl-color-pink-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-pink-bold: $xpl-color-pink-600; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-pink-bolder: $xpl-color-pink-700; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-pink-boldest: $xpl-color-pink-900; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-blue-lighter: $xpl-color-blue-50; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-blue-light: $xpl-color-blue-100; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-blue-normal: $xpl-color-blue-300; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-blue-bold: $xpl-color-blue-500; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-blue-bolder: $xpl-color-blue-700; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-blue-boldest: $xpl-color-blue-900; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-teal-lighter: $xpl-color-teal-200; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-teal-light: $xpl-color-teal-400; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-teal-normal: $xpl-color-teal-500; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-teal-bold: $xpl-color-teal-700; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-teal-bolder: $xpl-color-teal-800; // Use for monochromatic charts where color weight is the differentiator
$xpl-chart-teal-boldest: $xpl-color-teal-900; // Use for monochromatic charts where color weight is the differentiator
$xpl-icon-default: $xpl-color-neutral-1000; // Default icon color and when paired with default or strong text.
$xpl-icon-subtle: $xpl-color-neutral-500; // Use when paired with subtle text colors or inactive actions.
$xpl-icon-inverse: $xpl-color-neutral-0; // Inverse color icons (white on dark surfaces, dark on light surfaces)
$xpl-icon-inverse-on-light: $xpl-color-neutral-1000; // Dark icons on light backgrounds that do not mode switch.
$xpl-icon-inverse-on-dark: $xpl-color-neutral-0; // White icons on dark backgrounds that do not mode switch.
$xpl-icon-disabled: $xpl-color-neutral-600; // Use for icons paired with disabled text or actions.
$xpl-icon-brand: $xpl-color-brand-primary-green; // Use for brand logos and icons paired with primary brand color.
$xpl-icon-negative: $xpl-color-red-600; // Use for icons with negative sentiment, or paired with negative text.
$xpl-icon-warning: $xpl-color-yellow-500; // Highlight accented borders.
$xpl-icon-positive: $xpl-color-green-800; // Use for icons in a positive sentiment or paired with positive text.
$xpl-icon-information: $xpl-color-green-800; // Use for icons communicating information
$xpl-icon-badge-default: $xpl-color-orange-500;
$xpl-icon-badge-yellow: $xpl-color-yellow-500;
$xpl-icon-badge-green: $xpl-color-green-500;
$xpl-icon-badge-red: $xpl-color-red-500;
$xpl-icon-badge-grey: $xpl-color-neutral-500;
$xpl-icon-badge-blue: $xpl-color-blue-500;
$xpl-icon-badge-purple: $xpl-color-purple-600;
$xpl-text-strong: $xpl-color-neutral-1100; // Bold text color, use for display text styles, page headings
$xpl-text-default: $xpl-color-neutral-900; // Use for primary text color such as body or titles in sentence case
$xpl-text-subdued: $xpl-color-neutral-700; // Use for subdued text such as descriptions and details
$xpl-text-inverse: $xpl-color-neutral-0; // Use on inverse surfaces (light on dark surface, dark on light surface)
$xpl-text-inverse-on-light: $xpl-color-neutral-1000; // Use on a light surface that does not mode switch
$xpl-text-inverse-on-dark: $xpl-color-neutral-0; // Use on text on a dark surface that does not mode switch
$xpl-text-positive: $xpl-color-green-800; // Use on positive sentiment text
$xpl-text-negative: $xpl-color-red-600; // Use on negative sentiment text
$xpl-text-disabled: $xpl-color-neutral-500; // Use on disabled text
$xpl-text-link-default: $xpl-color-green-800; // Use for link text
$xpl-text-link-hovered: $xpl-color-orange-900; // Use for default badge text
$xpl-text-link-visited: $xpl-color-yellow-900; // Use for yellow badge text
$xpl-text-badge-yellow: $xpl-color-yellow-800; // Use for yellow badge text
$xpl-text-badge-orange: $xpl-color-orange-700; // Use for orange badge text
$xpl-text-badge-green: $xpl-color-green-900; // Use for green badge text
$xpl-text-badge-red: $xpl-color-red-700; // Use for red badge text
$xpl-text-badge-gray: $xpl-color-neutral-700; // Use on grey badge text
$xpl-text-badge-blue: $xpl-color-blue-800; // Use on blue badge text
$xpl-text-badge-purple: $xpl-color-purple-800; // Use on purple badge text
$xpl-color-information-lm: $xpl-color-secondary-lm; // uses themable token
$xpl-color-information-dm: $xpl-color-secondary-dm; // uses themable token
$xpl-color-information-bg-lm: $xpl-color-secondary-bg-lm; // uses themable token
$xpl-color-text-action-lm: $xpl-color-primary-lm; // uses themable token
$xpl-color-text-action-dm: $xpl-color-primary-dm; // uses themable token
$xpl-border-badge-purple: $xpl-background-surface-transparent-0; // Blue badge surface
$xpl-border-badge-yellow: $xpl-background-surface-transparent-0; // Yellow badge surface
$xpl-border-badge-green: $xpl-background-surface-transparent-0; // Green badge surface
$xpl-border-badge-grey: $xpl-background-surface-transparent-0; // Grey badge surface
$xpl-border-badge-blue: $xpl-background-surface-transparent-0; // Blue badge surface
$xpl-border-badge-red: $xpl-background-surface-transparent-0; // Red badge surface
$xpl-border-badge-orange: $xpl-background-surface-transparent-0; // Orange badge border
$xpl-background-brand-secondary: $xpl-color-brand-secondary-gray; // Secondary brand color
$xpl-background-messaging-information: $xpl-background-surface-information; // Negative sentiment Toast surface
$xpl-background-messaging-positive: $xpl-background-surface-positive; // Green badge surface
$xpl-background-messaging-positive-bold: $xpl-background-accent-positive-bold; // Red Badge surface
$xpl-background-messaging-negative: $xpl-background-surface-negative; // Grey Badge surface
$xpl-background-messaging-negative-bold: $xpl-background-accent-negative-bold; // Blue badge surface
$xpl-chart-theme-vibrant-1: $xpl-chart-purple-bolder; // Vibrant theme color for the 1st data point
$xpl-chart-theme-vibrant-2: $xpl-chart-orange-light; // Vibrant theme color for the 2nd data point
$xpl-chart-theme-vibrant-3: $xpl-chart-pink-normal; // Vibrant theme color for the 3rd data point
$xpl-chart-theme-vibrant-4: $xpl-chart-yellow-light; // Vibrant theme color for the 4th data point
$xpl-chart-theme-vibrant-5: $xpl-chart-purple-bold; // Vibrant theme color for the 5th data point
$xpl-chart-theme-vibrant-6: $xpl-chart-green-normal; // Vibrant theme color for the 6th data point
$xpl-chart-theme-vibrant-7: $xpl-chart-pink-bold; // Vibrant theme color for the 7th data point
$xpl-chart-theme-vibrant-8: $xpl-chart-teal-light; // Vibrant theme color for the 8th data point
$xpl-chart-theme-sunset-1: $xpl-chart-purple-bolder; // Sunset theme color for the 1st data point
$xpl-chart-theme-sunset-2: $xpl-chart-purple-bold; // Sunset theme color for the 2nd data point
$xpl-chart-theme-sunset-3: $xpl-chart-orange-bold; // Sunset theme color for the 3rd data point
$xpl-chart-theme-sunset-4: $xpl-chart-orange-light; // Sunset theme color for the 4th data point
$xpl-chart-theme-sunset-5: $xpl-chart-yellow-light; // Sunset theme color for the 5th data point
$xpl-chart-theme-sunset-6: $xpl-chart-green-normal; // Sunset theme color for the 6th data point
$xpl-chart-theme-sunset-7: $xpl-chart-blue-normal; // Sunset theme color for the 7th data point
$xpl-chart-theme-sunset-8: $xpl-chart-blue-bolder; // Sunset theme color for the 8th data point
$xpl-chart-theme-warm-1: $xpl-chart-purple-bolder; // Warm theme color for the 1st data point
$xpl-chart-theme-warm-2: $xpl-chart-purple-bold; // Warm theme color for the 2th data point
$xpl-chart-theme-warm-3: $xpl-chart-pink-normal; // Warm theme color for the 3th data point
$xpl-chart-theme-warm-4: $xpl-chart-pink-light; // Warm theme color for the 4th data point
$xpl-chart-theme-warm-6: $xpl-chart-orange-normal; // Warm theme color for the 6th data point
$xpl-chart-theme-warm-7: $xpl-chart-yellow-normal; // Warm theme color for the 7th data point
$xpl-chart-theme-warm-8: $xpl-chart-yellow-bolder; // Warm theme color for the 8th data point
$xpl-chart-theme-cool-1: $xpl-chart-purple-boldest; // Cool theme color for the 1st data point
$xpl-chart-theme-cool-2: $xpl-chart-teal-lighter; // Cool theme color for the 2nd data point
$xpl-chart-theme-cool-3: $xpl-chart-purple-bold; // Cool theme color for the 3rd data point
$xpl-chart-theme-cool-4: $xpl-chart-teal-normal; // Cool theme color for the 4th data point
$xpl-chart-theme-cool-5: $xpl-chart-purple-bolder; // Cool theme color for the 5th data point
$xpl-chart-theme-cool-6: $xpl-chart-blue-normal; // Cool theme color for the 6th data point
$xpl-chart-theme-cool-7: $xpl-chart-purple-light; // Cool theme color for the 7th data point
$xpl-chart-theme-cool-8: $xpl-chart-blue-boldest; // Cool theme color for the 8th data point
$xpl-chart-theme-fun-1: $xpl-chart-blue-boldest; // Fun theme color for the 1st data point
$xpl-chart-theme-fun-2: $xpl-chart-teal-normal; // Fun theme color for the 2nd data point
$xpl-chart-theme-fun-3: $xpl-chart-green-bold; // Fun theme color for the 3th data point
$xpl-chart-theme-fun-4: $xpl-chart-purple-bold; // Fun theme color for the 4th data point
$xpl-chart-theme-fun-5: $xpl-chart-purple-light; // Fun theme color for the 5th data point
$xpl-chart-theme-fun-6: $xpl-chart-pink-normal; // Fun theme color for the 6th data point
$xpl-chart-theme-fun-7: $xpl-chart-orange-normal; // Fun theme color for the 7th data point
$xpl-chart-theme-fun-8: $xpl-chart-teal-light; // Fun theme color for the 8th data point
$xpl-chart-theme-twilight-1: $xpl-chart-purple-boldest; // Twilight theme color for the 1st data point
$xpl-chart-theme-twilight-2: $xpl-chart-purple-bold; // Twilight theme color for the 2nd data point
$xpl-chart-theme-twilight-3: $xpl-chart-purple-light; // Twilight theme color for the 3rd data point
$xpl-chart-theme-twilight-4: $xpl-chart-pink-light; // Twilight theme color for the 4th data point
$xpl-chart-theme-twilight-5: $xpl-chart-pink-normal; // Twilight theme color for the 5th data point
$xpl-chart-theme-twilight-6: $xpl-chart-orange-bold; // Twilight theme color for the 6th data point
$xpl-chart-theme-twilight-7: $xpl-chart-yellow-normal; // Twilight theme color for the 7th data point
$xpl-chart-theme-twilight-8: $xpl-chart-green-bold; // Twilight theme color for the 8th data point