@sage/design-tokens 7.1.7 → 7.2.0

package/css/frozenproduct/all.css

@@ -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 */
@@ -1508,7 +1514,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/profile.css

@@ -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

@@ -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

@@ -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/profile.css

@@ -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

@@ -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

@@ -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

@@ -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 */
@@ -1508,7 +1514,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/profile.css

@@ -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

@@ -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

@@ -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/profile.css

@@ -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

@@ -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

@@ -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/all.css

@@ -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 */
@@ -1508,7 +1514,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/profile.css

@@ -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

@@ -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

@@ -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/profile.css

@@ -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

@@ -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

@@ -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/profile.h

@@ -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

@@ -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/profile.h

@@ -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

@@ -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/profile.h

@@ -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