UNPKG

wix-style-react

Version:

wix-style-react

github.com/wix-private/wix-design-systems

wix-private/wix-design-systems

111 lines (110 loc) • 3.86 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
export const playground = ` <div> <ThemeProvider theme={theme()}> <Box padding="3px"> <Text size="small" skin="error">skin="error" size="small"</Text> </Box> <hr /> <Box padding="3px"> <Text size="tiny" skin="error" weight="normal">skin="error" size="tiny" weight="normal"</Text> </Box> <Box padding="3px"> <Text size="tiny" skin="success" weight="normal">skin="success" size="tiny" weight="normal"</Text> </Box> <Box padding="3px"> <Text size="tiny" skin="standard" weight="normal">skin="standard" size="tiny" weight="normal"</Text> </Box> <hr /> <Box padding="3px"> <Text>skin="standard" size="medium"</Text> </Box> <Box padding="3px"> <Text size="small">skin="standard" size="small"</Text> </Box> <Box padding="3px"> <Text size="tiny">skin="standard" size="tiny"</Text> </Box> <hr /> <Box padding="3px"> <Text skin="primary">skin="primary" size="medium"</Text> </Box> <Box padding="3px"> <Text skin="primary" size="small">skin="primary" size="small"</Text> </Box> <Box padding="3px"> <Text skin="primary" size="tiny">skin="primary" size="tiny"</Text> </Box> <hr /> <Box padding="3px"> <Text skin="disabled">skin="disabled" size="medium"</Text> </Box> <Box padding="3px"> <Text size="small" skin="disabled">skin="disabled" size="small"</Text> </Box> <Box padding="3px"> <Text size="tiny" skin="disabled">skin="disabled" size="tiny"</Text> </Box> <hr /> <Box padding="3px"> <Text secondary light>size="medium" secondary light</Text> </Box> <Box padding="3px"> <Text size="small" secondary light>size="small" secondary light</Text> </Box> <Box padding="3px"> <Text size="tiny" secondary light>size="tiny" secondary light</Text> </Box> <hr /> <Box padding="3px"> <Text weight="bold">skin="standard" size="medium" weight="bold"</Text> </Box> <Box padding="3px"> <Text size="small" weight="bold">skin="standard" size="small" weight="bold"</Text> </Box> <Box padding="3px"> <Text size="tiny" weight="bold">skin="standard" size="tiny" weight="bold"</Text> </Box> <hr /> <Box padding="3px"> <Text skin="primary" weight="bold">skin="primary" size="medium" weight="bold"</Text> </Box> <Box padding="3px"> <Text skin="primary" size="small" weight="bold">skin="primary" size="small" weight="bold"</Text> </Box> <Box padding="3px"> <Text skin="primary" size="tiny" weight="bold">skin="primary" size="tiny" weight="bold"</Text> </Box> <hr /> <Box padding="3px"> <Text secondary>skin="standard" size="medium" secondary</Text> </Box> <Box padding="3px"> <Text secondary size="small">skin="standard" size="small" secondary</Text> </Box> <Box padding="3px"> <Text secondary size="tiny">skin="standard" size="tiny" secondary</Text> </Box> <hr /> <Box backgroundColor="D10" padding="3px"> <Text light>size="medium" light</Text> </Box> <Box backgroundColor="D10" padding="3px"> <Text size="small" light>size="small" light</Text> </Box> <Box backgroundColor="D10" padding="3px"> <Text size="tiny" light>size="tiny" light</Text> </Box> <hr /> <Box backgroundColor="D10" padding="3px"> <Text light weight="bold">skin="standard" weight="bold" size="medium" light</Text> </Box> <Box backgroundColor="D10" padding="3px"> <Text size="small" light weight="bold">skin="standard" weight="bold" size="small" light</Text> </Box> <Box backgroundColor="D10" padding="3px"> <Text size="tiny" light weight="bold">skin="standard" weight="bold" size="tiny" light</Text> </Box> <hr /> </ThemeProvider> </div> `;