@sage/design-tokens 14.4.0 → 14.6.0

package/scss/frozenproduct/large/components/table.scss

@@ -6,7 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $table-color-header-subtle-bg-default: $modes-color-none;
-$table-color-row-bg-active: $modes-color-interactive-monochrome-active;
 $table-color-row-bg-default: $modes-color-generic-bg-nought;
 $table-color-row-label-hover: $modes-color-generic-content-extreme;
 $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
@@ -27,34 +26,35 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
 $table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
 $table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
 $table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
-$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
-$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
-$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
-$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
-$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-default; // header alt
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-default-alt;
-$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
-$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
 $table-color-row-bg-activated: $modes-color-interactive-primary-default;
+$table-color-row-bg-active: $modes-color-interactive-monochrome-active;
 $table-color-row-bg-alt: $modes-color-generic-bg-delicate; // Zebra stripes
 $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
 $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
 $table-color-row-bg-hover: $modes-color-generic-bg-soft;
 $table-color-row-label-default: $modes-color-generic-content-harsh;
 $table-color-footer-bg-default: $modes-color-generic-bg-soft;
-$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-boxshadow-parentrow: $global-boxshadow-container-far;
 $table-boxshadow-firstchild: $global-boxshadow-inner-near;
 $table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
 $table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
 $table-boxshadow-row-dragging: $global-boxshadow-interactive-drag; // dragging state for a table row
+$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
+$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
 $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
+$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
+$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-default; // header alt
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-default-alt;
+$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
 $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
 $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-with-default;
+$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active;
 $table-color-row-label-active: $modes-color-interactive-monochrome-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-radius-container: $global-radius-container-m; // Table (parent container)
 $table-borderwidth-thin: $global-borderwidth-xs; // Table border
 $table-borderwidth-thick: $global-borderwidth-s; // header border for subtle

package/scss/frozenproduct/large/global.scss

@@ -171,8 +171,8 @@ $global-typography-adaptive-component-placeholdertext-l: [object Object];
 $global-typography-adaptive-component-placeholdertext-xl: [object Object];
 $global-typography-adaptive-component-placeholdertext-xxl: [object Object];
 $global-typography-adaptive-component-notification-m: [object Object]; // used for badge text - notifications on buttons and in global nav
-$global-font-size-adaptive-step-2: 11px;
-$global-font-size-adaptive-step-1: 12px;
+$global-font-size-adaptive-step-minus2: 11px;
+$global-font-size-adaptive-step-minus1: 12px;
 $global-font-size-adaptive-step0: 14px;
 $global-font-size-adaptive-step1: 16px;
 $global-font-size-adaptive-step2: 18px;
@@ -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

@@ -109,6 +109,7 @@ $button-size-toggle-xs: $global-size-macro-xs; // min-height on button within S
 $button-size-toggle-s: $global-size-macro-s; // min-height on S single toggle, and on button within M toggle group
 $button-size-toggle-m: $global-size-macro-m; // min-height on M single toggle, and on button within L toggle group
 $button-size-toggle-l: $global-size-macro-l; // min-height on L single toggle
+$button-size-icon-s: $global-size-icon-s;
 $button-size-icon-m: $global-size-icon-m;
 $button-size-video-s: $global-size-macro-m;
 $button-size-video-m: $global-size-macro-xxl;
@@ -143,9 +144,12 @@ $button-space-primary-xg-l: $global-space-macro-xs / 2; // Item spacing inside b
 $button-space-primary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-primary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
 $button-space-primary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-primary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size primary buttons
-$button-space-primary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size primary buttons
-$button-space-primary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size primary buttons
+$button-space-primary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size primary buttons
+$button-space-primary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size primary buttons
+$button-space-primary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size primary buttons
+$button-space-primary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size primary buttons
+$button-space-primary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size primary buttons
+$button-space-primary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size primary buttons
 $button-space-secondary-x-xs: $global-space-macro-xxxs; // Left and right padding on XS table buttons
 $button-space-secondary-x-s: $global-space-micro-xxl; // Left and right padding on small buttons
 $button-space-secondary-x-m: $global-space-macro-xs; // Left and right padding on medium buttons
@@ -154,13 +158,18 @@ $button-space-secondary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and b
 $button-space-secondary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-secondary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
 $button-space-secondary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
