@sage/design-tokens 5.3.0 → 7.0.0

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

@@ -2,73 +2,116 @@
   "status": {
     "color": {
       "none": "#fff0",
-      "bg-default": "#FFFFFF",
-      "bg-readonly": "#a6a6a6",
-      "border-readonly": "#a6a6a6",
-      "icon-default": "#FFFFFF",
-      "label-default": "#FFFFFF",
-      "label-readonly": "#FFFFFF",
-      "label-hover": "#FFFFFF",
-      "labelAlt-default": "#000000f2",
-      "labelAlt-readonly": "#000000ab",
-      "labelAlt-hover": "#000000",
-      "text": "#000000",
-      "AI": {
-        "bg-default": "#000000",
-        "border-default": "#000000"
-      },
-      "callout": {
-        "bgAlt": "#e5fae2",
-        "bgAlt-default": "#e5fae2",
-        "bgAlt-hover": "#d8ecd5"
-      },
-      "error": {
-        "bg-default": "#CD384B",
-        "bgAlt": "#fdeceb",
-        "bgAlt-hover": "#efdfde",
-        "bg-hover": "#aa323f",
-        "border-default": "#CD384B",
-        "icon": "#CD384B"
-      },
-      "info": {
-        "bg-default": "#0060A7",
-        "bgAlt": "#eaeef6",
-        "bgAlt-default": "#eaeef6",
-        "bgAlt-hover": "#dde1e8",
-        "bg-hover": "#10508a",
-        "border-default": "#0060A7",
-        "icon": "#0060A7"
+      "message": {
+        "global": {
+          "label-default": "#000000f2",
+          "label-hover": "#000000",
+          "callout": {
+            "bg-default": "#e5fae2",
+            "bg-hover": "#d8ecd5",
+            "icon": "#000000f2"
+          },
+          "info": {
+            "bg-default": "#eaeef6",
+            "bg-hover": "#dde1e8",
+            "icon": "#0060A7"
+          },
+          "warning": {
+            "bg-default": "#ffede5",
+            "bg-hover": "#f1e0d8",
+            "icon": "#D64309"
+          }
+        },
+        "contextual": {
+          "bg": "#FFFFFF",
+          "icon": "#FFFFFF",
+          "text": "#000000",
+          "AI": {
+            "bg-default": "#000000",
+            "bgAlt": "#efefef",
+            "border-default": "#000000"
+          },
+          "callout": {
+            "bgAlt": "#e5fae2",
+            "icon": "#000000f2"
+          },
+          "error": {
+            "bg-default": "#CD384B",
+            "bgAlt": "#fdeceb",
+            "border-default": "#CD384B",
+            "icon": "#CD384B"
+          },
+          "info": {
+            "bg-default": "#0060A7",
+            "bgAlt": "#eaeef6",
+            "border-default": "#0060A7",
+            "icon": "#0060A7"
+          },
+          "success": {
+            "bg-default": "#008A21",
+            "bgAlt": "#eaf3e8",
+            "border-default": "#008A21",
+            "icon": "#008A21"
+          },
+          "warning": {
+            "bg-default": "#D64309",
+            "bgAlt": "#ffede5",
+            "border-default": "#D64309",
+            "icon": "#D64309"
+          }
+        }
       },
-      "neutral": {
-        "bg-default": "#656565",
-        "bgAlt": "#efefef",
-        "bgAlt-hover": "#e2e2e2",
-        "bg-hover": "#555",
-        "border-default": "#656565",
-        "icon": "#656565"
+      "pill": {
+        "label-default": "#FFFFFF",
+        "label-hover": "#FFFFFF",
+        "labelAlt-default": "#000000f2",
+        "labelAlt-hover": "#000000f2",
+        "error": {
+          "bg-default": "#CD384B",
+          "bgAlt-default": "#fdeceb",
+          "bgAlt-hover": "#efdfde",
+          "bg-hover": "#aa323f",
+          "border-default": "#CD384B"
+        },
+        "info": {
+          "bg-default": "#0060A7",
+          "bgAlt-default": "#eaeef6",
+          "bgAlt-hover": "#dde1e8",
+          "bg-hover": "#10508a",
+          "border-default": "#0060A7"
+        },
+        "neutral": {
+          "bg-default": "#656565",
+          "bgAlt-default": "#efefef",
+          "bgAlt-hover": "#e2e2e2",
+          "bg-hover": "#555",
+          "border-default": "#656565"
+        },
+        "success": {
+          "bg-default": "#008A21",
+          "bgAlt-default": "#eaf3e8",
+          "bgAlt-hover": "#dde5db",
+          "bg-hover": "#0f731e",
+          "border-default": "#008A21"
+        },
+        "warning": {
+          "bg-default": "#D64309",
+          "bgAlt-default": "#ffede5",
+          "bgAlt-hover": "#f1e0d8",
+          "bg-hover": "#b13a0d",
+          "border-default": "#D64309"
+        },
+        "readonly": {
+          "bg-default": "#a6a6a6",
+          "border-default": "#a6a6a6",
+          "label": "#000000ab"
+        }
       },
       "rating": {
         "bg-default": "#00811F",
         "bg-defaultAlt": "linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%)",
         "bg-hover": "#0e6b1d",
         "border-default": "#00811F"
-      },
-      "success": {
-        "bg-default": "#008A21",
-        "bgAlt": "#eaf3e8",
-        "bgAlt-hover": "#dde5db",
-        "bg-hover": "#0f731e",
-        "border-default": "#008A21",
-        "icon": "#008A21"
-      },
-      "warning": {
-        "bg-default": "#D64309",
-        "bgAlt": "#ffede5",
-        "bgAlt-default": "#ffede5",
-        "bgAlt-hover": "#f1e0d8",
-        "bg-hover": "#b13a0d",
-        "border-default": "#D64309",
-        "icon": "#D64309"
       }
     },
     "size": {

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

@@ -82,12 +82,6 @@
           "M": 8,
           "L": 8,
           "XL": 8
-        },
-        "y": {
-          "M": 8
-        },
-        "yg": {
-          "M": 8
         }
       },
       "rowchild": {

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

@@ -12,14 +12,7 @@
             "withDefault": "#00D639"
           },
           "noBg": {
-            "S": "#000000",
-            "star": "#000000",
-            "mono": "#000000"
-          },
-          "withBg": {
-            "S": "linear-gradient(191deg, #9D60FF 28.12%, #7C78F8 33.5%, #29B7E6 46.96%, #00D6DE 52.34%, #00D6DA 55.03%, #00D6D0 56.83%, #00D6C0 57.73%, #00D6A8 59.52%, #00D68A 60.42%, #00D665 62.21%, #00D639 63.11%)",
-            "star": "radial-gradient(99.94% 104.1% at 8.01% 0.98%, #9D60FF 34%, #5A99F1 52%, #32B3E8 59%, #0DCCE0 68%, #00D6DE 72%, #00D6D7 74%, #00D6C6 77%, #00D6AA 81%, #00D682 84%, #00D650 88%, #00D639 90%)",
-            "bg": "#000000"
+            "monochrome": "#000000"
           }
         }
       },
