@sage/design-tokens 15.2.1 → 15.3.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 (88) hide show
  1. package/css/frozenproduct/all.css +4 -2
  2. package/css/frozenproduct/large/components/table.css +4 -2
  3. package/css/frozenproduct/small/components/table.css +4 -2
  4. package/css/product/all.css +9 -7
  5. package/css/product/large/components/table.css +9 -7
  6. package/css/product/small/components/table.css +9 -7
  7. package/ios/frozenproduct/large/dark/components/table.h +3 -1
  8. package/ios/frozenproduct/large/light/components/table.h +3 -1
  9. package/ios/frozenproduct/small/dark/components/table.h +3 -1
  10. package/ios/frozenproduct/small/light/components/table.h +3 -1
  11. package/ios/product/large/dark/components/table.h +8 -6
  12. package/ios/product/large/light/components/table.h +8 -6
  13. package/ios/product/small/dark/components/table.h +8 -6
  14. package/ios/product/small/light/components/table.h +8 -6
  15. package/js/common/frozenproduct/large/dark/components/table.d.ts +2 -0
  16. package/js/common/frozenproduct/large/dark/components/table.js +32 -4
  17. package/js/common/frozenproduct/large/light/components/table.d.ts +2 -0
  18. package/js/common/frozenproduct/large/light/components/table.js +32 -4
  19. package/js/common/frozenproduct/small/dark/components/table.d.ts +2 -0
  20. package/js/common/frozenproduct/small/dark/components/table.js +32 -4
  21. package/js/common/frozenproduct/small/light/components/table.d.ts +2 -0
  22. package/js/common/frozenproduct/small/light/components/table.js +32 -4
  23. package/js/common/product/large/dark/components/table.d.ts +2 -0
  24. package/js/common/product/large/dark/components/table.js +54 -14
  25. package/js/common/product/large/light/components/table.d.ts +2 -0
  26. package/js/common/product/large/light/components/table.js +54 -14
  27. package/js/common/product/small/dark/components/table.d.ts +2 -0
  28. package/js/common/product/small/dark/components/table.js +54 -14
  29. package/js/common/product/small/light/components/table.d.ts +2 -0
  30. package/js/common/product/small/light/components/table.js +54 -14
  31. package/js/es6/frozenproduct/large/dark/components/table.d.ts +2 -0
  32. package/js/es6/frozenproduct/large/dark/components/table.js +3 -1
  33. package/js/es6/frozenproduct/large/light/components/table.d.ts +2 -0
  34. package/js/es6/frozenproduct/large/light/components/table.js +3 -1
  35. package/js/es6/frozenproduct/small/dark/components/table.d.ts +2 -0
  36. package/js/es6/frozenproduct/small/dark/components/table.js +3 -1
  37. package/js/es6/frozenproduct/small/light/components/table.d.ts +2 -0
  38. package/js/es6/frozenproduct/small/light/components/table.js +3 -1
  39. package/js/es6/product/large/dark/components/table.d.ts +2 -0
  40. package/js/es6/product/large/dark/components/table.js +8 -6
  41. package/js/es6/product/large/light/components/table.d.ts +2 -0
  42. package/js/es6/product/large/light/components/table.js +8 -6
  43. package/js/es6/product/small/dark/components/table.d.ts +2 -0
  44. package/js/es6/product/small/dark/components/table.js +8 -6
  45. package/js/es6/product/small/light/components/table.d.ts +2 -0
  46. package/js/es6/product/small/light/components/table.js +8 -6
  47. package/js/umd/frozenproduct/large/dark/components/table.js +32 -4
  48. package/js/umd/frozenproduct/large/light/components/table.js +32 -4
  49. package/js/umd/frozenproduct/small/dark/components/table.js +32 -4
  50. package/js/umd/frozenproduct/small/light/components/table.js +32 -4
  51. package/js/umd/product/large/dark/components/table.js +54 -14
  52. package/js/umd/product/large/light/components/table.js +54 -14
  53. package/js/umd/product/small/dark/components/table.js +54 -14
  54. package/js/umd/product/small/light/components/table.js +54 -14
  55. package/json/flat/frozenproduct/large/dark/components/table.json +3 -1
  56. package/json/flat/frozenproduct/large/light/components/table.json +3 -1
  57. package/json/flat/frozenproduct/small/dark/components/table.json +3 -1
  58. package/json/flat/frozenproduct/small/light/components/table.json +3 -1
  59. package/json/flat/product/large/dark/components/table.json +8 -6
  60. package/json/flat/product/large/light/components/table.json +8 -6
  61. package/json/flat/product/small/dark/components/table.json +8 -6
  62. package/json/flat/product/small/light/components/table.json +8 -6
  63. package/json/nested/frozenproduct/large/dark/components/table.json +4 -2
  64. package/json/nested/frozenproduct/large/light/components/table.json +4 -2
  65. package/json/nested/frozenproduct/small/dark/components/table.json +4 -2
  66. package/json/nested/frozenproduct/small/light/components/table.json +4 -2
  67. package/json/nested/product/large/dark/components/table.json +9 -7
  68. package/json/nested/product/large/light/components/table.json +9 -7
  69. package/json/nested/product/small/dark/components/table.json +9 -7
  70. package/json/nested/product/small/light/components/table.json +9 -7
  71. package/package.json +1 -1
  72. package/sage-design-tokens-15.3.0.tgz +0 -0
  73. package/scss/frozenproduct/large/components/table.scss +4 -2
  74. package/scss/frozenproduct/small/components/badge.scss +1 -1
  75. package/scss/frozenproduct/small/components/button.scss +15 -15
  76. package/scss/frozenproduct/small/components/container.scss +10 -10
  77. package/scss/frozenproduct/small/components/form.scss +11 -11
  78. package/scss/frozenproduct/small/components/link.scss +2 -2
  79. package/scss/frozenproduct/small/components/nav.scss +6 -6
  80. package/scss/frozenproduct/small/components/page.scss +1 -1
  81. package/scss/frozenproduct/small/components/popover.scss +6 -6
  82. package/scss/frozenproduct/small/components/progress.scss +8 -8
  83. package/scss/frozenproduct/small/components/status.scss +10 -10
  84. package/scss/frozenproduct/small/components/tab.scss +9 -9
  85. package/scss/frozenproduct/small/components/table.scss +13 -11
  86. package/scss/product/large/components/table.scss +9 -7
  87. package/scss/product/small/components/table.scss +9 -7
  88. package/sage-design-tokens-15.2.1.tgz +0 -0
