@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.css CHANGED
@@ -1,5 +1,5 @@
1
- .seed-action-button {
2
- display: inline-flex;
1
+ .seed-action-button__root {
2
+ display: flex;
3
3
  position: relative;
4
4
  align-items: center;
5
5
  justify-content: center;
@@ -25,455 +25,466 @@
25
25
  margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
26
26
  margin-left: calc(var(--seed-box-bleed-left) * -1);
27
27
  margin-right: calc(var(--seed-box-bleed-right) * -1);
28
- }.seed-action-button__text {
29
- --seed-box-flex-grow: 0;
30
- --seed-box-min-width: auto;
31
- --seed-box-padding-bottom: auto;
32
- --seed-box-padding-top: auto;
33
- --seed-box-padding-left: auto;
34
- --seed-box-padding-right: auto;
35
- --seed-box-bleed-bottom: 0px;
36
- --seed-box-bleed-top: 0px;
37
- --seed-box-bleed-left: 0px;
38
- --seed-box-bleed-right: 0px;
28
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
29
+ }
30
+ .seed-action-button__text {
39
31
  font-family: inherit;
32
+ font-weight: var(--seed-font-weight-bold);
33
+ transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
40
34
  }
41
- .seed-action-button {
42
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
35
+ .seed-action-button__content {
36
+ display: flex;
37
+ flex-direction: row;
38
+ align-items: center;
39
+ justify-content: center;
40
+ opacity: 0
43
41
  }
44
- .seed-action-button__text {
45
- transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing);
42
+ .seed-action-button__prefixIcon {
43
+ flex-shrink: 0
44
+ }
45
+ .seed-action-button__suffixIcon {
46
+ flex-shrink: 0
47
+ }
48
+ .seed-action-button__icon {
49
+ flex-shrink: 0
46
50
  }
47
- .seed-action-button--variant_brandSolid {
51
+ .seed-action-button__loadingIndicator {
52
+ position: absolute;
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ top: 0;
57
+ right: 0;
58
+ bottom: 0;
59
+ left: 0
60
+ }
61
+ .seed-action-button__root--variant_brandSolid {
48
62
  background: var(--seed-color-bg-brand-solid);
49
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
50
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
51
- --seed-icon-color: var(--seed-color-palette-static-white);
52
63
  --track-color: var(--seed-color-palette-static-white-alpha-300);
53
- --range-color: var(--seed-color-palette-static-white);
64
+ --range-color: var(--seed-color-palette-static-white)
54
65
  }
55
66
  .seed-action-button__text--variant_brandSolid {
56
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
57
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
58
- --seed-icon-color: var(--seed-color-palette-static-white);
59
- --track-color: var(--seed-color-palette-static-white-alpha-300);
60
- --range-color: var(--seed-color-palette-static-white);
61
- color: var(--seed-color-palette-static-white);
62
- font-weight: var(--seed-font-weight-bold);
67
+ color: var(--seed-color-palette-static-white)
63
68
  }
64
- .seed-action-button--variant_brandSolid:active {
65
- background: var(--seed-color-bg-brand-solid-pressed);
69
+ .seed-action-button__prefixIcon--variant_brandSolid {
70
+ color: var(--seed-color-palette-static-white)
66
71
  }
67
- .seed-action-button--variant_brandSolid.seed-action-button--disabled_true {
68
- background: var(--seed-color-bg-disabled);
69
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
70
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
71
- --seed-icon-color: var(--seed-color-fg-disabled);
72
+ .seed-action-button__suffixIcon--variant_brandSolid {
73
+ color: var(--seed-color-palette-static-white)
72
74
  }
73
- .seed-action-button__text--variant_brandSolid.seed-action-button__text--disabled_true {
74
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
75
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
76
- --seed-icon-color: var(--seed-color-fg-disabled);
77
- color: var(--seed-color-fg-disabled);
75
+ .seed-action-button__icon--variant_brandSolid {
76
+ color: var(--seed-color-palette-static-white)
78
77
  }
79
- .seed-action-button--variant_brandSolid.seed-action-button--loading_true {
80
- background: var(--seed-color-bg-brand-solid-pressed);
81
- }
82
- .seed-action-button--variant_neutralSolid {
78
+ .seed-action-button__root--variant_neutralSolid {
83
79
  background: var(--seed-color-bg-neutral-inverted);
84
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
85
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
86
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
87
80
  --track-color: var(--seed-color-palette-static-white-alpha-300);
88
- --range-color: var(--seed-color-palette-static-white);
81
+ --range-color: var(--seed-color-palette-static-white)
89
82
  }
90
83
  .seed-action-button__text--variant_neutralSolid {
91
- --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
92
- --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
93
- --seed-icon-color: var(--seed-color-fg-neutral-inverted);
94
- --track-color: var(--seed-color-palette-static-white-alpha-300);
95
- --range-color: var(--seed-color-palette-static-white);
96
- color: var(--seed-color-fg-neutral-inverted);
97
- font-weight: var(--seed-font-weight-bold);
98
- }
99
- .seed-action-button--variant_neutralSolid:active {
100
- background: var(--seed-color-bg-neutral-inverted-pressed);
84
+ color: var(--seed-color-fg-neutral-inverted)
101
85
  }
102
- .seed-action-button--variant_neutralSolid.seed-action-button--disabled_true {
103
- background: var(--seed-color-bg-disabled);
104
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
105
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
106
- --seed-icon-color: var(--seed-color-fg-disabled);
86
+ .seed-action-button__prefixIcon--variant_neutralSolid {
87
+ color: var(--seed-color-fg-neutral-inverted)
107
88
  }
108
- .seed-action-button__text--variant_neutralSolid.seed-action-button__text--disabled_true {
109
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
110
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
111
- --seed-icon-color: var(--seed-color-fg-disabled);
112
- color: var(--seed-color-fg-disabled);
89
+ .seed-action-button__suffixIcon--variant_neutralSolid {
90
+ color: var(--seed-color-fg-neutral-inverted)
113
91
  }
114
- .seed-action-button--variant_neutralSolid.seed-action-button--loading_true {
115
- background: var(--seed-color-bg-neutral-inverted-pressed);
92
+ .seed-action-button__icon--variant_neutralSolid {
93
+ color: var(--seed-color-fg-neutral-inverted)
116
94
  }
117
- .seed-action-button--variant_neutralWeak {
95
+ .seed-action-button__root--variant_neutralWeak {
118
96
  background: var(--seed-color-bg-neutral-weak);
119
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
120
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
121
- --seed-icon-color: var(--seed-color-fg-neutral);
122
97
  --track-color: var(--seed-color-palette-gray-500);
123
- --range-color: var(--seed-color-fg-neutral);
98
+ --range-color: var(--seed-color-fg-neutral)
124
99
  }
125
100
  .seed-action-button__text--variant_neutralWeak {
126
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
127
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
128
- --seed-icon-color: var(--seed-color-fg-neutral);
129
- --track-color: var(--seed-color-palette-gray-500);
130
- --range-color: var(--seed-color-fg-neutral);
131
- color: var(--seed-color-fg-neutral);
132
- font-weight: var(--seed-font-weight-bold);
133
- }
134
- .seed-action-button--variant_neutralWeak:active {
135
- background: var(--seed-color-bg-neutral-weak-pressed);
101
+ color: var(--seed-color-fg-neutral)
136
102
  }
137
- .seed-action-button--variant_neutralWeak.seed-action-button--disabled_true {
138
- background: var(--seed-color-bg-disabled);
139
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
140
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
141
- --seed-icon-color: var(--seed-color-fg-disabled);
103
+ .seed-action-button__prefixIcon--variant_neutralWeak {
104
+ color: var(--seed-color-fg-neutral)
142
105
  }
143
- .seed-action-button__text--variant_neutralWeak.seed-action-button__text--disabled_true {
144
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
145
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
146
- --seed-icon-color: var(--seed-color-fg-disabled);
147
- color: var(--seed-color-fg-disabled);
106
+ .seed-action-button__suffixIcon--variant_neutralWeak {
107
+ color: var(--seed-color-fg-neutral)
148
108
  }
149
- .seed-action-button--variant_neutralWeak.seed-action-button--loading_true {
150
- background: var(--seed-color-bg-neutral-weak-pressed);
109
+ .seed-action-button__icon--variant_neutralWeak {
110
+ color: var(--seed-color-fg-neutral)
151
111
  }
152
- .seed-action-button--variant_criticalSolid {
112
+ .seed-action-button__root--variant_criticalSolid {
153
113
  background: var(--seed-color-bg-critical-solid);
154
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
155
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
156
- --seed-icon-color: var(--seed-color-palette-static-white);
157
114
  --track-color: var(--seed-color-palette-static-white-alpha-300);
158
- --range-color: var(--seed-color-palette-static-white);
115
+ --range-color: var(--seed-color-palette-static-white)
159
116
  }
160
117
  .seed-action-button__text--variant_criticalSolid {
161
- --seed-prefix-icon-color: var(--seed-color-palette-static-white);
162
- --seed-suffix-icon-color: var(--seed-color-palette-static-white);
163
- --seed-icon-color: var(--seed-color-palette-static-white);
164
- --track-color: var(--seed-color-palette-static-white-alpha-300);
165
- --range-color: var(--seed-color-palette-static-white);
166
- color: var(--seed-color-palette-static-white);
167
- font-weight: var(--seed-font-weight-bold);
118
+ color: var(--seed-color-palette-static-white)
168
119
  }
169
- .seed-action-button--variant_criticalSolid:active {
170
- background: var(--seed-color-bg-critical-solid-pressed);
120
+ .seed-action-button__prefixIcon--variant_criticalSolid {
121
+ color: var(--seed-color-palette-static-white)
171
122
  }
172
- .seed-action-button--variant_criticalSolid.seed-action-button--disabled_true {
173
- background: var(--seed-color-bg-disabled);
174
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
175
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
176
- --seed-icon-color: var(--seed-color-fg-disabled);
123
+ .seed-action-button__suffixIcon--variant_criticalSolid {
124
+ color: var(--seed-color-palette-static-white)
177
125
  }
178
- .seed-action-button__text--variant_criticalSolid.seed-action-button__text--disabled_true {
179
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
180
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
181
- --seed-icon-color: var(--seed-color-fg-disabled);
182
- color: var(--seed-color-fg-disabled);
126
+ .seed-action-button__icon--variant_criticalSolid {
127
+ color: var(--seed-color-palette-static-white)
183
128
  }
184
- .seed-action-button--variant_criticalSolid.seed-action-button--loading_true {
185
- background: var(--seed-color-bg-critical-solid-pressed);
186
- }
187
- .seed-action-button--variant_brandOutline {
129
+ .seed-action-button__root--variant_brandOutline {
188
130
  border-style: solid;
189
131
  background: var(--seed-color-bg-transparent);
190
132
  border-width: 1px;
191
133
  border-color: var(--seed-color-stroke-neutral-muted);
192
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
193
- --seed-suffix-icon-color: var(--seed-color-fg-brand);
194
- --seed-icon-color: var(--seed-color-fg-brand);
195
134
  --track-color: var(--seed-color-palette-carrot-200);
196
- --range-color: var(--seed-color-bg-brand-solid);
135
+ --range-color: var(--seed-color-bg-brand-solid)
197
136
  }
198
137
  .seed-action-button__text--variant_brandOutline {
199
- --seed-prefix-icon-color: var(--seed-color-fg-brand);
200
- --seed-suffix-icon-color: var(--seed-color-fg-brand);
201
- --seed-icon-color: var(--seed-color-fg-brand);
202
- --track-color: var(--seed-color-palette-carrot-200);
203
- --range-color: var(--seed-color-bg-brand-solid);
204
- color: var(--seed-color-fg-brand);
205
- font-weight: var(--seed-font-weight-bold);
206
- }
207
- .seed-action-button--variant_brandOutline:active {
208
- background: var(--seed-color-bg-transparent-pressed);
138
+ color: var(--seed-color-fg-brand)
209
139
  }
210
- .seed-action-button--variant_brandOutline.seed-action-button--disabled_true {
211
- background: var(--seed-color-bg-transparent);
212
- border-color: var(--seed-color-stroke-neutral-muted);
213
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
214
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
215
- --seed-icon-color: var(--seed-color-fg-disabled);
140
+ .seed-action-button__prefixIcon--variant_brandOutline {
141
+ color: var(--seed-color-fg-brand)
216
142
  }
217
- .seed-action-button__text--variant_brandOutline.seed-action-button__text--disabled_true {
218
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
219
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
220
- --seed-icon-color: var(--seed-color-fg-disabled);
221
- color: var(--seed-color-fg-disabled);
143
+ .seed-action-button__suffixIcon--variant_brandOutline {
144
+ color: var(--seed-color-fg-brand)
222
145
  }
223
- .seed-action-button--variant_brandOutline.seed-action-button--loading_true {
224
- background: var(--seed-color-bg-transparent);
146
+ .seed-action-button__icon--variant_brandOutline {
147
+ color: var(--seed-color-fg-brand)
225
148
  }
226
- .seed-action-button--variant_neutralOutline {
149
+ .seed-action-button__root--variant_neutralOutline {
227
150
  border-style: solid;
228
151
  background: var(--seed-color-bg-transparent);
229
152
  border-width: 1px;
230
153
  border-color: var(--seed-color-stroke-neutral-muted);
231
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
232
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
233
- --seed-icon-color: var(--seed-color-fg-neutral);
234
154
  --track-color: var(--seed-color-palette-gray-500);
235
- --range-color: var(--seed-color-fg-neutral);
155
+ --range-color: var(--seed-color-fg-neutral)
236
156
  }
237
157
  .seed-action-button__text--variant_neutralOutline {
238
- --seed-prefix-icon-color: var(--seed-color-fg-neutral);
239
- --seed-suffix-icon-color: var(--seed-color-fg-neutral);
240
- --seed-icon-color: var(--seed-color-fg-neutral);
241
- --track-color: var(--seed-color-palette-gray-500);
242
- --range-color: var(--seed-color-fg-neutral);
243
- color: var(--seed-color-fg-neutral);
244
- font-weight: var(--seed-font-weight-bold);
158
+ color: var(--seed-color-fg-neutral)
245
159
  }
246
- .seed-action-button--variant_neutralOutline:active {
247
- background: var(--seed-color-bg-transparent-pressed);
160
+ .seed-action-button__prefixIcon--variant_neutralOutline {
161
+ color: var(--seed-color-fg-neutral)
248
162
  }
249
- .seed-action-button--variant_neutralOutline.seed-action-button--disabled_true {
250
- background: var(--seed-color-bg-transparent);
251
- border-color: var(--seed-color-stroke-neutral-muted);
252
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
253
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
254
- --seed-icon-color: var(--seed-color-fg-disabled);
163
+ .seed-action-button__suffixIcon--variant_neutralOutline {
164
+ color: var(--seed-color-fg-neutral)
255
165
  }
256
- .seed-action-button__text--variant_neutralOutline.seed-action-button__text--disabled_true {
257
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
258
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
259
- --seed-icon-color: var(--seed-color-fg-disabled);
260
- color: var(--seed-color-fg-disabled);
261
- }
262
- .seed-action-button--variant_neutralOutline.seed-action-button--loading_true {
263
- background: var(--seed-color-bg-transparent);
166
+ .seed-action-button__icon--variant_neutralOutline {
167
+ color: var(--seed-color-fg-neutral)
264
168
  }
265
- .seed-action-button--variant_ghost {
169
+ .seed-action-button__root--variant_ghost {
266
170
  background: #ffffff00;
267
- --seed-box-color: var(--seed-color-fg-neutral);
268
- --seed-prefix-icon-color: var(--seed-box-color);
269
- --seed-suffix-icon-color: var(--seed-box-color);
270
- --seed-icon-color: var(--seed-box-color);
271
- --seed-font-weight: var(--seed-font-weight-bold);
272
171
  --track-color: var(--seed-color-palette-gray-500);
273
- --range-color: var(--seed-color-fg-neutral);
172
+ --range-color: var(--seed-color-fg-neutral)
274
173
  }
275
174
  .seed-action-button__text--variant_ghost {
276
- --seed-box-color: var(--seed-color-fg-neutral);
277
- --seed-prefix-icon-color: var(--seed-box-color);
278
- --seed-suffix-icon-color: var(--seed-box-color);
279
- --seed-icon-color: var(--seed-box-color);
280
- --seed-font-weight: var(--seed-font-weight-bold);
281
- --track-color: var(--seed-color-palette-gray-500);
282
- --range-color: var(--seed-color-fg-neutral);
283
- color: var(--seed-box-color);
284
- font-weight: var(--seed-font-weight);
285
- }
286
- .seed-action-button--variant_ghost:active {
287
- background: var(--seed-color-bg-transparent-pressed);
175
+ color: var(--seed-color-fg-neutral)
288
176
  }
289
- .seed-action-button--variant_ghost.seed-action-button--disabled_true {
290
- background: #ffffff00;
291
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
292
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
293
- --seed-icon-color: var(--seed-color-fg-disabled);
177
+ .seed-action-button__prefixIcon--variant_ghost {
178
+ color: var(--seed-color-fg-neutral)
294
179
  }
295
- .seed-action-button__text--variant_ghost.seed-action-button__text--disabled_true {
296
- --seed-prefix-icon-color: var(--seed-color-fg-disabled);
297
- --seed-suffix-icon-color: var(--seed-color-fg-disabled);
298
- --seed-icon-color: var(--seed-color-fg-disabled);
299
- color: var(--seed-color-fg-disabled);
180
+ .seed-action-button__suffixIcon--variant_ghost {
181
+ color: var(--seed-color-fg-neutral)
300
182
  }
301
- .seed-action-button--variant_ghost.seed-action-button--loading_true {
302
- background: var(--seed-color-bg-transparent-pressed);
183
+ .seed-action-button__icon--variant_ghost {
184
+ color: var(--seed-color-fg-neutral)
303
185
  }
304
- .seed-action-button--size_xsmall {
186
+ .seed-action-button__root--size_xsmall {
305
187
  height: var(--seed-dimension-x8);
306
188
  border-radius: var(--seed-radius-full);
307
189
  --size: 14px;
308
- --thickness: 2px;
309
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
310
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
311
- --seed-icon-size: var(--seed-dimension-x3_5);
312
- }
313
- .seed-action-button__text--size_xsmall {
314
- --size: 14px;
315
- --thickness: 2px;
316
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
317
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
318
- --seed-icon-size: var(--seed-dimension-x3_5);
190
+ --thickness: 2px
319
191
  }
320
- .seed-action-button--size_small {
192
+ .seed-action-button__root--size_small {
321
193
  height: var(--seed-dimension-x9);
322
194
  border-radius: var(--seed-radius-r2);
323
195
  --size: 14px;
324
- --thickness: 2px;
325
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
326
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
327
- --seed-icon-size: var(--seed-dimension-x4);
196
+ --thickness: 2px
328
197
  }
329
- .seed-action-button__text--size_small {
330
- --size: 14px;
331
- --thickness: 2px;
332
- --seed-prefix-icon-size: var(--seed-dimension-x3_5);
333
- --seed-suffix-icon-size: var(--seed-dimension-x3_5);
334
- --seed-icon-size: var(--seed-dimension-x4);
335
- }
336
- .seed-action-button--size_medium {
198
+ .seed-action-button__root--size_medium {
337
199
  height: var(--seed-dimension-x10);
338
200
  border-radius: var(--seed-radius-r2);
339
201
  --size: 16px;
340
- --thickness: 2px;
341
- --seed-prefix-icon-size: var(--seed-dimension-x4);
342
- --seed-suffix-icon-size: var(--seed-dimension-x4);
343
- --seed-icon-size: 18px;
344
- }
345
- .seed-action-button__text--size_medium {
346
- --size: 16px;
347
- --thickness: 2px;
348
- --seed-prefix-icon-size: var(--seed-dimension-x4);
349
- --seed-suffix-icon-size: var(--seed-dimension-x4);
350
- --seed-icon-size: 18px;
202
+ --thickness: 2px
351
203
  }
352
- .seed-action-button--size_large {
204
+ .seed-action-button__root--size_large {
353
205
  height: var(--seed-dimension-x13);
354
206
  border-radius: var(--seed-radius-r3);
355
207
  --size: 18px;
356
- --thickness: 2px;
357
- --seed-prefix-icon-size: 22px;
358
- --seed-suffix-icon-size: 22px;
359
- --seed-icon-size: 22px;
208
+ --thickness: 2px
360
209
  }
361
- .seed-action-button__text--size_large {
362
- --size: 18px;
363
- --thickness: 2px;
364
- --seed-prefix-icon-size: 22px;
365
- --seed-suffix-icon-size: 22px;
366
- --seed-icon-size: 22px;
367
- }
368
- .seed-action-button--size_xsmall-layout_withText {
210
+ .seed-action-button__root--size_xsmall-layout_withText {
369
211
  gap: var(--seed-dimension-x1);
370
212
  --seed-box-padding-left: var(--seed-dimension-x3_5);
371
213
  --seed-box-padding-right: var(--seed-dimension-x3_5);
372
214
  --seed-box-padding-top: var(--seed-dimension-x1_5);
373
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
215
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5)
216
+ }
217
+ .seed-action-button__content--size_xsmall-layout_withText {
218
+ gap: var(--seed-dimension-x1)
374
219
  }
375
220
  .seed-action-button__text--size_xsmall-layout_withText {
376
- --seed-box-padding-left: var(--seed-dimension-x3_5);
377
- --seed-box-padding-right: var(--seed-dimension-x3_5);
378
- --seed-box-padding-top: var(--seed-dimension-x1_5);
379
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
380
221
  font-size: var(--seed-font-size-t3);
381
- line-height: var(--seed-line-height-t3);
222
+ line-height: var(--seed-line-height-t3)
223
+ }
224
+ .seed-action-button__prefixIcon--size_xsmall-layout_withText {
225
+ width: var(--seed-dimension-x3_5);
226
+ height: var(--seed-dimension-x3_5)
382
227
  }
383
- .seed-action-button--size_xsmall-layout_iconOnly {
228
+ .seed-action-button__suffixIcon--size_xsmall-layout_withText {
229
+ width: var(--seed-dimension-x3_5);
230
+ height: var(--seed-dimension-x3_5)
231
+ }
232
+ .seed-action-button__root--size_xsmall-layout_iconOnly {
384
233
  min-width: var(--seed-dimension-x8);
385
234
  --seed-box-padding-left: var(--seed-dimension-x1_5);
386
235
  --seed-box-padding-right: var(--seed-dimension-x1_5);
387
236
  --seed-box-padding-top: var(--seed-dimension-x1_5);
388
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
237
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5)
389
238
  }
390
- .seed-action-button__text--size_xsmall-layout_iconOnly {
391
- --seed-box-padding-left: var(--seed-dimension-x1_5);
392
- --seed-box-padding-right: var(--seed-dimension-x1_5);
393
- --seed-box-padding-top: var(--seed-dimension-x1_5);
394
- --seed-box-padding-bottom: var(--seed-dimension-x1_5);
239
+ .seed-action-button__icon--size_xsmall-layout_iconOnly {
240
+ width: var(--seed-dimension-x3_5);
241
+ height: var(--seed-dimension-x3_5)
395
242
  }
396
- .seed-action-button--size_small-layout_withText {
243
+ .seed-action-button__root--size_small-layout_withText {
397
244
  gap: var(--seed-dimension-x1);
398
245
  --seed-box-padding-left: var(--seed-dimension-x3_5);
399
246
  --seed-box-padding-right: var(--seed-dimension-x3_5);
400
247
  --seed-box-padding-top: var(--seed-dimension-x2);
401
- --seed-box-padding-bottom: var(--seed-dimension-x2);
248
+ --seed-box-padding-bottom: var(--seed-dimension-x2)
249
+ }
250
+ .seed-action-button__content--size_small-layout_withText {
251
+ gap: var(--seed-dimension-x1)
402
252
  }
403
253
  .seed-action-button__text--size_small-layout_withText {
404
- --seed-box-padding-left: var(--seed-dimension-x3_5);
405
- --seed-box-padding-right: var(--seed-dimension-x3_5);
406
- --seed-box-padding-top: var(--seed-dimension-x2);
407
- --seed-box-padding-bottom: var(--seed-dimension-x2);
408
254
  font-size: var(--seed-font-size-t4);
409
- line-height: var(--seed-line-height-t4);
255
+ line-height: var(--seed-line-height-t4)
256
+ }
257
+ .seed-action-button__prefixIcon--size_small-layout_withText {
258
+ width: var(--seed-dimension-x3_5);
259
+ height: var(--seed-dimension-x3_5)
410
260
  }
411
- .seed-action-button--size_small-layout_iconOnly {
261
+ .seed-action-button__suffixIcon--size_small-layout_withText {
262
+ width: var(--seed-dimension-x3_5);
263
+ height: var(--seed-dimension-x3_5)
264
+ }
265
+ .seed-action-button__root--size_small-layout_iconOnly {
412
266
  min-width: var(--seed-dimension-x9);
413
267
  --seed-box-padding-left: var(--seed-dimension-x2);
414
268
  --seed-box-padding-right: var(--seed-dimension-x2);
415
269
  --seed-box-padding-top: var(--seed-dimension-x2);
416
- --seed-box-padding-bottom: var(--seed-dimension-x2);
270
+ --seed-box-padding-bottom: var(--seed-dimension-x2)
417
271
  }
418
- .seed-action-button__text--size_small-layout_iconOnly {
419
- --seed-box-padding-left: var(--seed-dimension-x2);
420
- --seed-box-padding-right: var(--seed-dimension-x2);
421
- --seed-box-padding-top: var(--seed-dimension-x2);
422
- --seed-box-padding-bottom: var(--seed-dimension-x2);
272
+ .seed-action-button__icon--size_small-layout_iconOnly {
273
+ width: var(--seed-dimension-x4);
274
+ height: var(--seed-dimension-x4)
423
275
  }
424
- .seed-action-button--size_medium-layout_withText {
276
+ .seed-action-button__root--size_medium-layout_withText {
425
277
  gap: var(--seed-dimension-x1_5);
426
278
  --seed-box-padding-left: var(--seed-dimension-x4);
427
279
  --seed-box-padding-right: var(--seed-dimension-x4);
428
280
  --seed-box-padding-top: var(--seed-dimension-x2_5);
429
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
281
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5)
282
+ }
283
+ .seed-action-button__content--size_medium-layout_withText {
284
+ gap: var(--seed-dimension-x1_5)
430
285
  }
431
286
  .seed-action-button__text--size_medium-layout_withText {
432
- --seed-box-padding-left: var(--seed-dimension-x4);
433
- --seed-box-padding-right: var(--seed-dimension-x4);
434
- --seed-box-padding-top: var(--seed-dimension-x2_5);
435
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
436
287
  font-size: var(--seed-font-size-t4);
437
- line-height: var(--seed-line-height-t4);
288
+ line-height: var(--seed-line-height-t4)
289
+ }
290
+ .seed-action-button__prefixIcon--size_medium-layout_withText {
291
+ width: var(--seed-dimension-x4);
292
+ height: var(--seed-dimension-x4)
438
293
  }
439
- .seed-action-button--size_medium-layout_iconOnly {
294
+ .seed-action-button__suffixIcon--size_medium-layout_withText {
295
+ width: var(--seed-dimension-x4);
296
+ height: var(--seed-dimension-x4)
297
+ }
298
+ .seed-action-button__root--size_medium-layout_iconOnly {
440
299
  min-width: var(--seed-dimension-x10);
441
300
  --seed-box-padding-left: var(--seed-dimension-x2_5);
442
301
  --seed-box-padding-right: var(--seed-dimension-x2_5);
443
302
  --seed-box-padding-top: var(--seed-dimension-x2_5);
444
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
303
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5)
445
304
  }
446
- .seed-action-button__text--size_medium-layout_iconOnly {
447
- --seed-box-padding-left: var(--seed-dimension-x2_5);
448
- --seed-box-padding-right: var(--seed-dimension-x2_5);
449
- --seed-box-padding-top: var(--seed-dimension-x2_5);
450
- --seed-box-padding-bottom: var(--seed-dimension-x2_5);
305
+ .seed-action-button__icon--size_medium-layout_iconOnly {
306
+ width: 18px;
307
+ height: 18px
451
308
  }
452
- .seed-action-button--size_large-layout_withText {
309
+ .seed-action-button__root--size_large-layout_withText {
453
310
  gap: var(--seed-dimension-x2);
454
311
  --seed-box-padding-left: var(--seed-dimension-x5);
455
312
  --seed-box-padding-right: var(--seed-dimension-x5);
456
313
  --seed-box-padding-top: var(--seed-dimension-x3_5);
457
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
314
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5)
315
+ }
316
+ .seed-action-button__content--size_large-layout_withText {
317
+ gap: var(--seed-dimension-x2)
458
318
  }
459
319
  .seed-action-button__text--size_large-layout_withText {
460
- --seed-box-padding-left: var(--seed-dimension-x5);
461
- --seed-box-padding-right: var(--seed-dimension-x5);
462
- --seed-box-padding-top: var(--seed-dimension-x3_5);
463
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
464
320
  font-size: var(--seed-font-size-t6);
465
- line-height: var(--seed-line-height-t6);
321
+ line-height: var(--seed-line-height-t6)
322
+ }
323
+ .seed-action-button__prefixIcon--size_large-layout_withText {
324
+ width: 22px;
325
+ height: 22px
466
326
  }
467
- .seed-action-button--size_large-layout_iconOnly {
327
+ .seed-action-button__suffixIcon--size_large-layout_withText {
328
+ width: 22px;
329
+ height: 22px
330
+ }
331
+ .seed-action-button__root--size_large-layout_iconOnly {
468
332
  min-width: var(--seed-dimension-x13);
469
333
  --seed-box-padding-left: var(--seed-dimension-x3_5);
470
334
  --seed-box-padding-right: var(--seed-dimension-x3_5);
471
335
  --seed-box-padding-top: var(--seed-dimension-x3_5);
472
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
336
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5)
473
337
  }
474
- .seed-action-button__text--size_large-layout_iconOnly {
475
- --seed-box-padding-left: var(--seed-dimension-x3_5);
476
- --seed-box-padding-right: var(--seed-dimension-x3_5);
477
- --seed-box-padding-top: var(--seed-dimension-x3_5);
478
- --seed-box-padding-bottom: var(--seed-dimension-x3_5);
338
+ .seed-action-button__icon--size_large-layout_iconOnly {
339
+ width: 22px;
340
+ height: 22px
341
+ }
342
+ .seed-action-button__root--variant_brandSolid-pressed_true {
343
+ background: var(--seed-color-bg-brand-solid-pressed)
344
+ }
345
+ .seed-action-button__root--variant_neutralSolid-pressed_true {
346
+ background: var(--seed-color-bg-neutral-inverted-pressed)
347
+ }
348
+ .seed-action-button__root--variant_neutralWeak-pressed_true {
349
+ background: var(--seed-color-bg-neutral-weak-pressed)
350
+ }
351
+ .seed-action-button__root--variant_criticalSolid-pressed_true {
352
+ background: var(--seed-color-bg-critical-solid-pressed)
353
+ }
354
+ .seed-action-button__root--variant_brandOutline-pressed_true {
355
+ background: var(--seed-color-bg-transparent-pressed)
356
+ }
357
+ .seed-action-button__root--variant_neutralOutline-pressed_true {
358
+ background: var(--seed-color-bg-transparent-pressed)
359
+ }
360
+ .seed-action-button__root--variant_ghost-pressed_true {
361
+ background: var(--seed-color-bg-transparent-pressed)
362
+ }
363
+ .seed-action-button__root--variant_brandSolid-disabled_true {
364
+ background: var(--seed-color-bg-disabled)
365
+ }
366
+ .seed-action-button__text--variant_brandSolid-disabled_true {
367
+ color: var(--seed-color-fg-disabled)
368
+ }
369
+ .seed-action-button__prefixIcon--variant_brandSolid-disabled_true {
370
+ color: var(--seed-color-fg-disabled)
371
+ }
372
+ .seed-action-button__suffixIcon--variant_brandSolid-disabled_true {
373
+ color: var(--seed-color-fg-disabled)
374
+ }
375
+ .seed-action-button__icon--variant_brandSolid-disabled_true {
376
+ color: var(--seed-color-fg-disabled)
377
+ }
378
+ .seed-action-button__root--variant_neutralSolid-disabled_true {
379
+ background: var(--seed-color-bg-disabled)
380
+ }
381
+ .seed-action-button__text--variant_neutralSolid-disabled_true {
382
+ color: var(--seed-color-fg-disabled)
383
+ }
384
+ .seed-action-button__prefixIcon--variant_neutralSolid-disabled_true {
385
+ color: var(--seed-color-fg-disabled)
386
+ }
387
+ .seed-action-button__suffixIcon--variant_neutralSolid-disabled_true {
388
+ color: var(--seed-color-fg-disabled)
389
+ }
390
+ .seed-action-button__icon--variant_neutralSolid-disabled_true {
391
+ color: var(--seed-color-fg-disabled)
392
+ }
393
+ .seed-action-button__root--variant_neutralWeak-disabled_true {
394
+ background: var(--seed-color-bg-disabled)
395
+ }
396
+ .seed-action-button__text--variant_neutralWeak-disabled_true {
397
+ color: var(--seed-color-fg-disabled)
398
+ }
399
+ .seed-action-button__prefixIcon--variant_neutralWeak-disabled_true {
400
+ color: var(--seed-color-fg-disabled)
401
+ }
402
+ .seed-action-button__suffixIcon--variant_neutralWeak-disabled_true {
403
+ color: var(--seed-color-fg-disabled)
404
+ }
405
+ .seed-action-button__icon--variant_neutralWeak-disabled_true {
406
+ color: var(--seed-color-fg-disabled)
407
+ }
408
+ .seed-action-button__root--variant_criticalSolid-disabled_true {
409
+ background: var(--seed-color-bg-disabled)
410
+ }
411
+ .seed-action-button__text--variant_criticalSolid-disabled_true {
412
+ color: var(--seed-color-fg-disabled)
413
+ }
414
+ .seed-action-button__prefixIcon--variant_criticalSolid-disabled_true {
415
+ color: var(--seed-color-fg-disabled)
416
+ }
417
+ .seed-action-button__suffixIcon--variant_criticalSolid-disabled_true {
418
+ color: var(--seed-color-fg-disabled)
419
+ }
420
+ .seed-action-button__icon--variant_criticalSolid-disabled_true {
421
+ color: var(--seed-color-fg-disabled)
422
+ }
423
+ .seed-action-button__root--variant_brandOutline-disabled_true {
424
+ background: var(--seed-color-bg-transparent);
425
+ border-color: var(--seed-color-stroke-neutral-muted)
426
+ }
427
+ .seed-action-button__text--variant_brandOutline-disabled_true {
428
+ color: var(--seed-color-fg-disabled)
429
+ }
430
+ .seed-action-button__prefixIcon--variant_brandOutline-disabled_true {
431
+ color: var(--seed-color-fg-disabled)
432
+ }
433
+ .seed-action-button__suffixIcon--variant_brandOutline-disabled_true {
434
+ color: var(--seed-color-fg-disabled)
435
+ }
436
+ .seed-action-button__icon--variant_brandOutline-disabled_true {
437
+ color: var(--seed-color-fg-disabled)
438
+ }
439
+ .seed-action-button__root--variant_neutralOutline-disabled_true {
440
+ background: var(--seed-color-bg-transparent);
441
+ border-color: var(--seed-color-stroke-neutral-muted)
442
+ }
443
+ .seed-action-button__text--variant_neutralOutline-disabled_true {
444
+ color: var(--seed-color-fg-disabled)
445
+ }
446
+ .seed-action-button__prefixIcon--variant_neutralOutline-disabled_true {
447
+ color: var(--seed-color-fg-disabled)
448
+ }
449
+ .seed-action-button__suffixIcon--variant_neutralOutline-disabled_true {
450
+ color: var(--seed-color-fg-disabled)
451
+ }
452
+ .seed-action-button__icon--variant_neutralOutline-disabled_true {
453
+ color: var(--seed-color-fg-disabled)
454
+ }
455
+ .seed-action-button__root--variant_ghost-disabled_true {
456
+ background: #ffffff00
457
+ }
458
+ .seed-action-button__text--variant_ghost-disabled_true {
459
+ color: var(--seed-color-fg-disabled)
460
+ }
461
+ .seed-action-button__prefixIcon--variant_ghost-disabled_true {
462
+ color: var(--seed-color-fg-disabled)
463
+ }
464
+ .seed-action-button__suffixIcon--variant_ghost-disabled_true {
465
+ color: var(--seed-color-fg-disabled)
466
+ }
467
+ .seed-action-button__icon--variant_ghost-disabled_true {
468
+ color: var(--seed-color-fg-disabled)
469
+ }
470
+ .seed-action-button__root--variant_brandSolid-loading_true {
471
+ background: var(--seed-color-bg-brand-solid-pressed)
472
+ }
473
+ .seed-action-button__root--variant_neutralSolid-loading_true {
474
+ background: var(--seed-color-bg-neutral-inverted-pressed)
475
+ }
476
+ .seed-action-button__root--variant_neutralWeak-loading_true {
477
+ background: var(--seed-color-bg-neutral-weak-pressed)
478
+ }
479
+ .seed-action-button__root--variant_criticalSolid-loading_true {
480
+ background: var(--seed-color-bg-critical-solid-pressed)
481
+ }
482
+ .seed-action-button__root--variant_brandOutline-loading_true {
483
+ background: var(--seed-color-bg-transparent)
484
+ }
485
+ .seed-action-button__root--variant_neutralOutline-loading_true {
486
+ background: var(--seed-color-bg-transparent)
487
+ }
488
+ .seed-action-button__root--variant_ghost-loading_true {
489
+ background: var(--seed-color-bg-transparent-pressed)
479
490
  }