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/product/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/product/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/product/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/product/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/product/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/product/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/product/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/product/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/product/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/ios/frozenproduct/large/dark/components/form.h CHANGED Viewed

@@ -92,15 +92,18 @@
 #define formSpaceIntegralYgS 6
 #define formSpaceIntegralYgM 8
 #define formSpaceIntegralYgL 10
-#define formSpaceIntegralProgressiveXS 22
-#define formSpaceIntegralProgressiveXM 32
-#define formSpaceIntegralProgressiveXL 42
+#define formSpaceIntegralProgressiveXS 13
+#define formSpaceIntegralProgressiveXM 20
+#define formSpaceIntegralProgressiveXL 25
 #define formSpaceIntegralProgressiveYS 8
 #define formSpaceIntegralProgressiveYM 12
 #define formSpaceIntegralProgressiveYL 16
 #define formSpaceIntegralProgressiveYgS 8
 #define formSpaceIntegralProgressiveYgM 12
 #define formSpaceIntegralProgressiveYgL 16
+#define formSpaceIntegralProgressiveKeylineXS 7
+#define formSpaceIntegralProgressiveKeylineXM 11
+#define formSpaceIntegralProgressiveKeylineXL 15
 #define formSpaceRatingXgM 8
 #define formSpaceRatingXgL 12
 #define formSpaceLayoutStackS 16
@@ -186,6 +189,7 @@
 #define formSizeSearchInputMaxwidth 400
 #define formSizeTextareaM 80
 #define formSizeValidationBar 2
+#define formSizeProgressiveBar 2
 #define formSizeRatingM 20
 #define formSizeRatingL 32
 #define formColorCalendarBgActive #FFFFFF
@@ -270,6 +274,7 @@
 #define formRadiusRadio 999
 #define formRadiusSwitch 999
 #define formRadiusValidationbar 2
+#define formRadiusProgressivebar 2
 #define formRadiusCalendarNone 0
 #define formRadiusCalendarDate 999
 #define formRadiusCalendarToday 2

package/ios/frozenproduct/large/dark/components/profile.h CHANGED Viewed

@@ -23,7 +23,7 @@
 #define profileSizeInsideMl 28
 #define profileSizeInsideL 40
 #define profileSizeInsideXl 56
-#define profileSizeInsideXxl 104
+#define profileSizeInsideXxl 72
 #define profileColorBgAlt #fffffff2
 #define profileColorBgDefault #0e0e0e
 #define profileColorBorderDefault #282828

package/ios/frozenproduct/large/dark/mode.h CHANGED Viewed

@@ -41,6 +41,7 @@
 #define modesColorGenericFgDelicate #282828
 #define modesColorGenericFgSoft #4b4b4b
 #define modesColorGenericFgModerate #777
+#define modesColorGenericFgFrozenSoft #4b4b4b
 #define modesColorGenericBackdropNought #000000
 #define modesColorGenericBackdropFaint #181818
 #define modesColorInteractiveAiActive linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%)
@@ -96,6 +97,7 @@
 #define modesColorInteractiveMonochromeGenericWithDefault #000000
 #define modesColorInteractiveMonochromeGenericWithHover #FFFFFF
 #define modesColorInteractiveMonochromeGenericFrozenActive #FFFFFF
+#define modesColorInteractiveMonochromeGenericFrozenActive2 #FFFFFF
 #define modesColorInteractiveMonochromeMarketingWithActive #000000
 #define modesColorInteractiveMonochromeMarketingActive #00D639
 #define modesColorInteractiveMonochromeSubtleDefaultAlt #ffffff80
@@ -119,6 +121,7 @@
 #define modesColorInteractiveProgressBg #ffffff14
 #define modesColorInteractiveProgressBgAlt #00000014
 #define modesColorInteractiveProgressFrozenBg #ffffff14
+#define modesColorInteractiveProgressFrozenBgAlt #ffffff14
 #define modesColorStatusCautionDefault #E04500
 #define modesColorStatusCautionDefaultAlt #251206
 #define modesColorStatusCautionHover #eb6732

package/ios/frozenproduct/large/light/components/form.h CHANGED Viewed

@@ -92,15 +92,18 @@
 #define formSpaceIntegralYgS 6
 #define formSpaceIntegralYgM 8
 #define formSpaceIntegralYgL 10
