@seed-design/css 2.9.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (363) hide show
  1. package/README.md +2 -2
  2. package/all.css +928 -1493
  3. package/all.layered.css +928 -1493
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/base.css +45 -4
  7. package/base.layered.css +45 -4
  8. package/base.layered.min.css +1 -1
  9. package/base.min.css +1 -1
  10. package/package.json +8 -11
  11. package/recipes/accordion.css +3 -0
  12. package/recipes/accordion.layered.css +4 -0
  13. package/recipes/action-button.css +19 -19
  14. package/recipes/action-button.layered.css +19 -19
  15. package/recipes/alert-dialog.css +101 -0
  16. package/recipes/alert-dialog.d.ts +24 -0
  17. package/recipes/alert-dialog.layered.css +114 -0
  18. package/recipes/alert-dialog.layered.mjs +66 -0
  19. package/recipes/alert-dialog.mjs +66 -0
  20. package/recipes/badge.css +83 -27
  21. package/recipes/badge.d.ts +1 -1
  22. package/recipes/badge.layered.css +63 -8
  23. package/recipes/badge.layered.mjs +8 -0
  24. package/recipes/badge.mjs +8 -0
  25. package/recipes/checkmark.css +5 -5
  26. package/recipes/checkmark.layered.css +5 -5
  27. package/recipes/chip-tabs.css +8 -8
  28. package/recipes/chip-tabs.layered.css +8 -8
  29. package/recipes/chip.css +10 -10
  30. package/recipes/chip.layered.css +10 -10
  31. package/recipes/contextual-floating-button.css +8 -8
  32. package/recipes/contextual-floating-button.layered.css +8 -8
  33. package/recipes/date-picker.css +29 -16
  34. package/recipes/date-picker.d.ts +1 -1
  35. package/recipes/date-picker.layered.css +34 -15
  36. package/recipes/date-picker.layered.mjs +6 -14
  37. package/recipes/date-picker.mjs +6 -14
  38. package/recipes/dialog.css +206 -46
  39. package/recipes/dialog.d.ts +3 -3
  40. package/recipes/dialog.layered.css +228 -46
  41. package/recipes/dialog.layered.mjs +12 -7
  42. package/recipes/dialog.mjs +12 -7
  43. package/recipes/floating-action-button.css +2 -2
  44. package/recipes/floating-action-button.layered.css +2 -2
  45. package/recipes/help-bubble.css +9 -6
  46. package/recipes/help-bubble.layered.css +10 -6
  47. package/recipes/menu-item.css +3 -0
  48. package/recipes/menu-item.layered.css +4 -0
  49. package/recipes/menu-sheet-item.css +3 -0
  50. package/recipes/menu-sheet-item.layered.css +4 -0
  51. package/recipes/notification-badge.css +1 -1
  52. package/recipes/notification-badge.layered.css +1 -1
  53. package/recipes/page-banner.css +32 -29
  54. package/recipes/page-banner.layered.css +23 -19
  55. package/recipes/pagination-page-item.css +4 -4
  56. package/recipes/pagination-page-item.layered.css +4 -4
  57. package/recipes/{content-dialog.css → popover.css} +77 -104
  58. package/recipes/popover.d.ts +21 -0
  59. package/recipes/{content-dialog.layered.css → popover.layered.css} +80 -111
  60. package/recipes/popover.layered.mjs +60 -0
  61. package/recipes/popover.mjs +60 -0
  62. package/recipes/radiomark.css +5 -5
  63. package/recipes/radiomark.layered.css +5 -5
  64. package/recipes/segmented-control.css +3 -0
  65. package/recipes/segmented-control.layered.css +4 -0
  66. package/recipes/select-box.css +4 -0
  67. package/recipes/select-box.layered.css +5 -0
  68. package/recipes/select-item.css +3 -0
  69. package/recipes/select-item.layered.css +4 -0
  70. package/recipes/select-trigger.css +3 -0
  71. package/recipes/select-trigger.layered.css +4 -0
  72. package/recipes/side-panel.css +0 -33
  73. package/recipes/side-panel.layered.css +0 -33
  74. package/recipes/slider-tick.css +1 -1
  75. package/recipes/slider-tick.layered.css +1 -1
  76. package/recipes/slider.css +4 -4
  77. package/recipes/slider.layered.css +4 -4
  78. package/recipes/snackbar.css +2 -2
  79. package/recipes/snackbar.layered.css +2 -2
  80. package/recipes/switchmark.css +2 -2
  81. package/recipes/switchmark.layered.css +2 -2
  82. package/recipes/time-picker.css +2 -5
  83. package/recipes/time-picker.d.ts +1 -1
  84. package/recipes/time-picker.layered.css +2 -3
  85. package/recipes/time-picker.layered.mjs +0 -12
  86. package/recipes/time-picker.mjs +0 -12
  87. package/recipes/toggle-button.css +4 -4
  88. package/recipes/toggle-button.layered.css +4 -4
  89. package/recipes/wheel-picker.css +42 -3
  90. package/recipes/wheel-picker.d.ts +5 -2
  91. package/recipes/wheel-picker.layered.css +47 -3
  92. package/recipes/wheel-picker.layered.mjs +13 -2
  93. package/recipes/wheel-picker.mjs +13 -2
  94. package/vars/color/bg.d.ts +8 -4
  95. package/vars/color/bg.mjs +3 -1
  96. package/vars/color/fg.d.ts +13 -1
  97. package/vars/color/fg.mjs +6 -0
  98. package/vars/component/index.d.ts +1 -104
  99. package/vars/component/index.mjs +1 -104
  100. package/recipes/action-chip.css +0 -75
  101. package/recipes/action-chip.d.ts +0 -26
  102. package/recipes/action-chip.layered.css +0 -84
  103. package/recipes/action-chip.layered.mjs +0 -51
  104. package/recipes/action-chip.mjs +0 -51
  105. package/recipes/action-sheet-item.css +0 -32
  106. package/recipes/action-sheet-item.d.ts +0 -22
  107. package/recipes/action-sheet-item.layered.css +0 -38
  108. package/recipes/action-sheet-item.layered.mjs +0 -29
  109. package/recipes/action-sheet-item.mjs +0 -29
  110. package/recipes/action-sheet.css +0 -125
  111. package/recipes/action-sheet.d.ts +0 -21
  112. package/recipes/action-sheet.layered.css +0 -134
  113. package/recipes/action-sheet.layered.mjs +0 -60
  114. package/recipes/action-sheet.mjs +0 -60
  115. package/recipes/content-dialog.d.ts +0 -24
  116. package/recipes/content-dialog.layered.mjs +0 -71
  117. package/recipes/content-dialog.mjs +0 -71
  118. package/recipes/control-chip.css +0 -88
  119. package/recipes/control-chip.d.ts +0 -26
  120. package/recipes/control-chip.layered.css +0 -99
  121. package/recipes/control-chip.layered.mjs +0 -51
  122. package/recipes/control-chip.mjs +0 -51
  123. package/recipes/extended-action-sheet-item.css +0 -31
  124. package/recipes/extended-action-sheet-item.d.ts +0 -22
  125. package/recipes/extended-action-sheet-item.layered.css +0 -38
  126. package/recipes/extended-action-sheet-item.layered.mjs +0 -29
  127. package/recipes/extended-action-sheet-item.mjs +0 -29
  128. package/recipes/extended-action-sheet.css +0 -123
  129. package/recipes/extended-action-sheet.d.ts +0 -21
  130. package/recipes/extended-action-sheet.layered.css +0 -132
  131. package/recipes/extended-action-sheet.layered.mjs +0 -64
  132. package/recipes/extended-action-sheet.mjs +0 -64
  133. package/recipes/extended-fab.css +0 -66
  134. package/recipes/extended-fab.d.ts +0 -26
  135. package/recipes/extended-fab.layered.css +0 -79
  136. package/recipes/extended-fab.layered.mjs +0 -34
  137. package/recipes/extended-fab.mjs +0 -34
  138. package/recipes/fab.css +0 -31
  139. package/recipes/fab.d.ts +0 -19
  140. package/recipes/fab.layered.css +0 -37
  141. package/recipes/fab.layered.mjs +0 -22
  142. package/recipes/fab.mjs +0 -22
  143. package/recipes/inline-banner.css +0 -180
  144. package/recipes/inline-banner.d.ts +0 -24
  145. package/recipes/inline-banner.layered.css +0 -161
  146. package/recipes/inline-banner.layered.mjs +0 -64
  147. package/recipes/inline-banner.mjs +0 -64
  148. package/recipes/link-content.css +0 -41
  149. package/recipes/link-content.d.ts +0 -26
  150. package/recipes/link-content.layered.css +0 -48
  151. package/recipes/link-content.layered.mjs +0 -35
  152. package/recipes/link-content.mjs +0 -35
  153. package/recipes/wheel-picker-public.css +0 -124
  154. package/recipes/wheel-picker-public.d.ts +0 -24
  155. package/recipes/wheel-picker-public.layered.css +0 -144
  156. package/recipes/wheel-picker-public.layered.mjs +0 -63
  157. package/recipes/wheel-picker-public.mjs +0 -63
  158. package/vars/component/accordion-item.d.ts +0 -132
  159. package/vars/component/accordion-item.mjs +0 -126
  160. package/vars/component/accordion.d.ts +0 -22
  161. package/vars/component/accordion.mjs +0 -16
  162. package/vars/component/action-button.d.ts +0 -660
  163. package/vars/component/action-button.mjs +0 -541
  164. package/vars/component/action-chip.d.ts +0 -132
  165. package/vars/component/action-chip.mjs +0 -132
  166. package/vars/component/action-sheet-close-button.d.ts +0 -23
  167. package/vars/component/action-sheet-close-button.mjs +0 -23
  168. package/vars/component/action-sheet-item.d.ts +0 -36
  169. package/vars/component/action-sheet-item.mjs +0 -36
  170. package/vars/component/action-sheet.d.ts +0 -46
  171. package/vars/component/action-sheet.mjs +0 -46
  172. package/vars/component/alert-dialog.d.ts +0 -52
  173. package/vars/component/alert-dialog.mjs +0 -52
  174. package/vars/component/attachment-input-dropzone.d.ts +0 -32
  175. package/vars/component/attachment-input-dropzone.mjs +0 -30
  176. package/vars/component/attachment-input-item-action-button.d.ts +0 -37
  177. package/vars/component/attachment-input-item-action-button.mjs +0 -37
  178. package/vars/component/attachment-input-item-remove-button.d.ts +0 -28
  179. package/vars/component/attachment-input-item-remove-button.mjs +0 -28
  180. package/vars/component/attachment-input-item.d.ts +0 -103
  181. package/vars/component/attachment-input-item.mjs +0 -102
  182. package/vars/component/attachment-input-trigger.d.ts +0 -46
  183. package/vars/component/attachment-input-trigger.mjs +0 -46
  184. package/vars/component/attachment-input.d.ts +0 -14
  185. package/vars/component/attachment-input.mjs +0 -12
  186. package/vars/component/avatar-stack.d.ts +0 -110
  187. package/vars/component/avatar-stack.mjs +0 -110
  188. package/vars/component/avatar.d.ts +0 -204
  189. package/vars/component/avatar.mjs +0 -162
  190. package/vars/component/badge.d.ts +0 -316
  191. package/vars/component/badge.mjs +0 -236
  192. package/vars/component/bottom-sheet-close-button.d.ts +0 -21
  193. package/vars/component/bottom-sheet-close-button.mjs +0 -21
  194. package/vars/component/bottom-sheet-handle.d.ts +0 -24
  195. package/vars/component/bottom-sheet-handle.mjs +0 -24
  196. package/vars/component/bottom-sheet.d.ts +0 -86
  197. package/vars/component/bottom-sheet.mjs +0 -86
  198. package/vars/component/callout-close-button.d.ts +0 -81
  199. package/vars/component/callout-close-button.mjs +0 -63
  200. package/vars/component/callout.d.ts +0 -232
  201. package/vars/component/callout.mjs +0 -200
  202. package/vars/component/checkbox-group.d.ts +0 -9
  203. package/vars/component/checkbox-group.mjs +0 -9
  204. package/vars/component/checkbox.d.ts +0 -56
  205. package/vars/component/checkbox.mjs +0 -53
  206. package/vars/component/checkmark.d.ts +0 -195
  207. package/vars/component/checkmark.mjs +0 -165
  208. package/vars/component/chip-tablist.d.ts +0 -24
  209. package/vars/component/chip-tablist.mjs +0 -24
  210. package/vars/component/chip.d.ts +0 -321
  211. package/vars/component/chip.mjs +0 -303
  212. package/vars/component/content-placeholder.d.ts +0 -28
  213. package/vars/component/content-placeholder.mjs +0 -27
  214. package/vars/component/contextual-floating-button.d.ts +0 -144
  215. package/vars/component/contextual-floating-button.mjs +0 -132
  216. package/vars/component/control-chip.d.ts +0 -158
  217. package/vars/component/control-chip.mjs +0 -158
  218. package/vars/component/date-picker.d.ts +0 -103
  219. package/vars/component/date-picker.mjs +0 -103
  220. package/vars/component/dialog-close-button.d.ts +0 -24
  221. package/vars/component/dialog-close-button.mjs +0 -24
  222. package/vars/component/dialog.d.ts +0 -91
  223. package/vars/component/dialog.mjs +0 -83
  224. package/vars/component/divider.d.ts +0 -9
  225. package/vars/component/divider.mjs +0 -9
  226. package/vars/component/extended-action-sheet-close-button.d.ts +0 -24
  227. package/vars/component/extended-action-sheet-close-button.mjs +0 -24
  228. package/vars/component/extended-action-sheet-item.d.ts +0 -46
  229. package/vars/component/extended-action-sheet-item.mjs +0 -46
  230. package/vars/component/extended-action-sheet.d.ts +0 -55
  231. package/vars/component/extended-action-sheet.mjs +0 -55
  232. package/vars/component/extended-fab.d.ts +0 -88
  233. package/vars/component/extended-fab.mjs +0 -82
  234. package/vars/component/fab.d.ts +0 -21
  235. package/vars/component/fab.mjs +0 -21
  236. package/vars/component/field-label.d.ts +0 -25
  237. package/vars/component/field-label.mjs +0 -25
  238. package/vars/component/field.d.ts +0 -78
  239. package/vars/component/field.mjs +0 -72
  240. package/vars/component/floating-action-button.d.ts +0 -60
  241. package/vars/component/floating-action-button.mjs +0 -54
  242. package/vars/component/help-bubble.d.ts +0 -55
  243. package/vars/component/help-bubble.mjs +0 -52
  244. package/vars/component/identity-placeholder.d.ts +0 -12
  245. package/vars/component/identity-placeholder.mjs +0 -12
  246. package/vars/component/image-frame-floater.d.ts +0 -10
  247. package/vars/component/image-frame-floater.mjs +0 -9
  248. package/vars/component/image-frame-indicator.d.ts +0 -20
  249. package/vars/component/image-frame-indicator.mjs +0 -18
  250. package/vars/component/image-frame-reaction-button.d.ts +0 -60
  251. package/vars/component/image-frame-reaction-button.mjs +0 -51
  252. package/vars/component/image-frame.d.ts +0 -27
  253. package/vars/component/image-frame.mjs +0 -18
  254. package/vars/component/inline-banner.d.ts +0 -191
  255. package/vars/component/inline-banner.mjs +0 -191
  256. package/vars/component/input-button.d.ts +0 -162
  257. package/vars/component/input-button.mjs +0 -155
  258. package/vars/component/link-content.d.ts +0 -58
  259. package/vars/component/link-content.mjs +0 -58
  260. package/vars/component/list-header.d.ts +0 -29
  261. package/vars/component/list-header.mjs +0 -29
  262. package/vars/component/list-item.d.ts +0 -85
  263. package/vars/component/list-item.mjs +0 -84
  264. package/vars/component/manner-temp-badge.d.ts +0 -117
  265. package/vars/component/manner-temp-badge.mjs +0 -117
  266. package/vars/component/manner-temp.d.ts +0 -88
  267. package/vars/component/manner-temp.mjs +0 -88
  268. package/vars/component/menu-item.d.ts +0 -129
  269. package/vars/component/menu-item.mjs +0 -117
  270. package/vars/component/menu-sheet-close-button.d.ts +0 -24
  271. package/vars/component/menu-sheet-close-button.mjs +0 -24
  272. package/vars/component/menu-sheet-item.d.ts +0 -69
  273. package/vars/component/menu-sheet-item.mjs +0 -57
  274. package/vars/component/menu-sheet.d.ts +0 -56
  275. package/vars/component/menu-sheet.mjs +0 -56
  276. package/vars/component/menu.d.ts +0 -68
  277. package/vars/component/menu.mjs +0 -60
  278. package/vars/component/notification-badge.d.ts +0 -48
  279. package/vars/component/notification-badge.mjs +0 -42
  280. package/vars/component/page-banner-close-button.d.ts +0 -133
  281. package/vars/component/page-banner-close-button.mjs +0 -99
  282. package/vars/component/page-banner.d.ts +0 -385
  283. package/vars/component/page-banner.mjs +0 -339
  284. package/vars/component/pagination-button.d.ts +0 -33
  285. package/vars/component/pagination-button.mjs +0 -33
  286. package/vars/component/pagination-page-item.d.ts +0 -54
  287. package/vars/component/pagination-page-item.mjs +0 -54
  288. package/vars/component/progress-circle.d.ts +0 -88
  289. package/vars/component/progress-circle.mjs +0 -67
  290. package/vars/component/quantity-picker-button.d.ts +0 -78
  291. package/vars/component/quantity-picker-button.mjs +0 -78
  292. package/vars/component/quantity-picker.d.ts +0 -80
  293. package/vars/component/quantity-picker.mjs +0 -80
  294. package/vars/component/radio-group.d.ts +0 -9
  295. package/vars/component/radio-group.mjs +0 -9
  296. package/vars/component/radio.d.ts +0 -56
  297. package/vars/component/radio.mjs +0 -53
  298. package/vars/component/radiomark.d.ts +0 -117
  299. package/vars/component/radiomark.mjs +0 -117
  300. package/vars/component/reaction-button.d.ts +0 -136
  301. package/vars/component/reaction-button.mjs +0 -136
  302. package/vars/component/scroll-fog.d.ts +0 -78
  303. package/vars/component/scroll-fog.mjs +0 -78
  304. package/vars/component/segmented-control-indicator.d.ts +0 -24
  305. package/vars/component/segmented-control-indicator.mjs +0 -24
  306. package/vars/component/segmented-control-item.d.ts +0 -41
  307. package/vars/component/segmented-control-item.mjs +0 -41
  308. package/vars/component/segmented-control.d.ts +0 -11
  309. package/vars/component/segmented-control.mjs +0 -11
  310. package/vars/component/select-box-checkmark.d.ts +0 -40
  311. package/vars/component/select-box-checkmark.mjs +0 -40
  312. package/vars/component/select-box-group.d.ts +0 -10
  313. package/vars/component/select-box-group.mjs +0 -10
  314. package/vars/component/select-box.d.ts +0 -107
  315. package/vars/component/select-box.mjs +0 -102
  316. package/vars/component/select-item.d.ts +0 -101
  317. package/vars/component/select-item.mjs +0 -95
  318. package/vars/component/select-trigger.d.ts +0 -127
  319. package/vars/component/select-trigger.mjs +0 -120
  320. package/vars/component/select.d.ts +0 -62
  321. package/vars/component/select.mjs +0 -54
  322. package/vars/component/side-panel-close-button.d.ts +0 -24
  323. package/vars/component/side-panel-close-button.mjs +0 -24
  324. package/vars/component/side-panel.d.ts +0 -97
  325. package/vars/component/side-panel.mjs +0 -85
  326. package/vars/component/skeleton.d.ts +0 -80
  327. package/vars/component/skeleton.mjs +0 -62
  328. package/vars/component/slider-thumb.d.ts +0 -25
  329. package/vars/component/slider-thumb.mjs +0 -25
  330. package/vars/component/slider-tick.d.ts +0 -23
  331. package/vars/component/slider-tick.mjs +0 -23
  332. package/vars/component/slider.d.ts +0 -81
  333. package/vars/component/slider.mjs +0 -78
  334. package/vars/component/snackbar.d.ts +0 -65
  335. package/vars/component/snackbar.mjs +0 -65
  336. package/vars/component/switch.d.ts +0 -56
  337. package/vars/component/switch.mjs +0 -53
  338. package/vars/component/switchmark.d.ts +0 -114
  339. package/vars/component/switchmark.mjs +0 -112
  340. package/vars/component/tab.d.ts +0 -47
  341. package/vars/component/tab.mjs +0 -47
  342. package/vars/component/tablist.d.ts +0 -51
  343. package/vars/component/tablist.mjs +0 -51
  344. package/vars/component/tag-group-item.d.ts +0 -122
  345. package/vars/component/tag-group-item.mjs +0 -122
  346. package/vars/component/tag-group.d.ts +0 -34
  347. package/vars/component/tag-group.mjs +0 -34
  348. package/vars/component/text-button.d.ts +0 -23
  349. package/vars/component/text-button.mjs +0 -23
  350. package/vars/component/text-input.d.ts +0 -292
  351. package/vars/component/text-input.mjs +0 -263
  352. package/vars/component/time-picker.d.ts +0 -27
  353. package/vars/component/time-picker.mjs +0 -27
  354. package/vars/component/toggle-button.d.ts +0 -213
  355. package/vars/component/toggle-button.mjs +0 -207
  356. package/vars/component/top-navigation-icon-button.d.ts +0 -45
  357. package/vars/component/top-navigation-icon-button.mjs +0 -45
  358. package/vars/component/top-navigation-text-button.d.ts +0 -61
  359. package/vars/component/top-navigation-text-button.mjs +0 -60
  360. package/vars/component/top-navigation.d.ts +0 -118
  361. package/vars/component/top-navigation.mjs +0 -109
  362. package/vars/component/wheel-picker.d.ts +0 -72
  363. package/vars/component/wheel-picker.mjs +0 -72
