@sage/design-tokens 18.3.0 → 18.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/css/components/button.css +2 -2
  2. package/css/components/container.css +1 -1
  3. package/css/components/focus.css +2 -0
  4. package/css/light-all.css +5 -3
  5. package/js/common/components/button.js +2 -2
  6. package/js/common/components/container.js +1 -1
  7. package/js/common/components/focus.d.ts +4 -0
  8. package/js/common/components/focus.js +2 -0
  9. package/js/es6/components/button.js +2 -2
  10. package/js/es6/components/container.js +1 -1
  11. package/js/es6/components/focus.d.ts +16 -0
  12. package/js/es6/components/focus.js +2 -0
  13. package/json/components/button.json +2 -2
  14. package/json/components/container.json +1 -1
  15. package/json/components/focus.json +3 -1
  16. package/package.json +1 -1
  17. package/scss/components/button.scss +2 -2
  18. package/scss/components/container.scss +1 -1
  19. package/scss/components/focus.scss +2 -0
package/css/components/button.css CHANGED
@@ -61,12 +61,14 @@
61
61
  --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
62
62
  --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
63
63
  --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
64
+ --button-typical-subtle-bg-hover: var(--mode-color-generic-bg-delicate);
64
65
  --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);
65
66
  --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);
66
67
  --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
67
68
  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
68
69
  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
69
70
  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
71
+ --button-typical-toggle-bg-hover: var(--mode-color-generic-bg-delicate);
70
72
  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);
71
73
  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);
72
74
  --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);
@@ -101,13 +103,11 @@
101
103
  --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
102
104
  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
103
105
  --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);
104
- --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
105
106
  --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);
106
107
  --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);
107
108
  --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);
108
109
  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
109
110
  --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);
110
- --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
111
111
  --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);
112
112
  --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);
113
113
  --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);
package/css/components/container.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);
23
23
  --container-action-bg-default: var(--mode-color-generic-bg-nought);
24
24
  --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);
25
+ --container-action-bg-hover: var(--mode-color-generic-bg-delicate);
25
26
  --container-action-border-active: var(--mode-color-action-grayscale-active);
26
27
  --container-action-border-alt: var(--mode-color-generic-fg-moderate);
27
28
  --container-action-border-inactive: var(--mode-color-generic-fg-firm);
@@ -60,7 +61,6 @@
60
61
  --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);
61
62
  --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);
62
63
  --container-quote-border: var(--mode-color-action-main-default);
63
- --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);
64
64
  --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);
65
65
  --container-action-icon-default: var(--mode-color-action-grayscale-default);
66
66
  --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);
package/css/components/focus.css CHANGED
@@ -15,4 +15,6 @@
15
15
  --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);
16
16
  --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);
17
17
  --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
18
+ --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
19
+ --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
18
20
  }
package/css/light-all.css CHANGED
@@ -907,6 +907,8 @@
907
907
  --focus-inverse-borderalt: var(--mode-color-action-focus-inverse-default);
908
908
  --focus-inverse-border: var(--mode-color-action-focus-inverse-with-default);
909
909
  --focus-inverse-label: var(--mode-color-action-focus-inverse-txt);
910
+ --focus-shadow-default: 0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border);
911
+ --focus-shadow-inset: inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt);
910
912
  --dataviz-chart-bar-fuchsia-bg-alt: var(--mode-color-colorcode-pink-faint);
911
913
  --dataviz-chart-bar-fuchsia-bg-default: var(--mode-color-colorcode-pink-intense);
912
914
  --dataviz-chart-bar-fuchsia-border: var(--mode-color-colorcode-pink-intense);
@@ -1073,6 +1075,7 @@
1073
1075
  --container-action-bg-footer-default: var(--mode-color-generic-bg-nought);
1074
1076
  --container-action-bg-default: var(--mode-color-generic-bg-nought);
1075
1077
  --container-action-bg-disabled: var(--mode-color-action-inactive-default-alt);
1078
+ --container-action-bg-hover: var(--mode-color-generic-bg-delicate);
1076
1079
  --container-action-border-active: var(--mode-color-action-grayscale-active);
1077
1080
  --container-action-border-alt: var(--mode-color-generic-fg-moderate);
1078
1081
  --container-action-border-inactive: var(--mode-color-generic-fg-firm);
@@ -1111,7 +1114,6 @@
1111
1114
  --container-standard-priority-inverse-bg-neutral: var(--mode-color-status-neutral-inverse-default);
