@sage/design-tokens 15.2.2 → 15.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (187) hide show
  1. package/css/frozenproduct/all.css +7 -2
  2. package/css/frozenproduct/large/components/form.css +3 -0
  3. package/css/frozenproduct/large/components/table.css +4 -2
  4. package/css/frozenproduct/small/components/form.css +3 -0
  5. package/css/frozenproduct/small/components/table.css +4 -2
  6. package/css/product/all.css +12 -7
  7. package/css/product/large/components/form.css +3 -0
  8. package/css/product/large/components/table.css +9 -7
  9. package/css/product/small/components/form.css +3 -0
  10. package/css/product/small/components/table.css +9 -7
  11. package/ios/frozenproduct/large/dark/components/form.h +3 -0
  12. package/ios/frozenproduct/large/dark/components/table.h +3 -1
  13. package/ios/frozenproduct/large/light/components/form.h +3 -0
  14. package/ios/frozenproduct/large/light/components/table.h +3 -1
  15. package/ios/frozenproduct/small/dark/components/form.h +3 -0
  16. package/ios/frozenproduct/small/dark/components/table.h +3 -1
  17. package/ios/frozenproduct/small/light/components/form.h +3 -0
  18. package/ios/frozenproduct/small/light/components/table.h +3 -1
  19. package/ios/product/large/dark/components/form.h +3 -0
  20. package/ios/product/large/dark/components/table.h +8 -6
  21. package/ios/product/large/light/components/form.h +3 -0
  22. package/ios/product/large/light/components/table.h +8 -6
  23. package/ios/product/small/dark/components/form.h +3 -0
  24. package/ios/product/small/dark/components/table.h +8 -6
  25. package/ios/product/small/light/components/form.h +3 -0
  26. package/ios/product/small/light/components/table.h +8 -6
  27. package/js/common/frozenproduct/large/dark/components/form.d.ts +9 -0
  28. package/js/common/frozenproduct/large/dark/components/form.js +51 -0
  29. package/js/common/frozenproduct/large/dark/components/table.d.ts +2 -0
  30. package/js/common/frozenproduct/large/dark/components/table.js +32 -4
  31. package/js/common/frozenproduct/large/light/components/form.d.ts +9 -0
  32. package/js/common/frozenproduct/large/light/components/form.js +51 -0
  33. package/js/common/frozenproduct/large/light/components/table.d.ts +2 -0
  34. package/js/common/frozenproduct/large/light/components/table.js +32 -4
  35. package/js/common/frozenproduct/small/dark/components/form.d.ts +9 -0
  36. package/js/common/frozenproduct/small/dark/components/form.js +51 -0
  37. package/js/common/frozenproduct/small/dark/components/table.d.ts +2 -0
  38. package/js/common/frozenproduct/small/dark/components/table.js +32 -4
  39. package/js/common/frozenproduct/small/light/components/form.d.ts +9 -0
  40. package/js/common/frozenproduct/small/light/components/form.js +51 -0
  41. package/js/common/frozenproduct/small/light/components/table.d.ts +2 -0
  42. package/js/common/frozenproduct/small/light/components/table.js +32 -4
  43. package/js/common/product/large/dark/components/form.d.ts +9 -0
  44. package/js/common/product/large/dark/components/form.js +51 -0
  45. package/js/common/product/large/dark/components/table.d.ts +2 -0
  46. package/js/common/product/large/dark/components/table.js +54 -14
  47. package/js/common/product/large/light/components/form.d.ts +9 -0
  48. package/js/common/product/large/light/components/form.js +51 -0
  49. package/js/common/product/large/light/components/table.d.ts +2 -0
  50. package/js/common/product/large/light/components/table.js +54 -14
  51. package/js/common/product/small/dark/components/form.d.ts +9 -0
  52. package/js/common/product/small/dark/components/form.js +51 -0
  53. package/js/common/product/small/dark/components/table.d.ts +2 -0
  54. package/js/common/product/small/dark/components/table.js +54 -14
  55. package/js/common/product/small/light/components/form.d.ts +9 -0
  56. package/js/common/product/small/light/components/form.js +51 -0
  57. package/js/common/product/small/light/components/table.d.ts +2 -0
  58. package/js/common/product/small/light/components/table.js +54 -14
  59. package/js/es6/frozenproduct/large/dark/components/form.d.ts +3 -0
  60. package/js/es6/frozenproduct/large/dark/components/form.js +3 -0
  61. package/js/es6/frozenproduct/large/dark/components/table.d.ts +2 -0
  62. package/js/es6/frozenproduct/large/dark/components/table.js +3 -1
  63. package/js/es6/frozenproduct/large/light/components/form.d.ts +3 -0
  64. package/js/es6/frozenproduct/large/light/components/form.js +3 -0
  65. package/js/es6/frozenproduct/large/light/components/table.d.ts +2 -0
  66. package/js/es6/frozenproduct/large/light/components/table.js +3 -1
  67. package/js/es6/frozenproduct/small/dark/components/form.d.ts +3 -0
  68. package/js/es6/frozenproduct/small/dark/components/form.js +3 -0
  69. package/js/es6/frozenproduct/small/dark/components/table.d.ts +2 -0
  70. package/js/es6/frozenproduct/small/dark/components/table.js +3 -1
  71. package/js/es6/frozenproduct/small/light/components/form.d.ts +3 -0
  72. package/js/es6/frozenproduct/small/light/components/form.js +3 -0
  73. package/js/es6/frozenproduct/small/light/components/table.d.ts +2 -0
  74. package/js/es6/frozenproduct/small/light/components/table.js +3 -1
  75. package/js/es6/product/large/dark/components/form.d.ts +3 -0
  76. package/js/es6/product/large/dark/components/form.js +3 -0
  77. package/js/es6/product/large/dark/components/table.d.ts +2 -0
  78. package/js/es6/product/large/dark/components/table.js +8 -6
  79. package/js/es6/product/large/light/components/form.d.ts +3 -0
  80. package/js/es6/product/large/light/components/form.js +3 -0
  81. package/js/es6/product/large/light/components/table.d.ts +2 -0
  82. package/js/es6/product/large/light/components/table.js +8 -6
  83. package/js/es6/product/small/dark/components/form.d.ts +3 -0
  84. package/js/es6/product/small/dark/components/form.js +3 -0
  85. package/js/es6/product/small/dark/components/table.d.ts +2 -0
  86. package/js/es6/product/small/dark/components/table.js +8 -6
  87. package/js/es6/product/small/light/components/form.d.ts +3 -0
  88. package/js/es6/product/small/light/components/form.js +3 -0
  89. package/js/es6/product/small/light/components/table.d.ts +2 -0
  90. package/js/es6/product/small/light/components/table.js +8 -6
  91. package/js/umd/frozenproduct/large/dark/components/form.js +51 -0
  92. package/js/umd/frozenproduct/large/dark/components/table.js +32 -4
  93. package/js/umd/frozenproduct/large/light/components/form.js +51 -0
  94. package/js/umd/frozenproduct/large/light/components/table.js +32 -4
  95. package/js/umd/frozenproduct/small/dark/components/form.js +51 -0
  96. package/js/umd/frozenproduct/small/dark/components/table.js +32 -4
  97. package/js/umd/frozenproduct/small/light/components/form.js +51 -0
  98. package/js/umd/frozenproduct/small/light/components/table.js +32 -4
  99. package/js/umd/product/large/dark/components/form.js +51 -0
  100. package/js/umd/product/large/dark/components/table.js +54 -14
  101. package/js/umd/product/large/light/components/form.js +51 -0
  102. package/js/umd/product/large/light/components/table.js +54 -14
  103. package/js/umd/product/small/dark/components/form.js +51 -0
  104. package/js/umd/product/small/dark/components/table.js +54 -14
  105. package/js/umd/product/small/light/components/form.js +51 -0
  106. package/js/umd/product/small/light/components/table.js +54 -14
  107. package/json/flat/frozenproduct/large/dark/components/form.json +3 -0
  108. package/json/flat/frozenproduct/large/dark/components/table.json +3 -1
  109. package/json/flat/frozenproduct/large/light/components/form.json +3 -0
  110. package/json/flat/frozenproduct/large/light/components/table.json +3 -1
  111. package/json/flat/frozenproduct/small/dark/components/form.json +3 -0
  112. package/json/flat/frozenproduct/small/dark/components/table.json +3 -1
  113. package/json/flat/frozenproduct/small/light/components/form.json +3 -0
  114. package/json/flat/frozenproduct/small/light/components/table.json +3 -1
  115. package/json/flat/product/large/dark/components/form.json +3 -0
  116. package/json/flat/product/large/dark/components/table.json +8 -6
  117. package/json/flat/product/large/light/components/form.json +3 -0
  118. package/json/flat/product/large/light/components/table.json +8 -6
  119. package/json/flat/product/small/dark/components/form.json +3 -0
  120. package/json/flat/product/small/dark/components/table.json +8 -6
  121. package/json/flat/product/small/light/components/form.json +3 -0
  122. package/json/flat/product/small/light/components/table.json +8 -6
  123. package/json/nested/frozenproduct/large/dark/components/form.json +9 -0
  124. package/json/nested/frozenproduct/large/dark/components/table.json +4 -2
  125. package/json/nested/frozenproduct/large/light/components/form.json +9 -0
  126. package/json/nested/frozenproduct/large/light/components/table.json +4 -2
  127. package/json/nested/frozenproduct/small/dark/components/form.json +9 -0
  128. package/json/nested/frozenproduct/small/dark/components/table.json +4 -2
  129. package/json/nested/frozenproduct/small/light/components/form.json +9 -0
  130. package/json/nested/frozenproduct/small/light/components/table.json +4 -2
  131. package/json/nested/product/large/dark/components/form.json +9 -0
  132. package/json/nested/product/large/dark/components/table.json +9 -7
  133. package/json/nested/product/large/light/components/form.json +9 -0
  134. package/json/nested/product/large/light/components/table.json +9 -7
  135. package/json/nested/product/small/dark/components/form.json +9 -0
  136. package/json/nested/product/small/dark/components/table.json +9 -7
  137. package/json/nested/product/small/light/components/form.json +9 -0
  138. package/json/nested/product/small/light/components/table.json +9 -7
  139. package/package.json +1 -1
  140. package/sage-design-tokens-15.4.0.tgz +0 -0
  141. package/scss/frozenproduct/large/components/badge.scss +1 -1
  142. package/scss/frozenproduct/large/components/button.scss +15 -15
  143. package/scss/frozenproduct/large/components/container.scss +10 -10
  144. package/scss/frozenproduct/large/components/form.scss +14 -11
  145. package/scss/frozenproduct/large/components/link.scss +2 -2
  146. package/scss/frozenproduct/large/components/nav.scss +6 -6
  147. package/scss/frozenproduct/large/components/page.scss +1 -1
  148. package/scss/frozenproduct/large/components/popover.scss +6 -6
  149. package/scss/frozenproduct/large/components/progress.scss +8 -8
  150. package/scss/frozenproduct/large/components/status.scss +10 -10
  151. package/scss/frozenproduct/large/components/tab.scss +9 -9
  152. package/scss/frozenproduct/large/components/table.scss +13 -11
  153. package/scss/frozenproduct/small/components/badge.scss +1 -1
  154. package/scss/frozenproduct/small/components/button.scss +15 -15
  155. package/scss/frozenproduct/small/components/container.scss +10 -10
  156. package/scss/frozenproduct/small/components/form.scss +14 -11
  157. package/scss/frozenproduct/small/components/link.scss +2 -2
  158. package/scss/frozenproduct/small/components/nav.scss +6 -6
  159. package/scss/frozenproduct/small/components/page.scss +1 -1
  160. package/scss/frozenproduct/small/components/popover.scss +6 -6
  161. package/scss/frozenproduct/small/components/progress.scss +8 -8
  162. package/scss/frozenproduct/small/components/status.scss +10 -10
  163. package/scss/frozenproduct/small/components/tab.scss +9 -9
  164. package/scss/frozenproduct/small/components/table.scss +13 -11
  165. package/scss/product/large/components/button.scss +13 -13
  166. package/scss/product/large/components/container.scss +10 -10
  167. package/scss/product/large/components/form.scss +11 -8
  168. package/scss/product/large/components/link.scss +2 -2
  169. package/scss/product/large/components/nav.scss +5 -5
  170. package/scss/product/large/components/page.scss +1 -1
  171. package/scss/product/large/components/popover.scss +2 -2
  172. package/scss/product/large/components/progress.scss +6 -6
  173. package/scss/product/large/components/status.scss +3 -3
  174. package/scss/product/large/components/tab.scss +7 -7
  175. package/scss/product/large/components/table.scss +18 -16
  176. package/scss/product/small/components/button.scss +13 -13
  177. package/scss/product/small/components/container.scss +10 -10
  178. package/scss/product/small/components/form.scss +11 -8
  179. package/scss/product/small/components/link.scss +2 -2
  180. package/scss/product/small/components/nav.scss +5 -5
  181. package/scss/product/small/components/page.scss +1 -1
  182. package/scss/product/small/components/popover.scss +2 -2
  183. package/scss/product/small/components/progress.scss +6 -6
  184. package/scss/product/small/components/status.scss +3 -3
  185. package/scss/product/small/components/tab.scss +7 -7
  186. package/scss/product/small/components/table.scss +18 -16
  187. package/sage-design-tokens-15.2.2.tgz +0 -0
