@sage/design-tokens 15.1.0 → 15.2.1

package/css/frozenproduct/small/components/status.css

@@ -3,34 +3,29 @@
  */
 
 :root {
+  --status-color-message-global-info-bg-default: var(--modes-color-status-info-frozenglobal-default); /* Global message bg */
+  --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-frozenglobal-default); /* Global message bg */
   --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
   --status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
   --status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
   --status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
   --status-color-message-contextual-icon-alt: var(--modes-color-status-neutral-default); /* icon on neutral status dialogs */
-  --status-color-message-contextual-ai-bg-alt: var(--modes-color-status-neutral-default-alt);
   --status-color-message-contextual-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
   --status-color-message-contextual-error-bg-default: var(--modes-color-status-negative-default);
-  --status-color-message-contextual-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
   --status-color-message-contextual-error-border-default: var(--modes-color-status-negative-default);
   --status-color-message-contextual-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
   --status-color-message-contextual-info-bg-default: var(--modes-color-status-info-default);
-  --status-color-message-contextual-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
   --status-color-message-contextual-info-border-default: var(--modes-color-status-info-default);
   --status-color-message-contextual-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
   --status-color-message-contextual-success-bg-default: var(--modes-color-status-positive-default);
-  --status-color-message-contextual-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
   --status-color-message-contextual-success-border-default: var(--modes-color-status-positive-default);
   --status-color-message-contextual-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
   --status-color-message-contextual-warning-bg-default: var(--modes-color-status-caution-default);
-  --status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
   --status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
   --status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
   --status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
-  --status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
-  --status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
-  --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
-  --status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
+  --status-color-message-global-info-bg-hover: var(--modes-color-status-info-frozenglobal-hover); /* Global message bg */
+  --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-frozenglobal-hover); /* Global message bg */
   --status-color-pill-custom-blue-bg-default: var(--modes-color-status-custom-blue-default);
   --status-color-pill-custom-blue-bg-alt-default: var(--modes-color-status-custom-blue-default-alt); /* outline pill bg */
   --status-color-pill-custom-blue-border-default: var(--modes-color-status-custom-blue-default);
@@ -62,7 +57,6 @@
   --status-color-pill-custom-slate-bg-alt-default: var(--modes-color-status-custom-slate-default-alt); /* outline pill bg */
   --status-color-pill-custom-slate-border-default: var(--modes-color-status-custom-slate-default);
   --status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
-  --status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
   --status-color-pill-error-border-default: var(--modes-color-status-negative-default);
   --status-color-pill-error-inverse-bg-default: var(--modes-color-status-negative-inverse-default);
   --status-color-pill-error-inverse-bg-alt-default: var(--modes-color-status-negative-inverse-default-alt); /* outline pill bg */
@@ -74,25 +68,22 @@
   --status-color-pill-important-inverse-bg-alt-default: var(--modes-color-status-important-inverse-default-alt); /* outline pill bg */
   --status-color-pill-important-inverse-border-default: var(--modes-color-status-important-inverse-default);
   --status-color-pill-info-bg-default: var(--modes-color-status-info-default);
-  --status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
   --status-color-pill-info-border-default: var(--modes-color-status-info-default);
   --status-color-pill-info-inverse-bg-default: var(--modes-color-status-info-inverse-default);
   --status-color-pill-info-inverse-bg-alt-default: var(--modes-color-status-info-inverse-default-alt); /* outline pill bg */
   --status-color-pill-info-inverse-border-default: var(--modes-color-status-info-inverse-default);
-  --status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-default);
-  --status-color-pill-neutral-bg-alt-default: var(--modes-color-status-neutral-default-alt); /* outline pill bg */
-  --status-color-pill-neutral-border-default: var(--modes-color-status-neutral-default);
+  --status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-frozen-default);
+  --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-frozen-hover);
+  --status-color-pill-neutral-border-default: var(--modes-color-status-neutral-frozen-default);
   --status-color-pill-neutral-inverse-bg-default: var(--modes-color-status-neutral-inverse-default);
   --status-color-pill-neutral-inverse-bg-alt-default: var(--modes-color-status-neutral-inverse-default-alt); /* outline pill bg */
   --status-color-pill-neutral-inverse-border-default: var(--modes-color-status-neutral-inverse-default);
   --status-color-pill-success-bg-default: var(--modes-color-status-positive-default);
