@charcoal-ui/theme 1.0.0-alpha.1 → 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.
package/theme.json ADDED
@@ -0,0 +1,566 @@
1
+ {
2
+ "dark": {
3
+ "typography": {
4
+ "size": {
5
+ "12": {
6
+ "fontSize": 12,
7
+ "lineHeight": 20
8
+ },
9
+ "14": {
10
+ "fontSize": 14,
11
+ "lineHeight": 22
12
+ },
13
+ "16": {
14
+ "fontSize": 16,
15
+ "lineHeight": 24
16
+ },
17
+ "20": {
18
+ "fontSize": 20,
19
+ "lineHeight": 28
20
+ },
21
+ "32": {
22
+ "fontSize": 32,
23
+ "lineHeight": 40
24
+ }
25
+ }
26
+ },
27
+ "spacing": {
28
+ "0": 0,
29
+ "4": 4,
30
+ "8": 8,
31
+ "16": 16,
32
+ "24": 24,
33
+ "40": 40,
34
+ "64": 64,
35
+ "104": 104,
36
+ "168": 168,
37
+ "272": 272,
38
+ "440": 440
39
+ },
40
+ "grid": {
41
+ "unit": {
42
+ "column": 80,
43
+ "gutter": 24
44
+ }
45
+ },
46
+ "borderRadius": {
47
+ "4": 4,
48
+ "8": 8,
49
+ "16": 16,
50
+ "24": 24,
51
+ "none": 0,
52
+ "oval": 999999
53
+ },
54
+ "transition": {
55
+ "default": {
56
+ "duration": 0.2
57
+ }
58
+ },
59
+ "breakpoint": {
60
+ "screen1": 744,
61
+ "screen2": 952,
62
+ "screen3": 1160,
63
+ "screen4": 1368
64
+ },
65
+ "gradientColor": {
66
+ "surface5": [
67
+ {
68
+ "color": {
69
+ "red": 0,
70
+ "green": 0,
71
+ "blue": 0,
72
+ "alpha": 0.32
73
+ },
74
+ "ratio": 0
75
+ },
76
+ {
77
+ "color": {
78
+ "red": 0,
79
+ "green": 0,
80
+ "blue": 0,
81
+ "alpha": 0
82
+ },
83
+ "ratio": 100
84
+ }
85
+ ],
86
+ "callToAction": [
87
+ {
88
+ "color": {
89
+ "red": 0.8196078431372549,
90
+ "green": 1,
91
+ "blue": 0.10196078431372549,
92
+ "alpha": 1
93
+ },
94
+ "ratio": 0
95
+ },
96
+ {
97
+ "color": {
98
+ "red": 0.10196078431372549,
99
+ "green": 0.8196078431372549,
100
+ "blue": 1,
101
+ "alpha": 1
102
+ },
103
+ "ratio": 100
104
+ }
105
+ ]
106
+ },
107
+ "outline": {
108
+ "default": {
109
+ "color": {
110
+ "red": 1,
111
+ "green": 1,
112
+ "blue": 1,
113
+ "alpha": 0.12
114
+ }
115
+ }
116
+ },
117
+ "elementEffect": {
118
+ "disabled": {
119
+ "type": "opacity",
120
+ "opacity": 0.32
121
+ }
122
+ },
123
+ "effect": {
124
+ "hover": {
125
+ "type": "alpha",
126
+ "color": {
127
+ "red": 0,
128
+ "green": 0,
129
+ "blue": 0,
130
+ "alpha": 1
131
+ },
132
+ "opacity": 0.08
133
+ },
134
+ "press": {
135
+ "type": "alpha",
136
+ "color": {
137
+ "red": 0,
138
+ "green": 0,
139
+ "blue": 0,
140
+ "alpha": 1
141
+ },
142
+ "opacity": 0.16
143
+ }
144
+ },
145
+ "color": {
146
+ "transparent": {
147
+ "red": 0,
148
+ "green": 0,
149
+ "blue": 0,
150
+ "alpha": 0
151
+ },
152
+ "background1": {
153
+ "red": 0.12156862745098039,
154
+ "green": 0.12156862745098039,
155
+ "blue": 0.12156862745098039,
156
+ "alpha": 1
157
+ },
158
+ "background2": {
159
+ "red": 0,
160
+ "green": 0,
161
+ "blue": 0,
162
+ "alpha": 1
163
+ },
164
+ "icon6": {
165
+ "red": 1,
166
+ "green": 1,
167
+ "blue": 1,
168
+ "alpha": 0.28
169
+ },
170
+ "link1": {
171
+ "red": 0.23921568627450981,
172
+ "green": 0.4627450980392157,
173
+ "blue": 0.6,
174
+ "alpha": 1
175
+ },
176
+ "link2": {
177
+ "red": 1,
178
+ "green": 1,
179
+ "blue": 1,
180
+ "alpha": 0.36
181
+ },
182
+ "surface1": {
183
+ "red": 0.12156862745098039,
184
+ "green": 0.12156862745098039,
185
+ "blue": 0.12156862745098039,
186
+ "alpha": 1
187
+ },
188
+ "surface2": {
189
+ "red": 0,
190
+ "green": 0,
191
+ "blue": 0,
192
+ "alpha": 0.16
193
+ },
194
+ "surface3": {
195
+ "red": 1,
196
+ "green": 1,
197
+ "blue": 1,
198
+ "alpha": 0.12
199
+ },
200
+ "surface4": {
201
+ "red": 0,
202
+ "green": 0,
203
+ "blue": 0,
204
+ "alpha": 0.32
205
+ },
206
+ "surface6": {
207
+ "red": 1,
208
+ "green": 1,
209
+ "blue": 1,
210
+ "alpha": 0.12
211
+ },
212
+ "surface7": {
213
+ "red": 0,
214
+ "green": 0,
215
+ "blue": 0,
216
+ "alpha": 0.02
217
+ },
218
+ "surface8": {
219
+ "red": 0,
220
+ "green": 0,
221
+ "blue": 0,
222
+ "alpha": 0.88
223
+ },
224
+ "surface9": {
225
+ "red": 1,
226
+ "green": 1,
227
+ "blue": 1,
228
+ "alpha": 0.84
229
+ },
230
+ "text1": {
231
+ "red": 1,
232
+ "green": 1,
233
+ "blue": 1,
234
+ "alpha": 1
235
+ },
236
+ "text2": {
237
+ "red": 1,
238
+ "green": 1,
239
+ "blue": 1,
240
+ "alpha": 0.68
241
+ },
242
+ "text3": {
243
+ "red": 1,
244
+ "green": 1,
245
+ "blue": 1,
246
+ "alpha": 0.36
247
+ },
248
+ "text4": {
249
+ "red": 1,
250
+ "green": 1,
251
+ "blue": 1,
252
+ "alpha": 0.28
253
+ },
254
+ "text5": {
255
+ "red": 1,
256
+ "green": 1,
257
+ "blue": 1,
258
+ "alpha": 1
259
+ },
260
+ "brand": {
261
+ "red": 0,
262
+ "green": 0.5882352941176471,
263
+ "blue": 0.9803921568627451,
264
+ "alpha": 1
265
+ },
266
+ "assertive": {
267
+ "red": 1,
268
+ "green": 0.16862745098039217,
269
+ "blue": 0,
270
+ "alpha": 1
271
+ }
272
+ },
273
+ "border": {
274
+ "default": {
275
+ "color": {
276
+ "red": 1,
277
+ "green": 1,
278
+ "blue": 1,
279
+ "alpha": 0.12
280
+ }
281
+ }
282
+ }
283
+ },
284
+ "light": {
285
+ "typography": {
286
+ "size": {
287
+ "12": {
288
+ "fontSize": 12,
289
+ "lineHeight": 20
290
+ },
291
+ "14": {
292
+ "fontSize": 14,
293
+ "lineHeight": 22
294
+ },
295
+ "16": {
296
+ "fontSize": 16,
297
+ "lineHeight": 24
298
+ },
299
+ "20": {
300
+ "fontSize": 20,
301
+ "lineHeight": 28
302
+ },
303
+ "32": {
304
+ "fontSize": 32,
305
+ "lineHeight": 40
306
+ }
307
+ }
308
+ },
309
+ "spacing": {
310
+ "0": 0,
311
+ "4": 4,
312
+ "8": 8,
313
+ "16": 16,
314
+ "24": 24,
315
+ "40": 40,
316
+ "64": 64,
317
+ "104": 104,
318
+ "168": 168,
319
+ "272": 272,
320
+ "440": 440
321
+ },
322
+ "grid": {
323
+ "unit": {
324
+ "column": 80,
325
+ "gutter": 24
326
+ }
327
+ },
328
+ "borderRadius": {
329
+ "4": 4,
330
+ "8": 8,
331
+ "16": 16,
332
+ "24": 24,
333
+ "none": 0,
334
+ "oval": 999999
335
+ },
336
+ "transition": {
337
+ "default": {
338
+ "duration": 0.2
339
+ }
340
+ },
341
+ "breakpoint": {
342
+ "screen1": 744,
343
+ "screen2": 952,
344
+ "screen3": 1160,
345
+ "screen4": 1368
346
+ },
347
+ "gradientColor": {
348
+ "surface5": [
349
+ {
350
+ "color": {
351
+ "red": 0,
352
+ "green": 0,
353
+ "blue": 0,
354
+ "alpha": 0.32
355
+ },
356
+ "ratio": 0
357
+ },
358
+ {
359
+ "color": {
360
+ "red": 0,
361
+ "green": 0,
362
+ "blue": 0,
363
+ "alpha": 0
364
+ },
365
+ "ratio": 100
366
+ }
367
+ ],
368
+ "callToAction": [
369
+ {
370
+ "color": {
371
+ "red": 0.8196078431372549,
372
+ "green": 1,
373
+ "blue": 0.10196078431372549,
374
+ "alpha": 1
375
+ },
376
+ "ratio": 0
377
+ },
378
+ {
379
+ "color": {
380
+ "red": 0.10196078431372549,
381
+ "green": 0.8196078431372549,
382
+ "blue": 1,
383
+ "alpha": 1
384
+ },
385
+ "ratio": 100
386
+ }
387
+ ]
388
+ },
389
+ "outline": {
390
+ "default": {
391
+ "color": {
392
+ "red": 0,
393
+ "green": 0,
394
+ "blue": 0,
395
+ "alpha": 0.08
396
+ }
397
+ }
398
+ },
399
+ "elementEffect": {
400
+ "disabled": {
401
+ "type": "opacity",
402
+ "opacity": 0.32
403
+ }
404
+ },
405
+ "effect": {
406
+ "hover": {
407
+ "type": "alpha",
408
+ "color": {
409
+ "red": 0,
410
+ "green": 0,
411
+ "blue": 0,
412
+ "alpha": 1
413
+ },
414
+ "opacity": 0.08
415
+ },
416
+ "press": {
417
+ "type": "alpha",
418
+ "color": {
419
+ "red": 0,
420
+ "green": 0,
421
+ "blue": 0,
422
+ "alpha": 1
423
+ },
424
+ "opacity": 0.16
425
+ }
426
+ },
427
+ "color": {
428
+ "transparent": {
429
+ "red": 0,
430
+ "green": 0,
431
+ "blue": 0,
432
+ "alpha": 0
433
+ },
434
+ "background1": {
435
+ "red": 1,
436
+ "green": 1,
437
+ "blue": 1,
438
+ "alpha": 1
439
+ },
440
+ "background2": {
441
+ "red": 0.9607843137254902,
442
+ "green": 0.9607843137254902,
443
+ "blue": 0.9607843137254902,
444
+ "alpha": 1
445
+ },
446
+ "icon6": {
447
+ "red": 1,
448
+ "green": 1,
449
+ "blue": 1,
450
+ "alpha": 0.28
451
+ },
452
+ "link1": {
453
+ "red": 0.23921568627450981,
454
+ "green": 0.4627450980392157,
455
+ "blue": 0.6,
456
+ "alpha": 1
457
+ },
458
+ "link2": {
459
+ "red": 1,
460
+ "green": 1,
461
+ "blue": 1,
462
+ "alpha": 0.36
463
+ },
464
+ "surface1": {
465
+ "red": 1,
466
+ "green": 1,
467
+ "blue": 1,
468
+ "alpha": 1
469
+ },
470
+ "surface2": {
471
+ "red": 0,
472
+ "green": 0,
473
+ "blue": 0,
474
+ "alpha": 0.02
475
+ },
476
+ "surface3": {
477
+ "red": 0,
478
+ "green": 0,
479
+ "blue": 0,
480
+ "alpha": 0.04
481
+ },
482
+ "surface4": {
483
+ "red": 0,
484
+ "green": 0,
485
+ "blue": 0,
486
+ "alpha": 0.32
487
+ },
488
+ "surface6": {
489
+ "red": 0,
490
+ "green": 0,
491
+ "blue": 0,
492
+ "alpha": 0.88
493
+ },
494
+ "surface7": {
495
+ "red": 0,
496
+ "green": 0,
497
+ "blue": 0,
498
+ "alpha": 0.02
499
+ },
500
+ "surface8": {
501
+ "red": 0,
502
+ "green": 0,
503
+ "blue": 0,
504
+ "alpha": 0.88
505
+ },
506
+ "surface9": {
507
+ "red": 1,
508
+ "green": 1,
509
+ "blue": 1,
510
+ "alpha": 0.84
511
+ },
512
+ "text1": {
513
+ "red": 0,
514
+ "green": 0,
515
+ "blue": 0,
516
+ "alpha": 0.88
517
+ },
518
+ "text2": {
519
+ "red": 0,
520
+ "green": 0,
521
+ "blue": 0,
522
+ "alpha": 0.64
523
+ },
524
+ "text3": {
525
+ "red": 0,
526
+ "green": 0,
527
+ "blue": 0,
528
+ "alpha": 0.32
529
+ },
530
+ "text4": {
531
+ "red": 0,
532
+ "green": 0,
533
+ "blue": 0,
534
+ "alpha": 0.16
535
+ },
536
+ "text5": {
537
+ "red": 1,
538
+ "green": 1,
539
+ "blue": 1,
540
+ "alpha": 1
541
+ },
542
+ "brand": {
543
+ "red": 0,
544
+ "green": 0.5882352941176471,
545
+ "blue": 0.9803921568627451,
546
+ "alpha": 1
547
+ },
548
+ "assertive": {
549
+ "red": 1,
550
+ "green": 0.16862745098039217,
551
+ "blue": 0,
552
+ "alpha": 1
553
+ }
554
+ },
555
+ "border": {
556
+ "default": {
557
+ "color": {
558
+ "red": 0,
559
+ "green": 0,
560
+ "blue": 0,
561
+ "alpha": 0.08
562
+ }
563
+ }
564
+ }
565
+ }
566
+ }
package/dist/effect.d.ts DELETED
@@ -1,39 +0,0 @@
1
- export declare type Effects = Readonly<Effect> | readonly Readonly<Effect>[];
2
- export declare type Effect = AlphaEffect | OpacityEffect | ReplaceEffect;
3
- interface BaseEffect {
4
- }
5
- export interface AlphaEffect extends BaseEffect {
6
- type: 'alpha';
7
- /**
8
- * Color to blend with the base color using alpha blending.
9
- */
10
- color: string;
11
- /**
12
- * Multiplied with the alpha value of the effect's `color` before blending.
13
- *
14
- * `1` by default.
15
- */
16
- opacity?: number;
17
- }
18
- export interface OpacityEffect extends BaseEffect {
19
- type: 'opacity';
20
- /**
21
- * Value to multiply with the current color's alpha value.
22
- */
23
- opacity: number;
24
- }
25
- export interface ReplaceEffect extends BaseEffect {
26
- type: 'replace';
27
- /**
28
- * Replaces any given color with this color
29
- */
30
- color?: string;
31
- /**
32
- * Replaces the alpha value with this opacity.
33
- *
34
- * Overrides the `color`'s opacity as well.
35
- */
36
- opacity?: number;
37
- }
38
- export {};
39
- //# sourceMappingURL=effect.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"effect.d.ts","sourceRoot":"","sources":["../src/effect.ts"],"names":[],"mappings":"AAAA,oBAAY,OAAO,GAAG,QAAQ,CAAC,MAAM,CAAC,GAAG,SAAS,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAA;AAEpE,oBAAY,MAAM,GAAG,WAAW,GAAG,aAAa,GAAG,aAAa,CAAA;AAEhE,UAAU,UAAU;CAAG;AAEvB,MAAM,WAAW,WAAY,SAAQ,UAAU;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,IAAI,EAAE,SAAS,CAAA;IACf;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,IAAI,EAAE,SAAS,CAAA;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB"}
package/src/effect.ts DELETED
@@ -1,41 +0,0 @@
1
- export type Effects = Readonly<Effect> | readonly Readonly<Effect>[]
2
-
3
- export type Effect = AlphaEffect | OpacityEffect | ReplaceEffect
4
-
5
- interface BaseEffect {}
6
-
7
- export interface AlphaEffect extends BaseEffect {
8
- type: 'alpha'
9
- /**
10
- * Color to blend with the base color using alpha blending.
11
- */
12
- color: string
13
- /**
14
- * Multiplied with the alpha value of the effect's `color` before blending.
15
- *
16
- * `1` by default.
17
- */
18
- opacity?: number
19
- }
20
-
21
- export interface OpacityEffect extends BaseEffect {
22
- type: 'opacity'
23
- /**
24
- * Value to multiply with the current color's alpha value.
25
- */
26
- opacity: number
27
- }
28
-
29
- export interface ReplaceEffect extends BaseEffect {
30
- type: 'replace'
31
- /**
32
- * Replaces any given color with this color
33
- */
34
- color?: string
35
- /**
36
- * Replaces the alpha value with this opacity.
37
- *
38
- * Overrides the `color`'s opacity as well.
39
- */
40
- opacity?: number
41
- }