+$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
 $button-space-secondary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-secondary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-secondary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
-$button-space-secondary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size secondary buttons
-$button-space-secondary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size secondary buttons
-$button-space-secondary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size secondary buttons
+$button-space-secondary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size secondary buttons
+$button-space-secondary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size secondary buttons
+$button-space-secondary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size secondary buttons
+$button-space-secondary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size secondary buttons
+$button-space-secondary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size secondary buttons
+$button-space-secondary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size secondary buttons
+$button-space-secondary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size secondary buttons
+$button-space-secondary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size secondary buttons
 $button-space-tertiary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
 $button-space-tertiary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-tertiary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
@@ -173,9 +182,14 @@ $button-space-tertiary-xg-xs: $global-space-micro-s; // Item spacing inside XS b
 $button-space-tertiary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-tertiary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-tertiary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-tertiary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size tertiary buttons
-$button-space-tertiary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size tertiary buttons
-$button-space-tertiary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size tertiary buttons
+$button-space-tertiary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size tertiary buttons
+$button-space-tertiary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size tertiary buttons
+$button-space-tertiary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size tertiary buttons
+$button-space-tertiary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size tertiary buttons
+$button-space-tertiary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size tertiary buttons
+$button-space-tertiary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size tertiary buttons
+$button-space-tertiary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size tertiary buttons
+$button-space-tertiary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size tertiary buttons
 $button-space-subtle-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
 $button-space-subtle-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-subtle-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
@@ -188,9 +202,14 @@ $button-space-subtle-xg-xs: $global-space-micro-s; // Item spacing inside XS but
 $button-space-subtle-xg-s: $global-space-micro-s; // Item spacing inside buttons
 $button-space-subtle-xg-m: $global-space-micro-s; // Item spacing inside buttons
 $button-space-subtle-xg-l: $global-space-micro-s; // Item spacing inside buttons
-$button-space-subtle-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size subtle buttons
-$button-space-subtle-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size subtle buttons
-$button-space-subtle-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size subtle buttons
+$button-space-subtle-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size subtle buttons
+$button-space-subtle-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size subtle buttons
+$button-space-subtle-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size subtle buttons
+$button-space-subtle-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size subtle buttons
+$button-space-subtle-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size subtle buttons
+$button-space-subtle-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size subtle buttons
+$button-space-subtle-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size subtle buttons
+$button-space-subtle-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size subtle buttons
 $button-space-toggle-button-x-xs: $global-space-macro-xxxs; // Left and right padding on XS asset used within S toggle group
 $button-space-toggle-button-x-s: $global-space-macro-xxs; // Left and right padding on S toggle buttons
 $button-space-toggle-button-x-m: $global-space-macro-xs; // Left and right padding on medium toggle buttons

package/scss/frozenproduct/small/components/form.scss

@@ -5,6 +5,9 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$form-space-datepicker-pr-s: 0; // right padding on small date picker input
+$form-space-datepicker-pr-m: 0; // right padding on medium date picker input
+$form-space-datepicker-pr-l: 0; // right padding on large date picker input
 $form-color-switch-border-active: transparent;
 $form-color-switch-border-activedisabled: transparent;
 $form-radius-none: $global-radius-none; // Text editor (internal corners)
@@ -61,9 +64,6 @@ $form-space-chip-yg-l: $global-space-micro-xxl; // gap between large chip button
 $form-space-checkradio-y-s: $global-space-micro-m / 2; // Space above single checkbox/radio OR label to vertically centre checkbox and label.
 $form-space-checkradio-y-m: $global-space-micro-xs; // Space above single checkbox/radio OR label to vertically centre checkbox and label.
 $form-space-checkradio-y-l: $global-space-micro-xs * 2; // Space above single checkbox/radio OR label to vertically centre checkbox and label.
-$form-space-datepicker-pr-s: $global-space-micro-xs; // right padding on small date picker input
-$form-space-datepicker-pr-m: $global-space-micro-m; // right padding on medium date picker input
-$form-space-datepicker-pr-l: $global-space-micro-xl; // right padding on large date picker input
 $form-space-dropdown-button-x-s: $global-space-macro-s; // DD only, left right padding on footer button.
 $form-space-dropdown-button-x-m: $global-space-macro-s; // DD only, left right padding on footer button.
 $form-space-dropdown-button-x-l: $global-space-macro-s; // DD only, left right padding on footer button.
