@sage/design-tokens 18.11.0 → 18.12.0

package/css/components/button.css

@@ -32,7 +32,7 @@
   --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);
   --button-typical-primary-label-active: var(--mode-color-action-main-with-active);
   --button-typical-primary-label-default: var(--mode-color-action-main-with-default);
-  --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);
+  --button-typical-primary-label-hover: var(--mode-color-action-main-with-hover);
   --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);
   --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);
   --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);

package/css/components/input.css

@@ -37,6 +37,14 @@
   --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);
   --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);
   --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);
+  --input-quickpick-bg-default: var(--mode-color-action-data-entry-default);
+  --input-quickpick-bg-hover: var(--mode-color-action-data-entry-hover-alt);
+  --input-quickpick-border-default: var(--mode-color-generic-bg-soft);
+  --input-quickpick-border-hover: var(--mode-color-action-data-entry-with-default);
+  --input-quickpick-icon-active: var(--mode-color-action-data-entry-with-active);
+  --input-quickpick-icon-hover: var(--mode-color-action-data-entry-with-hover);
+  --input-quickpick-txt-active: var(--mode-color-action-data-entry-with-active);
+  --input-quickpick-txt-hover: var(--mode-color-action-data-entry-with-hover);
   --input-switch-bg-active: var(--mode-color-action-grayscale-active);
   --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);
   --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);
@@ -58,6 +66,8 @@
   --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);
   --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);
   --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);
+  --input-quickpick-bg-active: var(--mode-color-action-grayscale-active-alt);
+  --input-quickpick-icon-default: var(--mode-color-generic-txt-soft);
   --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);
   --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);
   --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);
@@ -82,6 +92,7 @@
   --input-typical-txt-default: var(--mode-color-action-data-entry-txt);
   --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);
   --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);
+  --input-quickpick-txt-default: var(--mode-color-action-data-entry-txt);
   --input-switch-label-active: var(--mode-color-action-data-entry-txt);
   --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);
 }

package/css/global.css

@@ -27,7 +27,7 @@
   --global-modifier-input-disabled-fg: 0.3;
   --global-modifier-input-disabled-bg: 0.05;
   --global-radius-none: 0;
-  --global-radius-scale: 1px;
+  --global-radius-scale: 1;
   --global-radius-container-circle: 999px;
   --global-radius-action-circle: 999px;
   --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
@@ -119,23 +119,23 @@
   --global-borderwidth-l: 4px;
   --global-borderwidth-xl: 6px;
   --global-borderwidth-xxl: 8px;
-  --global-radius-container-3-xs: 1px;
-  --global-radius-container-2-xs: 2px;
-  --global-radius-container-xs: 4px;
-  --global-radius-container-s: 6px;
-  --global-radius-container-m: 8px;
-  --global-radius-container-l: 16px;
-  --global-radius-container-xl: 24px;
-  --global-radius-container-2-xl: 32px;
-  --global-radius-container-3-xl: 40px;
-  --global-radius-container-4-xl: 80px;
-  --global-radius-action-2-xs: 1px;
-  --global-radius-action-xs: 2px;
-  --global-radius-action-s: 4px;
-  --global-radius-action-m: 8px;
-  --global-radius-action-l: 16px;
-  --global-radius-action-xl: 20px;
-  --global-radius-action-2-xl: 24px;
+  --global-radius-container-3-xs: calc(1px * var(--global-radius-scale));
+  --global-radius-container-2-xs: calc(2px * var(--global-radius-scale));
+  --global-radius-container-xs: calc(4px * var(--global-radius-scale));
+  --global-radius-container-s: calc(6px * var(--global-radius-scale));
+  --global-radius-container-m: calc(8px * var(--global-radius-scale));
+  --global-radius-container-l: calc(16px * var(--global-radius-scale));
+  --global-radius-container-xl: calc(24px * var(--global-radius-scale));
+  --global-radius-container-2-xl: calc(32px * var(--global-radius-scale));
+  --global-radius-container-3-xl: calc(40px * var(--global-radius-scale));
+  --global-radius-container-4-xl: calc(80px * var(--global-radius-scale));
+  --global-radius-action-2-xs: calc(1px * var(--global-radius-scale));
+  --global-radius-action-xs: calc(2px * var(--global-radius-scale));
+  --global-radius-action-s: calc(4px * var(--global-radius-scale));
+  --global-radius-action-m: calc(8px * var(--global-radius-scale));
+  --global-radius-action-l: calc(16px * var(--global-radius-scale));
+  --global-radius-action-xl: calc(20px * var(--global-radius-scale));
+  --global-radius-action-2-xl: calc(24px * var(--global-radius-scale));
   --global-size-none: 0px;
   --global-size-6-xs: 2px;
   --global-size-5-xs: 4px;