@@ -42,9 +42,9 @@ $button-color-typical-tertiary-border-enabled: $modes-color-none;
42
42
  $button-color-typical-tertiary-border-hover: $modes-color-none;
43
43
  $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
44
44
  $button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
45
- $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-frozen-active;
45
+ $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-frozen-default;
46
46
  $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
47
- $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-frozen-active;
47
+ $button-color-typical-toggle-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
48
48
  $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
49
49
  $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
50
50
  $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -76,7 +76,6 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
76
76
  $button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
77
77
  $button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
78
78
  $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
79
- $button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
80
79
  $button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
81
80
  $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
82
81
  $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -88,17 +87,10 @@ $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary
88
87
  $button-color-typical-secondary-label-enabled: $modes-color-interactive-primary-frozen-default;
89
88
  $button-color-typical-tertiary-label-enabled: $modes-color-interactive-primary-frozen-default;
90
89
  $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
91
- $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
92
- $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
93
- $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-frozen-default;
94
- $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
95
- $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
90
+ $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-frozen-active;
91
+ $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-frozen-active;
96
92
  $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-frozen-default-alt;
97
- $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
98
93
  $button-color-video-bg-blur: $modes-color-interactive-monochrome-hover-alt;
99
- $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
100
- $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
101
- $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
102
94
  $button-size-split: $global-size-micro-xxs; // Split button (divider width)
103
95
  $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
104
96
  $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -236,6 +228,7 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
236
228
  $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
237
229
  $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
238
230
  $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
231
+ $button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
239
232
  $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
240
233
  $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
241
234
  $button-color-typical-primary-bg-active: $modes-color-interactive-primary-frozen-active;
@@ -253,6 +246,7 @@ $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactiv
253
246
  $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
254
247
  $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
255
248
  $button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
249
+ $button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
256
250
  $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
257
251
  $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
258
252
  $button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
@@ -266,26 +260,35 @@ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome
266
260
  $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
267
261
  $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
268
262
  $button-color-typical-tertiary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
263
+ $button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
269
264
  $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
270
265
  $button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
271
266
  $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
272
267
  $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
273
268
  $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
274
269
  $button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
270
+ $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
271
+ $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
275
272
  $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
273
+ $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
276
274
  $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
277
275
  $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
278
276
  $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
279
277
  $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
280
278
  $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
279
+ $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
281
280
  $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-frozen-with-active;
282
281
  $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
282
+ $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-frozen-with-hover;
283
283
  $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
284
284
  $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
285
+ $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
286
+ $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
285
287
  $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
286
288
  $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
287
289
  $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
288
290
  $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
291
+ $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
289
292
  $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
290
293
  $button-radius-m: $global-radius-interactive-xl; // Buttons M (typical and destructive, and inc bar, split and multi), Button toggle L (parent container), Button toggle M (parent container)
291
294
  $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -321,9 +324,6 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
321
324
  $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
322
325
  $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
323
326
  $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
324
- $button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
325
- $button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
326
327
  $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
327
328
  $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
