npm - @rolemodel/optics - Versions diffs - 1.12.0 → 1.13.1 - Mend

@rolemodel/optics 1.12.0 → 1.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/.yarn/install-state.gz +0 -0
package/dist/css/optics.css +1546 -1157
package/dist/css/optics.css.map +1 -1
package/dist/scss/addons/panel.css +65 -0
package/dist/scss/addons/{tom-select.scss → tom-select.css} +13 -15
package/dist/scss/components/{icon.scss → icon.css} +10 -8
package/dist/scss/core/{base.scss → base.css} +3 -3
package/dist/scss/core/tokens/{base_tokens.scss → base_tokens.css} +102 -160
package/dist/scss/core/tokens/index.scss +0 -1
package/dist/scss/core/tokens/scale_color_tokens.css +1498 -0
package/dist/scss/core/{utilities.scss → utilities.css} +20 -18
package/dist/scss/recipes/{aligned-header.scss → aligned-header.css} +2 -6
package/dist/tokens/tokens.json +14 -566
package/package.json +1 -1
package/public/design-tokens.source.json +1 -0
package/dist/scss/addons/panel.scss +0 -61
package/dist/scss/core/tokens/dark_mode_tokens.scss +0 -479
package/dist/scss/core/tokens/scale_color_tokens.scss +0 -468
/package/dist/scss/core/{layout.scss → layout.css} +0 -0

package/dist/css/optics.css CHANGED Viewed

@@ -1,6 +1,6 @@
 /* Box sizing rules */
-@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:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block';
+@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:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
 *,
 *::before,
 *::after {
@@ -74,20 +74,22 @@ select {
   }
 }
 /*
-  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
-  --op-breakpoint-x-small: 512px;
-  --op-breakpoint-small: 768px;
-  --op-breakpoint-medium: 1024px;
-  --op-breakpoint-large: 1280px;
-  --op-breakpoint-x-large: 1440px;
+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}
 */
 :root {
+  /* Color HSLs
+    A theme comprised of a primary, neutral, warning, danger, info, and notice colors.
+  */
+  /* Basic Colors */
   /**
   * @tokens Basic Colors
   * @presenter Color
@@ -145,15 +147,24 @@ select {
   --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;
-  --op-breakpoint-small: 768px;
-  --op-breakpoint-medium: 1024px;
-  --op-breakpoint-large: 1280px;
-  --op-breakpoint-x-large: 1440px;
+  --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
@@ -177,6 +188,7 @@ select {
   * @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
@@ -189,22 +201,23 @@ select {
   --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;
-  --op-font-2x-small: calc(var(--op-font-scale-unit) * 1);
-  --op-font-x-small: calc(var(--op-font-scale-unit) * 1.2);
-  --op-font-small: calc(var(--op-font-scale-unit) * 1.4);
-  --op-font-medium: calc(var(--op-font-scale-unit) * 1.6);
-  --op-font-large: calc(var(--op-font-scale-unit) * 1.8);
-  --op-font-x-large: calc(var(--op-font-scale-unit) * 2);
-  --op-font-2x-large: calc(var(--op-font-scale-unit) * 2.4);
-  --op-font-3x-large: calc(var(--op-font-scale-unit) * 2.8);
-  --op-font-4x-large: calc(var(--op-font-scale-unit) * 3.2);
-  --op-font-5x-large: calc(var(--op-font-scale-unit) * 3.6);
-  --op-font-6x-large: calc(var(--op-font-scale-unit) * 4.8);
+  --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
@@ -224,6 +237,7 @@ select {
   */
   --op-font-family: "Noto Sans", sans-serif;
   --op-font-family-alt: "Noto Serif", serif;
+  /* Text */
   /**
   * @tokens Line Height
   * @presenter LineHeight
@@ -242,6 +256,7 @@ select {
   */
   --op-letter-spacing-navigation: 0.01rem;
   --op-letter-spacing-label: 0.04rem;
+  /* Transitions and Animations */
   /**
   * @tokens Transition
   */
@@ -256,31 +271,36 @@ select {
   * @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));
+  --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;
+  --op-size-unit: 0.4rem; /* 4px */
   /**
   * @tokens Space Scale
   * @presenter Spacing
   */
