npm - @sage/design-tokens - Versions diffs - 7.1.7 → 7.3.0 - Mend

@sage/design-tokens 7.1.7 → 7.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (348) hide show

package/css/frozenproduct/all.css CHANGED Viewed

@@ -177,6 +177,7 @@
   --modes-color-generic-fg-delicate-light: #d1d1d1; /* table dividers and borders */
   --modes-color-generic-fg-soft-light: #a6a6a6;
   --modes-color-generic-fg-moderate-light: #777;
+  --modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
   --modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -232,6 +233,7 @@
   --modes-color-interactive-monochrome-generic-with-default-light: #FFFFFF;
   --modes-color-interactive-monochrome-generic-with-hover-light: #000000; /* maybe should be white to align with primary group logic */
   --modes-color-interactive-monochrome-generic-frozen-active-light: #eaedf0; /* Used within frozen table */
+  --modes-color-interactive-monochrome-generic-frozen-active2-light: #335B70; /* Frozen progress tracker */
   --modes-color-interactive-monochrome-marketing-active-light: #000000; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
@@ -255,6 +257,7 @@
   --modes-color-interactive-progress-bg-light: #00000014;
   --modes-color-interactive-progress-bg-alt-light: #ffffff14;
   --modes-color-interactive-progress-frozen-bg-light: #00804614;
+  --modes-color-interactive-progress-frozen-bg-alt-light: #cad3d9; /* progress tracker bg */
   --modes-color-status-ai-default-light: #FFFFFF;
   --modes-color-status-ai-default-alt-light: #000000; /* bg for contextual message comp */
   --modes-color-status-ai-default-horizontal-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
@@ -350,6 +353,7 @@
   --modes-color-generic-fg-delicate-dark: #282828; /* table dividers and borders */
   --modes-color-generic-fg-soft-dark: #4b4b4b;
   --modes-color-generic-fg-moderate-dark: #777;
+  --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
   --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -405,6 +409,7 @@
   --modes-color-interactive-monochrome-generic-with-default-dark: #000000;
   --modes-color-interactive-monochrome-generic-with-hover-dark: #FFFFFF;
   --modes-color-interactive-monochrome-generic-frozen-active-dark: #FFFFFF; /* Used within frozen table */
+  --modes-color-interactive-monochrome-generic-frozen-active2-dark: #FFFFFF; /* progress tracker */
   --modes-color-interactive-monochrome-marketing-with-active-dark: #000000; /* use for marketing overrides for switch handle on standard */
   --modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
@@ -428,6 +433,7 @@
   --modes-color-interactive-progress-bg-dark: #ffffff14;
   --modes-color-interactive-progress-bg-alt-dark: #00000014;
   --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
+  --modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
   --modes-color-status-caution-default-dark: #E04500;
   --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
   --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