package/css/light-all.css

@@ -23,7 +23,7 @@
   --global-modifier-input-disabled-fg: 0.3;
   --global-modifier-input-disabled-bg: 0.05;
   --global-radius-none: 0;
-  --global-radius-scale: 1px;
+  --global-radius-scale: 1;
   --global-radius-container-circle: 999px;
   --global-radius-action-circle: 999px;
   --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
@@ -115,23 +115,23 @@
   --global-borderwidth-l: 4px;
   --global-borderwidth-xl: 6px;
   --global-borderwidth-xxl: 8px;
-  --global-radius-container-3-xs: 1px;
-  --global-radius-container-2-xs: 2px;
-  --global-radius-container-xs: 4px;
-  --global-radius-container-s: 6px;
-  --global-radius-container-m: 8px;
-  --global-radius-container-l: 16px;
-  --global-radius-container-xl: 24px;
-  --global-radius-container-2-xl: 32px;
-  --global-radius-container-3-xl: 40px;
-  --global-radius-container-4-xl: 80px;
-  --global-radius-action-2-xs: 1px;
-  --global-radius-action-xs: 2px;
-  --global-radius-action-s: 4px;
-  --global-radius-action-m: 8px;
-  --global-radius-action-l: 16px;
-  --global-radius-action-xl: 20px;
-  --global-radius-action-2-xl: 24px;
+  --global-radius-container-3-xs: calc(1px * var(--global-radius-scale));
+  --global-radius-container-2-xs: calc(2px * var(--global-radius-scale));
+  --global-radius-container-xs: calc(4px * var(--global-radius-scale));
+  --global-radius-container-s: calc(6px * var(--global-radius-scale));
+  --global-radius-container-m: calc(8px * var(--global-radius-scale));
+  --global-radius-container-l: calc(16px * var(--global-radius-scale));
+  --global-radius-container-xl: calc(24px * var(--global-radius-scale));
+  --global-radius-container-2-xl: calc(32px * var(--global-radius-scale));
+  --global-radius-container-3-xl: calc(40px * var(--global-radius-scale));
+  --global-radius-container-4-xl: calc(80px * var(--global-radius-scale));
+  --global-radius-action-2-xs: calc(1px * var(--global-radius-scale));
+  --global-radius-action-xs: calc(2px * var(--global-radius-scale));
+  --global-radius-action-s: calc(4px * var(--global-radius-scale));
+  --global-radius-action-m: calc(8px * var(--global-radius-scale));
+  --global-radius-action-l: calc(16px * var(--global-radius-scale));
+  --global-radius-action-xl: calc(20px * var(--global-radius-scale));
+  --global-radius-action-2-xl: calc(24px * var(--global-radius-scale));
   --global-size-none: 0px;
   --global-size-6-xs: 2px;
   --global-size-5-xs: 4px;
@@ -887,6 +887,14 @@
   --input-typical-txt-hover: var(--mode-color-action-data-entry-with-hover);
   --input-typical-inverse-bg-default: var(--mode-color-action-data-entry-inverse-default);
   --input-typical-inverse-border-default: var(--mode-color-action-data-entry-inverse-with-default);
+  --input-quickpick-bg-default: var(--mode-color-action-data-entry-default);
+  --input-quickpick-bg-hover: var(--mode-color-action-data-entry-hover-alt);
+  --input-quickpick-border-default: var(--mode-color-generic-bg-soft);
+  --input-quickpick-border-hover: var(--mode-color-action-data-entry-with-default);
+  --input-quickpick-icon-active: var(--mode-color-action-data-entry-with-active);
+  --input-quickpick-icon-hover: var(--mode-color-action-data-entry-with-hover);
+  --input-quickpick-txt-active: var(--mode-color-action-data-entry-with-active);
+  --input-quickpick-txt-hover: var(--mode-color-action-data-entry-with-hover);
   --input-switch-bg-active: var(--mode-color-action-grayscale-active);
   --input-switch-bg-activate-disabled: var(--mode-color-action-inactive-default);
   --input-switch-bg-disabled: var(--mode-color-action-inactive-default-alt);
