@seed-design/css 2.5.0 → 2.6.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 (124) hide show
  1. package/all.css +700 -89
  2. package/all.layered.css +700 -89
  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/floating-action-button.css +6 -1
  34. package/recipes/floating-action-button.layered.css +8 -1
  35. package/recipes/help-bubble.css +8 -2
  36. package/recipes/help-bubble.layered.css +12 -4
  37. package/recipes/image-frame-reaction-button.css +6 -0
  38. package/recipes/image-frame-reaction-button.layered.css +8 -0
  39. package/recipes/input-button.css +6 -1
  40. package/recipes/input-button.layered.css +10 -3
  41. package/recipes/list-item.css +6 -0
  42. package/recipes/list-item.layered.css +6 -0
  43. package/recipes/menu-sheet.css +7 -1
  44. package/recipes/menu-sheet.layered.css +9 -1
  45. package/recipes/menu.css +1 -1
  46. package/recipes/menu.layered.css +1 -1
  47. package/recipes/page-banner.css +58 -4
  48. package/recipes/page-banner.layered.css +79 -8
  49. package/recipes/pagination-button.css +68 -0
  50. package/recipes/pagination-button.d.ts +19 -0
  51. package/recipes/pagination-button.layered.css +80 -0
  52. package/recipes/pagination-button.layered.mjs +22 -0
  53. package/recipes/pagination-button.mjs +22 -0
  54. package/recipes/pagination-page-item.css +99 -0
  55. package/recipes/pagination-page-item.d.ts +19 -0
  56. package/recipes/pagination-page-item.layered.css +118 -0
  57. package/recipes/pagination-page-item.layered.mjs +22 -0
  58. package/recipes/pagination-page-item.mjs +22 -0
  59. package/recipes/pull-to-refresh.css +1 -1
  60. package/recipes/pull-to-refresh.layered.css +1 -1
  61. package/recipes/quantity-picker.css +8 -2
  62. package/recipes/quantity-picker.layered.css +10 -2
  63. package/recipes/radiomark.css +6 -1
  64. package/recipes/radiomark.layered.css +10 -3
  65. package/recipes/reaction-button.css +4 -1
  66. package/recipes/reaction-button.layered.css +5 -1
  67. package/recipes/select-box.css +3 -3
  68. package/recipes/select-box.layered.css +3 -3
  69. package/recipes/select.css +1 -1
  70. package/recipes/select.layered.css +1 -1
  71. package/recipes/side-panel.css +6 -1
  72. package/recipes/side-panel.layered.css +12 -5
  73. package/recipes/snackbar.css +7 -1
  74. package/recipes/snackbar.layered.css +9 -1
  75. package/recipes/switchmark.css +4 -1
  76. package/recipes/switchmark.layered.css +5 -1
  77. package/recipes/tabs.css +4 -1
  78. package/recipes/tabs.layered.css +5 -1
  79. package/recipes/toggle-button.css +4 -1
  80. package/recipes/toggle-button.layered.css +5 -1
  81. package/recipes/wheel-picker-public.css +121 -0
  82. package/recipes/wheel-picker-public.d.ts +24 -0
  83. package/recipes/wheel-picker-public.layered.css +140 -0
  84. package/recipes/wheel-picker-public.layered.mjs +63 -0
  85. package/recipes/wheel-picker-public.mjs +63 -0
  86. package/recipes/wheel-picker.css +1 -1
  87. package/recipes/wheel-picker.layered.css +1 -1
  88. package/scale-feedback/index.d.ts +3 -0
  89. package/scale-feedback/index.mjs +33 -0
  90. package/vars/color/stroke.d.ts +3 -3
  91. package/vars/component/accordion-item.d.ts +1 -1
  92. package/vars/component/accordion-item.mjs +1 -1
  93. package/vars/component/action-button.d.ts +1 -23
  94. package/vars/component/action-button.mjs +1 -23
  95. package/vars/component/bottom-sheet.d.ts +1 -1
  96. package/vars/component/bottom-sheet.mjs +1 -1
  97. package/vars/component/callout-close-button.d.ts +81 -0
  98. package/vars/component/callout-close-button.mjs +63 -0
  99. package/vars/component/callout.d.ts +1 -2
  100. package/vars/component/callout.mjs +1 -2
  101. package/vars/component/checkbox.d.ts +3 -0
  102. package/vars/component/help-bubble.d.ts +4 -1
  103. package/vars/component/help-bubble.mjs +3 -1
  104. package/vars/component/index.d.ts +6 -1
  105. package/vars/component/index.mjs +6 -1
  106. package/vars/component/list-item.d.ts +2 -6
  107. package/vars/component/list-item.mjs +2 -5
  108. package/vars/component/page-banner-close-button.d.ts +133 -0
  109. package/vars/component/page-banner-close-button.mjs +99 -0
  110. package/vars/component/page-banner.d.ts +0 -1
  111. package/vars/component/page-banner.mjs +0 -1
  112. package/vars/component/pagination-button.d.ts +33 -0
  113. package/vars/component/pagination-button.mjs +33 -0
  114. package/vars/component/pagination-page-item.d.ts +54 -0
  115. package/vars/component/pagination-page-item.mjs +54 -0
  116. package/vars/component/radio.d.ts +3 -0
  117. package/vars/component/select-box.d.ts +2 -2
  118. package/vars/component/select-box.mjs +2 -2
  119. package/vars/component/snackbar.d.ts +1 -1
  120. package/vars/component/snackbar.mjs +1 -1
  121. package/vars/component/switch.d.ts +3 -0
  122. package/vars/component/switchmark.d.ts +2 -0
  123. package/vars/component/wheel-picker.d.ts +72 -0
  124. package/vars/component/wheel-picker.mjs +72 -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
+ }