@sage/design-tokens 15.1.0 → 15.2.1

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 (571) hide show
  1. package/css/frozenproduct/all.css +122 -118
  2. package/css/frozenproduct/large/components/badge.css +3 -3
  3. package/css/frozenproduct/large/components/button.css +32 -32
  4. package/css/frozenproduct/large/components/container.css +11 -11
  5. package/css/frozenproduct/large/components/form.css +17 -14
  6. package/css/frozenproduct/large/components/link.css +2 -2
  7. package/css/frozenproduct/large/components/nav.css +3 -3
  8. package/css/frozenproduct/large/components/popover.css +6 -6
  9. package/css/frozenproduct/large/components/progress.css +5 -5
  10. package/css/frozenproduct/large/components/status.css +25 -25
  11. package/css/frozenproduct/large/components/tab.css +7 -7
  12. package/css/frozenproduct/large/components/table.css +8 -8
  13. package/css/frozenproduct/large/dark.css +2 -1
  14. package/css/frozenproduct/large/light.css +2 -1
  15. package/css/frozenproduct/small/components/badge.css +3 -3
  16. package/css/frozenproduct/small/components/button.css +32 -32
  17. package/css/frozenproduct/small/components/container.css +11 -11
  18. package/css/frozenproduct/small/components/form.css +17 -14
  19. package/css/frozenproduct/small/components/link.css +2 -2
  20. package/css/frozenproduct/small/components/nav.css +3 -3
  21. package/css/frozenproduct/small/components/popover.css +6 -6
  22. package/css/frozenproduct/small/components/progress.css +5 -5
  23. package/css/frozenproduct/small/components/status.css +25 -25
  24. package/css/frozenproduct/small/components/tab.css +7 -7
  25. package/css/frozenproduct/small/components/table.css +8 -8
  26. package/css/frozenproduct/small/dark.css +2 -1
  27. package/css/frozenproduct/small/light.css +2 -1
  28. package/css/product/all.css +6 -2
  29. package/css/product/large/components/form.css +3 -0
  30. package/css/product/large/dark.css +2 -1
  31. package/css/product/large/light.css +2 -1
  32. package/css/product/small/components/form.css +3 -0
  33. package/css/product/small/dark.css +2 -1
  34. package/css/product/small/light.css +2 -1
  35. package/ios/frozenproduct/large/dark/components/badge.h +2 -2
  36. package/ios/frozenproduct/large/dark/components/button.h +15 -15
  37. package/ios/frozenproduct/large/dark/components/container.h +9 -9
  38. package/ios/frozenproduct/large/dark/components/form.h +13 -10
  39. package/ios/frozenproduct/large/dark/components/nav.h +2 -2
  40. package/ios/frozenproduct/large/dark/components/popover.h +2 -2
  41. package/ios/frozenproduct/large/dark/components/progress.h +2 -2
  42. package/ios/frozenproduct/large/dark/components/status.h +20 -20
  43. package/ios/frozenproduct/large/dark/components/tab.h +5 -5
  44. package/ios/frozenproduct/large/dark/components/table.h +8 -8
  45. package/ios/frozenproduct/large/dark/mode.h +2 -1
  46. package/ios/frozenproduct/large/light/components/badge.h +2 -2
  47. package/ios/frozenproduct/large/light/components/button.h +30 -30
  48. package/ios/frozenproduct/large/light/components/container.h +11 -11
  49. package/ios/frozenproduct/large/light/components/form.h +17 -14
  50. package/ios/frozenproduct/large/light/components/link.h +2 -2
  51. package/ios/frozenproduct/large/light/components/nav.h +3 -3
  52. package/ios/frozenproduct/large/light/components/popover.h +6 -6
  53. package/ios/frozenproduct/large/light/components/progress.h +5 -5
  54. package/ios/frozenproduct/large/light/components/status.h +25 -25
  55. package/ios/frozenproduct/large/light/components/tab.h +6 -6
  56. package/ios/frozenproduct/large/light/components/table.h +8 -8
  57. package/ios/frozenproduct/large/light/mode.h +2 -1
  58. package/ios/frozenproduct/small/dark/components/badge.h +2 -2
  59. package/ios/frozenproduct/small/dark/components/button.h +15 -15
  60. package/ios/frozenproduct/small/dark/components/container.h +9 -9
  61. package/ios/frozenproduct/small/dark/components/form.h +13 -10
  62. package/ios/frozenproduct/small/dark/components/nav.h +2 -2
  63. package/ios/frozenproduct/small/dark/components/popover.h +2 -2
  64. package/ios/frozenproduct/small/dark/components/progress.h +2 -2
  65. package/ios/frozenproduct/small/dark/components/status.h +20 -20
  66. package/ios/frozenproduct/small/dark/components/tab.h +5 -5
  67. package/ios/frozenproduct/small/dark/components/table.h +8 -8
  68. package/ios/frozenproduct/small/dark/mode.h +2 -1
  69. package/ios/frozenproduct/small/light/components/badge.h +2 -2
  70. package/ios/frozenproduct/small/light/components/button.h +30 -30
  71. package/ios/frozenproduct/small/light/components/container.h +11 -11
  72. package/ios/frozenproduct/small/light/components/form.h +17 -14
  73. package/ios/frozenproduct/small/light/components/link.h +2 -2
  74. package/ios/frozenproduct/small/light/components/nav.h +3 -3
  75. package/ios/frozenproduct/small/light/components/popover.h +6 -6
  76. package/ios/frozenproduct/small/light/components/progress.h +5 -5
  77. package/ios/frozenproduct/small/light/components/status.h +25 -25
  78. package/ios/frozenproduct/small/light/components/tab.h +6 -6
  79. package/ios/frozenproduct/small/light/components/table.h +8 -8
  80. package/ios/frozenproduct/small/light/mode.h +2 -1
  81. package/ios/product/large/dark/components/form.h +3 -0
  82. package/ios/product/large/dark/mode.h +2 -1
  83. package/ios/product/large/light/components/form.h +3 -0
  84. package/ios/product/large/light/mode.h +2 -1
  85. package/ios/product/small/dark/components/button.h +51 -51
  86. package/ios/product/small/dark/components/container.h +76 -76
  87. package/ios/product/small/dark/components/form.h +50 -47
  88. package/ios/product/small/dark/components/link.h +1 -1
  89. package/ios/product/small/dark/components/nav.h +42 -42
  90. package/ios/product/small/dark/components/page.h +28 -28
  91. package/ios/product/small/dark/components/popover.h +12 -12
  92. package/ios/product/small/dark/components/profile.h +7 -7
  93. package/ios/product/small/dark/components/progress.h +5 -5
  94. package/ios/product/small/dark/components/status.h +10 -10
  95. package/ios/product/small/dark/components/tab.h +2 -2
  96. package/ios/product/small/dark/components/table.h +9 -9
  97. package/ios/product/small/dark/mode.h +2 -1
  98. package/ios/product/small/light/components/button.h +51 -51
  99. package/ios/product/small/light/components/container.h +76 -76
  100. package/ios/product/small/light/components/form.h +50 -47
  101. package/ios/product/small/light/components/link.h +1 -1
  102. package/ios/product/small/light/components/nav.h +42 -42
  103. package/ios/product/small/light/components/page.h +28 -28
  104. package/ios/product/small/light/components/popover.h +12 -12
  105. package/ios/product/small/light/components/profile.h +7 -7
  106. package/ios/product/small/light/components/progress.h +5 -5
  107. package/ios/product/small/light/components/status.h +10 -10
  108. package/ios/product/small/light/components/tab.h +2 -2
  109. package/ios/product/small/light/components/table.h +9 -9
  110. package/ios/product/small/light/mode.h +2 -1
  111. package/js/common/frozenproduct/large/dark/components/badge.js +8 -10
  112. package/js/common/frozenproduct/large/dark/components/button.js +81 -79
  113. package/js/common/frozenproduct/large/dark/components/container.js +31 -33
  114. package/js/common/frozenproduct/large/dark/components/form.d.ts +3 -0
  115. package/js/common/frozenproduct/large/dark/components/form.js +93 -40
  116. package/js/common/frozenproduct/large/dark/components/link.js +4 -4
  117. package/js/common/frozenproduct/large/dark/components/nav.js +8 -8
  118. package/js/common/frozenproduct/large/dark/components/popover.js +14 -20
  119. package/js/common/frozenproduct/large/dark/components/progress.js +12 -12
  120. package/js/common/frozenproduct/large/dark/components/status.js +78 -76
  121. package/js/common/frozenproduct/large/dark/components/tab.js +19 -19
  122. package/js/common/frozenproduct/large/dark/components/table.js +24 -28
  123. package/js/common/frozenproduct/large/dark/mode.d.ts +1 -0
  124. package/js/common/frozenproduct/large/dark/mode.js +42 -2
  125. package/js/common/frozenproduct/large/light/components/badge.js +8 -10
  126. package/js/common/frozenproduct/large/light/components/button.js +96 -94
  127. package/js/common/frozenproduct/large/light/components/container.js +33 -35
  128. package/js/common/frozenproduct/large/light/components/form.d.ts +3 -0
  129. package/js/common/frozenproduct/large/light/components/form.js +97 -44
  130. package/js/common/frozenproduct/large/light/components/link.js +6 -6
  131. package/js/common/frozenproduct/large/light/components/nav.js +9 -9
  132. package/js/common/frozenproduct/large/light/components/popover.js +18 -24
  133. package/js/common/frozenproduct/large/light/components/progress.js +15 -15
  134. package/js/common/frozenproduct/large/light/components/status.js +83 -81
  135. package/js/common/frozenproduct/large/light/components/tab.js +20 -20
  136. package/js/common/frozenproduct/large/light/components/table.js +24 -28
  137. package/js/common/frozenproduct/large/light/mode.d.ts +1 -0
  138. package/js/common/frozenproduct/large/light/mode.js +42 -2
  139. package/js/common/frozenproduct/small/dark/components/badge.js +8 -10
  140. package/js/common/frozenproduct/small/dark/components/button.js +81 -79
  141. package/js/common/frozenproduct/small/dark/components/container.js +31 -33
  142. package/js/common/frozenproduct/small/dark/components/form.d.ts +3 -0
  143. package/js/common/frozenproduct/small/dark/components/form.js +93 -40
  144. package/js/common/frozenproduct/small/dark/components/link.js +4 -4
  145. package/js/common/frozenproduct/small/dark/components/nav.js +8 -8
  146. package/js/common/frozenproduct/small/dark/components/popover.js +14 -20
  147. package/js/common/frozenproduct/small/dark/components/progress.js +12 -12
  148. package/js/common/frozenproduct/small/dark/components/status.js +78 -76
  149. package/js/common/frozenproduct/small/dark/components/tab.js +19 -19
  150. package/js/common/frozenproduct/small/dark/components/table.js +24 -28
  151. package/js/common/frozenproduct/small/dark/mode.d.ts +1 -0
  152. package/js/common/frozenproduct/small/dark/mode.js +42 -2
  153. package/js/common/frozenproduct/small/light/components/badge.js +8 -10
  154. package/js/common/frozenproduct/small/light/components/button.js +96 -94
  155. package/js/common/frozenproduct/small/light/components/container.js +33 -35
  156. package/js/common/frozenproduct/small/light/components/form.d.ts +3 -0
  157. package/js/common/frozenproduct/small/light/components/form.js +97 -44
  158. package/js/common/frozenproduct/small/light/components/link.js +6 -6
  159. package/js/common/frozenproduct/small/light/components/nav.js +9 -9
  160. package/js/common/frozenproduct/small/light/components/popover.js +18 -24
  161. package/js/common/frozenproduct/small/light/components/progress.js +15 -15
  162. package/js/common/frozenproduct/small/light/components/status.js +83 -81
  163. package/js/common/frozenproduct/small/light/components/tab.js +20 -20
  164. package/js/common/frozenproduct/small/light/components/table.js +24 -28
  165. package/js/common/frozenproduct/small/light/mode.d.ts +1 -0
  166. package/js/common/frozenproduct/small/light/mode.js +42 -2
  167. package/js/common/product/large/dark/components/form.d.ts +3 -0
  168. package/js/common/product/large/dark/components/form.js +53 -0
  169. package/js/common/product/large/dark/mode.d.ts +1 -0
  170. package/js/common/product/large/dark/mode.js +42 -2
  171. package/js/common/product/large/light/components/form.d.ts +3 -0
  172. package/js/common/product/large/light/components/form.js +53 -0
  173. package/js/common/product/large/light/mode.d.ts +1 -0
  174. package/js/common/product/large/light/mode.js +42 -2
  175. package/js/common/product/small/dark/components/button.js +51 -51
  176. package/js/common/product/small/dark/components/container.js +76 -76
  177. package/js/common/product/small/dark/components/form.d.ts +3 -0
  178. package/js/common/product/small/dark/components/form.js +100 -47
  179. package/js/common/product/small/dark/components/link.js +1 -1
  180. package/js/common/product/small/dark/components/nav.js +42 -42
  181. package/js/common/product/small/dark/components/page.js +28 -28
  182. package/js/common/product/small/dark/components/popover.js +12 -12
  183. package/js/common/product/small/dark/components/profile.js +7 -7
  184. package/js/common/product/small/dark/components/progress.js +5 -5
  185. package/js/common/product/small/dark/components/status.js +10 -10
  186. package/js/common/product/small/dark/components/tab.js +2 -2
  187. package/js/common/product/small/dark/components/table.js +9 -9
  188. package/js/common/product/small/dark/mode.d.ts +1 -0
  189. package/js/common/product/small/dark/mode.js +42 -2
  190. package/js/common/product/small/light/components/button.js +51 -51
  191. package/js/common/product/small/light/components/container.js +76 -76
  192. package/js/common/product/small/light/components/form.d.ts +3 -0
  193. package/js/common/product/small/light/components/form.js +100 -47
  194. package/js/common/product/small/light/components/link.js +1 -1
  195. package/js/common/product/small/light/components/nav.js +42 -42
  196. package/js/common/product/small/light/components/page.js +28 -28
  197. package/js/common/product/small/light/components/popover.js +12 -12
  198. package/js/common/product/small/light/components/profile.js +7 -7
  199. package/js/common/product/small/light/components/progress.js +5 -5
  200. package/js/common/product/small/light/components/status.js +10 -10
  201. package/js/common/product/small/light/components/tab.js +2 -2
  202. package/js/common/product/small/light/components/table.js +9 -9
  203. package/js/common/product/small/light/mode.d.ts +1 -0
  204. package/js/common/product/small/light/mode.js +42 -2
  205. package/js/es6/frozenproduct/large/dark/components/badge.js +2 -2
  206. package/js/es6/frozenproduct/large/dark/components/button.js +15 -15
  207. package/js/es6/frozenproduct/large/dark/components/container.js +9 -9
  208. package/js/es6/frozenproduct/large/dark/components/form.d.ts +16 -1
  209. package/js/es6/frozenproduct/large/dark/components/form.js +25 -10
  210. package/js/es6/frozenproduct/large/dark/components/nav.js +2 -2
  211. package/js/es6/frozenproduct/large/dark/components/popover.js +2 -2
  212. package/js/es6/frozenproduct/large/dark/components/progress.js +2 -2
  213. package/js/es6/frozenproduct/large/dark/components/status.js +20 -20
  214. package/js/es6/frozenproduct/large/dark/components/tab.js +5 -5
  215. package/js/es6/frozenproduct/large/dark/components/table.js +8 -8
  216. package/js/es6/frozenproduct/large/dark/mode.d.ts +1 -0
  217. package/js/es6/frozenproduct/large/dark/mode.js +2 -1
  218. package/js/es6/frozenproduct/large/light/components/badge.js +2 -2
  219. package/js/es6/frozenproduct/large/light/components/button.js +30 -30
  220. package/js/es6/frozenproduct/large/light/components/container.js +11 -11
  221. package/js/es6/frozenproduct/large/light/components/form.d.ts +16 -1
  222. package/js/es6/frozenproduct/large/light/components/form.js +29 -14
  223. package/js/es6/frozenproduct/large/light/components/link.js +2 -2
  224. package/js/es6/frozenproduct/large/light/components/nav.js +3 -3
  225. package/js/es6/frozenproduct/large/light/components/popover.js +6 -6
  226. package/js/es6/frozenproduct/large/light/components/progress.js +5 -5
  227. package/js/es6/frozenproduct/large/light/components/status.js +25 -25
  228. package/js/es6/frozenproduct/large/light/components/tab.js +6 -6
  229. package/js/es6/frozenproduct/large/light/components/table.js +8 -8
  230. package/js/es6/frozenproduct/large/light/mode.d.ts +1 -0
  231. package/js/es6/frozenproduct/large/light/mode.js +2 -1
  232. package/js/es6/frozenproduct/small/dark/components/badge.js +2 -2
  233. package/js/es6/frozenproduct/small/dark/components/button.js +15 -15
  234. package/js/es6/frozenproduct/small/dark/components/container.js +9 -9
  235. package/js/es6/frozenproduct/small/dark/components/form.d.ts +16 -1
  236. package/js/es6/frozenproduct/small/dark/components/form.js +25 -10
  237. package/js/es6/frozenproduct/small/dark/components/nav.js +2 -2
  238. package/js/es6/frozenproduct/small/dark/components/popover.js +2 -2
  239. package/js/es6/frozenproduct/small/dark/components/progress.js +2 -2
  240. package/js/es6/frozenproduct/small/dark/components/status.js +20 -20
  241. package/js/es6/frozenproduct/small/dark/components/tab.js +5 -5
  242. package/js/es6/frozenproduct/small/dark/components/table.js +8 -8
  243. package/js/es6/frozenproduct/small/dark/mode.d.ts +1 -0
  244. package/js/es6/frozenproduct/small/dark/mode.js +2 -1
  245. package/js/es6/frozenproduct/small/light/components/badge.js +2 -2
  246. package/js/es6/frozenproduct/small/light/components/button.js +30 -30
  247. package/js/es6/frozenproduct/small/light/components/container.js +11 -11
  248. package/js/es6/frozenproduct/small/light/components/form.d.ts +16 -1
  249. package/js/es6/frozenproduct/small/light/components/form.js +29 -14
  250. package/js/es6/frozenproduct/small/light/components/link.js +2 -2
  251. package/js/es6/frozenproduct/small/light/components/nav.js +3 -3
  252. package/js/es6/frozenproduct/small/light/components/popover.js +6 -6
  253. package/js/es6/frozenproduct/small/light/components/progress.js +5 -5
  254. package/js/es6/frozenproduct/small/light/components/status.js +25 -25
  255. package/js/es6/frozenproduct/small/light/components/tab.js +6 -6
  256. package/js/es6/frozenproduct/small/light/components/table.js +8 -8
  257. package/js/es6/frozenproduct/small/light/mode.d.ts +1 -0
  258. package/js/es6/frozenproduct/small/light/mode.js +2 -1
  259. package/js/es6/product/large/dark/components/form.d.ts +15 -0
  260. package/js/es6/product/large/dark/components/form.js +15 -0
  261. package/js/es6/product/large/dark/mode.d.ts +1 -0
  262. package/js/es6/product/large/dark/mode.js +2 -1
  263. package/js/es6/product/large/light/components/form.d.ts +15 -0
  264. package/js/es6/product/large/light/components/form.js +15 -0
  265. package/js/es6/product/large/light/mode.d.ts +1 -0
  266. package/js/es6/product/large/light/mode.js +2 -1
  267. package/js/es6/product/small/dark/components/button.js +51 -51
  268. package/js/es6/product/small/dark/components/container.js +76 -76
  269. package/js/es6/product/small/dark/components/form.d.ts +15 -0
  270. package/js/es6/product/small/dark/components/form.js +62 -47
  271. package/js/es6/product/small/dark/components/link.js +1 -1
  272. package/js/es6/product/small/dark/components/nav.js +42 -42
  273. package/js/es6/product/small/dark/components/page.js +28 -28
  274. package/js/es6/product/small/dark/components/popover.js +12 -12
  275. package/js/es6/product/small/dark/components/profile.js +7 -7
  276. package/js/es6/product/small/dark/components/progress.js +5 -5
  277. package/js/es6/product/small/dark/components/status.js +10 -10
  278. package/js/es6/product/small/dark/components/tab.js +2 -2
  279. package/js/es6/product/small/dark/components/table.js +9 -9
  280. package/js/es6/product/small/dark/mode.d.ts +1 -0
  281. package/js/es6/product/small/dark/mode.js +2 -1
  282. package/js/es6/product/small/light/components/button.js +51 -51
  283. package/js/es6/product/small/light/components/container.js +76 -76
  284. package/js/es6/product/small/light/components/form.d.ts +15 -0
  285. package/js/es6/product/small/light/components/form.js +62 -47
  286. package/js/es6/product/small/light/components/link.js +1 -1
  287. package/js/es6/product/small/light/components/nav.js +42 -42
  288. package/js/es6/product/small/light/components/page.js +28 -28
  289. package/js/es6/product/small/light/components/popover.js +12 -12
  290. package/js/es6/product/small/light/components/profile.js +7 -7
  291. package/js/es6/product/small/light/components/progress.js +5 -5
  292. package/js/es6/product/small/light/components/status.js +10 -10
  293. package/js/es6/product/small/light/components/tab.js +2 -2
  294. package/js/es6/product/small/light/components/table.js +9 -9
  295. package/js/es6/product/small/light/mode.d.ts +1 -0
  296. package/js/es6/product/small/light/mode.js +2 -1
  297. package/js/umd/frozenproduct/large/dark/components/badge.js +8 -10
  298. package/js/umd/frozenproduct/large/dark/components/button.js +86 -79
  299. package/js/umd/frozenproduct/large/dark/components/container.js +31 -33
  300. package/js/umd/frozenproduct/large/dark/components/form.js +93 -40
  301. package/js/umd/frozenproduct/large/dark/components/link.js +4 -4
  302. package/js/umd/frozenproduct/large/dark/components/nav.js +9 -8
  303. package/js/umd/frozenproduct/large/dark/components/popover.js +14 -20
  304. package/js/umd/frozenproduct/large/dark/components/progress.js +12 -12
  305. package/js/umd/frozenproduct/large/dark/components/status.js +78 -76
  306. package/js/umd/frozenproduct/large/dark/components/tab.js +19 -19
  307. package/js/umd/frozenproduct/large/dark/components/table.js +25 -28
  308. package/js/umd/frozenproduct/large/dark/mode.js +42 -2
  309. package/js/umd/frozenproduct/large/light/components/badge.js +8 -10
  310. package/js/umd/frozenproduct/large/light/components/button.js +101 -94
  311. package/js/umd/frozenproduct/large/light/components/container.js +33 -35
  312. package/js/umd/frozenproduct/large/light/components/form.js +97 -44
  313. package/js/umd/frozenproduct/large/light/components/link.js +6 -6
  314. package/js/umd/frozenproduct/large/light/components/nav.js +10 -9
  315. package/js/umd/frozenproduct/large/light/components/popover.js +18 -24
  316. package/js/umd/frozenproduct/large/light/components/progress.js +15 -15
  317. package/js/umd/frozenproduct/large/light/components/status.js +83 -81
  318. package/js/umd/frozenproduct/large/light/components/tab.js +20 -20
  319. package/js/umd/frozenproduct/large/light/components/table.js +25 -28
  320. package/js/umd/frozenproduct/large/light/mode.js +42 -2
  321. package/js/umd/frozenproduct/small/dark/components/badge.js +8 -10
  322. package/js/umd/frozenproduct/small/dark/components/button.js +86 -79
  323. package/js/umd/frozenproduct/small/dark/components/container.js +31 -33
  324. package/js/umd/frozenproduct/small/dark/components/form.js +93 -40
  325. package/js/umd/frozenproduct/small/dark/components/link.js +4 -4
  326. package/js/umd/frozenproduct/small/dark/components/nav.js +9 -8
  327. package/js/umd/frozenproduct/small/dark/components/popover.js +14 -20
  328. package/js/umd/frozenproduct/small/dark/components/progress.js +12 -12
  329. package/js/umd/frozenproduct/small/dark/components/status.js +78 -76
  330. package/js/umd/frozenproduct/small/dark/components/tab.js +19 -19
  331. package/js/umd/frozenproduct/small/dark/components/table.js +25 -28
  332. package/js/umd/frozenproduct/small/dark/mode.js +42 -2
  333. package/js/umd/frozenproduct/small/light/components/badge.js +8 -10
  334. package/js/umd/frozenproduct/small/light/components/button.js +101 -94
  335. package/js/umd/frozenproduct/small/light/components/container.js +33 -35
  336. package/js/umd/frozenproduct/small/light/components/form.js +97 -44
  337. package/js/umd/frozenproduct/small/light/components/link.js +6 -6
  338. package/js/umd/frozenproduct/small/light/components/nav.js +10 -9
  339. package/js/umd/frozenproduct/small/light/components/popover.js +18 -24
  340. package/js/umd/frozenproduct/small/light/components/progress.js +15 -15
  341. package/js/umd/frozenproduct/small/light/components/status.js +83 -81
  342. package/js/umd/frozenproduct/small/light/components/tab.js +20 -20
  343. package/js/umd/frozenproduct/small/light/components/table.js +25 -28
  344. package/js/umd/frozenproduct/small/light/mode.js +42 -2
  345. package/js/umd/product/large/dark/components/form.js +53 -0
  346. package/js/umd/product/large/dark/mode.js +42 -2
  347. package/js/umd/product/large/light/components/form.js +53 -0
  348. package/js/umd/product/large/light/mode.js +42 -2
  349. package/js/umd/product/small/dark/components/button.js +51 -51
  350. package/js/umd/product/small/dark/components/container.js +76 -76
  351. package/js/umd/product/small/dark/components/form.js +100 -47
  352. package/js/umd/product/small/dark/components/link.js +1 -1
  353. package/js/umd/product/small/dark/components/nav.js +42 -42
  354. package/js/umd/product/small/dark/components/page.js +28 -28
  355. package/js/umd/product/small/dark/components/popover.js +12 -12
  356. package/js/umd/product/small/dark/components/profile.js +7 -7
  357. package/js/umd/product/small/dark/components/progress.js +5 -5
  358. package/js/umd/product/small/dark/components/status.js +10 -10
  359. package/js/umd/product/small/dark/components/tab.js +2 -2
  360. package/js/umd/product/small/dark/components/table.js +9 -9
  361. package/js/umd/product/small/dark/mode.js +42 -2
  362. package/js/umd/product/small/light/components/button.js +51 -51
  363. package/js/umd/product/small/light/components/container.js +76 -76
  364. package/js/umd/product/small/light/components/form.js +100 -47
  365. package/js/umd/product/small/light/components/link.js +1 -1
  366. package/js/umd/product/small/light/components/nav.js +42 -42
  367. package/js/umd/product/small/light/components/page.js +28 -28
  368. package/js/umd/product/small/light/components/popover.js +12 -12
  369. package/js/umd/product/small/light/components/profile.js +7 -7
  370. package/js/umd/product/small/light/components/progress.js +5 -5
  371. package/js/umd/product/small/light/components/status.js +10 -10
  372. package/js/umd/product/small/light/components/tab.js +2 -2
  373. package/js/umd/product/small/light/components/table.js +9 -9
  374. package/js/umd/product/small/light/mode.js +42 -2
  375. package/json/flat/frozenproduct/large/dark/components/badge.json +2 -2
  376. package/json/flat/frozenproduct/large/dark/components/button.json +15 -15
  377. package/json/flat/frozenproduct/large/dark/components/container.json +9 -9
  378. package/json/flat/frozenproduct/large/dark/components/form.json +13 -10
  379. package/json/flat/frozenproduct/large/dark/components/nav.json +2 -2
  380. package/json/flat/frozenproduct/large/dark/components/popover.json +2 -2
  381. package/json/flat/frozenproduct/large/dark/components/progress.json +2 -2
  382. package/json/flat/frozenproduct/large/dark/components/status.json +20 -20
  383. package/json/flat/frozenproduct/large/dark/components/tab.json +5 -5
  384. package/json/flat/frozenproduct/large/dark/components/table.json +8 -8
  385. package/json/flat/frozenproduct/large/dark/mode.json +2 -1
  386. package/json/flat/frozenproduct/large/light/components/badge.json +2 -2
  387. package/json/flat/frozenproduct/large/light/components/button.json +30 -30
  388. package/json/flat/frozenproduct/large/light/components/container.json +11 -11
  389. package/json/flat/frozenproduct/large/light/components/form.json +17 -14
  390. package/json/flat/frozenproduct/large/light/components/link.json +2 -2
  391. package/json/flat/frozenproduct/large/light/components/nav.json +3 -3
  392. package/json/flat/frozenproduct/large/light/components/popover.json +6 -6
  393. package/json/flat/frozenproduct/large/light/components/progress.json +5 -5
  394. package/json/flat/frozenproduct/large/light/components/status.json +25 -25
  395. package/json/flat/frozenproduct/large/light/components/tab.json +6 -6
  396. package/json/flat/frozenproduct/large/light/components/table.json +8 -8
  397. package/json/flat/frozenproduct/large/light/mode.json +2 -1
  398. package/json/flat/frozenproduct/small/dark/components/badge.json +2 -2
  399. package/json/flat/frozenproduct/small/dark/components/button.json +15 -15
  400. package/json/flat/frozenproduct/small/dark/components/container.json +9 -9
  401. package/json/flat/frozenproduct/small/dark/components/form.json +13 -10
  402. package/json/flat/frozenproduct/small/dark/components/nav.json +2 -2
  403. package/json/flat/frozenproduct/small/dark/components/popover.json +2 -2
  404. package/json/flat/frozenproduct/small/dark/components/progress.json +2 -2
  405. package/json/flat/frozenproduct/small/dark/components/status.json +20 -20
  406. package/json/flat/frozenproduct/small/dark/components/tab.json +5 -5
  407. package/json/flat/frozenproduct/small/dark/components/table.json +8 -8
  408. package/json/flat/frozenproduct/small/dark/mode.json +2 -1
  409. package/json/flat/frozenproduct/small/light/components/badge.json +2 -2
  410. package/json/flat/frozenproduct/small/light/components/button.json +30 -30
  411. package/json/flat/frozenproduct/small/light/components/container.json +11 -11
  412. package/json/flat/frozenproduct/small/light/components/form.json +17 -14
  413. package/json/flat/frozenproduct/small/light/components/link.json +2 -2
  414. package/json/flat/frozenproduct/small/light/components/nav.json +3 -3
  415. package/json/flat/frozenproduct/small/light/components/popover.json +6 -6
  416. package/json/flat/frozenproduct/small/light/components/progress.json +5 -5
  417. package/json/flat/frozenproduct/small/light/components/status.json +25 -25
  418. package/json/flat/frozenproduct/small/light/components/tab.json +6 -6
  419. package/json/flat/frozenproduct/small/light/components/table.json +8 -8
  420. package/json/flat/frozenproduct/small/light/mode.json +2 -1
  421. package/json/flat/product/large/dark/components/form.json +3 -0
  422. package/json/flat/product/large/dark/mode.json +2 -1
  423. package/json/flat/product/large/light/components/form.json +3 -0
  424. package/json/flat/product/large/light/mode.json +2 -1
  425. package/json/flat/product/small/dark/components/button.json +51 -51
  426. package/json/flat/product/small/dark/components/container.json +76 -76
  427. package/json/flat/product/small/dark/components/form.json +50 -47
  428. package/json/flat/product/small/dark/components/link.json +1 -1
  429. package/json/flat/product/small/dark/components/nav.json +42 -42
  430. package/json/flat/product/small/dark/components/page.json +28 -28
  431. package/json/flat/product/small/dark/components/popover.json +12 -12
  432. package/json/flat/product/small/dark/components/profile.json +7 -7
  433. package/json/flat/product/small/dark/components/progress.json +5 -5
  434. package/json/flat/product/small/dark/components/status.json +10 -10
  435. package/json/flat/product/small/dark/components/tab.json +2 -2
  436. package/json/flat/product/small/dark/components/table.json +9 -9
  437. package/json/flat/product/small/dark/mode.json +2 -1
  438. package/json/flat/product/small/light/components/button.json +51 -51
  439. package/json/flat/product/small/light/components/container.json +76 -76
  440. package/json/flat/product/small/light/components/form.json +50 -47
  441. package/json/flat/product/small/light/components/link.json +1 -1
  442. package/json/flat/product/small/light/components/nav.json +42 -42
  443. package/json/flat/product/small/light/components/page.json +28 -28
  444. package/json/flat/product/small/light/components/popover.json +12 -12
  445. package/json/flat/product/small/light/components/profile.json +7 -7
  446. package/json/flat/product/small/light/components/progress.json +5 -5
  447. package/json/flat/product/small/light/components/status.json +10 -10
  448. package/json/flat/product/small/light/components/tab.json +2 -2
  449. package/json/flat/product/small/light/components/table.json +9 -9
  450. package/json/flat/product/small/light/mode.json +2 -1
  451. package/json/nested/frozenproduct/large/dark/components/badge.json +2 -2
  452. package/json/nested/frozenproduct/large/dark/components/button.json +15 -15
  453. package/json/nested/frozenproduct/large/dark/components/container.json +9 -9
  454. package/json/nested/frozenproduct/large/dark/components/form.json +26 -11
  455. package/json/nested/frozenproduct/large/dark/components/nav.json +2 -2
  456. package/json/nested/frozenproduct/large/dark/components/popover.json +2 -2
  457. package/json/nested/frozenproduct/large/dark/components/progress.json +2 -2
  458. package/json/nested/frozenproduct/large/dark/components/status.json +20 -20
  459. package/json/nested/frozenproduct/large/dark/components/tab.json +5 -5
  460. package/json/nested/frozenproduct/large/dark/components/table.json +8 -8
  461. package/json/nested/frozenproduct/large/dark/mode.json +2 -1
  462. package/json/nested/frozenproduct/large/light/components/badge.json +2 -2
  463. package/json/nested/frozenproduct/large/light/components/button.json +30 -30
  464. package/json/nested/frozenproduct/large/light/components/container.json +11 -11
  465. package/json/nested/frozenproduct/large/light/components/form.json +30 -15
  466. package/json/nested/frozenproduct/large/light/components/link.json +2 -2
  467. package/json/nested/frozenproduct/large/light/components/nav.json +3 -3
  468. package/json/nested/frozenproduct/large/light/components/popover.json +6 -6
  469. package/json/nested/frozenproduct/large/light/components/progress.json +5 -5
  470. package/json/nested/frozenproduct/large/light/components/status.json +25 -25
  471. package/json/nested/frozenproduct/large/light/components/tab.json +6 -6
  472. package/json/nested/frozenproduct/large/light/components/table.json +8 -8
  473. package/json/nested/frozenproduct/large/light/mode.json +2 -1
  474. package/json/nested/frozenproduct/small/dark/components/badge.json +2 -2
  475. package/json/nested/frozenproduct/small/dark/components/button.json +15 -15
  476. package/json/nested/frozenproduct/small/dark/components/container.json +9 -9
  477. package/json/nested/frozenproduct/small/dark/components/form.json +26 -11
  478. package/json/nested/frozenproduct/small/dark/components/nav.json +2 -2
  479. package/json/nested/frozenproduct/small/dark/components/popover.json +2 -2
  480. package/json/nested/frozenproduct/small/dark/components/progress.json +2 -2
  481. package/json/nested/frozenproduct/small/dark/components/status.json +20 -20
  482. package/json/nested/frozenproduct/small/dark/components/tab.json +5 -5
  483. package/json/nested/frozenproduct/small/dark/components/table.json +8 -8
  484. package/json/nested/frozenproduct/small/dark/mode.json +2 -1
  485. package/json/nested/frozenproduct/small/light/components/badge.json +2 -2
  486. package/json/nested/frozenproduct/small/light/components/button.json +30 -30
  487. package/json/nested/frozenproduct/small/light/components/container.json +11 -11
  488. package/json/nested/frozenproduct/small/light/components/form.json +30 -15
  489. package/json/nested/frozenproduct/small/light/components/link.json +2 -2
  490. package/json/nested/frozenproduct/small/light/components/nav.json +3 -3
  491. package/json/nested/frozenproduct/small/light/components/popover.json +6 -6
  492. package/json/nested/frozenproduct/small/light/components/progress.json +5 -5
  493. package/json/nested/frozenproduct/small/light/components/status.json +25 -25
  494. package/json/nested/frozenproduct/small/light/components/tab.json +6 -6
  495. package/json/nested/frozenproduct/small/light/components/table.json +8 -8
  496. package/json/nested/frozenproduct/small/light/mode.json +2 -1
  497. package/json/nested/product/large/dark/components/form.json +16 -1
  498. package/json/nested/product/large/dark/mode.json +2 -1
  499. package/json/nested/product/large/light/components/form.json +16 -1
  500. package/json/nested/product/large/light/mode.json +2 -1
  501. package/json/nested/product/small/dark/components/button.json +51 -51
  502. package/json/nested/product/small/dark/components/container.json +76 -76
  503. package/json/nested/product/small/dark/components/form.json +63 -48
  504. package/json/nested/product/small/dark/components/link.json +1 -1
  505. package/json/nested/product/small/dark/components/nav.json +42 -42
  506. package/json/nested/product/small/dark/components/page.json +28 -28
  507. package/json/nested/product/small/dark/components/popover.json +12 -12
  508. package/json/nested/product/small/dark/components/profile.json +7 -7
  509. package/json/nested/product/small/dark/components/progress.json +5 -5
  510. package/json/nested/product/small/dark/components/status.json +10 -10
  511. package/json/nested/product/small/dark/components/tab.json +2 -2
  512. package/json/nested/product/small/dark/components/table.json +9 -9
  513. package/json/nested/product/small/dark/mode.json +2 -1
  514. package/json/nested/product/small/light/components/button.json +51 -51
  515. package/json/nested/product/small/light/components/container.json +76 -76
  516. package/json/nested/product/small/light/components/form.json +63 -48
  517. package/json/nested/product/small/light/components/link.json +1 -1
  518. package/json/nested/product/small/light/components/nav.json +42 -42
  519. package/json/nested/product/small/light/components/page.json +28 -28
  520. package/json/nested/product/small/light/components/popover.json +12 -12
  521. package/json/nested/product/small/light/components/profile.json +7 -7
  522. package/json/nested/product/small/light/components/progress.json +5 -5
  523. package/json/nested/product/small/light/components/status.json +10 -10
  524. package/json/nested/product/small/light/components/tab.json +2 -2
  525. package/json/nested/product/small/light/components/table.json +9 -9
  526. package/json/nested/product/small/light/mode.json +2 -1
  527. package/package.json +1 -1
  528. package/sage-design-tokens-15.2.1.tgz +0 -0
  529. package/scss/frozenproduct/large/components/badge.scss +3 -3
  530. package/scss/frozenproduct/large/components/button.scss +32 -32
  531. package/scss/frozenproduct/large/components/container.scss +11 -11
  532. package/scss/frozenproduct/large/components/form.scss +16 -13
  533. package/scss/frozenproduct/large/components/link.scss +2 -2
  534. package/scss/frozenproduct/large/components/nav.scss +3 -3
  535. package/scss/frozenproduct/large/components/popover.scss +6 -6
  536. package/scss/frozenproduct/large/components/progress.scss +5 -5
  537. package/scss/frozenproduct/large/components/status.scss +25 -25
  538. package/scss/frozenproduct/large/components/tab.scss +7 -7
  539. package/scss/frozenproduct/large/components/table.scss +8 -8
  540. package/scss/frozenproduct/large/dark.scss +2 -1
  541. package/scss/frozenproduct/large/light.scss +2 -1
  542. package/scss/frozenproduct/small/components/badge.scss +3 -3
  543. package/scss/frozenproduct/small/components/button.scss +32 -32
  544. package/scss/frozenproduct/small/components/container.scss +11 -11
  545. package/scss/frozenproduct/small/components/form.scss +16 -13
  546. package/scss/frozenproduct/small/components/link.scss +2 -2
  547. package/scss/frozenproduct/small/components/nav.scss +3 -3
  548. package/scss/frozenproduct/small/components/popover.scss +6 -6
  549. package/scss/frozenproduct/small/components/progress.scss +5 -5
  550. package/scss/frozenproduct/small/components/status.scss +25 -25
  551. package/scss/frozenproduct/small/components/tab.scss +7 -7
  552. package/scss/frozenproduct/small/components/table.scss +8 -8
  553. package/scss/frozenproduct/small/dark.scss +2 -1
  554. package/scss/frozenproduct/small/light.scss +2 -1
  555. package/scss/product/large/components/form.scss +3 -0
  556. package/scss/product/large/dark.scss +2 -1
  557. package/scss/product/large/light.scss +2 -1
  558. package/scss/product/small/components/button.scss +13 -13
  559. package/scss/product/small/components/container.scss +10 -10
  560. package/scss/product/small/components/form.scss +10 -7
  561. package/scss/product/small/components/link.scss +2 -2
  562. package/scss/product/small/components/nav.scss +5 -5
  563. package/scss/product/small/components/page.scss +1 -1
  564. package/scss/product/small/components/popover.scss +2 -2
  565. package/scss/product/small/components/progress.scss +6 -6
  566. package/scss/product/small/components/status.scss +3 -3
  567. package/scss/product/small/components/tab.scss +7 -7
  568. package/scss/product/small/components/table.scss +10 -10
  569. package/scss/product/small/dark.scss +2 -1
  570. package/scss/product/small/light.scss +2 -1
  571. package/sage-design-tokens-15.1.0.tgz +0 -0
@@ -3,9 +3,10 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --badge-color-notification-bg-default: var(--modes-color-status-caution-frozenglobal-default);
6
7
  --badge-radius-badge: var(--global-radius-circle); /* Badge */
7
- --badge-color-notification-bg-default: var(--modes-color-status-negative-default); /* Used in global nav notification badges */
8
8
  --badge-color-notification-bg-alt: var(--modes-color-status-info-default);
9
+ --badge-color-notification-label-default: var(--modes-color-generic-content-extreme);
9
10
  --badge-color-notification-inverse-border-default: var(--modes-color-generic-content-extreme);
10
11
  --badge-color-notification-inverse-bg-default: var(--modes-color-status-negative-inverse-default); /* Used in global nav notification badges */
11
12
  --badge-color-notification-inverse-bg-alt: var(--modes-color-status-info-inverse-default);
@@ -14,8 +15,7 @@
14
15
  --badge-typography-responsive-m: var(--global-typography-responsive-component-notification-m);
15
16
  --badge-typography-adaptive-m: var(--global-typography-adaptive-component-notification-m);
16
17
  --badge-color-notification-border-default: var(--modes-color-generic-content-nought);
17
- --badge-color-notification-label-default: var(--modes-color-generic-content-nought);
18
- --badge-color-notification-label-alt: var(--modes-color-generic-content-nought);
18
+ --badge-color-notification-label-alt: var(--modes-color-generic-fg-nought);
19
19
  --badge-size-micro-dot: var(--global-size-micro-m); /* Micro dot badge size */