package/recipes/dialog.mjs CHANGED
@@ -19,12 +19,12 @@ const dialogSlotNames = [
19
19
  "seed-dialog__header"
20
20
  ],
21
21
  [
22
- "footer",
23
- "seed-dialog__footer"
22
+ "body",
23
+ "seed-dialog__body"
24
24
  ],
25
25
  [
26
- "action",
27
- "seed-dialog__action"
26
+ "footer",
27
+ "seed-dialog__footer"
28
28
  ],
29
29
  [
30
30
  "title",
@@ -33,18 +33,23 @@ const dialogSlotNames = [
33
33
  [
34
34
  "description",
35
35
  "seed-dialog__description"
36
+ ],
37
+ [
38
+ "closeButton",
39
+ "seed-dialog__closeButton"
36
40
  ]
37
41
  ];
38
42
 
39
43
  const defaultVariant = {
40
- "skipAnimation": false
44
+ "size": "medium"
41
45
  };
42
46
 
43
47
  const compoundVariants = [];
44
48
 
45
49
  export const dialogVariantMap = {
46
- "skipAnimation": [
47
- false
50
+ "size": [
51
+ "medium",
52
+ "large"
48
53
  ]
49
54
  };
50
55
 
package/recipes/floating-action-button.css CHANGED
@@ -26,7 +26,7 @@
26
26
  background: var(--seed-color-bg-brand-solid);
27
27
  border-radius: var(--seed-radius-full);
28
28
  box-shadow: var(--seed-shadow-s3);
29
- color: var(--seed-color-palette-static-white);
29
+ color: var(--seed-color-fg-on-brand-solid);
30
30
  font-size: var(--seed-font-size-t5);
31
31
  line-height: var(--seed-line-height-t5);
32
32
  font-weight: var(--seed-font-weight-bold);
@@ -52,7 +52,7 @@
52
52
  align-items: center;
53
53
  justify-content: center;
54
54
  flex-shrink: 0;
55
- color: var(--seed-color-palette-static-white);
55
+ color: var(--seed-color-fg-on-brand-solid);
56
56
  transition: margin-right var(--seed-duration-d4) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing);
57
57
  }