-#define formSpaceIntegralProgressiveXS 22
-#define formSpaceIntegralProgressiveXM 32
-#define formSpaceIntegralProgressiveXL 42
+#define formSpaceIntegralProgressiveXS 13
+#define formSpaceIntegralProgressiveXM 20
+#define formSpaceIntegralProgressiveXL 25
 #define formSpaceIntegralProgressiveYS 8
 #define formSpaceIntegralProgressiveYM 12
 #define formSpaceIntegralProgressiveYL 16
 #define formSpaceIntegralProgressiveYgS 8
 #define formSpaceIntegralProgressiveYgM 12
 #define formSpaceIntegralProgressiveYgL 16
+#define formSpaceIntegralProgressiveKeylineXS 7
+#define formSpaceIntegralProgressiveKeylineXM 11
+#define formSpaceIntegralProgressiveKeylineXL 15
 #define formSpaceRatingXgM 8
 #define formSpaceRatingXgL 12
 #define formSpaceLayoutStackS 16
@@ -186,6 +189,7 @@
 #define formSizeSearchInputMaxwidth 400
 #define formSizeTextareaM 80
 #define formSizeValidationBar 2
+#define formSizeProgressiveBar 2
 #define formSizeRatingM 20
 #define formSizeRatingL 32
 #define formColorCalendarBgActive #000000
@@ -270,6 +274,7 @@
 #define formRadiusRadio 999
 #define formRadiusSwitch 999
 #define formRadiusValidationbar 2
+#define formRadiusProgressivebar 2
 #define formRadiusCalendarNone 0
 #define formRadiusCalendarDate 999
 #define formRadiusCalendarToday 2

package/ios/frozenproduct/large/light/components/profile.h CHANGED Viewed

@@ -23,7 +23,7 @@
 #define profileSizeInsideMl 28
 #define profileSizeInsideL 40
 #define profileSizeInsideXl 56
-#define profileSizeInsideXxl 104
+#define profileSizeInsideXxl 72
 #define profileColorBgAlt #000000f2
 #define profileColorBgDefault #f3f3f3
 #define profileColorBorderDefault #d1d1d1

package/ios/frozenproduct/large/light/mode.h CHANGED Viewed

@@ -41,6 +41,7 @@
 #define modesColorGenericFgDelicate #d1d1d1
 #define modesColorGenericFgSoft #a6a6a6
 #define modesColorGenericFgModerate #777
+#define modesColorGenericFgFrozenSoft #335B70
 #define modesColorGenericBackdropNought #FFFFFF
 #define modesColorGenericBackdropFaint #f6f8f9
 #define modesColorInteractiveAiActive linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%)
@@ -96,6 +97,7 @@
 #define modesColorInteractiveMonochromeGenericWithDefault #FFFFFF
 #define modesColorInteractiveMonochromeGenericWithHover #000000
 #define modesColorInteractiveMonochromeGenericFrozenActive #eaedf0
+#define modesColorInteractiveMonochromeGenericFrozenActive2 #335B70
 #define modesColorInteractiveMonochromeMarketingActive #000000
 #define modesColorInteractiveMonochromeMarketingWithActive #00D639
 #define modesColorInteractiveMonochromeSubtleDefaultAlt #00000080
@@ -119,6 +121,7 @@
 #define modesColorInteractiveProgressBg #00000014
 #define modesColorInteractiveProgressBgAlt #ffffff14
 #define modesColorInteractiveProgressFrozenBg #00804614
+#define modesColorInteractiveProgressFrozenBgAlt #cad3d9
 #define modesColorStatusAiDefault #FFFFFF
 #define modesColorStatusAiDefaultAlt #000000
 #define modesColorStatusAiDefaultHorizontal linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)

package/ios/frozenproduct/small/dark/components/form.h CHANGED Viewed

@@ -92,15 +92,18 @@
 #define formSpaceIntegralYgS 6
 #define formSpaceIntegralYgM 8
 #define formSpaceIntegralYgL 10
-#define formSpaceIntegralProgressiveXS 17.2
-#define formSpaceIntegralProgressiveXM 25.6
-#define formSpaceIntegralProgressiveXL 34
+#define formSpaceIntegralProgressiveXS 9.8
+#define formSpaceIntegralProgressiveXM 16
+#define formSpaceIntegralProgressiveXL 20.2
 #define formSpaceIntegralProgressiveYS 8
 #define formSpaceIntegralProgressiveYM 12
 #define formSpaceIntegralProgressiveYL 16
 #define formSpaceIntegralProgressiveYgS 8
 #define formSpaceIntegralProgressiveYgM 12
 #define formSpaceIntegralProgressiveYgL 16
+#define formSpaceIntegralProgressiveKeylineXS 5.4
+#define formSpaceIntegralProgressiveKeylineXM 8.6
+#define formSpaceIntegralProgressiveKeylineXL 11.8
 #define formSpaceRatingXgM 8
 #define formSpaceRatingXgL 12
 #define formSpaceLayoutStackS 12.8
