@sage/design-tokens 7.1.7 → 7.3.0

package/scss/marketing/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-generic-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-generic-default;
-$progress-color-loader-fg-default: $modes-color-interactive-monochrome-generic-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-generic-active;
 $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
-$progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-generic-active;
-$progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-generic-active;
 $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
-$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-generic-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-generic-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-bg-alt: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
+$progress-color-loader-fg-default: $modes-color-interactive-monochrome-generic-active; // used for loader standard loader spinner
+$progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-generic-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-generic-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-generic-active;
+$progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-generic-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

package/scss/marketing/small/components/status.scss

@@ -7,6 +7,7 @@
 
 $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
 $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
+$status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
 $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
 $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
 $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
@@ -14,6 +15,7 @@ $status-color-message-global-warning-icon: $modes-color-status-caution-default;
 $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
 $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
 $status-color-message-contextual-ai-bg-alt: $modes-color-status-neutral-default-alt;
+$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
 $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
 $status-color-message-contextual-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
 $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
@@ -64,13 +66,12 @@ $status-typography-responsive-heading-s: $global-typography-responsive-component
 $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
 $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
 $status-color-message-global-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
+$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
 $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
 $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
 $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
 $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
 $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
-$status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
 $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
 $status-color-pill-error-bg-hover: $modes-color-status-negative-hover;
 $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
@@ -87,7 +88,6 @@ $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
 $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
 $status-color-rating-border-default: $modes-color-status-reviews-default;
 $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
-$status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
 $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
 $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
 $status-color-pill-label-default: $modes-color-status-content-with-default;

package/scss/marketing/small/components/tab.scss

@@ -6,9 +6,6 @@
 // Do not edit directly, this file was auto-generated.
 
 $tab-color-bg-enabled: $modes-color-none;
-$tab-color-border-active: $modes-color-interactive-monochrome-generic-active;
-$tab-color-label-active: $modes-color-interactive-monochrome-generic-active;
-$tab-color-icon-active: $modes-color-interactive-monochrome-generic-active;
 $tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
 $tab-color-validation-border-warning: $modes-color-status-caution-default;
 $tab-color-validation-border-error: $modes-color-status-negative-default;
@@ -22,12 +19,11 @@ $tab-typography-responsive-label-s: $global-typography-responsive-component-firm
 $tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
 $tab-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
 $tab-color-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // For anchor nav, not tab.
-$tab-color-icon-enabled: $modes-color-interactive-monochrome-generic-default-alt;
+$tab-color-border-active: $modes-color-interactive-monochrome-generic-active;
 $tab-color-icon-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$tab-color-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$tab-color-label-active: $modes-color-interactive-monochrome-generic-active;
+$tab-color-icon-active: $modes-color-interactive-monochrome-generic-active;
 $tab-color-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$tab-color-validation-label-error: $modes-color-interactive-monochrome-generic-default-alt;
-$tab-color-validation-label-warning: $modes-color-interactive-monochrome-generic-default-alt;
 $tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
 $tab-size-l: $global-size-macro-l; // L tab
 $tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
@@ -46,6 +42,10 @@ $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
 $tab-color-bg-active: $modes-color-interactive-monochrome-generic-with-active;
 $tab-color-border-enabled: $modes-color-generic-fg-delicate;
 $tab-color-border-hover: $modes-color-generic-fg-moderate;
+$tab-color-icon-enabled: $modes-color-interactive-monochrome-generic-default-alt;
+$tab-color-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$tab-color-validation-label-error: $modes-color-interactive-monochrome-generic-default-alt;
+$tab-color-validation-label-warning: $modes-color-interactive-monochrome-generic-default-alt;
 $tab-radius-m: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-l: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
 $tab-radius-baseline-m: $global-radius-interactive-xxs;

package/scss/marketing/small/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-generic-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,30 +26,31 @@ $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-generic-hover;
-$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
-$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default; // header alt
-$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default-alt;
-$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
-$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
 $table-color-row-bg-activated: $modes-color-interactive-primary-default;
+$table-color-row-bg-active: $modes-color-interactive-monochrome-generic-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-generic-default;
 $table-boxshadow-parentrow: $global-boxshadow-container-far;
+$table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
+$table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover;
 $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
+$table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default; // header alt
+$table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default-alt;
+$table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
 $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
 $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-generic-with-default;
+$table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
 $table-color-row-border-default: $modes-color-generic-fg-delicate;
 $table-color-row-label-activated: $modes-color-interactive-monochrome-generic-with-active;
 $table-color-row-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
+$table-color-footer-label-default: $modes-color-interactive-monochrome-generic-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/marketing/small/dark.scss