-  --status-color-pill-success-bg-alt-default: var(--modes-color-status-positive-default-alt); /* outline pill bg */
   --status-color-pill-success-border-default: var(--modes-color-status-positive-default);
   --status-color-pill-success-inverse-bg-default: var(--modes-color-status-positive-inverse-default);
   --status-color-pill-success-inverse-bg-alt-default: var(--modes-color-status-positive-inverse-default-alt); /* outline pill bg */
   --status-color-pill-success-inverse-border-default: var(--modes-color-status-positive-inverse-default);
   --status-color-pill-warning-bg-default: var(--modes-color-status-caution-default);
-  --status-color-pill-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
   --status-color-pill-warning-border-default: var(--modes-color-status-caution-default);
   --status-color-pill-warning-inverse-bg-default: var(--modes-color-status-caution-inverse-default);
   --status-color-pill-warning-inverse-bg-alt-default: var(--modes-color-status-caution-inverse-default-alt); /* Global message bg */
@@ -117,11 +108,14 @@
   --status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
   --status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
   --status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
+  --status-color-message-contextual-ai-bg-alt: var(--status-color-none); /* Subtle message bg */
   --status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
+  --status-color-message-contextual-error-bg-alt: var(--status-color-none); /* Subtle message bg */
+  --status-color-message-contextual-info-bg-alt: var(--status-color-none); /* Subtle message bg */
+  --status-color-message-contextual-success-bg-alt: var(--status-color-none); /* Subtle message bg */
+  --status-color-message-contextual-warning-bg-alt: var(--status-color-none); /* Subtle message bg */
   --status-color-message-global-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
-  --status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
-  --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
   --status-color-pill-custom-blue-bg-alt-hover: var(--modes-color-status-custom-blue-hover-alt);
   --status-color-pill-custom-blue-bg-hover: var(--modes-color-status-custom-blue-hover);
   --status-color-pill-custom-teal-bg-alt-hover: var(--modes-color-status-custom-teal-hover-alt);
@@ -142,6 +136,7 @@
   --status-color-pill-custom-gray-bg-hover: var(--modes-color-status-custom-gray-hover);
   --status-color-pill-custom-slate-bg-alt-hover: var(--modes-color-status-custom-slate-hover-alt);
   --status-color-pill-custom-slate-bg-hover: var(--modes-color-status-custom-slate-hover);
+  --status-color-pill-error-bg-alt-default: var(--status-color-none); /* outline pill bg */
   --status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
   --status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
   --status-color-pill-error-inverse-bg-alt-hover: var(--modes-color-status-negative-inverse-hover-alt);
@@ -152,30 +147,35 @@
   --status-color-pill-important-bg-hover: var(--modes-color-status-important-hover);
   --status-color-pill-important-inverse-bg-alt-hover: var(--modes-color-status-important-inverse-hover-alt);
   --status-color-pill-important-inverse-bg-hover: var(--modes-color-status-important-inverse-hover);
+  --status-color-pill-info-bg-alt-default: var(--status-color-none); /* outline pill bg */
   --status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
   --status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
   --status-color-pill-info-inverse-bg-alt-hover: var(--modes-color-status-info-inverse-hover-alt);
   --status-color-pill-info-inverse-bg-hover: var(--modes-color-status-info-inverse-hover);
-  --status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
-  --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
+  --status-color-pill-neutral-bg-alt-default: var(--status-color-none); /* outline pill bg */
+  --status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-frozen-hover-alt);
   --status-color-pill-neutral-inverse-bg-alt-hover: var(--modes-color-status-neutral-inverse-hover-alt);
   --status-color-pill-neutral-inverse-bg-hover: var(--modes-color-status-neutral-inverse-hover);
   --status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
+  --status-color-pill-success-bg-alt-default: var(--status-color-none); /* outline pill bg */
   --status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
   --status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
   --status-color-pill-success-inverse-bg-alt-hover: var(--modes-color-status-positive-inverse-hover-alt);
   --status-color-pill-success-inverse-bg-hover: var(--modes-color-status-positive-inverse-hover);
+  --status-color-pill-warning-bg-alt-default: var(--status-color-none); /* Global message bg */
   --status-color-pill-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
   --status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
   --status-color-pill-warning-inverse-bg-alt-hover: var(--modes-color-status-caution-inverse-hover-alt);
   --status-color-pill-warning-inverse-bg-hover: var(--modes-color-status-caution-inverse-hover);
-  --status-color-rating-bg-default: var(--modes-color-status-reviews-default);
-  --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
-  --status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
-  --status-color-rating-border-default: var(--modes-color-status-reviews-default);
+  --status-color-rating-bg-default: var(--modes-color-status-reviews-frozen-default);
+  --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-frozen-default-alt);
+  --status-color-rating-bg-hover: var(--modes-color-status-reviews-frozen-hover);
+  --status-color-rating-border-default: var(--modes-color-status-reviews-frozen-default);
   --status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
   --status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
   --status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
