@sage/design-tokens 18.3.0 → 18.5.0

package/css/components/button.css

@@ -61,12 +61,14 @@
   --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
   --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
   --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
+  --button-typical-subtle-bg-hover: var(--mode-color-generic-bg-delicate);
   --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);
   --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);
   --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
   --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
   --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
   --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
+  --button-typical-toggle-bg-hover: var(--mode-color-generic-bg-delicate);
   --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);
   --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);
   --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);
@@ -101,13 +103,11 @@
   --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
   --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);
-  --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);
   --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);
   --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);
   --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);
-  --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);
   --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);
   --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);

package/css/components/container.css

@@ -16,12 +16,16 @@
   --container-size-fluid-items-2-xl: 320px;
   --container-size-fluid-items-3-xl: 560px;
   --container-size-fluid-items-4-xl: 760px;
+  --container-size-dialog-maxwidth-s: 540px;
+  --container-size-dialog-maxwidth-m: 850px;
+  --container-size-dialog-maxwidth-l: 1080px;
   --container-action-bg-footer-activated: var(--mode-color-status-positive-default);
   --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
   --container-action-border-activated: var(--mode-color-status-positive-default);
   --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);
   --container-action-bg-default: var(--mode-color-generic-bg-nought);
   --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);
+  --container-action-bg-hover: var(--mode-color-generic-bg-delicate);
   --container-action-border-active: var(--mode-color-action-grayscale-active);
   --container-action-border-alt: var(--mode-color-generic-fg-moderate);
   --container-action-border-inactive: var(--mode-color-generic-fg-firm);
@@ -60,7 +64,6 @@
   --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);
   --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);
   --container-quote-border: var(--mode-color-action-main-default);
-  --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);
   --container-action-icon-default: var(--mode-color-action-grayscale-default);
   --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);

package/css/components/focus.css

@@ -15,4 +15,6 @@
   --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);
   --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);
   --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
+  --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
+  --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
 }

package/css/light-all.css

@@ -907,6 +907,8 @@
   --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);
   --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);
   --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
+  --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
+  --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
   --dataviz-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);
   --dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);
   --dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense);
@@ -1067,12 +1069,16 @@
   --container-size-fluid-items-2-xl: 320px;
   --container-size-fluid-items-3-xl: 560px;
   --container-size-fluid-items-4-xl: 760px;
+  --container-size-dialog-maxwidth-s: 540px;
+  --container-size-dialog-maxwidth-m: 850px;
+  --container-size-dialog-maxwidth-l: 1080px;
   --container-action-bg-footer-activated: var(--mode-color-status-positive-default);
   --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
   --container-action-border-activated: var(--mode-color-status-positive-default);
   --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);
   --container-action-bg-default: var(--mode-color-generic-bg-nought);
   --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);
+  --container-action-bg-hover: var(--mode-color-generic-bg-delicate);
   --container-action-border-active: var(--mode-color-action-grayscale-active);
   --container-action-border-alt: var(--mode-color-generic-fg-moderate);
   --container-action-border-inactive: var(--mode-color-generic-fg-firm);
@@ -1111,7 +1117,6 @@
   --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);
   --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);
   --container-quote-border: var(--mode-color-action-main-default);
-  --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);
   --container-action-icon-default: var(--mode-color-action-grayscale-default);
   --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);
@@ -1184,12 +1189,14 @@
   --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
   --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
   --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
+  --button-typical-subtle-bg-hover: var(--mode-color-generic-bg-delicate);
   --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);
   --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);
   --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
   --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
   --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
   --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
+  --button-typical-toggle-bg-hover: var(--mode-color-generic-bg-delicate);
   --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);
   --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);
   --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);
@@ -1224,13 +1231,11 @@
   --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
   --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);
-  --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);
   --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);
   --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);
   --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
   --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);
-  --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
   --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);
   --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);
   --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);

package/js/common/components/button.js

@@ -89,7 +89,7 @@ module.exports.buttonTypicalTertiaryInverseLabelDisabled = "var(--mode-color-act
 module.exports.buttonTypicalTertiaryInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
 module.exports.buttonTypicalTertiaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
 module.exports.buttonTypicalSubtleBgActive = "var(--mode-color-action-grayscale-active-alt)";