20
20
  --badge-size-micro-numbered-min: var(--global-size-macro-xxs); /* Micro dot badge size with numbering */
21
21
  --badge-size-micro-numbered-max: var(--global-size-macro-s); /* Micro dot badge size max width */
@@ -34,9 +34,15 @@
34
34
  --button-color-typical-primary-inverse-label-hover: var(--modes-color-interactive-primary-inverse-with-default);
35
35
  --button-color-typical-secondary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
36
36
  --button-color-typical-secondary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
37
+ --button-color-typical-tertiary-bg-enabled: var(--modes-color-none);
38
+ --button-color-typical-tertiary-border-disabled: var(--modes-color-none);
39
+ --button-color-typical-tertiary-border-enabled: var(--modes-color-none);
40
+ --button-color-typical-tertiary-border-hover: var(--modes-color-none);
37
41
  --button-color-typical-tertiary-inverse-border-disabled: var(--modes-color-interactive-inactive-inverse-default);
38
42
  --button-color-typical-tertiary-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
43
+ --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-frozen-default);
39
44
  --button-color-typical-subtle-inverse-label-disabled: var(--modes-color-interactive-inactive-inverse-content);
45
+ --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
40
46
  --button-typography-adaptive-primary-s: var(--global-typography-adaptive-component-firm-s);
41
47
  --button-typography-adaptive-primary-m: var(--global-typography-adaptive-component-firm-m);
42
48
  --button-typography-adaptive-primary-l: var(--global-typography-adaptive-component-firm-l);
@@ -73,20 +79,15 @@
73
79
  --button-color-destructive-secondary-bg-hover: var(--modes-color-interactive-danger-hover-alt);
74
80
  --button-color-destructive-secondary-border-hover: var(--modes-color-interactive-danger-hover);
75
81
  --button-color-destructive-secondary-label-hover: var(--modes-color-interactive-danger-hover);
76
- --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-default);
82
+ --button-color-typical-primary-bg-enabled: var(--modes-color-interactive-primary-frozen-default);
77
83
  --button-color-typical-primary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default);
78
- --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
79
- --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
80
- --button-color-typical-tertiary-bg-enabled: var(--button-color-none);
81
- --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
82
- --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-with-hover);
84
+ --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-frozen-default);
85
+ --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-primary-frozen-default);
86
+ --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-primary-frozen-default);
83
87
  --button-color-typical-tertiary-inverse-bg-enabled: var(--button-color-none);
84
- --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
85
- --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-with-active-alt);
86
- --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-with-hover);
87
- --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-active);
88
- --button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
89
- --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-with-hover);
88
+ --button-color-typical-subtle-label-active: var(--modes-color-interactive-monochrome-frozen-active);
89
+ --button-color-typical-toggle-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
90
+ --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-frozen-default-alt);
90
91
  --button-color-video-bg-blur: var(--modes-color-interactive-monochrome-hover-alt);
91
92
  --button-size-split: var(--global-size-micro-xxs); /* Split button (divider width) */
92
93
  --button-size-xs: var(--global-size-macro-xs); /* min-height on XS Buttons */
@@ -228,19 +229,19 @@
228
229
  --button-color-ai-label-enabled: var(--modes-color-interactive-monochrome-default);
229
230
  --button-color-destructive-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
230
231
  --button-color-destructive-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
231
- --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-active);
232
- --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-hover);
232
+ --button-color-typical-primary-bg-active: var(--modes-color-interactive-primary-frozen-active);
233
+ --button-color-typical-primary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
233
234
  --button-color-typical-primary-label-disabled: var(--modes-color-interactive-inactive-content-alt);
234
235
  --button-color-typical-primary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active);
235
236
  --button-color-typical-primary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover);
236
- --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-active-alt);
237
+ --button-color-typical-secondary-bg-active: var(--modes-color-interactive-primary-frozen-active);
237
238
  --button-color-typical-secondary-bg-enabled: var(--modes-color-interactive-primary-default-alt3);
238
- --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
239
- --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-active);
240
- --button-color-typical-secondary-border-enabled: var(--modes-color-interactive-primary-default-alt);
241
- --button-color-typical-secondary-border-hover: var(--modes-color-interactive-primary-hover);
239
+ --button-color-typical-secondary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
240
+ --button-color-typical-secondary-border-active: var(--modes-color-interactive-primary-frozen-active);
241
+ --button-color-typical-secondary-border-hover: var(--modes-color-interactive-primary-frozen-hover);
242
+ --button-color-typical-secondary-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
242
243
  --button-color-typical-secondary-label-disabled: var(--modes-color-interactive-inactive-content);
243
- --button-color-typical-secondary-label-enabled: var(--modes-color-interactive-monochrome-default);
244
+ --button-color-typical-secondary-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover-alt);
244
245
  --button-color-typical-secondary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
245
246
  --button-color-typical-secondary-inverse-bg-enabled: var(--modes-color-interactive-primary-inverse-default-alt3);
246
247
  --button-color-typical-secondary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
@@ -250,13 +251,12 @@
250
251
  --button-color-typical-secondary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
251
252
  --button-color-typical-secondary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
252
253
  --button-color-typical-secondary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
253
- --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-active-alt);
254
- --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-hover-alt);
255
- --button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-active);
256
- --button-color-typical-tertiary-border-enabled: var(--modes-color-interactive-primary-default-alt);
257
- --button-color-typical-tertiary-border-hover: var(--modes-color-interactive-primary-hover);
254
+ --button-color-typical-tertiary-bg-active: var(--modes-color-interactive-primary-frozen-active);
255
+ --button-color-typical-tertiary-bg-hover: var(--modes-color-interactive-primary-frozen-hover);
256
+ --button-color-typical-tertiary-border-active: var(--modes-color-interactive-primary-frozen-active);
257
+ --button-color-typical-tertiary-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
258
258
  --button-color-typical-tertiary-label-disabled: var(--modes-color-interactive-inactive-content);
259
- --button-color-typical-tertiary-label-enabled: var(--modes-color-interactive-monochrome-default);
259
+ --button-color-typical-tertiary-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover-alt);
260
260
  --button-color-typical-tertiary-inverse-bg-active: var(--modes-color-interactive-primary-inverse-active-alt);
261
261
  --button-color-typical-tertiary-inverse-bg-hover: var(--modes-color-interactive-primary-inverse-hover-alt);
262
262
  --button-color-typical-tertiary-inverse-border-active: var(--modes-color-interactive-primary-inverse-active);
@@ -265,17 +265,19 @@
265
265
  --button-color-typical-tertiary-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
266
266
  --button-color-typical-tertiary-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
267
267
  --button-color-typical-tertiary-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
268
+ --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-frozen-active-alt);
269
+ --button-color-typical-subtle-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
268
270
  --button-color-typical-subtle-label-disabled: var(--modes-color-interactive-inactive-content);
269
- --button-color-typical-subtle-label-enabled: var(--modes-color-interactive-monochrome-default);
271
+ --button-color-typical-subtle-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover);
270
272
  --button-color-typical-subtle-inverse-bg-hover: var(--modes-color-interactive-monochrome-inverse-hover-alt);
271
273
  --button-color-typical-subtle-inverse-label-active: var(--modes-color-interactive-monochrome-inverse-with-active-alt);
272
274
  --button-color-typical-subtle-inverse-label-enabled: var(--modes-color-interactive-monochrome-inverse-default);
273
275
  --button-color-typical-subtle-inverse-label-hover: var(--modes-color-interactive-monochrome-inverse-with-hover);
274
276
  --button-color-typical-toggle-label-active-disabled: var(--modes-color-interactive-inactive-content-alt);
275
- --button-color-typical-toggle-border-enabled: var(--modes-color-interactive-monochrome-default);
276
- --button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-with-active);
277
+ --button-color-typical-toggle-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
278
+ --button-color-typical-toggle-label-active: var(--modes-color-interactive-monochrome-frozen-with-active);
277
279
  --button-color-typical-toggle-label-disabled: var(--modes-color-interactive-inactive-content);
278
- --button-color-typical-toggle-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
280
+ --button-color-typical-toggle-label-hover: var(--modes-color-interactive-monochrome-frozen-with-hover);
279
281
  --button-color-video-primary-bg-enabled: var(--modes-color-interactive-monochrome-with-default);
280
282
  --button-color-video-primary-bg-hover: var(--modes-color-interactive-monochrome-with-default);
281
283
  --button-color-video-primary-label-enabled: var(--modes-color-interactive-monochrome-default);
@@ -320,8 +322,6 @@
320
322
  --button-color-destructive-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
321
323
  --button-color-typical-primary-bg-disabled: var(--modes-color-interactive-inactive-default);
322
324
  --button-color-typical-secondary-border-disabled: var(--modes-color-interactive-inactive-default);
323
- --button-color-typical-tertiary-border-disabled: var(--modes-color-interactive-inactive-default);
324
- --button-color-typical-subtle-bg-active: var(--modes-color-interactive-monochrome-active-alt);
325
325
  --button-color-typical-subtle-inverse-bg-active: var(--modes-color-interactive-monochrome-inverse-active-alt);
326
326
  --button-color-typical-toggle-bg-active-disabled: var(--modes-color-interactive-inactive-default);
327
327
  --button-color-typical-toggle-border-disabled: var(--modes-color-interactive-inactive-default);
@@ -24,7 +24,7 @@
24
24
  --container-color-interactive-border-activated: var(--modes-color-status-positive-default);
25
25
  --container-color-interactive-bg-footer-default: var(--modes-color-generic-bg-nought); /* tile footer bg color */
26
26
  --container-color-interactive-bg-enabled: var(--modes-color-generic-bg-nought);
27
- --container-color-interactive-detailedicon-bg: var(--modes-color-custom-default); /* */
27
+ --container-color-interactive-detailedicon-bg: var(--modes-color-custom-frozen);
28
28
  --container-color-interactive-droptarget-bg-default: var(--modes-color-status-info-default); /* draggable drop target background color */
29
29
  --container-color-standard-bg-default: var(--modes-color-generic-bg-nought);
30
30
  --container-color-standard-statusborder-bg-caution: var(--modes-color-status-caution-default);
@@ -52,7 +52,7 @@
52
52
  --container-typography-responsive-paragraph-s: var(--global-typography-responsive-component-moderate-s);
53
53
  --container-typography-responsive-paragraph-m: var(--global-typography-responsive-component-moderate-m);
54
54
  --container-typography-responsive-paragraph-l: var(--global-typography-responsive-component-moderate-l);
55
- --container-color-blockquote-border: var(--modes-color-interactive-primary-default);
55
+ --container-color-blockquote-border: var(--modes-color-interactive-primary-frozen-default);
56
56
  --container-color-interactive-bg-footer-active: var(--modes-color-interactive-monochrome-active);
57
57
  --container-color-interactive-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* Used for accordion hover backgrounds */
58
58
  --container-color-interactive-border-active: var(--modes-color-interactive-monochrome-active);
@@ -151,15 +151,15 @@
151
151
  --container-radius-nudge: var(--global-radius-container-l); /* nudge radius */
152
152
  --container-radius-profileselector: var(--global-radius-container-m); /* Profile selector list container. */
153
153
  --container-radius-texteditor: var(--global-radius-container-m); /* Text editor (footer bottom corners) */
154
- --container-radius-card-moderate: var(--global-radius-container-l); /* Card (less rounded) */
155
- --container-radius-card-curved: var(--global-radius-container-xl); /* Card (more rounded) */
156
- --container-radius-card-sweeping: var(--global-radius-container-xxl); /* Card largest rounded type */
157
- --container-radius-tile-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
158
- --container-radius-tile-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
159
- --container-radius-tile-sweeping: var(--global-radius-container-xxl); /* Tile largest roundedness */
160
- --container-radius-tileselect-moderate: var(--global-radius-container-l); /* Tile (less rounded) */
161
- --container-radius-tileselect-curved: var(--global-radius-container-xl); /* Tile (more rounded) */
162
- --container-radius-tileselect-sweeping: var(--global-radius-container-xxl);
154
+ --container-radius-card-moderate: var(--global-radius-container-m); /* Card (less rounded) */
155
+ --container-radius-card-curved: var(--global-radius-container-l); /* Card (more rounded) */
156
+ --container-radius-card-sweeping: var(--global-radius-container-xl); /* Card largest rounded type */
157
+ --container-radius-tile-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
158
+ --container-radius-tile-curved: var(--global-radius-container-l); /* Tile (more rounded) */
159
+ --container-radius-tile-sweeping: var(--global-radius-container-xl); /* Tile largest roundedness */
160
+ --container-radius-tileselect-moderate: var(--global-radius-container-m); /* Tile (less rounded) */
161
+ --container-radius-tileselect-curved: var(--global-radius-container-l); /* Tile (more rounded) */
162
+ --container-radius-tileselect-sweeping: var(--global-radius-container-xl);
163
163
  --container-space-none: var(--global-space-none);
164
164
  --container-space-accordionsubtle-yg-m: var(--global-space-macro-xs); /* Gap between Accordion subtle trigger and content */
165
165
  --container-space-filepreview-preview-x-m: var(--global-space-micro-l); /* Horizontal padding on large thumbnail image */
@@ -9,12 +9,16 @@
9
9
  --form-color-switch-border-active: transparent;
10
10
  --form-color-switch-border-activedisabled: transparent;
11
11
  --form-radius-none: var(--global-radius-none); /* Text editor (internal corners) */
