@sage/design-tokens 18.5.0 → 18.6.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 (32) hide show
  1. package/css/components/button.css +1 -0
  2. package/css/components/message.css +5 -1
  3. package/css/dark.css +4 -0
  4. package/css/light-all.css +10 -1
  5. package/css/light.css +4 -0
  6. package/js/common/components/button.d.ts +1 -0
  7. package/js/common/components/button.js +1 -0
  8. package/js/common/components/message.d.ts +4 -0
  9. package/js/common/components/message.js +5 -1
  10. package/js/common/dark.d.ts +4 -0
  11. package/js/common/dark.js +4 -0
  12. package/js/common/light.d.ts +4 -0
  13. package/js/common/light.js +4 -0
  14. package/js/es6/components/button.d.ts +1 -0
  15. package/js/es6/components/button.js +1 -0
  16. package/js/es6/components/message.d.ts +4 -0
  17. package/js/es6/components/message.js +5 -1
  18. package/js/es6/dark.d.ts +4 -0
  19. package/js/es6/dark.js +4 -0
  20. package/js/es6/light.d.ts +4 -0
  21. package/js/es6/light.js +4 -0
  22. package/json/components/button.json +1 -0
  23. package/json/components/message.json +5 -1
  24. package/json/dark.json +4 -0
  25. package/json/light.json +4 -0
  26. package/package.json +1 -1
  27. package/scss/components/button.scss +4 -3
  28. package/scss/components/link.scss +1 -1
  29. package/scss/components/message.scss +7 -3
  30. package/scss/components/pill.scss +2 -2
  31. package/scss/dark.scss +4 -0
  32. package/scss/light.scss +4 -0
package/css/components/button.css CHANGED
@@ -68,6 +68,7 @@
68
68
  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
69
69
  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
70
70
  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
71
+ --button-typical-toggle-bg-default: var(--mode-color-action-grayscale-with-default);
71
72
  --button-typical-toggle-bg-hover: var(--mode-color-generic-bg-delicate);
72
73
  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);
73
74
  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);
package/css/components/message.css CHANGED
@@ -7,13 +7,14 @@
7
7
  */
8
8
 
9
9
  :root {
10
+ --message-contextual-icon: #ffffff;
10
11
  --message-none: var(--mode-color-none);
11
12
  --message-contextual-bg: var(--mode-color-generic-bg-nought);
12
- --message-contextual-icon: var(--mode-color-generic-bg-nought);
13
13
  --message-contextual-icon-alt: var(--mode-color-status-neutral-default);
14
14
  --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);
15
15
  --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);
16
16
  --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);
17
+ --message-contextual-ai-border-alt: var(--mode-color-status-ai-with-default-alt);
17
18
  --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);
18
19
  --message-contextual-error-bg-default: var(--mode-color-status-negative-default);
19
20
  --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);
@@ -22,14 +23,17 @@
22
23
  --message-contextual-info-bg-default: var(--mode-color-status-info-default);
23
24
  --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);
24
25
  --message-contextual-info-border-default: var(--mode-color-status-info-default);
26
+ --message-contextual-info-border-alt: var(--mode-color-status-info-with-default-alt);
25
27
  --message-contextual-info-icon: var(--mode-color-status-info-default);
26
28
  --message-contextual-success-bg-default: var(--mode-color-status-positive-default);
27
29
  --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);
28
30
  --message-contextual-success-border-default: var(--mode-color-status-positive-default);
31
+ --message-contextual-success-border-alt: var(--mode-color-status-positive-with-default-alt);
29
32
  --message-contextual-success-icon: var(--mode-color-status-positive-default);
30
33
  --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);
31
34
  --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);
32
35
  --message-contextual-warning-border-default: var(--mode-color-status-warning-default);
36
+ --message-contextual-warning-border-alt: var(--mode-color-status-warning-with-default-alt);
33
37
  --message-contextual-warning-icon: var(--mode-color-status-warning-default);
34
38
  --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);
35
39
  --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);
package/css/dark.css CHANGED
@@ -222,6 +222,7 @@
222
222
  --mode-color-action-main-inverse-with-hover: #FFFFFF;
223
223
  --mode-color-status-ai-default: #000000;
224
224
  --mode-color-status-ai-default-alt: #FFFFFF;
225
+ --mode-color-status-ai-with-default-alt: #ffffff80;
225
226
  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
226
227
  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
227
228
  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
@@ -232,6 +233,7 @@
232
233
  --mode-color-status-skeleton-stop-2: #475a6a;
233
234
  --mode-color-status-warning-default: #e24300;
234
235
  --mode-color-status-warning-default-alt: #1d0300;
236
+ --mode-color-status-warning-with-default-alt: #e2430080;
235
237
  --mode-color-status-warning-hover: #e5631c;
236
238
  --mode-color-status-warning-hover-alt: #360900;
237
239
  --mode-color-status-warning-txt: #e5631c;
@@ -304,6 +306,7 @@
304
306
  --mode-color-status-inactive-inverse-with-default: #0000008c;
305
307
  --mode-color-status-info-default: #007fd9;
306
308
  --mode-color-status-info-default-alt: #000b1c;
309
+ --mode-color-status-info-with-default-alt: #007fd980;
307
310
  --mode-color-status-info-hover: #008ef4;
308
311
  --mode-color-status-info-hover-alt: #001932;
309
312
  --mode-color-status-info-inverse-default: #0071c3;
@@ -328,6 +331,7 @@
328
331
  --mode-color-status-neutral-inverse-hover-alt: #eeeeee;
329
332
  --mode-color-status-positive-default: #019127;
330
333
  --mode-color-status-positive-default-alt: #001001;
334
+ --mode-color-status-positive-with-default-alt: #01912780;
331
335
  --mode-color-status-positive-hover: #1BA12B;
332
336
  --mode-color-status-positive-hover-alt: #001f03;
333
337
  --mode-color-status-positive-inverse-default: #00811F;
package/css/light-all.css CHANGED
@@ -371,6 +371,7 @@
371
371
  --mode-color-action-main-inverse-with-hover: #000000;
372
372
  --mode-color-status-ai-default: #FFFFFF;
373
373
  --mode-color-status-ai-default-alt: #000000;
374
+ --mode-color-status-ai-with-default-alt: #00000080;
374
375
  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);
375
376
  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);
376
377
  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
@@ -381,6 +382,7 @@
381
382
  --mode-color-status-skeleton-stop-2: #d1d6da;
382
383
  --mode-color-status-warning-default: #d64309;
383
384
  --mode-color-status-warning-default-alt: #fff7eb;
385
+ --mode-color-status-warning-with-default-alt: #d6430980;
384
386
  --mode-color-status-warning-hover: #b33400;
385
387
  --mode-color-status-warning-hover-alt: #ffeaca;
386
388
  --mode-color-status-warning-txt: #b33400;
@@ -453,6 +455,7 @@
453
455
  --mode-color-status-inactive-inverse-with-default: #ffffff8c;
454
456
  --mode-color-status-info-default: #0071c3;
455
457
  --mode-color-status-info-default-alt: #f5f8ff;
458
+ --mode-color-status-info-with-default-alt: #0071c380;
456
459
  --mode-color-status-info-hover: #0063ad;
457
460
  --mode-color-status-info-hover-alt: #e4eeff;
458
461
  --mode-color-status-info-inverse-default: #007fd9;
@@ -477,6 +480,7 @@
477
480
  --mode-color-status-neutral-inverse-hover-alt: #181818;
478
481
  --mode-color-status-positive-default: #00811F;
479
482
  --mode-color-status-positive-default-alt: #EEFCEF;
483
+ --mode-color-status-positive-with-default-alt: #00811f80;
480
484
  --mode-color-status-positive-hover: #007219;
481
485
  --mode-color-status-positive-hover-alt: #D1F6D6;
482
486
  --mode-color-status-positive-inverse-default: #019127;
@@ -762,13 +766,14 @@
762
766
  --nav-primary-label-default: var(--mode-color-action-nav-inverse-with-default);
763
767
  --nav-secondary-label-default: var(--mode-color-action-nav-inverse-with-default);
764
768
  --nav-tertiary-label-default: var(--mode-color-action-nav-with-default);
769
+ --message-contextual-icon: #ffffff;
765
770
  --message-none: var(--mode-color-none);
766
771
  --message-contextual-bg: var(--mode-color-generic-bg-nought);
767
- --message-contextual-icon: var(--mode-color-generic-bg-nought);
768
772
  --message-contextual-icon-alt: var(--mode-color-status-neutral-default);
769
773
  --message-contextual-ai-bg-default: var(--mode-color-status-ai-default-alt);
770
774
  --message-contextual-ai-bg-alt: var(--mode-color-status-neutral-default-alt);
771
775
  --message-contextual-ai-border-default: var(--mode-color-status-ai-default-alt);
776
+ --message-contextual-ai-border-alt: var(--mode-color-status-ai-with-default-alt);
772
777
  --message-contextual-callout-bg-alt: var(--mode-color-status-callout-default-alt);
773
778
  --message-contextual-error-bg-default: var(--mode-color-status-negative-default);
774
779
  --message-contextual-error-bg-alt: var(--mode-color-status-negative-default-alt);
@@ -777,14 +782,17 @@
777
782
  --message-contextual-info-bg-default: var(--mode-color-status-info-default);
778
783
  --message-contextual-info-bg-alt: var(--mode-color-status-info-default-alt);
779
784
  --message-contextual-info-border-default: var(--mode-color-status-info-default);
785
+ --message-contextual-info-border-alt: var(--mode-color-status-info-with-default-alt);
780
786
  --message-contextual-info-icon: var(--mode-color-status-info-default);
781
787
  --message-contextual-success-bg-default: var(--mode-color-status-positive-default);
782
788
  --message-contextual-success-bg-alt: var(--mode-color-status-positive-default-alt);
783
789
  --message-contextual-success-border-default: var(--mode-color-status-positive-default);
790
+ --message-contextual-success-border-alt: var(--mode-color-status-positive-with-default-alt);
784
791
  --message-contextual-success-icon: var(--mode-color-status-positive-default);
785
792
  --message-contextual-warning-bg-default: var(--mode-color-status-warning-default);
786
793
  --message-contextual-warning-bg-alt: var(--mode-color-status-warning-default-alt);
787
794
  --message-contextual-warning-border-default: var(--mode-color-status-warning-default);
795
+ --message-contextual-warning-border-alt: var(--mode-color-status-warning-with-default-alt);
788
796
  --message-contextual-warning-icon: var(--mode-color-status-warning-default);
789
797
  --message-global-label-hover: var(--mode-color-action-grayscale-with-hover);
790
798
  --message-global-callout-bg-default: var(--mode-color-status-callout-default-alt);
@@ -1196,6 +1204,7 @@
1196
1204
  --button-typical-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-with-hover);
1197
1205
  --button-typical-toggle-bg-active-disabled: var(--mode-color-action-inactive-default);
1198
1206
  --button-typical-toggle-bg-active: var(--mode-color-action-grayscale-active);
1207
+ --button-typical-toggle-bg-default: var(--mode-color-action-grayscale-with-default);
1199
1208
  --button-typical-toggle-bg-hover: var(--mode-color-generic-bg-delicate);
1200
1209
  --button-typical-toggle-border-disabled: var(--mode-color-action-inactive-default);
1201
1210
  --button-typical-toggle-label-active: var(--mode-color-action-grayscale-with-active);
package/css/light.css CHANGED
@@ -222,6 +222,7 @@
222
222
  --mode-color-action-main-inverse-with-hover: #000000;
223
223
  --mode-color-status-ai-default: #FFFFFF;
224
224
  --mode-color-status-ai-default-alt: #000000;
225
+ --mode-color-status-ai-with-default-alt: #00000080;
225
226
  --mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);
226
227
  --mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);
227
228
  --mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
@@ -232,6 +233,7 @@
232
233
  --mode-color-status-skeleton-stop-2: #d1d6da;
233
234
  --mode-color-status-warning-default: #d64309;
234
235
  --mode-color-status-warning-default-alt: #fff7eb;
236
+ --mode-color-status-warning-with-default-alt: #d6430980;
235
237
  --mode-color-status-warning-hover: #b33400;
236
238
  --mode-color-status-warning-hover-alt: #ffeaca;
237
239
  --mode-color-status-warning-txt: #b33400;
@@ -304,6 +306,7 @@
304
306
  --mode-color-status-inactive-inverse-with-default: #ffffff8c;
305
307
  --mode-color-status-info-default: #0071c3;
306
308
  --mode-color-status-info-default-alt: #f5f8ff;
309
+ --mode-color-status-info-with-default-alt: #0071c380;
307
310
  --mode-color-status-info-hover: #0063ad;
308
311
  --mode-color-status-info-hover-alt: #e4eeff;
309
312
  --mode-color-status-info-inverse-default: #007fd9;
@@ -328,6 +331,7 @@
328
331
  --mode-color-status-neutral-inverse-hover-alt: #181818;
329
332
  --mode-color-status-positive-default: #00811F;
330
333
  --mode-color-status-positive-default-alt: #EEFCEF;
334
+ --mode-color-status-positive-with-default-alt: #00811f80;
331
335
  --mode-color-status-positive-hover: #007219;
332
336
  --mode-color-status-positive-hover-alt: #D1F6D6;
333
337
  --mode-color-status-positive-inverse-default: #019127;