+  --status-color-message-global-info-icon: var(--modes-color-status-content-with-default-alt);
+  --status-color-message-global-warning-icon: var(--modes-color-status-content-with-default-alt);
   --status-color-pill-generic-label-default: var(--modes-color-status-content-with-default);
   --status-color-pill-generic-label-hover: var(--modes-color-status-content-with-hover);
   --status-color-pill-generic-label-alt-default: var(--modes-color-status-content-with-default-alt);
@@ -190,7 +190,7 @@
   --status-size-message-global-m: var(--global-size-macro-m); /* Global message minheight */
   --status-size-icon-m: var(--global-size-icon-m);
   --status-radius-message: var(--global-radius-container-m); /* Message */
-  --status-radius-pill: var(--global-radius-container-sm); /* Pill (outer corners) */
+  --status-radius-pill: var(--global-radius-container-xs); /* Pill (outer corners) */
   --status-borderwidth-pill: var(--global-borderwidth-s); /* Outlined Pill border */
   --status-borderwidth-message: var(--global-borderwidth-xs); /* Contextual message and AI inline border */
   --status-space-none: var(--global-space-none);

package/css/frozenproduct/small/components/tab.css

@@ -16,8 +16,7 @@
   --tab-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --tab-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --tab-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --tab-color-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* For anchor nav, not tab. */
-  --tab-color-border-active: var(--modes-color-interactive-monochrome-active);
+  --tab-color-border-active: var(--modes-color-interactive-primary-frozen-default);
   --tab-color-icon-hover: var(--modes-color-interactive-monochrome-with-hover);
   --tab-color-label-active: var(--modes-color-interactive-monochrome-active);
   --tab-color-icon-active: var(--modes-color-interactive-monochrome-active);
@@ -37,16 +36,17 @@
   --tab-space-xg-l: var(--global-space-micro-l); /* Gap between elements in Tab. */
   --tab-space-y-m: var(--global-space-micro-l); /* Top bottom padding in Tab. */
   --tab-space-y-l: var(--global-space-micro-xxl); /* Top bottom padding in Tab. */
-  --tab-color-bg-active: var(--modes-color-interactive-monochrome-with-active);
+  --tab-color-bg-active: var(--modes-color-interactive-monochrome-with-default);
+  --tab-color-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt); /* For anchor nav, not tab. */
   --tab-color-border-activealt: var(--modes-color-generic-fg-delicate);
-  --tab-color-border-enabled: var(--modes-color-generic-fg-delicate);
-  --tab-color-border-hover: var(--modes-color-generic-fg-moderate);
+  --tab-color-border-enabled: var(--modes-color-interactive-monochrome-frozen-hover-alt);
+  --tab-color-border-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
   --tab-color-icon-enabled: var(--modes-color-interactive-monochrome-default-alt);
   --tab-color-label-enabled: var(--modes-color-interactive-monochrome-default);
   --tab-color-validation-label-error: var(--modes-color-interactive-monochrome-default-alt);
   --tab-color-validation-label-warning: var(--modes-color-interactive-monochrome-default-alt);
-  --tab-radius-m: var(--global-radius-interactive-m); /* Tab horizontal - top corners. Tab vertical - left corners. */
-  --tab-radius-l: var(--global-radius-interactive-m); /* Tab horizontal - top corners. Tab vertical - left corners. */
+  --tab-radius-m: var(--global-radius-interactive-s); /* Tab horizontal - top corners. Tab vertical - left corners. */
+  --tab-radius-l: var(--global-radius-interactive-s); /* Tab horizontal - top corners. Tab vertical - left corners. */
   --tab-radius-baseline-m: var(--global-radius-interactive-xxs);
   --tab-radius-baseline-l: var(--global-radius-interactive-xxs);
   --tab-radius-indicator-m: var(--global-radius-interactive-xs); /* Indicator for hover and active. */

package/css/frozenproduct/small/components/table.css

