@sage/design-tokens 8.2.0 → 8.4.0

package/css/frozenproduct/all.css

@@ -154,6 +154,36 @@
   --modes-color-brand-copilot-no-bg-monochrome-light: #000000;
   --modes-color-custom-default-light: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
   --modes-color-custom-frozen-light: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
+  --modes-color-colorcode-blue-deep-light: #0071c3;
+  --modes-color-colorcode-blue-muted-light: #CDE5FF;
+  --modes-color-colorcode-blue-rich-light: #0084E1;
+  --modes-color-colorcode-teal-deep-light: #007C7B;
+  --modes-color-colorcode-teal-muted-light: #C1FBFB;
+  --modes-color-colorcode-teal-rich-light: #009B99;
+  --modes-color-colorcode-green-deep-light: #00811F;
+  --modes-color-colorcode-green-muted-light: #C5FFC9;
+  --modes-color-colorcode-green-rich-light: #00a128;
+  --modes-color-colorcode-lime-deep-light: #637700;
+  --modes-color-colorcode-lime-muted-light: #FFFF9C;
+  --modes-color-colorcode-lime-rich-light: #819B00;
+  --modes-color-colorcode-orange-deep-light: #C54300;
+  --modes-color-colorcode-orange-muted-light: #FEEAB0;
+  --modes-color-colorcode-orange-rich-light: #EA5100;
+  --modes-color-colorcode-red-deep-light: #DC004E;
+  --modes-color-colorcode-red-muted-light: #FFDBCF;
+  --modes-color-colorcode-red-rich-light: #FE005B;
+  --modes-color-colorcode-pink-deep-light: #C8269A;
+  --modes-color-colorcode-pink-muted-light: #FFD7EE;
+  --modes-color-colorcode-pink-rich-light: #e62db2;
+  --modes-color-colorcode-purple-deep-light: #8F4CD7;
+  --modes-color-colorcode-purple-muted-light: #E7DEF8;
+  --modes-color-colorcode-purple-rich-light: #9C66DE;
+  --modes-color-colorcode-slate-deep-light: #527386;
+  --modes-color-colorcode-slate-muted-light: #D4E5F1;
+  --modes-color-colorcode-slate-rich-light: #60869C;
+  --modes-color-colorcode-gray-deep-light: #6F6F6F;
+  --modes-color-colorcode-gray-muted-light: #E2E2E2;
+  --modes-color-colorcode-gray-rich-light: #9b9b9b;
   --modes-color-generic-bg-nought-light: #FFFFFF;
   --modes-color-generic-bg-faint-light: #f3f3f3;
   --modes-color-generic-bg-delicate-light: #e8e8e8;
@@ -330,6 +360,36 @@
   --modes-color-brand-copilot-no-bg-monochrome-dark: #FFFFFF;
   --modes-color-custom-default-dark: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
   --modes-color-custom-frozen-dark: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
+  --modes-color-colorcode-blue-deep-dark: #007FD9;
+  --modes-color-colorcode-blue-muted-dark: #00293F;
+  --modes-color-colorcode-blue-rich-dark: #0071c3;
+  --modes-color-colorcode-teal-deep-dark: #008A89;
+  --modes-color-colorcode-teal-muted-dark: #002B2A;
+  --modes-color-colorcode-teal-rich-dark: #007C7B;
+  --modes-color-colorcode-green-deep-dark: #009023;
+  --modes-color-colorcode-green-muted-dark: #002D05;
+  --modes-color-colorcode-green-rich-dark: #00811F;
+  --modes-color-colorcode-lime-deep-dark: #6E8500;
+  --modes-color-colorcode-lime-muted-dark: #171e00;
+  --modes-color-colorcode-lime-rich-dark: #637700;
+  --modes-color-colorcode-orange-deep-dark: #DB4B00;
+  --modes-color-colorcode-orange-muted-dark: #380D00;
+  --modes-color-colorcode-orange-rich-dark: #C54300;
+  --modes-color-colorcode-red-deep-dark: #F50058;
+  --modes-color-colorcode-red-muted-dark: #400011;
+  --modes-color-colorcode-red-rich-dark: #DC004E;
+  --modes-color-colorcode-pink-deep-dark: #DD2BAB;
+  --modes-color-colorcode-pink-muted-dark: #3C002C;
+  --modes-color-colorcode-pink-rich-dark: #C8269A;
+  --modes-color-colorcode-purple-deep-dark: #985FDC;
+  --modes-color-colorcode-purple-muted-dark: #270E41;
+  --modes-color-colorcode-purple-rich-dark: #8F4CD7;
+  --modes-color-colorcode-slate-deep-dark: #5C8196;
+  --modes-color-colorcode-slate-muted-dark: #121D23;
+  --modes-color-colorcode-slate-rich-dark: #527386;
+  --modes-color-colorcode-gray-deep-dark: #7C7C7C;
+  --modes-color-colorcode-gray-muted-dark: #1b1b1b;
+  --modes-color-colorcode-gray-rich-dark: #6F6F6F;
   --modes-color-generic-bg-nought-dark: #000000;
   --modes-color-generic-bg-faint-dark: #0e0e0e;
   --modes-color-generic-bg-delicate-dark: #181818;