-module.exports.buttonTypicalSubtleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+module.exports.buttonTypicalSubtleBgHover = "var(--mode-color-generic-bg-delicate)";
 module.exports.buttonTypicalSubtleLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
 module.exports.buttonTypicalSubtleLabelDisabled = "var(--mode-color-action-inactive-txt)";
 module.exports.buttonTypicalSubtleLabelDefault = "var(--mode-color-action-grayscale-default)";
@@ -103,7 +103,7 @@ module.exports.buttonTypicalSubtleInverseLabelHover = "var(--mode-color-action-g
 module.exports.buttonTypicalToggleBgActiveDisabled = "var(--mode-color-action-inactive-default)";
 module.exports.buttonTypicalToggleLabelActiveDisabled = "var(--mode-color-action-inactive-txt-alt)";
 module.exports.buttonTypicalToggleBgActive = "var(--mode-color-action-grayscale-active)";
-module.exports.buttonTypicalToggleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+module.exports.buttonTypicalToggleBgHover = "var(--mode-color-generic-bg-delicate)";
 module.exports.buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
 module.exports.buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
 module.exports.buttonTypicalToggleLabelActive = "var(--mode-color-action-grayscale-with-active)";

package/js/common/components/container.d.ts

@@ -115,6 +115,13 @@ declare const tokens: {
         "3XL": DesignToken;
         "4XL": DesignToken;
       };
+      dialog: {
+        maxwidth: {
+          S: DesignToken;
+          M: DesignToken;
+          L: DesignToken;
+        };
+      };
     };
   };
 };

package/js/common/components/container.js

@@ -8,7 +8,7 @@ module.exports.containerActionBorderActivated = "var(--mode-color-status-positiv
 module.exports.containerActionBgFooterDefault = "var(--mode-color-generic-bg-nought)";
 module.exports.containerActionBgDefault = "var(--mode-color-generic-bg-nought)";
 module.exports.containerActionBgDisabled = "var(--mode-color-action-inactive-default-alt)";
-module.exports.containerActionBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+module.exports.containerActionBgHover = "var(--mode-color-generic-bg-delicate)";
 module.exports.containerActionBorderActive = "var(--mode-color-action-grayscale-active)";
 module.exports.containerActionBorderAlt = "var(--mode-color-generic-fg-moderate)";
 module.exports.containerActionBorderaltHover = "var(--mode-color-action-grayscale-default)";
@@ -74,3 +74,6 @@ module.exports.containerSizeFluidItemsXl = "288px";
 module.exports.containerSizeFluidItems2Xl = "320px";
 module.exports.containerSizeFluidItems3Xl = "560px";
 module.exports.containerSizeFluidItems4Xl = "760px";
+module.exports.containerSizeDialogMaxwidthS = "540px";
+module.exports.containerSizeDialogMaxwidthM = "850px";
+module.exports.containerSizeDialogMaxwidthL = "1080px";

package/js/common/components/focus.d.ts

@@ -30,5 +30,9 @@ declare const tokens: {
       border: DesignToken;
       label: DesignToken;
     };
+    shadow: {
+      default: DesignToken;
+      inset: DesignToken;
+    };
   };
 };

package/js/common/components/focus.js

@@ -10,3 +10,5 @@ module.exports.focusInverseBg = "var(--mode-color-action-focus-inverse-with-defa
 module.exports.focusInverseBorderalt = "var(--mode-color-action-focus-inverse-default)";
 module.exports.focusInverseBorder = "var(--mode-color-action-focus-inverse-with-default)";
 module.exports.focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
+module.exports.focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
+module.exports.focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";

package/js/es6/components/button.js

@@ -89,7 +89,7 @@ export const buttonTypicalTertiaryInverseLabelDisabled = "var(--mode-color-actio
 export const buttonTypicalTertiaryInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
 export const buttonTypicalTertiaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
 export const buttonTypicalSubtleBgActive = "var(--mode-color-action-grayscale-active-alt)";
-export const buttonTypicalSubtleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+export const buttonTypicalSubtleBgHover = "var(--mode-color-generic-bg-delicate)";
 export const buttonTypicalSubtleLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
 export const buttonTypicalSubtleLabelDisabled = "var(--mode-color-action-inactive-txt)";
 export const buttonTypicalSubtleLabelDefault = "var(--mode-color-action-grayscale-default)";
