@sage/design-tokens 14.4.0 → 14.5.0

package/json/flat/frozenproduct/large/global.json

@@ -179,8 +179,9 @@
   "globalFontSizeAdaptiveStep9": "46px",
   "globalFontSizeAdaptiveStep10": "52px",
   "globalFontFamiliesSageIcons": "sage-icons",
-  "globalFontFamiliesSageHeadline": "Sage Headline",
-  "globalFontFamiliesSageUi": "Sage UI",
-  "globalFontFamiliesSageText": "Sage Text",
+  "globalFontFamiliesHeading": "Sage UI",
+  "globalFontFamiliesSubheading": "Sage UI",
+  "globalFontFamiliesBody": "Sage UI",
+  "globalFontFamiliesComponent": "Sage UI",
   "globalFontFamiliesOther": "Open Sans"
 }

package/json/flat/frozenproduct/small/global.json

@@ -179,8 +179,9 @@
   "globalFontSizeAdaptiveStep9": "33px",
   "globalFontSizeAdaptiveStep10": "36px",
   "globalFontFamiliesSageIcons": "sage-icons",
-  "globalFontFamiliesSageHeadline": "Sage Headline",
-  "globalFontFamiliesSageUi": "Sage UI",
-  "globalFontFamiliesSageText": "Sage Text",
+  "globalFontFamiliesHeading": "Sage UI",
+  "globalFontFamiliesSubheading": "Sage UI",
+  "globalFontFamiliesBody": "Sage UI",
+  "globalFontFamiliesComponent": "Sage UI",
   "globalFontFamiliesOther": "Open Sans"
 }

package/json/flat/marketing/large/global.json

@@ -179,8 +179,9 @@
   "globalFontSizeAdaptiveStep9": "46px",
   "globalFontSizeAdaptiveStep10": "52px",
   "globalFontFamiliesSageIcons": "sage-icons",
-  "globalFontFamiliesSageHeadline": "Sage Headline",
-  "globalFontFamiliesSageUi": "Sage UI",
-  "globalFontFamiliesSageText": "Sage Text",
+  "globalFontFamiliesHeading": "Sage UI",
+  "globalFontFamiliesSubheading": "Sage UI",
+  "globalFontFamiliesBody": "Sage UI",
+  "globalFontFamiliesComponent": "Sage UI",
   "globalFontFamiliesOther": "Open Sans"
 }

package/json/flat/marketing/small/global.json

@@ -179,8 +179,9 @@
   "globalFontSizeAdaptiveStep9": "33px",
   "globalFontSizeAdaptiveStep10": "36px",
   "globalFontFamiliesSageIcons": "sage-icons",
-  "globalFontFamiliesSageHeadline": "Sage Headline",
-  "globalFontFamiliesSageUi": "Sage UI",
-  "globalFontFamiliesSageText": "Sage Text",
+  "globalFontFamiliesHeading": "Sage UI",
+  "globalFontFamiliesSubheading": "Sage UI",
+  "globalFontFamiliesBody": "Sage UI",
+  "globalFontFamiliesComponent": "Sage UI",
   "globalFontFamiliesOther": "Open Sans"
 }

package/json/flat/product/large/global.json

@@ -179,8 +179,9 @@
   "globalFontSizeAdaptiveStep9": "46px",
   "globalFontSizeAdaptiveStep10": "52px",
   "globalFontFamiliesSageIcons": "sage-icons",
-  "globalFontFamiliesSageHeadline": "Sage Headline",
-  "globalFontFamiliesSageUi": "Sage UI",
-  "globalFontFamiliesSageText": "Sage Text",
+  "globalFontFamiliesHeading": "Sage UI",
+  "globalFontFamiliesSubheading": "Sage UI",
+  "globalFontFamiliesBody": "Sage UI",
+  "globalFontFamiliesComponent": "Sage UI",
   "globalFontFamiliesOther": "Open Sans"
 }

package/json/flat/product/small/global.json

