@seed-design/lynx-css 0.1.1-alpha.0 → 0.2.0-alpha.2

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 (383) hide show
  1. package/all.css +568 -7401
  2. package/all.layered.css +575 -7407
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +6 -2
  6. package/base.layered.css +6 -2
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/package.json +6 -2
  10. package/recipes/action-button.css +327 -316
  11. package/recipes/action-button.d.ts +14 -3
  12. package/recipes/action-button.layered.css +188 -529
  13. package/recipes/action-button.layered.mjs +117 -4
  14. package/recipes/action-button.mjs +117 -4
  15. package/recipes/bottom-sheet-handle.css +2 -6
  16. package/recipes/bottom-sheet-handle.layered.css +1 -6
  17. package/recipes/bottom-sheet.css +15 -107
  18. package/recipes/bottom-sheet.layered.css +7 -111
  19. package/recipes/bottom-sheet.layered.mjs +1 -0
  20. package/recipes/bottom-sheet.mjs +1 -0
  21. package/recipes/checkbox-group.d.ts +2 -1
  22. package/recipes/checkbox-group.layered.mjs +3 -0
  23. package/recipes/checkbox-group.mjs +3 -0
  24. package/recipes/checkbox.css +17 -22
  25. package/recipes/checkbox.d.ts +5 -1
  26. package/recipes/checkbox.layered.css +13 -18
  27. package/recipes/checkbox.layered.mjs +8 -3
  28. package/recipes/checkbox.mjs +8 -3
  29. package/recipes/checkmark.css +95 -73
  30. package/recipes/checkmark.d.ts +18 -2
  31. package/recipes/checkmark.layered.css +80 -67
  32. package/recipes/checkmark.layered.mjs +151 -17
  33. package/recipes/checkmark.mjs +151 -17
  34. package/recipes/progress-circle.css +25 -0
  35. package/recipes/progress-circle.d.ts +2 -2
  36. package/recipes/progress-circle.mjs +2 -2
  37. package/recipes/radio-group.d.ts +2 -1
  38. package/recipes/radio-group.layered.mjs +3 -0
  39. package/recipes/radio-group.mjs +3 -0
  40. package/recipes/radio.css +17 -22
  41. package/recipes/radio.d.ts +5 -1
  42. package/recipes/radio.layered.css +13 -18
  43. package/recipes/radio.layered.mjs +8 -3
  44. package/recipes/radio.mjs +8 -3
  45. package/recipes/radiomark.css +61 -47
  46. package/recipes/radiomark.d.ts +14 -2
  47. package/recipes/radiomark.layered.css +55 -43
  48. package/recipes/radiomark.layered.mjs +79 -6
  49. package/recipes/radiomark.mjs +79 -6
  50. package/recipes/switch.css +13 -19
  51. package/recipes/switch.d.ts +4 -0
  52. package/recipes/switch.layered.css +6 -12
  53. package/recipes/switch.layered.mjs +6 -1
  54. package/recipes/switch.mjs +6 -1
  55. package/recipes/switchmark.css +35 -36
  56. package/recipes/switchmark.d.ts +9 -1
  57. package/recipes/switchmark.layered.css +34 -35
  58. package/recipes/switchmark.layered.mjs +43 -2
  59. package/recipes/switchmark.mjs +43 -2
  60. package/recipes/tag-group-item.css +11 -53
  61. package/recipes/tag-group-item.layered.css +3 -54
  62. package/recipes/tag-group.css +11 -27
  63. package/recipes/tag-group.d.ts +0 -4
  64. package/recipes/tag-group.layered.css +10 -31
  65. package/recipes/tag-group.layered.mjs +2 -20
  66. package/recipes/tag-group.mjs +2 -20
  67. package/vars/component/checkmark.d.ts +0 -2
  68. package/vars/component/content-placeholder.d.ts +1 -1
  69. package/vars/component/content-placeholder.mjs +1 -1
  70. package/vars/component/index.d.ts +2 -0
  71. package/vars/component/index.mjs +2 -0
  72. package/vars/component/menu-sheet.d.ts +1 -0
  73. package/vars/component/menu-sheet.mjs +1 -0
  74. package/vars/component/notification-badge.d.ts +5 -4
  75. package/vars/component/notification-badge.mjs +3 -2
  76. package/vars/component/radiomark.d.ts +0 -3
  77. package/vars/component/switchmark.d.ts +0 -3
  78. package/vars/component/top-navigation-icon-button.d.ts +36 -0
  79. package/vars/component/top-navigation-icon-button.mjs +36 -0
  80. package/vars/component/top-navigation-text-button.d.ts +52 -0
  81. package/vars/component/top-navigation-text-button.mjs +51 -0
  82. package/vars/component/top-navigation.d.ts +47 -25
  83. package/vars/component/top-navigation.mjs +39 -25
  84. package/recipes/action-chip.css +0 -78
  85. package/recipes/action-chip.d.ts +0 -29
  86. package/recipes/action-chip.layered.css +0 -118
  87. package/recipes/action-chip.layered.mjs +0 -71
  88. package/recipes/action-chip.mjs +0 -71
  89. package/recipes/action-sheet-item.css +0 -30
  90. package/recipes/action-sheet-item.d.ts +0 -25
  91. package/recipes/action-sheet-item.layered.css +0 -38
  92. package/recipes/action-sheet-item.layered.mjs +0 -49
  93. package/recipes/action-sheet-item.mjs +0 -49
  94. package/recipes/action-sheet.css +0 -117
  95. package/recipes/action-sheet.d.ts +0 -21
  96. package/recipes/action-sheet.layered.css +0 -132
  97. package/recipes/action-sheet.layered.mjs +0 -60
  98. package/recipes/action-sheet.mjs +0 -60
  99. package/recipes/app-bar-main.css +0 -169
  100. package/recipes/app-bar-main.d.ts +0 -36
  101. package/recipes/app-bar-main.layered.css +0 -164
  102. package/recipes/app-bar-main.layered.mjs +0 -63
  103. package/recipes/app-bar-main.mjs +0 -63
  104. package/recipes/app-bar.css +0 -375
  105. package/recipes/app-bar.d.ts +0 -36
  106. package/recipes/app-bar.layered.css +0 -385
  107. package/recipes/app-bar.layered.mjs +0 -74
  108. package/recipes/app-bar.mjs +0 -74
  109. package/recipes/app-screen.css +0 -314
  110. package/recipes/app-screen.d.ts +0 -44
  111. package/recipes/app-screen.layered.css +0 -322
  112. package/recipes/app-screen.layered.mjs +0 -98
  113. package/recipes/app-screen.mjs +0 -98
  114. package/recipes/article.css +0 -0
  115. package/recipes/article.d.ts +0 -22
  116. package/recipes/article.layered.css +0 -1
  117. package/recipes/article.layered.mjs +0 -43
  118. package/recipes/article.mjs +0 -43
  119. package/recipes/aspect-ratio.css +0 -22
  120. package/recipes/aspect-ratio.d.ts +0 -22
  121. package/recipes/aspect-ratio.layered.css +0 -24
  122. package/recipes/aspect-ratio.layered.mjs +0 -43
  123. package/recipes/aspect-ratio.mjs +0 -43
  124. package/recipes/avatar-stack.css +0 -79
  125. package/recipes/avatar-stack.d.ts +0 -24
  126. package/recipes/avatar-stack.layered.css +0 -102
  127. package/recipes/avatar-stack.layered.mjs +0 -51
  128. package/recipes/avatar-stack.mjs +0 -51
  129. package/recipes/avatar.css +0 -168
  130. package/recipes/avatar.d.ts +0 -28
  131. package/recipes/avatar.layered.css +0 -201
  132. package/recipes/avatar.layered.mjs +0 -66
  133. package/recipes/avatar.mjs +0 -66
  134. package/recipes/badge.css +0 -112
  135. package/recipes/badge.d.ts +0 -32
  136. package/recipes/badge.layered.css +0 -134
  137. package/recipes/badge.layered.mjs +0 -131
  138. package/recipes/badge.mjs +0 -131
  139. package/recipes/callout.css +0 -159
  140. package/recipes/callout.d.ts +0 -24
  141. package/recipes/callout.layered.css +0 -148
  142. package/recipes/callout.layered.mjs +0 -63
  143. package/recipes/callout.mjs +0 -63
  144. package/recipes/chip-tabs.css +0 -150
  145. package/recipes/chip-tabs.d.ts +0 -36
  146. package/recipes/chip-tabs.layered.css +0 -186
  147. package/recipes/chip-tabs.layered.mjs +0 -75
  148. package/recipes/chip-tabs.mjs +0 -75
  149. package/recipes/chip.css +0 -184
  150. package/recipes/chip.d.ts +0 -32
  151. package/recipes/chip.layered.css +0 -207
  152. package/recipes/chip.layered.mjs +0 -80
  153. package/recipes/chip.mjs +0 -80
  154. package/recipes/content-placeholder.css +0 -19
  155. package/recipes/content-placeholder.d.ts +0 -24
  156. package/recipes/content-placeholder.layered.css +0 -22
  157. package/recipes/content-placeholder.layered.mjs +0 -53
  158. package/recipes/content-placeholder.mjs +0 -53
  159. package/recipes/contextual-floating-button.css +0 -123
  160. package/recipes/contextual-floating-button.d.ts +0 -29
  161. package/recipes/contextual-floating-button.layered.css +0 -190
  162. package/recipes/contextual-floating-button.layered.mjs +0 -54
  163. package/recipes/contextual-floating-button.mjs +0 -54
  164. package/recipes/control-chip.css +0 -97
  165. package/recipes/control-chip.d.ts +0 -29
  166. package/recipes/control-chip.layered.css +0 -147
  167. package/recipes/control-chip.layered.mjs +0 -71
  168. package/recipes/control-chip.mjs +0 -71
  169. package/recipes/dialog.css +0 -101
  170. package/recipes/dialog.d.ts +0 -24
  171. package/recipes/dialog.layered.css +0 -113
  172. package/recipes/dialog.layered.mjs +0 -66
  173. package/recipes/dialog.mjs +0 -66
  174. package/recipes/extended-action-sheet-item.css +0 -39
  175. package/recipes/extended-action-sheet-item.d.ts +0 -25
  176. package/recipes/extended-action-sheet-item.layered.css +0 -55
  177. package/recipes/extended-action-sheet-item.layered.mjs +0 -49
  178. package/recipes/extended-action-sheet-item.mjs +0 -49
  179. package/recipes/extended-action-sheet.css +0 -116
  180. package/recipes/extended-action-sheet.d.ts +0 -21
  181. package/recipes/extended-action-sheet.layered.css +0 -131
  182. package/recipes/extended-action-sheet.layered.mjs +0 -64
  183. package/recipes/extended-action-sheet.mjs +0 -64
  184. package/recipes/extended-fab.css +0 -65
  185. package/recipes/extended-fab.d.ts +0 -29
  186. package/recipes/extended-fab.layered.css +0 -84
  187. package/recipes/extended-fab.layered.mjs +0 -54
  188. package/recipes/extended-fab.mjs +0 -54
  189. package/recipes/fab.css +0 -24
  190. package/recipes/fab.d.ts +0 -22
  191. package/recipes/fab.layered.css +0 -36
  192. package/recipes/fab.layered.mjs +0 -43
  193. package/recipes/fab.mjs +0 -43
  194. package/recipes/field-label.css +0 -27
  195. package/recipes/field-label.d.ts +0 -24
  196. package/recipes/field-label.layered.css +0 -33
  197. package/recipes/field-label.layered.mjs +0 -47
  198. package/recipes/field-label.mjs +0 -47
  199. package/recipes/field.css +0 -66
  200. package/recipes/field.d.ts +0 -21
  201. package/recipes/field.layered.css +0 -77
  202. package/recipes/field.layered.mjs +0 -60
  203. package/recipes/field.mjs +0 -60
  204. package/recipes/floating-action-button.css +0 -63
  205. package/recipes/floating-action-button.d.ts +0 -24
  206. package/recipes/floating-action-button.layered.css +0 -71
  207. package/recipes/floating-action-button.layered.mjs +0 -47
  208. package/recipes/floating-action-button.mjs +0 -47
  209. package/recipes/help-bubble.css +0 -80
  210. package/recipes/help-bubble.d.ts +0 -21
  211. package/recipes/help-bubble.layered.css +0 -92
  212. package/recipes/help-bubble.layered.mjs +0 -60
  213. package/recipes/help-bubble.mjs +0 -60
  214. package/recipes/identity-placeholder.css +0 -15
  215. package/recipes/identity-placeholder.d.ts +0 -24
  216. package/recipes/identity-placeholder.layered.css +0 -18
  217. package/recipes/identity-placeholder.layered.mjs +0 -43
  218. package/recipes/identity-placeholder.mjs +0 -43
  219. package/recipes/image-frame-icon.css +0 -7
  220. package/recipes/image-frame-icon.d.ts +0 -22
  221. package/recipes/image-frame-icon.layered.css +0 -11
  222. package/recipes/image-frame-icon.layered.mjs +0 -43
  223. package/recipes/image-frame-icon.mjs +0 -43
  224. package/recipes/image-frame-indicator.css +0 -16
  225. package/recipes/image-frame-indicator.d.ts +0 -22
  226. package/recipes/image-frame-indicator.layered.css +0 -20
  227. package/recipes/image-frame-indicator.layered.mjs +0 -43
  228. package/recipes/image-frame-indicator.mjs +0 -43
  229. package/recipes/image-frame-reaction-button.css +0 -44
  230. package/recipes/image-frame-reaction-button.d.ts +0 -21
  231. package/recipes/image-frame-reaction-button.layered.css +0 -50
  232. package/recipes/image-frame-reaction-button.layered.mjs +0 -40
  233. package/recipes/image-frame-reaction-button.mjs +0 -40
  234. package/recipes/image-frame.css +0 -28
  235. package/recipes/image-frame.d.ts +0 -28
  236. package/recipes/image-frame.layered.css +0 -34
  237. package/recipes/image-frame.layered.mjs +0 -52
  238. package/recipes/image-frame.mjs +0 -52
  239. package/recipes/inline-banner.css +0 -163
  240. package/recipes/inline-banner.d.ts +0 -24
  241. package/recipes/inline-banner.layered.css +0 -142
  242. package/recipes/inline-banner.layered.mjs +0 -64
  243. package/recipes/inline-banner.mjs +0 -64
  244. package/recipes/input-button.css +0 -120
  245. package/recipes/input-button.d.ts +0 -21
  246. package/recipes/input-button.layered.css +0 -135
  247. package/recipes/input-button.layered.mjs +0 -64
  248. package/recipes/input-button.mjs +0 -64
  249. package/recipes/link-content.css +0 -45
  250. package/recipes/link-content.d.ts +0 -29
  251. package/recipes/link-content.layered.css +0 -72
  252. package/recipes/link-content.layered.mjs +0 -55
  253. package/recipes/link-content.mjs +0 -55
  254. package/recipes/list-header.css +0 -22
  255. package/recipes/list-header.d.ts +0 -25
  256. package/recipes/list-header.layered.css +0 -28
  257. package/recipes/list-header.layered.mjs +0 -49
  258. package/recipes/list-header.mjs +0 -49
  259. package/recipes/list-item.css +0 -108
  260. package/recipes/list-item.d.ts +0 -24
  261. package/recipes/list-item.layered.css +0 -124
  262. package/recipes/list-item.layered.mjs +0 -59
  263. package/recipes/list-item.mjs +0 -59
  264. package/recipes/manner-temp-badge.css +0 -76
  265. package/recipes/manner-temp-badge.d.ts +0 -25
  266. package/recipes/manner-temp-badge.layered.css +0 -100
  267. package/recipes/manner-temp-badge.layered.mjs +0 -57
  268. package/recipes/manner-temp-badge.mjs +0 -57
  269. package/recipes/manner-temp.css +0 -50
  270. package/recipes/manner-temp.d.ts +0 -25
  271. package/recipes/manner-temp.layered.css +0 -71
  272. package/recipes/manner-temp.layered.mjs +0 -57
  273. package/recipes/manner-temp.mjs +0 -57
  274. package/recipes/menu-sheet-item.css +0 -67
  275. package/recipes/menu-sheet-item.d.ts +0 -28
  276. package/recipes/menu-sheet-item.layered.css +0 -83
  277. package/recipes/menu-sheet-item.layered.mjs +0 -56
  278. package/recipes/menu-sheet-item.mjs +0 -56
  279. package/recipes/menu-sheet.css +0 -135
  280. package/recipes/menu-sheet.d.ts +0 -24
  281. package/recipes/menu-sheet.layered.css +0 -151
  282. package/recipes/menu-sheet.layered.mjs +0 -74
  283. package/recipes/menu-sheet.mjs +0 -74
  284. package/recipes/notification-badge-positioner.css +0 -28
  285. package/recipes/notification-badge-positioner.d.ts +0 -29
  286. package/recipes/notification-badge-positioner.layered.css +0 -27
  287. package/recipes/notification-badge-positioner.layered.mjs +0 -71
  288. package/recipes/notification-badge-positioner.mjs +0 -71
  289. package/recipes/notification-badge.css +0 -27
  290. package/recipes/notification-badge.d.ts +0 -25
  291. package/recipes/notification-badge.layered.css +0 -34
  292. package/recipes/notification-badge.layered.mjs +0 -49
  293. package/recipes/notification-badge.mjs +0 -49
  294. package/recipes/page-banner.css +0 -260
  295. package/recipes/page-banner.d.ts +0 -28
  296. package/recipes/page-banner.layered.css +0 -235
  297. package/recipes/page-banner.layered.mjs +0 -117
  298. package/recipes/page-banner.mjs +0 -117
  299. package/recipes/pull-to-refresh.css +0 -15
  300. package/recipes/pull-to-refresh.d.ts +0 -21
  301. package/recipes/pull-to-refresh.layered.css +0 -19
  302. package/recipes/pull-to-refresh.layered.mjs +0 -36
  303. package/recipes/pull-to-refresh.mjs +0 -36
  304. package/recipes/reaction-button.css +0 -115
  305. package/recipes/reaction-button.d.ts +0 -25
  306. package/recipes/reaction-button.layered.css +0 -173
  307. package/recipes/reaction-button.layered.mjs +0 -49
  308. package/recipes/reaction-button.mjs +0 -49
  309. package/recipes/scroll-fog.css +0 -11
  310. package/recipes/scroll-fog.d.ts +0 -25
  311. package/recipes/scroll-fog.layered.css +0 -19
  312. package/recipes/scroll-fog.layered.mjs +0 -48
  313. package/recipes/scroll-fog.mjs +0 -48
  314. package/recipes/segmented-control.css +0 -59
  315. package/recipes/segmented-control.d.ts +0 -21
  316. package/recipes/segmented-control.layered.css +0 -67
  317. package/recipes/segmented-control.layered.mjs +0 -40
  318. package/recipes/segmented-control.mjs +0 -40
  319. package/recipes/select-box-group.css +0 -10
  320. package/recipes/select-box-group.d.ts +0 -22
  321. package/recipes/select-box-group.layered.css +0 -13
  322. package/recipes/select-box-group.layered.mjs +0 -43
  323. package/recipes/select-box-group.mjs +0 -43
  324. package/recipes/select-box.css +0 -111
  325. package/recipes/select-box.d.ts +0 -24
  326. package/recipes/select-box.layered.css +0 -130
  327. package/recipes/select-box.layered.mjs +0 -63
  328. package/recipes/select-box.mjs +0 -63
  329. package/recipes/selectBoxCheckmark.css +0 -30
  330. package/recipes/selectBoxCheckmark.d.ts +0 -21
  331. package/recipes/selectBoxCheckmark.layered.css +0 -36
  332. package/recipes/selectBoxCheckmark.layered.mjs +0 -36
  333. package/recipes/selectBoxCheckmark.mjs +0 -36
  334. package/recipes/skeleton.css +0 -46
  335. package/recipes/skeleton.d.ts +0 -29
  336. package/recipes/skeleton.layered.css +0 -63
  337. package/recipes/skeleton.layered.mjs +0 -56
  338. package/recipes/skeleton.mjs +0 -56
  339. package/recipes/slider-marker.css +0 -55
  340. package/recipes/slider-marker.d.ts +0 -25
  341. package/recipes/slider-marker.layered.css +0 -73
  342. package/recipes/slider-marker.layered.mjs +0 -50
  343. package/recipes/slider-marker.mjs +0 -50
  344. package/recipes/slider-tick.css +0 -21
  345. package/recipes/slider-tick.d.ts +0 -25
  346. package/recipes/slider-tick.layered.css +0 -32
  347. package/recipes/slider-tick.layered.mjs +0 -49
  348. package/recipes/slider-tick.mjs +0 -49
  349. package/recipes/slider.css +0 -177
  350. package/recipes/slider.d.ts +0 -21
  351. package/recipes/slider.layered.css +0 -209
  352. package/recipes/slider.layered.mjs +0 -68
  353. package/recipes/slider.mjs +0 -68
  354. package/recipes/snackbar-region.css +0 -20
  355. package/recipes/snackbar-region.d.ts +0 -22
  356. package/recipes/snackbar-region.layered.css +0 -29
  357. package/recipes/snackbar-region.layered.mjs +0 -43
  358. package/recipes/snackbar-region.mjs +0 -43
  359. package/recipes/snackbar.css +0 -83
  360. package/recipes/snackbar.d.ts +0 -24
  361. package/recipes/snackbar.layered.css +0 -94
  362. package/recipes/snackbar.layered.mjs +0 -56
  363. package/recipes/snackbar.mjs +0 -56
  364. package/recipes/tabs.css +0 -157
  365. package/recipes/tabs.d.ts +0 -36
  366. package/recipes/tabs.layered.css +0 -184
  367. package/recipes/tabs.layered.mjs +0 -78
  368. package/recipes/tabs.mjs +0 -78
  369. package/recipes/text-input.css +0 -198
  370. package/recipes/text-input.d.ts +0 -28
  371. package/recipes/text-input.layered.css +0 -212
  372. package/recipes/text-input.layered.mjs +0 -73
  373. package/recipes/text-input.mjs +0 -73
  374. package/recipes/text.css +0 -558
  375. package/recipes/text.d.ts +0 -33
  376. package/recipes/text.layered.css +0 -371
  377. package/recipes/text.layered.mjs +0 -110
  378. package/recipes/text.mjs +0 -110
  379. package/recipes/toggle-button.css +0 -167
  380. package/recipes/toggle-button.d.ts +0 -29
  381. package/recipes/toggle-button.layered.css +0 -239
  382. package/recipes/toggle-button.layered.mjs +0 -54
  383. package/recipes/toggle-button.mjs +0 -54
