@sage/design-tokens 17.0.1 → 17.1.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 (61) hide show
  1. package/css/components/profile.css +20 -0
  2. package/css/dark.css +1 -0
  3. package/css/light.css +1 -0
  4. package/js/common/components/button.js +58 -58
  5. package/js/common/components/container.js +5 -5
  6. package/js/common/components/focus.js +4 -4
  7. package/js/common/components/input.js +47 -47
  8. package/js/common/components/link.js +8 -8
  9. package/js/common/components/logo.js +4 -4
  10. package/js/common/components/message.js +19 -19
  11. package/js/common/components/nav.js +10 -10
  12. package/js/common/components/pill.js +52 -52
  13. package/js/common/components/popover.js +12 -12
  14. package/js/common/components/profile.d.ts +42 -0
  15. package/js/common/components/profile.js +73 -53
  16. package/js/common/components/progress.js +2 -2
  17. package/js/common/components/tab.js +5 -5
  18. package/js/common/components/table.js +1 -1
  19. package/js/common/dark.d.ts +1 -0
  20. package/js/common/dark.js +1 -0
  21. package/js/common/light.d.ts +1 -0
  22. package/js/common/light.js +1 -0
  23. package/js/es6/components/button.js +58 -58
  24. package/js/es6/components/container.js +5 -5
  25. package/js/es6/components/focus.js +4 -4
  26. package/js/es6/components/input.js +47 -47
  27. package/js/es6/components/link.js +8 -8
  28. package/js/es6/components/logo.js +4 -4
  29. package/js/es6/components/message.js +19 -19
  30. package/js/es6/components/nav.js +10 -10
  31. package/js/es6/components/pill.js +52 -52
  32. package/js/es6/components/popover.js +12 -12
  33. package/js/es6/components/profile.d.ts +21 -0
  34. package/js/es6/components/profile.js +73 -53
  35. package/js/es6/components/progress.js +2 -2
  36. package/js/es6/components/tab.js +5 -5
  37. package/js/es6/components/table.js +1 -1
  38. package/js/es6/dark.d.ts +2 -0
  39. package/js/es6/dark.js +1 -0
  40. package/js/es6/light.d.ts +2 -0
  41. package/js/es6/light.js +1 -0
  42. package/json/components/button.json +58 -58
  43. package/json/components/container.json +5 -5
  44. package/json/components/focus.json +4 -4
  45. package/json/components/input.json +47 -47
  46. package/json/components/link.json +8 -8
  47. package/json/components/logo.json +4 -4
  48. package/json/components/message.json +19 -19
  49. package/json/components/nav.json +10 -10
  50. package/json/components/pill.json +52 -52
  51. package/json/components/popover.json +12 -12
  52. package/json/components/profile.json +73 -53
  53. package/json/components/progress.json +2 -2
  54. package/json/components/tab.json +5 -5
  55. package/json/components/table.json +1 -1
  56. package/json/dark.json +1 -0
  57. package/json/light.json +1 -0
  58. package/package.json +1 -1
  59. package/scss/components/profile.scss +20 -0
  60. package/scss/dark.scss +1 -0
  61. package/scss/light.scss +1 -0
package/css/components/profile.css CHANGED
@@ -12,6 +12,26 @@
12
12
  --profile-size-outside-xxl: 128px;
13
13
  --profile-bg-def: var(--mode-color-generic-bg-nought);
14
14
  --profile-border-default: var(--mode-color-generic-fg-moderate);
15
+ --profile-swatches-blue-bg-default: var(--mode-color-status-custom-blue-default-alt);
16
+ --profile-swatches-blue-label-default: var(--mode-color-status-custom-blue-default);
17
+ --profile-swatches-teal-bg-default: var(--mode-color-status-custom-teal-default-alt);
18
+ --profile-swatches-teal-label-default: var(--mode-color-status-custom-teal-default);
19
+ --profile-swatches-green-bg-default: var(--mode-color-status-custom-green-default-alt);
20
+ --profile-swatches-green-label-default: var(--mode-color-status-custom-green-default);
21
+ --profile-swatches-lime-bg-default: var(--mode-color-status-custom-lime-default-alt);
22
+ --profile-swatches-lime-label-default: var(--mode-color-status-custom-lime-default);
23
+ --profile-swatches-orange-bg-default: var(--mode-color-status-custom-orange-default-alt);
24
+ --profile-swatches-orange-label-default: var(--mode-color-status-custom-orange-txt);
25
+ --profile-swatches-red-bg-default: var(--mode-color-status-custom-red-default-alt);
26
+ --profile-swatches-red-label-default: var(--mode-color-status-custom-red-default);
27
+ --profile-swatches-pink-bg-default: var(--mode-color-status-custom-pink-default-alt);
28
+ --profile-swatches-pink-label-default: var(--mode-color-status-custom-pink-default);
29
+ --profile-swatches-purple-bg-default: var(--mode-color-status-custom-purple-default-alt);
30
+ --profile-swatches-purple-label-default: var(--mode-color-status-custom-purple-default);
31
+ --profile-swatches-slate-bg-default: var(--mode-color-status-custom-slate-default-alt);
32
+ --profile-swatches-slate-label-default: var(--mode-color-status-custom-slate-default);
33
+ --profile-swatches-gray-bg-default: var(--mode-color-status-custom-gray-default-alt);
34
+ --profile-swatches-gray-label-default: var(--mode-color-status-custom-gray-default);
15
35
  --profile-font-initials-xs: var(--global-font-static-comp-placeholder-xs);
16
36
  --profile-font-initials-s: var(--global-font-static-comp-placeholder-s);
17
37
  --profile-font-initials-m: var(--global-font-static-comp-placeholder-m);
package/css/dark.css CHANGED
@@ -255,6 +255,7 @@
255
255
  --mode-color-status-custom-orange-default-alt: #1d0300;
256
256
  --mode-color-status-custom-orange-hover: #e5631c;
257
257
  --mode-color-status-custom-orange-hover-alt: #360900;
258
+ --mode-color-status-custom-orange-txt: #e24300;
258
259
  --mode-color-status-custom-red-default: #f50059;
259
260
  --mode-color-status-custom-red-default-alt: #1e0005;
260
261
  --mode-color-status-custom-red-hover: #ff3e6a;
package/css/light.css CHANGED
@@ -255,6 +255,7 @@
255
255
  --mode-color-status-custom-orange-default-alt: #fff7eb;
256
256
  --mode-color-status-custom-orange-hover: #b33400;
257
257
  --mode-color-status-custom-orange-hover-alt: #ffeaca;
258
+ --mode-color-status-custom-orange-txt: #b33400;
258
259
  --mode-color-status-custom-red-default: #db004e;
259
260
  --mode-color-status-custom-red-default-alt: #fff5f6;
260
261
  --mode-color-status-custom-red-hover: #c40044;
package/js/common/components/button.js CHANGED
@@ -9,17 +9,17 @@ module.exports.buttonAiBorderActive = "linear-gradient(90deg, var(--mode-color-a
9
9
  module.exports.buttonAiBorderDisabled = "var(--mode-color-action-inactive-default)";
10
10
  module.exports.buttonAiBorderDefault = "linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%)";
