@seed-design/css 2.2.1 → 2.3.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 (56) hide show
  1. package/LICENSE +201 -0
  2. package/NOTICE +20 -0
  3. package/all.css +1279 -199
  4. package/all.layered.css +1279 -199
  5. package/all.layered.min.css +1 -1
  6. package/all.min.css +1 -1
  7. package/package.json +5 -2
  8. package/recipes/content-dialog.css +258 -0
  9. package/recipes/content-dialog.d.ts +24 -0
  10. package/recipes/content-dialog.layered.css +290 -0
  11. package/recipes/content-dialog.layered.mjs +71 -0
  12. package/recipes/content-dialog.mjs +71 -0
  13. package/recipes/quantity-picker.css +230 -0
  14. package/recipes/quantity-picker.d.ts +24 -0
  15. package/recipes/quantity-picker.layered.css +273 -0
  16. package/recipes/quantity-picker.layered.mjs +72 -0
  17. package/recipes/quantity-picker.mjs +72 -0
  18. package/recipes/select-item.css +161 -0
  19. package/recipes/select-item.d.ts +28 -0
  20. package/recipes/select-item.layered.css +191 -0
  21. package/recipes/select-item.layered.mjs +60 -0
  22. package/recipes/select-item.mjs +60 -0
  23. package/recipes/select-trigger.css +208 -0
  24. package/recipes/select-trigger.d.ts +28 -0
  25. package/recipes/select-trigger.layered.css +227 -0
  26. package/recipes/select-trigger.layered.mjs +56 -0
  27. package/recipes/select-trigger.mjs +56 -0
  28. package/recipes/select.css +93 -0
  29. package/recipes/select.d.ts +28 -0
  30. package/recipes/select.layered.css +108 -0
  31. package/recipes/select.layered.mjs +56 -0
  32. package/recipes/select.mjs +56 -0
  33. package/recipes/slider.css +3 -0
  34. package/recipes/slider.layered.css +4 -0
  35. package/vars/component/alert-dialog.d.ts +52 -0
  36. package/vars/component/alert-dialog.mjs +52 -0
  37. package/vars/component/dialog-close-button.d.ts +24 -0
  38. package/vars/component/dialog-close-button.mjs +24 -0
  39. package/vars/component/dialog.d.ts +50 -11
  40. package/vars/component/dialog.mjs +42 -11
  41. package/vars/component/index.d.ts +7 -0
  42. package/vars/component/index.mjs +7 -0
  43. package/vars/component/quantity-picker-button.d.ts +78 -0
  44. package/vars/component/quantity-picker-button.mjs +78 -0
  45. package/vars/component/quantity-picker.d.ts +80 -0
  46. package/vars/component/quantity-picker.mjs +80 -0
  47. package/vars/component/select-item.d.ts +101 -0
  48. package/vars/component/select-item.mjs +95 -0
  49. package/vars/component/select-trigger.d.ts +127 -0
  50. package/vars/component/select-trigger.mjs +120 -0
  51. package/vars/component/select.d.ts +62 -0
  52. package/vars/component/select.mjs +54 -0
  53. package/vars/component/side-panel-close-button.d.ts +0 -3
  54. package/vars/component/side-panel-close-button.mjs +0 -3
  55. package/vars/component/slider.d.ts +3 -0
  56. package/vars/component/slider.mjs +3 -0