58
58
  .seed-floating-action-button__label {
package/recipes/floating-action-button.layered.css CHANGED
@@ -28,7 +28,7 @@
28
28
  background: var(--seed-color-bg-brand-solid);
29
29
  border-radius: var(--seed-radius-full);
30
30
  box-shadow: var(--seed-shadow-s3);
31
- color: var(--seed-color-palette-static-white);
31
+ color: var(--seed-color-fg-on-brand-solid);
32
32
  font-size: var(--seed-font-size-t5);
33
33
  line-height: var(--seed-line-height-t5);
34
34
  font-weight: var(--seed-font-weight-bold);
@@ -57,7 +57,7 @@
57
57
  }
58
58
 
59
59
  .seed-floating-action-button__icon {
60
- color: var(--seed-color-palette-static-white);
60
+ color: var(--seed-color-fg-on-brand-solid);
61
61
  transition: margin-right var(--seed-duration-d4) var(--seed-timing-function-easing), width var(--seed-duration-d4) var(--seed-timing-function-easing), height var(--seed-duration-d4) var(--seed-timing-function-easing);
62
62
  flex-shrink: 0;
63
63
  justify-content: center;
package/recipes/help-bubble.css CHANGED
@@ -7,7 +7,7 @@
7
7
  display: flex;
8
8
  align-items: flex-start;
9
9
  box-sizing: border-box;
10
- background: var(--seed-color-bg-neutral-inverted);
10
+ background: var(--seed-color-bg-neutral-solid);
11
11
  padding-inline: var(--seed-dimension-x3);
12
12
  padding-block: var(--seed-dimension-x2_5);
13
13
  border-radius: var(--seed-radius-r3);
@@ -44,13 +44,16 @@
44
44
  .seed-help-bubble__content:is([hidden], [data-hidden]) {
45
45
  display: none !important;
46
46
  }
47
+ .seed-help-bubble__content:is(:focus, [data-focus]) {
48
+ outline: none;
49
+ }
47
50
  .seed-help-bubble__arrow {
48
51
  width: 12px;
49
52
  height: 12px;
50
53
  }
51
54
  .seed-help-bubble__arrowTip {
52
55
  display: block;
53
- fill: var(--seed-color-bg-neutral-inverted);
56
+ fill: var(--seed-color-bg-neutral-solid);
54
57
  width: 12px;
55
58
  height: 8px;
56
59
  }
@@ -63,14 +66,14 @@
63
66
  min-width: 0;
64
67
  }