-  --op-space-scale-unit: 1rem;
-  --op-space-3x-small: calc(var(--op-space-scale-unit) * 0.2);
-  --op-space-2x-small: calc(var(--op-space-scale-unit) * 0.4);
-  --op-space-x-small: calc(var(--op-space-scale-unit) * 0.8);
-  --op-space-small: calc(var(--op-space-scale-unit) * 1.2);
-  --op-space-medium: calc(var(--op-space-scale-unit) * 1.6);
-  --op-space-large: calc(var(--op-space-scale-unit) * 2);
-  --op-space-x-large: calc(var(--op-space-scale-unit) * 2.4);
-  --op-space-2x-large: calc(var(--op-space-scale-unit) * 2.8);
-  --op-space-3x-large: calc(var(--op-space-scale-unit) * 4);
-  --op-space-4x-large: calc(var(--op-space-scale-unit) * 8);
+  --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
@@ -290,6 +310,7 @@ select {
   --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
   */
@@ -302,14 +323,19 @@ select {
   --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;
-  --op-input-height-medium: 3.6rem;
-  --op-input-height-large: 4rem;
-  --op-input-height-x-large: 8.4rem;
+  --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
@@ -330,1152 +356,1467 @@ select {
     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));
-  --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
-  --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
-  --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
-  --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
-  --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
-  --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
-  --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
-  --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
-  --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 36%);
-  --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
-  --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
-  --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
-  --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-  --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
-  --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
-  --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
-  --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
-  --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
-  --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-  --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
-  --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
-  --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
-  --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 28%);
-  --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
-  --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
-  --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-  --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
-  --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
-  --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
-  --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-  --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 10%);
-  --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
-  --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 6%);
-  --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 95%);
-  --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
-  --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
-  --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
-  --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
-  --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
-  --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
-  --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 74%);
-  --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
-  --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-  --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
-  --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
-  --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 94%);
-  --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 82%);
-  --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
-  --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
-  --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
-  --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
+  /* 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));
-  --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
-  --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
-  --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
-  --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-  --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
-  --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 70%);
-  --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
-  --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
-  --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
-  --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
-  --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
-  --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
-  --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
-  --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-  --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
-  --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
-  --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-  --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
-  --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 0%);
-  --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
-  --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-  --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 34%);
-  --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
-  --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 28%);
-  --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
-  --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
-  --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-  --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
-  --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
-  --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-  --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-  --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
-  --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
-  --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 6%);
-  --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
-  --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-  --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
-  --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
-  --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-  --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
-  --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
-  --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 74%);
-  --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
-  --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
-  --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-  --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 76%);
-  --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
-  --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 82%);
-  --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 96%);
-  --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 84%);
-  --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
-  --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 86%);
-  --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
+  /* 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));
-  --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
-  --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
-  --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
-  --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
-  --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 90%);
-  --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-  --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-  --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
-  --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
-  --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
-  --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
-  --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
-  --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 18%);
-  --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
-  --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
-  --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
-  --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
-  --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-  --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-  --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-  --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
-  --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-  --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-  --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
-  --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
-  --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
-  --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 25%);
-  --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-  --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
-  --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
-  --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
-  --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 15%);
-  --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
-  --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-  --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
-  --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
-  --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
-  --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 92%);
-  --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-  --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
-  --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 76%);
-  --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 94%);
-  --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 82%);
-  --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
-  --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 84%);
-  --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 98%);
-  --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 86%);
-  --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
-  --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
+  /* 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));
-  --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-  --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
-  --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
-  --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
-  --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
-  --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
-  --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
-  --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
-  --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 50%);
-  --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
-  --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
-  --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
-  --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
-  --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-  --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
-  --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
-  --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-  --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-  --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
-  --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
-  --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
-  --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-  --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-  --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-  --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
-  --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
-  --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
-  --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
-  --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%);
-  --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-  --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-  --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
-  --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
-  --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
-  --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
-  --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-  --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%);
-  --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-  --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
-  --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
-  --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
-  --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
-  --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%);
-  --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%);
-  --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%);
-  --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
-  --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%);
-  --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%);
-  --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 94%);
-  --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%);
-  --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
-  --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%);
-  --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
-  --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%);
-  --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-  --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
+  /* 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-s) 52%)
+  );
+  --op-color-alerts-danger-minus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%)
+  );
+  --op-color-alerts-danger-minus-six: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
+  );
+  --op-color-alerts-danger-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
+  );
+  --op-color-alerts-danger-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-minus-max: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
+  );
+  /* On Scale */
+  --op-color-alerts-danger-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%)
+  );
+  --op-color-alerts-danger-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-eight-alt: 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-s) 78%)
+  );
+  --op-color-alerts-danger-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%)
+  );
+  --op-color-alerts-danger-on-plus-seven-alt: 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) 70%)
+  );
+  --op-color-alerts-danger-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%)
+  );
+  --op-color-alerts-danger-on-plus-six-alt: 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) 68%)
+  );
+  --op-color-alerts-danger-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
+  );
+  --op-color-alerts-danger-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 30%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%)
+  );
+  --op-color-alerts-danger-on-plus-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-s) 80%)
+  );
+  --op-color-alerts-danger-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%)
+  );
+  --op-color-alerts-danger-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
+  );
+  --op-color-alerts-danger-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%)
+  );
+  --op-color-alerts-danger-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%)
+  );
+  --op-color-alerts-danger-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 3%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%)
+  );
+  --op-color-alerts-danger-on-base: 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) 98%)
+  );
+  --op-color-alerts-danger-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%)
+  );
+  --op-color-alerts-danger-on-minus-one: 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) 96%)
+  );
+  --op-color-alerts-danger-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%)
+  );
+  --op-color-alerts-danger-on-minus-two: 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) 98%)
+  );
+  --op-color-alerts-danger-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 83%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%)
+  );
+  --op-color-alerts-danger-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 86%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%)
+  );
+  --op-color-alerts-danger-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 79%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
+  );
+  --op-color-alerts-danger-on-minus-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) 4%)
+  );
+  --op-color-alerts-danger-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 77%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
+  );
+  --op-color-alerts-danger-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%)
+  );
+  --op-color-alerts-danger-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 81%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%)
+  );
+  --op-color-alerts-danger-on-minus-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) 8%)
+  );
+  --op-color-alerts-danger-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 87%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%)
+  );
+  --op-color-alerts-danger-on-minus-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-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 89%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%)
+  );
+  --op-color-alerts-danger-on-minus-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-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 91%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
+  );
+  --op-color-alerts-danger-on-minus-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-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%),
+    hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%)
+  );
   /**
   * @tokens Alerts Info Colors
   * @presenter Color
   */
+  /* prettier-ignore */
   --op-color-alerts-info-original: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) var(--op-color-alerts-info-l));
