@sage/design-tokens 15.2.0 → 15.2.1

package/css/frozenproduct/large/components/badge.css

@@ -3,9 +3,10 @@
  */
 
 :root {
+  --badge-color-notification-bg-default: var(--modes-color-status-caution-frozenglobal-default);
   --badge-radius-badge: var(--global-radius-circle); /* Badge */
-  --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
   --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
+  --badge-color-notification-label-default: var(--modes-color-generic-content-extreme);
   --badge-color-notification-inverse-border-default: var(--modes-color-generic-content-extreme);
   --badge-color-notification-inverse-bg-default: var(--modes-color-status-negative-inverse-default); /* Used in global nav notification badges */
   --badge-color-notification-inverse-bg-alt: var(--modes-color-status-info-inverse-default);
@@ -14,8 +15,7 @@
   --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
   --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
   --badge-color-notification-border-default: var(--modes-color-generic-content-nought);
-  --badge-color-notification-label-default: var(--modes-color-generic-content-nought);
-  --badge-color-notification-label-alt: var(--modes-color-generic-content-nought);
+  --badge-color-notification-label-alt: var(--modes-color-generic-fg-nought);
   --badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
   --badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
   --badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */

package/css/frozenproduct/large/components/button.css

@@ -34,9 +34,15 @@
   --button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
   --button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
   --button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
+  --button-color-typical-tertiary-bg-enabled: var(--modes-color-none);
+  --button-color-typical-tertiary-border-disabled: var(--modes-color-none);
+  --button-color-typical-tertiary-border-enabled: var(--modes-color-none);
+  --button-color-typical-tertiary-border-hover: var(--modes-color-none);
   --button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
   --button-color-typical-tertiary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
+  --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-frozen-default);
   --button-color-typical-subtle-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
+  --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
   --button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
   --button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
   --button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
@@ -73,20 +79,15 @@
   --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
   --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
   --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
-  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
+  --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-frozen-default);
   --button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
-  --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
-  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
-  --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
-  --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
+  --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-frozen-default);
+  --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-primary-frozen-default);
+  --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-primary-frozen-default);
   --button-color-typical-tertiary-inverse-bg-enabled: var(--button-color-none);
-  --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
-  --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
-  --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-with-hover);
-  --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-active);
-  --button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
-  --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-with-hover);
+  --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-frozen-active);
+  --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
+  --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-frozen-default-alt);
   --button-color-video-bg-blur: var(--modes-color-interactive-monochrome-hover-alt);
   --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
   --button-size-xs: var(--global-size-macro-xs); /* min-height on XS Buttons */
@@ -228,19 +229,19 @@
   --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
   --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
   --button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
-  --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
-  --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
+  --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-frozen-active);
+  --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
   --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
   --button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
   --button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
-  --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
+  --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-frozen-active);
   --button-color-typical-secondary-bg-enabled: var(--modes-color-interactive-primary-default-alt3);
-  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
-  --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
-  --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);
-  --button-color-typical-secondary-border-hover: var(--modes-color-interactive-primary-hover);
+  --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
+  --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-frozen-active);
+  --button-color-typical-secondary-border-hover: var(--modes-color-interactive-primary-frozen-hover);
+  --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
   --button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
-  --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-default);
+  --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover-alt);
   --button-color-typical-secondary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
   --button-color-typical-secondary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default-alt3);
   --button-color-typical-secondary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
@@ -250,13 +251,12 @@
   --button-color-typical-secondary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
   --button-color-typical-secondary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
   --button-color-typical-secondary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
-  --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-active-alt);
-  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
-  --button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-active);
-  --button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-primary-default-alt);
-  --button-color-typical-tertiary-border-hover: var(--modes-color-interactive-primary-hover);
+  --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-frozen-active);
+  --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
+  --button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-frozen-active);
+  --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
   --button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
-  --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-default);
+  --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover-alt);
   --button-color-typical-tertiary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
   --button-color-typical-tertiary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
   --button-color-typical-tertiary-inverse-border-active: var(--modes-color-interactive-primary-inverse-active);
