@seed-design/rootage-artifacts 1.2.0 → 1.2.2

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 (4) hide show
  1. package/components/bottom-sheet.yaml +26 -13
  2. package/components/image-frame-reaction-button.yaml +30 -13
  3. package/components/image-frame.yaml +23 -17
  4. package/package.json +1 -1
package/components/bottom-sheet.yaml CHANGED
@@ -42,10 +42,6 @@ data:
42
42
  properties:
43
43
  gap:
44
44
  type: dimension
45
- paddingLeft:
46
- type: dimension
47
- paddingRight:
48
- type: dimension
49
45
  paddingTop:
50
46
  type: dimension
51
47
  paddingBottom:
@@ -72,6 +68,10 @@ data:
72
68
  type: dimension
73
69
  fontWeight:
74
70
  type: number
71
+ paddingLeft:
72
+ type: dimension
73
+ paddingRight:
74
+ type: dimension
75
75
  description:
76
76
  properties:
77
77
  color:
@@ -82,6 +82,8 @@ data:
82
82
  type: dimension
83
83
  fontWeight:
84
84
  type: number
85
+ paddingX:
86
+ type: dimension
85
87
  closeButton:
86
88
  properties:
87
89
  fromTop:
@@ -128,16 +130,27 @@ data:
128
130
  fontSize: $font-size.t5
129
131
  lineHeight: $line-height.t5
130
132
  fontWeight: $font-weight.regular
133
+ paddingX: $dimension.spacing-x.global-gutter
131
134
  closeButton:
132
- fromTop: $dimension.x5
133
- fromRight: $dimension.x5
134
- headerAlignment=left:
135
+ fromTop: $dimension.x6
136
+ fromRight: $dimension.x4
137
+ headerAlignment=left,closeButton=true:
135
138
  enabled:
136
- header:
137
- paddingLeft: $dimension.spacing-x.global-gutter
139
+ title:
138
140
  paddingRight: 50px
139
- headerAlignment=center:
141
+ paddingLeft: $dimension.spacing-x.global-gutter
142
+ headerAlignment=left,closeButton=false:
140
143
  enabled:
141
- header:
142
- paddingLeft: 50px
143
- paddingRight: 50px
144
+ title:
145
+ paddingLeft: $dimension.spacing-x.global-gutter
146
+ paddingRight: $dimension.spacing-x.global-gutter
147
+ headerAlignment=center,closeButton=true:
148
+ enabled:
149
+ title:
150
+ paddingLeft: 60px
151
+ paddingRight: 60px
152
+ headerAlignment=center,closeButton=false:
153
+ enabled:
154
+ title:
155
+ paddingLeft: $dimension.spacing-x.global-gutter
156
+ paddingRight: $dimension.spacing-x.global-gutter
package/components/image-frame-reaction-button.yaml CHANGED
@@ -9,19 +9,21 @@ data:
9
9
  root:
10
10
  description: 하트 아이콘 토글 버튼입니다. 이미지 위에서 좋아요 기능에 사용됩니다.
11
11
  properties:
12
- color:
13
- type: color
14
- description: 버튼 배경색입니다.
15
- cornerRadius:
16
- type: dimension
17
12
  size:
18
13
  type: dimension
19
14
  description: 보이는 버튼 크기입니다.
20
15
  targetSize:
21
16
  type: dimension
22
17
  description: 터치 영역 크기입니다.
23
- icon:
24
- description: 하트 아이콘입니다. 기본 상태에서는 IconHeartLine, 선택 상태에서는 IconHeartFill을 사용합니다.
18
+ fillIcon:
19
+ description: lineIcon 아래에 내려가는 하트 아이콘입니다.
20
+ properties:
21
+ gradient:
22
+ type: gradient
23
+ size:
24
+ type: dimension
25
+ lineIcon:
26
+ description: fillIcon 위로 올라가는 하트 아이콘입니다.
25
27
  properties:
26
28
  color:
27
29
  type: color
@@ -31,13 +33,28 @@ data:
31
33
  base:
32
34
  enabled:
33
35
  root:
34
- color: $color.palette.static-black-alpha-200
35
- cornerRadius: $radius.full
36
36
  size: $dimension.x6
37
37
  targetSize: $dimension.x10
38
- icon:
39
- color: $color.fg.neutral-inverted
38
+ fillIcon:
39
+ gradient:
40
+ type: gradient
41
+ value:
42
+ - color: $color.palette.static-black-alpha-300
43
+ position: 0
44
+ - color: $color.palette.static-black-alpha-300
45
+ position: 1
46
+ size: $dimension.x6
47
+ lineIcon:
48
+ color: $color.palette.static-white
40
49
  size: $dimension.x6
41
50
  selected:
42
- icon:
43
- color: $color.fg.brand
51
+ fillIcon:
52
+ gradient:
53
+ type: gradient
54
+ value:
55
+ - color: "#FF9A56"
56
+ position: 0
57
+ - color: "#FF6600"
58
+ position: 1
59
+ lineIcon:
60
+ color: $color.bg.transparent
package/components/image-frame.yaml CHANGED
@@ -8,37 +8,35 @@ data:
8
8
  slots:
9
9
  root:
10
10
  properties:
11
- cornerRadius:
12
- type: dimension
13
- description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
14
11
  strokeColor:
15
12
  type: color
16
13
  description: stroke 옵션 사용 시 적용되는 테두리 색상입니다.
17
14
  strokeWidth:
18
15
  type: dimension
19
16
  description: stroke 옵션 사용 시 적용되는 테두리 두께입니다.
17
+ cornerRadius:
18
+ type: dimension
19
+ description: rounded 옵션 사용 시 적용되는 모서리 반경입니다.
20
20
  variants:
21
- rounded:
22
- values:
23
- "true":
24
- description: 모서리에 라운드 스타일을 적용합니다.
25
- "false":
26
- description: 모서리를 직각으로 유지합니다.
27
21
  stroke:
28
22
  values:
29
23
  "true":
30
24
  description: 이미지 테두리에 스트로크를 표시합니다.
31
25
  "false":
32
26
  description: 테두리를 표시하지 않습니다.
27
+ rounded:
28
+ values:
29
+ "true":
30
+ description: |
31
+ 모서리를 둥글게 처리합니다.
32
+ @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
33
+ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
34
+ "false":
35
+ description: |
36
+ 모서리를 둥글게 처리하지 않습니다.
37
+ @deprecated `rounded` 옵션은 @seed-design/react@1.3.0에서 제거될 예정입니다. `borderRadius="r2"`를 사용하세요.
38
+ Reason: 모서리 스타일은 `borderRadius` prop으로 통일합니다.
33
39
  definitions:
34
- rounded=true:
35
- enabled:
36
- root:
37
- cornerRadius: $radius.r2
38
- rounded=false:
39
- enabled:
40
- root:
41
- cornerRadius: 0px
42
40
  stroke=true:
43
41
  enabled:
44
42
  root:
@@ -48,3 +46,11 @@ data:
48
46
  enabled:
49
47
  root:
50
48
  strokeWidth: 0px
49
+ rounded=true:
50
+ enabled:
51
+ root:
52
+ cornerRadius: $radius.r2
53
+ rounded=false:
54
+ enabled:
55
+ root:
56
+ cornerRadius: 0px
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/rootage-artifacts",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",