package/recipes/action-button.layered.css CHANGED
@@ -1,5 +1,5 @@
1
1
  @layer seed-components {
2
- .seed-action-button {
2
+ .seed-action-button__root {
3
3
  --seed-box-flex-grow: 0;
4
4
  flex-shrink: 0;
5
5
  flex-grow: var(--seed-box-flex-grow);
@@ -21,547 +21,148 @@
21
21
  margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
22
22
  margin-left: calc(var(--seed-box-bleed-left) * -1);
23
23
  margin-right: calc(var(--seed-box-bleed-right) * -1);
24
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
24
25
  border: none;
25
26
  justify-content: center;
26
27
  align-items: center;
27
- display: inline-flex;
28
+ display: flex;
28
29
  position: relative;
29
30
  }
30
- .seed-action-button__text {
31
- --seed-box-flex-grow: 0;
32
- --seed-box-min-width: auto;
33
- --seed-box-padding-bottom: auto;
34
- --seed-box-padding-top: auto;
35
- --seed-box-padding-left: auto;
36
- --seed-box-padding-right: auto;
37
- --seed-box-bleed-bottom: 0px;
38
- --seed-box-bleed-top: 0px;
39
- --seed-box-bleed-left: 0px;
40
- --seed-box-bleed-right: 0px;
41
- }
42
31
 
43
32
  .seed-action-button__text {
44
- --seed-box-flex-grow: 0;
45
- --seed-box-min-width: auto;
46
- --seed-box-padding-bottom: auto;
47
- --seed-box-padding-top: auto;
48
- --seed-box-padding-left: auto;
49
- --seed-box-padding-right: auto;
50
- --seed-box-bleed-bottom: 0px;
51
- --seed-box-bleed-top: 0px;
52
- --seed-box-bleed-left: 0px;
53
- --seed-box-bleed-right: 0px;
54
33
  font-family: inherit;
34
+ font-weight: var(--seed-font-weight-bold);
35
+ transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
55
36
  }
56
37
 
57
- .seed-action-button, .seed-action-button__text {
58
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
38
+ .seed-action-button__content {
39
+ opacity: 0;
40
+ flex-direction: row;
41
+ justify-content: center;
42
+ align-items: center;
43
+ display: flex;
59
44
  }
60
45
 
61
- .seed-action-button--variant_brandSolid {
62
- background: var(--seed-color-bg-brand-solid);
63
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
64
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
65
- --seed-icon-color: var(--seed-color-palette-static-white);
66
- --track-color: var(--seed-color-palette-static-white-alpha-300);
67
- --range-color: var(--seed-color-palette-static-white);
46
+ .seed-action-button__prefixIcon, .seed-action-button__suffixIcon, .seed-action-button__icon {
47
+ flex-shrink: 0;
68
48
  }
69
49
 
70
- .seed-action-button__text--variant_brandSolid {
71
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
72
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
73
- --seed-icon-color: var(--seed-color-palette-static-white);
74
- --track-color: var(--seed-color-palette-static-white-alpha-300);
75
- --range-color: var(--seed-color-palette-static-white);
50
+ .seed-action-button__loadingIndicator {
51
+ justify-content: center;
52
+ align-items: center;
53
+ display: flex;
54
+ position: absolute;
55
+ top: 0;
56
+ right: 0;
57
+ bottom: 0;
58
+ left: 0;
76
59
  }
77
60
 
78
- .seed-action-button__text--variant_brandSolid {
79
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
80
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
81
- --seed-icon-color: var(--seed-color-palette-static-white);
61
+ .seed-action-button__root--variant_brandSolid {
62
+ background: var(--seed-color-bg-brand-solid);
82
63
  --track-color: var(--seed-color-palette-static-white-alpha-300);
83
64
  --range-color: var(--seed-color-palette-static-white);
84
- color: var(--seed-color-palette-static-white);
85
- font-weight: var(--seed-font-weight-bold);
86
- }
87
-
88
- .seed-action-button--variant_brandSolid:active {
89
- background: var(--seed-color-bg-brand-solid-pressed);
90
- }
91
-
92
- .seed-action-button--variant_brandSolid.seed-action-button--disabled_true {
93
- background: var(--seed-color-bg-disabled);
94
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
95
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
96
- --seed-icon-color: var(--seed-color-fg-disabled);
97
- }
98
-
99
- .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true {
100
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
101
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
102
- --seed-icon-color: var(--seed-color-fg-disabled);
103
65
  }
104
66
 
105
- .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true {
106
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
107
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
108
- --seed-icon-color: var(--seed-color-fg-disabled);
109
- color: var(--seed-color-fg-disabled);
110
- }
111
-
112
- .seed-action-button--variant_brandSolid.seed-action-button--loading_true {
113
- background: var(--seed-color-bg-brand-solid-pressed);
67
+ .seed-action-button__text--variant_brandSolid, .seed-action-button__prefixIcon--variant_brandSolid, .seed-action-button__suffixIcon--variant_brandSolid, .seed-action-button__icon--variant_brandSolid {
68
+ color: var(--seed-color-palette-static-white);
114
69
  }
115
70
 
116
- .seed-action-button--variant_neutralSolid {
71
+ .seed-action-button__root--variant_neutralSolid {
117
72
  background: var(--seed-color-bg-neutral-inverted);
118
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
119
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
120
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
121
- --track-color: var(--seed-color-palette-static-white-alpha-300);
122
- --range-color: var(--seed-color-palette-static-white);
123
- }
124
-
125
- .seed-action-button__text--variant_neutralSolid {
126
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
127
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
128
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
129
73
  --track-color: var(--seed-color-palette-static-white-alpha-300);
130
74
  --range-color: var(--seed-color-palette-static-white);
131
75
  }
132
76
 
133
- .seed-action-button__text--variant_neutralSolid {
134
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
135
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
136
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
137
- --track-color: var(--seed-color-palette-static-white-alpha-300);
138
- --range-color: var(--seed-color-palette-static-white);
77
+ .seed-action-button__text--variant_neutralSolid, .seed-action-button__prefixIcon--variant_neutralSolid, .seed-action-button__suffixIcon--variant_neutralSolid, .seed-action-button__icon--variant_neutralSolid {
139
78
  color: var(--seed-color-fg-neutral-inverted);
140
- font-weight: var(--seed-font-weight-bold);
141
- }
142
-
143
- .seed-action-button--variant_neutralSolid:active {
144
- background: var(--seed-color-bg-neutral-inverted-pressed);
145
- }
146
-
147
- .seed-action-button--variant_neutralSolid.seed-action-button--disabled_true {
148
- background: var(--seed-color-bg-disabled);
149
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
150
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
151
- --seed-icon-color: var(--seed-color-fg-disabled);
152
- }
153
-
154
- .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true {
155
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
156
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
157
- --seed-icon-color: var(--seed-color-fg-disabled);
158
- }
159
-
160
- .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true {
161
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
162
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
163
- --seed-icon-color: var(--seed-color-fg-disabled);
164
- color: var(--seed-color-fg-disabled);
165
79
  }
166
80
 
167
- .seed-action-button--variant_neutralSolid.seed-action-button--loading_true {
168
- background: var(--seed-color-bg-neutral-inverted-pressed);
169
- }
170
-
171
- .seed-action-button--variant_neutralWeak {
81
+ .seed-action-button__root--variant_neutralWeak {
172
82
  background: var(--seed-color-bg-neutral-weak);
173
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
174
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
175
- --seed-icon-color: var(--seed-color-fg-neutral);
176
- --track-color: var(--seed-color-palette-gray-500);
177
- --range-color: var(--seed-color-fg-neutral);
178
- }
179
-
180
- .seed-action-button__text--variant_neutralWeak {
181
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
182
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
183
- --seed-icon-color: var(--seed-color-fg-neutral);
184
83
  --track-color: var(--seed-color-palette-gray-500);
185
84
  --range-color: var(--seed-color-fg-neutral);
186
85
  }
187
86
 
188
- .seed-action-button__text--variant_neutralWeak {
189
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
190
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
191
- --seed-icon-color: var(--seed-color-fg-neutral);
192
- --track-color: var(--seed-color-palette-gray-500);
193
- --range-color: var(--seed-color-fg-neutral);
87
+ .seed-action-button__text--variant_neutralWeak, .seed-action-button__prefixIcon--variant_neutralWeak, .seed-action-button__suffixIcon--variant_neutralWeak, .seed-action-button__icon--variant_neutralWeak {
194
88
  color: var(--seed-color-fg-neutral);
195
- font-weight: var(--seed-font-weight-bold);
196
89
  }
197
90
 
198
- .seed-action-button--variant_neutralWeak:active {
199
- background: var(--seed-color-bg-neutral-weak-pressed);
200
- }
201
-
202
- .seed-action-button--variant_neutralWeak.seed-action-button--disabled_true {
203
- background: var(--seed-color-bg-disabled);
204
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
205
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
206
- --seed-icon-color: var(--seed-color-fg-disabled);
207
- }
208
-
209
- .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true {
210
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
211
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
212
- --seed-icon-color: var(--seed-color-fg-disabled);
213
- }
214
-
215
- .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true {
216
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
217
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
218
- --seed-icon-color: var(--seed-color-fg-disabled);
219
- color: var(--seed-color-fg-disabled);
220
- }
221
-
222
- .seed-action-button--variant_neutralWeak.seed-action-button--loading_true {
223
- background: var(--seed-color-bg-neutral-weak-pressed);
224
- }
225
-
226
- .seed-action-button--variant_criticalSolid {
91
+ .seed-action-button__root--variant_criticalSolid {
227
92
  background: var(--seed-color-bg-critical-solid);
228
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
229
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
230
- --seed-icon-color: var(--seed-color-palette-static-white);
231
- --track-color: var(--seed-color-palette-static-white-alpha-300);
232
- --range-color: var(--seed-color-palette-static-white);
233
- }
234
-
235
- .seed-action-button__text--variant_criticalSolid {
236
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
237
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
238
- --seed-icon-color: var(--seed-color-palette-static-white);
239
93
  --track-color: var(--seed-color-palette-static-white-alpha-300);
240
94
  --range-color: var(--seed-color-palette-static-white);
241
95
  }
242
96
 
243
- .seed-action-button__text--variant_criticalSolid {
244
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
245
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
246
- --seed-icon-color: var(--seed-color-palette-static-white);
247
- --track-color: var(--seed-color-palette-static-white-alpha-300);
248
- --range-color: var(--seed-color-palette-static-white);
97
+ .seed-action-button__text--variant_criticalSolid, .seed-action-button__prefixIcon--variant_criticalSolid, .seed-action-button__suffixIcon--variant_criticalSolid, .seed-action-button__icon--variant_criticalSolid {
249
98
  color: var(--seed-color-palette-static-white);
250
- font-weight: var(--seed-font-weight-bold);
251
- }
252
-
253
- .seed-action-button--variant_criticalSolid:active {
254
- background: var(--seed-color-bg-critical-solid-pressed);
255
99
  }
256
100
 
257
- .seed-action-button--variant_criticalSolid.seed-action-button--disabled_true {
258
- background: var(--seed-color-bg-disabled);
259
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
260
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
261
- --seed-icon-color: var(--seed-color-fg-disabled);
262
- }
263
-
264
- .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true {
265
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
266
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
267
- --seed-icon-color: var(--seed-color-fg-disabled);
268
- }
269
-
270
- .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true {
271
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
272
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
273
- --seed-icon-color: var(--seed-color-fg-disabled);
274
- color: var(--seed-color-fg-disabled);
275
- }
276
-
277
- .seed-action-button--variant_criticalSolid.seed-action-button--loading_true {
278
- background: var(--seed-color-bg-critical-solid-pressed);
279
- }
280
-
281
- .seed-action-button--variant_brandOutline {
101
+ .seed-action-button__root--variant_brandOutline {
282
102
  background: var(--seed-color-bg-transparent);
283
103
  border-style: solid;
284
104
  border-width: 1px;
285
105
  border-color: var(--seed-color-stroke-neutral-muted);
286
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
287
- --seed-suffix-icon-color: var(--seed-color-fg-brand);
288
- --seed-icon-color: var(--seed-color-fg-brand);
289
- --track-color: var(--seed-color-palette-carrot-200);
290
- --range-color: var(--seed-color-bg-brand-solid);
291
- }
292
-
293
- .seed-action-button__text--variant_brandOutline {
294
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
295
- --seed-suffix-icon-color: var(--seed-color-fg-brand);
296
- --seed-icon-color: var(--seed-color-fg-brand);
297
106
  --track-color: var(--seed-color-palette-carrot-200);
298
107
  --range-color: var(--seed-color-bg-brand-solid);
299
108
  }
300
109
 
301
- .seed-action-button__text--variant_brandOutline {
302
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
303
- --seed-suffix-icon-color: var(--seed-color-fg-brand);
304
- --seed-icon-color: var(--seed-color-fg-brand);
305
- --track-color: var(--seed-color-palette-carrot-200);
306
- --range-color: var(--seed-color-bg-brand-solid);
110
+ .seed-action-button__text--variant_brandOutline, .seed-action-button__prefixIcon--variant_brandOutline, .seed-action-button__suffixIcon--variant_brandOutline, .seed-action-button__icon--variant_brandOutline {
307
111
  color: var(--seed-color-fg-brand);
308
- font-weight: var(--seed-font-weight-bold);
309
112
  }
310
113
 
311
- .seed-action-button--variant_brandOutline:active {
312
- background: var(--seed-color-bg-transparent-pressed);
313
- }
314
-
315
- .seed-action-button--variant_brandOutline.seed-action-button--disabled_true {
316
- background: var(--seed-color-bg-transparent);
317
- border-color: var(--seed-color-stroke-neutral-muted);
318
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
319
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
320
- --seed-icon-color: var(--seed-color-fg-disabled);
321
- }
322
-
323
- .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true {
324
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
325
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
326
- --seed-icon-color: var(--seed-color-fg-disabled);
327
- }
328
-
329
- .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true {
330
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
331
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
332
- --seed-icon-color: var(--seed-color-fg-disabled);
333
- color: var(--seed-color-fg-disabled);
334
- }
335
-
336
- .seed-action-button--variant_brandOutline.seed-action-button--loading_true {
337
- background: var(--seed-color-bg-transparent);
338
- }
339
-
340
- .seed-action-button--variant_neutralOutline {
114
+ .seed-action-button__root--variant_neutralOutline {
341
115
  background: var(--seed-color-bg-transparent);
342
116
  border-style: solid;
343
117
  border-width: 1px;
344
118
  border-color: var(--seed-color-stroke-neutral-muted);
345
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
346
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
347
- --seed-icon-color: var(--seed-color-fg-neutral);
348
119
  --track-color: var(--seed-color-palette-gray-500);
349
120
  --range-color: var(--seed-color-fg-neutral);
350
121
  }
351
122
 
352
- .seed-action-button__text--variant_neutralOutline {
353
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
354
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
355
- --seed-icon-color: var(--seed-color-fg-neutral);
356
- --track-color: var(--seed-color-palette-gray-500);
357
- --range-color: var(--seed-color-fg-neutral);
358
- }
359
-
360
- .seed-action-button__text--variant_neutralOutline {
361
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
362
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
363
- --seed-icon-color: var(--seed-color-fg-neutral);
364
- --track-color: var(--seed-color-palette-gray-500);
365
- --range-color: var(--seed-color-fg-neutral);
123
+ .seed-action-button__text--variant_neutralOutline, .seed-action-button__prefixIcon--variant_neutralOutline, .seed-action-button__suffixIcon--variant_neutralOutline, .seed-action-button__icon--variant_neutralOutline {
366
124
  color: var(--seed-color-fg-neutral);
367
- font-weight: var(--seed-font-weight-bold);
368
- }
369
-
370
- .seed-action-button--variant_neutralOutline:active {
371
- background: var(--seed-color-bg-transparent-pressed);
372
- }
373
-
374
- .seed-action-button--variant_neutralOutline.seed-action-button--disabled_true {
375
- background: var(--seed-color-bg-transparent);
376
- border-color: var(--seed-color-stroke-neutral-muted);
377
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
378
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
379
- --seed-icon-color: var(--seed-color-fg-disabled);
380
125
  }
381
126
 
382
- .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true {
383
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
384
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
385
- --seed-icon-color: var(--seed-color-fg-disabled);
386
- }
387
-
388
- .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true {
389
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
390
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
391
- --seed-icon-color: var(--seed-color-fg-disabled);
392
- color: var(--seed-color-fg-disabled);
393
- }
394
-
395
- .seed-action-button--variant_neutralOutline.seed-action-button--loading_true {
396
- background: var(--seed-color-bg-transparent);
397
- }
398
-
399
- .seed-action-button--variant_ghost {
400
- --seed-box-color: var(--seed-color-fg-neutral);
401
- --seed-prefix-icon-color: var(--seed-box-color);
402
- --seed-suffix-icon-color: var(--seed-box-color);
403
- --seed-icon-color: var(--seed-box-color);
404
- --seed-font-weight: var(--seed-font-weight-bold);
127
+ .seed-action-button__root--variant_ghost {
405
128
  --track-color: var(--seed-color-palette-gray-500);
406
129
  --range-color: var(--seed-color-fg-neutral);
407
130
  background: #fff0;
408
131
  }
409
132
 
410
- .seed-action-button__text--variant_ghost {
411
- --seed-box-color: var(--seed-color-fg-neutral);
412
- --seed-prefix-icon-color: var(--seed-box-color);
413
- --seed-suffix-icon-color: var(--seed-box-color);
414
- --seed-icon-color: var(--seed-box-color);
415
- --seed-font-weight: var(--seed-font-weight-bold);
416
- --track-color: var(--seed-color-palette-gray-500);
417
- --range-color: var(--seed-color-fg-neutral);
418
- }
419
-
420
- .seed-action-button__text--variant_ghost {
421
- --seed-box-color: var(--seed-color-fg-neutral);
422
- --seed-prefix-icon-color: var(--seed-box-color);
423
- --seed-suffix-icon-color: var(--seed-box-color);
424
- --seed-icon-color: var(--seed-box-color);
425
- --seed-font-weight: var(--seed-font-weight-bold);
426
- --track-color: var(--seed-color-palette-gray-500);
427
- --range-color: var(--seed-color-fg-neutral);
428
- color: var(--seed-box-color);
429
- font-weight: var(--seed-font-weight);
430
- }
431
-
432
- .seed-action-button--variant_ghost:active {
433
- background: var(--seed-color-bg-transparent-pressed);
434
- }
435
-
436
- .seed-action-button--variant_ghost.seed-action-button--disabled_true {
437
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
438
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
439
- --seed-icon-color: var(--seed-color-fg-disabled);
440
- background: #fff0;
441
- }
442
-
443
- .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true {
444
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
445
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
446
- --seed-icon-color: var(--seed-color-fg-disabled);
447
- }
448
-
449
- .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true {
450
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
451
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
452
- --seed-icon-color: var(--seed-color-fg-disabled);
453
- color: var(--seed-color-fg-disabled);
454
- }
455
-
456
- .seed-action-button--variant_ghost.seed-action-button--loading_true {
457
- background: var(--seed-color-bg-transparent-pressed);
133
+ .seed-action-button__text--variant_ghost, .seed-action-button__prefixIcon--variant_ghost, .seed-action-button__suffixIcon--variant_ghost, .seed-action-button__icon--variant_ghost {
134
+ color: var(--seed-color-fg-neutral);
458
135
  }
459
136
 
460
- .seed-action-button--size_xsmall {
137
+ .seed-action-button__root--size_xsmall {
461
138
  height: var(--seed-dimension-x8);
462
139
  border-radius: var(--seed-radius-full);
463
140
  --size: 14px;
464
141
  --thickness: 2px;
465
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
466
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
467
- --seed-icon-size: var(--seed-dimension-x3_5);
468
- }
469
-
470
- .seed-action-button__text--size_xsmall {
471
- --size: 14px;
472
- --thickness: 2px;
473
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
474
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
475
- --seed-icon-size: var(--seed-dimension-x3_5);
476
142
  }
477
143
 
478
- .seed-action-button__text--size_xsmall {
479
- --size: 14px;
480
- --thickness: 2px;
481
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
482
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
483
- --seed-icon-size: var(--seed-dimension-x3_5);
484
- }
485
-
486
- .seed-action-button--size_small {
144
+ .seed-action-button__root--size_small {
487
145
  height: var(--seed-dimension-x9);
488
146
  border-radius: var(--seed-radius-r2);
489
147
  --size: 14px;
490
148
  --thickness: 2px;
491
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
492
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
493
- --seed-icon-size: var(--seed-dimension-x4);
494
- }
495
-
496
- .seed-action-button__text--size_small {
497
- --size: 14px;
498
- --thickness: 2px;
499
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
500
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
501
- --seed-icon-size: var(--seed-dimension-x4);
502
- }
503
-
504
- .seed-action-button__text--size_small {
505
- --size: 14px;
506
- --thickness: 2px;
507
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
508
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
509
- --seed-icon-size: var(--seed-dimension-x4);
510
149
  }
511
150
 
512
- .seed-action-button--size_medium {
151
+ .seed-action-button__root--size_medium {
513
152
  height: var(--seed-dimension-x10);
514
153
  border-radius: var(--seed-radius-r2);
515
154
  --size: 16px;
516
155
  --thickness: 2px;
517
- --seed-prefix-icon-size: var(--seed-dimension-x4);
518
- --seed-suffix-icon-size: var(--seed-dimension-x4);
519
- --seed-icon-size: 18px;
520
156
  }
521
157
 
522
- .seed-action-button__text--size_medium {
523
- --size: 16px;
524
- --thickness: 2px;
525
- --seed-prefix-icon-size: var(--seed-dimension-x4);
526
- --seed-suffix-icon-size: var(--seed-dimension-x4);
527
- --seed-icon-size: 18px;
528
- }
529
-
530
- .seed-action-button__text--size_medium {
531
- --size: 16px;
532
- --thickness: 2px;
533
- --seed-prefix-icon-size: var(--seed-dimension-x4);
534
- --seed-suffix-icon-size: var(--seed-dimension-x4);
535
- --seed-icon-size: 18px;
536
- }
537
-
538
- .seed-action-button--size_large {
158
+ .seed-action-button__root--size_large {
539
159
  height: var(--seed-dimension-x13);
540
160
  border-radius: var(--seed-radius-r3);
541
161
  --size: 18px;
542
162
  --thickness: 2px;
543
- --seed-prefix-icon-size: 22px;
544
- --seed-suffix-icon-size: 22px;
545
- --seed-icon-size: 22px;
546
- }
547
-
548
- .seed-action-button__text--size_large {
549
- --size: 18px;
550
- --thickness: 2px;
551
- --seed-prefix-icon-size: 22px;
552
- --seed-suffix-icon-size: 22px;
553
- --seed-icon-size: 22px;
554
- }
555
-
556
- .seed-action-button__text--size_large {
557
- --size: 18px;
558
- --thickness: 2px;
559
- --seed-prefix-icon-size: 22px;
560
- --seed-suffix-icon-size: 22px;
561
- --seed-icon-size: 22px;
562
163
  }
563
164
 
564
- .seed-action-button--size_xsmall-layout_withText {
165
+ .seed-action-button__root--size_xsmall-layout_withText {
565
166
  gap: var(--seed-dimension-x1);
566
167
  --seed-box-padding-left: var(--seed-dimension-x3_5);
567
168
  --seed-box-padding-right: var(--seed-dimension-x3_5);
@@ -569,45 +170,34 @@
569
170
  --seed-box-padding-bottom: var(--seed-dimension-x1_5);
570
171
  }
571
172
 
572
- .seed-action-button__text--size_xsmall-layout_withText {
573
- --seed-box-padding-left: var(--seed-dimension-x3_5);
574
- --seed-box-padding-right: var(--seed-dimension-x3_5);
575
- --seed-box-padding-top: var(--seed-dimension-x1_5);
576
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
173
+ .seed-action-button__content--size_xsmall-layout_withText {
174
+ gap: var(--seed-dimension-x1);
577
175
  }
578
176
 
579
177
  .seed-action-button__text--size_xsmall-layout_withText {
580
- --seed-box-padding-left: var(--seed-dimension-x3_5);
581
- --seed-box-padding-right: var(--seed-dimension-x3_5);
582
- --seed-box-padding-top: var(--seed-dimension-x1_5);
583
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
584
178
  font-size: var(--seed-font-size-t3);
585
179
  line-height: var(--seed-line-height-t3);
586
180
  }
587
181
 
588
- .seed-action-button--size_xsmall-layout_iconOnly {
589
- min-width: var(--seed-dimension-x8);
590
- --seed-box-padding-left: var(--seed-dimension-x1_5);
591
- --seed-box-padding-right: var(--seed-dimension-x1_5);
592
- --seed-box-padding-top: var(--seed-dimension-x1_5);
593
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
182
+ .seed-action-button__prefixIcon--size_xsmall-layout_withText, .seed-action-button__suffixIcon--size_xsmall-layout_withText {
183
+ width: var(--seed-dimension-x3_5);
184
+ height: var(--seed-dimension-x3_5);
594
185
  }
595
186
 
596
- .seed-action-button__text--size_xsmall-layout_iconOnly {
187
+ .seed-action-button__root--size_xsmall-layout_iconOnly {
188
+ min-width: var(--seed-dimension-x8);
597
189
  --seed-box-padding-left: var(--seed-dimension-x1_5);
598
190
  --seed-box-padding-right: var(--seed-dimension-x1_5);
599
191
  --seed-box-padding-top: var(--seed-dimension-x1_5);
600
192
  --seed-box-padding-bottom: var(--seed-dimension-x1_5);
601
193
  }
602
194
 
603
- .seed-action-button__text--size_xsmall-layout_iconOnly {
604
- --seed-box-padding-left: var(--seed-dimension-x1_5);
605
- --seed-box-padding-right: var(--seed-dimension-x1_5);
606
- --seed-box-padding-top: var(--seed-dimension-x1_5);
607
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
195
+ .seed-action-button__icon--size_xsmall-layout_iconOnly {
196
+ width: var(--seed-dimension-x3_5);
197
+ height: var(--seed-dimension-x3_5);
608
198
  }
609
199
 
610
- .seed-action-button--size_small-layout_withText {
200
+ .seed-action-button__root--size_small-layout_withText {
611
201
  gap: var(--seed-dimension-x1);
612
202
  --seed-box-padding-left: var(--seed-dimension-x3_5);
613
203
  --seed-box-padding-right: var(--seed-dimension-x3_5);
@@ -615,45 +205,34 @@
615
205
  --seed-box-padding-bottom: var(--seed-dimension-x2);
616
206
  }
617
207
 
618
- .seed-action-button__text--size_small-layout_withText {
619
- --seed-box-padding-left: var(--seed-dimension-x3_5);
620
- --seed-box-padding-right: var(--seed-dimension-x3_5);
621
- --seed-box-padding-top: var(--seed-dimension-x2);
622
- --seed-box-padding-bottom: var(--seed-dimension-x2);
208
+ .seed-action-button__content--size_small-layout_withText {
209
+ gap: var(--seed-dimension-x1);
623
210
  }
624
211
 
625
212
  .seed-action-button__text--size_small-layout_withText {
626
- --seed-box-padding-left: var(--seed-dimension-x3_5);
627
- --seed-box-padding-right: var(--seed-dimension-x3_5);
628
- --seed-box-padding-top: var(--seed-dimension-x2);
629
- --seed-box-padding-bottom: var(--seed-dimension-x2);
630
213
  font-size: var(--seed-font-size-t4);
631
214
  line-height: var(--seed-line-height-t4);
632
215
  }
633
216
 
634
- .seed-action-button--size_small-layout_iconOnly {
635
- min-width: var(--seed-dimension-x9);
636
- --seed-box-padding-left: var(--seed-dimension-x2);
637
- --seed-box-padding-right: var(--seed-dimension-x2);
638
- --seed-box-padding-top: var(--seed-dimension-x2);
639
- --seed-box-padding-bottom: var(--seed-dimension-x2);
217
+ .seed-action-button__prefixIcon--size_small-layout_withText, .seed-action-button__suffixIcon--size_small-layout_withText {
218
+ width: var(--seed-dimension-x3_5);
219
+ height: var(--seed-dimension-x3_5);
640
220
  }
641
221
 
642
- .seed-action-button__text--size_small-layout_iconOnly {
222
+ .seed-action-button__root--size_small-layout_iconOnly {
223
+ min-width: var(--seed-dimension-x9);
643
224
  --seed-box-padding-left: var(--seed-dimension-x2);
644
225
  --seed-box-padding-right: var(--seed-dimension-x2);
645
226
  --seed-box-padding-top: var(--seed-dimension-x2);
646
227
  --seed-box-padding-bottom: var(--seed-dimension-x2);
647
228
  }
648
229
 
649
- .seed-action-button__text--size_small-layout_iconOnly {
650
- --seed-box-padding-left: var(--seed-dimension-x2);
651
- --seed-box-padding-right: var(--seed-dimension-x2);
652
- --seed-box-padding-top: var(--seed-dimension-x2);
653
- --seed-box-padding-bottom: var(--seed-dimension-x2);
230
+ .seed-action-button__icon--size_small-layout_iconOnly {
231
+ width: var(--seed-dimension-x4);
232
+ height: var(--seed-dimension-x4);
654
233
  }
655
234
 
656
- .seed-action-button--size_medium-layout_withText {
235
+ .seed-action-button__root--size_medium-layout_withText {
657
236
  gap: var(--seed-dimension-x1_5);
658
237
  --seed-box-padding-left: var(--seed-dimension-x4);
659
238
  --seed-box-padding-right: var(--seed-dimension-x4);
@@ -661,45 +240,34 @@
661
240
  --seed-box-padding-bottom: var(--seed-dimension-x2_5);
662
241
  }
663
242
 
664
- .seed-action-button__text--size_medium-layout_withText {
665
- --seed-box-padding-left: var(--seed-dimension-x4);
666
- --seed-box-padding-right: var(--seed-dimension-x4);
667
- --seed-box-padding-top: var(--seed-dimension-x2_5);
668
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
243
+ .seed-action-button__content--size_medium-layout_withText {
244
+ gap: var(--seed-dimension-x1_5);
669
245
  }
670
246
 
671
247
  .seed-action-button__text--size_medium-layout_withText {
672
- --seed-box-padding-left: var(--seed-dimension-x4);
673
- --seed-box-padding-right: var(--seed-dimension-x4);
674
- --seed-box-padding-top: var(--seed-dimension-x2_5);
675
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
676
248
  font-size: var(--seed-font-size-t4);
677
249
  line-height: var(--seed-line-height-t4);
678
250
  }
679
251
 
680
- .seed-action-button--size_medium-layout_iconOnly {
681
- min-width: var(--seed-dimension-x10);
682
- --seed-box-padding-left: var(--seed-dimension-x2_5);
683
- --seed-box-padding-right: var(--seed-dimension-x2_5);
684
- --seed-box-padding-top: var(--seed-dimension-x2_5);
685
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
252
+ .seed-action-button__prefixIcon--size_medium-layout_withText, .seed-action-button__suffixIcon--size_medium-layout_withText {
253
+ width: var(--seed-dimension-x4);
254
+ height: var(--seed-dimension-x4);
686
255
  }
687
256
 
688
- .seed-action-button__text--size_medium-layout_iconOnly {
257
+ .seed-action-button__root--size_medium-layout_iconOnly {
258
+ min-width: var(--seed-dimension-x10);
689
259
  --seed-box-padding-left: var(--seed-dimension-x2_5);
690
260
  --seed-box-padding-right: var(--seed-dimension-x2_5);
691
261
  --seed-box-padding-top: var(--seed-dimension-x2_5);
692
262
  --seed-box-padding-bottom: var(--seed-dimension-x2_5);
693
263
  }
694
264
 
695
- .seed-action-button__text--size_medium-layout_iconOnly {
696
- --seed-box-padding-left: var(--seed-dimension-x2_5);
697
- --seed-box-padding-right: var(--seed-dimension-x2_5);
698
- --seed-box-padding-top: var(--seed-dimension-x2_5);
699
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
265
+ .seed-action-button__icon--size_medium-layout_iconOnly {
266
+ width: 18px;
267
+ height: 18px;
700
268
  }
701
269
 
702
- .seed-action-button--size_large-layout_withText {
270
+ .seed-action-button__root--size_large-layout_withText {
703
271
  gap: var(--seed-dimension-x2);
704
272
  --seed-box-padding-left: var(--seed-dimension-x5);
705
273
  --seed-box-padding-right: var(--seed-dimension-x5);
@@ -707,23 +275,21 @@
707
275
  --seed-box-padding-bottom: var(--seed-dimension-x3_5);
708
276
  }
709
277
 
710
- .seed-action-button__text--size_large-layout_withText {
711
- --seed-box-padding-left: var(--seed-dimension-x5);
712
- --seed-box-padding-right: var(--seed-dimension-x5);
713
- --seed-box-padding-top: var(--seed-dimension-x3_5);
714
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
278
+ .seed-action-button__content--size_large-layout_withText {
279
+ gap: var(--seed-dimension-x2);
715
280
  }
716
281
 
717
282
  .seed-action-button__text--size_large-layout_withText {
718
- --seed-box-padding-left: var(--seed-dimension-x5);
719
- --seed-box-padding-right: var(--seed-dimension-x5);
720
- --seed-box-padding-top: var(--seed-dimension-x3_5);
721
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
722
283
  font-size: var(--seed-font-size-t6);
723
284
  line-height: var(--seed-line-height-t6);
724
285
  }
725
286
 
726
- .seed-action-button--size_large-layout_iconOnly {
287
+ .seed-action-button__prefixIcon--size_large-layout_withText, .seed-action-button__suffixIcon--size_large-layout_withText {
288
+ width: 22px;
289
+ height: 22px;
290
+ }
291
+
292
+ .seed-action-button__root--size_large-layout_iconOnly {
727
293
  min-width: var(--seed-dimension-x13);
728
294
  --seed-box-padding-left: var(--seed-dimension-x3_5);
729
295
  --seed-box-padding-right: var(--seed-dimension-x3_5);
@@ -731,17 +297,110 @@
731
297
  --seed-box-padding-bottom: var(--seed-dimension-x3_5);
732
298
  }
733
299
 
734
- .seed-action-button__text--size_large-layout_iconOnly {
735
- --seed-box-padding-left: var(--seed-dimension-x3_5);
736
- --seed-box-padding-right: var(--seed-dimension-x3_5);
737
- --seed-box-padding-top: var(--seed-dimension-x3_5);
738
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
300
+ .seed-action-button__icon--size_large-layout_iconOnly {
301
+ width: 22px;
302
+ height: 22px;
739
303
  }
740
304
 
741
- .seed-action-button__text--size_large-layout_iconOnly {
742
- --seed-box-padding-left: var(--seed-dimension-x3_5);
743
- --seed-box-padding-right: var(--seed-dimension-x3_5);
744
- --seed-box-padding-top: var(--seed-dimension-x3_5);
745
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
305
+ .seed-action-button__root--variant_brandSolid-pressed_true {
306
+ background: var(--seed-color-bg-brand-solid-pressed);
307
+ }
308
+
309
+ .seed-action-button__root--variant_neutralSolid-pressed_true {
310
+ background: var(--seed-color-bg-neutral-inverted-pressed);
311
+ }
312
+
313
+ .seed-action-button__root--variant_neutralWeak-pressed_true {
314
+ background: var(--seed-color-bg-neutral-weak-pressed);
315
+ }
316
+
317
+ .seed-action-button__root--variant_criticalSolid-pressed_true {
318
+ background: var(--seed-color-bg-critical-solid-pressed);
319
+ }
320
+
321
+ .seed-action-button__root--variant_brandOutline-pressed_true, .seed-action-button__root--variant_neutralOutline-pressed_true, .seed-action-button__root--variant_ghost-pressed_true {
322
+ background: var(--seed-color-bg-transparent-pressed);
323
+ }
324
+
325
+ .seed-action-button__root--variant_brandSolid-disabled_true {
326
+ background: var(--seed-color-bg-disabled);
327
+ }
328
+
329
+ .seed-action-button__text--variant_brandSolid-disabled_true, .seed-action-button__prefixIcon--variant_brandSolid-disabled_true, .seed-action-button__suffixIcon--variant_brandSolid-disabled_true, .seed-action-button__icon--variant_brandSolid-disabled_true {
330
+ color: var(--seed-color-fg-disabled);
331
+ }
332
+
333
+ .seed-action-button__root--variant_neutralSolid-disabled_true {
334
+ background: var(--seed-color-bg-disabled);
335
+ }
336
+
337
+ .seed-action-button__text--variant_neutralSolid-disabled_true, .seed-action-button__prefixIcon--variant_neutralSolid-disabled_true, .seed-action-button__suffixIcon--variant_neutralSolid-disabled_true, .seed-action-button__icon--variant_neutralSolid-disabled_true {
338
+ color: var(--seed-color-fg-disabled);
339
+ }
340
+
341
+ .seed-action-button__root--variant_neutralWeak-disabled_true {
342
+ background: var(--seed-color-bg-disabled);
343
+ }
344
+
345
+ .seed-action-button__text--variant_neutralWeak-disabled_true, .seed-action-button__prefixIcon--variant_neutralWeak-disabled_true, .seed-action-button__suffixIcon--variant_neutralWeak-disabled_true, .seed-action-button__icon--variant_neutralWeak-disabled_true {
346
+ color: var(--seed-color-fg-disabled);
347
+ }
348
+
349
+ .seed-action-button__root--variant_criticalSolid-disabled_true {
350
+ background: var(--seed-color-bg-disabled);
351
+ }
352
+
353
+ .seed-action-button__text--variant_criticalSolid-disabled_true, .seed-action-button__prefixIcon--variant_criticalSolid-disabled_true, .seed-action-button__suffixIcon--variant_criticalSolid-disabled_true, .seed-action-button__icon--variant_criticalSolid-disabled_true {
354
+ color: var(--seed-color-fg-disabled);
355
+ }
356
+
357
+ .seed-action-button__root--variant_brandOutline-disabled_true {
358
+ background: var(--seed-color-bg-transparent);
359
+ border-color: var(--seed-color-stroke-neutral-muted);
360
+ }
361
+
362
+ .seed-action-button__text--variant_brandOutline-disabled_true, .seed-action-button__prefixIcon--variant_brandOutline-disabled_true, .seed-action-button__suffixIcon--variant_brandOutline-disabled_true, .seed-action-button__icon--variant_brandOutline-disabled_true {
363
+ color: var(--seed-color-fg-disabled);
364
+ }
365
+
366
+ .seed-action-button__root--variant_neutralOutline-disabled_true {
367
+ background: var(--seed-color-bg-transparent);
368
+ border-color: var(--seed-color-stroke-neutral-muted);
369
+ }
370
+
371
+ .seed-action-button__text--variant_neutralOutline-disabled_true, .seed-action-button__prefixIcon--variant_neutralOutline-disabled_true, .seed-action-button__suffixIcon--variant_neutralOutline-disabled_true, .seed-action-button__icon--variant_neutralOutline-disabled_true {
372
+ color: var(--seed-color-fg-disabled);
373
+ }
374
+
375
+ .seed-action-button__root--variant_ghost-disabled_true {
376
+ background: #fff0;
377
+ }
378
+
379
+ .seed-action-button__text--variant_ghost-disabled_true, .seed-action-button__prefixIcon--variant_ghost-disabled_true, .seed-action-button__suffixIcon--variant_ghost-disabled_true, .seed-action-button__icon--variant_ghost-disabled_true {
380
+ color: var(--seed-color-fg-disabled);
381
+ }
382
+
383
+ .seed-action-button__root--variant_brandSolid-loading_true {
384
+ background: var(--seed-color-bg-brand-solid-pressed);
385
+ }
386
+
387
+ .seed-action-button__root--variant_neutralSolid-loading_true {
388
+ background: var(--seed-color-bg-neutral-inverted-pressed);
389
+ }
390
+
391
+ .seed-action-button__root--variant_neutralWeak-loading_true {
392
+ background: var(--seed-color-bg-neutral-weak-pressed);
393
+ }
394
+
395
+ .seed-action-button__root--variant_criticalSolid-loading_true {
396
+ background: var(--seed-color-bg-critical-solid-pressed);
397
+ }
398
+
399
+ .seed-action-button__root--variant_brandOutline-loading_true, .seed-action-button__root--variant_neutralOutline-loading_true {
400
+ background: var(--seed-color-bg-transparent);
401
+ }
402
+
403
+ .seed-action-button__root--variant_ghost-loading_true {
404
+ background: var(--seed-color-bg-transparent-pressed);
746
405
  }
747
406
  }