-  --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-  --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
-  --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
-  --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-  --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
-  --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
-  --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
-  --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
-  --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%);
-  --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
-  --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
-  --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
-  --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-  --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
-  --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-  --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
-  --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-  --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
-  --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
-  --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-  --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
-  --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-  --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-  --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
-  --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
-  --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-  --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
-  --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
-  --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-  --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%);
-  --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
-  --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%);
-  --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-  --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%);
-  --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-  --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-  --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
-  --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%);
-  --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-  --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
-  --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
-  --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
-  --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
-  --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
-  --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-  --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%);
-  --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
-  --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%);
-  --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
-  --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
-  --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-  --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
+  /* Main Scale */
+  --op-color-alerts-info-plus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
+  );
+  --op-color-alerts-info-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
+  );
+  --op-color-alerts-info-plus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%)
+  );
+  --op-color-alerts-info-plus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%)
+  );
+  --op-color-alerts-info-plus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%)
+  );
+  --op-color-alerts-info-plus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
+  );
+  --op-color-alerts-info-plus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%)
+  );
+  --op-color-alerts-info-plus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 56%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
+  );
+  --op-color-alerts-info-base: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
+  );
+  --op-color-alerts-info-minus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%)
+  );
+  --op-color-alerts-info-minus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%)
+  );
+  --op-color-alerts-info-minus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%)
+  );
+  --op-color-alerts-info-minus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%)
+  );
+  --op-color-alerts-info-minus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%)
+  );
+  --op-color-alerts-info-minus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
+  );
+  --op-color-alerts-info-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-minus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
+  );
+  /* On Scale */
+  --op-color-alerts-info-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%)
+  );
+  --op-color-alerts-info-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
+  );
+  --op-color-alerts-info-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%)
+  );
+  --op-color-alerts-info-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
+  );
+  --op-color-alerts-info-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
+  );
+  --op-color-alerts-info-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%)
+  );
+  --op-color-alerts-info-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%)
+  );
+  --op-color-alerts-info-on-plus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%)
+  );
+  --op-color-alerts-info-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 10%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%)
+  );
+  --op-color-alerts-info-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%)
+  );
+  --op-color-alerts-info-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 6%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%)
+  );
+  --op-color-alerts-info-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
+  );
+  --op-color-alerts-info-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 3%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-base: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
+  );
+  --op-color-alerts-info-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%)
+  );
+  --op-color-alerts-info-on-minus-one: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
+  );
+  --op-color-alerts-info-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%)
+  );
+  --op-color-alerts-info-on-minus-two: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 90%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%)
+  );
+  --op-color-alerts-info-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%)
+  );
+  --op-color-alerts-info-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%)
+  );
+  --op-color-alerts-info-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%)
+  );
+  --op-color-alerts-info-on-minus-four: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
+  );
+  --op-color-alerts-info-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%)
+  );
+  --op-color-alerts-info-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%)
+  );
+  --op-color-alerts-info-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%)
+  );
+  --op-color-alerts-info-on-minus-six: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 82%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
+  );
+  --op-color-alerts-info-on-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 84%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%)
+  );
+  --op-color-alerts-info-on-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%)
+  );
+  --op-color-alerts-info-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%)
+  );
+  --op-color-alerts-info-on-minus-max: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%)
+  );
+  --op-color-alerts-info-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%),
+    hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%)
+  );
   /**
   * @tokens Alerts Notice Colors
   * @presenter Color
   */
+  /* prettier-ignore */
   --op-color-alerts-notice-original: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) var(--op-color-alerts-notice-l));
