@sage/design-tokens 7.1.7 → 7.2.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 (243) hide show
  1. package/css/frozenproduct/all.css +7 -1
  2. package/css/frozenproduct/large/components/profile.css +1 -1
  3. package/css/frozenproduct/large/dark.css +3 -0
  4. package/css/frozenproduct/large/light.css +3 -0
  5. package/css/frozenproduct/small/components/profile.css +1 -1
  6. package/css/frozenproduct/small/dark.css +3 -0
  7. package/css/frozenproduct/small/light.css +3 -0
  8. package/css/marketing/all.css +7 -1
  9. package/css/marketing/large/components/profile.css +1 -1
  10. package/css/marketing/large/dark.css +3 -0
  11. package/css/marketing/large/light.css +3 -0
  12. package/css/marketing/small/components/profile.css +1 -1
  13. package/css/marketing/small/dark.css +3 -0
  14. package/css/marketing/small/light.css +3 -0
  15. package/css/product/all.css +7 -1
  16. package/css/product/large/components/profile.css +1 -1
  17. package/css/product/large/dark.css +3 -0
  18. package/css/product/large/light.css +3 -0
  19. package/css/product/small/components/profile.css +1 -1
  20. package/css/product/small/dark.css +3 -0
  21. package/css/product/small/light.css +3 -0
  22. package/ios/frozenproduct/large/dark/components/profile.h +1 -1
  23. package/ios/frozenproduct/large/dark/mode.h +3 -0
  24. package/ios/frozenproduct/large/light/components/profile.h +1 -1
  25. package/ios/frozenproduct/large/light/mode.h +3 -0
  26. package/ios/frozenproduct/small/dark/components/profile.h +1 -1
  27. package/ios/frozenproduct/small/dark/mode.h +3 -0
  28. package/ios/frozenproduct/small/light/components/profile.h +1 -1
  29. package/ios/frozenproduct/small/light/mode.h +3 -0
  30. package/ios/marketing/large/dark/components/profile.h +1 -1
  31. package/ios/marketing/large/dark/mode.h +3 -0
  32. package/ios/marketing/large/light/components/profile.h +1 -1
  33. package/ios/marketing/large/light/mode.h +3 -0
  34. package/ios/marketing/small/dark/components/profile.h +1 -1
  35. package/ios/marketing/small/dark/mode.h +3 -0
  36. package/ios/marketing/small/light/components/profile.h +1 -1
  37. package/ios/marketing/small/light/mode.h +3 -0
  38. package/ios/product/large/dark/components/profile.h +1 -1
  39. package/ios/product/large/dark/mode.h +3 -0
  40. package/ios/product/large/light/components/profile.h +1 -1
  41. package/ios/product/large/light/mode.h +3 -0
  42. package/ios/product/small/dark/components/profile.h +1 -1
  43. package/ios/product/small/dark/mode.h +3 -0
  44. package/ios/product/small/light/components/profile.h +1 -1
  45. package/ios/product/small/light/mode.h +3 -0
  46. package/js/common/frozenproduct/large/dark/components/profile.js +2 -2
  47. package/js/common/frozenproduct/large/dark/mode.d.ts +5 -0
  48. package/js/common/frozenproduct/large/dark/mode.js +79 -0
  49. package/js/common/frozenproduct/large/light/components/profile.js +2 -2
  50. package/js/common/frozenproduct/large/light/mode.d.ts +5 -0
  51. package/js/common/frozenproduct/large/light/mode.js +83 -0
  52. package/js/common/frozenproduct/small/dark/components/profile.js +2 -2
  53. package/js/common/frozenproduct/small/dark/mode.d.ts +5 -0
  54. package/js/common/frozenproduct/small/dark/mode.js +79 -0
  55. package/js/common/frozenproduct/small/light/components/profile.js +2 -2
  56. package/js/common/frozenproduct/small/light/mode.d.ts +5 -0
  57. package/js/common/frozenproduct/small/light/mode.js +83 -0
  58. package/js/common/marketing/large/dark/components/profile.js +2 -2
  59. package/js/common/marketing/large/dark/mode.d.ts +5 -0
  60. package/js/common/marketing/large/dark/mode.js +79 -0
  61. package/js/common/marketing/large/light/components/profile.js +2 -2
  62. package/js/common/marketing/large/light/mode.d.ts +5 -0
  63. package/js/common/marketing/large/light/mode.js +83 -0
  64. package/js/common/marketing/small/dark/components/profile.js +2 -2
  65. package/js/common/marketing/small/dark/mode.d.ts +5 -0
  66. package/js/common/marketing/small/dark/mode.js +79 -0
  67. package/js/common/marketing/small/light/components/profile.js +2 -2
  68. package/js/common/marketing/small/light/mode.d.ts +5 -0
  69. package/js/common/marketing/small/light/mode.js +83 -0
  70. package/js/common/product/large/dark/components/profile.js +2 -2
  71. package/js/common/product/large/dark/mode.d.ts +5 -0
  72. package/js/common/product/large/dark/mode.js +79 -0
  73. package/js/common/product/large/light/components/profile.js +2 -2
  74. package/js/common/product/large/light/mode.d.ts +5 -0
  75. package/js/common/product/large/light/mode.js +83 -0
  76. package/js/common/product/small/dark/components/profile.js +2 -2
  77. package/js/common/product/small/dark/mode.d.ts +5 -0
  78. package/js/common/product/small/dark/mode.js +79 -0
  79. package/js/common/product/small/light/components/profile.js +2 -2
  80. package/js/common/product/small/light/mode.d.ts +5 -0
  81. package/js/common/product/small/light/mode.js +83 -0
  82. package/js/es6/frozenproduct/large/dark/components/profile.js +1 -1
  83. package/js/es6/frozenproduct/large/dark/mode.d.ts +3 -0
  84. package/js/es6/frozenproduct/large/dark/mode.js +3 -0
  85. package/js/es6/frozenproduct/large/light/components/profile.js +1 -1
  86. package/js/es6/frozenproduct/large/light/mode.d.ts +3 -0
  87. package/js/es6/frozenproduct/large/light/mode.js +3 -0
  88. package/js/es6/frozenproduct/small/dark/components/profile.js +1 -1
  89. package/js/es6/frozenproduct/small/dark/mode.d.ts +3 -0
  90. package/js/es6/frozenproduct/small/dark/mode.js +3 -0
  91. package/js/es6/frozenproduct/small/light/components/profile.js +1 -1
  92. package/js/es6/frozenproduct/small/light/mode.d.ts +3 -0
  93. package/js/es6/frozenproduct/small/light/mode.js +3 -0
  94. package/js/es6/marketing/large/dark/components/profile.js +1 -1
  95. package/js/es6/marketing/large/dark/mode.d.ts +3 -0
  96. package/js/es6/marketing/large/dark/mode.js +3 -0
  97. package/js/es6/marketing/large/light/components/profile.js +1 -1
  98. package/js/es6/marketing/large/light/mode.d.ts +3 -0
  99. package/js/es6/marketing/large/light/mode.js +3 -0
  100. package/js/es6/marketing/small/dark/components/profile.js +1 -1
  101. package/js/es6/marketing/small/dark/mode.d.ts +3 -0
  102. package/js/es6/marketing/small/dark/mode.js +3 -0
  103. package/js/es6/marketing/small/light/components/profile.js +1 -1
  104. package/js/es6/marketing/small/light/mode.d.ts +3 -0
  105. package/js/es6/marketing/small/light/mode.js +3 -0
  106. package/js/es6/product/large/dark/components/profile.js +1 -1
  107. package/js/es6/product/large/dark/mode.d.ts +3 -0
  108. package/js/es6/product/large/dark/mode.js +3 -0
  109. package/js/es6/product/large/light/components/profile.js +1 -1
  110. package/js/es6/product/large/light/mode.d.ts +3 -0
  111. package/js/es6/product/large/light/mode.js +3 -0
  112. package/js/es6/product/small/dark/components/profile.js +1 -1
  113. package/js/es6/product/small/dark/mode.d.ts +3 -0
  114. package/js/es6/product/small/dark/mode.js +3 -0
  115. package/js/es6/product/small/light/components/profile.js +1 -1
  116. package/js/es6/product/small/light/mode.d.ts +3 -0
  117. package/js/es6/product/small/light/mode.js +3 -0
  118. package/js/umd/frozenproduct/large/dark/components/profile.js +2 -2
  119. package/js/umd/frozenproduct/large/dark/mode.js +80 -0
  120. package/js/umd/frozenproduct/large/light/components/profile.js +2 -2
  121. package/js/umd/frozenproduct/large/light/mode.js +83 -0
  122. package/js/umd/frozenproduct/small/dark/components/profile.js +2 -2
  123. package/js/umd/frozenproduct/small/dark/mode.js +80 -0
  124. package/js/umd/frozenproduct/small/light/components/profile.js +2 -2
  125. package/js/umd/frozenproduct/small/light/mode.js +83 -0
  126. package/js/umd/marketing/large/dark/components/profile.js +2 -2
  127. package/js/umd/marketing/large/dark/mode.js +80 -0
  128. package/js/umd/marketing/large/light/components/profile.js +2 -2
  129. package/js/umd/marketing/large/light/mode.js +83 -0
  130. package/js/umd/marketing/small/dark/components/profile.js +2 -2
  131. package/js/umd/marketing/small/dark/mode.js +80 -0
  132. package/js/umd/marketing/small/light/components/profile.js +2 -2
  133. package/js/umd/marketing/small/light/mode.js +83 -0
  134. package/js/umd/product/large/dark/components/profile.js +2 -2
  135. package/js/umd/product/large/dark/mode.js +80 -0
  136. package/js/umd/product/large/light/components/profile.js +2 -2
  137. package/js/umd/product/large/light/mode.js +83 -0
  138. package/js/umd/product/small/dark/components/profile.js +2 -2
  139. package/js/umd/product/small/dark/mode.js +80 -0
  140. package/js/umd/product/small/light/components/profile.js +2 -2
  141. package/js/umd/product/small/light/mode.js +83 -0
  142. package/json/flat/frozenproduct/large/dark/components/profile.json +1 -1
  143. package/json/flat/frozenproduct/large/dark/mode.json +3 -0
  144. package/json/flat/frozenproduct/large/light/components/profile.json +1 -1
  145. package/json/flat/frozenproduct/large/light/mode.json +3 -0
  146. package/json/flat/frozenproduct/small/dark/components/profile.json +1 -1
  147. package/json/flat/frozenproduct/small/dark/mode.json +3 -0
  148. package/json/flat/frozenproduct/small/light/components/profile.json +1 -1
  149. package/json/flat/frozenproduct/small/light/mode.json +3 -0
  150. package/json/flat/marketing/large/dark/components/profile.json +1 -1
  151. package/json/flat/marketing/large/dark/mode.json +3 -0
  152. package/json/flat/marketing/large/light/components/profile.json +1 -1
  153. package/json/flat/marketing/large/light/mode.json +3 -0
  154. package/json/flat/marketing/small/dark/components/profile.json +1 -1
  155. package/json/flat/marketing/small/dark/mode.json +3 -0
  156. package/json/flat/marketing/small/light/components/profile.json +1 -1
  157. package/json/flat/marketing/small/light/mode.json +3 -0
  158. package/json/flat/product/large/dark/components/profile.json +1 -1
  159. package/json/flat/product/large/dark/mode.json +3 -0
  160. package/json/flat/product/large/light/components/profile.json +1 -1
  161. package/json/flat/product/large/light/mode.json +3 -0
  162. package/json/flat/product/small/dark/components/profile.json +1 -1
  163. package/json/flat/product/small/dark/mode.json +3 -0
  164. package/json/flat/product/small/light/components/profile.json +1 -1
  165. package/json/flat/product/small/light/mode.json +3 -0
  166. package/json/nested/frozenproduct/large/dark/components/profile.json +1 -1
  167. package/json/nested/frozenproduct/large/dark/mode.json +8 -3
  168. package/json/nested/frozenproduct/large/light/components/profile.json +1 -1
  169. package/json/nested/frozenproduct/large/light/mode.json +8 -3
  170. package/json/nested/frozenproduct/small/dark/components/profile.json +1 -1
  171. package/json/nested/frozenproduct/small/dark/mode.json +8 -3
  172. package/json/nested/frozenproduct/small/light/components/profile.json +1 -1
  173. package/json/nested/frozenproduct/small/light/mode.json +8 -3
  174. package/json/nested/marketing/large/dark/components/profile.json +1 -1
  175. package/json/nested/marketing/large/dark/mode.json +8 -3
  176. package/json/nested/marketing/large/light/components/profile.json +1 -1
  177. package/json/nested/marketing/large/light/mode.json +8 -3
  178. package/json/nested/marketing/small/dark/components/profile.json +1 -1
  179. package/json/nested/marketing/small/dark/mode.json +8 -3
  180. package/json/nested/marketing/small/light/components/profile.json +1 -1
  181. package/json/nested/marketing/small/light/mode.json +8 -3
  182. package/json/nested/product/large/dark/components/profile.json +1 -1
  183. package/json/nested/product/large/dark/mode.json +8 -3
  184. package/json/nested/product/large/light/components/profile.json +1 -1
  185. package/json/nested/product/large/light/mode.json +8 -3
  186. package/json/nested/product/small/dark/components/profile.json +1 -1
  187. package/json/nested/product/small/dark/mode.json +8 -3
  188. package/json/nested/product/small/light/components/profile.json +1 -1
  189. package/json/nested/product/small/light/mode.json +8 -3
  190. package/package.json +1 -1
  191. package/sage-design-tokens-7.2.0.tgz +0 -0
  192. package/scss/frozenproduct/large/components/button.scss +23 -23
  193. package/scss/frozenproduct/large/components/container.scss +9 -9
  194. package/scss/frozenproduct/large/components/form.scss +7 -7
  195. package/scss/frozenproduct/large/components/link.scss +2 -2
  196. package/scss/frozenproduct/large/components/nav.scss +3 -3
  197. package/scss/frozenproduct/large/components/page.scss +1 -1
  198. package/scss/frozenproduct/large/components/popover.scss +2 -2
  199. package/scss/frozenproduct/large/components/profile.scss +1 -1
  200. package/scss/frozenproduct/large/components/progress.scss +6 -6
  201. package/scss/frozenproduct/large/components/status.scss +3 -3
  202. package/scss/frozenproduct/large/components/tab.scss +7 -7
  203. package/scss/frozenproduct/large/components/table.scss +10 -10
  204. package/scss/frozenproduct/large/dark.scss +3 -0
  205. package/scss/frozenproduct/large/light.scss +3 -0
  206. package/scss/frozenproduct/small/components/button.scss +23 -23
  207. package/scss/frozenproduct/small/components/container.scss +9 -9
  208. package/scss/frozenproduct/small/components/form.scss +7 -7
  209. package/scss/frozenproduct/small/components/link.scss +2 -2
  210. package/scss/frozenproduct/small/components/nav.scss +3 -3
  211. package/scss/frozenproduct/small/components/page.scss +1 -1
  212. package/scss/frozenproduct/small/components/popover.scss +2 -2
  213. package/scss/frozenproduct/small/components/profile.scss +1 -1
  214. package/scss/frozenproduct/small/components/progress.scss +6 -6
  215. package/scss/frozenproduct/small/components/status.scss +3 -3
  216. package/scss/frozenproduct/small/components/tab.scss +7 -7
  217. package/scss/frozenproduct/small/components/table.scss +10 -10
  218. package/scss/frozenproduct/small/dark.scss +3 -0
  219. package/scss/frozenproduct/small/light.scss +3 -0
  220. package/scss/marketing/large/components/profile.scss +1 -1
  221. package/scss/marketing/large/dark.scss +3 -0
  222. package/scss/marketing/large/light.scss +3 -0
  223. package/scss/marketing/small/components/button.scss +23 -23
  224. package/scss/marketing/small/components/container.scss +9 -9
  225. package/scss/marketing/small/components/form.scss +7 -7
  226. package/scss/marketing/small/components/link.scss +2 -2
  227. package/scss/marketing/small/components/nav.scss +3 -3
  228. package/scss/marketing/small/components/page.scss +1 -1
  229. package/scss/marketing/small/components/popover.scss +2 -2
  230. package/scss/marketing/small/components/profile.scss +1 -1
  231. package/scss/marketing/small/components/progress.scss +6 -6
  232. package/scss/marketing/small/components/status.scss +3 -3
  233. package/scss/marketing/small/components/tab.scss +7 -7
  234. package/scss/marketing/small/components/table.scss +10 -10
  235. package/scss/marketing/small/dark.scss +3 -0
  236. package/scss/marketing/small/light.scss +3 -0
  237. package/scss/product/large/components/profile.scss +1 -1
  238. package/scss/product/large/dark.scss +3 -0
  239. package/scss/product/large/light.scss +3 -0
  240. package/scss/product/small/components/profile.scss +1 -1
  241. package/scss/product/small/dark.scss +3 -0
  242. package/scss/product/small/light.scss +3 -0
  243. package/sage-design-tokens-7.1.7.tgz +0 -0