@@ -186,6 +189,7 @@
 #define formSizeSearchInputMaxwidth 400
 #define formSizeTextareaM 80
 #define formSizeValidationBar 2
+#define formSizeProgressiveBar 2
 #define formSizeRatingM 20
 #define formSizeRatingL 32
 #define formColorCalendarBgActive #FFFFFF
@@ -270,6 +274,7 @@
 #define formRadiusRadio 999
 #define formRadiusSwitch 999
 #define formRadiusValidationbar 2
+#define formRadiusProgressivebar 2
 #define formRadiusCalendarNone 0
 #define formRadiusCalendarDate 999
 #define formRadiusCalendarToday 2

package/ios/frozenproduct/small/dark/components/profile.h CHANGED Viewed

@@ -23,7 +23,7 @@
 #define profileSizeInsideMl 28
 #define profileSizeInsideL 40
 #define profileSizeInsideXl 56
-#define profileSizeInsideXxl 104
+#define profileSizeInsideXxl 72
 #define profileColorBgAlt #fffffff2
 #define profileColorBgDefault #0e0e0e
 #define profileColorBorderDefault #282828

package/ios/frozenproduct/small/dark/mode.h CHANGED Viewed

@@ -41,6 +41,7 @@
 #define modesColorGenericFgDelicate #282828
 #define modesColorGenericFgSoft #4b4b4b
 #define modesColorGenericFgModerate #777
+#define modesColorGenericFgFrozenSoft #4b4b4b
 #define modesColorGenericBackdropNought #000000
 #define modesColorGenericBackdropFaint #181818
 #define modesColorInteractiveAiActive linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%)
@@ -96,6 +97,7 @@
 #define modesColorInteractiveMonochromeGenericWithDefault #000000
 #define modesColorInteractiveMonochromeGenericWithHover #FFFFFF
 #define modesColorInteractiveMonochromeGenericFrozenActive #FFFFFF
+#define modesColorInteractiveMonochromeGenericFrozenActive2 #FFFFFF
 #define modesColorInteractiveMonochromeMarketingWithActive #000000
 #define modesColorInteractiveMonochromeMarketingActive #00D639
 #define modesColorInteractiveMonochromeSubtleDefaultAlt #ffffff80
@@ -119,6 +121,7 @@
 #define modesColorInteractiveProgressBg #ffffff14
 #define modesColorInteractiveProgressBgAlt #00000014
 #define modesColorInteractiveProgressFrozenBg #ffffff14
+#define modesColorInteractiveProgressFrozenBgAlt #ffffff14
 #define modesColorStatusCautionDefault #E04500
 #define modesColorStatusCautionDefaultAlt #251206
 #define modesColorStatusCautionHover #eb6732

package/ios/frozenproduct/small/light/components/form.h CHANGED Viewed

@@ -92,15 +92,18 @@
 #define formSpaceIntegralYgS 6
 #define formSpaceIntegralYgM 8
 #define formSpaceIntegralYgL 10
-#define formSpaceIntegralProgressiveXS 17.2
-#define formSpaceIntegralProgressiveXM 25.6
-#define formSpaceIntegralProgressiveXL 34
+#define formSpaceIntegralProgressiveXS 9.8
+#define formSpaceIntegralProgressiveXM 16
+#define formSpaceIntegralProgressiveXL 20.2
 #define formSpaceIntegralProgressiveYS 8
 #define formSpaceIntegralProgressiveYM 12
 #define formSpaceIntegralProgressiveYL 16
 #define formSpaceIntegralProgressiveYgS 8
 #define formSpaceIntegralProgressiveYgM 12
 #define formSpaceIntegralProgressiveYgL 16
+#define formSpaceIntegralProgressiveKeylineXS 5.4
+#define formSpaceIntegralProgressiveKeylineXM 8.6
+#define formSpaceIntegralProgressiveKeylineXL 11.8
 #define formSpaceRatingXgM 8
 #define formSpaceRatingXgL 12
 #define formSpaceLayoutStackS 12.8
@@ -186,6 +189,7 @@
 #define formSizeSearchInputMaxwidth 400
 #define formSizeTextareaM 80
 #define formSizeValidationBar 2
+#define formSizeProgressiveBar 2
 #define formSizeRatingM 20
 #define formSizeRatingL 32
 #define formColorCalendarBgActive #000000
@@ -270,6 +274,7 @@
 #define formRadiusRadio 999
 #define formRadiusSwitch 999
 #define formRadiusValidationbar 2