@@ -908,6 +916,8 @@
   --input-validation-inverse-bar-error: var(--mode-color-status-negative-inverse-default);
   --input-validation-inverse-label-error: var(--mode-color-status-negative-inverse-default);
   --input-typical-txt-read-only: var(--mode-color-generic-txt-severe);
+  --input-quickpick-bg-active: var(--mode-color-action-grayscale-active-alt);
+  --input-quickpick-icon-default: var(--mode-color-generic-txt-soft);
   --input-switch-fg-activate-disabled: var(--mode-color-action-inactive-txt-alt);
   --input-calendar-txt-alt: var(--mode-color-action-data-entry-txt-alt);
   --input-calendar-txt-disabled: var(--mode-color-action-inactive-txt);
@@ -932,6 +942,7 @@
   --input-typical-txt-default: var(--mode-color-action-data-entry-txt);
   --input-typical-txt-disabled: var(--mode-color-action-inactive-txt);
   --input-typical-inverse-txt-default: var(--mode-color-action-data-entry-inverse-txt);
+  --input-quickpick-txt-default: var(--mode-color-action-data-entry-txt);
   --input-switch-label-active: var(--mode-color-action-data-entry-txt);
   --input-switch-label-default: var(--mode-color-action-data-entry-txt-alt);
   --focus-bg: var(--mode-color-action-focus-with-default-alt);
@@ -1195,7 +1206,7 @@
   --button-typical-primary-bg-hover: var(--mode-color-action-main-hover);
   --button-typical-primary-label-active: var(--mode-color-action-main-with-active);
   --button-typical-primary-label-default: var(--mode-color-action-main-with-default);
-  --button-typical-primary-label-hover: var(--mode-color-action-main-with-default);
+  --button-typical-primary-label-hover: var(--mode-color-action-main-with-hover);
   --button-typical-primary-inverse-bg-active: var(--mode-color-action-main-inverse-active);
   --button-typical-primary-inverse-border-default: var(--mode-color-action-main-inverse-with-default);
   --button-typical-primary-inverse-bg-disabled: var(--mode-color-action-inactive-inverse-default);

package/js/common/components/button.js

@@ -34,7 +34,7 @@ module.exports.buttonTypicalPrimaryBgHover = "var(--mode-color-action-main-hover
 module.exports.buttonTypicalPrimaryLabelActive = "var(--mode-color-action-main-with-active)";
 module.exports.buttonTypicalPrimaryLabelDisabled = "var(--mode-color-action-inactive-txt-alt)";
 module.exports.buttonTypicalPrimaryLabelDefault = "var(--mode-color-action-main-with-default)";
-module.exports.buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-default)";
+module.exports.buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-hover)";
 module.exports.buttonTypicalPrimaryInverseBgActive = "var(--mode-color-action-main-inverse-active)";
 module.exports.buttonTypicalPrimaryInverseBorderDefault = "var(--mode-color-action-main-inverse-with-default)";
 module.exports.buttonTypicalPrimaryInverseBgDisabled = "var(--mode-color-action-inactive-inverse-default)";

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

@@ -84,6 +84,19 @@ declare const tokens: {
         "txt-default": DesignToken;
       };
     };