65
68
  .seed-help-bubble__title {
66
- color: var(--seed-color-fg-neutral-inverted);
69
+ color: var(--seed-color-fg-on-neutral-solid);
67
70
  font-size: var(--seed-font-size-t3);
68
71
  font-weight: var(--seed-font-weight-bold);
69
72
  line-height: var(--seed-line-height-t3);
70
73
  white-space: pre-wrap;
71
74
  }
72
75
  .seed-help-bubble__description {
73
- color: var(--seed-color-fg-neutral-inverted);
76
+ color: var(--seed-color-fg-on-neutral-solid);
74
77
  font-size: var(--seed-font-size-t3);
75
78
  font-weight: var(--seed-font-weight-regular);
76
79
  line-height: var(--seed-line-height-t3);
@@ -87,9 +90,9 @@
87
90
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
88
91
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
89
92
  margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
90
- color: var(--seed-color-fg-neutral-inverted);
93
+ color: var(--seed-color-fg-on-neutral-solid);
91
94
  --seed-icon-size: var(--seed-dimension-x3_5);
92
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
95
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
93
96
  border-radius: var(--seed-radius-r3);
94
97
  }
95
98
  .seed-help-bubble__closeButton:is(:active, [data-active]) {
package/recipes/help-bubble.layered.css CHANGED
@@ -7,7 +7,7 @@
7
7
 
8
8
  .seed-help-bubble__content {
9
9
  box-sizing: border-box;
10
- background: var(--seed-color-bg-neutral-inverted);
10
+ background: var(--seed-color-bg-neutral-solid);
11
11
  padding-inline: var(--seed-dimension-x3);
12
12
  padding-block: var(--seed-dimension-x2_5);
13
13
  border-radius: var(--seed-radius-r3);
@@ -51,13 +51,17 @@
51
51
  display: none !important;
52
52
  }
53
53
 
54
+ .seed-help-bubble__content:is(:focus, [data-focus]) {
55
+ outline: none;
56
+ }
57
+
54
58
  .seed-help-bubble__arrow {
55
59
  width: 12px;
56
60
  height: 12px;
57
61
  }
58
62
 
59
63
  .seed-help-bubble__arrowTip {
60
- fill: var(--seed-color-bg-neutral-inverted);
64
+ fill: var(--seed-color-bg-neutral-solid);
61
65
  width: 12px;
62
66
  height: 8px;
63
67
  display: block;
@@ -73,7 +77,7 @@
73
77
  }
74
78
 
75
79
  .seed-help-bubble__title {
76
- color: var(--seed-color-fg-neutral-inverted);
80
+ color: var(--seed-color-fg-on-neutral-solid);
77
81
  font-size: var(--seed-font-size-t3);
78
82
  font-weight: var(--seed-font-weight-bold);
79
83
  line-height: var(--seed-line-height-t3);
@@ -81,7 +85,7 @@
81
85
  }
82
86
 
83
87
  .seed-help-bubble__description {
84
- color: var(--seed-color-fg-neutral-inverted);
88
+ color: var(--seed-color-fg-on-neutral-solid);
85
89
  font-size: var(--seed-font-size-t3);
86
90
  font-weight: var(--seed-font-weight-regular);
87
91
  line-height: var(--seed-line-height-t3);
@@ -94,9 +98,9 @@
94
98
  margin-left: calc(var(--seed-dimension-x1) - ((38px - var(--seed-dimension-x3_5)) / 2));
95
99
  margin-right: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2));
96
100
  margin-block: calc(-1 * ((38px - var(--seed-dimension-x3_5)) / 2) + var(--seed-dimension-x0_5));
97
- color: var(--seed-color-fg-neutral-inverted);
101
+ color: var(--seed-color-fg-on-neutral-solid);
98
102
  --seed-icon-size: var(--seed-dimension-x3_5);
99
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
103
+ --seed-icon-color: var(--seed-color-fg-on-neutral-solid);
100
104
  border-radius: var(--seed-radius-r3);
101
105
  background: none;
102
106
  border: none;
package/recipes/menu-item.css CHANGED
@@ -49,6 +49,9 @@
49
49
  border-radius: var(--seed-radius-r3);
50
50
  }
51
51
  }
52
+ .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
53
+ --seed-content-scale: var(--seed-feedback-scale);
54
+ }
52
55
  .seed-menu-item__root:is(:focus-visible, [data-focus-visible])::after {
53
56
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
54
57
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
package/recipes/menu-item.layered.css CHANGED
@@ -56,6 +56,10 @@
56
56
  }
57
57
  }
58
58
 
59
+ .seed-menu-item__root:not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]) {
60
+ --seed-content-scale: var(--seed-feedback-scale);
61
+ }
62
+
59
63
  .seed-menu-item__root:is(:focus-visible, [data-focus-visible]):after {
60
64
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
61
65
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
package/recipes/menu-sheet-item.css CHANGED
@@ -21,6 +21,9 @@
21
21
  background-color: var(--seed-color-bg-neutral-weak-pressed);
22
22
  }
