@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
@@ -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.
@@ -5,7 +5,6 @@
5
5
 
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
- $badge-color-notification-bg-default: $modes-color-status-caution-frozenglobal-default;
9
8
  $badge-radius-badge: $global-radius-circle; // Badge
10
9
  $badge-color-notification-bg-alt: $modes-color-status-info-default;
11
10
  $badge-color-notification-label-default: $modes-color-generic-content-extreme;
@@ -17,6 +16,7 @@ $badge-color-notification-inverse-label-alt: $modes-color-generic-content-extrem
17
16
  $badge-typography-responsive-m: $global-typography-responsive-component-notification-m;
18
17
  $badge-typography-adaptive-m: $global-typography-adaptive-component-notification-m;
19
18
  $badge-color-notification-border-default: $modes-color-generic-content-nought;
19
+ $badge-color-notification-bg-default: $modes-color-status-caution-frozenglobal-default;
20
20
  $badge-color-notification-label-alt: $modes-color-generic-fg-nought;
21
21
  $badge-size-micro-dot: $global-size-micro-m; // Micro dot badge size
22
22
  $badge-size-micro-numbered-min: $global-size-macro-xxs; // Micro dot badge size with numbering
@@ -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-enabled: $modes-color-interactive-monochrome-frozen-default;
45
+ $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-frozen-active;
46
46
  $button-color-typical-subtle-inverse-label-disabled: $modes-color-interactive-inactive-inverse-content;
47
- $button-color-typical-toggle-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
47
+ $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-frozen-active;
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,6 +76,7 @@ $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;
79
80
  $button-color-ai-label-hover: $modes-color-interactive-monochrome-with-hover;
80
81
  $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
81
82
  $button-color-destructive-secondary-bg-hover: $modes-color-interactive-danger-hover-alt;
@@ -87,10 +88,17 @@ $button-color-typical-secondary-border-enabled: $modes-color-interactive-primary
87
88
  $button-color-typical-secondary-label-enabled: $modes-color-interactive-primary-frozen-default;
88
89
  $button-color-typical-tertiary-label-enabled: $modes-color-interactive-primary-frozen-default;
89
90
  $button-color-typical-tertiary-inverse-bg-enabled: $button-color-none;
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;
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;
92
96
  $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;
93
98
  $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;
94
102
  $button-size-split: $global-size-micro-xxs; // Split button (divider width)
95
103
  $button-size-xs: $global-size-macro-xs; // min-height on XS Buttons
96
104
  $button-size-s: $global-size-macro-s; // min-height on S Buttons
@@ -228,7 +236,6 @@ $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in
228
236
  $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
229
237
  $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
230
238
  $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
231
- $button-color-ai-label-enabled: $modes-color-interactive-monochrome-default;
232
239
  $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
233
240
  $button-color-destructive-secondary-label-disabled: $modes-color-interactive-inactive-content;
234
241
  $button-color-typical-primary-bg-active: $modes-color-interactive-primary-frozen-active;
@@ -246,7 +253,6 @@ $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactiv
246
253
  $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
247
254
  $button-color-typical-secondary-inverse-bg-active: $modes-color-interactive-primary-inverse-active-alt;
248
255
  $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;
250
256
  $button-color-typical-secondary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
251
257
  $button-color-typical-secondary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
252
258
  $button-color-typical-secondary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
@@ -260,35 +266,26 @@ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome
260
266
  $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
261
267
  $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-frozen-with-hover-alt;
262
268
  $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;
264
269
  $button-color-typical-tertiary-inverse-border-active: $modes-color-interactive-primary-inverse-active;
265
270
  $button-color-typical-tertiary-inverse-border-enabled: $modes-color-interactive-primary-inverse-default-alt;
266
271
  $button-color-typical-tertiary-inverse-border-hover: $modes-color-interactive-primary-inverse-hover;
267
272
  $button-color-typical-tertiary-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
268
273
  $button-color-typical-tertiary-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
269
274
  $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;
272
275
  $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;
274
276
  $button-color-typical-subtle-inverse-bg-hover: $modes-color-interactive-monochrome-inverse-hover-alt;
275
277
  $button-color-typical-subtle-inverse-label-active: $modes-color-interactive-monochrome-inverse-with-active-alt;
276
278
  $button-color-typical-subtle-inverse-label-enabled: $modes-color-interactive-monochrome-inverse-default;