+    quickpick: {
+      "bg-default": DesignToken;
+      "bg-hover": DesignToken;
+      "bg-active": DesignToken;
+      "border-default": DesignToken;
+      "border-hover": DesignToken;
+      "icon-active": DesignToken;
+      "icon-default": DesignToken;
+      "icon-hover": DesignToken;
+      "txt-active": DesignToken;
+      "txt-default": DesignToken;
+      "txt-hover": DesignToken;
+    };
     switch: {
       "bg-active": DesignToken;
       "bg-activateDisabled": DesignToken;

package/js/common/components/input.js

@@ -54,6 +54,17 @@ module.exports.inputTypicalTxtReadOnly = "var(--mode-color-generic-txt-severe)";
 module.exports.inputTypicalInverseBgDefault = "var(--mode-color-action-data-entry-inverse-default)";
 module.exports.inputTypicalInverseBorderDefault = "var(--mode-color-action-data-entry-inverse-with-default)";
 module.exports.inputTypicalInverseTxtDefault = "var(--mode-color-action-data-entry-inverse-txt)";
+module.exports.inputQuickpickBgDefault = "var(--mode-color-action-data-entry-default)";
+module.exports.inputQuickpickBgHover = "var(--mode-color-action-data-entry-hover-alt)";
+module.exports.inputQuickpickBgActive = "var(--mode-color-action-grayscale-active-alt)";
+module.exports.inputQuickpickBorderDefault = "var(--mode-color-generic-bg-soft)";
+module.exports.inputQuickpickBorderHover = "var(--mode-color-action-data-entry-with-default)";
+module.exports.inputQuickpickIconActive = "var(--mode-color-action-data-entry-with-active)";
+module.exports.inputQuickpickIconDefault = "var(--mode-color-generic-txt-soft)";
+module.exports.inputQuickpickIconHover = "var(--mode-color-action-data-entry-with-hover)";
+module.exports.inputQuickpickTxtActive = "var(--mode-color-action-data-entry-with-active)";
+module.exports.inputQuickpickTxtDefault = "var(--mode-color-action-data-entry-txt)";
+module.exports.inputQuickpickTxtHover = "var(--mode-color-action-data-entry-with-hover)";
 module.exports.inputSwitchBgActive = "var(--mode-color-action-grayscale-active)";
 module.exports.inputSwitchBgActivateDisabled = "var(--mode-color-action-inactive-default)";
 module.exports.inputSwitchBgDisabled = "var(--mode-color-action-inactive-default-alt)";

package/js/common/global.js

@@ -102,25 +102,25 @@ module.exports.globalModifierButtonHoverAlt = "0.10";
 module.exports.globalModifierInputDisabledFg = "0.3";
 module.exports.globalModifierInputDisabledBg = "0.05";
 module.exports.globalRadiusNone = "0";
-module.exports.globalRadiusScale = "1px";
-module.exports.globalRadiusContainer3Xs = "1px";
-module.exports.globalRadiusContainer2Xs = "2px";
-module.exports.globalRadiusContainerXs = "4px";
-module.exports.globalRadiusContainerS = "6px";
-module.exports.globalRadiusContainerM = "8px";
-module.exports.globalRadiusContainerL = "16px";
-module.exports.globalRadiusContainerXl = "24px";
-module.exports.globalRadiusContainer2Xl = "32px";
-module.exports.globalRadiusContainer3Xl = "40px";
-module.exports.globalRadiusContainer4Xl = "80px";
+module.exports.globalRadiusScale = "1";
+module.exports.globalRadiusContainer3Xs = "calc(1px * var(--global-radius-scale))";
+module.exports.globalRadiusContainer2Xs = "calc(2px * var(--global-radius-scale))";
+module.exports.globalRadiusContainerXs = "calc(4px * var(--global-radius-scale))";
+module.exports.globalRadiusContainerS = "calc(6px * var(--global-radius-scale))";
+module.exports.globalRadiusContainerM = "calc(8px * var(--global-radius-scale))";
+module.exports.globalRadiusContainerL = "calc(16px * var(--global-radius-scale))";
+module.exports.globalRadiusContainerXl = "calc(24px * var(--global-radius-scale))";
+module.exports.globalRadiusContainer2Xl = "calc(32px * var(--global-radius-scale))";
+module.exports.globalRadiusContainer3Xl = "calc(40px * var(--global-radius-scale))";
+module.exports.globalRadiusContainer4Xl = "calc(80px * var(--global-radius-scale))";
 module.exports.globalRadiusContainerCircle = "999px";
-module.exports.globalRadiusAction2Xs = "1px";
-module.exports.globalRadiusActionXs = "2px";
-module.exports.globalRadiusActionS = "4px";
-module.exports.globalRadiusActionM = "8px";
-module.exports.globalRadiusActionL = "16px";
-module.exports.globalRadiusActionXl = "20px";
-module.exports.globalRadiusAction2Xl = "24px";
+module.exports.globalRadiusAction2Xs = "calc(1px * var(--global-radius-scale))";
+module.exports.globalRadiusActionXs = "calc(2px * var(--global-radius-scale))";
+module.exports.globalRadiusActionS = "calc(4px * var(--global-radius-scale))";
+module.exports.globalRadiusActionM = "calc(8px * var(--global-radius-scale))";
+module.exports.globalRadiusActionL = "calc(16px * var(--global-radius-scale))";
+module.exports.globalRadiusActionXl = "calc(20px * var(--global-radius-scale))";
+module.exports.globalRadiusAction2Xl = "calc(24px * var(--global-radius-scale))";
 module.exports.globalRadiusActionCircle = "999px";
 module.exports.globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
 module.exports.globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";

package/js/es6/components/button.js

@@ -34,7 +34,7 @@ export const buttonTypicalPrimaryBgHover = "var(--mode-color-action-main-hover)"
 export const buttonTypicalPrimaryLabelActive = "var(--mode-color-action-main-with-active)";
 export const buttonTypicalPrimaryLabelDisabled = "var(--mode-color-action-inactive-txt-alt)";
 export const buttonTypicalPrimaryLabelDefault = "var(--mode-color-action-main-with-default)";
-export const buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-default)";
+export const buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-hover)";
 export const buttonTypicalPrimaryInverseBgActive = "var(--mode-color-action-main-inverse-active)";
 export const buttonTypicalPrimaryInverseBorderDefault = "var(--mode-color-action-main-inverse-with-default)";
 export const buttonTypicalPrimaryInverseBgDisabled = "var(--mode-color-action-inactive-inverse-default)";

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

