@sage/design-tokens 8.2.0 → 8.4.0

package/json/nested/product/small/dark/mode.json

@@ -20,6 +20,58 @@
         "default": "#00D639",
         "frozen": "#00D639"
       },
+      "colorcode": {
+        "blue": {
+          "deep": "#007FD9",
+          "muted": "#00293F",
+          "rich": "#0071c3"
+        },
+        "teal": {
+          "deep": "#008A89",
+          "muted": "#002B2A",
+          "rich": "#007C7B"
+        },
+        "green": {
+          "deep": "#009023",
+          "muted": "#002D05",
+          "rich": "#00811F"
+        },
+        "lime": {
+          "deep": "#6E8500",
+          "muted": "#171e00",
+          "rich": "#637700"
+        },
+        "orange": {
+          "deep": "#DB4B00",
+          "muted": "#380D00",
+          "rich": "#C54300"
+        },
+        "red": {
+          "deep": "#F50058",
+          "muted": "#400011",
+          "rich": "#DC004E"
+        },
+        "pink": {
+          "deep": "#DD2BAB",
+          "muted": "#3C002C",
+          "rich": "#C8269A"
+        },
+        "purple": {
+          "deep": "#985FDC",
+          "muted": "#270E41",
+          "rich": "#8F4CD7"
+        },
+        "slate": {
+          "deep": "#5C8196",
+          "muted": "#121D23",
+          "rich": "#527386"
+        },
+        "gray": {
+          "deep": "#7C7C7C",
+          "muted": "#1b1b1b",
+          "rich": "#6F6F6F"
+        }
+      },
       "generic": {
         "bg": {
           "nought": "#000000",

package/json/nested/product/small/light/components/badge.json

@@ -4,6 +4,7 @@
       "notification": {
         "border-default": "#FFFFFF",
         "bg-default": "#CD384B",
+        "bg-alt": "#0060A7",
         "label-default": "#FFFFFF"
       }
     },

package/json/nested/product/small/light/components/container.json

@@ -1,18 +1,6 @@
 {
   "container": {
     "color": {
-      "standard": {
-        "bg-alt": "#f3f3f3",
-        "bg-default": "#FFFFFF",
-        "bgFooter-default": "#f3f3f3",
-        "border-active": "#000000",
-        "border-alt": "#a6a6a6",
-        "border-default": "#e8e8e8",
-        "dimmer": "#000000",
-        "icon": "#777",
-        "text-alt": "#0000008c",
-        "text-default": "#000000f2"
-      },
       "AI": {
         "borderhorizontal": "linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)",
         "bordervertical": "linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)",
@@ -21,14 +9,54 @@
           "borderAi-vertical": "linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)"
         }
       },
-      "scrollbar": {
-        "bg-default": "#f3f3f3",
-        "fg-default": "#777"
+      "blockquote": {
+        "border": "#00811F"
       },
-      "interactive": {
-        "detailedicon": {
-          "bg": "#00811F"
+      "calendar": {
+        "label-default": "#000000",
+        "label-alt": "#000000",
+        "blue": {
+          "bg-default": "#CDE5FF",
+          "pattern": "#0084E1"
+        },
+        "teal": {
+          "bg-default": "#C1FBFB",
+          "pattern": "#009B99"
+        },
+        "green": {
+          "bg-default": "#C5FFC9",
+          "pattern": "#00a128"
+        },
+        "lime": {
+          "bg-default": "#FFFF9C",
+          "pattern": "#819B00"
+        },
+        "orange": {
+          "bg-default": "#FEEAB0",
+          "pattern": "#EA5100"
+        },
+        "red": {
+          "bg-default": "#FFDBCF",
+          "pattern": "#FE005B"
+        },
+        "pink": {
+          "bg-default": "#FFD7EE",
+          "pattern": "#e62db2"
         },
+        "purple": {
+          "bg-default": "#E7DEF8",
+          "pattern": "#9C66DE"
+        },
+        "slate": {
+          "bg-default": "#D4E5F1",
+          "pattern": "#60869C"
+        },
+        "gray": {
+          "bg-default": "#E2E2E2",
+          "pattern": "#9b9b9b"
+        }
+      },
+      "interactive": {
         "bgFooter-activated": "#00811F",
         "bgFooter-active": "#000000",
         "border-activated": "#00811F",
@@ -51,10 +79,26 @@
         "text-disabled": "#0000006b",
         "text-enabled": "#000000f2",
         "textAlt-enabled": "#0000008c",
-        "text-hover": "#000000e6"
+        "text-hover": "#000000e6",
+        "detailedicon": {
+          "bg": "#00811F"
+        }
       },
-      "blockquote": {
-        "border": "#00811F"
+      "scrollbar": {
+        "bg-default": "#f3f3f3",
+        "fg-default": "#777"
+      },
+      "standard": {
+        "bg-alt": "#f3f3f3",
+        "bg-default": "#FFFFFF",
+        "bgFooter-default": "#f3f3f3",
+        "border-active": "#000000",
+        "border-alt": "#a6a6a6",
+        "border-default": "#e8e8e8",
+        "dimmer": "#000000",
+        "icon": "#777",
+        "text-alt": "#0000008c",
+        "text-default": "#000000f2"
       }
     },
     "size": {

package/json/nested/product/small/light/components/form.json

@@ -414,6 +414,80 @@
         "text-hover": "#000000",
         "textAlt-enabled": "#0000008c"
       },
+      "colorpicker": {
+        "label-default": "#000000",
+        "label-alt": "#000000",
+        "blue": {
+          "border": "#0084E1",
+          "bg-alt": "#0084E1",
+          "bg-default": "#CDE5FF",
+          "pattern": "#0084E1",
+          "label-default": "#0071c3"
+        },
+        "teal": {
+          "border": "#009B99",
+          "bg-alt": "#009B99",
+          "bg-default": "#C1FBFB",
+          "pattern": "#009B99",
+          "label-default": "#007C7B"
+        },
+        "green": {
+          "border": "#00a128",
+          "bg-alt": "#00a128",
+          "bg-default": "#C5FFC9",
+          "pattern": "#00a128",
+          "label-default": "#00811F"
+        },
+        "lime": {
+          "border": "#819B00",
+          "bg-alt": "#819B00",
+          "bg-default": "#FFFF9C",
+          "pattern": "#819B00",
+          "label-default": "#637700"
+        },
+        "orange": {
+          "border": "#EA5100",
+          "bg-alt": "#EA5100",
+          "bg-default": "#FEEAB0",
+          "pattern": "#EA5100",
+          "label-default": "#C54300"
+        },
+        "red": {
+          "border": "#FE005B",
+          "bg-alt": "#FE005B",
+          "bg-default": "#FFDBCF",
+          "pattern": "#FE005B",
+          "label-default": "#DC004E"
+        },
+        "pink": {
+          "border": "#e62db2",
+          "bg-alt": "#e62db2",
+          "bg-default": "#FFD7EE",
+          "pattern": "#e62db2",
+          "label-default": "#C8269A"
+        },
+        "purple": {
+          "border": "#9C66DE",
+          "bg-alt": "#9C66DE",
+          "bg-default": "#E7DEF8",
+          "pattern": "#9C66DE",
+          "label-default": "#8F4CD7"
+        },
+        "slate": {
+          "border": "#60869C",
+          "bg-alt": "#60869C",
+          "bg-default": "#D4E5F1",
+          "pattern": "#60869C",
+          "label-default": "#527386"
+        },
+        "gray": {
+          "border": "#9b9b9b",
+          "bg-alt": "#9b9b9b",
+          "bg-default": "#E2E2E2",
+          "pattern": "#9b9b9b",
+          "label-default": "#6F6F6F"
+        }
+      },
       "dropdown": {
         "bg-hover": "#00000014",
         "label-active": "#FFFFFF",

package/json/nested/product/small/light/components/tab.json

@@ -37,6 +37,7 @@
       "bg-active": "#FFFFFF",
       "bg-enabled": "#fff0",
       "bg-hover": "#00000014",
+      "border-activealt": "#d1d1d1",
       "border-active": "#000000",
       "border-enabled": "#d1d1d1",
       "border-hover": "#777",
@@ -74,7 +75,8 @@
     "borderwidth": {
       "navigation": {
         "bottom": 2,
-        "side": 2
+        "side": 2,
+        "top": 2
       }
     },
     "typography": {

package/json/nested/product/small/light/mode.json

@@ -20,6 +20,58 @@
         "default": "#00811F",
         "frozen": "#008046"
       },
+      "colorcode": {
+        "blue": {
+          "deep": "#0071c3",
+          "muted": "#CDE5FF",
+          "rich": "#0084E1"
+        },
+        "teal": {
+          "deep": "#007C7B",
+          "muted": "#C1FBFB",
+          "rich": "#009B99"
+        },
+        "green": {
+          "deep": "#00811F",
+          "muted": "#C5FFC9",
+          "rich": "#00a128"
+        },
+        "lime": {
+          "deep": "#637700",
+          "muted": "#FFFF9C",
+          "rich": "#819B00"
+        },
+        "orange": {
+          "deep": "#C54300",
+          "muted": "#FEEAB0",
+          "rich": "#EA5100"
+        },
+        "red": {
+          "deep": "#DC004E",
+          "muted": "#FFDBCF",
+          "rich": "#FE005B"
+        },
+        "pink": {
+          "deep": "#C8269A",
+          "muted": "#FFD7EE",
+          "rich": "#e62db2"
+        },
+        "purple": {
+          "deep": "#8F4CD7",
+          "muted": "#E7DEF8",
+          "rich": "#9C66DE"
+        },
+        "slate": {
+          "deep": "#527386",
+          "muted": "#D4E5F1",
+          "rich": "#60869C"
+        },
+        "gray": {
+          "deep": "#6F6F6F",
+          "muted": "#E2E2E2",
+          "rich": "#9b9b9b"
+        }
+      },
       "generic": {
         "bg": {
           "nought": "#FFFFFF",

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "8.2.0",
+  "version": "8.4.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/frozenproduct/large/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/frozenproduct/large/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/frozenproduct/large/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/frozenproduct/large/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/frozenproduct/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/frozenproduct/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/frozenproduct/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;