@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #181818; // table dividers and borders
 $modes-color-generic-fg-delicate: #282828; // table dividers and borders
 $modes-color-generic-fg-soft: #4b4b4b;
 $modes-color-generic-fg-moderate: #777;
+$modes-color-generic-fg-frozen-soft: #4b4b4b;
 $modes-color-generic-backdrop-nought: #000000; // used on full page backgrounds
 $modes-color-generic-backdrop-faint: #181818; // used on full page backgrounds as an alternative option
 $modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #ffffffe6;
 $modes-color-interactive-monochrome-generic-with-default: #000000;
 $modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
 $modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; // Used within frozen table
+$modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; // progress tracker
 $modes-color-interactive-monochrome-marketing-with-active: #000000; // use for marketing overrides for switch handle on standard
 $modes-color-interactive-monochrome-marketing-active: #00D639; // needed for specific marketing usecase on light bg
 $modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #18232a;
 $modes-color-interactive-progress-bg: #ffffff14;
 $modes-color-interactive-progress-bg-alt: #00000014;
 $modes-color-interactive-progress-frozen-bg: #ffffff14;
+$modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
 $modes-color-status-caution-default: #E04500;
 $modes-color-status-caution-default-alt: #251206; // Subtle message bg
 $modes-color-status-caution-hover: #eb6732; // used on pill hover states

package/scss/marketing/small/light.scss

@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #e8e8e8; // used for dividers
 $modes-color-generic-fg-delicate: #d1d1d1; // table dividers and borders
 $modes-color-generic-fg-soft: #a6a6a6;
 $modes-color-generic-fg-moderate: #777;
+$modes-color-generic-fg-frozen-soft: #335B70; // frozen progress tracker border
 $modes-color-generic-backdrop-nought: #FFFFFF; // used on full page backgrounds
 $modes-color-generic-backdrop-faint: #f6f8f9; // used on full page backgrounds as an alternative option
 $modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #000000e6;
 $modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
 $modes-color-interactive-monochrome-generic-with-hover: #000000; // maybe should be white to align with primary group logic
 $modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; // Used within frozen table
+$modes-color-interactive-monochrome-generic-frozen-active2: #335B70; // Frozen progress tracker
 $modes-color-interactive-monochrome-marketing-active: #000000; // needed for specific marketing usecase on light bg
 $modes-color-interactive-monochrome-marketing-with-active: #00D639; // needed for specific marketing usecase on light bg
 $modes-color-interactive-monochrome-subtle-default-alt: #00000080; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #9badb8;
 $modes-color-interactive-progress-bg: #00000014;
 $modes-color-interactive-progress-bg-alt: #ffffff14;
 $modes-color-interactive-progress-frozen-bg: #00804614;
+$modes-color-interactive-progress-frozen-bg-alt: #cad3d9; // progress tracker bg
 $modes-color-status-ai-default: #FFFFFF;
 $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
 $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);

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

@@ -124,15 +124,18 @@ $form-space-integral-xg-l: $global-space-micro-xl; // Space between integral ele
 $form-space-integral-yg-s: $global-space-micro-m; // Space below labelset or error validation in form components
 $form-space-integral-yg-m: $global-space-micro-l; // Space below labelset or error validation in form components
 $form-space-integral-yg-l: $global-space-micro-xl; // Space below labelset or error validation in form components
-$form-space-integral-progressive-x-s: $global-space-macro-m - $global-space-micro-xs; // Left padding on progressively shown form inputs on radio and checkbox
-$form-space-integral-progressive-x-m: $global-space-macro-l; // Left padding on progressively shown form inputs on radio and checkbox
-$form-space-integral-progressive-x-l: $global-space-macro-xl + $global-space-micro-xs; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-s: $global-space-macro-xs - 3; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-m: $global-space-macro-s; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-l: $global-space-macro-m + 1; // Left padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-s: $global-space-micro-l; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-m: $global-space-micro-xxl; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-l: $global-space-micro-l * 2; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-s: $global-space-micro-l; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-m: $global-space-micro-xxl; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-l: $global-space-micro-l * 2; // Top and bottom padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-keyline-x-s: $global-space-macro-xxxs - 1; // Left padding on keyline for small progressively shown inputs
+$form-space-integral-progressive-keyline-x-m: $global-space-macro-xxs - 1; // Left padding on keyline for medium progressively shown inputs
+$form-space-integral-progressive-keyline-x-l: $global-space-macro-xs - 1; // Left padding on keyline for large progressively shown inputs
 $form-space-rating-xg-m: $global-space-micro-l; // small gap between rating stars
 $form-space-rating-xg-l: $global-space-micro-xxl; // medium gap between rating stars
 $form-space-layout-stack-s: $global-space-macro-xs; // Spacing between horizontal and vertical S form components