11
11
  module.exports.buttonAiBorderHover = "linear-gradient(90deg, var(--mode-color-ai-stop-1) 0%, var(--mode-color-ai-stop-2) 40%, var(--mode-color-ai-stop-3) 90%)";
12
- module.exports.buttonAiLabelActive = "var(--mode-color-action-grayscale-withActiveAlt)";
12
+ module.exports.buttonAiLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
13
13
  module.exports.buttonAiLabelDisabled = "var(--mode-color-action-inactive-txt)";
14
14
  module.exports.buttonAiLabelDefault = "var(--mode-color-action-grayscale-default)";
15
- module.exports.buttonAiLabelHover = "var(--mode-color-action-grayscale-withHover)";
15
+ module.exports.buttonAiLabelHover = "var(--mode-color-action-grayscale-with-hover)";
16
16
  module.exports.buttonDestructivePrimaryBgDisabled = "var(--mode-color-action-inactive-default)";
17
17
  module.exports.buttonDestructivePrimaryBgDefault = "var(--mode-color-action-danger-default)";
18
18
  module.exports.buttonDestructivePrimaryBgHover = "var(--mode-color-action-danger-hover)";
19
- module.exports.buttonDestructivePrimaryLabelDisabled = "var(--mode-color-action-inactive-txtAlt)";
20
- module.exports.buttonDestructivePrimaryLabelDefault = "var(--mode-color-action-danger-withDefault)";
21
- module.exports.buttonDestructivePrimaryLabelHover = "var(--mode-color-action-danger-withDefault)";
22
- module.exports.buttonDestructiveSecondaryBgHover = "var(--mode-color-action-danger-hoverAlt)";
19
+ module.exports.buttonDestructivePrimaryLabelDisabled = "var(--mode-color-action-inactive-txt-alt)";
20
+ module.exports.buttonDestructivePrimaryLabelDefault = "var(--mode-color-action-danger-with-default)";
21
+ module.exports.buttonDestructivePrimaryLabelHover = "var(--mode-color-action-danger-with-default)";
22
+ module.exports.buttonDestructiveSecondaryBgHover = "var(--mode-color-action-danger-hover-alt)";
23
23
  module.exports.buttonDestructiveSecondaryBorderDisabled = "var(--mode-color-action-inactive-default)";
24
24
  module.exports.buttonDestructiveSecondaryBorderDefault = "var(--mode-color-action-danger-default)";
25
25
  module.exports.buttonDestructiveSecondaryBorderHover = "var(--mode-color-action-danger-hover)";
@@ -27,96 +27,96 @@ module.exports.buttonDestructiveSecondaryLabelDisabled = "var(--mode-color-actio
27
27
  module.exports.buttonDestructiveSecondaryLabelDefault = "var(--mode-color-action-danger-default)";
28
28
  module.exports.buttonDestructiveSecondaryLabelHover = "var(--mode-color-action-danger-hover)";
29
29
  module.exports.buttonTypicalPrimaryBgActive = "var(--mode-color-action-main-active)";
30
- module.exports.buttonTypicalPrimaryBorderDefault = "var(--mode-color-action-main-withDefault)";
30
+ module.exports.buttonTypicalPrimaryBorderDefault = "var(--mode-color-action-main-with-default)";
31
31
  module.exports.buttonTypicalPrimaryBgDisabled = "var(--mode-color-action-inactive-default)";
32
32
  module.exports.buttonTypicalPrimaryBgDefault = "var(--mode-color-action-main-default)";
33
33
  module.exports.buttonTypicalPrimaryBgHover = "var(--mode-color-action-main-hover)";
34
- module.exports.buttonTypicalPrimaryLabelActive = "var(--mode-color-action-main-withActive)";
35
- module.exports.buttonTypicalPrimaryLabelDisabled = "var(--mode-color-action-inactive-txtAlt)";
36
- module.exports.buttonTypicalPrimaryLabelDefault = "var(--mode-color-action-main-withDefault)";
37
- module.exports.buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-withDefault)";
34
+ module.exports.buttonTypicalPrimaryLabelActive = "var(--mode-color-action-main-with-active)";
35
+ module.exports.buttonTypicalPrimaryLabelDisabled = "var(--mode-color-action-inactive-txt-alt)";
36
+ module.exports.buttonTypicalPrimaryLabelDefault = "var(--mode-color-action-main-with-default)";
37
+ module.exports.buttonTypicalPrimaryLabelHover = "var(--mode-color-action-main-with-default)";
38
38
  module.exports.buttonTypicalPrimaryInverseBgActive = "var(--mode-color-action-main-inverse-active)";
39
- module.exports.buttonTypicalPrimaryInverseBorderDefault = "var(--mode-color-action-main-inverse-withDefault)";
39
+ module.exports.buttonTypicalPrimaryInverseBorderDefault = "var(--mode-color-action-main-inverse-with-default)";
40
40
  module.exports.buttonTypicalPrimaryInverseBgDisabled = "var(--mode-color-action-inactive-inverse-default)";
41
41
  module.exports.buttonTypicalPrimaryInverseBgDefault = "var(--mode-color-action-main-inverse-default)";
42
42
  module.exports.buttonTypicalPrimaryInverseBgHover = "var(--mode-color-action-main-inverse-hover)";
43
- module.exports.buttonTypicalPrimaryInverseLabelActive = "var(--mode-color-action-main-inverse-withActive)";
44
- module.exports.buttonTypicalPrimaryInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txtAlt)";
45
- module.exports.buttonTypicalPrimaryInverseLabelDefault = "var(--mode-color-action-main-inverse-withDefault)";
46
- module.exports.buttonTypicalPrimaryInverseLabelHover = "var(--mode-color-action-main-inverse-withDefault)";
47
- module.exports.buttonTypicalSecondaryBgActive = "var(--mode-color-action-main-activeAlt)";
48
- module.exports.buttonTypicalSecondaryBgDefault = "var(--mode-color-action-main-defaultAlt3)";
49
- module.exports.buttonTypicalSecondaryBgHover = "var(--mode-color-action-main-hoverAlt)";
43
+ module.exports.buttonTypicalPrimaryInverseLabelActive = "var(--mode-color-action-main-inverse-with-active)";
44
+ module.exports.buttonTypicalPrimaryInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txt-alt)";
45
+ module.exports.buttonTypicalPrimaryInverseLabelDefault = "var(--mode-color-action-main-inverse-with-default)";
46
+ module.exports.buttonTypicalPrimaryInverseLabelHover = "var(--mode-color-action-main-inverse-with-default)";
47
+ module.exports.buttonTypicalSecondaryBgActive = "var(--mode-color-action-main-active-alt)";
48
+ module.exports.buttonTypicalSecondaryBgDefault = "var(--mode-color-action-main-default-alt3)";
49
+ module.exports.buttonTypicalSecondaryBgHover = "var(--mode-color-action-main-hover-alt)";
50
50
  module.exports.buttonTypicalSecondaryBorderActive = "var(--mode-color-action-main-active)";
51
51
  module.exports.buttonTypicalSecondaryBorderDisabled = "var(--mode-color-action-inactive-default)";