@@ -498,7 +558,8 @@
 
   /* badge component tokens */
   --badge-radius-badge: var(--global-radius-circle); /* Badge */
-  --badge-color-notification-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
+  --badge-color-notification-bg-default: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* Used in global nav notification badges */
+  --badge-color-notification-bg-alt: light-dark(var(--modes-color-status-info-default-light), var(--modes-color-status-info-default-dark));
   --badge-typography-m: var(--global-typography-component-notification-m);
   --badge-color-notification-border-default: light-dark(var(--modes-color-generic-fg-nought-light), var(--modes-color-generic-fg-nought-dark));
   --badge-color-notification-label-default: light-dark(var(--modes-color-generic-fg-nought-light), var(--modes-color-generic-fg-nought-dark));
@@ -732,16 +793,38 @@
   --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-opacity-carousel-hidden: light-dark(var(--modes-color-modifiers-input-disabled-fg-light), var(--modes-color-modifiers-input-disabled-fg-dark)); /* opacity applied to next and previous carousel slides */
-  --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
   --container-color-ai-borderhorizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI dialog component */
   --container-color-ai-bordervertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for dialog and insight bubbles. */
   --container-color-ai-nudge-border-ai-horizontal: light-dark(var(--modes-color-status-ai-default-horizontal-light), var(--modes-color-status-ai-default-horizontal-dark)); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: light-dark(var(--modes-color-status-ai-default-vertical-light), var(--modes-color-status-ai-default-vertical-dark)); /* left and right border for AI nudge message component */
-  --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /*   */
+  --container-color-calendar-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on calendar bg-default colors. */
+  --container-color-calendar-label-alt: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on calendar bg-alt colors. */
+  --container-color-calendar-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
+  --container-color-calendar-blue-pattern: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
+  --container-color-calendar-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
+  --container-color-calendar-teal-pattern: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
+  --container-color-calendar-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
+  --container-color-calendar-green-pattern: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
+  --container-color-calendar-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
+  --container-color-calendar-lime-pattern: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
+  --container-color-calendar-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
+  --container-color-calendar-orange-pattern: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
+  --container-color-calendar-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
+  --container-color-calendar-red-pattern: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
+  --container-color-calendar-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
+  --container-color-calendar-pink-pattern: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
+  --container-color-calendar-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
+  --container-color-calendar-purple-pattern: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
+  --container-color-calendar-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
+  --container-color-calendar-slate-pattern: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
+  --container-color-calendar-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
+  --container-color-calendar-gray-pattern: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
   --container-color-interactive-bg-footer-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark)); /*   */
   --container-color-interactive-border-activated: light-dark(var(--modes-color-status-positive-default-light), var(--modes-color-status-positive-default-dark));
   --container-color-interactive-bg-footer-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* tile footer bg color  */
   --container-color-interactive-bg-enabled: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
+  --container-color-interactive-detailedicon-bg: light-dark(var(--modes-color-custom-default-light), var(--modes-color-custom-default-dark)); /*   */
+  --container-color-standard-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
   --container-typography-heading-m: var(--global-typography-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
   --container-typography-heading-l: var(--global-typography-heading-m); /* Dialog, drawer and sidebar headings */
   --container-typography-subheading-m: var(--global-typography-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -751,13 +834,7 @@
   --container-typography-paragraph-s: var(--global-typography-component-moderate-s);
   --container-typography-paragraph-m: var(--global-typography-component-moderate-m);
   --container-typography-paragraph-l: var(--global-typography-component-moderate-l);
-  --container-color-standard-bg-alt: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
-  --container-color-standard-bg-footer-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* tile footer bg color  */
-  --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
-  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
-  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
-  --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
-  --container-color-scrollbar-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
+  --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
   --container-color-interactive-bg-footer-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
   --container-color-interactive-bg-hover: light-dark(var(--modes-color-interactive-monochrome-generic-hover-alt-light), var(--modes-color-interactive-monochrome-generic-hover-alt-dark)); /* Used for accordion hover backgrounds  */
   --container-color-interactive-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
@@ -765,7 +842,13 @@
   --container-color-interactive-text-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark)); /* Active label for any accordion. */
   --container-color-interactive-text-enabled: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* Enabled label for standard accordion. */
   --container-color-interactive-text-alt-enabled: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* Enabled label for subtle accordion. */