@@ -4,7 +4,11 @@
 
 :root {
   --table-color-header-subtle-bg-default: var(--modes-color-none);
+  --table-color-header-harsh-bg-default: var(--modes-color-interactive-monochrome-frozen-default);
+  --table-color-row-bg-activated: var(--modes-color-interactive-primary-frozen-table-default);
   --table-color-row-bg-default: var(--modes-color-generic-bg-nought);
+  --table-color-row-bg-alt: var(--modes-color-generic-bg-frozen-delicate);
+  --table-color-row-bg-hover: var(--modes-color-generic-bg-frozen-soft);
   --table-color-row-label-hover: var(--modes-color-generic-content-extreme);
   --table-typography-adaptive-heading-s: var(--global-typography-adaptive-component-firm-s);
   --table-typography-adaptive-heading-m: var(--global-typography-adaptive-component-firm-m);
@@ -24,12 +28,11 @@
   --table-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --table-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --table-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
-  --table-color-row-bg-activated: var(--modes-color-interactive-primary-default);
-  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-active);
-  --table-color-row-bg-alt: var(--modes-color-generic-bg-delicate); /* Zebra stripes */
+  --table-color-header-harsh-bg-alt: var(--modes-color-interactive-monochrome-frozen-default-alt);
   --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. */
   --table-color-row-bg-alt3: var(--modes-color-generic-bg-faint); /* Child rows. */
-  --table-color-row-bg-hover: var(--modes-color-generic-bg-soft);
+  --table-color-row-label-activated: var(--modes-color-interactive-monochrome-with-active-alt);
+  --table-color-row-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
   --table-color-row-label-default: var(--modes-color-generic-content-harsh);
   --table-color-footer-bg-default: var(--modes-color-generic-bg-soft);
   --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
@@ -41,15 +44,12 @@
   --table-color-header-subtle-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
   --table-color-header-subtle-label-default: var(--modes-color-interactive-monochrome-default);
   --table-color-header-subtle-label-hover: var(--modes-color-interactive-monochrome-default);
-  --table-color-header-harsh-bg-alt: var(--modes-color-interactive-monochrome-default); /* header alt */
-  --table-color-header-harsh-bg-default: var(--modes-color-interactive-monochrome-default-alt);
   --table-color-header-harsh-bg-hover: var(--modes-color-interactive-monochrome-hover);
   --table-color-header-harsh-border-default: var(--modes-color-generic-fg-soft);
   --table-color-header-harsh-label-default: var(--modes-color-interactive-monochrome-with-default);
   --table-color-header-harsh-label-hover: var(--modes-color-interactive-monochrome-default);
+  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-frozen-active-alt);
   --table-color-row-border-default: var(--modes-color-generic-fg-delicate);
-  --table-color-row-label-activated: var(--modes-color-interactive-monochrome-with-active);
-  --table-color-row-label-active: var(--modes-color-interactive-monochrome-with-active);
   --table-color-footer-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
   --table-color-footer-label-default: var(--modes-color-interactive-monochrome-default);
   --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */

package/css/frozenproduct/small/dark.css

@@ -112,7 +112,8 @@
   --modes-color-interactive-monochrome-active-alt: #ffffff26;
   --modes-color-interactive-monochrome-default: #ffffffe6;
   --modes-color-interactive-monochrome-default-alt: #ffffffab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2: #ffffff6b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2: #ffffff8c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3: #ffffff6b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover: #ffffff26; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #000000;

package/css/frozenproduct/small/light.css

@@ -112,7 +112,8 @@
   --modes-color-interactive-monochrome-active-alt: #00000026;
   --modes-color-interactive-monochrome-default: #000000e6;
   --modes-color-interactive-monochrome-default-alt: #000000ab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2: #0000006b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2: #0000008c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3: #0000006b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover: #00000026; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #FFFFFF;

package/css/product/all.css

@@ -265,7 +265,8 @@
   --modes-color-interactive-monochrome-active-alt-light: #00000026;
   --modes-color-interactive-monochrome-default-light: #000000e6;
   --modes-color-interactive-monochrome-default-alt-light: #000000ab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2-light: #0000006b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2-light: #0000008c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3-light: #0000006b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt-light: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover-light: #00000026; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active-light: #FFFFFF;
@@ -574,7 +575,8 @@
   --modes-color-interactive-monochrome-active-alt-dark: #ffffff26;
   --modes-color-interactive-monochrome-default-dark: #ffffffe6;
   --modes-color-interactive-monochrome-default-alt-dark: #ffffffab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2-dark: #ffffff6b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2-dark: #ffffff8c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3-dark: #ffffff6b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt-dark: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover-dark: #ffffff26; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active-dark: #000000;
@@ -1470,6 +1472,7 @@
   --form-typography-label-s: var(--global-typography-component-firm-s);
   --form-typography-label-m: var(--global-typography-component-firm-m);
   --form-typography-label-l: var(--global-typography-component-firm-l);