@@ -22,18 +22,20 @@ $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;
26
25
  $progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
27
26
  $progress-color-fg-alt: $modes-color-status-positive-default;
28
27
  $progress-color-fg-caution: $modes-color-status-caution-default;
29
28
  $progress-color-fg-error: $modes-color-status-negative-default;
30
29
  $progress-color-fg-info: $modes-color-status-info-default;
31
30
  $progress-color-datavis-fg-default: $modes-color-status-custom-teal-default;
32
- $progress-color-loader-bg-default: $modes-color-interactive-progress-frozen-bg;
33
31
  $progress-color-loader-fg-error: $modes-color-status-negative-default;
34
32
  $progress-color-loader-fg-complete: $modes-color-status-positive-default;
33
+ $progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-active;
35
34
  $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;
36
37
  $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
38
+ $progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-active;
37
39
  $progress-color-stepindicator-border-success: $modes-color-status-positive-default;
38
40
  $progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
39
41
  $progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -47,21 +49,15 @@ $progress-typography-responsive-label-l: $global-typography-responsive-component
47
49
  $progress-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
48
50
  $progress-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
49
51
  $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
50
- $progress-color-border-default: $modes-color-generic-fg-frozen-soft;
51
52
  $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;
58
57
  $progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
59
58
  $progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