@@ -22,9 +22,6 @@ $button-color-ai-border-hover: $modes-color-interactive-ai-default;
22
22
  $button-color-destructive-primary-bg-enabled: $modes-color-interactive-danger-default;
23
23
  $button-color-destructive-secondary-border-enabled: $modes-color-interactive-danger-default;
24
24
  $button-color-destructive-secondary-label-enabled: $modes-color-interactive-danger-default;
25
- $button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
26
- $button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
27
- $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
28
25
  $button-typography-adaptive-primary-s: $global-typography-adaptive-component-firm-s;
29
26
  $button-typography-adaptive-primary-m: $global-typography-adaptive-component-firm-m;
30
27
  $button-typography-adaptive-primary-l: $global-typography-adaptive-component-firm-l;
@@ -49,34 +46,24 @@ $button-typography-responsive-tertiary-l: $global-typography-responsive-componen
49
46
  $button-typography-responsive-subtle-s: $global-typography-responsive-component-firm-s;
50
47
  $button-typography-responsive-subtle-m: $global-typography-responsive-component-firm-m;
51
48
  $button-typography-responsive-subtle-l: $global-typography-responsive-component-firm-l;
52
- $button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
53
49
  $button-color-ai-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
54
50
  $button-color-destructive-primary-bg-hover: $modes-color-interactive-danger-hover;