@@ -195,9 +188,9 @@
           "hover": "#b13a0d",
           "hoverAlt": "#f1e0d8",
           "text": "#bf3e0c",
-          "frozen": {
-            "default": "#FF8629",
-            "icon": "#000000"
+          "frozenglobal": {
+            "default": "#ff8629",
+            "hover": "#ff9a4e"
           }
         },
         "content": {
@@ -216,8 +209,9 @@
           "defaultAlt": "#eaeef6",
           "hover": "#10508a",
           "hoverAlt": "#dde1e8",
-          "frozen": {
-            "default": "#65a9ff"
+          "frozenglobal": {
+            "default": "#65a9ff",
+            "hover": "#84b6ff"
           }
         },
         "negative": {
@@ -228,14 +222,15 @@
           "text": "#CD384B"
         },
         "neutral": {
-          "alt": "#656565",
           "default": "#656565",
           "defaultAlt": "#efefef",
           "hover": "#555",
           "hoverAlt": "#e2e2e2",
           "frozen": {
             "default": "#335B70",
-            "hover": "#20313b"
+            "defaultAlt": "#eaedf0",
+            "hover": "#20313b",
+            "hoverAlt": "#dde0e2"
           }
         },
         "positive": {

package/package.json

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

package/scss/frozenproduct/large/components/button.scss

@@ -23,9 +23,6 @@ $button-color-ai-border-hover: $modes-color-interactive-ai-default;
 $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
-$button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
-$button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
 $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
 $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
 $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -50,7 +47,6 @@ $button-typography-responsive-tertiary-l: $global-typography-responsive-componen
 $button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
 $button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -58,25 +54,17 @@ $button-color-destructive-secondary-border-hover: $modes-color-interactive-dange
 $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
 $button-color-typical-secondary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
 $button-color-typical-tertiary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
 $button-size-m: $global-size-macro-m; // min-height on M Buttons
@@ -166,8 +154,8 @@ $button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
 $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
-$button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
 $button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
@@ -179,25 +167,30 @@ $button-color-typical-primary-label-active: $modes-color-interactive-primary-wit
 $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
 $button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
-$button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
+$button-color-typical-tertiary-bg-enabled: $modes-color-interactive-monochrome-subtle-default;
 $button-color-typical-tertiary-label-active-copy: $modes-color-interactive-monochrome-frozen-with-active;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-generic-with-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
 $button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
 $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -218,10 +211,17 @@ $button-borderwidth-chip: $global-borderwidth-xs; // chip button border width
 $button-borderwidth-secondary: $global-borderwidth-s; // Secondary button. 
 $button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
 $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
+$button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
 $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
+$button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
 $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
+$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
+$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
 $button-color-typical-tertiary-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
+$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;

package/scss/frozenproduct/large/components/container.scss

@@ -12,20 +12,15 @@ $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquot
 $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-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;
 $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-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-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
@@ -46,17 +41,18 @@ $container-typography-responsive-paragraph-m: $global-typography-responsive-comp
 $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-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-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.
-$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
+$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-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-boxshadow-card-enabled: $global-boxshadow-interactive-enabled; // Card (enabled)
 $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (hover state)
@@ -76,9 +72,13 @@ $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-defa
 $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview. 
 $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
 $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
+$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.
+$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
 $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-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
 $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
@@ -217,9 +217,11 @@ $container-space-linkpreview-y-l: $global-space-macro-xs; // Content horizontal
 $container-space-linkpreview-yg-s: $global-space-micro-s; // Content horizontal padding for small variant
 $container-space-linkpreview-yg-m: $global-space-micro-l; // Content horizontal padding for medium variant
 $container-space-linkpreview-yg-l: $global-space-micro-xxl; // Content horizontal padding for large variant
-$container-space-pagination-xg-m: $global-space-micro-l; // gap between elements in pagination
+$container-space-pagination-xg-m: $global-space-macro-xxxs; // gap between elements in pagination
 $container-space-pagination-xg-l: $global-space-macro-xs; // gap between page nav buttons in pagination
-$container-space-pagination-y-m: $global-space-micro-l; // top and bottom padding inside pagination
+$container-space-pagination-y-m: $global-space-macro-xxs; // top and bottom padding inside pagination
+$container-space-pagination-y-l: $global-space-macro-xs; // external margin on top of floating pagination variant
+$container-space-pagination-yg-m: $global-space-macro-xxxs; // gap between left and right pagination elements when stacked vertically on small screens
 $container-space-pagination-x-m: $global-space-macro-xs; // left and right padding inside pagination
 $container-space-scrollbar-y-inner: $global-space-micro-xxs; // top and bottom padding around scrollbar handle.
 $container-space-scrollbar-y-outer: $global-space-micro-xs; // top and bottom padding inside scrollbar outer container

package/scss/frozenproduct/large/components/form.scss

@@ -13,10 +13,7 @@ $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-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
-$form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
 $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;
 $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
 $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -35,10 +32,10 @@ $form-typography-responsive-label-l: $global-typography-responsive-component-fir
 $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
+$form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
+$form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
 $form-color-calendar-text-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
-$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
 $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
@@ -47,9 +44,8 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
 $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
 $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
 $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
+$form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
-$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
-$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-space-none: $global-space-none;
 $form-space-calendar-x-m: $global-space-macro-m;
 $form-space-calendar-y-m: $global-space-macro-m;
@@ -222,7 +218,9 @@ $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
 $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER 
 $form-color-dropdown-label-active: $modes-color-interactive-monochrome-generic-with-active;
+$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
 $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
+$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
 $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
 $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -242,8 +240,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
 $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
 $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
 $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
+$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-fg-active: $modes-color-interactive-monochrome-generic-with-active;
 $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
+$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
 $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-switch-icon-enabled: $modes-color-interactive-data-entry-content-alt;

package/scss/frozenproduct/large/components/link.scss

@@ -5,7 +5,6 @@
 
 // Do not edit directly, this file was auto-generated.
 
-$link-color-subtle-label-hover: $modes-color-interactive-monochrome-generic-active;
 $link-typography-responsive-default-s: $global-typography-responsive-component-underlined-moderate-s; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
 $link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
 $link-typography-responsive-default-l: $global-typography-responsive-component-underlined-moderate-l; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
@@ -19,10 +18,11 @@ $link-typography-adaptive-heading-s: $global-typography-adaptive-component-under
 $link-typography-adaptive-heading-m: $global-typography-adaptive-component-underlined-firm-m;
 $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
 $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
-$link-color-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
+$link-color-subtle-label-hover: $modes-color-interactive-monochrome-generic-active;
 $link-boxshadow-skiplink: $global-boxshadow-container-near;
 $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
 $link-color-typical-label-default: $modes-color-interactive-primary-default-alt;
+$link-color-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
 $link-size-skiplink-m: $global-size-macro-m;
 $link-size-icon-m: $global-size-icon-m;
 $link-radius-link: $global-radius-interactive-xs; // Link (focus bg and bottom corners of focus underline)

package/scss/frozenproduct/large/components/logo.scss

@@ -6,16 +6,11 @@
 // Do not edit directly, this file was auto-generated.
 
 $logo-size-ai-m: 14px; // AI star
-$logo-color-copilot-no-bg-bg-s: $modes-color-brand-copilot-no-bg-s;
-$logo-color-copilot-no-bg-bg-star: $modes-color-brand-copilot-no-bg-star;
 $logo-color-sage-bg-default: $modes-color-brand-default; // sage logo
 $logo-color-sage-bg-alt: $modes-color-brand-default-alt;
 $logo-color-trust-bg-default: $modes-color-status-positive-default; // filled
 $logo-color-trust-outline: $modes-color-generic-content-extreme;
-$logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-mono;
-$logo-color-copilot-with-bg-bg-s: $modes-color-brand-copilot-with-bg-s;
-$logo-color-copilot-with-bg-bg-star: $modes-color-brand-copilot-with-bg-star;
-$logo-color-copilot-with-bg-bg-default: $modes-color-brand-copilot-with-bg-bg;
+$logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-monochrome;
 $logo-color-ai-identifier-bg-star: $modes-color-brand-copilot-ai-identifier-default; // star bg color
 $logo-color-ai-identifier-bg-dot: $modes-color-brand-copilot-ai-identifier-with-default;
 $logo-color-ai-identifier-outline: $modes-color-brand-copilot-ai-identifier-default; // star outline variant

package/scss/frozenproduct/large/components/nav.scss

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
-$nav-color-item-bg-active: $modes-color-interactive-monochrome-generic-active;
 $nav-color-item-bg-enabled: $modes-color-none;
 $nav-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $nav-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -20,17 +19,18 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
 $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
+$nav-color-item-bg-active: $modes-color-interactive-monochrome-generic-active;
 $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-generic-hover-alt;
 $nav-color-item-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
 $nav-color-item-label-activealt: $modes-color-interactive-monochrome-generic-with-hover;
-$nav-color-item-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $nav-color-item-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$nav-color-item-label-alt: $modes-color-interactive-monochrome-generic-default-alt;
 $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
 $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
 $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
 $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
 $nav-color-item-label-active: $modes-color-interactive-monochrome-generic-with-active;
+$nav-color-item-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$nav-color-item-label-alt: $modes-color-interactive-monochrome-generic-default-alt;
 $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
 $nav-radius-menu: $global-radius-interactive-m; // Drop list bottom corners, product popout list all corners
 $nav-radius-menuitem: $global-radius-interactive-s; // Menu (menu item state bg shape), 

package/scss/frozenproduct/large/components/page.scss

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $page-color-bg-default: $modes-color-generic-backdrop-nought;
-$page-color-bg-alt: $modes-color-generic-backdrop-faint;
 $page-typography-responsive-h1: $global-typography-responsive-heading-l;
 $page-typography-responsive-h2: $global-typography-responsive-heading-m;
 $page-typography-responsive-h3: $global-typography-responsive-heading-s;
@@ -21,6 +20,7 @@ $page-typography-adaptive-h4: $global-typography-adaptive-subheading-l;
 $page-typography-adaptive-h5: $global-typography-adaptive-subheading-m;
 $page-typography-adaptive-p-typical: $global-typography-adaptive-body-s;
 $page-typography-adaptive-p-large: $global-typography-adaptive-body-s;
+$page-color-bg-alt: $modes-color-generic-backdrop-faint;
 $page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
 $page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc 
 $page-space-none: $global-space-none;

package/scss/frozenproduct/large/components/popover.scss

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $popover-radius-none: $global-radius-none; // Navigation menu top corners
-$popover-color-bg-active: $modes-color-interactive-monochrome-generic-active; // previously action minor 850
 $popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
 $popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -21,11 +20,11 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
 $popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
 $popover-boxshadow-container: $global-boxshadow-container-near; // REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown) 
+$popover-color-bg-active: $modes-color-interactive-monochrome-generic-active; // previously action minor 850
 $popover-color-bg-activealt: $modes-color-interactive-monochrome-generic-hover-alt; // REF'D IN FORM. 
 $popover-color-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // REF'D IN FORM. 
 $popover-color-label-activealt: $modes-color-interactive-monochrome-generic-with-hover;
 $popover-color-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$popover-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
 $popover-size-icon-m: $global-size-icon-m;
 $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -53,3 +52,4 @@ $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on sma
 $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
 $popover-color-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $popover-color-label-disabled: $modes-color-interactive-inactive-content;
+$popover-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;