@symbo.ls/preview 3.0.1 → 3.1.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.
- package/articles/Colors.js +15 -12
- package/articles/Icons.js +9 -6
- package/articles/Shadows.js +9 -6
- package/articles/Shapes.js +9 -6
- package/articles/Spacing.js +9 -6
- package/articles/Themes.js +6 -14
- package/articles/Typography.js +9 -6
- package/blocks/color.js +2 -2
- package/blocks/icon.js +1 -2
- package/package.json +2 -2
- package/pages/Component.js +7 -4
- package/pages/Components.js +82 -96
- package/pages/Styleguide.js +9 -2
package/articles/Colors.js
CHANGED
|
@@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks'
|
|
|
4
4
|
|
|
5
5
|
export const Colors = {
|
|
6
6
|
tag: 'article',
|
|
7
|
-
|
|
7
|
+
display: 'flex',
|
|
8
8
|
|
|
9
9
|
props: {
|
|
10
10
|
margin: 'auto',
|
|
@@ -23,13 +23,17 @@ export const Colors = {
|
|
|
23
23
|
Flex: {
|
|
24
24
|
props: {},
|
|
25
25
|
Title: {},
|
|
26
|
-
Paragraph: [
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
26
|
+
Paragraph: [
|
|
27
|
+
{
|
|
28
|
+
props: { text: 'Brand color pallete' }
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
props: { text: 'Semantic colors' }
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
props: { text: 'Theming' }
|
|
35
|
+
}
|
|
36
|
+
]
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
39
|
},
|
|
@@ -50,7 +54,8 @@ export const Colors = {
|
|
|
50
54
|
Paragraph: {
|
|
51
55
|
children: ({ context }) => {
|
|
52
56
|
const { COLOR } = context.designSystem
|
|
53
|
-
return Object.keys(COLOR)
|
|
57
|
+
return Object.keys(COLOR)
|
|
58
|
+
.filter(v => COLOR[v].value)
|
|
54
59
|
.map(v => ({
|
|
55
60
|
Color: { background: v },
|
|
56
61
|
Description: {
|
|
@@ -69,9 +74,7 @@ export const Colors = {
|
|
|
69
74
|
props: {
|
|
70
75
|
childProps: { theme: 'dialog' }
|
|
71
76
|
},
|
|
72
|
-
...[
|
|
73
|
-
{}, {}, {}, {}, {}, {}, {}, {}
|
|
74
|
-
]
|
|
77
|
+
...[{}, {}, {}, {}, {}, {}, {}, {}]
|
|
75
78
|
}
|
|
76
79
|
}
|
|
77
80
|
}
|
package/articles/Icons.js
CHANGED
|
@@ -4,7 +4,7 @@ import { icon } from '../blocks'
|
|
|
4
4
|
|
|
5
5
|
export const Icons = {
|
|
6
6
|
tag: 'article',
|
|
7
|
-
|
|
7
|
+
display: 'flex',
|
|
8
8
|
|
|
9
9
|
Header: {
|
|
10
10
|
tag: 'header',
|
|
@@ -15,11 +15,14 @@ export const Icons = {
|
|
|
15
15
|
Flex: {
|
|
16
16
|
Title: {},
|
|
17
17
|
Paragraph: {
|
|
18
|
-
...[
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
...[
|
|
19
|
+
{
|
|
20
|
+
props: { text: 'Brand font' }
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
props: { text: 'Functional font' }
|
|
24
|
+
}
|
|
25
|
+
]
|
|
23
26
|
}
|
|
24
27
|
}
|
|
25
28
|
}
|
package/articles/Shadows.js
CHANGED
|
@@ -4,7 +4,7 @@ import { shadow } from '../blocks'
|
|
|
4
4
|
|
|
5
5
|
export const Shadows = {
|
|
6
6
|
tag: 'article',
|
|
7
|
-
|
|
7
|
+
display: 'flex',
|
|
8
8
|
|
|
9
9
|
Header: {
|
|
10
10
|
tag: 'header',
|
|
@@ -16,11 +16,14 @@ export const Shadows = {
|
|
|
16
16
|
Flex: {
|
|
17
17
|
Title: {},
|
|
18
18
|
Paragraph: {
|
|
19
|
-
...[
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
19
|
+
...[
|
|
20
|
+
{
|
|
21
|
+
props: { text: 'Brand font' }
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
props: { text: 'Functional font' }
|
|
25
|
+
}
|
|
26
|
+
]
|
|
24
27
|
}
|
|
25
28
|
}
|
|
26
29
|
}
|
package/articles/Shapes.js
CHANGED
|
@@ -4,7 +4,7 @@ import { shape } from '../blocks'
|
|
|
4
4
|
|
|
5
5
|
export const Shapes = {
|
|
6
6
|
tag: 'article',
|
|
7
|
-
|
|
7
|
+
display: 'flex',
|
|
8
8
|
|
|
9
9
|
Header: {
|
|
10
10
|
tag: 'header',
|
|
@@ -21,11 +21,14 @@ export const Shapes = {
|
|
|
21
21
|
Flex: {
|
|
22
22
|
Title: {},
|
|
23
23
|
Paragraph: {
|
|
24
|
-
...[
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
24
|
+
...[
|
|
25
|
+
{
|
|
26
|
+
props: { text: 'Brand font' }
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
props: { text: 'Functional font' }
|
|
30
|
+
}
|
|
31
|
+
]
|
|
29
32
|
}
|
|
30
33
|
}
|
|
31
34
|
}
|
package/articles/Spacing.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
export const Spacing = {
|
|
4
4
|
tag: 'article',
|
|
5
|
-
|
|
5
|
+
display: 'flex',
|
|
6
6
|
|
|
7
7
|
Header: {
|
|
8
8
|
tag: 'header',
|
|
@@ -19,11 +19,14 @@ export const Spacing = {
|
|
|
19
19
|
Flex: {
|
|
20
20
|
Title: {},
|
|
21
21
|
Paragraph: {
|
|
22
|
-
...[
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
22
|
+
...[
|
|
23
|
+
{
|
|
24
|
+
props: { text: 'Brand font' }
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
props: { text: 'Functional font' }
|
|
28
|
+
}
|
|
29
|
+
]
|
|
27
30
|
}
|
|
28
31
|
}
|
|
29
32
|
}
|
package/articles/Themes.js
CHANGED
|
@@ -4,7 +4,7 @@ import { ColorBlock } from '../blocks'
|
|
|
4
4
|
|
|
5
5
|
export const Themes = {
|
|
6
6
|
tag: 'article',
|
|
7
|
-
|
|
7
|
+
display: 'flex',
|
|
8
8
|
|
|
9
9
|
Banner: {
|
|
10
10
|
Title: { props: { text: 'Themes' } },
|
|
@@ -15,10 +15,7 @@ export const Themes = {
|
|
|
15
15
|
list: {
|
|
16
16
|
Title: { text: 'What you’ll find' },
|
|
17
17
|
Paragraph: {
|
|
18
|
-
...[
|
|
19
|
-
{ text: 'Dark theme' },
|
|
20
|
-
{ text: 'Light theme' }
|
|
21
|
-
]
|
|
18
|
+
...[{ text: 'Dark theme' }, { text: 'Light theme' }]
|
|
22
19
|
}
|
|
23
20
|
},
|
|
24
21
|
P: {
|
|
@@ -45,24 +42,21 @@ export const Themes = {
|
|
|
45
42
|
}
|
|
46
43
|
},
|
|
47
44
|
childExtends: {
|
|
48
|
-
|
|
45
|
+
display: 'flex',
|
|
49
46
|
props: {
|
|
50
47
|
flow: 'column',
|
|
51
48
|
align: 'flex-start space-between',
|
|
52
49
|
padding: 'Z1 Z2'
|
|
53
50
|
},
|
|
54
51
|
icons: {
|
|
55
|
-
|
|
52
|
+
display: 'flex',
|
|
56
53
|
props: {
|
|
57
54
|
gap: 'B',
|
|
58
55
|
align: 'center space-between',
|
|
59
56
|
minWidth: '100%'
|
|
60
57
|
},
|
|
61
58
|
childExtends: 'Icon',
|
|
62
|
-
children: [
|
|
63
|
-
{ name: 'sun' },
|
|
64
|
-
{ name: 'moon' }
|
|
65
|
-
]
|
|
59
|
+
children: [{ name: 'sun' }, { name: 'moon' }]
|
|
66
60
|
},
|
|
67
61
|
title: {
|
|
68
62
|
tag: 'h6',
|
|
@@ -75,15 +69,13 @@ export const Themes = {
|
|
|
75
69
|
},
|
|
76
70
|
...[{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]
|
|
77
71
|
}
|
|
78
|
-
|
|
79
72
|
},
|
|
80
73
|
...[
|
|
81
74
|
{
|
|
82
75
|
Hgroup: {
|
|
83
76
|
Title: { props: { text: 'Dark Theme' } }
|
|
84
77
|
},
|
|
85
|
-
Grid: {
|
|
86
|
-
}
|
|
78
|
+
Grid: {}
|
|
87
79
|
}
|
|
88
80
|
]
|
|
89
81
|
}
|
package/articles/Typography.js
CHANGED
|
@@ -4,7 +4,7 @@ import { FontsBlock } from '../blocks'
|
|
|
4
4
|
|
|
5
5
|
export const Typography = {
|
|
6
6
|
tag: 'article',
|
|
7
|
-
|
|
7
|
+
display: 'flex',
|
|
8
8
|
|
|
9
9
|
Header: {
|
|
10
10
|
tag: 'header',
|
|
@@ -20,11 +20,14 @@ export const Typography = {
|
|
|
20
20
|
Flex: {
|
|
21
21
|
Title: {},
|
|
22
22
|
Paragraph: {
|
|
23
|
-
...[
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
...[
|
|
24
|
+
{
|
|
25
|
+
props: { text: 'Brand font' }
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
props: { text: 'Functional font' }
|
|
29
|
+
}
|
|
30
|
+
]
|
|
28
31
|
}
|
|
29
32
|
}
|
|
30
33
|
}
|
package/blocks/color.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { DefaultBlock } from './section'
|
|
4
4
|
|
|
5
5
|
const ColorTemplate = {
|
|
6
|
-
|
|
6
|
+
display: 'flex',
|
|
7
7
|
props: {
|
|
8
8
|
gap: 'A'
|
|
9
9
|
},
|
|
@@ -16,7 +16,7 @@ const ColorTemplate = {
|
|
|
16
16
|
},
|
|
17
17
|
|
|
18
18
|
Description: {
|
|
19
|
-
|
|
19
|
+
display: 'flex',
|
|
20
20
|
props: { gap: 'X', flow: 'column' },
|
|
21
21
|
Title: { color: 'title' },
|
|
22
22
|
Value: { margin: 'X - -', color: 'paragraph' },
|
package/blocks/icon.js
CHANGED
|
@@ -23,7 +23,7 @@ export const icon = {
|
|
|
23
23
|
// padding: 'E D E2 D'
|
|
24
24
|
},
|
|
25
25
|
childExtends: {
|
|
26
|
-
|
|
26
|
+
display: 'flex',
|
|
27
27
|
props: {
|
|
28
28
|
align: 'center',
|
|
29
29
|
aspectRatio: '1/1',
|
|
@@ -48,6 +48,5 @@ export const icon = {
|
|
|
48
48
|
Icon: { name }
|
|
49
49
|
}))
|
|
50
50
|
}
|
|
51
|
-
|
|
52
51
|
}
|
|
53
52
|
}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@symbo.ls/preview",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.1.2",
|
|
4
4
|
"main": "index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"gitHead": "
|
|
6
|
+
"gitHead": "429b36616aa04c8587a26ce3c129815115e35897",
|
|
7
7
|
"source": "src/index.js"
|
|
8
8
|
}
|
package/pages/Component.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
3
|
export const Component = {
|
|
4
|
-
|
|
4
|
+
display: 'flex',
|
|
5
5
|
props: {
|
|
6
6
|
align: 'center center',
|
|
7
7
|
minHeight: '100vh'
|
|
@@ -12,7 +12,7 @@ export const Component = {
|
|
|
12
12
|
const urlParams = new URLSearchParams(window.location.search)
|
|
13
13
|
return !urlParams.get('hideUi') || !urlParams.get('fullsize')
|
|
14
14
|
},
|
|
15
|
-
|
|
15
|
+
display: 'flex',
|
|
16
16
|
props: {
|
|
17
17
|
align: 'center space-between',
|
|
18
18
|
position: 'absolute',
|
|
@@ -20,7 +20,10 @@ export const Component = {
|
|
|
20
20
|
background: 'black 0.15',
|
|
21
21
|
padding: 'Z A'
|
|
22
22
|
},
|
|
23
|
-
'Link+SquareButton': {
|
|
23
|
+
'Link+SquareButton': {
|
|
24
|
+
Icon: { name: 'symbols', fontSize: 'B' },
|
|
25
|
+
href: '/'
|
|
26
|
+
},
|
|
24
27
|
OpenInSymbols: () => {
|
|
25
28
|
const urlParams = new URLSearchParams(window.location.search)
|
|
26
29
|
const key = urlParams.get('key') || 'Logo'
|
|
@@ -49,7 +52,7 @@ export const Component = {
|
|
|
49
52
|
const schema = ctx.schema[factory][key]
|
|
50
53
|
return {
|
|
51
54
|
key,
|
|
52
|
-
|
|
55
|
+
display: 'flex',
|
|
53
56
|
state: schema.state,
|
|
54
57
|
props: () => ({
|
|
55
58
|
class: 'component',
|
package/pages/Components.js
CHANGED
|
@@ -1,48 +1,41 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
3
|
export const ComponentsPage = {
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
display: 'flex',
|
|
6
5
|
state: {
|
|
7
6
|
globalTheme: 'dark',
|
|
8
7
|
value: ''
|
|
9
8
|
},
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
scrollBehavior: 'smooth'
|
|
22
|
-
}
|
|
10
|
+
FleX: {
|
|
11
|
+
flow: 'column',
|
|
12
|
+
padding: 'F E E D',
|
|
13
|
+
gap: 'E+C',
|
|
14
|
+
minWidth: 'calc(100% - 70px)',
|
|
15
|
+
height: '100dvh',
|
|
16
|
+
margin: '- - - auto',
|
|
17
|
+
style: {
|
|
18
|
+
overflowY: 'auto',
|
|
19
|
+
scrollBehavior: 'smooth'
|
|
23
20
|
},
|
|
24
21
|
|
|
25
22
|
childExtends: {
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
top: '-C',
|
|
36
|
-
fontSize: '14px',
|
|
37
|
-
color: 'white .35'
|
|
38
|
-
},
|
|
23
|
+
hide: ({ key, state }) => !key.toLowerCase().includes(state.value),
|
|
24
|
+
position: 'relative',
|
|
25
|
+
Title: {
|
|
26
|
+
ignoreChildExtends: true,
|
|
27
|
+
position: 'absolute',
|
|
28
|
+
left: '0',
|
|
29
|
+
top: '-C',
|
|
30
|
+
fontSize: '14px',
|
|
31
|
+
color: 'white .35',
|
|
39
32
|
text: ({ parent }) => parent.key
|
|
40
33
|
}
|
|
41
34
|
},
|
|
42
35
|
|
|
43
36
|
H1: {
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
hide: false,
|
|
38
|
+
Title: { text: 'Searched value:' },
|
|
46
39
|
text: ({ state }) => state.value
|
|
47
40
|
},
|
|
48
41
|
|
|
@@ -54,11 +47,14 @@ export const ComponentsPage = {
|
|
|
54
47
|
...[{}, {}, {}]
|
|
55
48
|
},
|
|
56
49
|
AvatarChooser: {
|
|
57
|
-
options: [
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
50
|
+
options: [
|
|
51
|
+
{
|
|
52
|
+
text: 'Kevin'
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
text: 'John'
|
|
56
|
+
}
|
|
57
|
+
]
|
|
62
58
|
},
|
|
63
59
|
Hgroup: {
|
|
64
60
|
Title: { text: 'Title' },
|
|
@@ -114,13 +110,13 @@ export const ComponentsPage = {
|
|
|
114
110
|
UploadingProcess3: {},
|
|
115
111
|
UploadedProcess3: {},
|
|
116
112
|
ProgressCircle: {},
|
|
117
|
-
|
|
113
|
+
ProgresICircleWithIcon: {},
|
|
118
114
|
ProgressCircleWithUnitValue: {},
|
|
119
115
|
UploadingProcess4: {},
|
|
120
116
|
UploadedProcess4: {},
|
|
121
117
|
UploadModal4: {},
|
|
122
118
|
|
|
123
|
-
|
|
119
|
+
CheckboX: {},
|
|
124
120
|
Radio: {},
|
|
125
121
|
Toggle: {},
|
|
126
122
|
NumberInput: {},
|
|
@@ -134,7 +130,7 @@ export const ComponentsPage = {
|
|
|
134
130
|
ParagraphButton: {},
|
|
135
131
|
VerificationCode: {},
|
|
136
132
|
ResetPassword: {},
|
|
137
|
-
|
|
133
|
+
ParagraphButtonWithCheckboX: {},
|
|
138
134
|
ContactForm: {},
|
|
139
135
|
SignUp: {},
|
|
140
136
|
DoubleHr: {},
|
|
@@ -176,82 +172,72 @@ export const ComponentsPage = {
|
|
|
176
172
|
},
|
|
177
173
|
|
|
178
174
|
Flex_footer: {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
'
|
|
188
|
-
|
|
189
|
-
|
|
175
|
+
position: 'fixed',
|
|
176
|
+
width: 'calc(100% - 70px)',
|
|
177
|
+
zIndex: '100',
|
|
178
|
+
bottom: '0',
|
|
179
|
+
right: '0',
|
|
180
|
+
align: 'center flex-end',
|
|
181
|
+
padding: '- B B -',
|
|
182
|
+
'@mobile': {
|
|
183
|
+
justifyContent: 'center',
|
|
184
|
+
padding: '- 20px 30px 20px'
|
|
185
|
+
},
|
|
186
|
+
Search: {
|
|
187
|
+
fontFamily: 'avenir',
|
|
188
|
+
fontWeight: '400',
|
|
189
|
+
round: 'D',
|
|
190
|
+
flow: 'row',
|
|
191
|
+
border: 'solid, #252527',
|
|
192
|
+
borderWidth: '1px',
|
|
193
|
+
width: 'G+D',
|
|
194
|
+
padding: 'Z A Z B',
|
|
195
|
+
position: 'relative',
|
|
196
|
+
Icon: {
|
|
197
|
+
boxSize: 'A+V A+V',
|
|
198
|
+
color: '#3F3F43'
|
|
190
199
|
},
|
|
191
|
-
|
|
200
|
+
Input: {
|
|
192
201
|
fontFamily: 'avenir',
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
Icon: {
|
|
202
|
-
boxSize: 'A+V A+V',
|
|
203
|
-
color: '#3F3F43'
|
|
204
|
-
},
|
|
205
|
-
input: {
|
|
206
|
-
fontFamily: 'avenir',
|
|
207
|
-
placeholder: 'find component . . .',
|
|
208
|
-
fontSize: 'A',
|
|
209
|
-
':focus ~ svg': { opacity: '0' }
|
|
210
|
-
},
|
|
211
|
-
x: {
|
|
212
|
-
color: 'white',
|
|
213
|
-
position: 'absolute',
|
|
214
|
-
right: 'A'
|
|
215
|
-
}
|
|
202
|
+
placeholder: 'find component . . .',
|
|
203
|
+
fontSize: 'A',
|
|
204
|
+
':focus ~ svg': { opacity: '0' }
|
|
205
|
+
},
|
|
206
|
+
X: {
|
|
207
|
+
color: 'white',
|
|
208
|
+
position: 'absolute',
|
|
209
|
+
right: 'A'
|
|
216
210
|
}
|
|
217
211
|
},
|
|
218
212
|
Search: {
|
|
219
213
|
extends: 'SearchWithButton',
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
background: 'transparent'
|
|
228
|
-
},
|
|
214
|
+
minWidth: 'G+C',
|
|
215
|
+
minHeight: 'C+X',
|
|
216
|
+
maxHeight: 'C+Z',
|
|
217
|
+
round: 'C',
|
|
218
|
+
padding: '- A+W - A+Y',
|
|
219
|
+
border: '1px solid #3F3F43',
|
|
220
|
+
background: 'transparent',
|
|
229
221
|
Input: {
|
|
230
222
|
props: {
|
|
231
223
|
fontSize: 'Z1',
|
|
232
224
|
placeholder: 'Find component ...',
|
|
233
225
|
':focus ~ svg': { opacity: '0' }
|
|
234
226
|
},
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
s.update({ value })
|
|
239
|
-
}
|
|
227
|
+
onKeyup: (event, el, s) => {
|
|
228
|
+
const value = el.node.value.toLowerCase()
|
|
229
|
+
s.update({ value })
|
|
240
230
|
}
|
|
241
231
|
},
|
|
242
232
|
Icon: {
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
color: '#3F3F43'
|
|
246
|
-
}
|
|
233
|
+
fontSize: 'C',
|
|
234
|
+
color: '#3F3F43'
|
|
247
235
|
},
|
|
248
236
|
Button: {
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
color: '#3F3F43'
|
|
254
|
-
}
|
|
237
|
+
position: 'absolute',
|
|
238
|
+
margin: 'auto',
|
|
239
|
+
right: 'Z',
|
|
240
|
+
color: '#3F3F43'
|
|
255
241
|
}
|
|
256
242
|
}
|
|
257
243
|
}
|
package/pages/Styleguide.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
'use strict'
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
Colors,
|
|
5
|
+
Typography,
|
|
6
|
+
Shadows,
|
|
7
|
+
Icons,
|
|
8
|
+
Spacing,
|
|
9
|
+
Shapes
|
|
10
|
+
} from '../articles'
|
|
4
11
|
|
|
5
12
|
export const Styleguide = {
|
|
6
|
-
|
|
13
|
+
display: 'flex',
|
|
7
14
|
tag: 'main',
|
|
8
15
|
|
|
9
16
|
props: {
|