@seed-design/css 2.5.0 → 2.6.1

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 (126) hide show
  1. package/all.css +747 -96
  2. package/all.layered.css +747 -96
  3. package/all.layered.min.css +1 -1
  4. package/all.min.css +1 -1
  5. package/base.css +15 -0
  6. package/base.layered.css +15 -0
  7. package/base.layered.min.css +1 -1
  8. package/base.min.css +1 -1
  9. package/breakpoints/index.mjs +5 -0
  10. package/package.json +6 -1
  11. package/recipes/accordion.css +1 -1
  12. package/recipes/accordion.layered.css +1 -1
  13. package/recipes/action-button.css +3 -13
  14. package/recipes/action-button.layered.css +4 -17
  15. package/recipes/attachment-input-item.css +15 -3
  16. package/recipes/attachment-input-item.layered.css +24 -8
  17. package/recipes/attachment-input-trigger.css +6 -1
  18. package/recipes/attachment-input-trigger.layered.css +10 -3
  19. package/recipes/bottom-sheet.css +7 -0
  20. package/recipes/bottom-sheet.layered.css +11 -2
  21. package/recipes/callout.css +43 -4
  22. package/recipes/callout.layered.css +57 -6
  23. package/recipes/checkmark.css +6 -1
  24. package/recipes/checkmark.layered.css +10 -3
  25. package/recipes/chip-tabs.css +6 -1
  26. package/recipes/chip-tabs.layered.css +10 -3
  27. package/recipes/chip.css +6 -3
  28. package/recipes/chip.layered.css +10 -5
  29. package/recipes/content-dialog.css +4 -1
  30. package/recipes/content-dialog.layered.css +5 -1
  31. package/recipes/contextual-floating-button.css +6 -1
  32. package/recipes/contextual-floating-button.layered.css +8 -1
  33. package/recipes/date-picker.css +49 -4
  34. package/recipes/date-picker.layered.css +53 -5
  35. package/recipes/floating-action-button.css +6 -1
  36. package/recipes/floating-action-button.layered.css +8 -1
  37. package/recipes/help-bubble.css +8 -2
  38. package/recipes/help-bubble.layered.css +12 -4
  39. package/recipes/image-frame-reaction-button.css +6 -0
  40. package/recipes/image-frame-reaction-button.layered.css +8 -0
  41. package/recipes/input-button.css +6 -1
  42. package/recipes/input-button.layered.css +10 -3
  43. package/recipes/list-item.css +6 -0
  44. package/recipes/list-item.layered.css +6 -0
  45. package/recipes/menu-sheet.css +7 -1
  46. package/recipes/menu-sheet.layered.css +9 -1
  47. package/recipes/menu.css +1 -1
  48. package/recipes/menu.layered.css +1 -1
  49. package/recipes/page-banner.css +58 -4
  50. package/recipes/page-banner.layered.css +79 -8
  51. package/recipes/pagination-button.css +68 -0
  52. package/recipes/pagination-button.d.ts +19 -0
  53. package/recipes/pagination-button.layered.css +80 -0
  54. package/recipes/pagination-button.layered.mjs +22 -0
  55. package/recipes/pagination-button.mjs +22 -0
  56. package/recipes/pagination-page-item.css +99 -0
  57. package/recipes/pagination-page-item.d.ts +19 -0
  58. package/recipes/pagination-page-item.layered.css +118 -0
  59. package/recipes/pagination-page-item.layered.mjs +22 -0
  60. package/recipes/pagination-page-item.mjs +22 -0
  61. package/recipes/pull-to-refresh.css +1 -1
  62. package/recipes/pull-to-refresh.layered.css +1 -1
  63. package/recipes/quantity-picker.css +8 -2
  64. package/recipes/quantity-picker.layered.css +10 -2
  65. package/recipes/radiomark.css +6 -1
  66. package/recipes/radiomark.layered.css +10 -3
  67. package/recipes/reaction-button.css +4 -1
  68. package/recipes/reaction-button.layered.css +5 -1
  69. package/recipes/select-box.css +3 -3
  70. package/recipes/select-box.layered.css +3 -3
  71. package/recipes/select.css +1 -1
  72. package/recipes/select.layered.css +1 -1
  73. package/recipes/side-panel.css +6 -1
  74. package/recipes/side-panel.layered.css +12 -5
  75. package/recipes/snackbar.css +7 -1
  76. package/recipes/snackbar.layered.css +9 -1
  77. package/recipes/switchmark.css +4 -1
  78. package/recipes/switchmark.layered.css +5 -1
  79. package/recipes/tabs.css +4 -1
  80. package/recipes/tabs.layered.css +5 -1
  81. package/recipes/toggle-button.css +4 -1
  82. package/recipes/toggle-button.layered.css +5 -1
  83. package/recipes/wheel-picker-public.css +121 -0
  84. package/recipes/wheel-picker-public.d.ts +24 -0
  85. package/recipes/wheel-picker-public.layered.css +140 -0
  86. package/recipes/wheel-picker-public.layered.mjs +63 -0
  87. package/recipes/wheel-picker-public.mjs +63 -0
  88. package/recipes/wheel-picker.css +1 -1
  89. package/recipes/wheel-picker.layered.css +1 -1
  90. package/scale-feedback/index.d.ts +3 -0
  91. package/scale-feedback/index.mjs +33 -0
  92. package/vars/color/stroke.d.ts +3 -3
  93. package/vars/component/accordion-item.d.ts +1 -1
  94. package/vars/component/accordion-item.mjs +1 -1
  95. package/vars/component/action-button.d.ts +1 -23
  96. package/vars/component/action-button.mjs +1 -23
  97. package/vars/component/bottom-sheet.d.ts +1 -1
  98. package/vars/component/bottom-sheet.mjs +1 -1
  99. package/vars/component/callout-close-button.d.ts +81 -0
  100. package/vars/component/callout-close-button.mjs +63 -0
  101. package/vars/component/callout.d.ts +1 -2
  102. package/vars/component/callout.mjs +1 -2
  103. package/vars/component/checkbox.d.ts +3 -0
  104. package/vars/component/help-bubble.d.ts +4 -1
  105. package/vars/component/help-bubble.mjs +3 -1
  106. package/vars/component/index.d.ts +6 -1
  107. package/vars/component/index.mjs +6 -1
  108. package/vars/component/list-item.d.ts +2 -6
  109. package/vars/component/list-item.mjs +2 -5
  110. package/vars/component/page-banner-close-button.d.ts +133 -0
  111. package/vars/component/page-banner-close-button.mjs +99 -0
  112. package/vars/component/page-banner.d.ts +0 -1
  113. package/vars/component/page-banner.mjs +0 -1
  114. package/vars/component/pagination-button.d.ts +33 -0
  115. package/vars/component/pagination-button.mjs +33 -0
  116. package/vars/component/pagination-page-item.d.ts +54 -0
  117. package/vars/component/pagination-page-item.mjs +54 -0
  118. package/vars/component/radio.d.ts +3 -0
  119. package/vars/component/select-box.d.ts +2 -2
  120. package/vars/component/select-box.mjs +2 -2
  121. package/vars/component/snackbar.d.ts +1 -1
  122. package/vars/component/snackbar.mjs +1 -1
  123. package/vars/component/switch.d.ts +3 -0
  124. package/vars/component/switchmark.d.ts +2 -0
  125. package/vars/component/wheel-picker.d.ts +72 -0
  126. package/vars/component/wheel-picker.mjs +72 -0
