-
Notifications
You must be signed in to change notification settings - Fork 2
/
Css.ts
977 lines (918 loc) · 50.8 KB
/
Css.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
import { Properties as Properties1 } from "csstype";
// This file is auto-generated by truss: https://github.com/homebound-team/truss.
/** Given a type X, and the user's proposed type T, only allow keys in X and nothing else. */
export type Only<X, T> = X & Record<Exclude<keyof T, keyof X>, never>;
export type Properties = Properties1;
type Opts<T> = {
rules: T;
enabled: boolean;
important: boolean;
selector: string | undefined;
};
// prettier-ignore
class CssBuilder<T extends Properties1> {
constructor(private opts: Opts<T>) {}
private get rules(): T { return this.opts.rules };
private get enabled(): boolean { return this.opts.enabled };
private get selector(): string | undefined { return this.opts.selector };
private newCss(opts: Partial<Opts<T>>): CssBuilder<T> {
return new CssBuilder({ ...this.opts, ...opts });
}
// border
get ba() { return this.add("borderStyle", "solid").add("borderWidth", "1px"); }
get bt() { return this.add("borderTopStyle", "solid").add("borderTopWidth", "1px"); }
get br() { return this.add("borderRightStyle", "solid").add("borderRightWidth", "1px"); }
get bb() { return this.add("borderBottomStyle", "solid").add("borderBottomWidth", "1px"); }
get bl() { return this.add("borderLeftStyle", "solid").add("borderLeftWidth", "1px"); }
get bn() { return this.add("borderStyle", "none").add("borderWidth", "0"); }
// borderColor
get bWhite() { return this.add("borderColor", "rgba(254,254,254,1)"); }
get bTransparent() { return this.add("borderColor", "rgba(0,0,0,0)"); }
get bGray50() { return this.add("borderColor", "rgba(255,253,253,1)"); }
get bGray100() { return this.add("borderColor", "rgba(247,245,245,1)"); }
get bGray200() { return this.add("borderColor", "rgba(236,235,235,1)"); }
get bGray300() { return this.add("borderColor", "rgba(221,220,220,1)"); }
get bGray400() { return this.add("borderColor", "rgba(201,201,201,1)"); }
get bGray500() { return this.add("borderColor", "rgba(175,175,175,1)"); }
get bGray600() { return this.add("borderColor", "rgba(141,141,141,1)"); }
get bGray700() { return this.add("borderColor", "rgba(100,100,100,1)"); }
get bGray800() { return this.add("borderColor", "rgba(53,53,53,1)"); }
get bGray900() { return this.add("borderColor", "rgba(36,36,36,1)"); }
get bLightBlue50() { return this.add("borderColor", "rgba(240,249,255,1)"); }
get bLightBlue100() { return this.add("borderColor", "rgba(224,242,254,1)"); }
get bLightBlue200() { return this.add("borderColor", "rgba(186,230,253,1)"); }
get bLightBlue300() { return this.add("borderColor", "rgba(125,211,252,1)"); }
get bLightBlue400() { return this.add("borderColor", "rgba(56,189,248,1)"); }
get bLightBlue500() { return this.add("borderColor", "rgba(14,165,233,1)"); }
get bLightBlue600() { return this.add("borderColor", "rgba(2,143,199,1)"); }
get bLightBlue700() { return this.add("borderColor", "rgba(3,105,161,1)"); }
get bLightBlue800() { return this.add("borderColor", "rgba(7,89,133,1)"); }
get bLightBlue900() { return this.add("borderColor", "rgba(12,74,110,1)"); }
get bRed50() { return this.add("borderColor", "rgba(255,242,242,1)"); }
get bRed100() { return this.add("borderColor", "rgba(253,210,209,1)"); }
get bRed200() { return this.add("borderColor", "rgba(249,181,177,1)"); }
get bRed300() { return this.add("borderColor", "rgba(242,155,148,1)"); }
get bRed400() { return this.add("borderColor", "rgba(232,133,122,1)"); }
get bRed500() { return this.add("borderColor", "rgba(218,114,100,1)"); }
get bRed600() { return this.add("borderColor", "rgba(200,98,81,1)"); }
get bRed700() { return this.add("borderColor", "rgba(176,83,73,1)"); }
get bRed800() { return this.add("borderColor", "rgba(149,68,64,1)"); }
get bRed900() { return this.add("borderColor", "rgba(120,54,54,1)"); }
get bYellow50() { return this.add("borderColor", "rgba(255,254,242,1)"); }
get bYellow100() { return this.add("borderColor", "rgba(255,254,212,1)"); }
get bYellow200() { return this.add("borderColor", "rgba(255,250,180,1)"); }
get bYellow300() { return this.add("borderColor", "rgba(255,240,150,1)"); }
get bYellow400() { return this.add("borderColor", "rgba(255,225,123,1)"); }
get bYellow500() { return this.add("borderColor", "rgba(255,204,99,1)"); }
get bYellow600() { return this.add("borderColor", "rgba(246,177,78,1)"); }
get bYellow700() { return this.add("borderColor", "rgba(207,150,73,1)"); }
get bYellow800() { return this.add("borderColor", "rgba(164,120,66,1)"); }
get bYellow900() { return this.add("borderColor", "rgba(120,89,54,1)"); }
get bGreen50() { return this.add("borderColor", "rgba(250,255,250,1)"); }
get bGreen100() { return this.add("borderColor", "rgba(223,248,216,1)"); }
get bGreen200() { return this.add("borderColor", "rgba(199,239,183,1)"); }
get bGreen300() { return this.add("borderColor", "rgba(179,226,153,1)"); }
get bGreen400() { return this.add("borderColor", "rgba(163,208,126,1)"); }
get bGreen500() { return this.add("borderColor", "rgba(146,185,101,1)"); }
get bGreen600() { return this.add("borderColor", "rgba(126,156,79,1)"); }
get bGreen700() { return this.add("borderColor", "rgba(101,120,57,1)"); }
get bGreen800() { return this.add("borderColor", "rgba(64,93,44,1)"); }
get bGreen900() { return this.add("borderColor", "rgba(34,64,31,1)"); }
get bViolet50() { return this.add("borderColor", "rgba(245,243,255,1)"); }
get bViolet100() { return this.add("borderColor", "rgba(238,234,253,1)"); }
get bViolet200() { return this.add("borderColor", "rgba(232,225,252,1)"); }
get bViolet300() { return this.add("borderColor", "rgba(218,205,246,1)"); }
get bViolet400() { return this.add("borderColor", "rgba(204,186,236,1)"); }
get bViolet500() { return this.add("borderColor", "rgba(190,167,223,1)"); }
get bViolet600() { return this.add("borderColor", "rgba(173,147,205,1)"); }
get bViolet700() { return this.add("borderColor", "rgba(153,126,181,1)"); }
get bViolet800() { return this.add("borderColor", "rgba(128,103,151,1)"); }
get bViolet900() { return this.add("borderColor", "rgba(100,78,116,1)"); }
// borderRadius
get br0() { return this.add("borderRadius", "0"); }
get br4() { return this.add("borderRadius", "4px"); }
get br8() { return this.add("borderRadius", "8px"); }
get br12() { return this.add("borderRadius", "12px"); }
get br16() { return this.add("borderRadius", "16px"); }
get br100() { return this.add("borderRadius", "100%"); }
// borderStyle
get bsDashed() { return this.add("borderStyle", "dashed"); }
get bsDotted() { return this.add("borderStyle", "dotted"); }
get bsNone() { return this.add("borderStyle", "none"); }
get bsSolid() { return this.add("borderStyle", "solid"); }
// borderWidth
get bw1() { return this.add("borderWidth", "1px"); }
get bw2() { return this.add("borderWidth", "2px"); }
bw(value: Properties["borderWidth"]) { return this.add("borderWidth", value); }
// boxShadow
get bsh0() { return this.add("boxShadow", "none"); }
get bshBasic() { return this.add("boxShadow", "0px 2px 16px 0px rgba(17,24,39,0.03), 0px 4px 8px 0px rgba(17,24,39,0.08)"); }
get bshHover() { return this.add("boxShadow", "0px 2px 24px 0px rgba(17,24,39,0.08), 0px 4px 8px 0px rgba(17,24,39,0.1)"); }
get bshFocus() { return this.add("boxShadow", "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(3,105,161,1)"); }
get bshDanger() { return this.add("boxShadow", "0px 0px 0px 2px rgba(254,254,254,1), 0px 0px 0px 4px rgba(149,68,64,1)"); }
// coordinates
get top0() { return this.top(0); }
get top1() { return this.top(1); }
get top2() { return this.top(2); }
get top3() { return this.top(3); }
get top4() { return this.top(4); }
get top5() { return this.top(5); }
get top6() { return this.top(6); }
get top7() { return this.top(7); }
get top8() { return this.top(8); }
top(inc: number | string) { return this.add("top", maybeInc(inc)); }
topPx(px: number) { return this.add("top", `${px}px`); }
get right0() { return this.right(0); }
get right1() { return this.right(1); }
get right2() { return this.right(2); }
get right3() { return this.right(3); }
get right4() { return this.right(4); }
get right5() { return this.right(5); }
get right6() { return this.right(6); }
get right7() { return this.right(7); }
get right8() { return this.right(8); }
right(inc: number | string) { return this.add("right", maybeInc(inc)); }
rightPx(px: number) { return this.add("right", `${px}px`); }
get bottom0() { return this.bottom(0); }
get bottom1() { return this.bottom(1); }
get bottom2() { return this.bottom(2); }
get bottom3() { return this.bottom(3); }
get bottom4() { return this.bottom(4); }
get bottom5() { return this.bottom(5); }
get bottom6() { return this.bottom(6); }
get bottom7() { return this.bottom(7); }
get bottom8() { return this.bottom(8); }
bottom(inc: number | string) { return this.add("bottom", maybeInc(inc)); }
bottomPx(px: number) { return this.add("bottom", `${px}px`); }
get left0() { return this.left(0); }
get left1() { return this.left(1); }
get left2() { return this.left(2); }
get left3() { return this.left(3); }
get left4() { return this.left(4); }
get left5() { return this.left(5); }
get left6() { return this.left(6); }
get left7() { return this.left(7); }
get left8() { return this.left(8); }
left(inc: number | string) { return this.add("left", maybeInc(inc)); }
leftPx(px: number) { return this.add("left", `${px}px`); }
// cursor
get cursorPointer() { return this.add("cursor", "pointer"); }
get cursorNotAllowed() { return this.add("cursor", "not-allowed"); }
// display
get dn() { return this.add("display", "none"); }
get db() { return this.add("display", "block"); }
get dib() { return this.add("display", "inline-block"); }
get dit() { return this.add("display", "inline-table"); }
get dt() { return this.add("display", "table"); }
get dtc() { return this.add("display", "table-cell"); }
get dtRow() { return this.add("display", "table-row"); }
get dtColumn() { return this.add("display", "table-column"); }
get dtColumnGroup() { return this.add("display", "table-column-group"); }
get dg() { return this.add("display", "grid"); }
get dig() { return this.add("display", "inline-grid"); }
get df() { return this.add("display", "flex"); }
get dif() { return this.add("display", "inline-flex"); }
display(value: Properties["display"]) { return this.add("display", value); }
// flexbox
get justifyStart() { return this.add("justifyContent", "flex-start"); }
get justifyEnd() { return this.add("justifyContent", "flex-end"); }
get justifyCenter() { return this.add("justifyContent", "center"); }
get justifyBetween() { return this.add("justifyContent", "space-between"); }
get justifyAround() { return this.add("justifyContent", "space-around"); }
get justifyEvenly() { return this.add("justifyContent", "space-evenly"); }
justify(value: Properties["justifyContent"]) { return this.add("justifyContent", value); }
get selfStart() { return this.add("alignSelf", "flex-start"); }
get selfEnd() { return this.add("alignSelf", "flex-end"); }
get selfCenter() { return this.add("alignSelf", "center"); }
get selfBaseline() { return this.add("alignSelf", "baseline"); }
get selfStretch() { return this.add("alignSelf", "stretch"); }
self(value: Properties["alignSelf"]) { return this.add("alignSelf", value); }
get itemsStart() { return this.add("alignItems", "flex-start"); }
get itemsEnd() { return this.add("alignItems", "flex-end"); }
get itemsCenter() { return this.add("alignItems", "center"); }
get itemsBaseline() { return this.add("alignItems", "baseline"); }
get itemsStretch() { return this.add("alignItems", "stretch"); }
items(value: Properties["alignItems"]) { return this.add("alignItems", value); }
get fb1() { return this.add("flexBasis", "100%"); }
get fb2() { return this.add("flexBasis", "50%"); }
get fb3() { return this.add("flexBasis", "33.333333%"); }
get fb4() { return this.add("flexBasis", "25%"); }
get fb5() { return this.add("flexBasis", "20%"); }
get fb6() { return this.add("flexBasis", "16.666666%"); }
get fb7() { return this.add("flexBasis", "14.285714%"); }
get fb0() { return this.add("flexBasis", "12.5%"); }
fb(value: Properties["flexBasis"]) { return this.add("flexBasis", value); }
get flexAuto() { return this.add("flex", "auto"); }
get flexNone() { return this.add("flex", "none"); }
flex(value: Properties["flex"]) { return this.add("flex", value); }
get fg0() { return this.add("flexGrow", 0); }
get fg1() { return this.add("flexGrow", 1); }
flexGrow(value: Properties["flexGrow"]) { return this.add("flexGrow", value); }
get fs0() { return this.add("flexShrink", 0); }
get fs1() { return this.add("flexShrink", 1); }
flexShrink(value: Properties["flexShrink"]) { return this.add("flexShrink", value); }
get flexRow() { return this.add("flexDirection", "row"); }
get flexRowReverse() { return this.add("flexDirection", "row-reverse"); }
get flexColumn() { return this.add("flexDirection", "column"); }
get flexColumnReverse() { return this.add("flexDirection", "column-reverse"); }
flexDirection(value: Properties["flexDirection"]) { return this.add("flexDirection", value); }
// float
get fl() { return this.add("float", "left"); }
get fn() { return this.add("float", "none"); }
get fr() { return this.add("float", "right"); }
// fontWeight
get normal() { return this.add("fontWeight", "normal"); }
get b() { return this.add("fontWeight", "bold"); }
get fw1() { return this.add("fontWeight", 100); }
get fw2() { return this.add("fontWeight", 200); }
get fw3() { return this.add("fontWeight", 300); }
get fw4() { return this.add("fontWeight", 400); }
get fw5() { return this.add("fontWeight", 500); }
get fw6() { return this.add("fontWeight", 600); }
get fw7() { return this.add("fontWeight", 700); }
get fw8() { return this.add("fontWeight", 800); }
get fw9() { return this.add("fontWeight", 900); }
// grid
gtc(value: Properties["gridTemplateColumns"]) { return this.add("gridTemplateColumns", value); }
gtr(value: Properties["gridTemplateRows"]) { return this.add("gridTemplateRows", value); }
get gap0() { return this.gap(0); }
get gap1() { return this.gap(1); }
get gap2() { return this.gap(2); }
get gap3() { return this.gap(3); }
get gap4() { return this.gap(4); }
get gap5() { return this.gap(5); }
get gap6() { return this.gap(6); }
get gap7() { return this.gap(7); }
get gap8() { return this.gap(8); }
gap(inc: number | string) { return this.add("gap", maybeInc(inc)); }
gapPx(px: number) { return this.add("gap", `${px}px`); }
// height
get h0() { return this.h(0); }
get h1() { return this.h(1); }
get h2() { return this.h(2); }
get h3() { return this.h(3); }
get h4() { return this.h(4); }
get h5() { return this.h(5); }
get h6() { return this.h(6); }
get h7() { return this.h(7); }
get h8() { return this.h(8); }
h(inc: number | string) { return this.add("height", maybeInc(inc)); }
hPx(px: number) { return this.add("height", `${px}px`); }
get h25() { return this.add("height", "25%"); }
get h50() { return this.add("height", "50%"); }
get h75() { return this.add("height", "75%"); }
get h100() { return this.add("height", "100%"); }
get vh25() { return this.add("height", "25vh"); }
get vh50() { return this.add("height", "50vh"); }
get vh75() { return this.add("height", "75vh"); }
get vh100() { return this.add("height", "100vh"); }
get mh0() { return this.add("minHeight", 0); }
get mh25() { return this.add("minHeight", "25%"); }
get mh50() { return this.add("minHeight", "50%"); }
get mh75() { return this.add("minHeight", "75%"); }
get mh100() { return this.add("minHeight", "100%"); }
get mvh100() { return this.add("minHeight", "100vh"); }
mh(value: Properties["minHeight"]) { return this.add("minHeight", value); }
get maxh0() { return this.add("maxHeight", "0"); }
get maxh25() { return this.add("maxHeight", "25%"); }
get maxh50() { return this.add("maxHeight", "50%"); }
get maxh75() { return this.add("maxHeight", "75%"); }
get maxh100() { return this.add("maxHeight", "100%"); }
maxh(value: Properties["maxHeight"]) { return this.add("maxHeight", value); }
// objectFit
get objectContain() { return this.add("objectFit", "contain"); }
get objectCover() { return this.add("objectFit", "cover"); }
get objectFill() { return this.add("objectFit", "fill"); }
get objectNone() { return this.add("objectFit", "none"); }
get objectScaleDown() { return this.add("objectFit", "scale-down"); }
objectFit(value: Properties["objectFit"]) { return this.add("objectFit", value); }
// outline
get outline() { return this.add("outline", "1px solid"); }
get outlineTransparent() { return this.add("outline", "1px solid transparent"); }
get outline0() { return this.add("outline", "0"); }
// overflow
get overflowVisible() { return this.add("overflow", "visible"); }
get overflowHidden() { return this.add("overflow", "hidden"); }
get overflowScroll() { return this.add("overflow", "scroll"); }
get overflowAuto() { return this.add("overflow", "auto"); }
overflow(value: Properties["overflow"]) { return this.add("overflow", value); }
get overflowYVisible() { return this.add("overflowY", "visible"); }
get overflowYHidden() { return this.add("overflowY", "hidden"); }
get overflowYScroll() { return this.add("overflowY", "scroll"); }
get overflowYAuto() { return this.add("overflowY", "auto"); }
overflowY(value: Properties["overflowY"]) { return this.add("overflowY", value); }
get overflowXVisible() { return this.add("overflowX", "visible"); }
get overflowXHidden() { return this.add("overflowX", "hidden"); }
get overflowXScroll() { return this.add("overflowX", "scroll"); }
get overflowXAuto() { return this.add("overflowX", "auto"); }
overflowX(value: Properties["overflowX"]) { return this.add("overflowX", value); }
// position
get absolute() { return this.add("position", "absolute"); }
get fixed() { return this.add("position", "fixed"); }
get static() { return this.add("position", "static"); }
get relative() { return this.add("position", "relative"); }
get sticky() { return this.add("position", "sticky"); }
// skins
get white() { return this.add("color", "rgba(254,254,254,1)"); }
get transparent() { return this.add("color", "rgba(0,0,0,0)"); }
get gray50() { return this.add("color", "rgba(255,253,253,1)"); }
get gray100() { return this.add("color", "rgba(247,245,245,1)"); }
get gray200() { return this.add("color", "rgba(236,235,235,1)"); }
get gray300() { return this.add("color", "rgba(221,220,220,1)"); }
get gray400() { return this.add("color", "rgba(201,201,201,1)"); }
get gray500() { return this.add("color", "rgba(175,175,175,1)"); }
get gray600() { return this.add("color", "rgba(141,141,141,1)"); }
get gray700() { return this.add("color", "rgba(100,100,100,1)"); }
get gray800() { return this.add("color", "rgba(53,53,53,1)"); }
get gray900() { return this.add("color", "rgba(36,36,36,1)"); }
get lightBlue50() { return this.add("color", "rgba(240,249,255,1)"); }
get lightBlue100() { return this.add("color", "rgba(224,242,254,1)"); }
get lightBlue200() { return this.add("color", "rgba(186,230,253,1)"); }
get lightBlue300() { return this.add("color", "rgba(125,211,252,1)"); }
get lightBlue400() { return this.add("color", "rgba(56,189,248,1)"); }
get lightBlue500() { return this.add("color", "rgba(14,165,233,1)"); }
get lightBlue600() { return this.add("color", "rgba(2,143,199,1)"); }
get lightBlue700() { return this.add("color", "rgba(3,105,161,1)"); }
get lightBlue800() { return this.add("color", "rgba(7,89,133,1)"); }
get lightBlue900() { return this.add("color", "rgba(12,74,110,1)"); }
get red50() { return this.add("color", "rgba(255,242,242,1)"); }
get red100() { return this.add("color", "rgba(253,210,209,1)"); }
get red200() { return this.add("color", "rgba(249,181,177,1)"); }
get red300() { return this.add("color", "rgba(242,155,148,1)"); }
get red400() { return this.add("color", "rgba(232,133,122,1)"); }
get red500() { return this.add("color", "rgba(218,114,100,1)"); }
get red600() { return this.add("color", "rgba(200,98,81,1)"); }
get red700() { return this.add("color", "rgba(176,83,73,1)"); }
get red800() { return this.add("color", "rgba(149,68,64,1)"); }
get red900() { return this.add("color", "rgba(120,54,54,1)"); }
get yellow50() { return this.add("color", "rgba(255,254,242,1)"); }
get yellow100() { return this.add("color", "rgba(255,254,212,1)"); }
get yellow200() { return this.add("color", "rgba(255,250,180,1)"); }
get yellow300() { return this.add("color", "rgba(255,240,150,1)"); }
get yellow400() { return this.add("color", "rgba(255,225,123,1)"); }
get yellow500() { return this.add("color", "rgba(255,204,99,1)"); }
get yellow600() { return this.add("color", "rgba(246,177,78,1)"); }
get yellow700() { return this.add("color", "rgba(207,150,73,1)"); }
get yellow800() { return this.add("color", "rgba(164,120,66,1)"); }
get yellow900() { return this.add("color", "rgba(120,89,54,1)"); }
get green50() { return this.add("color", "rgba(250,255,250,1)"); }
get green100() { return this.add("color", "rgba(223,248,216,1)"); }
get green200() { return this.add("color", "rgba(199,239,183,1)"); }
get green300() { return this.add("color", "rgba(179,226,153,1)"); }
get green400() { return this.add("color", "rgba(163,208,126,1)"); }
get green500() { return this.add("color", "rgba(146,185,101,1)"); }
get green600() { return this.add("color", "rgba(126,156,79,1)"); }
get green700() { return this.add("color", "rgba(101,120,57,1)"); }
get green800() { return this.add("color", "rgba(64,93,44,1)"); }
get green900() { return this.add("color", "rgba(34,64,31,1)"); }
get violet50() { return this.add("color", "rgba(245,243,255,1)"); }
get violet100() { return this.add("color", "rgba(238,234,253,1)"); }
get violet200() { return this.add("color", "rgba(232,225,252,1)"); }
get violet300() { return this.add("color", "rgba(218,205,246,1)"); }
get violet400() { return this.add("color", "rgba(204,186,236,1)"); }
get violet500() { return this.add("color", "rgba(190,167,223,1)"); }
get violet600() { return this.add("color", "rgba(173,147,205,1)"); }
get violet700() { return this.add("color", "rgba(153,126,181,1)"); }
get violet800() { return this.add("color", "rgba(128,103,151,1)"); }
get violet900() { return this.add("color", "rgba(100,78,116,1)"); }
color(value: string) { return this.add("color", value); }
get bgWhite() { return this.add("backgroundColor", "rgba(254,254,254,1)"); }
get bgTransparent() { return this.add("backgroundColor", "rgba(0,0,0,0)"); }
get bgGray50() { return this.add("backgroundColor", "rgba(255,253,253,1)"); }
get bgGray100() { return this.add("backgroundColor", "rgba(247,245,245,1)"); }
get bgGray200() { return this.add("backgroundColor", "rgba(236,235,235,1)"); }
get bgGray300() { return this.add("backgroundColor", "rgba(221,220,220,1)"); }
get bgGray400() { return this.add("backgroundColor", "rgba(201,201,201,1)"); }
get bgGray500() { return this.add("backgroundColor", "rgba(175,175,175,1)"); }
get bgGray600() { return this.add("backgroundColor", "rgba(141,141,141,1)"); }
get bgGray700() { return this.add("backgroundColor", "rgba(100,100,100,1)"); }
get bgGray800() { return this.add("backgroundColor", "rgba(53,53,53,1)"); }
get bgGray900() { return this.add("backgroundColor", "rgba(36,36,36,1)"); }
get bgLightBlue50() { return this.add("backgroundColor", "rgba(240,249,255,1)"); }
get bgLightBlue100() { return this.add("backgroundColor", "rgba(224,242,254,1)"); }
get bgLightBlue200() { return this.add("backgroundColor", "rgba(186,230,253,1)"); }
get bgLightBlue300() { return this.add("backgroundColor", "rgba(125,211,252,1)"); }
get bgLightBlue400() { return this.add("backgroundColor", "rgba(56,189,248,1)"); }
get bgLightBlue500() { return this.add("backgroundColor", "rgba(14,165,233,1)"); }
get bgLightBlue600() { return this.add("backgroundColor", "rgba(2,143,199,1)"); }
get bgLightBlue700() { return this.add("backgroundColor", "rgba(3,105,161,1)"); }
get bgLightBlue800() { return this.add("backgroundColor", "rgba(7,89,133,1)"); }
get bgLightBlue900() { return this.add("backgroundColor", "rgba(12,74,110,1)"); }
get bgRed50() { return this.add("backgroundColor", "rgba(255,242,242,1)"); }
get bgRed100() { return this.add("backgroundColor", "rgba(253,210,209,1)"); }
get bgRed200() { return this.add("backgroundColor", "rgba(249,181,177,1)"); }
get bgRed300() { return this.add("backgroundColor", "rgba(242,155,148,1)"); }
get bgRed400() { return this.add("backgroundColor", "rgba(232,133,122,1)"); }
get bgRed500() { return this.add("backgroundColor", "rgba(218,114,100,1)"); }
get bgRed600() { return this.add("backgroundColor", "rgba(200,98,81,1)"); }
get bgRed700() { return this.add("backgroundColor", "rgba(176,83,73,1)"); }
get bgRed800() { return this.add("backgroundColor", "rgba(149,68,64,1)"); }
get bgRed900() { return this.add("backgroundColor", "rgba(120,54,54,1)"); }
get bgYellow50() { return this.add("backgroundColor", "rgba(255,254,242,1)"); }
get bgYellow100() { return this.add("backgroundColor", "rgba(255,254,212,1)"); }
get bgYellow200() { return this.add("backgroundColor", "rgba(255,250,180,1)"); }
get bgYellow300() { return this.add("backgroundColor", "rgba(255,240,150,1)"); }
get bgYellow400() { return this.add("backgroundColor", "rgba(255,225,123,1)"); }
get bgYellow500() { return this.add("backgroundColor", "rgba(255,204,99,1)"); }
get bgYellow600() { return this.add("backgroundColor", "rgba(246,177,78,1)"); }
get bgYellow700() { return this.add("backgroundColor", "rgba(207,150,73,1)"); }
get bgYellow800() { return this.add("backgroundColor", "rgba(164,120,66,1)"); }
get bgYellow900() { return this.add("backgroundColor", "rgba(120,89,54,1)"); }
get bgGreen50() { return this.add("backgroundColor", "rgba(250,255,250,1)"); }
get bgGreen100() { return this.add("backgroundColor", "rgba(223,248,216,1)"); }
get bgGreen200() { return this.add("backgroundColor", "rgba(199,239,183,1)"); }
get bgGreen300() { return this.add("backgroundColor", "rgba(179,226,153,1)"); }
get bgGreen400() { return this.add("backgroundColor", "rgba(163,208,126,1)"); }
get bgGreen500() { return this.add("backgroundColor", "rgba(146,185,101,1)"); }
get bgGreen600() { return this.add("backgroundColor", "rgba(126,156,79,1)"); }
get bgGreen700() { return this.add("backgroundColor", "rgba(101,120,57,1)"); }
get bgGreen800() { return this.add("backgroundColor", "rgba(64,93,44,1)"); }
get bgGreen900() { return this.add("backgroundColor", "rgba(34,64,31,1)"); }
get bgViolet50() { return this.add("backgroundColor", "rgba(245,243,255,1)"); }
get bgViolet100() { return this.add("backgroundColor", "rgba(238,234,253,1)"); }
get bgViolet200() { return this.add("backgroundColor", "rgba(232,225,252,1)"); }
get bgViolet300() { return this.add("backgroundColor", "rgba(218,205,246,1)"); }
get bgViolet400() { return this.add("backgroundColor", "rgba(204,186,236,1)"); }
get bgViolet500() { return this.add("backgroundColor", "rgba(190,167,223,1)"); }
get bgViolet600() { return this.add("backgroundColor", "rgba(173,147,205,1)"); }
get bgViolet700() { return this.add("backgroundColor", "rgba(153,126,181,1)"); }
get bgViolet800() { return this.add("backgroundColor", "rgba(128,103,151,1)"); }
get bgViolet900() { return this.add("backgroundColor", "rgba(100,78,116,1)"); }
bgColor(value: string) { return this.add("backgroundColor", value); }
get fWhite() { return this.add("fill", "rgba(254,254,254,1)"); }
get fTransparent() { return this.add("fill", "rgba(0,0,0,0)"); }
get fGray50() { return this.add("fill", "rgba(255,253,253,1)"); }
get fGray100() { return this.add("fill", "rgba(247,245,245,1)"); }
get fGray200() { return this.add("fill", "rgba(236,235,235,1)"); }
get fGray300() { return this.add("fill", "rgba(221,220,220,1)"); }
get fGray400() { return this.add("fill", "rgba(201,201,201,1)"); }
get fGray500() { return this.add("fill", "rgba(175,175,175,1)"); }
get fGray600() { return this.add("fill", "rgba(141,141,141,1)"); }
get fGray700() { return this.add("fill", "rgba(100,100,100,1)"); }
get fGray800() { return this.add("fill", "rgba(53,53,53,1)"); }
get fGray900() { return this.add("fill", "rgba(36,36,36,1)"); }
get fLightBlue50() { return this.add("fill", "rgba(240,249,255,1)"); }
get fLightBlue100() { return this.add("fill", "rgba(224,242,254,1)"); }
get fLightBlue200() { return this.add("fill", "rgba(186,230,253,1)"); }
get fLightBlue300() { return this.add("fill", "rgba(125,211,252,1)"); }
get fLightBlue400() { return this.add("fill", "rgba(56,189,248,1)"); }
get fLightBlue500() { return this.add("fill", "rgba(14,165,233,1)"); }
get fLightBlue600() { return this.add("fill", "rgba(2,143,199,1)"); }
get fLightBlue700() { return this.add("fill", "rgba(3,105,161,1)"); }
get fLightBlue800() { return this.add("fill", "rgba(7,89,133,1)"); }
get fLightBlue900() { return this.add("fill", "rgba(12,74,110,1)"); }
get fRed50() { return this.add("fill", "rgba(255,242,242,1)"); }
get fRed100() { return this.add("fill", "rgba(253,210,209,1)"); }
get fRed200() { return this.add("fill", "rgba(249,181,177,1)"); }
get fRed300() { return this.add("fill", "rgba(242,155,148,1)"); }
get fRed400() { return this.add("fill", "rgba(232,133,122,1)"); }
get fRed500() { return this.add("fill", "rgba(218,114,100,1)"); }
get fRed600() { return this.add("fill", "rgba(200,98,81,1)"); }
get fRed700() { return this.add("fill", "rgba(176,83,73,1)"); }
get fRed800() { return this.add("fill", "rgba(149,68,64,1)"); }
get fRed900() { return this.add("fill", "rgba(120,54,54,1)"); }
get fYellow50() { return this.add("fill", "rgba(255,254,242,1)"); }
get fYellow100() { return this.add("fill", "rgba(255,254,212,1)"); }
get fYellow200() { return this.add("fill", "rgba(255,250,180,1)"); }
get fYellow300() { return this.add("fill", "rgba(255,240,150,1)"); }
get fYellow400() { return this.add("fill", "rgba(255,225,123,1)"); }
get fYellow500() { return this.add("fill", "rgba(255,204,99,1)"); }
get fYellow600() { return this.add("fill", "rgba(246,177,78,1)"); }
get fYellow700() { return this.add("fill", "rgba(207,150,73,1)"); }
get fYellow800() { return this.add("fill", "rgba(164,120,66,1)"); }
get fYellow900() { return this.add("fill", "rgba(120,89,54,1)"); }
get fGreen50() { return this.add("fill", "rgba(250,255,250,1)"); }
get fGreen100() { return this.add("fill", "rgba(223,248,216,1)"); }
get fGreen200() { return this.add("fill", "rgba(199,239,183,1)"); }
get fGreen300() { return this.add("fill", "rgba(179,226,153,1)"); }
get fGreen400() { return this.add("fill", "rgba(163,208,126,1)"); }
get fGreen500() { return this.add("fill", "rgba(146,185,101,1)"); }
get fGreen600() { return this.add("fill", "rgba(126,156,79,1)"); }
get fGreen700() { return this.add("fill", "rgba(101,120,57,1)"); }
get fGreen800() { return this.add("fill", "rgba(64,93,44,1)"); }
get fGreen900() { return this.add("fill", "rgba(34,64,31,1)"); }
get fViolet50() { return this.add("fill", "rgba(245,243,255,1)"); }
get fViolet100() { return this.add("fill", "rgba(238,234,253,1)"); }
get fViolet200() { return this.add("fill", "rgba(232,225,252,1)"); }
get fViolet300() { return this.add("fill", "rgba(218,205,246,1)"); }
get fViolet400() { return this.add("fill", "rgba(204,186,236,1)"); }
get fViolet500() { return this.add("fill", "rgba(190,167,223,1)"); }
get fViolet600() { return this.add("fill", "rgba(173,147,205,1)"); }
get fViolet700() { return this.add("fill", "rgba(153,126,181,1)"); }
get fViolet800() { return this.add("fill", "rgba(128,103,151,1)"); }
get fViolet900() { return this.add("fill", "rgba(100,78,116,1)"); }
fill(value: string) { return this.add("fill", value); }
// spacing
get mt0() { return this.mt(0); }
get mt1() { return this.mt(1); }
get mt2() { return this.mt(2); }
get mt3() { return this.mt(3); }
get mt4() { return this.mt(4); }
get mt5() { return this.mt(5); }
get mt6() { return this.mt(6); }
get mt7() { return this.mt(7); }
get mt8() { return this.mt(8); }
mt(inc: number | string) { return this.add("marginTop", maybeInc(inc)); }
mtPx(px: number) { return this.add("marginTop", `${px}px`); }
get mr0() { return this.mr(0); }
get mr1() { return this.mr(1); }
get mr2() { return this.mr(2); }
get mr3() { return this.mr(3); }
get mr4() { return this.mr(4); }
get mr5() { return this.mr(5); }
get mr6() { return this.mr(6); }
get mr7() { return this.mr(7); }
get mr8() { return this.mr(8); }
mr(inc: number | string) { return this.add("marginRight", maybeInc(inc)); }
mrPx(px: number) { return this.add("marginRight", `${px}px`); }
get mb0() { return this.mb(0); }
get mb1() { return this.mb(1); }
get mb2() { return this.mb(2); }
get mb3() { return this.mb(3); }
get mb4() { return this.mb(4); }
get mb5() { return this.mb(5); }
get mb6() { return this.mb(6); }
get mb7() { return this.mb(7); }
get mb8() { return this.mb(8); }
mb(inc: number | string) { return this.add("marginBottom", maybeInc(inc)); }
mbPx(px: number) { return this.add("marginBottom", `${px}px`); }
get ml0() { return this.ml(0); }
get ml1() { return this.ml(1); }
get ml2() { return this.ml(2); }
get ml3() { return this.ml(3); }
get ml4() { return this.ml(4); }
get ml5() { return this.ml(5); }
get ml6() { return this.ml(6); }
get ml7() { return this.ml(7); }
get ml8() { return this.ml(8); }
ml(inc: number | string) { return this.add("marginLeft", maybeInc(inc)); }
mlPx(px: number) { return this.add("marginLeft", `${px}px`); }
get mx0() { return this.mx(0); }
get mx1() { return this.mx(1); }
get mx2() { return this.mx(2); }
get mx3() { return this.mx(3); }
get mx4() { return this.mx(4); }
get mx5() { return this.mx(5); }
get mx6() { return this.mx(6); }
get mx7() { return this.mx(7); }
get mx8() { return this.mx(8); }
mx(inc: number | string) { return this.ml(inc).mr(inc); }
mxPx(px: number) { return this.mlPx(px).mrPx(px); }
get my0() { return this.my(0); }
get my1() { return this.my(1); }
get my2() { return this.my(2); }
get my3() { return this.my(3); }
get my4() { return this.my(4); }
get my5() { return this.my(5); }
get my6() { return this.my(6); }
get my7() { return this.my(7); }
get my8() { return this.my(8); }
my(inc: number | string) { return this.mt(inc).mb(inc); }
myPx(px: number) { return this.mtPx(px).mbPx(px); }
get m0() { return this.m(0); }
get m1() { return this.m(1); }
get m2() { return this.m(2); }
get m3() { return this.m(3); }
get m4() { return this.m(4); }
get m5() { return this.m(5); }
get m6() { return this.m(6); }
get m7() { return this.m(7); }
get m8() { return this.m(8); }
m(inc: number | string) { return this.mt(inc).mb(inc).mr(inc).ml(inc); }
mPx(px: number) { return this.mtPx(px).mbPx(px).mrPx(px).mlPx(px); }
get pt0() { return this.pt(0); }
get pt1() { return this.pt(1); }
get pt2() { return this.pt(2); }
get pt3() { return this.pt(3); }
get pt4() { return this.pt(4); }
get pt5() { return this.pt(5); }
get pt6() { return this.pt(6); }
get pt7() { return this.pt(7); }
get pt8() { return this.pt(8); }
pt(inc: number | string) { return this.add("paddingTop", maybeInc(inc)); }
ptPx(px: number) { return this.add("paddingTop", `${px}px`); }
get pr0() { return this.pr(0); }
get pr1() { return this.pr(1); }
get pr2() { return this.pr(2); }
get pr3() { return this.pr(3); }
get pr4() { return this.pr(4); }
get pr5() { return this.pr(5); }
get pr6() { return this.pr(6); }
get pr7() { return this.pr(7); }
get pr8() { return this.pr(8); }
pr(inc: number | string) { return this.add("paddingRight", maybeInc(inc)); }
prPx(px: number) { return this.add("paddingRight", `${px}px`); }
get pb0() { return this.pb(0); }
get pb1() { return this.pb(1); }
get pb2() { return this.pb(2); }
get pb3() { return this.pb(3); }
get pb4() { return this.pb(4); }
get pb5() { return this.pb(5); }
get pb6() { return this.pb(6); }
get pb7() { return this.pb(7); }
get pb8() { return this.pb(8); }
pb(inc: number | string) { return this.add("paddingBottom", maybeInc(inc)); }
pbPx(px: number) { return this.add("paddingBottom", `${px}px`); }
get pl0() { return this.pl(0); }
get pl1() { return this.pl(1); }
get pl2() { return this.pl(2); }
get pl3() { return this.pl(3); }
get pl4() { return this.pl(4); }
get pl5() { return this.pl(5); }
get pl6() { return this.pl(6); }
get pl7() { return this.pl(7); }
get pl8() { return this.pl(8); }
pl(inc: number | string) { return this.add("paddingLeft", maybeInc(inc)); }
plPx(px: number) { return this.add("paddingLeft", `${px}px`); }
get px0() { return this.px(0); }
get px1() { return this.px(1); }
get px2() { return this.px(2); }
get px3() { return this.px(3); }
get px4() { return this.px(4); }
get px5() { return this.px(5); }
get px6() { return this.px(6); }
get px7() { return this.px(7); }
get px8() { return this.px(8); }
px(inc: number | string) { return this.pl(inc).pr(inc); }
pxPx(px: number) { return this.plPx(px).prPx(px); }
get py0() { return this.py(0); }
get py1() { return this.py(1); }
get py2() { return this.py(2); }
get py3() { return this.py(3); }
get py4() { return this.py(4); }
get py5() { return this.py(5); }
get py6() { return this.py(6); }
get py7() { return this.py(7); }
get py8() { return this.py(8); }
py(inc: number | string) { return this.pt(inc).pb(inc); }
pyPx(px: number) { return this.ptPx(px).pbPx(px); }
get p0() { return this.p(0); }
get p1() { return this.p(1); }
get p2() { return this.p(2); }
get p3() { return this.p(3); }
get p4() { return this.p(4); }
get p5() { return this.p(5); }
get p6() { return this.p(6); }
get p7() { return this.p(7); }
get p8() { return this.p(8); }
p(inc: number | string) { return this.pt(inc).pb(inc).pr(inc).pl(inc); }
pPx(px: number) { return this.ptPx(px).pbPx(px).prPx(px).plPx(px); }
// textAlign
get tl() { return this.add("textAlign", "left"); }
get tc() { return this.add("textAlign", "center"); }
get tr() { return this.add("textAlign", "right"); }
get tj() { return this.add("textAlign", "justify"); }
// textDecoration
get noUnderline() { return this.add("textDecoration", "none"); }
get strike() { return this.add("textDecoration", "line-through"); }
get underline() { return this.add("textDecoration", "underline"); }
// textTransform
get ttc() { return this.add("textTransform", "capitalize"); }
get ttl() { return this.add("textTransform", "lowercase"); }
get ttu() { return this.add("textTransform", "uppercase"); }
get ttn() { return this.add("textTransform", "none"); }
// typeScale
get tiny() { return this.add("fontWeight", 400).add("fontSize", "10px").add("lineHeight", "14px"); }
get tinyEm() { return this.add("fontWeight", 600).add("fontSize", "10px").add("lineHeight", "14px"); }
get xs() { return this.add("fontWeight", 400).add("fontSize", "12px").add("lineHeight", "16px"); }
get xsEm() { return this.add("fontWeight", 500).add("fontSize", "12px").add("lineHeight", "16px"); }
get sm() { return this.add("fontWeight", 400).add("fontSize", "14px").add("lineHeight", "20px"); }
get smEm() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px"); }
get base() { return this.add("fontWeight", 400).add("fontSize", "16px").add("lineHeight", "24px"); }
get baseEm() { return this.add("fontWeight", 500).add("fontSize", "16px").add("lineHeight", "24px"); }
get lg() { return this.add("fontWeight", 400).add("fontSize", "18px").add("lineHeight", "28px"); }
get lgEm() { return this.add("fontWeight", 600).add("fontSize", "18px").add("lineHeight", "28px"); }
get xl() { return this.add("fontWeight", 400).add("fontSize", "20px").add("lineHeight", "28px"); }
get xlEm() { return this.add("fontWeight", 600).add("fontSize", "20px").add("lineHeight", "28px"); }
get xl2() { return this.add("fontWeight", 400).add("fontSize", "24px").add("lineHeight", "32px"); }
get xl2Em() { return this.add("fontWeight", 600).add("fontSize", "24px").add("lineHeight", "32px"); }
get xl3() { return this.add("fontWeight", 400).add("fontSize", "30px").add("lineHeight", "36px"); }
get xl3Em() { return this.add("fontWeight", 600).add("fontSize", "30px").add("lineHeight", "36px"); }
get xl4() { return this.add("fontWeight", 400).add("fontSize", "36px").add("lineHeight", "40px"); }
get xl4Em() { return this.add("fontWeight", 600).add("fontSize", "36px").add("lineHeight", "40px"); }
get xl5() { return this.add("fontWeight", 400).add("fontSize", "48px").add("lineHeight", "48px"); }
get xl5Em() { return this.add("fontWeight", 600).add("fontSize", "48px").add("lineHeight", "48px"); }
// typography
get measure() { return this.add("maxWidth", "30em"); }
get measureWide() { return this.add("maxWidth", "34em"); }
get measureNarrow() { return this.add("maxWidth", "20em"); }
get indent() { return this.add("textIndent", "1em").add("marginTop", 0).add("marginBottom", 0); }
get smallCaps() { return this.add("fontVariant", "small-caps"); }
get truncate() { return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis"); }
// userSelect
get selectNone() { return this.add("userSelect", "none"); }
get selectText() { return this.add("userSelect", "text"); }
get selectAll() { return this.add("userSelect", "all"); }
get selectAuto() { return this.add("userSelect", "auto"); }
// verticalAlign
get vBase() { return this.add("verticalAlign", "baseline"); }
get vMid() { return this.add("verticalAlign", "middle"); }
get vTop() { return this.add("verticalAlign", "top"); }
get vBottom() { return this.add("verticalAlign", "bottom"); }
// visibility
get visible() { return this.add("visibility", "visible"); }
get invisible() { return this.add("visibility", "hidden"); }
// whitespace
get nowrap() { return this.add("whiteSpace", "nowrap"); }
get pre() { return this.add("whiteSpace", "pre"); }
get wsNormal() { return this.add("whiteSpace", "normal"); }
// width
get w25() { return this.add("width", "25%"); }
get w50() { return this.add("width", "50%"); }
get w75() { return this.add("width", "75%"); }
get w100() { return this.add("width", "100%"); }
get mw0() { return this.add("minWidth", 0); }
get mw25() { return this.add("minWidth", "25%"); }
get mw50() { return this.add("minWidth", "50%"); }
get mw75() { return this.add("minWidth", "75%"); }
get mw100() { return this.add("minWidth", "100%"); }
mw(value: Properties["minWidth"]) { return this.add("minWidth", value); }
get maxw0() { return this.add("maxWidth", "0"); }
get maxw25() { return this.add("maxWidth", "25%"); }
get maxw50() { return this.add("maxWidth", "50%"); }
get maxw75() { return this.add("maxWidth", "75%"); }
get maxw100() { return this.add("maxWidth", "100%"); }
maxw(value: Properties["maxWidth"]) { return this.add("maxWidth", value); }
get w0() { return this.w(0); }
get w1() { return this.w(1); }
get w2() { return this.w(2); }
get w3() { return this.w(3); }
get w4() { return this.w(4); }
get w5() { return this.w(5); }
get w6() { return this.w(6); }
get w7() { return this.w(7); }
get w8() { return this.w(8); }
w(inc: number | string) { return this.add("width", maybeInc(inc)); }
wPx(px: number) { return this.add("width", `${px}px`); }
// zIndex
get z0() { return this.add("zIndex", 0); }
get z1() { return this.add("zIndex", 1); }
get z2() { return this.add("zIndex", 2); }
get z3() { return this.add("zIndex", 3); }
get z4() { return this.add("zIndex", 4); }
get z5() { return this.add("zIndex", 5); }
get z999() { return this.add("zIndex", 999); }
get z9999() { return this.add("zIndex", 9999); }
get zInherit() { return this.add("zIndex", "inherit"); }
get zInitial() { return this.add("zIndex", "initial"); }
get zUnset() { return this.add("zIndex", "unset"); }
z(value: Properties["zIndex"]) { return this.add("zIndex", value); }
// fontFamily
get sansSerif() { return this.add("fontFamily", "'Inter', sans-serif"); }
// animation
get transition() { return this.add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms"); }
// childGap
get childGap0() { return this.childGap(0); }
get childGap1() { return this.childGap(1); }
get childGap2() { return this.childGap(2); }
get childGap3() { return this.childGap(3); }
get childGap4() { return this.childGap(4); }
get childGap5() { return this.childGap(5); }
get childGap6() { return this.childGap(6); }
get childGap7() { return this.childGap(7); }
get childGap8() { return this.childGap(8); }
childGap(inc: number | string) {
const direction = this.opts.rules["flexDirection"];
const p = direction === "column" ? "marginTop" : direction === "column-reverse" ? "marginBottom" : "marginLeft";
return this.addIn("& > * + *", Css.add(p, maybeInc(inc)).important.$);
}
// buttonBase
get buttonBase() { return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add("borderRadius", "4px").add("display", "inline-flex").add("margin", "4px").add("alignItems", "center").add("transition", "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms"); }
// aliases
get $(): T { return maybeImportant(sortObject(this.rules), this.opts.important); }
if(t: boolean | Breakpoint) {
if (typeof t === "boolean") {
return this.newCss({ enabled: t });
} else {
return this.newCss({ selector: t as string });
}
}
get else() {
if (this.selector !== undefined) {
throw new Error("else is not supported with if(selector)");
}
return this.newCss({ enabled: !this.enabled });
}
get important() { return this.newCss({ important: true }); }
/** Adds new properties, either a specific key/value or a Properties object, to the current css. */
add<P extends Properties>(props: P): CssBuilder<T & P>;
add<K extends keyof Properties>(prop: K, value: Properties[K]): CssBuilder<T & { [U in K]: Properties[K] }>;
add<K extends keyof Properties>(propOrProperties: K | Properties, value?: Properties[K]): CssBuilder<any> {
const newRules = typeof propOrProperties === "string" ? { [propOrProperties]: value } : propOrProperties;
const rules = this.selector
? { ...this.rules, [this.selector]: { ...(this.rules as any)[this.selector], ...newRules } }
: this.enabled ? { ...this.rules, ...newRules } : this.rules;
return this.newCss({ rules: rules as any });
}
/** Adds new properties, either a specific key/value or a Properties object, to a nested selector. */
addIn<P extends Properties>(selector: string, props: P): CssBuilder<T & P>;
addIn<K extends keyof Properties>(selector: string, prop: K, value: Properties[K]): CssBuilder<T & { [U in K]: Properties[K] }>;
addIn<K extends keyof Properties>(selector: string, propOrProperties: K | Properties, value?: Properties[K]): CssBuilder<any> {
const newRules = typeof propOrProperties === "string" ? { [propOrProperties]: value } : propOrProperties;
const rules = { ...this.rules, [selector]: { ...(this.rules as any)[selector], ...newRules } };
return this.newCss({ rules: rules as any });
}
}
/** Emotion treats the same rules, ordered differently as different classes, but naively they can be the same. */
function sortObject<T extends object>(obj: T): T {
return Object.keys(obj)
.sort()
.reduce((acc, key) => {
acc[key as keyof T] = obj[key as keyof T];
return acc;
}, ({} as any) as T) as T;
}
/** Conditionally adds `important!` to everything. */
function maybeImportant<T extends object>(obj: T, important: boolean): T {
if (important) {
Object.keys(obj).forEach((key) => {
(obj as any)[key] = `${(obj as any)[key]} !important`;
});
}
return obj;
}
/** Converts `inc` into pixels value with a `px` suffix. */
export function maybeInc(inc: number | string): string {
return typeof inc === "string" ? inc : `${increment(inc)}px`;
}
/** Converts `inc` into pixels. */
export function increment(inc: number): number {
return inc * 8;
}
/** Convert `pixels` to a `px` units string so it's not ambiguous. */
export function px(pixels: number): string {
return `${pixels}px`;
}
export enum Palette {
White = "rgba(254,254,254,1)",
Transparent = "rgba(0,0,0,0)",
Gray50 = "rgba(255,253,253,1)",
Gray100 = "rgba(247,245,245,1)",
Gray200 = "rgba(236,235,235,1)",
Gray300 = "rgba(221,220,220,1)",
Gray400 = "rgba(201,201,201,1)",
Gray500 = "rgba(175,175,175,1)",
Gray600 = "rgba(141,141,141,1)",
Gray700 = "rgba(100,100,100,1)",
Gray800 = "rgba(53,53,53,1)",
Gray900 = "rgba(36,36,36,1)",
LightBlue50 = "rgba(240,249,255,1)",
LightBlue100 = "rgba(224,242,254,1)",
LightBlue200 = "rgba(186,230,253,1)",
LightBlue300 = "rgba(125,211,252,1)",
LightBlue400 = "rgba(56,189,248,1)",
LightBlue500 = "rgba(14,165,233,1)",
LightBlue600 = "rgba(2,143,199,1)",
LightBlue700 = "rgba(3,105,161,1)",
LightBlue800 = "rgba(7,89,133,1)",
LightBlue900 = "rgba(12,74,110,1)",
Red50 = "rgba(255,242,242,1)",
Red100 = "rgba(253,210,209,1)",
Red200 = "rgba(249,181,177,1)",
Red300 = "rgba(242,155,148,1)",
Red400 = "rgba(232,133,122,1)",
Red500 = "rgba(218,114,100,1)",
Red600 = "rgba(200,98,81,1)",
Red700 = "rgba(176,83,73,1)",
Red800 = "rgba(149,68,64,1)",
Red900 = "rgba(120,54,54,1)",
Yellow50 = "rgba(255,254,242,1)",
Yellow100 = "rgba(255,254,212,1)",
Yellow200 = "rgba(255,250,180,1)",
Yellow300 = "rgba(255,240,150,1)",
Yellow400 = "rgba(255,225,123,1)",
Yellow500 = "rgba(255,204,99,1)",
Yellow600 = "rgba(246,177,78,1)",
Yellow700 = "rgba(207,150,73,1)",
Yellow800 = "rgba(164,120,66,1)",
Yellow900 = "rgba(120,89,54,1)",
Green50 = "rgba(250,255,250,1)",
Green100 = "rgba(223,248,216,1)",
Green200 = "rgba(199,239,183,1)",
Green300 = "rgba(179,226,153,1)",
Green400 = "rgba(163,208,126,1)",
Green500 = "rgba(146,185,101,1)",
Green600 = "rgba(126,156,79,1)",
Green700 = "rgba(101,120,57,1)",
Green800 = "rgba(64,93,44,1)",
Green900 = "rgba(34,64,31,1)",
Violet50 = "rgba(245,243,255,1)",
Violet100 = "rgba(238,234,253,1)",
Violet200 = "rgba(232,225,252,1)",
Violet300 = "rgba(218,205,246,1)",
Violet400 = "rgba(204,186,236,1)",
Violet500 = "rgba(190,167,223,1)",
Violet600 = "rgba(173,147,205,1)",
Violet700 = "rgba(153,126,181,1)",
Violet800 = "rgba(128,103,151,1)",
Violet900 = "rgba(100,78,116,1)",
}
/** A shortcut for defining Xss types. */
export type Xss<P extends keyof Properties> = Pick<Properties, P>;
/** An entry point for Css expressions. CssBuilder is immutable so this is safe to share. */
export const Css = new CssBuilder({ rules: {}, enabled: true, important: false, selector: undefined });
export type Margin = "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft";
export type Padding = "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft";
type Brand<K, T> = K & { __brand: T };
type Breakpoint = Brand<string, "Breakpoint">;
export const print = "@media print" as Breakpoint;