@rolemodel/optics/dist/css/optics.css

Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.

@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap';
@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@100..700&display=block';
/* Third party Vendors */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Fonts */
/*
  Instead of hosting the font files locally which requires a compiler to handle them, we pull fonts
  from Google's CDN. For more information on the variable font, see:
  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
*/
/*
Noto Sans supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/*
  Noto Serif supports:
  font-weight: {anything between 100 and 900}
  font-stretch: {anything between 62.5% and 100%}
  font-style: {normal or italic}
*/
/* Noto Sans and Noto Serif */
/*
  See all icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
  This import of Material Symbols supports:
  font weight set through: font-variation-settings: 'wght' {100..700}
*/
/* Material Symbols */
/* Tokens */
:root {
  /* Color HSLs
    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
  */

  /* Basic Colors */

  /**
  * @tokens Basic Colors
  * @presenter Color
  */
  --op-color-white: hsl(0deg 100% 100%);
  --op-color-black: hsl(0deg 0% 0%);

  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-h: 216;
  --op-color-primary-s: 58%;
  --op-color-primary-l: 48%;

  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-h: var(--op-color-primary-h);
  --op-color-neutral-s: 4%;
  --op-color-neutral-l: var(--op-color-primary-l);

  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */
  --op-color-alerts-warning-h: 47;
  --op-color-alerts-warning-s: 100%;
  --op-color-alerts-warning-l: 61%;

  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */
  --op-color-alerts-danger-h: 0;
  --op-color-alerts-danger-s: 99%;
  --op-color-alerts-danger-l: 76%;

  /**
  * @tokens Alerts Info Colors
  * @presenter Color
  */
  --op-color-alerts-info-h: 216;
  --op-color-alerts-info-s: 58%;
  --op-color-alerts-info-l: 48%;

  /**
  * @tokens Alerts Notice Colors
  * @presenter Color
  */
  --op-color-alerts-notice-h: 130;
  --op-color-alerts-notice-s: 61%;
  --op-color-alerts-notice-l: 64%;

  /**
  * @tokens Opacities
  * @presenter Opacity
  */
  --op-opacity-none: 0;
  --op-opacity-overlay: 0.2;
  --op-opacity-disabled: 0.4;
  --op-opacity-half: 0.5;
  --op-opacity-full: 1;

  /*
    Breakpoints
    CSS does not support using variables within @media or @container queries. Environment variables are drafted but likely to not be implemented soon.
    https://drafts.csswg.org/css-env-1/
    https://bholmes.dev/blog/alternative-to-css-variable-media-queries/

    Here is a list of breakpoints used throughout Optics:
  */

  /**
  * @tokens Breakpoints
  * @presenter Spacing
  */
  --op-breakpoint-x-small: 512px; /* vertical phone */
  --op-breakpoint-small: 768px; /* vertical ipad */
  --op-breakpoint-medium: 1024px; /* landscape ipad */
  --op-breakpoint-large: 1280px; /* small laptop */
  --op-breakpoint-x-large: 1440px; /* medium laptop */

  /* Border */

  /**
  * @tokens Border Radius
  * @presenter BorderRadius
  */
  --op-radius-small: 2px;
  --op-radius-medium: 4px;
  --op-radius-large: 8px;
  --op-radius-x-large: 12px;
  --op-radius-2x-large: 16px;
  --op-radius-circle: 50%;
  --op-radius-pill: 9999px;

  /**
  * @tokens Border Width
  * @presenter Spacing
  */
  --op-border-width: 1px;
  --op-border-width-large: 2px;
  --op-border-width-x-large: 4px;

  /**
  * @tokens Border Color
  * @presenter Color
  */
  --op-color-border: var(--op-color-neutral-plus-five);

  /* E.G. box-shadow: var(--op-border-top) var(--op-color-border); */

  /**
  * @tokens Border Shadow
  * @presenter Shadow
  */
  --op-border-none: 0 0 0 0;
  --op-border-all: 0 0 0 var(--op-border-width);
  --op-border-top: 0 calc(-1 * var(--op-border-width)) 0 0;
  --op-border-right: var(--op-border-width) 0 0 0;
  --op-border-bottom: 0 var(--op-border-width) 0 0;
  --op-border-left: calc(-1 * var(--op-border-width)) 0 0 0;
  --op-border-y: var(--op-border-top) var(--op-color-border), var(--op-border-bottom) var(--op-color-border);
  --op-border-x: var(--op-border-left) var(--op-color-border), var(--op-border-right) var(--op-color-border);

  /* Font */

  /**
  * @tokens Font Scale
  * @presenter FontSize
  */
  --op-font-scale-unit: 1rem; /* 10px; */
  --op-font-2x-small: calc(var(--op-font-scale-unit) * 1); /* 10px */
  --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2); /* 12px */
  --op-font-small: calc(var(--op-font-scale-unit) * 1.4); /* 14px */
  --op-font-medium: calc(var(--op-font-scale-unit) * 1.6); /* 16px */
  --op-font-large: calc(var(--op-font-scale-unit) * 1.8); /* 18px */
  --op-font-x-large: calc(var(--op-font-scale-unit) * 2); /* 20px */
  --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4); /* 24px */
  --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8); /* 28px */
  --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2); /* 32px */
  --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6); /* 36px */
  --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8); /* 48px */

  /**
  * @tokens Font Weight
  * @presenter FontWeight
  */
  --op-font-weight-thin: 100;
  --op-font-weight-extra-light: 200;
  --op-font-weight-light: 300;
  --op-font-weight-normal: 400;
  --op-font-weight-medium: 500;
  --op-font-weight-semi-bold: 600;
  --op-font-weight-bold: 700;
  --op-font-weight-extra-bold: 800;
  --op-font-weight-black: 900;

  /**
  * @tokens Font Family
  * @presenter FontFamily
  */
  --op-font-family: 'Noto Sans', sans-serif;
  --op-font-family-alt: 'Noto Serif', serif;

  /* Text */

  /**
  * @tokens Line Height
  * @presenter LineHeight
  */
  --op-line-height-none: 0;
  --op-line-height-densest: 1;
  --op-line-height-denser: 1.15;
  --op-line-height-dense: 1.3;
  --op-line-height-base: 1.5;
  --op-line-height-loose: 1.6;
  --op-line-height-looser: 1.7;
  --op-line-height-loosest: 1.8;

  /**
  * @tokens Letter Spacing
  * @presenter LetterSpacing
  */
  --op-letter-spacing-navigation: 0.01rem;
  --op-letter-spacing-label: 0.04rem;

  /* Transitions and Animations */

  /**
  * @tokens Transition
  */
  --op-transition-accordion: rotate 120ms ease-in;
  --op-transition-accordion-content: height 300ms ease, content-visibility 300ms ease allow-discrete;
  --op-transition-input: all 120ms ease-in;
  --op-transition-sidebar: all 200ms ease-in-out;
  --op-transition-modal: all 300ms ease-in;
  --op-transition-panel: right 400ms ease-in;
  --op-transition-tooltip: all 300ms ease-in 300ms;

  /**
  * @tokens Animation
  * @presenter Animation
  */
  --op-animation-flash: rm-slide-in-out-flash 5s normal forwards;

  /* Encoded Images */

  /**
  * @tokens Encoded Images
  */
  --op-encoded-images-dropdown-arrow-width: calc(
    1.2 * var(--op-space-scale-unit)
  ); /* 12px No way to string interpolate */

  --op-encoded-images-dropdown-arrow: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiMwQTBBMEIiLz4KPC9zdmc+Cg==');

  /* Spacing */

  /**
  * @tokens Size Scale
  * @presenter Spacing
  */
  --op-size-unit: 0.4rem; /* 4px */

  /**
  * @tokens Space Scale
  * @presenter Spacing
  */
  --op-space-scale-unit: 1rem; /* 10px; */
  --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2); /* 2px */
  --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4); /* 4px */
  --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8); /* 8px */
  --op-space-small: calc(var(--op-space-scale-unit) * 1.2); /* 12px */
  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6); /* 16px */
  --op-space-large: calc(var(--op-space-scale-unit) * 2); /* 20px */
  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4); /* 24px */
  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8); /* 28px */
  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4); /* 40px */
  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8); /* 80px */

  /* Shadows */

  /**
  * @tokens Shadows
  * @presenter Shadow
  */
  --op-shadow-x-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 1px 3px hsl(0deg 0% 0% / 15%);
  --op-shadow-small: 0 1px 2px hsl(0deg 0% 0% / 3%), 0 2px 6px hsl(0deg 0% 0% / 15%);
  --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 3%);
  --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 3%);

  /* Z Index */

  /**
  * @tokens Z-Index
  */
  --op-z-index-header: 500;
  --op-z-index-footer: 500;
  --op-z-index-sidebar: 700;
  --op-z-index-dialog: 800;
  --op-z-index-dialog-backdrop: 801;
  --op-z-index-dialog-content: 802;
  --op-z-index-dropdown: 900;
  --op-z-index-alert-group: 950;
  --op-z-index-tooltip: 1000;

  /* Inputs */

  /*
    This should follow multiples of 4
    https: //uxdesign.cc/baseline-grids-design-systems-ae23b5af8cec See example 8
  */

  /**
  * @tokens Input Heights
  * @presenter Spacing
  */
  --op-input-height-small: 2.8rem; /* 28px */
  --op-input-height-medium: 3.6rem; /* 36px */
  --op-input-height-large: 4rem; /* 40px */
  --op-input-height-x-large: 8.4rem; /* 84px */

  /**
  * @tokens Input Focus
  * @presenter Shadow
  */
  --op-input-inner-focus: inset 0 0 0 var(--op-border-width-large);
  --op-input-outer-focus: 0 0 0 var(--op-border-width-x-large);
  --op-input-focus-primary: var(--op-input-inner-focus) var(--op-color-primary-plus-two),
    var(--op-input-outer-focus) var(--op-color-primary-plus-five);
  --op-input-focus-neutral: var(--op-input-inner-focus) var(--op-color-neutral-plus-two),
    var(--op-input-outer-focus) var(--op-color-neutral-plus-five);
  --op-input-focus-danger: var(--op-input-inner-focus) var(--op-color-alerts-danger-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-danger-plus-five);
  --op-input-focus-warning: var(--op-input-inner-focus) var(--op-color-alerts-warning-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-warning-plus-five);
  --op-input-focus-info: var(--op-input-inner-focus) var(--op-color-alerts-info-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-info-plus-five);
  --op-input-focus-notice: var(--op-input-inner-focus) var(--op-color-alerts-notice-plus-two),
    var(--op-input-outer-focus) var(--op-color-alerts-notice-plus-five);
}
/* Animations */
@keyframes rm-slide-in-out-flash {
  /*
    If an duration of 5s is set:
    Start off the Screen
  */
  0% {
    right: -100%;
  }

  /* Animate onto the screen for 0.5s */
  10% {
    right: var(--op-space-large);
  }

  /* Stay on the screen for 3s */
  70% {
    right: var(--op-space-large);
  }

  /* Animate off the screen for 1.5s */
  100% {
    right: -100%;
  }
}
:root {
  /* Enable light and dark mode switching */
  color-scheme: light dark;

  /*
    Semantic Scales: plus adds luminosity, minus removes luminosity
    This borrows from the photography concept of Aperture f-stops.
    https://www.adobe.com/creativecloud/photography/discover/f-stop.html
  */

  /**
  * @tokens Primary Colors
  * @presenter Color
  */
  --op-color-primary-original: hsl(var(--op-color-primary-h) var(--op-color-primary-s) var(--op-color-primary-l));

  /* Main Scale */
  --op-color-primary-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%)
  );
  --op-color-primary-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%)
  );
  --op-color-primary-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%)
  );
  --op-color-primary-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%)
  );
  --op-color-primary-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%)
  );
  --op-color-primary-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%)
  );
  --op-color-primary-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%)
  );
  --op-color-primary-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%)
  );
  --op-color-primary-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%)
  );
  --op-color-primary-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%)
  );
  --op-color-primary-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%)
  );
  --op-color-primary-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );

  /* On Scale */
  --op-color-primary-on-plus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-plus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%)
  );
  --op-color-primary-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%)
  );
  --op-color-primary-on-plus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%)
  );
  --op-color-primary-on-plus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-plus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%)
  );
  --op-color-primary-on-plus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%)
  );
  --op-color-primary-on-plus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%)
  );
  --op-color-primary-on-plus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-plus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-plus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%)
  );
  --op-color-primary-on-plus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-base: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%)
  );
  --op-color-primary-on-base-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%)
  );
  --op-color-primary-on-minus-one: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-one-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%)
  );
  --op-color-primary-on-minus-two: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-two-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%)
  );
  --op-color-primary-on-minus-three: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%)
  );
  --op-color-primary-on-minus-three-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%)
  );
  --op-color-primary-on-minus-four: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-four-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%)
  );
  --op-color-primary-on-minus-five-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%)
  );
  --op-color-primary-on-minus-six: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-six-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%)
  );
  --op-color-primary-on-minus-seven: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%)
  );
  --op-color-primary-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%)
  );
  --op-color-primary-on-minus-eight: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%)
  );
  --op-color-primary-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );
  --op-color-primary-on-minus-max: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%)
  );
  --op-color-primary-on-minus-max-alt: light-dark(
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%),
    hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%)
  );

  /**
  * @tokens Neutral Colors
  * @presenter Color
  */
  --op-color-neutral-original: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) var(--op-color-neutral-l));

  /* Main Scale */
  --op-color-neutral-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%)
  );
  --op-color-neutral-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%)
  );
  --op-color-neutral-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%)
  );
  --op-color-neutral-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%)
  );
  --op-color-neutral-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%)
  );
  --op-color-neutral-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%)
  );
  --op-color-neutral-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%)
  );
  --op-color-neutral-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%)
  );
  --op-color-neutral-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%)
  );
  --op-color-neutral-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%)
  );
  --op-color-neutral-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );

  /* On Scale */
  --op-color-neutral-on-plus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%)
  );
  --op-color-neutral-on-plus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%)
  );
  --op-color-neutral-on-plus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-plus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%)
  );
  --op-color-neutral-on-plus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%)
  );
  --op-color-neutral-on-plus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%)
  );
  --op-color-neutral-on-plus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%)
  );
  --op-color-neutral-on-plus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%)
  );
  --op-color-neutral-on-plus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-plus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%)
  );
  --op-color-neutral-on-base: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%)
  );
  --op-color-neutral-on-base-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%)
  );
  --op-color-neutral-on-minus-one: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-one-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-two: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%)
  );
  --op-color-neutral-on-minus-two-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%)
  );
  --op-color-neutral-on-minus-three: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%)
  );
  --op-color-neutral-on-minus-three-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%)
  );
  --op-color-neutral-on-minus-four: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%)
  );
  --op-color-neutral-on-minus-four-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-five: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%)
  );
  --op-color-neutral-on-minus-five-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%)
  );
  --op-color-neutral-on-minus-six: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-six-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%)
  );
  --op-color-neutral-on-minus-seven: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%)
  );
  --op-color-neutral-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%)
  );
  --op-color-neutral-on-minus-eight: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%)
  );
  --op-color-neutral-on-minus-max: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%)
  );
  --op-color-neutral-on-minus-max-alt: light-dark(
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%),
    hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%)
  );

  /**
  * @tokens Alerts Warning Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-warning-original: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) var(--op-color-alerts-warning-l));

  /* Main Scale */
  --op-color-alerts-warning-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%)
  );
  --op-color-alerts-warning-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%)
  );
  --op-color-alerts-warning-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%)
  );
  --op-color-alerts-warning-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%)
  );
  --op-color-alerts-warning-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%)
  );
  --op-color-alerts-warning-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%)
  );
  --op-color-alerts-warning-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%)
  );
  --op-color-alerts-warning-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%)
  );
  --op-color-alerts-warning-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%)
  );

  /* On Scale */
  --op-color-alerts-warning-on-plus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%)
  );
  --op-color-alerts-warning-on-plus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%)
  );
  --op-color-alerts-warning-on-plus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%)
  );
  --op-color-alerts-warning-on-plus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%)
  );
  --op-color-alerts-warning-on-plus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%)
  );
  --op-color-alerts-warning-on-plus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%)
  );
  --op-color-alerts-warning-on-plus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-plus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%)
  );
  --op-color-alerts-warning-on-plus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-base: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-base-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%)
  );
  --op-color-alerts-warning-on-minus-one: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-one-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%)
  );
  --op-color-alerts-warning-on-minus-two: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-two-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%)
  );
  --op-color-alerts-warning-on-minus-three: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%)
  );
  --op-color-alerts-warning-on-minus-three-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-four: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%)
  );
  --op-color-alerts-warning-on-minus-four-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%)
  );
  --op-color-alerts-warning-on-minus-five: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-five-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%)
  );
  --op-color-alerts-warning-on-minus-six: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%)
  );
  --op-color-alerts-warning-on-minus-six-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%)
  );
  --op-color-alerts-warning-on-minus-seven: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%)
  );
  --op-color-alerts-warning-on-minus-seven-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );
  --op-color-alerts-warning-on-minus-eight: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%)
  );
  --op-color-alerts-warning-on-minus-eight-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%)
  );
  --op-color-alerts-warning-on-minus-max: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%)
  );
  --op-color-alerts-warning-on-minus-max-alt: light-dark(
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%),
    hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%)
  );

  /**
  * @tokens Alerts Danger Colors
  * @presenter Color
  */

  /* prettier-ignore */
  --op-color-alerts-danger-original: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) var(--op-color-alerts-danger-l));

  /* Main Scale */
  --op-color-alerts-danger-plus-max: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%)
  );
  --op-color-alerts-danger-plus-eight: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%)
  );
  --op-color-alerts-danger-plus-seven: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%)
  );
  --op-color-alerts-danger-plus-six: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%)
  );
  --op-color-alerts-danger-plus-five: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%)
  );
  --op-color-alerts-danger-plus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%)
  );
  --op-color-alerts-danger-plus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%)
  );
  --op-color-alerts-danger-plus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
  );
  --op-color-alerts-danger-plus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
  );
  --op-color-alerts-danger-base: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%)
  );
  --op-color-alerts-danger-minus-one: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%)
  );
  --op-color-alerts-danger-minus-two: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%)
  );
  --op-color-alerts-danger-minus-three: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%)
  );
  --op-color-alerts-danger-minus-four: light-dark(
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%),
    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger