@volue/design-colors 1.3.1-next.3 → 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.
Files changed (23) hide show
  1. package/dist/index.common.d.ts +57 -52
  2. package/dist/index.common.js +57 -52
  3. package/dist/index.cssmodules.css +5 -6
  4. package/dist/index.custom-properties.css +8 -4
  5. package/dist/index.json +4 -4
  6. package/dist/index.map.scss +58 -53
  7. package/dist/index.module.d.ts +57 -52
  8. package/dist/index.module.js +9 -4
  9. package/dist/index.scss +8 -5
  10. package/dist/textColors.json +2 -2
  11. package/package.json +11 -12
  12. package/src/backgroundFills.json +189 -0
  13. package/src/textColors.json +92 -0
  14. package/src/tokens.json +171 -0
  15. package/dist/backgroundFills.html +0 -710
  16. package/dist/colors.map.scss +0 -55
  17. package/dist/index.html +0 -732
  18. package/dist/textColors.html +0 -535
  19. package/src/_aliases.yml +0 -85
  20. package/src/backgroundFills.yml +0 -257
  21. package/src/colors.yml +0 -224
  22. package/src/index.yml +0 -2
  23. package/src/textColors.yml +0 -118
package/dist/textColors.html DELETED
@@ -1,535 +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
-
131
-
132
-
133
-
134
-
135
-
136
- <section>
137
- <table>
138
-
139
- <thead>
140
- <tr id=text-color>
141
- <th scope="col">Text Colors</th>
142
- <th scope="col">Value</th>
143
- <th scope="col">Examples</th>
144
- <th scope="col">Usage</th>
145
- </tr>
146
- </thead>
147
-
148
- <tbody>
149
- <tr>
150
- <th scope="row">
151
- <code>white</code>
152
- </th>
153
- <td>
154
- <code>#ffffff</code>
155
- </td>
156
-
157
- <td style="background-color: #f6f6f6; color: #ffffff;">
158
- The quick brown fox jumps over the lazy dog.
159
- </td>
160
-
161
- <td></td>
162
- </tr>
163
-
164
- <tr>
165
- <th scope="row">
166
- <code>black</code>
167
- </th>
168
- <td>
169
- <code>#000000</code>
170
- </td>
171
-
172
- <td style="background-color: #f6f6f6; color: #000000;">
173
- The quick brown fox jumps over the lazy dog.
174
- </td>
175
-
176
- <td></td>
177
- </tr>
178
-
179
- <tr>
180
- <th scope="row">
181
- <code>gray50</code>
182
- </th>
183
- <td>
184
- <code>#666666</code>
185
- </td>
186
-
187
- <td style="background-color: #f6f6f6; color: #666666;">
188
- The quick brown fox jumps over the lazy dog.
189
- </td>
190
-
191
- <td></td>
192
- </tr>
193
-
194
- <tr>
195
- <th scope="row">
196
- <code>gray75</code>
197
- </th>
198
- <td>
199
- <code>#333333</code>
200
- </td>
201
-
202
- <td style="background-color: #f6f6f6; color: #333333;">
203
- The quick brown fox jumps over the lazy dog.
204
- </td>
205
-
206
- <td></td>
207
- </tr>
208
-
209
- <tr>
210
- <th scope="row">
211
- <code>primary60</code>
212
- </th>
213
- <td>
214
- <code>#6b8085</code>
215
- </td>
216
-
217
- <td style="background-color: #f6f6f6; color: #6b8085;">
218
- The quick brown fox jumps over the lazy dog.
219
- </td>
220
-
221
- <td></td>
222
- </tr>
223
-
224
- <tr>
225
- <th scope="row">
226
- <code>primary100</code>
227
- </th>
228
- <td>
229
- <code>#082b33</code>
230
- </td>
231
-
232
- <td style="background-color: #f6f6f6; color: #082b33;">
233
- The quick brown fox jumps over the lazy dog.
234
- </td>
235
-
236
- <td></td>
237
- </tr>
238
-
239
- <tr>
240
- <th scope="row">
241
- <code>primary120</code>
242
- </th>
243
- <td>
244
- <code>#062228</code>
245
- </td>
246
-
247
- <td style="background-color: #f6f6f6; color: #062228;">
248
- The quick brown fox jumps over the lazy dog.
249
- </td>
250
-
251
- <td></td>
252
- </tr>
253
-
254
- <tr>
255
- <th scope="row">
256
- <code>accent100</code>
257
- </th>
258
- <td>
259
- <code>#01797d</code>
260
- </td>
261
-
262
- <td style="background-color: #f6f6f6; color: #01797d;">
263
- The quick brown fox jumps over the lazy dog.
264
- </td>
265
-
266
- <td></td>
267
- </tr>
268
-
269
- <tr>
270
- <th scope="row">
271
- <code>accent120</code>
272
- </th>
273
- <td>
274
- <code>#016063</code>
275
- </td>
276
-
277
- <td style="background-color: #f6f6f6; color: #016063;">
278
- The quick brown fox jumps over the lazy dog.
279
- </td>
280
-
281
- <td></td>
282
- </tr>
283
-
284
- <tr>
285
- <th scope="row">
286
- <code>blue100</code>
287
- </th>
288
- <td>
289
- <code>#2673aa</code>
290
- </td>
291
-
292
- <td style="background-color: #f6f6f6; color: #2673aa;">
293
- The quick brown fox jumps over the lazy dog.
294
- </td>
295
-
296
- <td></td>
297
- </tr>
298
-
299
- <tr>
300
- <th scope="row">
301
- <code>blue120</code>
302
- </th>
303
- <td>
304
- <code>#1a5178</code>
305
- </td>
306
-
307
- <td style="background-color: #f6f6f6; color: #1a5178;">
308
- The quick brown fox jumps over the lazy dog.
309
- </td>
310
-
311
- <td></td>
312
- </tr>
313
-
314
- <tr>
315
- <th scope="row">
316
- <code>green100</code>
317
- </th>
318
- <td>
319
- <code>#438538</code>
320
- </td>
321
-
322
- <td style="background-color: #f6f6f6; color: #438538;">
323
- The quick brown fox jumps over the lazy dog.
324
- </td>
325
-
326
- <td></td>
327
- </tr>
328
-
329
- <tr>
330
- <th scope="row">
331
- <code>green120</code>
332
- </th>
333
- <td>
334
- <code>#295222</code>
335
- </td>
336
-
337
- <td style="background-color: #f6f6f6; color: #295222;">
338
- The quick brown fox jumps over the lazy dog.
339
- </td>
340
-
341
- <td></td>
342
- </tr>
343
-
344
- <tr>
345
- <th scope="row">
346
- <code>orange100</code>
347
- </th>
348
- <td>
349
- <code>#da6e00</code>
350
- </td>
351
-
352
- <td style="background-color: #f6f6f6; color: #da6e00;">
353
- The quick brown fox jumps over the lazy dog.
354
- </td>
355
-
356
- <td></td>
357
- </tr>
358
-
359
- <tr>
360
- <th scope="row">
361
- <code>orange120</code>
362
- </th>
363
- <td>
364
- <code>#a65300</code>
365
- </td>
366
-
367
- <td style="background-color: #f6f6f6; color: #a65300;">
368
- The quick brown fox jumps over the lazy dog.
369
- </td>
370
-
371
- <td></td>
372
- </tr>
373
-
374
- <tr>
375
- <th scope="row">
376
- <code>red100</code>
377
- </th>
378
- <td>
379
- <code>#bf3f34</code>
380
- </td>
381
-
382
- <td style="background-color: #f6f6f6; color: #bf3f34;">
383
- The quick brown fox jumps over the lazy dog.
384
- </td>
385
-
386
- <td></td>
387
- </tr>
388
-
389
- <tr>
390
- <th scope="row">
391
- <code>red120</code>
392
- </th>
393
- <td>
394
- <code>#8c2e26</code>
395
- </td>
396
-
397
- <td style="background-color: #f6f6f6; color: #8c2e26;">
398
- The quick brown fox jumps over the lazy dog.
399
- </td>
400
-
401
- <td></td>
402
- </tr>
403
-
404
- <tr>
405
- <th scope="row">
406
- <code>teal100</code>
407
- </th>
408
- <td>
409
- <code>#2ba3ab</code>
410
- </td>
411
-
412
- <td style="background-color: #f6f6f6; color: #2ba3ab;">
413
- The quick brown fox jumps over the lazy dog.
414
- </td>
415
-
416
- <td></td>
417
- </tr>
418
-
419
- <tr>
420
- <th scope="row">
421
- <code>teal120</code>
422
- </th>
423
- <td>
424
- <code>#1e7278</code>
425
- </td>
426
-
427
- <td style="background-color: #f6f6f6; color: #1e7278;">
428
- The quick brown fox jumps over the lazy dog.
429
- </td>
430
-
431
- <td></td>
432
- </tr>
433
-
434
- <tr>
435
- <th scope="row">
436
- <code>purple100</code>
437
- </th>
438
- <td>
439
- <code>#faa600</code>
440
- </td>
441
-
442
- <td style="background-color: #f6f6f6; color: #faa600;">
443
- The quick brown fox jumps over the lazy dog.
444
- </td>
445
-
446
- <td></td>
447
- </tr>
448
-
449
- <tr>
450
- <th scope="row">
451
- <code>purple120</code>
452
- </th>
453
- <td>
454
- <code>#593b75</code>
455
- </td>
456
-
457
- <td style="background-color: #f6f6f6; color: #593b75;">
458
- The quick brown fox jumps over the lazy dog.
459
- </td>
460
-
461
- <td></td>
462
- </tr>
463
-
464
- <tr>
465
- <th scope="row">
466
- <code>pink100</code>
467
- </th>
468
- <td>
469
- <code>#faa600</code>
470
- </td>
471
-
472
- <td style="background-color: #f6f6f6; color: #faa600;">
473
- The quick brown fox jumps over the lazy dog.
474
- </td>
475
-
476
- <td></td>
477
- </tr>
478
-
479
- <tr>
480
- <th scope="row">
481
- <code>pink120</code>
482
- </th>
483
- <td>
484
- <code>#9c2f4a</code>
485
- </td>
486
-
487
- <td style="background-color: #f6f6f6; color: #9c2f4a;">
488
- The quick brown fox jumps over the lazy dog.
489
- </td>
490
-
491
- <td></td>
492
- </tr>
493
-
494
- <tr>
495
- <th scope="row">
496
- <code>yellow100</code>
497
- </th>
498
- <td>
499
- <code>#faa600</code>
500
- </td>
501
-
502
- <td style="background-color: #f6f6f6; color: #faa600;">
503
- The quick brown fox jumps over the lazy dog.
504
- </td>
505
-
506
- <td></td>
507
- </tr>
508
-
509
- <tr>
510
- <th scope="row">
511
- <code>yellow120</code>
512
- </th>
513
- <td>
514
- <code>#c78500</code>
515
- </td>
516
-
517
- <td style="background-color: #f6f6f6; color: #c78500;">
518
- The quick brown fox jumps over the lazy dog.
519
- </td>
520
-
521
- <td></td>
522
- </tr>
523
- </tbody>
524
- </table>
525
- <hr />
526
- </section>
527
-
528
-
529
-
530
-
531
- </main>
532
- </div>
533
- </body>
534
- </html>
535
-
package/src/_aliases.yml DELETED
@@ -1,85 +0,0 @@
1
- aliases:
2
- # Blacks, Whites, and Grays
3
- # --------------------------------------
4
- BLACK: '#000000'
5
- WHITE: '#ffffff'
6
- GRAY5: '#f2f2f2'
7
- GRAY10: '#e5e5e5'
8
- GRAY15: '#d9d9d9'
9
- GRAY25: '#b2b2b2'
10
- GRAY50: '#666666'
11
- GRAY75: '#333333'
12
-
13
- # Primary
14
- # --------------------------------------
15
- PRIMARY5: '#f2f4f5'
16
- PRIMARY10: '#e6e9ea'
17
- PRIMARY60: '#6b8085'
18
- PRIMARY100: '#082b33'
19
- PRIMARY120: '#062228'
20
-
21
- # Accent
22
- # --------------------------------------
23
- ACCENT5: '#f2f8f8'
24
- ACCENT10: '#e5f1f2'
25
- ACCENT15: '#d9ebec'
26
- ACCENT25: '#bfddde'
27
- ACCENT60: '#7fbbbd'
28
- ACCENT100: '#01797d'
29
- ACCENT120: '#016063'
30
-
31
- # Blues
32
- # --------------------------------------
33
- BLUE10: '#e9f1f6'
34
- BLUE50: '#92b8d4'
35
- BLUE100: '#2673aa'
36
- BLUE120: '#1a5178'
37
-
38
- # Green
39
- # --------------------------------------
40
- GREEN10: '#ecf3ea'
41
- GREEN50: '#a0c29b'
42
- GREEN100: '#438538'
43
- GREEN120: '#295222'
44
-
45
- # Orange
46
- # --------------------------------------
47
- ORANGE10: '#fbf0e5'
48
- ORANGE50: '#ecb67f'
49
- ORANGE100: '#da6e00'
50
- ORANGE120: '#a65300'
51
-
52
- # Red
53
- # --------------------------------------
54
- RED10: '#fbe9ea'
55
- RED50: '#df9e99'
56
- RED100: '#bf3f34'
57
- RED120: '#8c2e26'
58
-
59
- # Teal
60
- # --------------------------------------
61
- TEAL10: '#e9f6f7'
62
- TEAL50: '#94d1d5'
63
- TEAL100: '#2ba3ab'
64
- TEAL120: '#1e7278'
65
-
66
- # Pink
67
- # --------------------------------------
68
- PINK10: '#faebef'
69
- PINK50: '#e79eb0'
70
- PINK100: '#cf3f63'
71
- PINK120: '#9c2f4a'
72
-
73
- # Purple
74
- # --------------------------------------
75
- PURPLE10: '#f1ecf5'
76
- PURPLE50: '#bfa9d3'
77
- PURPLE100: '#8054a8'
78
- PURPLE120: '#593b75'
79
-
80
- # Yellow
81
- # --------------------------------------
82
- YELLOW10: '#fdfaf4'
83
- YELLOW50: '#fdd9a3'
84
- YELLOW100: '#faa600'
85
- YELLOW120: '#c78500'