328
- $button-color-typical-toggle-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
329
329
  $button-color-typical-toggle-border-disabled: $modes-color-interactive-inactive-default;
@@ -23,17 +23,12 @@ $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-h
23
23
  $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
24
24
  $container-color-ai-tile-bordervertical: $modes-color-status-ai-default-vertical; // left border for AI tiles and bubbles.
25
25
  $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //
26
- $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
27
26
  $container-color-interactive-border-activated: $modes-color-status-positive-default;
28
27
  $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
29
28
  $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
30
- $container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
31
- $container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
32
- $container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
33
29
  $container-color-interactive-detailedicon-bg: $modes-color-custom-frozen;
34
30
  $container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
35
31
  $container-color-standard-bg-default: $modes-color-generic-bg-nought;
36
- $container-color-standard-border-active: $modes-color-interactive-monochrome-active;
37
32
  $container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
38
33
  $container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
39
34
  $container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
@@ -60,17 +55,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
60
55
  $container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
61
56
  $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
62
57
  $container-color-blockquote-border: $modes-color-interactive-primary-frozen-default;
58
+ $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
63
59
  $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds
64
- $container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
65
- $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
66
- $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
67
- $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
60
+ $container-color-interactive-border-active: $modes-color-interactive-monochrome-active;
61
+ $container-color-interactive-icon-active: $modes-color-interactive-monochrome-active; // Active chevron for any accordion.
62
+ $container-color-interactive-text-active: $modes-color-interactive-monochrome-active; // Active label for any accordion.
68
63
  $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
69
64
  $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
70
- $container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
71
65
  $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
72
66
  $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
73
67
  $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color
68
+ $container-color-standard-border-active: $modes-color-interactive-monochrome-active;
74
69
  $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
75
70
  $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
76
71
  $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