@@ -69,6 +69,17 @@ export const inputTypicalTxtReadOnly: string;
 export const inputTypicalInverseBgDefault: string;
 export const inputTypicalInverseBorderDefault: string;
 export const inputTypicalInverseTxtDefault: string;
+export const inputQuickpickBgDefault: string;
+export const inputQuickpickBgHover: string;
+export const inputQuickpickBgActive: string;
+export const inputQuickpickBorderDefault: string;
+export const inputQuickpickBorderHover: string;
+export const inputQuickpickIconActive: string;
+export const inputQuickpickIconDefault: string;
+export const inputQuickpickIconHover: string;
+export const inputQuickpickTxtActive: string;
+export const inputQuickpickTxtDefault: string;
+export const inputQuickpickTxtHover: string;
 /** background of switch in active state */
 export const inputSwitchBgActive: string;
 /** background of switch in active when disabled */

package/js/es6/components/input.js

@@ -54,6 +54,17 @@ export const inputTypicalTxtReadOnly = "var(--mode-color-generic-txt-severe)";
 export const inputTypicalInverseBgDefault = "var(--mode-color-action-data-entry-inverse-default)";
 export const inputTypicalInverseBorderDefault = "var(--mode-color-action-data-entry-inverse-with-default)";
 export const inputTypicalInverseTxtDefault = "var(--mode-color-action-data-entry-inverse-txt)";
+export const inputQuickpickBgDefault = "var(--mode-color-action-data-entry-default)";
+export const inputQuickpickBgHover = "var(--mode-color-action-data-entry-hover-alt)";
+export const inputQuickpickBgActive = "var(--mode-color-action-grayscale-active-alt)";
+export const inputQuickpickBorderDefault = "var(--mode-color-generic-bg-soft)";
+export const inputQuickpickBorderHover = "var(--mode-color-action-data-entry-with-default)";
+export const inputQuickpickIconActive = "var(--mode-color-action-data-entry-with-active)";
+export const inputQuickpickIconDefault = "var(--mode-color-generic-txt-soft)";
+export const inputQuickpickIconHover = "var(--mode-color-action-data-entry-with-hover)";
+export const inputQuickpickTxtActive = "var(--mode-color-action-data-entry-with-active)";
+export const inputQuickpickTxtDefault = "var(--mode-color-action-data-entry-txt)";
+export const inputQuickpickTxtHover = "var(--mode-color-action-data-entry-with-hover)";
 export const inputSwitchBgActive = "var(--mode-color-action-grayscale-active)";
 export const inputSwitchBgActivateDisabled = "var(--mode-color-action-inactive-default)";
 export const inputSwitchBgDisabled = "var(--mode-color-action-inactive-default-alt)";

package/js/es6/global.js

@@ -102,25 +102,25 @@ export const globalModifierButtonHoverAlt = "0.10";
 export const globalModifierInputDisabledFg = "0.3";
 export const globalModifierInputDisabledBg = "0.05";
 export const globalRadiusNone = "0";
-export const globalRadiusScale = "1px";
-export const globalRadiusContainer3Xs = "1px";
-export const globalRadiusContainer2Xs = "2px";
-export const globalRadiusContainerXs = "4px";
-export const globalRadiusContainerS = "6px";
-export const globalRadiusContainerM = "8px";
-export const globalRadiusContainerL = "16px";
-export const globalRadiusContainerXl = "24px";
-export const globalRadiusContainer2Xl = "32px";
-export const globalRadiusContainer3Xl = "40px";
-export const globalRadiusContainer4Xl = "80px";
+export const globalRadiusScale = "1";
+export const globalRadiusContainer3Xs = "calc(1px * var(--global-radius-scale))";
+export const globalRadiusContainer2Xs = "calc(2px * var(--global-radius-scale))";
+export const globalRadiusContainerXs = "calc(4px * var(--global-radius-scale))";
+export const globalRadiusContainerS = "calc(6px * var(--global-radius-scale))";
+export const globalRadiusContainerM = "calc(8px * var(--global-radius-scale))";
+export const globalRadiusContainerL = "calc(16px * var(--global-radius-scale))";
+export const globalRadiusContainerXl = "calc(24px * var(--global-radius-scale))";
+export const globalRadiusContainer2Xl = "calc(32px * var(--global-radius-scale))";
+export const globalRadiusContainer3Xl = "calc(40px * var(--global-radius-scale))";
+export const globalRadiusContainer4Xl = "calc(80px * var(--global-radius-scale))";
 export const globalRadiusContainerCircle = "999px";
