@seed-design/lynx-css 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (268) hide show
  1. package/all.css +1730 -0
  2. package/all.min.css +1 -0
  3. package/base.css +625 -0
  4. package/base.min.css +1 -0
  5. package/package.json +60 -0
  6. package/recipes/action-button.css +489 -0
  7. package/recipes/action-button.d.ts +44 -0
  8. package/recipes/action-button.mjs +212 -0
  9. package/recipes/bottom-sheet-handle.css +18 -0
  10. package/recipes/bottom-sheet-handle.d.ts +21 -0
  11. package/recipes/bottom-sheet-handle.mjs +36 -0
  12. package/recipes/bottom-sheet.css +91 -0
  13. package/recipes/bottom-sheet.d.ts +28 -0
  14. package/recipes/bottom-sheet.mjs +76 -0
  15. package/recipes/checkbox-group.css +5 -0
  16. package/recipes/checkbox-group.d.ts +21 -0
  17. package/recipes/checkbox-group.mjs +36 -0
  18. package/recipes/checkbox.css +34 -0
  19. package/recipes/checkbox.d.ts +32 -0
  20. package/recipes/checkbox.mjs +53 -0
  21. package/recipes/checkmark.css +131 -0
  22. package/recipes/checkmark.d.ts +48 -0
  23. package/recipes/checkmark.mjs +220 -0
  24. package/recipes/progress-circle.css +80 -0
  25. package/recipes/progress-circle.d.ts +30 -0
  26. package/recipes/progress-circle.mjs +40 -0
  27. package/recipes/radio-group.css +5 -0
  28. package/recipes/radio-group.d.ts +21 -0
  29. package/recipes/radio-group.mjs +36 -0
  30. package/recipes/radio.css +34 -0
  31. package/recipes/radio.d.ts +32 -0
  32. package/recipes/radio.mjs +53 -0
  33. package/recipes/radiomark.css +94 -0
  34. package/recipes/radiomark.d.ts +40 -0
  35. package/recipes/radiomark.mjs +121 -0
  36. package/recipes/shared.mjs +48 -0
  37. package/recipes/switch.css +40 -0
  38. package/recipes/switch.d.ts +28 -0
  39. package/recipes/switch.mjs +49 -0
  40. package/recipes/switchmark.css +75 -0
  41. package/recipes/switchmark.d.ts +36 -0
  42. package/recipes/switchmark.mjs +90 -0
  43. package/recipes/tag-group-item.css +34 -0
  44. package/recipes/tag-group-item.d.ts +32 -0
  45. package/recipes/tag-group-item.mjs +55 -0
  46. package/recipes/tag-group.css +32 -0
  47. package/recipes/tag-group.d.ts +24 -0
  48. package/recipes/tag-group.mjs +48 -0
  49. package/vars/color/banner.d.ts +10 -0
  50. package/vars/color/banner.mjs +10 -0
  51. package/vars/color/bg.d.ts +76 -0
  52. package/vars/color/bg.mjs +41 -0
  53. package/vars/color/fg.d.ts +30 -0
  54. package/vars/color/fg.mjs +16 -0
  55. package/vars/color/index.d.ts +6 -0
  56. package/vars/color/index.mjs +6 -0
  57. package/vars/color/manner-temp/index.d.ts +10 -0
  58. package/vars/color/manner-temp/index.mjs +10 -0
  59. package/vars/color/manner-temp/l1.d.ts +2 -0
  60. package/vars/color/manner-temp/l1.mjs +2 -0
  61. package/vars/color/manner-temp/l10.d.ts +2 -0
  62. package/vars/color/manner-temp/l10.mjs +2 -0
  63. package/vars/color/manner-temp/l2.d.ts +2 -0
  64. package/vars/color/manner-temp/l2.mjs +2 -0
  65. package/vars/color/manner-temp/l3.d.ts +2 -0
  66. package/vars/color/manner-temp/l3.mjs +2 -0
  67. package/vars/color/manner-temp/l4.d.ts +2 -0
  68. package/vars/color/manner-temp/l4.mjs +2 -0
  69. package/vars/color/manner-temp/l5.d.ts +2 -0
  70. package/vars/color/manner-temp/l5.mjs +2 -0
  71. package/vars/color/manner-temp/l6.d.ts +2 -0
  72. package/vars/color/manner-temp/l6.mjs +2 -0
  73. package/vars/color/manner-temp/l7.d.ts +2 -0
  74. package/vars/color/manner-temp/l7.mjs +2 -0
  75. package/vars/color/manner-temp/l8.d.ts +2 -0
  76. package/vars/color/manner-temp/l8.mjs +2 -0
  77. package/vars/color/manner-temp/l9.d.ts +2 -0
  78. package/vars/color/manner-temp/l9.mjs +2 -0
  79. package/vars/color/palette.d.ts +94 -0
  80. package/vars/color/palette.mjs +94 -0
  81. package/vars/color/stroke.d.ts +31 -0
  82. package/vars/color/stroke.mjs +16 -0
  83. package/vars/component/action-button.d.ts +660 -0
  84. package/vars/component/action-button.mjs +541 -0
  85. package/vars/component/action-chip.d.ts +132 -0
  86. package/vars/component/action-chip.mjs +132 -0
  87. package/vars/component/action-sheet-close-button.d.ts +23 -0
  88. package/vars/component/action-sheet-close-button.mjs +23 -0
  89. package/vars/component/action-sheet-item.d.ts +36 -0
  90. package/vars/component/action-sheet-item.mjs +36 -0
  91. package/vars/component/action-sheet.d.ts +46 -0
  92. package/vars/component/action-sheet.mjs +46 -0
  93. package/vars/component/avatar-stack.d.ts +110 -0
  94. package/vars/component/avatar-stack.mjs +110 -0
  95. package/vars/component/avatar.d.ts +204 -0
  96. package/vars/component/avatar.mjs +162 -0
  97. package/vars/component/badge.d.ts +316 -0
  98. package/vars/component/badge.mjs +236 -0
  99. package/vars/component/bottom-sheet-close-button.d.ts +21 -0
  100. package/vars/component/bottom-sheet-close-button.mjs +21 -0
  101. package/vars/component/bottom-sheet-handle.d.ts +24 -0
  102. package/vars/component/bottom-sheet-handle.mjs +24 -0
  103. package/vars/component/bottom-sheet.d.ts +86 -0
  104. package/vars/component/bottom-sheet.mjs +86 -0
  105. package/vars/component/callout.d.ts +229 -0
  106. package/vars/component/callout.mjs +197 -0
  107. package/vars/component/checkbox-group.d.ts +9 -0
  108. package/vars/component/checkbox-group.mjs +9 -0
  109. package/vars/component/checkbox.d.ts +53 -0
  110. package/vars/component/checkbox.mjs +53 -0
  111. package/vars/component/checkmark.d.ts +195 -0
  112. package/vars/component/checkmark.mjs +165 -0
  113. package/vars/component/chip-tab.d.ts +162 -0
  114. package/vars/component/chip-tab.mjs +162 -0
  115. package/vars/component/chip-tablist.d.ts +31 -0
  116. package/vars/component/chip-tablist.mjs +31 -0
  117. package/vars/component/chip.d.ts +321 -0
  118. package/vars/component/chip.mjs +303 -0
  119. package/vars/component/content-placeholder.d.ts +28 -0
  120. package/vars/component/content-placeholder.mjs +27 -0
  121. package/vars/component/contextual-floating-button.d.ts +144 -0
  122. package/vars/component/contextual-floating-button.mjs +132 -0
  123. package/vars/component/control-chip.d.ts +158 -0
  124. package/vars/component/control-chip.mjs +158 -0
  125. package/vars/component/dialog.d.ts +52 -0
  126. package/vars/component/dialog.mjs +52 -0
  127. package/vars/component/divider.d.ts +9 -0
  128. package/vars/component/divider.mjs +9 -0
  129. package/vars/component/extended-action-sheet-close-button.d.ts +24 -0
  130. package/vars/component/extended-action-sheet-close-button.mjs +24 -0
  131. package/vars/component/extended-action-sheet-item.d.ts +46 -0
  132. package/vars/component/extended-action-sheet-item.mjs +46 -0
  133. package/vars/component/extended-action-sheet.d.ts +55 -0
  134. package/vars/component/extended-action-sheet.mjs +55 -0
  135. package/vars/component/extended-fab.d.ts +88 -0
  136. package/vars/component/extended-fab.mjs +82 -0
  137. package/vars/component/fab.d.ts +21 -0
  138. package/vars/component/fab.mjs +21 -0
  139. package/vars/component/field-label.d.ts +25 -0
  140. package/vars/component/field-label.mjs +25 -0
  141. package/vars/component/field.d.ts +78 -0
  142. package/vars/component/field.mjs +72 -0
  143. package/vars/component/floating-action-button.d.ts +60 -0
  144. package/vars/component/floating-action-button.mjs +54 -0
  145. package/vars/component/help-bubble.d.ts +52 -0
  146. package/vars/component/help-bubble.mjs +50 -0
  147. package/vars/component/identity-placeholder.d.ts +12 -0
  148. package/vars/component/identity-placeholder.mjs +12 -0
  149. package/vars/component/image-frame-floater.d.ts +10 -0
  150. package/vars/component/image-frame-floater.mjs +9 -0
  151. package/vars/component/image-frame-indicator.d.ts +20 -0
  152. package/vars/component/image-frame-indicator.mjs +18 -0
  153. package/vars/component/image-frame-reaction-button.d.ts +35 -0
  154. package/vars/component/image-frame-reaction-button.mjs +26 -0
  155. package/vars/component/image-frame.d.ts +48 -0
  156. package/vars/component/image-frame.mjs +26 -0
  157. package/vars/component/index.d.ts +79 -0
  158. package/vars/component/index.mjs +79 -0
  159. package/vars/component/inline-banner.d.ts +191 -0
  160. package/vars/component/inline-banner.mjs +191 -0
  161. package/vars/component/input-button.d.ts +89 -0
  162. package/vars/component/input-button.mjs +88 -0
  163. package/vars/component/link-content.d.ts +58 -0
  164. package/vars/component/link-content.mjs +58 -0
  165. package/vars/component/list-header.d.ts +29 -0
  166. package/vars/component/list-header.mjs +29 -0
  167. package/vars/component/list-item.d.ts +89 -0
  168. package/vars/component/list-item.mjs +87 -0
  169. package/vars/component/manner-temp-badge.d.ts +117 -0
  170. package/vars/component/manner-temp-badge.mjs +117 -0
  171. package/vars/component/manner-temp.d.ts +88 -0
  172. package/vars/component/manner-temp.mjs +88 -0
  173. package/vars/component/menu-sheet-close-button.d.ts +24 -0
  174. package/vars/component/menu-sheet-close-button.mjs +24 -0
  175. package/vars/component/menu-sheet-item.d.ts +73 -0
  176. package/vars/component/menu-sheet-item.mjs +61 -0
  177. package/vars/component/menu-sheet.d.ts +56 -0
  178. package/vars/component/menu-sheet.mjs +56 -0
  179. package/vars/component/notification-badge.d.ts +48 -0
  180. package/vars/component/notification-badge.mjs +42 -0
  181. package/vars/component/page-banner.d.ts +382 -0
  182. package/vars/component/page-banner.mjs +336 -0
  183. package/vars/component/progress-circle.d.ts +88 -0
  184. package/vars/component/progress-circle.mjs +67 -0
  185. package/vars/component/radio-group.d.ts +9 -0
  186. package/vars/component/radio-group.mjs +9 -0
  187. package/vars/component/radio.d.ts +53 -0
  188. package/vars/component/radio.mjs +53 -0
  189. package/vars/component/radiomark.d.ts +117 -0
  190. package/vars/component/radiomark.mjs +117 -0
  191. package/vars/component/reaction-button.d.ts +136 -0
  192. package/vars/component/reaction-button.mjs +136 -0
  193. package/vars/component/scroll-fog.d.ts +11 -0
  194. package/vars/component/scroll-fog.mjs +11 -0
  195. package/vars/component/segmented-control-indicator.d.ts +24 -0
  196. package/vars/component/segmented-control-indicator.mjs +24 -0
  197. package/vars/component/segmented-control-item.d.ts +41 -0
  198. package/vars/component/segmented-control-item.mjs +41 -0
  199. package/vars/component/segmented-control.d.ts +11 -0
  200. package/vars/component/segmented-control.mjs +11 -0
  201. package/vars/component/select-box-checkmark.d.ts +40 -0
  202. package/vars/component/select-box-checkmark.mjs +40 -0
  203. package/vars/component/select-box-group.d.ts +10 -0
  204. package/vars/component/select-box-group.mjs +10 -0
  205. package/vars/component/select-box.d.ts +107 -0
  206. package/vars/component/select-box.mjs +102 -0
  207. package/vars/component/skeleton.d.ts +76 -0
  208. package/vars/component/skeleton.mjs +58 -0
  209. package/vars/component/slider-thumb.d.ts +25 -0
  210. package/vars/component/slider-thumb.mjs +25 -0
  211. package/vars/component/slider-tick.d.ts +23 -0
  212. package/vars/component/slider-tick.mjs +23 -0
  213. package/vars/component/slider.d.ts +78 -0
  214. package/vars/component/slider.mjs +75 -0
  215. package/vars/component/snackbar.d.ts +65 -0
  216. package/vars/component/snackbar.mjs +65 -0
  217. package/vars/component/switch.d.ts +53 -0
  218. package/vars/component/switch.mjs +53 -0
  219. package/vars/component/switchmark.d.ts +112 -0
  220. package/vars/component/switchmark.mjs +112 -0
  221. package/vars/component/tab.d.ts +47 -0
  222. package/vars/component/tab.mjs +47 -0
  223. package/vars/component/tablist.d.ts +51 -0
  224. package/vars/component/tablist.mjs +51 -0
  225. package/vars/component/tag-group-item.d.ts +122 -0
  226. package/vars/component/tag-group-item.mjs +122 -0
  227. package/vars/component/tag-group.d.ts +34 -0
  228. package/vars/component/tag-group.mjs +34 -0
  229. package/vars/component/text-button.d.ts +23 -0
  230. package/vars/component/text-button.mjs +23 -0
  231. package/vars/component/text-input.d.ts +224 -0
  232. package/vars/component/text-input.mjs +211 -0
  233. package/vars/component/toggle-button.d.ts +213 -0
  234. package/vars/component/toggle-button.mjs +207 -0
  235. package/vars/component/top-navigation-icon-button.d.ts +36 -0
  236. package/vars/component/top-navigation-icon-button.mjs +36 -0
  237. package/vars/component/top-navigation-text-button.d.ts +52 -0
  238. package/vars/component/top-navigation-text-button.mjs +51 -0
  239. package/vars/component/top-navigation.d.ts +102 -0
  240. package/vars/component/top-navigation.mjs +94 -0
  241. package/vars/component/typography.d.ts +542 -0
  242. package/vars/component/typography.mjs +461 -0
  243. package/vars/dimension/index.d.ts +22 -0
  244. package/vars/dimension/index.mjs +22 -0
  245. package/vars/dimension/spacing-x.d.ts +4 -0
  246. package/vars/dimension/spacing-x.mjs +2 -0
  247. package/vars/dimension/spacing-y.d.ts +8 -0
  248. package/vars/dimension/spacing-y.mjs +4 -0
  249. package/vars/duration.d.ts +8 -0
  250. package/vars/duration.mjs +8 -0
  251. package/vars/font-size.d.ts +30 -0
  252. package/vars/font-size.mjs +20 -0
  253. package/vars/font-weight.d.ts +3 -0
  254. package/vars/font-weight.mjs +3 -0
  255. package/vars/gradient.d.ts +19 -0
  256. package/vars/gradient.mjs +8 -0
  257. package/vars/index.d.ts +51 -0
  258. package/vars/index.mjs +1 -0
  259. package/vars/line-height.d.ts +30 -0
  260. package/vars/line-height.mjs +20 -0
  261. package/vars/radius.d.ts +11 -0
  262. package/vars/radius.mjs +11 -0
  263. package/vars/shadow.d.ts +4 -0
  264. package/vars/shadow.mjs +3 -0
  265. package/vars/timing-function.d.ts +7 -0
  266. package/vars/timing-function.mjs +7 -0
  267. package/vars/vars.d.ts +10 -0
  268. package/vars/vars.mjs +10 -0