+  --form-typography-default-xs: var(--global-typography-component-moderate-xs);
   --form-typography-default-s: var(--global-typography-component-moderate-s);
   --form-typography-default-m: var(--global-typography-component-moderate-m);
   --form-typography-default-l: var(--global-typography-component-moderate-l);
@@ -1670,6 +1673,7 @@
   --form-color-dropdown-label-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --form-color-dropdown-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));
   --form-color-dropdown-label-enabled: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
+  --form-color-dropdown-label-subtext: light-dark(var(--modes-color-interactive-monochrome-default-alt2-light), var(--modes-color-interactive-monochrome-default-alt2-dark)); /* Option subtext. */
   --form-color-labelset-label-default: light-dark(var(--modes-color-interactive-data-entry-content-light), var(--modes-color-interactive-data-entry-content-dark));
   --form-color-labelset-label-alt: light-dark(var(--modes-color-interactive-data-entry-content-alt-light), var(--modes-color-interactive-data-entry-content-alt-dark)); /* used for '(optional)' text and hint text. */
   --form-color-labelset-label-disabled: light-dark(var(--modes-color-interactive-inactive-content-light), var(--modes-color-interactive-inactive-content-dark));

package/css/product/large/components/form.css

@@ -24,12 +24,14 @@
   --form-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
   --form-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
   --form-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
+  --form-typography-adaptive-default-xs: var(--global-typography-adaptive-component-moderate-xs);
   --form-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
   --form-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
   --form-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
   --form-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --form-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --form-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
+  --form-typography-responsive-default-xs: var(--global-typography-responsive-component-moderate-xs);
   --form-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
   --form-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
   --form-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
@@ -230,6 +232,7 @@
   --form-color-dropdown-label-alt: var(--modes-color-interactive-monochrome-default);
   --form-color-dropdown-label-disabled: var(--modes-color-interactive-inactive-content);
   --form-color-dropdown-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
+  --form-color-dropdown-label-subtext: var(--modes-color-interactive-monochrome-default-alt2); /* Option subtext. */
   --form-color-labelset-label-default: var(--modes-color-interactive-data-entry-content);
   --form-color-labelset-label-alt: var(--modes-color-interactive-data-entry-content-alt); /* used for '(optional)' text and hint text. */
   --form-color-labelset-label-disabled: var(--modes-color-interactive-inactive-content);

package/css/product/large/dark.css

@@ -112,7 +112,8 @@
   --modes-color-interactive-monochrome-active-alt: #ffffff26;
   --modes-color-interactive-monochrome-default: #ffffffe6;
   --modes-color-interactive-monochrome-default-alt: #ffffffab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2: #ffffff6b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2: #ffffff8c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3: #ffffff6b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover: #ffffff26; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #000000;

package/css/product/large/light.css

@@ -112,7 +112,8 @@
   --modes-color-interactive-monochrome-active-alt: #00000026;
   --modes-color-interactive-monochrome-default: #000000e6;
   --modes-color-interactive-monochrome-default-alt: #000000ab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2: #0000006b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2: #0000008c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3: #0000006b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover: #00000026; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #FFFFFF;

package/css/product/small/components/form.css

@@ -24,12 +24,14 @@
   --form-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
   --form-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
   --form-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
+  --form-typography-adaptive-default-xs: var(--global-typography-adaptive-component-moderate-xs);
   --form-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
   --form-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
   --form-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
   --form-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --form-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --form-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
+  --form-typography-responsive-default-xs: var(--global-typography-responsive-component-moderate-xs);
   --form-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
   --form-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
   --form-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
@@ -230,6 +232,7 @@
   --form-color-dropdown-label-alt: var(--modes-color-interactive-monochrome-default);
   --form-color-dropdown-label-disabled: var(--modes-color-interactive-inactive-content);
   --form-color-dropdown-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
+  --form-color-dropdown-label-subtext: var(--modes-color-interactive-monochrome-default-alt2); /* Option subtext. */
   --form-color-labelset-label-default: var(--modes-color-interactive-data-entry-content);
   --form-color-labelset-label-alt: var(--modes-color-interactive-data-entry-content-alt); /* used for '(optional)' text and hint text. */
   --form-color-labelset-label-disabled: var(--modes-color-interactive-inactive-content);

package/css/product/small/dark.css

@@ -112,7 +112,8 @@
   --modes-color-interactive-monochrome-active-alt: #ffffff26;
   --modes-color-interactive-monochrome-default: #ffffffe6;
   --modes-color-interactive-monochrome-default-alt: #ffffffab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2: #ffffff6b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2: #ffffff8c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3: #ffffff6b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt: #ffffff1a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover: #ffffff26; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #000000;