-export const globalRadiusAction2Xs = "1px";
-export const globalRadiusActionXs = "2px";
-export const globalRadiusActionS = "4px";
-export const globalRadiusActionM = "8px";
-export const globalRadiusActionL = "16px";
-export const globalRadiusActionXl = "20px";
-export const globalRadiusAction2Xl = "24px";
+export const globalRadiusAction2Xs = "calc(1px * var(--global-radius-scale))";
+export const globalRadiusActionXs = "calc(2px * var(--global-radius-scale))";
+export const globalRadiusActionS = "calc(4px * var(--global-radius-scale))";
+export const globalRadiusActionM = "calc(8px * var(--global-radius-scale))";
+export const globalRadiusActionL = "calc(16px * var(--global-radius-scale))";
+export const globalRadiusActionXl = "calc(20px * var(--global-radius-scale))";
+export const globalRadiusAction2Xl = "calc(24px * var(--global-radius-scale))";
 export const globalRadiusActionCircle = "999px";
 export const globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
 export const globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";

package/json/components/button.json

@@ -31,7 +31,7 @@
   "buttonTypicalPrimaryLabelActive": "var(--mode-color-action-main-with-active)",
   "buttonTypicalPrimaryLabelDisabled": "var(--mode-color-action-inactive-txt-alt)",
   "buttonTypicalPrimaryLabelDefault": "var(--mode-color-action-main-with-default)",
-  "buttonTypicalPrimaryLabelHover": "var(--mode-color-action-main-with-default)",
+  "buttonTypicalPrimaryLabelHover": "var(--mode-color-action-main-with-hover)",
   "buttonTypicalPrimaryInverseBgActive": "var(--mode-color-action-main-inverse-active)",
   "buttonTypicalPrimaryInverseBorderDefault": "var(--mode-color-action-main-inverse-with-default)",
   "buttonTypicalPrimaryInverseBgDisabled": "var(--mode-color-action-inactive-inverse-default)",

package/json/components/input.json

@@ -51,6 +51,17 @@
   "inputTypicalInverseBgDefault": "var(--mode-color-action-data-entry-inverse-default)",
   "inputTypicalInverseBorderDefault": "var(--mode-color-action-data-entry-inverse-with-default)",
   "inputTypicalInverseTxtDefault": "var(--mode-color-action-data-entry-inverse-txt)",
+  "inputQuickpickBgDefault": "var(--mode-color-action-data-entry-default)",
+  "inputQuickpickBgHover": "var(--mode-color-action-data-entry-hover-alt)",
+  "inputQuickpickBgActive": "var(--mode-color-action-grayscale-active-alt)",
+  "inputQuickpickBorderDefault": "var(--mode-color-generic-bg-soft)",
+  "inputQuickpickBorderHover": "var(--mode-color-action-data-entry-with-default)",
+  "inputQuickpickIconActive": "var(--mode-color-action-data-entry-with-active)",
+  "inputQuickpickIconDefault": "var(--mode-color-generic-txt-soft)",
+  "inputQuickpickIconHover": "var(--mode-color-action-data-entry-with-hover)",
+  "inputQuickpickTxtActive": "var(--mode-color-action-data-entry-with-active)",
+  "inputQuickpickTxtDefault": "var(--mode-color-action-data-entry-txt)",
+  "inputQuickpickTxtHover": "var(--mode-color-action-data-entry-with-hover)",
   "inputSwitchBgActive": "var(--mode-color-action-grayscale-active)",
   "inputSwitchBgActivateDisabled": "var(--mode-color-action-inactive-default)",
   "inputSwitchBgDisabled": "var(--mode-color-action-inactive-default-alt)",

package/json/global.json

@@ -541,25 +541,25 @@
   "globalModifierInputDisabledFg": "0.3",
   "globalModifierInputDisabledBg": "0.05",
   "globalRadiusNone": "0",