52
- module.exports.buttonTypicalSecondaryBorderDefault = "var(--mode-color-action-main-defaultAlt)";
52
+ module.exports.buttonTypicalSecondaryBorderDefault = "var(--mode-color-action-main-default-alt)";
53
53
  module.exports.buttonTypicalSecondaryBorderHover = "var(--mode-color-action-main-hover)";
54
- module.exports.buttonTypicalSecondaryLabelActive = "var(--mode-color-action-grayscale-withActiveAlt)";
54
+ module.exports.buttonTypicalSecondaryLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
55
55
  module.exports.buttonTypicalSecondaryLabelDisabled = "var(--mode-color-action-inactive-txt)";
56
56
  module.exports.buttonTypicalSecondaryLabelDefault = "var(--mode-color-action-grayscale-default)";
57
- module.exports.buttonTypicalSecondaryLabelHover = "var(--mode-color-action-grayscale-withHover)";
58
- module.exports.buttonTypicalSecondaryInverseBgActive = "var(--mode-color-action-main-inverse-activeAlt)";
59
- module.exports.buttonTypicalSecondaryInverseBgDefault = "var(--mode-color-action-main-inverse-defaultAlt3)";
60
- module.exports.buttonTypicalSecondaryInverseBgHover = "var(--mode-color-action-main-inverse-hoverAlt)";
57
+ module.exports.buttonTypicalSecondaryLabelHover = "var(--mode-color-action-grayscale-with-hover)";
58
+ module.exports.buttonTypicalSecondaryInverseBgActive = "var(--mode-color-action-main-inverse-active-alt)";
59
+ module.exports.buttonTypicalSecondaryInverseBgDefault = "var(--mode-color-action-main-inverse-default-alt3)";
60
+ module.exports.buttonTypicalSecondaryInverseBgHover = "var(--mode-color-action-main-inverse-hover-alt)";
61
61
  module.exports.buttonTypicalSecondaryInverseBorderActive = "var(--mode-color-action-main-inverse-active)";
62
62
  module.exports.buttonTypicalSecondaryInverseBorderDisabled = "var(--mode-color-action-inactive-inverse-default)";
63
- module.exports.buttonTypicalSecondaryInverseBorderDefault = "var(--mode-color-action-main-inverse-defaultAlt)";
63
+ module.exports.buttonTypicalSecondaryInverseBorderDefault = "var(--mode-color-action-main-inverse-default-alt)";
64
64
  module.exports.buttonTypicalSecondaryInverseBorderHover = "var(--mode-color-action-main-inverse-hover)";
65
- module.exports.buttonTypicalSecondaryInverseLabelActive = "var(--mode-color-action-grayscale-inverse-withActiveAlt)";
65
+ module.exports.buttonTypicalSecondaryInverseLabelActive = "var(--mode-color-action-grayscale-inverse-with-active-alt)";
66
66
  module.exports.buttonTypicalSecondaryInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txt)";
67
67
  module.exports.buttonTypicalSecondaryInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
68
- module.exports.buttonTypicalSecondaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-withHover)";
69
- module.exports.buttonTypicalTertiaryBgActive = "var(--mode-color-action-main-activeAlt)";
68
+ module.exports.buttonTypicalSecondaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
69
+ module.exports.buttonTypicalTertiaryBgActive = "var(--mode-color-action-main-active-alt)";
70
70
  module.exports.buttonTypicalTertiaryBgDefault = "var(--button-none)";
71
- module.exports.buttonTypicalTertiaryBgHover = "var(--mode-color-action-main-hoverAlt)";
71
+ module.exports.buttonTypicalTertiaryBgHover = "var(--mode-color-action-main-hover-alt)";
72
72
  module.exports.buttonTypicalTertiaryBorderActive = "var(--mode-color-action-main-active)";
73
73
  module.exports.buttonTypicalTertiaryBorderDisabled = "var(--mode-color-action-inactive-default)";
74
- module.exports.buttonTypicalTertiaryBorderDefault = "var(--mode-color-action-main-defaultAlt)";
74
+ module.exports.buttonTypicalTertiaryBorderDefault = "var(--mode-color-action-main-default-alt)";
75
75
  module.exports.buttonTypicalTertiaryBorderHover = "var(--mode-color-action-main-hover)";
76
- module.exports.buttonTypicalTertiaryLabelActive = "var(--mode-color-action-grayscale-withActiveAlt)";
76
+ module.exports.buttonTypicalTertiaryLabelActive = "var(--mode-color-action-grayscale-with-active-alt)";
77
77
  module.exports.buttonTypicalTertiaryLabelDisabled = "var(--mode-color-action-inactive-txt)";
78
78
  module.exports.buttonTypicalTertiaryLabelDefault = "var(--mode-color-action-grayscale-default)";
79
- module.exports.buttonTypicalTertiaryLabelHover = "var(--mode-color-action-grayscale-withHover)";
80
- module.exports.buttonTypicalTertiaryInverseBgActive = "var(--mode-color-action-main-inverse-activeAlt)";
79
+ module.exports.buttonTypicalTertiaryLabelHover = "var(--mode-color-action-grayscale-with-hover)";
80
+ module.exports.buttonTypicalTertiaryInverseBgActive = "var(--mode-color-action-main-inverse-active-alt)";
81
81
  module.exports.buttonTypicalTertiaryInverseBgDefault = "var(--button-none)";
82
- module.exports.buttonTypicalTertiaryInverseBgHover = "var(--mode-color-action-main-inverse-hoverAlt)";
82
+ module.exports.buttonTypicalTertiaryInverseBgHover = "var(--mode-color-action-main-inverse-hover-alt)";
83
83
  module.exports.buttonTypicalTertiaryInverseBorderActive = "var(--mode-color-action-main-inverse-active)";
84
84
  module.exports.buttonTypicalTertiaryInverseBorderDisabled = "var(--mode-color-action-inactive-inverse-default)";
85
- module.exports.buttonTypicalTertiaryInverseBorderDefault = "var(--mode-color-action-main-inverse-defaultAlt)";
85
+ module.exports.buttonTypicalTertiaryInverseBorderDefault = "var(--mode-color-action-main-inverse-default-alt)";
86
86
  module.exports.buttonTypicalTertiaryInverseBorderHover = "var(--mode-color-action-main-inverse-hover)";
87
- module.exports.buttonTypicalTertiaryInverseLabelActive = "var(--mode-color-action-grayscale-inverse-withActiveAlt)";
87
+ module.exports.buttonTypicalTertiaryInverseLabelActive = "var(--mode-color-action-grayscale-inverse-with-active-alt)";
88
88
  module.exports.buttonTypicalTertiaryInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txt)";
89
89
  module.exports.buttonTypicalTertiaryInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