@@ -213,6 +216,7 @@ $form-size-switch-handle-icon-m: $global-size-icon-s - $global-size-micro-xs; //
 $form-size-switch-handle-icon-l: $global-size-icon-m; // L switch icon inside knob
 $form-size-textarea-m: $global-size-macro-m * 2; // Min height for all text area sizes.
 $form-size-validation-bar: $global-size-micro-xxs; // 2px validation bar used on errors and warnings
+$form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosure keyline bar used in checkbox and radio groups
 $form-size-rating-m: $global-size-icon-m; // medium rating stars
 $form-size-rating-l: $global-size-icon-xl; // large rating stars
 $form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
@@ -256,6 +260,7 @@ $form-radius-fileupload: $global-radius-container-m; // File input (file uploads
 $form-radius-fileselector: $global-radius-container-m; // File preview (file selector asset)
 $form-radius-input: $global-radius-interactive-m; // Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input
 $form-radius-validationbar: $global-radius-interactive-xs; // Validation bar
+$form-radius-progressivebar: $global-radius-interactive-xs; // Validation bar
 $form-radius-calendar-today: $global-radius-container-xs; // Calendar (today indicator)
 $form-borderwidth-colorpicker: $global-borderwidth-xs; // swatch border
 $form-borderwidth-caution: $global-borderwidth-xs; // Caution border

package/scss/product/large/components/profile.scss

@@ -61,7 +61,7 @@ $profile-size-inside-m: $global-size-macro-xs - $global-size-micro-xs; // M Port
 $profile-size-inside-ml: $global-size-macro-xs + $global-size-micro-xs; // L Portrait icons
 $profile-size-inside-l: $global-size-macro-m; // XL Portrait icons
 $profile-size-inside-xl: $global-size-macro-xl; // XL Portrait icons
-$profile-size-inside-xxl: $global-size-micro-m * 13; // XXL Portraits
+$profile-size-inside-xxl: $global-size-micro-m * 9; // XXL Portraits
 $profile-color-border-default: $modes-color-generic-fg-delicate;
 $profile-space-none: $global-space-none;
 $profile-space-x-s: $global-space-macro-xs; // gap between avatar and name

package/scss/product/large/dark.scss

@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #181818; // table dividers and borders
 $modes-color-generic-fg-delicate: #282828; // table dividers and borders
 $modes-color-generic-fg-soft: #4b4b4b;
 $modes-color-generic-fg-moderate: #777;
+$modes-color-generic-fg-frozen-soft: #4b4b4b;
 $modes-color-generic-backdrop-nought: #000000; // used on full page backgrounds
 $modes-color-generic-backdrop-faint: #181818; // used on full page backgrounds as an alternative option
 $modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #ffffffe6;
 $modes-color-interactive-monochrome-generic-with-default: #000000;
 $modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
 $modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; // Used within frozen table
+$modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; // progress tracker
 $modes-color-interactive-monochrome-marketing-with-active: #000000; // use for marketing overrides for switch handle on standard
 $modes-color-interactive-monochrome-marketing-active: #00D639; // needed for specific marketing usecase on light bg
 $modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #18232a;
 $modes-color-interactive-progress-bg: #ffffff14;
 $modes-color-interactive-progress-bg-alt: #00000014;
 $modes-color-interactive-progress-frozen-bg: #ffffff14;
+$modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
 $modes-color-status-caution-default: #E04500;
 $modes-color-status-caution-default-alt: #251206; // Subtle message bg
 $modes-color-status-caution-hover: #eb6732; // used on pill hover states

package/scss/product/large/light.scss

@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #e8e8e8; // used for dividers
 $modes-color-generic-fg-delicate: #d1d1d1; // table dividers and borders
 $modes-color-generic-fg-soft: #a6a6a6;
 $modes-color-generic-fg-moderate: #777;
+$modes-color-generic-fg-frozen-soft: #335B70; // frozen progress tracker border
 $modes-color-generic-backdrop-nought: #FFFFFF; // used on full page backgrounds
 $modes-color-generic-backdrop-faint: #f6f8f9; // used on full page backgrounds as an alternative option
 $modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #000000e6;
 $modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
 $modes-color-interactive-monochrome-generic-with-hover: #000000; // maybe should be white to align with primary group logic
 $modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; // Used within frozen table
