@sage/design-tokens 18.2.1 → 18.4.0

package/README.md

@@ -166,7 +166,7 @@ It is possible to export design tokens to any format or language. If you need to
 
 ## Contributing
 
-If you would like to help contribute to this library, please read our [contributing documentation](./docs/CONTRIBUTING.md),
+If you would like to help contribute to this library, please read our [contributing documentation](./CONTRIBUTING.md),
 
 ## Licence
 

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

@@ -22,6 +22,7 @@
   --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);
@@ -43,7 +44,6 @@
   --container-standard-border-alt: var(--mode-color-generic-fg-firm);
   --container-standard-border-default: var(--mode-color-generic-fg-soft);
   --container-standard-dimmer: var(--mode-color-action-inactive-mask);
-  --container-standard-icon: var(--mode-color-generic-fg-firm);
   --container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);
   --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);
   --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);
@@ -61,7 +61,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);
@@ -73,8 +72,10 @@
   --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);
   --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);
   --container-standard-txt-default: var(--mode-color-generic-txt-severe);
+  --container-standard-icon: var(--mode-color-generic-txt-severe);
   --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
   --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
+  --container-standard-inverse-icon: var(--mode-color-generic-txt-inverse-severe);
   --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
   --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
   --container-action-txt-disabled: var(--mode-color-action-inactive-txt);

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);
@@ -1073,6 +1075,7 @@
   --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);
@@ -1094,7 +1097,6 @@
   --container-standard-border-alt: var(--mode-color-generic-fg-firm);
   --container-standard-border-default: var(--mode-color-generic-fg-soft);
   --container-standard-dimmer: var(--mode-color-action-inactive-mask);
-  --container-standard-icon: var(--mode-color-generic-fg-firm);
   --container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);
   --container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);
   --container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);
@@ -1112,7 +1114,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);
@@ -1124,8 +1125,10 @@
   --container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);
   --container-standard-txt-alt: var(--mode-color-generic-txt-moderate);
   --container-standard-txt-default: var(--mode-color-generic-txt-severe);
+  --container-standard-icon: var(--mode-color-generic-txt-severe);
   --container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
   --container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
+  --container-standard-inverse-icon: var(--mode-color-generic-txt-inverse-severe);
   --container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
   --container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
   --container-action-txt-disabled: var(--mode-color-action-inactive-txt);
@@ -1183,12 +1186,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);
@@ -1223,13 +1228,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

@@ -69,9 +69,9 @@ declare const tokens: {
       "border-alt": DesignToken;
       "border-default": DesignToken;
       dimmer: DesignToken;
-      icon: DesignToken;
       "txt-alt": DesignToken;
       "txt-default": DesignToken;
+      icon: DesignToken;
       inverse: {
         "bg-alt": DesignToken;
         "border-alt": DesignToken;
@@ -79,6 +79,7 @@ declare const tokens: {
         "border-default": DesignToken;
         "txt-alt": DesignToken;
         "txt-default": DesignToken;
+        icon: DesignToken;
       };
       priority: {
         "bg-ai": 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)";
@@ -40,15 +40,16 @@ module.exports.containerStandardBorderAiV = "var(--mode-color-status-ai-inverse-
 module.exports.containerStandardBorderAlt = "var(--mode-color-generic-fg-firm)";
 module.exports.containerStandardBorderDefault = "var(--mode-color-generic-fg-soft)";
 module.exports.containerStandardDimmer = "var(--mode-color-action-inactive-mask)";
-module.exports.containerStandardIcon = "var(--mode-color-generic-fg-firm)";
 module.exports.containerStandardTxtAlt = "var(--mode-color-generic-txt-moderate)";
 module.exports.containerStandardTxtDefault = "var(--mode-color-generic-txt-severe)";
+module.exports.containerStandardIcon = "var(--mode-color-generic-txt-severe)";
 module.exports.containerStandardInverseBgAlt = "var(--mode-color-generic-bg-inverse-delicate)";
 module.exports.containerStandardInverseBorderAlt = "var(--mode-color-generic-fg-inverse-firm)";
 module.exports.containerStandardInverseBgDefault = "var(--mode-color-generic-bg-inverse-nought)";
 module.exports.containerStandardInverseBorderDefault = "var(--mode-color-generic-fg-inverse-soft)";
 module.exports.containerStandardInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
 module.exports.containerStandardInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
+module.exports.containerStandardInverseIcon = "var(--mode-color-generic-txt-inverse-severe)";
 module.exports.containerStandardPriorityBgAi = "var(--mode-color-status-ai-inverse-default-vertical)";
 module.exports.containerStandardPriorityBgCaution = "var(--mode-color-status-warning-default)";
 module.exports.containerStandardPriorityBgNegative = "var(--mode-color-status-negative-default)";

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

@@ -63,12 +63,12 @@ export const containerStandardBorderAlt: string;
 export const containerStandardBorderDefault: string;
 /** dimmed mask for dialogs */
 export const containerStandardDimmer: string;
-/** Link preview image thumbnail */
-export const containerStandardIcon: string;
 /** for subheadings etc */
 export const containerStandardTxtAlt: string;
 /** for headings, paragraph txt etc  */
 export const containerStandardTxtDefault: string;
+/** Link preview image thumbnail */
+export const containerStandardIcon: string;
 export const containerStandardInverseBgAlt: string;
 export const containerStandardInverseBorderAlt: string;
 export const containerStandardInverseBgDefault: string;
@@ -77,6 +77,7 @@ export const containerStandardInverseBorderDefault: string;
 export const containerStandardInverseTxtAlt: string;
 /** for headings, paragraph txt etc  */
 export const containerStandardInverseTxtDefault: string;
+export const containerStandardInverseIcon: string;
 export const containerStandardPriorityBgAi: string;
 export const containerStandardPriorityBgCaution: string;
 export const containerStandardPriorityBgNegative: 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)";
@@ -40,15 +40,16 @@ export const containerStandardBorderAiV = "var(--mode-color-status-ai-inverse-de
 export const containerStandardBorderAlt = "var(--mode-color-generic-fg-firm)";
 export const containerStandardBorderDefault = "var(--mode-color-generic-fg-soft)";
 export const containerStandardDimmer = "var(--mode-color-action-inactive-mask)";
-export const containerStandardIcon = "var(--mode-color-generic-fg-firm)";
 export const containerStandardTxtAlt = "var(--mode-color-generic-txt-moderate)";
 export const containerStandardTxtDefault = "var(--mode-color-generic-txt-severe)";
+export const containerStandardIcon = "var(--mode-color-generic-txt-severe)";
 export const containerStandardInverseBgAlt = "var(--mode-color-generic-bg-inverse-delicate)";
 export const containerStandardInverseBorderAlt = "var(--mode-color-generic-fg-inverse-firm)";
 export const containerStandardInverseBgDefault = "var(--mode-color-generic-bg-inverse-nought)";
 export const containerStandardInverseBorderDefault = "var(--mode-color-generic-fg-inverse-soft)";
 export const containerStandardInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
 export const containerStandardInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
+export const containerStandardInverseIcon = "var(--mode-color-generic-txt-inverse-severe)";
 export const containerStandardPriorityBgAi = "var(--mode-color-status-ai-inverse-default-vertical)";
 export const containerStandardPriorityBgCaution = "var(--mode-color-status-warning-default)";
 export const containerStandardPriorityBgNegative = "var(--mode-color-status-negative-default)";

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)",
@@ -37,15 +37,16 @@
   "containerStandardBorderAlt": "var(--mode-color-generic-fg-firm)",
   "containerStandardBorderDefault": "var(--mode-color-generic-fg-soft)",
   "containerStandardDimmer": "var(--mode-color-action-inactive-mask)",