package/vars/component/select-trigger.mjs ADDED
@@ -0,0 +1,120 @@
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
+ "prefixIcon": {
22
+ "color": "var(--seed-color-fg-neutral-muted)"
23
+ },
24
+ "suffixIcon": {
25
+ "color": "var(--seed-color-fg-neutral-muted)",
26
+ "openRotateDuration": "var(--seed-duration-d3)",
27
+ "openRotateTimingFunction": "var(--seed-timing-function-easing)",
28
+ "closeRotateDuration": "var(--seed-duration-d2)",
29
+ "closeRotateTimingFunction": "var(--seed-timing-function-easing)"
30
+ }
31
+ },
32
+ "pressed": {
33
+ "root": {
34
+ "color": "var(--seed-color-bg-transparent-pressed)"
35
+ }
36
+ },
37
+ "invalid": {
38
+ "root": {
39
+ "strokeWidth": "2px",
40
+ "strokeColor": "var(--seed-color-stroke-critical-solid)"
41
+ }
42
+ },
43
+ "disabled": {
44
+ "root": {
45
+ "color": "var(--seed-color-bg-disabled)"
46
+ },
47
+ "value": {
48
+ "color": "var(--seed-color-fg-disabled)"
49
+ },
50
+ "placeholder": {
51
+ "color": "var(--seed-color-fg-disabled)"
52
+ },
53
+ "prefixIcon": {
54
+ "color": "var(--seed-color-fg-disabled)"
55
+ },
56
+ "suffixIcon": {
57
+ "color": "var(--seed-color-fg-disabled)"
58
+ }
59
+ },
60
+ "readonly": {
61
+ "root": {
62
+ "color": "var(--seed-color-bg-disabled)"
63
+ },
64
+ "value": {
65
+ "color": "var(--seed-color-fg-neutral)"
66
+ },
67
+ "placeholder": {
68
+ "color": "var(--seed-color-fg-placeholder)"
69
+ }
70
+ }
71
+ },
72
+ "sizeLarge": {
73
+ "enabled": {
74
+ "root": {
75
+ "height": "var(--seed-dimension-x13)",
76
+ "gap": "var(--seed-dimension-x2_5)",
77
+ "cornerRadius": "var(--seed-radius-r3)",
78
+ "paddingX": "var(--seed-dimension-x4)"
79
+ },
80
+ "value": {
81
+ "fontSize": "var(--seed-font-size-t5)",
82
+ "lineHeight": "var(--seed-line-height-t5)"
83
+ },
84
+ "placeholder": {
85
+ "fontSize": "var(--seed-font-size-t5)",
86
+ "lineHeight": "var(--seed-line-height-t5)"
87
+ },
88
+ "prefixIcon": {
89
+ "size": "var(--seed-dimension-x5)"
90
+ },
91
+ "suffixIcon": {
92
+ "size": "var(--seed-dimension-x5)"
93
+ }
94
+ }
95
+ },
96
+ "sizeMedium": {
97
+ "enabled": {
98
+ "root": {
99
+ "height": "var(--seed-dimension-x10)",
100
+ "gap": "var(--seed-dimension-x2)",
101
+ "cornerRadius": "var(--seed-radius-r2)",
102
+ "paddingX": "var(--seed-dimension-x3_5)"
103
+ },
104
+ "value": {
105
+ "fontSize": "var(--seed-font-size-t4)",
106
+ "lineHeight": "var(--seed-line-height-t4)"
107
+ },
108
+ "placeholder": {
109
+ "fontSize": "var(--seed-font-size-t4)",
110
+ "lineHeight": "var(--seed-line-height-t4)"
111
+ },
112
+ "prefixIcon": {
113
+ "size": "var(--seed-dimension-x4)"
114
+ },
115
+ "suffixIcon": {
116
+ "size": "var(--seed-dimension-x4)"
117
+ }
118
+ }
119
+ }
120
+ }
package/vars/component/select.d.ts ADDED
@@ -0,0 +1,62 @@
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
+ "sizeLarge": {
38
+ "enabled": {
39
+ "groupLabel": {
40
+ "paddingY": "var(--seed-dimension-x2_5)",
41
+ "paddingX": "var(--seed-dimension-x4)",
42
+ "fontSize": "var(--seed-font-size-t4)",
43
+ "lineHeight": "var(--seed-line-height-t4)",
44
+ "fontWeight": "var(--seed-font-weight-medium)"
45
+ }
46
+ }
47
+ },
48
+ /**
49
+ * Breakpoint `lg` 이상(데스크톱)에서만 사용하고, 모바일에서는 사용하지 않습니다. 정밀한 선택이 가능한 마우스 입력 환경에서 사이즈를 더 작게 만들고자 할 때 사용합니다.
50
+ */
51
+ "sizeMedium": {
52
+ "enabled": {
53
+ "groupLabel": {
54
+ "paddingY": "var(--seed-dimension-x2)",
55
+ "paddingX": "var(--seed-dimension-x4)",
56
+ "fontSize": "var(--seed-font-size-t3)",
57
+ "lineHeight": "var(--seed-line-height-t3)",
58
+ "fontWeight": "var(--seed-font-weight-regular)"
59
+ }
60
+ }
61
+ }
62
+ }
package/vars/component/select.mjs ADDED
@@ -0,0 +1,54 @@
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
+ "sizeLarge": {
33
+ "enabled": {
34
+ "groupLabel": {
35
+ "paddingY": "var(--seed-dimension-x2_5)",
36
+ "paddingX": "var(--seed-dimension-x4)",
37
+ "fontSize": "var(--seed-font-size-t4)",
38
+ "lineHeight": "var(--seed-line-height-t4)",
39
+ "fontWeight": "var(--seed-font-weight-medium)"
40
+ }
41
+ }
42
+ },
43
+ "sizeMedium": {
44
+ "enabled": {
45
+ "groupLabel": {
46
+ "paddingY": "var(--seed-dimension-x2)",
47
+ "paddingX": "var(--seed-dimension-x4)",
48
+ "fontSize": "var(--seed-font-size-t3)",
49
+ "lineHeight": "var(--seed-line-height-t3)",
50
+ "fontWeight": "var(--seed-font-weight-regular)"
51
+ }
52
+ }
53
+ }
54
+ }
package/vars/component/side-panel-close-button.d.ts CHANGED
@@ -18,9 +18,6 @@ export declare const vars: {
18
18
  "pressed": {
19
19
  "root": {
20
20
  "color": "var(--seed-color-bg-transparent-pressed)"
21
- },
22
- "icon": {
23
- "color": "var(--seed-color-fg-neutral)"
24
21
  }
25
22
  }
26
23
  }
package/vars/component/side-panel-close-button.mjs CHANGED
@@ -18,9 +18,6 @@ export const vars = {
18
18
  "pressed": {
19
19
  "root": {
20
20
  "color": "var(--seed-color-bg-transparent-pressed)"
21
- },
22
- "icon": {
23
- "color": "var(--seed-color-fg-neutral)"
24
21
  }
25
22
  }
26
23
  }
package/vars/component/slider.d.ts CHANGED
@@ -64,6 +64,9 @@ export declare const vars: {
64
64
  }
65
65
  },
66
66
  "disabled": {
67
+ "track": {
68
+ "color": "var(--seed-color-bg-disabled)"
69
+ },
67
70
  "range": {
68
71
  "color": "var(--seed-color-fg-disabled)"
69
72
  },
package/vars/component/slider.mjs CHANGED
@@ -61,6 +61,9 @@ export const vars = {
61
61
  }
62
62
  },
63
63
  "disabled": {
64
+ "track": {
65
+ "color": "var(--seed-color-bg-disabled)"
66
+ },
64
67
  "range": {
65
68
  "color": "var(--seed-color-fg-disabled)"
66
69
  },