@beam-ui/design-tokens 1.0.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.
Files changed (13) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +394 -0
  3. package/USAGE.md +286 -0
  4. package/build/base/tokens.es6.js +106 -0
  5. package/build/base/tokens.json +144 -0
  6. package/build/base/variables.css +108 -0
  7. package/build/globals/tokens.es6.js +9 -0
  8. package/build/globals/tokens.json +11 -0
  9. package/build/globals/variables.css +11 -0
  10. package/build/semantic/tokens.es6.js +316 -0
  11. package/build/semantic/tokens.json +431 -0
  12. package/build/semantic/variables.css +315 -0
  13. package/package.json +52 -0
package/build/semantic/tokens.json ADDED
@@ -0,0 +1,431 @@
1
+ {
2
+ "button": {
3
+ "primary": {
4
+ "background": "hsl(0, 0%, 0%)",
5
+ "backgroundHover": "hsl(222, 11%, 36%)",
6
+ "backgroundActive": "hsl(218, 8%, 55%)",
7
+ "backgroundDisabled": "hsl(219, 8%, 65%)",
8
+ "text": "hsl(0, 0%, 100%)",
9
+ "textHover": "hsl(0, 0%, 100%)",
10
+ "textActive": "hsl(0, 0%, 100%)",
11
+ "textDisabled": "hsl(0, 0%, 100%)",
12
+ "border": "hsl(0, 0%, 0%)",
13
+ "borderHover": "hsl(222, 11%, 36%)",
14
+ "borderActive": "hsl(218, 8%, 55%)",
15
+ "borderDisabled": "hsl(219, 8%, 65%)",
16
+ "fontSize": "1.6rem",
17
+ "lineHeight": "1.3",
18
+ "borderRadius": "0.4rem",
19
+ "borderWidth": "0.1rem"
20
+ },
21
+ "secondary": {
22
+ "background": "hsl(0, 0%, 100%)",
23
+ "backgroundHover": "hsl(210, 7%, 95%)",
24
+ "backgroundActive": "hsl(228, 8%, 88%)",
25
+ "backgroundDisabled": "hsl(222, 8%, 77%)",
26
+ "text": "hsl(0, 0%, 0%)",
27
+ "textHover": "hsl(0, 0%, 0%)",
28
+ "textActive": "hsl(0, 0%, 0%)",
29
+ "textDisabled": "hsl(0, 0%, 0%)",
30
+ "border": "hsl(228, 8%, 88%)",
31
+ "borderHover": "hsl(219, 8%, 65%)",
32
+ "borderActive": "hsl(0, 0%, 0%)",
33
+ "borderDisabled": "hsl(219, 8%, 65%)",
34
+ "fontSize": "1.6rem",
35
+ "lineHeight": "1.3",
36
+ "borderRadius": "0.4rem",
37
+ "borderWidth": "0.1rem"
38
+ },
39
+ "tertiary": {
40
+ "background": "hsl(0, 0%, 100%)",
41
+ "backgroundHover": "hsl(210, 7%, 95%)",
42
+ "backgroundActive": "hsl(228, 8%, 88%)",
43
+ "backgroundDisabled": "hsl(222, 8%, 77%)",
44
+ "text": "hsl(0, 0%, 0%)",
45
+ "textHover": "hsl(0, 0%, 0%)",
46
+ "textActive": "hsl(0, 0%, 0%)",
47
+ "textDisabled": "hsl(0, 0%, 0%)",
48
+ "border": "hsla(0, 0%, 0%, 0)",
49
+ "borderHover": "hsl(228, 8%, 88%)",
50
+ "borderActive": "hsl(0, 0%, 0%)",
51
+ "borderDisabled": "hsla(0, 0%, 0%, 0)",
52
+ "fontSize": "1.6rem",
53
+ "lineHeight": "1.3",
54
+ "borderRadius": "0.4rem",
55
+ "borderWidth": "0.1rem"
56
+ },
57
+ "danger": {
58
+ "primary": {
59
+ "background": "hsl(9, 79%, 34%)",
60
+ "backgroundHover": "hsl(2, 72%, 29%)",
61
+ "backgroundActive": "hsl(9, 79%, 34%)",
62
+ "backgroundDisabled": "hsl(0, 78%, 63%)",
63
+ "text": "hsl(0, 0%, 100%)",
64
+ "textHover": "hsl(0, 0%, 100%)",
65
+ "textActive": "hsl(0, 0%, 100%)",
66
+ "textDisabled": "hsl(0, 0%, 100%)",
67
+ "border": "hsl(9, 79%, 34%)",
68
+ "borderHover": "hsl(2, 72%, 29%)",
69
+ "borderActive": "hsl(9, 79%, 34%)",
70
+ "borderDisabled": "hsl(0, 78%, 63%)",
71
+ "fontSize": "1.6rem",
72
+ "lineHeight": "1.3",
73
+ "borderRadius": "0.4rem",
74
+ "borderWidth": "0.1rem"
75
+ },
76
+ "secondary": {
77
+ "background": "hsl(0, 0%, 100%)",
78
+ "backgroundHover": "hsl(210, 7%, 95%)",
79
+ "backgroundActive": "hsl(228, 8%, 88%)",
80
+ "backgroundDisabled": "hsl(222, 8%, 77%)",
81
+ "text": "hsl(9, 79%, 34%)",
82
+ "textHover": "hsl(9, 79%, 34%)",
83
+ "textActive": "hsl(9, 79%, 34%)",
84
+ "textDisabled": "hsl(9, 79%, 34%)",
85
+ "border": "hsl(0, 0%, 100%)",
86
+ "borderHover": "hsl(210, 7%, 95%)",
87
+ "borderActive": "hsl(228, 8%, 88%)",
88
+ "borderDisabled": "hsl(222, 8%, 77%)",
89
+ "fontSize": "1.6rem",
90
+ "lineHeight": "1.3",
91
+ "borderRadius": "0.4rem",
92
+ "borderWidth": "0.1rem"
93
+ }
94
+ },
95
+ "size": {
96
+ "sm": {
97
+ "padding-inline": "0.4rem",
98
+ "padding-block": "0.4rem",
99
+ "minWidth": "48px"
100
+ },
101
+ "md": {
102
+ "padding-inline": "0.8rem",
103
+ "padding-block": "0.8rem",
104
+ "minWidth": "48px"
105
+ },
106
+ "lg": {
107
+ "padding-inline": "1.6rem",
108
+ "padding-block": "1.6rem",
109
+ "minWidth": "48px"
110
+ }
111
+ }
112
+ },
113
+ "color": {
114
+ "background": {
115
+ "primary": "hsl(0, 0%, 100%)",
116
+ "secondary": "hsl(0, 0%, 98%)",
117
+ "tertiary": "hsl(210, 7%, 95%)",
118
+ "inverse": "hsl(0, 0%, 0%)",
119
+ "overlay": "hsla(0, 0%, 0%, 0.3)",
120
+ "backdrop": "hsla(0, 0%, 0%, 0.05)",
121
+ "elevated": "hsl(0, 0%, 100%)",
122
+ "sunken": "hsl(0, 0%, 98%)"
123
+ },
124
+ "surface": {
125
+ "primary": "hsl(0, 0%, 100%)",
126
+ "secondary": "hsl(0, 0%, 98%)",
127
+ "tertiary": "hsl(210, 7%, 95%)",
128
+ "hover": "hsl(210, 7%, 95%)",
129
+ "active": "hsl(228, 8%, 88%)",
130
+ "disabled": "hsl(219, 8%, 65%)",
131
+ "selected": "hsl(0, 0%, 100%)",
132
+ "inverse": "hsl(0, 0%, 0%)"
133
+ },
134
+ "border": {
135
+ "primary": "hsl(210, 7%, 95%)",
136
+ "secondary": "hsl(228, 8%, 88%)",
137
+ "tertiary": "hsl(218, 8%, 55%)",
138
+ "interactive": "hsl(228, 8%, 88%)",
139
+ "hover": "hsl(219, 8%, 65%)",
140
+ "focus": "hsl(0, 0%, 0%)",
141
+ "error": "hsl(9, 79%, 34%)",
142
+ "success": "hsl(145, 81%, 35%)",
143
+ "warning": "hsl(29, 100%, 38%)",
144
+ "info": "hsl(209, 82%, 49%)",
145
+ "disabled": "hsl(219, 8%, 65%)",
146
+ "inverse": "hsl(0, 0%, 0%)"
147
+ },
148
+ "text": {
149
+ "primary": "hsl(0, 0%, 0%)",
150
+ "secondary": "hsl(222, 11%, 36%)",
151
+ "tertiary": "hsl(221, 11%, 45%)",
152
+ "quaternary": "hsl(218, 8%, 55%)",
153
+ "placeholder": "hsl(218, 8%, 55%)",
154
+ "disabled": "hsl(219, 8%, 65%)",
155
+ "inverse": "hsl(0, 0%, 100%)",
156
+ "link": "hsl(0, 0%, 0%)",
157
+ "linkHover": "hsl(222, 11%, 36%)",
158
+ "linkVisited": "hsl(221, 11%, 45%)",
159
+ "error": "hsl(9, 79%, 34%)",
160
+ "success": "hsl(145, 81%, 35%)",
161
+ "warning": "hsl(29, 100%, 38%)",
162
+ "info": "hsl(209, 82%, 49%)"
163
+ },
164
+ "icon": {
165
+ "primary": "hsl(0, 0%, 0%)",
166
+ "secondary": "hsl(221, 11%, 45%)",
167
+ "tertiary": "hsl(218, 8%, 55%)",
168
+ "interactive": "hsl(0, 0%, 0%)",
169
+ "hover": "hsl(222, 11%, 36%)",
170
+ "active": "hsl(0, 0%, 0%)",
171
+ "disabled": "hsl(219, 8%, 65%)",
172
+ "inverse": "hsl(0, 0%, 100%)",
173
+ "error": "hsl(9, 79%, 34%)",
174
+ "success": "hsl(145, 81%, 35%)",
175
+ "warning": "hsl(29, 100%, 38%)",
176
+ "info": "hsl(209, 82%, 49%)"
177
+ },
178
+ "interactive": {
179
+ "primary": {
180
+ "default": "hsl(0, 0%, 0%)",
181
+ "hover": "hsl(222, 11%, 36%)",
182
+ "active": "hsl(218, 8%, 55%)",
183
+ "disabled": "hsl(219, 8%, 65%)"
184
+ },
185
+ "inverse": {
186
+ "default": "hsl(0, 0%, 100%)",
187
+ "hover": "hsl(210, 7%, 95%)",
188
+ "active": "hsl(228, 8%, 88%)",
189
+ "disabled": "hsl(222, 8%, 77%)"
190
+ },
191
+ "success": {
192
+ "default": "hsl(145, 81%, 35%)",
193
+ "hover": "hsl(145, 81%, 25%)",
194
+ "active": "hsl(145, 81%, 35%)",
195
+ "disabled": "hsl(131, 67%, 76%)"
196
+ },
197
+ "warning": {
198
+ "default": "hsl(29, 100%, 38%)",
199
+ "hover": "hsl(29, 100%, 27%)",
200
+ "active": "hsl(29, 100%, 38%)",
201
+ "disabled": "hsl(26, 100%, 64%)"
202
+ },
203
+ "info": {
204
+ "default": "hsl(209, 82%, 37%)",
205
+ "hover": "hsl(209, 79%, 31%)",
206
+ "active": "hsl(209, 82%, 37%)",
207
+ "disabled": "hsl(217, 75%, 66%)"
208
+ },
209
+ "error": {
210
+ "default": "hsl(9, 79%, 34%)",
211
+ "hover": "hsl(2, 72%, 29%)",
212
+ "active": "hsl(9, 79%, 34%)",
213
+ "disabled": "hsl(0, 78%, 63%)"
214
+ }
215
+ },
216
+ "status": {
217
+ "success": {
218
+ "base": "hsl(145, 81%, 35%)",
219
+ "light": "hsl(128, 68%, 85%)",
220
+ "dark": "hsl(145, 81%, 25%)",
221
+ "contrast": "hsl(126, 71%, 95%)"
222
+ },
223
+ "warning": {
224
+ "base": "hsl(29, 100%, 38%)",
225
+ "light": "hsl(27, 100%, 84%)",
226
+ "dark": "hsl(29, 100%, 27%)",
227
+ "contrast": "hsl(27, 100%, 94%)"
228
+ },
229
+ "info": {
230
+ "base": "hsl(209, 82%, 49%)",
231
+ "light": "hsl(222, 76%, 85%)",
232
+ "dark": "hsl(209, 79%, 31%)",
233
+ "contrast": "hsl(224, 79%, 95%)"
234
+ },
235
+ "error": {
236
+ "base": "hsl(9, 79%, 34%)",
237
+ "light": "hsl(351, 93%, 83%)",
238
+ "dark": "hsl(2, 72%, 29%)",
239
+ "contrast": "hsl(7, 94%, 93%)"
240
+ }
241
+ },
242
+ "brand": {
243
+ "primary": {
244
+ "base": "hsl(54, 100%, 44%)",
245
+ "light": "hsl(58, 100%, 92%)",
246
+ "lighter": "hsl(60, 100%, 81%)",
247
+ "dark": "hsl(49, 87%, 37%)",
248
+ "contrast": "hsl(60, 100%, 97%)"
249
+ },
250
+ "secondary": {
251
+ "base": "hsl(209, 82%, 49%)",
252
+ "light": "hsl(222, 76%, 85%)",
253
+ "lighter": "hsl(220, 75%, 76%)",
254
+ "dark": "hsl(209, 79%, 31%)",
255
+ "contrast": "hsl(224, 79%, 95%)"
256
+ },
257
+ "accent": {
258
+ "base": "hsl(263, 50%, 43%)",
259
+ "light": "hsl(267, 69%, 85%)",
260
+ "lighter": "hsl(266, 67%, 75%)",
261
+ "dark": "hsl(263, 51%, 35%)",
262
+ "contrast": "hsl(269, 100%, 96%)"
263
+ }
264
+ }
265
+ },
266
+ "typography": {
267
+ "display": {
268
+ "100": {
269
+ "fontFamily": "FavoritStd-MediumExtended",
270
+ "fontSize": "5.2rem",
271
+ "lineHeight": "1.2",
272
+ "letterSpacing": "-0.02em",
273
+ "color": "hsl(0, 0%, 0%)",
274
+ "inverse": "hsl(0, 0%, 100%)"
275
+ },
276
+ "200": {
277
+ "fontFamily": "FavoritStd-MediumExtended",
278
+ "fontSize": "4rem",
279
+ "lineHeight": "1.2",
280
+ "letterSpacing": "-0.02em",
281
+ "color": "hsl(0, 0%, 0%)",
282
+ "inverse": "hsl(0, 0%, 100%)"
283
+ },
284
+ "300": {
285
+ "fontFamily": "FavoritStd-MediumExtended",
286
+ "fontSize": "3.2rem",
287
+ "lineHeight": "1.2",
288
+ "letterSpacing": "-0.02em",
289
+ "color": "hsl(0, 0%, 0%)",
290
+ "inverse": "hsl(0, 0%, 100%)"
291
+ },
292
+ "400": {
293
+ "fontFamily": "FavoritStd-MediumExtended",
294
+ "fontSize": "2.4rem",
295
+ "lineHeight": "1.2",
296
+ "letterSpacing": "-0.02em",
297
+ "color": "hsl(0, 0%, 0%)",
298
+ "inverse": "hsl(0, 0%, 100%)"
299
+ },
300
+ "500": {
301
+ "fontFamily": "FavoritStd-MediumExtended",
302
+ "fontSize": "2rem",
303
+ "lineHeight": "1.2",
304
+ "letterSpacing": "-0.02em",
305
+ "color": "hsl(0, 0%, 0%)",
306
+ "inverse": "hsl(0, 0%, 100%)"
307
+ }
308
+ },
309
+ "heading": {
310
+ "100": {
311
+ "fontFamily": "HelveticaNeueeTextPro-Md",
312
+ "fontSize": "5.2rem",
313
+ "lineHeight": "1.3",
314
+ "letterSpacing": "-0.01em",
315
+ "color": "hsl(0, 0%, 0%)",
316
+ "inverse": "hsl(0, 0%, 100%)"
317
+ },
318
+ "200": {
319
+ "fontFamily": "HelveticaNeueeTextPro-Md",
320
+ "fontSize": "4rem",
321
+ "lineHeight": "1.3",
322
+ "letterSpacing": "-0.01em",
323
+ "color": "hsl(0, 0%, 0%)",
324
+ "inverse": "hsl(0, 0%, 100%)"
325
+ },
326
+ "300": {
327
+ "fontFamily": "HelveticaNeueeTextPro-Md",
328
+ "fontSize": "3.2rem",
329
+ "lineHeight": "1.3",
330
+ "letterSpacing": "-0.01em",
331
+ "color": "hsl(0, 0%, 0%)",
332
+ "inverse": "hsl(0, 0%, 100%)"
333
+ },
334
+ "400": {
335
+ "fontFamily": "HelveticaNeueeTextPro-Md",
336
+ "fontSize": "2.4rem",
337
+ "lineHeight": "1.3",
338
+ "letterSpacing": "-0.01em",
339
+ "color": "hsl(0, 0%, 0%)",
340
+ "inverse": "hsl(0, 0%, 100%)"
341
+ },
342
+ "500": {
343
+ "fontFamily": "HelveticaNeueeTextPro-Md",
344
+ "fontSize": "2rem",
345
+ "lineHeight": "1.3",
346
+ "letterSpacing": "-0.01em",
347
+ "color": "hsl(0, 0%, 0%)",
348
+ "inverse": "hsl(0, 0%, 100%)"
349
+ }
350
+ },
351
+ "body": {
352
+ "large": {
353
+ "default": {
354
+ "fontFamily": "HelveticaNeueeTextPro-Roman",
355
+ "fontSize": "2rem",
356
+ "lineHeight": "1.3",
357
+ "letterSpacing": 0,
358
+ "color": "hsl(0, 0%, 0%)",
359
+ "inverse": "hsl(0, 0%, 100%)"
360
+ },
361
+ "medium": {
362
+ "fontFamily": "HelveticaNeueeTextPro-Md",
363
+ "fontSize": "2rem",
364
+ "lineHeight": "1.3",
365
+ "letterSpacing": 0,
366
+ "color": "hsl(0, 0%, 0%)",
367
+ "inverse": "hsl(0, 0%, 100%)"
368
+ }
369
+ },
370
+ "base": {
371
+ "default": {
372
+ "fontFamily": "HelveticaNeueeTextPro-Roman",
373
+ "fontSize": "1.6rem",
374
+ "lineHeight": "1.3",
375
+ "letterSpacing": 0,
376
+ "color": "hsl(0, 0%, 0%)",
377
+ "inverse": "hsl(0, 0%, 100%)"
378
+ },
379
+ "medium": {
380
+ "fontFamily": "HelveticaNeueeTextPro-Md",
381
+ "fontSize": "1.6rem",
382
+ "lineHeight": "1.3",
383
+ "letterSpacing": 0,
384
+ "color": "hsl(0, 0%, 0%)",
385
+ "inverse": "hsl(0, 0%, 100%)"
386
+ }
387
+ },
388
+ "small": {
389
+ "default": {
390
+ "fontFamily": "HelveticaNeueeTextPro-Roman",
391
+ "fontSize": "1.4rem",
392
+ "lineHeight": "1.3",
393
+ "letterSpacing": 0,
394
+ "color": "hsl(0, 0%, 0%)",
395
+ "inverse": "hsl(0, 0%, 100%)"
396
+ },
397
+ "medium": {
398
+ "fontFamily": "HelveticaNeueeTextPro-Md",
399
+ "fontSize": "1.4rem",
400
+ "lineHeight": "1.3",
401
+ "letterSpacing": 0,
402
+ "color": "hsl(0, 0%, 0%)",
403
+ "inverse": "hsl(0, 0%, 100%)"
404
+ }
405
+ }
406
+ },
407
+ "label": {
408
+ "base": {
409
+ "fontSize": "1.2rem",
410
+ "lineHeight": "1.3",
411
+ "letterSpacing": "0.01em",
412
+ "color": "hsl(0, 0%, 0%)",
413
+ "inverse": "hsl(0, 0%, 100%)"
414
+ }
415
+ },
416
+ "caption": {
417
+ "fontSize": "1.2rem",
418
+ "lineHeight": "1.3",
419
+ "letterSpacing": "0.01em",
420
+ "color": "hsl(222, 11%, 36%)",
421
+ "inverse": "hsl(0, 0%, 100%)"
422
+ },
423
+ "overline": {
424
+ "fontSize": "1.2rem",
425
+ "lineHeight": "1.3",
426
+ "letterSpacing": "0.01em",
427
+ "color": "hsl(0, 0%, 0%)",
428
+ "inverse": "hsl(0, 0%, 100%)"
429
+ }
430
+ }
431
+ }