277
279
  $button-color-typical-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-with-hover;
278
280
  $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;
280
281
  $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-frozen-with-active;
281
282
  $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;
287
285
  $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-with-default;
288
286
  $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-with-default;
289
287
  $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-with-default;
290
288
  $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-with-default;
291
- $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-default;
292
289
  $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
293
290
  $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)
294
291
  $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -324,6 +321,9 @@ $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive
324
321
  $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
325
322
  $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
326
323
  $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;
327
326
  $button-color-typical-subtle-inverse-bg-active: $modes-color-interactive-monochrome-inverse-active-alt;
328
327
  $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,12 +23,17 @@ $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;
26
27
  $container-color-interactive-border-activated: $modes-color-status-positive-default;
27
28
  $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
28
29
  $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.
29
33
  $container-color-interactive-detailedicon-bg: $modes-color-custom-frozen;
30
34
  $container-color-interactive-droptarget-bg-default: $modes-color-status-info-default; // draggable drop target background color
31
35
  $container-color-standard-bg-default: $modes-color-generic-bg-nought;
36
+ $container-color-standard-border-active: $modes-color-interactive-monochrome-active;
32
37
  $container-color-standard-statusborder-bg-caution: $modes-color-status-caution-default;
33
38
  $container-color-standard-statusborder-bg-negative: $modes-color-status-negative-default;
34
39
  $container-color-standard-statusborder-bg-important: $modes-color-status-important-default;
@@ -55,17 +60,17 @@ $container-typography-responsive-paragraph-s: $global-typography-responsive-comp
55
60
  $container-typography-responsive-paragraph-m: $global-typography-responsive-component-moderate-m;
56
61
  $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
57
62
  $container-color-blockquote-border: $modes-color-interactive-primary-frozen-default;
58
- $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-active;
59
63
  $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-hover-alt; // Used for accordion hover backgrounds
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.
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.
63
68
  $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
64
69
  $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.
65
71
  $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
66
72
  $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
67
73
  $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;
69
74
  $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
70
75
  $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
71
76
  $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
@@ -82,16 +87,11 @@ $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (h
82
87
  $container-boxshadow-card-drag: $global-boxshadow-interactive-drag; // Card (drag state)
83
88
  $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-default-alt;
84
89
  $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.
86
90
  $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
87
91
  $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.
91
92
  $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-with-active;
92
93
  $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-with-active;
93
94
  $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)
@@ -15,12 +18,8 @@ $form-radius-radio: $global-radius-circle; // Radio button
15
18
  $form-radius-switch: $global-radius-circle; // Switch container and handle
16
19
  $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
17
20
  $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
18
- $form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
21
+ $form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
19
22
  $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;
24
23
  $form-color-validation-border-error: $modes-color-status-negative-default;
25
24
  $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
26
25
  $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -41,10 +40,13 @@ $form-typography-responsive-default-xs: $global-typography-responsive-component-
41
40
  $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
42
41
  $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
43
42
  $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
44
- $form-color-calendar-bg-active: $modes-color-interactive-monochrome-frozen-active;
45
43
  $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-hover-alt;
44
+ $form-color-calendar-border-duration: $form-color-calendar-bg-active;
46
45
  $form-color-calendar-text-hover: $modes-color-interactive-monochrome-with-hover;
46
+ $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
47
+ $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-default-alt;
47
48
  $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-with-hover;
49
+ $form-color-dropdown-label-subtext: $modes-color-interactive-monochrome-default-alt2; // Option subtext.
48
50
  $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
49
51
  $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
50
52
  $form-color-typical-border-hover: $modes-color-interactive-data-entry-with-hover; // File input draggable border state
@@ -52,6 +54,7 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
52
54
  $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
53
55
  $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
54
56
  $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
57
+ $form-color-switch-bg-active: $modes-color-interactive-monochrome-frozen-default;
55
58
  $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
56
59
  $form-space-none: $global-space-none;
57
60
  $form-space-calendar-x-m: $global-space-macro-m;
@@ -224,18 +227,15 @@ $form-size-progressive-bar: $global-size-micro-xxs; // 2px progressive disclosur
224
227
  $form-size-rating-m: $global-size-icon-m; // medium rating stars
225
228
  $form-size-rating-l: $global-size-icon-xl; // large rating stars