1112
1115
  --container-standard-priority-inverse-bg-positive: var(--mode-color-status-positive-inverse-default);
1113
1116
  --container-quote-border: var(--mode-color-action-main-default);
1114
- --container-action-bg-hover: var(--mode-color-action-grayscale-hover-alt);
1115
1117
  --container-action-borderalt-hover: var(--mode-color-action-grayscale-default);
1116
1118
  --container-action-icon-default: var(--mode-color-action-grayscale-default);
1117
1119
  --container-action-icon-alt-default: var(--mode-color-action-grayscale-default-alt);
@@ -1184,12 +1186,14 @@
1184
1186
  --button-typical-tertiary-inverse-border-hover: var(--mode-color-action-main-inverse-hover);
1185
1187
  --button-typical-tertiary-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
1186
1188
  --button-typical-tertiary-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
1189
+ --button-typical-subtle-bg-hover: var(--mode-color-generic-bg-delicate);
1187
1190
  --button-typical-subtle-label-active: var(--mode-color-action-grayscale-with-active-alt);
1188
1191
  --button-typical-subtle-label-hover: var(--mode-color-action-grayscale-with-hover);
1189
1192
  --button-typical-subtle-inverse-label-active: var(--mode-color-action-grayscale-inverse-with-active-alt);
1190
1193
  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
1191
1194
  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
1192
1195
  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
1196
+ --button-typical-toggle-bg-hover: var(--mode-color-generic-bg-delicate);
1193
1197
  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);
1194
1198
  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);
1195
1199
  --button-typical-toggle-label-hover: var(--mode-color-action-grayscale-with-hover);
@@ -1224,13 +1228,11 @@
1224
1228
  --button-typical-tertiary-inverse-border-default: var(--mode-color-action-main-inverse-default-alt);
1225
1229
  --button-typical-tertiary-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
1226
1230
  --button-typical-subtle-bg-active: var(--mode-color-action-grayscale-active-alt);
1227
- --button-typical-subtle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
1228
1231
  --button-typical-subtle-label-default: var(--mode-color-action-grayscale-default);
1229
1232
  --button-typical-subtle-inverse-bg-active: var(--mode-color-action-grayscale-inverse-active-alt);
1230
1233
  --button-typical-subtle-inverse-bg-hover: var(--mode-color-action-grayscale-inverse-hover-alt);
1231
1234
  --button-typical-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
1232
1235
  --button-typical-toggle-label-active-disabled: var(--mode-color-action-inactive-txt-alt);
1233
- --button-typical-toggle-bg-hover: var(--mode-color-action-grayscale-hover-alt);
1234
1236
  --button-typical-toggle-border-default: var(--mode-color-action-grayscale-default);
1235
1237
  --button-typical-toggle-label-default: var(--mode-color-action-grayscale-default-alt);
1236
1238
  --button-video-bg-blur: var(--mode-color-action-grayscale-hover-alt);
package/js/common/components/button.js CHANGED
@@ -89,7 +89,7 @@ module.exports.buttonTypicalTertiaryInverseLabelDisabled = "var(--mode-color-act
89
89
  module.exports.buttonTypicalTertiaryInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
90
90
  module.exports.buttonTypicalTertiaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
91
91
  module.exports.buttonTypicalSubtleBgActive = "var(--mode-color-action-grayscale-active-alt)";
92
- module.exports.buttonTypicalSubtleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
92
+ module.exports.buttonTypicalSubtleBgHover = "var(--mode-color-generic-bg-delicate)";
93
93
  module.exports.buttonTypicalSubtleLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
94
94
  module.exports.buttonTypicalSubtleLabelDisabled = "var(--mode-color-action-inactive-txt)";
95
95
  module.exports.buttonTypicalSubtleLabelDefault = "var(--mode-color-action-grayscale-default)";
@@ -103,7 +103,7 @@ module.exports.buttonTypicalSubtleInverseLabelHover = "var(--mode-color-action-g
103
103
  module.exports.buttonTypicalToggleBgActiveDisabled = "var(--mode-color-action-inactive-default)";
104
104
  module.exports.buttonTypicalToggleLabelActiveDisabled = "var(--mode-color-action-inactive-txt-alt)";
105
105
  module.exports.buttonTypicalToggleBgActive = "var(--mode-color-action-grayscale-active)";
