@kommon-lab/tokens 0.1.0

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.
@@ -0,0 +1,213 @@
1
+ {
2
+ "font": {
3
+ "family": { "value": "Fredoka" },
4
+ "weight": {
5
+ "regular": { "value": "400" },
6
+ "semi-bold": { "value": "600" },
7
+ "bold": { "value": "700" },
8
+ "extra-bold": { "value": 800 }
9
+ }
10
+ },
11
+ "color": {
12
+ "bg": {
13
+ "brand": { "value": "{kitchoun.purple.400}" },
14
+ "base": { "value": "{global.white}" },
15
+ "alternate": { "value": "{global.grey.50}" }
16
+ },
17
+ "fg": {
18
+ "brand": { "value": "{global.kiabi.900}" },
19
+ "neutral": { "value": "{global.grey.800}" },
20
+ "subtle": { "value": "{global.grey.500}" },
21
+ "inverse": { "value": "{global.white}" }
22
+ }
23
+ },
24
+ "focus": { "value": "{global.blue.400}" },
25
+ "action": {
26
+ "bg": {
27
+ "disabled": { "value": "{global.grey.100}" },
28
+ "brand": {
29
+ "primary": {
30
+ "default": { "value": "{kitchoun.purple.400}" },
31
+ "hover": { "value": "{kitchoun.purple.400}" }
32
+ },
33
+ "secondary": {
34
+ "default": { "value": "{beebs.grey.white}", "opacity": 0 },
35
+ "hover": { "value": "{kitchoun.purple.50}" }
36
+ }
37
+ },
38
+ "inverse": {
39
+ "primary": {
40
+ "default": { "value": "{global.white}" },
41
+ "hover": { "value": "{kitchoun.purple.50}" }
42
+ },
43
+ "secondary": {
44
+ "default": { "value": "{beebs.grey.white}", "opacity": 0 },
45
+ "hover": { "value": "{beebs.grey.white}", "opacity": 0.18 }
46
+ }
47
+ },
48
+ "alert": {
49
+ "primary": {
50
+ "default": { "value": "{global.red.500}" },
51
+ "hover": { "value": "{global.red.600}" }
52
+ },
53
+ "secondary": {
54
+ "default": { "value": "{global.red.50}", "opacity": 0 },
55
+ "hover": { "value": "{global.red.50}" }
56
+ }
57
+ }
58
+ },
59
+ "ripple": {
60
+ "brand": {
61
+ "primary": { "value": "{beebs.grey.white}", "opacity": 0.12 },
62
+ "secondary": { "value": "{kitchoun.purple.400}", "opacity": 0.12 }
63
+ },
64
+ "alert": {
65
+ "primary": { "value": "{beebs.grey.white}", "opacity": 0.12 },
66
+ "secondary": { "value": "{global.red.500}", "opacity": 0.08 }
67
+ },
68
+ "inverse": {
69
+ "primary": { "value": "{kitchoun.purple.400}", "opacity": 0.12 },
70
+ "secondary": { "value": "{kitchoun.purple.400}", "opacity": 0.12 }
71
+ }
72
+ },
73
+ "fg": {
74
+ "on-disabled": { "value": "{global.grey.400}" },
75
+ "brand": { "value": "{global.kiabi.900}" },
76
+ "inverse": { "value": "{global.white}" },
77
+ "on-brand": {
78
+ "primary": { "value": "{global.kiabi.900}" },
79
+ "secondary": { "value": "{global.kiabi.900}" }
80
+ },
81
+ "on-inverse": {
82
+ "primary": { "value": "{global.kiabi.900}" },
83
+ "secondary": { "value": "{global.white}" }
84
+ },
85
+ "on-alert": {
86
+ "primary": { "value": "{global.white}" },
87
+ "secondary": { "value": "{global.red.500}" }
88
+ }
89
+ },
90
+ "border": {
91
+ "brand": { "value": "{kitchoun.purple.400}" },
92
+ "inverse": { "value": "{global.white}" },
93
+ "alert": { "value": "{global.red.500}" }
94
+ }
95
+ },
96
+ "control": {
97
+ "bg": {
98
+ "default": { "value": "{global.white}" },
99
+ "disabled": { "value": "{global.grey.100}" },
100
+ "selected": {
101
+ "default": { "value": "{kitchoun.purple.600}" },
102
+ "hover": { "value": "{kitchoun.purple.700}" }
103
+ }
104
+ },
105
+ "border": {
106
+ "default": { "value": "{global.grey.400}" },
107
+ "hover": { "value": "{global.grey.600}" },
108
+ "selected": { "value": "{kitchoun.purple.600}" },
109
+ "alert": { "value": "{global.red.500}" },
110
+ "success": { "value": "{global.green.500}" }
111
+ },
112
+ "fg": {
113
+ "neutral": { "value": "{global.grey.800}" },
114
+ "subtle": { "value": "{global.grey.500}" },
115
+ "selected": { "value": "{kitchoun.purple.600}" },
116
+ "disabled": { "value": "{global.grey.400}" },
117
+ "inverse": { "value": "{global.white}" }
118
+ }
119
+ },
120
+ "feedback": {
121
+ "bg": {
122
+ "alert": { "value": "{global.red.50}" },
123
+ "alert-bold": { "value": "{global.red.500}" },
124
+ "info": { "value": "{global.kiabi.50}" },
125
+ "info-bold": { "value": "{global.kiabi.500}" },
126
+ "success": { "value": "{global.green.50}" },
127
+ "success-bold": { "value": "{global.green.500}" },
128
+ "warning": { "value": "{global.orange.50}" },
129
+ "warning-bold": { "value": "{global.orange.600}" },
130
+ "neutral": { "value": "{global.grey.50}" },
131
+ "neutral-bold": { "value": "{global.grey.500}" },
132
+ "operational": { "value": "{global.red.500}" },
133
+ "best-seller": { "value": "{global.orange.500}" },
134
+ "service": { "value": "{global.blue.500}" },
135
+ "inverse": { "value": "{global.white}" }
136
+ },
137
+ "border": {
138
+ "alert": { "value": "{global.red.500}" },
139
+ "info": { "value": "{global.kiabi.500}" },
140
+ "success": { "value": "{global.green.500}" },
141
+ "warning": { "value": "{global.orange.500}" },
142
+ "neutral": { "value": "{global.grey.500}" },
143
+ "brand": { "value": "{global.kiabi.900}" }
144
+ },
145
+ "fg": {
146
+ "alert": { "value": "{global.red.500}" },
147
+ "info": { "value": "{global.kiabi.500}" },
148
+ "success": { "value": "{global.green.500}" },
149
+ "warning": { "value": "{global.orange.600}" },
150
+ "neutral": { "value": "{global.grey.800}" },
151
+ "subtle": { "value": "{global.grey.500}" },
152
+ "brand": { "value": "{kitchoun.purple.600}" },
153
+ "inverse": { "value": "{global.white}" }
154
+ }
155
+ },
156
+ "layout": {
157
+ "bg": {
158
+ "default": { "value": "{global.white}" },
159
+ "inverse": { "value": "{kitchoun.purple.400}" },
160
+ "overlay": { "value": "{global.kiabi.900}", "opacity": 0.3 }
161
+ },
162
+ "border": {
163
+ "default": { "value": "{global.grey.50}" },
164
+ "inverse": { "value": "{global.kiabi.800}" }
165
+ },
166
+ "fg": {
167
+ "default": { "value": "{global.kiabi.900}" },
168
+ "inverse": { "value": "{global.white}" }
169
+ }
170
+ },
171
+ "navigation": {
172
+ "bg": {
173
+ "default": { "value": "{global.white}" },
174
+ "hover": { "value": "{global.grey.50}" },
175
+ "pressed": { "value": "{global.grey.100}" },
176
+ "brand": { "value": "{kitchoun.purple.600}" },
177
+ "neutral": { "value": "{global.grey.200}" },
178
+ "disabled": { "value": "{global.grey.100}" }
179
+ },
180
+ "fg": {
181
+ "brand": { "value": "{global.kiabi.900}" },
182
+ "neutral": { "value": "{global.grey.600}" },
183
+ "inverse": { "value": "{global.white}" },
184
+ "disabled": { "value": "{global.grey.400}" }
185
+ },
186
+ "border": {
187
+ "brand": { "value": "{global.kiabi.900}" },
188
+ "neutral": { "value": "{global.grey.200}" }
189
+ }
190
+ },
191
+ "theme": {
192
+ "theme-1": {
193
+ "bg": { "value": "{global.white}" },
194
+ "fg": { "value": "{global.kiabi.900}" },
195
+ "button": { "value": "Brand" }
196
+ },
197
+ "theme-2": {
198
+ "bg": { "value": "{kitchoun.purple.100}" },
199
+ "fg": { "value": "{global.kiabi.900}" },
200
+ "button": { "value": "Brand" }
201
+ },
202
+ "theme-3": {
203
+ "bg": { "value": "{kitchoun.purple.300}" },
204
+ "fg": { "value": "{global.kiabi.900}" },
205
+ "button": { "value": "Inverse" }
206
+ },
207
+ "theme-4": {
208
+ "bg": { "value": "{kitchoun.purple.600}" },
209
+ "fg": { "value": "{global.white}" },
210
+ "button": { "value": "Inverse" }
211
+ }
212
+ }
213
+ }
@@ -0,0 +1,60 @@
1
+ {
2
+ "size": {
3
+ "0": { "value": 0 },
4
+ "25": { "value": 4 },
5
+ "50": { "value": 8 },
6
+ "75": { "value": 12 },
7
+ "100": { "value": 16 },
8
+ "125": { "value": 20 },
9
+ "150": { "value": 24 },
10
+ "175": { "value": 28 },
11
+ "200": { "value": 32 },
12
+ "225": { "value": 36 },
13
+ "250": { "value": 40 },
14
+ "275": { "value": 44 },
15
+ "300": { "value": 48 },
16
+ "325": { "value": 52 },
17
+ "350": { "value": 56 },
18
+ "375": { "value": 60 },
19
+ "400": { "value": 64 },
20
+ "425": { "value": 68 },
21
+ "450": { "value": 72 },
22
+ "475": { "value": 76 },
23
+ "500": { "value": 80 }
24
+ },
25
+ "space": {
26
+ "0": { "value": 0 },
27
+ "12": { "value": 2 },
28
+ "25": { "value": 4 },
29
+ "50": { "value": 8 },
30
+ "75": { "value": 12 },
31
+ "100": { "value": 16 },
32
+ "125": { "value": 20 },
33
+ "150": { "value": 24 },
34
+ "175": { "value": 28 },
35
+ "200": { "value": 32 },
36
+ "225": { "value": 36 },
37
+ "250": { "value": 40 },
38
+ "275": { "value": 44 },
39
+ "300": { "value": 48 },
40
+ "325": { "value": 52 },
41
+ "350": { "value": 56 },
42
+ "375": { "value": 60 },
43
+ "400": { "value": 64 }
44
+ },
45
+ "radius": {
46
+ "0": { "value": 0 },
47
+ "25": { "value": 4 },
48
+ "50": { "value": 8 },
49
+ "75": { "value": 12 },
50
+ "100": { "value": 16 },
51
+ "125": { "value": 20 },
52
+ "150": { "value": 24 },
53
+ "pill": { "value": 999 }
54
+ },
55
+ "stroke": {
56
+ "0": { "value": 0 },
57
+ "100": { "value": 1 },
58
+ "200": { "value": 2 }
59
+ }
60
+ }
@@ -0,0 +1,42 @@
1
+ {
2
+ "size": {
3
+ "xxxs": { "value": "{size.125}" },
4
+ "xxs": { "value": "{size.150}" },
5
+ "xs": { "value": "{size.200}" },
6
+ "s": { "value": "{size.225}" },
7
+ "m": { "value": "{size.250}" },
8
+ "l": { "value": "{size.300}" },
9
+ "xl": { "value": "{size.350}" },
10
+ "xxl": { "value": "{size.400}" },
11
+ "xxxl": { "value": "{size.500}" }
12
+ },
13
+ "space": {
14
+ "none": { "value": "{space.0}" },
15
+ "xxxxs": { "value": "{space.12}" },
16
+ "xxxs": { "value": "{space.25}" },
17
+ "xxs": { "value": "{space.50}" },
18
+ "xs": { "value": "{space.75}" },
19
+ "s": { "value": "{space.100}" },
20
+ "m": { "value": "{space.125}" },
21
+ "l": { "value": "{space.150}" },
22
+ "xl": { "value": "{space.200}" },
23
+ "xxl": { "value": "{space.250}" },
24
+ "xxxl": { "value": "{space.300}" },
25
+ "xxxxl": { "value": "{space.350}" }
26
+ },
27
+ "border": {
28
+ "width": {
29
+ "thin": { "value": "{stroke.100}" },
30
+ "thick": { "value": "{stroke.200}" }
31
+ },
32
+ "radius": {
33
+ "none": { "value": "{radius.0}" },
34
+ "xs": { "value": "{radius.25}" },
35
+ "s": { "value": "{radius.50}" },
36
+ "m": { "value": "{radius.75}" },
37
+ "l": { "value": "{radius.100}" },
38
+ "xl": { "value": "{radius.150}" },
39
+ "pill": { "value": "{radius.pill}" }
40
+ }
41
+ }
42
+ }
@@ -0,0 +1,74 @@
1
+ {
2
+ "font": {
3
+ "display": {
4
+ "l": {
5
+ "$type": "typography",
6
+ "value": {
7
+ "fontFamily": "{font.family}",
8
+ "fontSize": "3rem",
9
+ "lineHeight": "100%",
10
+ "fontWeight": "{font.weight.bold}",
11
+ "letterSpacing": 0,
12
+ "textDecoration": "none"
13
+ }
14
+ },
15
+ "m": {
16
+ "$type": "typography",
17
+ "value": {
18
+ "fontFamily": "{font.family}",
19
+ "fontSize": "2.375rem",
20
+ "lineHeight": "100%",
21
+ "fontWeight": "{font.weight.bold}",
22
+ "letterSpacing": 0,
23
+ "textDecoration": "none"
24
+ }
25
+ }
26
+ },
27
+ "title": {
28
+ "l": {
29
+ "$type": "typography",
30
+ "value": {
31
+ "fontFamily": "{font.family}",
32
+ "fontSize": "2rem",
33
+ "lineHeight": "120%",
34
+ "fontWeight": "{font.weight.extra-bold}",
35
+ "letterSpacing": 0,
36
+ "textDecoration": "none"
37
+ }
38
+ },
39
+ "m": {
40
+ "$type": "typography",
41
+ "value": {
42
+ "fontFamily": "{font.family}",
43
+ "fontSize": "1.75rem",
44
+ "lineHeight": "120%",
45
+ "fontWeight": "{font.weight.extra-bold}",
46
+ "letterSpacing": 0,
47
+ "textDecoration": "none"
48
+ }
49
+ },
50
+ "s": {
51
+ "$type": "typography",
52
+ "value": {
53
+ "fontFamily": "{font.family}",
54
+ "fontSize": "1.5rem",
55
+ "lineHeight": "120%",
56
+ "fontWeight": "{font.weight.extra-bold}",
57
+ "letterSpacing": 0,
58
+ "textDecoration": "none"
59
+ }
60
+ },
61
+ "xs": {
62
+ "$type": "typography",
63
+ "value": {
64
+ "fontFamily": "{font.family}",
65
+ "fontSize": "1.25rem",
66
+ "lineHeight": "120%",
67
+ "fontWeight": "{font.weight.extra-bold}",
68
+ "letterSpacing": 0,
69
+ "textDecoration": "none"
70
+ }
71
+ }
72
+ }
73
+ }
74
+ }
@@ -0,0 +1,41 @@
1
+ {
2
+ "font-size": {
3
+ "display": {
4
+ "large": { "value": 48 },
5
+ "medium": { "value": 38 }
6
+ },
7
+ "title": {
8
+ "large": { "value": 32 },
9
+ "medium": { "value": 28 },
10
+ "small": { "value": 24 },
11
+ "xsmall": { "value": 20 }
12
+ },
13
+ "body": {
14
+ "medium": { "value": 16 },
15
+ "small": { "value": 14 },
16
+ "xsmall": { "value": 12 }
17
+ }
18
+ },
19
+ "line-height": {
20
+ "display": {
21
+ "large": { "value": 100 },
22
+ "medium": { "value": 100 }
23
+ },
24
+ "title": {
25
+ "large": { "value": 120 },
26
+ "medium": { "value": 120 },
27
+ "small": { "value": 120 },
28
+ "xsmall": { "value": 120 }
29
+ },
30
+ "body": {
31
+ "medium": { "value": 140 },
32
+ "small": { "value": 140 },
33
+ "xsmall": { "value": 140 }
34
+ }
35
+ },
36
+ "family": {
37
+ "display": { "value": "{font.family}" },
38
+ "title": { "value": "{font.family}" },
39
+ "body": { "value": "Figtree" }
40
+ }
41
+ }
@@ -0,0 +1,140 @@
1
+ {
2
+ "font": {
3
+ "body": {
4
+ "m": {
5
+ "$type": "typography",
6
+ "value": {
7
+ "fontFamily": "Figtree",
8
+ "fontSize": "1rem",
9
+ "lineHeight": "140%",
10
+ "fontWeight": "{font.weight.regular}",
11
+ "letterSpacing": 0,
12
+ "textDecoration": "none"
13
+ }
14
+ },
15
+ "m-bold": {
16
+ "$type": "typography",
17
+ "value": {
18
+ "fontFamily": "Figtree",
19
+ "fontSize": "1rem",
20
+ "lineHeight": "140%",
21
+ "fontWeight": "{font.weight.semi-bold}",
22
+ "letterSpacing": 0,
23
+ "textDecoration": "none"
24
+ }
25
+ },
26
+ "s": {
27
+ "$type": "typography",
28
+ "value": {
29
+ "fontFamily": "Figtree",
30
+ "fontSize": "0.875rem",
31
+ "lineHeight": "140%",
32
+ "fontWeight": "{font.weight.regular}",
33
+ "letterSpacing": 0,
34
+ "textDecoration": "none"
35
+ }
36
+ },
37
+ "s-bold": {
38
+ "$type": "typography",
39
+ "value": {
40
+ "fontFamily": "Figtree",
41
+ "fontSize": "0.875rem",
42
+ "lineHeight": "140%",
43
+ "fontWeight": "{font.weight.semi-bold}",
44
+ "letterSpacing": 0,
45
+ "textDecoration": "none"
46
+ }
47
+ },
48
+ "xs": {
49
+ "$type": "typography",
50
+ "value": {
51
+ "fontFamily": "Figtree",
52
+ "fontSize": "0.75rem",
53
+ "lineHeight": "140%",
54
+ "fontWeight": "{font.weight.regular}",
55
+ "letterSpacing": 0,
56
+ "textDecoration": "none"
57
+ }
58
+ },
59
+ "xs-bold": {
60
+ "$type": "typography",
61
+ "value": {
62
+ "fontFamily": "Figtree",
63
+ "fontSize": "0.75rem",
64
+ "lineHeight": "140%",
65
+ "fontWeight": "{font.weight.semi-bold}",
66
+ "letterSpacing": 0,
67
+ "textDecoration": "none"
68
+ }
69
+ }
70
+ },
71
+ "link": {
72
+ "m": {
73
+ "$type": "typography",
74
+ "value": {
75
+ "fontFamily": "Figtree",
76
+ "fontSize": "1rem",
77
+ "lineHeight": "140%",
78
+ "fontWeight": "{font.weight.regular}",
79
+ "letterSpacing": 0,
80
+ "textDecoration": "underline"
81
+ }
82
+ },
83
+ "m-bold": {
84
+ "$type": "typography",
85
+ "value": {
86
+ "fontFamily": "Figtree",
87
+ "fontSize": "1rem",
88
+ "lineHeight": "140%",
89
+ "fontWeight": "{font.weight.semi-bold}",
90
+ "letterSpacing": 0,
91
+ "textDecoration": "underline"
92
+ }
93
+ },
94
+ "s": {
95
+ "$type": "typography",
96
+ "value": {
97
+ "fontFamily": "Figtree",
98
+ "fontSize": "0.875rem",
99
+ "lineHeight": "140%",
100
+ "fontWeight": "{font.weight.regular}",
101
+ "letterSpacing": 0,
102
+ "textDecoration": "underline"
103
+ }
104
+ },
105
+ "s-bold": {
106
+ "$type": "typography",
107
+ "value": {
108
+ "fontFamily": "Figtree",
109
+ "fontSize": "0.875rem",
110
+ "lineHeight": "140%",
111
+ "fontWeight": "{font.weight.semi-bold}",
112
+ "letterSpacing": 0,
113
+ "textDecoration": "underline"
114
+ }
115
+ },
116
+ "xs": {
117
+ "$type": "typography",
118
+ "value": {
119
+ "fontFamily": "Figtree",
120
+ "fontSize": "0.75rem",
121
+ "lineHeight": "140%",
122
+ "fontWeight": "{font.weight.regular}",
123
+ "letterSpacing": 0,
124
+ "textDecoration": "underline"
125
+ }
126
+ },
127
+ "xs-bold": {
128
+ "$type": "typography",
129
+ "value": {
130
+ "fontFamily": "Figtree",
131
+ "fontSize": "0.75rem",
132
+ "lineHeight": "140%",
133
+ "fontWeight": "{font.weight.semi-bold}",
134
+ "letterSpacing": 0,
135
+ "textDecoration": "underline"
136
+ }
137
+ }
138
+ }
139
+ }
140
+ }