@@ -179,8 +179,9 @@
   "globalFontSizeAdaptiveStep9": "33px",
   "globalFontSizeAdaptiveStep10": "36px",
   "globalFontFamiliesSageIcons": "sage-icons",
-  "globalFontFamiliesSageHeadline": "Sage Headline",
-  "globalFontFamiliesSageUi": "Sage UI",
-  "globalFontFamiliesSageText": "Sage Text",
+  "globalFontFamiliesHeading": "Sage UI",
+  "globalFontFamiliesSubheading": "Sage UI",
+  "globalFontFamiliesBody": "Sage UI",
+  "globalFontFamiliesComponent": "Sage UI",
   "globalFontFamiliesOther": "Open Sans"
 }

package/json/nested/frozenproduct/large/global.json

@@ -902,9 +902,10 @@
     },
     "fontFamilies": {
       "sage-icons": "sage-icons",
-      "sage-headline": "Sage Headline",
-      "sage-ui": "Sage UI",
-      "sage-text": "Sage Text",
+      "heading": "Sage UI",
+      "subheading": "Sage UI",
+      "body": "Sage UI",
+      "component": "Sage UI",
       "other": "Open Sans"
     }
   }

package/json/nested/frozenproduct/small/global.json

@@ -902,9 +902,10 @@
     },
     "fontFamilies": {
       "sage-icons": "sage-icons",
-      "sage-headline": "Sage Headline",
-      "sage-ui": "Sage UI",
-      "sage-text": "Sage Text",
+      "heading": "Sage UI",
+      "subheading": "Sage UI",
+      "body": "Sage UI",
+      "component": "Sage UI",
       "other": "Open Sans"
     }
   }

package/json/nested/marketing/large/global.json

@@ -902,9 +902,10 @@
     },
     "fontFamilies": {
       "sage-icons": "sage-icons",
-      "sage-headline": "Sage Headline",
-      "sage-ui": "Sage UI",
-      "sage-text": "Sage Text",
+      "heading": "Sage UI",
+      "subheading": "Sage UI",
+      "body": "Sage UI",
+      "component": "Sage UI",
       "other": "Open Sans"
     }
   }

package/json/nested/marketing/small/global.json

@@ -902,9 +902,10 @@
     },
     "fontFamilies": {
       "sage-icons": "sage-icons",
-      "sage-headline": "Sage Headline",
-      "sage-ui": "Sage UI",
-      "sage-text": "Sage Text",
+      "heading": "Sage UI",
+      "subheading": "Sage UI",
+      "body": "Sage UI",
+      "component": "Sage UI",
       "other": "Open Sans"
     }
   }

package/json/nested/product/large/global.json

@@ -902,9 +902,10 @@
     },
     "fontFamilies": {
       "sage-icons": "sage-icons",
-      "sage-headline": "Sage Headline",
-      "sage-ui": "Sage UI",
-      "sage-text": "Sage Text",
+      "heading": "Sage UI",
+      "subheading": "Sage UI",
+      "body": "Sage UI",
+      "component": "Sage UI",
       "other": "Open Sans"
     }
   }

package/json/nested/product/small/global.json

@@ -902,9 +902,10 @@
     },
     "fontFamilies": {
       "sage-icons": "sage-icons",
-      "sage-headline": "Sage Headline",
-      "sage-ui": "Sage UI",
-      "sage-text": "Sage Text",
+      "heading": "Sage UI",
+      "subheading": "Sage UI",
+      "body": "Sage UI",
+      "component": "Sage UI",
       "other": "Open Sans"
     }
   }

package/package.json

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

package/scss/frozenproduct/large/global.scss

@@ -185,7 +185,8 @@ $global-font-size-adaptive-step8: 40px;
 $global-font-size-adaptive-step9: 46px;
 $global-font-size-adaptive-step10: 52px;
 $global-font-families-sage-icons: sage-icons;