package/css/product/small/light.css

@@ -112,7 +112,8 @@
   --modes-color-interactive-monochrome-active-alt: #00000026;
   --modes-color-interactive-monochrome-default: #000000e6;
   --modes-color-interactive-monochrome-default-alt: #000000ab; /* subtle and toggle button text */
-  --modes-color-interactive-monochrome-default-alt2: #0000006b; /* Tertiary border color */
+  --modes-color-interactive-monochrome-default-alt2: #0000008c; /* Dropdown option subtext. */
+  --modes-color-interactive-monochrome-default-alt3: #0000006b; /* Tertiary border color */
   --modes-color-interactive-monochrome-hover-alt: #0000001a; /* Accordion, secondary, tertiary, menu bg on hover */
   --modes-color-interactive-monochrome-hover: #00000026; /* subtle table header hover */
   --modes-color-interactive-monochrome-with-active: #FFFFFF;

package/ios/frozenproduct/large/dark/components/badge.h

@@ -10,9 +10,9 @@
 #import <UIKit/UIKit.h>
 
 #define badgeColorNotificationBorderDefault #000000
-#define badgeColorNotificationBgDefault #E13E53
+#define badgeColorNotificationBgDefault #E04500
 #define badgeColorNotificationBgAlt #007ED9
-#define badgeColorNotificationLabelDefault #000000
+#define badgeColorNotificationLabelDefault #FFFFFF
 #define badgeColorNotificationLabelAlt #000000
 #define badgeColorNotificationInverseBorderDefault #FFFFFF
 #define badgeColorNotificationInverseBgDefault #CD384B

package/ios/frozenproduct/large/dark/components/button.h

@@ -190,17 +190,17 @@
 #define buttonColorTypicalPrimaryInverseLabelDisabled #FFFFFF
 #define buttonColorTypicalPrimaryInverseLabelEnabled #FFFFFF
 #define buttonColorTypicalPrimaryInverseLabelHover #FFFFFF
-#define buttonColorTypicalSecondaryBgActive #00d6394d
+#define buttonColorTypicalSecondaryBgActive #7ce47a
 #define buttonColorTypicalSecondaryBgEnabled #00d63908
-#define buttonColorTypicalSecondaryBgHover #00d6391a
+#define buttonColorTypicalSecondaryBgHover #55dd5b
 #define buttonColorTypicalSecondaryBorderActive #7ce47a
 #define buttonColorTypicalSecondaryBorderDisabled #4b4b4b
-#define buttonColorTypicalSecondaryBorderEnabled #00d639cc
+#define buttonColorTypicalSecondaryBorderEnabled #00D639
 #define buttonColorTypicalSecondaryBorderHover #55dd5b
-#define buttonColorTypicalSecondaryLabelActive #FFFFFF
+#define buttonColorTypicalSecondaryLabelActive #000000
 #define buttonColorTypicalSecondaryLabelDisabled #ffffff4d
-#define buttonColorTypicalSecondaryLabelEnabled #ffffffe6
-#define buttonColorTypicalSecondaryLabelHover #FFFFFF
+#define buttonColorTypicalSecondaryLabelEnabled #00D639
+#define buttonColorTypicalSecondaryLabelHover #000000
 #define buttonColorTypicalSecondaryInverseBgActive #00811f4d
 #define buttonColorTypicalSecondaryInverseBgEnabled #00811f08
 #define buttonColorTypicalSecondaryInverseBgHover #0c711d1a
@@ -212,17 +212,17 @@
 #define buttonColorTypicalSecondaryInverseLabelDisabled #0000006b
 #define buttonColorTypicalSecondaryInverseLabelEnabled #000000e6
 #define buttonColorTypicalSecondaryInverseLabelHover #000000
-#define buttonColorTypicalTertiaryBgActive #00d6394d
+#define buttonColorTypicalTertiaryBgActive #7ce47a
 #define buttonColorTypicalTertiaryBgEnabled #fff0
-#define buttonColorTypicalTertiaryBgHover #00d6391a
+#define buttonColorTypicalTertiaryBgHover #55dd5b
 #define buttonColorTypicalTertiaryBorderActive #7ce47a
-#define buttonColorTypicalTertiaryBorderDisabled #4b4b4b
-#define buttonColorTypicalTertiaryBorderEnabled #00d639cc
-#define buttonColorTypicalTertiaryBorderHover #55dd5b
-#define buttonColorTypicalTertiaryLabelActive #FFFFFF
+#define buttonColorTypicalTertiaryBorderDisabled #fff0
+#define buttonColorTypicalTertiaryBorderEnabled #fff0
+#define buttonColorTypicalTertiaryBorderHover #fff0
+#define buttonColorTypicalTertiaryLabelActive #000000
 #define buttonColorTypicalTertiaryLabelDisabled #ffffff4d
-#define buttonColorTypicalTertiaryLabelEnabled #ffffffe6
-#define buttonColorTypicalTertiaryLabelHover #FFFFFF
+#define buttonColorTypicalTertiaryLabelEnabled #00D639
+#define buttonColorTypicalTertiaryLabelHover #000000
 #define buttonColorTypicalTertiaryInverseBgActive #00811f4d
 #define buttonColorTypicalTertiaryInverseBgEnabled #fff0
 #define buttonColorTypicalTertiaryInverseBgHover #0c711d1a
@@ -250,7 +250,7 @@
 #define buttonColorTypicalToggleLabelActiveDisabled #000000
 #define buttonColorTypicalToggleBgActive #FFFFFF
 #define buttonColorTypicalToggleBgHover #ffffff1a
-#define buttonColorTypicalToggleBorderEnabled #ffffffe6
+#define buttonColorTypicalToggleBorderEnabled #777
 #define buttonColorTypicalToggleBorderDisabled #4b4b4b
 #define buttonColorTypicalToggleLabelActive #000000
 #define buttonColorTypicalToggleLabelDisabled #ffffff4d

package/ios/frozenproduct/large/dark/components/container.h

@@ -127,15 +127,15 @@
 #define containerRadiusScrollbar 999
 #define containerRadiusTexteditor 8
 #define containerRadiusBlockquoteBar 999
-#define containerRadiusCardModerate 16
-#define containerRadiusCardCurved 24
-#define containerRadiusCardSweeping 32
-#define containerRadiusTileModerate 16
-#define containerRadiusTileCurved 24
-#define containerRadiusTileSweeping 32
-#define containerRadiusTileselectModerate 16
-#define containerRadiusTileselectCurved 24
-#define containerRadiusTileselectSweeping 32
+#define containerRadiusCardModerate 8
+#define containerRadiusCardCurved 16
+#define containerRadiusCardSweeping 24
+#define containerRadiusTileModerate 8
+#define containerRadiusTileCurved 16
+#define containerRadiusTileSweeping 24
+#define containerRadiusTileselectModerate 8
+#define containerRadiusTileselectCurved 16
+#define containerRadiusTileselectSweeping 24
 #define containerSpaceNone 0
 #define containerSpaceAccordionsubtleYgM 16
 #define containerSpaceFilepreviewPreviewXM 8

package/ios/frozenproduct/large/dark/components/form.h

@@ -199,7 +199,7 @@
 #define formSizeRatingL 32
 #define formColorCalendarBgActive #FFFFFF
 #define formColorCalendarBgDisabled #0e0e0e
-#define formColorCalendarBgDuration #1b1b1b
+#define formColorCalendarBgDuration #0e0e0e
 #define formColorCalendarBgHover #ffffff1a
 #define formColorCalendarBorderDuration #FFFFFF
 #define formColorCalendarTextActive #000000
@@ -215,6 +215,7 @@
 #define formColorDropdownLabelDisabled #ffffff4d
 #define formColorDropdownLabelEnabled #ffffffab
 #define formColorDropdownLabelHover #FFFFFF
+#define formColorDropdownLabelSubtext #ffffff8c
 #define formColorLabelsetLabelRequired #E13E53
 #define formColorLabelsetLabelDefault #fffffff2
 #define formColorLabelsetLabelAlt #ffffff8c
@@ -245,18 +246,18 @@
 #define formColorTypicalTextEnabled #fffffff2
 #define formColorTypicalTextHover #FFFFFF
 #define formColorTypicalTextReadOnly #fffffff2
-#define formColorSwitchBgActive #FFFFFF
+#define formColorSwitchBgActive #ffffffe6
 #define formColorSwitchBgActivedisabled #4b4b4b
 #define formColorSwitchBgDisabled #0e0e0e
 #define formColorSwitchBgEnabled #000000
 #define formColorSwitchBorderActive transparent
 #define formColorSwitchBorderActivedisabled transparent
 #define formColorSwitchBorderDisabled #4b4b4b
-#define formColorSwitchBorderEnabled #ffffff80
+#define formColorSwitchBorderEnabled #777
 #define formColorSwitchFgActive #000000
 #define formColorSwitchFgActivedisabled #000000
 #define formColorSwitchFgDisabled #4b4b4b