106
- module.exports.buttonTypicalToggleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
106
+ module.exports.buttonTypicalToggleBgHover = "var(--mode-color-generic-bg-delicate)";
107
107
  module.exports.buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
108
108
  module.exports.buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
109
109
  module.exports.buttonTypicalToggleLabelActive = "var(--mode-color-action-grayscale-with-active)";
package/js/common/components/container.js CHANGED
@@ -8,7 +8,7 @@ module.exports.containerActionBorderActivated = "var(--mode-color-status-positiv
8
8
  module.exports.containerActionBgFooterDefault = "var(--mode-color-generic-bg-nought)";
9
9
  module.exports.containerActionBgDefault = "var(--mode-color-generic-bg-nought)";
10
10
  module.exports.containerActionBgDisabled = "var(--mode-color-action-inactive-default-alt)";
11
- module.exports.containerActionBgHover = "var(--mode-color-action-grayscale-hover-alt)";
11
+ module.exports.containerActionBgHover = "var(--mode-color-generic-bg-delicate)";
12
12
  module.exports.containerActionBorderActive = "var(--mode-color-action-grayscale-active)";
13
13
  module.exports.containerActionBorderAlt = "var(--mode-color-generic-fg-moderate)";
14
14
  module.exports.containerActionBorderaltHover = "var(--mode-color-action-grayscale-default)";
package/js/common/components/focus.d.ts CHANGED
@@ -30,5 +30,9 @@ declare const tokens: {
30
30
  border: DesignToken;
31
31
  label: DesignToken;
32
32
  };
33
+ shadow: {
34
+ default: DesignToken;
35
+ inset: DesignToken;
36
+ };
33
37
  };
34
38
  };
package/js/common/components/focus.js CHANGED
@@ -10,3 +10,5 @@ module.exports.focusInverseBg = "var(--mode-color-action-focus-inverse-with-defa
10
10
  module.exports.focusInverseBorderalt = "var(--mode-color-action-focus-inverse-default)";
11
11
  module.exports.focusInverseBorder = "var(--mode-color-action-focus-inverse-with-default)";
12
12
  module.exports.focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
13
+ module.exports.focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
14
+ 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 CHANGED
@@ -89,7 +89,7 @@ export const buttonTypicalTertiaryInverseLabelDisabled = "var(--mode-color-actio
89
89
  export const buttonTypicalTertiaryInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
90
90
  export const buttonTypicalTertiaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
91
91
  export const buttonTypicalSubtleBgActive = "var(--mode-color-action-grayscale-active-alt)";
92
- export const buttonTypicalSubtleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
92
+ export const buttonTypicalSubtleBgHover = "var(--mode-color-generic-bg-delicate)";
93
93
  export const buttonTypicalSubtleLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
94
94
  export const buttonTypicalSubtleLabelDisabled = "var(--mode-color-action-inactive-txt)";
95
95
  export const buttonTypicalSubtleLabelDefault = "var(--mode-color-action-grayscale-default)";
@@ -103,7 +103,7 @@ export const buttonTypicalSubtleInverseLabelHover = "var(--mode-color-action-gra
103
103
  export const buttonTypicalToggleBgActiveDisabled = "var(--mode-color-action-inactive-default)";
104
104
  export const buttonTypicalToggleLabelActiveDisabled = "var(--mode-color-action-inactive-txt-alt)";
105
105
  export const buttonTypicalToggleBgActive = "var(--mode-color-action-grayscale-active)";
106
- export const buttonTypicalToggleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
106
+ export const buttonTypicalToggleBgHover = "var(--mode-color-generic-bg-delicate)";
107
107
  export const buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
108
108
  export const buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
109
109
  export const buttonTypicalToggleLabelActive = "var(--mode-color-action-grayscale-with-active)";
package/js/es6/components/container.js CHANGED
@@ -8,7 +8,7 @@ export const containerActionBorderActivated = "var(--mode-color-status-positive-
8
8
  export const containerActionBgFooterDefault = "var(--mode-color-generic-bg-nought)";
9
9
  export const containerActionBgDefault = "var(--mode-color-generic-bg-nought)";
10
10
  export const containerActionBgDisabled = "var(--mode-color-action-inactive-default-alt)";
11
- export const containerActionBgHover = "var(--mode-color-action-grayscale-hover-alt)";
11
+ export const containerActionBgHover = "var(--mode-color-generic-bg-delicate)";
12
12
  export const containerActionBorderActive = "var(--mode-color-action-grayscale-active)";