226
229
  $form-color-calendar-bg-disabled: $modes-color-interactive-inactive-default-alt;
227
- $form-color-calendar-border-duration: $form-color-calendar-bg-active;
228
230
  $form-color-calendar-text-active: $modes-color-interactive-monochrome-with-active;
229
231
  $form-color-calendar-text-alt: $modes-color-interactive-data-entry-content-alt; // Days of the week subheaders
230
232
  $form-color-calendar-text-disabled: $modes-color-interactive-inactive-content;
231
233
  $form-color-calendar-text-duration: $modes-color-interactive-data-entry-content;
232
234
  $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
233
235
  $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
236
+ $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
234
237
  $form-color-dropdown-label-active: $modes-color-interactive-monochrome-with-active;
235
- $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-default;
236
238
  $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.
239
239
  $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
240
240
  $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
241
241
  $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -298,13 +298,16 @@ $form-size-dropdown-item-m: $popover-size-item-m; // REF POPOVER. Menu item min
298
298
  $form-size-dropdown-item-l: $popover-size-item-l; // REF POPOVER. Menu item min height.
299
299
  $form-size-search-input-minwidth: $container-size-responsive-xl; // minimum width for search input container
300
300
  $form-size-search-input-maxwidth: $container-size-responsive-xxl + $container-size-responsive-xxs; // maximum width for search input container
301
- $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
301
+ $form-color-calendar-bg-duration: $modes-color-interactive-inactive-frozen-default-alt;
302
302
  $form-color-typical-border-alt: $modes-color-interactive-inactive-default;
303
+ $form-color-typical-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
303
304
  $form-color-typical-border-disabled: $modes-color-interactive-inactive-default;
304
305
  $form-color-typical-border-read-only: $modes-color-interactive-inactive-default;
305
306
  $form-color-switch-bg-activedisabled: $modes-color-interactive-inactive-default;
306
307
  $form-color-switch-border-disabled: $modes-color-interactive-inactive-default;
308
+ $form-color-switch-border-enabled: $modes-color-interactive-data-entry-frozen-with-default;
307
309
  $form-color-switch-fg-disabled: $modes-color-interactive-inactive-default;
310
+ $form-color-switch-fg-enabled: $modes-color-interactive-data-entry-frozen-with-default;
308
311
  $form-color-switch-label-activedisabled: $modes-color-interactive-inactive-default;
309
312
  $form-color-switch-label-disabled: $modes-color-interactive-inactive-default;
310
313
  $form-radius-dropdown: $popover-radius-container; // REF POPOVER. Popover container.
@@ -5,6 +5,7 @@
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;
8
9
  $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.
9
10
  $link-typography-responsive-default-m: $global-typography-responsive-component-underlined-moderate-m; // Small Viewports: 16, Large Viewports: 16. Match token size to component size.
10
11
  $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.
@@ -19,14 +20,13 @@ $link-typography-adaptive-heading-m: $global-typography-adaptive-component-under
19
20
  $link-typography-adaptive-heading-l: $global-typography-adaptive-component-underlined-firm-l;
20
21
  $link-color-destructive-label-default: $modes-color-interactive-danger-default-alt; // .
21
22
  $link-color-destructive-inverse-label-default: $modes-color-interactive-danger-inverse-default-alt; // .
22
- $link-color-subtle-label-hover: $modes-color-interactive-monochrome-active;
23
+ $link-color-subtle-label-default: $modes-color-interactive-monochrome-default;
23
24
  $link-color-subtle-inverse-label-hover: $modes-color-interactive-monochrome-inverse-active;
24
25
  $link-boxshadow-skiplink: $global-boxshadow-container-near;
25
26
  $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
26
27
  $link-color-destructive-inverse-label-hover: $modes-color-interactive-danger-inverse-hover-alt2;
27
28
  $link-color-typical-label-default: $modes-color-interactive-primary-frozen-default-alt;
28
29
  $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,13 +9,16 @@ $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;
12
13
  $nav-color-item-bg-enabled: $modes-color-none;
13
14
  $nav-color-item-bg-hover: $modes-color-interactive-primary-frozen-nav-hover;
14
15
  $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
15
17
  $nav-color-leftnav-item-bg-active: $modes-color-interactive-nav-active;
16
18
  $nav-color-leftnav-item-bg-enabled: $modes-color-none;