60
- $progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-active;
61
59
  $progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
62
60
  $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;
65
61
  $progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
66
62
  $progress-size-bar-s: $global-size-micro-xs; // S loader bar
67
63
  $progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar
@@ -79,6 +75,10 @@ $progress-size-stepflow-m: $global-size-micro-m; // Step height
79
75
  $progress-size-stepindicator-bar: $global-size-micro-xxs; // step indicator bar
80
76
  $progress-size-stepindicator-stepcircle-s: $global-size-macro-xs; // M size step indicator
81
77
  $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,14 +5,11 @@
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
10
8
  $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
11
9
  $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
12
10
  $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
13
11
  $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
14
12
  $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
16
13
  $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
17
14
  $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
18
15
  $status-color-message-contextual-error-icon: $modes-color-status-negative-default; // Icon on tinted bgs
@@ -25,9 +22,6 @@ $status-color-message-contextual-success-icon: $modes-color-status-positive-defa
25
22
  $status-color-message-contextual-warning-bg-default: $modes-color-status-caution-default;
26
23
  $status-color-message-contextual-warning-border-default: $modes-color-status-caution-default;
27
24
  $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
31
25
  $status-color-pill-custom-blue-bg-default: $modes-color-status-custom-blue-default;
32
26
  $status-color-pill-custom-blue-bg-alt-default: $modes-color-status-custom-blue-default-alt; // outline pill bg