+$modes-color-interactive-monochrome-generic-frozen-active2: #335B70; // Frozen progress tracker
 $modes-color-interactive-monochrome-marketing-active: #000000; // needed for specific marketing usecase on light bg
 $modes-color-interactive-monochrome-marketing-with-active: #00D639; // needed for specific marketing usecase on light bg
 $modes-color-interactive-monochrome-subtle-default-alt: #00000080; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #9badb8;
 $modes-color-interactive-progress-bg: #00000014;
 $modes-color-interactive-progress-bg-alt: #ffffff14;
 $modes-color-interactive-progress-frozen-bg: #00804614;
+$modes-color-interactive-progress-frozen-bg-alt: #cad3d9; // progress tracker bg
 $modes-color-status-ai-default: #FFFFFF;
 $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
 $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);

package/scss/product/small/components/button.scss

@@ -22,9 +22,6 @@ $button-color-ai-border-hover: $modes-color-interactive-ai-default;
 $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
-$button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
-$button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
 $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
 $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
 $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -49,34 +46,24 @@ $button-typography-responsive-tertiary-l: $global-typography-responsive-componen
 $button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
 $button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-border-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
 $button-color-typical-secondary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-typical-tertiary-bg-enabled: $button-color-none;
 $button-color-typical-tertiary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-tertiary-border-enabled: $modes-color-interactive-monochrome-generic-default-alt2;
-$button-color-typical-tertiary-border-hover: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-generic-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
 $button-size-m: $global-size-macro-m; // min-height on M Buttons
@@ -166,8 +153,8 @@ $button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
 $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
-$button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
 $button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
@@ -180,24 +167,30 @@ $button-color-typical-primary-label-active: $modes-color-interactive-primary-wit
 $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
 $button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
-$button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
-$button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
-$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-typical-tertiary-border-enabled: $modes-color-interactive-monochrome-generic-default-alt2;
+$button-color-typical-tertiary-border-hover: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-generic-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-generic-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-generic-with-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
 $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
 $button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
 $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -219,10 +212,17 @@ $button-borderwidth-secondary: $global-borderwidth-s; // Secondary button.
 $button-borderwidth-tertiary: $global-borderwidth-xs; // tertiary button border 
 $button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
 $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
+$button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
 $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
+$button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
 $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
+$button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
+$button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
+$button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
 $button-color-typical-tertiary-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
+$button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;

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

@@ -12,20 +12,15 @@ $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquot
 $container-radius-scrollbar: $global-radius-circle; // Scrollbar
 $container-opacity-carousel-hidden: $modes-color-modifiers-input-disabled-fg; // opacity applied to next and previous carousel slides
 $container-color-standard-bg-default: $modes-color-generic-bg-nought;
-$container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
 $container-color-ai-borderhorizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI dialog component
 $container-color-ai-bordervertical: $modes-color-status-ai-default-vertical; // left and right border for dialog and insight bubbles.
 $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI nudge message component
 $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
 $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //  
 $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //  
-$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
 $container-color-interactive-border-activated: $modes-color-status-positive-default;
 $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color 
 $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
-$container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
-$container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
-$container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
 $container-typography-adaptive-heading-m: $global-typography-adaptive-heading-s; // Accordion, Subscription tile, Tile select and generic tile or card headings
 $container-typography-adaptive-heading-l: $global-typography-adaptive-heading-m; // Dialog, drawer and sidebar headings
 $container-typography-adaptive-subheading-m: $global-typography-adaptive-subheading-m; // Accordion subheading,  Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading
@@ -46,17 +41,18 @@ $container-typography-responsive-paragraph-m: $global-typography-responsive-comp
 $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
 $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
 $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color 
+$container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
 $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
 $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
 $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc 
 $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
+$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
 $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // Used for accordion hover backgrounds 
-$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
-$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
-$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
+$container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
+$container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
+$container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
 $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
 $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
-$container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
 $container-color-blockquote-border: $modes-color-interactive-primary-default;
 $container-boxshadow-card-enabled: $global-boxshadow-interactive-enabled; // Card (enabled)
 $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (hover state)
@@ -76,9 +72,13 @@ $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-defa
 $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview. 
 $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
 $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
+$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
+$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
+$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
 $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-generic-with-active;
 $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-generic-with-active;
 $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
+$container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
 $container-size-none: $global-size-none;
 $container-size-accordionstandard-chevron: $global-size-icon-m; // Accordion chevron container
 $container-size-quotebar-width: $global-size-micro-m; // block quote bar width

package/scss/product/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-generic-active;
-$form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
 $form-color-labelset-label-required: $modes-color-interactive-danger-default;
