@sage/design-tokens 8.2.0 → 8.4.0

package/scss/product/large/components/container.scss

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

package/scss/product/large/components/form.scss

@@ -13,6 +13,58 @@ $form-radius-radio: $global-radius-circle; // Radio button
 $form-radius-switch: $global-radius-circle; // Switch container and handle
 $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
 $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected), 
+$form-color-colorpicker-label-default: $modes-color-generic-content-extreme; // Accessible on colorpicker bg-default colors.
+$form-color-colorpicker-label-alt: $modes-color-generic-content-extreme; // Accessible on colorpicker bg-alt colors.
+$form-color-colorpicker-blue-border: $modes-color-colorcode-blue-rich;
+$form-color-colorpicker-blue-bg-alt: $modes-color-colorcode-blue-rich;
+$form-color-colorpicker-blue-bg-default: $modes-color-colorcode-blue-muted;
+$form-color-colorpicker-blue-pattern: $modes-color-colorcode-blue-rich;
+$form-color-colorpicker-blue-label-default: $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: $modes-color-colorcode-teal-rich;
+$form-color-colorpicker-teal-bg-alt: $modes-color-colorcode-teal-rich;
+$form-color-colorpicker-teal-bg-default: $modes-color-colorcode-teal-muted;
+$form-color-colorpicker-teal-pattern: $modes-color-colorcode-teal-rich;
+$form-color-colorpicker-teal-label-default: $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: $modes-color-colorcode-green-rich;
+$form-color-colorpicker-green-bg-alt: $modes-color-colorcode-green-rich;
+$form-color-colorpicker-green-bg-default: $modes-color-colorcode-green-muted;
+$form-color-colorpicker-green-pattern: $modes-color-colorcode-green-rich;
+$form-color-colorpicker-green-label-default: $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: $modes-color-colorcode-lime-rich;
+$form-color-colorpicker-lime-bg-alt: $modes-color-colorcode-lime-rich;
+$form-color-colorpicker-lime-bg-default: $modes-color-colorcode-lime-muted;
+$form-color-colorpicker-lime-pattern: $modes-color-colorcode-lime-rich;
+$form-color-colorpicker-lime-label-default: $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: $modes-color-colorcode-orange-rich;
+$form-color-colorpicker-orange-bg-alt: $modes-color-colorcode-orange-rich;
+$form-color-colorpicker-orange-bg-default: $modes-color-colorcode-orange-muted;
+$form-color-colorpicker-orange-pattern: $modes-color-colorcode-orange-rich;
+$form-color-colorpicker-orange-label-default: $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: $modes-color-colorcode-red-rich;
+$form-color-colorpicker-red-bg-alt: $modes-color-colorcode-red-rich;
+$form-color-colorpicker-red-bg-default: $modes-color-colorcode-red-muted;
+$form-color-colorpicker-red-pattern: $modes-color-colorcode-red-rich;
+$form-color-colorpicker-red-label-default: $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: $modes-color-colorcode-pink-rich;
+$form-color-colorpicker-pink-bg-alt: $modes-color-colorcode-pink-rich;
+$form-color-colorpicker-pink-bg-default: $modes-color-colorcode-pink-muted;
+$form-color-colorpicker-pink-pattern: $modes-color-colorcode-pink-rich;
+$form-color-colorpicker-pink-label-default: $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: $modes-color-colorcode-purple-rich;
+$form-color-colorpicker-purple-bg-alt: $modes-color-colorcode-purple-rich;
+$form-color-colorpicker-purple-bg-default: $modes-color-colorcode-purple-muted;
+$form-color-colorpicker-purple-pattern: $modes-color-colorcode-purple-rich;
+$form-color-colorpicker-purple-label-default: $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: $modes-color-colorcode-slate-rich;
+$form-color-colorpicker-slate-bg-alt: $modes-color-colorcode-slate-rich;
+$form-color-colorpicker-slate-bg-default: $modes-color-colorcode-slate-muted;
+$form-color-colorpicker-slate-pattern: $modes-color-colorcode-slate-rich;
+$form-color-colorpicker-slate-label-default: $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: $modes-color-colorcode-gray-rich;
+$form-color-colorpicker-gray-bg-alt: $modes-color-colorcode-gray-rich;
+$form-color-colorpicker-gray-bg-default: $modes-color-colorcode-gray-muted;
+$form-color-colorpicker-gray-pattern: $modes-color-colorcode-gray-rich;
+$form-color-colorpicker-gray-label-default: $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: $modes-color-interactive-danger-default;
 $form-color-validation-border-error: $modes-color-status-negative-default;
 $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs

package/scss/product/large/components/tab.scss

@@ -40,6 +40,7 @@ $tab-space-xg-l: $global-space-micro-l; // Gap between elements in Tab.
 $tab-space-y-m: $global-space-micro-l; // Top bottom padding in Tab.
 $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
 $tab-color-bg-active: $modes-color-interactive-monochrome-generic-with-active;
+$tab-color-border-activealt: $modes-color-generic-fg-delicate;
 $tab-color-border-enabled: $modes-color-generic-fg-delicate;
 $tab-color-border-hover: $modes-color-generic-fg-moderate;
 $tab-color-icon-enabled: $modes-color-interactive-monochrome-generic-default-alt;
@@ -52,5 +53,6 @@ $tab-radius-baseline-m: $global-radius-interactive-xxs;
 $tab-radius-baseline-l: $global-radius-interactive-xxs;
 $tab-radius-indicator-m: $global-radius-interactive-xs; // Indicator for hover and active.
 $tab-radius-indicator-l: $global-radius-interactive-xs; // Indicator for hover and active.
-$tab-borderwidth-navigation-bottom: $global-borderwidth-s; // Tab (enabled and hover bottom border)
-$tab-borderwidth-navigation-side: $global-borderwidth-s; // Tab (enabled and hover bottom border)
+$tab-borderwidth-navigation-bottom: $global-borderwidth-s;
+$tab-borderwidth-navigation-side: $global-borderwidth-s;
+$tab-borderwidth-navigation-top: $global-borderwidth-s;

package/scss/product/large/dark.scss

@@ -14,6 +14,36 @@ $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
 $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/scss/product/large/light.scss

@@ -14,6 +14,36 @@ $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
 $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/scss/product/small/components/badge.scss

@@ -6,7 +6,8 @@
 // Do not edit directly, this file was auto-generated.
 
 $badge-radius-badge: $global-radius-circle; // Badge
-$badge-color-notification-bg-default: $modes-color-status-negative-default;
+$badge-color-notification-bg-default: $modes-color-status-negative-default; // Used in global nav notification badges
+$badge-color-notification-bg-alt: $modes-color-status-info-default;
 $badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
 $badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
 $badge-color-notification-border-default: $modes-color-generic-fg-nought;

package/scss/product/small/components/container.scss

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

package/scss/product/small/components/form.scss

@@ -15,6 +15,58 @@ $form-radius-calendar-none: $global-radius-none; // Calendar (start and end dura
 $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected), 
 $form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
