@sage/design-tokens 14.0.0 → 14.1.0

package/json/nested/product/small/light/mode.json

@@ -113,21 +113,21 @@
           "default": "linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)"
         },
         "danger": {
-          "active": "#882b34",
+          "active": "#8c2c35",
           "default": "#CD384B",
           "defaultAlt": "#b23342",
-          "hover": "#aa323f",
-          "hoverAlt": "#cd384b14",
-          "hoverAlt2": "#a3303d",
+          "hover": "#ac3240",
+          "hoverAlt": "#cd384b1a",
+          "hoverAlt2": "#9f303c",
           "withActive": "#FFFFFF",
           "withDefault": "#FFFFFF",
           "inverse": {
-            "active": "#f28486",
+            "active": "#f28083",
             "default": "#E13E53",
             "defaultAlt": "#e85b66",
-            "hover": "#eb646c",
-            "hoverAlt": "#e13e5314",
-            "hoverAlt2": "#ec6a71",
+            "hover": "#ea626a",
+            "hoverAlt": "#e13e531a",
+            "hoverAlt2": "#ed6e74",
             "withActive": "#000000",
             "withDefault": "#000000"
           }
@@ -137,7 +137,7 @@
           "withActive": "#000000",
           "withActiveAlt": "#FFFFFF",
           "withHover": "#000000",
-          "hoverAlt": "#e8e8e8",
+          "hoverAlt": "#e2e2e2",
           "withDefault": "#777",
           "defaultAlt": "#f3f3f3",
           "content": "#000000f2",
@@ -177,34 +177,34 @@
         },
         "monochrome": {
           "active": "#000000",
-          "activeAlt": "#00000029",
+          "activeAlt": "#00000026",
           "default": "#000000e6",
           "defaultAlt": "#000000ab",
           "defaultAlt2": "#0000006b",
-          "hoverAlt": "#00000014",
-          "hover": "#00000029",
+          "hoverAlt": "#0000001a",
+          "hover": "#00000026",
           "withActive": "#FFFFFF",
           "withActiveAlt": "#000000",
           "withDefault": "#FFFFFF",
           "withHover": "#000000",
           "frozen": {
             "active": "#223743",
-            "activeAlt": "#22374329",
+            "activeAlt": "#22374326",
             "default": "#335B70",
             "defaultAlt": "#476a7d",
-            "hoverAlt": "#22374314",
+            "hoverAlt": "#2237431a",
             "withActive": "#FFFFFF",
             "withHover": "#223743",
             "withHoverAlt": "#FFFFFF"
           },
           "inverse": {
             "active": "#FFFFFF",
-            "activeAlt": "#ffffff29",
+            "activeAlt": "#ffffff26",
             "default": "#ffffffe6",
             "defaultAlt": "#ffffffab",
             "defaultAlt2": "#ffffff6b",
-            "hoverAlt": "#ffffff14",
-            "hover": "#ffffff29",
+            "hoverAlt": "#ffffff1a",
+            "hover": "#ffffff26",
             "withActive": "#000000",
             "withActiveAlt": "#FFFFFF",
             "withDefault": "#000000",
@@ -223,29 +223,29 @@
           "active": "#00000029",
           "default": "#FFFFFF",
           "defaultAlt": "#f3f3f3",
-          "hover": "#00000014",
+          "hover": "#0000001a",
           "withActive": "#000000",
           "withDefault": "#000000f2",
           "withHover": "#000000"
         },
         "primary": {
-          "active": "#14571a",
-          "activeAlt": "#00811f52",
+          "active": "#13591a",
+          "activeAlt": "#00811f4d",
           "default": "#00811F",
           "defaultAlt": "#00811fcc",
-          "defaultAlt2": "#00811f80",
-          "defaultAlt3": "#0c711d",
-          "hover": "#0e6b1d",
-          "hoverAlt": "#00811f14",
-          "hoverAlt2": "#125e1b",
+          "defaultAlt2": "#0c711d",
+          "defaultAlt3": "#00811f08",
+          "hover": "#0e6d1d",
+          "hoverAlt": "#00811f1a",
+          "hoverAlt2": "#12601b",
           "withActive": "#FFFFFF",
           "withDefault": "#FFFFFF",
           "withHover": "#FFFFFF",
           "frozen": {
-            "active": "#135631",
+            "active": "#135932",
             "default": "#008046",
             "defaultAlt": "#0b703e",
-            "hover": "#0e6b3b",
+            "hover": "#0d6c3c",
             "hoverAlt": "#106237",
             "nav": {
               "hover": "#008046",
@@ -256,15 +256,15 @@
             }
           },
           "inverse": {
-            "active": "#81e57d",
-            "activeAlt": "#00d63952",
+            "active": "#7ce47a",
+            "activeAlt": "#00d6394d",
             "default": "#00D639",
             "defaultAlt": "#00d639cc",
-            "defaultAlt2": "#00d63980",
-            "defaultAlt3": "#4cdc55",
-            "hover": "#58de5d",
-            "hoverAlt": "#00d63914",
-            "hoverAlt2": "#73e372",
+            "defaultAlt2": "#4cdc55",
+            "defaultAlt3": "#00d63908",
+            "hover": "#55dd5b",
+            "hoverAlt": "#00d6391a",
+            "hoverAlt2": "#71e270",
             "withActive": "#000000",
             "withDefault": "#000000",
             "withHover": "#000000"
@@ -286,24 +286,25 @@
           "default-horizontal": "linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%)",
           "default-vertical": "linear-gradient(180deg, #13A038 0%, #149197 40%, #A87CFB 90%)"
         },
-        "generic": {
-          "default": "#007c7b"
+        "callout": {
+          "defaultAlt": "#e5fae2",
+          "hoverAlt": "#d8ecd5"
         },
         "caution": {
           "default": "#D64309",
           "defaultAlt": "#ffede5",
-          "hover": "#b13a0d",
-          "hoverAlt": "#fdd3c0",
+          "hover": "#b33b0d",
+          "hoverAlt": "#fed5c3",
           "text": "#bf3e0c",
           "frozenglobal": {
             "default": "#ff8629",
-            "hover": "#ff9a4e"
+            "hover": "#ff994c"
           },
           "inverse": {
             "default": "#E04500",
             "defaultAlt": "#251206",
-            "hover": "#eb6732",
-            "hoverAlt": "#3f1b0b",
+            "hover": "#eb6530",
+            "hoverAlt": "#3e1a0b",
             "text": "#e75b23"
           }
         },
@@ -320,6 +321,83 @@
             "withHoverAlt": "#FFFFFF"
           }
         },
+        "custom": {
+          "blue": {
+            "default": "#0071C3",
+            "defaultAlt": "#ebf0f9",
+            "hover": "#135fa3",
+            "hoverAlt": "#ced9ed"
+          },
+          "teal": {
+            "default": "#007C7B",
+            "defaultAlt": "#e9f1f1",
+            "hover": "#0e6968",
+            "hoverAlt": "#c4dde0"
+          },
+          "green": {
+            "default": "#00811F",
+            "defaultAlt": "#e9f2e8",
+            "hover": "#0e6d1d",
+            "hoverAlt": "#c4decf"
+          },
+          "lime": {
+            "default": "#637700",
+            "defaultAlt": "#eff1e6",
+            "hover": "#546408",
+            "hoverAlt": "#cdddc9"
+          },
+          "orange": {
+            "default": "#C54300",
+            "defaultAlt": "#feece5",
+            "hover": "#a53a06",
+            "hoverAlt": "#f2d0ce"
+          },
+          "red": {
+            "default": "#DC004E",
+            "defaultAlt": "#ffebec",
+            "hover": "#b81242",
+            "hoverAlt": "#f1cfd9"
+          },
+          "pink": {
+            "default": "#C8269A",
+            "defaultAlt": "#fcecf5",
+            "hover": "#a82581",
+            "hoverAlt": "#ead2e5"
+          },
+          "purple": {
+            "default": "#8F4CD7",
+            "defaultAlt": "#f5edfc",
+            "hover": "#7941b4",
+            "hoverAlt": "#ded4ee"
+          },
+          "gray": {
+            "default": "#6F6F6F",
+            "defaultAlt": "#f0f0f0",
+            "hover": "#5e5e5e",
+            "hoverAlt": "#d3d9e5"
+          },
+          "slate": {
+            "default": "#527386",
+            "defaultAlt": "#edf0f2",
+            "hover": "#466171",
+            "hoverAlt": "#cbdae6"
+          }
+        },
+        "generic": {
+          "default": "#F0F"
+        },
+        "important": {
+          "default": "#8F4CD7",
+          "defaultAlt": "#f5edfc",
+          "hover": "#7941b4",
+          "hoverAlt": "#ded4ee",
+          "inverse": {
+            "default": "#985FDC",
+            "defaultAlt": "#1b1422",
+            "hover": "#a977e2",
+            "hoverAlt": "#282039"
+          }
+        },
         "inactive": {
           "default": "#a6a6a6",
           "withDefault": "#000000ab",
@@ -328,44 +406,41 @@
             "withDefault": "#ffffffab"
           }
         },