-  "containerStandardIcon": "var(--mode-color-generic-fg-firm)",
   "containerStandardTxtAlt": "var(--mode-color-generic-txt-moderate)",
   "containerStandardTxtDefault": "var(--mode-color-generic-txt-severe)",
+  "containerStandardIcon": "var(--mode-color-generic-txt-severe)",
   "containerStandardInverseBgAlt": "var(--mode-color-generic-bg-inverse-delicate)",
   "containerStandardInverseBorderAlt": "var(--mode-color-generic-fg-inverse-firm)",
   "containerStandardInverseBgDefault": "var(--mode-color-generic-bg-inverse-nought)",
   "containerStandardInverseBorderDefault": "var(--mode-color-generic-fg-inverse-soft)",
   "containerStandardInverseTxtAlt": "var(--mode-color-generic-txt-inverse-moderate)",
   "containerStandardInverseTxtDefault": "var(--mode-color-generic-txt-inverse-severe)",
+  "containerStandardInverseIcon": "var(--mode-color-generic-txt-inverse-severe)",
   "containerStandardPriorityBgAi": "var(--mode-color-status-ai-inverse-default-vertical)",
   "containerStandardPriorityBgCaution": "var(--mode-color-status-warning-default)",
   "containerStandardPriorityBgNegative": "var(--mode-color-status-negative-default)",

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.2.1",
+  "version": "18.4.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/components/button.scss

@@ -57,12 +57,14 @@ $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-in
 $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-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-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;
@@ -97,13 +99,11 @@ $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover
 $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

@@ -18,6 +18,7 @@ $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;
@@ -39,7 +40,6 @@ $container-standard-border-active: $mode-color-action-grayscale-active;
 $container-standard-border-alt: $mode-color-generic-fg-firm;
 $container-standard-border-default: $mode-color-generic-fg-soft;
 $container-standard-dimmer: $mode-color-action-inactive-mask;
-$container-standard-icon: $mode-color-generic-fg-firm;
 $container-standard-inverse-bg-alt: $mode-color-generic-bg-inverse-delicate;
 $container-standard-inverse-border-alt: $mode-color-generic-fg-inverse-firm;
 $container-standard-inverse-bg-default: $mode-color-generic-bg-inverse-nought;
@@ -57,7 +57,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;
@@ -69,8 +68,10 @@ $container-standard-border-ai-h: $mode-color-status-ai-inverse-default-horizonta
 $container-standard-border-ai-v: $mode-color-status-ai-inverse-default-vertical;
 $container-standard-txt-alt: $mode-color-generic-txt-moderate;
 $container-standard-txt-default: $mode-color-generic-txt-severe;
+$container-standard-icon: $mode-color-generic-txt-severe;
 $container-standard-inverse-txt-alt: $mode-color-generic-txt-inverse-moderate;
 $container-standard-inverse-txt-default: $mode-color-generic-txt-inverse-severe;
+$container-standard-inverse-icon: $mode-color-generic-txt-inverse-severe;
 $container-standard-priority-bg-ai: $mode-color-status-ai-inverse-default-vertical;
 $container-standard-priority-inverse-bg-ai: $mode-color-status-ai-inverse-default-vertical;
 $container-action-txt-disabled: $mode-color-action-inactive-txt;

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;