23
23
  }
24
+ .seed-menu-sheet-item__root:is(:active, [data-active]) {
25
+ --seed-content-scale: var(--seed-feedback-scale);
26
+ }
24
27
  .seed-menu-sheet-item__root:first-child {
25
28
  border-top-left-radius: var(--seed-radius-r4);
26
29
  border-top-right-radius: var(--seed-radius-r4);
package/recipes/menu-sheet-item.layered.css CHANGED
@@ -25,6 +25,10 @@
25
25
  }
26
26
  }
27
27
 
28
+ .seed-menu-sheet-item__root:is(:active, [data-active]) {
29
+ --seed-content-scale: var(--seed-feedback-scale);
30
+ }
31
+
28
32
  .seed-menu-sheet-item__root:first-child {
29
33
  border-top-left-radius: var(--seed-radius-r4);
30
34
  border-top-right-radius: var(--seed-radius-r4);
package/recipes/notification-badge.css CHANGED
@@ -9,7 +9,7 @@
9
9
  -moz-osx-font-smoothing: grayscale;
10
10
  text-decoration: none;
11
11
  background-color: var(--seed-color-bg-brand-solid);
12
- color: var(--seed-color-palette-static-white)
12
+ color: var(--seed-color-fg-on-brand-solid)
13
13
  }
14
14
  .seed-notification-badge--size_small {
15
15
  width: 6px;
package/recipes/notification-badge.layered.css CHANGED
@@ -6,7 +6,7 @@
6
6
  -webkit-font-smoothing: antialiased;
7
7
  -moz-osx-font-smoothing: grayscale;
8
8
  background-color: var(--seed-color-bg-brand-solid);
9
- color: var(--seed-color-palette-static-white);
9
+ color: var(--seed-color-fg-on-brand-solid);
10
10
  justify-content: center;
11
11
  align-items: center;
12
12
  text-decoration: none;
package/recipes/page-banner.css CHANGED
@@ -29,6 +29,9 @@
29
29
  outline: var(--seed-dimension-x0_5) solid var(--seed-color-stroke-focus-ring);
30
30
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
31
31
  }
32
+ .seed-page-banner__root:is(button):is(:active, [data-active]) {
33
+ --seed-content-scale: var(--seed-feedback-scale);
34
+ }
32
35
  .seed-page-banner__content {
33
36
  display: flex;
34
37
  flex-wrap: wrap;
@@ -151,31 +154,31 @@
151
154
  --seed-suffix-icon-color: var(--seed-color-fg-neutral);
152
155
  }
153
156
  .seed-page-banner__root--tone_neutral-variant_solid {
154
- background-color: var(--seed-color-bg-neutral-inverted);
155
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
156
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
157
+ background-color: var(--seed-color-bg-neutral-solid);
158
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
159
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
157
160
  }
158
161
  @media (hover: hover) and (pointer: fine) {
159
162
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
160
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
163
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
161
164
  }
162
165
  }
163
166
  @media not all and (hover: hover) and (pointer: fine) {
164
167
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
165
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
168
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
166
169
  }
167
170
  }
168
171
  .seed-page-banner__title--tone_neutral-variant_solid {
169
- color: var(--seed-color-fg-neutral-inverted);
172
+ color: var(--seed-color-fg-on-neutral-solid);
170
173
  }
171
174
  .seed-page-banner__description--tone_neutral-variant_solid {
172
- color: var(--seed-color-fg-neutral-inverted);
175
+ color: var(--seed-color-fg-on-neutral-solid);
173
176
  }
174
177
  .seed-page-banner__button--tone_neutral-variant_solid {
175
- color: var(--seed-color-fg-neutral-inverted);
178
+ color: var(--seed-color-fg-on-neutral-solid);
176
179
  }
177
180
  .seed-page-banner__closeButton--tone_neutral-variant_solid {
178
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
181
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
179
182
  }
180
183
  .seed-page-banner__root--tone_informative-variant_weak {
181
184
  background-color: var(--seed-color-bg-informative-weak);
@@ -206,8 +209,8 @@
206
209
  }
207
210
  .seed-page-banner__root--tone_informative-variant_solid {
208
211
  background-color: var(--seed-color-bg-informative-solid);
209
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
210
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
212
+ --seed-prefix-icon-color: var(--seed-color-fg-on-informative-solid);
213
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
211
214
  }
212
215
  @media (hover: hover) and (pointer: fine) {
213
216
  .seed-page-banner__root--tone_informative-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -220,13 +223,13 @@
220
223
  }
221
224
  }
222
225
  .seed-page-banner__title--tone_informative-variant_solid {
223
- color: var(--seed-color-palette-static-white);
226
+ color: var(--seed-color-fg-on-informative-solid);
224
227
  }
225
228
  .seed-page-banner__description--tone_informative-variant_solid {
226
- color: var(--seed-color-palette-static-white);
229
+ color: var(--seed-color-fg-on-informative-solid);
227
230
  }
228
231
  .seed-page-banner__button--tone_informative-variant_solid {
229
- color: var(--seed-color-palette-static-white);
232
+ color: var(--seed-color-fg-on-informative-solid);
230
233
  }