@@ -87,11 +82,16 @@ $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (h
87
82
  $container-boxshadow-card-drag: $global-boxshadow-interactive-drag; // Card (drag state)
88
83
  $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-default-alt;
89
84
  $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview.
85
+ $container-color-interactive-borderalt-hover: $modes-color-interactive-monochrome-default; // For hover border on Link preview.
90
86
  $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
91
87
  $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
88
+ $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-default; // Enabled chevron for any accordion.
89
+ $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-default-alt; // Enabled label for subtle accordion.
90
+ $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-default; // Hover chevron for any accordion.
92
91
  $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
93
92
  $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
94
93
  $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
94
+ $container-color-interactive-text-hover: $modes-color-interactive-monochrome-default; // Hover label for any accordion.
95
95
  $container-color-scrollbar-fg-default: $modes-color-generic-fg-moderate;
96
96
  $container-color-standard-border-alt: $modes-color-generic-fg-soft;
97
97
  $container-color-standard-border-default: $modes-color-generic-fg-faint;
@@ -15,8 +15,12 @@ $form-radius-radio: $global-radius-circle; // Radio button
15
15
  $form-radius-switch: $global-radius-circle; // Switch container and handle
16
16
  $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
17
17
  $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
18
- $form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
18
+ $form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
19
19
  $form-color-labelset-label-required: $modes-color-interactive-danger-default;
20
+ $form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
21
+ $form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
22
+ $form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
23
+ $form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
20
24
  $form-color-validation-border-error: $modes-color-status-negative-default;
21
25
  $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
22
26
  $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -37,13 +41,10 @@ $form-typography-responsive-default-xs: $global-typography-responsive-component-
37
41
  $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
38
42
  $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
39
43
  $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
44
+ $form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
40
45
  $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
41
- $form-color-calendar-border-duration: $form-color-calendar-bg-active;
42
46
  $form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
43
- $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
44
- $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
45
47
  $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-with-hover;
46
- $form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
47
48
  $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
48
49
  $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
49
50
  $form-color-typical-border-hover: $modes-color-interactive-data-entry-with-hover; // File input draggable border state
@@ -51,7 +52,6 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
51
52
  $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
52
53
  $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
53
54
  $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
54
- $form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
55
55
  $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
56
56
  $form-space-none: $global-space-none;
57
57
  $form-space-calendar-x-m: $global-space-macro-m;
@@ -224,15 +224,18 @@ $form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosur
224
224
  $form-size-rating-m: $global-size-icon-m; // medium rating stars
225
225
  $form-size-rating-l: $global-size-icon-xl; // large rating stars
226
226
  $form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
227
+ $form-color-calendar-border-duration: $form-color-calendar-bg-active;
227
228
  $form-color-calendar-text-active: $modes-color-interactive-monochrome-with-active;
228
229
  $form-color-calendar-text-alt: $modes-color-interactive-data-entry-content-alt; // Days of the week subheaders
229
230
  $form-color-calendar-text-disabled: $modes-color-interactive-inactive-content;
230
231
  $form-color-calendar-text-duration: $modes-color-interactive-data-entry-content;
231
232
  $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
232
233
  $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
233
- $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
234
234
  $form-color-dropdown-label-active: $modes-color-interactive-monochrome-with-active;
235
+ $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
235
236
  $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
237
+ $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
238
+ $form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
236
239
  $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
237
240
  $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
238
241
  $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -295,16 +298,13 @@ $form-size-dropdown-item-m: $popover-size-item-m; // REF POPOVER. Menu item min
295
298
  $form-size-dropdown-item-l: $popover-size-item-l; // REF POPOVER. Menu item min height.
296
299
  $form-size-search-input-minwidth: $container-size-responsive-xl; // minimum width for search input container
297
300
  $form-size-search-input-maxwidth: $container-size-responsive-xxl + $container-size-responsive-xxs; // maximum width for search input container
298
- $form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
301
+ $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
299
302
  $form-color-typical-border-alt: $modes-color-interactive-inactive-default;
300
- $form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
301
303
  $form-color-typical-border-disabled: $modes-color-interactive-inactive-default;
302
304
  $form-color-typical-border-read-only: $modes-color-interactive-inactive-default;
303
305
  $form-color-switch-bg-activedisabled: $modes-color-interactive-inactive-default;
304
306
  $form-color-switch-border-disabled: $modes-color-interactive-inactive-default;
305
- $form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
306
307
  $form-color-switch-fg-disabled: $modes-color-interactive-inactive-default;
307
- $form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
308
308
  $form-color-switch-label-activedisabled: $modes-color-interactive-inactive-default;
309
309
  $form-color-switch-label-disabled: $modes-color-interactive-inactive-default;
310
310
  $form-radius-dropdown: $popover-radius-container; // REF POPOVER. Popover container.
@@ -5,7 +5,6 @@
5
5
 
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
- $link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
9
8
  $link-typography-responsive-default-s: $global-typography-responsive-component-underlined-moderate-s; // Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size.
10
9
  $link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
11
10
  $link-typography-responsive-default-l: $global-typography-responsive-component-underlined-moderate-l; // Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size.
@@ -20,13 +19,14 @@ $link-typography-adaptive-heading-m: $global-typography-adaptive-component-under
20
19
  $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
21
20
  $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
22
21
  $link-color-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
23
- $link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
22
+ $link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
24
23
  $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
25
24
  $link-boxshadow-skiplink: $global-boxshadow-container-near;
26
25
  $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
27
26
  $link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
28
27
  $link-color-typical-label-default: $modes-color-interactive-primary-frozen-default-alt;
29
28
  $link-color-typical-inverse-label-default: $modes-color-interactive-primary-inverse-default-alt2;
29
+ $link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
30
30
  $link-color-subtle-inverse-label-default: $modes-color-interactive-monochrome-inverse-default;
31
31
  $link-size-skiplink-m: $global-size-macro-m;
32
32
  $link-size-icon-m: $global-size-icon-m;
@@ -9,16 +9,13 @@ $nav-size-leftnav-parent-container-fixed-width: 146; // fixed width of parent co
9
9
  $nav-size-leftnav-child-container-fixed-width: 250; // fixed width of parent container
10
10
  $nav-space-leftnav-grandchilditem-x-indent: 33; // indent on grandchild items
11
11
  $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
12
- $nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
13
12
  $nav-color-item-bg-enabled: $modes-color-none;
14
13
  $nav-color-item-bg-hover: $modes-color-interactive-primary-frozen-nav-hover;
15
14
  $nav-color-leftnav-container-bg-default: $modes-color-generic-bg-nought; // bg of horizontal nav variant that launches the left nav
16
- $nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
17
15
  $nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
18
16
  $nav-color-leftnav-item-bg-enabled: $modes-color-none;
19
17
  $nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
20
18
  $nav-color-modal-container-bg-default: $modes-color-generic-bg-nought; // bg of container holding stack of items in modal nav
21
- $nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
22
19
  $nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
23
20
  $nav-color-modal-item-bg-enabled: $modes-color-none;
24
21
  $nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
@@ -38,15 +35,16 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
38
35
  $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-xs;
39
36
  $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
40
37
  $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
38
+ $nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
41
39
  $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
42
40
  $nav-color-item-label-activealt: $modes-color-interactive-monochrome-with-hover;
43
- $nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
44
- $nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
45
41
  $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
46
42
  $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
47
43
  $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
44
+ $nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
48
45
  $nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
49
46
  $nav-color-leftnav-item-label-hover: $modes-color-interactive-nav-with-hover;
47
+ $nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
50
48
  $nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
51
49
  $nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
52
50
  $nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
@@ -55,7 +53,8 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
55
53
  $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
56
54
  $nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
57
55
  $nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
58
- $nav-color-item-label-hover: $modes-color-interactive-primary-frozen-nav-label-hover;
56
+ $nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
57
+ $nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
59
58
  $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
60
59
  $nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
61
60
  $nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;
@@ -158,3 +157,4 @@ $nav-space-topnav-container-y-m: $global-space-macro-xxxs / 2; // vertical paddi
158
157
  $nav-space-topnav-parentitem-x-m: $global-space-macro-xxxs; // horizontal padding on stacked parent items
159
158
  $nav-space-topnav-parentitem-xg-m: $global-space-micro-s; // gap within horizontal parent items
160
159
  $nav-space-topnav-parentitem-y-m: $global-space-macro-xxxs / 2; // vertical padding on stacked parent items
160
+ $nav-color-item-label-hover: $modes-color-interactive-primary-frozen-nav-label-hover;
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $page-color-bg-default: $modes-color-generic-backdrop-nought;
9
- $page-color-bg-alt: $modes-color-generic-backdrop-faint;
10
9
  $page-typography-responsive-h1: $global-typography-responsive-heading-l;
11
10
  $page-typography-responsive-h2: $global-typography-responsive-heading-m;
12
11
  $page-typography-responsive-h3: $global-typography-responsive-heading-s;
@@ -29,6 +28,7 @@ $page-typography-adaptive-p-regular-typical: $global-typography-adaptive-body-re
29
28
  $page-typography-adaptive-p-regular-large: $global-typography-adaptive-body-regular-l;
30
29
  $page-typography-adaptive-p-medium-typical: $global-typography-adaptive-body-medium-s;
31
30
  $page-typography-adaptive-p-medium-large: $global-typography-adaptive-body-medium-l;
31
+ $page-color-bg-alt: $modes-color-generic-backdrop-faint;
32
32
  $page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
33
33
  $page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
34
34
  $page-space-x-l: $global-space-macro-xl;
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $popover-radius-none: $global-radius-none; // Navigation menu top corners
9
- $popover-color-bg-active: $modes-color-interactive-monochrome-frozen-active;
10
9
  $popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
11
10
  $popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
12
11
  $popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -21,11 +20,7 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
21
20
  $popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
22
21
  $popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
23
22
  $popover-boxshadow-container: $global-boxshadow-container-near; // REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown)
24
- $popover-color-bg-activealt: $modes-color-interactive-monochrome-frozen-hover-alt;
25
- $popover-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
26
- $popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
27
- $popover-color-label-hover: $modes-color-interactive-monochrome-default;
28
- $popover-color-label-enabled: $modes-color-interactive-monochrome-default;
23
+ $popover-color-bg-active: $modes-color-interactive-monochrome-frozen-active;
29
24
  $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
30
25
  $popover-size-icon-m: $global-size-icon-m;
31
26
  $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -54,8 +49,13 @@ $popover-space-option-y-l: $global-space-micro-xl; // REF'D in FORM. Vertical pa
54
49
  $popover-space-submenu-x-s: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
55
50
  $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
56
51
  $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
52
+ $popover-color-bg-activealt: $modes-color-interactive-monochrome-frozen-hover-alt;
53
+ $popover-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
57
54
  $popover-color-label-active: $modes-color-interactive-monochrome-with-active;
55
+ $popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
58
56
  $popover-color-label-disabled: $modes-color-interactive-inactive-content;
57
+ $popover-color-label-hover: $modes-color-interactive-monochrome-default;
58
+ $popover-color-label-enabled: $modes-color-interactive-monochrome-default;
59
59
  $popover-size-menu-minwidth-s: $container-size-responsive-m / 2; // minwidth of small size popover menu container
60
60
  $popover-size-menu-minwidth-m: $container-size-responsive-xs; // minwidth of medium size popover menu container
61
61
  $popover-size-menu-minwidth-l: $container-size-responsive-s; // minwidth of large size popover menu container
@@ -22,20 +22,18 @@ $progress-radius-stepflow: $global-radius-circle; // Step flow (step indicators)
22
22
  $progress-radius-stepindicator: $global-radius-circle; // step indicator circles
23
23
  $progress-radius-carouselselector: $global-radius-circle; // Carousel (selector dot)
24
24
  $progress-radius-skeleton-circle: $global-radius-circle; // Used to represent circular elements such as profiles, badges etc
25
+ $progress-color-bg-default: $modes-color-interactive-progress-frozen-bg-alt;
25
26
  $progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
26
27
  $progress-color-fg-alt: $modes-color-status-positive-default;
27
28
  $progress-color-fg-caution: $modes-color-status-caution-default;
28
29
  $progress-color-fg-error: $modes-color-status-negative-default;
29
30
  $progress-color-fg-info: $modes-color-status-info-default;
30
31
  $progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
32
+ $progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
31
33
  $progress-color-loader-fg-error: $modes-color-status-negative-default;
32
34
  $progress-color-loader-fg-complete: $modes-color-status-positive-default;
33
- $progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
34
35
  $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
35
- $progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
36
- $progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
37
36
  $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
38
- $progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
39
37
  $progress-color-stepindicator-border-success: $modes-color-status-positive-default;
40
38
  $progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
41
39
  $progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -49,15 +47,21 @@ $progress-typography-responsive-label-l: $global-typography-responsive-component
49
47
  $progress-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
50
48
  $progress-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
51
49
  $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
50
+ $progress-color-border-default: $modes-color-generic-fg-frozen-soft;
52
51
  $progress-color-fg-alt2: $modes-color-generic-content-firm;
52
+ $progress-color-fg-default: $modes-color-generic-fg-frozen-soft;
53
53
  $progress-color-label-alt: $modes-color-generic-content-firm;
54
54
  $progress-color-label-default: $modes-color-generic-content-harsh;
55
55
  $progress-color-loader-fg-default: $modes-color-interactive-primary-frozen-default; // used for loader standard loader spinner
56
56
  $progress-color-loader-inverse-bg-default: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
57
+ $progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
57
58
  $progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
58
59
  $progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
60
+ $progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
59
61
  $progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
60
62
  $progress-color-stepflow-label-default: $modes-color-generic-content-harsh;
63
+ $progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-active;
64
+ $progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
61
65
  $progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
62
66
  $progress-size-bar-s: $global-size-micro-xs; // S loader bar
63
67
  $progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar
@@ -75,10 +79,6 @@ $progress-size-stepflow-m: $global-size-micro-m; // Step height
75
79
  $progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
76
80
  $progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator
77
81
  $progress-size-stepindicator-stepcircle-m: $global-size-macro-s; // M size step indicator
78
- $progress-color-bg-default: $modes-color-interactive-progress-frozen-bg-alt;
79
- $progress-color-border-default: $modes-color-generic-fg-frozen-soft;
80
- $progress-color-fg-default: $modes-color-generic-fg-frozen-soft;
81
- $progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
82
82
  $progress-color-loader-inverse-fg-default: $modes-color-interactive-monochrome-with-active; // used on inverse loading spinner
83
83
  $progress-color-stepflow-border-default: $modes-color-generic-fg-soft;
84
84
  $progress-color-stepindicator-border-default: $modes-color-generic-fg-soft;
@@ -5,11 +5,14 @@
5
5
 
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
+ $status-color-message-global-info-bg-default: $modes-color-status-info-frozenglobal-default; // Global message bg
9
+ $status-color-message-global-warning-bg-default: $modes-color-status-caution-frozenglobal-default; // Global message bg
8
10
  $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
9
11
  $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
10
12
  $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
11
13
  $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
12
14
  $status-color-message-contextual-icon-alt: $modes-color-status-neutral-default; // icon on neutral status dialogs
15
+ $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
13
16
  $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
14
17
  $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
15
18
  $status-color-message-contextual-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
@@ -22,6 +25,9 @@ $status-color-message-contextual-success-icon: $modes-color-status-positive-defa
22
25
  $status-color-message-contextual-warning-bg-default: $modes-color-status-caution-default;
23
26
  $status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
24
27
  $status-color-message-contextual-warning-icon: $modes-color-status-caution-default; // Icon on tinted bgs
28
+ $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
29
+ $status-color-message-global-info-bg-hover: $modes-color-status-info-frozenglobal-hover; // Global message bg
30
+ $status-color-message-global-warning-bg-hover: $modes-color-status-caution-frozenglobal-hover; // Global message bg
25
31
  $status-color-pill-custom-blue-bg-default: $modes-color-status-custom-blue-default;
26
32
  $status-color-pill-custom-blue-bg-alt-default: $modes-color-status-custom-blue-default-alt; // outline pill bg
27
33
  $status-color-pill-custom-blue-border-default: $modes-color-status-custom-blue-default;
@@ -68,6 +74,9 @@ $status-color-pill-info-border-default: $modes-color-status-info-default;
68
74
  $status-color-pill-info-inverse-bg-default: $modes-color-status-info-inverse-default;
69
75
  $status-color-pill-info-inverse-bg-alt-default: $modes-color-status-info-inverse-default-alt; // outline pill bg
70
76
  $status-color-pill-info-inverse-border-default: $modes-color-status-info-inverse-default;
77
+ $status-color-pill-neutral-bg-default: $modes-color-status-neutral-frozen-default;
78
+ $status-color-pill-neutral-bg-hover: $modes-color-status-neutral-frozen-hover;
79
+ $status-color-pill-neutral-border-default: $modes-color-status-neutral-frozen-default;
71
80
  $status-color-pill-neutral-inverse-bg-default: $modes-color-status-neutral-inverse-default;
72
81
  $status-color-pill-neutral-inverse-bg-alt-default: $modes-color-status-neutral-inverse-default-alt; // outline pill bg
73
82
  $status-color-pill-neutral-inverse-border-default: $modes-color-status-neutral-inverse-default;
@@ -103,15 +112,12 @@ $status-color-message-contextual-text: $modes-color-status-content-with-hover-al
103
112
  $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
104
113
  $status-color-message-contextual-ai-bg-alt: $status-color-none; // Subtle message bg
105
114
  $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
106
- $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
107
115
  $status-color-message-contextual-error-bg-alt: $status-color-none; // Subtle message bg
108
116
  $status-color-message-contextual-info-bg-alt: $status-color-none; // Subtle message bg
109
117
  $status-color-message-contextual-success-bg-alt: $status-color-none; // Subtle message bg
110
118
  $status-color-message-contextual-warning-bg-alt: $status-color-none; // Subtle message bg
111
119
  $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
112
- $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
113
- $status-color-message-global-info-bg-default: $modes-color-status-info-frozenglobal-default; // Global message bg
114
- $status-color-message-global-warning-bg-default: $modes-color-status-caution-frozenglobal-default; // Global message bg
120
+ $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
115
121
  $status-color-pill-custom-blue-bg-alt-hover: $modes-color-status-custom-blue-hover-alt;
116
122
  $status-color-pill-custom-blue-bg-hover: $modes-color-status-custom-blue-hover;
117
123
  $status-color-pill-custom-teal-bg-alt-hover: $modes-color-status-custom-teal-hover-alt;
@@ -148,10 +154,8 @@ $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
148
154
  $status-color-pill-info-bg-hover: $modes-color-status-info-hover;
149
155
  $status-color-pill-info-inverse-bg-alt-hover: $modes-color-status-info-inverse-hover-alt;
150
156
  $status-color-pill-info-inverse-bg-hover: $modes-color-status-info-inverse-hover;
151
- $status-color-pill-neutral-bg-default: $modes-color-status-neutral-frozen-default;
152
157
  $status-color-pill-neutral-bg-alt-default: $status-color-none; // outline pill bg
153
158
  $status-color-pill-neutral-bg-alt-hover: $modes-color-status-neutral-frozen-hover-alt;
154
- $status-color-pill-neutral-border-default: $modes-color-status-neutral-frozen-default;
155
159
  $status-color-pill-neutral-inverse-bg-alt-hover: $modes-color-status-neutral-inverse-hover-alt;
156
160
  $status-color-pill-neutral-inverse-bg-hover: $modes-color-status-neutral-inverse-hover;
157
161
  $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
@@ -171,11 +175,8 @@ $status-color-rating-bg-hover: $modes-color-status-reviews-frozen-hover;
171
175
  $status-color-rating-border-default: $modes-color-status-reviews-frozen-default;
172
176
  $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
173
177
  $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
174
- $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
175
178
  $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
176
- $status-color-message-global-info-bg-hover: $modes-color-status-info-frozenglobal-hover; // Global message bg
177
179
  $status-color-message-global-info-icon: $modes-color-status-content-with-default-alt;
178
- $status-color-message-global-warning-bg-hover: $modes-color-status-caution-frozenglobal-hover; // Global message bg
179
180
  $status-color-message-global-warning-icon: $modes-color-status-content-with-default-alt;
180
181
  $status-color-pill-generic-label-default: $modes-color-status-content-with-default;
181
182
  $status-color-pill-generic-label-hover: $modes-color-status-content-with-hover;
@@ -183,7 +184,6 @@ $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-d
183
184
  $status-color-pill-generic-label-alt-hover: $modes-color-status-content-with-default-alt;
184
185
  $status-color-pill-generic-inverse-label-alt-default: $modes-color-status-content-inverse-with-default-alt;
185
186
  $status-color-pill-generic-inverse-label-alt-hover: $modes-color-status-content-inverse-with-default-alt;
186
- $status-color-pill-neutral-bg-hover: $modes-color-status-neutral-frozen-hover;
187
187
  $status-size-pill-s: $global-size-macro-xs - $global-size-micro-xs; // Min height
188
188
  $status-size-pill-m: $global-size-macro-xs; // Min height and removable button.
189
189
  $status-size-pill-l: $global-size-macro-xs + $global-size-micro-xs; // Min height and removable button
@@ -6,8 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $tab-color-bg-enabled: $modes-color-none;
9
- $tab-color-label-active: $modes-color-interactive-monochrome-active;
10
- $tab-color-icon-active: $modes-color-interactive-monochrome-active;
11
9
  $tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
12
10
  $tab-color-validation-border-warning: $modes-color-status-caution-default;
13
11
  $tab-color-validation-border-error: $modes-color-status-negative-default;
@@ -20,16 +18,11 @@ $tab-typography-adaptive-label-l: $global-typography-adaptive-component-firm-l;
20
18
  $tab-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
21
19
  $tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
22
20
  $tab-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
23
- $tab-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt; // For anchor nav, not tab.
24
21
  $tab-color-border-active: $modes-color-interactive-primary-frozen-default;
25
- $tab-color-border-enabled: $modes-color-interactive-monochrome-frozen-hover-alt;
26
- $tab-color-border-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
27
- $tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
28
22
  $tab-color-icon-hover: $modes-color-interactive-monochrome-with-hover;
29
- $tab-color-label-enabled: $modes-color-interactive-monochrome-default;
23
+ $tab-color-label-active: $modes-color-interactive-monochrome-active;
24
+ $tab-color-icon-active: $modes-color-interactive-monochrome-active;
30
25
  $tab-color-label-hover: $modes-color-interactive-monochrome-with-hover;
31
- $tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
32
- $tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
33
26
  $tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
34
27
  $tab-size-l: $global-size-macro-l; // L tab
35
28
  $tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
@@ -46,7 +39,14 @@ $tab-space-xg-l: $global-space-micro-l; // Gap between elements in Tab.
46
39
  $tab-space-y-m: $global-space-micro-l; // Top bottom padding in Tab.
47
40
  $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
48
41
  $tab-color-bg-active: $modes-color-interactive-monochrome-with-default;
42
+ $tab-color-bg-hover: $modes-color-interactive-monochrome-frozen-hover-alt; // For anchor nav, not tab.
49
43
  $tab-color-border-activealt: $modes-color-generic-fg-delicate;
44
+ $tab-color-border-enabled: $modes-color-interactive-monochrome-frozen-hover-alt;
45
+ $tab-color-border-hover: $modes-color-interactive-monochrome-frozen-hover-alt;
46
+ $tab-color-icon-enabled: $modes-color-interactive-monochrome-default-alt;
47
+ $tab-color-label-enabled: $modes-color-interactive-monochrome-default;
48
+ $tab-color-validation-label-error: $modes-color-interactive-monochrome-default-alt;
49
+ $tab-color-validation-label-warning: $modes-color-interactive-monochrome-default-alt;
50
50
  $tab-radius-m: $global-radius-interactive-s; // Tab horizontal - top corners. Tab vertical - left corners.
51
51
  $tab-radius-l: $global-radius-interactive-s; // Tab horizontal - top corners. Tab vertical - left corners.
52
52
  $tab-radius-baseline-m: $global-radius-interactive-xxs;
@@ -6,6 +6,7 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $table-color-header-subtle-bg-default: $modes-color-none;
9
+ $table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
9
10
  $table-color-row-bg-activated: $modes-color-interactive-primary-frozen-table-default;
10
11
  $table-color-row-bg-default: $modes-color-generic-bg-nought;
11
12
  $table-color-row-bg-alt: $modes-color-generic-bg-frozen-delicate;
@@ -29,31 +30,32 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
29
30
  $table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
30
31
  $table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
31
32
  $table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
32
- $table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
33
- $table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
34
- $table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
35
- $table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
36
33
  $table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-frozen-default-alt;
37
- $table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
38
- $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
39
- $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
40
- $table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
41
- $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
34
+ $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
42
35
  $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
36
+ $table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
43
37
  $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
44
38
  $table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
45
39
  $table-color-row-label-default: $modes-color-generic-content-harsh;
46
- $table-color-footer-bg-default: $modes-color-generic-bg-soft;
47
- $table-color-footer-label-default: $modes-color-interactive-monochrome-default;
40
+ $table-color-footer-bg-default: $modes-color-generic-bg-moderate;
48
41
  $table-boxshadow-firstchild: $global-boxshadow-inner-near;
49
42
  $table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
50
43
  $table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
51
44
  $table-boxshadow-row-dragging: $global-boxshadow-interactive-drag; // dragging state for a table row
45
+ $table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
46
+ $table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
52
47
  $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
48
+ $table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
49
+ $table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
50
+ $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
53
51
  $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
54
52
  $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-with-default;
53
+ $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
54
+ $table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
55
55
  $table-color-row-border-default: $modes-color-generic-fg-delicate;
56
+ $table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
56
57
  $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
58
+ $table-color-footer-label-default: $modes-color-interactive-monochrome-default;
57
59
  $table-radius-container: $global-radius-container-m; // Table (parent container)
58
60
  $table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.
59
61
  $table-borderwidth-medium: $global-borderwidth-s; // Header border for subtle. Optional choice of cell border width.