@@ -103,7 +103,7 @@ export const buttonTypicalSubtleInverseLabelHover = "var(--mode-color-action-gra
 export const buttonTypicalToggleBgActiveDisabled = "var(--mode-color-action-inactive-default)";
 export const buttonTypicalToggleLabelActiveDisabled = "var(--mode-color-action-inactive-txt-alt)";
 export const buttonTypicalToggleBgActive = "var(--mode-color-action-grayscale-active)";
-export const buttonTypicalToggleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+export const buttonTypicalToggleBgHover = "var(--mode-color-generic-bg-delicate)";
 export const buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
 export const buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
 export const buttonTypicalToggleLabelActive = "var(--mode-color-action-grayscale-with-active)";

package/js/es6/components/container.d.ts

@@ -111,3 +111,9 @@ export const containerSizeFluidItems2Xl: string;
 export const containerSizeFluidItems3Xl: string;
 /** Max width for single line of txt. */
 export const containerSizeFluidItems4Xl: string;
+/** max width for small dialog */
+export const containerSizeDialogMaxwidthS: string;
+/** max width for medium dialog */
+export const containerSizeDialogMaxwidthM: string;
+/** max width for large dialog */
+export const containerSizeDialogMaxwidthL: string;

package/js/es6/components/container.js

@@ -8,7 +8,7 @@ export const containerActionBorderActivated = "var(--mode-color-status-positive-
 export const containerActionBgFooterDefault = "var(--mode-color-generic-bg-nought)";
 export const containerActionBgDefault = "var(--mode-color-generic-bg-nought)";
 export const containerActionBgDisabled = "var(--mode-color-action-inactive-default-alt)";
-export const containerActionBgHover = "var(--mode-color-action-grayscale-hover-alt)";
+export const containerActionBgHover = "var(--mode-color-generic-bg-delicate)";
 export const containerActionBorderActive = "var(--mode-color-action-grayscale-active)";
 export const containerActionBorderAlt = "var(--mode-color-generic-fg-moderate)";
 export const containerActionBorderaltHover = "var(--mode-color-action-grayscale-default)";
@@ -74,3 +74,6 @@ export const containerSizeFluidItemsXl = "288px";
 export const containerSizeFluidItems2Xl = "320px";
 export const containerSizeFluidItems3Xl = "560px";
 export const containerSizeFluidItems4Xl = "760px";
+export const containerSizeDialogMaxwidthS = "540px";
+export const containerSizeDialogMaxwidthM = "850px";
+export const containerSizeDialogMaxwidthL = "1080px";

package/js/es6/components/focus.d.ts

@@ -14,3 +14,19 @@ export const focusInverseBg: string;
 export const focusInverseBorderalt: string;
 export const focusInverseBorder: string;
 export const focusInverseLabel: string;
+export const focusShadowDefault: {
+  blur: string;
+  spread: string;
+  color: string;
+  type: string;
+  offsetX: string;
+  offsetY: string;
+}[];
+export const focusShadowInset: {
+  blur: string;
+  spread: string;
+  color: string;
+  type: string;
+  offsetX: string;
+  offsetY: string;
+}[];

package/js/es6/components/focus.js

@@ -10,3 +10,5 @@ export const focusInverseBg = "var(--mode-color-action-focus-inverse-with-defaul
 export const focusInverseBorderalt = "var(--mode-color-action-focus-inverse-default)";
 export const focusInverseBorder = "var(--mode-color-action-focus-inverse-with-default)";
 export const focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
+export const focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
+export const focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";

package/json/components/button.json

@@ -86,7 +86,7 @@
   "buttonTypicalTertiaryInverseLabelDefault": "var(--mode-color-action-grayscale-inverse-default)",
   "buttonTypicalTertiaryInverseLabelHover": "var(--mode-color-action-grayscale-inverse-with-hover)",
   "buttonTypicalSubtleBgActive": "var(--mode-color-action-grayscale-active-alt)",