17
19
  $nav-color-leftnav-item-bg-hover: $modes-color-interactive-nav-hover;
18
20
  $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
19
22
  $nav-color-modal-item-bg-active: $modes-color-interactive-nav-active;
20
23
  $nav-color-modal-item-bg-enabled: $modes-color-none;
21
24
  $nav-color-modal-item-bg-hover: $modes-color-interactive-nav-hover;
@@ -35,16 +38,15 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
35
38
  $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-xs;
36
39
  $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
37
40
  $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
38
- $nav-color-item-bg-active: $modes-color-interactive-monochrome-active;
39
41
  $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-hover-alt;
40
42
  $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;
41
45
  $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
42
46
  $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
43
47
  $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
45
48
  $nav-color-leftnav-item-label-active: $modes-color-interactive-nav-with-active;
46
49
  $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
48
50
  $nav-color-modal-item-label-active: $modes-color-interactive-nav-with-active;
49
51
  $nav-color-modal-item-label-hover: $modes-color-interactive-nav-with-hover;
50
52
  $nav-color-modal-headeritem-label-default: $modes-color-generic-content-firm; // color for subheaders passed into modal nav
@@ -53,8 +55,7 @@ $nav-color-topnav-item-label-hover: $modes-color-interactive-nav-with-hover;
53
55
  $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
54
56
  $nav-boxshadow-leftnav-childcontainer: $global-boxshadow-container-near; // box shadow on progressively shown child container
55
57
  $nav-color-item-label-active: $modes-color-interactive-monochrome-with-active;
56
- $nav-color-item-label-enabled: $modes-color-interactive-monochrome-default;
57
- $nav-color-item-label-alt: $modes-color-interactive-monochrome-default-alt;
58
+ $nav-color-item-label-hover: $modes-color-interactive-primary-frozen-nav-label-hover;
58
59
  $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
59
60
  $nav-color-leftnav-container-border-default: $modes-color-generic-fg-soft; // dividing lines within parent container
60
61
  $nav-color-leftnav-item-label-enabled: $modes-color-interactive-nav-with-default;
@@ -157,4 +158,3 @@ $nav-space-topnav-container-y-m: $global-space-macro-xxxs / 2; // vertical paddi
157
158
  $nav-space-topnav-parentitem-x-m: $global-space-macro-xxxs; // horizontal padding on stacked parent items
158
159
  $nav-space-topnav-parentitem-xg-m: $global-space-micro-s; // gap within horizontal parent items
159
160
  $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,6 +6,7 @@
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;
9
10
  $page-typography-responsive-h1: $global-typography-responsive-heading-l;
10
11
  $page-typography-responsive-h2: $global-typography-responsive-heading-m;
11
12
  $page-typography-responsive-h3: $global-typography-responsive-heading-s;
@@ -28,7 +29,6 @@ $page-typography-adaptive-p-regular-typical: $global-typography-adaptive-body-re
28
29
  $page-typography-adaptive-p-regular-large: $global-typography-adaptive-body-regular-l;
29
30
  $page-typography-adaptive-p-medium-typical: $global-typography-adaptive-body-medium-s;
30
31
  $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,6 +6,7 @@
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;
9
10
  $popover-color-bg-default: $modes-color-generic-bg-nought; // REF'D IN FORM. Popover container bg
10
11
  $popover-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
11
12
  $popover-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -20,7 +21,11 @@ $popover-typography-responsive-default-s: $global-typography-responsive-componen
20
21
  $popover-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
21
22
  $popover-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
22
23
  $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-frozen-active;
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;
24
29
  $popover-color-submenu-bg-default: $modes-color-generic-bg-faint; // popover small screen submenu container bg
25
30
  $popover-size-icon-m: $global-size-icon-m;
26
31
  $popover-size-item-s: $global-size-macro-s; // REF'D IN FORM. Menu item min height.
@@ -49,13 +54,8 @@ $popover-space-option-y-l: $global-space-micro-xl; // REF'D in FORM. Vertical pa
49
54
  $popover-space-submenu-x-s: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
50
55
  $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
51
56
  $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;
54
57
  $popover-color-label-active: $modes-color-interactive-monochrome-with-active;
55
- $popover-color-label-activealt: $modes-color-interactive-monochrome-frozen-with-hover;
56
58
  $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