-$form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-validation-border-error: $modes-color-status-negative-default;
 $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
 $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -35,10 +32,10 @@ $form-typography-responsive-label-l: $global-typography-responsive-component-fir
 $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
 $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
 $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
+$form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
+$form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
 $form-color-calendar-text-hover: $modes-color-interactive-monochrome-generic-with-hover;
-$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
-$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
 $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
 $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
@@ -47,9 +44,8 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
 $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
 $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
 $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
+$form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
 $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
-$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
-$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-space-none: $global-space-none;
 $form-space-calendar-x-m: $global-space-macro-m;
 $form-space-calendar-y-m: $global-space-macro-m;
@@ -124,15 +120,18 @@ $form-space-integral-xg-l: $global-space-micro-xl; // Space between integral ele
 $form-space-integral-yg-s: $global-space-micro-m; // Space below labelset or error validation in form components
 $form-space-integral-yg-m: $global-space-micro-l; // Space below labelset or error validation in form components
 $form-space-integral-yg-l: $global-space-micro-xl; // Space below labelset or error validation in form components
-$form-space-integral-progressive-x-s: $global-space-macro-m - $global-space-micro-xs; // Left padding on progressively shown form inputs on radio and checkbox
-$form-space-integral-progressive-x-m: $global-space-macro-l; // Left padding on progressively shown form inputs on radio and checkbox
-$form-space-integral-progressive-x-l: $global-space-macro-xl + $global-space-micro-xs; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-s: $global-space-macro-xs - 3; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-m: $global-space-macro-s; // Left padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-x-l: $global-space-macro-m + 1; // Left padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-s: $global-space-micro-l; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-m: $global-space-micro-xxl; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-y-l: $global-space-micro-l * 2; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-s: $global-space-micro-l; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-m: $global-space-micro-xxl; // Top and bottom padding on progressively shown form inputs on radio and checkbox
 $form-space-integral-progressive-yg-l: $global-space-micro-l * 2; // Top and bottom padding on progressively shown form inputs on radio and checkbox
+$form-space-integral-progressive-keyline-x-s: $global-space-macro-xxxs - 1; // Left padding on keyline for small progressively shown inputs
+$form-space-integral-progressive-keyline-x-m: $global-space-macro-xxs - 1; // Left padding on keyline for medium progressively shown inputs
+$form-space-integral-progressive-keyline-x-l: $global-space-macro-xs - 1; // Left padding on keyline for large progressively shown inputs
 $form-space-rating-xg-m: $global-space-micro-l; // small gap between rating stars
 $form-space-rating-xg-l: $global-space-micro-xxl; // medium gap between rating stars
 $form-space-layout-stack-s: $global-space-macro-xs; // Spacing between horizontal and vertical S form components
@@ -213,6 +212,7 @@ $form-size-switch-handle-icon-m: $global-size-icon-s - $global-size-micro-xs; //
 $form-size-switch-handle-icon-l: $global-size-icon-m; // L switch icon inside knob
 $form-size-textarea-m: $global-size-macro-m * 2; // Min height for all text area sizes.
 $form-size-validation-bar: $global-size-micro-xxs; // 2px validation bar used on errors and warnings
+$form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosure keyline bar used in checkbox and radio groups
 $form-size-rating-m: $global-size-icon-m; // medium rating stars
 $form-size-rating-l: $global-size-icon-xl; // large rating stars
 $form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
@@ -225,7 +225,9 @@ $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
 $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER 
 $form-color-dropdown-label-active: $modes-color-interactive-monochrome-generic-with-active;
+$form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
 $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
+$form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
 $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
 $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
 $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -245,8 +247,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
 $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
 $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
 $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
+$form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-fg-active: $modes-color-interactive-monochrome-generic-with-active;
 $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
+$form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
 $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
 $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
 $form-color-switch-icon-enabled: $modes-color-interactive-data-entry-content-alt;
@@ -256,6 +260,7 @@ $form-radius-fileupload: $global-radius-container-m; // File input (file uploads
 $form-radius-fileselector: $global-radius-container-m; // File preview (file selector asset)
 $form-radius-input: $global-radius-interactive-m; // Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input
 $form-radius-validationbar: $global-radius-interactive-xs; // Validation bar
+$form-radius-progressivebar: $global-radius-interactive-xs; // Validation bar
 $form-radius-calendar-today: $global-radius-container-xs; // Calendar (today indicator)
 $form-borderwidth-colorpicker: $global-borderwidth-xs; // swatch border
 $form-borderwidth-caution: $global-borderwidth-xs; // Caution border