-  "globalRadiusScale": "1px",
-  "globalRadiusContainer3Xs": "1px",
-  "globalRadiusContainer2Xs": "2px",
-  "globalRadiusContainerXs": "4px",
-  "globalRadiusContainerS": "6px",
-  "globalRadiusContainerM": "8px",
-  "globalRadiusContainerL": "16px",
-  "globalRadiusContainerXl": "24px",
-  "globalRadiusContainer2Xl": "32px",
-  "globalRadiusContainer3Xl": "40px",
-  "globalRadiusContainer4Xl": "80px",
+  "globalRadiusScale": "1",
+  "globalRadiusContainer3Xs": "calc(1px * var(--global-radius-scale))",
+  "globalRadiusContainer2Xs": "calc(2px * var(--global-radius-scale))",
+  "globalRadiusContainerXs": "calc(4px * var(--global-radius-scale))",
+  "globalRadiusContainerS": "calc(6px * var(--global-radius-scale))",
+  "globalRadiusContainerM": "calc(8px * var(--global-radius-scale))",
+  "globalRadiusContainerL": "calc(16px * var(--global-radius-scale))",
+  "globalRadiusContainerXl": "calc(24px * var(--global-radius-scale))",
+  "globalRadiusContainer2Xl": "calc(32px * var(--global-radius-scale))",
+  "globalRadiusContainer3Xl": "calc(40px * var(--global-radius-scale))",
+  "globalRadiusContainer4Xl": "calc(80px * var(--global-radius-scale))",
   "globalRadiusContainerCircle": "999px",
-  "globalRadiusAction2Xs": "1px",
-  "globalRadiusActionXs": "2px",
-  "globalRadiusActionS": "4px",
-  "globalRadiusActionM": "8px",
-  "globalRadiusActionL": "16px",
-  "globalRadiusActionXl": "20px",
-  "globalRadiusAction2Xl": "24px",
+  "globalRadiusAction2Xs": "calc(1px * var(--global-radius-scale))",
+  "globalRadiusActionXs": "calc(2px * var(--global-radius-scale))",
+  "globalRadiusActionS": "calc(4px * var(--global-radius-scale))",
+  "globalRadiusActionM": "calc(8px * var(--global-radius-scale))",
+  "globalRadiusActionL": "calc(16px * var(--global-radius-scale))",
+  "globalRadiusActionXl": "calc(20px * var(--global-radius-scale))",
+  "globalRadiusAction2Xl": "calc(24px * var(--global-radius-scale))",
   "globalRadiusActionCircle": "999px",
   "globalDepthNone": "0 0 0 0 rgba(0,0,0,0)",
   "globalDepthLvl0": "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)",

package/package.json

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

package/scss/components/button.scss

@@ -28,7 +28,7 @@ $button-typical-primary-bg-default: $mode-color-action-main-default;
 $button-typical-primary-bg-hover: $mode-color-action-main-hover;
 $button-typical-primary-label-active: $mode-color-action-main-with-active;
 $button-typical-primary-label-default: $mode-color-action-main-with-default;
-$button-typical-primary-label-hover: $mode-color-action-main-with-default;
+$button-typical-primary-label-hover: $mode-color-action-main-with-hover;
 $button-typical-primary-inverse-bg-active: $mode-color-action-main-inverse-active;
 $button-typical-primary-inverse-border-default: $mode-color-action-main-inverse-with-default;
 $button-typical-primary-inverse-bg-disabled: $mode-color-action-inactive-inverse-default;

package/scss/components/input.scss

@@ -33,6 +33,14 @@ $input-typical-icon-alt-active: $mode-color-action-data-entry-with-active-alt;
 $input-typical-txt-hover: $mode-color-action-data-entry-with-hover;
 $input-typical-inverse-bg-default: $mode-color-action-data-entry-inverse-default;
 $input-typical-inverse-border-default: $mode-color-action-data-entry-inverse-with-default;
+$input-quickpick-bg-default: $mode-color-action-data-entry-default;
+$input-quickpick-bg-hover: $mode-color-action-data-entry-hover-alt;
+$input-quickpick-border-default: $mode-color-generic-bg-soft;
+$input-quickpick-border-hover: $mode-color-action-data-entry-with-default;
+$input-quickpick-icon-active: $mode-color-action-data-entry-with-active;
+$input-quickpick-icon-hover: $mode-color-action-data-entry-with-hover;
+$input-quickpick-txt-active: $mode-color-action-data-entry-with-active;
+$input-quickpick-txt-hover: $mode-color-action-data-entry-with-hover;
 $input-switch-bg-active: $mode-color-action-grayscale-active;
 $input-switch-bg-activate-disabled: $mode-color-action-inactive-default;
 $input-switch-bg-disabled: $mode-color-action-inactive-default-alt;