@@ -1115,15 +1121,18 @@
   --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-l: calc(var(--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: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
   --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
   --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
   --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -1204,6 +1213,7 @@
   --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
   --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
   --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
+  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
@@ -1251,6 +1261,7 @@
   --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
   --form-radius-input: var(--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: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
   --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
@@ -1508,7 +1519,7 @@
   --profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
   --profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
   --profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
-  --profile-size-inside-xxl: calc(var(--global-size-micro-m) * 13); /* XXL Portraits */
+  --profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
   --profile-color-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --profile-space-none: var(--global-space-none);
   --profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */

package/css/frozenproduct/large/components/form.css CHANGED Viewed

@@ -118,15 +118,18 @@
   --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-l: calc(var(--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: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
   --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
   --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
   --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
   --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
   --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
   --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
+  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
   --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
   --form-radius-input: var(--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: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
   --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */

package/css/frozenproduct/large/components/profile.css CHANGED Viewed

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

package/css/frozenproduct/large/dark.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/frozenproduct/large/light.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/frozenproduct/small/components/form.css CHANGED Viewed

@@ -118,15 +118,18 @@
   --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-l: calc(var(--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: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
   --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
   --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
   --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
   --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
   --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
   --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
+  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
   --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
   --form-radius-input: var(--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: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
   --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */

package/css/frozenproduct/small/components/profile.css CHANGED Viewed

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

package/css/frozenproduct/small/dark.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/frozenproduct/small/light.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/marketing/all.css CHANGED Viewed

@@ -177,6 +177,7 @@
   --modes-color-generic-fg-delicate-light: #d1d1d1; /* table dividers and borders */
   --modes-color-generic-fg-soft-light: #a6a6a6;
   --modes-color-generic-fg-moderate-light: #777;
+  --modes-color-generic-fg-frozen-soft-light: #335B70; /* frozen progress tracker border */
   --modes-color-generic-backdrop-nought-light: #FFFFFF; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-light: #f6f8f9; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-light: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -232,6 +233,7 @@
   --modes-color-interactive-monochrome-generic-with-default-light: #FFFFFF;
   --modes-color-interactive-monochrome-generic-with-hover-light: #000000; /* maybe should be white to align with primary group logic */
   --modes-color-interactive-monochrome-generic-frozen-active-light: #eaedf0; /* Used within frozen table */
+  --modes-color-interactive-monochrome-generic-frozen-active2-light: #335B70; /* Frozen progress tracker */
   --modes-color-interactive-monochrome-marketing-active-light: #000000; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
@@ -255,6 +257,7 @@
   --modes-color-interactive-progress-bg-light: #00000014;
   --modes-color-interactive-progress-bg-alt-light: #ffffff14;
   --modes-color-interactive-progress-frozen-bg-light: #00804614;
+  --modes-color-interactive-progress-frozen-bg-alt-light: #cad3d9; /* progress tracker bg */
   --modes-color-status-ai-default-light: #FFFFFF;
   --modes-color-status-ai-default-alt-light: #000000; /* bg for contextual message comp */
   --modes-color-status-ai-default-horizontal-light: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
@@ -350,6 +353,7 @@
   --modes-color-generic-fg-delicate-dark: #282828; /* table dividers and borders */
   --modes-color-generic-fg-soft-dark: #4b4b4b;
   --modes-color-generic-fg-moderate-dark: #777;
+  --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
   --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -405,6 +409,7 @@
   --modes-color-interactive-monochrome-generic-with-default-dark: #000000;
   --modes-color-interactive-monochrome-generic-with-hover-dark: #FFFFFF;
   --modes-color-interactive-monochrome-generic-frozen-active-dark: #FFFFFF; /* Used within frozen table */
+  --modes-color-interactive-monochrome-generic-frozen-active2-dark: #FFFFFF; /* progress tracker */
   --modes-color-interactive-monochrome-marketing-with-active-dark: #000000; /* use for marketing overrides for switch handle on standard */
   --modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
@@ -428,6 +433,7 @@
   --modes-color-interactive-progress-bg-dark: #ffffff14;
   --modes-color-interactive-progress-bg-alt-dark: #00000014;
   --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
+  --modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
   --modes-color-status-caution-default-dark: #E04500;
   --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
   --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
@@ -1115,15 +1121,18 @@
   --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-l: calc(var(--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: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
   --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
   --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
   --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -1204,6 +1213,7 @@
   --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
   --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
   --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
+  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: light-dark(var(--modes-color-interactive-inactive-default-alt-light), var(--modes-color-interactive-inactive-default-alt-dark));
@@ -1251,6 +1261,7 @@
   --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
   --form-radius-input: var(--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: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
   --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */
@@ -1508,7 +1519,7 @@
   --profile-size-inside-ml: calc(var(--global-size-macro-xs) + var(--global-size-micro-xs)); /* L Portrait icons */
   --profile-size-inside-l: var(--global-size-macro-m); /* XL Portrait icons */
   --profile-size-inside-xl: var(--global-size-macro-xl); /* XL Portrait icons */
-  --profile-size-inside-xxl: calc(var(--global-size-micro-m) * 13); /* XXL Portraits */
+  --profile-size-inside-xxl: calc(var(--global-size-micro-m) * 9); /* XXL Portraits */
   --profile-color-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --profile-space-none: var(--global-space-none);
   --profile-space-x-s: var(--global-space-macro-xs); /* gap between avatar and name */

package/css/marketing/large/components/form.css CHANGED Viewed

@@ -118,15 +118,18 @@
   --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-l: calc(var(--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: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
   --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
   --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
   --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
   --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
   --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
   --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
+  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
   --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
   --form-radius-input: var(--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: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
   --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */

package/css/marketing/large/components/profile.css CHANGED Viewed

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

package/css/marketing/large/dark.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/marketing/large/light.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/marketing/small/components/form.css CHANGED Viewed

@@ -118,15 +118,18 @@
   --form-space-integral-yg-s: var(--global-space-micro-m); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-m: var(--global-space-micro-l); /* Space below labelset or error validation in form components */
   --form-space-integral-yg-l: var(--global-space-micro-xl); /* Space below labelset or error validation in form components */
-  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-m) - var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-m: var(--global-space-macro-l); /* Left padding on progressively shown form inputs on radio and checkbox */
-  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-xl) + var(--global-space-micro-xs)); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-s: calc(var(--global-space-macro-xs) - 3); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-m: var(--global-space-macro-s); /* Left padding on progressively shown form inputs on radio and checkbox */
+  --form-space-integral-progressive-x-l: calc(var(--global-space-macro-m) + 1); /* Left padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-y-l: calc(var(--global-space-micro-l) * 2); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-s: var(--global-space-micro-l); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-m: var(--global-space-micro-xxl); /* Top and bottom padding on progressively shown form inputs on radio and checkbox */
   --form-space-integral-progressive-yg-l: calc(var(--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: calc(var(--global-space-macro-xxxs) - 1); /* Left padding on keyline for small progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-m: calc(var(--global-space-macro-xxs) - 1); /* Left padding on keyline for medium progressively shown inputs */
+  --form-space-integral-progressive-keyline-x-l: calc(var(--global-space-macro-xs) - 1); /* Left padding on keyline for large progressively shown inputs */
   --form-space-rating-xg-m: var(--global-space-micro-l); /* small gap between rating stars */
   --form-space-rating-xg-l: var(--global-space-micro-xxl); /* medium gap between rating stars */
   --form-space-layout-stack-s: var(--global-space-macro-xs); /* Spacing between horizontal and vertical S form components */
@@ -207,6 +210,7 @@
   --form-size-switch-handle-icon-l: var(--global-size-icon-m); /* L switch icon inside knob */
   --form-size-textarea-m: calc(var(--global-size-macro-m) * 2); /* Min height for all text area sizes. */
   --form-size-validation-bar: var(--global-size-micro-xxs); /* 2px validation bar used on errors and warnings */
+  --form-size-progressive-bar: var(--global-size-micro-xxs); /* 2px progressive disclosure keyline bar used in checkbox and radio groups */
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
@@ -254,6 +258,7 @@
   --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
   --form-radius-input: var(--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: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-borderwidth-colorpicker: var(--global-borderwidth-xs); /* swatch border */
   --form-borderwidth-caution: var(--global-borderwidth-xs); /* Caution border */

package/css/marketing/small/components/profile.css CHANGED Viewed

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

package/css/marketing/small/dark.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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/css/marketing/small/light.css CHANGED Viewed

@@ -35,6 +35,7 @@
   --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%);
@@ -90,6 +91,7 @@
   --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 */
@@ -113,6 +115,7 @@
   --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%);