-  --container-color-blockquote-border: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
+  --container-color-scrollbar-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
+  --container-color-standard-bg-alt: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark));
+  --container-color-standard-bg-footer-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* tile footer bg color  */
+  --container-color-standard-border-active: light-dark(var(--modes-color-interactive-monochrome-generic-active-light), var(--modes-color-interactive-monochrome-generic-active-dark));
+  --container-color-standard-dimmer: light-dark(var(--modes-color-interactive-inactive-mask-light), var(--modes-color-interactive-inactive-mask-dark)); /* dimmed mask for dialogs */
+  --container-color-standard-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
+  --container-color-standard-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
   --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
   --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -776,10 +859,6 @@
   --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
   --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
   --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
-  --container-color-standard-border-alt: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
-  --container-color-standard-border-default: light-dark(var(--modes-color-generic-fg-faint-light), var(--modes-color-generic-fg-faint-dark));
-  --container-color-standard-icon: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark)); /* Link preview image thumbnail */
-  --container-color-scrollbar-fg-default: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
   --container-color-interactive-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
   --container-color-interactive-border-alt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Link preview.  */
   --container-color-interactive-border-inactive: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
@@ -791,6 +870,10 @@
   --container-color-interactive-label-footer-activated: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
   --container-color-interactive-text-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
   --container-color-interactive-text-hover: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark)); /* Hover label for any accordion. */
+  --container-color-scrollbar-fg-default: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
+  --container-color-standard-border-alt: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
+  --container-color-standard-border-default: light-dark(var(--modes-color-generic-fg-faint-light), var(--modes-color-generic-fg-faint-dark));
+  --container-color-standard-icon: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark)); /* Link preview image thumbnail */
   --container-size-none: var(--global-size-none);
   --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
   --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */
@@ -1021,6 +1104,58 @@
   --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
   --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
   --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