@@ -54,6 +62,8 @@ $input-validation-inverse-border-error: $mode-color-status-negative-inverse-defa
 $input-validation-inverse-bar-error: $mode-color-status-negative-inverse-default;
 $input-validation-inverse-label-error: $mode-color-status-negative-inverse-default;
 $input-typical-txt-read-only: $mode-color-generic-txt-severe;
+$input-quickpick-bg-active: $mode-color-action-grayscale-active-alt;
+$input-quickpick-icon-default: $mode-color-generic-txt-soft;
 $input-switch-fg-activate-disabled: $mode-color-action-inactive-txt-alt;
 $input-calendar-txt-alt: $mode-color-action-data-entry-txt-alt;
 $input-calendar-txt-disabled: $mode-color-action-inactive-txt;
@@ -78,5 +88,6 @@ $input-typical-txt-alt: $mode-color-action-data-entry-txt-alt;
 $input-typical-txt-default: $mode-color-action-data-entry-txt;
 $input-typical-txt-disabled: $mode-color-action-inactive-txt;
 $input-typical-inverse-txt-default: $mode-color-action-data-entry-inverse-txt;
+$input-quickpick-txt-default: $mode-color-action-data-entry-txt;
 $input-switch-label-active: $mode-color-action-data-entry-txt;
 $input-switch-label-default: $mode-color-action-data-entry-txt-alt;

package/scss/global.scss

@@ -23,7 +23,7 @@ $global-modifier-button-hover-alt: 0.10;
 $global-modifier-input-disabled-fg: 0.3;
 $global-modifier-input-disabled-bg: 0.05;
 $global-radius-none: 0;
-$global-radius-scale: 1px;
+$global-radius-scale: 1;
 $global-radius-container-circle: 999px;
 $global-radius-action-circle: 999px;
 $global-depth-none: 0 0 0 0 rgba(0,0,0,0);
@@ -115,23 +115,23 @@ $global-borderwidth-m: 3px;
 $global-borderwidth-l: 4px;
 $global-borderwidth-xl: 6px;
 $global-borderwidth-xxl: 8px;
-$global-radius-container-3-xs: 1px;
-$global-radius-container-2-xs: 2px;
-$global-radius-container-xs: 4px;
-$global-radius-container-s: 6px;
-$global-radius-container-m: 8px;
-$global-radius-container-l: 16px;
-$global-radius-container-xl: 24px;
-$global-radius-container-2-xl: 32px;
-$global-radius-container-3-xl: 40px;
-$global-radius-container-4-xl: 80px;
-$global-radius-action-2-xs: 1px;
-$global-radius-action-xs: 2px;
-$global-radius-action-s: 4px;
-$global-radius-action-m: 8px;
-$global-radius-action-l: 16px;
-$global-radius-action-xl: 20px;
-$global-radius-action-2-xl: 24px;
+$global-radius-container-3-xs: calc(1px * $global-radius-scale);
+$global-radius-container-2-xs: calc(2px * $global-radius-scale);
+$global-radius-container-xs: calc(4px * $global-radius-scale);
+$global-radius-container-s: calc(6px * $global-radius-scale);
+$global-radius-container-m: calc(8px * $global-radius-scale);
+$global-radius-container-l: calc(16px * $global-radius-scale);
+$global-radius-container-xl: calc(24px * $global-radius-scale);
+$global-radius-container-2-xl: calc(32px * $global-radius-scale);
+$global-radius-container-3-xl: calc(40px * $global-radius-scale);
+$global-radius-container-4-xl: calc(80px * $global-radius-scale);
+$global-radius-action-2-xs: calc(1px * $global-radius-scale);
+$global-radius-action-xs: calc(2px * $global-radius-scale);
+$global-radius-action-s: calc(4px * $global-radius-scale);
+$global-radius-action-m: calc(8px * $global-radius-scale);
+$global-radius-action-l: calc(16px * $global-radius-scale);
+$global-radius-action-xl: calc(20px * $global-radius-scale);
+$global-radius-action-2-xl: calc(24px * $global-radius-scale);
 $global-size-none: 0px;
 $global-size-6-xs: 2px;
 $global-size-5-xs: 4px;