@seed-design/css 1.2.1 → 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 (25) hide show
  1. package/all.css +51 -39
  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 +16 -8
  7. package/recipes/image-frame.css +11 -9
  8. package/recipes/image-frame.d.ts +2 -2
  9. package/recipes/image-frame.mjs +4 -4
  10. package/recipes/segmented-control.css +3 -1
  11. package/recipes/slider.css +16 -15
  12. package/vars/component/action-button.d.ts +61 -61
  13. package/vars/component/bottom-sheet.d.ts +27 -10
  14. package/vars/component/bottom-sheet.mjs +27 -10
  15. package/vars/component/callout.d.ts +7 -7
  16. package/vars/component/chip-tab.d.ts +2 -1
  17. package/vars/component/chip-tab.mjs +2 -1
  18. package/vars/component/contextual-floating-button.d.ts +2 -2
  19. package/vars/component/image-frame.d.ts +24 -18
  20. package/vars/component/image-frame.mjs +9 -9
  21. package/vars/component/input-button.d.ts +1 -1
  22. package/vars/component/select-box.d.ts +1 -1
  23. package/vars/component/slider.d.ts +11 -9
  24. package/vars/component/slider.mjs +8 -9
  25. package/vars/component/text-input.d.ts +1 -1
package/vars/component/image-frame.d.ts CHANGED
@@ -1,47 +1,53 @@
1
1
  export declare const vars: {
2
2
  /**
3
- * 모서리에 라운드 스타일을 적용합니다.
3
+ * 이미지 테두리에 스트로크를 표시합니다.
4
4
  */
5
- "roundedTrue": {
5
+ "strokeTrue": {
6
6
  "enabled": {
7
7
  "root": {
8
- /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
9
- "cornerRadius": "var(--seed-radius-r2)"
8
+ /** stroke 옵션 사용 시 적용되는 테두리 색상입니다. */
9
+ "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
10
+ /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
11
+ "strokeWidth": "1px"
10
12
  }
11
13
  }
12
14
  },
13
15
  /**
14
- * 모서리를 직각으로 유지합니다.
16
+ * 테두리를 표시하지 않습니다.
15
17
  */
16
- "roundedFalse": {
18
+ "strokeFalse": {
17
19
  "enabled": {
18
20
  "root": {
19
- /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
20
- "cornerRadius": "0px"
21
+ /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
22
+ "strokeWidth": "0px"
21
23
  }
22
24
  }
23
25
  },
24
26
  /**
25
- * 이미지 테두리에 스트로크를 표시합니다.
27
+ * 모서리를 둥글게 처리합니다.
28
+ @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
29
+ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
30
+
26
31
  */
27
- "strokeTrue": {
32
+ "roundedTrue": {
28
33
  "enabled": {
29
34
  "root": {
30
- /** stroke 옵션 사용 시 적용되는 테두리 색상입니다. */
31
- "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
32
- /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
33
- "strokeWidth": "1px"
35
+ /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
36
+ "cornerRadius": "var(--seed-radius-r2)"
34
37
  }
35
38
  }
36
39
  },
37
40
  /**
38
- * 테두리를 표시하지 않습니다.
41
+ * 모서리를 둥글게 처리하지 않습니다.
42
+ @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
43
+ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
44
+
39
45
  */
40
- "strokeFalse": {
46
+ "roundedFalse": {
41
47
  "enabled": {
42
48
  "root": {
43
- /** stroke 옵션 사용 시 적용되는 테두리 두께입니다. */
44
- "strokeWidth": "0px"
49
+ /** rounded 옵션 사용 시 적용되는 모서리 반경입니다. */
50
+ "cornerRadius": "0px"
45
51
  }
46
52
  }
47
53
  }
package/vars/component/image-frame.mjs CHANGED
@@ -1,30 +1,30 @@
1
1
  export const vars = {
2
- "roundedTrue": {
2
+ "strokeTrue": {
3
3
  "enabled": {
4
4
  "root": {
5
- "cornerRadius": "var(--seed-radius-r2)"
5
+ "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
6
+ "strokeWidth": "1px"
6
7
  }
7
8
  }
8
9
  },
9
- "roundedFalse": {
10
+ "strokeFalse": {
10
11
  "enabled": {
11
12
  "root": {
12
- "cornerRadius": "0px"
13
+ "strokeWidth": "0px"
13
14
  }
14
15
  }
15
16
  },
16
- "strokeTrue": {
17
+ "roundedTrue": {
17
18
  "enabled": {
18
19
  "root": {
19
- "strokeColor": "var(--seed-color-stroke-neutral-subtle)",
20
- "strokeWidth": "1px"
20
+ "cornerRadius": "var(--seed-radius-r2)"
21
21
  }
22
22
  }
23
23
  },
24
- "strokeFalse": {
24
+ "roundedFalse": {
25
25
  "enabled": {
26
26
  "root": {
27
- "strokeWidth": "0px"
27
+ "cornerRadius": "0px"
28
28
  }
29
29
  }
30
30
  }
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
  },