-  --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-  --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-  --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
-  --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
-  --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
-  --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
-  --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%);
-  --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
-  --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%);
-  --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
-  --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
-  --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
-  --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
-  --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%);
-  --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
-  --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-  --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
-  --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
-  --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-  --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-  --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-  --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
-  --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
-  --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
-  --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
-  --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-  --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
-  --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-  --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%);
-  --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
-  --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
-  --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-  --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
-  --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-  --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
-  --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
-  --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%);
-  --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
-  --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-  --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-  --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
-  --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
-  --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%);
-  --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
-  --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%);
-  --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-  --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%);
-  --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-  --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%);
-  --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
-  --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
-  --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
-  --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
-  --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-  --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%);
-  --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-  --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
+  /* Main Scale */
+  --op-color-alerts-notice-plus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
+  );
+  --op-color-alerts-notice-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%)
+  );
+  --op-color-alerts-notice-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%)
+  );
+  --op-color-alerts-notice-plus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%)
+  );
+  --op-color-alerts-notice-plus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%)
+  );
+  --op-color-alerts-notice-plus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
+  );
+  --op-color-alerts-notice-plus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 70%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
+  );
+  --op-color-alerts-notice-plus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
+  );
+  --op-color-alerts-notice-plus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 47%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
+  );
+  --op-color-alerts-notice-base: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%)
+  );
+  --op-color-alerts-notice-minus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%)
+  );
+  --op-color-alerts-notice-minus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%)
+  );
+  --op-color-alerts-notice-minus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%)
+  );
+  --op-color-alerts-notice-minus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 22%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%)
+  );
+  --op-color-alerts-notice-minus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%)
+  );
+  --op-color-alerts-notice-minus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
+  );
+  --op-color-alerts-notice-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
+  );
+  --op-color-alerts-notice-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
+  );
+  --op-color-alerts-notice-minus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
+  );
+  /* On Scale */
+  --op-color-alerts-notice-on-plus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%)
+  );
+  --op-color-alerts-notice-on-plus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
+  );
+  --op-color-alerts-notice-on-plus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
+  );
+  --op-color-alerts-notice-on-plus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%)
+  );
+  --op-color-alerts-notice-on-plus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%)
+  );
+  --op-color-alerts-notice-on-plus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
+  );
+  --op-color-alerts-notice-on-plus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
+  );
+  --op-color-alerts-notice-on-plus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
+  );
+  --op-color-alerts-notice-on-plus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%)
+  );
+  --op-color-alerts-notice-on-plus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 30%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%)
+  );
+  --op-color-alerts-notice-on-plus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%)
+  );
+  --op-color-alerts-notice-on-plus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%)
+  );
+  --op-color-alerts-notice-on-plus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
+  );
+  --op-color-alerts-notice-on-plus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%)
+  );
+  --op-color-alerts-notice-on-plus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
+  );
+  --op-color-alerts-notice-on-plus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%)
+  );
+  --op-color-alerts-notice-on-plus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%)
+  );
+  --op-color-alerts-notice-on-plus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 3%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%)
+  );
+  --op-color-alerts-notice-on-base: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%)
+  );
+  --op-color-alerts-notice-on-base-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%)
+  );
+  --op-color-alerts-notice-on-minus-one: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-one-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%)
+  );
+  --op-color-alerts-notice-on-minus-two: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-two-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 89%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%)
+  );
+  --op-color-alerts-notice-on-minus-three: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-three-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 85%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%)
+  );
+  --op-color-alerts-notice-on-minus-four: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-four-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 81%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
+  );
+  --op-color-alerts-notice-on-minus-five: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%)
+  );
+  --op-color-alerts-notice-on-minus-five-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 76%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%)
+  );
+  --op-color-alerts-notice-on-minus-six: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-six-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%)
+  );
+  --op-color-alerts-notice-on-minus-seven: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-seven-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%)
+  );
+  --op-color-alerts-notice-on-minus-eight: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%)
+  );
+  --op-color-alerts-notice-on-minus-eight-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 86%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%)
+  );
+  --op-color-alerts-notice-on-minus-max: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%)
+  );
+  --op-color-alerts-notice-on-minus-max-alt: light-dark(
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%),
+    hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%)
+  );
   /**
-  * @tokens Basic Colors
-  * @presenter Color
+  * @tokens Dark Shadows
+  * @presenter Shadow
   */
   --op-color-background: var(--op-color-neutral-plus-eight);
   --op-color-on-background: var(--op-color-neutral-on-plus-eight);
   --op-color-on-background-alt: var(--op-color-neutral-on-plus-eight-alt);
 }
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme-mode=light]) {
-    /**
-    * @tokens Primary Dark Colors
-    * @presenter Color
-    */
-    --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
-    --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
-    --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
-    --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-    --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
-    --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
-    --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
-    --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
-    --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
-    --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
-    --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
-    --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
-    --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
-    --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
-    --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
-    --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-    --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-    --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
-    --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-    --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-    --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
-    --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
-    --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
-    --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-    --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
-    --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-    --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
-    --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-    --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
-    --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-    --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
-    --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
-    --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-    --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-    --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
-    --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-    --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-    --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-    --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
-    --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-    --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
-    --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-    --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
-    --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-    --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
-    --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
-    --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
-    --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
-    --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-    --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
-    --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
-    --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
-    --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
-    --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
-    --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
-    --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
-    --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
-    /**
-    * @tokens Neutral Dark Colors
-    * @presenter Color
-    */
-    --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
-    --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
-    --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
-    --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
-    --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
-    --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-    --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
-    --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
-    --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
-    --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
-    --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
-    --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
-    --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
-    --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
-    --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
-    --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-    --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
-    --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-    --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-    --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-    --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
-    --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-    --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
-    --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
-    --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
-    --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-    --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
-    --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-    --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-    --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
-    --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
-    --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-    --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
-    --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-    --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-    --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-    --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
-    --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-    --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
-    --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-    --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
-    --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-    --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
-    --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
-    --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
-    --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
-    --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
-    --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-    --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
-    --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-    --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
-    --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
-    --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
-    --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-    --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
-    --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-    --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
-    /**
-    * @tokens Alerts Warning Dark Colors
-    * @presenter Color
-    */
-    --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-    --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
-    --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-    --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
-    --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
-    --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
-    --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-    --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-    --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
-    --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
-    --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
-    --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
-    --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
-    --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
-    --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
-    --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
-    --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-    --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-    --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
-    --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-    --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
-    --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-    --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-    --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-    --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
-    --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
-    --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
-    --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
-    --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
-    --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-    --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
-    --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-    --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-    --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-    --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-    --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
-    --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
-    --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-    --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
-    --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-    --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-    --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-    --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
-    --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-    --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-    --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
-    --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-    --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-    --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
-    --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
-    --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
-    --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-    --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-    --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
-    --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
-    --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-    --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-    /**
-    * @tokens Alerts Danger Dark Colors
-    * @presenter Color
-    */
-    --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
-    --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-    --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-    --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
-    --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
-    --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
-    --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
-    --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-    --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
-    --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
-    --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
-    --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
-    --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
-    --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
-    --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
-    --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
-    --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
-    --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-    --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-    --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-    --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-    --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-    --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
-    --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
-    --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
-    --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
-    --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
-    --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
-    --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
-    --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
-    --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
-    --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-    --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
-    --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-    --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
-    --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
-    --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
-    --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
-    --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
-    --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
-    --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-    --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
-    --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
-    --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
-    --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
-    --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-    --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
-    --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
-    --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
-    --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-    --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
-    --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-    --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
-    --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-    --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-    --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
-    --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-    /**
-    * @tokens Alerts Info Dark Colors
-    * @presenter Color
-    */
-    --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
-    --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-    --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-    --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
-    --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
-    --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
-    --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-    --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
-    --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-    --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
-    --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
-    --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
-    --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
-    --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
-    --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
-    --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
-    --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-    --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-    --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-    --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-    --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-    --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-    --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-    --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-    --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
-    --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-    --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
-    --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
-    --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
-    --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-    --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
-    --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-    --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
-    --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-    --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
-    --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
-    --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-    --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
-    --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-    --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-    --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-    --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-    --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
-    --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
-    --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
-    --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
-    --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
-    --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-    --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-    --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-    --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-    --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-    --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-    --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-    --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
-    --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
-    --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
-    /**
-    * @tokens Alerts Notice Dark Colors
-    * @presenter Color
-    */
-    --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-    --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
-    --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
-    --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
-    --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
-    --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-    --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-    --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
-    --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
-    --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
-    --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
-    --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
-    --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
-    --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
-    --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
-    --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
-    --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
-    --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-    --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-    --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-    --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-    --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
-    --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
-    --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
-    --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
-    --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
-    --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
-    --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
-    --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
-    --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
-    --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
-    --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-    --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
-    --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-    --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-    --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-    --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
-    --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
-    --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
-    --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
-    --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
-    --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
-    --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-    --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
-    --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-    --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-    --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
-    --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-    --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
-    --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-    --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
-    /**
-    * @tokens Dark Shadows
-    * @presenter Shadow
-    */
-    --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
-    --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
-    --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
-    --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
-    --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
-    /**
-    * @tokens Encoded Images
-    */
-    --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
-  }
+/* Force Light Mode */
+:root[data-theme-mode=light] {
+  color-scheme: only light;
 }
