@seed-design/css 1.1.19 → 1.2.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 (86) hide show
  1. package/all.css +527 -115
  2. package/all.min.css +1 -1
  3. package/base.css +23 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/aspect-ratio.css +26 -0
  7. package/recipes/aspect-ratio.d.ts +19 -0
  8. package/recipes/aspect-ratio.mjs +22 -0
  9. package/recipes/bottom-sheet.css +13 -5
  10. package/recipes/checkbox-group.css +5 -0
  11. package/recipes/checkbox-group.d.ts +19 -0
  12. package/recipes/checkbox-group.mjs +22 -0
  13. package/recipes/checkmark.css +1 -1
  14. package/recipes/help-bubble.css +12 -9
  15. package/recipes/help-bubble.d.ts +1 -1
  16. package/recipes/help-bubble.mjs +4 -0
  17. package/recipes/image-frame-icon.css +6 -0
  18. package/recipes/image-frame-icon.d.ts +19 -0
  19. package/recipes/image-frame-icon.mjs +22 -0
  20. package/recipes/image-frame-indicator.css +16 -0
  21. package/recipes/image-frame-indicator.d.ts +19 -0
  22. package/recipes/image-frame-indicator.mjs +22 -0
  23. package/recipes/image-frame-reaction-button.css +29 -0
  24. package/recipes/image-frame-reaction-button.d.ts +19 -0
  25. package/recipes/image-frame-reaction-button.mjs +22 -0
  26. package/recipes/image-frame.css +26 -0
  27. package/recipes/image-frame.d.ts +26 -0
  28. package/recipes/image-frame.mjs +34 -0
  29. package/recipes/input-button.css +18 -3
  30. package/recipes/menu-sheet-item.css +34 -14
  31. package/recipes/menu-sheet-item.d.ts +3 -1
  32. package/recipes/menu-sheet-item.mjs +26 -4
  33. package/recipes/menu-sheet.css +8 -1
  34. package/recipes/menu-sheet.d.ts +1 -1
  35. package/recipes/menu-sheet.mjs +4 -0
  36. package/recipes/radio-group.css +5 -0
  37. package/recipes/radio-group.d.ts +19 -0
  38. package/recipes/radio-group.mjs +22 -0
  39. package/recipes/radiomark.css +0 -1
  40. package/recipes/select-box-group.css +8 -3
  41. package/recipes/select-box.css +88 -18
  42. package/recipes/select-box.d.ts +5 -2
  43. package/recipes/select-box.mjs +21 -2
  44. package/recipes/selectBoxCheckmark.css +31 -0
  45. package/recipes/selectBoxCheckmark.d.ts +21 -0
  46. package/recipes/selectBoxCheckmark.mjs +36 -0
  47. package/recipes/switch.css +3 -3
  48. package/recipes/{switch-mark.css → switchmark.css} +19 -19
  49. package/recipes/switchmark.d.ts +28 -0
  50. package/recipes/{switch-mark.mjs → switchmark.mjs} +10 -10
  51. package/recipes/tag-group-item.css +60 -31
  52. package/recipes/tag-group-item.d.ts +3 -1
  53. package/recipes/tag-group-item.mjs +18 -4
  54. package/recipes/tag-group.css +29 -5
  55. package/recipes/tag-group.d.ts +4 -0
  56. package/recipes/tag-group.mjs +20 -2
  57. package/recipes/text-input.css +39 -13
  58. package/vars/component/checkbox-group.d.ts +9 -0
  59. package/vars/component/checkbox-group.mjs +9 -0
  60. package/vars/component/help-bubble.d.ts +7 -4
  61. package/vars/component/help-bubble.mjs +7 -4
  62. package/vars/component/image-frame-floater.d.ts +10 -0
  63. package/vars/component/image-frame-floater.mjs +9 -0
  64. package/vars/component/image-frame-indicator.d.ts +20 -0
  65. package/vars/component/image-frame-indicator.mjs +18 -0
  66. package/vars/component/image-frame-reaction-button.d.ts +35 -0
  67. package/vars/component/image-frame-reaction-button.mjs +26 -0
  68. package/vars/component/image-frame.d.ts +48 -0
  69. package/vars/component/image-frame.mjs +31 -0
  70. package/vars/component/index.d.ts +9 -1
  71. package/vars/component/index.mjs +9 -1
  72. package/vars/component/input-button.d.ts +3 -4
  73. package/vars/component/input-button.mjs +2 -4
  74. package/vars/component/radio-group.d.ts +9 -0
  75. package/vars/component/radio-group.mjs +9 -0
  76. package/vars/component/select-box-checkmark.d.ts +40 -0
  77. package/vars/component/select-box-checkmark.mjs +40 -0
  78. package/vars/component/select-box-group.d.ts +10 -0
  79. package/vars/component/select-box-group.mjs +10 -0
  80. package/vars/component/select-box.d.ts +80 -21
  81. package/vars/component/select-box.mjs +75 -21
  82. package/vars/component/text-input.d.ts +3 -4
  83. package/vars/component/text-input.mjs +2 -4
  84. package/recipes/switch-mark.d.ts +0 -28
  85. /package/vars/component/{switch-mark.d.ts → switchmark.d.ts} +0 -0
  86. /package/vars/component/{switch-mark.mjs → switchmark.mjs} +0 -0