12
- --form-radius-colorpicker: var(--global-radius-circle); /* Color picker (swatch container), */
13
12
  --form-radius-radio: var(--global-radius-circle); /* Radio button */
14
13
  --form-radius-switch: var(--global-radius-circle); /* Switch container and handle */
15
14
  --form-radius-calendar-none: var(--global-radius-none); /* Calendar (start and end duration) */
16
15
  --form-radius-calendar-date: var(--global-radius-circle); /* Calendar date (hover & selected), */
16
+ --form-color-calendar-bg-duration: var(--modes-color-interactive-inactive-frozen-default-alt);
17
17
  --form-color-labelset-label-required: var(--modes-color-interactive-danger-default);
18
+ --form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
19
+ --form-color-switch-bg-active: var(--modes-color-interactive-monochrome-frozen-default);
20
+ --form-color-switch-border-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
21
+ --form-color-switch-fg-enabled: var(--modes-color-interactive-data-entry-frozen-with-default);
18
22
  --form-color-validation-border-error: var(--modes-color-status-negative-default);
19
23
  --form-color-validation-bar-error: var(--modes-color-status-negative-default); /* error bar to left of inputs */
20
24
  --form-color-validation-bar-warning: var(--modes-color-status-caution-default); /* warning bar to left of inputs */
@@ -24,18 +28,19 @@
24
28
  --form-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
25
29
  --form-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
26
30
  --form-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
31
+ --form-typography-adaptive-default-xs: var(--global-typography-adaptive-component-moderate-xs);
27
32
  --form-typography-adaptive-default-s: var(--global-typography-adaptive-component-moderate-s);
28
33
  --form-typography-adaptive-default-m: var(--global-typography-adaptive-component-moderate-m);
29
34
  --form-typography-adaptive-default-l: var(--global-typography-adaptive-component-moderate-l);
30
35
  --form-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
31
36
  --form-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
32
37
  --form-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
38
+ --form-typography-responsive-default-xs: var(--global-typography-responsive-component-moderate-xs);
33
39
  --form-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
34
40
  --form-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
35
41
  --form-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
36
- --form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-active);
42
+ --form-color-calendar-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
37
43
  --form-color-calendar-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
38
- --form-color-calendar-border-duration: var(--modes-color-interactive-monochrome-active);
39
44
  --form-color-calendar-text-hover: var(--modes-color-interactive-monochrome-with-hover);
40
45
  --form-color-dropdown-label-hover: var(--modes-color-interactive-monochrome-with-hover);
41
46
  --form-color-typical-bg-default: var(--modes-color-interactive-data-entry-default);
@@ -45,7 +50,6 @@
45
50
  --form-color-typical-icon-hover: var(--modes-color-interactive-data-entry-with-hover);
46
51
  --form-color-typical-text-hover: var(--modes-color-interactive-data-entry-with-hover); /* text hover state when dragging a file over file input */
47
52
  --form-color-typical-text-read-only: var(--modes-color-generic-content-harsh);
48
- --form-color-switch-bg-active: var(--modes-color-interactive-monochrome-active);
49
53
  --form-color-switch-bg-enabled: var(--modes-color-interactive-data-entry-default); /* for switch */
50
54
  --form-space-none: var(--global-space-none);
51
55
  --form-space-calendar-x-m: var(--global-space-macro-m);
@@ -218,18 +222,18 @@
218
222
  --form-size-rating-m: var(--global-size-icon-m); /* medium rating stars */
219
223
  --form-size-rating-l: var(--global-size-icon-xl); /* large rating stars */
220
224
  --form-color-calendar-bg-disabled: var(--modes-color-interactive-inactive-default-alt);
221
- --form-color-calendar-bg-duration: var(--modes-color-interactive-data-entry-hover-alt);
225
+ --form-color-calendar-border-duration: var(--form-color-calendar-bg-active);
222
226
  --form-color-calendar-text-active: var(--modes-color-interactive-monochrome-with-active);
223
227
  --form-color-calendar-text-alt: var(--modes-color-interactive-data-entry-content-alt); /* Days of the week subheaders */
224
228
  --form-color-calendar-text-disabled: var(--modes-color-interactive-inactive-content);
225
229
  --form-color-calendar-text-duration: var(--modes-color-interactive-data-entry-content);
226
230
  --form-color-calendar-text-enabled: var(--modes-color-interactive-data-entry-content);
227
231
  --form-color-calendar-text-alt-enabled: var(--modes-color-interactive-data-entry-content-alt);
228
- --form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER */
229
232
  --form-color-dropdown-label-active: var(--modes-color-interactive-monochrome-with-active);
230
233
  --form-color-dropdown-label-alt: var(--modes-color-interactive-monochrome-default);
231
234
  --form-color-dropdown-label-disabled: var(--modes-color-interactive-inactive-content);
232
235
  --form-color-dropdown-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
236
+ --form-color-dropdown-label-subtext: var(--modes-color-interactive-monochrome-default-alt2); /* Option subtext. */
233
237
  --form-color-labelset-label-default: var(--modes-color-interactive-data-entry-content);
234
238
  --form-color-labelset-label-alt: var(--modes-color-interactive-data-entry-content-alt); /* used for '(optional)' text and hint text. */
235
239
  --form-color-labelset-label-disabled: var(--modes-color-interactive-inactive-content);
@@ -249,19 +253,18 @@
249
253
  --form-color-typical-text-disabled: var(--modes-color-interactive-inactive-content);
250
254
  --form-color-typical-text-enabled: var(--modes-color-interactive-data-entry-content); /* Dropdown text (subtle dropdown). */
251
255
  --form-color-switch-bg-disabled: var(--modes-color-interactive-inactive-default-alt); /* for switch */
252
- --form-color-switch-border-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
253
256
  --form-color-switch-fg-active: var(--modes-color-interactive-monochrome-with-active);
254
257
  --form-color-switch-fg-activedisabled: var(--modes-color-interactive-inactive-content-alt);
255
- --form-color-switch-fg-enabled: var(--modes-color-interactive-monochrome-subtle-default-alt);
256
258
  --form-color-switch-label-active: var(--modes-color-interactive-data-entry-content);
257
259
  --form-color-switch-label-enabled: var(--modes-color-interactive-data-entry-content-alt);
258
260
  --form-color-switch-icon-enabled: var(--modes-color-interactive-data-entry-content-alt);
259
- --form-radius-checkbox: var(--global-radius-interactive-s); /* S and M checkbox */
261
+ --form-radius-checkbox: var(--global-radius-interactive-xs); /* S and M checkbox */
260
262
  --form-radius-texteditorfooter: var(--global-radius-interactive-s); /* AI text editor footer */
261
- --form-radius-fileupload: var(--global-radius-container-m); /* File input (file uploads) */
262
- --form-radius-fileselector: var(--global-radius-container-m); /* File preview (file selector asset) */
263
- --form-radius-input: var(--global-radius-interactive-m); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
264
- --form-radius-validationbar: var(--global-radius-interactive-xs); /* Validation bar */
263
+ --form-radius-colorpicker: var(--global-radius-interactive-l); /* Color picker (swatch container) */
264
+ --form-radius-fileupload: var(--global-radius-interactive-s); /* File input (file uploads) */
265
+ --form-radius-fileselector: var(--global-radius-interactive-s); /* File preview (file selector asset) */
266
+ --form-radius-input: var(--global-radius-interactive-s); /* Date picker input, Date range input, Dropdown select (trigger), Search, File input (draggable area), Text area, Text input */
267
+ --form-radius-validationbar: var(--global-radius-interactive-xxs); /* Validation bar */
265
268
  --form-radius-progressivebar: var(--global-radius-interactive-xs); /* Validation bar */
266
269
  --form-radius-calendar-today: var(--global-radius-container-xs); /* Calendar (today indicator) */
267
270
  --form-radius-texteditor-a-icontainer: var(--global-radius-interactive-s); /* container for draft with copilot form fields */
@@ -293,8 +296,8 @@
293
296
  --form-size-dropdown-item-l: var(--popover-size-item-l); /* REF POPOVER. Menu item min height. */
294
297
  --form-size-search-input-minwidth: var(--container-size-responsive-xl); /* minimum width for search input container */
295
298
  --form-size-search-input-maxwidth: calc(var(--container-size-responsive-xxl) + var(--container-size-responsive-xxs)); /* maximum width for search input container */
299
+ --form-color-dropdown-bg-hover: var(--popover-color-bg-hover); /* REF POPOVER */
296
300
  --form-color-typical-border-alt: var(--modes-color-interactive-inactive-default);
297
- --form-color-typical-border-enabled: var(--modes-color-interactive-data-entry-with-default);
298
301
  --form-color-typical-border-disabled: var(--modes-color-interactive-inactive-default);
299
302
  --form-color-typical-border-read-only: var(--modes-color-interactive-inactive-default);
300
303
  --form-color-switch-bg-activedisabled: var(--modes-color-interactive-inactive-default);
@@ -22,7 +22,7 @@
22
22
  --link-boxshadow-skiplink: var(--global-boxshadow-container-near);
23
23
  --link-color-destructive-label-hover: var(--modes-color-interactive-danger-hover-alt2);
24
24
  --link-color-destructive-inverse-label-hover: var(--modes-color-interactive-danger-inverse-hover-alt2);
25
- --link-color-typical-label-default: var(--modes-color-interactive-primary-default-alt2);
25
+ --link-color-typical-label-default: var(--modes-color-interactive-primary-frozen-default-alt);
26
26
  --link-color-typical-inverse-label-default: var(--modes-color-interactive-primary-inverse-default-alt2);
27
27
  --link-color-subtle-label-default: var(--modes-color-interactive-monochrome-default);
28
28
  --link-color-subtle-inverse-label-default: var(--modes-color-interactive-monochrome-inverse-default);
@@ -34,6 +34,6 @@
34
34
  --link-space-integral-xg-l: var(--global-space-micro-l); /* Space between icon and link text. */
35
35
  --link-space-skiplink-x: var(--global-space-macro-m); /* Skiplink container */
36
36
  --link-space-skiplink-y: var(--global-space-micro-xxl); /* Skiplink container */
37
- --link-color-typical-label-hover: var(--modes-color-interactive-primary-hover-alt2);
37
+ --link-color-typical-label-hover: var(--modes-color-interactive-primary-frozen-hover-alt);
38
38
  --link-color-typical-inverse-label-hover: var(--modes-color-interactive-primary-inverse-hover-alt2);
39
39
  }
@@ -8,6 +8,7 @@
8
8
  --nav-space-leftnav-grandchilditem-x-indent: 33; /* indent on grandchild items */
9
9
  --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
10
10
  --nav-color-item-bg-enabled: var(--modes-color-none);
11
+ --nav-color-item-bg-hover: var(--modes-color-interactive-primary-frozen-nav-hover);
11
12
  --nav-color-leftnav-container-bg-default: var(--modes-color-generic-bg-nought); /* bg of horizontal nav variant that launches the left nav */
12
13
  --nav-color-leftnav-item-bg-active: var(--modes-color-interactive-nav-active);
13
14
  --nav-color-leftnav-item-bg-enabled: var(--modes-color-none);
@@ -34,9 +35,7 @@
34
35
  --nav-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
35
36
  --nav-color-item-bg-active: var(--modes-color-interactive-monochrome-active);
36
37
  --nav-color-item-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt);
37
- --nav-color-item-bg-hover: var(--modes-color-interactive-monochrome-hover-alt);
38
38
  --nav-color-item-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
