@seed-design/rootage-artifacts 1.2.7 → 1.2.9
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.
- package/components/checkmark.yaml +0 -4
- package/components/content-placeholder.yaml +1 -1
- package/components/notification-badge.yaml +9 -4
- package/components/radiomark.yaml +0 -5
- package/components/switchmark.yaml +0 -5
- package/components/top-navigation-icon-button.yaml +39 -0
- package/components/top-navigation-text-button.yaml +60 -0
- package/components/top-navigation.yaml +51 -25
- package/package.json +1 -1
|
@@ -39,10 +39,6 @@ data:
|
|
|
39
39
|
description: 필수 선택 항목이고 사용자가 해당 내용을 인지해야 하는 경우 사용합니다.
|
|
40
40
|
ghost:
|
|
41
41
|
description: 필수 선택 항목이 아니고, 3개 이하 항목으로 구성되는 경우 사용하는 것을 권장합니다.
|
|
42
|
-
tone:
|
|
43
|
-
values:
|
|
44
|
-
brand:
|
|
45
|
-
description: "[deprecated] 주요 버튼 등의 핵심 액션과 시각적으로 충돌하기에 더 이상 사용하지 않습니다."
|
|
46
42
|
definitions:
|
|
47
43
|
base:
|
|
48
44
|
enabled:
|
|
@@ -10,6 +10,8 @@ data:
|
|
|
10
10
|
properties:
|
|
11
11
|
color:
|
|
12
12
|
type: color
|
|
13
|
+
minWidth:
|
|
14
|
+
type: dimension
|
|
13
15
|
minHeight:
|
|
14
16
|
type: dimension
|
|
15
17
|
paddingX:
|
|
@@ -40,9 +42,11 @@ data:
|
|
|
40
42
|
size:
|
|
41
43
|
values:
|
|
42
44
|
large:
|
|
43
|
-
description: 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다.
|
|
45
|
+
description: 라벨을 포함해 구체적인 알림 수나 상태 정보를 제공합니다. 세부 정보가 중요하고 충분한 공간이 있을 때 사용합니다. 내부
|
|
46
|
+
라벨을 반드시 포함해야 합니다.
|
|
44
47
|
small:
|
|
45
|
-
description: 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다.
|
|
48
|
+
description: 간결한 도트 형태로, 텍스트 없이 상태 변화만 표시합니다. 알림의 존재 여부만 중요하거나 공간이 제한된 경우에
|
|
49
|
+
적합합니다. 내부 라벨은 지원하지 않습니다.
|
|
46
50
|
definitions:
|
|
47
51
|
base:
|
|
48
52
|
enabled:
|
|
@@ -53,6 +57,7 @@ data:
|
|
|
53
57
|
size=large:
|
|
54
58
|
enabled:
|
|
55
59
|
root:
|
|
60
|
+
minWidth: 18px
|
|
56
61
|
minHeight: 18px
|
|
57
62
|
paddingX: $dimension.x1
|
|
58
63
|
paddingY: 0px
|
|
@@ -61,8 +66,8 @@ data:
|
|
|
61
66
|
iconAttachedInsetTop: 14px
|
|
62
67
|
textAttachedGap: 2px
|
|
63
68
|
label:
|
|
64
|
-
fontSize: $font-size.t1
|
|
65
|
-
lineHeight: $line-height.t1
|
|
69
|
+
fontSize: $font-size.t1-static
|
|
70
|
+
lineHeight: $line-height.t1-static
|
|
66
71
|
fontWeight: $font-weight.bold
|
|
67
72
|
size=small:
|
|
68
73
|
enabled:
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: top-navigation-icon-button
|
|
5
|
+
name: Top Navigation Icon Button
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
size:
|
|
12
|
+
type: dimension
|
|
13
|
+
icon:
|
|
14
|
+
properties:
|
|
15
|
+
size:
|
|
16
|
+
type: dimension
|
|
17
|
+
color:
|
|
18
|
+
type: color
|
|
19
|
+
definitions:
|
|
20
|
+
base:
|
|
21
|
+
enabled:
|
|
22
|
+
root:
|
|
23
|
+
size: 44px
|
|
24
|
+
icon:
|
|
25
|
+
size: 24px
|
|
26
|
+
tone=layer:
|
|
27
|
+
enabled:
|
|
28
|
+
icon:
|
|
29
|
+
color: $color.fg.neutral
|
|
30
|
+
disabled:
|
|
31
|
+
icon:
|
|
32
|
+
color: $color.fg.disabled
|
|
33
|
+
tone=transparent:
|
|
34
|
+
enabled:
|
|
35
|
+
icon:
|
|
36
|
+
color: $color.palette.static-white
|
|
37
|
+
disabled:
|
|
38
|
+
icon:
|
|
39
|
+
color: $color.fg.disabled
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
# yaml-language-server: $schema=./schema.json
|
|
2
|
+
kind: ComponentSpec
|
|
3
|
+
metadata:
|
|
4
|
+
id: top-navigation-text-button
|
|
5
|
+
name: Top Navigation Text Button
|
|
6
|
+
data:
|
|
7
|
+
schema:
|
|
8
|
+
slots:
|
|
9
|
+
root:
|
|
10
|
+
properties:
|
|
11
|
+
height:
|
|
12
|
+
type: dimension
|
|
13
|
+
paddingX:
|
|
14
|
+
type: dimension
|
|
15
|
+
label:
|
|
16
|
+
properties:
|
|
17
|
+
color:
|
|
18
|
+
type: color
|
|
19
|
+
fontSize:
|
|
20
|
+
type: dimension
|
|
21
|
+
lineHeight:
|
|
22
|
+
type: dimension
|
|
23
|
+
fontWeight:
|
|
24
|
+
type: number
|
|
25
|
+
maxFontSizeScale:
|
|
26
|
+
type: number
|
|
27
|
+
minFontSizeScale:
|
|
28
|
+
type: number
|
|
29
|
+
maxLineHeightScale:
|
|
30
|
+
type: number
|
|
31
|
+
minLineHeightScale:
|
|
32
|
+
type: number
|
|
33
|
+
definitions:
|
|
34
|
+
base:
|
|
35
|
+
enabled:
|
|
36
|
+
root:
|
|
37
|
+
height: 44px
|
|
38
|
+
paddingX: $dimension.x2_5
|
|
39
|
+
label:
|
|
40
|
+
fontSize: $font-size.t5
|
|
41
|
+
lineHeight: $line-height.t5
|
|
42
|
+
fontWeight: $font-weight.medium
|
|
43
|
+
maxFontSizeScale: 1.2
|
|
44
|
+
minFontSizeScale: 1
|
|
45
|
+
maxLineHeightScale: 1.2
|
|
46
|
+
minLineHeightScale: 1
|
|
47
|
+
tone=layer:
|
|
48
|
+
enabled:
|
|
49
|
+
label:
|
|
50
|
+
color: $color.fg.neutral
|
|
51
|
+
disabled:
|
|
52
|
+
label:
|
|
53
|
+
color: $color.fg.disabled
|
|
54
|
+
tone=transparent:
|
|
55
|
+
enabled:
|
|
56
|
+
label:
|
|
57
|
+
color: $color.palette.static-white
|
|
58
|
+
disabled:
|
|
59
|
+
label:
|
|
60
|
+
color: $color.fg.disabled
|
|
@@ -8,7 +8,7 @@ data:
|
|
|
8
8
|
slots:
|
|
9
9
|
root:
|
|
10
10
|
properties:
|
|
11
|
-
|
|
11
|
+
height:
|
|
12
12
|
type: dimension
|
|
13
13
|
paddingX:
|
|
14
14
|
type: dimension
|
|
@@ -18,14 +18,18 @@ data:
|
|
|
18
18
|
type: color
|
|
19
19
|
strokeWidth:
|
|
20
20
|
type: dimension
|
|
21
|
-
|
|
21
|
+
left:
|
|
22
|
+
properties: {}
|
|
23
|
+
description: 왼쪽 영역입니다. 일반적으로 뒤로가기/닫기 Top Navigation Icon Button이 위치합니다.
|
|
24
|
+
main:
|
|
22
25
|
properties:
|
|
23
|
-
|
|
26
|
+
paddingLeft:
|
|
24
27
|
type: dimension
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
28
|
+
description: title과 subtitle을 포함하는 영역입니다.
|
|
29
|
+
right:
|
|
30
|
+
properties: {}
|
|
31
|
+
description: 오른쪽 영역입니다. 일반적으로 Top Navigation Icon Button 또는 Top Navigation Text
|
|
32
|
+
Button이 위치합니다.
|
|
29
33
|
title:
|
|
30
34
|
properties:
|
|
31
35
|
color:
|
|
@@ -36,6 +40,14 @@ data:
|
|
|
36
40
|
type: number
|
|
37
41
|
lineHeight:
|
|
38
42
|
type: dimension
|
|
43
|
+
maxFontSizeScale:
|
|
44
|
+
type: number
|
|
45
|
+
minFontSizeScale:
|
|
46
|
+
type: number
|
|
47
|
+
maxLineHeightScale:
|
|
48
|
+
type: number
|
|
49
|
+
minLineHeightScale:
|
|
50
|
+
type: number
|
|
39
51
|
subtitle:
|
|
40
52
|
properties:
|
|
41
53
|
color:
|
|
@@ -46,23 +58,29 @@ data:
|
|
|
46
58
|
type: number
|
|
47
59
|
lineHeight:
|
|
48
60
|
type: dimension
|
|
61
|
+
maxFontSizeScale:
|
|
62
|
+
type: number
|
|
63
|
+
minFontSizeScale:
|
|
64
|
+
type: number
|
|
65
|
+
maxLineHeightScale:
|
|
66
|
+
type: number
|
|
67
|
+
minLineHeightScale:
|
|
68
|
+
type: number
|
|
49
69
|
definitions:
|
|
50
70
|
theme=cupertino:
|
|
51
71
|
enabled:
|
|
52
72
|
root:
|
|
53
|
-
|
|
73
|
+
height: 44px
|
|
54
74
|
paddingX: $dimension.x4
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
targetSize: 44px
|
|
75
|
+
# main:
|
|
76
|
+
# paddingLeft: $dimension.x1
|
|
58
77
|
theme=android:
|
|
59
78
|
enabled:
|
|
60
79
|
root:
|
|
61
|
-
|
|
80
|
+
height: 56px
|
|
62
81
|
paddingX: $dimension.x4
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
targetSize: 44px
|
|
82
|
+
main:
|
|
83
|
+
paddingLeft: 16px # should be $dimension.x1_5 after we add pressed styles to top navigation icon buttons and do the layout based on the button size rather than the icon size
|
|
66
84
|
tone=layer:
|
|
67
85
|
enabled:
|
|
68
86
|
root:
|
|
@@ -71,8 +89,6 @@ data:
|
|
|
71
89
|
color: $color.fg.neutral
|
|
72
90
|
subtitle:
|
|
73
91
|
color: $color.fg.neutral-muted
|
|
74
|
-
icon:
|
|
75
|
-
color: $color.fg.neutral
|
|
76
92
|
tone=transparent:
|
|
77
93
|
enabled:
|
|
78
94
|
root:
|
|
@@ -81,8 +97,6 @@ data:
|
|
|
81
97
|
color: $color.palette.static-white
|
|
82
98
|
subtitle:
|
|
83
99
|
color: $color.palette.static-white
|
|
84
|
-
icon:
|
|
85
|
-
color: $color.palette.static-white
|
|
86
100
|
divider=true:
|
|
87
101
|
enabled:
|
|
88
102
|
root:
|
|
@@ -91,16 +105,28 @@ data:
|
|
|
91
105
|
titleLayout=titleOnly:
|
|
92
106
|
enabled:
|
|
93
107
|
title:
|
|
94
|
-
fontSize: $font-size.t6
|
|
108
|
+
fontSize: $font-size.t6
|
|
95
109
|
fontWeight: $font-weight.bold
|
|
96
|
-
lineHeight: $line-height.t6
|
|
110
|
+
lineHeight: $line-height.t6
|
|
111
|
+
maxFontSizeScale: 1.2
|
|
112
|
+
minFontSizeScale: 1
|
|
113
|
+
maxLineHeightScale: 1.2
|
|
114
|
+
minLineHeightScale: 1
|
|
97
115
|
titleLayout=withSubtitle:
|
|
98
116
|
enabled:
|
|
99
117
|
title:
|
|
100
|
-
fontSize: $font-size.t5
|
|
118
|
+
fontSize: $font-size.t5
|
|
101
119
|
fontWeight: $font-weight.bold
|
|
102
|
-
lineHeight: $line-height.t5
|
|
120
|
+
lineHeight: $line-height.t5
|
|
121
|
+
maxFontSizeScale: 1.2
|
|
122
|
+
minFontSizeScale: 1
|
|
123
|
+
maxLineHeightScale: 1.2
|
|
124
|
+
minLineHeightScale: 1
|
|
103
125
|
subtitle:
|
|
104
|
-
fontSize: $font-size.t2
|
|
126
|
+
fontSize: $font-size.t2
|
|
105
127
|
fontWeight: $font-weight.regular
|
|
106
|
-
lineHeight: $line-height.t2
|
|
128
|
+
lineHeight: $line-height.t2
|
|
129
|
+
maxFontSizeScale: 1.2
|
|
130
|
+
minFontSizeScale: 1
|
|
131
|
+
maxLineHeightScale: 1.2
|
|
132
|
+
minLineHeightScale: 1
|