13
13
  export const containerActionBorderAlt = "var(--mode-color-generic-fg-moderate)";
14
14
  export const containerActionBorderaltHover = "var(--mode-color-action-grayscale-default)";
package/js/es6/components/focus.d.ts CHANGED
@@ -14,3 +14,19 @@ export const focusInverseBg: string;
14
14
  export const focusInverseBorderalt: string;
15
15
  export const focusInverseBorder: string;
16
16
  export const focusInverseLabel: string;
17
+ export const focusShadowDefault: {
18
+ blur: string;
19
+ spread: string;
20
+ color: string;
21
+ type: string;
22
+ offsetX: string;
23
+ offsetY: string;
24
+ }[];
25
+ export const focusShadowInset: {
26
+ blur: string;
27
+ spread: string;
28
+ color: string;
29
+ type: string;
30
+ offsetX: string;
31
+ offsetY: string;
32
+ }[];
package/js/es6/components/focus.js CHANGED
@@ -10,3 +10,5 @@ export const focusInverseBg = "var(--mode-color-action-focus-inverse-with-defaul
10
10
  export const focusInverseBorderalt = "var(--mode-color-action-focus-inverse-default)";
11
11
  export const focusInverseBorder = "var(--mode-color-action-focus-inverse-with-default)";
12
12
  export const focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
13
+ export const focusShadowDefault = "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)";
14
+ export const focusShadowInset = "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)";
package/json/components/button.json CHANGED
@@ -86,7 +86,7 @@
86
86
  "buttonTypicalTertiaryInverseLabelDefault": "var(--mode-color-action-grayscale-inverse-default)",
87
87
  "buttonTypicalTertiaryInverseLabelHover": "var(--mode-color-action-grayscale-inverse-with-hover)",
88
88
  "buttonTypicalSubtleBgActive": "var(--mode-color-action-grayscale-active-alt)",
89
- "buttonTypicalSubtleBgHover": "var(--mode-color-action-grayscale-hover-alt)",
89
+ "buttonTypicalSubtleBgHover": "var(--mode-color-generic-bg-delicate)",
90
90
  "buttonTypicalSubtleLabelActive": "var(--mode-color-action-grayscale-with-active-alt)",
91
91
  "buttonTypicalSubtleLabelDisabled": "var(--mode-color-action-inactive-txt)",
92
92
  "buttonTypicalSubtleLabelDefault": "var(--mode-color-action-grayscale-default)",
@@ -100,7 +100,7 @@
100
100
  "buttonTypicalToggleBgActiveDisabled": "var(--mode-color-action-inactive-default)",
101
101
  "buttonTypicalToggleLabelActiveDisabled": "var(--mode-color-action-inactive-txt-alt)",
102
102
  "buttonTypicalToggleBgActive": "var(--mode-color-action-grayscale-active)",
103
- "buttonTypicalToggleBgHover": "var(--mode-color-action-grayscale-hover-alt)",
103
+ "buttonTypicalToggleBgHover": "var(--mode-color-generic-bg-delicate)",
104
104
  "buttonTypicalToggleBorderDefault": "var(--mode-color-action-grayscale-default)",
105
105
  "buttonTypicalToggleBorderDisabled": "var(--mode-color-action-inactive-default)",
106
106
  "buttonTypicalToggleLabelActive": "var(--mode-color-action-grayscale-with-active)",
package/json/components/container.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "containerActionBgFooterDefault": "var(--mode-color-generic-bg-nought)",
6
6
  "containerActionBgDefault": "var(--mode-color-generic-bg-nought)",
7
7
  "containerActionBgDisabled": "var(--mode-color-action-inactive-default-alt)",
8
- "containerActionBgHover": "var(--mode-color-action-grayscale-hover-alt)",
8
+ "containerActionBgHover": "var(--mode-color-generic-bg-delicate)",
9
9
  "containerActionBorderActive": "var(--mode-color-action-grayscale-active)",
10
10
  "containerActionBorderAlt": "var(--mode-color-generic-fg-moderate)",
11
11
  "containerActionBorderaltHover": "var(--mode-color-action-grayscale-default)",
package/json/components/focus.json CHANGED
@@ -6,5 +6,7 @@
6
6
  "focusInverseBg": "var(--mode-color-action-focus-inverse-with-default-alt)",