33
27
  $status-color-pill-custom-blue-border-default: $modes-color-status-custom-blue-default;
@@ -74,9 +68,6 @@ $status-color-pill-info-border-default: $modes-color-status-info-default;
74
68
  $status-color-pill-info-inverse-bg-default: $modes-color-status-info-inverse-default;
75
69
  $status-color-pill-info-inverse-bg-alt-default: $modes-color-status-info-inverse-default-alt; // outline pill bg
76
70
  $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;
80
71
  $status-color-pill-neutral-inverse-bg-default: $modes-color-status-neutral-inverse-default;
81
72
  $status-color-pill-neutral-inverse-bg-alt-default: $modes-color-status-neutral-inverse-default-alt; // outline pill bg
82
73
  $status-color-pill-neutral-inverse-border-default: $modes-color-status-neutral-inverse-default;
@@ -112,12 +103,15 @@ $status-color-message-contextual-text: $modes-color-status-content-with-hover-al
112
103
  $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
113
104
  $status-color-message-contextual-ai-bg-alt: $status-color-none; // Subtle message bg
114
105
  $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
115
107
  $status-color-message-contextual-error-bg-alt: $status-color-none; // Subtle message bg
116
108
  $status-color-message-contextual-info-bg-alt: $status-color-none; // Subtle message bg