package/js/common/components/button.d.ts CHANGED
@@ -147,6 +147,7 @@ declare const tokens: {
147
147
  "bg-activeDisabled": DesignToken;
148
148
  "label-activeDisabled": DesignToken;
149
149
  "bg-active": DesignToken;
150
+ "bg-default": DesignToken;
150
151
  "bg-hover": DesignToken;
151
152
  "border-default": DesignToken;
152
153
  "border-disabled": DesignToken;
package/js/common/components/button.js CHANGED
@@ -103,6 +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.buttonTypicalToggleBgDefault = "var(--mode-color-action-grayscale-with-default)";
106
107
  module.exports.buttonTypicalToggleBgHover = "var(--mode-color-generic-bg-delicate)";
107
108
  module.exports.buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
108
109
  module.exports.buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
package/js/common/components/message.d.ts CHANGED
@@ -30,6 +30,7 @@ declare const tokens: {
30
30
  "bg-default": DesignToken;
31
31
  bgAlt: DesignToken;
32
32
  "border-default": DesignToken;
33
+ "border-alt": DesignToken;
33
34
  };
34
35
  callout: {
35
36
  bgAlt: DesignToken;
@@ -45,18 +46,21 @@ declare const tokens: {
45
46
  "bg-default": DesignToken;
46
47
  bgAlt: DesignToken;
47
48
  "border-default": DesignToken;
49
+ "border-alt": DesignToken;
48
50
  icon: DesignToken;
49
51
  };
50
52
  success: {
51
53
  "bg-default": DesignToken;
52
54
  bgAlt: DesignToken;
53
55
  "border-default": DesignToken;
56
+ "border-alt": DesignToken;
54
57
  icon: DesignToken;
55
58
  };
56
59
  warning: {
57
60
  "bg-default": DesignToken;
58
61
  bgAlt: DesignToken;
59
62
  "border-default": DesignToken;
63
+ "border-alt": DesignToken;
60
64
  icon: DesignToken;
61
65
  };
62
66
  };
package/js/common/components/message.js CHANGED
@@ -4,12 +4,13 @@
4
4
 
5
5
  module.exports.messageNone = "var(--mode-color-none)";
6
6
  module.exports.messageContextualBg = "var(--mode-color-generic-bg-nought)";
7
- module.exports.messageContextualIcon = "var(--mode-color-generic-bg-nought)";
7
+ module.exports.messageContextualIcon = "#ffffff";
8
8
  module.exports.messageContextualIconAlt = "var(--mode-color-status-neutral-default)";
9
9
  module.exports.messageContextualTxt = "var(--mode-color-status-txt-with-hover-alt)";
10
10
  module.exports.messageContextualAiBgDefault = "var(--mode-color-status-ai-default-alt)";
11
11
  module.exports.messageContextualAiBgAlt = "var(--mode-color-status-neutral-default-alt)";
12
12
  module.exports.messageContextualAiBorderDefault = "var(--mode-color-status-ai-default-alt)";
13
+ module.exports.messageContextualAiBorderAlt = "var(--mode-color-status-ai-with-default-alt)";
13
14
  module.exports.messageContextualCalloutBgAlt = "var(--mode-color-status-callout-default-alt)";
14
15
  module.exports.messageContextualCalloutIcon = "var(--mode-color-status-txt-with-default-alt)";
15
16
  module.exports.messageContextualErrorBgDefault = "var(--mode-color-status-negative-default)";
@@ -19,14 +20,17 @@ module.exports.messageContextualErrorIcon = "var(--mode-color-status-negative-de
19
20
  module.exports.messageContextualInfoBgDefault = "var(--mode-color-status-info-default)";
20
21
  module.exports.messageContextualInfoBgAlt = "var(--mode-color-status-info-default-alt)";
21
22
  module.exports.messageContextualInfoBorderDefault = "var(--mode-color-status-info-default)";
23
+ module.exports.messageContextualInfoBorderAlt = "var(--mode-color-status-info-with-default-alt)";
22
24
  module.exports.messageContextualInfoIcon = "var(--mode-color-status-info-default)";
23
25
  module.exports.messageContextualSuccessBgDefault = "var(--mode-color-status-positive-default)";
24
26
  module.exports.messageContextualSuccessBgAlt = "var(--mode-color-status-positive-default-alt)";
25
27
  module.exports.messageContextualSuccessBorderDefault = "var(--mode-color-status-positive-default)";
28
+ module.exports.messageContextualSuccessBorderAlt = "var(--mode-color-status-positive-with-default-alt)";
26
29
  module.exports.messageContextualSuccessIcon = "var(--mode-color-status-positive-default)";
27
30
  module.exports.messageContextualWarningBgDefault = "var(--mode-color-status-warning-default)";
28
31
  module.exports.messageContextualWarningBgAlt = "var(--mode-color-status-warning-default-alt)";
29
32
  module.exports.messageContextualWarningBorderDefault = "var(--mode-color-status-warning-default)";
33
+ module.exports.messageContextualWarningBorderAlt = "var(--mode-color-status-warning-with-default-alt)";
30
34
  module.exports.messageContextualWarningIcon = "var(--mode-color-status-warning-default)";
31
35
  module.exports.messageGlobalLabelDefault = "var(--mode-color-status-txt-with-default-alt)";
32
36
  module.exports.messageGlobalLabelHover = "var(--mode-color-action-grayscale-with-hover)";
package/js/common/dark.d.ts CHANGED
@@ -328,6 +328,7 @@ declare const tokens: {
328
328
  ai: {
329
329
  default: DesignToken;
330
330
  defaultAlt: DesignToken;
331
+ withDefaultAlt: DesignToken;
331
332
  "default-horizontal": DesignToken;
332
333
  "default-vertical": DesignToken;
333
334
  inverse: {
@@ -346,6 +347,7 @@ declare const tokens: {
346
347
  warning: {
347
348
  default: DesignToken;
348
349
  defaultAlt: DesignToken;
350
+ withDefaultAlt: DesignToken;
349
351
  hover: DesignToken;
350
352
  hoverAlt: DesignToken;
351
353
  txt: DesignToken;
@@ -456,6 +458,7 @@ declare const tokens: {
456
458
  info: {
457
459
  default: DesignToken;
458
460
  defaultAlt: DesignToken;
461
+ withDefaultAlt: DesignToken;
459
462
  hover: DesignToken;
460
463
  hoverAlt: DesignToken;
461
464
  inverse: {
@@ -492,6 +495,7 @@ declare const tokens: {
492
495
  positive: {
493
496
  default: DesignToken;
494
497
  defaultAlt: DesignToken;
498
+ withDefaultAlt: DesignToken;
495
499
  hover: DesignToken;
496
500
  hoverAlt: DesignToken;
497
501
  inverse: {
package/js/common/dark.js CHANGED
@@ -217,6 +217,7 @@ module.exports.modeColorActionMainInverseWithDefault = "#FFFFFF";
217
217
  module.exports.modeColorActionMainInverseWithHover = "#FFFFFF";
218
218
  module.exports.modeColorStatusAiDefault = "#000000";
219
219
  module.exports.modeColorStatusAiDefaultAlt = "#FFFFFF";
220
+ module.exports.modeColorStatusAiWithDefaultAlt = "#ffffff80";
220
221
  module.exports.modeColorStatusAiDefaultHorizontal = "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)";
221
222
  module.exports.modeColorStatusAiDefaultVertical = "linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)";
222
223
  module.exports.modeColorStatusAiInverseDefaultHorizontal = "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)";
@@ -227,6 +228,7 @@ module.exports.modeColorStatusSkeletonStop1 = "#a3adb5";
227
228
  module.exports.modeColorStatusSkeletonStop2 = "#475a6a";
228
229
  module.exports.modeColorStatusWarningDefault = "#e24300";
229
230
  module.exports.modeColorStatusWarningDefaultAlt = "#1d0300";
231
+ module.exports.modeColorStatusWarningWithDefaultAlt = "#e2430080";
230
232
  module.exports.modeColorStatusWarningHover = "#e5631c";
231
233
  module.exports.modeColorStatusWarningHoverAlt = "#360900";
232
234
  module.exports.modeColorStatusWarningTxt = "#e5631c";
@@ -299,6 +301,7 @@ module.exports.modeColorStatusInactiveInverseDefault = "#75838f";
299
301
  module.exports.modeColorStatusInactiveInverseWithDefault = "#0000008c";
300
302
  module.exports.modeColorStatusInfoDefault = "#007fd9";
301
303
  module.exports.modeColorStatusInfoDefaultAlt = "#000b1c";
304
+ module.exports.modeColorStatusInfoWithDefaultAlt = "#007fd980";
302
305
  module.exports.modeColorStatusInfoHover = "#008ef4";
303
306
  module.exports.modeColorStatusInfoHoverAlt = "#001932";
304
307
  module.exports.modeColorStatusInfoInverseDefault = "#0071c3";
@@ -323,6 +326,7 @@ module.exports.modeColorStatusNeutralInverseHover = "#616161";
323
326
  module.exports.modeColorStatusNeutralInverseHoverAlt = "#eeeeee";
324
327
  module.exports.modeColorStatusPositiveDefault = "#019127";
325
328
  module.exports.modeColorStatusPositiveDefaultAlt = "#001001";
329
+ module.exports.modeColorStatusPositiveWithDefaultAlt = "#01912780";
326
330
  module.exports.modeColorStatusPositiveHover = "#1BA12B";
327
331
  module.exports.modeColorStatusPositiveHoverAlt = "#001f03";
328
332
  module.exports.modeColorStatusPositiveInverseDefault = "#00811F";
package/js/common/light.d.ts CHANGED
@@ -328,6 +328,7 @@ declare const tokens: {
328
328
  ai: {
329
329
  default: DesignToken;
330
330
  defaultAlt: DesignToken;
331
+ withDefaultAlt: DesignToken;
331
332
  "default-horizontal": DesignToken;
332
333
  "default-vertical": DesignToken;
333
334
  inverse: {
@@ -346,6 +347,7 @@ declare const tokens: {
346
347
  warning: {
347
348
  default: DesignToken;
348
349
  defaultAlt: DesignToken;
350
+ withDefaultAlt: DesignToken;
349
351
  hover: DesignToken;
350
352
  hoverAlt: DesignToken;
351
353
  txt: DesignToken;
@@ -456,6 +458,7 @@ declare const tokens: {
456
458
  info: {
457
459
  default: DesignToken;
458
460
  defaultAlt: DesignToken;
461
+ withDefaultAlt: DesignToken;
459
462
  hover: DesignToken;
460
463
  hoverAlt: DesignToken;
461
464
  inverse: {
@@ -492,6 +495,7 @@ declare const tokens: {
492
495
  positive: {
493
496
  default: DesignToken;
494
497
  defaultAlt: DesignToken;
498
+ withDefaultAlt: DesignToken;
495
499
  hover: DesignToken;
496
500
  hoverAlt: DesignToken;
497
501
  inverse: {
package/js/common/light.js CHANGED
@@ -217,6 +217,7 @@ module.exports.modeColorActionMainInverseWithDefault = "#000000";
217
217
  module.exports.modeColorActionMainInverseWithHover = "#000000";
218
218
  module.exports.modeColorStatusAiDefault = "#FFFFFF";
219
219
  module.exports.modeColorStatusAiDefaultAlt = "#000000";
220
+ module.exports.modeColorStatusAiWithDefaultAlt = "#00000080";
220
221
  module.exports.modeColorStatusAiDefaultHorizontal = "linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)";
221
222
  module.exports.modeColorStatusAiDefaultVertical = "linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%)";
222
223
  module.exports.modeColorStatusAiInverseDefaultHorizontal = "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)";
@@ -227,6 +228,7 @@ module.exports.modeColorStatusSkeletonStop1 = "#75838f";
227
228
  module.exports.modeColorStatusSkeletonStop2 = "#d1d6da";
228
229
  module.exports.modeColorStatusWarningDefault = "#d64309";
229
230
  module.exports.modeColorStatusWarningDefaultAlt = "#fff7eb";
231
+ module.exports.modeColorStatusWarningWithDefaultAlt = "#d6430980";
230
232
  module.exports.modeColorStatusWarningHover = "#b33400";
231
233
  module.exports.modeColorStatusWarningHoverAlt = "#ffeaca";
232
234
  module.exports.modeColorStatusWarningTxt = "#b33400";
@@ -299,6 +301,7 @@ module.exports.modeColorStatusInactiveInverseDefault = "#6f6f6f";
299
301
  module.exports.modeColorStatusInactiveInverseWithDefault = "#ffffff8c";
300
302
  module.exports.modeColorStatusInfoDefault = "#0071c3";
301
303
  module.exports.modeColorStatusInfoDefaultAlt = "#f5f8ff";
304
+ module.exports.modeColorStatusInfoWithDefaultAlt = "#0071c380";
302
305
  module.exports.modeColorStatusInfoHover = "#0063ad";
303
306
  module.exports.modeColorStatusInfoHoverAlt = "#e4eeff";
304
307
  module.exports.modeColorStatusInfoInverseDefault = "#007fd9";
@@ -323,6 +326,7 @@ module.exports.modeColorStatusNeutralInverseHover = "#8b8b8b";
323
326
  module.exports.modeColorStatusNeutralInverseHoverAlt = "#181818";
324
327
  module.exports.modeColorStatusPositiveDefault = "#00811F";
325
328
  module.exports.modeColorStatusPositiveDefaultAlt = "#EEFCEF";
329
+ module.exports.modeColorStatusPositiveWithDefaultAlt = "#00811f80";
326
330
  module.exports.modeColorStatusPositiveHover = "#007219";
327
331
  module.exports.modeColorStatusPositiveHoverAlt = "#D1F6D6";
328
332
  module.exports.modeColorStatusPositiveInverseDefault = "#019127";
package/js/es6/components/button.d.ts CHANGED
@@ -110,6 +110,7 @@ export const buttonTypicalSubtleInverseLabelHover: string;
110
110
  export const buttonTypicalToggleBgActiveDisabled: string;
111
111
  export const buttonTypicalToggleLabelActiveDisabled: string;
112
112
  export const buttonTypicalToggleBgActive: string;
113
+ export const buttonTypicalToggleBgDefault: string;
113
114
  export const buttonTypicalToggleBgHover: string;
114
115
  export const buttonTypicalToggleBorderDefault: string;
115
116
  export const buttonTypicalToggleBorderDisabled: string;
package/js/es6/components/button.js CHANGED
@@ -103,6 +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 buttonTypicalToggleBgDefault = "var(--mode-color-action-grayscale-with-default)";
106
107
  export const buttonTypicalToggleBgHover = "var(--mode-color-generic-bg-delicate)";
107
108
  export const buttonTypicalToggleBorderDefault = "var(--mode-color-action-grayscale-default)";
108
109
  export const buttonTypicalToggleBorderDisabled = "var(--mode-color-action-inactive-default)";
package/js/es6/components/message.d.ts CHANGED
@@ -18,6 +18,7 @@ export const messageContextualTxt: string;
18
18
  export const messageContextualAiBgDefault: string;
19
19
  export const messageContextualAiBgAlt: string;
20
20
  export const messageContextualAiBorderDefault: string;
21
+ export const messageContextualAiBorderAlt: string;
21
22
  /** Subtle message bg */
22
23
  export const messageContextualCalloutBgAlt: string;
23
24
  export const messageContextualCalloutIcon: string;
@@ -31,18 +32,21 @@ export const messageContextualInfoBgDefault: string;
31
32
  /** Subtle message bg */
32
33
  export const messageContextualInfoBgAlt: string;
33
34
  export const messageContextualInfoBorderDefault: string;
35
+ export const messageContextualInfoBorderAlt: string;
34
36
  /** Icon on tinted bgs */
35
37
  export const messageContextualInfoIcon: string;
36
38
  export const messageContextualSuccessBgDefault: string;
37
39
  /** Subtle message bg */
38
40
  export const messageContextualSuccessBgAlt: string;
39
41
  export const messageContextualSuccessBorderDefault: string;
42
+ export const messageContextualSuccessBorderAlt: string;
40
43
  /** Icon on tinted bgs */
41
44
  export const messageContextualSuccessIcon: string;
42
45
  export const messageContextualWarningBgDefault: string;
43
46
  /** Subtle message bg */
44
47
  export const messageContextualWarningBgAlt: string;
45
48
  export const messageContextualWarningBorderDefault: string;
49
+ export const messageContextualWarningBorderAlt: string;
46
50
  /** Icon on tinted bgs */
47
51
  export const messageContextualWarningIcon: string;
48
52
  export const messageGlobalLabelDefault: string;
package/js/es6/components/message.js CHANGED
@@ -4,12 +4,13 @@
4
4
 
5
5
  export const messageNone = "var(--mode-color-none)";
6
6
  export const messageContextualBg = "var(--mode-color-generic-bg-nought)";
7
- export const messageContextualIcon = "var(--mode-color-generic-bg-nought)";
7
+ export const messageContextualIcon = "#ffffff";
8
8
  export const messageContextualIconAlt = "var(--mode-color-status-neutral-default)";
9
9
  export const messageContextualTxt = "var(--mode-color-status-txt-with-hover-alt)";
10
10
  export const messageContextualAiBgDefault = "var(--mode-color-status-ai-default-alt)";
11
11
  export const messageContextualAiBgAlt = "var(--mode-color-status-neutral-default-alt)";
12
12
  export const messageContextualAiBorderDefault = "var(--mode-color-status-ai-default-alt)";
13
+ export const messageContextualAiBorderAlt = "var(--mode-color-status-ai-with-default-alt)";
13
14
  export const messageContextualCalloutBgAlt = "var(--mode-color-status-callout-default-alt)";
14
15
  export const messageContextualCalloutIcon = "var(--mode-color-status-txt-with-default-alt)";
15
16
  export const messageContextualErrorBgDefault = "var(--mode-color-status-negative-default)";
@@ -19,14 +20,17 @@ export const messageContextualErrorIcon = "var(--mode-color-status-negative-defa
19
20
  export const messageContextualInfoBgDefault = "var(--mode-color-status-info-default)";
20
21
  export const messageContextualInfoBgAlt = "var(--mode-color-status-info-default-alt)";
21
22
  export const messageContextualInfoBorderDefault = "var(--mode-color-status-info-default)";
23
+ export const messageContextualInfoBorderAlt = "var(--mode-color-status-info-with-default-alt)";
22
24
  export const messageContextualInfoIcon = "var(--mode-color-status-info-default)";
23
25
  export const messageContextualSuccessBgDefault = "var(--mode-color-status-positive-default)";
24
26
  export const messageContextualSuccessBgAlt = "var(--mode-color-status-positive-default-alt)";
25
27
  export const messageContextualSuccessBorderDefault = "var(--mode-color-status-positive-default)";
28
+ export const messageContextualSuccessBorderAlt = "var(--mode-color-status-positive-with-default-alt)";
26
29
  export const messageContextualSuccessIcon = "var(--mode-color-status-positive-default)";
27
30
  export const messageContextualWarningBgDefault = "var(--mode-color-status-warning-default)";
28
31
  export const messageContextualWarningBgAlt = "var(--mode-color-status-warning-default-alt)";
29
32
  export const messageContextualWarningBorderDefault = "var(--mode-color-status-warning-default)";
33
+ export const messageContextualWarningBorderAlt = "var(--mode-color-status-warning-with-default-alt)";
30
34
  export const messageContextualWarningIcon = "var(--mode-color-status-warning-default)";
31
35
  export const messageGlobalLabelDefault = "var(--mode-color-status-txt-with-default-alt)";
32
36
  export const messageGlobalLabelHover = "var(--mode-color-action-grayscale-with-hover)";
package/js/es6/dark.d.ts CHANGED
@@ -292,6 +292,7 @@ export const modeColorActionMainInverseWithHover: string;
292
292
  export const modeColorStatusAiDefault: string;
293
293
  /** bg for contxtual message comp */
294
294
  export const modeColorStatusAiDefaultAlt: string;
295
+ export const modeColorStatusAiWithDefaultAlt: string;
295
296
  export const modeColorStatusAiDefaultHorizontal: string;
296
297
  export const modeColorStatusAiDefaultVertical: string;
297
298
  export const modeColorStatusAiInverseDefaultHorizontal: string;
@@ -305,6 +306,7 @@ export const modeColorStatusSkeletonStop2: string;
305
306
  export const modeColorStatusWarningDefault: string;
306
307
  /** Subtle message bg */
307
308
  export const modeColorStatusWarningDefaultAlt: string;
309
+ export const modeColorStatusWarningWithDefaultAlt: string;
308
310
  /** used on pill hover states */
309
311
  export const modeColorStatusWarningHover: string;
310
312
  /** used on pill hover states and message bg */
@@ -436,6 +438,7 @@ export const modeColorStatusInactiveInverseWithDefault: string;
436
438
  export const modeColorStatusInfoDefault: string;
437
439
  /** Subtle message bg */
438
440
  export const modeColorStatusInfoDefaultAlt: string;
441
+ export const modeColorStatusInfoWithDefaultAlt: string;
439
442
  /** used on pill hover states */
440
443
  export const modeColorStatusInfoHover: string;
441
444
  /** used on pill hover states and message bg */
@@ -478,6 +481,7 @@ export const modeColorStatusNeutralInverseHoverAlt: string;
478
481
  export const modeColorStatusPositiveDefault: string;
479
482
  /** Subtle message bg */
480
483
  export const modeColorStatusPositiveDefaultAlt: string;
484
+ export const modeColorStatusPositiveWithDefaultAlt: string;
481
485
  /** used on pill hover states */
482
486
  export const modeColorStatusPositiveHover: string;
483
487
  /** used on pill hover states and message bg */
package/js/es6/dark.js CHANGED
@@ -224,6 +224,7 @@ export const modeColorActionMainInverseWithDefault = "#FFFFFF";
224
224
  export const modeColorActionMainInverseWithHover = "#FFFFFF";
225
225
  export const modeColorStatusAiDefault = "#000000";
226
226
  export const modeColorStatusAiDefaultAlt = "#FFFFFF"; // bg for contxtual message comp
227
+ export const modeColorStatusAiWithDefaultAlt = "#ffffff80";
227
228
  export const modeColorStatusAiDefaultHorizontal =
228
229
  "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)";
229
230
  export const modeColorStatusAiDefaultVertical =
@@ -238,6 +239,7 @@ export const modeColorStatusSkeletonStop1 = "#a3adb5";
238
239
  export const modeColorStatusSkeletonStop2 = "#475a6a";
239
240
  export const modeColorStatusWarningDefault = "#e24300";
240
241
  export const modeColorStatusWarningDefaultAlt = "#1d0300"; // Subtle message bg
242
+ export const modeColorStatusWarningWithDefaultAlt = "#e2430080";
241
243
  export const modeColorStatusWarningHover = "#e5631c"; // used on pill hover states
242
244
  export const modeColorStatusWarningHoverAlt = "#360900"; // used on pill hover states and message bg
243
245
  export const modeColorStatusWarningTxt = "#e5631c";
@@ -310,6 +312,7 @@ export const modeColorStatusInactiveInverseDefault = "#75838f"; // For readonly
310
312
  export const modeColorStatusInactiveInverseWithDefault = "#0000008c"; // For readonly filled pill txt
311
313
  export const modeColorStatusInfoDefault = "#007fd9";
312
314
  export const modeColorStatusInfoDefaultAlt = "#000b1c"; // Subtle message bg
315
+ export const modeColorStatusInfoWithDefaultAlt = "#007fd980";
313
316
  export const modeColorStatusInfoHover = "#008ef4"; // used on pill hover states
314
317
  export const modeColorStatusInfoHoverAlt = "#001932"; // used on pill hover states and message bg
315
318
  export const modeColorStatusInfoInverseDefault = "#0071c3";
@@ -334,6 +337,7 @@ export const modeColorStatusNeutralInverseHover = "#616161"; // used on pill hov
334
337
  export const modeColorStatusNeutralInverseHoverAlt = "#eeeeee"; // used on pill hover states and message bg
335
338
  export const modeColorStatusPositiveDefault = "#019127";
336
339
  export const modeColorStatusPositiveDefaultAlt = "#001001"; // Subtle message bg
340
+ export const modeColorStatusPositiveWithDefaultAlt = "#01912780";
337
341
  export const modeColorStatusPositiveHover = "#1BA12B"; // used on pill hover states
338
342
  export const modeColorStatusPositiveHoverAlt = "#001f03"; // used on pill hover states and message bg
339
343
  export const modeColorStatusPositiveInverseDefault = "#00811F";
package/js/es6/light.d.ts CHANGED
@@ -294,6 +294,7 @@ export const modeColorActionMainInverseWithHover: string;
294
294
  export const modeColorStatusAiDefault: string;
295
295
  /** bg for contxtual message comp */
296
296
  export const modeColorStatusAiDefaultAlt: string;
297
+ export const modeColorStatusAiWithDefaultAlt: string;
297
298
  export const modeColorStatusAiDefaultHorizontal: string;
298
299
  export const modeColorStatusAiDefaultVertical: string;
299
300
  export const modeColorStatusAiInverseDefaultHorizontal: string;
@@ -307,6 +308,7 @@ export const modeColorStatusSkeletonStop2: string;
307
308
  export const modeColorStatusWarningDefault: string;
308
309
  /** Subtle message bg */
309
310
  export const modeColorStatusWarningDefaultAlt: string;
311
+ export const modeColorStatusWarningWithDefaultAlt: string;
310
312
  /** used on pill hover states */
311
313
  export const modeColorStatusWarningHover: string;
312
314
  /** used on pill hover states and message bg */
@@ -432,6 +434,7 @@ export const modeColorStatusInactiveInverseWithDefault: string;
432
434
  export const modeColorStatusInfoDefault: string;
433
435
  /** Subtle message bg */
434
436
  export const modeColorStatusInfoDefaultAlt: string;
437
+ export const modeColorStatusInfoWithDefaultAlt: string;
435
438
  /** used on pill hover states */
436
439
  export const modeColorStatusInfoHover: string;
437
440
  /** used on pill hover states and message bg */
@@ -474,6 +477,7 @@ export const modeColorStatusNeutralInverseHoverAlt: string;
474
477
  export const modeColorStatusPositiveDefault: string;
475
478
  /** Subtle message bg */
476
479
  export const modeColorStatusPositiveDefaultAlt: string;
480
+ export const modeColorStatusPositiveWithDefaultAlt: string;
477
481
  /** used on pill hover states */
478
482
  export const modeColorStatusPositiveHover: string;
479
483
  /** used on pill hover states and message bg */
package/js/es6/light.js CHANGED
@@ -224,6 +224,7 @@ export const modeColorActionMainInverseWithDefault = "#000000";
224
224
  export const modeColorActionMainInverseWithHover = "#000000";
225
225
  export const modeColorStatusAiDefault = "#FFFFFF";
226
226
  export const modeColorStatusAiDefaultAlt = "#000000"; // bg for contxtual message comp
227
+ export const modeColorStatusAiWithDefaultAlt = "#00000080";
227
228
  export const modeColorStatusAiDefaultHorizontal =
228
229
  "linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)";
229
230
  export const modeColorStatusAiDefaultVertical =
@@ -238,6 +239,7 @@ export const modeColorStatusSkeletonStop1 = "#75838f";
238
239
  export const modeColorStatusSkeletonStop2 = "#d1d6da";
239
240
  export const modeColorStatusWarningDefault = "#d64309";
240
241
  export const modeColorStatusWarningDefaultAlt = "#fff7eb"; // Subtle message bg
242
+ export const modeColorStatusWarningWithDefaultAlt = "#d6430980";
241
243
  export const modeColorStatusWarningHover = "#b33400"; // used on pill hover states
242
244
  export const modeColorStatusWarningHoverAlt = "#ffeaca"; // used on pill hover states and message bg
243
245
  export const modeColorStatusWarningTxt = "#b33400";
@@ -310,6 +312,7 @@ export const modeColorStatusInactiveInverseDefault = "#6f6f6f"; // For readonly
310
312
  export const modeColorStatusInactiveInverseWithDefault = "#ffffff8c"; // For readonly filled pill txt
311
313
  export const modeColorStatusInfoDefault = "#0071c3";
312
314
  export const modeColorStatusInfoDefaultAlt = "#f5f8ff"; // Subtle message bg
315
+ export const modeColorStatusInfoWithDefaultAlt = "#0071c380";
313
316
  export const modeColorStatusInfoHover = "#0063ad"; // used on pill hover states
314
317
  export const modeColorStatusInfoHoverAlt = "#e4eeff"; // used on pill hover states and message bg
315
318
  export const modeColorStatusInfoInverseDefault = "#007fd9";
@@ -334,6 +337,7 @@ export const modeColorStatusNeutralInverseHover = "#8b8b8b"; // used on pill hov
334
337
  export const modeColorStatusNeutralInverseHoverAlt = "#181818"; // used on pill hover states and message bg
335
338
  export const modeColorStatusPositiveDefault = "#00811F";
336
339
  export const modeColorStatusPositiveDefaultAlt = "#EEFCEF"; // Subtle message bg
340
+ export const modeColorStatusPositiveWithDefaultAlt = "#00811f80";
337
341
  export const modeColorStatusPositiveHover = "#007219"; // used on pill hover states
338
342
  export const modeColorStatusPositiveHoverAlt = "#D1F6D6"; // used on pill hover states and message bg
339
343
  export const modeColorStatusPositiveInverseDefault = "#019127";
package/json/components/button.json CHANGED
@@ -100,6 +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
+ "buttonTypicalToggleBgDefault": "var(--mode-color-action-grayscale-with-default)",
103
104
  "buttonTypicalToggleBgHover": "var(--mode-color-generic-bg-delicate)",
104
105
  "buttonTypicalToggleBorderDefault": "var(--mode-color-action-grayscale-default)",
105
106
  "buttonTypicalToggleBorderDisabled": "var(--mode-color-action-inactive-default)",
package/json/components/message.json CHANGED
@@ -1,12 +1,13 @@
1
1
  {
2
2
  "messageNone": "var(--mode-color-none)",
3
3
  "messageContextualBg": "var(--mode-color-generic-bg-nought)",
4
- "messageContextualIcon": "var(--mode-color-generic-bg-nought)",
4
+ "messageContextualIcon": "#ffffff",
5
5
  "messageContextualIconAlt": "var(--mode-color-status-neutral-default)",
6
6
  "messageContextualTxt": "var(--mode-color-status-txt-with-hover-alt)",
7
7
  "messageContextualAiBgDefault": "var(--mode-color-status-ai-default-alt)",
8
8
  "messageContextualAiBgAlt": "var(--mode-color-status-neutral-default-alt)",
9
9
  "messageContextualAiBorderDefault": "var(--mode-color-status-ai-default-alt)",
10
+ "messageContextualAiBorderAlt": "var(--mode-color-status-ai-with-default-alt)",
10
11
  "messageContextualCalloutBgAlt": "var(--mode-color-status-callout-default-alt)",
11
12
  "messageContextualCalloutIcon": "var(--mode-color-status-txt-with-default-alt)",
12
13
  "messageContextualErrorBgDefault": "var(--mode-color-status-negative-default)",
@@ -16,14 +17,17 @@
16
17
  "messageContextualInfoBgDefault": "var(--mode-color-status-info-default)",
17
18
  "messageContextualInfoBgAlt": "var(--mode-color-status-info-default-alt)",
18
19
  "messageContextualInfoBorderDefault": "var(--mode-color-status-info-default)",
20
+ "messageContextualInfoBorderAlt": "var(--mode-color-status-info-with-default-alt)",
19
21
  "messageContextualInfoIcon": "var(--mode-color-status-info-default)",
20
22
  "messageContextualSuccessBgDefault": "var(--mode-color-status-positive-default)",
21
23
  "messageContextualSuccessBgAlt": "var(--mode-color-status-positive-default-alt)",
22
24
  "messageContextualSuccessBorderDefault": "var(--mode-color-status-positive-default)",
25
+ "messageContextualSuccessBorderAlt": "var(--mode-color-status-positive-with-default-alt)",
23
26
  "messageContextualSuccessIcon": "var(--mode-color-status-positive-default)",
24
27
  "messageContextualWarningBgDefault": "var(--mode-color-status-warning-default)",
25
28
  "messageContextualWarningBgAlt": "var(--mode-color-status-warning-default-alt)",
26
29
  "messageContextualWarningBorderDefault": "var(--mode-color-status-warning-default)",
30
+ "messageContextualWarningBorderAlt": "var(--mode-color-status-warning-with-default-alt)",
27
31
  "messageContextualWarningIcon": "var(--mode-color-status-warning-default)",
28
32
  "messageGlobalLabelDefault": "var(--mode-color-status-txt-with-default-alt)",
29
33
  "messageGlobalLabelHover": "var(--mode-color-action-grayscale-with-hover)",
package/json/dark.json CHANGED
@@ -214,6 +214,7 @@
214
214
  "modeColorActionMainInverseWithHover": "#FFFFFF",
215
215
  "modeColorStatusAiDefault": "#000000",
216
216
  "modeColorStatusAiDefaultAlt": "#FFFFFF",
217
+ "modeColorStatusAiWithDefaultAlt": "#ffffff80",
217
218
  "modeColorStatusAiDefaultHorizontal": "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)",
218
219
  "modeColorStatusAiDefaultVertical": "linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)",
219
220
  "modeColorStatusAiInverseDefaultHorizontal": "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)",
@@ -224,6 +225,7 @@
224
225
  "modeColorStatusSkeletonStop2": "#475a6a",
225
226
  "modeColorStatusWarningDefault": "#e24300",
226
227
  "modeColorStatusWarningDefaultAlt": "#1d0300",
228
+ "modeColorStatusWarningWithDefaultAlt": "#e2430080",
227
229
  "modeColorStatusWarningHover": "#e5631c",
228
230
  "modeColorStatusWarningHoverAlt": "#360900",
229
231
  "modeColorStatusWarningTxt": "#e5631c",
@@ -296,6 +298,7 @@
296
298
  "modeColorStatusInactiveInverseWithDefault": "#0000008c",
297
299
  "modeColorStatusInfoDefault": "#007fd9",
298
300
  "modeColorStatusInfoDefaultAlt": "#000b1c",
301
+ "modeColorStatusInfoWithDefaultAlt": "#007fd980",
299
302
  "modeColorStatusInfoHover": "#008ef4",
300
303
  "modeColorStatusInfoHoverAlt": "#001932",
301
304
  "modeColorStatusInfoInverseDefault": "#0071c3",
@@ -320,6 +323,7 @@
320
323
  "modeColorStatusNeutralInverseHoverAlt": "#eeeeee",
321
324
  "modeColorStatusPositiveDefault": "#019127",
322
325
  "modeColorStatusPositiveDefaultAlt": "#001001",
326
+ "modeColorStatusPositiveWithDefaultAlt": "#01912780",
323
327
  "modeColorStatusPositiveHover": "#1BA12B",
324
328
  "modeColorStatusPositiveHoverAlt": "#001f03",
325
329
  "modeColorStatusPositiveInverseDefault": "#00811F",
package/json/light.json CHANGED
@@ -214,6 +214,7 @@
214
214
  "modeColorActionMainInverseWithHover": "#000000",
215
215
  "modeColorStatusAiDefault": "#FFFFFF",
216
216
  "modeColorStatusAiDefaultAlt": "#000000",
217
+ "modeColorStatusAiWithDefaultAlt": "#00000080",
217
218
  "modeColorStatusAiDefaultHorizontal": "linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%)",
218
219
  "modeColorStatusAiDefaultVertical": "linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%)",
219
220
  "modeColorStatusAiInverseDefaultHorizontal": "linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%)",
@@ -224,6 +225,7 @@
224
225
  "modeColorStatusSkeletonStop2": "#d1d6da",
225
226
  "modeColorStatusWarningDefault": "#d64309",
226
227
  "modeColorStatusWarningDefaultAlt": "#fff7eb",
228
+ "modeColorStatusWarningWithDefaultAlt": "#d6430980",
227
229
  "modeColorStatusWarningHover": "#b33400",
228
230
  "modeColorStatusWarningHoverAlt": "#ffeaca",
229
231
  "modeColorStatusWarningTxt": "#b33400",
@@ -296,6 +298,7 @@
296
298
  "modeColorStatusInactiveInverseWithDefault": "#ffffff8c",
297
299
  "modeColorStatusInfoDefault": "#0071c3",
298
300
  "modeColorStatusInfoDefaultAlt": "#f5f8ff",
301
+ "modeColorStatusInfoWithDefaultAlt": "#0071c380",
299
302
  "modeColorStatusInfoHover": "#0063ad",
300
303
  "modeColorStatusInfoHoverAlt": "#e4eeff",
301
304
  "modeColorStatusInfoInverseDefault": "#007fd9",
@@ -320,6 +323,7 @@
320
323
  "modeColorStatusNeutralInverseHoverAlt": "#181818",
321
324
  "modeColorStatusPositiveDefault": "#00811F",
322
325
  "modeColorStatusPositiveDefaultAlt": "#EEFCEF",
326
+ "modeColorStatusPositiveWithDefaultAlt": "#00811f80",
323
327
  "modeColorStatusPositiveHover": "#007219",
324
328
  "modeColorStatusPositiveHoverAlt": "#D1F6D6",
325
329
  "modeColorStatusPositiveInverseDefault": "#019127",
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.5.0",
9
+ "version": "18.6.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
@@ -46,7 +46,6 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
46
46
  $button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
47
47
  $button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
48
48
  $button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
49
- $button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
50
49
  $button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
51
50
  $button-typical-tertiary-border-active: $mode-color-action-main-active;
52
51
  $button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
@@ -57,16 +56,15 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
57
56
  $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
58
57
  $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
59
58
  $button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
60
- $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
61
59
  $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
62
60
  $button-typical-subtle-bg-hover: $mode-color-generic-bg-delicate;
63
61
  $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
64
62
  $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
65
63
  $button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
66
- $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
67
64
  $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
68
65
  $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
69
66
  $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
67
+ $button-typical-toggle-bg-default: $mode-color-action-grayscale-with-default;
70
68
  $button-typical-toggle-bg-hover: $mode-color-generic-bg-delicate;
71
69
  $button-typical-toggle-border-disabled: $mode-color-action-inactive-default;
72
70
  $button-typical-toggle-label-active: $mode-color-action-grayscale-with-active;
@@ -90,6 +88,7 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
90
88
  $button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
91
89
  $button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
92
90
  $button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
91
+ $button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
93
92
  $button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
94
93
  $button-typical-tertiary-bg-default: $button-none;
95
94
  $button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
@@ -99,10 +98,12 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
99
98
  $button-typical-tertiary-inverse-bg-default: $button-none;
100
99
  $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
101
100
  $button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
101
+ $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
102
102
  $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
103
103
  $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
104
104
  $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
105
105
  $button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
106
+ $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
106
107
  $button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
107
108
  $button-typical-toggle-border-default: $mode-color-action-grayscale-default;
108
109
  $button-typical-toggle-label-default: $mode-color-action-grayscale-default-alt;
package/scss/components/link.scss CHANGED
@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
12
12
  $link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
13
13
  $link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
14
14
  $link-subtle-label-hover: $mode-color-action-grayscale-active;
15
- $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
16
15
  $link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
17
16
  $link-subtle-label-default: $mode-color-action-grayscale-default;
17
+ $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
package/scss/components/message.scss CHANGED
@@ -3,11 +3,14 @@
3
3
 
4
4
  // Do not edit directly, this file was auto-generated.
5
5
 
6
+ $message-contextual-icon: #ffffff;
6
7
  $message-none: $mode-color-none;
7
8
  $message-contextual-bg: $mode-color-generic-bg-nought;
8
- $message-contextual-icon: $mode-color-generic-bg-nought;
9
9
  $message-contextual-icon-alt: $mode-color-status-neutral-default;
10
+ $message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
10
11
  $message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
12
+ $message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
13
+ $message-contextual-ai-border-alt: $mode-color-status-ai-with-default-alt;
11
14
  $message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
12
15
  $message-contextual-error-bg-default: $mode-color-status-negative-default;
13
16
  $message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
@@ -16,14 +19,17 @@ $message-contextual-error-icon: $mode-color-status-negative-default;
16
19
  $message-contextual-info-bg-default: $mode-color-status-info-default;
17
20
  $message-contextual-info-bg-alt: $mode-color-status-info-default-alt;
18
21
  $message-contextual-info-border-default: $mode-color-status-info-default;
22
+ $message-contextual-info-border-alt: $mode-color-status-info-with-default-alt;
19
23
  $message-contextual-info-icon: $mode-color-status-info-default;
20
24
  $message-contextual-success-bg-default: $mode-color-status-positive-default;
21
25
  $message-contextual-success-bg-alt: $mode-color-status-positive-default-alt;
22
26
  $message-contextual-success-border-default: $mode-color-status-positive-default;
27
+ $message-contextual-success-border-alt: $mode-color-status-positive-with-default-alt;
23
28
  $message-contextual-success-icon: $mode-color-status-positive-default;
24
29
  $message-contextual-warning-bg-default: $mode-color-status-warning-default;
25
30
  $message-contextual-warning-bg-alt: $mode-color-status-warning-default-alt;
26
31
  $message-contextual-warning-border-default: $mode-color-status-warning-default;
32
+ $message-contextual-warning-border-alt: $mode-color-status-warning-with-default-alt;
27
33
  $message-contextual-warning-icon: $mode-color-status-warning-default;
28
34
  $message-global-label-hover: $mode-color-action-grayscale-with-hover;
29
35
  $message-global-callout-bg-default: $mode-color-status-callout-default-alt;
@@ -35,8 +41,6 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
35
41
  $message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
36
42
  $message-global-warning-icon: $mode-color-status-warning-default;
37
43
  $message-contextual-txt: $mode-color-status-txt-with-hover-alt;
38
- $message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
39
- $message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
40
44
  $message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
41
45
  $message-global-label-default: $mode-color-status-txt-with-default-alt;
42
46
  $message-global-callout-icon: $mode-color-status-txt-with-default-alt;
package/scss/components/pill.scss CHANGED
@@ -88,7 +88,7 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
88
88
  $pill-generic-label-hover: $mode-color-status-txt-with-hover;
89
89
  $pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
90
90
  $pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
91
- $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
92
- $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
93
91
  $pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
94
92
  $pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
93
+ $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
94
+ $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
package/scss/dark.scss CHANGED
@@ -218,6 +218,7 @@ $mode-color-action-main-inverse-with-default: #FFFFFF;
218
218
  $mode-color-action-main-inverse-with-hover: #FFFFFF;
219
219
  $mode-color-status-ai-default: #000000;
220
220
  $mode-color-status-ai-default-alt: #FFFFFF;
221
+ $mode-color-status-ai-with-default-alt: #ffffff80;
221
222
  $mode-color-status-ai-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
222
223
  $mode-color-status-ai-default-vertical: linear-gradient(180deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
223
224
  $mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
@@ -228,6 +229,7 @@ $mode-color-status-skeleton-stop-1: #a3adb5;
228
229
  $mode-color-status-skeleton-stop-2: #475a6a;
229
230
  $mode-color-status-warning-default: #e24300;
230
231
  $mode-color-status-warning-default-alt: #1d0300;
232
+ $mode-color-status-warning-with-default-alt: #e2430080;
231
233
  $mode-color-status-warning-hover: #e5631c;
232
234
  $mode-color-status-warning-hover-alt: #360900;
233
235
  $mode-color-status-warning-txt: #e5631c;
@@ -300,6 +302,7 @@ $mode-color-status-inactive-inverse-default: #75838f;
300
302
  $mode-color-status-inactive-inverse-with-default: #0000008c;
301
303
  $mode-color-status-info-default: #007fd9;
302
304
  $mode-color-status-info-default-alt: #000b1c;
305
+ $mode-color-status-info-with-default-alt: #007fd980;
303
306
  $mode-color-status-info-hover: #008ef4;
304
307
  $mode-color-status-info-hover-alt: #001932;
305
308
  $mode-color-status-info-inverse-default: #0071c3;
@@ -324,6 +327,7 @@ $mode-color-status-neutral-inverse-hover: #616161;
324
327
  $mode-color-status-neutral-inverse-hover-alt: #eeeeee;
325
328
  $mode-color-status-positive-default: #019127;
326
329
  $mode-color-status-positive-default-alt: #001001;
330
+ $mode-color-status-positive-with-default-alt: #01912780;
327
331
  $mode-color-status-positive-hover: #1BA12B;
328
332
  $mode-color-status-positive-hover-alt: #001f03;
329
333
  $mode-color-status-positive-inverse-default: #00811F;
package/scss/light.scss CHANGED
@@ -218,6 +218,7 @@ $mode-color-action-main-inverse-with-default: #000000;
218
218
  $mode-color-action-main-inverse-with-hover: #000000;
219
219
  $mode-color-status-ai-default: #FFFFFF;
220
220
  $mode-color-status-ai-default-alt: #000000;
221
+ $mode-color-status-ai-with-default-alt: #00000080;
221
222
  $mode-color-status-ai-default-horizontal: linear-gradient(90deg, #13a038 0%, #149197 40%, #a87cfb 90%);
222
223
  $mode-color-status-ai-default-vertical: linear-gradient(180deg, #13a038 0%, #149197 40%, #a87cfb 90%);
223
224
  $mode-color-status-ai-inverse-default-horizontal: linear-gradient(90deg, #00d639 0%, #00d6de 40%, #9d60ff 90%);
@@ -228,6 +229,7 @@ $mode-color-status-skeleton-stop-1: #75838f;
228
229
  $mode-color-status-skeleton-stop-2: #d1d6da;
229
230
  $mode-color-status-warning-default: #d64309;
230
231
  $mode-color-status-warning-default-alt: #fff7eb;
232
+ $mode-color-status-warning-with-default-alt: #d6430980;
231
233
  $mode-color-status-warning-hover: #b33400;
232
234
  $mode-color-status-warning-hover-alt: #ffeaca;
233
235
  $mode-color-status-warning-txt: #b33400;
@@ -300,6 +302,7 @@ $mode-color-status-inactive-inverse-default: #6f6f6f;
300
302
  $mode-color-status-inactive-inverse-with-default: #ffffff8c;
301
303
  $mode-color-status-info-default: #0071c3;
302
304
  $mode-color-status-info-default-alt: #f5f8ff;
305
+ $mode-color-status-info-with-default-alt: #0071c380;
303
306
  $mode-color-status-info-hover: #0063ad;
304
307
  $mode-color-status-info-hover-alt: #e4eeff;
305
308
  $mode-color-status-info-inverse-default: #007fd9;
@@ -324,6 +327,7 @@ $mode-color-status-neutral-inverse-hover: #8b8b8b;
324
327
  $mode-color-status-neutral-inverse-hover-alt: #181818;
325
328
  $mode-color-status-positive-default: #00811F;
326
329
  $mode-color-status-positive-default-alt: #EEFCEF;
330
+ $mode-color-status-positive-with-default-alt: #00811f80;
327
331
  $mode-color-status-positive-hover: #007219;
328
332
  $mode-color-status-positive-hover-alt: #D1F6D6;
329
333
  $mode-color-status-positive-inverse-default: #019127;