90
- module.exports.buttonTypicalTertiaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-withHover)";
91
- module.exports.buttonTypicalSubtleBgActive = "var(--mode-color-action-grayscale-activeAlt)";
92
- module.exports.buttonTypicalSubtleBgHover = "var(--mode-color-action-grayscale-hoverAlt)";
93
- module.exports.buttonTypicalSubtleLabelActive = "var(--mode-color-action-grayscale-withActiveAlt)";
90
+ module.exports.buttonTypicalTertiaryInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
91
+ module.exports.buttonTypicalSubtleBgActive = "var(--mode-color-action-grayscale-active-alt)";
92
+ module.exports.buttonTypicalSubtleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
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)";
96
- module.exports.buttonTypicalSubtleLabelHover = "var(--mode-color-action-grayscale-withHover)";
97
- module.exports.buttonTypicalSubtleInverseBgActive = "var(--mode-color-action-grayscale-inverse-activeAlt)";
98
- module.exports.buttonTypicalSubtleInverseBgHover = "var(--mode-color-action-grayscale-inverse-hoverAlt)";
99
- module.exports.buttonTypicalSubtleInverseLabelActive = "var(--mode-color-action-grayscale-inverse-withActiveAlt)";
96
+ module.exports.buttonTypicalSubtleLabelHover = "var(--mode-color-action-grayscale-with-hover)";
97
+ module.exports.buttonTypicalSubtleInverseBgActive = "var(--mode-color-action-grayscale-inverse-active-alt)";
98
+ module.exports.buttonTypicalSubtleInverseBgHover = "var(--mode-color-action-grayscale-inverse-hover-alt)";
99
+ module.exports.buttonTypicalSubtleInverseLabelActive = "var(--mode-color-action-grayscale-inverse-with-active-alt)";
100
100
  module.exports.buttonTypicalSubtleInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txt)";
101
101
  module.exports.buttonTypicalSubtleInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
102
- module.exports.buttonTypicalSubtleInverseLabelHover = "var(--mode-color-action-grayscale-inverse-withHover)";
102
+ module.exports.buttonTypicalSubtleInverseLabelHover = "var(--mode-color-action-grayscale-inverse-with-hover)";
103
103
  module.exports.buttonTypicalToggleBgActiveDisabled = "var(--mode-color-action-inactive-default)";
104
- module.exports.buttonTypicalToggleLabelActiveDisabled = "var(--mode-color-action-inactive-txtAlt)";
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-hoverAlt)";
106
+ module.exports.buttonTypicalToggleBgHover = "var(--mode-color-action-grayscale-hover-alt)";
107
107
  module.exports.buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
108
108
  module.exports.buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
109
- module.exports.buttonTypicalToggleLabelActive = "var(--mode-color-action-grayscale-withActive)";
109
+ module.exports.buttonTypicalToggleLabelActive = "var(--mode-color-action-grayscale-with-active)";
110
110
  module.exports.buttonTypicalToggleLabelDisabled = "var(--mode-color-action-inactive-txt)";
111
- module.exports.buttonTypicalToggleLabelDefault = "var(--mode-color-action-grayscale-defaultAlt)";
112
- module.exports.buttonTypicalToggleLabelHover = "var(--mode-color-action-grayscale-withHover)";
113
- module.exports.buttonVideoBgBlur = "var(--mode-color-action-grayscale-hoverAlt)";
114
- module.exports.buttonVideoPrimaryBgDefault = "var(--mode-color-action-grayscale-withDefault)";
115
- module.exports.buttonVideoPrimaryBgHover = "var(--mode-color-action-grayscale-withDefault)";
111
+ module.exports.buttonTypicalToggleLabelDefault = "var(--mode-color-action-grayscale-default-alt)";
112
+ module.exports.buttonTypicalToggleLabelHover = "var(--mode-color-action-grayscale-with-hover)";
113
+ module.exports.buttonVideoBgBlur = "var(--mode-color-action-grayscale-hover-alt)";
114
+ module.exports.buttonVideoPrimaryBgDefault = "var(--mode-color-action-grayscale-with-default)";
115
+ module.exports.buttonVideoPrimaryBgHover = "var(--mode-color-action-grayscale-with-default)";
116
116
  module.exports.buttonVideoPrimaryLabelDefault = "var(--mode-color-action-grayscale-default)";
117
117
  module.exports.buttonVideoPrimaryLabelHover = "var(--mode-color-action-grayscale-default)";
118
- module.exports.buttonVideoSecondaryBgHover = "var(--mode-color-action-grayscale-withDefault)";
119
- module.exports.buttonVideoSecondaryBorderDefault = "var(--mode-color-action-grayscale-withDefault)";
120
- module.exports.buttonVideoSecondaryBorderHover = "var(--mode-color-action-grayscale-withDefault)";
121
- module.exports.buttonVideoSecondaryLabelDefault = "var(--mode-color-action-grayscale-withDefault)";
118
+ module.exports.buttonVideoSecondaryBgHover = "var(--mode-color-action-grayscale-with-default)";
119
+ module.exports.buttonVideoSecondaryBorderDefault = "var(--mode-color-action-grayscale-with-default)";
120
+ module.exports.buttonVideoSecondaryBorderHover = "var(--mode-color-action-grayscale-with-default)";
121
+ module.exports.buttonVideoSecondaryLabelDefault = "var(--mode-color-action-grayscale-with-default)";
122
122
  module.exports.buttonVideoSecondaryLabelHover = "var(--mode-color-action-grayscale-default)";
package/js/common/components/container.js CHANGED
@@ -7,8 +7,8 @@ module.exports.containerActionBgFooterActive = "var(--mode-color-action-grayscal
7
7
  module.exports.containerActionBorderActivated = "var(--mode-color-status-positive-default)";
8
8
  module.exports.containerActionBgFooterDefault = "var(--mode-color-generic-bg-nought)";
9
9
  module.exports.containerActionBgDefault = "var(--mode-color-generic-bg-nought)";
10
- module.exports.containerActionBgDisabled = "var(--mode-color-action-inactive-defaultAlt)";
11
- module.exports.containerActionBgHover = "var(--mode-color-action-grayscale-hoverAlt)";
10
+ module.exports.containerActionBgDisabled = "var(--mode-color-action-inactive-default-alt)";
11
+ module.exports.containerActionBgHover = "var(--mode-color-action-grayscale-hover-alt)";
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)";
@@ -16,10 +16,10 @@ module.exports.containerActionBorderInactive = "var(--mode-color-generic-fg-firm
16
16
  module.exports.containerActionBorderDefault = "var(--mode-color-generic-fg-firm)";
17
17
  module.exports.containerActionIconActive = "var(--mode-color-action-grayscale-active)";
18
18
  module.exports.containerActionIconDefault = "var(--mode-color-action-grayscale-default)";
19
- module.exports.containerActionIconAltDefault = "var(--mode-color-action-grayscale-defaultAlt)";
19
+ module.exports.containerActionIconAltDefault = "var(--mode-color-action-grayscale-default-alt)";
20
20
  module.exports.containerActionIconHover = "var(--mode-color-action-grayscale-default)";
21
- module.exports.containerActionLabelFooterActive = "var(--mode-color-action-grayscale-withActive)";
22
- module.exports.containerActionLabelFooterActivated = "var(--mode-color-action-grayscale-withActive)";
21
+ module.exports.containerActionLabelFooterActive = "var(--mode-color-action-grayscale-with-active)";
22
+ module.exports.containerActionLabelFooterActivated = "var(--mode-color-action-grayscale-with-active)";
23
23
  module.exports.containerActionTxtActive = "var(--mode-color-action-grayscale-active)";
24
24
  module.exports.containerActionTxtDisabled = "var(--mode-color-action-inactive-txt)";
25
25
  module.exports.containerActionTxtDefault = "var(--mode-color-generic-txt-severe)";