117
109
  $status-color-message-contextual-success-bg-alt: $status-color-none; // Subtle message bg
118
110
  $status-color-message-contextual-warning-bg-alt: $status-color-none; // Subtle message bg
119
111
  $status-color-message-global-label-hover: $modes-color-interactive-monochrome-with-hover;
120
- $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg 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
121
115
  $status-color-pill-custom-blue-bg-alt-hover: $modes-color-status-custom-blue-hover-alt;
122
116
  $status-color-pill-custom-blue-bg-hover: $modes-color-status-custom-blue-hover;
123
117
  $status-color-pill-custom-teal-bg-alt-hover: $modes-color-status-custom-teal-hover-alt;
@@ -154,8 +148,10 @@ $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
154
148
  $status-color-pill-info-bg-hover: $modes-color-status-info-hover;
155
149
  $status-color-pill-info-inverse-bg-alt-hover: $modes-color-status-info-inverse-hover-alt;
156
150
  $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;
157
152
  $status-color-pill-neutral-bg-alt-default: $status-color-none; // outline pill bg
158
153
  $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;
159
155
  $status-color-pill-neutral-inverse-bg-alt-hover: $modes-color-status-neutral-inverse-hover-alt;
160
156
  $status-color-pill-neutral-inverse-bg-hover: $modes-color-status-neutral-inverse-hover;
161
157
  $status-color-pill-readonly-label: $modes-color-generic-content-firm; // Pill (all types, readonly, when nested in disabled parent components)
@@ -175,8 +171,11 @@ $status-color-rating-bg-hover: $modes-color-status-reviews-frozen-hover;
175
171
  $status-color-rating-border-default: $modes-color-status-reviews-frozen-default;
176
172
  $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
177
173
  $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
178
175
  $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
179
177
  $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
180
179
  $status-color-message-global-warning-icon: $modes-color-status-content-with-default-alt;
181
180
  $status-color-pill-generic-label-default: $modes-color-status-content-with-default;
182
181
  $status-color-pill-generic-label-hover: $modes-color-status-content-with-hover;
@@ -184,6 +183,7 @@ $status-color-pill-generic-label-alt-default: $modes-color-status-content-with-d
184
183
  $status-color-pill-generic-label-alt-hover: $modes-color-status-content-with-default-alt;
185
184
  $status-color-pill-generic-inverse-label-alt-default: $modes-color-status-content-inverse-with-default-alt;
186
185
  $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,6 +6,8 @@
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;
9
11
  $tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
10
12
  $tab-color-validation-border-warning: $modes-color-status-caution-default;
11
13
  $tab-color-validation-border-error: $modes-color-status-negative-default;
@@ -18,11 +20,16 @@ $tab-typography-adaptive-label-l: $global-typography-adaptive-component-firm-l;
18
20
  $tab-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
19
21
  $tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
20
22
  $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.
21
24
  $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;
22
28
  $tab-color-icon-hover: $modes-color-interactive-monochrome-with-hover;
23
- $tab-color-label-active: $modes-color-interactive-monochrome-active;
24
- $tab-color-icon-active: $modes-color-interactive-monochrome-active;
29
+ $tab-color-label-enabled: $modes-color-interactive-monochrome-default;
25
30
  $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;
26
33
  $tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
27
34
  $tab-size-l: $global-size-macro-l; // L tab
28
35
  $tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