-  "buttonTypicalSubtleBgHover": "var(--mode-color-action-grayscale-hover-alt)",
+  "buttonTypicalSubtleBgHover": "var(--mode-color-generic-bg-delicate)",
   "buttonTypicalSubtleLabelActive": "var(--mode-color-action-grayscale-with-active-alt)",
   "buttonTypicalSubtleLabelDisabled": "var(--mode-color-action-inactive-txt)",
   "buttonTypicalSubtleLabelDefault": "var(--mode-color-action-grayscale-default)",
@@ -100,7 +100,7 @@
   "buttonTypicalToggleBgActiveDisabled": "var(--mode-color-action-inactive-default)",
   "buttonTypicalToggleLabelActiveDisabled": "var(--mode-color-action-inactive-txt-alt)",
   "buttonTypicalToggleBgActive": "var(--mode-color-action-grayscale-active)",
-  "buttonTypicalToggleBgHover": "var(--mode-color-action-grayscale-hover-alt)",
+  "buttonTypicalToggleBgHover": "var(--mode-color-generic-bg-delicate)",
   "buttonTypicalToggleBorderDefault": "var(--mode-color-action-grayscale-default)",
   "buttonTypicalToggleBorderDisabled": "var(--mode-color-action-inactive-default)",
   "buttonTypicalToggleLabelActive": "var(--mode-color-action-grayscale-with-active)",

package/json/components/container.json

@@ -5,7 +5,7 @@
   "containerActionBgFooterDefault": "var(--mode-color-generic-bg-nought)",
   "containerActionBgDefault": "var(--mode-color-generic-bg-nought)",
   "containerActionBgDisabled": "var(--mode-color-action-inactive-default-alt)",
-  "containerActionBgHover": "var(--mode-color-action-grayscale-hover-alt)",
+  "containerActionBgHover": "var(--mode-color-generic-bg-delicate)",
   "containerActionBorderActive": "var(--mode-color-action-grayscale-active)",
   "containerActionBorderAlt": "var(--mode-color-generic-fg-moderate)",
   "containerActionBorderaltHover": "var(--mode-color-action-grayscale-default)",
@@ -70,5 +70,8 @@
   "containerSizeFluidItemsXl": "288px",
   "containerSizeFluidItems2Xl": "320px",
   "containerSizeFluidItems3Xl": "560px",
-  "containerSizeFluidItems4Xl": "760px"
+  "containerSizeFluidItems4Xl": "760px",
+  "containerSizeDialogMaxwidthS": "540px",
+  "containerSizeDialogMaxwidthM": "850px",
+  "containerSizeDialogMaxwidthL": "1080px"
 }

package/json/components/focus.json

@@ -6,5 +6,7 @@
   "focusInverseBg": "var(--mode-color-action-focus-inverse-with-default-alt)",
   "focusInverseBorderalt": "var(--mode-color-action-focus-inverse-default)",
   "focusInverseBorder": "var(--mode-color-action-focus-inverse-with-default)",
-  "focusInverseLabel": "var(--mode-color-action-focus-inverse-txt)"
+  "focusInverseLabel": "var(--mode-color-action-focus-inverse-txt)",
+  "focusShadowDefault": "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)",
+  "focusShadowInset": "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)"
 }

package/package.json

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

package/scss/components/button.scss

@@ -46,6 +46,7 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
 $button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
 $button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
 $button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
+$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
 $button-typical-tertiary-border-active: $mode-color-action-main-active;
 $button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
@@ -56,13 +57,17 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
 $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
 $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
 $button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
+$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
+$button-typical-subtle-bg-hover: $mode-color-generic-bg-delicate;
 $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
 $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
 $button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
+$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
 $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
 $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
+$button-typical-toggle-bg-hover: $mode-color-generic-bg-delicate;
 $button-typical-toggle-border-disabled: $mode-color-action-inactive-default;
 $button-typical-toggle-label-active: $mode-color-action-grayscale-with-active;
 $button-typical-toggle-label-hover: $mode-color-action-grayscale-with-hover;
@@ -85,7 +90,6 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
 $button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
 $button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
 $button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
-$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
 $button-typical-tertiary-bg-default: $button-none;
 $button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
@@ -95,15 +99,11 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
 $button-typical-tertiary-inverse-bg-default: $button-none;
 $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
 $button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
