@sage/design-tokens 7.2.0 → 7.3.1

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/tab.scss

@@ -52,5 +52,5 @@ $tab-radius-baseline-m: $global-radius-interactive-xxs;
 $tab-radius-baseline-l: $global-radius-interactive-xxs;
 $tab-radius-indicator-m: $global-radius-interactive-xs; // Indicator for hover and active.
 $tab-radius-indicator-l: $global-radius-interactive-xs; // Indicator for hover and active.
-$tab-borderwidth-navigation-bottom: $global-borderwidth-l; // Tab (enabled and hover bottom border)
+$tab-borderwidth-navigation-bottom: $global-borderwidth-s; // Tab (enabled and hover bottom border)
 $tab-borderwidth-navigation-side: $global-borderwidth-s; // Tab (enabled and hover bottom border)

package/scss/product/small/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/small/components/tab.scss

@@ -52,5 +52,5 @@ $tab-radius-baseline-m: $global-radius-interactive-xxs;
 $tab-radius-baseline-l: $global-radius-interactive-xxs;
 $tab-radius-indicator-m: $global-radius-interactive-xs; // Indicator for hover and active.
 $tab-radius-indicator-l: $global-radius-interactive-xs; // Indicator for hover and active.
-$tab-borderwidth-navigation-bottom: $global-borderwidth-l; // Tab (enabled and hover bottom border)
+$tab-borderwidth-navigation-bottom: $global-borderwidth-s; // Tab (enabled and hover bottom border)
 $tab-borderwidth-navigation-side: $global-borderwidth-s; // Tab (enabled and hover bottom border)