-        "important": {
-          "default": "#8F4CD7"
-        },
         "info": {
           "default": "#0060A7",
           "defaultAlt": "#eaeef6",
-          "hover": "#10508a",
-          "hoverAlt": "#cbd6e9",
+          "hover": "#10518c",
+          "hoverAlt": "#cdd7ea",
           "frozenglobal": {
             "default": "#65a9ff",
-            "hover": "#84b6ff"
+            "hover": "#82b5ff"
           },
           "inverse": {
             "default": "#007ED9",
             "defaultAlt": "#111722",
-            "hover": "#5291e0",
-            "hoverAlt": "#17253b"
+            "hover": "#4f90df",
+            "hoverAlt": "#17253a"
           }
         },
         "negative": {
           "default": "#CD384B",
           "defaultAlt": "#fdeceb",
-          "hover": "#aa323f",
-          "hoverAlt": "#f9d1cf",
+          "hover": "#ac3240",
+          "hoverAlt": "#f9d3d1",
           "text": "#CD384B",
           "inverse": {
             "default": "#E13E53",
             "defaultAlt": "#241212",
-            "hover": "#eb646c",
-            "hoverAlt": "#3f1a1c",
+            "hover": "#ea626a",
+            "hoverAlt": "#3d1a1c",
             "text": "#E13E53"
           }
         },
         "neutral": {
           "default": "#656565",
           "defaultAlt": "#efefef",
-          "hover": "#555",
-          "hoverAlt": "#d8d8d8",
+          "hover": "#565656",
+          "hoverAlt": "#d9d9d9",
           "frozen": {
             "default": "#335B70",
             "defaultAlt": "#eaedf0",
@@ -375,55 +450,36 @@
           "inverse": {
             "default": "#7C7C7C",
             "defaultAlt": "#171717",
-            "hover": "#909090",
-            "hoverAlt": "#252525"
+            "hover": "#8e8e8e",
+            "hoverAlt": "#242424"
           }
         },
         "positive": {
           "default": "#00811F",
           "defaultAlt": "#e9f2e8",
-          "hover": "#0e6b1d",
-          "hoverAlt": "#c9e0c7",
+          "hover": "#0e6d1d",
+          "hoverAlt": "#cbe1c9",
           "inverse": {
             "default": "#009023",
             "defaultAlt": "#0e1a0b",
-            "hover": "#2b8b32",
-            "hoverAlt": "#132b12"
+            "hover": "#328e37",
+            "hoverAlt": "#132912"
           }
         },
-        "callout": {
-          "defaultAlt": "#e5fae2",
-          "hoverAlt": "#d8ecd5"
-        },
         "reviews": {
           "default": "#00811F",
           "defaultAlt": "linear-gradient(90deg, #00811F 0%, #00811F 50%, #d1d1d1 50%, #d1d1d1 100%)",
-          "hover": "#0e6b1d",
+          "hover": "#0e6d1d",
           "frozen": {
             "default": "#008046",
             "defaultAlt": "linear-gradient(90deg, #008046 0%, #008046 50%, #d1d1d1 50%, #d1d1d1 100%)",
-            "hover": "#0e6b3b"
+            "hover": "#0d6c3c"
           }
         }
       },
       "modifier": {
         "contrastLess": "#FFFFFF",
         "contrastMore": "#000000"
-      },
-      "modifiers": {
-        "button": {
-          "active": "0.32",
-          "activeAlt": "0.16",
-          "hover": "0.16",
-          "hoverAlt": "0.08"
-        },
-        "input": {
-          "disabledBg": "0.04",
-          "disabledFg": "0.30"
-        },
-        "shadow": {
-          "standard": "0.5"
-        }
       }
     }
   }

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "14.0.0",
+  "version": "14.1.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/frozenproduct/large/components/button.scss

