@bcc-code/design-tokens 5.0.1 → 5.0.3

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.
@@ -1,368 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
-
5
-
6
- export default {
7
- "anchor": {
8
- "gutter": "{space.25}"
9
- },
10
- "app": {
11
- "font": {
12
- "size": "14px"
13
- },
14
- "card": {
15
- "background": "#ffffff"
16
- },
17
- "sm": {
18
- "font": {
19
- "size": "0.875rem"
20
- },
21
- "line": {
22
- "height": "1.25rem"
23
- }
24
- },
25
- "lg": {
26
- "font": {
27
- "size": "1.125rem"
28
- },
29
- "line": {
30
- "height": "1.75rem"
31
- }
32
- }
33
- },
34
- "body": {
35
- "sm": "400 0.75rem/16px Archivo",
36
- "md": "400 0.875rem/20px Archivo",
37
- "lg": "400 1rem/24px Archivo"
38
- },
39
- "content": {
40
- "border": {
41
- "radius": "{border.radius.md}",
42
- "color": "{surface.200}"
43
- },
44
- "background": "{surface.0}",
45
- "hover": {
46
- "background": "{surface.100}",
47
- "color": "{text.hover.color}"
48
- },
49
- "color": "{text.color}"
50
- },
51
- "disabled": {
52
- "opacity": "0.6"
53
- },
54
- "elevation": {
55
- "shadow": {
56
- "overlow": "0 0 8px 0 rgba(30,31,33,0.16), 0 0 1px 0 rgba(30,31,33,0.12)",
57
- "overlay": "0 8px 12px 0 rgba(30,31,33,0.15), 0 0 1px 0 rgba(30,31,33,0.31)",
58
- "raised": "0 1px 1px 0 rgba(30,31,33,0.25), 0 0 1px 0 rgba(30,31,33,0.31)"
59
- }
60
- },
61
- "focus": {
62
- "ring": {
63
- "width": "{border-width.1}",
64
- "color": "{surface.700}",
65
- "offset": "{border-width.2}",
66
- "shadow": "0 0 0 0 rgba(0, 0, 0, 0)",
67
- "stroke": "3px solid #505258",
68
- "style": "solid"
69
- }
70
- },
71
- "form": {
72
- "field": {
73
- "padding": {
74
- "x": "{space.150}",
75
- "y": "{space.50}"
76
- },
77
- "border": {
78
- "radius": "{border.radius.md}",
79
- "color": "{surface.300}"
80
- },
81
- "focus": {
82
- "ring": {
83
- "width": "{border-width.0}",
84
- "style": "none",
85
- "color": "{color.transparent}",
86
- "offset": "{border-width.0}",
87
- "shadow": "0 0 0 0 rgba(0, 0, 0, 0)"
88
- },
89
- "border": {
90
- "color": "{slate.700}"
91
- }
92
- },
93
- "sm": {
94
- "font": {
95
- "size": "{font-size.sm}"
96
- },
97
- "padding": {
98
- "x": "{space.150}",
99
- "y": "{space.50}"
100
- }
101
- },
102
- "lg": {
103
- "font": {
104
- "size": "{font-size.md}"
105
- },
106
- "padding": {
107
- "x": "{space.150}",
108
- "y": "{space.100}"
109
- }
110
- },
111
- "transition": {
112
- "duration": "{transition.duration}"
113
- },
114
- "background": "{surface.0}",
115
- "disabled": {
116
- "background": "{surface.200}",
117
- "color": "{surface.500}"
118
- },
119
- "filled": {
120
- "background": "{surface.50}",
121
- "focus": {
122
- "background": "{surface.50}"
123
- },
124
- "hover": {
125
- "background": "{surface.50}"
126
- }
127
- },
128
- "hover": {
129
- "border": {
130
- "color": "{surface.400}"
131
- }
132
- },
133
- "invalid": {
134
- "border": {
135
- "color": "{red.400}"
136
- },
137
- "placeholder": {
138
- "color": "{red.600}"
139
- }
140
- },
141
- "placeholder": {
142
- "color": "{surface.500}"
143
- },
144
- "float": {
145
- "label": {
146
- "color": "{surface.500}",
147
- "focus": {
148
- "color": "{surface.500}"
149
- },
150
- "invalid": {
151
- "color": "{form.field.invalid.placeholder.color}"
152
- },
153
- "active": {
154
- "color": "{surface.500}"
155
- }
156
- }
157
- },
158
- "icon": {
159
- "color": "{surface.400}"
160
- },
161
- "shadow": "0 1px 2px 0 rgba(18, 18, 23, 0.05)",
162
- "color": "{surface.700}"
163
- }
164
- },
165
- "heading": {
166
- "xs": "700 0.75rem/14px Archivo",
167
- "sm": "700 0.875rem/16px Archivo",
168
- "md": "700 1rem/20px Archivo",
169
- "lg": "700 1.25rem/24px Archivo",
170
- "xl": "700 1.5rem/28px Archivo",
171
- "2xl": "700 2em/32px Archivo",
172
- "3xl": "700 2.25rem/40px Archivo",
173
- "4xl": "700 3rem/56px Archivo",
174
- "5xl": "700 3rem/64px Archivo"
175
- },
176
- "highlight": {
177
- "background": "{primary.50}",
178
- "focus": {
179
- "background": "{primary.100}",
180
- "color": "{primary.800}"
181
- },
182
- "color": "{primary.700}"
183
- },
184
- "icon": {
185
- "size": "{space.200}"
186
- },
187
- "list": {
188
- "padding": "{space.100}",
189
- "gap": "{space.25}",
190
- "header": {
191
- "padding": "{space.100}"
192
- },
193
- "option": {
194
- "padding": "{space.150} {space.100}",
195
- "border": {
196
- "radius": "{border.radius.sm}"
197
- },
198
- "group": {
199
- "padding": "{space.100} {space.150}",
200
- "font": {
201
- "weight": "{font-weight.medium}"
202
- },
203
- "background": "rgba(0, 0, 0, 0)",
204
- "color": "{text.muted.color}"
205
- },
206
- "focus": {
207
- "background": "{surface.100}",
208
- "color": "{text.hover.color}"
209
- },
210
- "selected": {
211
- "background": "{highlight.background}",
212
- "focus": {
213
- "background": "{highlight.focus.background}",
214
- "color": "{highlight.focus.color}"
215
- },
216
- "color": "{highlight.color}"
217
- },
218
- "color": "{text.color}",
219
- "icon": {
220
- "color": "{surface.400}",
221
- "focus": {
222
- "color": "{surface.500}"
223
- }
224
- }
225
- }
226
- },
227
- "mask": {
228
- "background": "rgba(0, 0, 0, 0.4)",
229
- "color": "{surface.200}"
230
- },
231
- "navigation": {
232
- "list": {
233
- "padding": "{space.50} {space.50}",
234
- "gap": "{space.25}"
235
- },
236
- "item": {
237
- "padding": "{space.100} {space.150}",
238
- "border": {
239
- "radius": "{border.radius.sm}"
240
- },
241
- "gap": "{space.100}",
242
- "focus": {
243
- "background": "{surface.100}",
244
- "color": "{text.hover.color}"
245
- },
246
- "active": {
247
- "background": "{surface.100}",
248
- "color": "{text.hover.color}"
249
- },
250
- "color": "{text.color}",
251
- "icon": {
252
- "color": "{surface.400}",
253
- "focus": {
254
- "color": "{surface.500}"
255
- },
256
- "active": {
257
- "color": "{surface.500}"
258
- }
259
- }
260
- },
261
- "submenu": {
262
- "label": {
263
- "padding": "{space.100} {space.150}",
264
- "font": {
265
- "weight": "{font-weight.medium}"
266
- },
267
- "background": "rgba(0, 0, 0, 0)",
268
- "color": "{text.muted.color}"
269
- },
270
- "icon": {
271
- "size": "{space.150}",
272
- "color": "{surface.400}",
273
- "focus": {
274
- "color": "{surface.500}"
275
- },
276
- "active": {
277
- "color": "{surface.500}"
278
- }
279
- }
280
- }
281
- },
282
- "overlay": {
283
- "select": {
284
- "border": {
285
- "radius": "{border.radius.md}",
286
- "color": "{surface.200}"
287
- },
288
- "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
289
- "background": "{surface.0}",
290
- "color": "{text.color}"
291
- },
292
- "popover": {
293
- "border": {
294
- "radius": "{border.radius.md}",
295
- "color": "{surface.200}"
296
- },
297
- "padding": "{space.200} {space.150}",
298
- "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
299
- "background": "{surface.0}",
300
- "color": "{text.color}"
301
- },
302
- "modal": {
303
- "border": {
304
- "radius": "{border.radius.xl}",
305
- "color": "{surface.200}"
306
- },
307
- "padding": "{space.200}",
308
- "shadow": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
309
- "background": "{surface.0}",
310
- "color": "{text.color}"
311
- },
312
- "navigation": {
313
- "shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
314
- }
315
- },
316
- "primary": {
317
- "50": "{emerald.50}",
318
- "100": "{emerald.100}",
319
- "200": "{emerald.200}",
320
- "300": "{emerald.300}",
321
- "400": "{emerald.400}",
322
- "500": "{emerald.500}",
323
- "600": "{emerald.600}",
324
- "700": "{emerald.700}",
325
- "800": "{emerald.800}",
326
- "900": "{emerald.900}",
327
- "950": "{emerald.950}",
328
- "color": "{primary.500}",
329
- "contrast": {
330
- "color": "{surface.0}"
331
- },
332
- "hover": {
333
- "color": "{primary.600}"
334
- },
335
- "active": {
336
- "color": "{primary.700}"
337
- }
338
- },
339
- "surface": {
340
- "0": "#ffffff",
341
- "50": "{slate.50}",
342
- "100": "{slate.100}",
343
- "200": "{slate.200}",
344
- "300": "{slate.300}",
345
- "400": "{slate.400}",
346
- "500": "{slate.500}",
347
- "600": "{slate.600}",
348
- "700": "{slate.700}",
349
- "800": "{slate.800}",
350
- "900": "{slate.900}",
351
- "950": "{slate.950}"
352
- },
353
- "text": {
354
- "color": "#292a2e",
355
- "hover": {
356
- "color": "{surface.800}",
357
- "muted": {
358
- "color": "{surface.600}"
359
- }
360
- },
361
- "muted": {
362
- "color": "{surface.500}"
363
- }
364
- },
365
- "transition": {
366
- "duration": "0.2s"
367
- }
368
- };