@@ -265,17 +265,19 @@
   --button-color-typical-tertiary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
   --button-color-typical-tertiary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
   --button-color-typical-tertiary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
+  --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-frozen-active-alt);
+  --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
   --button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
-  --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-default);
+  --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover);
   --button-color-typical-subtle-inverse-bg-hover: var(--modes-color-interactive-monochrome-inverse-hover-alt);
   --button-color-typical-subtle-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
   --button-color-typical-subtle-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
   --button-color-typical-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
   --button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
-  --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-default);
-  --button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-with-active);
+  --button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
+  --button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
   --button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
-  --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
+  --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover);
   --button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-with-default);
   --button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-with-default);
   --button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-default);
@@ -320,8 +322,6 @@
   --button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
   --button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
   --button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
-  --button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
-  --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-active-alt);
   --button-color-typical-subtle-inverse-bg-active: var(--modes-color-interactive-monochrome-inverse-active-alt);
   --button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
   --button-color-typical-toggle-border-disabled: var(--modes-color-interactive-inactive-default);

package/css/frozenproduct/large/components/container.css

@@ -24,7 +24,7 @@
   --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
   --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color  */
   --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
-  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /*   */
+  --container-color-interactive-detailedicon-bg: var(--modes-color-custom-frozen);
   --container-color-interactive-droptarget-bg-default: var(--modes-color-status-info-default); /* draggable drop target background color */
   --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
   --container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
@@ -52,7 +52,7 @@
   --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
   --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
   --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
-  --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
+  --container-color-blockquote-border: var(--modes-color-interactive-primary-frozen-default);
   --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-active);
   --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* Used for accordion hover backgrounds  */
   --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-active);
@@ -151,15 +151,15 @@
   --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
   --container-radius-profileselector: var(--global-radius-container-m); /* Profile selector list container. */
   --container-radius-texteditor: var(--global-radius-container-m); /* Text editor (footer bottom corners)  */
-  --container-radius-card-moderate: var(--global-radius-container-l); /* Card (less rounded) */
-  --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
-  --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
-  --container-radius-tile-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
-  --container-radius-tile-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
-  --container-radius-tile-sweeping: var(--global-radius-container-xxl); /* Tile largest roundedness  */
-  --container-radius-tileselect-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
-  --container-radius-tileselect-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
-  --container-radius-tileselect-sweeping: var(--global-radius-container-xxl);
+  --container-radius-card-moderate: var(--global-radius-container-m); /* Card (less rounded) */
+  --container-radius-card-curved: var(--global-radius-container-l); /* Card (more rounded) */
+  --container-radius-card-sweeping: var(--global-radius-container-xl); /* Card largest rounded type */
+  --container-radius-tile-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
+  --container-radius-tile-curved: var(--global-radius-container-l); /* Tile (more rounded) */
+  --container-radius-tile-sweeping: var(--global-radius-container-xl); /* Tile largest roundedness  */
+  --container-radius-tileselect-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
+  --container-radius-tileselect-curved: var(--global-radius-container-l); /* Tile (more rounded) */
+  --container-radius-tileselect-sweeping: var(--global-radius-container-xl);
   --container-space-none: var(--global-space-none);
   --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
   --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */

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

@@ -9,12 +9,16 @@
   --form-color-switch-border-active: transparent;
   --form-color-switch-border-activedisabled: transparent;
   --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
-  --form-radius-colorpicker: var(--global-radius-circle); /* Color picker (swatch container),   */
   --form-radius-radio: var(--global-radius-circle); /* Radio button */
   --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
   --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
   --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected),  */
+  --form-color-calendar-bg-duration: var(--modes-color-interactive-inactive-frozen-default-alt);
   --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
+  --form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
+  --form-color-switch-bg-active: var(--modes-color-interactive-monochrome-frozen-default);
+  --form-color-switch-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
+  --form-color-switch-fg-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
   --form-color-validation-border-error: var(--modes-color-status-negative-default);
   --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
   --form-color-validation-bar-warning: var(--modes-color-status-caution-default); /* warning bar to left of inputs */
@@ -35,9 +39,8 @@
   --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);
-  --form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-active);
+  --form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
   --form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