7
7
  "focusInverseBorderalt": "var(--mode-color-action-focus-inverse-default)",
8
8
  "focusInverseBorder": "var(--mode-color-action-focus-inverse-with-default)",
9
- "focusInverseLabel": "var(--mode-color-action-focus-inverse-txt)"
9
+ "focusInverseLabel": "var(--mode-color-action-focus-inverse-txt)",
10
+ "focusShadowDefault": "0 0 0 2px var(--focus-borderalt), 0 0 0 4px var(--focus-border)",
11
+ "focusShadowInset": "inset 0 0 0 2px var(--focus-border), inset 0 0 0 4px var(--focus-borderalt)"
10
12
  }
package/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  },
7
7
  "description": "Design tokens for the Sage Design System.",
8
8
  "author": "The Sage Group plc",
9
- "version": "18.3.0",
9
+ "version": "18.4.0",
10
10
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
11
11
  "tags": [
12
12
  "design tokens",
package/scss/components/button.scss CHANGED
@@ -57,12 +57,14 @@ $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-in
57
57
  $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
58
58
  $button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
59
59
  $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
60
+ $button-typical-subtle-bg-hover: $mode-color-generic-bg-delicate;
60
61
  $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
61
62
  $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
62
63
  $button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
63
64
  $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
64
65
  $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
65
66
  $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
67
+ $button-typical-toggle-bg-hover: $mode-color-generic-bg-delicate;
66
68
  $button-typical-toggle-border-disabled: $mode-color-action-inactive-default;
67
69
  $button-typical-toggle-label-active: $mode-color-action-grayscale-with-active;
68
70
  $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
97
99
  $button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
98
100
  $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
99
101
  $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
100
- $button-typical-subtle-bg-hover: $mode-color-action-grayscale-hover-alt;
101
102
  $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
102
103
  $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
103
104
  $button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
104
105
  $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
105
106
  $button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
106
- $button-typical-toggle-bg-hover: $mode-color-action-grayscale-hover-alt;
107
107
  $button-typical-toggle-border-default: $mode-color-action-grayscale-default;
108
108
  $button-typical-toggle-label-default: $mode-color-action-grayscale-default-alt;
109
109
  $button-video-bg-blur: $mode-color-action-grayscale-hover-alt;
package/scss/components/container.scss CHANGED
@@ -18,6 +18,7 @@ $container-action-border-activated: $mode-color-status-positive-default;
18
18
  $container-action-bg-footer-default: $mode-color-generic-bg-nought;
19
19
  $container-action-bg-default: $mode-color-generic-bg-nought;
20
20
  $container-action-bg-disabled: $mode-color-action-inactive-default-alt;
21
+ $container-action-bg-hover: $mode-color-generic-bg-delicate;
21
22
  $container-action-border-active: $mode-color-action-grayscale-active;
22
23
  $container-action-border-alt: $mode-color-generic-fg-moderate;
23
24
  $container-action-border-inactive: $mode-color-generic-fg-firm;
@@ -56,7 +57,6 @@ $container-standard-priority-inverse-bg-info: $mode-color-status-info-inverse-de
56
57
  $container-standard-priority-inverse-bg-neutral: $mode-color-status-neutral-inverse-default;
57
58
  $container-standard-priority-inverse-bg-positive: $mode-color-status-positive-inverse-default;
58
59
  $container-quote-border: $mode-color-action-main-default;
59
- $container-action-bg-hover: $mode-color-action-grayscale-hover-alt;
60
60
  $container-action-borderalt-hover: $mode-color-action-grayscale-default;
61
61
  $container-action-icon-default: $mode-color-action-grayscale-default;
62
62
  $container-action-icon-alt-default: $mode-color-action-grayscale-default-alt;
package/scss/components/focus.scss CHANGED
@@ -11,3 +11,5 @@ $focus-inverse-bg: $mode-color-action-focus-inverse-with-default-alt;
11
11
  $focus-inverse-borderalt: $mode-color-action-focus-inverse-default;
12
12
  $focus-inverse-border: $mode-color-action-focus-inverse-with-default;
13
13
  $focus-inverse-label: $mode-color-action-focus-inverse-txt;
14
+ $focus-shadow-default: 0 0 0 2px $focus-borderalt, 0 0 0 4px $focus-border;
15
+ $focus-shadow-inset: inset 0 0 0 2px $focus-border, inset 0 0 0 4px $focus-borderalt;