package/base.min.css ADDED
@@ -0,0 +1 @@
1
+ .seed-icon,.seed-prefix-icon,.seed-suffix-icon{flex-shrink:0;justify-content:center;align-items:center;display:flex}.seed-icon{width:var(--seed-icon-size);height:var(--seed-icon-size);color:var(--seed-icon-color,currentColor)}.seed-prefix-icon{width:var(--seed-prefix-icon-size);height:var(--seed-prefix-icon-size);color:var(--seed-prefix-icon-color,currentColor);margin-left:var(--seed-prefix-icon-margin-left,0);margin-right:var(--seed-prefix-icon-margin-right,0);margin-top:var(--seed-prefix-icon-margin-top,0);margin-bottom:var(--seed-prefix-icon-margin-bottom,0);align-self:var(--seed-prefix-icon-align-self);justify-self:var(--seed-prefix-icon-justify-self)}.seed-suffix-icon{width:var(--seed-suffix-icon-size);height:var(--seed-suffix-icon-size);color:var(--seed-suffix-icon-color,currentColor);margin-left:var(--seed-suffix-icon-margin-left,0);margin-right:var(--seed-suffix-icon-margin-right,0);margin-top:var(--seed-suffix-icon-margin-top,0);margin-bottom:var(--seed-suffix-icon-margin-bottom,0);align-self:var(--seed-suffix-icon-align-self);justify-self:var(--seed-suffix-icon-justify-self)}:root{--seed-dimension-x0_5:2px;--seed-dimension-x1:4px;--seed-dimension-x1_5:6px;--seed-dimension-x2:8px;--seed-dimension-x2_5:10px;--seed-dimension-x3:12px;--seed-dimension-x3_5:14px;--seed-dimension-x4:16px;--seed-dimension-x4_5:18px;--seed-dimension-x5:20px;--seed-dimension-x6:24px;--seed-dimension-x7:28px;--seed-dimension-x8:32px;--seed-dimension-x9:36px;--seed-dimension-x10:40px;--seed-dimension-x12:48px;--seed-dimension-x13:52px;--seed-dimension-x14:56px;--seed-dimension-x16:64px;--seed-dimension-spacing-x-between-chips:var(--seed-dimension-x2);--seed-dimension-spacing-x-global-gutter:var(--seed-dimension-x4);--seed-dimension-spacing-y-component-default:var(--seed-dimension-x3);--seed-dimension-spacing-y-nav-to-title:var(--seed-dimension-x5);--seed-dimension-spacing-y-screen-bottom:var(--seed-dimension-x14);--seed-dimension-spacing-y-between-text:var(--seed-dimension-x1_5);--seed-duration-d1:50ms;--seed-duration-d2:.1s;--seed-duration-d3:.15s;--seed-duration-d4:.2s;--seed-duration-d5:.25s;--seed-duration-d6:.3s;--seed-duration-color-transition:var(--seed-duration-d3);--seed-duration-pressed-scale:var(--seed-duration-d3);--seed-font-size-t1:11sp;--seed-font-size-t2:12sp;--seed-font-size-t3:13sp;--seed-font-size-t4:14sp;--seed-font-size-t5:16sp;--seed-font-size-t6:18sp;--seed-font-size-t7:20sp;--seed-font-size-t8:22sp;--seed-font-size-t9:24sp;--seed-font-size-t10:26sp;--seed-font-size-t1-static:11px;--seed-font-size-t2-static:12px;--seed-font-size-t3-static:13px;--seed-font-size-t4-static:14px;--seed-font-size-t5-static:16px;--seed-font-size-t6-static:18px;--seed-font-size-t7-static:20px;--seed-font-size-t8-static:22px;--seed-font-size-t9-static:24px;--seed-font-size-t10-static:26px;--seed-font-weight-regular:400;--seed-font-weight-medium:500;--seed-font-weight-bold:700;--seed-line-height-t1:15sp;--seed-line-height-t2:16sp;--seed-line-height-t3:18sp;--seed-line-height-t4:19sp;--seed-line-height-t5:22sp;--seed-line-height-t6:24sp;--seed-line-height-t7:27sp;--seed-line-height-t8:30sp;--seed-line-height-t9:32sp;--seed-line-height-t10:35sp;--seed-line-height-t1-static:15px;--seed-line-height-t2-static:16px;--seed-line-height-t3-static:18px;--seed-line-height-t4-static:19px;--seed-line-height-t5-static:22px;--seed-line-height-t6-static:24px;--seed-line-height-t7-static:27px;--seed-line-height-t8-static:30px;--seed-line-height-t9-static:32px;--seed-line-height-t10-static:35px;--seed-radius-r0_5:2px;--seed-radius-r1:4px;--seed-radius-r1_5:6px;--seed-radius-r2:8px;--seed-radius-r2_5:10px;--seed-radius-r3:12px;--seed-radius-r3_5:14px;--seed-radius-r4:16px;--seed-radius-r5:20px;--seed-radius-r6:24px;--seed-radius-full:9999px;--seed-timing-function-linear:cubic-bezier(0, 0, 1, 1);--seed-timing-function-easing:cubic-bezier(.35, 0, .35, 1);--seed-timing-function-enter:cubic-bezier(0, 0, .15, 1);--seed-timing-function-exit:cubic-bezier(.35, 0, 1, 1);--seed-timing-function-enter-expressive:cubic-bezier(.03, .4, .1, 1);--seed-timing-function-exit-expressive:cubic-bezier(.35, 0, .95, .55);--seed-timing-function-pressed-scale:cubic-bezier(0, 0, .15, 1)}:root,:root.seed-user-color-scheme-light,:root.seed-color-mode-light-only,.seed-color-mode-light-only{--seed-color-palette-gray-00:#fff;--seed-color-palette-gray-100:#f7f8f9;--seed-color-palette-gray-200:#f3f4f5;--seed-color-palette-gray-300:#eeeff1;--seed-color-palette-gray-400:#dcdee3;--seed-color-palette-gray-500:#d1d3d8;--seed-color-palette-gray-600:#b0b3ba;--seed-color-palette-gray-700:#868b94;--seed-color-palette-gray-800:#555d6d;--seed-color-palette-gray-900:#2a3038;--seed-color-palette-gray-1000:#1a1c20;--seed-color-palette-carrot-100:#fff2ec;--seed-color-palette-carrot-200:#ffe8db;--seed-color-palette-carrot-300:#ffd5c0;--seed-color-palette-carrot-400:#ffb999;--seed-color-palette-carrot-500:#ff9364;--seed-color-palette-carrot-600:#f60;--seed-color-palette-carrot-700:#e14d00;--seed-color-palette-carrot-800:#b93901;--seed-color-palette-carrot-900:#862b00;--seed-color-palette-carrot-1000:#471601;--seed-color-palette-blue-100:#eff6ff;--seed-color-palette-blue-200:#e2edfc;--seed-color-palette-blue-300:#cbdffa;--seed-color-palette-blue-400:#aacefd;--seed-color-palette-blue-500:#85b8fd;--seed-color-palette-blue-600:#5e98fe;--seed-color-palette-blue-700:#217cf9;--seed-color-palette-blue-800:#135fcd;--seed-color-palette-blue-900:#0b4596;--seed-color-palette-blue-1000:#032451;--seed-color-palette-red-100:#fdf0f0;--seed-color-palette-red-200:#fde7e7;--seed-color-palette-red-300:#fed4d2;--seed-color-palette-red-400:#feb7b3;--seed-color-palette-red-500:#fe928d;--seed-color-palette-red-600:#fc6a66;--seed-color-palette-red-700:#fa342c;--seed-color-palette-red-800:#ca1d13;--seed-color-palette-red-900:#921708;--seed-color-palette-red-1000:#4a1209;--seed-color-palette-green-100:#edfaf6;--seed-color-palette-green-200:#d9f6e9;--seed-color-palette-green-300:#b9e9d2;--seed-color-palette-green-400:#7ddcb3;--seed-color-palette-green-500:#42c593;--seed-color-palette-green-600:#10ab7d;--seed-color-palette-green-700:#079171;--seed-color-palette-green-800:#00745f;--seed-color-palette-green-900:#075445;--seed-color-palette-green-1000:#0a2b24;--seed-color-palette-yellow-100:#fff7de;--seed-color-palette-yellow-200:#fdefb9;--seed-color-palette-yellow-300:#fbdc65;--seed-color-palette-yellow-400:#e9c647;--seed-color-palette-yellow-500:#d4ab28;--seed-color-palette-yellow-600:#c49725;--seed-color-palette-yellow-700:#9b7821;--seed-color-palette-yellow-800:#755b22;--seed-color-palette-yellow-900:#4f3e1f;--seed-color-palette-yellow-1000:#2c2512;--seed-color-palette-purple-100:#f5f3fe;--seed-color-palette-purple-200:#efeafe;--seed-color-palette-purple-300:#e1d8ff;--seed-color-palette-purple-400:#d0c0ff;--seed-color-palette-purple-500:#b8a1ff;--seed-color-palette-purple-600:#9f84fb;--seed-color-palette-purple-700:#8969ea;--seed-color-palette-purple-800:#6d50cb;--seed-color-palette-purple-900:#50379b;--seed-color-palette-purple-1000:#29175d;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-600);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-00);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-600);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-700);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-800);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-200);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-700);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-800);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-200);--seed-color-bg-layer-default:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-100);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-00);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-100);--seed-color-bg-magic-weak:#f9f2ee;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-900);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-200);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-black-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-black-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-700);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-800);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#0000;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-black-alpha-100);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-300);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-400);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-black-alpha-300);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-black-alpha-200);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#f1f2f3;--seed-color-manner-temp-l1-text:#757b85;--seed-color-manner-temp-l10-bg:#ffebee;--seed-color-manner-temp-l10-text:#cb0123;--seed-color-manner-temp-l2-bg:#f8f4ec;--seed-color-manner-temp-l2-text:#ab863f;--seed-color-manner-temp-l3-bg:#fff5e5;--seed-color-manner-temp-l3-text:#e08a00;--seed-color-manner-temp-l4-bg:#fff3e5;--seed-color-manner-temp-l4-text:#f57e00;--seed-color-manner-temp-l5-bg:#fff1e5;--seed-color-manner-temp-l5-text:#ff7300;--seed-color-manner-temp-l6-bg:#fff0e5;--seed-color-manner-temp-l6-text:#f60;--seed-color-manner-temp-l7-bg:#ffefe5;--seed-color-manner-temp-l7-text:#ff5100;--seed-color-manner-temp-l8-bg:#ffeee5;--seed-color-manner-temp-l8-text:#f30;--seed-color-manner-temp-l9-bg:#fdeded;--seed-color-manner-temp-l9-text:#e82c45;--seed-color-banner-blue:#e1f7ff;--seed-color-banner-cool-gray:#ebf1f5;--seed-color-banner-green:#f0fbe5;--seed-color-banner-orange:#fff2e1;--seed-color-banner-pink:#ffebf1;--seed-color-banner-purple:#f5ecff;--seed-color-banner-red:#ffecee;--seed-color-banner-teal:#e6faf6;--seed-color-banner-warm-gray:#f2f0ee;--seed-color-banner-yellow:#fffae1;--seed-gradient-fade-layer-floating:#fff0 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #fff0 100%;--seed-gradient-glow-magic:#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%;--seed-gradient-glow-magic-pressed:#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#e14f00 20%, #ae58bf 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffffab 46%, #ffffffab 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000014;--seed-shadow-s2:0px 2px 10px 0px #0000001a;--seed-shadow-s3:0px 4px 16px 0px #0000001f}:root.seed-user-color-scheme-dark,:root.seed-color-mode-dark-only,.seed-color-mode-dark-only{--seed-color-palette-gray-00:#000;--seed-color-palette-gray-100:#16171b;--seed-color-palette-gray-200:#1d2025;--seed-color-palette-gray-300:#2b2e35;--seed-color-palette-gray-400:#393d46;--seed-color-palette-gray-500:#5b606a;--seed-color-palette-gray-600:#868b94;--seed-color-palette-gray-700:#b0b3ba;--seed-color-palette-gray-800:#dcdee3;--seed-color-palette-gray-900:#e9eaec;--seed-color-palette-gray-1000:#f3f4f5;--seed-color-palette-carrot-100:#31241f;--seed-color-palette-carrot-200:#4b291c;--seed-color-palette-carrot-300:#6b311c;--seed-color-palette-carrot-400:#923600;--seed-color-palette-carrot-500:#bd4201;--seed-color-palette-carrot-600:#e65200;--seed-color-palette-carrot-700:#f60;--seed-color-palette-carrot-800:#ff9e65;--seed-color-palette-carrot-900:#eecebc;--seed-color-palette-carrot-1000:#f4eeea;--seed-color-palette-blue-100:#202742;--seed-color-palette-blue-200:#1e3352;--seed-color-palette-blue-300:#1a4275;--seed-color-palette-blue-400:#0f559e;--seed-color-palette-blue-500:#1964d8;--seed-color-palette-blue-600:#1e82eb;--seed-color-palette-blue-700:#41a2f9;--seed-color-palette-blue-800:#83bcf9;--seed-color-palette-blue-900:#b9d7fb;--seed-color-palette-blue-1000:#e5f0fe;--seed-color-palette-red-100:#322323;--seed-color-palette-red-200:#4f2624;--seed-color-palette-red-300:#742826;--seed-color-palette-red-400:#a12621;--seed-color-palette-red-500:#ca2319;--seed-color-palette-red-600:#f73526;--seed-color-palette-red-700:#ff6e60;--seed-color-palette-red-800:#ffa299;--seed-color-palette-red-900:#f8c5c3;--seed-color-palette-red-1000:#fdf2f2;--seed-color-palette-green-100:#202926;--seed-color-palette-green-200:#20362e;--seed-color-palette-green-300:#20493b;--seed-color-palette-green-400:#19604c;--seed-color-palette-green-500:#117956;--seed-color-palette-green-600:#1b946d;--seed-color-palette-green-700:#22b27f;--seed-color-palette-green-800:#35ce9a;--seed-color-palette-green-900:#93e5c0;--seed-color-palette-green-1000:#d4f6ef;--seed-color-palette-yellow-100:#302819;--seed-color-palette-yellow-200:#413218;--seed-color-palette-yellow-300:#543e15;--seed-color-palette-yellow-400:#714e15;--seed-color-palette-yellow-500:#91601b;--seed-color-palette-yellow-600:#b6720d;--seed-color-palette-yellow-700:#ca901c;--seed-color-palette-yellow-800:#dab156;--seed-color-palette-yellow-900:#e5d49b;--seed-color-palette-yellow-1000:#f7f0cd;--seed-color-palette-purple-100:#28213b;--seed-color-palette-purple-200:#3b2873;--seed-color-palette-purple-300:#443081;--seed-color-palette-purple-400:#5a3bb1;--seed-color-palette-purple-500:#764fd9;--seed-color-palette-purple-600:#8e6bee;--seed-color-palette-purple-700:#a78df0;--seed-color-palette-purple-800:#beadf2;--seed-color-palette-purple-900:#d9cefa;--seed-color-palette-purple-1000:#f0edfc;--seed-color-palette-static-black:#000;--seed-color-palette-static-black-alpha-100:#00000007;--seed-color-palette-static-black-alpha-200:#0000000c;--seed-color-palette-static-black-alpha-300:#00000010;--seed-color-palette-static-black-alpha-400:#00000021;--seed-color-palette-static-black-alpha-500:#0000002c;--seed-color-palette-static-black-alpha-600:#0000004c;--seed-color-palette-static-black-alpha-700:#00000074;--seed-color-palette-static-black-alpha-800:#000000a2;--seed-color-palette-static-black-alpha-900:#000000d0;--seed-color-palette-static-black-alpha-1000:#000000e3;--seed-color-palette-static-white:#fff;--seed-color-palette-static-white-alpha-50:#ffffff0d;--seed-color-palette-static-white-alpha-100:#ffffff17;--seed-color-palette-static-white-alpha-200:#ffffff20;--seed-color-palette-static-white-alpha-300:#ffffff2e;--seed-color-palette-static-white-alpha-400:#ffffff3d;--seed-color-palette-static-white-alpha-500:#ffffff60;--seed-color-palette-static-white-alpha-600:#ffffff8b;--seed-color-palette-static-white-alpha-700:#ffffffb3;--seed-color-palette-static-white-alpha-800:#ffffffde;--seed-color-palette-static-white-alpha-900:#ffffffea;--seed-color-palette-static-white-alpha-1000:#fffffff4;--seed-color-fg-brand:var(--seed-color-palette-carrot-700);--seed-color-fg-brand-contrast:var(--seed-color-palette-carrot-700);--seed-color-fg-critical:var(--seed-color-palette-red-700);--seed-color-fg-critical-contrast:var(--seed-color-palette-red-900);--seed-color-fg-disabled:var(--seed-color-palette-gray-500);--seed-color-fg-informative:var(--seed-color-palette-blue-700);--seed-color-fg-informative-contrast:var(--seed-color-palette-blue-900);--seed-color-fg-neutral:var(--seed-color-palette-gray-1000);--seed-color-fg-neutral-inverted:var(--seed-color-palette-gray-100);--seed-color-fg-neutral-muted:var(--seed-color-palette-gray-800);--seed-color-fg-neutral-subtle:var(--seed-color-palette-gray-700);--seed-color-fg-placeholder:var(--seed-color-palette-gray-600);--seed-color-fg-positive:var(--seed-color-palette-green-700);--seed-color-fg-positive-contrast:var(--seed-color-palette-green-900);--seed-color-fg-warning:var(--seed-color-palette-yellow-700);--seed-color-fg-warning-contrast:var(--seed-color-palette-yellow-900);--seed-color-bg-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-bg-brand-solid-pressed:var(--seed-color-palette-carrot-800);--seed-color-bg-brand-weak:var(--seed-color-palette-carrot-100);--seed-color-bg-brand-weak-pressed:var(--seed-color-palette-carrot-200);--seed-color-bg-critical-solid:var(--seed-color-palette-red-600);--seed-color-bg-critical-solid-pressed:var(--seed-color-palette-red-700);--seed-color-bg-critical-weak:var(--seed-color-palette-red-100);--seed-color-bg-critical-weak-pressed:var(--seed-color-palette-red-200);--seed-color-bg-disabled:var(--seed-color-palette-gray-300);--seed-color-bg-informative-solid:var(--seed-color-palette-blue-600);--seed-color-bg-informative-solid-pressed:var(--seed-color-palette-blue-700);--seed-color-bg-informative-weak:var(--seed-color-palette-blue-100);--seed-color-bg-informative-weak-pressed:var(--seed-color-palette-blue-200);--seed-color-bg-layer-basement:var(--seed-color-palette-gray-00);--seed-color-bg-layer-default:var(--seed-color-palette-gray-100);--seed-color-bg-layer-default-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-layer-fill:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating:var(--seed-color-palette-gray-200);--seed-color-bg-layer-floating-pressed:var(--seed-color-palette-gray-300);--seed-color-bg-magic-weak:#201f1f;--seed-color-bg-neutral-inverted:var(--seed-color-palette-gray-1000);--seed-color-bg-neutral-inverted-pressed:var(--seed-color-palette-gray-800);--seed-color-bg-neutral-solid:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-solid-muted:var(--seed-color-palette-gray-400);--seed-color-bg-neutral-solid-muted-pressed:var(--seed-color-palette-gray-500);--seed-color-bg-neutral-weak:var(--seed-color-palette-gray-300);--seed-color-bg-neutral-weak-alpha:var(--seed-color-palette-static-white-alpha-200);--seed-color-bg-neutral-weak-alpha-pressed:var(--seed-color-palette-static-white-alpha-300);--seed-color-bg-neutral-weak-pressed:var(--seed-color-palette-gray-400);--seed-color-bg-overlay:var(--seed-color-palette-static-black-alpha-700);--seed-color-bg-overlay-muted:var(--seed-color-palette-static-black-alpha-500);--seed-color-bg-positive-solid:var(--seed-color-palette-green-500);--seed-color-bg-positive-solid-pressed:var(--seed-color-palette-green-600);--seed-color-bg-positive-weak:var(--seed-color-palette-green-100);--seed-color-bg-positive-weak-pressed:var(--seed-color-palette-green-200);--seed-color-bg-transparent:#fff0;--seed-color-bg-transparent-pressed:var(--seed-color-palette-static-white-alpha-50);--seed-color-bg-warning-solid:var(--seed-color-palette-yellow-800);--seed-color-bg-warning-solid-pressed:var(--seed-color-palette-yellow-900);--seed-color-bg-warning-weak:var(--seed-color-palette-yellow-100);--seed-color-bg-warning-weak-pressed:var(--seed-color-palette-yellow-200);--seed-color-stroke-brand-solid:var(--seed-color-palette-carrot-700);--seed-color-stroke-brand-weak:var(--seed-color-palette-carrot-300);--seed-color-stroke-critical-solid:var(--seed-color-palette-red-700);--seed-color-stroke-critical-weak:var(--seed-color-palette-red-300);--seed-color-stroke-informative-solid:var(--seed-color-palette-blue-700);--seed-color-stroke-informative-weak:var(--seed-color-palette-blue-300);--seed-color-stroke-neutral-contrast:var(--seed-color-palette-gray-1000);--seed-color-stroke-neutral-muted:var(--seed-color-palette-static-white-alpha-100);--seed-color-stroke-neutral-solid:var(--seed-color-palette-gray-800);--seed-color-stroke-neutral-subtle:var(--seed-color-palette-static-white-alpha-50);--seed-color-stroke-neutral-weak:var(--seed-color-palette-gray-400);--seed-color-stroke-positive-solid:var(--seed-color-palette-green-700);--seed-color-stroke-positive-weak:var(--seed-color-palette-green-300);--seed-color-stroke-warning-solid:var(--seed-color-palette-yellow-700);--seed-color-stroke-warning-weak:var(--seed-color-palette-yellow-300);--seed-color-stroke-focus-ring:var(--seed-color-palette-blue-600);--seed-color-manner-temp-l1-bg:#292929;--seed-color-manner-temp-l1-text:#b8b8b9;--seed-color-manner-temp-l10-bg:#34040a;--seed-color-manner-temp-l10-text:#fb6f82;--seed-color-manner-temp-l2-bg:#332605;--seed-color-manner-temp-l2-text:#f5db97;--seed-color-manner-temp-l3-bg:#372b01;--seed-color-manner-temp-l3-text:#fdda65;--seed-color-manner-temp-l4-bg:#372301;--seed-color-manner-temp-l4-text:#fbbe55;--seed-color-manner-temp-l5-bg:#371f01;--seed-color-manner-temp-l5-text:#faac4b;--seed-color-manner-temp-l6-bg:#351b03;--seed-color-manner-temp-l6-text:#fc9855;--seed-color-manner-temp-l7-bg:#371701;--seed-color-manner-temp-l7-text:#f97a25;--seed-color-manner-temp-l8-bg:#380f00;--seed-color-manner-temp-l8-text:#fe6a34;--seed-color-manner-temp-l9-bg:#380500;--seed-color-manner-temp-l9-text:#fe6a5d;--seed-color-banner-blue:#0d2a3a;--seed-color-banner-cool-gray:#242c33;--seed-color-banner-green:#1e361c;--seed-color-banner-orange:#42230a;--seed-color-banner-pink:#3b172c;--seed-color-banner-purple:#2e1e45;--seed-color-banner-red:#3a0f15;--seed-color-banner-teal:#143633;--seed-color-banner-warm-gray:#2f2b27;--seed-color-banner-yellow:#3e2b00;--seed-gradient-fade-layer-floating:#1d202500 0%, #000 100%;--seed-gradient-fade-layer-default:#000 0%, #16171b00 100%;--seed-gradient-glow-magic:#2d252d 0%, #3a312b 80%, #333232 100%;--seed-gradient-glow-magic-pressed:#3e333e 0%, #51453e 80%, #434242 100%;--seed-gradient-highlight-magic:#f60 20%, #d25aca 100%;--seed-gradient-highlight-magic-pressed:#ff9e65 20%, #e89bee 100%;--seed-gradient-shimmer-magic:#fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%;--seed-gradient-shimmer-neutral:#fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;--seed-shadow-s1:0px 1px 4px 0px #00000080;--seed-shadow-s2:0px 2px 10px 0px #000000ad;--seed-shadow-s3:0px 4px 16px 0px #000c}@keyframes seed-enter{0%{opacity:var(--seed-enter-opacity,1);transform:translate3d(var(--seed-enter-translate-x,0), var(--seed-enter-translate-y,0), 0) scale3d(var(--seed-enter-scale,1), var(--seed-enter-scale,1), var(--seed-enter-scale,1)) rotate(var(--seed-enter-rotate,0))}}@keyframes seed-exit{to{opacity:var(--seed-exit-opacity,1);transform:translate3d(var(--seed-exit-translate-x,0), var(--seed-exit-translate-y,0), 0) scale3d(var(--seed-exit-scale,1), var(--seed-exit-scale,1), var(--seed-exit-scale,1)) rotate(var(--seed-exit-rotate,0))}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slide-x{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes drawer-slide-from-bottom{0%{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}to{transform:translate3d(0, var(--snap-point-height,0), 0)}}@keyframes drawer-slide-to-bottom{to{transform:translate3d(0, var(--seed-drawer-start-transform,100%), 0)}}
package/package.json ADDED
@@ -0,0 +1,60 @@
1
+ {
2
+ "name": "@seed-design/lynx-css",
3
+ "version": "0.1.0",
4
+ "repository": {
5
+ "type": "git",
6
+ "url": "git+https://github.com/daangn/seed-design.git",
7
+ "directory": "packages/lynx-css"
8
+ },
9
+ "sideEffects": [
10
+ "*.css"
11
+ ],
12
+ "type": "module",
13
+ "exports": {
14
+ "./*.css": "./*.css",
15
+ "./base.css": "./base.css",
16
+ "./all.css": "./all.css",
17
+ "./recipes/*.css": "./recipes/*.css",
18
+ "./recipes/*": {
19
+ "types": "./recipes/*.d.ts",
20
+ "default": {
21
+ "import": "./recipes/*.mjs"
22
+ }
23
+ },
24
+ "./vars": {
25
+ "types": "./vars/index.d.ts",
26
+ "import": "./vars/index.mjs"
27
+ },
28
+ "./vars/*": {
29
+ "types": "./vars/*.d.ts",
30
+ "import": "./vars/*.mjs"
31
+ },
32
+ "./vars/component": {
33
+ "types": "./vars/component/index.d.ts",
34
+ "import": "./vars/component/index.mjs"
35
+ },
36
+ "./vars/component/*": {
37
+ "types": "./vars/component/*.d.ts",
38
+ "import": "./vars/component/*.mjs"
39
+ },
40
+ "./package.json": "./package.json"
41
+ },
42
+ "files": [
43
+ "package.json",
44
+ "recipes",
45
+ "vars",
46
+ "*.css"
47
+ ],
48
+ "scripts": {
49
+ "rootage:generate": "bun rootage token-ts ./vars --prefix seed && rootage component-spec ./vars/component --prefix seed",
50
+ "qvism:generate": "bun qvism ./ ./recipes",
51
+ "lint:publish": "bun publint"
52
+ },
53
+ "devDependencies": {
54
+ "@seed-design/qvism-cli": "0.0.0",
55
+ "@seed-design/lynx-qvism-preset": "0.0.0"
56
+ },
57
+ "publishConfig": {
58
+ "access": "public"
59
+ }
60
+ }
package/recipes/action-button.css ADDED
@@ -0,0 +1,489 @@
1
+ .seed-action-button__root {
2
+ display: flex;
3
+ position: relative;
4
+ align-items: center;
5
+ justify-content: center;
6
+ border: none;
7
+ flex-shrink: 0;
8
+ --seed-box-flex-grow: 0;
9
+ flex-grow: var(--seed-box-flex-grow);
10
+ --seed-box-min-width: auto;
11
+ min-width: var(--seed-box-min-width);
12
+ --seed-box-padding-bottom: auto;
13
+ --seed-box-padding-top: auto;
14
+ --seed-box-padding-left: auto;
15
+ --seed-box-padding-right: auto;
16
+ padding-top: var(--seed-box-padding-top);
17
+ padding-bottom: var(--seed-box-padding-bottom);
18
+ padding-left: var(--seed-box-padding-left);
19
+ padding-right: var(--seed-box-padding-right);
20
+ --seed-box-bleed-bottom: 0px;
21
+ --seed-box-bleed-top: 0px;
22
+ --seed-box-bleed-left: 0px;
23
+ --seed-box-bleed-right: 0px;
24
+ margin-top: calc(var(--seed-box-bleed-top) * -1);
25
+ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
26
+ margin-left: calc(var(--seed-box-bleed-left) * -1);
27
+ margin-right: calc(var(--seed-box-bleed-right) * -1);
28
+ transition: background-color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
29
+ }
30
+ .seed-action-button__text {
31
+ font-weight: var(--seed-font-weight-bold);
32
+ transition: color var(--seed-duration-color-transition) var(--seed-timing-function-easing)
33
+ }
34
+ .seed-action-button__content {
35
+ display: flex;
36
+ flex-direction: row;
37
+ align-items: center;
38
+ justify-content: center;
39
+ opacity: 0
40
+ }
41
+ .seed-action-button__prefixIcon {
42
+ flex-shrink: 0
43
+ }
44
+ .seed-action-button__suffixIcon {
45
+ flex-shrink: 0
46
+ }
47
+ .seed-action-button__icon {
48
+ flex-shrink: 0
49
+ }
50
+ .seed-action-button__loadingIndicator {
51
+ position: absolute;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ top: 0;
56
+ right: 0;
57
+ bottom: 0;
58
+ left: 0
59
+ }
60
+ .seed-action-button__root--variant_brandSolid {
61
+ background: var(--seed-color-bg-brand-solid);
62
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
63
+ --range-color: var(--seed-color-palette-static-white)
64
+ }
65
+ .seed-action-button__text--variant_brandSolid {
66
+ color: var(--seed-color-palette-static-white)
67
+ }
68
+ .seed-action-button__prefixIcon--variant_brandSolid {
69
+ color: var(--seed-color-palette-static-white)
70
+ }
71
+ .seed-action-button__suffixIcon--variant_brandSolid {
72
+ color: var(--seed-color-palette-static-white)
73
+ }
74
+ .seed-action-button__icon--variant_brandSolid {
75
+ color: var(--seed-color-palette-static-white)
76
+ }
77
+ .seed-action-button__root--variant_neutralSolid {
78
+ background: var(--seed-color-bg-neutral-inverted);
79
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
80
+ --range-color: var(--seed-color-palette-static-white)
81
+ }
82
+ .seed-action-button__text--variant_neutralSolid {
83
+ color: var(--seed-color-fg-neutral-inverted)
84
+ }
85
+ .seed-action-button__prefixIcon--variant_neutralSolid {
86
+ color: var(--seed-color-fg-neutral-inverted)
87
+ }
88
+ .seed-action-button__suffixIcon--variant_neutralSolid {
89
+ color: var(--seed-color-fg-neutral-inverted)
90
+ }
91
+ .seed-action-button__icon--variant_neutralSolid {
92
+ color: var(--seed-color-fg-neutral-inverted)
93
+ }
94
+ .seed-action-button__root--variant_neutralWeak {
95
+ background: var(--seed-color-bg-neutral-weak);
96
+ --track-color: var(--seed-color-palette-gray-500);
97
+ --range-color: var(--seed-color-fg-neutral)
98
+ }
99
+ .seed-action-button__text--variant_neutralWeak {
100
+ color: var(--seed-color-fg-neutral)
101
+ }
102
+ .seed-action-button__prefixIcon--variant_neutralWeak {
103
+ color: var(--seed-color-fg-neutral)
104
+ }
105
+ .seed-action-button__suffixIcon--variant_neutralWeak {
106
+ color: var(--seed-color-fg-neutral)
107
+ }
108
+ .seed-action-button__icon--variant_neutralWeak {
109
+ color: var(--seed-color-fg-neutral)
110
+ }
111
+ .seed-action-button__root--variant_criticalSolid {
112
+ background: var(--seed-color-bg-critical-solid);
113
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
114
+ --range-color: var(--seed-color-palette-static-white)
115
+ }
116
+ .seed-action-button__text--variant_criticalSolid {
117
+ color: var(--seed-color-palette-static-white)
118
+ }
119
+ .seed-action-button__prefixIcon--variant_criticalSolid {
120
+ color: var(--seed-color-palette-static-white)
121
+ }
122
+ .seed-action-button__suffixIcon--variant_criticalSolid {
123
+ color: var(--seed-color-palette-static-white)
124
+ }
125
+ .seed-action-button__icon--variant_criticalSolid {
126
+ color: var(--seed-color-palette-static-white)
127
+ }
128
+ .seed-action-button__root--variant_brandOutline {
129
+ border-style: solid;
130
+ background: var(--seed-color-bg-transparent);
131
+ border-width: 1px;
132
+ border-color: var(--seed-color-stroke-neutral-muted);
133
+ --track-color: var(--seed-color-palette-carrot-200);
134
+ --range-color: var(--seed-color-bg-brand-solid)
135
+ }
136
+ .seed-action-button__text--variant_brandOutline {
137
+ color: var(--seed-color-fg-brand)
138
+ }
139
+ .seed-action-button__prefixIcon--variant_brandOutline {
140
+ color: var(--seed-color-fg-brand)
141
+ }
142
+ .seed-action-button__suffixIcon--variant_brandOutline {
143
+ color: var(--seed-color-fg-brand)
144
+ }
145
+ .seed-action-button__icon--variant_brandOutline {
146
+ color: var(--seed-color-fg-brand)
147
+ }
148
+ .seed-action-button__root--variant_neutralOutline {
149
+ border-style: solid;
150
+ background: var(--seed-color-bg-transparent);
151
+ border-width: 1px;
152
+ border-color: var(--seed-color-stroke-neutral-muted);
153
+ --track-color: var(--seed-color-palette-gray-500);
154
+ --range-color: var(--seed-color-fg-neutral)
155
+ }
156
+ .seed-action-button__text--variant_neutralOutline {
157
+ color: var(--seed-color-fg-neutral)
158
+ }
159
+ .seed-action-button__prefixIcon--variant_neutralOutline {
160
+ color: var(--seed-color-fg-neutral)
161
+ }
162
+ .seed-action-button__suffixIcon--variant_neutralOutline {
163
+ color: var(--seed-color-fg-neutral)
164
+ }
165
+ .seed-action-button__icon--variant_neutralOutline {
166
+ color: var(--seed-color-fg-neutral)
167
+ }
168
+ .seed-action-button__root--variant_ghost {
169
+ background: #ffffff00;
170
+ --track-color: var(--seed-color-palette-gray-500);
171
+ --range-color: var(--seed-color-fg-neutral)
172
+ }
173
+ .seed-action-button__text--variant_ghost {
174
+ color: var(--seed-color-fg-neutral)
175
+ }
176
+ .seed-action-button__prefixIcon--variant_ghost {
177
+ color: var(--seed-color-fg-neutral)
178
+ }
179
+ .seed-action-button__suffixIcon--variant_ghost {
180
+ color: var(--seed-color-fg-neutral)
181
+ }
182
+ .seed-action-button__icon--variant_ghost {
183
+ color: var(--seed-color-fg-neutral)
184
+ }
185
+ .seed-action-button__root--size_xsmall {
186
+ height: var(--seed-dimension-x8);
187
+ border-radius: var(--seed-radius-full);
188
+ --size: 14px;
189
+ --thickness: 2px
190
+ }
191
+ .seed-action-button__root--size_small {
192
+ height: var(--seed-dimension-x9);
193
+ border-radius: var(--seed-radius-r2);
194
+ --size: 14px;
195
+ --thickness: 2px
196
+ }
197
+ .seed-action-button__root--size_medium {
198
+ height: var(--seed-dimension-x10);
199
+ border-radius: var(--seed-radius-r2);
200
+ --size: 16px;
201
+ --thickness: 2px
202
+ }
203
+ .seed-action-button__root--size_large {
204
+ height: var(--seed-dimension-x13);
205
+ border-radius: var(--seed-radius-r3);
206
+ --size: 18px;
207
+ --thickness: 2px
208
+ }
209
+ .seed-action-button__root--size_xsmall-layout_withText {
210
+ gap: var(--seed-dimension-x1);
211
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
212
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
213
+ --seed-box-padding-top: var(--seed-dimension-x1_5);
214
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5)
215
+ }
216
+ .seed-action-button__content--size_xsmall-layout_withText {
217
+ gap: var(--seed-dimension-x1)
218
+ }
219
+ .seed-action-button__text--size_xsmall-layout_withText {
220
+ font-size: var(--seed-font-size-t3);
221
+ line-height: var(--seed-line-height-t3)
222
+ }
223
+ .seed-action-button__prefixIcon--size_xsmall-layout_withText {
224
+ width: var(--seed-dimension-x3_5);
225
+ height: var(--seed-dimension-x3_5)
226
+ }
227
+ .seed-action-button__suffixIcon--size_xsmall-layout_withText {
228
+ width: var(--seed-dimension-x3_5);
229
+ height: var(--seed-dimension-x3_5)
230
+ }
231
+ .seed-action-button__root--size_xsmall-layout_iconOnly {
232
+ min-width: var(--seed-dimension-x8);
233
+ --seed-box-padding-left: var(--seed-dimension-x1_5);
234
+ --seed-box-padding-right: var(--seed-dimension-x1_5);
235
+ --seed-box-padding-top: var(--seed-dimension-x1_5);
236
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5)
237
+ }
238
+ .seed-action-button__icon--size_xsmall-layout_iconOnly {
239
+ width: var(--seed-dimension-x3_5);
240
+ height: var(--seed-dimension-x3_5)
241
+ }
242
+ .seed-action-button__root--size_small-layout_withText {
243
+ gap: var(--seed-dimension-x1);
244
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
245
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
246
+ --seed-box-padding-top: var(--seed-dimension-x2);
247
+ --seed-box-padding-bottom: var(--seed-dimension-x2)
248
+ }
249
+ .seed-action-button__content--size_small-layout_withText {
250
+ gap: var(--seed-dimension-x1)
251
+ }
252
+ .seed-action-button__text--size_small-layout_withText {
253
+ font-size: var(--seed-font-size-t4);
254
+ line-height: var(--seed-line-height-t4)
255
+ }
256
+ .seed-action-button__prefixIcon--size_small-layout_withText {
257
+ width: var(--seed-dimension-x3_5);
258
+ height: var(--seed-dimension-x3_5)
259
+ }
260
+ .seed-action-button__suffixIcon--size_small-layout_withText {
261
+ width: var(--seed-dimension-x3_5);
262
+ height: var(--seed-dimension-x3_5)
263
+ }
264
+ .seed-action-button__root--size_small-layout_iconOnly {
265
+ min-width: var(--seed-dimension-x9);
266
+ --seed-box-padding-left: var(--seed-dimension-x2);
267
+ --seed-box-padding-right: var(--seed-dimension-x2);
268
+ --seed-box-padding-top: var(--seed-dimension-x2);
269
+ --seed-box-padding-bottom: var(--seed-dimension-x2)
270
+ }
271
+ .seed-action-button__icon--size_small-layout_iconOnly {
272
+ width: var(--seed-dimension-x4);
273
+ height: var(--seed-dimension-x4)
274
+ }
275
+ .seed-action-button__root--size_medium-layout_withText {
276
+ gap: var(--seed-dimension-x1_5);
277
+ --seed-box-padding-left: var(--seed-dimension-x4);
278
+ --seed-box-padding-right: var(--seed-dimension-x4);
279
+ --seed-box-padding-top: var(--seed-dimension-x2_5);
280
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5)
281
+ }
282
+ .seed-action-button__content--size_medium-layout_withText {
283
+ gap: var(--seed-dimension-x1_5)
284
+ }
285
+ .seed-action-button__text--size_medium-layout_withText {
286
+ font-size: var(--seed-font-size-t4);
287
+ line-height: var(--seed-line-height-t4)
288
+ }
289
+ .seed-action-button__prefixIcon--size_medium-layout_withText {
290
+ width: var(--seed-dimension-x4);
291
+ height: var(--seed-dimension-x4)
292
+ }
293
+ .seed-action-button__suffixIcon--size_medium-layout_withText {
294
+ width: var(--seed-dimension-x4);
295
+ height: var(--seed-dimension-x4)
296
+ }
297
+ .seed-action-button__root--size_medium-layout_iconOnly {
298
+ min-width: var(--seed-dimension-x10);
299
+ --seed-box-padding-left: var(--seed-dimension-x2_5);
300
+ --seed-box-padding-right: var(--seed-dimension-x2_5);
301
+ --seed-box-padding-top: var(--seed-dimension-x2_5);
302
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5)
303
+ }
304
+ .seed-action-button__icon--size_medium-layout_iconOnly {
305
+ width: 18px;
306
+ height: 18px
307
+ }
308
+ .seed-action-button__root--size_large-layout_withText {
309
+ gap: var(--seed-dimension-x2);
310
+ --seed-box-padding-left: var(--seed-dimension-x5);
311
+ --seed-box-padding-right: var(--seed-dimension-x5);
312
+ --seed-box-padding-top: var(--seed-dimension-x3_5);
313
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5)
314
+ }
315
+ .seed-action-button__content--size_large-layout_withText {
316
+ gap: var(--seed-dimension-x2)
317
+ }
318
+ .seed-action-button__text--size_large-layout_withText {
319
+ font-size: var(--seed-font-size-t6);
320
+ line-height: var(--seed-line-height-t6)
321
+ }
322
+ .seed-action-button__prefixIcon--size_large-layout_withText {
323
+ width: 22px;
324
+ height: 22px
325
+ }
326
+ .seed-action-button__suffixIcon--size_large-layout_withText {
327
+ width: 22px;
328
+ height: 22px
329
+ }
330
+ .seed-action-button__root--size_large-layout_iconOnly {
331
+ min-width: var(--seed-dimension-x13);
332
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
333
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
334
+ --seed-box-padding-top: var(--seed-dimension-x3_5);
335
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5)
336
+ }
337
+ .seed-action-button__icon--size_large-layout_iconOnly {
338
+ width: 22px;
339
+ height: 22px
340
+ }
341
+ .seed-action-button__root--variant_brandSolid-pressed_true {
342
+ background: var(--seed-color-bg-brand-solid-pressed)
343
+ }
344
+ .seed-action-button__root--variant_neutralSolid-pressed_true {
345
+ background: var(--seed-color-bg-neutral-inverted-pressed)
346
+ }
347
+ .seed-action-button__root--variant_neutralWeak-pressed_true {
348
+ background: var(--seed-color-bg-neutral-weak-pressed)
349
+ }
350
+ .seed-action-button__root--variant_criticalSolid-pressed_true {
351
+ background: var(--seed-color-bg-critical-solid-pressed)
352
+ }
353
+ .seed-action-button__root--variant_brandOutline-pressed_true {
354
+ background: var(--seed-color-bg-transparent-pressed)
355
+ }
356
+ .seed-action-button__root--variant_neutralOutline-pressed_true {
357
+ background: var(--seed-color-bg-transparent-pressed)
358
+ }
359
+ .seed-action-button__root--variant_ghost-pressed_true {
360
+ background: var(--seed-color-bg-transparent-pressed)
361
+ }
362
+ .seed-action-button__root--variant_brandSolid-disabled_true {
363
+ background: var(--seed-color-bg-disabled)
364
+ }
365
+ .seed-action-button__text--variant_brandSolid-disabled_true {
366
+ color: var(--seed-color-fg-disabled)
367
+ }
368
+ .seed-action-button__prefixIcon--variant_brandSolid-disabled_true {
369
+ color: var(--seed-color-fg-disabled)
370
+ }
371
+ .seed-action-button__suffixIcon--variant_brandSolid-disabled_true {
372
+ color: var(--seed-color-fg-disabled)
373
+ }
374
+ .seed-action-button__icon--variant_brandSolid-disabled_true {
375
+ color: var(--seed-color-fg-disabled)
376
+ }
377
+ .seed-action-button__root--variant_neutralSolid-disabled_true {
378
+ background: var(--seed-color-bg-disabled)
379
+ }
380
+ .seed-action-button__text--variant_neutralSolid-disabled_true {
381
+ color: var(--seed-color-fg-disabled)
382
+ }
383
+ .seed-action-button__prefixIcon--variant_neutralSolid-disabled_true {
384
+ color: var(--seed-color-fg-disabled)
385
+ }
386
+ .seed-action-button__suffixIcon--variant_neutralSolid-disabled_true {
387
+ color: var(--seed-color-fg-disabled)
388
+ }
389
+ .seed-action-button__icon--variant_neutralSolid-disabled_true {
390
+ color: var(--seed-color-fg-disabled)
391
+ }
392
+ .seed-action-button__root--variant_neutralWeak-disabled_true {
393
+ background: var(--seed-color-bg-disabled)
394
+ }
395
+ .seed-action-button__text--variant_neutralWeak-disabled_true {
396
+ color: var(--seed-color-fg-disabled)
397
+ }
398
+ .seed-action-button__prefixIcon--variant_neutralWeak-disabled_true {
399
+ color: var(--seed-color-fg-disabled)
400
+ }
401
+ .seed-action-button__suffixIcon--variant_neutralWeak-disabled_true {
402
+ color: var(--seed-color-fg-disabled)
403
+ }
404
+ .seed-action-button__icon--variant_neutralWeak-disabled_true {
405
+ color: var(--seed-color-fg-disabled)
406
+ }
407
+ .seed-action-button__root--variant_criticalSolid-disabled_true {
408
+ background: var(--seed-color-bg-disabled)
409
+ }
410
+ .seed-action-button__text--variant_criticalSolid-disabled_true {
411
+ color: var(--seed-color-fg-disabled)
412
+ }
413
+ .seed-action-button__prefixIcon--variant_criticalSolid-disabled_true {
414
+ color: var(--seed-color-fg-disabled)
415
+ }
416
+ .seed-action-button__suffixIcon--variant_criticalSolid-disabled_true {
417
+ color: var(--seed-color-fg-disabled)
418
+ }
419
+ .seed-action-button__icon--variant_criticalSolid-disabled_true {
420
+ color: var(--seed-color-fg-disabled)
421
+ }
422
+ .seed-action-button__root--variant_brandOutline-disabled_true {
423
+ background: var(--seed-color-bg-transparent);
424
+ border-color: var(--seed-color-stroke-neutral-muted)
425
+ }
426
+ .seed-action-button__text--variant_brandOutline-disabled_true {
427
+ color: var(--seed-color-fg-disabled)
428
+ }
429
+ .seed-action-button__prefixIcon--variant_brandOutline-disabled_true {
430
+ color: var(--seed-color-fg-disabled)
431
+ }
432
+ .seed-action-button__suffixIcon--variant_brandOutline-disabled_true {
433
+ color: var(--seed-color-fg-disabled)
434
+ }
435
+ .seed-action-button__icon--variant_brandOutline-disabled_true {
436
+ color: var(--seed-color-fg-disabled)
437
+ }
438
+ .seed-action-button__root--variant_neutralOutline-disabled_true {
439
+ background: var(--seed-color-bg-transparent);
440
+ border-color: var(--seed-color-stroke-neutral-muted)
441
+ }
442
+ .seed-action-button__text--variant_neutralOutline-disabled_true {
443
+ color: var(--seed-color-fg-disabled)
444
+ }
445
+ .seed-action-button__prefixIcon--variant_neutralOutline-disabled_true {
446
+ color: var(--seed-color-fg-disabled)
447
+ }
448
+ .seed-action-button__suffixIcon--variant_neutralOutline-disabled_true {
449
+ color: var(--seed-color-fg-disabled)
450
+ }
451
+ .seed-action-button__icon--variant_neutralOutline-disabled_true {
452
+ color: var(--seed-color-fg-disabled)
453
+ }
454
+ .seed-action-button__root--variant_ghost-disabled_true {
455
+ background: #ffffff00
456
+ }
457
+ .seed-action-button__text--variant_ghost-disabled_true {
458
+ color: var(--seed-color-fg-disabled)
459
+ }
460
+ .seed-action-button__prefixIcon--variant_ghost-disabled_true {
461
+ color: var(--seed-color-fg-disabled)
462
+ }
463
+ .seed-action-button__suffixIcon--variant_ghost-disabled_true {
464
+ color: var(--seed-color-fg-disabled)
465
+ }
466
+ .seed-action-button__icon--variant_ghost-disabled_true {
467
+ color: var(--seed-color-fg-disabled)
468
+ }
469
+ .seed-action-button__root--variant_brandSolid-loading_true {
470
+ background: var(--seed-color-bg-brand-solid-pressed)
471
+ }
472
+ .seed-action-button__root--variant_neutralSolid-loading_true {
473
+ background: var(--seed-color-bg-neutral-inverted-pressed)
474
+ }
475
+ .seed-action-button__root--variant_neutralWeak-loading_true {
476
+ background: var(--seed-color-bg-neutral-weak-pressed)
477
+ }
478
+ .seed-action-button__root--variant_criticalSolid-loading_true {
479
+ background: var(--seed-color-bg-critical-solid-pressed)
480
+ }
481
+ .seed-action-button__root--variant_brandOutline-loading_true {
482
+ background: var(--seed-color-bg-transparent)
483
+ }
484
+ .seed-action-button__root--variant_neutralOutline-loading_true {
485
+ background: var(--seed-color-bg-transparent)
486
+ }
487
+ .seed-action-button__root--variant_ghost-loading_true {
488
+ background: var(--seed-color-bg-transparent-pressed)
489
+ }
package/recipes/action-button.d.ts ADDED
@@ -0,0 +1,44 @@
1
+ declare interface ActionButtonVariant {
2
+ /**
3
+ * @default "brandSolid"
4
+ */
5
+ variant: "brandSolid" | "neutralSolid" | "neutralWeak" | "criticalSolid" | "brandOutline" | "neutralOutline" | "ghost";
6
+ /**
7
+ * @default "medium"
8
+ */
9
+ size: "xsmall" | "small" | "medium" | "large";
10
+ /**
11
+ * @default "withText"
12
+ */
13
+ layout: "withText" | "iconOnly";
14
+ /**
15
+ * @default false
16
+ */
17
+ pressed: boolean;
18
+ /**
19
+ * @default false
20
+ */
21
+ disabled: boolean;
22
+ /**
23
+ * @default false
24
+ */
25
+ loading: boolean;
26
+ }
27
+
28
+ declare type ActionButtonVariantMap = {
29
+ [key in keyof ActionButtonVariant]: Array<ActionButtonVariant[key]>;
30
+ };
31
+
32
+ export declare type ActionButtonVariantProps = Partial<ActionButtonVariant>;
33
+
34
+ export declare type ActionButtonSlotName = "root" | "content" | "text" | "prefixIcon" | "suffixIcon" | "icon" | "loadingIndicator";
35
+
36
+ export declare const actionButtonVariantMap: ActionButtonVariantMap;
37
+
38
+ export declare const actionButton: ((
39
+ props?: ActionButtonVariantProps,
40
+ ) => Record<ActionButtonSlotName, string>) & {
41
+ splitVariantProps: <T extends ActionButtonVariantProps>(
42
+ props: T,
43
+ ) => [ActionButtonVariantProps, Omit<T, keyof ActionButtonVariantProps>];
44
+ }