@volue/design-colors 1.3.1-next.2 → 1.4.0-next.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.
package/dist/index.html DELETED
@@ -1,732 +0,0 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="en">
4
- <head>
5
- <meta charset="utf-8" />
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7
- <title>Design Tokens</title>
8
- <meta name="viewport" content="width=device-width, initial-scale=1" />
9
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css" />
10
- <style>
11
- html {
12
- box-sizing: border-box;
13
- font-size: 1em;
14
- font-family: Helvetica, Arial, sans-serif;
15
- line-height: 1.5;
16
- background: #fff;
17
- color: #444;
18
- }
19
- *,
20
- *:before,
21
- *:after {
22
- box-sizing: inherit;
23
- }
24
- body { font-size: .75rem; }
25
- ::-moz-selection {
26
- background: #b3d4fc;
27
- text-shadow: none;
28
- }
29
- ::selection {
30
- background: #b3d4fc;
31
- text-shadow: none;
32
- }
33
- .banner,
34
- .contentinfo { background: #f5f5f5; }
35
- .banner { padding: 1em 0; }
36
- .container {
37
- margin: 0 auto;
38
- padding: 0 2rem;
39
- max-width: 80rem;
40
- }
41
- main {
42
- margin-right: -2rem;
43
- margin-left: -2rem;
44
- padding-bottom: 2rem;
45
- }
46
- h1 {
47
- margin: 0;
48
- font-weight: normal;
49
- line-height: 1.25;
50
- }
51
- table {
52
- table-layout: fixed;
53
- border-collapse: separate;
54
- border-spacing: 1rem;
55
- width: 100%;
56
- }
57
- th,
58
- td {
59
- padding: 0 1rem;
60
- vertical-align: baseline;
61
- word-break: break-word;
62
- hyphens: auto;
63
- }
64
- th {
65
- font-weight: normal;
66
- text-align: left;
67
- }
68
- thead th {
69
- border-bottom: 1px solid #eee;
70
- padding-top: 1rem;
71
- padding-bottom: .5rem;
72
- color: #999;
73
- }
74
- thead th:first-child {
75
- font-size: 1.25rem;
76
- color: inherit;
77
- }
78
- code { font-family: monaco, Consolas, monospace, monospace; }
79
- hr {
80
- display: block;
81
- margin: 2rem 0;
82
- border: 0;
83
- border-top: 1px solid #eee;
84
- padding: 0;
85
- height: 1px;
86
- }
87
- .metric-box,
88
- .radius-box {
89
- display: inline-block;
90
- vertical-align: middle;
91
- background: #eee;
92
- }
93
- .radius-box {
94
- width: 100%;
95
- height: 3rem;
96
- }
97
- .radius-box.borderRadiusCircle {
98
- width: 3rem;
99
- }
100
- .line-height-example {
101
- border-bottom: 1px solid #eee;
102
- background-image: -webkit-linear-gradient(#eee 1px, transparent 1px);
103
- background-image: linear-gradient(#eee 1px, transparent 1px);
104
- background-size: 100% 1rem;
105
- }
106
- </style>
107
- </head>
108
- <body>
109
- <header role="banner" class="banner">
110
- <div class="container">
111
- <h1>Design Tokens</h1>
112
- </div>
113
- </header>
114
- <div class="container">
115
- <main role="main">
116
-
117
-
118
-
119
-
120
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
- <section>
131
- <table>
132
-
133
- <thead>
134
- <tr id=background-color>
135
- <th scope="col">Background Colors</th>
136
- <th scope="col">Value</th>
137
- <th scope="col">Examples</th>
138
- <th scope="col">Usage</th>
139
- </tr>
140
- </thead>
141
-
142
- <tbody>
143
- <tr>
144
- <th scope="row">
145
- <code>colorBlack</code>
146
- </th>
147
- <td>
148
- <code>#000000</code>
149
- </td>
150
- <td style="background-color: #000000; border: 1px solid #f6f6f6;"></td>
151
- <td></td>
152
- </tr>
153
-
154
- <tr>
155
- <th scope="row">
156
- <code>colorWhite</code>
157
- </th>
158
- <td>
159
- <code>#ffffff</code>
160
- </td>
161
- <td style="background-color: #ffffff; border: 1px solid #f6f6f6;"></td>
162
- <td></td>
163
- </tr>
164
-
165
- <tr>
166
- <th scope="row">
167
- <code>colorGray5</code>
168
- </th>
169
- <td>
170
- <code>#f2f2f2</code>
171
- </td>
172
- <td style="background-color: #f2f2f2; border: 1px solid #f6f6f6;"></td>
173
- <td></td>
174
- </tr>
175
-
176
- <tr>
177
- <th scope="row">
178
- <code>colorGray10</code>
179
- </th>
180
- <td>
181
- <code>#e5e5e5</code>
182
- </td>
183
- <td style="background-color: #e5e5e5; border: 1px solid #f6f6f6;"></td>
184
- <td></td>
185
- </tr>
186
-
187
- <tr>
188
- <th scope="row">
189
- <code>colorGray15</code>
190
- </th>
191
- <td>
192
- <code>#d9d9d9</code>
193
- </td>
194
- <td style="background-color: #d9d9d9; border: 1px solid #f6f6f6;"></td>
195
- <td></td>
196
- </tr>
197
-
198
- <tr>
199
- <th scope="row">
200
- <code>colorGray25</code>
201
- </th>
202
- <td>
203
- <code>#b2b2b2</code>
204
- </td>
205
- <td style="background-color: #b2b2b2; border: 1px solid #f6f6f6;"></td>
206
- <td></td>
207
- </tr>
208
-
209
- <tr>
210
- <th scope="row">
211
- <code>colorGray50</code>
212
- </th>
213
- <td>
214
- <code>#666666</code>
215
- </td>
216
- <td style="background-color: #666666; border: 1px solid #f6f6f6;"></td>
217
- <td></td>
218
- </tr>
219
-
220
- <tr>
221
- <th scope="row">
222
- <code>colorGray75</code>
223
- </th>
224
- <td>
225
- <code>#333333</code>
226
- </td>
227
- <td style="background-color: #333333; border: 1px solid #f6f6f6;"></td>
228
- <td></td>
229
- </tr>
230
-
231
- <tr>
232
- <th scope="row">
233
- <code>colorPrimary5</code>
234
- </th>
235
- <td>
236
- <code>#f2f4f5</code>
237
- </td>
238
- <td style="background-color: #f2f4f5; border: 1px solid #f6f6f6;"></td>
239
- <td></td>
240
- </tr>
241
-
242
- <tr>
243
- <th scope="row">
244
- <code>colorPrimary10</code>
245
- </th>
246
- <td>
247
- <code>#e6e9ea</code>
248
- </td>
249
- <td style="background-color: #e6e9ea; border: 1px solid #f6f6f6;"></td>
250
- <td></td>
251
- </tr>
252
-
253
- <tr>
254
- <th scope="row">
255
- <code>colorPrimary60</code>
256
- </th>
257
- <td>
258
- <code>#6b8085</code>
259
- </td>
260
- <td style="background-color: #6b8085; border: 1px solid #f6f6f6;"></td>
261
- <td></td>
262
- </tr>
263
-
264
- <tr>
265
- <th scope="row">
266
- <code>colorPrimary100</code>
267
- </th>
268
- <td>
269
- <code>#082b33</code>
270
- </td>
271
- <td style="background-color: #082b33; border: 1px solid #f6f6f6;"></td>
272
- <td></td>
273
- </tr>
274
-
275
- <tr>
276
- <th scope="row">
277
- <code>colorPrimary120</code>
278
- </th>
279
- <td>
280
- <code>#062228</code>
281
- </td>
282
- <td style="background-color: #062228; border: 1px solid #f6f6f6;"></td>
283
- <td></td>
284
- </tr>
285
-
286
- <tr>
287
- <th scope="row">
288
- <code>colorAccent5</code>
289
- </th>
290
- <td>
291
- <code>#f2f8f8</code>
292
- </td>
293
- <td style="background-color: #f2f8f8; border: 1px solid #f6f6f6;"></td>
294
- <td></td>
295
- </tr>
296
-
297
- <tr>
298
- <th scope="row">
299
- <code>colorAccent10</code>
300
- </th>
301
- <td>
302
- <code>#e5f1f2</code>
303
- </td>
304
- <td style="background-color: #e5f1f2; border: 1px solid #f6f6f6;"></td>
305
- <td></td>
306
- </tr>
307
-
308
- <tr>
309
- <th scope="row">
310
- <code>colorAccent15</code>
311
- </th>
312
- <td>
313
- <code>#d9ebec</code>
314
- </td>
315
- <td style="background-color: #d9ebec; border: 1px solid #f6f6f6;"></td>
316
- <td></td>
317
- </tr>
318
-
319
- <tr>
320
- <th scope="row">
321
- <code>colorAccent25</code>
322
- </th>
323
- <td>
324
- <code>#bfddde</code>
325
- </td>
326
- <td style="background-color: #bfddde; border: 1px solid #f6f6f6;"></td>
327
- <td></td>
328
- </tr>
329
-
330
- <tr>
331
- <th scope="row">
332
- <code>colorAccent60</code>
333
- </th>
334
- <td>
335
- <code>#7fbbbd</code>
336
- </td>
337
- <td style="background-color: #7fbbbd; border: 1px solid #f6f6f6;"></td>
338
- <td></td>
339
- </tr>
340
-
341
- <tr>
342
- <th scope="row">
343
- <code>colorAccent100</code>
344
- </th>
345
- <td>
346
- <code>#01797d</code>
347
- </td>
348
- <td style="background-color: #01797d; border: 1px solid #f6f6f6;"></td>
349
- <td></td>
350
- </tr>
351
-
352
- <tr>
353
- <th scope="row">
354
- <code>colorAccent120</code>
355
- </th>
356
- <td>
357
- <code>#016063</code>
358
- </td>
359
- <td style="background-color: #016063; border: 1px solid #f6f6f6;"></td>
360
- <td></td>
361
- </tr>
362
-
363
- <tr>
364
- <th scope="row">
365
- <code>colorBlue10</code>
366
- </th>
367
- <td>
368
- <code>#e9f1f6</code>
369
- </td>
370
- <td style="background-color: #e9f1f6; border: 1px solid #f6f6f6;"></td>
371
- <td></td>
372
- </tr>
373
-
374
- <tr>
375
- <th scope="row">
376
- <code>colorBlue50</code>
377
- </th>
378
- <td>
379
- <code>#92b8d4</code>
380
- </td>
381
- <td style="background-color: #92b8d4; border: 1px solid #f6f6f6;"></td>
382
- <td></td>
383
- </tr>
384
-
385
- <tr>
386
- <th scope="row">
387
- <code>colorBlue100</code>
388
- </th>
389
- <td>
390
- <code>#2673aa</code>
391
- </td>
392
- <td style="background-color: #2673aa; border: 1px solid #f6f6f6;"></td>
393
- <td></td>
394
- </tr>
395
-
396
- <tr>
397
- <th scope="row">
398
- <code>colorBlue120</code>
399
- </th>
400
- <td>
401
- <code>#1a5178</code>
402
- </td>
403
- <td style="background-color: #1a5178; border: 1px solid #f6f6f6;"></td>
404
- <td></td>
405
- </tr>
406
-
407
- <tr>
408
- <th scope="row">
409
- <code>colorGreen10</code>
410
- </th>
411
- <td>
412
- <code>#ecf3ea</code>
413
- </td>
414
- <td style="background-color: #ecf3ea; border: 1px solid #f6f6f6;"></td>
415
- <td></td>
416
- </tr>
417
-
418
- <tr>
419
- <th scope="row">
420
- <code>colorGreen50</code>
421
- </th>
422
- <td>
423
- <code>#a0c29b</code>
424
- </td>
425
- <td style="background-color: #a0c29b; border: 1px solid #f6f6f6;"></td>
426
- <td></td>
427
- </tr>
428
-
429
- <tr>
430
- <th scope="row">
431
- <code>colorGreen100</code>
432
- </th>
433
- <td>
434
- <code>#438538</code>
435
- </td>
436
- <td style="background-color: #438538; border: 1px solid #f6f6f6;"></td>
437
- <td></td>
438
- </tr>
439
-
440
- <tr>
441
- <th scope="row">
442
- <code>colorGreen120</code>
443
- </th>
444
- <td>
445
- <code>#295222</code>
446
- </td>
447
- <td style="background-color: #295222; border: 1px solid #f6f6f6;"></td>
448
- <td></td>
449
- </tr>
450
-
451
- <tr>
452
- <th scope="row">
453
- <code>colorOrange10</code>
454
- </th>
455
- <td>
456
- <code>#fbf0e5</code>
457
- </td>
458
- <td style="background-color: #fbf0e5; border: 1px solid #f6f6f6;"></td>
459
- <td></td>
460
- </tr>
461
-
462
- <tr>
463
- <th scope="row">
464
- <code>colorOrange50</code>
465
- </th>
466
- <td>
467
- <code>#ecb67f</code>
468
- </td>
469
- <td style="background-color: #ecb67f; border: 1px solid #f6f6f6;"></td>
470
- <td></td>
471
- </tr>
472
-
473
- <tr>
474
- <th scope="row">
475
- <code>colorOrange100</code>
476
- </th>
477
- <td>
478
- <code>#da6e00</code>
479
- </td>
480
- <td style="background-color: #da6e00; border: 1px solid #f6f6f6;"></td>
481
- <td></td>
482
- </tr>
483
-
484
- <tr>
485
- <th scope="row">
486
- <code>colorOrange120</code>
487
- </th>
488
- <td>
489
- <code>#a65300</code>
490
- </td>
491
- <td style="background-color: #a65300; border: 1px solid #f6f6f6;"></td>
492
- <td></td>
493
- </tr>
494
-
495
- <tr>
496
- <th scope="row">
497
- <code>colorRed10</code>
498
- </th>
499
- <td>
500
- <code>#fbe9ea</code>
501
- </td>
502
- <td style="background-color: #fbe9ea; border: 1px solid #f6f6f6;"></td>
503
- <td></td>
504
- </tr>
505
-
506
- <tr>
507
- <th scope="row">
508
- <code>colorRed50</code>
509
- </th>
510
- <td>
511
- <code>#df9e99</code>
512
- </td>
513
- <td style="background-color: #df9e99; border: 1px solid #f6f6f6;"></td>
514
- <td></td>
515
- </tr>
516
-
517
- <tr>
518
- <th scope="row">
519
- <code>colorRed100</code>
520
- </th>
521
- <td>
522
- <code>#bf3f34</code>
523
- </td>
524
- <td style="background-color: #bf3f34; border: 1px solid #f6f6f6;"></td>
525
- <td></td>
526
- </tr>
527
-
528
- <tr>
529
- <th scope="row">
530
- <code>colorRed120</code>
531
- </th>
532
- <td>
533
- <code>#8c2e26</code>
534
- </td>
535
- <td style="background-color: #8c2e26; border: 1px solid #f6f6f6;"></td>
536
- <td></td>
537
- </tr>
538
-
539
- <tr>
540
- <th scope="row">
541
- <code>colorTeal10</code>
542
- </th>
543
- <td>
544
- <code>#e9f6f7</code>
545
- </td>
546
- <td style="background-color: #e9f6f7; border: 1px solid #f6f6f6;"></td>
547
- <td></td>
548
- </tr>
549
-
550
- <tr>
551
- <th scope="row">
552
- <code>colorTeal50</code>
553
- </th>
554
- <td>
555
- <code>#94d1d5</code>
556
- </td>
557
- <td style="background-color: #94d1d5; border: 1px solid #f6f6f6;"></td>
558
- <td></td>
559
- </tr>
560
-
561
- <tr>
562
- <th scope="row">
563
- <code>colorTeal100</code>
564
- </th>
565
- <td>
566
- <code>#2ba3ab</code>
567
- </td>
568
- <td style="background-color: #2ba3ab; border: 1px solid #f6f6f6;"></td>
569
- <td></td>
570
- </tr>
571
-
572
- <tr>
573
- <th scope="row">
574
- <code>colorTeal120</code>
575
- </th>
576
- <td>
577
- <code>#1e7278</code>
578
- </td>
579
- <td style="background-color: #1e7278; border: 1px solid #f6f6f6;"></td>
580
- <td></td>
581
- </tr>
582
-
583
- <tr>
584
- <th scope="row">
585
- <code>colorPurple10</code>
586
- </th>
587
- <td>
588
- <code>#f1ecf5</code>
589
- </td>
590
- <td style="background-color: #f1ecf5; border: 1px solid #f6f6f6;"></td>
591
- <td></td>
592
- </tr>
593
-
594
- <tr>
595
- <th scope="row">
596
- <code>colorPurple50</code>
597
- </th>
598
- <td>
599
- <code>#bfa9d3</code>
600
- </td>
601
- <td style="background-color: #bfa9d3; border: 1px solid #f6f6f6;"></td>
602
- <td></td>
603
- </tr>
604
-
605
- <tr>
606
- <th scope="row">
607
- <code>colorPurple100</code>
608
- </th>
609
- <td>
610
- <code>#8054a8</code>
611
- </td>
612
- <td style="background-color: #8054a8; border: 1px solid #f6f6f6;"></td>
613
- <td></td>
614
- </tr>
615
-
616
- <tr>
617
- <th scope="row">
618
- <code>colorPurple120</code>
619
- </th>
620
- <td>
621
- <code>#593b75</code>
622
- </td>
623
- <td style="background-color: #593b75; border: 1px solid #f6f6f6;"></td>
624
- <td></td>
625
- </tr>
626
-
627
- <tr>
628
- <th scope="row">
629
- <code>colorPink10</code>
630
- </th>
631
- <td>
632
- <code>#faebef</code>
633
- </td>
634
- <td style="background-color: #faebef; border: 1px solid #f6f6f6;"></td>
635
- <td></td>
636
- </tr>
637
-
638
- <tr>
639
- <th scope="row">
640
- <code>colorPink50</code>
641
- </th>
642
- <td>
643
- <code>#e79eb0</code>
644
- </td>
645
- <td style="background-color: #e79eb0; border: 1px solid #f6f6f6;"></td>
646
- <td></td>
647
- </tr>
648
-
649
- <tr>
650
- <th scope="row">
651
- <code>colorPink100</code>
652
- </th>
653
- <td>
654
- <code>#cf3f63</code>
655
- </td>
656
- <td style="background-color: #cf3f63; border: 1px solid #f6f6f6;"></td>
657
- <td></td>
658
- </tr>
659
-
660
- <tr>
661
- <th scope="row">
662
- <code>colorPink120</code>
663
- </th>
664
- <td>
665
- <code>#9c2f4a</code>
666
- </td>
667
- <td style="background-color: #9c2f4a; border: 1px solid #f6f6f6;"></td>
668
- <td></td>
669
- </tr>
670
-
671
- <tr>
672
- <th scope="row">
673
- <code>colorYellow10</code>
674
- </th>
675
- <td>
676
- <code>#fdfaf4</code>
677
- </td>
678
- <td style="background-color: #fdfaf4; border: 1px solid #f6f6f6;"></td>
679
- <td></td>
680
- </tr>
681
-
682
- <tr>
683
- <th scope="row">
684
- <code>colorYellow50</code>
685
- </th>
686
- <td>
687
- <code>#fdd9a3</code>
688
- </td>
689
- <td style="background-color: #fdd9a3; border: 1px solid #f6f6f6;"></td>
690
- <td></td>
691
- </tr>
692
-
693
- <tr>
694
- <th scope="row">
695
- <code>colorYellow100</code>
696
- </th>
697
- <td>
698
- <code>#faa600</code>
699
- </td>
700
- <td style="background-color: #faa600; border: 1px solid #f6f6f6;"></td>
701
- <td></td>
702
- </tr>
703
-
704
- <tr>
705
- <th scope="row">
706
- <code>colorYellow120</code>
707
- </th>
708
- <td>
709
- <code>#c78500</code>
710
- </td>
711
- <td style="background-color: #c78500; border: 1px solid #f6f6f6;"></td>
712
- <td></td>
713
- </tr>
714
- </tbody>
715
- </table>
716
- <hr />
717
- </section>
718
-
719
-
720
-
721
-
722
-
723
-
724
-
725
-
726
-
727
-
728
- </main>
729
- </div>
730
- </body>
731
- </html>
732
-