-$global-font-families-sage-headline: Sage Headline; // Used in only in marketing contexts for some headings.
-$global-font-families-sage-ui: Sage UI; // Used in componentry such as tables, buttons, inputs etc.
-$global-font-families-sage-text: Sage Text; // Used for Headings in product and in marketing contexts. Marketing also use it for their body copy.
+$global-font-families-heading: Sage UI;
+$global-font-families-subheading: Sage UI;
+$global-font-families-body: Sage UI;
+$global-font-families-component: Sage UI; // Used in componentry such as tables, buttons, inputs etc.
 $global-font-families-other: Open Sans; // Fallback for when Sage fonts cannot load.

package/scss/frozenproduct/small/components/button.scss

@@ -40,7 +40,6 @@ $button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive
 $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
 $button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
 $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-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;
@@ -72,7 +71,6 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
 $button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
 $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-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;
@@ -81,25 +79,18 @@ $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
 $button-color-typical-primary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default;
 $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-bg-enabled: $button-color-none;
 $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
 $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-with-hover;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -218,6 +209,7 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
 $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-disabled: $modes-color-interactive-inactive-content;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
 $button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
@@ -232,8 +224,10 @@ $button-color-typical-secondary-border-active: $modes-color-interactive-primary-
 $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-secondary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
 $button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
+$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
 $button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
@@ -246,28 +240,35 @@ $button-color-typical-tertiary-border-active: $modes-color-interactive-primary-a
 $button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-tertiary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
+$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
 $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
 $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
 $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-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)
@@ -303,9 +304,8 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
 $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-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;

package/scss/frozenproduct/small/components/container.scss

@@ -17,17 +17,12 @@ $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-h
 $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
 $container-color-ai-tile-bordervertical: $modes-color-status-ai-default-vertical; // left border for AI tiles and bubbles.
 $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //  
-$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-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-active;
-$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
-$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
 $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //  
 $container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
 $container-color-standard-bg-default: $modes-color-generic-bg-nought;
-$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
 $container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
 $container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
 $container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
@@ -54,17 +49,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
 $container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
 $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
 $container-color-blockquote-border: $modes-color-interactive-primary-default;
+$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
 $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds 
-$container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
-$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
-$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
-$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
+$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
+$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
+$container-color-interactive-text-active: $modes-color-interactive-monochrome-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-default; // Hover label for any accordion.
 $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-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 