@@ -40,7 +40,6 @@ $button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive
 $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
 $button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
 $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
-$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
 $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
 $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -72,7 +71,6 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
 $button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
 $button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
 $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -81,25 +79,18 @@ $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger
 $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
 $button-color-typical-primary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default;
 $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-bg-enabled: $button-color-none;
 $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
 $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
 $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-with-active-alt;
-$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-with-hover;
+$button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
 $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
-$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
-$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-with-hover;
 $button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
-$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
-$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
-$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-size-split: $global-size-micro-xxs; // Split button (divider width)
 $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
 $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -218,6 +209,7 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
 $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
 $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
 $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
 $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
 $button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
@@ -226,11 +218,16 @@ $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-
 $button-color-typical-primary-inverse-bg-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-primary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover;
 $button-color-typical-secondary-bg-active: $modes-color-interactive-primary-active-alt;
+$button-color-typical-secondary-bg-enabled: $modes-color-interactive-primary-default-alt3;
+$button-color-typical-secondary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-secondary-border-active: $modes-color-interactive-primary-active;
 $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-secondary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
+$button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
+$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
 $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
 $button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
@@ -238,32 +235,40 @@ $button-color-typical-secondary-inverse-label-active: $modes-color-interactive-m
 $button-color-typical-secondary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-secondary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
 $button-color-typical-tertiary-bg-active: $modes-color-interactive-primary-active-alt;