-  --form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-active);
   --form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-with-hover);
   --form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
@@ -47,7 +50,6 @@
   --form-color-typical-icon-hover: var(--modes-color-interactive-data-entry-with-hover);
   --form-color-typical-text-hover: var(--modes-color-interactive-data-entry-with-hover); /* text hover state when dragging a file over file input */
   --form-color-typical-text-read-only: var(--modes-color-generic-content-harsh);
-  --form-color-switch-bg-active: var(--modes-color-interactive-monochrome-active);
   --form-color-switch-bg-enabled: var(--modes-color-interactive-data-entry-default); /* for switch */
   --form-space-none: var(--global-space-none);
   --form-space-calendar-x-m: var(--global-space-macro-m);
@@ -220,19 +222,18 @@
   --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
   --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
   --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
-  --form-color-calendar-bg-duration: var(--modes-color-interactive-data-entry-hover-alt);
+  --form-color-calendar-border-duration: var(--form-color-calendar-bg-active);
   --form-color-calendar-text-active: var(--modes-color-interactive-monochrome-with-active);
   --form-color-calendar-text-alt: var(--modes-color-interactive-data-entry-content-alt); /* Days of the week subheaders */
   --form-color-calendar-text-disabled: var(--modes-color-interactive-inactive-content);
   --form-color-calendar-text-duration: var(--modes-color-interactive-data-entry-content);
   --form-color-calendar-text-enabled: var(--modes-color-interactive-data-entry-content);
   --form-color-calendar-text-alt-enabled: var(--modes-color-interactive-data-entry-content-alt);
-  --form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER  */
   --form-color-dropdown-label-active: var(--modes-color-interactive-monochrome-with-active);
   --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-alt3); /* Option subtext. */
+  --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);
@@ -252,19 +253,18 @@
   --form-color-typical-text-disabled: var(--modes-color-interactive-inactive-content);
   --form-color-typical-text-enabled: var(--modes-color-interactive-data-entry-content); /* Dropdown text (subtle dropdown). */
   --form-color-switch-bg-disabled: var(--modes-color-interactive-inactive-default-alt); /* for switch */
-  --form-color-switch-border-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
   --form-color-switch-fg-active: var(--modes-color-interactive-monochrome-with-active);
   --form-color-switch-fg-activedisabled: var(--modes-color-interactive-inactive-content-alt);
-  --form-color-switch-fg-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
   --form-color-switch-label-active: var(--modes-color-interactive-data-entry-content);
   --form-color-switch-label-enabled: var(--modes-color-interactive-data-entry-content-alt);
   --form-color-switch-icon-enabled: var(--modes-color-interactive-data-entry-content-alt);
-  --form-radius-checkbox: var(--global-radius-interactive-s); /* S and M checkbox */
+  --form-radius-checkbox: var(--global-radius-interactive-xs); /* S and M checkbox */
   --form-radius-texteditorfooter: var(--global-radius-interactive-s); /* AI text editor footer */
-  --form-radius-fileupload: var(--global-radius-container-m); /* File input (file uploads) */
-  --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
-  --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
-  --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
+  --form-radius-colorpicker: var(--global-radius-interactive-l); /* Color picker (swatch container) */
+  --form-radius-fileupload: var(--global-radius-interactive-s); /* File input (file uploads) */
+  --form-radius-fileselector: var(--global-radius-interactive-s); /* File preview (file selector asset) */
+  --form-radius-input: var(--global-radius-interactive-s); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
+  --form-radius-validationbar: var(--global-radius-interactive-xxs); /* Validation bar */
   --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
   --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
   --form-radius-texteditor-a-icontainer: var(--global-radius-interactive-s); /* container for draft with copilot form fields */
@@ -296,8 +296,8 @@
   --form-size-dropdown-item-l: var(--popover-size-item-l); /* REF POPOVER. Menu item min height. */
   --form-size-search-input-minwidth: var(--container-size-responsive-xl); /* minimum width for search input container */
   --form-size-search-input-maxwidth: calc(var(--container-size-responsive-xxl) + var(--container-size-responsive-xxs)); /* maximum width for search input container */