@@ -81,11 +76,16 @@ $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (h
 $container-boxshadow-card-drag: $global-boxshadow-interactive-drag; // Card (drag state)
 $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-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on 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-default; // Enabled chevron for any accordion.
+$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
+$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
 $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
 $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
 $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
+$container-color-interactive-text-hover: $modes-color-interactive-monochrome-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;

package/scss/frozenproduct/small/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-active;
-$form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
 $form-color-labelset-label-required: $modes-color-interactive-danger-default;
-$form-color-switch-bg-active: $modes-color-interactive-monochrome-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-active;
 $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
+$form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
 $form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
-$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
-$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-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-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;
@@ -230,7 +226,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-with-active;
+$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
 $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
+$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-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;
@@ -250,8 +248,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-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/small/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-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.
@@ -20,13 +19,14 @@ $link-typography-adaptive-heading-m: $global-typography-adaptive-component-under
 $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-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
-$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
+$link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
 $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
 $link-boxshadow-skiplink: $global-boxshadow-container-near;
 $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
 $link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
 $link-color-typical-label-default: $modes-color-interactive-primary-default-alt2;
 $link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt2;
+$link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
 $link-color-subtle-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;
 $link-size-skiplink-m: $global-size-macro-m;
 $link-size-icon-m: $global-size-icon-m;

package/scss/frozenproduct/small/components/nav.scss

@@ -7,15 +7,12 @@
 
 $nav-space-leftnav-grandchilditem-x-indent: 33; // indent on grandchild items
 $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
-$nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
 $nav-color-item-bg-enabled: $modes-color-none;
 $nav-color-leftnav-container-bg-default: $modes-color-generic-bg-nought; // bg of horizontal nav variant that launches the left nav
-$nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
 $nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
 $nav-color-leftnav-item-bg-enabled: $modes-color-none;
 $nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
 $nav-color-modal-container-bg-default: $modes-color-generic-bg-nought; // bg of container holding stack of items in modal nav
-$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
 $nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
 $nav-color-modal-item-bg-enabled: $modes-color-none;
 $nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
@@ -35,17 +32,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-active;
 $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
 $nav-color-item-bg-hover: $modes-color-interactive-monochrome-hover-alt;
 $nav-color-item-label-activealt: $modes-color-interactive-monochrome-with-hover;
-$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
 $nav-color-item-label-hover: $modes-color-interactive-monochrome-with-hover;
-$nav-color-item-label-alt: $modes-color-interactive-monochrome-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-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
 $nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
 $nav-color-leftnav-item-label-hover: $modes-color-interactive-nav-with-hover;
+$nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
 $nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
 $nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
 $nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
@@ -54,6 +52,8 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
 $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
 $nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
 $nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
+$nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
+$nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
 $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
 $nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
 $nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;

package/scss/frozenproduct/small/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;
@@ -25,6 +24,7 @@ $page-typography-adaptive-p-regular-typical: $global-typography-adaptive-body-re
 $page-typography-adaptive-p-regular-large: $global-typography-adaptive-body-regular-l;
 $page-typography-adaptive-p-medium-typical: $global-typography-adaptive-body-medium-s;
 $page-typography-adaptive-p-medium-large: $global-typography-adaptive-body-medium-l;
+$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-x-l: $global-space-macro-xl;

package/scss/frozenproduct/small/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-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-active; // previously action minor 850
 $popover-color-bg-activealt: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM. 
 $popover-color-bg-hover: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM. 
 $popover-color-label-activealt: $modes-color-interactive-monochrome-with-hover;
 $popover-color-label-hover: $modes-color-interactive-monochrome-with-hover;
-$popover-color-label-enabled: $modes-color-interactive-monochrome-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.
@@ -56,6 +55,7 @@ $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-with-active;
 $popover-color-label-disabled: $modes-color-interactive-inactive-content;
+$popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $popover-size-menu-minwidth-s: $container-size-responsive-m / 2; // minwidth of small size popover menu container
 $popover-size-menu-minwidth-m: $container-size-responsive-xs; // minwidth of medium size popover menu container
 $popover-size-menu-minwidth-l: $container-size-responsive-s; // minwidth of large size popover menu container

package/scss/frozenproduct/small/components/progress.scss

@@ -25,19 +25,13 @@ $progress-radius-skeleton-circle: $global-radius-circle; // Used to represent ci
 $progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
 $progress-color-fg-alt: $modes-color-status-positive-default;
 $progress-color-fg-caution: $modes-color-status-caution-default;
-$progress-color-fg-default: $modes-color-interactive-monochrome-active;
 $progress-color-fg-error: $modes-color-status-negative-default;
 $progress-color-fg-info: $modes-color-status-info-default;
 $progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
-$progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
 $progress-color-loader-fg-error: $modes-color-status-negative-default;
 $progress-color-loader-fg-complete: $modes-color-status-positive-default;
-$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
-$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
-$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
-$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-border-success: $modes-color-status-positive-default;
 $progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
 $progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -53,14 +47,20 @@ $progress-typography-responsive-default-m: $global-typography-responsive-compone
 $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
 $progress-color-bg-default: $modes-color-interactive-progress-bg;
 $progress-color-fg-alt2: $modes-color-generic-content-firm;
+$progress-color-fg-default: $modes-color-interactive-monochrome-active;
 $progress-color-label-alt: $modes-color-generic-content-firm;
 $progress-color-label-default: $modes-color-generic-content-harsh;
 $progress-color-loader-bg-default: $modes-color-interactive-progress-bg;
+$progress-color-loader-fg-default: $modes-color-interactive-monochrome-active; // used for loader standard loader spinner
 $progress-color-loader-inverse-bg-default: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
+$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
 $progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
 $progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
+$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
 $progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
 $progress-color-stepflow-label-default: $modes-color-generic-content-harsh;
+$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
+$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
 $progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
 $progress-size-bar-s: $global-size-micro-xs; // S loader bar
 $progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar