@seed-design/lynx-css 0.0.0-alpha-20260622094810

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 (301) hide show
  1. package/all.css +2137 -0
  2. package/all.min.css +1 -0
  3. package/base.css +643 -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/app-bar-main.css +67 -0
  10. package/recipes/app-bar-main.d.ts +36 -0
  11. package/recipes/app-bar-main.mjs +63 -0
  12. package/recipes/app-bar.css +101 -0
  13. package/recipes/app-bar.d.ts +32 -0
  14. package/recipes/app-bar.mjs +74 -0
  15. package/recipes/badge.css +157 -0
  16. package/recipes/badge.d.ts +32 -0
  17. package/recipes/badge.mjs +131 -0
  18. package/recipes/bottom-sheet-handle.css +19 -0
  19. package/recipes/bottom-sheet-handle.d.ts +21 -0
  20. package/recipes/bottom-sheet-handle.mjs +36 -0
  21. package/recipes/bottom-sheet.css +93 -0
  22. package/recipes/bottom-sheet.d.ts +28 -0
  23. package/recipes/bottom-sheet.mjs +76 -0
  24. package/recipes/checkbox-group.css +5 -0
  25. package/recipes/checkbox-group.d.ts +21 -0
  26. package/recipes/checkbox-group.mjs +36 -0
  27. package/recipes/checkbox.css +34 -0
  28. package/recipes/checkbox.d.ts +32 -0
  29. package/recipes/checkbox.mjs +53 -0
  30. package/recipes/checkmark.css +131 -0
  31. package/recipes/checkmark.d.ts +48 -0
  32. package/recipes/checkmark.mjs +220 -0
  33. package/recipes/progress-circle.css +80 -0
  34. package/recipes/progress-circle.d.ts +30 -0
  35. package/recipes/progress-circle.mjs +40 -0
  36. package/recipes/radio-group.css +5 -0
  37. package/recipes/radio-group.d.ts +21 -0
  38. package/recipes/radio-group.mjs +36 -0
  39. package/recipes/radio.css +34 -0
  40. package/recipes/radio.d.ts +32 -0
  41. package/recipes/radio.mjs +53 -0
  42. package/recipes/radiomark.css +94 -0
  43. package/recipes/radiomark.d.ts +40 -0
  44. package/recipes/radiomark.mjs +121 -0
  45. package/recipes/shared.mjs +48 -0
  46. package/recipes/switch.css +40 -0
  47. package/recipes/switch.d.ts +28 -0
  48. package/recipes/switch.mjs +49 -0
  49. package/recipes/switchmark.css +75 -0
  50. package/recipes/switchmark.d.ts +36 -0
  51. package/recipes/switchmark.mjs +90 -0
  52. package/recipes/tag-group-item.css +34 -0
  53. package/recipes/tag-group-item.d.ts +32 -0
  54. package/recipes/tag-group-item.mjs +55 -0
  55. package/recipes/tag-group.css +32 -0
  56. package/recipes/tag-group.d.ts +24 -0
  57. package/recipes/tag-group.mjs +48 -0
  58. package/vars/color/banner.d.ts +10 -0
  59. package/vars/color/banner.mjs +10 -0
  60. package/vars/color/bg.d.ts +76 -0
  61. package/vars/color/bg.mjs +42 -0
  62. package/vars/color/fg.d.ts +30 -0
  63. package/vars/color/fg.mjs +16 -0
  64. package/vars/color/index.d.ts +6 -0
  65. package/vars/color/index.mjs +6 -0
  66. package/vars/color/manner-temp/index.d.ts +10 -0
  67. package/vars/color/manner-temp/index.mjs +10 -0
  68. package/vars/color/manner-temp/l1.d.ts +2 -0
  69. package/vars/color/manner-temp/l1.mjs +2 -0
  70. package/vars/color/manner-temp/l10.d.ts +2 -0
  71. package/vars/color/manner-temp/l10.mjs +2 -0
  72. package/vars/color/manner-temp/l2.d.ts +2 -0
  73. package/vars/color/manner-temp/l2.mjs +2 -0
  74. package/vars/color/manner-temp/l3.d.ts +2 -0
  75. package/vars/color/manner-temp/l3.mjs +2 -0
  76. package/vars/color/manner-temp/l4.d.ts +2 -0
  77. package/vars/color/manner-temp/l4.mjs +2 -0
  78. package/vars/color/manner-temp/l5.d.ts +2 -0
  79. package/vars/color/manner-temp/l5.mjs +2 -0
  80. package/vars/color/manner-temp/l6.d.ts +2 -0
  81. package/vars/color/manner-temp/l6.mjs +2 -0
  82. package/vars/color/manner-temp/l7.d.ts +2 -0
  83. package/vars/color/manner-temp/l7.mjs +2 -0
  84. package/vars/color/manner-temp/l8.d.ts +2 -0
  85. package/vars/color/manner-temp/l8.mjs +2 -0
  86. package/vars/color/manner-temp/l9.d.ts +2 -0
  87. package/vars/color/manner-temp/l9.mjs +2 -0
  88. package/vars/color/palette.d.ts +94 -0
  89. package/vars/color/palette.mjs +94 -0
  90. package/vars/color/stroke.d.ts +31 -0
  91. package/vars/color/stroke.mjs +16 -0
  92. package/vars/component/accordion-item.d.ts +132 -0
  93. package/vars/component/accordion-item.mjs +126 -0
  94. package/vars/component/accordion.d.ts +22 -0
  95. package/vars/component/accordion.mjs +16 -0
  96. package/vars/component/action-button.d.ts +660 -0
  97. package/vars/component/action-button.mjs +541 -0
  98. package/vars/component/action-chip.d.ts +132 -0
  99. package/vars/component/action-chip.mjs +132 -0
  100. package/vars/component/action-sheet-close-button.d.ts +23 -0
  101. package/vars/component/action-sheet-close-button.mjs +23 -0
  102. package/vars/component/action-sheet-item.d.ts +36 -0
  103. package/vars/component/action-sheet-item.mjs +36 -0
  104. package/vars/component/action-sheet.d.ts +46 -0
  105. package/vars/component/action-sheet.mjs +46 -0
  106. package/vars/component/attachment-input-dropzone.d.ts +32 -0
  107. package/vars/component/attachment-input-dropzone.mjs +30 -0
  108. package/vars/component/attachment-input-item-action-button.d.ts +37 -0
  109. package/vars/component/attachment-input-item-action-button.mjs +37 -0
  110. package/vars/component/attachment-input-item-remove-button.d.ts +28 -0
  111. package/vars/component/attachment-input-item-remove-button.mjs +28 -0
  112. package/vars/component/attachment-input-item.d.ts +103 -0
  113. package/vars/component/attachment-input-item.mjs +102 -0
  114. package/vars/component/attachment-input-trigger.d.ts +46 -0
  115. package/vars/component/attachment-input-trigger.mjs +46 -0
  116. package/vars/component/attachment-input.d.ts +14 -0
  117. package/vars/component/attachment-input.mjs +12 -0
  118. package/vars/component/avatar-stack.d.ts +110 -0
  119. package/vars/component/avatar-stack.mjs +110 -0
  120. package/vars/component/avatar.d.ts +204 -0
  121. package/vars/component/avatar.mjs +162 -0
  122. package/vars/component/badge.d.ts +316 -0
  123. package/vars/component/badge.mjs +236 -0
  124. package/vars/component/bottom-sheet-close-button.d.ts +21 -0
  125. package/vars/component/bottom-sheet-close-button.mjs +21 -0
  126. package/vars/component/bottom-sheet-handle.d.ts +24 -0
  127. package/vars/component/bottom-sheet-handle.mjs +24 -0
  128. package/vars/component/bottom-sheet.d.ts +86 -0
  129. package/vars/component/bottom-sheet.mjs +86 -0
  130. package/vars/component/callout.d.ts +229 -0
  131. package/vars/component/callout.mjs +197 -0
  132. package/vars/component/checkbox-group.d.ts +9 -0
  133. package/vars/component/checkbox-group.mjs +9 -0
  134. package/vars/component/checkbox.d.ts +53 -0
  135. package/vars/component/checkbox.mjs +53 -0
  136. package/vars/component/checkmark.d.ts +195 -0
  137. package/vars/component/checkmark.mjs +165 -0
  138. package/vars/component/chip-tab.d.ts +121 -0
  139. package/vars/component/chip-tab.mjs +121 -0
  140. package/vars/component/chip-tablist.d.ts +24 -0
  141. package/vars/component/chip-tablist.mjs +24 -0
  142. package/vars/component/chip.d.ts +321 -0
  143. package/vars/component/chip.mjs +303 -0
  144. package/vars/component/content-placeholder.d.ts +28 -0
  145. package/vars/component/content-placeholder.mjs +27 -0
  146. package/vars/component/contextual-floating-button.d.ts +144 -0
  147. package/vars/component/contextual-floating-button.mjs +132 -0
  148. package/vars/component/control-chip.d.ts +158 -0
  149. package/vars/component/control-chip.mjs +158 -0
  150. package/vars/component/dialog.d.ts +52 -0
  151. package/vars/component/dialog.mjs +52 -0
  152. package/vars/component/divider.d.ts +9 -0
  153. package/vars/component/divider.mjs +9 -0
  154. package/vars/component/extended-action-sheet-close-button.d.ts +24 -0
  155. package/vars/component/extended-action-sheet-close-button.mjs +24 -0
  156. package/vars/component/extended-action-sheet-item.d.ts +46 -0
  157. package/vars/component/extended-action-sheet-item.mjs +46 -0
  158. package/vars/component/extended-action-sheet.d.ts +55 -0
  159. package/vars/component/extended-action-sheet.mjs +55 -0
  160. package/vars/component/extended-fab.d.ts +88 -0
  161. package/vars/component/extended-fab.mjs +82 -0
  162. package/vars/component/fab.d.ts +21 -0
  163. package/vars/component/fab.mjs +21 -0
  164. package/vars/component/field-label.d.ts +25 -0
  165. package/vars/component/field-label.mjs +25 -0
  166. package/vars/component/field.d.ts +78 -0
  167. package/vars/component/field.mjs +72 -0
  168. package/vars/component/floating-action-button.d.ts +60 -0
  169. package/vars/component/floating-action-button.mjs +54 -0
  170. package/vars/component/help-bubble.d.ts +52 -0
  171. package/vars/component/help-bubble.mjs +50 -0
  172. package/vars/component/identity-placeholder.d.ts +12 -0
  173. package/vars/component/identity-placeholder.mjs +12 -0
  174. package/vars/component/image-frame-floater.d.ts +10 -0
  175. package/vars/component/image-frame-floater.mjs +9 -0
  176. package/vars/component/image-frame-indicator.d.ts +20 -0
  177. package/vars/component/image-frame-indicator.mjs +18 -0
  178. package/vars/component/image-frame-reaction-button.d.ts +35 -0
  179. package/vars/component/image-frame-reaction-button.mjs +26 -0
  180. package/vars/component/image-frame.d.ts +27 -0
  181. package/vars/component/image-frame.mjs +18 -0
  182. package/vars/component/index.d.ts +90 -0
  183. package/vars/component/index.mjs +90 -0
  184. package/vars/component/inline-banner.d.ts +191 -0
  185. package/vars/component/inline-banner.mjs +191 -0
  186. package/vars/component/input-button.d.ts +162 -0
  187. package/vars/component/input-button.mjs +155 -0
  188. package/vars/component/link-content.d.ts +58 -0
  189. package/vars/component/link-content.mjs +58 -0
  190. package/vars/component/list-header.d.ts +29 -0
  191. package/vars/component/list-header.mjs +29 -0
  192. package/vars/component/list-item.d.ts +89 -0
  193. package/vars/component/list-item.mjs +87 -0
  194. package/vars/component/manner-temp-badge.d.ts +117 -0
  195. package/vars/component/manner-temp-badge.mjs +117 -0
  196. package/vars/component/manner-temp.d.ts +88 -0
  197. package/vars/component/manner-temp.mjs +88 -0
  198. package/vars/component/menu-item.d.ts +129 -0
  199. package/vars/component/menu-item.mjs +117 -0
  200. package/vars/component/menu-sheet-close-button.d.ts +24 -0
  201. package/vars/component/menu-sheet-close-button.mjs +24 -0
  202. package/vars/component/menu-sheet-item.d.ts +73 -0
  203. package/vars/component/menu-sheet-item.mjs +61 -0
  204. package/vars/component/menu-sheet.d.ts +56 -0
  205. package/vars/component/menu-sheet.mjs +56 -0
  206. package/vars/component/menu.d.ts +68 -0
  207. package/vars/component/menu.mjs +60 -0
  208. package/vars/component/notification-badge.d.ts +48 -0
  209. package/vars/component/notification-badge.mjs +42 -0
  210. package/vars/component/page-banner.d.ts +382 -0
  211. package/vars/component/page-banner.mjs +336 -0
  212. package/vars/component/progress-circle.d.ts +88 -0
  213. package/vars/component/progress-circle.mjs +67 -0
  214. package/vars/component/radio-group.d.ts +9 -0
  215. package/vars/component/radio-group.mjs +9 -0
  216. package/vars/component/radio.d.ts +53 -0
  217. package/vars/component/radio.mjs +53 -0
  218. package/vars/component/radiomark.d.ts +117 -0
  219. package/vars/component/radiomark.mjs +117 -0
  220. package/vars/component/reaction-button.d.ts +136 -0
  221. package/vars/component/reaction-button.mjs +136 -0
  222. package/vars/component/scroll-fog.d.ts +11 -0
  223. package/vars/component/scroll-fog.mjs +11 -0
  224. package/vars/component/segmented-control-indicator.d.ts +24 -0
  225. package/vars/component/segmented-control-indicator.mjs +24 -0
  226. package/vars/component/segmented-control-item.d.ts +41 -0
  227. package/vars/component/segmented-control-item.mjs +41 -0
  228. package/vars/component/segmented-control.d.ts +11 -0
  229. package/vars/component/segmented-control.mjs +11 -0
  230. package/vars/component/select-box-checkmark.d.ts +40 -0
  231. package/vars/component/select-box-checkmark.mjs +40 -0
  232. package/vars/component/select-box-group.d.ts +10 -0
  233. package/vars/component/select-box-group.mjs +10 -0
  234. package/vars/component/select-box.d.ts +107 -0
  235. package/vars/component/select-box.mjs +102 -0
  236. package/vars/component/side-panel-close-button.d.ts +23 -0
  237. package/vars/component/side-panel-close-button.mjs +23 -0
  238. package/vars/component/side-panel.d.ts +94 -0
  239. package/vars/component/side-panel.mjs +83 -0
  240. package/vars/component/skeleton.d.ts +76 -0
  241. package/vars/component/skeleton.mjs +58 -0
  242. package/vars/component/slider-thumb.d.ts +25 -0
  243. package/vars/component/slider-thumb.mjs +25 -0
  244. package/vars/component/slider-tick.d.ts +23 -0
  245. package/vars/component/slider-tick.mjs +23 -0
  246. package/vars/component/slider.d.ts +78 -0
  247. package/vars/component/slider.mjs +75 -0
  248. package/vars/component/snackbar.d.ts +65 -0
  249. package/vars/component/snackbar.mjs +65 -0
  250. package/vars/component/switch.d.ts +53 -0
  251. package/vars/component/switch.mjs +53 -0
  252. package/vars/component/switchmark.d.ts +112 -0
  253. package/vars/component/switchmark.mjs +112 -0
  254. package/vars/component/tab.d.ts +47 -0
  255. package/vars/component/tab.mjs +47 -0
  256. package/vars/component/tablist.d.ts +51 -0
  257. package/vars/component/tablist.mjs +51 -0
  258. package/vars/component/tag-group-item.d.ts +122 -0
  259. package/vars/component/tag-group-item.mjs +122 -0
  260. package/vars/component/tag-group.d.ts +34 -0
  261. package/vars/component/tag-group.mjs +34 -0
  262. package/vars/component/text-button.d.ts +23 -0
  263. package/vars/component/text-button.mjs +23 -0
  264. package/vars/component/text-input.d.ts +292 -0
  265. package/vars/component/text-input.mjs +263 -0
  266. package/vars/component/toggle-button.d.ts +213 -0
  267. package/vars/component/toggle-button.mjs +207 -0
  268. package/vars/component/top-navigation-icon-button.d.ts +36 -0
  269. package/vars/component/top-navigation-icon-button.mjs +36 -0
  270. package/vars/component/top-navigation-text-button.d.ts +52 -0
  271. package/vars/component/top-navigation-text-button.mjs +51 -0
  272. package/vars/component/top-navigation.d.ts +102 -0
  273. package/vars/component/top-navigation.mjs +94 -0
  274. package/vars/component/typography.d.ts +956 -0
  275. package/vars/component/typography.mjs +785 -0
  276. package/vars/dimension/index.d.ts +22 -0
  277. package/vars/dimension/index.mjs +22 -0
  278. package/vars/dimension/spacing-x.d.ts +4 -0
  279. package/vars/dimension/spacing-x.mjs +2 -0
  280. package/vars/dimension/spacing-y.d.ts +8 -0
  281. package/vars/dimension/spacing-y.mjs +4 -0
  282. package/vars/duration.d.ts +8 -0
  283. package/vars/duration.mjs +8 -0
  284. package/vars/font-size.d.ts +46 -0
  285. package/vars/font-size.mjs +28 -0
  286. package/vars/font-weight.d.ts +3 -0
  287. package/vars/font-weight.mjs +3 -0
  288. package/vars/gradient.d.ts +11 -0
  289. package/vars/gradient.mjs +6 -0
  290. package/vars/index.d.ts +51 -0
  291. package/vars/index.mjs +1 -0
  292. package/vars/line-height.d.ts +46 -0
  293. package/vars/line-height.mjs +28 -0
  294. package/vars/radius.d.ts +11 -0
  295. package/vars/radius.mjs +11 -0
  296. package/vars/shadow.d.ts +4 -0
  297. package/vars/shadow.mjs +3 -0
  298. package/vars/timing-function.d.ts +7 -0
  299. package/vars/timing-function.mjs +7 -0
  300. package/vars/vars.d.ts +10 -0
  301. package/vars/vars.mjs +10 -0
package/vars/component/menu-item.d.ts ADDED
@@ -0,0 +1,129 @@
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
+ "marginDuration": "var(--seed-duration-d3)",
8
+ "marginTimingFunction": "var(--seed-timing-function-easing)",
9
+ "borderRadiusDuration": "var(--seed-duration-d3)",
10
+ "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
11
+ },
12
+ "body": {
13
+ "gap": "var(--seed-dimension-x0_5)"
14
+ },
15
+ "label": {
16
+ "fontWeight": "var(--seed-font-weight-regular)"
17
+ },
18
+ "description": {
19
+ "fontWeight": "var(--seed-font-weight-regular)",
20
+ "color": "var(--seed-color-fg-neutral-subtle)"
21
+ }
22
+ },
23
+ "pressed": {
24
+ "root": {
25
+ "color": "var(--seed-color-bg-transparent-pressed)",
26
+ "marginX": "var(--seed-dimension-x2)",
27
+ "cornerRadius": "var(--seed-radius-r3)"
28
+ }
29
+ },
30
+ "disabled": {
31
+ "prefixIcon": {
32
+ "color": "var(--seed-color-fg-disabled)"
33
+ },
34
+ "suffixIcon": {
35
+ "color": "var(--seed-color-fg-disabled)"
36
+ },
37
+ "label": {
38
+ "color": "var(--seed-color-fg-disabled)"
39
+ },
40
+ "description": {
41
+ "color": "var(--seed-color-fg-disabled)"
42
+ }
43
+ }
44
+ },
45
+ /**
46
+ * 뷰포트 너비와 관계없이 사용할 수 있습니다.
47
+ */
48
+ "sizeMedium": {
49
+ "enabled": {
50
+ "root": {
51
+ "paddingX": "var(--seed-dimension-x4)",
52
+ "paddingY": "var(--seed-dimension-x3)",
53
+ "gap": "var(--seed-dimension-x3)"
54
+ },
55
+ "prefixIcon": {
56
+ "size": "22px"
57
+ },
58
+ "suffixIcon": {
59
+ "size": "18px"
60
+ },
61
+ "label": {
62
+ "fontSize": "var(--seed-font-size-t5)",
63
+ "lineHeight": "var(--seed-line-height-t5)"
64
+ },
65
+ "description": {
66
+ "fontSize": "var(--seed-font-size-t3)",
67
+ "lineHeight": "var(--seed-line-height-t3)"
68
+ }
69
+ }
70
+ },
71
+ /**
72
+ * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
73
+ */
74
+ "sizeSmall": {
75
+ "enabled": {
76
+ "root": {
77
+ "paddingX": "var(--seed-dimension-x4)",
78
+ "paddingY": "var(--seed-dimension-x2_5)",
79
+ "gap": "var(--seed-dimension-x2)"
80
+ },
81
+ "prefixIcon": {
82
+ "size": "18px"
83
+ },
84
+ "suffixIcon": {
85
+ "size": "16px"
86
+ },
87
+ "label": {
88
+ "fontSize": "var(--seed-font-size-t4)",
89
+ "lineHeight": "var(--seed-line-height-t4)"
90
+ },
91
+ "description": {
92
+ "fontSize": "var(--seed-font-size-t2)",
93
+ "lineHeight": "var(--seed-line-height-t2)"
94
+ }
95
+ }
96
+ },
97
+ /**
98
+ * 일반적인 작업을 수행하는 기본 아이템입니다.
99
+ */
100
+ "toneNeutral": {
101
+ "enabled": {
102
+ "prefixIcon": {
103
+ "color": "var(--seed-color-fg-neutral)"
104
+ },
105
+ "suffixIcon": {
106
+ "color": "var(--seed-color-fg-neutral)"
107
+ },
108
+ "label": {
109
+ "color": "var(--seed-color-fg-neutral)"
110
+ }
111
+ }
112
+ },
113
+ /**
114
+ * 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
115
+ */
116
+ "toneCritical": {
117
+ "enabled": {
118
+ "prefixIcon": {
119
+ "color": "var(--seed-color-fg-critical)"
120
+ },
121
+ "suffixIcon": {
122
+ "color": "var(--seed-color-fg-critical)"
123
+ },
124
+ "label": {
125
+ "color": "var(--seed-color-fg-critical)"
126
+ }
127
+ }
128
+ }
129
+ }
package/vars/component/menu-item.mjs ADDED
@@ -0,0 +1,117 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "colorDuration": "var(--seed-duration-color-transition)",
6
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
7
+ "marginDuration": "var(--seed-duration-d3)",
8
+ "marginTimingFunction": "var(--seed-timing-function-easing)",
9
+ "borderRadiusDuration": "var(--seed-duration-d3)",
10
+ "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
11
+ },
12
+ "body": {
13
+ "gap": "var(--seed-dimension-x0_5)"
14
+ },
15
+ "label": {
16
+ "fontWeight": "var(--seed-font-weight-regular)"
17
+ },
18
+ "description": {
19
+ "fontWeight": "var(--seed-font-weight-regular)",
20
+ "color": "var(--seed-color-fg-neutral-subtle)"
21
+ }
22
+ },
23
+ "pressed": {
24
+ "root": {
25
+ "color": "var(--seed-color-bg-transparent-pressed)",
26
+ "marginX": "var(--seed-dimension-x2)",
27
+ "cornerRadius": "var(--seed-radius-r3)"
28
+ }
29
+ },
30
+ "disabled": {
31
+ "prefixIcon": {
32
+ "color": "var(--seed-color-fg-disabled)"
33
+ },
34
+ "suffixIcon": {
35
+ "color": "var(--seed-color-fg-disabled)"
36
+ },
37
+ "label": {
38
+ "color": "var(--seed-color-fg-disabled)"
39
+ },
40
+ "description": {
41
+ "color": "var(--seed-color-fg-disabled)"
42
+ }
43
+ }
44
+ },
45
+ "sizeMedium": {
46
+ "enabled": {
47
+ "root": {
48
+ "paddingX": "var(--seed-dimension-x4)",
49
+ "paddingY": "var(--seed-dimension-x3)",
50
+ "gap": "var(--seed-dimension-x3)"
51
+ },
52
+ "prefixIcon": {
53
+ "size": "22px"
54
+ },
55
+ "suffixIcon": {
56
+ "size": "18px"
57
+ },
58
+ "label": {
59
+ "fontSize": "var(--seed-font-size-t5)",
60
+ "lineHeight": "var(--seed-line-height-t5)"
61
+ },
62
+ "description": {
63
+ "fontSize": "var(--seed-font-size-t3)",
64
+ "lineHeight": "var(--seed-line-height-t3)"
65
+ }
66
+ }
67
+ },
68
+ "sizeSmall": {
69
+ "enabled": {
70
+ "root": {
71
+ "paddingX": "var(--seed-dimension-x4)",
72
+ "paddingY": "var(--seed-dimension-x2_5)",
73
+ "gap": "var(--seed-dimension-x2)"
74
+ },
75
+ "prefixIcon": {
76
+ "size": "18px"
77
+ },
78
+ "suffixIcon": {
79
+ "size": "16px"
80
+ },
81
+ "label": {
82
+ "fontSize": "var(--seed-font-size-t4)",
83
+ "lineHeight": "var(--seed-line-height-t4)"
84
+ },
85
+ "description": {
86
+ "fontSize": "var(--seed-font-size-t2)",
87
+ "lineHeight": "var(--seed-line-height-t2)"
88
+ }
89
+ }
90
+ },
91
+ "toneNeutral": {
92
+ "enabled": {
93
+ "prefixIcon": {
94
+ "color": "var(--seed-color-fg-neutral)"
95
+ },
96
+ "suffixIcon": {
97
+ "color": "var(--seed-color-fg-neutral)"
98
+ },
99
+ "label": {
100
+ "color": "var(--seed-color-fg-neutral)"
101
+ }
102
+ }
103
+ },
104
+ "toneCritical": {
105
+ "enabled": {
106
+ "prefixIcon": {
107
+ "color": "var(--seed-color-fg-critical)"
108
+ },
109
+ "suffixIcon": {
110
+ "color": "var(--seed-color-fg-critical)"
111
+ },
112
+ "label": {
113
+ "color": "var(--seed-color-fg-critical)"
114
+ }
115
+ }
116
+ }
117
+ }
package/vars/component/menu-sheet-close-button.d.ts ADDED
@@ -0,0 +1,24 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-neutral-weak)",
6
+ "minHeight": "52px",
7
+ "cornerRadius": "var(--seed-radius-r3)",
8
+ "paddingX": "var(--seed-dimension-x5)",
9
+ "paddingY": "var(--seed-dimension-x3_5)"
10
+ },
11
+ "label": {
12
+ "color": "var(--seed-color-fg-neutral)",
13
+ "fontSize": "var(--seed-font-size-t5)",
14
+ "lineHeight": "var(--seed-line-height-t5)",
15
+ "fontWeight": "var(--seed-font-weight-medium)"
16
+ }
17
+ },
18
+ "pressed": {
19
+ "root": {
20
+ "color": "var(--seed-color-bg-neutral-weak-pressed)"
21
+ }
22
+ }
23
+ }
24
+ }
package/vars/component/menu-sheet-close-button.mjs ADDED
@@ -0,0 +1,24 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-neutral-weak)",
6
+ "minHeight": "52px",
7
+ "cornerRadius": "var(--seed-radius-r3)",
8
+ "paddingX": "var(--seed-dimension-x5)",
9
+ "paddingY": "var(--seed-dimension-x3_5)"
10
+ },
11
+ "label": {
12
+ "color": "var(--seed-color-fg-neutral)",
13
+ "fontSize": "var(--seed-font-size-t5)",
14
+ "lineHeight": "var(--seed-line-height-t5)",
15
+ "fontWeight": "var(--seed-font-weight-medium)"
16
+ }
17
+ },
18
+ "pressed": {
19
+ "root": {
20
+ "color": "var(--seed-color-bg-neutral-weak-pressed)"
21
+ }
22
+ }
23
+ }
24
+ }
package/vars/component/menu-sheet-item.d.ts ADDED
@@ -0,0 +1,73 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-neutral-weak)",
6
+ "minHeight": "52px",
7
+ "paddingX": "var(--seed-dimension-x4)",
8
+ "paddingY": "var(--seed-dimension-x3_5)",
9
+ "gap": "var(--seed-dimension-x3_5)"
10
+ },
11
+ "prefixIcon": {
12
+ "size": "22px"
13
+ },
14
+ "content": {
15
+ "gap": "var(--seed-dimension-x0_5)"
16
+ },
17
+ "label": {
18
+ "fontSize": "var(--seed-font-size-t5)",
19
+ "lineHeight": "var(--seed-line-height-t5)",
20
+ "fontWeight": "var(--seed-font-weight-regular)"
21
+ },
22
+ "description": {
23
+ "fontSize": "var(--seed-font-size-t3)",
24
+ "lineHeight": "var(--seed-line-height-t3)",
25
+ "fontWeight": "var(--seed-font-weight-medium)",
26
+ "color": "var(--seed-color-fg-neutral-subtle)"
27
+ }
28
+ },
29
+ "pressed": {
30
+ "root": {
31
+ "color": "var(--seed-color-bg-neutral-weak-pressed)"
32
+ }
33
+ }
34
+ },
35
+ /**
36
+ * 일반적인 작업을 수행하는 기본 아이템입니다.
37
+ */
38
+ "toneNeutral": {
39
+ "enabled": {
40
+ "prefixIcon": {
41
+ "color": "var(--seed-color-fg-neutral)"
42
+ },
43
+ "label": {
44
+ "color": "var(--seed-color-fg-neutral)"
45
+ }
46
+ }
47
+ },
48
+ /**
49
+ * 데이터 삭제와 같이 되돌릴 수 없는 작업을 수행하는 아이템입니다.
50
+ */
51
+ "toneCritical": {
52
+ "enabled": {
53
+ "prefixIcon": {
54
+ "color": "var(--seed-color-fg-critical)"
55
+ },
56
+ "label": {
57
+ "color": "var(--seed-color-fg-critical)"
58
+ }
59
+ }
60
+ },
61
+ /**
62
+ * 라벨을 왼쪽 정렬합니다.
63
+ */
64
+ "labelAlignLeft": {
65
+ "enabled": {}
66
+ },
67
+ /**
68
+ * 라벨을 중앙 정렬합니다.
69
+ */
70
+ "labelAlignCenter": {
71
+ "enabled": {}
72
+ }
73
+ }
package/vars/component/menu-sheet-item.mjs ADDED
@@ -0,0 +1,61 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-neutral-weak)",
6
+ "minHeight": "52px",
7
+ "paddingX": "var(--seed-dimension-x4)",
8
+ "paddingY": "var(--seed-dimension-x3_5)",
9
+ "gap": "var(--seed-dimension-x3_5)"
10
+ },
11
+ "prefixIcon": {
12
+ "size": "22px"
13
+ },
14
+ "content": {
15
+ "gap": "var(--seed-dimension-x0_5)"
16
+ },
17
+ "label": {
18
+ "fontSize": "var(--seed-font-size-t5)",
19
+ "lineHeight": "var(--seed-line-height-t5)",
20
+ "fontWeight": "var(--seed-font-weight-regular)"
21
+ },
22
+ "description": {
23
+ "fontSize": "var(--seed-font-size-t3)",
24
+ "lineHeight": "var(--seed-line-height-t3)",
25
+ "fontWeight": "var(--seed-font-weight-medium)",
26
+ "color": "var(--seed-color-fg-neutral-subtle)"
27
+ }
28
+ },
29
+ "pressed": {
30
+ "root": {
31
+ "color": "var(--seed-color-bg-neutral-weak-pressed)"
32
+ }
33
+ }
34
+ },
35
+ "toneNeutral": {
36
+ "enabled": {
37
+ "prefixIcon": {
38
+ "color": "var(--seed-color-fg-neutral)"
39
+ },
40
+ "label": {
41
+ "color": "var(--seed-color-fg-neutral)"
42
+ }
43
+ }
44
+ },
45
+ "toneCritical": {
46
+ "enabled": {
47
+ "prefixIcon": {
48
+ "color": "var(--seed-color-fg-critical)"
49
+ },
50
+ "label": {
51
+ "color": "var(--seed-color-fg-critical)"
52
+ }
53
+ }
54
+ },
55
+ "labelAlignLeft": {
56
+ "enabled": {}
57
+ },
58
+ "labelAlignCenter": {
59
+ "enabled": {}
60
+ }
61
+ }
package/vars/component/menu-sheet.d.ts ADDED
@@ -0,0 +1,56 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "backdrop": {
5
+ "color": "var(--seed-color-bg-overlay)",
6
+ "enterDuration": "var(--seed-duration-d2)",
7
+ "enterTimingFunction": "var(--seed-timing-function-enter)",
8
+ "enterOpacity": "0",
9
+ "exitDuration": "var(--seed-duration-d2)",
10
+ "exitTimingFunction": "var(--seed-timing-function-exit)",
11
+ "exitOpacity": "0"
12
+ },
13
+ "content": {
14
+ "color": "var(--seed-color-bg-layer-floating)",
15
+ "maxWidth": "480px",
16
+ "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
17
+ "paddingTop": "var(--seed-dimension-x6)",
18
+ "paddingBottom": "var(--seed-dimension-x4)",
19
+ "topCornerRadius": "var(--seed-radius-r5)",
20
+ "enterDuration": "var(--seed-duration-d6)",
21
+ "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
22
+ "exitDuration": "var(--seed-duration-d4)",
23
+ "exitTimingFunction": "var(--seed-timing-function-exit)"
24
+ },
25
+ "header": {
26
+ "gap": "var(--seed-dimension-x1)",
27
+ "paddingBottom": "var(--seed-dimension-x4)"
28
+ },
29
+ "title": {
30
+ "fontSize": "var(--seed-font-size-t6)",
31
+ "lineHeight": "var(--seed-line-height-t6)",
32
+ "fontWeight": "var(--seed-font-weight-bold)",
33
+ "color": "var(--seed-color-fg-neutral)"
34
+ },
35
+ "description": {
36
+ "fontSize": "var(--seed-font-size-t4)",
37
+ "lineHeight": "var(--seed-line-height-t4)",
38
+ "fontWeight": "var(--seed-font-weight-regular)",
39
+ "color": "var(--seed-color-fg-neutral-muted)"
40
+ },
41
+ "list": {
42
+ "gap": "var(--seed-dimension-x2_5)"
43
+ },
44
+ "group": {
45
+ "cornerRadius": "var(--seed-radius-r4)"
46
+ },
47
+ "divider": {
48
+ "strokeBottomWidth": "1px",
49
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
50
+ },
51
+ "footer": {
52
+ "paddingTop": "var(--seed-dimension-x2_5)"
53
+ }
54
+ }
55
+ }
56
+ }
package/vars/component/menu-sheet.mjs ADDED
@@ -0,0 +1,56 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "backdrop": {
5
+ "color": "var(--seed-color-bg-overlay)",
6
+ "enterDuration": "var(--seed-duration-d2)",
7
+ "enterTimingFunction": "var(--seed-timing-function-enter)",
8
+ "enterOpacity": "0",
9
+ "exitDuration": "var(--seed-duration-d2)",
10
+ "exitTimingFunction": "var(--seed-timing-function-exit)",
11
+ "exitOpacity": "0"
12
+ },
13
+ "content": {
14
+ "color": "var(--seed-color-bg-layer-floating)",
15
+ "maxWidth": "480px",
16
+ "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
17
+ "paddingTop": "var(--seed-dimension-x6)",
18
+ "paddingBottom": "var(--seed-dimension-x4)",
19
+ "topCornerRadius": "var(--seed-radius-r5)",
20
+ "enterDuration": "var(--seed-duration-d6)",
21
+ "enterTimingFunction": "var(--seed-timing-function-enter-expressive)",
22
+ "exitDuration": "var(--seed-duration-d4)",
23
+ "exitTimingFunction": "var(--seed-timing-function-exit)"
24
+ },
25
+ "header": {
26
+ "gap": "var(--seed-dimension-x1)",
27
+ "paddingBottom": "var(--seed-dimension-x4)"
28
+ },
29
+ "title": {
30
+ "fontSize": "var(--seed-font-size-t6)",
31
+ "lineHeight": "var(--seed-line-height-t6)",
32
+ "fontWeight": "var(--seed-font-weight-bold)",
33
+ "color": "var(--seed-color-fg-neutral)"
34
+ },
35
+ "description": {
36
+ "fontSize": "var(--seed-font-size-t4)",
37
+ "lineHeight": "var(--seed-line-height-t4)",
38
+ "fontWeight": "var(--seed-font-weight-regular)",
39
+ "color": "var(--seed-color-fg-neutral-muted)"
40
+ },
41
+ "list": {
42
+ "gap": "var(--seed-dimension-x2_5)"
43
+ },
44
+ "group": {
45
+ "cornerRadius": "var(--seed-radius-r4)"
46
+ },
47
+ "divider": {
48
+ "strokeBottomWidth": "1px",
49
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
50
+ },
51
+ "footer": {
52
+ "paddingTop": "var(--seed-dimension-x2_5)"
53
+ }
54
+ }
55
+ }
56
+ }
package/vars/component/menu.d.ts ADDED
@@ -0,0 +1,68 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "cornerRadius": "var(--seed-radius-r5)",
6
+ "color": "var(--seed-color-bg-layer-floating)",
7
+ "shadow": "var(--seed-shadow-s3)",
8
+ "enterDuration": "var(--seed-duration-d3)",
9
+ "enterTimingFunction": "var(--seed-timing-function-enter)",
10
+ "enterScale": "0.95",
11
+ "enterOpacity": "0",
12
+ "exitDuration": "var(--seed-duration-d2)",
13
+ "exitTimingFunction": "var(--seed-timing-function-exit)",
14
+ "exitScale": "0.95",
15
+ "exitOpacity": "0",
16
+ "paddingY": "var(--seed-dimension-x2)",
17
+ "gap": "var(--seed-dimension-x2)",
18
+ /** 트리거와 메뉴 사이의 간격을 정의합니다. */
19
+ "gutter": "var(--seed-dimension-x2)",
20
+ /** 메뉴와 뷰포트 경계 사이의 최소 간격을 정의합니다. */
21
+ "overflowPadding": "var(--seed-dimension-x2)",
22
+ "maxHeight": "480px"
23
+ },
24
+ "groupLabel": {
25
+ "color": "var(--seed-color-fg-neutral-subtle)"
26
+ },
27
+ "divider": {
28
+ "marginX": "var(--seed-dimension-x4)",
29
+ "height": "1px",
30
+ "color": "var(--seed-color-stroke-neutral-muted)"
31
+ }
32
+ }
33
+ },
34
+ /**
35
+ * 뷰포트 너비와 관계없이 사용할 수 있습니다.
36
+ */
37
+ "sizeMedium": {
38
+ "enabled": {
39
+ "root": {
40
+ "width": "240px"
41
+ },
42
+ "groupLabel": {
43
+ "paddingY": "var(--seed-dimension-x2_5)",
44
+ "paddingX": "var(--seed-dimension-x4)",
45
+ "fontSize": "var(--seed-font-size-t4)",
46
+ "lineHeight": "var(--seed-line-height-t4)",
47
+ "fontWeight": "var(--seed-font-weight-medium)"
48
+ }
49
+ }
50
+ },
51
+ /**
52
+ * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
53
+ */
54
+ "sizeSmall": {
55
+ "enabled": {
56
+ "root": {
57
+ "width": "200px"
58
+ },
59
+ "groupLabel": {
60
+ "paddingY": "var(--seed-dimension-x2)",
61
+ "paddingX": "var(--seed-dimension-x4)",
62
+ "fontSize": "var(--seed-font-size-t3)",
63
+ "lineHeight": "var(--seed-line-height-t3)",
64
+ "fontWeight": "var(--seed-font-weight-regular)"
65
+ }
66
+ }
67
+ }
68
+ }
package/vars/component/menu.mjs ADDED
@@ -0,0 +1,60 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "cornerRadius": "var(--seed-radius-r5)",
6
+ "color": "var(--seed-color-bg-layer-floating)",
7
+ "shadow": "var(--seed-shadow-s3)",
8
+ "enterDuration": "var(--seed-duration-d3)",
9
+ "enterTimingFunction": "var(--seed-timing-function-enter)",
10
+ "enterScale": "0.95",
11
+ "enterOpacity": "0",
12
+ "exitDuration": "var(--seed-duration-d2)",
13
+ "exitTimingFunction": "var(--seed-timing-function-exit)",
14
+ "exitScale": "0.95",
15
+ "exitOpacity": "0",
16
+ "paddingY": "var(--seed-dimension-x2)",
17
+ "gap": "var(--seed-dimension-x2)",
18
+ "gutter": "var(--seed-dimension-x2)",
19
+ "overflowPadding": "var(--seed-dimension-x2)",
20
+ "maxHeight": "480px"
21
+ },
22
+ "groupLabel": {
23
+ "color": "var(--seed-color-fg-neutral-subtle)"
24
+ },
25
+ "divider": {
26
+ "marginX": "var(--seed-dimension-x4)",
27
+ "height": "1px",
28
+ "color": "var(--seed-color-stroke-neutral-muted)"
29
+ }
30
+ }
31
+ },
32
+ "sizeMedium": {
33
+ "enabled": {
34
+ "root": {
35
+ "width": "240px"
36
+ },
37
+ "groupLabel": {
38
+ "paddingY": "var(--seed-dimension-x2_5)",
39
+ "paddingX": "var(--seed-dimension-x4)",
40
+ "fontSize": "var(--seed-font-size-t4)",
41
+ "lineHeight": "var(--seed-line-height-t4)",
42
+ "fontWeight": "var(--seed-font-weight-medium)"
43
+ }
44
+ }
45
+ },
46
+ "sizeSmall": {
47
+ "enabled": {
48
+ "root": {
49
+ "width": "200px"
50
+ },
51
+ "groupLabel": {
52
+ "paddingY": "var(--seed-dimension-x2)",
53
+ "paddingX": "var(--seed-dimension-x4)",
54
+ "fontSize": "var(--seed-font-size-t3)",
55
+ "lineHeight": "var(--seed-line-height-t3)",
56
+ "fontWeight": "var(--seed-font-weight-regular)"
57
+ }
58
+ }
59
+ }
60
+ }