@seed-design/css 1.2.2 → 1.2.3

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 (20) hide show
  1. package/all.css +24 -23
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/app-bar.css +1 -1
  5. package/recipes/aspect-ratio.css +0 -2
  6. package/recipes/bottom-sheet.css +3 -3
  7. package/recipes/segmented-control.css +3 -1
  8. package/recipes/slider.css +16 -15
  9. package/vars/component/action-button.d.ts +61 -61
  10. package/vars/component/bottom-sheet.d.ts +3 -3
  11. package/vars/component/bottom-sheet.mjs +3 -3
  12. package/vars/component/callout.d.ts +7 -7
  13. package/vars/component/chip-tab.d.ts +2 -1
  14. package/vars/component/chip-tab.mjs +2 -1
  15. package/vars/component/contextual-floating-button.d.ts +2 -2
  16. package/vars/component/input-button.d.ts +1 -1
  17. package/vars/component/select-box.d.ts +1 -1
  18. package/vars/component/slider.d.ts +11 -9
  19. package/vars/component/slider.mjs +8 -9
  20. package/vars/component/text-input.d.ts +1 -1
package/vars/component/callout.d.ts CHANGED
@@ -22,7 +22,7 @@ export declare const vars: {
22
22
  "lineHeight": "var(--seed-line-height-t4)",
23
23
  "fontWeight": "var(--seed-font-weight-regular)"
24
24
  },