55
51
  $button-color-destructive-secondary-border-hover: $modes-color-interactive-danger-hover;
56
52
  $button-color-destructive-secondary-label-hover: $modes-color-interactive-danger-hover;
57
53
  $button-color-typical-primary-bg-enabled: $modes-color-interactive-primary-default;
58
54
  $button-color-typical-secondary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
59
- $button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
60
- $button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
61
- $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
55
+ $button-color-typical-secondary-border-active: $modes-color-interactive-monochrome-generic-active;
62
56
  $button-color-typical-secondary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
63
57
  $button-color-typical-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
64
- $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default;
65
58
  $button-color-typical-subtle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
66
59
  $button-color-typical-tertiary-bg-enabled: $button-color-none;
67
60
  $button-color-typical-tertiary-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
68
- $button-color-typical-tertiary-border-enabled: $modes-color-interactive-monochrome-generic-default-alt2;
69
- $button-color-typical-tertiary-border-hover: $modes-color-interactive-monochrome-generic-default;
70
- $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
61
+ $button-color-typical-tertiary-border-active: $modes-color-interactive-monochrome-generic-active;
71
62
  $button-color-typical-tertiary-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
63
+ $button-color-typical-toggle-bg-active: $modes-color-interactive-monochrome-generic-active;
72
64
  $button-color-typical-toggle-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
73
- $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
74
- $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
75
65
  $button-color-typical-toggle-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
76
66
  $button-color-video-bg-blur: $modes-color-interactive-monochrome-generic-hover-alt;
77
- $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
78
- $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
79
- $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
80
67
  $button-size-split: $global-size-micro-xxs; // Split button (divider width)
81
68
  $button-size-s: $global-size-macro-s; // min-height on S Buttons
82
69
  $button-size-m: $global-size-macro-m; // min-height on M Buttons
@@ -166,8 +153,8 @@ $button-space-toggle-container-y-l: $global-space-micro-s; // Vertical padding
166
153
  $button-space-video-x-s: $global-space-micro-xs; // Left padding on play icon in video button
167
154
  $button-space-video-x-m: $global-space-micro-xs; // Left padding on play icon in video button
168
155
  $button-space-video-x-l: $global-space-micro-xs; // Left padding on play icon in video button
169
- $button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
170
156
  $button-color-ai-label-disabled: $modes-color-interactive-inactive-content;
157
+ $button-color-ai-label-enabled: $modes-color-interactive-monochrome-generic-default;
171
158
  $button-color-destructive-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
172
159
  $button-color-destructive-primary-label-enabled: $modes-color-interactive-danger-with-default;
173
160
  $button-color-destructive-primary-label-hover: $modes-color-interactive-danger-with-default;
@@ -180,24 +167,30 @@ $button-color-typical-primary-label-active: $modes-color-interactive-primary-wit
180
167
  $button-color-typical-primary-label-disabled: $modes-color-interactive-inactive-content-alt;
181
168
  $button-color-typical-primary-label-enabled: $modes-color-interactive-primary-with-default;
182
169
  $button-color-typical-primary-label-hover: $modes-color-interactive-primary-with-default;
183
- $button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
184
- $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
170
+ $button-color-typical-secondary-border-enabled: $modes-color-interactive-monochrome-generic-default;
171
+ $button-color-typical-secondary-border-hover: $modes-color-interactive-monochrome-generic-default;
185
172
  $button-color-typical-secondary-label-disabled: $modes-color-interactive-inactive-content;
186
- $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
187
- $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
173
+ $button-color-typical-secondary-label-enabled: $modes-color-interactive-monochrome-generic-default;
188
174
  $button-color-typical-subtle-label-disabled: $modes-color-interactive-inactive-content;
189
- $button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
190
- $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
175
+ $button-color-typical-subtle-label-enabled: $modes-color-interactive-monochrome-generic-default;
176
+ $button-color-typical-tertiary-border-enabled: $modes-color-interactive-monochrome-generic-default-alt2;
177
+ $button-color-typical-tertiary-border-hover: $modes-color-interactive-monochrome-generic-default;
191
178
  $button-color-typical-tertiary-label-disabled: $modes-color-interactive-inactive-content;
179
+ $button-color-typical-tertiary-label-enabled: $modes-color-interactive-monochrome-generic-default;
192
180
  $button-color-typical-toggle-label-active-disabled: $modes-color-interactive-inactive-content-alt;
181
+ $button-color-typical-toggle-border-enabled: $modes-color-interactive-monochrome-generic-default;
193
182
  $button-color-typical-toggle-label-active: $modes-color-interactive-monochrome-generic-with-active;
194
183
  $button-color-typical-toggle-label-disabled: $modes-color-interactive-inactive-content;