package/vars/component/pagination-page-item.d.ts ADDED
@@ -0,0 +1,54 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-transparent)",
6
+ "scaleDuration": "var(--seed-duration-pressed-scale)",
7
+ "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
8
+ "size": "var(--seed-dimension-x10)",
9
+ "cornerRadius": "var(--seed-radius-r2)"
10
+ },
11
+ "label": {
12
+ "color": "var(--seed-color-fg-neutral)",
13
+ "fontSize": "var(--seed-font-size-t4)",
14
+ "lineHeight": "var(--seed-line-height-t4)",
15
+ "fontWeight": "var(--seed-font-weight-bold)"
16
+ }
17
+ },
18
+ "pressed": {
19
+ "root": {
20
+ "color": "var(--seed-color-bg-transparent-pressed)",
21
+ "scale": "var(--seed-scale-s97)"
22
+ }
23
+ },
24
+ "selected": {
25
+ "root": {
26
+ "color": "var(--seed-color-bg-neutral-inverted)"
27
+ },
28
+ "label": {
29
+ "color": "var(--seed-color-fg-neutral-inverted)"
30
+ }
31
+ },
32
+ "selectedPressed": {
33
+ "root": {
34
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
35
+ }
36
+ },
37
+ "disabled": {
38
+ "root": {
39
+ "color": "var(--seed-color-bg-transparent)"
40
+ },
41
+ "label": {
42
+ "color": "var(--seed-color-fg-disabled)"
43
+ }
44
+ },
45
+ "selectedDisabled": {
46
+ "root": {
47
+ "color": "var(--seed-color-bg-disabled)"
48
+ },
49
+ "label": {
50
+ "color": "var(--seed-color-fg-disabled)"
51
+ }
52
+ }
53
+ }
54
+ }
package/vars/component/pagination-page-item.mjs ADDED
@@ -0,0 +1,54 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-transparent)",
6
+ "scaleDuration": "var(--seed-duration-pressed-scale)",
7
+ "scaleTimingFunction": "var(--seed-timing-function-pressed-scale)",
8
+ "size": "var(--seed-dimension-x10)",
9
+ "cornerRadius": "var(--seed-radius-r2)"
10
+ },
11
+ "label": {
12
+ "color": "var(--seed-color-fg-neutral)",
13
+ "fontSize": "var(--seed-font-size-t4)",
14
+ "lineHeight": "var(--seed-line-height-t4)",
15
+ "fontWeight": "var(--seed-font-weight-bold)"
16
+ }
17
+ },
18
+ "pressed": {
19
+ "root": {
20
+ "color": "var(--seed-color-bg-transparent-pressed)",
21
+ "scale": "var(--seed-scale-s97)"
22
+ }
23
+ },
24
+ "selected": {
25
+ "root": {
26
+ "color": "var(--seed-color-bg-neutral-inverted)"
27
+ },
28
+ "label": {
29
+ "color": "var(--seed-color-fg-neutral-inverted)"
30
+ }
31
+ },
32
+ "selectedPressed": {
33
+ "root": {
34
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
35
+ }
36
+ },
37
+ "disabled": {
38
+ "root": {
39
+ "color": "var(--seed-color-bg-transparent)"
40
+ },
41
+ "label": {
42
+ "color": "var(--seed-color-fg-disabled)"
43
+ }
44
+ },
45
+ "selectedDisabled": {
46
+ "root": {
47
+ "color": "var(--seed-color-bg-disabled)"
48
+ },
49
+ "label": {
50
+ "color": "var(--seed-color-fg-disabled)"
51
+ }
52
+ }
53
+ }
54
+ }
package/vars/component/radio.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare const vars: {
4
4
  "label": {
5
5
  "color": "var(--seed-color-fg-neutral)"
6
6
  },
7
+ /** root 전체가 누르는 영역이며, pressed 피드백은 Radiomark의 축소로 표현됩니다. */
7
8
  "root": {
8
9
  "gap": "var(--seed-dimension-x2)"
9
10
  }
@@ -30,6 +31,7 @@ export declare const vars: {
30
31
  },
31
32
  "sizeMedium": {
32
33
  "enabled": {
34
+ /** root 전체가 누르는 영역이며, pressed 피드백은 Radiomark의 축소로 표현됩니다. */
33
35
  "root": {
34
36
  "minHeight": "var(--seed-dimension-x8)"
35
37
  },
@@ -41,6 +43,7 @@ export declare const vars: {
41
43
  },
42
44
  "sizeLarge": {
43
45
  "enabled": {
46
+ /** root 전체가 누르는 영역이며, pressed 피드백은 Radiomark의 축소로 표현됩니다. */
44
47
  "root": {
45
48
  "minHeight": "var(--seed-dimension-x9)"
46
49
  },
package/vars/component/select-box.d.ts CHANGED
@@ -4,7 +4,7 @@ export declare const vars: {
4
4
  "root": {
5
5
  "cornerRadius": "var(--seed-radius-r3)",
6
6
  "color": "var(--seed-color-bg-transparent)",
7
- "strokeColor": "var(--seed-color-stroke-neutral-muted)",
7
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
8
8
  "strokeWidth": "1px",
9
9
  "colorDuration": "var(--seed-duration-color-transition)",
10
10
  "colorTimingFunction": "var(--seed-timing-function-easing)",
@@ -63,7 +63,7 @@ export declare const vars: {
63
63
  },
64
64
  "disabled": {
65
65
  "root": {
66
- "strokeColor": "var(--seed-color-stroke-neutral-muted)"
66
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)"
67
67
  },
68
68
  "prefixIcon": {
69
69
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/select-box.mjs CHANGED
@@ -4,7 +4,7 @@ export const vars = {
4
4
  "root": {
5
5
  "cornerRadius": "var(--seed-radius-r3)",
6
6
  "color": "var(--seed-color-bg-transparent)",
7
- "strokeColor": "var(--seed-color-stroke-neutral-muted)",
7
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)",
8
8
  "strokeWidth": "1px",
9
9
  "colorDuration": "var(--seed-duration-color-transition)",
10
10
  "colorTimingFunction": "var(--seed-timing-function-easing)",
@@ -58,7 +58,7 @@ export const vars = {
58
58
  },
59
59
  "disabled": {
60
60
  "root": {
61
- "strokeColor": "var(--seed-color-stroke-neutral-muted)"
61
+ "strokeColor": "var(--seed-color-stroke-neutral-weak)"
62
62
  },
63
63
  "prefixIcon": {
64
64
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/snackbar.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const vars: {
11
11
  "color": "var(--seed-color-bg-neutral-inverted)",
12
12
  "cornerRadius": "var(--seed-radius-r2)",
13
13
  "minHeight": "44px",
14
- "maxWidth": "560px",
14
+ "maxWidth": "464px",
15
15
  "paddingX": "var(--seed-dimension-x2_5)",
16
16
  "paddingY": "var(--seed-dimension-x2_5)",
17
17
  "enterOpacity": "0",
package/vars/component/snackbar.mjs CHANGED
@@ -11,7 +11,7 @@ export const vars = {
11
11
  "color": "var(--seed-color-bg-neutral-inverted)",
12
12
  "cornerRadius": "var(--seed-radius-r2)",
13
13
  "minHeight": "44px",
14
- "maxWidth": "560px",
14
+ "maxWidth": "464px",
15
15
  "paddingX": "var(--seed-dimension-x2_5)",
16
16
  "paddingY": "var(--seed-dimension-x2_5)",
17
17
  "enterOpacity": "0",
package/vars/component/switch.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare const vars: {
16
16
  },
17
17
  "size32": {
18
18
  "enabled": {
19
+ /** root 전체가 누르는 영역이며, pressed 피드백은 Switchmark의 축소로 표현됩니다. */
19
20
  "root": {
20
21
  "height": "var(--seed-dimension-x8)",
21
22
  "gap": "var(--seed-dimension-x2_5)"
@@ -28,6 +29,7 @@ export declare const vars: {
28
29
  },
29
30
  "size24": {
30
31
  "enabled": {
32
+ /** root 전체가 누르는 영역이며, pressed 피드백은 Switchmark의 축소로 표현됩니다. */
31
33
  "root": {
32
34
  "height": "var(--seed-dimension-x6)",
33
35
  "gap": "var(--seed-dimension-x2)"
@@ -40,6 +42,7 @@ export declare const vars: {
40
42
  },
41
43
  "size16": {
42
44
  "enabled": {
45
+ /** root 전체가 누르는 영역이며, pressed 피드백은 Switchmark의 축소로 표현됩니다. */
43
46
  "root": {
44
47
  "height": "var(--seed-dimension-x6)",
45
48
  "gap": "var(--seed-dimension-x1_5)"
package/vars/component/switchmark.d.ts CHANGED
@@ -10,6 +10,7 @@ export declare const vars: {
10
10
  },
11
11
  "thumb": {
12
12
  "cornerRadius": "var(--seed-radius-full)",
13
+ /** selected 여부에 따른 thumb 크기입니다. pressed 축소는 root에 적용되므로 이 값과 무관합니다. */
13
14
  "scale": "0.8",
14
15
  "scaleDuration": "var(--seed-duration-d3)",
15
16
  "scaleTimingFunction": "var(--seed-timing-function-easing)",
@@ -29,6 +30,7 @@ export declare const vars: {
29
30
  },
30
31
  "selected": {
31
32
  "thumb": {
33
+ /** selected 여부에 따른 thumb 크기입니다. pressed 축소는 root에 적용되므로 이 값과 무관합니다. */
32
34
  "scale": "1"
33
35
  }
34
36
  }
package/vars/component/wheel-picker.d.ts ADDED
@@ -0,0 +1,72 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-layer-floating)"
6
+ },
7
+ "selectionIndicator": {
8
+ "insetX": "var(--seed-dimension-x4)",
9
+ "cornerRadius": "var(--seed-radius-r2)",
10
+ "color": "var(--seed-color-bg-neutral-weak)"
11
+ },
12
+ "scrollFog": {
13
+ "maxHeightFraction": "0.4"
14
+ },
15
+ "itemLabel": {
16
+ "paddingX": "var(--seed-dimension-x4)",
17
+ "fontWeight": "var(--seed-font-weight-medium)",
18
+ "color": "var(--seed-color-fg-disabled)"
19
+ }
20
+ },
21
+ "selected": {
22
+ "itemLabel": {
23
+ "color": "var(--seed-color-fg-neutral)"
24
+ }
25
+ },
26
+ "disabled": {
27
+ "itemLabel": {
28
+ "color": "var(--seed-color-fg-disabled)"
29
+ }
30
+ }
31
+ },
32
+ "sizeSmall": {
33
+ "enabled": {
34
+ "root": {
35
+ "height": "180px"
36
+ },
37
+ "selectionIndicator": {
38
+ "height": "36px"
39
+ },
40
+ "scrollFog": {
41
+ "maxHeight": "108px"
42
+ },
43
+ "item": {
44
+ "height": "36px"
45
+ },
46
+ "itemLabel": {
47
+ "fontSize": "var(--seed-font-size-t7-static)",
48
+ "lineHeight": "var(--seed-line-height-t7-static)"
49
+ }
50
+ }
51
+ },
52
+ "sizeMedium": {
53
+ "enabled": {
54
+ "root": {
55
+ "height": "220px"
56
+ },
57
+ "selectionIndicator": {
58
+ "height": "44px"
59
+ },
60
+ "scrollFog": {
61
+ "maxHeight": "132px"
62
+ },
63
+ "item": {
64
+ "height": "44px"
65
+ },
66
+ "itemLabel": {
67
+ "fontSize": "var(--seed-font-size-t10-static)",
68
+ "lineHeight": "var(--seed-line-height-t10-static)"
69
+ }
70
+ }
71
+ }
72
+ }
package/vars/component/wheel-picker.mjs ADDED
@@ -0,0 +1,72 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-layer-floating)"
6
+ },
7
+ "selectionIndicator": {
8
+ "insetX": "var(--seed-dimension-x4)",
9
+ "cornerRadius": "var(--seed-radius-r2)",
10
+ "color": "var(--seed-color-bg-neutral-weak)"
11
+ },
12
+ "scrollFog": {
13
+ "maxHeightFraction": "0.4"
14
+ },
15
+ "itemLabel": {
16
+ "paddingX": "var(--seed-dimension-x4)",
17
+ "fontWeight": "var(--seed-font-weight-medium)",
18
+ "color": "var(--seed-color-fg-disabled)"
19
+ }
20
+ },
21
+ "selected": {
22
+ "itemLabel": {
23
+ "color": "var(--seed-color-fg-neutral)"
24
+ }
25
+ },
26
+ "disabled": {
27
+ "itemLabel": {
28
+ "color": "var(--seed-color-fg-disabled)"
29
+ }
30
+ }
31
+ },
32
+ "sizeSmall": {
33
+ "enabled": {
34
+ "root": {
35
+ "height": "180px"
36
+ },
37
+ "selectionIndicator": {
38
+ "height": "36px"
39
+ },
40
+ "scrollFog": {
41
+ "maxHeight": "108px"
42
+ },
43
+ "item": {
44
+ "height": "36px"
45
+ },
46
+ "itemLabel": {
47
+ "fontSize": "var(--seed-font-size-t7-static)",
48
+ "lineHeight": "var(--seed-line-height-t7-static)"
49
+ }
50
+ }
51
+ },
52
+ "sizeMedium": {
53
+ "enabled": {
54
+ "root": {
55
+ "height": "220px"
56
+ },
57
+ "selectionIndicator": {
58
+ "height": "44px"
59
+ },
60
+ "scrollFog": {
61
+ "maxHeight": "132px"
62
+ },
63
+ "item": {
64
+ "height": "44px"
65
+ },
66
+ "itemLabel": {
67
+ "fontSize": "var(--seed-font-size-t10-static)",
68
+ "lineHeight": "var(--seed-line-height-t10-static)"
69
+ }
70
+ }
71
+ }
72
+ }