@@ -39,14 +46,7 @@ $tab-space-xg-l: $global-space-micro-l; // Gap between elements in Tab.
39
46
  $tab-space-y-m: $global-space-micro-l; // Top bottom padding in Tab.
40
47
  $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
41
48
  $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.
43
49
  $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,11 +6,11 @@
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;
10
9
  $table-color-row-bg-activated: $modes-color-interactive-primary-frozen-table-default;
11
10
  $table-color-row-bg-default: $modes-color-generic-bg-nought;
12
11
  $table-color-row-bg-alt: $modes-color-generic-bg-frozen-delicate;
13
12
  $table-color-row-bg-hover: $modes-color-generic-bg-frozen-soft;
13
+ $table-color-row-bg-selected: $modes-color-interactive-monochrome-active;
14
14
  $table-color-row-label-hover: $modes-color-generic-content-extreme;
15
15
  $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
16
16
  $table-typography-adaptive-heading-m: $global-typography-adaptive-component-firm-m;
@@ -30,30 +30,32 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
30
30
  $table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
31
31
  $table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
32
32
  $table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
33
+ $table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
34
+ $table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
35
+ $table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
36
+ $table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
33
37
  $table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-frozen-default-alt;
34
- $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
38
+ $table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-frozen-default;
39
+ $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
40
+ $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
41
+ $table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
42
+ $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows. Highlighted rows.
35
43
  $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
36
44
  $table-color-row-label-activated: $modes-color-interactive-monochrome-with-active-alt;
37
45
  $table-color-row-label-active: $modes-color-interactive-monochrome-with-active-alt;
38
46
  $table-color-row-label-default: $modes-color-generic-content-harsh;
39
- $table-color-footer-bg-default: $modes-color-generic-bg-soft;
47
+ $table-color-footer-bg-default: $modes-color-generic-bg-moderate;
48
+ $table-color-footer-label-default: $modes-color-interactive-monochrome-default;
40
49
  $table-boxshadow-firstchild: $global-boxshadow-inner-near;
41
50
  $table-boxshadow-column-sticky-left: $global-boxshadow-cleanedge-near-right; // Right shadow on left hand sticky column.
42
51
  $table-boxshadow-column-sticky-right: $global-boxshadow-cleanedge-near-left; // Left shadow on right hand sticky column.
43
52
  $table-boxshadow-row-dragging: $global-boxshadow-interactive-drag; // dragging state for a table row
44
- $table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
45
- $table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-hover;
46
53
  $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
47
- $table-color-header-subtle-label-default: $modes-color-interactive-monochrome-default;
48
- $table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-default;
49
- $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-hover;
50
54
  $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
51
55
  $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-with-default;
52
- $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-default;
53
- $table-color-row-bg-active: $modes-color-interactive-monochrome-frozen-active-alt;
54
56
  $table-color-row-border-default: $modes-color-generic-fg-delicate;
57
+ $table-color-row-label-selected: $modes-color-interactive-monochrome-with-active;
55
58
  $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
56
- $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.
@@ -39,7 +39,6 @@ $button-color-typical-secondary-inverse-label-disabled: $modes-color-interactive
39
39
  $button-color-typical-tertiary-inverse-border-disabled: $modes-color-interactive-inactive-inverse-default;
40
40
  $button-color-typical-tertiary-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
41
41
  $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
42
- $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
43
42
  $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
44
43
  $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
45
44
  $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -71,7 +70,6 @@ $button-typography-responsive-tertiary-s: $global-typography-responsive-componen
71
70
  $button-typography-responsive-tertiary-m: $global-typography-responsive-component-firm-m;
72
71
  $button-typography-responsive-tertiary-l: $global-typography-responsive-component-firm-l;
73
72
  $button-color-ai-label-active: $modes-color-interactive-monochrome-with-active-alt;
74
- $button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
75
73
  $button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
76
74
  $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
77
75
  $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -80,25 +78,18 @@ $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger
80
78
  $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
81
79
  $button-color-typical-primary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default;
82
80
  $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-with-active-alt;
83
- $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
84
81
  $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-with-hover;
85
82
  $button-color-typical-tertiary-bg-enabled: $button-color-none;
86
83
  $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-with-active-alt;