184
+ $button-color-typical-toggle-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
195
185
  $button-color-video-primary-bg-enabled: $modes-color-interactive-monochrome-generic-with-default;
196
186
  $button-color-video-primary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
187
+ $button-color-video-primary-label-enabled: $modes-color-interactive-monochrome-generic-default;
188
+ $button-color-video-primary-label-hover: $modes-color-interactive-monochrome-generic-default;
197
189
  $button-color-video-secondary-bg-hover: $modes-color-interactive-monochrome-generic-with-default;
198
190
  $button-color-video-secondary-border-enabled: $modes-color-interactive-monochrome-generic-with-default;
199
191
  $button-color-video-secondary-border-hover: $modes-color-interactive-monochrome-generic-with-default;
200
192
  $button-color-video-secondary-label-enabled: $modes-color-interactive-monochrome-generic-with-default;
193
+ $button-color-video-secondary-label-hover: $modes-color-interactive-monochrome-generic-default;
201
194
  $button-radius-s: $global-radius-interactive-l; // Buttons S (typical and destructive, and inc bar, split and multi), Button toggle M (parent container)
202
195
  $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)
203
196
  $button-radius-l: $global-radius-interactive-xxl; // Buttons L (typical and destructive, and inc bar, split and multi), Button toggle L (parent container)
@@ -219,10 +212,17 @@ $button-borderwidth-secondary: $global-borderwidth-s; // Secondary button.
219
212
  $button-borderwidth-tertiary: $global-borderwidth-xs; // tertiary button border
220
213
  $button-borderwidth-togglecontainer: $global-borderwidth-xs; // Toggle container
221
214
  $button-color-ai-border-disabled: $modes-color-interactive-inactive-default;
215
+ $button-color-ai-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
222
216
  $button-color-destructive-primary-bg-disabled: $modes-color-interactive-inactive-default;
223
217
  $button-color-destructive-secondary-border-disabled: $modes-color-interactive-inactive-default;
224
218
  $button-color-typical-primary-bg-disabled: $modes-color-interactive-inactive-default;
219
+ $button-color-typical-secondary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
225
220
  $button-color-typical-secondary-border-disabled: $modes-color-interactive-inactive-default;
221
+ $button-color-typical-secondary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
222
+ $button-color-typical-subtle-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
223
+ $button-color-typical-subtle-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
224
+ $button-color-typical-tertiary-bg-active: $modes-color-interactive-monochrome-generic-active-alt;
226
225
  $button-color-typical-tertiary-bg-active-disabled: $modes-color-interactive-inactive-default;
227
226
  $button-color-typical-tertiary-border-disabled: $modes-color-interactive-inactive-default;
227
+ $button-color-typical-tertiary-label-active: $modes-color-interactive-monochrome-generic-with-active-alt;
228
228
  $button-color-typical-toggle-bg-active-disabled: $modes-color-interactive-inactive-default;
@@ -12,20 +12,15 @@ $container-radius-blockquote-bar: $global-radius-circle; // radius for blockquot
12
12
  $container-radius-scrollbar: $global-radius-circle; // Scrollbar
13
13
  $container-opacity-carousel-hidden: $modes-color-modifiers-input-disabled-fg; // opacity applied to next and previous carousel slides
14
14
  $container-color-standard-bg-default: $modes-color-generic-bg-nought;
15
- $container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
16
15
  $container-color-ai-borderhorizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI dialog component
17
16
  $container-color-ai-bordervertical: $modes-color-status-ai-default-vertical; // left and right border for dialog and insight bubbles.
18
17
  $container-color-ai-nudge-border-ai-horizontal: $modes-color-status-ai-default-horizontal; // top and bottom border for AI nudge message component
19
18
  $container-color-ai-nudge-border-ai-vertical: $modes-color-status-ai-default-vertical; // left and right border for AI nudge message component
20
19
  $container-color-interactive-detailedicon-bg: $modes-color-custom-default; //
21
20
  $container-color-interactive-bg-footer-activated: $modes-color-status-positive-default; //
22
- $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
23
21
  $container-color-interactive-border-activated: $modes-color-status-positive-default;
24
22
  $container-color-interactive-bg-footer-default: $modes-color-generic-bg-nought; // tile footer bg color
25
23
  $container-color-interactive-bg-enabled: $modes-color-generic-bg-nought;
26
- $container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
27
- $container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
28
- $container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
29
24
  $container-typography-adaptive-heading-m: $global-typography-adaptive-heading-s; // Accordion, Subscription tile, Tile select and generic tile or card headings
30
25
  $container-typography-adaptive-heading-l: $global-typography-adaptive-heading-m; // Dialog, drawer and sidebar headings
31
26
  $container-typography-adaptive-subheading-m: $global-typography-adaptive-subheading-m; // Accordion subheading, Step flow subheading, tile select subheading, dialog, drawer and sidebar subheading
@@ -46,17 +41,18 @@ $container-typography-responsive-paragraph-m: $global-typography-responsive-comp
46
41
  $container-typography-responsive-paragraph-l: $global-typography-responsive-component-moderate-l;
47
42
  $container-color-standard-bg-alt: $modes-color-generic-bg-faint;
48
43
  $container-color-standard-bg-footer-default: $modes-color-generic-bg-faint; // tile footer bg color
44
+ $container-color-standard-border-active: $modes-color-interactive-monochrome-generic-active;
49
45
  $container-color-standard-dimmer: $modes-color-interactive-inactive-mask; // dimmed mask for dialogs
50
46
  $container-color-standard-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
51
47
  $container-color-standard-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
52
48
  $container-color-scrollbar-bg-default: $modes-color-generic-bg-faint;
49
+ $container-color-interactive-bg-footer-active: $modes-color-interactive-monochrome-generic-active;
53
50
  $container-color-interactive-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // Used for accordion hover backgrounds
54
- $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
55
- $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
56
- $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
51
+ $container-color-interactive-border-active: $modes-color-interactive-monochrome-generic-active;
52
+ $container-color-interactive-icon-active: $modes-color-interactive-monochrome-generic-active; // Active chevron for any accordion.
53
+ $container-color-interactive-text-active: $modes-color-interactive-monochrome-generic-active; // Active label for any accordion.
57
54
  $container-color-interactive-text-enabled: $modes-color-generic-content-harsh; // Enabled label for standard accordion.
58
55
  $container-color-interactive-text-alt-enabled: $modes-color-generic-content-moderate; // Enabled label for subtle accordion.
59
- $container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
60
56
  $container-color-blockquote-border: $modes-color-interactive-primary-default;
61
57
  $container-boxshadow-card-enabled: $global-boxshadow-interactive-enabled; // Card (enabled)
62
58
  $container-boxshadow-card-hover: $global-boxshadow-interactive-hover; // Card (hover state)
@@ -76,9 +72,13 @@ $container-color-interactive-bg-disabled: $modes-color-interactive-inactive-defa
76
72
  $container-color-interactive-border-alt: $modes-color-generic-fg-delicate; // Link preview.
77
73
  $container-color-interactive-border-inactive: $modes-color-generic-fg-soft;
78
74
  $container-color-interactive-border-enabled: $modes-color-generic-fg-moderate;
75
+ $container-color-interactive-icon-enabled: $modes-color-interactive-monochrome-generic-default; // Enabled chevron for any accordion.
76
+ $container-color-interactive-icon-alt-enabled: $modes-color-interactive-monochrome-generic-default-alt; // Enabled label for subtle accordion.
77
+ $container-color-interactive-icon-hover: $modes-color-interactive-monochrome-generic-default; // Hover chevron for any accordion.
79
78
  $container-color-interactive-label-footer-active: $modes-color-interactive-monochrome-generic-with-active;
80
79
  $container-color-interactive-label-footer-activated: $modes-color-interactive-monochrome-generic-with-active;