-$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
-$button-typical-subtle-bg-hover: $mode-color-action-grayscale-hover-alt;
 $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
 $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
 $button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
-$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
-$button-typical-toggle-bg-hover: $mode-color-action-grayscale-hover-alt;
 $button-typical-toggle-border-default: $mode-color-action-grayscale-default;
 $button-typical-toggle-label-default: $mode-color-action-grayscale-default-alt;
 $button-video-bg-blur: $mode-color-action-grayscale-hover-alt;

package/scss/components/container.scss

@@ -12,12 +12,16 @@ $container-size-fluid-items-xl: 288px;
 $container-size-fluid-items-2-xl: 320px;
 $container-size-fluid-items-3-xl: 560px;
 $container-size-fluid-items-4-xl: 760px;
+$container-size-dialog-maxwidth-s: 540px;
+$container-size-dialog-maxwidth-m: 850px;
+$container-size-dialog-maxwidth-l: 1080px;
 $container-action-bg-footer-activated: $mode-color-status-positive-default;
 $container-action-bg-footer-active: $mode-color-action-grayscale-active;
 $container-action-border-activated: $mode-color-status-positive-default;
 $container-action-bg-footer-default: $mode-color-generic-bg-nought;
 $container-action-bg-default: $mode-color-generic-bg-nought;
 $container-action-bg-disabled: $mode-color-action-inactive-default-alt;
+$container-action-bg-hover: $mode-color-generic-bg-delicate;
 $container-action-border-active: $mode-color-action-grayscale-active;
 $container-action-border-alt: $mode-color-generic-fg-moderate;
 $container-action-border-inactive: $mode-color-generic-fg-firm;
@@ -56,7 +60,6 @@ $container-standard-priority-inverse-bg-info: $mode-color-status-info-inverse-de
 $container-standard-priority-inverse-bg-neutral: $mode-color-status-neutral-inverse-default;
 $container-standard-priority-inverse-bg-positive: $mode-color-status-positive-inverse-default;
 $container-quote-border: $mode-color-action-main-default;
-$container-action-bg-hover: $mode-color-action-grayscale-hover-alt;
 $container-action-borderalt-hover: $mode-color-action-grayscale-default;
 $container-action-icon-default: $mode-color-action-grayscale-default;
 $container-action-icon-alt-default: $mode-color-action-grayscale-default-alt;

package/scss/components/focus.scss

@@ -11,3 +11,5 @@ $focus-inverse-bg: $mode-color-action-focus-inverse-with-default-alt;
 $focus-inverse-borderalt: $mode-color-action-focus-inverse-default;
 $focus-inverse-border: $mode-color-action-focus-inverse-with-default;
 $focus-inverse-label: $mode-color-action-focus-inverse-txt;
+$focus-shadow-default: 0 0 0 2px $focus-borderalt, 0 0 0 4px $focus-border;
+$focus-shadow-inset: inset 0 0 0 2px $focus-border, inset 0 0 0 4px $focus-borderalt;

package/scss/components/link.scss

@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
 $link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
 $link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
 $link-subtle-label-hover: $mode-color-action-grayscale-active;
+$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
 $link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
 $link-subtle-label-default: $mode-color-action-grayscale-default;
-$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;

package/scss/components/message.scss

@@ -7,9 +7,7 @@ $message-none: $mode-color-none;
 $message-contextual-bg: $mode-color-generic-bg-nought;
 $message-contextual-icon: $mode-color-generic-bg-nought;
 $message-contextual-icon-alt: $mode-color-status-neutral-default;
-$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
 $message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
-$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
 $message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
 $message-contextual-error-bg-default: $mode-color-status-negative-default;
 $message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
@@ -37,6 +35,8 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
 $message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
 $message-global-warning-icon: $mode-color-status-warning-default;
 $message-contextual-txt: $mode-color-status-txt-with-hover-alt;
+$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
+$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
 $message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
 $message-global-label-default: $mode-color-status-txt-with-default-alt;
 $message-global-callout-icon: $mode-color-status-txt-with-default-alt;

package/scss/components/pill.scss

@@ -88,7 +88,7 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
 $pill-generic-label-hover: $mode-color-status-txt-with-hover;
 $pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
 $pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
-$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
-$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
 $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
 $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
+$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
+$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;