+$form-color-colorpicker-label-default: $modes-color-generic-content-extreme; // Accessible on colorpicker bg-default colors.
+$form-color-colorpicker-label-alt: $modes-color-generic-content-extreme; // Accessible on colorpicker bg-alt colors.
+$form-color-colorpicker-blue-border: $modes-color-colorcode-blue-rich;
+$form-color-colorpicker-blue-bg-alt: $modes-color-colorcode-blue-rich;
+$form-color-colorpicker-blue-bg-default: $modes-color-colorcode-blue-muted;
+$form-color-colorpicker-blue-pattern: $modes-color-colorcode-blue-rich;
+$form-color-colorpicker-blue-label-default: $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: $modes-color-colorcode-teal-rich;
+$form-color-colorpicker-teal-bg-alt: $modes-color-colorcode-teal-rich;
+$form-color-colorpicker-teal-bg-default: $modes-color-colorcode-teal-muted;
+$form-color-colorpicker-teal-pattern: $modes-color-colorcode-teal-rich;
+$form-color-colorpicker-teal-label-default: $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: $modes-color-colorcode-green-rich;
+$form-color-colorpicker-green-bg-alt: $modes-color-colorcode-green-rich;
+$form-color-colorpicker-green-bg-default: $modes-color-colorcode-green-muted;
+$form-color-colorpicker-green-pattern: $modes-color-colorcode-green-rich;
+$form-color-colorpicker-green-label-default: $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: $modes-color-colorcode-lime-rich;
+$form-color-colorpicker-lime-bg-alt: $modes-color-colorcode-lime-rich;
+$form-color-colorpicker-lime-bg-default: $modes-color-colorcode-lime-muted;
+$form-color-colorpicker-lime-pattern: $modes-color-colorcode-lime-rich;
+$form-color-colorpicker-lime-label-default: $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: $modes-color-colorcode-orange-rich;
+$form-color-colorpicker-orange-bg-alt: $modes-color-colorcode-orange-rich;
+$form-color-colorpicker-orange-bg-default: $modes-color-colorcode-orange-muted;
+$form-color-colorpicker-orange-pattern: $modes-color-colorcode-orange-rich;
+$form-color-colorpicker-orange-label-default: $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: $modes-color-colorcode-red-rich;
+$form-color-colorpicker-red-bg-alt: $modes-color-colorcode-red-rich;
+$form-color-colorpicker-red-bg-default: $modes-color-colorcode-red-muted;
+$form-color-colorpicker-red-pattern: $modes-color-colorcode-red-rich;
+$form-color-colorpicker-red-label-default: $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: $modes-color-colorcode-pink-rich;
+$form-color-colorpicker-pink-bg-alt: $modes-color-colorcode-pink-rich;
+$form-color-colorpicker-pink-bg-default: $modes-color-colorcode-pink-muted;
+$form-color-colorpicker-pink-pattern: $modes-color-colorcode-pink-rich;
+$form-color-colorpicker-pink-label-default: $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: $modes-color-colorcode-purple-rich;
+$form-color-colorpicker-purple-bg-alt: $modes-color-colorcode-purple-rich;
+$form-color-colorpicker-purple-bg-default: $modes-color-colorcode-purple-muted;
+$form-color-colorpicker-purple-pattern: $modes-color-colorcode-purple-rich;
+$form-color-colorpicker-purple-label-default: $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: $modes-color-colorcode-slate-rich;
+$form-color-colorpicker-slate-bg-alt: $modes-color-colorcode-slate-rich;
+$form-color-colorpicker-slate-bg-default: $modes-color-colorcode-slate-muted;
+$form-color-colorpicker-slate-pattern: $modes-color-colorcode-slate-rich;
+$form-color-colorpicker-slate-label-default: $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: $modes-color-colorcode-gray-rich;
+$form-color-colorpicker-gray-bg-alt: $modes-color-colorcode-gray-rich;
+$form-color-colorpicker-gray-bg-default: $modes-color-colorcode-gray-muted;
+$form-color-colorpicker-gray-pattern: $modes-color-colorcode-gray-rich;
+$form-color-colorpicker-gray-label-default: $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: $modes-color-interactive-danger-default;
 $form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-validation-border-error: $modes-color-status-negative-default;

package/scss/product/small/components/tab.scss

@@ -44,6 +44,7 @@ $tab-space-xg-l: $global-space-micro-l; // Gap between elements in Tab.
 $tab-space-y-m: $global-space-micro-l; // Top bottom padding in Tab.
 $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
 $tab-color-bg-active: $modes-color-interactive-monochrome-generic-with-active;
+$tab-color-border-activealt: $modes-color-generic-fg-delicate;
 $tab-color-border-enabled: $modes-color-generic-fg-delicate;
 $tab-color-border-hover: $modes-color-generic-fg-moderate;
 $tab-radius-m: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
@@ -52,5 +53,6 @@ $tab-radius-baseline-m: $global-radius-interactive-xxs;
 $tab-radius-baseline-l: $global-radius-interactive-xxs;
 $tab-radius-indicator-m: $global-radius-interactive-xs; // Indicator for hover and active.
 $tab-radius-indicator-l: $global-radius-interactive-xs; // Indicator for hover and active.
-$tab-borderwidth-navigation-bottom: $global-borderwidth-s; // Tab (enabled and hover bottom border)
-$tab-borderwidth-navigation-side: $global-borderwidth-s; // Tab (enabled and hover bottom border)
+$tab-borderwidth-navigation-bottom: $global-borderwidth-s;
+$tab-borderwidth-navigation-side: $global-borderwidth-s;
+$tab-borderwidth-navigation-top: $global-borderwidth-s;

package/scss/product/small/dark.scss

@@ -14,6 +14,36 @@ $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
 $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/scss/product/small/light.scss

@@ -14,6 +14,36 @@ $modes-color-brand-copilot-ai-identifier-with-default: #00D639;
 $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;