25
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
25
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
26
26
  "link": {
27
27
  "fontSize": "var(--seed-font-size-t4)",
28
28
  "lineHeight": "var(--seed-line-height-t4)",
@@ -52,7 +52,7 @@ export declare const vars: {
52
52
  "description": {
53
53
  "color": "var(--seed-color-fg-neutral)"
54
54
  },
55
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
55
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
56
56
  "link": {
57
57
  "color": "var(--seed-color-fg-neutral)"
58
58
  },
@@ -84,7 +84,7 @@ export declare const vars: {
84
84
  "description": {
85
85
  "color": "var(--seed-color-fg-informative-contrast)"
86
86
  },
87
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
87
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
88
88
  "link": {
89
89
  "color": "var(--seed-color-fg-informative-contrast)"
90
90
  },
@@ -116,7 +116,7 @@ export declare const vars: {
116
116
  "description": {
117
117
  "color": "var(--seed-color-fg-positive-contrast)"
118
118
  },
119
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
119
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
120
120
  "link": {
121
121
  "color": "var(--seed-color-fg-positive-contrast)"
122
122
  },
@@ -148,7 +148,7 @@ export declare const vars: {
148
148
  "description": {
149
149
  "color": "var(--seed-color-fg-warning-contrast)"
150
150
  },
151
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
151
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
152
152
  "link": {
153
153
  "color": "var(--seed-color-fg-warning-contrast)"
154
154
  },
@@ -180,7 +180,7 @@ export declare const vars: {
180
180
  "description": {
181
181
  "color": "var(--seed-color-fg-critical-contrast)"
182
182
  },
183
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
183
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
184
184
  "link": {
185
185
  "color": "var(--seed-color-fg-critical-contrast)"
186
186
  },
@@ -212,7 +212,7 @@ export declare const vars: {
212
212
  "description": {
213
213
  "color": "var(--seed-color-fg-neutral)"
214
214
  },
215
- /** Container가 모두 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
215
+ /** root가 클릭 영역인 Actionable Callout에서는 표시를 권장하지 않습니다. */
216
216
  "link": {
217
217
  "color": "var(--seed-color-fg-neutral)"
218
218
  },
package/vars/component/chip-tab.d.ts CHANGED
@@ -79,7 +79,8 @@ export declare const vars: {
79
79
  "enabled": {
80
80
  "root": {
81
81
  "color": "var(--seed-color-bg-transparent)",
82
- "stroke": "var(--seed-color-stroke-neutral-muted)"
82
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
83
+ "strokeWidth": "1px"
83
84
  },
84
85
  "label": {
85
86
  "color": "var(--seed-color-fg-neutral)"
package/vars/component/chip-tab.mjs CHANGED
@@ -79,7 +79,8 @@ export const vars = {
79
79
  "enabled": {
80
80
  "root": {
81
81
  "color": "var(--seed-color-bg-transparent)",
82
- "stroke": "var(--seed-color-stroke-neutral-muted)"
82
+ "strokeColor": "var(--seed-color-stroke-neutral-muted)",
83
+ "strokeWidth": "1px"
83
84
  },
84
85
  "label": {
85
86
  "color": "var(--seed-color-fg-neutral)"
package/vars/component/contextual-floating-button.d.ts CHANGED
@@ -108,7 +108,7 @@ export declare const vars: {
108
108
  }
109
109
  },
110
110
  /**
111
- * 라벨과 아이콘을 함께 표시합니다.
111
+ * label과 prefixIcon을 함께 표시합니다.
112
112
  */
113
113
  "layoutWithText": {
114
114
  "enabled": {
@@ -129,7 +129,7 @@ export declare const vars: {
129
129
  }
130
130
  },
131
131
  /**
132
- * 아이콘만 표시합니다. 접근성을 위해 aria-label을 제공해야 합니다.
132
+ * icon만 표시합니다. 아이콘만으로 의미를 전달하기 때문에 접근성 레이블과 함께 사용해야 합니다.
133
133
  */
134
134
  "layoutIconOnly": {
135
135
  "enabled": {
package/vars/component/input-button.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const vars: {
11
11
  "color": "var(--seed-color-bg-transparent)",
12
12
  "colorDuration": "var(--seed-duration-color-transition)",
13
13
  "colorTimingFunction": "var(--seed-timing-function-easing)",
14
- /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
14
+ /** enabled 상태의 stroke 위에 invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
15
15
  "strokeDuration": "0.1s",
16
16
  "strokeTimingFunction": "var(--seed-timing-function-easing)"
17
17
  },
package/vars/component/select-box.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare const vars: {
8
8
  "strokeWidth": "1px",
9
9
  "colorDuration": "var(--seed-duration-color-transition)",
10
10
  "colorTimingFunction": "var(--seed-timing-function-easing)",
11
- /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
11
+ /** enabled 상태의 stroke 위에 selected 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
12
12
  "strokeDuration": "0.1s",
13
13
  "strokeTimingFunction": "var(--seed-timing-function-easing)"
14
14
  },
package/vars/component/slider.d.ts CHANGED
@@ -23,11 +23,13 @@ export declare const vars: {
23
23
  "cornerRadius": "var(--seed-radius-full)",
24
24
  "color": "var(--seed-color-bg-neutral-inverted)"
25
25
  },
26
+ /** arrow width + (valueIndicatorRoot paddingX * 2)만큼의 최소 너비를 가집니다. */
26
27
  "valueIndicatorRoot": {
27
28
  "color": "var(--seed-color-bg-neutral-inverted)",
28
- "cornerRadius": "var(--seed-radius-r1)",
29
- "paddingX": "var(--seed-dimension-x1_5)",
30
- "paddingY": "var(--seed-dimension-x0_5)",
29
+ "cornerRadius": "var(--seed-radius-r1_5)",
30
+ /** value indicator 내부 좌우 여백입니다. arrow와 valueIndicatorRoot 경계 사이의 최소 간격에도 동일한 값이 적용됩니다. */
31
+ "paddingX": "var(--seed-dimension-x2)",
32
+ "paddingY": "var(--seed-dimension-x1)",
31
33
  "offsetY": "var(--seed-dimension-x3)",
32
34
  "enterScale": "0.9",
33
35
  "enterOpacity": "0",
@@ -40,16 +42,16 @@ export declare const vars: {
40
42
  },
41
43
  "valueIndicatorArrow": {
42
44
  "color": "var(--seed-color-bg-neutral-inverted)",
43
- "width": "var(--seed-dimension-x2_5)",
44
- "height": "7px",
45
+ "width": "var(--seed-dimension-x2)",
46
+ "height": "var(--seed-dimension-x1_5)",
45
47
  "cornerRadius": "var(--seed-radius-r0_5)",
46
- "gutter": "var(--seed-dimension-x0_5)",
47
- "padding": "var(--seed-dimension-x0_5)"
48
+ /** arrow와 thumb 사이의 거리를 정의합니다. */
49
+ "gutter": "var(--seed-dimension-x0_5)"
48
50
  },
49
51
  "valueIndicatorLabel": {
50
52
  "color": "var(--seed-color-fg-neutral-inverted)",
51
- "fontSize": "var(--seed-font-size-t1)",
52
- "lineHeight": "var(--seed-line-height-t1)",
53
+ "fontSize": "var(--seed-font-size-t3)",
54
+ "lineHeight": "var(--seed-line-height-t3)",
53
55
  "fontWeight": "var(--seed-font-weight-medium)"
54
56
  },
55
57
  "marker": {
package/vars/component/slider.mjs CHANGED
@@ -25,9 +25,9 @@ export const vars = {
25
25
  },
26
26
  "valueIndicatorRoot": {
27
27
  "color": "var(--seed-color-bg-neutral-inverted)",
28
- "cornerRadius": "var(--seed-radius-r1)",
29
- "paddingX": "var(--seed-dimension-x1_5)",
30
- "paddingY": "var(--seed-dimension-x0_5)",
28
+ "cornerRadius": "var(--seed-radius-r1_5)",
29
+ "paddingX": "var(--seed-dimension-x2)",
30
+ "paddingY": "var(--seed-dimension-x1)",
31
31
  "offsetY": "var(--seed-dimension-x3)",
32
32
  "enterScale": "0.9",
33
33
  "enterOpacity": "0",
@@ -40,16 +40,15 @@ export const vars = {
40
40
  },
41
41
  "valueIndicatorArrow": {
42
42
  "color": "var(--seed-color-bg-neutral-inverted)",
43
- "width": "var(--seed-dimension-x2_5)",
44
- "height": "7px",
43
+ "width": "var(--seed-dimension-x2)",
44
+ "height": "var(--seed-dimension-x1_5)",
45
45
  "cornerRadius": "var(--seed-radius-r0_5)",
46
- "gutter": "var(--seed-dimension-x0_5)",
47
- "padding": "var(--seed-dimension-x0_5)"
46
+ "gutter": "var(--seed-dimension-x0_5)"
48
47
  },
49
48
  "valueIndicatorLabel": {
50
49
  "color": "var(--seed-color-fg-neutral-inverted)",
51
- "fontSize": "var(--seed-font-size-t1)",
52
- "lineHeight": "var(--seed-line-height-t1)",
50
+ "fontSize": "var(--seed-font-size-t3)",
51
+ "lineHeight": "var(--seed-line-height-t3)",
53
52
  "fontWeight": "var(--seed-font-weight-medium)"
54
53
  },
55
54
  "marker": {
package/vars/component/text-input.d.ts CHANGED
@@ -3,7 +3,7 @@ export declare const vars: {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "strokeColor": "var(--seed-color-stroke-neutral-weak)",
6
- /** 1px stroke 위에 2px stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
6
+ /** enabled 상태의 stroke 위에 focused/invalid 상태의 stroke가 fade in/out 되는 데에 걸리는 시간입니다. stroke 두께나 색상 자체를 transition하지 않습니다. */
7
7
  "strokeDuration": "0.1s",
8
8
  "strokeTimingFunction": "var(--seed-timing-function-easing)"
9
9
  },