-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathshared-style-variables.css
1630 lines (1560 loc) · 80.4 KB
/
shared-style-variables.css
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
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
:root {
/* PP Figma shades */
--canary-black: 240 13% 3%;
--canary-grey-6: 240 6% 6%;
--canary-grey-8: 240 7% 8%;
--canary-grey-10: 240 6% 10%;
--canary-grey-12: 240 5% 11%;
--canary-grey-15: 240 6% 15%;
--canary-grey-20: 240 6% 20%;
--canary-grey-23: 0 0% 23%;
--canary-grey-29: 0 0% 29%;
--canary-grey-30: 240 6% 30%;
--canary-grey-40: 240 6% 40%;
--canary-grey-50: 240 6% 50%;
--canary-grey-60: 240 6% 60%;
--canary-grey-70: 240 6% 70%;
--canary-grey-80: 240 6% 80%;
--canary-grey-90: 240 6% 90%;
--canary-grey-94: 240 7% 94%;
--canary-grey-96: 0 0% 96%;
--canary-grey-98: 0 0% 98%;
--canary-white: 0 0% 100%;
--canary-red-55: 0 80% 55%;
--canary-red-65: 0 80% 65%;
--canary-orange-55: 35 75% 55%;
--canary-green-65: 150 75% 65%;
--canary-blue-60: 215 100% 60%;
--canary-blue-70: 215 100% 70%;
/* PP Figma secondary colors */
--canary-mint: 175 60% 65%;
--canary-blue: 216 80% 65%;
--canary-amber: 35 75% 55%;
--canary-purple: 275 60% 75%;
--canary-green: 150 75% 65%;
--canary-red: 0 80% 65%;
--canary-orange: 35 74% 54%;
--vscode-scrollbarSlider-background: hsl(240 6% 15%);
/*--vscode-scrollbarSlider-hoverBackground: #00ff00;*/
/*--vscode-scrollbarSlider-activeBackground: #0000ff;*/
}
:root {
/* value */
/* color */
--canary-base-chrome-white: 0 0% 100%;
--canary-base-chrome-50: 240 20% 99%;
--canary-base-chrome-100: 240 28% 95.1%;
--canary-base-chrome-150: 240 29.4% 88%;
--canary-base-chrome-200: 240 13% 82%;
--canary-base-chrome-400: 240 8.9% 66.9%;
--canary-base-chrome-300: 240 12.9% 80.2%;
--canary-base-chrome-500: 240 7.8% 59.6%;
--canary-base-chrome-600: 244.3 6.4% 43.1%;
--canary-base-chrome-700: 240 8.2% 38%;
--canary-base-chrome-800: 240 7.8% 27.6%;
--canary-base-chrome-850: 240 8% 18%;
--canary-base-chrome-900: 240 6.4% 9.2%;
--canary-base-chrome-950: 240 8.1% 7.3%;
--canary-base-chrome-black: 240 10.3% 5.7%;
--canary-accent-50: 210 100% 96.5%;
--canary-accent-100: 210.7 100% 92%;
--canary-accent-150: 215.3 89.5% 88.8%;
--canary-accent-200: 212.6 100% 77.6%;
--canary-accent-300: 213.2 100% 67.1%;
--canary-accent-400: 211 99.2% 50.2%;
--canary-accent-500: 212.7 100% 47.5%;
--canary-accent-600: 213.1 100% 42.4%;
--canary-accent-700: 212.9 100% 33.9%;
--canary-accent-850: 216.7 66.7% 21.2%;
--canary-accent-900: 218.6 61.8% 13.3%;
--canary-accent-950: 221.1 48.7% 7.6%;
--canary-green-50: 130 85.7% 97.3%;
--canary-green-100: 132 71.4% 89%;
--canary-green-150: 132.9 68.4% 81.4%;
--canary-green-200: 137.7 62.8% 64.1%;
--canary-green-300: 139.8 56.5% 54.9%;
--canary-green-400: 145.5 75.5% 38.4%;
--canary-green-600: 146.7 87.5% 28.2%;
--canary-green-700: 142.7 64.3% 27.5%;
--canary-green-850: 136.2 39.8% 18.2%;
--canary-green-900: 135.8 35.8% 10.4%;
--canary-green-950: 135 23.5% 6.7%;
--canary-red-50: 11.2 80% 96.1%;
--canary-red-100: 9.4 100% 93.7%;
--canary-red-150: 9.3 93.5% 87.8%;
--canary-red-200: 7.8 100% 74.3%;
--canary-red-300: 6.4 100% 68.8%;
--canary-red-400: 4.7 69.7% 53.3%;
--canary-red-500: 4.5 66.5% 46.9%;
--canary-red-600: 4.3 67.5% 41%;
--canary-red-700: 4.5 65.7% 35.5%;
--canary-red-800: 5.5 60.5% 31.8%;
--canary-red-850: 6 57.7% 20.4%;
--canary-red-900: 8.3 46% 12.4%;
--canary-red-950: 8 33.3% 8.8%;
--canary-amber-50: 52.7 100% 93.5%;
--canary-amber-100: 49 95.3% 83.1%;
--canary-amber-150: 45.9 83.5% 81%;
--canary-amber-200: 44.2 70.5% 69.4%;
--canary-amber-300: 42.1 63.3% 61.6%;
--canary-amber-400: 40.2 56.5% 54.9%;
--canary-amber-500: 37.3 50.2% 50.4%;
--canary-amber-700: 30.6 48.5% 38%;
--canary-amber-800: 25.7 40.2% 34.1%;
--canary-amber-850: 19.5 33.9% 24.9%;
--canary-amber-900: 12.9 22.6% 12.2%;
--canary-amber-950: 13.8 30.2% 8.4%;
--canary-pink-100: 300 100% 93.7%;
--canary-pink-150: 317 100% 91%;
--canary-pink-200: 320.4 93.3% 76.5%;
--canary-pink-300: 325.1 100% 73.7%;
--canary-pink-700: 331.3 51.1% 36.1%;
--canary-pink-900: 330 32.4% 13.3%;
--canary-purple-50: 260 100% 98.8%;
--canary-purple-100: 262.8 100% 94.3%;
--canary-purple-150: 265.1 100% 89.2%;
--canary-purple-200: 267.8 100% 81%;
--canary-purple-300: 266.7 98.3% 76.3%;
--canary-purple-400: 267.9 73.4% 66.1%;
--canary-purple-700: 270.6 57.1% 35.7%;
--canary-purple-850: 268.2 43.4% 22.2%;
--canary-purple-900: 265.4 34.2% 14.9%;
--canary-purple-950: 266.7 19.1% 9.2%;
--canary-yellow-50: 47 100% 95.5%;
--canary-yellow-100: 40.6 100% 87.3%;
--canary-yellow-150: 34.2 100% 83.1%;
--canary-yellow-200: 37.4 98.8% 68.4%;
--canary-yellow-300: 38.3 80.9% 59%;
--canary-yellow-500: 39.9 67.5% 45.9%;
--canary-yellow-600: 39.7 59.6% 42.7%;
--canary-yellow-700: 40 62.9% 32.7%;
--canary-yellow-850: 38.7 44.4% 21.2%;
--canary-yellow-900: 39.2 50% 10.2%;
--canary-yellow-950: 37.5 75% 6.3%;
--canary-cyan-100: 201.6 96.2% 89.8%;
--canary-cyan-200: 198.7 80.3% 70.2%;
--canary-cyan-300: 198.2 67.3% 56.9%;
--canary-cyan-700: 204.6 71.8% 30.6%;
--canary-cyan-900: 199.5 87.8% 9.6%;
--canary-brown-100: 36.8 68.8% 87.5%;
--canary-brown-300: 24.2 67.3% 71.2%;
--canary-brown-700: 26 55.8% 37.3%;
--canary-brown-900: 27.8 80.4% 10%;
--canary-indigo-50: 236.3 100% 96.9%;
--canary-indigo-100: 236 78.9% 92.5%;
--canary-indigo-150: 232.5 96.6% 88.6%;
--canary-indigo-200: 232.1 100% 82.2%;
--canary-indigo-300: 229.2 100% 76.1%;
--canary-indigo-500: 231.1 75% 57.6%;
--canary-indigo-400: 229.2 100% 76.1%;
--canary-indigo-600: 231.9 59.2% 51%;
--canary-indigo-700: 230.2 54.5% 43.9%;
--canary-indigo-800: 229 52.1% 32.7%;
--canary-indigo-850: 227.4 47.9% 23.3%;
--canary-indigo-900: 226.5 39.2% 15.5%;
--canary-indigo-950: 227.1 29.2% 9.4%;
--canary-lime-100: 93.1 60.5% 84.1%;
--canary-lime-300: 90.3 46.5% 57.5%;
--canary-lime-700: 87.7 55.7% 27.5%;
--canary-lime-900: 92 28.3% 10.4%;
--canary-mint-100: 163.6 76.7% 83.1%;
--canary-mint-300: 170.9 100% 40%;
--canary-mint-700: 162.4 100% 22.7%;
--canary-mint-900: 151.8 33.3% 10%;
--canary-orange-100: 27.9 100% 91.6%;
--canary-orange-300: 19.4 100% 72.2%;
--canary-orange-700: 15.7 53% 42.5%;
--canary-orange-900: 20 67.7% 12.2%;
--canary-violet-100: 259 100% 92%;
--canary-violet-300: 254.7 100% 77.6%;
--canary-violet-700: 259 60% 39.2%;
--canary-violet-900: 270 52.6% 14.9%;
--canary-peach-50: 0 100% 98%;
--canary-peach-100: 1.9 100% 93.9%;
--canary-peach-150: 0.9 100% 86.7%;
--canary-peach-200: 358.9 100% 78.2%;
--canary-peach-700: 355.5 48.7% 37.5%;
--canary-peach-850: 355.6 50.5% 21.4%;
--canary-peach-900: 355.4 38.2% 13.3%;
--canary-peach-950: 356.7 37.5% 9.4%;
}
@layer themes {
/* TODO: replace hsl with variables for theming */
:root {
--canary-background: 0 0% 100%;
--canary-foreground: 240 10% 3.9%;
--canary-card: 0 0% 100%;
--canary-card-foreground: 240 10% 3.9%;
--canary-popover: 0 0% 100%;
--canary-popover-foreground: 240 10% 3.9%;
--canary-primary: 240 5.9% 10%;
--canary-primary-background: 240 5.9% 10%;
--canary-primary-foreground: 0 0% 98%;
--canary-primary-muted: var(--canary-grey-70);
--canary-primary-accent: 216 100% 60%;
--canary-secondary: 240 4.8% 95.9%;
--canary-secondary-foreground: 240 5.9% 10%;
--canary-secondary-background: 0 0% 100%;
--canary-secondary-muted: var(--canary-grey-40);
--canary-tertiary: 240 4.8% 95.9%;
--canary-tertiary-foreground: 240 5.9% 10%;
--canary-tertiary-background: 240 6% 60%;
--canary-muted: 240 4.8% 95.9%;
--canary-muted-foreground: 240 3.8% 46.1%;
--canary-accent: 240 4.8% 95.9%;
--canary-accent-foreground: 240 5.9% 10%;
--canary-destructive: 0 84.2% 60.2%;
--canary-destructive-foreground: 0 0% 98%;
--canary-border: 240 5.9% 90%;
--canary-border-background: 240 5.9% 90%;
--canary-input: 240 5.9% 90%;
--canary-input-background: 240 5.9% 90%;
--canary-ring: 240 5.9% 10%;
--canary-radius: 0.5rem;
--canary-success: var(--canary-green);
--canary-error: var(--canary-red);
--canary-warning: var(--canary-orange);
--canary-emphasis: var(--canary-emphasis);
--canary-ai: var(--canary-purple);
--canary-ai-button-stop-1: 36 60% 95%;
--canary-ai-button-stop-2: 335 58% 76%;
--canary-ai-button-stop-3: 246 66% 72%;
--canary-ai-button-stop-4: 188 97% 89%;
/* Pure Black */
--canary-solid-black: 0 0 0;
/* diff viewer */
--diff-grey: hsl(0 0% 33%);
--diff-add-content--: hsl(156 28% 10%);
--diff-del-content--: hsl(356 28% 11%);
--diff-add-lineNumber--: hsl(153 40% 14%);
--diff-del-lineNumber--: hsl(358 39% 17%);
--diff-plain-content--: var(--canary-background);
--diff-expand-content--: var(--canary-background);
--diff-plain-lineNumber--: var(--canary-background);
--diff-plain-lineNumber-color--: hsl(0 0% 100%);
--diff-hunk-content--: hsl(218 26% 12%);
--diff-hunk-lineNumber--: hsl(218 26% 12%);
--diff-add-content-highlight--: hsl(152 37% 24%);
--diff-del-content-highlight--: hsl(0 38% 26%);
--diff-add-widget--: hsl(216 80% 65%);
--diff-add-widget-color--: hsl(0 0% 100%);
--diff-empty-content--: var(--canary-background);
--diff-hunk-content-color--: hsl(0 0% 100%);
/* New colors design variables */
--canary-harness-nav-panel-bg: 212 72% 10%;
--canary-harness-grey-0: 0 0% 100%;
--canary-harness-grey-50: 210 25% 98%;
--canary-harness-grey-100: 240 41% 97%;
--canary-harness-grey-150: 240 39% 96%;
--canary-harness-grey-200: 235 19% 87%;
--canary-harness-grey-300: 237 10% 82%;
--canary-harness-grey-350: 238 12% 61%;
--canary-harness-grey-400: 238 13% 59%;
--canary-harness-grey-500: 235 11% 46%;
--canary-harness-grey-600: 234 11% 35%;
--canary-harness-grey-700: 236 11% 25%;
--canary-harness-grey-900: 240 8% 5%;
--canary-harness-primary-300: 194 100% 82%;
--canary-harness-primary-700: 206 98% 42%;
--canary-harness-primary-800: 213 100% 32%;
--canary-harness-primary-900: 213 82% 22%;
--canary-harness-purple-500: 261 60% 56%;
--canary-harness-purple-900: 270 86% 30%;
--canary-harness-green-300: 114 55% 75%;
--canary-harness-green-600: 122 44% 46%;
--canary-harness-green-800: 121 66% 29%;
--canary-harness-red-350: 4 75% 69%;
--canary-harness-red-600: 4 77% 48%;
--canary-harness-red-700: 4 79% 45%;
--canary-harness-yellow-800: 41 100% 50%;
--canary-harness-yellow-900: 29 98% 35%;
--canary-harness-orange-300: 25 100% 79%;
--canary-harness-orange-900: 15 84% 42%;
--canary-harness-pink-800: 331 75% 49%;
--canary-ai-yellow: 36 60% 85%;
--canary-ai-pink: 335 58% 66%;
--canary-ai-purple: 246 66% 62%;
--canary-ai-cyan: 187 97% 79%;
/* Text */
--canary-foreground-01: var(--canary-white);
--canary-foreground-02: var(--canary-grey-80);
--canary-foreground-03: var(--canary-grey-70);
--canary-foreground-04: var(--canary-grey-60);
--canary-foreground-05: var(--canary-grey-50);
--canary-foreground-06: var(--canary-black);
--canary-foreground-07: var(--canary-grey-40);
--canary-foreground-08: var(--canary-grey-90);
--canary-foreground-09: var(--canary-grey-30);
--canary-foreground-10: var(--canary-grey-15);
--canary-foreground-danger: var(--canary-red-65);
--canary-foreground-alert: var(--canary-orange-55);
--canary-foreground-success: var(--canary-green-65);
--canary-foreground-accent: var(--canary-blue-60);
--canary-button-foreground-danger-01: var(--canary-red-65);
/* Backgrounds */
--canary-background-01: var(--canary-grey-6);
--canary-background-02: var(--canary-grey-8);
--canary-background-03: var(--canary-grey-10);
--canary-background-04: var(--canary-grey-50) / 0.1; /* gray50/10 */
--canary-background-05: var(--canary-white);
--canary-background-06: var(--canary-grey-80);
--canary-background-07: var(--canary-black);
--canary-background-08: var(--canary-grey-12);
--canary-background-09: var(--canary-grey-15);
--canary-background-10: var(--canary-grey-94);
--canary-background-11: var(--canary-grey-40);
--canary-background-12: var(--canary-grey-20);
--canary-background-13: var(--canary-grey-30);
--canary-background-danger: var(--canary-red-65) / 0.1; /* red65/10 */
--canary-background-success: 154 13% 10% / 0.4;
--canary-background-accent: var(--canary-blue-70);
--canary-button-background-danger-01: var(--canary-red-65) / 0.1; /* red65/10 */
--canary-button-background-danger-03: var(--canary-red-65) / 0.16; /* red65/16 */
/* Borders */
--canary-border-01: var(--canary-grey-15);
--canary-border-02: var(--canary-grey-20);
--canary-border-03: var(--canary-grey-70);
--canary-border-04: var(--canary-grey-12);
--canary-border-05: var(--canary-grey-10);
--canary-border-06: var(--canary-grey-30);
--canary-border-07: var(--canary-grey-90);
--canary-border-08: var(--canary-white);
--canary-border-09: var(--canary-grey-60);
--canary-border-10: var(--canary-grey-6);
--canary-border-danger: var(--canary-red-65);
--canary-border-success: var(--canary-green-65);
--canary-border-accent: var(--canary-blue-60);
--canary-border-alert: var(--canary-orange-55);
/* Icons */
--canary-icon-01: var(--canary-grey-60);
--canary-icon-02: var(--canary-white);
--canary-icon-03: var(--canary-grey-80);
--canary-icon-04: var(--canary-grey-50);
--canary-icon-05: var(--canary-black);
--canary-icon-06: var(--canary-grey-30);
--canary-icon-07: var(--canary-grey-40);
--canary-icon-08: var(--canary-grey-90);
--canary-icon-09: var(--canary-grey-70);
--canary-icon-10: var(--canary-grey-6);
--canary-icon-danger: var(--canary-red-65);
--canary-icon-alert: var(--canary-orange-55);
--canary-icon-success: var(--canary-green-65);
--canary-icon-accent: var(--canary-blue-60);
--canary-icon-risk: var(--canary-yellow-300);
--canary-icon-merged: var(--canary-purple);
/* Tags */
/* --canary-gray */
--canary-tag-foreground-gray-01: var(--canary-grey-70);
--canary-tag-border-gray-01: var(--canary-grey-70) / 0.12; /* grey70/12 */
--canary-tag-background-gray-01: var(--canary-grey-70) / 0.1; /* grey70/10 */
--canary-tag-background-gray-02: var(--canary-grey-70) / 0.15; /* grey70/15 */
/* --canary-purple */
--canary-tag-foreground-purple-01: var(--canary-purple);
--canary-tag-border-purple-01: var(--canary-purple) / 0.12; /* purple/12 */
--canary-tag-background-purple-01: var(--canary-purple) / 0.1; /* purple/10 */
--canary-tag-background-purple-02: var(--canary-purple) / 0.15; /* purple/15 */
/* --canary-blue */
--canary-tag-foreground-blue-01: var(--canary-blue-60);
--canary-tag-border-blue-01: var(--canary-blue-60) / 0.12; /* blue60/12 */
--canary-tag-background-blue-01: var(--canary-blue-60) / 0.1; /* blue60/10 */
--canary-tag-background-blue-02: var(--canary-blue-60) / 0.15; /* blue60/15 */
/* --canary-mint */
--canary-tag-foreground-mint-01: var(--canary-mint);
--canary-tag-border-mint-01: var(--canary-mint) / 0.12; /* mint/12 */
--canary-tag-background-mint-01: var(--canary-mint) / 0.1; /* mint/10 */
--canary-tag-background-mint-02: var(--canary-mint) / 0.15; /* mint/15 */
/* --canary-amber */
--canary-tag-foreground-amber-01: var(--canary-amber);
--canary-tag-border-amber-01: var(--canary-amber) / 0.12; /* amber/12 */
--canary-tag-background-amber-01: var(--canary-amber) / 0.1; /* amber/10 */
--canary-tag-background-amber-02: var(--canary-amber) / 0.15; /* amber/15 */
/* --canary-peach */
--canary-tag-foreground-peach-01: var(--canary-peach);
--canary-tag-border-peach-01: var(--canary-peach) / 0.12; /* peach/12 */
--canary-tag-background-peach-01: var(--canary-peach) / 0.1; /* peach/10 */
--canary-tag-background-peach-02: var(--canary-peach) / 0.15; /* peach/15 */
/* --canary-red */
--canary-tag-foreground-red-01: var(--canary-red);
--canary-tag-border-red-01: var(--canary-red) / 0.12; /* red/12 */
--canary-tag-background-red-01: var(--canary-red) / 0.1; /* red/10 */
--canary-tag-background-red-02: var(--canary-red) / 0.15; /* red/15 */
/* Code Backgrounds; this token group exist in Figma, just added it here as well */
--canary-code-foreground-01: var(--canary-harness-pink-800);
--canary-code-foreground-02: var(--canary-harness-primary-700);
--canary-code-foreground-03: var(--canary-harness-green-800);
--canary-code-foreground-04: var(--canary-harness-purple-800);
--canary-code-foreground-05: var(--canary-harness-orange-900);
--canary-code-foreground-06: var(--canary-harness-grey-500);
--canary-code-foreground-07: var(--canary-harness-grey-400);
--canary-code-foreground-08: var(--canary-harness-grey-400);
--canary-code-foreground-09: var(--canary-harness-grey-500);
--canary-code-background-01: var(--canary-harness-grey-400) / 0.1;
--canary-code-background-02: var(--canary-harness-green-300) / 0.25;
--canary-code-background-03: var(--canary-harness-300) / 0.45;
--canary-code-background-04: var(--canary-harness-350) / 0.2;
--canary-code-background-05: var(--canary-harness-350) / 0.25;
--canary-code-background-06: var(--canary-harness-yellow-800) / 0.1;
--canary-code-background-07: var(--canary-harness-yellow-800) / 0.25;
--canary-code-background-08: var(--canary-blue) / 0.1;
/* Box shadow colors */
--canary-box-shadow-1: var(--canary-harness-grey-400) / 0.1;
--canary-box-shadow-2: var(--canary-harness-grey-400) / 0.1;
--canary-box-shadow-pagination: var(--canary-harness-grey-400) / 0.1;
/* Gradient colors */
--canary-tab-background-gradient: radial-gradient(
50% 50% at 50% 50%,
hsl(240deg 6% 20%/40%),
hsl(240deg 6% 20%/0%)
);
/* Labels colors */
--canary-label-background-black-01: hsla(240, 13%, 3%, 0.47);
--canary-label-foreground-red-01: hsla(0, 100%, 65%, 1);
--canary-label-background-red-01: hsla(0, 100%, 65%, 0.12);
--canary-label-foreground-green-01: hsla(130, 75%, 65%, 1);
--canary-label-background-green-01: hsla(130, 75%, 65%, 0.12);
--canary-label-foreground-yellow-01: hsla(40, 100%, 65%, 1);
--canary-label-background-yellow-01: hsla(40, 100%, 65%, 0.12);
--canary-label-foreground-blue-01: hsla(210, 100%, 65%, 1);
--canary-label-background-blue-01: hsla(210, 100%, 65%, 0.12);
--canary-label-foreground-pink-01: hsla(310, 100%, 70%, 1);
--canary-label-background-pink-01: hsla(310, 100%, 70%, 0.12);
--canary-label-foreground-purple-01: hsla(270, 100%, 70%, 1);
--canary-label-background-purple-01: hsla(270, 100%, 70%, 0.12);
--canary-label-foreground-violet-01: hsla(250, 100%, 75%, 1);
--canary-label-background-violet-01: hsla(250, 100%, 75%, 0.12);
--canary-label-foreground-indigo-01: hsla(230, 100%, 65%, 1);
--canary-label-background-indigo-01: hsla(230, 100%, 65%, 0.12);
--canary-label-foreground-cyan-01: hsla(190, 100%, 60%, 1);
--canary-label-background-cyan-01: hsla(190, 100%, 60%, 0.12);
--canary-label-foreground-orange-01: hsla(20, 100%, 65%, 1);
--canary-label-background-orange-01: hsla(20, 100%, 65%, 0.12);
--canary-label-foreground-brown-01: hsla(30, 30%, 50%, 1);
--canary-label-background-brown-01: hsla(30, 30%, 50%, 0.12);
--canary-label-foreground-mint-01: hsla(155, 100%, 65%, 1);
--canary-label-background-mint-01: hsla(155, 100%, 65%, 0.12);
--canary-label-foreground-lime-01: hsla(90, 100%, 75%, 1);
--canary-label-background-lime-01: hsla(90, 100%, 75%, 0.12);
/* Graph */
--canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
--canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
--canary-graph-gradient-executing-1: hsla(220, 100%, 85%, 0.2);
--canary-graph-gradient-executing-2: hsla(220, 100%, 85%, 1);
}
/* Need .light and .dark classes for MFE */
/* Standalone app uses .light-std-std and .dark-std-std as defaults for light and dark themes */
.light,
.light-std-std {
--canary-background: var(--canary-base-chrome-50);
--canary-foreground: var(--canary-base-chrome-850);
--canary-card: var(--canary-base-chrome-white);
--canary-card-foreground: var(--canary-base-chrome-black);
--canary-popover: var(--canary-base-chrome-white);
--canary-popover-foreground: var(--canary-base-chrome-black);
--canary-primary: var(--canary-base-chrome-black);
--canary-primary-background: var(--canary-base-chrome-50);
--canary-primary-foreground: var(--canary-base-chrome-850);
--canary-primary-muted: var(--canary-base-chrome-850);
--canary-primary-accent: var(--canary-accent-500);
--canary-secondary: var(--canary-base-chrome-100);
--canary-secondary-foreground: var(--canary-base-chrome-black);
--canary-secondary-background: var(--canary-base-chrome-white);
--canary-secondary-muted: var(--canary-base-chrome-600);
--canary-tertiary: var(--canary-base-chrome-100);
--canary-tertiary-foreground: var(--canary-base-chrome-black);
--canary-tertiary-background: var(--canary-base-chrome-600);
--canary-muted: var(--canary-base-chrome-100);
--canary-muted-foreground: var(--canary-base-chrome-600);
--canary-accent: var(--canary-base-chrome-100);
--canary-accent-foreground: var(--canary-base-chrome-black);
--canary-destructive: var(--canary-red-600);
--canary-destructive-foreground: var(--canary-base-chrome-white);
--canary-border: var(--canary-base-chrome-150);
--canary-border-background: var(--canary-base-chrome-150);
--canary-input: var(--canary-base-chrome-150);
--canary-input-background: var(--canary-base-chrome-white);
--canary-ring: var(--canary-accent-400);
--canary-radius: 0.5rem;
--canary-success: var(--canary-green-600);
--canary-error: var(--canary-red-500);
--canary-warning: var(--canary-amber-700);
--canary-emphasis: var(--canary-accent-600);
--canary-ai: var(--canary-purple-700);
--canary-ai-button-stop-1: var(--canary-yellow-100);
--canary-ai-button-stop-2: var(--canary-pink-200);
--canary-ai-button-stop-3: var(--canary-purple-400);
--canary-ai-button-stop-4: var(--canary-cyan-200);
--diff-grey: hsl(var(--canary-base-chrome-50));
--diff-add-content--: hsl(var(--canary-green-50));
--diff-del-content--: hsl(var(--canary-red-50));
--diff-add-lineNumber--: hsl(var(--canary-green-100));
--diff-del-lineNumber--: hsl(var(--canary-red-100));
--diff-plain-content--: hsl(var(--canary-background-01));
--diff-expand-content--: hsl(var(--canary-background-01));
--diff-plain-lineNumber--: hsl(var(--canary-background-01));
--diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-850));
--diff-hunk-content--: hsl(var(--canary-accent-50));
--diff-hunk-lineNumber--: hsla(var(--canary-accent-100) / 0.7);
--diff-add-content-highlight--: hsl(var(--canary-green-100));
--diff-del-content-highlight--: hsl(var(--canary-red-100));
--diff-add-widget--: hsl(var(--canary-base-chrome-100));
--diff-add-widget-color--: hsl(var(--canary-base-chrome-850));
--diff-empty-content--: hsl(var(--canary-background-01));
--diff-hunk-content-color--: hsl(var(--canary-base-chrome-850));
/* New colors design variables */
/* Text */
--canary-foreground-01: var(--canary-base-chrome-black);
--canary-foreground-02: var(--canary-base-chrome-850);
--canary-foreground-03: var(--canary-base-chrome-700);
--canary-foreground-04: var(--canary-base-chrome-600);
--canary-foreground-05: var(--canary-base-chrome-600);
--canary-foreground-06: var(--canary-base-chrome-white);
--canary-foreground-07: var(--canary-base-chrome-600);
--canary-foreground-08: var(--canary-base-chrome-850);
--canary-foreground-09: var(--canary-base-chrome-600);
--canary-foreground-10: var(--canary-base-chrome-200);
--canary-foreground-danger: var(--canary-red-500);
--canary-foreground-alert: var(--canary-amber-700);
--canary-foreground-success: var(--canary-green-600);
--canary-foreground-accent: var(--canary-accent-600);
/* Backgrounds */
--canary-background-01: var(--canary-base-chrome-50);
--canary-background-02: var(--canary-base-chrome-white);
--canary-background-03: var(--canary-base-chrome-white);
--canary-background-04: var(--canary-base-chrome-500) / 0.12;
--canary-background-05: var(--canary-accent-500);
--canary-background-06: var(--canary-accent-500) / 0.2;
--canary-background-07: var(--canary-base-chrome-50);
--canary-background-08: var(--canary-base-chrome-white);
--canary-background-09: var(--canary-base-chrome-150);
--canary-background-10: var(--canary-accent-600);
--canary-background-11: var(--canary-base-chrome-200);
--canary-background-12: var(--canary-base-chrome-150);
--canary-background-13: var(--canary-base-chrome-600);
--canary-background-14: var(--canary-base-chrome-200);
--canary-background-surface: var(--canary-base-chrome-white);
--canary-background-accent: var(--canary-accent-500);
--canary-background-danger: var(--canary-red-50);
--canary-background-success: var(--canary-green-50);
--canary-toast-background-danger: var(--canary-red-200);
/* Borders */
--canary-border-01: var(--canary-base-chrome-150);
--canary-border-02: var(--canary-base-chrome-150);
--canary-border-03: var(--canary-base-chrome-500);
--canary-border-04: var(--canary-base-chrome-150);
--canary-border-05: var(--canary-base-chrome-150);
--canary-border-06: var(--canary-base-chrome-600);
--canary-border-07: var(--canary-base-chrome-white);
--canary-border-08: var(--canary-base-chrome-150);
--canary-border-09: var(--canary-accent-400);
--canary-border-10: var(--canary-base-chrome-150);
--canary-border-danger: var(--canary-red-400);
--canary-border-success: var(--canary-green-400);
--canary-border-accent: var(--canary-accent-400);
--canary-border-alert: var(--canary-amber-500);
/* Icons */
--canary-icon-01: var(--canary-base-chrome-600);
--canary-icon-02: var(--canary-base-chrome-black);
--canary-icon-03: var(--canary-base-chrome-850);
--canary-icon-04: var(--canary-base-chrome-600);
--canary-icon-05: var(--canary-base-chrome-white);
--canary-icon-06: var(--canary-base-chrome-200);
--canary-icon-07: var(--canary-base-chrome-850);
--canary-icon-08: var(--canary-base-chrome-black);
--canary-icon-09: var(--canary-base-chrome-600);
--canary-icon-10: var(--canary-base-chrome-white);
--canary-icon-danger: var(--canary-red-500);
--canary-icon-alert: var(--canary-amber-700);
--canary-icon-success: var(--canary-green-600);
--canary-icon-accent: var(--canary-accent-600);
--canary-icon-merged: var(--canary-purple-700);
/* Tags */
/* --gray */
--canary-tag-foreground-gray-01: var(--canary-base-chrome-800);
--canary-tag-border-gray-01: var(--canary-base-chrome-200);
--canary-tag-background-gray-01: var(--canary-base-chrome-100);
--canary-tag-background-gray-02: var(--canary-base-chrome-150);
/* --purple */
--canary-tag-foreground-purple-01: var(--canary-purple-700);
--canary-tag-border-purple-01: var(--canary-purple-150);
--canary-tag-background-purple-01: var(--canary-purple-50);
--canary-tag-background-purple-02: var(--canary-purple-100);
/* --blue */
--canary-tag-foreground-blue-01: var(--canary-accent-700);
--canary-tag-border-blue-01: var(--canary-accent-150);
--canary-tag-background-blue-01: var(--canary-accent-50);
--canary-tag-background-blue-02: var(--canary-accent-100);
/* --mint */
--canary-tag-foreground-mint-01: var(--canary-green-700);
--canary-tag-border-mint-01: var(--canary-green-150);
--canary-tag-background-mint-01: var(--canary-green-50);
--canary-tag-background-mint-02: var(--canary-green-100);
/* --amber */
--canary-tag-foreground-amber-01: var(--canary-amber-700);
--canary-tag-border-amber-01: var(--canary-amber-150);
--canary-tag-background-amber-01: var(--canary-amber-50);
--canary-tag-background-amber-02: var(--canary-amber-100);
/* --peach */
--canary-tag-foreground-peach-01: var(--canary-peach-700);
--canary-tag-border-peach-01: var(--canary-peach-150);
--canary-tag-background-peach-01: var(--canary-peach-50);
--canary-tag-background-peach-02: var(--canary-peach-100);
/* --red */
--canary-tag-foreground-red-01: var(--canary-red-700);
--canary-tag-border-red-01: var(--canary-red-150);
--canary-tag-background-red-01: var(--canary-red-50);
--canary-tag-background-red-02: var(--canary-red-100);
/* Labels */
--canary-label-background-black-01: hsla(var(--canary-base-chrome-white) / 0.7);
--canary-label-background-blue-01: hsla(var(--canary-accent-100));
--canary-label-background-brown-01: hsla(var(--canary-brown-100));
--canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
--canary-label-background-green-01: hsla(var(--canary-green-100));
--canary-label-background-indigo-01: hsla(var(--canary-indigo-100));
--canary-label-background-lime-01: hsla(var(--canary-lime-100));
--canary-label-background-mint-01: hsla(var(--canary-mint-100));
--canary-label-background-orange-01: hsla(var(--canary-orange-100));
--canary-label-background-pink-01: hsla(var(--canary-pink-100));
--canary-label-background-purple-01: hsla(var(--canary-purple-100));
--canary-label-background-red-01: hsla(var(--canary-red-100));
--canary-label-background-violet-01: hsla(var(--canary-violet-100));
--canary-label-background-yellow-01: hsla(var(--canary-yellow-100));
--canary-label-foreground-blue-01: hsla(var(--canary-accent-700));
--canary-label-foreground-brown-01: hsla(var(--canary-brown-700));
--canary-label-foreground-cyan-01: hsla(var(--canary-cyan-700));
--canary-label-foreground-green-01: hsla(var(--canary-green-700));
--canary-label-foreground-indigo-01: hsla(var(--canary-indigo-700));
--canary-label-foreground-lime-01: hsla(var(--canary-lime-700));
--canary-label-foreground-mint-01: hsla(var(--canary-mint-700));
--canary-label-foreground-orange-01: hsla(var(--canary-orange-700));
--canary-label-foreground-pink-01: hsla(var(--canary-pink-700));
--canary-label-foreground-purple-01: hsla(var(--canary-purple-700));
--canary-label-foreground-red-01: hsla(var(--canary-red-700));
--canary-label-foreground-violet-01: hsla(var(--canary-violet-700));
--canary-label-foreground-yellow-01: hsla(var(--canary-yellow-700));
/* Button */
--canary-button-foreground-danger-01: var(--canary-red-700);
--canary-button-background-danger-01: var(--canary-red-50);
--canary-button-background-danger-02: var(--canary-red-100);
--canary-button-background-danger-03: var(--canary-red-50);
--canary-button-border-danger-01: var(--canary-red-150);
--canary-button-foreground-success-01: var(--canary-green-700);
--canary-button-background-success-01: var(--canary-green-50);
--canary-button-background-success-02: var(--canary-green-100);
--canary-button-border-success-01: var(--canary-green-150);
--canary-button-foreground-disabled-01: var(--canary-base-chrome-500);
--canary-button-background-disabled-01: var(--canary-base-chrome-50);
--canary-button-border-disabled-01: var(--canary-base-chrome-150);
/* Box shadow colors */
--canary-box-shadow-1: var(--canary-base-chrome-300) / 0.3;
--canary-box-shadow-2: var(--canary-base-chrome-300) / 0.12;
--canary-box-shadow-pagination: var(--canary-base-chrome-300) / 0.12;
--shadow-sm: var(--canary-base-chrome-100);
/* Graph */
--canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
--canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
--canary-graph-gradient-executing-1: hsla(var(--canary-accent-200) / 0.2);
--canary-graph-gradient-executing-2: hsla(var(--canary-accent-500));
/* Navigation gradients */
/* We’ve removed them until we find a better solution in the design.
--canary-nav-gradient-1-1: var();
--canary-nav-gradient-1-2: var();
--canary-nav-gradient-2-1: var();
--canary-nav-gradient-2-2: var();
--canary-nav-gradient-2-3: var();
--canary-nav-gradient-3-1: var();
--canary-nav-gradient-3-2: var();
--canary-nav-gradient-4-1: var();
--canary-nav-gradient-4-2: var();
--canary-nav-item-gradient-1: var();
--canary-nav-item-gradient-2: var();
--canary-nav-item-gradient-3: var();
--canary-nav-item-gradient-4: var();
--canary-nav-item-gradient-5: var();
--canary-nav-item-gradient-6: var();
*/
/* Selected tab bg element*/
/* We’ve removed them until we find a better solution in the design.
--canary-tab-item-gradient-from: var();
--canary-tab-item-gradient-to: var();
--canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
hsla(var(--canary-tab-item-gradient-to));
--canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
*/
}
.light-prot-std {
--canary-background: var(--canary-base-chrome-50);
--canary-foreground: var(--canary-base-chrome-850);
--canary-card: var(--canary-base-chrome-white);
--canary-card-foreground: var(--canary-base-chrome-black);
--canary-popover: var(--canary-base-chrome-white);
--canary-popover-foreground: var(--canary-base-chrome-black);
--canary-primary: var(--canary-base-chrome-black);
--canary-primary-background: var(--canary-base-chrome-50);
--canary-primary-foreground: var(--canary-base-chrome-850);
--canary-primary-muted: var(--canary-base-chrome-850);
--canary-primary-accent: var(--canary-accent-500);
--canary-secondary: var(--canary-base-chrome-100);
--canary-secondary-foreground: var(--canary-base-chrome-black);
--canary-secondary-background: var(--canary-base-chrome-white);
--canary-secondary-muted: var(--canary-base-chrome-600);
--canary-tertiary: var(--canary-base-chrome-100);
--canary-tertiary-foreground: var(--canary-base-chrome-black);
--canary-tertiary-background: var(--canary-base-chrome-600);
--canary-muted: var(--canary-base-chrome-100);
--canary-muted-foreground: var(--canary-base-chrome-600);
--canary-accent: var(--canary-base-chrome-100);
--canary-accent-foreground: var(--canary-base-chrome-black);
--canary-destructive: var(--canary-indigo-600);
--canary-destructive-foreground: var(--canary-base-chrome-white);
--canary-border: var(--canary-base-chrome-150);
--canary-border-background: var(--canary-base-chrome-150);
--canary-input: var(--canary-base-chrome-150);
--canary-input-background: var(--canary-base-chrome-white);
--canary-ring: var(--canary-accent-400);
--canary-radius: 0.5rem;
--canary-success: var(--canary-yellow-600);
--canary-error: var(--canary-indigo-500);
--canary-warning: var(--canary-amber-700);
--canary-emphasis: var(--canary-accent-600);
--canary-ai: var(--canary-purple-700);
--canary-ai-button-stop-1: var(--canary-yellow-100);
--canary-ai-button-stop-2: var(--canary-pink-200);
--canary-ai-button-stop-3: var(--canary-purple-400);
--canary-ai-button-stop-4: var(--canary-cyan-200);
--diff-grey: hsl(var(--canary-base-chrome-50));
--diff-add-content--: hsl(var(--canary-yellow-50));
--diff-del-content--: hsl(var(--canary-indigo-50));
--diff-add-lineNumber--: hsl(var(--canary-yellow-100));
--diff-del-lineNumber--: hsl(var(--canary-indigo-100));
--diff-plain-content--: hsl(var(--canary-background-01));
--diff-expand-content--: hsl(var(--canary-background-01));
--diff-plain-lineNumber--: hsl(var(--canary-background-01));
--diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-850));
--diff-hunk-content--: hsl(var(--canary-accent-50));
--diff-hunk-lineNumber--: hsla(var(--canary-accent-100) / 0.7);
--diff-add-content-highlight--: hsl(var(--canary-yellow-100));
--diff-del-content-highlight--: hsl(var(--canary-indigo-100));
--diff-add-widget--: hsl(var(--canary-base-chrome-100));
--diff-add-widget-color--: hsl(var(--canary-base-chrome-850));
--diff-empty-content--: hsl(var(--canary-background-01));
--diff-hunk-content-color--: hsl(var(--canary-base-chrome-850));
/* New colors design variables */
/* Text */
--canary-foreground-01: var(--canary-base-chrome-black);
--canary-foreground-02: var(--canary-base-chrome-850);
--canary-foreground-03: var(--canary-base-chrome-700);
--canary-foreground-04: var(--canary-base-chrome-600);
--canary-foreground-05: var(--canary-base-chrome-600);
--canary-foreground-06: var(--canary-base-chrome-white);
--canary-foreground-07: var(--canary-base-chrome-600);
--canary-foreground-08: var(--canary-base-chrome-850);
--canary-foreground-09: var(--canary-base-chrome-600);
--canary-foreground-10: var(--canary-base-chrome-200);
--canary-foreground-danger: var(--canary-indigo-600);
--canary-foreground-alert: var(--canary-amber-700);
--canary-foreground-success: var(--canary-yellow-700);
--canary-foreground-accent: var(--canary-accent-600);
/* Backgrounds */
--canary-background-01: var(--canary-base-chrome-50);
--canary-background-02: var(--canary-base-chrome-white);
--canary-background-03: var(--canary-base-chrome-white);
--canary-background-04: var(--canary-base-chrome-500) / 0.12;
--canary-background-05: var(--canary-accent-500);
--canary-background-06: var(--canary-accent-500) / 0.2;
--canary-background-07: var(--canary-base-chrome-50);
--canary-background-08: var(--canary-base-chrome-white);
--canary-background-09: var(--canary-base-chrome-150);
--canary-background-10: var(--canary-accent-500);
--canary-background-11: var(--canary-base-chrome-200);
--canary-background-12: var(--canary-base-chrome-150);
--canary-background-13: var(--canary-base-chrome-600);
--canary-background-14: var(--canary-base-chrome-200);
--canary-background-surface: var(--canary-base-chrome-white);
--canary-background-accent: var(--canary-accent-500);
--canary-background-danger: var(--canary-indigo-50);
--canary-background-success: var(--canary-yellow-50);
--canary-toast-background-danger: var(--canary-indigo-150);
/* Borders */
--canary-border-01: var(--canary-base-chrome-150);
--canary-border-02: var(--canary-base-chrome-150);
--canary-border-03: var(--canary-base-chrome-500);
--canary-border-04: var(--canary-base-chrome-150);
--canary-border-05: var(--canary-base-chrome-150);
--canary-border-06: var(--canary-base-chrome-600);
--canary-border-07: var(--canary-base-chrome-white);
--canary-border-08: var(--canary-base-chrome-150);
--canary-border-09: var(--canary-accent-400);
--canary-border-10: var(--canary-base-chrome-150);
--canary-border-danger: var(--canary-indigo-400);
--canary-border-success: var(--canary-yellow-500);
--canary-border-accent: var(--canary-accent-400);
--canary-border-alert: var(--canary-amber-500);
/* Icons */
--canary-icon-01: var(--canary-base-chrome-600);
--canary-icon-02: var(--canary-base-chrome-black);
--canary-icon-03: var(--canary-base-chrome-850);
--canary-icon-04: var(--canary-base-chrome-600);
--canary-icon-05: var(--canary-base-chrome-white);
--canary-icon-06: var(--canary-base-chrome-200);
--canary-icon-07: var(--canary-base-chrome-850);
--canary-icon-08: var(--canary-base-chrome-black);
--canary-icon-09: var(--canary-base-chrome-600);
--canary-icon-10: var(--canary-base-chrome-white);
--canary-icon-danger: var(--canary-indigo-600);
--canary-icon-alert: var(--canary-amber-700);
--canary-icon-success: var(--canary-yellow-700);
--canary-icon-accent: var(--canary-accent-600);
--canary-icon-merged: var(--canary-purple-700);
/* Tags */
/* --gray */
--canary-tag-foreground-gray-01: var(--canary-base-chrome-800);
--canary-tag-border-gray-01: var(--canary-base-chrome-200);
--canary-tag-background-gray-01: var(--canary-base-chrome-100);
--canary-tag-background-gray-02: var(--canary-base-chrome-150);
/* --purple */
--canary-tag-foreground-purple-01: var(--canary-purple-700);
--canary-tag-border-purple-01: var(--canary-purple-150);
--canary-tag-background-purple-01: var(--canary-purple-50);
--canary-tag-background-purple-02: var(--canary-purple-100);
/* --blue */
--canary-tag-foreground-blue-01: var(--canary-accent-700);
--canary-tag-border-blue-01: var(--canary-accent-150);
--canary-tag-background-blue-01: var(--canary-accent-50);
--canary-tag-background-blue-02: var(--canary-accent-100);
/* --mint */
--canary-tag-foreground-mint-01: var(--canary-yellow-700);
--canary-tag-border-mint-01: var(--canary-yellow-150);
--canary-tag-background-mint-01: var(--canary-yellow-50);
--canary-tag-background-mint-02: var(--canary-yellow-100);
/* --amber */
--canary-tag-foreground-amber-01: var(--canary-amber-700);
--canary-tag-border-amber-01: var(--canary-amber-150);
--canary-tag-background-amber-01: var(--canary-amber-50);
--canary-tag-background-amber-02: var(--canary-amber-100);
/* --peach */
--canary-tag-foreground-peach-01: var(--canary-peach-700);
--canary-tag-border-peach-01: var(--canary-peach-150);
--canary-tag-background-peach-01: var(--canary-peach-50);
--canary-tag-background-peach-02: var(--canary-peach-100);
/* --red */
--canary-tag-foreground-red-01: var(--canary-indigo-700);
--canary-tag-border-red-01: var(--canary-indigo-150);
--canary-tag-background-red-01: var(--canary-indigo-50);
--canary-tag-background-red-02: var(--canary-indigo-100);
/* Labels */
--canary-label-background-black-01: hsla(var(--canary-base-chrome-white) / 0.7);
--canary-label-background-blue-01: hsla(var(--canary-accent-100));
--canary-label-background-brown-01: hsla(var(--canary-brown-100));
--canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
--canary-label-background-green-01: hsla(var(--canary-yellow-100));
--canary-label-background-indigo-01: hsla(var(--canary-indigo-100));
--canary-label-background-lime-01: hsla(var(--canary-lime-100));
--canary-label-background-mint-01: hsla(var(--canary-mint-100));
--canary-label-background-orange-01: hsla(var(--canary-orange-100));
--canary-label-background-pink-01: hsla(var(--canary-pink-100));
--canary-label-background-purple-01: hsla(var(--canary-purple-100));
--canary-label-background-red-01: var(--canary-indigo-100);
--canary-label-background-violet-01: var(--canary-violet-100);
--canary-label-background-yellow-01: var(--canary-yellow-100);
--canary-label-foreground-blue-01: var(--canary-accent-700);
--canary-label-foreground-brown-01: var(--canary-brown-700);
--canary-label-foreground-cyan-01: var(--canary-cyan-700);
--canary-label-foreground-green-01: var(--canary-yellow-700);
--canary-label-foreground-indigo-01: var(--canary-indigo-700);
--canary-label-foreground-lime-01: var(--canary-lime-700);
--canary-label-foreground-mint-01: var(--canary-mint-700);
--canary-label-foreground-orange-01: var(--canary-orange-700);
--canary-label-foreground-pink-01: var(--canary-pink-700);
--canary-label-foreground-purple-01: var(--canary-purple-700);
--canary-label-foreground-red-01: var(--canary-indigo-700);
--canary-label-foreground-violet-01: var(--canary-violet-700);
--canary-label-foreground-yellow-01: var(--canary-yellow-700);
/* Button */
--canary-button-foreground-danger-01: var(--canary-indigo-700);
--canary-button-background-danger-01: var(--canary-indigo-50);
--canary-button-background-danger-02: var(--canary-indigo-100);
--canary-button-background-danger-03: var(--canary-indigo-50);
--canary-button-border-danger-01: var(--canary-indigo-150);
--canary-button-foreground-success-01: var(--canary-yellow-700);
--canary-button-background-success-01: var(--canary-yellow-50);
--canary-button-background-success-02: var(--canary-yellow-100);
--canary-button-border-success-01: var(--canary-yellow-150);
--canary-button-foreground-disabled-01: var(--canary-base-chrome-500);
--canary-button-background-disabled-01: var(--canary-base-chrome-50);
--canary-button-border-disabled-01: var(--canary-base-chrome-150);
/* Box shadow colors */
--canary-box-shadow-1: var(--canary-base-chrome-300) / 0.3;
--canary-box-shadow-2: var(--canary-base-chrome-300) / 0.12;
--canary-box-shadow-pagination: var(--canary-base-chrome-300) / 0.12;
--shadow-sm: var(--canary-base-chrome-100);
/* Graph */
--canary-graph-gradient-bg-1: hsla(0, 0%, 100%, 0.04);
--canary-graph-gradient-bg-2: hsla(0, 0%, 100%, 0);
}
.dark,
.dark-std-low,
.dark-std-std {
--canary-background: var(--canary-grey-6);
--canary-foreground: var(--canary-grey-94);
--canary-card: var(--canary-grey-10);
--canary-card-foreground: var(--canary-white);
--canary-popover: var(--canary-grey-10);
--canary-popover-foreground: var(--canary-white);
--canary-primary: var(--canary-white);
--canary-primary-background: var(--canary-black);
--canary-primary-foreground: var(--canary-grey-10);
--canary-primary-muted: var(--canary-grey-70);
--canary-primary-accent: 216 100% 60%;
--canary-secondary: var(--canary-grey-15);
--canary-secondary-foreground: var(--canary-white);
--canary-secondary-background: var(--canary-grey-6);
--canary-secondary-muted: var(--canary-grey-40);
--canary-tertiary: var(--canary-grey-12);
--canary-tertiary-foreground: var(--canary-white);
--canary-tertiary-background: var(--canary-grey-60);
--canary-muted: var(--canary-grey-15);
--canary-muted-foreground: var(--canary-grey-60);
--canary-accent: var(--canary-grey-15);
--canary-accent-foreground: var(--canary-white);
--canary-destructive: var(--canary-red);
--canary-destructive-foreground: var(--canary-white);
--canary-border: var(--canary-grey-15);
--canary-border-background: var(--canary-grey-10);
--canary-input: var(--canary-grey-15);
--canary-input-background: var(--canary-grey-6);
--canary-ring: var(--canary-grey-80);
--canary-success: var(--canary-green);
--canary-error: var(--canary-red);
--canary-warning: var(--canary-orange);
--canary-emphasis: var(--canary-purple);
--canary-ai: var(--canary-purple);
--canary-ai-button-stop-1: 36 60% 95%;
--canary-ai-button-stop-2: 335 58% 76%;
--canary-ai-button-stop-3: 246 66% 72%;
--canary-ai-button-stop-4: 188 97% 89%;
/* New colors design variables */
/* Text */
--canary-foreground-01: var(--canary-white);
--canary-foreground-02: var(--canary-grey-80);
--canary-foreground-03: var(--canary-grey-70);
--canary-foreground-04: var(--canary-grey-60);
--canary-foreground-05: var(--canary-grey-50);
--canary-foreground-06: var(--canary-black);
--canary-foreground-07: var(--canary-grey-40);
--canary-foreground-08: var(--canary-grey-90);
--canary-foreground-09: var(--canary-grey-30);
--canary-foreground-10: var(--canary-grey-15);
--canary-foreground-danger: var(--canary-red-65);
--canary-foreground-alert: var(--canary-orange-55);
--canary-foreground-success: var(--canary-green-65);
--canary-foreground-accent: var(--canary-blue-60);
/* Button Foregrounds */
--canary-button-foreground-danger-01: var(--canary-red-65);
--canary-button-foreground-disabled-01: var(--canary-grey-40);
--canary-button-foreground-success-01: var(--canary-green-65);
/* Backgrounds */
--canary-background-01: var(--canary-grey-6);
--canary-background-02: var(--canary-grey-8);
--canary-background-03: var(--canary-grey-10);
--canary-background-04: var(--canary-grey-50) / 0.1; /* gray50/10 */