81
80
  $container-color-interactive-text-disabled: $modes-color-interactive-inactive-content;
81
+ $container-color-interactive-text-hover: $modes-color-interactive-monochrome-generic-default; // Hover label for any accordion.
82
82
  $container-size-none: $global-size-none;
83
83
  $container-size-accordionstandard-chevron: $global-size-icon-m; // Accordion chevron container
84
84
  $container-size-quotebar-width: $global-size-micro-m; // block quote bar width
@@ -13,10 +13,7 @@ $form-radius-radio: $global-radius-circle; // Radio button
13
13
  $form-radius-switch: $global-radius-circle; // Switch container and handle
14
14
  $form-radius-calendar-none: $global-radius-none; // Calendar (start and end duration)
15
15
  $form-radius-calendar-date: $global-radius-circle; // Calendar date (hover & selected),
16
- $form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
17
- $form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
18
16
  $form-color-labelset-label-required: $modes-color-interactive-danger-default;
19
- $form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
20
17
  $form-color-validation-border-error: $modes-color-status-negative-default;
21
18
  $form-color-validation-bar-error: $modes-color-status-negative-default; // error bar to left of inputs
22
19
  $form-color-validation-bar-warning: $modes-color-status-caution-default; // warning bar to left of inputs
@@ -35,10 +32,10 @@ $form-typography-responsive-label-l: $global-typography-responsive-component-fir
35
32
  $form-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
36
33
  $form-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
37
34
  $form-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
35
+ $form-color-calendar-bg-active: $modes-color-interactive-monochrome-generic-active;
38
36
  $form-color-calendar-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
37
+ $form-color-calendar-border-duration: $modes-color-interactive-monochrome-generic-active;
39
38
  $form-color-calendar-text-hover: $modes-color-interactive-monochrome-generic-with-hover;
40
- $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
41
- $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
42
39
  $form-color-dropdown-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
43
40
  $form-color-typical-bg-default: $modes-color-interactive-data-entry-default;
44
41
  $form-color-typical-bg-enabled: $modes-color-interactive-data-entry-default;
@@ -47,9 +44,8 @@ $form-color-typical-icon-active: $modes-color-interactive-data-entry-with-active
47
44
  $form-color-typical-icon-hover: $modes-color-interactive-data-entry-with-hover;
48
45
  $form-color-typical-text-hover: $modes-color-interactive-data-entry-with-hover; // text hover state when dragging a file over file input
49
46
  $form-color-typical-text-read-only: $modes-color-generic-content-harsh;
47
+ $form-color-switch-bg-active: $modes-color-interactive-monochrome-generic-active;
50
48
  $form-color-switch-bg-enabled: $modes-color-interactive-data-entry-default; // for switch
51
- $form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
52
- $form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
53
49
  $form-space-none: $global-space-none;
54
50
  $form-space-calendar-x-m: $global-space-macro-m;
55
51
  $form-space-calendar-y-m: $global-space-macro-m;
@@ -225,7 +221,9 @@ $form-color-calendar-text-enabled: $modes-color-interactive-data-entry-content;
225
221
  $form-color-calendar-text-alt-enabled: $modes-color-interactive-data-entry-content-alt;
226
222
  $form-color-dropdown-bg-hover: $popover-color-bg-hover; // REF POPOVER
227
223
  $form-color-dropdown-label-active: $modes-color-interactive-monochrome-generic-with-active;
224
+ $form-color-dropdown-label-alt: $modes-color-interactive-monochrome-generic-default;
228
225
  $form-color-dropdown-label-disabled: $modes-color-interactive-inactive-content;
226
+ $form-color-dropdown-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
229
227
  $form-color-labelset-label-default: $modes-color-interactive-data-entry-content;
230
228
  $form-color-labelset-label-alt: $modes-color-interactive-data-entry-content-alt; // used for '(optional)' text and hint text.
231
229
  $form-color-labelset-label-disabled: $modes-color-interactive-inactive-content;
@@ -245,8 +243,10 @@ $form-color-typical-text-default: $modes-color-interactive-data-entry-content;
245
243
  $form-color-typical-text-disabled: $modes-color-interactive-inactive-content;
246
244
  $form-color-typical-text-enabled: $modes-color-interactive-data-entry-content; // Dropdown text (subtle dropdown).
247
245
  $form-color-switch-bg-disabled: $modes-color-interactive-inactive-default-alt; // for switch
246
+ $form-color-switch-border-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
248
247
  $form-color-switch-fg-active: $modes-color-interactive-monochrome-generic-with-active;
249
248
  $form-color-switch-fg-activedisabled: $modes-color-interactive-inactive-content-alt;
249
+ $form-color-switch-fg-enabled: $modes-color-interactive-monochrome-subtle-default-alt;
250
250
  $form-color-switch-label-active: $modes-color-interactive-data-entry-content;
251
251
  $form-color-switch-label-enabled: $modes-color-interactive-data-entry-content-alt;
252
252
  $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-generic-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.
@@ -19,10 +18,11 @@ $link-typography-adaptive-heading-s: $global-typography-adaptive-component-under
19
18
  $link-typography-adaptive-heading-m: $global-typography-adaptive-component-underlined-firm-m;
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
- $link-color-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
21
+ $link-color-subtle-label-hover: $modes-color-interactive-monochrome-generic-active;
23
22
  $link-boxshadow-skiplink: $global-boxshadow-container-near;
24
23
  $link-color-destructive-label-hover: $modes-color-interactive-danger-hover-alt2;
25
24
  $link-color-typical-label-default: $modes-color-interactive-primary-default-alt;
25
+ $link-color-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
26
26
  $link-size-skiplink-m: $global-size-macro-m;
27
27
  $link-size-icon-m: $global-size-icon-m;
28
28
  $link-radius-link: $global-radius-interactive-xs; // Link (focus bg and bottom corners of focus underline)
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $nav-color-bg-default: $modes-color-generic-bg-nought; // nav bar bg
9
- $nav-color-item-bg-active: $modes-color-interactive-monochrome-generic-active;
10
9
  $nav-color-item-bg-enabled: $modes-color-none;
11
10
  $nav-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
12
11
  $nav-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -20,17 +19,18 @@ $nav-typography-responsive-label-l: $global-typography-responsive-component-firm
20
19
  $nav-typography-responsive-default-s: $global-typography-responsive-component-moderate-s;
21
20
  $nav-typography-responsive-default-m: $global-typography-responsive-component-moderate-m;
22
21
  $nav-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
22
+ $nav-color-item-bg-active: $modes-color-interactive-monochrome-generic-active;
23
23
  $nav-color-item-bg-activealt: $modes-color-interactive-monochrome-generic-hover-alt;
24
24
  $nav-color-item-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt;
25
25
  $nav-color-item-label-activealt: $modes-color-interactive-monochrome-generic-with-hover;
26
- $nav-color-item-label-enabled: $modes-color-interactive-monochrome-generic-default;
27
26
  $nav-color-item-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
28
- $nav-color-item-label-alt: $modes-color-interactive-monochrome-generic-default-alt;
29
27
  $nav-color-menu-bg-default: $modes-color-generic-bg-faint; // menu (level 1) nav bg
30
28
  $nav-color-menu-bg-alt: $modes-color-generic-bg-delicate; // level 2 nav bg
31
29
  $nav-color-menu-bg-alt2: $modes-color-generic-bg-soft; // level 3 nav bg
32
30
  $nav-boxshadow-menu: $global-boxshadow-cleanedge-near; // Menu
33
31
  $nav-color-item-label-active: $modes-color-interactive-monochrome-generic-with-active;
32
+ $nav-color-item-label-enabled: $modes-color-interactive-monochrome-generic-default;
33
+ $nav-color-item-label-alt: $modes-color-interactive-monochrome-generic-default-alt;
34
34
  $nav-color-menu-border-default: $modes-color-generic-fg-delicate; // level 1 border