231
234
  .seed-page-banner__closeButton--tone_informative-variant_solid {
232
235
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
@@ -260,8 +263,8 @@
260
263
  }
261
264
  .seed-page-banner__root--tone_positive-variant_solid {
262
265
  background-color: var(--seed-color-bg-positive-solid);
263
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
264
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
266
+ --seed-prefix-icon-color: var(--seed-color-fg-on-positive-solid);
267
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
265
268
  }
266
269
  @media (hover: hover) and (pointer: fine) {
267
270
  .seed-page-banner__root--tone_positive-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -274,13 +277,13 @@
274
277
  }
275
278
  }
276
279
  .seed-page-banner__title--tone_positive-variant_solid {
277
- color: var(--seed-color-palette-static-white);
280
+ color: var(--seed-color-fg-on-positive-solid);
278
281
  }
279
282
  .seed-page-banner__description--tone_positive-variant_solid {
280
- color: var(--seed-color-palette-static-white);
283
+ color: var(--seed-color-fg-on-positive-solid);
281
284
  }
282
285
  .seed-page-banner__button--tone_positive-variant_solid {
283
- color: var(--seed-color-palette-static-white);
286
+ color: var(--seed-color-fg-on-positive-solid);
284
287
  }
285
288
  .seed-page-banner__closeButton--tone_positive-variant_solid {
286
289
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
@@ -314,8 +317,8 @@
314
317
  }
315
318
  .seed-page-banner__root--tone_warning-variant_solid {
316
319
  background-color: var(--seed-color-bg-warning-solid);
317
- --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
318
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
320
+ --seed-prefix-icon-color: var(--seed-color-fg-on-warning-solid);
321
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
319
322
  }
320
323
  @media (hover: hover) and (pointer: fine) {
321
324
  .seed-page-banner__root--tone_warning-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -328,13 +331,13 @@
328
331
  }
329
332
  }
330
333
  .seed-page-banner__title--tone_warning-variant_solid {
331
- color: var(--seed-color-palette-static-black-alpha-900);
334
+ color: var(--seed-color-fg-on-warning-solid);
332
335
  }
333
336
  .seed-page-banner__description--tone_warning-variant_solid {
334
- color: var(--seed-color-palette-static-black-alpha-900);
337
+ color: var(--seed-color-fg-on-warning-solid);
335
338
  }
336
339
  .seed-page-banner__button--tone_warning-variant_solid {
337
- color: var(--seed-color-palette-static-black-alpha-900);
340
+ color: var(--seed-color-fg-on-warning-solid);
338
341
  }
339
342
  .seed-page-banner__closeButton--tone_warning-variant_solid {
340
343
  --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
@@ -368,8 +371,8 @@
368
371
  }
369
372
  .seed-page-banner__root--tone_critical-variant_solid {
370
373
  background-color: var(--seed-color-bg-critical-solid);
371
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
372
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
374
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
375
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
373
376
  }
374
377
  @media (hover: hover) and (pointer: fine) {
375
378
  .seed-page-banner__root--tone_critical-variant_solid:is(button):is(:hover, [data-hover]) {
@@ -382,13 +385,13 @@
382
385
  }
383
386
  }
384
387
  .seed-page-banner__title--tone_critical-variant_solid {
385
- color: var(--seed-color-palette-static-white);
388
+ color: var(--seed-color-fg-on-critical-solid);
386
389
  }
387
390
  .seed-page-banner__description--tone_critical-variant_solid {
388
- color: var(--seed-color-palette-static-white);
391
+ color: var(--seed-color-fg-on-critical-solid);
389
392
  }
390
393
  .seed-page-banner__button--tone_critical-variant_solid {
391
- color: var(--seed-color-palette-static-white);
394
+ color: var(--seed-color-fg-on-critical-solid);
392
395
  }
393
396
  .seed-page-banner__closeButton--tone_critical-variant_solid {
394
397
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
package/recipes/page-banner.layered.css CHANGED
@@ -33,6 +33,10 @@
33
33
  outline-offset: calc(var(--seed-dimension-x0_5) * -1);
34
34
  }
35
35
 
36
+ .seed-page-banner__root:is(button):is(:active, [data-active]) {
37
+ --seed-content-scale: var(--seed-feedback-scale);
38
+ }
39
+
36
40
  .seed-page-banner__content {
37
41
  justify-content: space-between;
38
42
  align-items: center;
@@ -169,29 +173,29 @@
169
173
  }
170
174
 
171
175
  .seed-page-banner__root--tone_neutral-variant_solid {
172
- background-color: var(--seed-color-bg-neutral-inverted);
173
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
174
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
176
+ background-color: var(--seed-color-bg-neutral-solid);
177
+ --seed-prefix-icon-color: var(--seed-color-fg-on-neutral-solid);
178
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
175
179
  }
176
180
 
177
181
  @media (hover: hover) and (pointer: fine) {
178
182
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:hover, [data-hover]) {
179
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
183
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
180
184
  }
181
185
  }
182
186
 
183
187
  @media not all and (hover: hover) and (pointer: fine) {
184
188
  .seed-page-banner__root--tone_neutral-variant_solid:is(button):is(:active, [data-active]) {
185
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
189
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
186
190
  }
187
191
  }
188
192
 
189
193
  .seed-page-banner__title--tone_neutral-variant_solid, .seed-page-banner__description--tone_neutral-variant_solid, .seed-page-banner__button--tone_neutral-variant_solid {
190
- color: var(--seed-color-fg-neutral-inverted);
194
+ color: var(--seed-color-fg-on-neutral-solid);
191
195
  }
192
196
 
193
197
  .seed-page-banner__closeButton--tone_neutral-variant_solid {
194
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
198
+ --seed-suffix-icon-color: var(--seed-color-fg-on-neutral-solid);
195
199
  }
196
200
 
