@sage/design-tokens 13.1.0 → 14.0.0

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

@@ -117,10 +117,20 @@
           "default": "#CD384B",
           "defaultAlt": "#b23342",
           "hover": "#aa323f",
-          "hoverAlt": "#f9d1cf",
+          "hoverAlt": "#cd384b14",
           "hoverAlt2": "#a3303d",
           "withActive": "#FFFFFF",
-          "withDefault": "#FFFFFF"
+          "withDefault": "#FFFFFF",
+          "inverse": {
+            "active": "#f28486",
+            "default": "#E13E53",
+            "defaultAlt": "#e85b66",
+            "hover": "#eb646c",
+            "hoverAlt": "#e13e5314",
+            "hoverAlt2": "#ec6a71",
+            "withActive": "#000000",
+            "withDefault": "#000000"
+          }
         },
         "dataEntry": {
           "default": "#FFFFFF",
@@ -137,10 +147,16 @@
           }
         },
         "focus": {
+          "default": "#000000",
+          "content": "#000000",
           "withDefault": "#FFB500",
           "withDefaultAlt": "#ffd27e",
-          "default": "#000000",
-          "content": "#000000"
+          "inverse": {
+            "default": "#FFB500",
+            "content": "#FFFFFF",
+            "withDefault": "#000000",
+            "withDefaultAlt": "#926916"
+          }
         },
         "inactive": {
           "default": "#a6a6a6",
@@ -155,7 +171,8 @@
           },
           "inverse": {
             "default": "#4b4b4b",
-            "content": "#ffffff6b"
+            "content": "#ffffff6b",
+            "contentAlt": "#000000"
           }
         },
         "monochrome": {

package/json/nested/product/small/dark/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#E13E53",
         "bg-alt": "#007ED9",
         "label-default": "#000000",
-        "label-alt": "#000000"
+        "label-alt": "#000000",
+        "inverse": {
+          "border-default": "#FFFFFF",
+          "bg-default": "#CD384B",
+          "bg-alt": "#0060A7",
+          "label-default": "#FFFFFF",
+          "label-alt": "#FFFFFF"
+        }
       }
     },
     "size": {

package/json/nested/product/small/dark/components/button.json

@@ -260,7 +260,7 @@
           "label-hover": "#000000"
         },
         "secondary": {
-          "bg-hover": "#3f1a1c",
+          "bg-hover": "#e13e5314",
           "border-disabled": "#4b4b4b",
           "border-enabled": "#E13E53",
           "border-hover": "#eb646c",
@@ -279,7 +279,18 @@
           "label-active": "#000000",
           "label-disabled": "#000000",
           "label-enabled": "#000000",
-          "label-hover": "#000000"
+          "label-hover": "#000000",
+          "inverse": {
+            "bg-active": "#14571a",
+            "bg-default": "#FFFFFF",
+            "bg-disabled": "#a6a6a6",
+            "bg-enabled": "#00811F",
+            "bg-hover": "#0e6b1d",
+            "label-active": "#FFFFFF",
+            "label-disabled": "#FFFFFF",
+            "label-enabled": "#FFFFFF",
+            "label-hover": "#FFFFFF"
+          }
         },
         "secondary": {
           "bg-active": "#00d63952",

package/json/nested/product/small/dark/components/focus.json

@@ -4,7 +4,13 @@
       "bg": "#926916",
       "borderalt": "#FFB500",
       "border": "#000000",
-      "label": "#FFFFFF"
+      "label": "#FFFFFF",
+      "inverse": {
+        "bg": "#ffd27e",
+        "borderalt": "#000000",
+        "border": "#FFB500",
+        "label": "#000000"
+      }
     },
     "size": {
       "underline": 4

package/json/nested/product/small/dark/components/link.json

@@ -3,7 +3,11 @@
     "color": {
       "destructive": {
         "label-default": "#e85b66",
-        "label-hover": "#ec6a71"
+        "label-hover": "#ec6a71",
+        "inverse": {
+          "label-default": "#b23342",
+          "label-hover": "#a3303d"
+        }
       },
       "typical": {
         "label-default": "#4cdc55",

package/json/nested/product/small/dark/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#00D639",
         "bg-alt": "#FFFFFF"
       },
-      "trust": {
-        "bg-default": "#009023",
-        "outline": "#FFFFFF"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#FFFFFF"

package/json/nested/product/small/dark/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/product/small/dark/components/table.json

@@ -126,6 +126,7 @@
     },
     "space": {
       "none": 0,
+      "yg": 4,
       "row": {
         "x": {
           "XS": 8,

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

@@ -117,10 +117,20 @@
           "default": "#E13E53",
           "defaultAlt": "#e85b66",
           "hover": "#eb646c",
-          "hoverAlt": "#3f1a1c",
+          "hoverAlt": "#e13e5314",
           "hoverAlt2": "#ec6a71",
           "withActive": "#000000",
-          "withDefault": "#000000"
+          "withDefault": "#000000",
+          "inverse": {
+            "active": "#882b34",
+            "default": "#CD384B",
+            "defaultAlt": "#b23342",
+            "hover": "#aa323f",
+            "hoverAlt": "#cd384b14",
+            "hoverAlt2": "#a3303d",
+            "withActive": "#FFFFFF",
+            "withDefault": "#FFFFFF"
+          }
         },
         "dataEntry": {
           "default": "#000000",
@@ -137,10 +147,16 @@
           }
         },
         "focus": {
-          "withDefault": "#000000",
+          "default": "#FFB500",
           "content": "#FFFFFF",
+          "withDefault": "#000000",
           "withDefaultAlt": "#926916",
-          "default": "#FFB500"
+          "inverse": {
+            "default": "#000000",
+            "content": "#000000",
+            "withDefault": "#FFB500",
+            "withDefaultAlt": "#ffd27e"
+          }
         },
         "inactive": {
           "default": "#4b4b4b",
@@ -155,7 +171,8 @@
           },
           "inverse": {
             "default": "#a6a6a6",
-            "content": "#0000006b"
+            "content": "#0000006b",
+            "contentAlt": "#FFFFFF"
           }
         },
         "monochrome": {

package/json/nested/product/small/light/components/badge.json

@@ -6,7 +6,14 @@
         "bg-default": "#CD384B",
         "bg-alt": "#0060A7",
         "label-default": "#FFFFFF",
-        "label-alt": "#FFFFFF"
+        "label-alt": "#FFFFFF",
+        "inverse": {
+          "border-default": "#000000",
+          "bg-default": "#E13E53",
+          "bg-alt": "#007ED9",
+          "label-default": "#000000",
+          "label-alt": "#000000"
+        }
       }
     },
     "size": {

package/json/nested/product/small/light/components/button.json

@@ -260,7 +260,7 @@
           "label-hover": "#FFFFFF"
         },
         "secondary": {
-          "bg-hover": "#f9d1cf",
+          "bg-hover": "#cd384b14",
           "border-disabled": "#a6a6a6",
           "border-enabled": "#CD384B",
           "border-hover": "#aa323f",
@@ -279,7 +279,18 @@
           "label-active": "#FFFFFF",
           "label-disabled": "#FFFFFF",
           "label-enabled": "#FFFFFF",
-          "label-hover": "#FFFFFF"
+          "label-hover": "#FFFFFF",
+          "inverse": {
+            "bg-active": "#81e57d",
+            "bg-default": "#000000",
+            "bg-disabled": "#4b4b4b",
+            "bg-enabled": "#00D639",
+            "bg-hover": "#58de5d",
+            "label-active": "#000000",
+            "label-disabled": "#000000",
+            "label-enabled": "#000000",
+            "label-hover": "#000000"
+          }
         },
         "secondary": {
           "bg-active": "#00811f52",

package/json/nested/product/small/light/components/focus.json

@@ -4,7 +4,13 @@
       "bg": "#ffd27e",
       "borderalt": "#000000",
       "border": "#FFB500",
-      "label": "#000000"
+      "label": "#000000",
+      "inverse": {
+        "bg": "#926916",
+        "borderalt": "#FFB500",
+        "border": "#000000",
+        "label": "#FFFFFF"
+      }
     },
     "size": {
       "underline": 4

package/json/nested/product/small/light/components/link.json

@@ -3,7 +3,11 @@
     "color": {
       "destructive": {
         "label-default": "#b23342",
-        "label-hover": "#a3303d"
+        "label-hover": "#a3303d",
+        "inverse": {
+          "label-default": "#e85b66",
+          "label-hover": "#ec6a71"
+        }
       },
       "typical": {
         "label-default": "#0c711d",

package/json/nested/product/small/light/components/logo.json

@@ -5,10 +5,6 @@
         "bg-default": "#000000",
         "bg-alt": "#000000"
       },
-      "trust": {
-        "bg-default": "#00811F",
-        "outline": "#000000"
-      },
       "copilot": {
         "noBg": {
           "fg-default": "#000000"

package/json/nested/product/small/light/components/progress.json

@@ -22,7 +22,8 @@
           "M": 56
         }
       },
-      "ring": {
+      "spinner": {
+        "XS": 20,
         "S": 32,
         "M": 64,
         "L": 96

package/json/nested/product/small/light/components/table.json

@@ -126,6 +126,7 @@
     },
     "space": {
       "none": 0,
+      "yg": 4,
       "row": {
         "x": {
           "XS": 8,

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

@@ -117,10 +117,20 @@
           "default": "#CD384B",
           "defaultAlt": "#b23342",
           "hover": "#aa323f",
-          "hoverAlt": "#f9d1cf",
+          "hoverAlt": "#cd384b14",
           "hoverAlt2": "#a3303d",
           "withActive": "#FFFFFF",
-          "withDefault": "#FFFFFF"
+          "withDefault": "#FFFFFF",
+          "inverse": {
+            "active": "#f28486",
+            "default": "#E13E53",
+            "defaultAlt": "#e85b66",
+            "hover": "#eb646c",
+            "hoverAlt": "#e13e5314",
+            "hoverAlt2": "#ec6a71",
+            "withActive": "#000000",
+            "withDefault": "#000000"
+          }
         },
         "dataEntry": {
           "default": "#FFFFFF",
@@ -137,10 +147,16 @@
           }
         },
         "focus": {
+          "default": "#000000",
+          "content": "#000000",
           "withDefault": "#FFB500",
           "withDefaultAlt": "#ffd27e",
-          "default": "#000000",
-          "content": "#000000"
+          "inverse": {
+            "default": "#FFB500",
+            "content": "#FFFFFF",
+            "withDefault": "#000000",
+            "withDefaultAlt": "#926916"
+          }
         },
         "inactive": {
           "default": "#a6a6a6",
@@ -155,7 +171,8 @@
           },
           "inverse": {
             "default": "#4b4b4b",
-            "content": "#ffffff6b"
+            "content": "#ffffff6b",
+            "contentAlt": "#000000"
           }
         },
         "monochrome": {

package/package.json

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

package/scss/frozenproduct/large/components/badge.scss

@@ -8,11 +8,16 @@
 $badge-radius-badge: $global-radius-circle; // Badge
 $badge-color-notification-bg-default: $modes-color-status-negative-default; // Used in global nav notification badges
 $badge-color-notification-bg-alt: $modes-color-status-info-default;
+$badge-color-notification-inverse-border-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-bg-default: $modes-color-status-negative-inverse-default; // Used in global nav notification badges
+$badge-color-notification-inverse-bg-alt: $modes-color-status-info-inverse-default;
+$badge-color-notification-inverse-label-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-label-alt: $modes-color-generic-content-extreme;
 $badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
 $badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
-$badge-color-notification-border-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-alt: $modes-color-generic-fg-nought;
+$badge-color-notification-border-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-alt: $modes-color-generic-content-nought;
 $badge-size-micro-dot: $global-size-micro-m; // Micro dot badge size
 $badge-size-micro-numbered-min: $global-size-macro-xxs; // Micro dot badge size with numbering
 $badge-size-micro-numbered-max: $global-size-macro-s; // Micro dot badge size max width

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

@@ -21,8 +21,20 @@ $button-color-ai-border-active: $modes-color-interactive-ai-default;
 $button-color-ai-border-enabled: $modes-color-interactive-ai-default;
 $button-color-ai-border-hover: $modes-color-interactive-ai-default;
 $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
+$button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
+$button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
 $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
 $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
+$button-color-typical-primary-bg-default: $modes-color-interactive-primary-with-default; // For spacer in Split button
+$button-color-typical-primary-label-active: $modes-color-interactive-primary-with-active;
+$button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
+$button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
+$button-color-typical-primary-inverse-bg-default: $modes-color-interactive-primary-inverse-with-default; // For spacer in Split button
+$button-color-typical-primary-inverse-bg-disabled: $modes-color-interactive-inactive-inverse-default;
+$button-color-typical-primary-inverse-label-active: $modes-color-interactive-primary-inverse-with-active;
+$button-color-typical-primary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content-alt;
+$button-color-typical-primary-inverse-label-enabled: $modes-color-interactive-primary-inverse-with-default;
+$button-color-typical-primary-inverse-label-hover: $modes-color-interactive-primary-inverse-with-default;
 $button-color-typical-secondary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
 $button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
 $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
@@ -63,9 +75,11 @@ $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-a
 $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;
 $button-color-destructive-secondary-border-hover: $modes-color-interactive-danger-hover;
 $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
 $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;
@@ -205,17 +219,12 @@ $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in
 $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-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
-$button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
-$button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
 $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
 $button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
-$button-color-typical-primary-bg-default: $modes-color-interactive-primary-with-default; // For spacer in Split button
 $button-color-typical-primary-bg-hover: $modes-color-interactive-primary-hover;
-$button-color-typical-primary-label-active: $modes-color-interactive-primary-with-active;
 $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
-$button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
-$button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
+$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-border-active: $modes-color-interactive-primary-active;
 $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;

package/scss/frozenproduct/large/components/focus.scss

@@ -9,6 +9,10 @@ $focus-color-bg: $modes-color-interactive-focus-with-default-alt;
 $focus-color-borderalt: $modes-color-interactive-focus-default;
 $focus-color-border: $modes-color-interactive-focus-with-default;
 $focus-color-label: $modes-color-interactive-focus-content;
+$focus-color-inverse-bg: $modes-color-interactive-focus-inverse-with-default-alt;
+$focus-color-inverse-borderalt: $modes-color-interactive-focus-inverse-default;
+$focus-color-inverse-border: $modes-color-interactive-focus-inverse-with-default;
+$focus-color-inverse-label: $modes-color-interactive-focus-inverse-content;
 $focus-size-underline: $global-size-micro-xs; // focus black underline on links and skiplink
 $focus-borderwidth-secondary: $global-borderwidth-s; // Secondary focus (dropdown item)
 $focus-borderwidth-inner: $global-borderwidth-s; // Focus border (inner)

package/scss/frozenproduct/large/components/link.scss

@@ -19,10 +19,12 @@ $link-typography-adaptive-heading-s: $global-typography-adaptive-component-under
 $link-typography-adaptive-heading-m: $global-typography-adaptive-component-underlined-firm-m;
 $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
 $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
+$link-color-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
 $link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
 $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
 $link-boxshadow-skiplink: $global-boxshadow-container-near;
 $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
+$link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
 $link-color-typical-label-default: $modes-color-interactive-primary-default-alt3;
 $link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt3;
 $link-color-subtle-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;

package/scss/frozenproduct/large/components/logo.scss

@@ -8,8 +8,6 @@
 $logo-size-ai-m: 14px; // AI star
 $logo-color-sage-bg-default: $modes-color-brand-default; // sage logo
 $logo-color-sage-bg-alt: $modes-color-brand-default-alt;
-$logo-color-trust-bg-default: $modes-color-status-positive-default; // filled
-$logo-color-trust-outline: $modes-color-generic-content-extreme;
 $logo-color-copilot-no-bg-fg-default: $modes-color-brand-copilot-no-bg-monochrome;
 $logo-color-ai-identifier-bg-star: $modes-color-brand-copilot-ai-identifier-default; // star bg color
 $logo-color-ai-identifier-bg-dot: $modes-color-brand-copilot-ai-identifier-with-default;

package/scss/frozenproduct/large/components/progress.scss

@@ -69,9 +69,10 @@ $progress-size-carouselselector-dot-m: $global-size-micro-l;
 $progress-size-carouselselector-activedot-m: $global-size-macro-xxs;
 $progress-size-carouselselector-hitarea-m: $global-size-macro-xs;
 $progress-size-carouselslide-x-m: $global-size-macro-xl; // Inactive slide
-$progress-size-ring-s: $global-size-macro-s; // Loader ring
-$progress-size-ring-m: $global-size-macro-s * 2; // Loader ring
-$progress-size-ring-l: $global-size-macro-xs * 4; // Loader ring
+$progress-size-spinner-xs: $global-size-macro-xs - $global-size-micro-xs; // Loader ring for XS size loader spinners
+$progress-size-spinner-s: $global-size-macro-s; // Loader ring
+$progress-size-spinner-m: $global-size-macro-s * 2; // Loader ring
+$progress-size-spinner-l: $global-size-macro-xs * 4; // Loader ring
 $progress-size-stepflow-m: $global-size-micro-m; // Step height
 $progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
 $progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator

package/scss/frozenproduct/large/components/table.scss

@@ -58,6 +58,7 @@ $table-radius-container: $global-radius-container-m; // Table (parent container)
 $table-borderwidth-thin: $global-borderwidth-xs; // Table border
 $table-borderwidth-thick: $global-borderwidth-s; // header border for subtle
 $table-space-none: $global-space-none;
+$table-space-yg: $global-space-micro-s; // space between table and pagination
 $table-space-row-x-xs: $global-space-micro-l; // Left and right padding inside XS row cells
 $table-space-row-x-s: $global-space-macro-xs; // Left and right padding inside S row cells
 $table-space-row-x-m: $global-space-macro-xs; // Left and right padding inside M row cells

package/scss/frozenproduct/large/dark.scss

@@ -69,10 +69,18 @@ $modes-color-interactive-danger-active: #f28486; // active button on dark
 $modes-color-interactive-danger-default: #E13E53;
 $modes-color-interactive-danger-default-alt: #e85b66; // for links in datatables 
 $modes-color-interactive-danger-hover: #eb646c;
-$modes-color-interactive-danger-hover-alt: #3f1a1c; // button hover on dark
+$modes-color-interactive-danger-hover-alt: #e13e5314; // button hover on dark
 $modes-color-interactive-danger-hover-alt2: #ec6a71; // for links in datatables
 $modes-color-interactive-danger-with-active: #000000;
 $modes-color-interactive-danger-with-default: #000000;
+$modes-color-interactive-danger-inverse-active: #882b34; // used on pill hover states
+$modes-color-interactive-danger-inverse-default: #CD384B;
+$modes-color-interactive-danger-inverse-default-alt: #b23342; // For links in datatables
+$modes-color-interactive-danger-inverse-hover: #aa323f; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #cd384b14; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #a3303d; // used on link hover state
+$modes-color-interactive-danger-inverse-with-active: #FFFFFF;
+$modes-color-interactive-danger-inverse-with-default: #FFFFFF;
 $modes-color-interactive-data-entry-default: #000000; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #FFFFFF; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #000000;
@@ -83,10 +91,14 @@ $modes-color-interactive-data-entry-default-alt: #0e0e0e; // Input footer bgs (e
 $modes-color-interactive-data-entry-content: #fffffff2; // Input Text
 $modes-color-interactive-data-entry-content-alt: #ffffff8c; // Hint text, placeholder text, character count etc
 $modes-color-interactive-data-entry-frozen-with-default: #777; // Input borders.
-$modes-color-interactive-focus-with-default: #000000;
+$modes-color-interactive-focus-default: #FFB500;
 $modes-color-interactive-focus-content: #FFFFFF;
+$modes-color-interactive-focus-with-default: #000000;
 $modes-color-interactive-focus-with-default-alt: #926916;
-$modes-color-interactive-focus-default: #FFB500;
+$modes-color-interactive-focus-inverse-default: #000000;
+$modes-color-interactive-focus-inverse-content: #000000;
+$modes-color-interactive-focus-inverse-with-default: #FFB500;
+$modes-color-interactive-focus-inverse-with-default-alt: #ffd27e;
 $modes-color-interactive-inactive-default: #4b4b4b; // disabled buttons on dark
 $modes-color-interactive-inactive-mask: #FFFFFF; // full screen takeover token for modal dimmer
 $modes-color-interactive-inactive-default-alt: #0e0e0e; // Disabled button backgrounds and borders ON DARK
@@ -97,6 +109,7 @@ $modes-color-interactive-inactive-icon-alt: #ffffff8c; // Readonly icon inside f
 $modes-color-interactive-inactive-frozen-default-alt: #0e0e0e; // Disabled input and button backgrounds, button borders and input backgrounds.
 $modes-color-interactive-inactive-inverse-default: #a6a6a6; // Inversed disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-inverse-content: #0000006b; // Inversed disabled text inside buttons and form inputs.
+$modes-color-interactive-inactive-inverse-content-alt: #FFFFFF; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #FFFFFF;
 $modes-color-interactive-monochrome-active-alt: #ffffff29;
 $modes-color-interactive-monochrome-default: #ffffffe6;

package/scss/frozenproduct/large/light.scss

@@ -69,10 +69,18 @@ $modes-color-interactive-danger-active: #882b34; // used on pill hover states
 $modes-color-interactive-danger-default: #CD384B;
 $modes-color-interactive-danger-default-alt: #b23342; // For links in datatables
 $modes-color-interactive-danger-hover: #aa323f; // used on solid-pill and primary-button hover states
-$modes-color-interactive-danger-hover-alt: #f9d1cf; // used on secondary-button hover states
+$modes-color-interactive-danger-hover-alt: #cd384b14; // used on secondary-button hover states
 $modes-color-interactive-danger-hover-alt2: #a3303d; // used on link hover state
 $modes-color-interactive-danger-with-active: #FFFFFF;
 $modes-color-interactive-danger-with-default: #FFFFFF;
+$modes-color-interactive-danger-inverse-active: #f28486; // used on pill hover states
+$modes-color-interactive-danger-inverse-default: #E13E53;
+$modes-color-interactive-danger-inverse-default-alt: #e85b66; // For links in datatables
+$modes-color-interactive-danger-inverse-hover: #eb646c; // used on solid-pill and primary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt: #e13e5314; // used on secondary-button hover states
+$modes-color-interactive-danger-inverse-hover-alt2: #ec6a71; // used on link hover state
+$modes-color-interactive-danger-inverse-with-active: #000000;
+$modes-color-interactive-danger-inverse-with-default: #000000;
 $modes-color-interactive-data-entry-default: #FFFFFF; // Input backgrounds.
 $modes-color-interactive-data-entry-with-active: #000000; // checkbox tick icon or radio handle
 $modes-color-interactive-data-entry-with-active-alt: #FFFFFF;
@@ -83,10 +91,14 @@ $modes-color-interactive-data-entry-default-alt: #f3f3f3; // Input footer bgs (e
 $modes-color-interactive-data-entry-content: #000000f2; // Input Text
 $modes-color-interactive-data-entry-content-alt: #0000008c; // Hint text, placeholder text, character count etc
 $modes-color-interactive-data-entry-frozen-with-default: #698495; // Input borders.
-$modes-color-interactive-focus-with-default: #FFB500;
-$modes-color-interactive-focus-with-default-alt: #ffd27e;
 $modes-color-interactive-focus-default: #000000;
 $modes-color-interactive-focus-content: #000000;
+$modes-color-interactive-focus-with-default: #FFB500;
+$modes-color-interactive-focus-with-default-alt: #ffd27e;
+$modes-color-interactive-focus-inverse-default: #FFB500;
+$modes-color-interactive-focus-inverse-content: #FFFFFF;
+$modes-color-interactive-focus-inverse-with-default: #000000;
+$modes-color-interactive-focus-inverse-with-default-alt: #926916;
 $modes-color-interactive-inactive-default: #a6a6a6; // Disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-mask: #000000; // full screen takeover token for modal dimmer
 $modes-color-interactive-inactive-default-alt: #f3f3f3; // Disabled input and button backgrounds, button borders and input backgrounds.
@@ -97,6 +109,7 @@ $modes-color-interactive-inactive-icon-alt: #0000008c; // Readonly icon inside f
 $modes-color-interactive-inactive-frozen-default-alt: #e5eaed; // Disabled input and button backgrounds, button borders and input backgrounds.
 $modes-color-interactive-inactive-inverse-default: #4b4b4b; // Inversed disabled form secondary, tertiary and input borders borders.
 $modes-color-interactive-inactive-inverse-content: #ffffff6b; // Inversed disabled text inside buttons and form inputs.
+$modes-color-interactive-inactive-inverse-content-alt: #000000; //  Disabled labels inside buttons and Switch.
 $modes-color-interactive-monochrome-active: #000000;
 $modes-color-interactive-monochrome-active-alt: #00000029;
 $modes-color-interactive-monochrome-default: #000000e6;

package/scss/frozenproduct/small/components/badge.scss

@@ -8,11 +8,16 @@
 $badge-radius-badge: $global-radius-circle; // Badge
 $badge-color-notification-bg-default: $modes-color-status-negative-default; // Used in global nav notification badges
 $badge-color-notification-bg-alt: $modes-color-status-info-default;
+$badge-color-notification-inverse-border-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-bg-default: $modes-color-status-negative-inverse-default; // Used in global nav notification badges
+$badge-color-notification-inverse-bg-alt: $modes-color-status-info-inverse-default;
+$badge-color-notification-inverse-label-default: $modes-color-generic-content-extreme;
+$badge-color-notification-inverse-label-alt: $modes-color-generic-content-extreme;
 $badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
 $badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
-$badge-color-notification-border-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-default: $modes-color-generic-fg-nought;
-$badge-color-notification-label-alt: $modes-color-generic-fg-nought;
+$badge-color-notification-border-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-default: $modes-color-generic-content-nought;
+$badge-color-notification-label-alt: $modes-color-generic-content-nought;
 $badge-size-micro-dot: $global-size-micro-m; // Micro dot badge size
 $badge-size-micro-numbered-min: $global-size-macro-xxs; // Micro dot badge size with numbering
 $badge-size-micro-numbered-max: $global-size-macro-s; // Micro dot badge size max width