package/js/common/components/focus.js CHANGED
@@ -2,11 +2,11 @@
2
2
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
 
5
- module.exports.focusBg = "var(--mode-color-action-focus-withDefaultAlt)";
5
+ module.exports.focusBg = "var(--mode-color-action-focus-with-default-alt)";
6
6
  module.exports.focusBorderalt = "var(--mode-color-action-focus-default)";
7
- module.exports.focusBorder = "var(--mode-color-action-focus-withDefault)";
7
+ module.exports.focusBorder = "var(--mode-color-action-focus-with-default)";
8
8
  module.exports.focusLabel = "var(--mode-color-action-focus-txt)";
9
- module.exports.focusInverseBg = "var(--mode-color-action-focus-inverse-withDefaultAlt)";
9
+ module.exports.focusInverseBg = "var(--mode-color-action-focus-inverse-with-default-alt)";
10
10
  module.exports.focusInverseBorderalt = "var(--mode-color-action-focus-inverse-default)";
11
- module.exports.focusInverseBorder = "var(--mode-color-action-focus-inverse-withDefault)";
11
+ module.exports.focusInverseBorder = "var(--mode-color-action-focus-inverse-with-default)";
12
12
  module.exports.focusInverseLabel = "var(--mode-color-action-focus-inverse-txt)";
package/js/common/components/input.js CHANGED
@@ -3,73 +3,73 @@
3
3
  */
4
4
 
5
5
  module.exports.inputCalendarBgActive = "var(--mode-color-action-grayscale-active)";
6
- module.exports.inputCalendarBgDisabled = "var(--mode-color-action-inactive-defaultAlt)";
7
- module.exports.inputCalendarBgDuration = "var(--mode-color-action-dataEntry-hoverAlt)";
8
- module.exports.inputCalendarBgHover = "var(--mode-color-action-dataEntry-hoverAlt)";
6
+ module.exports.inputCalendarBgDisabled = "var(--mode-color-action-inactive-default-alt)";
7
+ module.exports.inputCalendarBgDuration = "var(--mode-color-action-data-entry-hover-alt)";
8
+ module.exports.inputCalendarBgHover = "var(--mode-color-action-data-entry-hover-alt)";
9
9
  module.exports.inputCalendarBorderDuration = "var(--mode-color-action-grayscale-active)";
10
- module.exports.inputCalendarTxtActive = "var(--mode-color-action-grayscale-withActive)";
11
- module.exports.inputCalendarTxtAlt = "var(--mode-color-action-dataEntry-txtAlt)";
10
+ module.exports.inputCalendarTxtActive = "var(--mode-color-action-grayscale-with-active)";
11
+ module.exports.inputCalendarTxtAlt = "var(--mode-color-action-data-entry-txt-alt)";
12
12
  module.exports.inputCalendarTxtDisabled = "var(--mode-color-action-inactive-txt)";
13
- module.exports.inputCalendarTxtDuration = "var(--mode-color-action-dataEntry-txt)";
14
- module.exports.inputCalendarTxtDefault = "var(--mode-color-action-dataEntry-txt)";
15
- module.exports.inputCalendarTxtHover = "var(--mode-color-action-grayscale-withHover)";
16
- module.exports.inputCalendarTxtAltDefault = "var(--mode-color-action-dataEntry-txtAlt)";
17
- module.exports.inputDropdownBgHover = "var(--mode-color-action-dataEntry-hoverAlt)";
18
- module.exports.inputDropdownLabelActive = "var(--mode-color-action-grayscale-withActive)";
19
- module.exports.inputDropdownLabelAlt = "var(--mode-color-action-dataEntry-txt)";
13
+ module.exports.inputCalendarTxtDuration = "var(--mode-color-action-data-entry-txt)";
14
+ module.exports.inputCalendarTxtDefault = "var(--mode-color-action-data-entry-txt)";
15
+ module.exports.inputCalendarTxtHover = "var(--mode-color-action-grayscale-with-hover)";
16
+ module.exports.inputCalendarTxtAltDefault = "var(--mode-color-action-data-entry-txt-alt)";
17
+ module.exports.inputDropdownBgHover = "var(--mode-color-action-data-entry-hover-alt)";
18
+ module.exports.inputDropdownLabelActive = "var(--mode-color-action-grayscale-with-active)";
19
+ module.exports.inputDropdownLabelAlt = "var(--mode-color-action-data-entry-txt)";
20
20
  module.exports.inputDropdownLabelDisabled = "var(--mode-color-action-inactive-txt)";
21
- module.exports.inputDropdownLabelDefault = "var(--mode-color-action-dataEntry-txtAlt)";
22
- module.exports.inputDropdownLabelHover = "var(--mode-color-action-grayscale-withHover)";
23
- module.exports.inputDropdownLabelSubtxt = "var(--mode-color-action-dataEntry-txtAlt)";
21
+ module.exports.inputDropdownLabelDefault = "var(--mode-color-action-data-entry-txt-alt)";
22
+ module.exports.inputDropdownLabelHover = "var(--mode-color-action-grayscale-with-hover)";
23
+ module.exports.inputDropdownLabelSubtxt = "var(--mode-color-action-data-entry-txt-alt)";
24
24
  module.exports.inputLabelsetLabelRequired = "var(--mode-color-action-danger-default)";
25
- module.exports.inputLabelsetLabelDefault = "var(--mode-color-action-dataEntry-txt)";
26
- module.exports.inputLabelsetLabelAlt = "var(--mode-color-action-dataEntry-txtAlt)";
25
+ module.exports.inputLabelsetLabelDefault = "var(--mode-color-action-data-entry-txt)";
26
+ module.exports.inputLabelsetLabelAlt = "var(--mode-color-action-data-entry-txt-alt)";
27
27
  module.exports.inputLabelsetLabelDisabled = "var(--mode-color-action-inactive-txt)";
28
- module.exports.inputLabelsetLabelReadOnly = "var(--mode-color-action-dataEntry-txt)";
28
+ module.exports.inputLabelsetLabelReadOnly = "var(--mode-color-action-data-entry-txt)";
29
29
  module.exports.inputLabelsetInverseLabelRequired = "var(--mode-color-action-danger-inverse-default)";
30
- module.exports.inputLabelsetInverseLabelDefault = "var(--mode-color-action-dataEntry-inverse-txt)";
31
- module.exports.inputLabelsetInverseLabelAlt = "var(--mode-color-action-dataEntry-inverse-txtAlt)";
32
- module.exports.inputTypicalBgAlt = "var(--mode-color-action-dataEntry-defaultAlt)";
33
- module.exports.inputTypicalBgDisabled = "var(--mode-color-action-inactive-defaultAlt)";
34
- module.exports.inputTypicalBgDefault = "var(--mode-color-action-dataEntry-default)";
35
- module.exports.inputTypicalBgHover = "var(--mode-color-action-dataEntry-hoverAlt)";
36
- module.exports.inputTypicalBgReadOnly = "var(--mode-color-action-inactive-defaultAlt)";
30
+ module.exports.inputLabelsetInverseLabelDefault = "var(--mode-color-action-data-entry-inverse-txt)";
31
+ module.exports.inputLabelsetInverseLabelAlt = "var(--mode-color-action-data-entry-inverse-txt-alt)";
32
+ module.exports.inputTypicalBgAlt = "var(--mode-color-action-data-entry-default-alt)";
33
+ module.exports.inputTypicalBgDisabled = "var(--mode-color-action-inactive-default-alt)";
34
+ module.exports.inputTypicalBgDefault = "var(--mode-color-action-data-entry-default)";
35
+ module.exports.inputTypicalBgHover = "var(--mode-color-action-data-entry-hover-alt)";
36
+ module.exports.inputTypicalBgReadOnly = "var(--mode-color-action-inactive-default-alt)";
37
37
  module.exports.inputTypicalBorderAlt = "var(--mode-color-action-inactive-default)";