@@ -94,6 +94,9 @@ $form-space-dropdown-option-subtext-y-l: $global-space-micro-s; // top padding f
 $form-space-dropdown-pill-xg-s: $global-space-micro-s; // space between pills inside pill wrapper
 $form-space-dropdown-pill-xg-m: $global-space-micro-s; // space between pills inside pill wrapper
 $form-space-dropdown-pill-xg-l: $global-space-micro-s; // space between pills inside pill wrapper
+$form-space-dropdown-trigger-subtle-s: $global-space-micro-s; // Left and right padding on subtle dropdown triggers.
+$form-space-dropdown-trigger-subtle-m: $global-space-micro-s; // Left and right padding on subtle dropdown triggers.
+$form-space-dropdown-trigger-subtle-l: $global-space-micro-s; // Left and right padding on subtle dropdown triggers.
 $form-space-fileinput-status-xl-m: $global-space-macro-ml; // Left padding in File input (no-thumbnail variant), status text.
 $form-space-fileinput-status-y-m: $global-space-micro-s; // Vertical padding in status text.
 $form-space-fileinput-thumbnail-m: $global-space-micro-s; // All padding in File input (thumbnail container).

package/scss/frozenproduct/small/global.scss

@@ -171,8 +171,8 @@ $global-typography-adaptive-component-placeholdertext-l: [object Object];
 $global-typography-adaptive-component-placeholdertext-xl: [object Object];
 $global-typography-adaptive-component-placeholdertext-xxl: [object Object];
 $global-typography-adaptive-component-notification-m: [object Object]; // used for badge text - notifications on buttons and in global nav
-$global-font-size-adaptive-step-2: 12px;
-$global-font-size-adaptive-step-1: 13px;
+$global-font-size-adaptive-step-minus2: 12px;
+$global-font-size-adaptive-step-minus1: 13px;
 $global-font-size-adaptive-step0: 14px;
 $global-font-size-adaptive-step1: 16px;
 $global-font-size-adaptive-step2: 17px;
@@ -185,7 +185,8 @@ $global-font-size-adaptive-step8: 30px;
 $global-font-size-adaptive-step9: 33px;
 $global-font-size-adaptive-step10: 36px;
 $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/marketing/large/components/button.scss

@@ -109,6 +109,7 @@ $button-size-toggle-xs: $global-size-macro-xs; // min-height on button within S
 $button-size-toggle-s: $global-size-macro-s; // min-height on S single toggle, and on button within M toggle group
 $button-size-toggle-m: $global-size-macro-m; // min-height on M single toggle, and on button within L toggle group
 $button-size-toggle-l: $global-size-macro-l; // min-height on L single toggle
+$button-size-icon-s: $global-size-icon-s;
 $button-size-icon-m: $global-size-icon-m;
 $button-size-video-s: $global-size-macro-m;
 $button-size-video-m: $global-size-macro-xxl;
@@ -143,9 +144,12 @@ $button-space-primary-xg-l: $global-space-macro-xs / 2; // Item spacing inside b
 $button-space-primary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-primary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
 $button-space-primary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-primary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size primary buttons
-$button-space-primary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size primary buttons
-$button-space-primary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size primary buttons
+$button-space-primary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size primary buttons
+$button-space-primary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size primary buttons
+$button-space-primary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size primary buttons
+$button-space-primary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size primary buttons
+$button-space-primary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size primary buttons
+$button-space-primary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size primary buttons
 $button-space-secondary-x-xs: $global-space-macro-xxxs; // Left and right padding on XS table buttons
 $button-space-secondary-x-s: $global-space-micro-xxl; // Left and right padding on small buttons
 $button-space-secondary-x-m: $global-space-macro-xs; // Left and right padding on medium buttons
@@ -154,13 +158,18 @@ $button-space-secondary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and b
 $button-space-secondary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-secondary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
 $button-space-secondary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
+$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
 $button-space-secondary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-secondary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-secondary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