35
35
  $nav-radius-menu: $global-radius-interactive-m; // Drop list bottom corners, product popout list all corners
36
36
  $nav-radius-menuitem: $global-radius-interactive-s; // Menu (menu item state bg shape),
@@ -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;
@@ -21,6 +20,7 @@ $page-typography-adaptive-h4: $global-typography-adaptive-subheading-l;
21
20
  $page-typography-adaptive-h5: $global-typography-adaptive-subheading-m;
22
21
  $page-typography-adaptive-p-typical: $global-typography-adaptive-body-s;
23
22
  $page-typography-adaptive-p-large: $global-typography-adaptive-body-s;
23
+ $page-color-bg-alt: $modes-color-generic-backdrop-faint;
24
24
  $page-color-text-alt: $modes-color-generic-content-moderate; // for subheadings etc
25
25
  $page-color-text-default: $modes-color-generic-content-harsh; // for headings, paragraph text etc
26
26
  $page-space-x-l: $global-space-macro-xl;
@@ -6,7 +6,6 @@
6
6
  // Do not edit directly, this file was auto-generated.
7
7
 
8
8
  $popover-radius-none: $global-radius-none; // Navigation menu top corners
9
- $popover-color-bg-active: $modes-color-interactive-monochrome-generic-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-generic-active; // previously action minor 850
24
24
  $popover-color-bg-activealt: $modes-color-interactive-monochrome-generic-hover-alt; // REF'D IN FORM.
25
25
  $popover-color-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // REF'D IN FORM.
26
26
  $popover-color-label-activealt: $modes-color-interactive-monochrome-generic-with-hover;
27
27
  $popover-color-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
28
- $popover-color-label-enabled: $modes-color-interactive-monochrome-generic-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.
@@ -53,3 +52,4 @@ $popover-space-submenu-x-m: $global-space-macro-xs; // Right left padding on sma
53
52
  $popover-space-submenu-x-l: $global-space-macro-xs; // Right left padding on small screen submenu popover container.
54
53
  $popover-color-label-active: $modes-color-interactive-monochrome-generic-with-active;
55
54
  $popover-color-label-disabled: $modes-color-interactive-inactive-content;
55
+ $popover-color-label-enabled: $modes-color-interactive-monochrome-generic-default-alt;
@@ -61,7 +61,7 @@ $profile-size-inside-m: $global-size-macro-xs - $global-size-micro-xs; // M Port
61
61
  $profile-size-inside-ml: $global-size-macro-xs + $global-size-micro-xs; // L Portrait icons
62
62
  $profile-size-inside-l: $global-size-macro-m; // XL Portrait icons
63
63
  $profile-size-inside-xl: $global-size-macro-xl; // XL Portrait icons
64
- $profile-size-inside-xxl: $global-size-micro-m * 13; // XXL Portraits
64
+ $profile-size-inside-xxl: $global-size-micro-m * 9; // XXL Portraits
65
65
  $profile-color-border-default: $modes-color-generic-fg-delicate;
66
66
  $profile-space-none: $global-space-none;
67
67
  $profile-space-x-s: $global-space-macro-xs; // gap between avatar and name
@@ -25,19 +25,13 @@ $progress-radius-skeleton-circle: $global-radius-circle; // Used to represent ci
25
25
  $progress-color-fg-ai: $modes-color-interactive-ai-default; // For progress ring in ai buttons
26
26
  $progress-color-fg-alt: $modes-color-status-positive-default;
27
27
  $progress-color-fg-caution: $modes-color-status-caution-default;
28
- $progress-color-fg-default: $modes-color-interactive-monochrome-generic-active;
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-generic-default;
32
- $progress-color-loader-fg-default: $modes-color-interactive-monochrome-generic-active; // used for loader standard loader spinner
33
31
  $progress-color-loader-fg-error: $modes-color-status-negative-default;
34
32
  $progress-color-loader-fg-complete: $modes-color-status-positive-default;
35
- $progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-generic-active;
36
33
  $progress-color-stepflow-bg-complete: $modes-color-status-positive-default;
37
- $progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-generic-active;
38
- $progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-generic-active;
39
34
  $progress-color-stepindicator-bg-complete: $modes-color-status-positive-default;
40
- $progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-generic-active;
41
35
  $progress-color-stepindicator-border-success: $modes-color-status-positive-default;
42
36
  $progress-typography-adaptive-label-s: $global-typography-adaptive-component-firm-s;
43
37
  $progress-typography-adaptive-label-m: $global-typography-adaptive-component-firm-m;
@@ -53,14 +47,20 @@ $progress-typography-responsive-default-m: $global-typography-responsive-compone
53
47
  $progress-typography-responsive-default-l: $global-typography-responsive-component-moderate-l;
54
48
  $progress-color-bg-default: $modes-color-interactive-progress-bg;
55
49
  $progress-color-fg-alt2: $modes-color-generic-content-firm;
50
+ $progress-color-fg-default: $modes-color-interactive-monochrome-generic-active;
56
51
  $progress-color-label-alt: $modes-color-generic-content-firm;
57
52
  $progress-color-label-default: $modes-color-generic-content-harsh;
58
53
  $progress-color-loader-bg-default: $modes-color-interactive-progress-bg;
59
54
  $progress-color-loader-bg-alt: $modes-color-interactive-progress-bg-alt; // used for inverse loader bgs
55
+ $progress-color-loader-fg-default: $modes-color-interactive-monochrome-generic-active; // used for loader standard loader spinner
56
+ $progress-color-stepflow-bg-active: $modes-color-interactive-monochrome-generic-active;
60
57
  $progress-color-stepflow-bg-default: $modes-color-generic-fg-nought;
61
58
  $progress-color-stepflow-border-active-inner: $modes-color-generic-fg-nought;
59
+ $progress-color-stepflow-border-active-outer: $modes-color-interactive-monochrome-generic-active;
62
60
  $progress-color-stepflow-label-alt: $modes-color-generic-content-firm;
63
61
  $progress-color-stepflow-label-default: $modes-color-generic-content-harsh;
62
+ $progress-color-stepindicator-bg-active: $modes-color-interactive-monochrome-generic-active;
63
+ $progress-color-stepindicator-border-active-outer: $modes-color-interactive-monochrome-generic-active;
64
64
  $progress-color-stepindicator-label-default: $modes-color-generic-content-harsh;
65
65
  $progress-size-bar-s: $global-size-micro-xs; // S loader bar
66
66
  $progress-size-bar-m: $global-size-micro-m; // M progress tracker bar, M loader bar
@@ -7,6 +7,7 @@
7
7
 
8
8
  $status-radius-none: $global-radius-none; // Pill (embedded element inner corners)
9
9
  $status-color-none: $modes-color-none; // transparent override used for hiding colors when needed.
10
+ $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
10
11
  $status-color-message-global-info-bg-default: $modes-color-status-info-default-alt; // Global message bg
11
12
  $status-color-message-global-info-icon: $modes-color-status-info-default; // Icon on tinted bgs
12
13
  $status-color-message-global-warning-bg-default: $modes-color-status-caution-default-alt; // Global message bg
@@ -14,6 +15,7 @@ $status-color-message-global-warning-icon: $modes-color-status-caution-default;
14
15
  $status-color-message-contextual-bg: $modes-color-generic-bg-nought;
15
16
  $status-color-message-contextual-icon: $modes-color-generic-bg-nought; // decorative icon on standard contextual messages
16
17
  $status-color-message-contextual-ai-bg-alt: $modes-color-status-neutral-default-alt;
18
+ $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
17
19
  $status-color-message-contextual-error-bg-default: $modes-color-status-negative-default;
18
20
  $status-color-message-contextual-error-bg-alt: $modes-color-status-negative-default-alt; // Subtle message bg