38
- module.exports.inputTypicalBorderDefault = "var(--mode-color-action-dataEntry-withDefault)";
38
+ module.exports.inputTypicalBorderDefault = "var(--mode-color-action-data-entry-with-default)";
39
39
  module.exports.inputTypicalBorderDisabled = "var(--mode-color-action-inactive-default)";
40
- module.exports.inputTypicalBorderHover = "var(--mode-color-action-dataEntry-withHover)";
40
+ module.exports.inputTypicalBorderHover = "var(--mode-color-action-data-entry-with-hover)";
41
41
  module.exports.inputTypicalBorderReadOnly = "var(--mode-color-action-inactive-default)";
42
- module.exports.inputTypicalIconActive = "var(--mode-color-action-dataEntry-withActive)";
43
- module.exports.inputTypicalIconDefault = "var(--mode-color-action-dataEntry-txt)";
42
+ module.exports.inputTypicalIconActive = "var(--mode-color-action-data-entry-with-active)";
43
+ module.exports.inputTypicalIconDefault = "var(--mode-color-action-data-entry-txt)";
44
44
  module.exports.inputTypicalIconDisabled = "var(--mode-color-action-inactive-icon)";
45
- module.exports.inputTypicalIconHover = "var(--mode-color-action-dataEntry-withHover)";
46
- module.exports.inputTypicalIconReadOnly = "var(--mode-color-action-inactive-iconAlt)";
47
- module.exports.inputTypicalIconAltActive = "var(--mode-color-action-dataEntry-withActiveAlt)";
48
- module.exports.inputTypicalTxtActive = "var(--mode-color-action-dataEntry-txt)";
49
- module.exports.inputTypicalTxtAlt = "var(--mode-color-action-dataEntry-txtAlt)";
50
- module.exports.inputTypicalTxtDefault = "var(--mode-color-action-dataEntry-txt)";
45
+ module.exports.inputTypicalIconHover = "var(--mode-color-action-data-entry-with-hover)";
46
+ module.exports.inputTypicalIconReadOnly = "var(--mode-color-action-inactive-icon-alt)";
47
+ module.exports.inputTypicalIconAltActive = "var(--mode-color-action-data-entry-with-active-alt)";
48
+ module.exports.inputTypicalTxtActive = "var(--mode-color-action-data-entry-txt)";
49
+ module.exports.inputTypicalTxtAlt = "var(--mode-color-action-data-entry-txt-alt)";
50
+ module.exports.inputTypicalTxtDefault = "var(--mode-color-action-data-entry-txt)";
51
51
  module.exports.inputTypicalTxtDisabled = "var(--mode-color-action-inactive-txt)";
52
- module.exports.inputTypicalTxtHover = "var(--mode-color-action-dataEntry-withHover)";
52
+ module.exports.inputTypicalTxtHover = "var(--mode-color-action-data-entry-with-hover)";
53
53
  module.exports.inputTypicalTxtReadOnly = "var(--mode-color-generic-txt-severe)";
54
- module.exports.inputTypicalInverseBgDefault = "var(--mode-color-action-dataEntry-inverse-default)";
55
- module.exports.inputTypicalInverseBorderDefault = "var(--mode-color-action-dataEntry-inverse-withDefault)";
56
- module.exports.inputTypicalInverseTxtDefault = "var(--mode-color-action-dataEntry-inverse-txt)";
54
+ module.exports.inputTypicalInverseBgDefault = "var(--mode-color-action-data-entry-inverse-default)";
55
+ module.exports.inputTypicalInverseBorderDefault = "var(--mode-color-action-data-entry-inverse-with-default)";
56
+ module.exports.inputTypicalInverseTxtDefault = "var(--mode-color-action-data-entry-inverse-txt)";
57
57
  module.exports.inputSwitchBgActive = "var(--mode-color-action-grayscale-active)";
58
58
  module.exports.inputSwitchBgActivateDisabled = "var(--mode-color-action-inactive-default)";
59
- module.exports.inputSwitchBgDisabled = "var(--mode-color-action-inactive-defaultAlt)";
60
- module.exports.inputSwitchBgDefault = "var(--mode-color-action-dataEntry-default)";
59
+ module.exports.inputSwitchBgDisabled = "var(--mode-color-action-inactive-default-alt)";
60
+ module.exports.inputSwitchBgDefault = "var(--mode-color-action-data-entry-default)";
61
61
  module.exports.inputSwitchBorderActive = "transparent";
62
62
  module.exports.inputSwitchBorderActiveDisabled = "transparent";
63
63
  module.exports.inputSwitchBorderDisabled = "var(--mode-color-action-inactive-default)";
64
- module.exports.inputSwitchBorderDefault = "var(--mode-color-action-dataEntry-withDefault)";
65
- module.exports.inputSwitchFgActive = "var(--mode-color-action-grayscale-withActive)";
66
- module.exports.inputSwitchFgActivateDisabled = "var(--mode-color-action-inactive-txtAlt)";
64
+ module.exports.inputSwitchBorderDefault = "var(--mode-color-action-data-entry-with-default)";
65
+ module.exports.inputSwitchFgActive = "var(--mode-color-action-grayscale-with-active)";
66
+ module.exports.inputSwitchFgActivateDisabled = "var(--mode-color-action-inactive-txt-alt)";
67
67
  module.exports.inputSwitchFgDisabled = "var(--mode-color-action-inactive-default)";
68
- module.exports.inputSwitchFgDefault = "var(--mode-color-action-dataEntry-withDefault)";
69
- module.exports.inputSwitchLabelActive = "var(--mode-color-action-dataEntry-txt)";
68
+ module.exports.inputSwitchFgDefault = "var(--mode-color-action-data-entry-with-default)";
69
+ module.exports.inputSwitchLabelActive = "var(--mode-color-action-data-entry-txt)";
70
70
  module.exports.inputSwitchLabelActivateDisabled = "var(--mode-color-action-inactive-default)";
71
71
  module.exports.inputSwitchLabelDisabled = "var(--mode-color-action-inactive-default)";
72
- module.exports.inputSwitchLabelDefault = "var(--mode-color-action-dataEntry-txtAlt)";
72
+ module.exports.inputSwitchLabelDefault = "var(--mode-color-action-data-entry-txt-alt)";
73
73
  module.exports.inputValidationBorderError = "var(--mode-color-status-negative-default)";
74
74
  module.exports.inputValidationBarError = "var(--mode-color-status-negative-default)";
75
75
  module.exports.inputValidationBarWarn = "var(--mode-color-status-warning-default)";