+$button-color-typical-tertiary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-tertiary-border-active: $modes-color-interactive-primary-active;
-$button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt2;
+$button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt;
 $button-color-typical-tertiary-border-hover: $modes-color-interactive-primary-hover;
 $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
+$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
 $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
-$button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt2;
+$button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
 $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
 $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
-$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
 $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
 $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
 $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
 $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
+$button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
 $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-with-active;
 $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
+$button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
 $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
+$button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
+$button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
 $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
 $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
+$button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
 $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi),  Button toggle M (parent container)
 $button-radius-m: $global-radius-interactive-xl; // Buttons  M (typical and destructive, and inc bar, split and multi),  Button toggle L (parent container), Button toggle M (parent container)
 $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -298,12 +303,9 @@ $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
 $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
-$button-color-typical-tertiary-bg-hover: $modes-color-interactive-primary-hover-alt;
 $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
-$button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
+$button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
 $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
 $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
 $button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;

package/scss/frozenproduct/large/components/container.scss

@@ -6,28 +6,23 @@
 // Do not edit directly, this file was auto-generated.
 
 $container-size-carousel-mediaslide-minheight: 300; // max height for media visual
+$container-opacity-carousel-hidden: 0.3; // opacity applied to next and previous carousel slides
 $container-opacity-dialog-dimmer: 0.4; // dimmer opacity value
 $container-opacity-drag-ghost: 0.5; // drag ghost state opacity value
 $container-radius-none: $global-radius-none; // Card select (inner adjacent corners), Subscription tile footer top corners
 $container-radius-scrollbar: $global-radius-circle; // Scrollbar
 $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquote bar
-$container-opacity-carousel-hidden: $modes-color-modifiers-input-disabled-fg; // opacity applied to next and previous carousel slides
 $container-color-ai-dialog-borderhorizontal: $modes-color-generic-fg-ai-default; // top border for AI dialog component
 $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI nudge message component
 $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
 $container-color-ai-tile-bordervertical: $modes-color-status-ai-default-vertical; // left border for AI tiles and bubbles.
 $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //  
-$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
 $container-color-interactive-border-activated: $modes-color-status-positive-default;
 $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color 
 $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
-$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
-$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
-$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
 $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //  
 $container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
 $container-color-standard-bg-default: $modes-color-generic-bg-nought;
-$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
 $container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
 $container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
 $container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
@@ -54,16 +49,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
 $container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
 $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
 $container-color-blockquote-border: $modes-color-interactive-primary-default;
+$container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
 $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds 
-$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
-$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
-$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
+$container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
+$container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
+$container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
 $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
 $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
-$container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
 $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
 $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
 $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color 
+$container-color-standard-border-active: $modes-color-interactive-monochrome-active;
 $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
 $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
 $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc 
@@ -80,11 +76,16 @@ $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (h
 $container-boxshadow-card-drag: $global-boxshadow-interactive-drag; // Card (drag state)
 $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-default-alt;
 $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview. 
+$container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
 $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
 $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
+$container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
+$container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
+$container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
 $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
 $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
 $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
+$container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
 $container-color-scrollbar-fg-default: $modes-color-generic-fg-moderate;
 $container-color-standard-border-alt: $modes-color-generic-fg-soft;
 $container-color-standard-border-default: $modes-color-generic-fg-faint;
@@ -287,6 +288,5 @@ $container-borderwidth-tileselect-inactive: $global-borderwidth-xs; // Subscript
 $container-borderwidth-tileselect-selected: $global-borderwidth-s; // Tile select (selected tile)
 $container-borderwidth-tileselect-unavailable: $global-borderwidth-xs; // Subscription tile (unavailable product)
 $container-borderwidth-tileselect-enabled: $global-borderwidth-xs; // Tile select (enabled tile)
-$container-color-interactive-borderalt-hover: $container-color-interactive-border-alt; // For hover border on Link preview.
 $container-size-drawer-minwidth: $container-size-responsive-xl; // min-width for drawer component
 $container-size-drawer-maxwidth: $container-size-responsive-xxxxl; // max-width for drawer component