19
21
  $status-color-message-contextual-error-border-default: $modes-color-status-negative-default;
@@ -64,13 +66,12 @@ $status-typography-responsive-heading-s: $global-typography-responsive-component
64
66
  $status-typography-responsive-heading-m: $global-typography-responsive-component-firm-m;
65
67
  $status-typography-responsive-heading-l: $global-typography-responsive-component-firm-l;
66
68
  $status-color-message-global-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
67
- $status-color-message-global-callout-bg-default: $modes-color-status-callout-default-alt; // Global message bg
69
+ $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
68
70
  $status-color-message-global-info-bg-hover: $modes-color-status-info-hover-alt;
69
71
  $status-color-message-global-warning-bg-hover: $modes-color-status-caution-hover-alt;
70
72
  $status-color-message-contextual-text: $modes-color-status-content-with-hover-alt; // Message text.
71
73
  $status-color-message-contextual-ai-bg-default: $modes-color-status-ai-default-alt;
72
74
  $status-color-message-contextual-ai-border-default: $modes-color-status-ai-default-alt;
73
- $status-color-message-contextual-callout-bg-alt: $modes-color-status-callout-default-alt; // Subtle message bg
74
75
  $status-color-pill-error-bg-alt-hover: $modes-color-status-negative-hover-alt;
75
76
  $status-color-pill-error-bg-hover: $modes-color-status-negative-hover;
76
77
  $status-color-pill-info-bg-alt-hover: $modes-color-status-info-hover-alt;
@@ -87,7 +88,6 @@ $status-color-rating-bg-default-alt: $modes-color-status-reviews-default-alt;
87
88
  $status-color-rating-bg-hover: $modes-color-status-reviews-hover;
88
89
  $status-color-rating-border-default: $modes-color-status-reviews-default;
89
90
  $status-color-message-global-label-default: $modes-color-status-content-with-default-alt;
90
- $status-color-message-global-callout-bg-hover: $modes-color-status-callout-hover-alt; // global message bg hover
91
91
  $status-color-message-global-callout-icon: $modes-color-status-content-with-default-alt; // Icon on tinted bgs
92
92
  $status-color-message-contextual-callout-icon: $modes-color-status-content-with-default-alt;
93
93
  $status-color-pill-label-default: $modes-color-status-content-with-default;
@@ -6,9 +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-border-active: $modes-color-interactive-monochrome-generic-active;
10
- $tab-color-label-active: $modes-color-interactive-monochrome-generic-active;
11
- $tab-color-icon-active: $modes-color-interactive-monochrome-generic-active;
12
9
  $tab-color-navigation-bg-default: $modes-color-generic-bg-nought; // For previous/next buttons on responsive tabs
13
10
  $tab-color-validation-border-warning: $modes-color-status-caution-default;
14
11
  $tab-color-validation-border-error: $modes-color-status-negative-default;
@@ -22,12 +19,11 @@ $tab-typography-responsive-label-s: $global-typography-responsive-component-firm
22
19
  $tab-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
23
20
  $tab-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
24
21
  $tab-color-bg-hover: $modes-color-interactive-monochrome-generic-hover-alt; // For anchor nav, not tab.
25
- $tab-color-icon-enabled: $modes-color-interactive-monochrome-generic-default-alt;
22
+ $tab-color-border-active: $modes-color-interactive-monochrome-generic-active;
26
23
  $tab-color-icon-hover: $modes-color-interactive-monochrome-generic-with-hover;
27
- $tab-color-label-enabled: $modes-color-interactive-monochrome-generic-default;
24
+ $tab-color-label-active: $modes-color-interactive-monochrome-generic-active;
25
+ $tab-color-icon-active: $modes-color-interactive-monochrome-generic-active;
28
26
  $tab-color-label-hover: $modes-color-interactive-monochrome-generic-with-hover;
29
- $tab-color-validation-label-error: $modes-color-interactive-monochrome-generic-default-alt;
30
- $tab-color-validation-label-warning: $modes-color-interactive-monochrome-generic-default-alt;
31
27
  $tab-size-m: $global-size-macro-m; // Anchor nav, M Tab
32
28
  $tab-size-l: $global-size-macro-l; // L tab
33
29
  $tab-size-shadow-arrow: $global-size-micro-m; // Shadow width for linear gradient shadow on repsonsive tab arrows.
@@ -46,6 +42,10 @@ $tab-space-y-l: $global-space-micro-xxl; // Top bottom padding in Tab.
46
42
  $tab-color-bg-active: $modes-color-interactive-monochrome-generic-with-active;
47
43
  $tab-color-border-enabled: $modes-color-generic-fg-delicate;
48
44
  $tab-color-border-hover: $modes-color-generic-fg-moderate;
45
+ $tab-color-icon-enabled: $modes-color-interactive-monochrome-generic-default-alt;
46
+ $tab-color-label-enabled: $modes-color-interactive-monochrome-generic-default;
47
+ $tab-color-validation-label-error: $modes-color-interactive-monochrome-generic-default-alt;
48
+ $tab-color-validation-label-warning: $modes-color-interactive-monochrome-generic-default-alt;
49
49
  $tab-radius-m: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
50
50
  $tab-radius-l: $global-radius-interactive-m; // Tab horizontal - top corners. Tab vertical - left corners.
51
51
  $tab-radius-baseline-m: $global-radius-interactive-xxs;
@@ -6,7 +6,6 @@
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-row-bg-active: $modes-color-interactive-monochrome-generic-active;
10
9
  $table-color-row-bg-default: $modes-color-generic-bg-nought;
11
10
  $table-color-row-label-hover: $modes-color-generic-content-extreme;
12
11
  $table-typography-adaptive-heading-s: $global-typography-adaptive-component-firm-s;
@@ -27,30 +26,31 @@ $table-typography-responsive-default-l: $global-typography-responsive-component-
27
26
  $table-typography-responsive-label-s: $global-typography-responsive-component-firm-s;
28
27
  $table-typography-responsive-label-m: $global-typography-responsive-component-firm-m;
29
28
  $table-typography-responsive-label-l: $global-typography-responsive-component-firm-l;
30
- $table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
31
- $table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover;
32
- $table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
33
- $table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
34
- $table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default; // header alt
35
- $table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default-alt;
36
- $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
37
- $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
38
29
  $table-color-row-bg-activated: $modes-color-interactive-primary-default;
30
+ $table-color-row-bg-active: $modes-color-interactive-monochrome-generic-active;
39
31
  $table-color-row-bg-alt: $modes-color-generic-bg-delicate; // Zebra stripes
40
32
  $table-color-row-bg-alt2: $modes-color-generic-bg-soft; // Zebra stripes combined with child rows.
41
33
  $table-color-row-bg-alt3: $modes-color-generic-bg-faint; // Child rows.
42
34
  $table-color-row-bg-hover: $modes-color-generic-bg-soft;
43
35
  $table-color-row-label-default: $modes-color-generic-content-harsh;
44
36
  $table-color-footer-bg-default: $modes-color-generic-bg-soft;
45
- $table-color-footer-label-default: $modes-color-interactive-monochrome-generic-default;
46
37
  $table-boxshadow-parentrow: $global-boxshadow-container-far;
38
+ $table-color-header-subtle-bg-alt: $modes-color-interactive-monochrome-subtle-default; // header alt
39
+ $table-color-header-subtle-bg-hover: $modes-color-interactive-monochrome-generic-hover;
47
40
  $table-color-header-subtle-border-default: $modes-color-generic-fg-delicate; // Header borders