87
- $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
88
84
  $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-with-hover;
89
85
  $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
90
86
  $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
91
87
  $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-with-active-alt;
92
- $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
93
88
  $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-with-hover;
89
+ $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-active;
94
90
  $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-hover-alt;
95
- $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
96
- $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
97
91
  $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-with-hover;
98
92
  $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
93
  $button-size-split: $global-size-micro-xxs; // Split button (divider width)
103
94
  $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
104
95
  $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -236,6 +227,7 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
236
227
  $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
237
228
  $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
238
229
  $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
230
+ $button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
239
231
  $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
240
232
  $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
241
233
  $button-color-typical-primary-bg-active: $modes-color-interactive-primary-active;
@@ -250,8 +242,10 @@ $button-color-typical-secondary-border-active: $modes-color-interactive-primary-
250
242
  $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary-default-alt;
251
243
  $button-color-typical-secondary-border-hover: $modes-color-interactive-primary-hover;
252
244
  $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
245
+ $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-default;
253
246
  $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
254
247
  $button-color-typical-secondary-inverse-bg-enabled: $modes-color-interactive-primary-inverse-default-alt3;
248
+ $button-color-typical-secondary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
255
249
  $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
256
250
  $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
257
251
  $button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
@@ -264,28 +258,35 @@ $button-color-typical-tertiary-border-active: $modes-color-interactive-primary-a
264
258
  $button-color-typical-tertiary-border-enabled: $modes-color-interactive-primary-default-alt;
265
259
  $button-color-typical-tertiary-border-hover: $modes-color-interactive-primary-hover;
266
260
  $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
261
+ $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-default;
267
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;
268
264
  $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
269
265
  $button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
270
266
  $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
271
267
  $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
272
268
  $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
273
269
  $button-color-typical-tertiary-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
274
- $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
275
270
  $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
271
+ $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-default;
276
272
  $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
277
273
  $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
278
274
  $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
279
275
  $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
280
276
  $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
277
+ $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-default;
281
278
  $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-with-active;
282
279
  $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
280
+ $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-default-alt;
283
281
  $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-with-default;
284
282
  $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-with-default;
283
+ $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-default;
284
+ $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-default;
285
285
  $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
286
286
  $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
287
287
  $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
288
288
  $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
289
+ $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
289
290
  $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
290
291
  $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
292
  $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 +322,8 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
321
322
  $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
322
323
  $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
323
324
  $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
325
  $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
326
- $button-color-typical-tertiary-inverse-bg-hover: $modes-color-interactive-primary-inverse-hover-alt;
326
+ $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-active-alt;
327
327
  $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
328
328
  $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-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-default; //
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-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;
@@ -8,6 +8,9 @@
8
8
  $form-space-datepicker-pr-s: 0; // right padding on small date picker input
9
9
  $form-space-datepicker-pr-m: 0; // right padding on medium date picker input
10
10
  $form-space-datepicker-pr-l: 0; // right padding on large date picker input
11
+ $form-space-labelset-inline-pt-s: 31; // top padding on S inline input labelsets
12
+ $form-space-labelset-inline-pt-m: 35; // top padding on inline input labelsets
13
+ $form-space-labelset-inline-pt-l: 35; // top padding on inline L input labelsets
11
14
  $form-color-switch-border-active: transparent;
12
15
  $form-color-switch-border-activedisabled: transparent;
13
16
  $form-radius-none: $global-radius-none; // Text editor (internal corners)
@@ -16,10 +19,7 @@ $form-radius-radio: $global-radius-circle; // Radio button
16
19
  $form-radius-switch: $global-radius-circle; // Switch container and handle
17
20
  $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
18
21
  $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
19
- $form-color-calendar-bg-active: $modes-color-interactive-monochrome-active;
20
- $form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
21
22
  $form-color-labelset-label-required: $modes-color-interactive-danger-default;
22
- $form-color-switch-bg-active: $modes-color-interactive-monochrome-active;
23
23
  $form-color-validation-border-error: $modes-color-status-negative-default;
24
24
  $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
25
25
  $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -40,12 +40,11 @@ $form-typography-responsive-default-xs: $global-typography-responsive-component-
40
40
  $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
41
41
  $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
42
42
  $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
