@seed-design/css 2.9.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (363) hide show
  1. package/README.md +2 -2
  2. package/all.css +928 -1493
  3. package/all.layered.css +928 -1493
  4. package/all.layered.min.css +1 -1
  5. package/all.min.css +1 -1
  6. package/base.css +45 -4
  7. package/base.layered.css +45 -4
  8. package/base.layered.min.css +1 -1
  9. package/base.min.css +1 -1
  10. package/package.json +8 -11
  11. package/recipes/accordion.css +3 -0
  12. package/recipes/accordion.layered.css +4 -0
  13. package/recipes/action-button.css +19 -19
  14. package/recipes/action-button.layered.css +19 -19
  15. package/recipes/alert-dialog.css +101 -0
  16. package/recipes/alert-dialog.d.ts +24 -0
  17. package/recipes/alert-dialog.layered.css +114 -0
  18. package/recipes/alert-dialog.layered.mjs +66 -0
  19. package/recipes/alert-dialog.mjs +66 -0
  20. package/recipes/badge.css +83 -27
  21. package/recipes/badge.d.ts +1 -1
  22. package/recipes/badge.layered.css +63 -8
  23. package/recipes/badge.layered.mjs +8 -0
  24. package/recipes/badge.mjs +8 -0
  25. package/recipes/checkmark.css +5 -5
  26. package/recipes/checkmark.layered.css +5 -5
  27. package/recipes/chip-tabs.css +8 -8
  28. package/recipes/chip-tabs.layered.css +8 -8
  29. package/recipes/chip.css +10 -10
  30. package/recipes/chip.layered.css +10 -10
  31. package/recipes/contextual-floating-button.css +8 -8
  32. package/recipes/contextual-floating-button.layered.css +8 -8
  33. package/recipes/date-picker.css +29 -16
  34. package/recipes/date-picker.d.ts +1 -1
  35. package/recipes/date-picker.layered.css +34 -15
  36. package/recipes/date-picker.layered.mjs +6 -14
  37. package/recipes/date-picker.mjs +6 -14
  38. package/recipes/dialog.css +206 -46
  39. package/recipes/dialog.d.ts +3 -3
  40. package/recipes/dialog.layered.css +228 -46
  41. package/recipes/dialog.layered.mjs +12 -7
  42. package/recipes/dialog.mjs +12 -7
  43. package/recipes/floating-action-button.css +2 -2
  44. package/recipes/floating-action-button.layered.css +2 -2
  45. package/recipes/help-bubble.css +9 -6
  46. package/recipes/help-bubble.layered.css +10 -6
  47. package/recipes/menu-item.css +3 -0
  48. package/recipes/menu-item.layered.css +4 -0
  49. package/recipes/menu-sheet-item.css +3 -0
  50. package/recipes/menu-sheet-item.layered.css +4 -0
  51. package/recipes/notification-badge.css +1 -1
  52. package/recipes/notification-badge.layered.css +1 -1
  53. package/recipes/page-banner.css +32 -29
  54. package/recipes/page-banner.layered.css +23 -19
  55. package/recipes/pagination-page-item.css +4 -4
  56. package/recipes/pagination-page-item.layered.css +4 -4
  57. package/recipes/{content-dialog.css → popover.css} +77 -104
  58. package/recipes/popover.d.ts +21 -0
  59. package/recipes/{content-dialog.layered.css → popover.layered.css} +80 -111
  60. package/recipes/popover.layered.mjs +60 -0
  61. package/recipes/popover.mjs +60 -0
  62. package/recipes/radiomark.css +5 -5
  63. package/recipes/radiomark.layered.css +5 -5
  64. package/recipes/segmented-control.css +3 -0
  65. package/recipes/segmented-control.layered.css +4 -0
  66. package/recipes/select-box.css +4 -0
  67. package/recipes/select-box.layered.css +5 -0
  68. package/recipes/select-item.css +3 -0
  69. package/recipes/select-item.layered.css +4 -0
  70. package/recipes/select-trigger.css +3 -0
  71. package/recipes/select-trigger.layered.css +4 -0
  72. package/recipes/side-panel.css +0 -33
  73. package/recipes/side-panel.layered.css +0 -33
  74. package/recipes/slider-tick.css +1 -1
  75. package/recipes/slider-tick.layered.css +1 -1
  76. package/recipes/slider.css +4 -4
  77. package/recipes/slider.layered.css +4 -4
  78. package/recipes/snackbar.css +2 -2
  79. package/recipes/snackbar.layered.css +2 -2
  80. package/recipes/switchmark.css +2 -2
  81. package/recipes/switchmark.layered.css +2 -2
  82. package/recipes/time-picker.css +2 -5
  83. package/recipes/time-picker.d.ts +1 -1
  84. package/recipes/time-picker.layered.css +2 -3
  85. package/recipes/time-picker.layered.mjs +0 -12
  86. package/recipes/time-picker.mjs +0 -12
  87. package/recipes/toggle-button.css +4 -4
  88. package/recipes/toggle-button.layered.css +4 -4
  89. package/recipes/wheel-picker.css +42 -3
  90. package/recipes/wheel-picker.d.ts +5 -2
  91. package/recipes/wheel-picker.layered.css +47 -3
  92. package/recipes/wheel-picker.layered.mjs +13 -2
  93. package/recipes/wheel-picker.mjs +13 -2
  94. package/vars/color/bg.d.ts +8 -4
  95. package/vars/color/bg.mjs +3 -1
  96. package/vars/color/fg.d.ts +13 -1
  97. package/vars/color/fg.mjs +6 -0
  98. package/vars/component/index.d.ts +1 -104
  99. package/vars/component/index.mjs +1 -104
  100. package/recipes/action-chip.css +0 -75
  101. package/recipes/action-chip.d.ts +0 -26
  102. package/recipes/action-chip.layered.css +0 -84
  103. package/recipes/action-chip.layered.mjs +0 -51
  104. package/recipes/action-chip.mjs +0 -51
  105. package/recipes/action-sheet-item.css +0 -32
  106. package/recipes/action-sheet-item.d.ts +0 -22
  107. package/recipes/action-sheet-item.layered.css +0 -38
  108. package/recipes/action-sheet-item.layered.mjs +0 -29
  109. package/recipes/action-sheet-item.mjs +0 -29
  110. package/recipes/action-sheet.css +0 -125
  111. package/recipes/action-sheet.d.ts +0 -21
  112. package/recipes/action-sheet.layered.css +0 -134
  113. package/recipes/action-sheet.layered.mjs +0 -60
  114. package/recipes/action-sheet.mjs +0 -60
  115. package/recipes/content-dialog.d.ts +0 -24
  116. package/recipes/content-dialog.layered.mjs +0 -71
  117. package/recipes/content-dialog.mjs +0 -71
  118. package/recipes/control-chip.css +0 -88
  119. package/recipes/control-chip.d.ts +0 -26
  120. package/recipes/control-chip.layered.css +0 -99
  121. package/recipes/control-chip.layered.mjs +0 -51
  122. package/recipes/control-chip.mjs +0 -51
  123. package/recipes/extended-action-sheet-item.css +0 -31
  124. package/recipes/extended-action-sheet-item.d.ts +0 -22
  125. package/recipes/extended-action-sheet-item.layered.css +0 -38
  126. package/recipes/extended-action-sheet-item.layered.mjs +0 -29
  127. package/recipes/extended-action-sheet-item.mjs +0 -29
  128. package/recipes/extended-action-sheet.css +0 -123
  129. package/recipes/extended-action-sheet.d.ts +0 -21
  130. package/recipes/extended-action-sheet.layered.css +0 -132
  131. package/recipes/extended-action-sheet.layered.mjs +0 -64
  132. package/recipes/extended-action-sheet.mjs +0 -64
  133. package/recipes/extended-fab.css +0 -66
  134. package/recipes/extended-fab.d.ts +0 -26
  135. package/recipes/extended-fab.layered.css +0 -79
  136. package/recipes/extended-fab.layered.mjs +0 -34
  137. package/recipes/extended-fab.mjs +0 -34
  138. package/recipes/fab.css +0 -31
  139. package/recipes/fab.d.ts +0 -19
  140. package/recipes/fab.layered.css +0 -37
  141. package/recipes/fab.layered.mjs +0 -22
  142. package/recipes/fab.mjs +0 -22
  143. package/recipes/inline-banner.css +0 -180
  144. package/recipes/inline-banner.d.ts +0 -24
  145. package/recipes/inline-banner.layered.css +0 -161
  146. package/recipes/inline-banner.layered.mjs +0 -64
  147. package/recipes/inline-banner.mjs +0 -64
  148. package/recipes/link-content.css +0 -41
  149. package/recipes/link-content.d.ts +0 -26
  150. package/recipes/link-content.layered.css +0 -48
  151. package/recipes/link-content.layered.mjs +0 -35
  152. package/recipes/link-content.mjs +0 -35
  153. package/recipes/wheel-picker-public.css +0 -124
  154. package/recipes/wheel-picker-public.d.ts +0 -24
  155. package/recipes/wheel-picker-public.layered.css +0 -144
  156. package/recipes/wheel-picker-public.layered.mjs +0 -63
  157. package/recipes/wheel-picker-public.mjs +0 -63
  158. package/vars/component/accordion-item.d.ts +0 -132
  159. package/vars/component/accordion-item.mjs +0 -126
  160. package/vars/component/accordion.d.ts +0 -22
  161. package/vars/component/accordion.mjs +0 -16
  162. package/vars/component/action-button.d.ts +0 -660
  163. package/vars/component/action-button.mjs +0 -541
  164. package/vars/component/action-chip.d.ts +0 -132
  165. package/vars/component/action-chip.mjs +0 -132
  166. package/vars/component/action-sheet-close-button.d.ts +0 -23
  167. package/vars/component/action-sheet-close-button.mjs +0 -23
  168. package/vars/component/action-sheet-item.d.ts +0 -36
  169. package/vars/component/action-sheet-item.mjs +0 -36
  170. package/vars/component/action-sheet.d.ts +0 -46
  171. package/vars/component/action-sheet.mjs +0 -46
  172. package/vars/component/alert-dialog.d.ts +0 -52
  173. package/vars/component/alert-dialog.mjs +0 -52
  174. package/vars/component/attachment-input-dropzone.d.ts +0 -32
  175. package/vars/component/attachment-input-dropzone.mjs +0 -30
  176. package/vars/component/attachment-input-item-action-button.d.ts +0 -37
  177. package/vars/component/attachment-input-item-action-button.mjs +0 -37
  178. package/vars/component/attachment-input-item-remove-button.d.ts +0 -28
  179. package/vars/component/attachment-input-item-remove-button.mjs +0 -28
  180. package/vars/component/attachment-input-item.d.ts +0 -103
  181. package/vars/component/attachment-input-item.mjs +0 -102
  182. package/vars/component/attachment-input-trigger.d.ts +0 -46
  183. package/vars/component/attachment-input-trigger.mjs +0 -46
  184. package/vars/component/attachment-input.d.ts +0 -14
  185. package/vars/component/attachment-input.mjs +0 -12
  186. package/vars/component/avatar-stack.d.ts +0 -110
  187. package/vars/component/avatar-stack.mjs +0 -110
  188. package/vars/component/avatar.d.ts +0 -204
  189. package/vars/component/avatar.mjs +0 -162
  190. package/vars/component/badge.d.ts +0 -316
  191. package/vars/component/badge.mjs +0 -236
  192. package/vars/component/bottom-sheet-close-button.d.ts +0 -21
  193. package/vars/component/bottom-sheet-close-button.mjs +0 -21
  194. package/vars/component/bottom-sheet-handle.d.ts +0 -24
  195. package/vars/component/bottom-sheet-handle.mjs +0 -24
  196. package/vars/component/bottom-sheet.d.ts +0 -86
  197. package/vars/component/bottom-sheet.mjs +0 -86
  198. package/vars/component/callout-close-button.d.ts +0 -81
  199. package/vars/component/callout-close-button.mjs +0 -63
  200. package/vars/component/callout.d.ts +0 -232
  201. package/vars/component/callout.mjs +0 -200
  202. package/vars/component/checkbox-group.d.ts +0 -9
  203. package/vars/component/checkbox-group.mjs +0 -9
  204. package/vars/component/checkbox.d.ts +0 -56
  205. package/vars/component/checkbox.mjs +0 -53
  206. package/vars/component/checkmark.d.ts +0 -195
  207. package/vars/component/checkmark.mjs +0 -165
  208. package/vars/component/chip-tablist.d.ts +0 -24
  209. package/vars/component/chip-tablist.mjs +0 -24
  210. package/vars/component/chip.d.ts +0 -321
  211. package/vars/component/chip.mjs +0 -303
  212. package/vars/component/content-placeholder.d.ts +0 -28
  213. package/vars/component/content-placeholder.mjs +0 -27
  214. package/vars/component/contextual-floating-button.d.ts +0 -144
  215. package/vars/component/contextual-floating-button.mjs +0 -132
  216. package/vars/component/control-chip.d.ts +0 -158
  217. package/vars/component/control-chip.mjs +0 -158
  218. package/vars/component/date-picker.d.ts +0 -103
  219. package/vars/component/date-picker.mjs +0 -103
  220. package/vars/component/dialog-close-button.d.ts +0 -24
  221. package/vars/component/dialog-close-button.mjs +0 -24
  222. package/vars/component/dialog.d.ts +0 -91
  223. package/vars/component/dialog.mjs +0 -83
  224. package/vars/component/divider.d.ts +0 -9
  225. package/vars/component/divider.mjs +0 -9
  226. package/vars/component/extended-action-sheet-close-button.d.ts +0 -24
  227. package/vars/component/extended-action-sheet-close-button.mjs +0 -24
  228. package/vars/component/extended-action-sheet-item.d.ts +0 -46
  229. package/vars/component/extended-action-sheet-item.mjs +0 -46
  230. package/vars/component/extended-action-sheet.d.ts +0 -55
  231. package/vars/component/extended-action-sheet.mjs +0 -55
  232. package/vars/component/extended-fab.d.ts +0 -88
  233. package/vars/component/extended-fab.mjs +0 -82
  234. package/vars/component/fab.d.ts +0 -21
  235. package/vars/component/fab.mjs +0 -21
  236. package/vars/component/field-label.d.ts +0 -25
  237. package/vars/component/field-label.mjs +0 -25
  238. package/vars/component/field.d.ts +0 -78
  239. package/vars/component/field.mjs +0 -72
  240. package/vars/component/floating-action-button.d.ts +0 -60
  241. package/vars/component/floating-action-button.mjs +0 -54
  242. package/vars/component/help-bubble.d.ts +0 -55
  243. package/vars/component/help-bubble.mjs +0 -52
  244. package/vars/component/identity-placeholder.d.ts +0 -12
  245. package/vars/component/identity-placeholder.mjs +0 -12
  246. package/vars/component/image-frame-floater.d.ts +0 -10
  247. package/vars/component/image-frame-floater.mjs +0 -9
  248. package/vars/component/image-frame-indicator.d.ts +0 -20
  249. package/vars/component/image-frame-indicator.mjs +0 -18
  250. package/vars/component/image-frame-reaction-button.d.ts +0 -60
  251. package/vars/component/image-frame-reaction-button.mjs +0 -51
  252. package/vars/component/image-frame.d.ts +0 -27
  253. package/vars/component/image-frame.mjs +0 -18
  254. package/vars/component/inline-banner.d.ts +0 -191
  255. package/vars/component/inline-banner.mjs +0 -191
  256. package/vars/component/input-button.d.ts +0 -162
  257. package/vars/component/input-button.mjs +0 -155
  258. package/vars/component/link-content.d.ts +0 -58
  259. package/vars/component/link-content.mjs +0 -58
  260. package/vars/component/list-header.d.ts +0 -29
  261. package/vars/component/list-header.mjs +0 -29
  262. package/vars/component/list-item.d.ts +0 -85
  263. package/vars/component/list-item.mjs +0 -84
  264. package/vars/component/manner-temp-badge.d.ts +0 -117
  265. package/vars/component/manner-temp-badge.mjs +0 -117
  266. package/vars/component/manner-temp.d.ts +0 -88
  267. package/vars/component/manner-temp.mjs +0 -88
  268. package/vars/component/menu-item.d.ts +0 -129
  269. package/vars/component/menu-item.mjs +0 -117
  270. package/vars/component/menu-sheet-close-button.d.ts +0 -24
  271. package/vars/component/menu-sheet-close-button.mjs +0 -24
  272. package/vars/component/menu-sheet-item.d.ts +0 -69
  273. package/vars/component/menu-sheet-item.mjs +0 -57
  274. package/vars/component/menu-sheet.d.ts +0 -56
  275. package/vars/component/menu-sheet.mjs +0 -56
  276. package/vars/component/menu.d.ts +0 -68
  277. package/vars/component/menu.mjs +0 -60
  278. package/vars/component/notification-badge.d.ts +0 -48
  279. package/vars/component/notification-badge.mjs +0 -42
  280. package/vars/component/page-banner-close-button.d.ts +0 -133
  281. package/vars/component/page-banner-close-button.mjs +0 -99
  282. package/vars/component/page-banner.d.ts +0 -385
  283. package/vars/component/page-banner.mjs +0 -339
  284. package/vars/component/pagination-button.d.ts +0 -33
  285. package/vars/component/pagination-button.mjs +0 -33
  286. package/vars/component/pagination-page-item.d.ts +0 -54
  287. package/vars/component/pagination-page-item.mjs +0 -54
  288. package/vars/component/progress-circle.d.ts +0 -88
  289. package/vars/component/progress-circle.mjs +0 -67
  290. package/vars/component/quantity-picker-button.d.ts +0 -78
  291. package/vars/component/quantity-picker-button.mjs +0 -78
  292. package/vars/component/quantity-picker.d.ts +0 -80
  293. package/vars/component/quantity-picker.mjs +0 -80
  294. package/vars/component/radio-group.d.ts +0 -9
  295. package/vars/component/radio-group.mjs +0 -9
  296. package/vars/component/radio.d.ts +0 -56
  297. package/vars/component/radio.mjs +0 -53
  298. package/vars/component/radiomark.d.ts +0 -117
  299. package/vars/component/radiomark.mjs +0 -117
  300. package/vars/component/reaction-button.d.ts +0 -136
  301. package/vars/component/reaction-button.mjs +0 -136
  302. package/vars/component/scroll-fog.d.ts +0 -78
  303. package/vars/component/scroll-fog.mjs +0 -78
  304. package/vars/component/segmented-control-indicator.d.ts +0 -24
  305. package/vars/component/segmented-control-indicator.mjs +0 -24
  306. package/vars/component/segmented-control-item.d.ts +0 -41
  307. package/vars/component/segmented-control-item.mjs +0 -41
  308. package/vars/component/segmented-control.d.ts +0 -11
  309. package/vars/component/segmented-control.mjs +0 -11
  310. package/vars/component/select-box-checkmark.d.ts +0 -40
  311. package/vars/component/select-box-checkmark.mjs +0 -40
  312. package/vars/component/select-box-group.d.ts +0 -10
  313. package/vars/component/select-box-group.mjs +0 -10
  314. package/vars/component/select-box.d.ts +0 -107
  315. package/vars/component/select-box.mjs +0 -102
  316. package/vars/component/select-item.d.ts +0 -101
  317. package/vars/component/select-item.mjs +0 -95
  318. package/vars/component/select-trigger.d.ts +0 -127
  319. package/vars/component/select-trigger.mjs +0 -120
  320. package/vars/component/select.d.ts +0 -62
  321. package/vars/component/select.mjs +0 -54
  322. package/vars/component/side-panel-close-button.d.ts +0 -24
  323. package/vars/component/side-panel-close-button.mjs +0 -24
  324. package/vars/component/side-panel.d.ts +0 -97
  325. package/vars/component/side-panel.mjs +0 -85
  326. package/vars/component/skeleton.d.ts +0 -80
  327. package/vars/component/skeleton.mjs +0 -62
  328. package/vars/component/slider-thumb.d.ts +0 -25
  329. package/vars/component/slider-thumb.mjs +0 -25
  330. package/vars/component/slider-tick.d.ts +0 -23
  331. package/vars/component/slider-tick.mjs +0 -23
  332. package/vars/component/slider.d.ts +0 -81
  333. package/vars/component/slider.mjs +0 -78
  334. package/vars/component/snackbar.d.ts +0 -65
  335. package/vars/component/snackbar.mjs +0 -65
  336. package/vars/component/switch.d.ts +0 -56
  337. package/vars/component/switch.mjs +0 -53
  338. package/vars/component/switchmark.d.ts +0 -114
  339. package/vars/component/switchmark.mjs +0 -112
  340. package/vars/component/tab.d.ts +0 -47
  341. package/vars/component/tab.mjs +0 -47
  342. package/vars/component/tablist.d.ts +0 -51
  343. package/vars/component/tablist.mjs +0 -51
  344. package/vars/component/tag-group-item.d.ts +0 -122
  345. package/vars/component/tag-group-item.mjs +0 -122
  346. package/vars/component/tag-group.d.ts +0 -34
  347. package/vars/component/tag-group.mjs +0 -34
  348. package/vars/component/text-button.d.ts +0 -23
  349. package/vars/component/text-button.mjs +0 -23
  350. package/vars/component/text-input.d.ts +0 -292
  351. package/vars/component/text-input.mjs +0 -263
  352. package/vars/component/time-picker.d.ts +0 -27
  353. package/vars/component/time-picker.mjs +0 -27
  354. package/vars/component/toggle-button.d.ts +0 -213
  355. package/vars/component/toggle-button.mjs +0 -207
  356. package/vars/component/top-navigation-icon-button.d.ts +0 -45
  357. package/vars/component/top-navigation-icon-button.mjs +0 -45
  358. package/vars/component/top-navigation-text-button.d.ts +0 -61
  359. package/vars/component/top-navigation-text-button.mjs +0 -60
  360. package/vars/component/top-navigation.d.ts +0 -118
  361. package/vars/component/top-navigation.mjs +0 -109
  362. package/vars/component/wheel-picker.d.ts +0 -72
  363. package/vars/component/wheel-picker.mjs +0 -72