+/* Force Dark Mode */
 :root[data-theme-mode=dark] {
-  /**
-  * @tokens Primary Dark Colors
-  * @presenter Color
-  */
-  --op-color-primary-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 12%);
-  --op-color-primary-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 14%);
-  --op-color-primary-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 16%);
-  --op-color-primary-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-  --op-color-primary-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 24%);
-  --op-color-primary-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
-  --op-color-primary-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 29%);
-  --op-color-primary-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 32%);
-  --op-color-primary-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 35%);
-  --op-color-primary-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
-  --op-color-primary-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 40%);
-  --op-color-primary-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 45%);
-  --op-color-primary-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 48%);
-  --op-color-primary-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 52%);
-  --op-color-primary-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
-  --op-color-primary-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-  --op-color-primary-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-  --op-color-primary-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
-  --op-color-primary-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-on-plus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-on-plus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
-  --op-color-primary-on-plus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 88%);
-  --op-color-primary-on-plus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 70%);
-  --op-color-primary-on-plus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-  --op-color-primary-on-plus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 64%);
-  --op-color-primary-on-plus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-  --op-color-primary-on-plus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
-  --op-color-primary-on-plus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 72%);
-  --op-color-primary-on-plus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 86%);
-  --op-color-primary-on-plus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-  --op-color-primary-on-plus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
-  --op-color-primary-on-plus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 78%);
-  --op-color-primary-on-plus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-on-plus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-  --op-color-primary-on-plus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
-  --op-color-primary-on-plus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 80%);
-  --op-color-primary-on-plus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-on-base: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 100%);
-  --op-color-primary-on-base-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 84%);
-  --op-color-primary-on-minus-one: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-on-minus-one-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 90%);
-  --op-color-primary-on-minus-two: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-on-minus-two-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 92%);
-  --op-color-primary-on-minus-three: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 98%);
-  --op-color-primary-on-minus-three-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 96%);
-  --op-color-primary-on-minus-four: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
-  --op-color-primary-on-minus-four-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
-  --op-color-primary-on-minus-five: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 2%);
-  --op-color-primary-on-minus-five-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 20%);
-  --op-color-primary-on-minus-six: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
-  --op-color-primary-on-minus-six-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 26%);
-  --op-color-primary-on-minus-seven: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 8%);
-  --op-color-primary-on-minus-seven-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 34%);
-  --op-color-primary-on-minus-eight: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 4%);
-  --op-color-primary-on-minus-eight-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
-  --op-color-primary-on-minus-max: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 0%);
-  --op-color-primary-on-minus-max-alt: hsl(var(--op-color-primary-h) var(--op-color-primary-s) 38%);
-  /**
-  * @tokens Neutral Dark Colors
-  * @presenter Color
-  */
-  --op-color-neutral-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
-  --op-color-neutral-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 10%);
-  --op-color-neutral-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 14%);
-  --op-color-neutral-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 16%);
-  --op-color-neutral-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 18%);
-  --op-color-neutral-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-  --op-color-neutral-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 24%);
-  --op-color-neutral-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
-  --op-color-neutral-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 30%);
-  --op-color-neutral-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
-  --op-color-neutral-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
-  --op-color-neutral-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 40%);
-  --op-color-neutral-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 44%);
-  --op-color-neutral-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 52%);
-  --op-color-neutral-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 64%);
-  --op-color-neutral-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-  --op-color-neutral-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
-  --op-color-neutral-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-  --op-color-neutral-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-plus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-plus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
-  --op-color-neutral-on-plus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-  --op-color-neutral-on-plus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 54%);
-  --op-color-neutral-on-plus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
-  --op-color-neutral-on-plus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
-  --op-color-neutral-on-plus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-  --op-color-neutral-on-plus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 58%);
-  --op-color-neutral-on-plus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-  --op-color-neutral-on-plus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-  --op-color-neutral-on-plus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 80%);
-  --op-color-neutral-on-plus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 94%);
-  --op-color-neutral-on-plus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-  --op-color-neutral-on-plus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 68%);
-  --op-color-neutral-on-plus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 88%);
-  --op-color-neutral-on-plus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 72%);
-  --op-color-neutral-on-plus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-plus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 75%);
-  --op-color-neutral-on-base: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 100%);
-  --op-color-neutral-on-base-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 78%);
-  --op-color-neutral-on-minus-one: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-  --op-color-neutral-on-minus-one-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
-  --op-color-neutral-on-minus-two: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 90%);
-  --op-color-neutral-on-minus-two-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 98%);
-  --op-color-neutral-on-minus-three: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 99%);
-  --op-color-neutral-on-minus-three-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 95%);
-  --op-color-neutral-on-minus-four: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 11%);
-  --op-color-neutral-on-minus-four-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
-  --op-color-neutral-on-minus-five: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 20%);
-  --op-color-neutral-on-minus-five-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 2%);
-  --op-color-neutral-on-minus-six: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-  --op-color-neutral-on-minus-six-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 26%);
-  --op-color-neutral-on-minus-seven: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 8%);
-  --op-color-neutral-on-minus-seven-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 32%);
-  --op-color-neutral-on-minus-eight: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-  --op-color-neutral-on-minus-eight-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 36%);
-  --op-color-neutral-on-minus-max: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 4%);
-  --op-color-neutral-on-minus-max-alt: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 48%);
-  /**
-  * @tokens Alerts Warning Dark Colors
-  * @presenter Color
-  */
-  --op-color-alerts-warning-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-  --op-color-alerts-warning-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
-  --op-color-alerts-warning-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-  --op-color-alerts-warning-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
-  --op-color-alerts-warning-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
-  --op-color-alerts-warning-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 16%);
-  --op-color-alerts-warning-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-  --op-color-alerts-warning-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 28%);
-  --op-color-alerts-warning-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 32%);
-  --op-color-alerts-warning-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 36%);
-  --op-color-alerts-warning-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 40%);
-  --op-color-alerts-warning-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 48%);
-  --op-color-alerts-warning-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 52%);
-  --op-color-alerts-warning-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 64%);
-  --op-color-alerts-warning-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
-  --op-color-alerts-warning-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-  --op-color-alerts-warning-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 100%);
-  --op-color-alerts-warning-on-plus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-  --op-color-alerts-warning-on-plus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 42%);
-  --op-color-alerts-warning-on-plus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-on-plus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-  --op-color-alerts-warning-on-plus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-  --op-color-alerts-warning-on-plus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
-  --op-color-alerts-warning-on-plus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
-  --op-color-alerts-warning-on-plus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
-  --op-color-alerts-warning-on-plus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 72%);
-  --op-color-alerts-warning-on-plus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 50%);
-  --op-color-alerts-warning-on-plus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 80%);
-  --op-color-alerts-warning-on-plus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 60%);
-  --op-color-alerts-warning-on-plus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-on-plus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-  --op-color-alerts-warning-on-plus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 88%);
-  --op-color-alerts-warning-on-plus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-  --op-color-alerts-warning-on-plus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 96%);
-  --op-color-alerts-warning-on-plus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
-  --op-color-alerts-warning-on-base: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-  --op-color-alerts-warning-on-base-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 6%);
-  --op-color-alerts-warning-on-minus-one: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-  --op-color-alerts-warning-on-minus-one-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 70%);
-  --op-color-alerts-warning-on-minus-two: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-  --op-color-alerts-warning-on-minus-two-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 14%);
-  --op-color-alerts-warning-on-minus-three: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 2%);
-  --op-color-alerts-warning-on-minus-three-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-minus-four: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 4%);
-  --op-color-alerts-warning-on-minus-four-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 20%);
-  --op-color-alerts-warning-on-minus-five: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-  --op-color-alerts-warning-on-minus-five-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 21%);
-  --op-color-alerts-warning-on-minus-six: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 10%);
-  --op-color-alerts-warning-on-minus-six-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 22%);
-  --op-color-alerts-warning-on-minus-seven: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 8%);
-  --op-color-alerts-warning-on-minus-seven-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-  --op-color-alerts-warning-on-minus-eight: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 12%);
-  --op-color-alerts-warning-on-minus-eight-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 26%);
-  --op-color-alerts-warning-on-minus-max: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 0%);
-  --op-color-alerts-warning-on-minus-max-alt: hsl(var(--op-color-alerts-warning-h) var(--op-color-alerts-warning-s) 24%);
-  /**
-  * @tokens Alerts Danger Dark Colors
-  * @presenter Color
-  */
-  --op-color-alerts-danger-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
-  --op-color-alerts-danger-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-  --op-color-alerts-danger-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-  --op-color-alerts-danger-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 12%);
-  --op-color-alerts-danger-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 14%);
-  --op-color-alerts-danger-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 16%);
-  --op-color-alerts-danger-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 20%);
-  --op-color-alerts-danger-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-  --op-color-alerts-danger-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
-  --op-color-alerts-danger-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 32%);
-  --op-color-alerts-danger-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 36%);
-  --op-color-alerts-danger-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 40%);
-  --op-color-alerts-danger-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 48%);
-  --op-color-alerts-danger-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 52%);
-  --op-color-alerts-danger-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 64%);
-  --op-color-alerts-danger-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
-  --op-color-alerts-danger-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
-  --op-color-alerts-danger-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-  --op-color-alerts-danger-on-plus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 100%);
-  --op-color-alerts-danger-on-plus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-on-plus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-on-plus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
-  --op-color-alerts-danger-on-plus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
-  --op-color-alerts-danger-on-plus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
-  --op-color-alerts-danger-on-plus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 78%);
-  --op-color-alerts-danger-on-plus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 68%);
-  --op-color-alerts-danger-on-plus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
-  --op-color-alerts-danger-on-plus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 70%);
-  --op-color-alerts-danger-on-plus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 80%);
-  --op-color-alerts-danger-on-plus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 72%);
-  --op-color-alerts-danger-on-plus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-on-plus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
-  --op-color-alerts-danger-on-plus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-on-plus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 76%);
-  --op-color-alerts-danger-on-plus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
-  --op-color-alerts-danger-on-plus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 84%);
-  --op-color-alerts-danger-on-base: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
-  --op-color-alerts-danger-on-base-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 90%);
-  --op-color-alerts-danger-on-minus-one: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 96%);
-  --op-color-alerts-danger-on-minus-one-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 88%);
-  --op-color-alerts-danger-on-minus-two: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 98%);
-  --op-color-alerts-danger-on-minus-two-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 93%);
-  --op-color-alerts-danger-on-minus-three: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 6%);
-  --op-color-alerts-danger-on-minus-three-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
-  --op-color-alerts-danger-on-minus-four: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-  --op-color-alerts-danger-on-minus-four-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
-  --op-color-alerts-danger-on-minus-five: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 2%);
-  --op-color-alerts-danger-on-minus-five-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 10%);
-  --op-color-alerts-danger-on-minus-six: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-  --op-color-alerts-danger-on-minus-six-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 22%);
-  --op-color-alerts-danger-on-minus-seven: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 8%);
-  --op-color-alerts-danger-on-minus-seven-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 28%);
-  --op-color-alerts-danger-on-minus-eight: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 4%);
-  --op-color-alerts-danger-on-minus-eight-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-  --op-color-alerts-danger-on-minus-max: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 0%);
-  --op-color-alerts-danger-on-minus-max-alt: hsl(var(--op-color-alerts-danger-h) var(--op-color-alerts-danger-s) 24%);
-  /**
-  * @tokens Alerts Info Dark Colors
-  * @presenter Color
-  */
-  --op-color-alerts-info-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
-  --op-color-alerts-info-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-  --op-color-alerts-info-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 12%);
-  --op-color-alerts-info-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 14%);
-  --op-color-alerts-info-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 16%);
-  --op-color-alerts-info-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-  --op-color-alerts-info-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 24%);
-  --op-color-alerts-info-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-  --op-color-alerts-info-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
-  --op-color-alerts-info-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 36%);
-  --op-color-alerts-info-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 40%);
-  --op-color-alerts-info-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 48%);
-  --op-color-alerts-info-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 52%);
-  --op-color-alerts-info-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 64%);
-  --op-color-alerts-info-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
-  --op-color-alerts-info-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-  --op-color-alerts-info-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-  --op-color-alerts-info-on-plus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 100%);
-  --op-color-alerts-info-on-plus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-on-plus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-on-plus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-  --op-color-alerts-info-on-plus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-  --op-color-alerts-info-on-plus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 70%);
-  --op-color-alerts-info-on-plus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-  --op-color-alerts-info-on-plus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
-  --op-color-alerts-info-on-plus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 76%);
-  --op-color-alerts-info-on-plus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 62%);
-  --op-color-alerts-info-on-plus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-  --op-color-alerts-info-on-plus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 66%);
-  --op-color-alerts-info-on-plus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-on-plus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 72%);
-  --op-color-alerts-info-on-plus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 88%);
-  --op-color-alerts-info-on-plus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 74%);
-  --op-color-alerts-info-on-plus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
-  --op-color-alerts-info-on-plus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-  --op-color-alerts-info-on-base: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
-  --op-color-alerts-info-on-base-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 78%);
-  --op-color-alerts-info-on-minus-one: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-  --op-color-alerts-info-on-minus-one-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 80%);
-  --op-color-alerts-info-on-minus-two: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 94%);
-  --op-color-alerts-info-on-minus-two-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 86%);
-  --op-color-alerts-info-on-minus-three: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 98%);
-  --op-color-alerts-info-on-minus-three-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 96%);
-  --op-color-alerts-info-on-minus-four: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
-  --op-color-alerts-info-on-minus-four-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 2%);
-  --op-color-alerts-info-on-minus-five: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 8%);
-  --op-color-alerts-info-on-minus-five-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 20%);
-  --op-color-alerts-info-on-minus-six: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-on-minus-six-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-  --op-color-alerts-info-on-minus-seven: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-on-minus-seven-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 28%);
-  --op-color-alerts-info-on-minus-eight: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 4%);
-  --op-color-alerts-info-on-minus-eight-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 34%);
-  --op-color-alerts-info-on-minus-max: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 0%);
-  --op-color-alerts-info-on-minus-max-alt: hsl(var(--op-color-alerts-info-h) var(--op-color-alerts-info-s) 32%);
-  /**
-  * @tokens Alerts Notice Dark Colors
-  * @presenter Color
-  */
-  --op-color-alerts-notice-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-  --op-color-alerts-notice-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 4%);
-  --op-color-alerts-notice-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 8%);
-  --op-color-alerts-notice-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 12%);
-  --op-color-alerts-notice-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 14%);
-  --op-color-alerts-notice-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-  --op-color-alerts-notice-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-  --op-color-alerts-notice-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
-  --op-color-alerts-notice-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
-  --op-color-alerts-notice-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 32%);
-  --op-color-alerts-notice-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 36%);
-  --op-color-alerts-notice-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 40%);
-  --op-color-alerts-notice-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 48%);
-  --op-color-alerts-notice-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 52%);
-  --op-color-alerts-notice-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 64%);
-  --op-color-alerts-notice-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
-  --op-color-alerts-notice-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
-  --op-color-alerts-notice-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-  --op-color-alerts-notice-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-  --op-color-alerts-notice-on-plus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 100%);
-  --op-color-alerts-notice-on-plus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-  --op-color-alerts-notice-on-plus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
-  --op-color-alerts-notice-on-plus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 82%);
-  --op-color-alerts-notice-on-plus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 90%);
-  --op-color-alerts-notice-on-plus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
-  --op-color-alerts-notice-on-plus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
-  --op-color-alerts-notice-on-plus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
-  --op-color-alerts-notice-on-plus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 92%);
-  --op-color-alerts-notice-on-plus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 72%);
-  --op-color-alerts-notice-on-plus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 94%);
-  --op-color-alerts-notice-on-plus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 80%);
-  --op-color-alerts-notice-on-plus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-  --op-color-alerts-notice-on-plus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 78%);
-  --op-color-alerts-notice-on-plus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-  --op-color-alerts-notice-on-plus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 88%);
-  --op-color-alerts-notice-on-plus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 98%);
-  --op-color-alerts-notice-on-plus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 84%);
-  --op-color-alerts-notice-on-base: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 99%);
-  --op-color-alerts-notice-on-base-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 96%);
-  --op-color-alerts-notice-on-minus-one: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-one-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 7%);
-  --op-color-alerts-notice-on-minus-two: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-two-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 10%);
-  --op-color-alerts-notice-on-minus-three: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-three-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 18%);
-  --op-color-alerts-notice-on-minus-four: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-four-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-  --op-color-alerts-notice-on-minus-five: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 6%);
-  --op-color-alerts-notice-on-minus-five-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 20%);
-  --op-color-alerts-notice-on-minus-six: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-six-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 16%);
-  --op-color-alerts-notice-on-minus-seven: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-seven-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 26%);
-  --op-color-alerts-notice-on-minus-eight: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 2%);
-  --op-color-alerts-notice-on-minus-eight-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 24%);
-  --op-color-alerts-notice-on-minus-max: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 0%);
-  --op-color-alerts-notice-on-minus-max-alt: hsl(var(--op-color-alerts-notice-h) var(--op-color-alerts-notice-s) 28%);
+  color-scheme: only dark;
   /**
   * @tokens Dark Shadows
   * @presenter Shadow
@@ -1491,10 +1832,28 @@ select {
   --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
 }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme-mode=light]) {
+    /**
+    * @tokens Dark Shadows
+    * @presenter Shadow
+    */
+    --op-shadow-x-small: 0 1px 3px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
+    --op-shadow-small: 0 2px 6px hsl(0deg 0% 0% / 15%), 0 1px 2px hsl(0deg 0% 0% / 30%);
+    --op-shadow-medium: 0 4px 8px hsl(0deg 0% 0% / 15%), 0 1px 3px hsl(0deg 0% 0% / 30%);
+    --op-shadow-large: 0 6px 10px hsl(0deg 0% 0% / 15%), 0 2px 3px hsl(0deg 0% 0% / 30%);
+    --op-shadow-x-large: 0 8px 12px hsl(0deg 0% 0% / 15%), 0 4px 4px hsl(0deg 0% 0% / 30%);
+    /**
+    * @tokens Encoded Images
+    */
+    --op-encoded-images-dropdown-arrow: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9IiNmZmYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik02IDguMzc1MDFMMCAyLjM3NTAxTDEuNCAwLjk3NTAwNkw2IDUuNTc1MDFMMTAuNiAwLjk3NTAwNkwxMiAyLjM3NTAxTDYgOC4zNzUwMVoiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==");
+  }
+}
+/* After a reset, introduce base element styles specific to this system */
 html {
-  overflow: hidden;
+  overflow: hidden; /* Needed to prevent flash messages and panels from causing overflow */
   font-family: var(--op-font-family);
-  font-size: 62.5%;
+  font-size: 62.5%; /* 1rem = 10px */
 }
 body {
@@ -1517,9 +1876,9 @@ input[type=submit] {
 label {
   display: inline-block;
-}
-label:hover {
-  cursor: pointer;
+  &:hover {
+    cursor: pointer;
+  }
 }
 a {
@@ -1628,6 +1987,7 @@ small {
   flex-shrink: 0;
 }
+/* Container Properties */
 .container {
   width: 100%;
   max-width: var(--op-breakpoint-medium);
@@ -1651,6 +2011,7 @@ small {
   max-width: var(--op-breakpoint-x-small);
 }
+/* Width Properties */
 .full-width {
   width: 100%;
 }
@@ -1691,6 +2052,7 @@ small {
   width: 33.3333333333%;
 }
+/* Flex Properties */
 .flex {
   display: flex;
 }
@@ -1715,6 +2077,7 @@ small {
   flex-grow: 1;
 }
+/* Gap Properties */
 .gap-xxs {
   gap: var(--op-space-2x-small);
   --op-gap: var(--op-space-2x-small);
@@ -1745,6 +2108,7 @@ small {
   --op-gap: var(--op-space-x-large);
 }
+/* Justify Content */
 .justify-start {
   justify-content: flex-start;
 }
@@ -1765,6 +2129,7 @@ small {
   justify-content: space-around;
 }
+/* Align Items */
 .items-stretch {
   align-items: stretch;
 }
@@ -1785,6 +2150,7 @@ small {
   align-items: baseline;
 }
+/* Align Self */
 .self-auto {
   align-self: auto;
 }
@@ -1809,6 +2175,7 @@ small {
   align-self: baseline;
 }
+/* Text Alignment */
 .text-left {
   text-align: left;
 }
@@ -1825,6 +2192,7 @@ small {
   text-align: justify;
 }
+/* Box Margin */
 .margin-xl {
   margin: var(--op-space-x-large);
 }
@@ -1853,6 +2221,7 @@ small {
   margin: auto;
 }
+/* Vertical Margin */
 .margin-y-xl {
   margin-top: var(--op-space-x-large);
   margin-bottom: var(--op-space-x-large);
@@ -1883,6 +2252,7 @@ small {
   margin-bottom: 0;
 }
+/* Horizontal Margin */
 .margin-x-xl {
   margin-right: var(--op-space-x-large);
   margin-left: var(--op-space-x-large);
@@ -1913,6 +2283,7 @@ small {
   margin-left: 0;
 }
+/* Top Margin */
 .margin-top-xl {
   margin-top: var(--op-space-x-large);
 }
@@ -1937,6 +2308,7 @@ small {
   margin-top: 0;
 }
+/* Bottom Margin */
 .margin-bottom-xl {
   margin-bottom: var(--op-space-x-large);
 }
@@ -1961,6 +2333,7 @@ small {
   margin-bottom: 0;
 }
+/* Right Margin */
 .margin-right-xl {
   margin-right: var(--op-space-x-large);
 }
@@ -1985,6 +2358,7 @@ small {
   margin-left: 0;
 }
+/* Left Margin */
 .margin-left-xl {
   margin-left: var(--op-space-x-large);
 }
@@ -2009,6 +2383,11 @@ small {
   margin-left: 0;
 }
+/*
+  Accessibility
+  Use the following class to hide accessibility text that is needed for screen readers but needs to be hidden from regular users.
+  https: //snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
 .sr-only {
   position: absolute !important;
   overflow: hidden;
@@ -3131,6 +3510,12 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   /* stylelint-enable no-descending-specificity */
 }
+/*
+  Look up icons at: https://fonts.google.com/icons?icon.set=Material+Symbols
+  Instead of hosting the font files locally which requires the compiler to handle them, we pull the icons
+  from Googles CDN like we do for our other fonts
+  https://developers.google.com/fonts/docs/material_symbols#variable_font_with_google_fonts
+*/
 .material-symbols-outlined,
 .material-symbols {
   --op-mso-fill: 0;
@@ -3143,6 +3528,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   vertical-align: middle;
 }
+/* Fill */
 .icon--outlined {
   --op-mso-fill: 0;
 }
@@ -3151,6 +3537,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   --op-mso-fill: 1;
 }
+/* Weight */
 .icon--weight-light {
   --op-mso-weight: var(--op-font-weight-light);
 }
@@ -3167,6 +3554,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   --op-mso-weight: var(--op-font-weight-bold);
 }
+/* Emphasis */
 .icon--low-emphasis {
   --op-mso-grade: -20;
 }
@@ -3179,6 +3567,7 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   --op-mso-grade: 200;
 }
+/* Size */
 .icon--medium {
   font-size: var(--op-font-medium);
   --op-mso-optical-sizing: 20;
@@ -3198,18 +3587,18 @@ textarea.form-control:not([type=radio], [type=checkbox]) {
   display: inline-block;
   width: var(--op-font-2x-large);
   height: var(--op-font-2x-large);
-}
-.custom-icons.icon--medium {
-  font-size: var(--op-font-small);
-  --op-mso-optical-sizing: 20;
-}
-.custom-icons.icon--large {
-  width: var(--op-font-large);
-  height: var(--op-font-large);
-}
-.custom-icons.icon--x-large {
-  width: var(--op-font-3x-large);
-  height: var(--op-font-3x-large);
+  &.icon--medium {
+    font-size: var(--op-font-small);
+    --op-mso-optical-sizing: 20;
+  }
+  &.icon--large {
+    width: var(--op-font-large);
+    height: var(--op-font-large);
+  }
+  &.icon--x-large {
+    width: var(--op-font-3x-large);
+    height: var(--op-font-3x-large);
+  }
 }
 .custom-icons svg {