package/js/common/components/link.js CHANGED
@@ -2,14 +2,14 @@
2
2
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
 
5
- module.exports.linkDestructiveLabelDefault = "var(--mode-color-action-danger-defaultAlt)";
6
- module.exports.linkDestructiveLabelHover = "var(--mode-color-action-danger-hoverAlt2)";
7
- module.exports.linkDestructiveInverseLabelDefault = "var(--mode-color-action-danger-inverse-defaultAlt)";
8
- module.exports.linkDestructiveInverseLabelHover = "var(--mode-color-action-danger-inverse-hoverAlt2)";
9
- module.exports.linkTypicalLabelDefault = "var(--mode-color-action-main-defaultAlt2)";
10
- module.exports.linkTypicalLabelHover = "var(--mode-color-action-main-hoverAlt2)";
11
- module.exports.linkTypicalInverseLabelDefault = "var(--mode-color-action-main-inverse-defaultAlt2)";
12
- module.exports.linkTypicalInverseLabelHover = "var(--mode-color-action-main-inverse-hoverAlt2)";
5
+ module.exports.linkDestructiveLabelDefault = "var(--mode-color-action-danger-default-alt)";
6
+ module.exports.linkDestructiveLabelHover = "var(--mode-color-action-danger-hover-alt2)";
7
+ module.exports.linkDestructiveInverseLabelDefault = "var(--mode-color-action-danger-inverse-default-alt)";
8
+ module.exports.linkDestructiveInverseLabelHover = "var(--mode-color-action-danger-inverse-hover-alt2)";
9
+ module.exports.linkTypicalLabelDefault = "var(--mode-color-action-main-default-alt2)";
10
+ module.exports.linkTypicalLabelHover = "var(--mode-color-action-main-hover-alt2)";
11
+ module.exports.linkTypicalInverseLabelDefault = "var(--mode-color-action-main-inverse-default-alt2)";
12
+ module.exports.linkTypicalInverseLabelHover = "var(--mode-color-action-main-inverse-hover-alt2)";
13
13
  module.exports.linkSubtleLabelDefault = "var(--mode-color-action-grayscale-default)";
14
14
  module.exports.linkSubtleLabelHover = "var(--mode-color-action-grayscale-active)";
15
15
  module.exports.linkSubtleInverseLabelDefault = "var(--mode-color-action-grayscale-inverse-default)";
package/js/common/components/logo.js CHANGED
@@ -3,13 +3,13 @@
3
3
  */
4
4
 
5
5
  module.exports.logoSageBgDefault = "var(--mode-color-brand-default)";
6
- module.exports.logoSageBgAlt = "var(--mode-color-brand-defaultAlt)";
6
+ module.exports.logoSageBgAlt = "var(--mode-color-brand-default-alt)";
7
7
  module.exports.logoSageInverseBgDefault = "var(--mode-color-brand-inverse-default)";
8
- module.exports.logoSageInverseBgAlt = "var(--mode-color-brand-inverse-defaultAlt)";
8
+ module.exports.logoSageInverseBgAlt = "var(--mode-color-brand-inverse-default-alt)";
9
9
  module.exports.logoCopilotNoBgFgDefault = "var(--mode-color-brand-copilot-monochrome)";
10
- module.exports.logoAiSparkleBgDot = "var(--mode-color-brand-copilot-withDefault)";
10
+ module.exports.logoAiSparkleBgDot = "var(--mode-color-brand-copilot-with-default)";
11
11
  module.exports.logoAiSparkleBgStar = "var(--mode-color-brand-copilot-default)";
12
12
  module.exports.logoAiSparkleOutline = "var(--mode-color-brand-copilot-default)";
13
- module.exports.logoAiSparkleInverseBgDot = "var(--mode-color-brand-copilot-inverse-withDefault)";
13
+ module.exports.logoAiSparkleInverseBgDot = "var(--mode-color-brand-copilot-inverse-with-default)";
14
14
  module.exports.logoAiSparkleInverseBgStar = "var(--mode-color-brand-copilot-inverse-default)";
15
15
  module.exports.logoAiSparkleInverseOutline = "var(--mode-color-brand-copilot-inverse-default)";
package/js/common/components/message.js CHANGED
@@ -6,36 +6,36 @@ module.exports.messageNone = "var(--mode-color-none)";
6
6
  module.exports.messageContextualBg = "var(--mode-color-generic-bg-nought)";
7
7
  module.exports.messageContextualIcon = "var(--mode-color-generic-bg-nought)";
8
8
  module.exports.messageContextualIconAlt = "var(--mode-color-status-neutral-default)";
9
- module.exports.messageContextualTxt = "var(--mode-color-status-txt-withHoverAlt)";
10
- module.exports.messageContextualAiBgDefault = "var(--mode-color-status-ai-defaultAlt)";
11
- module.exports.messageContextualAiBgAlt = "var(--mode-color-status-neutral-defaultAlt)";
12
- module.exports.messageContextualAiBorderDefault = "var(--mode-color-status-ai-defaultAlt)";
13
- module.exports.messageContextualCalloutBgAlt = "var(--mode-color-status-callout-defaultAlt)";
14
- module.exports.messageContextualCalloutIcon = "var(--mode-color-status-txt-withDefaultAlt)";
9
+ module.exports.messageContextualTxt = "var(--mode-color-status-txt-with-hover-alt)";
10
+ module.exports.messageContextualAiBgDefault = "var(--mode-color-status-ai-default-alt)";
11
+ module.exports.messageContextualAiBgAlt = "var(--mode-color-status-neutral-default-alt)";
12
+ module.exports.messageContextualAiBorderDefault = "var(--mode-color-status-ai-default-alt)";
13
+ module.exports.messageContextualCalloutBgAlt = "var(--mode-color-status-callout-default-alt)";
14
+ module.exports.messageContextualCalloutIcon = "var(--mode-color-status-txt-with-default-alt)";
15
15
  module.exports.messageContextualErrorBgDefault = "var(--mode-color-status-negative-default)";
16
- module.exports.messageContextualErrorBgAlt = "var(--mode-color-status-negative-defaultAlt)";
16
+ module.exports.messageContextualErrorBgAlt = "var(--mode-color-status-negative-default-alt)";
17
17
  module.exports.messageContextualErrorBorderDefault = "var(--mode-color-status-negative-default)";
18
18
  module.exports.messageContextualErrorIcon = "var(--mode-color-status-negative-default)";
19
19
  module.exports.messageContextualInfoBgDefault = "var(--mode-color-status-info-default)";
20
- module.exports.messageContextualInfoBgAlt = "var(--mode-color-status-info-defaultAlt)";
20
+ module.exports.messageContextualInfoBgAlt = "var(--mode-color-status-info-default-alt)";
21
21
  module.exports.messageContextualInfoBorderDefault = "var(--mode-color-status-info-default)";
22
22
  module.exports.messageContextualInfoIcon = "var(--mode-color-status-info-default)";
23
23
  module.exports.messageContextualSuccessBgDefault = "var(--mode-color-status-positive-default)";
24
- module.exports.messageContextualSuccessBgAlt = "var(--mode-color-status-positive-defaultAlt)";
24
+ module.exports.messageContextualSuccessBgAlt = "var(--mode-color-status-positive-default-alt)";
25
25
  module.exports.messageContextualSuccessBorderDefault = "var(--mode-color-status-positive-default)";