-$button-space-secondary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size secondary buttons
-$button-space-secondary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size secondary buttons
-$button-space-secondary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size secondary buttons
+$button-space-secondary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size secondary buttons
+$button-space-secondary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size secondary buttons
+$button-space-secondary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size secondary buttons
+$button-space-secondary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size secondary buttons
+$button-space-secondary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size secondary buttons
+$button-space-secondary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size secondary buttons
+$button-space-secondary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size secondary buttons
+$button-space-secondary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size secondary buttons
 $button-space-tertiary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
 $button-space-tertiary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-tertiary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
@@ -173,9 +182,14 @@ $button-space-tertiary-xg-xs: $global-space-micro-s; // Item spacing inside XS b
 $button-space-tertiary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-tertiary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-tertiary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-tertiary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size tertiary buttons
-$button-space-tertiary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size tertiary buttons
-$button-space-tertiary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size tertiary buttons
+$button-space-tertiary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size tertiary buttons
+$button-space-tertiary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size tertiary buttons
+$button-space-tertiary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size tertiary buttons
+$button-space-tertiary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size tertiary buttons
+$button-space-tertiary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size tertiary buttons
+$button-space-tertiary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size tertiary buttons
+$button-space-tertiary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size tertiary buttons
+$button-space-tertiary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size tertiary buttons
 $button-space-subtle-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
 $button-space-subtle-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-subtle-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
@@ -188,9 +202,14 @@ $button-space-subtle-xg-xs: $global-space-micro-s; // Item spacing inside XS but
 $button-space-subtle-xg-s: $global-space-micro-s; // Item spacing inside buttons
 $button-space-subtle-xg-m: $global-space-micro-s; // Item spacing inside buttons
 $button-space-subtle-xg-l: $global-space-micro-s; // Item spacing inside buttons
-$button-space-subtle-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size subtle buttons
-$button-space-subtle-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size subtle buttons
-$button-space-subtle-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size subtle buttons
+$button-space-subtle-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size subtle buttons
+$button-space-subtle-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size subtle buttons
+$button-space-subtle-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size subtle buttons
+$button-space-subtle-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size subtle buttons
+$button-space-subtle-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size subtle buttons
+$button-space-subtle-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size subtle buttons
+$button-space-subtle-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size subtle buttons
+$button-space-subtle-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size subtle buttons
 $button-space-toggle-button-x-xs: $global-space-macro-xxxs; // Left and right padding on XS asset used within S toggle group
 $button-space-toggle-button-x-s: $global-space-macro-xxs; // Left and right padding on S toggle buttons
 $button-space-toggle-button-x-m: $global-space-macro-xs; // Left and right padding on medium toggle buttons

package/scss/marketing/large/components/form.scss

@@ -5,6 +5,9 @@
 
 // Do not edit directly, this file was auto-generated.
 
+$form-space-datepicker-pr-s: 0; // right padding on small date picker input
+$form-space-datepicker-pr-m: 0; // right padding on medium date picker input
+$form-space-datepicker-pr-l: 0; // right padding on large date picker input
 $form-color-switch-border-active: transparent;
 $form-color-switch-border-activedisabled: transparent;
 $form-radius-none: $global-radius-none; // Text editor (internal corners)
@@ -61,9 +64,6 @@ $form-space-chip-yg-l: $global-space-micro-xxl; // gap between large chip button
 $form-space-checkradio-y-s: $global-space-micro-m / 2; // Space above single checkbox/radio OR label to vertically centre checkbox and label.
 $form-space-checkradio-y-m: $global-space-micro-xs; // Space above single checkbox/radio OR label to vertically centre checkbox and label.
 $form-space-checkradio-y-l: $global-space-micro-xs * 2; // Space above single checkbox/radio OR label to vertically centre checkbox and label.
-$form-space-datepicker-pr-s: $global-space-micro-xs; // right padding on small date picker input
-$form-space-datepicker-pr-m: $global-space-micro-m; // right padding on medium date picker input
-$form-space-datepicker-pr-l: $global-space-micro-xl; // right padding on large date picker input
 $form-space-dropdown-button-x-s: $global-space-macro-s; // DD only, left right padding on footer button.
 $form-space-dropdown-button-x-m: $global-space-macro-s; // DD only, left right padding on footer button.
 $form-space-dropdown-button-x-l: $global-space-macro-s; // DD only, left right padding on footer button.