-#define formColorSwitchFgEnabled #ffffff80
+#define formColorSwitchFgEnabled #777
 #define formColorSwitchLabelActive #fffffff2
 #define formColorSwitchLabelActivedisabled #4b4b4b
 #define formColorSwitchLabelDisabled #4b4b4b
@@ -269,16 +270,16 @@
 #define formColorValidationLabelSuccess #009023
 #define formColorValidationLabelWarning #e75b23
 #define formRadiusNone 0
-#define formRadiusCheckbox 4
+#define formRadiusCheckbox 2
 #define formRadiusTexteditorfooter 4
-#define formRadiusColorpicker 999
+#define formRadiusColorpicker 16
 #define formRadiusDropdown 8
-#define formRadiusFileupload 8
-#define formRadiusFileselector 8
-#define formRadiusInput 8
+#define formRadiusFileupload 4
+#define formRadiusFileselector 4
+#define formRadiusInput 4
 #define formRadiusRadio 999
 #define formRadiusSwitch 999
-#define formRadiusValidationbar 2
+#define formRadiusValidationbar 1
 #define formRadiusProgressivebar 2
 #define formRadiusCalendarNone 0
 #define formRadiusCalendarDate 999
@@ -300,12 +301,14 @@
 #define formTypographyAdaptiveLabelS [object Object]
 #define formTypographyAdaptiveLabelM [object Object]
 #define formTypographyAdaptiveLabelL [object Object]
+#define formTypographyAdaptiveDefaultXs [object Object]
 #define formTypographyAdaptiveDefaultS [object Object]
 #define formTypographyAdaptiveDefaultM [object Object]
 #define formTypographyAdaptiveDefaultL [object Object]
 #define formTypographyResponsiveLabelS [object Object]
 #define formTypographyResponsiveLabelM [object Object]
 #define formTypographyResponsiveLabelL [object Object]
+#define formTypographyResponsiveDefaultXs [object Object]
 #define formTypographyResponsiveDefaultS [object Object]
 #define formTypographyResponsiveDefaultM [object Object]
 #define formTypographyResponsiveDefaultL [object Object]

package/ios/frozenproduct/large/dark/components/nav.h

@@ -13,7 +13,7 @@
 #define navColorItemBgActive #FFFFFF
 #define navColorItemBgActivealt #ffffff1a
 #define navColorItemBgEnabled #fff0
-#define navColorItemBgHover #ffffff1a
+#define navColorItemBgHover #008046
 #define navColorItemLabelActive #000000
 #define navColorItemLabelActivealt #FFFFFF
 #define navColorItemLabelEnabled #ffffffe6
@@ -52,7 +52,7 @@
 #define navColorTopnavItemLabelHover #FFFFFF
 #define navRadiusMenu 8
 #define navRadiusMenuitem 4
-#define navRadiusMenumodal 16
+#define navRadiusMenumodal 8
 #define navRadiusLeftnavMenuitem 8
 #define navRadiusModalMenuitem 8
 #define navRadiusTopnavMenuitem 8

package/ios/frozenproduct/large/dark/components/popover.h

@@ -51,8 +51,8 @@
 #define popoverColorLabelActive #000000
 #define popoverColorLabelActivealt #FFFFFF
 #define popoverColorLabelDisabled #ffffff4d
-#define popoverColorLabelHover #FFFFFF
-#define popoverColorLabelEnabled #ffffffab
+#define popoverColorLabelHover #ffffffe6
+#define popoverColorLabelEnabled #ffffffe6
 #define popoverColorSubmenuBgDefault #0e0e0e
 #define popoverTypographyAdaptiveLabelS [object Object]
 #define popoverTypographyAdaptiveLabelM [object Object]

package/ios/frozenproduct/large/dark/components/progress.h

@@ -42,14 +42,14 @@
 #define progressColorFgAlt #009023
 #define progressColorFgAlt2 #ffffffab
 #define progressColorFgCaution #E04500
-#define progressColorFgDefault #FFFFFF
+#define progressColorFgDefault #4b4b4b
 #define progressColorFgError #E13E53
 #define progressColorFgInfo #007ED9
 #define progressColorLabelAlt #ffffffab
 #define progressColorLabelDefault #fffffff2
 #define progressColorDatavisFgDefault #008A89
 #define progressColorLoaderBgDefault #ffffff14
-#define progressColorLoaderFgDefault #FFFFFF
+#define progressColorLoaderFgDefault #00D639
 #define progressColorLoaderFgError #E13E53
 #define progressColorLoaderFgComplete #009023
 #define progressColorLoaderInverseBgDefault #00000014