+  --form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER  */
   --form-color-typical-border-alt: var(--modes-color-interactive-inactive-default);
-  --form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-with-default);
   --form-color-typical-border-disabled: var(--modes-color-interactive-inactive-default);
   --form-color-typical-border-read-only: var(--modes-color-interactive-inactive-default);
   --form-color-switch-bg-activedisabled: var(--modes-color-interactive-inactive-default);

package/css/frozenproduct/large/components/link.css

@@ -22,7 +22,7 @@
   --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
   --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
   --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
-  --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt2);
+  --link-color-typical-label-default: var(--modes-color-interactive-primary-frozen-default-alt);
   --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt2);
   --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
   --link-color-subtle-inverse-label-default: var(--modes-color-interactive-monochrome-inverse-default);
@@ -34,6 +34,6 @@
   --link-space-integral-xg-l: var(--global-space-micro-l); /* Space between icon and link text. */
   --link-space-skiplink-x: var(--global-space-macro-m); /* Skiplink container */
   --link-space-skiplink-y: var(--global-space-micro-xxl); /* Skiplink container */
-  --link-color-typical-label-hover: var(--modes-color-interactive-primary-hover-alt2);
+  --link-color-typical-label-hover: var(--modes-color-interactive-primary-frozen-hover-alt);
   --link-color-typical-inverse-label-hover: var(--modes-color-interactive-primary-inverse-hover-alt2);
 }

package/css/frozenproduct/large/components/nav.css

@@ -8,6 +8,7 @@
   --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
   --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
   --nav-color-item-bg-enabled: var(--modes-color-none);
+  --nav-color-item-bg-hover: var(--modes-color-interactive-primary-frozen-nav-hover);
   --nav-color-leftnav-container-bg-default: var(--modes-color-generic-bg-nought); /* bg of horizontal nav variant that launches the left nav */
   --nav-color-leftnav-item-bg-active: var(--modes-color-interactive-nav-active);
   --nav-color-leftnav-item-bg-enabled: var(--modes-color-none);
@@ -34,9 +35,7 @@
   --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
   --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
   --nav-color-item-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt);
-  --nav-color-item-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
   --nav-color-item-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
-  --nav-color-item-label-hover: var(--modes-color-interactive-monochrome-with-hover);
   --nav-color-menu-bg-default: var(--modes-color-generic-bg-faint); /* menu (level 1) nav bg */
   --nav-color-menu-bg-alt: var(--modes-color-generic-bg-delicate); /* level 2 nav bg */
   --nav-color-menu-bg-alt2: var(--modes-color-generic-bg-soft); /* level 3 nav bg */
@@ -63,7 +62,7 @@
   --nav-color-topnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
   --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
   --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape),  */
-  --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
+  --nav-radius-menumodal: var(--global-radius-interactive-m); /* Menu on mobile */
   --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
   --nav-radius-modal-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
   --nav-radius-topnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
@@ -156,4 +155,5 @@
   --nav-space-topnav-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
   --nav-space-topnav-parentitem-xg-m: var(--global-space-micro-s); /* gap within horizontal parent items */
   --nav-space-topnav-parentitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked parent items */
+  --nav-color-item-label-hover: var(--modes-color-interactive-primary-frozen-nav-label-hover);
 }

package/css/frozenproduct/large/components/popover.css

@@ -18,11 +18,7 @@
   --popover-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
   --popover-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
   --popover-boxshadow-container: var(--global-boxshadow-container-near); /* REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)  */
-  --popover-color-bg-active: var(--modes-color-interactive-monochrome-active); /* previously action minor 850 */
-  --popover-color-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM.  */
-  --popover-color-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM.  */
-  --popover-color-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
-  --popover-color-label-hover: var(--modes-color-interactive-monochrome-with-hover);
+  --popover-color-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
   --popover-color-submenu-bg-default: var(--modes-color-generic-bg-faint); /* popover small screen submenu container bg */
   --popover-size-icon-m: var(--global-size-icon-m);
   --popover-size-item-s: var(--global-size-macro-s); /* REF'D IN FORM. Menu item min height. */