@@ -94,6 +94,9 @@ $form-space-dropdown-option-subtext-y-l: $global-space-micro-s; // top padding f
 $form-space-dropdown-pill-xg-s: $global-space-micro-s; // space between pills inside pill wrapper
 $form-space-dropdown-pill-xg-m: $global-space-micro-s; // space between pills inside pill wrapper
 $form-space-dropdown-pill-xg-l: $global-space-micro-s; // space between pills inside pill wrapper
+$form-space-dropdown-trigger-subtle-s: $global-space-micro-s; // Left and right padding on subtle dropdown triggers.
+$form-space-dropdown-trigger-subtle-m: $global-space-micro-s; // Left and right padding on subtle dropdown triggers.
+$form-space-dropdown-trigger-subtle-l: $global-space-micro-s; // Left and right padding on subtle dropdown triggers.
 $form-space-fileinput-status-xl-m: $global-space-macro-ml; // Left padding in File input (no-thumbnail variant), status text.
 $form-space-fileinput-status-y-m: $global-space-micro-s; // Vertical padding in status text.
 $form-space-fileinput-thumbnail-m: $global-space-micro-s; // All padding in File input (thumbnail container).

package/scss/marketing/large/global.scss

@@ -171,8 +171,8 @@ $global-typography-adaptive-component-placeholdertext-l: [object Object];
 $global-typography-adaptive-component-placeholdertext-xl: [object Object];
 $global-typography-adaptive-component-placeholdertext-xxl: [object Object];
 $global-typography-adaptive-component-notification-m: [object Object]; // used for badge text - notifications on buttons and in global nav
-$global-font-size-adaptive-step-2: 11px;
-$global-font-size-adaptive-step-1: 12px;
+$global-font-size-adaptive-step-minus2: 11px;
+$global-font-size-adaptive-step-minus1: 12px;
 $global-font-size-adaptive-step0: 14px;
 $global-font-size-adaptive-step1: 16px;
 $global-font-size-adaptive-step2: 18px;
@@ -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/marketing/small/components/button.scss

@@ -40,6 +40,7 @@ $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;
@@ -71,6 +72,7 @@ $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;
@@ -79,18 +81,25 @@ $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
@@ -100,6 +109,7 @@ $button-size-toggle-xs: $global-size-macro-xs; // min-height on button within S
 $button-size-toggle-s: $global-size-macro-s; // min-height on S single toggle, and on button within M toggle group
 $button-size-toggle-m: $global-size-macro-m; // min-height on M single toggle, and on button within L toggle group
 $button-size-toggle-l: $global-size-macro-l; // min-height on L single toggle
+$button-size-icon-s: $global-size-icon-s;
 $button-size-icon-m: $global-size-icon-m;
 $button-size-video-s: $global-size-macro-m;
 $button-size-video-m: $global-size-macro-xxl;
@@ -134,9 +144,12 @@ $button-space-primary-xg-l: $global-space-macro-xs / 2; // Item spacing inside b
 $button-space-primary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-primary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
 $button-space-primary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
-$button-space-primary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size primary buttons
-$button-space-primary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size primary buttons
-$button-space-primary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size primary buttons
+$button-space-primary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size primary buttons
+$button-space-primary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size primary buttons
+$button-space-primary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size primary buttons
+$button-space-primary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size primary buttons
+$button-space-primary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size primary buttons
+$button-space-primary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size primary buttons
 $button-space-secondary-x-xs: $global-space-macro-xxxs; // Left and right padding on XS table buttons
 $button-space-secondary-x-s: $global-space-micro-xxl; // Left and right padding on small buttons
 $button-space-secondary-x-m: $global-space-macro-xs; // Left and right padding on medium buttons
@@ -145,13 +158,18 @@ $button-space-secondary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and b
 $button-space-secondary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-secondary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
 $button-space-secondary-y-l: $global-space-micro-xl - 0.5; // Top and bottom padding on Large buttons 
+$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
 $button-space-secondary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-secondary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-secondary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-secondary-xg-xs: $global-space-micro-s; // Item spacing inside XS buttons