197
201
  .seed-page-banner__root--tone_informative-variant_weak {
@@ -222,8 +226,8 @@
222
226
 
223
227
  .seed-page-banner__root--tone_informative-variant_solid {
224
228
  background-color: var(--seed-color-bg-informative-solid);
225
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
226
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
229
+ --seed-prefix-icon-color: var(--seed-color-fg-on-informative-solid);
230
+ --seed-suffix-icon-color: var(--seed-color-fg-on-informative-solid);
227
231
  }
228
232
 
229
233
  @media (hover: hover) and (pointer: fine) {
@@ -239,7 +243,7 @@
239
243
  }
240
244
 
241
245
  .seed-page-banner__title--tone_informative-variant_solid, .seed-page-banner__description--tone_informative-variant_solid, .seed-page-banner__button--tone_informative-variant_solid {
242
- color: var(--seed-color-palette-static-white);
246
+ color: var(--seed-color-fg-on-informative-solid);
243
247
  }
244
248
 
245
249
  .seed-page-banner__closeButton--tone_informative-variant_solid {
@@ -274,8 +278,8 @@
274
278
 
275
279
  .seed-page-banner__root--tone_positive-variant_solid {
276
280
  background-color: var(--seed-color-bg-positive-solid);
277
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
278
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
281
+ --seed-prefix-icon-color: var(--seed-color-fg-on-positive-solid);
282
+ --seed-suffix-icon-color: var(--seed-color-fg-on-positive-solid);
279
283
  }
280
284
 
281
285
  @media (hover: hover) and (pointer: fine) {
@@ -291,7 +295,7 @@
291
295
  }
292
296
 
293
297
  .seed-page-banner__title--tone_positive-variant_solid, .seed-page-banner__description--tone_positive-variant_solid, .seed-page-banner__button--tone_positive-variant_solid {
294
- color: var(--seed-color-palette-static-white);
298
+ color: var(--seed-color-fg-on-positive-solid);
295
299
  }
296
300
 
297
301
  .seed-page-banner__closeButton--tone_positive-variant_solid {
@@ -326,8 +330,8 @@
326
330
 
327
331
  .seed-page-banner__root--tone_warning-variant_solid {
328
332
  background-color: var(--seed-color-bg-warning-solid);
329
- --seed-prefix-icon-color: var(--seed-color-palette-static-black-alpha-900);
330
- --seed-suffix-icon-color: var(--seed-color-palette-static-black-alpha-900);
333
+ --seed-prefix-icon-color: var(--seed-color-fg-on-warning-solid);
334
+ --seed-suffix-icon-color: var(--seed-color-fg-on-warning-solid);
331
335
  }
332
336
 
333
337
  @media (hover: hover) and (pointer: fine) {
@@ -343,7 +347,7 @@
343
347
  }
344
348
 
345
349
  .seed-page-banner__title--tone_warning-variant_solid, .seed-page-banner__description--tone_warning-variant_solid, .seed-page-banner__button--tone_warning-variant_solid {
346
- color: var(--seed-color-palette-static-black-alpha-900);
350
+ color: var(--seed-color-fg-on-warning-solid);
347
351
  }
348
352
 
349
353
  .seed-page-banner__closeButton--tone_warning-variant_solid {
@@ -378,8 +382,8 @@
378
382
 
379
383
  .seed-page-banner__root--tone_critical-variant_solid {
380
384
  background-color: var(--seed-color-bg-critical-solid);
381
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
382
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
385
+ --seed-prefix-icon-color: var(--seed-color-fg-on-critical-solid);
386
+ --seed-suffix-icon-color: var(--seed-color-fg-on-critical-solid);
383
387
  }
384
388
 
385
389
  @media (hover: hover) and (pointer: fine) {
@@ -395,7 +399,7 @@
395
399
  }
396
400
 
397
401
  .seed-page-banner__title--tone_critical-variant_solid, .seed-page-banner__description--tone_critical-variant_solid, .seed-page-banner__button--tone_critical-variant_solid {
398
- color: var(--seed-color-palette-static-white);
402
+ color: var(--seed-color-fg-on-critical-solid);
399
403
  }
400
404
 
401
405
  .seed-page-banner__closeButton--tone_critical-variant_solid {
package/recipes/pagination-page-item.css CHANGED
@@ -66,19 +66,19 @@
66
66
  scale: var(--seed-scale-s97);
67
67
  }
68
68
  .seed-pagination-page-item:is([aria-selected=true], [data-selected]) {
69
- color: var(--seed-color-fg-neutral-inverted);
69
+ color: var(--seed-color-fg-on-neutral-solid);
70
70
  }
71
71
  .seed-pagination-page-item:is([aria-selected=true], [data-selected])::before {
72
- background-color: var(--seed-color-bg-neutral-inverted);
72
+ background-color: var(--seed-color-bg-neutral-solid);
73
73
  }
74
74
  @media (hover: hover) and (pointer: fine) {
75
75
  .seed-pagination-page-item:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled]))::before {
76
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
76
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
77
77
  }
78
78
  }
79
79
  @media not all and (hover: hover) and (pointer: fine) {
80
80
  .seed-pagination-page-item:is([aria-selected=true], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled]))::before {
81
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
81
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
82
82
  }
83
83
  }
84
84
  .seed-pagination-page-item:is(:disabled, [disabled], [data-disabled]) {
package/recipes/pagination-page-item.layered.css CHANGED
@@ -76,22 +76,22 @@
76
76
  }
77
77
 
78
78
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]) {
79
- color: var(--seed-color-fg-neutral-inverted);
79
+ color: var(--seed-color-fg-on-neutral-solid);
80
80
  }
81
81
 
82
82
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):before {
83
- background-color: var(--seed-color-bg-neutral-inverted);
83
+ background-color: var(--seed-color-bg-neutral-solid);
84
84
  }
85
85
 
86
86
  @media (hover: hover) and (pointer: fine) {
87
87
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:hover, [data-hover]):not(:is(:disabled, [disabled], [data-disabled])):before {
88
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
88
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
89
89
  }
90
90
  }
91
91
 
92
92
  @media not all and (hover: hover) and (pointer: fine) {
93
93
  .seed-pagination-page-item:is([aria-selected="true"], [data-selected]):is(:active, [data-active]):not(:is(:disabled, [disabled], [data-disabled])):before {
94
- background-color: var(--seed-color-bg-neutral-inverted-pressed);
94
+ background-color: var(--seed-color-bg-neutral-solid-pressed);
95
95
  }
96
96
  }
97
97