26
26
  module.exports.messageContextualSuccessIcon = "var(--mode-color-status-positive-default)";
27
27
  module.exports.messageContextualWarningBgDefault = "var(--mode-color-status-warning-default)";
28
- module.exports.messageContextualWarningBgAlt = "var(--mode-color-status-warning-defaultAlt)";
28
+ module.exports.messageContextualWarningBgAlt = "var(--mode-color-status-warning-default-alt)";
29
29
  module.exports.messageContextualWarningBorderDefault = "var(--mode-color-status-warning-default)";
30
30
  module.exports.messageContextualWarningIcon = "var(--mode-color-status-warning-default)";
31
- module.exports.messageGlobalLabelDefault = "var(--mode-color-status-txt-withDefaultAlt)";
32
- module.exports.messageGlobalLabelHover = "var(--mode-color-action-grayscale-withHover)";
33
- module.exports.messageGlobalCalloutBgDefault = "var(--mode-color-status-callout-defaultAlt)";
34
- module.exports.messageGlobalCalloutBgHover = "var(--mode-color-status-callout-hoverAlt)";
35
- module.exports.messageGlobalCalloutIcon = "var(--mode-color-status-txt-withDefaultAlt)";
36
- module.exports.messageGlobalInfoBgDefault = "var(--mode-color-status-info-defaultAlt)";
37
- module.exports.messageGlobalInfoBgHover = "var(--mode-color-status-info-hoverAlt)";
31
+ module.exports.messageGlobalLabelDefault = "var(--mode-color-status-txt-with-default-alt)";
32
+ module.exports.messageGlobalLabelHover = "var(--mode-color-action-grayscale-with-hover)";
33
+ module.exports.messageGlobalCalloutBgDefault = "var(--mode-color-status-callout-default-alt)";
34
+ module.exports.messageGlobalCalloutBgHover = "var(--mode-color-status-callout-hover-alt)";
35
+ module.exports.messageGlobalCalloutIcon = "var(--mode-color-status-txt-with-default-alt)";
36
+ module.exports.messageGlobalInfoBgDefault = "var(--mode-color-status-info-default-alt)";
37
+ module.exports.messageGlobalInfoBgHover = "var(--mode-color-status-info-hover-alt)";
38
38
  module.exports.messageGlobalInfoIcon = "var(--mode-color-status-info-default)";
39
- module.exports.messageGlobalWarningBgDefault = "var(--mode-color-status-warning-defaultAlt)";
40
- module.exports.messageGlobalWarningBgHover = "var(--mode-color-status-warning-hoverAlt)";
39
+ module.exports.messageGlobalWarningBgDefault = "var(--mode-color-status-warning-default-alt)";
40
+ module.exports.messageGlobalWarningBgHover = "var(--mode-color-status-warning-hover-alt)";
41
41
  module.exports.messageGlobalWarningIcon = "var(--mode-color-status-warning-default)";
package/js/common/components/nav.js CHANGED
@@ -4,29 +4,29 @@
4
4
 
5
5
  module.exports.navBgDefault = "var(--mode-color-generic-bg-nought)";
6
6
  module.exports.navLeftnavContainerBgDefault = "var(--mode-color-generic-bg-inverse-nought)";
7
- module.exports.navLeftnavContainerBgDefaultAlt = "var(--mode-color-action-nav-inverse-defaultAlt)";
7
+ module.exports.navLeftnavContainerBgDefaultAlt = "var(--mode-color-action-nav-inverse-default-alt)";
8
8
  module.exports.navLeftnavContainerBorderDefault = "var(--mode-color-generic-fg-inverse-firm)";
9
9
  module.exports.navLeftnavItemBgActive = "var(--mode-color-action-nav-inverse-active)";
10
10
  module.exports.navLeftnavItemBgDefault = "var(--mode-color-none)";
11
11
  module.exports.navLeftnavItemBgHover = "var(--mode-color-action-nav-inverse-hover)";
12
- module.exports.navLeftnavItemLabelActive = "var(--mode-color-action-nav-inverse-withActive)";
13
- module.exports.navLeftnavItemLabelDefault = "var(--mode-color-action-nav-inverse-withDefault)";
14
- module.exports.navLeftnavItemLabelHover = "var(--mode-color-action-nav-inverse-withHover)";
12
+ module.exports.navLeftnavItemLabelActive = "var(--mode-color-action-nav-inverse-with-active)";
13
+ module.exports.navLeftnavItemLabelDefault = "var(--mode-color-action-nav-inverse-with-default)";
14
+ module.exports.navLeftnavItemLabelHover = "var(--mode-color-action-nav-inverse-with-hover)";
15
15
  module.exports.navModalContainerBgDefault = "var(--mode-color-generic-bg-nought)";
16
16
  module.exports.navModalContainerBgDefaultAlt = "var(--mode-color-generic-surface-faint)";
17
17
  module.exports.navModalContainerBorderDefault = "var(--mode-color-generic-fg-firm)";
18
18
  module.exports.navModalItemBgActive = "var(--mode-color-action-nav-active)";
19
19
  module.exports.navModalItemBgDefault = "var(--mode-color-none)";
20
20
  module.exports.navModalItemBgHover = "var(--mode-color-action-nav-hover)";
21
- module.exports.navModalItemLabelActive = "var(--mode-color-action-nav-withActive)";
22
- module.exports.navModalItemLabelDefault = "var(--mode-color-action-nav-withDefault)";
23
- module.exports.navModalItemLabelHover = "var(--mode-color-action-nav-withHover)";
21
+ module.exports.navModalItemLabelActive = "var(--mode-color-action-nav-with-active)";
22
+ module.exports.navModalItemLabelDefault = "var(--mode-color-action-nav-with-default)";
23
+ module.exports.navModalItemLabelHover = "var(--mode-color-action-nav-with-hover)";
24
24
  module.exports.navModalHeaderitemLabelDefault = "var(--mode-color-generic-txt-soft)";
25
25
  module.exports.navTopnavContainerBgDefault = "var(--mode-color-generic-bg-nought)";
26
26
  module.exports.navTopnavContainerBorderDefault = "var(--mode-color-generic-fg-firm)";
27
27
  module.exports.navTopnavItemBgActive = "var(--mode-color-action-nav-active)";
28
28
  module.exports.navTopnavItemBgDefault = "var(--mode-color-none)";
29
29
  module.exports.navTopnavItemBgHover = "var(--mode-color-action-nav-hover)";
30
- module.exports.navTopnavItemLabelActive = "var(--mode-color-action-nav-withActive)";
31
- module.exports.navTopnavItemLabelDefault = "var(--mode-color-action-nav-withDefault)";
32
- module.exports.navTopnavItemLabelHover = "var(--mode-color-action-nav-withHover)";
30
+ module.exports.navTopnavItemLabelActive = "var(--mode-color-action-nav-with-active)";
31
+ module.exports.navTopnavItemLabelDefault = "var(--mode-color-action-nav-with-default)";
32
+ module.exports.navTopnavItemLabelHover = "var(--mode-color-action-nav-with-hover)";