41
+ $table-color-header-subtle-label-default: $modes-color-interactive-monochrome-generic-default;
42
+ $table-color-header-subtle-label-hover: $modes-color-interactive-monochrome-generic-default;
43
+ $table-color-header-harsh-bg-alt: $modes-color-interactive-monochrome-generic-default; // header alt
44
+ $table-color-header-harsh-bg-default: $modes-color-interactive-monochrome-generic-default-alt;
45
+ $table-color-header-harsh-bg-hover: $modes-color-interactive-monochrome-generic-hover;
48
46
  $table-color-header-harsh-border-default: $modes-color-generic-fg-soft;
49
47
  $table-color-header-harsh-label-default: $modes-color-interactive-monochrome-generic-with-default;
48
+ $table-color-header-harsh-label-hover: $modes-color-interactive-monochrome-generic-default;
50
49
  $table-color-row-border-default: $modes-color-generic-fg-delicate;
51
50
  $table-color-row-label-activated: $modes-color-interactive-monochrome-generic-with-active;
52
51
  $table-color-row-label-active: $modes-color-interactive-monochrome-generic-with-active;
53
52
  $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
53
+ $table-color-footer-label-default: $modes-color-interactive-monochrome-generic-default;
54
54
  $table-radius-container: $global-radius-container-m; // Table (parent container)
55
55
  $table-borderwidth-thin: $global-borderwidth-xs; // Table border
56
56
  $table-borderwidth-thick: $global-borderwidth-s; // header border for subtle
@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #181818; // table dividers and borders
37
37
  $modes-color-generic-fg-delicate: #282828; // table dividers and borders
38
38
  $modes-color-generic-fg-soft: #4b4b4b;
39
39
  $modes-color-generic-fg-moderate: #777;
40
+ $modes-color-generic-fg-frozen-soft: #4b4b4b;
40
41
  $modes-color-generic-backdrop-nought: #000000; // used on full page backgrounds
41
42
  $modes-color-generic-backdrop-faint: #181818; // used on full page backgrounds as an alternative option
42
43
  $modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #ffffffe6;
92
93
  $modes-color-interactive-monochrome-generic-with-default: #000000;
93
94
  $modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
94
95
  $modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; // Used within frozen table
96
+ $modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; // progress tracker
95
97
  $modes-color-interactive-monochrome-marketing-with-active: #000000; // use for marketing overrides for switch handle on standard
96
98
  $modes-color-interactive-monochrome-marketing-active: #00D639; // needed for specific marketing usecase on light bg
97
99
  $modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #18232a;
115
117
  $modes-color-interactive-progress-bg: #ffffff14;
116
118
  $modes-color-interactive-progress-bg-alt: #00000014;
117
119
  $modes-color-interactive-progress-frozen-bg: #ffffff14;
120
+ $modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
118
121
  $modes-color-status-caution-default: #E04500;
119
122
  $modes-color-status-caution-default-alt: #251206; // Subtle message bg
120
123
  $modes-color-status-caution-hover: #eb6732; // used on pill hover states
@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #e8e8e8; // used for dividers
37
37
  $modes-color-generic-fg-delicate: #d1d1d1; // table dividers and borders
38
38
  $modes-color-generic-fg-soft: #a6a6a6;
39
39
  $modes-color-generic-fg-moderate: #777;
40
+ $modes-color-generic-fg-frozen-soft: #335B70; // frozen progress tracker border
40
41
  $modes-color-generic-backdrop-nought: #FFFFFF; // used on full page backgrounds
41
42
  $modes-color-generic-backdrop-faint: #f6f8f9; // used on full page backgrounds as an alternative option
42
43
  $modes-color-interactive-ai-active: linear-gradient(90deg, #13A03826 0%, #14919726 40%, #a87cfb26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #000000e6;
92
93
  $modes-color-interactive-monochrome-generic-with-default: #FFFFFF;
93
94
  $modes-color-interactive-monochrome-generic-with-hover: #000000; // maybe should be white to align with primary group logic
94
95
  $modes-color-interactive-monochrome-generic-frozen-active: #eaedf0; // Used within frozen table
96
+ $modes-color-interactive-monochrome-generic-frozen-active2: #335B70; // Frozen progress tracker
95
97
  $modes-color-interactive-monochrome-marketing-active: #000000; // needed for specific marketing usecase on light bg
96
98
  $modes-color-interactive-monochrome-marketing-with-active: #00D639; // needed for specific marketing usecase on light bg
97
99
  $modes-color-interactive-monochrome-subtle-default-alt: #00000080; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #9badb8;
115
117
  $modes-color-interactive-progress-bg: #00000014;
116
118
  $modes-color-interactive-progress-bg-alt: #ffffff14;
117
119
  $modes-color-interactive-progress-frozen-bg: #00804614;
120
+ $modes-color-interactive-progress-frozen-bg-alt: #cad3d9; // progress tracker bg
118
121
  $modes-color-status-ai-default: #FFFFFF;
119
122
  $modes-color-status-ai-default-alt: #000000; // bg for contextual message comp
120
123
  $modes-color-status-ai-default-horizontal: linear-gradient(90deg, #13A038 0%, #149197 40%, #A87CFB 90%);
@@ -61,7 +61,7 @@ $profile-size-inside-m: $global-size-macro-xs - $global-size-micro-xs; // M Port
61
61
  $profile-size-inside-ml: $global-size-macro-xs + $global-size-micro-xs; // L Portrait icons
62
62
  $profile-size-inside-l: $global-size-macro-m; // XL Portrait icons
63
63
  $profile-size-inside-xl: $global-size-macro-xl; // XL Portrait icons
64
- $profile-size-inside-xxl: $global-size-micro-m * 13; // XXL Portraits
64
+ $profile-size-inside-xxl: $global-size-micro-m * 9; // XXL Portraits
65
65
  $profile-color-border-default: $modes-color-generic-fg-delicate;
66
66
  $profile-space-none: $global-space-none;
67
67
  $profile-space-x-s: $global-space-macro-xs; // gap between avatar and name
@@ -37,6 +37,7 @@ $modes-color-generic-fg-faint: #181818; // table dividers and borders
37
37
  $modes-color-generic-fg-delicate: #282828; // table dividers and borders
38
38
  $modes-color-generic-fg-soft: #4b4b4b;
39
39
  $modes-color-generic-fg-moderate: #777;
40
+ $modes-color-generic-fg-frozen-soft: #4b4b4b;
40
41
  $modes-color-generic-backdrop-nought: #000000; // used on full page backgrounds
41
42
  $modes-color-generic-backdrop-faint: #181818; // used on full page backgrounds as an alternative option
42
43
  $modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -92,6 +93,7 @@ $modes-color-interactive-monochrome-generic-with-active-alt: #ffffffe6;
92
93
  $modes-color-interactive-monochrome-generic-with-default: #000000;
93
94
  $modes-color-interactive-monochrome-generic-with-hover: #FFFFFF;
94
95
  $modes-color-interactive-monochrome-generic-frozen-active: #FFFFFF; // Used within frozen table
96
+ $modes-color-interactive-monochrome-generic-frozen-active2: #FFFFFF; // progress tracker
95
97
  $modes-color-interactive-monochrome-marketing-with-active: #000000; // use for marketing overrides for switch handle on standard
96
98
  $modes-color-interactive-monochrome-marketing-active: #00D639; // needed for specific marketing usecase on light bg
97
99
  $modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; // border color for off switches
@@ -115,6 +117,7 @@ $modes-color-interactive-primary-frozen-table-default: #18232a;
115
117
  $modes-color-interactive-progress-bg: #ffffff14;
116
118
  $modes-color-interactive-progress-bg-alt: #00000014;
117
119
  $modes-color-interactive-progress-frozen-bg: #ffffff14;
120
+ $modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
118
121
  $modes-color-status-caution-default: #E04500;
119
122
  $modes-color-status-caution-default-alt: #251206; // Subtle message bg
120
123
  $modes-color-status-caution-hover: #eb6732; // used on pill hover states