+#define formRadiusProgressivebar 2
 #define formRadiusCalendarNone 0
 #define formRadiusCalendarDate 999
 #define formRadiusCalendarToday 2

package/ios/frozenproduct/small/light/components/profile.h CHANGED Viewed

@@ -23,7 +23,7 @@
 #define profileSizeInsideMl 28
 #define profileSizeInsideL 40
 #define profileSizeInsideXl 56
-#define profileSizeInsideXxl 104
+#define profileSizeInsideXxl 72
 #define profileColorBgAlt #000000f2
 #define profileColorBgDefault #f3f3f3
 #define profileColorBorderDefault #d1d1d1

package/ios/frozenproduct/small/light/mode.h CHANGED Viewed

@@ -41,6 +41,7 @@
 #define modesColorGenericFgDelicate #d1d1d1
 #define modesColorGenericFgSoft #a6a6a6
 #define modesColorGenericFgModerate #777
+#define modesColorGenericFgFrozenSoft #335B70
 #define modesColorGenericBackdropNought #FFFFFF
 #define modesColorGenericBackdropFaint #f6f8f9
 #define modesColorInteractiveAiActive linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%)
@@ -96,6 +97,7 @@
 #define modesColorInteractiveMonochromeGenericWithDefault #FFFFFF
 #define modesColorInteractiveMonochromeGenericWithHover #000000
 #define modesColorInteractiveMonochromeGenericFrozenActive #eaedf0
+#define modesColorInteractiveMonochromeGenericFrozenActive2 #335B70
 #define modesColorInteractiveMonochromeMarketingActive #000000
 #define modesColorInteractiveMonochromeMarketingWithActive #00D639
 #define modesColorInteractiveMonochromeSubtleDefaultAlt #00000080
@@ -119,6 +121,7 @@
 #define modesColorInteractiveProgressBg #00000014
 #define modesColorInteractiveProgressBgAlt #ffffff14
 #define modesColorInteractiveProgressFrozenBg #00804614
+#define modesColorInteractiveProgressFrozenBgAlt #cad3d9
 #define modesColorStatusAiDefault #FFFFFF
 #define modesColorStatusAiDefaultAlt #000000
 #define modesColorStatusAiDefaultHorizontal linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)

package/ios/marketing/large/dark/components/form.h CHANGED Viewed

@@ -92,15 +92,18 @@
 #define formSpaceIntegralYgS 6
 #define formSpaceIntegralYgM 8
 #define formSpaceIntegralYgL 10
-#define formSpaceIntegralProgressiveXS 22
-#define formSpaceIntegralProgressiveXM 32
-#define formSpaceIntegralProgressiveXL 42
+#define formSpaceIntegralProgressiveXS 13
+#define formSpaceIntegralProgressiveXM 20
+#define formSpaceIntegralProgressiveXL 25
 #define formSpaceIntegralProgressiveYS 8
 #define formSpaceIntegralProgressiveYM 12
 #define formSpaceIntegralProgressiveYL 16
 #define formSpaceIntegralProgressiveYgS 8
 #define formSpaceIntegralProgressiveYgM 12
 #define formSpaceIntegralProgressiveYgL 16
+#define formSpaceIntegralProgressiveKeylineXS 7
+#define formSpaceIntegralProgressiveKeylineXM 11
+#define formSpaceIntegralProgressiveKeylineXL 15
 #define formSpaceRatingXgM 8
 #define formSpaceRatingXgL 12
 #define formSpaceLayoutStackS 16
@@ -186,6 +189,7 @@
 #define formSizeSearchInputMaxwidth 400
 #define formSizeTextareaM 80
 #define formSizeValidationBar 2
+#define formSizeProgressiveBar 2
 #define formSizeRatingM 20
 #define formSizeRatingL 32
 #define formColorCalendarBgActive #FFFFFF
@@ -270,6 +274,7 @@
 #define formRadiusRadio 999
 #define formRadiusSwitch 999
 #define formRadiusValidationbar 2
+#define formRadiusProgressivebar 2
 #define formRadiusCalendarNone 0
 #define formRadiusCalendarDate 999
 #define formRadiusCalendarToday 2

package/ios/marketing/large/dark/components/profile.h CHANGED Viewed

@@ -23,7 +23,7 @@
 #define profileSizeInsideMl 28
 #define profileSizeInsideL 40
 #define profileSizeInsideXl 56
-#define profileSizeInsideXxl 104
+#define profileSizeInsideXxl 72
 #define profileColorBgAlt #fffffff2
 #define profileColorBgDefault #0e0e0e
 #define profileColorBorderDefault #282828