package/vars/component/select-box.mjs CHANGED
@@ -2,46 +2,100 @@ export const vars = {
2
2
  "base": {
3
3
  "enabled": {
4
4
  "root": {
5
- "colorTransitionDuration": "var(--seed-duration-color-transition)",
6
- "colorTransitionTimingFunction": "var(--seed-timing-function-easing)",
7
- "paddingX": "var(--seed-dimension-x4)",
8
- "paddingY": "var(--seed-dimension-x5)",
9
- "gap": "var(--seed-dimension-x2_5)",
10
- "strokeWidth": "1px",
11
- "strokeColor": "var(--seed-color-stroke-neutral-muted)",
12
5
  "cornerRadius": "var(--seed-radius-r3)",
13
- "color": "var(--seed-color-bg-transparent)"
6
+ "color": "var(--seed-color-bg-transparent)",
7
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
8
+ "strokeWidth": "1px",
9
+ "colorDuration": "var(--seed-duration-color-transition)",
10
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
11
+ "strokeDuration": "0.1s",
12
+ "strokeTimingFunction": "var(--seed-timing-function-easing)"
14
13
  },
15
- "content": {
16
- "gap": "var(--seed-dimension-x0_5)"
14
+ "trigger": {
15
+ "gap": "var(--seed-dimension-x1_5)"
16
+ },
17
+ "prefixIcon": {
18
+ "color": "var(--seed-color-fg-neutral)",
19
+ "size": "22px"
20
+ },
21
+ "body": {
22
+ "gap": "var(--seed-dimension-x0_5)",
23
+ "paddingRight": "var(--seed-dimension-x1)"
17
24
  },
18
25
  "label": {
26
+ "gap": "var(--seed-dimension-x1)",
19
27
  "color": "var(--seed-color-fg-neutral)",
20
- "fontWeight": "var(--seed-font-weight-bold)",
21
28
  "fontSize": "var(--seed-font-size-t5)",
22
- "lineHeight": "var(--seed-line-height-t5)"
29
+ "lineHeight": "var(--seed-line-height-t5)",
30
+ "fontWeight": "var(--seed-font-weight-medium)"
23
31
  },
24
32
  "description": {
25
33
  "color": "var(--seed-color-fg-neutral-muted)",
26
- "fontWeight": "var(--seed-font-weight-regular)",
27
- "fontSize": "var(--seed-font-size-t4)",
28
- "lineHeight": "var(--seed-line-height-t4)"
34
+ "fontSize": "var(--seed-font-size-t3)",
35
+ "lineHeight": "var(--seed-line-height-t3)",
36
+ "fontWeight": "var(--seed-font-weight-regular)"
37
+ },
38
+ "footer": {
39
+ "expandHeightDuration": "400ms",
40
+ "expandHeightTimingFunction": "var(--seed-timing-function-easing)",
41
+ "expandOpacityDuration": "var(--seed-duration-d6)",
42
+ "expandOpacityTimingFunction": "var(--seed-timing-function-easing)",
43
+ "collapseHeightDuration": "var(--seed-duration-d6)",
44
+ "collapseHeightTimingFunction": "var(--seed-timing-function-easing)",
45
+ "collapseOpacityDuration": "400ms",
46
+ "collapseOpacityTimingFunction": "var(--seed-timing-function-easing)"
29
47
  }
30
48
  },
31
- "enabledPressed": {
49
+ "selected": {
32
50
  "root": {
33
- "color": "var(--seed-color-bg-transparent-pressed)"
51
+ "strokeWidth": "2px"
34
52
  }
35
53
  },
36
54
  "enabledSelected": {
37
55
  "root": {
38
- "color": "var(--seed-color-bg-neutral-weak)",
39
- "strokeColor": "var(--seed-color-stroke-neutral-weak)"
56
+ "strokeColor": "var(--seed-color-stroke-neutral-contrast)"
40
57
  }
41
58
  },
42
- "enabledSelectedPressed": {
59
+ "disabled": {
43
60
  "root": {
44
- "color": "var(--seed-color-bg-neutral-weak-pressed)"
61
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)"
62
+ },
63
+ "prefixIcon": {
64
+ "color": "var(--seed-color-fg-disabled)"
65
+ },
66
+ "label": {
67
+ "color": "var(--seed-color-fg-disabled)"
68
+ },
69
+ "description": {
70
+ "color": "var(--seed-color-fg-disabled)"
71
+ }
72
+ },
73
+ "enabledPressed": {
74
+ "root": {
75
+ "color": "var(--seed-color-bg-transparent-pressed)"
76
+ }
77
+ }
78
+ },
79
+ "layoutHorizontal": {
80
+ "enabled": {
81
+ "trigger": {
82
+ "paddingLeft": "var(--seed-dimension-x5)",
83
+ "paddingRight": "var(--seed-dimension-x4)",
84
+ "paddingY": "var(--seed-dimension-x4)"
85
+ },
86
+ "content": {
87
+ "gap": "var(--seed-dimension-x3)"
88
+ }
89
+ }
90
+ },
91
+ "layoutVertical": {
92
+ "enabled": {
93
+ "trigger": {
94
+ "paddingX": "var(--seed-dimension-x4)",
95
+ "paddingY": "var(--seed-dimension-x5)"
96
+ },
97
+ "content": {
98
+ "gap": "var(--seed-dimension-x2_5)"
45
99
  }
46
100
  }
47
101
  }
package/vars/component/text-input.d.ts CHANGED
@@ -3,10 +3,9 @@ export declare const vars: {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- "strokeColorDuration": "var(--seed-duration-color-transition)",
7
- "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
8
- "strokeWidthDuration": "var(--seed-duration-d3)",
9
- "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
6
+ /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
7
+ "strokeDuration": "0.1s",
8
+ "strokeTimingFunction": "var(--seed-timing-function-easing)"
10
9
  },
11
10
  "value": {
12
11
  "color": "var(--seed-color-fg-neutral)",
package/vars/component/text-input.mjs CHANGED
@@ -3,10 +3,8 @@ export const vars = {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- "strokeColorDuration": "var(--seed-duration-color-transition)",
7
- "strokeColorTimingFunction": "var(--seed-timing-function-easing)",
8
- "strokeWidthDuration": "var(--seed-duration-d3)",
9
- "strokeWidthTimingFunction": "var(--seed-timing-function-easing)"
6
+ "strokeDuration": "0.1s",
7
+ "strokeTimingFunction": "var(--seed-timing-function-easing)"
10
8
  },
11
9
  "value": {
12
10
  "color": "var(--seed-color-fg-neutral)",
package/recipes/switch-mark.d.ts DELETED
@@ -1,28 +0,0 @@
1
- declare interface SwitchMarkVariant {
2
- /**
3
- * @default "brand"
4
- */
5
- tone: "neutral" | "brand";
6
- /**
7
- * @default 32
8
- */
9
- size: "16" | "24" | "32";
10
- }
11
-
12
- declare type SwitchMarkVariantMap = {
13
- [key in keyof SwitchMarkVariant]: Array<SwitchMarkVariant[key]>;
14
- };
15
-
16
- export declare type SwitchMarkVariantProps = Partial<SwitchMarkVariant>;
17
-
18
- export declare type SwitchMarkSlotName = "root" | "thumb";
19
-
20
- export declare const switchMarkVariantMap: SwitchMarkVariantMap;
21
-
22
- export declare const switchMark: ((
23
- props?: SwitchMarkVariantProps,
24
- ) => Record<SwitchMarkSlotName, string>) & {
25
- splitVariantProps: <T extends SwitchMarkVariantProps>(
26
- props: T,
27
- ) => [SwitchMarkVariantProps, Omit<T, keyof SwitchMarkVariantProps>];
28
- }