@sage/design-tokens 7.1.7 → 7.2.0

package/scss/product/large/dark.scss

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

package/scss/product/large/light.scss

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

package/scss/product/small/components/profile.scss

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

package/scss/product/small/dark.scss

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

package/scss/product/small/light.scss

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