+  --form-color-colorpicker-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
+  --form-color-colorpicker-label-alt: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-alt colors. */
+  --form-color-colorpicker-blue-border: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
+  --form-color-colorpicker-blue-bg-alt: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
+  --form-color-colorpicker-blue-bg-default: light-dark(var(--modes-color-colorcode-blue-muted-light), var(--modes-color-colorcode-blue-muted-dark));
+  --form-color-colorpicker-blue-pattern: light-dark(var(--modes-color-colorcode-blue-rich-light), var(--modes-color-colorcode-blue-rich-dark));
+  --form-color-colorpicker-blue-label-default: light-dark(var(--modes-color-colorcode-blue-deep-light), var(--modes-color-colorcode-blue-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-teal-border: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
+  --form-color-colorpicker-teal-bg-alt: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
+  --form-color-colorpicker-teal-bg-default: light-dark(var(--modes-color-colorcode-teal-muted-light), var(--modes-color-colorcode-teal-muted-dark));
+  --form-color-colorpicker-teal-pattern: light-dark(var(--modes-color-colorcode-teal-rich-light), var(--modes-color-colorcode-teal-rich-dark));
+  --form-color-colorpicker-teal-label-default: light-dark(var(--modes-color-colorcode-teal-deep-light), var(--modes-color-colorcode-teal-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-green-border: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
+  --form-color-colorpicker-green-bg-alt: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
+  --form-color-colorpicker-green-bg-default: light-dark(var(--modes-color-colorcode-green-muted-light), var(--modes-color-colorcode-green-muted-dark));
+  --form-color-colorpicker-green-pattern: light-dark(var(--modes-color-colorcode-green-rich-light), var(--modes-color-colorcode-green-rich-dark));
+  --form-color-colorpicker-green-label-default: light-dark(var(--modes-color-colorcode-green-deep-light), var(--modes-color-colorcode-green-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-lime-border: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
+  --form-color-colorpicker-lime-bg-alt: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
+  --form-color-colorpicker-lime-bg-default: light-dark(var(--modes-color-colorcode-lime-muted-light), var(--modes-color-colorcode-lime-muted-dark));
+  --form-color-colorpicker-lime-pattern: light-dark(var(--modes-color-colorcode-lime-rich-light), var(--modes-color-colorcode-lime-rich-dark));
+  --form-color-colorpicker-lime-label-default: light-dark(var(--modes-color-colorcode-lime-deep-light), var(--modes-color-colorcode-lime-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-orange-border: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
+  --form-color-colorpicker-orange-bg-alt: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
+  --form-color-colorpicker-orange-bg-default: light-dark(var(--modes-color-colorcode-orange-muted-light), var(--modes-color-colorcode-orange-muted-dark));
+  --form-color-colorpicker-orange-pattern: light-dark(var(--modes-color-colorcode-orange-rich-light), var(--modes-color-colorcode-orange-rich-dark));
+  --form-color-colorpicker-orange-label-default: light-dark(var(--modes-color-colorcode-orange-deep-light), var(--modes-color-colorcode-orange-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-red-border: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
+  --form-color-colorpicker-red-bg-alt: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
+  --form-color-colorpicker-red-bg-default: light-dark(var(--modes-color-colorcode-red-muted-light), var(--modes-color-colorcode-red-muted-dark));
+  --form-color-colorpicker-red-pattern: light-dark(var(--modes-color-colorcode-red-rich-light), var(--modes-color-colorcode-red-rich-dark));
+  --form-color-colorpicker-red-label-default: light-dark(var(--modes-color-colorcode-red-deep-light), var(--modes-color-colorcode-red-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-pink-border: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
+  --form-color-colorpicker-pink-bg-alt: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
+  --form-color-colorpicker-pink-bg-default: light-dark(var(--modes-color-colorcode-pink-muted-light), var(--modes-color-colorcode-pink-muted-dark));
+  --form-color-colorpicker-pink-pattern: light-dark(var(--modes-color-colorcode-pink-rich-light), var(--modes-color-colorcode-pink-rich-dark));
+  --form-color-colorpicker-pink-label-default: light-dark(var(--modes-color-colorcode-pink-deep-light), var(--modes-color-colorcode-pink-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-purple-border: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
+  --form-color-colorpicker-purple-bg-alt: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
+  --form-color-colorpicker-purple-bg-default: light-dark(var(--modes-color-colorcode-purple-muted-light), var(--modes-color-colorcode-purple-muted-dark));
+  --form-color-colorpicker-purple-pattern: light-dark(var(--modes-color-colorcode-purple-rich-light), var(--modes-color-colorcode-purple-rich-dark));
+  --form-color-colorpicker-purple-label-default: light-dark(var(--modes-color-colorcode-purple-deep-light), var(--modes-color-colorcode-purple-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-slate-border: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
+  --form-color-colorpicker-slate-bg-alt: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
+  --form-color-colorpicker-slate-bg-default: light-dark(var(--modes-color-colorcode-slate-muted-light), var(--modes-color-colorcode-slate-muted-dark));
+  --form-color-colorpicker-slate-pattern: light-dark(var(--modes-color-colorcode-slate-rich-light), var(--modes-color-colorcode-slate-rich-dark));
+  --form-color-colorpicker-slate-label-default: light-dark(var(--modes-color-colorcode-slate-deep-light), var(--modes-color-colorcode-slate-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-gray-border: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
+  --form-color-colorpicker-gray-bg-alt: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
+  --form-color-colorpicker-gray-bg-default: light-dark(var(--modes-color-colorcode-gray-muted-light), var(--modes-color-colorcode-gray-muted-dark));
+  --form-color-colorpicker-gray-pattern: light-dark(var(--modes-color-colorcode-gray-rich-light), var(--modes-color-colorcode-gray-rich-dark));
+  --form-color-colorpicker-gray-label-default: light-dark(var(--modes-color-colorcode-gray-deep-light), var(--modes-color-colorcode-gray-deep-dark)); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
   --form-color-labelset-label-required: light-dark(var(--modes-color-interactive-danger-default-light), var(--modes-color-interactive-danger-default-dark));
   --form-color-validation-border-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark));
   --form-color-validation-bar-error: light-dark(var(--modes-color-status-negative-default-light), var(--modes-color-status-negative-default-dark)); /* error bar to left of inputs */
@@ -1815,6 +1950,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
+  --tab-color-border-activealt: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-enabled: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --tab-color-border-hover: light-dark(var(--modes-color-generic-fg-moderate-light), var(--modes-color-generic-fg-moderate-dark));
   --tab-color-icon-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
@@ -1827,8 +1963,9 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 
   /* table component tokens */
   --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));

package/css/frozenproduct/large/components/badge.css

@@ -4,7 +4,8 @@
 
 :root {
   --badge-radius-badge: var(--global-radius-circle); /* Badge */
-  --badge-color-notification-bg-default: var(--modes-color-status-negative-default);
+  --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
+  --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
   --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
   --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
   --badge-color-notification-border-default: var(--modes-color-generic-fg-nought);

package/css/frozenproduct/large/components/container.css

@@ -9,16 +9,38 @@
   --container-radius-blockquote-bar: var(--global-radius-circle); /* radius for blockquote bar */
   --container-radius-scrollbar: var(--global-radius-circle); /* Scrollbar */
   --container-opacity-carousel-hidden: var(--modes-color-modifiers-input-disabled-fg); /* opacity applied to next and previous carousel slides */
-  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
   --container-color-ai-borderhorizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI dialog component */
   --container-color-ai-bordervertical: var(--modes-color-status-ai-default-vertical); /* left and right border for dialog and insight bubbles. */
   --container-color-ai-nudge-border-ai-horizontal: var(--modes-color-status-ai-default-horizontal); /* top and bottom border for AI nudge message component */
   --container-color-ai-nudge-border-ai-vertical: var(--modes-color-status-ai-default-vertical); /* left and right border for AI nudge message component */
-  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
+  --container-color-calendar-label-default: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-default colors. */
+  --container-color-calendar-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on calendar bg-alt colors. */
+  --container-color-calendar-blue-bg-default: var(--modes-color-colorcode-blue-muted);
+  --container-color-calendar-blue-pattern: var(--modes-color-colorcode-blue-rich);
+  --container-color-calendar-teal-bg-default: var(--modes-color-colorcode-teal-muted);
+  --container-color-calendar-teal-pattern: var(--modes-color-colorcode-teal-rich);
+  --container-color-calendar-green-bg-default: var(--modes-color-colorcode-green-muted);
+  --container-color-calendar-green-pattern: var(--modes-color-colorcode-green-rich);
+  --container-color-calendar-lime-bg-default: var(--modes-color-colorcode-lime-muted);
+  --container-color-calendar-lime-pattern: var(--modes-color-colorcode-lime-rich);
+  --container-color-calendar-orange-bg-default: var(--modes-color-colorcode-orange-muted);
+  --container-color-calendar-orange-pattern: var(--modes-color-colorcode-orange-rich);
+  --container-color-calendar-red-bg-default: var(--modes-color-colorcode-red-muted);
+  --container-color-calendar-red-pattern: var(--modes-color-colorcode-red-rich);
+  --container-color-calendar-pink-bg-default: var(--modes-color-colorcode-pink-muted);
+  --container-color-calendar-pink-pattern: var(--modes-color-colorcode-pink-rich);
+  --container-color-calendar-purple-bg-default: var(--modes-color-colorcode-purple-muted);
+  --container-color-calendar-purple-pattern: var(--modes-color-colorcode-purple-rich);
+  --container-color-calendar-slate-bg-default: var(--modes-color-colorcode-slate-muted);
+  --container-color-calendar-slate-pattern: var(--modes-color-colorcode-slate-rich);
+  --container-color-calendar-gray-bg-default: var(--modes-color-colorcode-gray-muted);
+  --container-color-calendar-gray-pattern: var(--modes-color-colorcode-gray-rich);
   --container-color-interactive-bg-footer-activated: var(--modes-color-status-positive-default); /*   */
   --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
   --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color  */
   --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
+  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
+  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
   --container-typography-adaptive-heading-m: var(--global-typography-adaptive-heading-s); /* Accordion, Subscription tile, Tile select and generic tile or card headings */
   --container-typography-adaptive-heading-l: var(--global-typography-adaptive-heading-m); /* Dialog, drawer and sidebar headings */
   --container-typography-adaptive-subheading-m: var(--global-typography-adaptive-subheading-m); /* Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading */
@@ -37,13 +59,7 @@
   --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
   --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
   --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
-  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
-  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color  */
-  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
-  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
-  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
-  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
-  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
+  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
   --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-generic-active);
   --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-generic-hover-alt); /* Used for accordion hover backgrounds  */
   --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-generic-active);
@@ -51,7 +67,13 @@
   --container-color-interactive-text-active: var(--modes-color-interactive-monochrome-generic-active); /* Active label for any accordion. */
   --container-color-interactive-text-enabled: var(--modes-color-generic-content-harsh); /* Enabled label for standard accordion. */
   --container-color-interactive-text-alt-enabled: var(--modes-color-generic-content-moderate); /* Enabled label for subtle accordion. */
-  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
+  --container-color-scrollbar-bg-default: var(--modes-color-generic-bg-faint);
+  --container-color-standard-bg-alt: var(--modes-color-generic-bg-faint);
+  --container-color-standard-bg-footer-default: var(--modes-color-generic-bg-faint); /* tile footer bg color  */
+  --container-color-standard-border-active: var(--modes-color-interactive-monochrome-generic-active);
+  --container-color-standard-dimmer: var(--modes-color-interactive-inactive-mask); /* dimmed mask for dialogs */
+  --container-color-standard-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
+  --container-color-standard-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */
   --container-boxshadow-card-enabled: var(--global-boxshadow-interactive-enabled); /* Card (enabled) */
   --container-boxshadow-card-hover: var(--global-boxshadow-interactive-hover); /* Card (hover state) */
   --container-boxshadow-card-drag: var(--global-boxshadow-interactive-drag); /* Card (drag state) */
@@ -62,10 +84,6 @@
   --container-boxshadow-sidebar: var(--global-boxshadow-container-distant); /* Sidebar */
   --container-boxshadow-stickyfooter: var(--global-boxshadow-container-sticky-footer); /* Sticky footer in Dialog, Drawer, Sidebar. */
   --container-boxshadow-nudge: var(--global-boxshadow-container-far); /* nudge shadow */
-  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
-  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
-  --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
-  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
   --container-color-interactive-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
   --container-color-interactive-border-alt: var(--modes-color-generic-fg-delicate); /* Link preview.  */
   --container-color-interactive-border-inactive: var(--modes-color-generic-fg-soft);
@@ -77,6 +95,10 @@
   --container-color-interactive-label-footer-activated: var(--modes-color-interactive-monochrome-generic-with-active);
   --container-color-interactive-text-disabled: var(--modes-color-interactive-inactive-content);
   --container-color-interactive-text-hover: var(--modes-color-interactive-monochrome-generic-default); /* Hover label for any accordion. */
+  --container-color-scrollbar-fg-default: var(--modes-color-generic-fg-moderate);
+  --container-color-standard-border-alt: var(--modes-color-generic-fg-soft);
+  --container-color-standard-border-default: var(--modes-color-generic-fg-faint);
+  --container-color-standard-icon: var(--modes-color-generic-fg-moderate); /* Link preview image thumbnail */
   --container-size-none: var(--global-size-none);
   --container-size-accordionstandard-chevron: var(--global-size-icon-m); /* Accordion chevron container */
   --container-size-quotebar-width: var(--global-size-micro-m); /* block quote bar width */

package/css/frozenproduct/large/components/form.css

@@ -11,6 +11,58 @@
   --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
   --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
   --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
+  --form-color-colorpicker-label-default: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-default colors. */
+  --form-color-colorpicker-label-alt: var(--modes-color-generic-content-extreme); /* Accessible on colorpicker bg-alt colors. */
+  --form-color-colorpicker-blue-border: var(--modes-color-colorcode-blue-rich);
+  --form-color-colorpicker-blue-bg-alt: var(--modes-color-colorcode-blue-rich);
+  --form-color-colorpicker-blue-bg-default: var(--modes-color-colorcode-blue-muted);
+  --form-color-colorpicker-blue-pattern: var(--modes-color-colorcode-blue-rich);
+  --form-color-colorpicker-blue-label-default: var(--modes-color-colorcode-blue-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-teal-border: var(--modes-color-colorcode-teal-rich);
+  --form-color-colorpicker-teal-bg-alt: var(--modes-color-colorcode-teal-rich);
+  --form-color-colorpicker-teal-bg-default: var(--modes-color-colorcode-teal-muted);
+  --form-color-colorpicker-teal-pattern: var(--modes-color-colorcode-teal-rich);
+  --form-color-colorpicker-teal-label-default: var(--modes-color-colorcode-teal-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-green-border: var(--modes-color-colorcode-green-rich);
+  --form-color-colorpicker-green-bg-alt: var(--modes-color-colorcode-green-rich);
+  --form-color-colorpicker-green-bg-default: var(--modes-color-colorcode-green-muted);
+  --form-color-colorpicker-green-pattern: var(--modes-color-colorcode-green-rich);
+  --form-color-colorpicker-green-label-default: var(--modes-color-colorcode-green-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-lime-border: var(--modes-color-colorcode-lime-rich);
+  --form-color-colorpicker-lime-bg-alt: var(--modes-color-colorcode-lime-rich);
+  --form-color-colorpicker-lime-bg-default: var(--modes-color-colorcode-lime-muted);
+  --form-color-colorpicker-lime-pattern: var(--modes-color-colorcode-lime-rich);
+  --form-color-colorpicker-lime-label-default: var(--modes-color-colorcode-lime-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-orange-border: var(--modes-color-colorcode-orange-rich);
+  --form-color-colorpicker-orange-bg-alt: var(--modes-color-colorcode-orange-rich);
+  --form-color-colorpicker-orange-bg-default: var(--modes-color-colorcode-orange-muted);
+  --form-color-colorpicker-orange-pattern: var(--modes-color-colorcode-orange-rich);
+  --form-color-colorpicker-orange-label-default: var(--modes-color-colorcode-orange-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-red-border: var(--modes-color-colorcode-red-rich);
+  --form-color-colorpicker-red-bg-alt: var(--modes-color-colorcode-red-rich);
+  --form-color-colorpicker-red-bg-default: var(--modes-color-colorcode-red-muted);
+  --form-color-colorpicker-red-pattern: var(--modes-color-colorcode-red-rich);
+  --form-color-colorpicker-red-label-default: var(--modes-color-colorcode-red-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-pink-border: var(--modes-color-colorcode-pink-rich);
+  --form-color-colorpicker-pink-bg-alt: var(--modes-color-colorcode-pink-rich);
+  --form-color-colorpicker-pink-bg-default: var(--modes-color-colorcode-pink-muted);
+  --form-color-colorpicker-pink-pattern: var(--modes-color-colorcode-pink-rich);
+  --form-color-colorpicker-pink-label-default: var(--modes-color-colorcode-pink-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-purple-border: var(--modes-color-colorcode-purple-rich);
+  --form-color-colorpicker-purple-bg-alt: var(--modes-color-colorcode-purple-rich);
+  --form-color-colorpicker-purple-bg-default: var(--modes-color-colorcode-purple-muted);
+  --form-color-colorpicker-purple-pattern: var(--modes-color-colorcode-purple-rich);
+  --form-color-colorpicker-purple-label-default: var(--modes-color-colorcode-purple-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-slate-border: var(--modes-color-colorcode-slate-rich);
+  --form-color-colorpicker-slate-bg-alt: var(--modes-color-colorcode-slate-rich);
+  --form-color-colorpicker-slate-bg-default: var(--modes-color-colorcode-slate-muted);
+  --form-color-colorpicker-slate-pattern: var(--modes-color-colorcode-slate-rich);
+  --form-color-colorpicker-slate-label-default: var(--modes-color-colorcode-slate-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
+  --form-color-colorpicker-gray-border: var(--modes-color-colorcode-gray-rich);
+  --form-color-colorpicker-gray-bg-alt: var(--modes-color-colorcode-gray-rich);
+  --form-color-colorpicker-gray-bg-default: var(--modes-color-colorcode-gray-muted);
+  --form-color-colorpicker-gray-pattern: var(--modes-color-colorcode-gray-rich);
+  --form-color-colorpicker-gray-label-default: var(--modes-color-colorcode-gray-deep); /* At least 4.5:1 against #F3 (light mode) and #0E (dark mode). Not to be used on bg-default. */
   --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
   --form-color-validation-border-error: var(--modes-color-status-negative-default);
   --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */

package/css/frozenproduct/large/components/tab.css

@@ -38,6 +38,7 @@
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
   --tab-color-bg-active: var(--modes-color-interactive-monochrome-generic-with-active);
+  --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
   --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
   --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-generic-default-alt);
@@ -50,6 +51,7 @@
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
   --tab-radius-indicator-l: var(--global-radius-interactive-xs); /* Indicator for hover and active. */
-  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
-  --tab-borderwidth-navigation-side: var(--global-borderwidth-s); /* Tab (enabled and hover bottom border) */
+  --tab-borderwidth-navigation-bottom: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-side: var(--global-borderwidth-s);
+  --tab-borderwidth-navigation-top: var(--global-borderwidth-s);
 }

package/css/frozenproduct/large/dark.css

@@ -12,6 +12,36 @@
   --modes-color-brand-copilot-no-bg-monochrome: #FFFFFF;
   --modes-color-custom-default: #00D639; /* This is the color to replace in white label products. Dark mode recommended luminosity for SAGE is 75.1 (tested), but above 51.9 should be ok. See hsluv.org to be AAA text on 000000 bgs. */
   --modes-color-custom-frozen: #00D639; /* Replace this color in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
+  --modes-color-colorcode-blue-deep: #007FD9;
+  --modes-color-colorcode-blue-muted: #00293F;
+  --modes-color-colorcode-blue-rich: #0071c3;
+  --modes-color-colorcode-teal-deep: #008A89;
+  --modes-color-colorcode-teal-muted: #002B2A;
+  --modes-color-colorcode-teal-rich: #007C7B;
+  --modes-color-colorcode-green-deep: #009023;
+  --modes-color-colorcode-green-muted: #002D05;
+  --modes-color-colorcode-green-rich: #00811F;
+  --modes-color-colorcode-lime-deep: #6E8500;
+  --modes-color-colorcode-lime-muted: #171e00;
+  --modes-color-colorcode-lime-rich: #637700;
+  --modes-color-colorcode-orange-deep: #DB4B00;
+  --modes-color-colorcode-orange-muted: #380D00;
+  --modes-color-colorcode-orange-rich: #C54300;
+  --modes-color-colorcode-red-deep: #F50058;
+  --modes-color-colorcode-red-muted: #400011;
+  --modes-color-colorcode-red-rich: #DC004E;
+  --modes-color-colorcode-pink-deep: #DD2BAB;
+  --modes-color-colorcode-pink-muted: #3C002C;
+  --modes-color-colorcode-pink-rich: #C8269A;
+  --modes-color-colorcode-purple-deep: #985FDC;
+  --modes-color-colorcode-purple-muted: #270E41;
+  --modes-color-colorcode-purple-rich: #8F4CD7;
+  --modes-color-colorcode-slate-deep: #5C8196;
+  --modes-color-colorcode-slate-muted: #121D23;
+  --modes-color-colorcode-slate-rich: #527386;
+  --modes-color-colorcode-gray-deep: #7C7C7C;
+  --modes-color-colorcode-gray-muted: #1b1b1b;
+  --modes-color-colorcode-gray-rich: #6F6F6F;
   --modes-color-generic-bg-nought: #000000;
   --modes-color-generic-bg-faint: #0e0e0e;
   --modes-color-generic-bg-delicate: #181818;

package/css/frozenproduct/large/light.css

@@ -12,6 +12,36 @@
   --modes-color-brand-copilot-no-bg-monochrome: #000000;
   --modes-color-custom-default: #00811F; /* This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org).  AAA against FFFFFF bg.  */
   --modes-color-custom-frozen: #008046; /* This is a derivative of Jade, and is the color to replace in white label products that use the FROZEN theme. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. */
+  --modes-color-colorcode-blue-deep: #0071c3;
+  --modes-color-colorcode-blue-muted: #CDE5FF;
+  --modes-color-colorcode-blue-rich: #0084E1;
+  --modes-color-colorcode-teal-deep: #007C7B;
+  --modes-color-colorcode-teal-muted: #C1FBFB;
+  --modes-color-colorcode-teal-rich: #009B99;
+  --modes-color-colorcode-green-deep: #00811F;
+  --modes-color-colorcode-green-muted: #C5FFC9;
+  --modes-color-colorcode-green-rich: #00a128;
+  --modes-color-colorcode-lime-deep: #637700;
+  --modes-color-colorcode-lime-muted: #FFFF9C;
+  --modes-color-colorcode-lime-rich: #819B00;
+  --modes-color-colorcode-orange-deep: #C54300;
+  --modes-color-colorcode-orange-muted: #FEEAB0;
+  --modes-color-colorcode-orange-rich: #EA5100;
+  --modes-color-colorcode-red-deep: #DC004E;
+  --modes-color-colorcode-red-muted: #FFDBCF;
+  --modes-color-colorcode-red-rich: #FE005B;
+  --modes-color-colorcode-pink-deep: #C8269A;
+  --modes-color-colorcode-pink-muted: #FFD7EE;
+  --modes-color-colorcode-pink-rich: #e62db2;
+  --modes-color-colorcode-purple-deep: #8F4CD7;
+  --modes-color-colorcode-purple-muted: #E7DEF8;
+  --modes-color-colorcode-purple-rich: #9C66DE;
+  --modes-color-colorcode-slate-deep: #527386;
+  --modes-color-colorcode-slate-muted: #D4E5F1;
+  --modes-color-colorcode-slate-rich: #60869C;
+  --modes-color-colorcode-gray-deep: #6F6F6F;
+  --modes-color-colorcode-gray-muted: #E2E2E2;
+  --modes-color-colorcode-gray-rich: #9b9b9b;
   --modes-color-generic-bg-nought: #FFFFFF;
   --modes-color-generic-bg-faint: #f3f3f3;
   --modes-color-generic-bg-delicate: #e8e8e8;

package/css/frozenproduct/small/components/badge.css

@@ -4,7 +4,8 @@
 
 :root {
   --badge-radius-badge: var(--global-radius-circle); /* Badge */
-  --badge-color-notification-bg-default: var(--modes-color-status-negative-default);
+  --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
+  --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
   --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
   --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
   --badge-color-notification-border-default: var(--modes-color-generic-fg-nought);