43
+ $form-color-calendar-bg-active: $modes-color-interactive-monochrome-active;
43
44
  $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
45
+ $form-color-calendar-border-duration: $modes-color-interactive-monochrome-active;
44
46
  $form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
45
- $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
46
- $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
47
47
  $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-with-hover;
48
- $form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
49
48
  $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
50
49
  $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
51
50
  $form-color-typical-border-hover: $modes-color-interactive-data-entry-with-hover; // File input draggable border state
@@ -53,9 +52,8 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
53
52
  $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
54
53
  $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
55
54
  $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
55
+ $form-color-switch-bg-active: $modes-color-interactive-monochrome-active;
56
56
  $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
57
- $form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
58
- $form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
59
57
  $form-space-none: $global-space-none;
60
58
  $form-space-calendar-x-m: $global-space-macro-m;
61
59
  $form-space-calendar-y-m: $global-space-macro-m;
@@ -236,7 +234,10 @@ $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
236
234
  $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
237
235
  $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
238
236
  $form-color-dropdown-label-active: $modes-color-interactive-monochrome-with-active;
237
+ $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
239
238
  $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
239
+ $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
240
+ $form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
240
241
  $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
241
242
  $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
242
243
  $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -256,8 +257,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
256
257
  $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
257
258
  $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
258
259
  $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
260
+ $form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
259
261
  $form-color-switch-fg-active: $modes-color-interactive-monochrome-with-active;
260
262
  $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
263
+ $form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
261
264
  $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
262
265
  $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
263
266
  $form-color-switch-icon-enabled: $modes-color-interactive-data-entry-content-alt;
@@ -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-default-alt2;
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,15 +9,12 @@ $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-leftnav-container-bg-default: $modes-color-generic-bg-nought; // bg of horizontal nav variant that launches the left nav
15
- $nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
16
14
  $nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
17
15
  $nav-color-leftnav-item-bg-enabled: $modes-color-none;
18
16
  $nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
19
17
  $nav-color-modal-container-bg-default: $modes-color-generic-bg-nought; // bg of container holding stack of items in modal nav
20
- $nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
21
18
  $nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
22
19
  $nav-color-modal-item-bg-enabled: $modes-color-none;
23
20
  $nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
@@ -37,17 +34,18 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
37
34
  $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-xs;
38
35
  $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
39
36
  $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
37
+ $nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
40
38
  $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
41
39
  $nav-color-item-bg-hover: $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
41
  $nav-color-item-label-hover: $modes-color-interactive-monochrome-with-hover;
45
- $nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
46
42
  $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
47
43
  $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
48
44
  $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
45
+ $nav-color-leftnav-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the parent container
49
46
  $nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
50
47
  $nav-color-leftnav-item-label-hover: $modes-color-interactive-nav-with-hover;
48
+ $nav-color-modal-container-bg-default-alt: $modes-color-generic-backdrop-faint; // bg of the sticky header within modal
51
49
  $nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
52
50
  $nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
53
51
  $nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
@@ -56,6 +54,8 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
56
54
  $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
57
55
  $nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
58
56
  $nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
57
+ $nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
58
+ $nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
59
59
  $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
60
60
  $nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
61
61
  $nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;
@@ -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-none: $global-space-none;
@@ -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-active; // previously action minor 850
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,11 @@ $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)
23
+ $popover-color-bg-active: $modes-color-interactive-monochrome-active; // previously action minor 850
24
24
  $popover-color-bg-activealt: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM.
25
25
  $popover-color-bg-hover: $modes-color-interactive-monochrome-hover-alt; // REF'D IN FORM.
26
26
  $popover-color-label-activealt: $modes-color-interactive-monochrome-with-hover;
27
27
  $popover-color-label-hover: $modes-color-interactive-monochrome-with-hover;
28
- $popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
29
28
  $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
30
29
  $popover-size-icon-m: $global-size-icon-m;
31
30
  $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -56,6 +55,7 @@ $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on sma
56
55
  $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
57
56
  $popover-color-label-active: $modes-color-interactive-monochrome-with-active;
58
57
  $popover-color-label-disabled: $modes-color-interactive-inactive-content;
58
+ $popover-color-label-enabled: $modes-color-interactive-monochrome-default-alt;
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