@@ -51,9 +47,13 @@
   --popover-space-submenu-x-s: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
   --popover-space-submenu-x-m: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
   --popover-space-submenu-x-l: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
+  --popover-color-bg-activealt: var(--modes-color-interactive-monochrome-frozen-hover-alt);
+  --popover-color-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
   --popover-color-label-active: var(--modes-color-interactive-monochrome-with-active);
+  --popover-color-label-activealt: var(--modes-color-interactive-monochrome-frozen-with-hover);
   --popover-color-label-disabled: var(--modes-color-interactive-inactive-content);
-  --popover-color-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
+  --popover-color-label-hover: var(--modes-color-interactive-monochrome-default);
+  --popover-color-label-enabled: var(--modes-color-interactive-monochrome-default);
   --popover-size-menu-minwidth-s: calc(var(--container-size-responsive-m) / 2); /* minwidth of small size popover menu container */
   --popover-size-menu-minwidth-m: var(--container-size-responsive-xs); /* minwidth of medium size popover menu container */
   --popover-size-menu-minwidth-l: var(--container-size-responsive-s); /* minwidth of large size popover menu container */

package/css/frozenproduct/large/components/progress.css

@@ -20,12 +20,14 @@
   --progress-radius-stepindicator: var(--global-radius-circle); /* step indicator circles */
   --progress-radius-carouselselector: var(--global-radius-circle); /* Carousel (selector dot) */
   --progress-radius-skeleton-circle: var(--global-radius-circle); /* Used to represent circular elements such as profiles, badges etc */
+  --progress-color-bg-default: var(--modes-color-interactive-progress-frozen-bg-alt);
   --progress-color-fg-ai: var(--modes-color-interactive-ai-default); /* For progress ring in ai buttons */
   --progress-color-fg-alt: var(--modes-color-status-positive-default);
   --progress-color-fg-caution: var(--modes-color-status-caution-default);
   --progress-color-fg-error: var(--modes-color-status-negative-default);
   --progress-color-fg-info: var(--modes-color-status-info-default);
   --progress-color-datavis-fg-default: var(--modes-color-status-custom-teal-default);
+  --progress-color-loader-bg-default: var(--modes-color-interactive-progress-frozen-bg);
   --progress-color-loader-fg-error: var(--modes-color-status-negative-default);
   --progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
   --progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);
@@ -43,13 +45,12 @@
   --progress-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
   --progress-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
   --progress-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
-  --progress-color-bg-default: var(--modes-color-interactive-progress-bg);
+  --progress-color-border-default: var(--modes-color-generic-fg-frozen-soft);
   --progress-color-fg-alt2: var(--modes-color-generic-content-firm);
-  --progress-color-fg-default: var(--modes-color-interactive-monochrome-active);
+  --progress-color-fg-default: var(--modes-color-generic-fg-frozen-soft);
   --progress-color-label-alt: var(--modes-color-generic-content-firm);
   --progress-color-label-default: var(--modes-color-generic-content-harsh);
-  --progress-color-loader-bg-default: var(--modes-color-interactive-progress-bg);
-  --progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-active); /* used for loader standard loader spinner */
+  --progress-color-loader-fg-default: var(--modes-color-interactive-primary-frozen-default); /* used for loader standard loader spinner */
   --progress-color-loader-inverse-bg-default: var(--modes-color-interactive-progress-bg-alt); /* used for inverse loader bgs */
   --progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-active);
   --progress-color-stepflow-bg-default: var(--modes-color-generic-fg-nought);
@@ -76,7 +77,6 @@
   --progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
   --progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */
   --progress-size-stepindicator-stepcircle-m: var(--global-size-macro-s); /* M size step indicator */
-  --progress-color-border-default: var(--modes-color-generic-fg-soft);
   --progress-color-loader-inverse-fg-default: var(--modes-color-interactive-monochrome-with-active); /* used on inverse loading spinner */
   --progress-color-stepflow-border-default: var(--modes-color-generic-fg-soft);
   --progress-color-stepindicator-border-default: var(--modes-color-generic-fg-soft);

package/css/frozenproduct/large/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/large/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. */