39
- --nav-color-item-label-hover: var(--modes-color-interactive-monochrome-with-hover);
40
39
  --nav-color-menu-bg-default: var(--modes-color-generic-bg-faint); /* menu (level 1) nav bg */
41
40
  --nav-color-menu-bg-alt: var(--modes-color-generic-bg-delicate); /* level 2 nav bg */
42
41
  --nav-color-menu-bg-alt2: var(--modes-color-generic-bg-soft); /* level 3 nav bg */
@@ -63,7 +62,7 @@
63
62
  --nav-color-topnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
64
63
  --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
65
64
  --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape), */
66
- --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
65
+ --nav-radius-menumodal: var(--global-radius-interactive-m); /* Menu on mobile */
67
66
  --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
68
67
  --nav-radius-modal-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
69
68
  --nav-radius-topnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
@@ -156,4 +155,5 @@
156
155
  --nav-space-topnav-parentitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
157
156
  --nav-space-topnav-parentitem-xg-m: var(--global-space-micro-s); /* gap within horizontal parent items */
158
157
  --nav-space-topnav-parentitem-y-m: calc(var(--global-space-macro-xxxs) / 2); /* vertical padding on stacked parent items */
158
+ --nav-color-item-label-hover: var(--modes-color-interactive-primary-frozen-nav-label-hover);
159
159
  }
@@ -18,11 +18,7 @@
18
18
  --popover-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
19
19
  --popover-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
20
20
  --popover-boxshadow-container: var(--global-boxshadow-container-near); /* REF'D IN FORM. Popover container for Button popover, Button split, (and Form calendar, color picker, dropdown) */
21
- --popover-color-bg-active: var(--modes-color-interactive-monochrome-active); /* previously action minor 850 */
22
- --popover-color-bg-activealt: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM. */
23
- --popover-color-bg-hover: var(--modes-color-interactive-monochrome-hover-alt); /* REF'D IN FORM. */
24
- --popover-color-label-activealt: var(--modes-color-interactive-monochrome-with-hover);
25
- --popover-color-label-hover: var(--modes-color-interactive-monochrome-with-hover);
21
+ --popover-color-bg-active: var(--modes-color-interactive-monochrome-frozen-active);
26
22
  --popover-color-submenu-bg-default: var(--modes-color-generic-bg-faint); /* popover small screen submenu container bg */
27
23
  --popover-size-icon-m: var(--global-size-icon-m);
28
24
  --popover-size-item-s: var(--global-size-macro-s); /* REF'D IN FORM. Menu item min height. */
@@ -51,9 +47,13 @@
51
47
  --popover-space-submenu-x-s: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
52
48
  --popover-space-submenu-x-m: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
53
49
  --popover-space-submenu-x-l: var(--global-space-macro-xs); /* Right left padding on small screen submenu popover container. */
50
+ --popover-color-bg-activealt: var(--modes-color-interactive-monochrome-frozen-hover-alt);
51
+ --popover-color-bg-hover: var(--modes-color-interactive-monochrome-frozen-hover-alt);
54
52
  --popover-color-label-active: var(--modes-color-interactive-monochrome-with-active);
53
+ --popover-color-label-activealt: var(--modes-color-interactive-monochrome-frozen-with-hover);
55
54
  --popover-color-label-disabled: var(--modes-color-interactive-inactive-content);
56
- --popover-color-label-enabled: var(--modes-color-interactive-monochrome-default-alt);
55
+ --popover-color-label-hover: var(--modes-color-interactive-monochrome-default);
56
+ --popover-color-label-enabled: var(--modes-color-interactive-monochrome-default);
57
57
  --popover-size-menu-minwidth-s: calc(var(--container-size-responsive-m) / 2); /* minwidth of small size popover menu container */
58
58
  --popover-size-menu-minwidth-m: var(--container-size-responsive-xs); /* minwidth of medium size popover menu container */
59
59
  --popover-size-menu-minwidth-l: var(--container-size-responsive-s); /* minwidth of large size popover menu container */
@@ -20,12 +20,14 @@
20
20
  --progress-radius-stepindicator: var(--global-radius-circle); /* step indicator circles */
21
21
  --progress-radius-carouselselector: var(--global-radius-circle); /* Carousel (selector dot) */
22
22
  --progress-radius-skeleton-circle: var(--global-radius-circle); /* Used to represent circular elements such as profiles, badges etc */
23
+ --progress-color-bg-default: var(--modes-color-interactive-progress-frozen-bg-alt);
23
24
  --progress-color-fg-ai: var(--modes-color-interactive-ai-default); /* For progress ring in ai buttons */
24
25
  --progress-color-fg-alt: var(--modes-color-status-positive-default);
25
26
  --progress-color-fg-caution: var(--modes-color-status-caution-default);
26
27
  --progress-color-fg-error: var(--modes-color-status-negative-default);
27
28
  --progress-color-fg-info: var(--modes-color-status-info-default);
28
29
  --progress-color-datavis-fg-default: var(--modes-color-status-custom-teal-default);
30
+ --progress-color-loader-bg-default: var(--modes-color-interactive-progress-frozen-bg);
29
31
  --progress-color-loader-fg-error: var(--modes-color-status-negative-default);
30
32
  --progress-color-loader-fg-complete: var(--modes-color-status-positive-default);
31
33
  --progress-color-stepflow-bg-complete: var(--modes-color-status-positive-default);
@@ -43,13 +45,12 @@
43
45
  --progress-typography-responsive-default-s: var(--global-typography-responsive-component-moderate-s);
44
46
  --progress-typography-responsive-default-m: var(--global-typography-responsive-component-moderate-m);
45
47
  --progress-typography-responsive-default-l: var(--global-typography-responsive-component-moderate-l);
46
- --progress-color-bg-default: var(--modes-color-interactive-progress-bg);
48
+ --progress-color-border-default: var(--modes-color-generic-fg-frozen-soft);
47
49
  --progress-color-fg-alt2: var(--modes-color-generic-content-firm);
48
- --progress-color-fg-default: var(--modes-color-interactive-monochrome-active);
50
+ --progress-color-fg-default: var(--modes-color-generic-fg-frozen-soft);
49
51
  --progress-color-label-alt: var(--modes-color-generic-content-firm);
50
52
  --progress-color-label-default: var(--modes-color-generic-content-harsh);
51
- --progress-color-loader-bg-default: var(--modes-color-interactive-progress-bg);
52
- --progress-color-loader-fg-default: var(--modes-color-interactive-monochrome-active); /* used for loader standard loader spinner */
53
+ --progress-color-loader-fg-default: var(--modes-color-interactive-primary-frozen-default); /* used for loader standard loader spinner */
53
54
  --progress-color-loader-inverse-bg-default: var(--modes-color-interactive-progress-bg-alt); /* used for inverse loader bgs */
54
55
  --progress-color-stepflow-bg-active: var(--modes-color-interactive-monochrome-active);
55
56
  --progress-color-stepflow-bg-default: var(--modes-color-generic-fg-nought);
@@ -76,7 +77,6 @@
76
77
  --progress-size-stepindicator-bar: var(--global-size-micro-xxs); /* step indicator bar */
77
78
  --progress-size-stepindicator-stepcircle-s: var(--global-size-macro-xs); /* M size step indicator */
78
79
  --progress-size-stepindicator-stepcircle-m: var(--global-size-macro-s); /* M size step indicator */
79
- --progress-color-border-default: var(--modes-color-generic-fg-soft);
80
80
  --progress-color-loader-inverse-fg-default: var(--modes-color-interactive-monochrome-with-active); /* used on inverse loading spinner */
81
81
  --progress-color-stepflow-border-default: var(--modes-color-generic-fg-soft);
82
82
  --progress-color-stepindicator-border-default: var(--modes-color-generic-fg-soft);
@@ -3,34 +3,29 @@
3
3
  */
4
4
 
5
5
  :root {
6
+ --status-color-message-global-info-bg-default: var(--modes-color-status-info-frozenglobal-default); /* Global message bg */
7
+ --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-frozenglobal-default); /* Global message bg */
6
8
  --status-radius-none: var(--global-radius-none); /* Pill (embedded element inner corners) */
7
9
  --status-color-none: var(--modes-color-none); /* transparent override used for hiding colors when needed. */
8
10
  --status-color-message-contextual-bg: var(--modes-color-generic-bg-nought);
9
11
  --status-color-message-contextual-icon: var(--modes-color-generic-bg-nought); /* decorative icon on standard contextual messages */
10
12
  --status-color-message-contextual-icon-alt: var(--modes-color-status-neutral-default); /* icon on neutral status dialogs */
11
- --status-color-message-contextual-ai-bg-alt: var(--modes-color-status-neutral-default-alt);
12
13
  --status-color-message-contextual-callout-bg-alt: var(--modes-color-status-callout-default-alt); /* Subtle message bg */
13
14
  --status-color-message-contextual-error-bg-default: var(--modes-color-status-negative-default);
14
- --status-color-message-contextual-error-bg-alt: var(--modes-color-status-negative-default-alt); /* Subtle message bg */
15
15
  --status-color-message-contextual-error-border-default: var(--modes-color-status-negative-default);
16
16
  --status-color-message-contextual-error-icon: var(--modes-color-status-negative-default); /* Icon on tinted bgs */
17
17
  --status-color-message-contextual-info-bg-default: var(--modes-color-status-info-default);
18
- --status-color-message-contextual-info-bg-alt: var(--modes-color-status-info-default-alt); /* Subtle message bg */
19
18
  --status-color-message-contextual-info-border-default: var(--modes-color-status-info-default);
20
19
  --status-color-message-contextual-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
21
20
  --status-color-message-contextual-success-bg-default: var(--modes-color-status-positive-default);
22
- --status-color-message-contextual-success-bg-alt: var(--modes-color-status-positive-default-alt); /* Subtle message bg */
23
21
  --status-color-message-contextual-success-border-default: var(--modes-color-status-positive-default);
24
22
  --status-color-message-contextual-success-icon: var(--modes-color-status-positive-default); /* Icon on tinted bgs */
25
23
  --status-color-message-contextual-warning-bg-default: var(--modes-color-status-caution-default);
26
- --status-color-message-contextual-warning-bg-alt: var(--modes-color-status-caution-default-alt); /* Subtle message bg */
27
24
  --status-color-message-contextual-warning-border-default: var(--modes-color-status-caution-default);
28
25
  --status-color-message-contextual-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
29
26
  --status-color-message-global-callout-bg-default: var(--modes-color-status-callout-default-alt); /* Global message bg */
30
- --status-color-message-global-info-bg-default: var(--modes-color-status-info-default-alt); /* Global message bg */
31
- --status-color-message-global-info-icon: var(--modes-color-status-info-default); /* Icon on tinted bgs */
32
- --status-color-message-global-warning-bg-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
33
- --status-color-message-global-warning-icon: var(--modes-color-status-caution-default); /* Icon on tinted bgs */
27
+ --status-color-message-global-info-bg-hover: var(--modes-color-status-info-frozenglobal-hover); /* Global message bg */
28
+ --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-frozenglobal-hover); /* Global message bg */
34
29
  --status-color-pill-custom-blue-bg-default: var(--modes-color-status-custom-blue-default);
35
30
  --status-color-pill-custom-blue-bg-alt-default: var(--modes-color-status-custom-blue-default-alt); /* outline pill bg */
36
31
  --status-color-pill-custom-blue-border-default: var(--modes-color-status-custom-blue-default);
