@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,22 +0,0 @@
1
- export declare const vars: {
2
- /**
3
- * - `variant=separated`: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
4
- */
5
- "variantSeparatedSizeMedium": {
6
- "enabled": {
7
- "root": {
8
- "gap": "var(--seed-dimension-x3)"
9
- }
10
- }
11
- },
12
- /**
13
- * - `variant=separated`: 각 Accordion Item이 개별 카드 형태로 분리되어 표현됩니다. 항목 간 시각적 독립성이 필요하거나, 각 섹션의 중요도가 동등할 때 사용합니다.
14
- */
15
- "variantSeparatedSizeLarge": {
16
- "enabled": {
17
- "root": {
18
- "gap": "var(--seed-dimension-x4)"
19
- }
20
- }
21
- }
22
- }
@@ -1,16 +0,0 @@
1
- export const vars = {
2
- "variantSeparatedSizeMedium": {
3
- "enabled": {
4
- "root": {
5
- "gap": "var(--seed-dimension-x3)"
6
- }
7
- }
8
- },
9
- "variantSeparatedSizeLarge": {
10
- "enabled": {
11
- "root": {
12
- "gap": "var(--seed-dimension-x4)"
13
- }
14
- }
15
- }
16
- }
@@ -1,660 +0,0 @@
1
- export declare const vars: {
2
- "base": {
3
- "enabled": {
4
- "root": {
5
- "colorDuration": "var(--seed-duration-color-transition)",
6
- "colorTimingFunction": "var(--seed-timing-function-easing)"
7
- },
8
- "label": {
9
- "fontWeight": "var(--seed-font-weight-bold)"
10
- }
11
- }
12
- },
13
- /**
14
- * 브랜드의 핵심 가치를 전달하며, 사용자 간 연결이 일어나는 서비스의 주요 기능에 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
15
- */
16
- "variantBrandSolid": {
17
- "enabled": {
18
- "root": {
19
- "color": "var(--seed-color-bg-brand-solid)"
20
- },
21
- "label": {
22
- "color": "var(--seed-color-palette-static-white)"
23
- },
24
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
25
- "icon": {
26
- "color": "var(--seed-color-palette-static-white)"
27
- },
28
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
29
- "prefixIcon": {
30
- "color": "var(--seed-color-palette-static-white)"
31
- },
32
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
33
- "suffixIcon": {
34
- "color": "var(--seed-color-palette-static-white)"
35
- },
36
- "progressCircle": {
37
- "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
38
- "rangeColor": "var(--seed-color-palette-static-white)"
39
- }
40
- },
41
- "pressed": {
42
- "root": {
43
- "color": "var(--seed-color-bg-brand-solid-pressed)"
44
- }
45
- },
46
- "disabled": {
47
- "root": {
48
- "color": "var(--seed-color-bg-disabled)"
49
- },
50
- "label": {
51
- "color": "var(--seed-color-fg-disabled)"
52
- },
53
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
54
- "icon": {
55
- "color": "var(--seed-color-fg-disabled)"
56
- },
57
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
58
- "prefixIcon": {
59
- "color": "var(--seed-color-fg-disabled)"
60
- },
61
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
62
- "suffixIcon": {
63
- "color": "var(--seed-color-fg-disabled)"
64
- }
65
- },
66
- "loading": {
67
- "root": {
68
- "color": "var(--seed-color-bg-brand-solid-pressed)"
69
- }
70
- }
71
- },
72
- /**
73
- * 대부분의 화면에서 CTA로 사용합니다. 한 화면에 하나만 사용하는 것을 권장합니다.
74
- */
75
- "variantNeutralSolid": {
76
- "enabled": {
77
- "root": {
78
- "color": "var(--seed-color-bg-neutral-inverted)"
79
- },
80
- "label": {
81
- "color": "var(--seed-color-fg-neutral-inverted)"
82
- },
83
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
84
- "icon": {
85
- "color": "var(--seed-color-fg-neutral-inverted)"
86
- },
87
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
88
- "prefixIcon": {
89
- "color": "var(--seed-color-fg-neutral-inverted)"
90
- },
91
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
92
- "suffixIcon": {
93
- "color": "var(--seed-color-fg-neutral-inverted)"
94
- },
95
- "progressCircle": {
96
- "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
97
- "rangeColor": "var(--seed-color-palette-static-white)"
98
- }
99
- },
100
- "pressed": {
101
- "root": {
102
- "color": "var(--seed-color-bg-neutral-inverted-pressed)"
103
- }
104
- },
105
- "disabled": {
106
- "root": {
107
- "color": "var(--seed-color-bg-disabled)"
108
- },
109
- "label": {
110
- "color": "var(--seed-color-fg-disabled)"
111
- },
112
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
113
- "icon": {
114
- "color": "var(--seed-color-fg-disabled)"
115
- },
116
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
117
- "prefixIcon": {
118
- "color": "var(--seed-color-fg-disabled)"
119
- },
120
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
121
- "suffixIcon": {
122
- "color": "var(--seed-color-fg-disabled)"
123
- }
124
- },
125
- "loading": {
126
- "root": {
127
- "color": "var(--seed-color-bg-neutral-inverted-pressed)"
128
- }
129
- }
130
- },
131
- /**
132
- * CTA를 제외한 대부분의 액션에 사용됩니다.
133
- */
134
- "variantNeutralWeak": {
135
- "enabled": {
136
- "root": {
137
- "color": "var(--seed-color-bg-neutral-weak)"
138
- },
139
- "label": {
140
- "color": "var(--seed-color-fg-neutral)"
141
- },
142
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
143
- "icon": {
144
- "color": "var(--seed-color-fg-neutral)"
145
- },
146
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
147
- "prefixIcon": {
148
- "color": "var(--seed-color-fg-neutral)"
149
- },
150
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
151
- "suffixIcon": {
152
- "color": "var(--seed-color-fg-neutral)"
153
- },
154
- "progressCircle": {
155
- "trackColor": "var(--seed-color-palette-gray-500)",
156
- "rangeColor": "var(--seed-color-fg-neutral)"
157
- }
158
- },
159
- "pressed": {
160
- "root": {
161
- "color": "var(--seed-color-bg-neutral-weak-pressed)"
162
- }
163
- },
164
- "disabled": {
165
- "root": {
166
- "color": "var(--seed-color-bg-disabled)"
167
- },
168
- "label": {
169
- "color": "var(--seed-color-fg-disabled)"
170
- },
171
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
172
- "icon": {
173
- "color": "var(--seed-color-fg-disabled)"
174
- },
175
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
176
- "prefixIcon": {
177
- "color": "var(--seed-color-fg-disabled)"
178
- },
179
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
180
- "suffixIcon": {
181
- "color": "var(--seed-color-fg-disabled)"
182
- }
183
- },
184
- "loading": {
185
- "root": {
186
- "color": "var(--seed-color-bg-neutral-weak-pressed)"
187
- }
188
- }
189
- },
190
- /**
191
- * 삭제나 초기화처럼 되돌릴 수 없는 중요한 작업에 사용합니다.
192
- */
193
- "variantCriticalSolid": {
194
- "enabled": {
195
- "root": {
196
- "color": "var(--seed-color-bg-critical-solid)"
197
- },
198
- "label": {
199
- "color": "var(--seed-color-palette-static-white)"
200
- },
201
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
202
- "icon": {
203
- "color": "var(--seed-color-palette-static-white)"
204
- },
205
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
206
- "prefixIcon": {
207
- "color": "var(--seed-color-palette-static-white)"
208
- },
209
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
210
- "suffixIcon": {
211
- "color": "var(--seed-color-palette-static-white)"
212
- },
213
- "progressCircle": {
214
- "trackColor": "var(--seed-color-palette-static-white-alpha-300)",
215
- "rangeColor": "var(--seed-color-palette-static-white)"
216
- }
217
- },
218
- "pressed": {
219
- "root": {
220
- "color": "var(--seed-color-bg-critical-solid-pressed)"
221
- }
222
- },
223
- "disabled": {
224
- "root": {
225
- "color": "var(--seed-color-bg-disabled)"
226
- },
227
- "label": {
228
- "color": "var(--seed-color-fg-disabled)"
229
- },
230
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
231
- "icon": {
232
- "color": "var(--seed-color-fg-disabled)"
233
- },
234
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
235
- "prefixIcon": {
236
- "color": "var(--seed-color-fg-disabled)"
237
- },
238
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
239
- "suffixIcon": {
240
- "color": "var(--seed-color-fg-disabled)"
241
- }
242
- },
243
- "loading": {
244
- "root": {
245
- "color": "var(--seed-color-bg-critical-solid-pressed)"
246
- }
247
- }
248
- },
249
- /**
250
- * variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=brandOutline과 조합하여 사용하는 것을 권장합니다.
251
- */
252
- "variantNeutralOutline": {
253
- "enabled": {
254
- "root": {
255
- "color": "var(--seed-color-bg-transparent)",
256
- "strokeColor": "var(--seed-color-stroke-neutral-muted)",
257
- "strokeWidth": "1px"
258
- },
259
- "label": {
260
- "color": "var(--seed-color-fg-neutral)"
261
- },
262
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
263
- "icon": {
264
- "color": "var(--seed-color-fg-neutral)"
265
- },
266
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
267
- "prefixIcon": {
268
- "color": "var(--seed-color-fg-neutral)"
269
- },
270
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
271
- "suffixIcon": {
272
- "color": "var(--seed-color-fg-neutral)"
273
- },
274
- "progressCircle": {
275
- "trackColor": "var(--seed-color-palette-gray-500)",
276
- "rangeColor": "var(--seed-color-fg-neutral)"
277
- }
278
- },
279
- "pressed": {
280
- "root": {
281
- "color": "var(--seed-color-bg-transparent-pressed)"
282
- }
283
- },
284
- "disabled": {
285
- "root": {
286
- "color": "var(--seed-color-bg-transparent)",
287
- "strokeColor": "var(--seed-color-stroke-neutral-muted)"
288
- },
289
- "label": {
290
- "color": "var(--seed-color-fg-disabled)"
291
- },
292
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
293
- "icon": {
294
- "color": "var(--seed-color-fg-disabled)"
295
- },
296
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
297
- "prefixIcon": {
298
- "color": "var(--seed-color-fg-disabled)"
299
- },
300
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
301
- "suffixIcon": {
302
- "color": "var(--seed-color-fg-disabled)"
303
- }
304
- },
305
- "loading": {
306
- "root": {
307
- "color": "var(--seed-color-bg-transparent)"
308
- }
309
- }
310
- },
311
- /**
312
- * variant=brandSolid, neutralSolid, criticalSolid와 함께 사용할 수 없으며, variant=neutralOutline과 조합하여 사용하는 것을 권장합니다.
313
- */
314
- "variantBrandOutline": {
315
- "enabled": {
316
- "root": {
317
- "color": "var(--seed-color-bg-transparent)",
318
- "strokeColor": "var(--seed-color-stroke-neutral-muted)",
319
- "strokeWidth": "1px"
320
- },
321
- "label": {
322
- "color": "var(--seed-color-fg-brand)"
323
- },
324
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
325
- "icon": {
326
- "color": "var(--seed-color-fg-brand)"
327
- },
328
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
329
- "prefixIcon": {
330
- "color": "var(--seed-color-fg-brand)"
331
- },
332
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
333
- "suffixIcon": {
334
- "color": "var(--seed-color-fg-brand)"
335
- },
336
- "progressCircle": {
337
- "trackColor": "var(--seed-color-palette-carrot-200)",
338
- "rangeColor": "var(--seed-color-bg-brand-solid)"
339
- }
340
- },
341
- "pressed": {
342
- "root": {
343
- "color": "var(--seed-color-bg-transparent-pressed)"
344
- }
345
- },
346
- "disabled": {
347
- "root": {
348
- "color": "var(--seed-color-bg-transparent)",
349
- "strokeColor": "var(--seed-color-stroke-neutral-muted)"
350
- },
351
- "label": {
352
- "color": "var(--seed-color-fg-disabled)"
353
- },
354
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
355
- "icon": {
356
- "color": "var(--seed-color-fg-disabled)"
357
- },
358
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
359
- "prefixIcon": {
360
- "color": "var(--seed-color-fg-disabled)"
361
- },
362
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
363
- "suffixIcon": {
364
- "color": "var(--seed-color-fg-disabled)"
365
- }
366
- },
367
- "loading": {
368
- "root": {
369
- "color": "var(--seed-color-bg-transparent)"
370
- }
371
- }
372
- },
373
- /**
374
- * 배경 없이 텍스트와 아이콘만 표시됩니다. 모두 동일한 색상을 사용하는 조건에서 icon, prefix icon, suffix icon, label에 정의된 color를 변경할 수 있으며, label의 fontWeight를 `$font-weight.regular` 또는 `$font-weight.medium`으로 변경하여 주목도를 조절할 수 있습니다.
375
- */
376
- "variantGhost": {
377
- "enabled": {
378
- "root": {
379
- "color": "#ffffff00"
380
- },
381
- "label": {
382
- "color": "var(--seed-color-fg-neutral)"
383
- },
384
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
385
- "icon": {
386
- "color": "var(--seed-color-fg-neutral)"
387
- },
388
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
389
- "prefixIcon": {
390
- "color": "var(--seed-color-fg-neutral)"
391
- },
392
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
393
- "suffixIcon": {
394
- "color": "var(--seed-color-fg-neutral)"
395
- },
396
- "progressCircle": {
397
- "trackColor": "var(--seed-color-palette-gray-500)",
398
- "rangeColor": "var(--seed-color-fg-neutral)"
399
- }
400
- },
401
- "pressed": {
402
- "root": {
403
- "color": "var(--seed-color-bg-transparent-pressed)"
404
- }
405
- },
406
- "disabled": {
407
- "root": {
408
- "color": "#ffffff00"
409
- },
410
- "label": {
411
- "color": "var(--seed-color-fg-disabled)"
412
- },
413
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
414
- "icon": {
415
- "color": "var(--seed-color-fg-disabled)"
416
- },
417
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
418
- "prefixIcon": {
419
- "color": "var(--seed-color-fg-disabled)"
420
- },
421
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
422
- "suffixIcon": {
423
- "color": "var(--seed-color-fg-disabled)"
424
- }
425
- },
426
- "loading": {
427
- "root": {
428
- "color": "var(--seed-color-bg-transparent-pressed)"
429
- }
430
- }
431
- },
432
- /**
433
- * 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
434
- */
435
- "sizeXsmall": {
436
- "enabled": {
437
- "root": {
438
- "minHeight": "var(--seed-dimension-x8)",
439
- "cornerRadius": "var(--seed-radius-full)"
440
- },
441
- "progressCircle": {
442
- "size": "14px",
443
- "thickness": "2px"
444
- }
445
- }
446
- },
447
- /**
448
- * - `size=xsmall`: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
449
- * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
450
- */
451
- "sizeXsmallLayoutWithText": {
452
- "enabled": {
453
- "root": {
454
- "gap": "var(--seed-dimension-x1)",
455
- "paddingX": "var(--seed-dimension-x3_5)",
456
- "paddingY": "var(--seed-dimension-x1_5)"
457
- },
458
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
459
- "prefixIcon": {
460
- "size": "var(--seed-dimension-x3_5)"
461
- },
462
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
463
- "suffixIcon": {
464
- "size": "var(--seed-dimension-x3_5)"
465
- },
466
- "label": {
467
- "fontSize": "var(--seed-font-size-t3)",
468
- "lineHeight": "var(--seed-line-height-t3)"
469
- }
470
- }
471
- },
472
- /**
473
- * - `size=xsmall`: 작은 공간에서 효율적으로 사용할 수 있는 Pill 형태로 제공됩니다.
474
- * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
475
- */
476
- "sizeXsmallLayoutIconOnly": {
477
- "enabled": {
478
- "root": {
479
- "minWidth": "var(--seed-dimension-x8)",
480
- "paddingX": "var(--seed-dimension-x1_5)",
481
- "paddingY": "var(--seed-dimension-x1_5)"
482
- },
483
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
484
- "icon": {
485
- "size": "var(--seed-dimension-x3_5)"
486
- }
487
- }
488
- },
489
- /**
490
- * 화면 중앙에서 범용적으로 사용됩니다.
491
- */
492
- "sizeSmall": {
493
- "enabled": {
494
- "root": {
495
- "minHeight": "var(--seed-dimension-x9)",
496
- "cornerRadius": "var(--seed-radius-r2)"
497
- },
498
- "progressCircle": {
499
- "size": "14px",
500
- "thickness": "2px"
501
- }
502
- }
503
- },
504
- /**
505
- * - `size=small`: 화면 중앙에서 범용적으로 사용됩니다.
506
- * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
507
- */
508
- "sizeSmallLayoutWithText": {
509
- "enabled": {
510
- "root": {
511
- "gap": "var(--seed-dimension-x1)",
512
- "paddingX": "var(--seed-dimension-x3_5)",
513
- "paddingY": "var(--seed-dimension-x2)"
514
- },
515
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
516
- "prefixIcon": {
517
- "size": "var(--seed-dimension-x3_5)"
518
- },
519
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
520
- "suffixIcon": {
521
- "size": "var(--seed-dimension-x3_5)"
522
- },
523
- "label": {
524
- "fontSize": "var(--seed-font-size-t4)",
525
- "lineHeight": "var(--seed-line-height-t4)"
526
- }
527
- }
528
- },
529
- /**
530
- * - `size=small`: 화면 중앙에서 범용적으로 사용됩니다.
531
- * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
532
- */
533
- "sizeSmallLayoutIconOnly": {
534
- "enabled": {
535
- "root": {
536
- "minWidth": "var(--seed-dimension-x9)",
537
- "paddingX": "var(--seed-dimension-x2)",
538
- "paddingY": "var(--seed-dimension-x2)"
539
- },
540
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
541
- "icon": {
542
- "size": "var(--seed-dimension-x4)"
543
- }
544
- }
545
- },
546
- /**
547
- * 화면 중앙에서 범용적으로 사용됩니다.
548
- */
549
- "sizeMedium": {
550
- "enabled": {
551
- "root": {
552
- "minHeight": "var(--seed-dimension-x10)",
553
- "cornerRadius": "var(--seed-radius-r2)"
554
- },
555
- "progressCircle": {
556
- "size": "16px",
557
- "thickness": "2px"
558
- }
559
- }
560
- },
561
- /**
562
- * - `size=medium`: 화면 중앙에서 범용적으로 사용됩니다.
563
- * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
564
- */
565
- "sizeMediumLayoutWithText": {
566
- "enabled": {
567
- "root": {
568
- "gap": "var(--seed-dimension-x1_5)",
569
- "paddingX": "var(--seed-dimension-x4)",
570
- "paddingY": "var(--seed-dimension-x2_5)"
571
- },
572
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
573
- "prefixIcon": {
574
- "size": "var(--seed-dimension-x4)"
575
- },
576
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
577
- "suffixIcon": {
578
- "size": "var(--seed-dimension-x4)"
579
- },
580
- "label": {
581
- "fontSize": "var(--seed-font-size-t4)",
582
- "lineHeight": "var(--seed-line-height-t4)"
583
- }
584
- }
585
- },
586
- /**
587
- * - `size=medium`: 화면 중앙에서 범용적으로 사용됩니다.
588
- * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
589
- */
590
- "sizeMediumLayoutIconOnly": {
591
- "enabled": {
592
- "root": {
593
- "minWidth": "var(--seed-dimension-x10)",
594
- "paddingX": "var(--seed-dimension-x2_5)",
595
- "paddingY": "var(--seed-dimension-x2_5)"
596
- },
597
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
598
- "icon": {
599
- "size": "18px"
600
- }
601
- }
602
- },
603
- /**
604
- * 주로 CTA 역할로 사용됩니다.
605
- */
606
- "sizeLarge": {
607
- "enabled": {
608
- "root": {
609
- "minHeight": "var(--seed-dimension-x13)",
610
- "cornerRadius": "var(--seed-radius-r3)"
611
- },
612
- "progressCircle": {
613
- "size": "18px",
614
- "thickness": "2px"
615
- }
616
- }
617
- },
618
- /**
619
- * - `size=large`: 주로 CTA 역할로 사용됩니다.
620
- * - `layout=withText`: 텍스트와 함께 아이콘을 표시할 수 있습니다.
621
- */
622
- "sizeLargeLayoutWithText": {
623
- "enabled": {
624
- "root": {
625
- "gap": "var(--seed-dimension-x2)",
626
- "paddingX": "var(--seed-dimension-x5)",
627
- "paddingY": "var(--seed-dimension-x3_5)"
628
- },
629
- /** 주로 액션의 의미를 보조합니다. suffixIcon과 함께 사용할 수 없습니다. */
630
- "prefixIcon": {
631
- "size": "22px"
632
- },
633
- /** Chevron처럼 동작을 보조하는 역할입니다. prefixIcon과 함께 사용할 수 없습니다. */
634
- "suffixIcon": {
635
- "size": "22px"
636
- },
637
- "label": {
638
- "fontSize": "var(--seed-font-size-t6)",
639
- "lineHeight": "var(--seed-line-height-t6)"
640
- }
641
- }
642
- },
643
- /**
644
- * - `size=large`: 주로 CTA 역할로 사용됩니다.
645
- * - `layout=iconOnly`: 아이콘만으로 의미를 전달하기 때문에 접근성이 떨어집니다. 꼭 필요한 경우에만 접근성 레이블과 함께 사용하는 것을 권장합니다.
646
- */
647
- "sizeLargeLayoutIconOnly": {
648
- "enabled": {
649
- "root": {
650
- "minWidth": "var(--seed-dimension-x13)",
651
- "paddingX": "var(--seed-dimension-x3_5)",
652
- "paddingY": "var(--seed-dimension-x3_5)"
653
- },
654
- /** layout=iconOnly에서 사용되는 아이콘 슬롯입니다. */
655
- "icon": {
656
- "size": "22px"
657
- }
658
- }
659
- }
660
- }