@@ -1,162 +0,0 @@
1
- export declare const vars: {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "strokeWidth": "1px",
6
- "strokeColor": "var(--seed-color-stroke-neutral-weak)",
7
- "color": "var(--seed-color-bg-transparent)",
8
- "colorDuration": "var(--seed-duration-color-transition)",
9
- "colorTimingFunction": "var(--seed-timing-function-easing)",
10
- /** enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
11
- "strokeDuration": "0.1s",
12
- "strokeTimingFunction": "var(--seed-timing-function-easing)"
13
- },
14
- "value": {
15
- "fontWeight": "var(--seed-font-weight-regular)",
16
- "color": "var(--seed-color-fg-neutral)"
17
- },
18
- "placeholder": {
19
- "fontWeight": "var(--seed-font-weight-regular)",
20
- "color": "var(--seed-color-fg-placeholder)"
21
- },
22
- "prefixText": {
23
- "fontWeight": "var(--seed-font-weight-regular)",
24
- "color": "var(--seed-color-fg-neutral-subtle)"
25
- },
26
- "prefixIcon": {
27
- "color": "var(--seed-color-fg-neutral-muted)"
28
- },
29
- "suffixText": {
30
- "fontWeight": "var(--seed-font-weight-regular)",
31
- "color": "var(--seed-color-fg-neutral-subtle)"
32
- },
33
- "suffixIcon": {
34
- "color": "var(--seed-color-fg-neutral-muted)"
35
- },
36
- "clearButton": {
37
- "color": "var(--seed-color-fg-neutral-subtle)"
38
- }
39
- },
40
- "pressed": {
41
- "root": {
42
- "color": "var(--seed-color-bg-transparent-pressed)"
43
- }
44
- },
45
- "invalid": {
46
- "root": {
47
- "strokeWidth": "2px",
48
- "strokeColor": "var(--seed-color-stroke-critical-solid)"
49
- }
50
- },
51
- "disabled": {
52
- "root": {
53
- "color": "var(--seed-color-bg-disabled)"
54
- },
55
- "value": {
56
- "color": "var(--seed-color-fg-disabled)"
57
- },
58
- "placeholder": {
59
- "color": "var(--seed-color-fg-disabled)"
60
- },
61
- "prefixText": {
62
- "color": "var(--seed-color-fg-disabled)"
63
- },
64
- "prefixIcon": {
65
- "color": "var(--seed-color-fg-disabled)"
66
- },
67
- "suffixText": {
68
- "color": "var(--seed-color-fg-disabled)"
69
- },
70
- "suffixIcon": {
71
- "color": "var(--seed-color-fg-disabled)"
72
- }
73
- },
74
- "readonly": {
75
- "root": {
76
- "color": "var(--seed-color-bg-disabled)"
77
- },
78
- "value": {
79
- "color": "var(--seed-color-fg-neutral)"
80
- },
81
- "placeholder": {
82
- "color": "var(--seed-color-fg-placeholder)"
83
- }
84
- }
85
- },
86
- /**
87
- * 뷰포트 너비와 관계없이 사용할 수 있습니다.
88
- */
89
- "sizeLarge": {
90
- "enabled": {
91
- "root": {
92
- "height": "var(--seed-dimension-x13)",
93
- "gap": "var(--seed-dimension-x2_5)",
94
- "cornerRadius": "var(--seed-radius-r3)",
95
- "paddingX": "var(--seed-dimension-x4)"
96
- },
97
- "value": {
98
- "fontSize": "var(--seed-font-size-t5)",
99
- "lineHeight": "var(--seed-line-height-t5)"
100
- },
101
- "placeholder": {
102
- "fontSize": "var(--seed-font-size-t5)",
103
- "lineHeight": "var(--seed-line-height-t5)"
104
- },
105
- "prefixText": {
106
- "fontSize": "var(--seed-font-size-t5)",
107
- "lineHeight": "var(--seed-line-height-t5)"
108
- },
109
- "prefixIcon": {
110
- "size": "var(--seed-dimension-x5)"
111
- },
112
- "suffixText": {
113
- "fontSize": "var(--seed-font-size-t5)",
114
- "lineHeight": "var(--seed-line-height-t5)"
115
- },
116
- "suffixIcon": {
117
- "size": "var(--seed-dimension-x5)"
118
- },
119
- "clearButton": {
120
- "size": "22px"
121
- }
122
- }
123
- },
124
- /**
125
- * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
126
- */
127
- "sizeMedium": {
128
- "enabled": {
129
- "root": {
130
- "height": "var(--seed-dimension-x10)",
131
- "gap": "var(--seed-dimension-x2)",
132
- "cornerRadius": "var(--seed-radius-r2)",
133
- "paddingX": "var(--seed-dimension-x3_5)"
134
- },
135
- "value": {
136
- "fontSize": "var(--seed-font-size-t4)",
137
- "lineHeight": "var(--seed-line-height-t4)"
138
- },
139
- "placeholder": {
140
- "fontSize": "var(--seed-font-size-t4)",
141
- "lineHeight": "var(--seed-line-height-t4)"
142
- },
143
- "prefixText": {
144
- "fontSize": "var(--seed-font-size-t4)",
145
- "lineHeight": "var(--seed-line-height-t4)"
146
- },
147
- "prefixIcon": {
148
- "size": "var(--seed-dimension-x4)"
149
- },
150
- "suffixText": {
151
- "fontSize": "var(--seed-font-size-t4)",
152
- "lineHeight": "var(--seed-line-height-t4)"
153
- },
154
- "suffixIcon": {
155
- "size": "var(--seed-dimension-x4)"
156
- },
157
- "clearButton": {
158
- "size": "var(--seed-dimension-x4_5)"
159
- }
160
- }
161
- }
162
- }
@@ -1,155 +0,0 @@
1
- export const vars = {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "strokeWidth": "1px",
6
- "strokeColor": "var(--seed-color-stroke-neutral-weak)",
7
- "color": "var(--seed-color-bg-transparent)",
8
- "colorDuration": "var(--seed-duration-color-transition)",
9
- "colorTimingFunction": "var(--seed-timing-function-easing)",
10
- "strokeDuration": "0.1s",
11
- "strokeTimingFunction": "var(--seed-timing-function-easing)"
12
- },
13
- "value": {
14
- "fontWeight": "var(--seed-font-weight-regular)",
15
- "color": "var(--seed-color-fg-neutral)"
16
- },
17
- "placeholder": {
18
- "fontWeight": "var(--seed-font-weight-regular)",
19
- "color": "var(--seed-color-fg-placeholder)"
20
- },
21
- "prefixText": {
22
- "fontWeight": "var(--seed-font-weight-regular)",
23
- "color": "var(--seed-color-fg-neutral-subtle)"
24
- },
25
- "prefixIcon": {
26
- "color": "var(--seed-color-fg-neutral-muted)"
27
- },
28
- "suffixText": {
29
- "fontWeight": "var(--seed-font-weight-regular)",
30
- "color": "var(--seed-color-fg-neutral-subtle)"
31
- },
32
- "suffixIcon": {
33
- "color": "var(--seed-color-fg-neutral-muted)"
34
- },
35
- "clearButton": {
36
- "color": "var(--seed-color-fg-neutral-subtle)"
37
- }
38
- },
39
- "pressed": {
40
- "root": {
41
- "color": "var(--seed-color-bg-transparent-pressed)"
42
- }
43
- },
44
- "invalid": {
45
- "root": {
46
- "strokeWidth": "2px",
47
- "strokeColor": "var(--seed-color-stroke-critical-solid)"
48
- }
49
- },
50
- "disabled": {
51
- "root": {
52
- "color": "var(--seed-color-bg-disabled)"
53
- },
54
- "value": {
55
- "color": "var(--seed-color-fg-disabled)"
56
- },
57
- "placeholder": {
58
- "color": "var(--seed-color-fg-disabled)"
59
- },
60
- "prefixText": {
61
- "color": "var(--seed-color-fg-disabled)"
62
- },
63
- "prefixIcon": {
64
- "color": "var(--seed-color-fg-disabled)"
65
- },
66
- "suffixText": {
67
- "color": "var(--seed-color-fg-disabled)"
68
- },
69
- "suffixIcon": {
70
- "color": "var(--seed-color-fg-disabled)"
71
- }
72
- },
73
- "readonly": {
74
- "root": {
75
- "color": "var(--seed-color-bg-disabled)"
76
- },
77
- "value": {
78
- "color": "var(--seed-color-fg-neutral)"
79
- },
80
- "placeholder": {
81
- "color": "var(--seed-color-fg-placeholder)"
82
- }
83
- }
84
- },
85
- "sizeLarge": {
86
- "enabled": {
87
- "root": {
88
- "height": "var(--seed-dimension-x13)",
89
- "gap": "var(--seed-dimension-x2_5)",
90
- "cornerRadius": "var(--seed-radius-r3)",
91
- "paddingX": "var(--seed-dimension-x4)"
92
- },
93
- "value": {
94
- "fontSize": "var(--seed-font-size-t5)",
95
- "lineHeight": "var(--seed-line-height-t5)"
96
- },
97
- "placeholder": {
98
- "fontSize": "var(--seed-font-size-t5)",
99
- "lineHeight": "var(--seed-line-height-t5)"
100
- },
101
- "prefixText": {
102
- "fontSize": "var(--seed-font-size-t5)",
103
- "lineHeight": "var(--seed-line-height-t5)"
104
- },
105
- "prefixIcon": {
106
- "size": "var(--seed-dimension-x5)"
107
- },
108
- "suffixText": {
109
- "fontSize": "var(--seed-font-size-t5)",
110
- "lineHeight": "var(--seed-line-height-t5)"
111
- },
112
- "suffixIcon": {
113
- "size": "var(--seed-dimension-x5)"
114
- },
115
- "clearButton": {
116
- "size": "22px"
117
- }
118
- }
119
- },
120
- "sizeMedium": {
121
- "enabled": {
122
- "root": {
123
- "height": "var(--seed-dimension-x10)",
124
- "gap": "var(--seed-dimension-x2)",
125
- "cornerRadius": "var(--seed-radius-r2)",
126
- "paddingX": "var(--seed-dimension-x3_5)"
127
- },
128
- "value": {
129
- "fontSize": "var(--seed-font-size-t4)",
130
- "lineHeight": "var(--seed-line-height-t4)"
131
- },
132
- "placeholder": {
133
- "fontSize": "var(--seed-font-size-t4)",
134
- "lineHeight": "var(--seed-line-height-t4)"
135
- },
136
- "prefixText": {
137
- "fontSize": "var(--seed-font-size-t4)",
138
- "lineHeight": "var(--seed-line-height-t4)"
139
- },
140
- "prefixIcon": {
141
- "size": "var(--seed-dimension-x4)"
142
- },
143
- "suffixText": {
144
- "fontSize": "var(--seed-font-size-t4)",
145
- "lineHeight": "var(--seed-line-height-t4)"
146
- },
147
- "suffixIcon": {
148
- "size": "var(--seed-dimension-x4)"
149
- },
150
- "clearButton": {
151
- "size": "var(--seed-dimension-x4_5)"
152
- }
153
- }
154
- }
155
- }
@@ -1,58 +0,0 @@
1
- export declare const vars: {
2
- "weightRegular": {
3
- "enabled": {
4
- "label": {
5
- "fontWeight": "var(--seed-font-weight-regular)"
6
- }
7
- }
8
- },
9
- "weightBold": {
10
- "enabled": {
11
- "label": {
12
- "fontWeight": "var(--seed-font-weight-bold)"
13
- }
14
- }
15
- },
16
- "sizeT4": {
17
- "enabled": {
18
- "root": {
19
- "gap": "var(--seed-dimension-x0_5)"
20
- },
21
- "suffixIcon": {
22
- "size": "var(--seed-dimension-x3)"
23
- },
24
- "label": {
25
- "fontSize": "var(--seed-font-size-t4)",
26
- "lineHeight": "var(--seed-line-height-t4)"
27
- }
28
- }
29
- },
30
- "sizeT5": {
31
- "enabled": {
32
- "root": {
33
- "gap": "var(--seed-dimension-x0_5)"
34
- },
35
- "suffixIcon": {
36
- "size": "var(--seed-dimension-x3_5)"
37
- },
38
- "label": {
39
- "fontSize": "var(--seed-font-size-t5)",
40
- "lineHeight": "var(--seed-line-height-t5)"
41
- }
42
- }
43
- },
44
- "sizeT6": {
45
- "enabled": {
46
- "root": {
47
- "gap": "var(--seed-dimension-x0_5)"
48
- },
49
- "suffixIcon": {
50
- "size": "var(--seed-dimension-x4)"
51
- },
52
- "label": {
53
- "fontSize": "var(--seed-font-size-t6)",
54
- "lineHeight": "var(--seed-line-height-t6)"
55
- }
56
- }
57
- }
58
- }
@@ -1,58 +0,0 @@
1
- export const vars = {
2
- "weightRegular": {
3
- "enabled": {
4
- "label": {
5
- "fontWeight": "var(--seed-font-weight-regular)"
6
- }
7
- }
8
- },
9
- "weightBold": {
10
- "enabled": {
11
- "label": {
12
- "fontWeight": "var(--seed-font-weight-bold)"
13
- }
14
- }
15
- },
16
- "sizeT4": {
17
- "enabled": {
18
- "root": {
19
- "gap": "var(--seed-dimension-x0_5)"
20
- },
21
- "suffixIcon": {
22
- "size": "var(--seed-dimension-x3)"
23
- },
24
- "label": {
25
- "fontSize": "var(--seed-font-size-t4)",
26
- "lineHeight": "var(--seed-line-height-t4)"
27
- }
28
- }
29
- },
30
- "sizeT5": {
31
- "enabled": {
32
- "root": {
33
- "gap": "var(--seed-dimension-x0_5)"
34
- },
35
- "suffixIcon": {
36
- "size": "var(--seed-dimension-x3_5)"
37
- },
38
- "label": {
39
- "fontSize": "var(--seed-font-size-t5)",
40
- "lineHeight": "var(--seed-line-height-t5)"
41
- }
42
- }
43
- },
44
- "sizeT6": {
45
- "enabled": {
46
- "root": {
47
- "gap": "var(--seed-dimension-x0_5)"
48
- },
49
- "suffixIcon": {
50
- "size": "var(--seed-dimension-x4)"
51
- },
52
- "label": {
53
- "fontSize": "var(--seed-font-size-t6)",
54
- "lineHeight": "var(--seed-line-height-t6)"
55
- }
56
- }
57
- }
58
- }
@@ -1,29 +0,0 @@
1
- export declare const vars: {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
6
- "paddingY": "var(--seed-dimension-x2)",
7
- "gap": "var(--seed-dimension-x2_5)",
8
- "fontSize": "var(--seed-font-size-t4)",
9
- "lineHeight": "var(--seed-line-height-t4)"
10
- }
11
- }
12
- },
13
- "variantMediumWeak": {
14
- "enabled": {
15
- "root": {
16
- "fontWeight": "var(--seed-font-weight-medium)",
17
- "color": "var(--seed-color-fg-neutral-subtle)"
18
- }
19
- }
20
- },
21
- "variantBoldSolid": {
22
- "enabled": {
23
- "root": {
24
- "fontWeight": "var(--seed-font-weight-bold)",
25
- "color": "var(--seed-color-fg-neutral)"
26
- }
27
- }
28
- }
29
- }
@@ -1,29 +0,0 @@
1
- export const vars = {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
6
- "paddingY": "var(--seed-dimension-x2)",
7
- "gap": "var(--seed-dimension-x2_5)",
8
- "fontSize": "var(--seed-font-size-t4)",
9
- "lineHeight": "var(--seed-line-height-t4)"
10
- }
11
- }
12
- },
13
- "variantMediumWeak": {
14
- "enabled": {
15
- "root": {
16
- "fontWeight": "var(--seed-font-weight-medium)",
17
- "color": "var(--seed-color-fg-neutral-subtle)"
18
- }
19
- }
20
- },
21
- "variantBoldSolid": {
22
- "enabled": {
23
- "root": {
24
- "fontWeight": "var(--seed-font-weight-bold)",
25
- "color": "var(--seed-color-fg-neutral)"
26
- }
27
- }
28
- }
29
- }
@@ -1,85 +0,0 @@
1
- export declare const vars: {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "paddingY": "var(--seed-dimension-x3)",
6
- "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
7
- "color": "var(--seed-color-bg-transparent)",
8
- "colorDuration": "var(--seed-duration-color-transition)",
9
- "colorTimingFunction": "var(--seed-timing-function-easing)",
10
- "marginDuration": "var(--seed-duration-d3)",
11
- "marginTimingFunction": "var(--seed-timing-function-easing)",
12
- "borderRadiusDuration": "var(--seed-duration-d3)",
13
- "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
14
- },
15
- "body": {
16
- "gap": "var(--seed-dimension-x0_5)",
17
- "paddingRight": "var(--seed-dimension-x2_5)"
18
- },
19
- "title": {
20
- "color": "var(--seed-color-fg-neutral)",
21
- "fontSize": "var(--seed-font-size-t5)",
22
- "lineHeight": "var(--seed-line-height-t5)",
23
- "fontWeight": "var(--seed-font-weight-regular)"
24
- },
25
- "detail": {
26
- "color": "var(--seed-color-fg-neutral-subtle)",
27
- "fontSize": "var(--seed-font-size-t3)",
28
- "lineHeight": "var(--seed-line-height-t3)",
29
- "fontWeight": "var(--seed-font-weight-regular)"
30
- },
31
- "prefix": {
32
- "paddingRight": "var(--seed-dimension-x3)"
33
- },
34
- "prefixIcon": {
35
- "size": "22px",
36
- "color": "var(--seed-color-fg-neutral)"
37
- },
38
- "suffix": {
39
- "gap": "var(--seed-dimension-x1)"
40
- },
41
- "suffixText": {
42
- "color": "var(--seed-color-fg-neutral-subtle)",
43
- "fontSize": "var(--seed-font-size-t5)",
44
- "lineHeight": "var(--seed-line-height-t5)",
45
- "fontWeight": "var(--seed-font-weight-regular)"
46
- },
47
- "suffixIcon": {
48
- "size": "18px",
49
- "color": "var(--seed-color-fg-neutral-subtle)"
50
- }
51
- },
52
- "pressed": {
53
- "root": {
54
- "color": "var(--seed-color-bg-transparent-pressed)",
55
- /** pressed 시 배경 레이어는 좌우 폭이 marginX만큼 줄어들고, 배경 레이어 위 요소들이 위치하는 레이아웃 레이어는 scale로 인해 전체적으로 줄어드는 형태로 두 레이어가 별개로 작동합니다. 이 값은 OS 동작 줄이기 설정의 영향을 받지 않습니다. */
56
- "marginX": "var(--seed-dimension-x1_5)",
57
- "cornerRadius": "var(--seed-dimension-x2_5)"
58
- }
59
- },
60
- "highlighted": {
61
- "root": {
62
- "color": "var(--seed-color-bg-brand-weak)"
63
- }
64
- },
65
- "highlightedPressed": {
66
- "root": {
67
- "color": "var(--seed-color-bg-brand-weak-pressed)"
68
- }
69
- },
70
- "disabled": {
71
- "title": {
72
- "color": "var(--seed-color-fg-disabled)"
73
- },
74
- "detail": {
75
- "color": "var(--seed-color-fg-disabled)"
76
- },
77
- "prefixIcon": {
78
- "color": "var(--seed-color-fg-disabled)"
79
- },
80
- "suffixIcon": {
81
- "color": "var(--seed-color-fg-disabled)"
82
- }
83
- }
84
- }
85
- }
@@ -1,84 +0,0 @@
1
- export const vars = {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "paddingY": "var(--seed-dimension-x3)",
6
- "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
7
- "color": "var(--seed-color-bg-transparent)",
8
- "colorDuration": "var(--seed-duration-color-transition)",
9
- "colorTimingFunction": "var(--seed-timing-function-easing)",
10
- "marginDuration": "var(--seed-duration-d3)",
11
- "marginTimingFunction": "var(--seed-timing-function-easing)",
12
- "borderRadiusDuration": "var(--seed-duration-d3)",
13
- "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
14
- },
15
- "body": {
16
- "gap": "var(--seed-dimension-x0_5)",
17
- "paddingRight": "var(--seed-dimension-x2_5)"
18
- },
19
- "title": {
20
- "color": "var(--seed-color-fg-neutral)",
21
- "fontSize": "var(--seed-font-size-t5)",
22
- "lineHeight": "var(--seed-line-height-t5)",
23
- "fontWeight": "var(--seed-font-weight-regular)"
24
- },
25
- "detail": {
26
- "color": "var(--seed-color-fg-neutral-subtle)",
27
- "fontSize": "var(--seed-font-size-t3)",
28
- "lineHeight": "var(--seed-line-height-t3)",
29
- "fontWeight": "var(--seed-font-weight-regular)"
30
- },
31
- "prefix": {
32
- "paddingRight": "var(--seed-dimension-x3)"
33
- },
34
- "prefixIcon": {
35
- "size": "22px",
36
- "color": "var(--seed-color-fg-neutral)"
37
- },
38
- "suffix": {
39
- "gap": "var(--seed-dimension-x1)"
40
- },
41
- "suffixText": {
42
- "color": "var(--seed-color-fg-neutral-subtle)",
43
- "fontSize": "var(--seed-font-size-t5)",
44
- "lineHeight": "var(--seed-line-height-t5)",
45
- "fontWeight": "var(--seed-font-weight-regular)"
46
- },
47
- "suffixIcon": {
48
- "size": "18px",
49
- "color": "var(--seed-color-fg-neutral-subtle)"
50
- }
51
- },
52
- "pressed": {
53
- "root": {
54
- "color": "var(--seed-color-bg-transparent-pressed)",
55
- "marginX": "var(--seed-dimension-x1_5)",
56
- "cornerRadius": "var(--seed-dimension-x2_5)"
57
- }
58
- },
59
- "highlighted": {
60
- "root": {
61
- "color": "var(--seed-color-bg-brand-weak)"
62
- }
63
- },
64
- "highlightedPressed": {
65
- "root": {
66
- "color": "var(--seed-color-bg-brand-weak-pressed)"
67
- }
68
- },
69
- "disabled": {
70
- "title": {
71
- "color": "var(--seed-color-fg-disabled)"
72
- },
73
- "detail": {
74
- "color": "var(--seed-color-fg-disabled)"
75
- },
76
- "prefixIcon": {
77
- "color": "var(--seed-color-fg-disabled)"
78
- },
79
- "suffixIcon": {
80
- "color": "var(--seed-color-fg-disabled)"
81
- }
82
- }
83
- }
84
- }