@@ -62,7 +57,6 @@
62
57
  --status-color-pill-custom-slate-bg-alt-default: var(--modes-color-status-custom-slate-default-alt); /* outline pill bg */
63
58
  --status-color-pill-custom-slate-border-default: var(--modes-color-status-custom-slate-default);
64
59
  --status-color-pill-error-bg-default: var(--modes-color-status-negative-default);
65
- --status-color-pill-error-bg-alt-default: var(--modes-color-status-negative-default-alt); /* outline pill bg */
66
60
  --status-color-pill-error-border-default: var(--modes-color-status-negative-default);
67
61
  --status-color-pill-error-inverse-bg-default: var(--modes-color-status-negative-inverse-default);
68
62
  --status-color-pill-error-inverse-bg-alt-default: var(--modes-color-status-negative-inverse-default-alt); /* outline pill bg */
@@ -74,25 +68,22 @@
74
68
  --status-color-pill-important-inverse-bg-alt-default: var(--modes-color-status-important-inverse-default-alt); /* outline pill bg */
75
69
  --status-color-pill-important-inverse-border-default: var(--modes-color-status-important-inverse-default);
76
70
  --status-color-pill-info-bg-default: var(--modes-color-status-info-default);
77
- --status-color-pill-info-bg-alt-default: var(--modes-color-status-info-default-alt); /* outline pill bg */
78
71
  --status-color-pill-info-border-default: var(--modes-color-status-info-default);
79
72
  --status-color-pill-info-inverse-bg-default: var(--modes-color-status-info-inverse-default);
80
73
  --status-color-pill-info-inverse-bg-alt-default: var(--modes-color-status-info-inverse-default-alt); /* outline pill bg */
81
74
  --status-color-pill-info-inverse-border-default: var(--modes-color-status-info-inverse-default);
82
- --status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-default);
83
- --status-color-pill-neutral-bg-alt-default: var(--modes-color-status-neutral-default-alt); /* outline pill bg */
84
- --status-color-pill-neutral-border-default: var(--modes-color-status-neutral-default);
75
+ --status-color-pill-neutral-bg-default: var(--modes-color-status-neutral-frozen-default);
76
+ --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-frozen-hover);
77
+ --status-color-pill-neutral-border-default: var(--modes-color-status-neutral-frozen-default);
85
78
  --status-color-pill-neutral-inverse-bg-default: var(--modes-color-status-neutral-inverse-default);
86
79
  --status-color-pill-neutral-inverse-bg-alt-default: var(--modes-color-status-neutral-inverse-default-alt); /* outline pill bg */
87
80
  --status-color-pill-neutral-inverse-border-default: var(--modes-color-status-neutral-inverse-default);
88
81
  --status-color-pill-success-bg-default: var(--modes-color-status-positive-default);
89
- --status-color-pill-success-bg-alt-default: var(--modes-color-status-positive-default-alt); /* outline pill bg */
90
82
  --status-color-pill-success-border-default: var(--modes-color-status-positive-default);
91
83
  --status-color-pill-success-inverse-bg-default: var(--modes-color-status-positive-inverse-default);
92
84
  --status-color-pill-success-inverse-bg-alt-default: var(--modes-color-status-positive-inverse-default-alt); /* outline pill bg */
93
85
  --status-color-pill-success-inverse-border-default: var(--modes-color-status-positive-inverse-default);
94
86
  --status-color-pill-warning-bg-default: var(--modes-color-status-caution-default);
95
- --status-color-pill-warning-bg-alt-default: var(--modes-color-status-caution-default-alt); /* Global message bg */
96
87
  --status-color-pill-warning-border-default: var(--modes-color-status-caution-default);
97
88
  --status-color-pill-warning-inverse-bg-default: var(--modes-color-status-caution-inverse-default);
98
89
  --status-color-pill-warning-inverse-bg-alt-default: var(--modes-color-status-caution-inverse-default-alt); /* Global message bg */
@@ -117,11 +108,14 @@
117
108
  --status-typography-responsive-heading-l: var(--global-typography-responsive-component-firm-l);
118
109
  --status-color-message-contextual-text: var(--modes-color-status-content-with-hover-alt); /* Message text. */
119
110
  --status-color-message-contextual-ai-bg-default: var(--modes-color-status-ai-default-alt);
111
+ --status-color-message-contextual-ai-bg-alt: var(--status-color-none); /* Subtle message bg */
120
112
  --status-color-message-contextual-ai-border-default: var(--modes-color-status-ai-default-alt);
113
+ --status-color-message-contextual-error-bg-alt: var(--status-color-none); /* Subtle message bg */
114
+ --status-color-message-contextual-info-bg-alt: var(--status-color-none); /* Subtle message bg */
115
+ --status-color-message-contextual-success-bg-alt: var(--status-color-none); /* Subtle message bg */
116
+ --status-color-message-contextual-warning-bg-alt: var(--status-color-none); /* Subtle message bg */
121
117
  --status-color-message-global-label-hover: var(--modes-color-interactive-monochrome-with-hover);
122
118
  --status-color-message-global-callout-bg-hover: var(--modes-color-status-callout-hover-alt); /* global message bg hover */
123
- --status-color-message-global-info-bg-hover: var(--modes-color-status-info-hover-alt);
124
- --status-color-message-global-warning-bg-hover: var(--modes-color-status-caution-hover-alt);
125
119
  --status-color-pill-custom-blue-bg-alt-hover: var(--modes-color-status-custom-blue-hover-alt);
126
120
  --status-color-pill-custom-blue-bg-hover: var(--modes-color-status-custom-blue-hover);
127
121
  --status-color-pill-custom-teal-bg-alt-hover: var(--modes-color-status-custom-teal-hover-alt);
@@ -142,6 +136,7 @@
142
136
  --status-color-pill-custom-gray-bg-hover: var(--modes-color-status-custom-gray-hover);
143
137
  --status-color-pill-custom-slate-bg-alt-hover: var(--modes-color-status-custom-slate-hover-alt);
144
138
  --status-color-pill-custom-slate-bg-hover: var(--modes-color-status-custom-slate-hover);
139
+ --status-color-pill-error-bg-alt-default: var(--status-color-none); /* outline pill bg */
145
140
  --status-color-pill-error-bg-alt-hover: var(--modes-color-status-negative-hover-alt);
146
141
  --status-color-pill-error-bg-hover: var(--modes-color-status-negative-hover);
147
142
  --status-color-pill-error-inverse-bg-alt-hover: var(--modes-color-status-negative-inverse-hover-alt);
@@ -152,30 +147,35 @@
152
147
  --status-color-pill-important-bg-hover: var(--modes-color-status-important-hover);
153
148
  --status-color-pill-important-inverse-bg-alt-hover: var(--modes-color-status-important-inverse-hover-alt);
154
149
  --status-color-pill-important-inverse-bg-hover: var(--modes-color-status-important-inverse-hover);
150
+ --status-color-pill-info-bg-alt-default: var(--status-color-none); /* outline pill bg */
155
151
  --status-color-pill-info-bg-alt-hover: var(--modes-color-status-info-hover-alt);
156
152
  --status-color-pill-info-bg-hover: var(--modes-color-status-info-hover);
157
153
  --status-color-pill-info-inverse-bg-alt-hover: var(--modes-color-status-info-inverse-hover-alt);
158
154
  --status-color-pill-info-inverse-bg-hover: var(--modes-color-status-info-inverse-hover);
159
- --status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-hover-alt);
160
- --status-color-pill-neutral-bg-hover: var(--modes-color-status-neutral-hover);
155
+ --status-color-pill-neutral-bg-alt-default: var(--status-color-none); /* outline pill bg */
156
+ --status-color-pill-neutral-bg-alt-hover: var(--modes-color-status-neutral-frozen-hover-alt);
161
157
  --status-color-pill-neutral-inverse-bg-alt-hover: var(--modes-color-status-neutral-inverse-hover-alt);
162
158
  --status-color-pill-neutral-inverse-bg-hover: var(--modes-color-status-neutral-inverse-hover);
163
159
  --status-color-pill-readonly-label: var(--modes-color-generic-content-firm); /* Pill (all types, readonly, when nested in disabled parent components) */
160
+ --status-color-pill-success-bg-alt-default: var(--status-color-none); /* outline pill bg */
164
161
  --status-color-pill-success-bg-alt-hover: var(--modes-color-status-positive-hover-alt);
165
162
  --status-color-pill-success-bg-hover: var(--modes-color-status-positive-hover);
166
163
  --status-color-pill-success-inverse-bg-alt-hover: var(--modes-color-status-positive-inverse-hover-alt);
167
164
  --status-color-pill-success-inverse-bg-hover: var(--modes-color-status-positive-inverse-hover);
165
+ --status-color-pill-warning-bg-alt-default: var(--status-color-none); /* Global message bg */
168
166
  --status-color-pill-warning-bg-alt-hover: var(--modes-color-status-caution-hover-alt);
169
167
  --status-color-pill-warning-bg-hover: var(--modes-color-status-caution-hover);
170
168
  --status-color-pill-warning-inverse-bg-alt-hover: var(--modes-color-status-caution-inverse-hover-alt);
171
169
  --status-color-pill-warning-inverse-bg-hover: var(--modes-color-status-caution-inverse-hover);
172
- --status-color-rating-bg-default: var(--modes-color-status-reviews-default);
173
- --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-default-alt);
174
- --status-color-rating-bg-hover: var(--modes-color-status-reviews-hover);
175
- --status-color-rating-border-default: var(--modes-color-status-reviews-default);
170
+ --status-color-rating-bg-default: var(--modes-color-status-reviews-frozen-default);
171
+ --status-color-rating-bg-default-alt: var(--modes-color-status-reviews-frozen-default-alt);
172
+ --status-color-rating-bg-hover: var(--modes-color-status-reviews-frozen-hover);
173
+ --status-color-rating-border-default: var(--modes-color-status-reviews-frozen-default);
176
174
  --status-color-message-contextual-callout-icon: var(--modes-color-status-content-with-default-alt);
177
175
  --status-color-message-global-label-default: var(--modes-color-status-content-with-default-alt);
178
176
  --status-color-message-global-callout-icon: var(--modes-color-status-content-with-default-alt); /* Icon on tinted bgs */
177
+ --status-color-message-global-info-icon: var(--modes-color-status-content-with-default-alt);
178
+ --status-color-message-global-warning-icon: var(--modes-color-status-content-with-default-alt);
179
179
  --status-color-pill-generic-label-default: var(--modes-color-status-content-with-default);
180
180
  --status-color-pill-generic-label-hover: var(--modes-color-status-content-with-hover);
181
181
  --status-color-pill-generic-label-alt-default: var(--modes-color-status-content-with-default-alt);
@@ -190,7 +190,7 @@
190
190
  --status-size-message-global-m: var(--global-size-macro-m); /* Global message minheight */
191
191
  --status-size-icon-m: var(--global-size-icon-m);
192
192
  --status-radius-message: var(--global-radius-container-m); /* Message */
193
- --status-radius-pill: var(--global-radius-container-sm); /* Pill (outer corners) */
193
+ --status-radius-pill: var(--global-radius-container-xs); /* Pill (outer corners) */
194
194
  --status-borderwidth-pill: var(--global-borderwidth-s); /* Outlined Pill border */
195
195
  --status-borderwidth-message: var(--global-borderwidth-xs); /* Contextual message and AI inline border */
196
196
  --status-space-none: var(--global-space-none);