-$button-space-secondary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size secondary buttons
-$button-space-secondary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size secondary buttons
-$button-space-secondary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size secondary buttons
+$button-space-secondary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size secondary buttons
+$button-space-secondary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size secondary buttons
+$button-space-secondary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size secondary buttons
+$button-space-secondary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size secondary buttons
+$button-space-secondary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size secondary buttons
+$button-space-secondary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size secondary buttons
+$button-space-secondary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size secondary buttons
+$button-space-secondary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size secondary buttons
 $button-space-tertiary-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
 $button-space-tertiary-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-tertiary-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
@@ -164,9 +182,14 @@ $button-space-tertiary-xg-xs: $global-space-micro-s; // Item spacing inside XS b
 $button-space-tertiary-xg-s: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-tertiary-xg-m: $global-space-macro-xxxs; // Item spacing inside buttons
 $button-space-tertiary-xg-l: $global-space-macro-xxxs; // Item spacing inside buttons
-$button-space-tertiary-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size tertiary buttons
-$button-space-tertiary-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size tertiary buttons
-$button-space-tertiary-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size tertiary buttons
+$button-space-tertiary-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size tertiary buttons
+$button-space-tertiary-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size tertiary buttons
+$button-space-tertiary-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size tertiary buttons
+$button-space-tertiary-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size tertiary buttons
+$button-space-tertiary-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size tertiary buttons
+$button-space-tertiary-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size tertiary buttons
+$button-space-tertiary-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size tertiary buttons
+$button-space-tertiary-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size tertiary buttons
 $button-space-subtle-y-xs: ($global-space-macro-xxxs / 4) - 0.5; // top and bottom padding on XS table buttons
 $button-space-subtle-y-s: $global-space-micro-s; // Bottom and top padding on small buttons.
 $button-space-subtle-y-m: $global-space-micro-l; // Top and bottom padding on medium buttons 
@@ -179,9 +202,14 @@ $button-space-subtle-xg-xs: $global-space-micro-s; // Item spacing inside XS but
 $button-space-subtle-xg-s: $global-space-micro-s; // Item spacing inside buttons
 $button-space-subtle-xg-m: $global-space-micro-s; // Item spacing inside buttons
 $button-space-subtle-xg-l: $global-space-micro-s; // Item spacing inside buttons
-$button-space-subtle-icononly-x-s: $global-space-micro-s; // Left and right padding on icon-only S size subtle buttons
-$button-space-subtle-icononly-x-m: $global-space-micro-s; // Left and right padding on icon-only M size subtle buttons
-$button-space-subtle-icononly-x-l: $global-space-micro-s; // Left and right padding on icon-only L size subtle buttons
+$button-space-subtle-icononly-x-xs: $global-space-micro-s; // Left and right padding on icon-only XS size subtle buttons
+$button-space-subtle-icononly-x-s: $global-space-micro-m; // Left and right padding on icon-only S size subtle buttons
+$button-space-subtle-icononly-x-m: $global-space-micro-xl; // Left and right padding on icon-only M size subtle buttons
+$button-space-subtle-icononly-x-l: $global-space-micro-xxl + $global-space-micro-xs; // Left and right padding on icon-only L size subtle buttons
+$button-space-subtle-icononly-y-xs: $global-space-micro-s; // Top and bottom padding on icon-only XS size subtle buttons
+$button-space-subtle-icononly-y-s: $global-space-micro-m; // Top and bottom padding on icon-only S size subtle buttons
+$button-space-subtle-icononly-y-m: $global-space-micro-xl; // Top and bottom padding on icon-only M size subtle buttons
+$button-space-subtle-icononly-y-l: $global-space-micro-xxl + $global-space-micro-xs; // Top and bottom padding on icon-only L size subtle buttons
 $button-space-toggle-button-x-xs: $global-space-macro-xxxs; // Left and right padding on XS asset used within S toggle group
 $button-space-toggle-button-x-s: $global-space-macro-xxs; // Left and right padding on S toggle buttons
 $button-space-toggle-button-x-m: $global-space-macro-xs; // Left and right padding on medium toggle buttons
@@ -209,7 +237,6 @@ $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;
@@ -224,10 +251,8 @@ $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;
@@ -240,35 +265,28 @@ $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)
@@ -304,8 +322,9 @@ $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-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
+$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-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;