@harnessio/ui 0.0.1-react18.alpha.17 → 0.0.1-react18.alpha.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components.d.ts +5 -5
  2. package/dist/context.d.ts +5 -5
  3. package/dist/hooks.d.ts +5 -5
  4. package/dist/index.d.ts +5 -5
  5. package/dist/locales.d.ts +5 -5
  6. package/dist/styles.css +1 -1
  7. package/dist/tailwind.config.d.ts +5 -5
  8. package/dist/views.d.ts +5 -5
  9. package/package.json +1 -1
  10. package/src/shared-style-variables.css +555 -7
package/src/shared-style-variables.css CHANGED
@@ -462,6 +462,266 @@
462
462
  /* Need .light and .dark classes for MFE */
463
463
  /* Standalone app uses .light-std-std and .dark-std-std as defaults for light and dark themes */
464
464
  .light,
465
+ .light-std-low {
466
+ --canary-background: var(--canary-base-chrome-50);
467
+ --canary-foreground: var(--canary-base-chrome-850);
468
+ --canary-card: var(--canary-pure-white);
469
+ --canary-card-foreground: var(--canary-base-chrome-1000);
470
+ --canary-popover: var(--canary-pure-white);
471
+ --canary-popover-foreground: var(--canary-base-chrome-1000);
472
+ --canary-primary: var(--canary-base-chrome-1000);
473
+ --canary-primary-background: var(--canary-base-chrome-50);
474
+ --canary-primary-foreground: var(--canary-base-chrome-850);
475
+ --canary-primary-muted: var(--canary-base-chrome-850);
476
+ --canary-primary-accent: var(--canary-base-chrome-950);
477
+ --canary-secondary: var(--canary-base-chrome-100);
478
+ --canary-secondary-foreground: var(--canary-base-chrome-1000);
479
+ --canary-secondary-background: var(--canary-pure-white);
480
+ --canary-secondary-muted: var(--canary-base-chrome-600);
481
+ --canary-tertiary: var(--canary-base-chrome-100);
482
+ --canary-tertiary-foreground: var(--canary-base-chrome-1000);
483
+ --canary-tertiary-background: var(--canary-base-chrome-600);
484
+ --canary-muted: var(--canary-base-chrome-100);
485
+ --canary-muted-foreground: var(--canary-base-chrome-600);
486
+ --canary-accent: var(--canary-base-chrome-100);
487
+ --canary-accent-foreground: var(--canary-base-chrome-1000);
488
+ --canary-destructive: var(--canary-red-600);
489
+ --canary-destructive-foreground: var(--canary-pure-white);
490
+ --canary-border: var(--canary-base-chrome-150);
491
+ --canary-border-background: var(--canary-base-chrome-150);
492
+ --canary-input: var(--canary-base-chrome-150);
493
+ --canary-input-background: var(--canary-pure-white);
494
+ --canary-ring: var(--canary-accent-400);
495
+
496
+ --canary-radius: 0.5rem;
497
+ --canary-success: var(--canary-green-600);
498
+ --canary-error: var(--canary-red-500);
499
+ --canary-warning: var(--canary-amber-700);
500
+ --canary-emphasis: var(--canary-accent-600);
501
+ --canary-ai: var(--canary-purple-700);
502
+ --canary-ai-button-stop-1: var(--canary-yellow-100);
503
+ --canary-ai-button-stop-2: var(--canary-pink-200);
504
+ --canary-ai-button-stop-3: var(--canary-purple-400);
505
+ --canary-ai-button-stop-4: var(--canary-cyan-200);
506
+
507
+ --diff-grey: hsl(var(--canary-base-chrome-50));
508
+ --diff-add-content--: hsl(var(--canary-green-50));
509
+ --diff-del-content--: hsl(var(--canary-red-50));
510
+ --diff-add-lineNumber--: hsl(var(--canary-green-100));
511
+ --diff-del-lineNumber--: hsl(var(--canary-red-100));
512
+ --diff-plain-content--: hsl(var(--canary-background-01));
513
+ --diff-expand-content--: hsl(var(--canary-background-01));
514
+ --diff-plain-lineNumber--: hsl(var(--canary-background-01));
515
+ --diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-850));
516
+ --diff-hunk-content--: hsl(var(--canary-accent-50));
517
+ --diff-hunk-lineNumber--: hsla(var(--canary-accent-100) / 0.7);
518
+ --diff-add-content-highlight--: hsl(var(--canary-green-100));
519
+ --diff-del-content-highlight--: hsl(var(--canary-red-100));
520
+ --diff-add-widget--: hsl(var(--canary-base-chrome-100));
521
+ --diff-add-widget-color--: hsl(var(--canary-base-chrome-850));
522
+ --diff-empty-content--: hsl(var(--canary-background-01));
523
+ --diff-hunk-content-color--: hsl(var(--canary-base-chrome-850));
524
+
525
+ /* New colors design variables */
526
+ /* Text */
527
+ --canary-foreground-01: var(--canary-base-chrome-1000);
528
+ --canary-foreground-02: var(--canary-base-chrome-850);
529
+ --canary-foreground-03: var(--canary-base-chrome-700);
530
+ --canary-foreground-04: var(--canary-base-chrome-600);
531
+ --canary-foreground-05: var(--canary-base-chrome-600);
532
+ --canary-foreground-06: var(--canary-pure-white);
533
+ --canary-foreground-07: var(--canary-base-chrome-600);
534
+ --canary-foreground-08: var(--canary-base-chrome-850);
535
+ --canary-foreground-09: var(--canary-base-chrome-600);
536
+ --canary-foreground-10: var(--canary-base-chrome-200);
537
+ --canary-foreground-danger: var(--canary-red-500);
538
+ --canary-foreground-alert: var(--canary-amber-700);
539
+ --canary-foreground-success: var(--canary-green-600);
540
+ --canary-foreground-accent: var(--canary-accent-600);
541
+
542
+ /* Backgrounds */
543
+ --canary-background-01: var(--canary-base-chrome-50);
544
+ --canary-background-02: var(--canary-pure-white);
545
+ --canary-background-03: var(--canary-chrome-50);
546
+ --canary-background-04: var(--canary-base-chrome-500) / 0.12;
547
+ --canary-background-05: var(--canary-base-chrome-950);
548
+ --canary-background-06: var(--canary-base-chrome-850);
549
+ --canary-background-07: var(--canary-base-chrome-50);
550
+ --canary-background-08: var(--canary-pure-white);
551
+ --canary-background-09: var(--canary-base-chrome-150);
552
+ --canary-background-10: var(--canary-base-chrome-850);
553
+ --canary-background-11: var(--canary-base-chrome-200);
554
+ --canary-background-12: var(--canary-base-chrome-150);
555
+ --canary-background-13: var(--canary-base-chrome-600);
556
+ --canary-background-14: var(--canary-base-chrome-200);
557
+ --canary-background-surface: var(--canary-pure-white);
558
+ --canary-background-accent: var(--canary-accent-500);
559
+ --canary-background-danger: var(--canary-red-50);
560
+ --canary-background-success: var(--canary-green-50);
561
+ --canary-toast-background-danger: var(--canary-red-200);
562
+
563
+ /* Borders */
564
+ --canary-border-01: var(--canary-base-chrome-150);
565
+ --canary-border-02: var(--canary-base-chrome-150);
566
+ --canary-border-03: var(--canary-base-chrome-500);
567
+ --canary-border-04: var(--canary-base-chrome-150);
568
+ --canary-border-05: var(--canary-base-chrome-150);
569
+ --canary-border-06: var(--canary-base-chrome-600);
570
+ --canary-border-07: var(--canary-pure-white);
571
+ --canary-border-08: var(--canary-base-chrome-150);
572
+ --canary-border-09: var(--canary-base-chrome-1000);
573
+ --canary-border-10: var(--canary-base-chrome-150);
574
+ --canary-border-danger: var(--canary-red-400);
575
+ --canary-border-success: var(--canary-green-400);
576
+ --canary-border-accent: var(--canary-accent-400);
577
+ --canary-border-alert: var(--canary-amber-500);
578
+
579
+ /* Icons */
580
+ --canary-icon-01: var(--canary-base-chrome-600);
581
+ --canary-icon-02: var(--canary-base-chrome-1000);
582
+ --canary-icon-03: var(--canary-base-chrome-850);
583
+ --canary-icon-04: var(--canary-base-chrome-600);
584
+ --canary-icon-05: var(--canary-pure-white);
585
+ --canary-icon-06: var(--canary-base-chrome-200);
586
+ --canary-icon-07: var(--canary-base-chrome-850);
587
+ --canary-icon-08: var(--canary-base-chrome-1000);
588
+ --canary-icon-09: var(--canary-base-chrome-600);
589
+ --canary-icon-10: var(--canary-pure-white);
590
+ --canary-icon-danger: var(--canary-red-500);
591
+ --canary-icon-alert: var(--canary-amber-700);
592
+ --canary-icon-success: var(--canary-green-600);
593
+ --canary-icon-accent: var(--canary-accent-600);
594
+ --canary-icon-merged: var(--canary-purple-700);
595
+
596
+ /* Tags */
597
+ /* --gray */
598
+ --canary-tag-foreground-gray-01: var(--canary-base-chrome-800);
599
+ --canary-tag-border-gray-01: var(--canary-base-chrome-200);
600
+ --canary-tag-background-gray-01: var(--canary-base-chrome-100);
601
+ --canary-tag-background-gray-02: var(--canary-base-chrome-150);
602
+ /* --purple */
603
+ --canary-tag-foreground-purple-01: var(--canary-purple-700);
604
+ --canary-tag-border-purple-01: var(--canary-purple-150);
605
+ --canary-tag-background-purple-01: var(--canary-purple-50);
606
+ --canary-tag-background-purple-02: var(--canary-purple-100);
607
+ /* --blue */
608
+ --canary-tag-foreground-blue-01: var(--canary-accent-700);
609
+ --canary-tag-border-blue-01: var(--canary-accent-150);
610
+ --canary-tag-background-blue-01: var(--canary-accent-50);
611
+ --canary-tag-background-blue-02: var(--canary-accent-100);
612
+ /* --mint */
613
+ --canary-tag-foreground-mint-01: var(--canary-green-700);
614
+ --canary-tag-border-mint-01: var(--canary-green-150);
615
+ --canary-tag-background-mint-01: var(--canary-green-50);
616
+ --canary-tag-background-mint-02: var(--canary-green-100);
617
+ /* --amber */
618
+ --canary-tag-foreground-amber-01: var(--canary-amber-700);
619
+ --canary-tag-border-amber-01: var(--canary-amber-150);
620
+ --canary-tag-background-amber-01: var(--canary-amber-50);
621
+ --canary-tag-background-amber-02: var(--canary-amber-100);
622
+ /* --peach */
623
+ --canary-tag-foreground-peach-01: var(--canary-peach-700);
624
+ --canary-tag-border-peach-01: var(--canary-peach-150);
625
+ --canary-tag-background-peach-01: var(--canary-peach-50);
626
+ --canary-tag-background-peach-02: var(--canary-peach-100);
627
+ /* --red */
628
+ --canary-tag-foreground-red-01: var(--canary-red-700);
629
+ --canary-tag-border-red-01: var(--canary-red-150);
630
+ --canary-tag-background-red-01: var(--canary-red-50);
631
+ --canary-tag-background-red-02: var(--canary-red-100);
632
+
633
+ /* Labels */
634
+ --canary-label-background-black-01: hsla(var(--canary-pure-white) / 0.7);
635
+ --canary-label-background-blue-01: hsla(var(--canary-accent-100));
636
+ --canary-label-background-brown-01: hsla(var(--canary-brown-100));
637
+ --canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
638
+ --canary-label-background-green-01: hsla(var(--canary-green-100));
639
+ --canary-label-background-indigo-01: hsla(var(--canary-indigo-100));
640
+ --canary-label-background-lime-01: hsla(var(--canary-lime-100));
641
+ --canary-label-background-mint-01: hsla(var(--canary-mint-100));
642
+ --canary-label-background-orange-01: hsla(var(--canary-orange-100));
643
+ --canary-label-background-pink-01: hsla(var(--canary-pink-100));
644
+ --canary-label-background-purple-01: hsla(var(--canary-purple-100));
645
+ --canary-label-background-red-01: hsla(var(--canary-red-100));
646
+ --canary-label-background-violet-01: hsla(var(--canary-violet-100));
647
+ --canary-label-background-yellow-01: hsla(var(--canary-yellow-100));
648
+ --canary-label-foreground-blue-01: hsla(var(--canary-accent-700));
649
+ --canary-label-foreground-brown-01: hsla(var(--canary-brown-700));
650
+ --canary-label-foreground-cyan-01: hsla(var(--canary-cyan-700));
651
+ --canary-label-foreground-green-01: hsla(var(--canary-green-700));
652
+ --canary-label-foreground-indigo-01: hsla(var(--canary-indigo-700));
653
+ --canary-label-foreground-lime-01: hsla(var(--canary-lime-700));
654
+ --canary-label-foreground-mint-01: hsla(var(--canary-mint-700));
655
+ --canary-label-foreground-orange-01: hsla(var(--canary-orange-700));
656
+ --canary-label-foreground-pink-01: hsla(var(--canary-pink-700));
657
+ --canary-label-foreground-purple-01: hsla(var(--canary-purple-700));
658
+ --canary-label-foreground-red-01: hsla(var(--canary-red-700));
659
+ --canary-label-foreground-violet-01: hsla(var(--canary-violet-700));
660
+ --canary-label-foreground-yellow-01: hsla(var(--canary-yellow-700));
661
+
662
+ /* Button */
663
+ --canary-button-foreground-danger-01: var(--canary-red-700);
664
+ --canary-button-background-danger-01: var(--canary-red-50);
665
+ --canary-button-background-danger-02: var(--canary-red-100);
666
+ --canary-button-background-danger-03: var(--canary-red-50);
667
+ --canary-button-border-danger-01: var(--canary-red-150);
668
+ --canary-button-foreground-success-01: var(--canary-green-700);
669
+ --canary-button-background-success-01: var(--canary-green-50);
670
+ --canary-button-background-success-02: var(--canary-green-100);
671
+ --canary-button-border-success-01: var(--canary-green-150);
672
+ --canary-button-foreground-disabled-01: var(--canary-base-chrome-500);
673
+ --canary-button-background-disabled-01: var(--canary-base-chrome-50);
674
+ --canary-button-border-disabled-01: var(--canary-base-chrome-150);
675
+
676
+ /* Box shadow colors */
677
+ --canary-box-shadow-1: var(--canary-base-chrome-300) / 0.3;
678
+ --canary-box-shadow-2: var(--canary-base-chrome-300) / 0.12;
679
+ --canary-box-shadow-pagination: var(--canary-base-chrome-300) / 0.12;
680
+ --shadow-sm: var(--canary-base-chrome-100);
681
+
682
+ --canary-widget-bg-gradient-from: var(--canary-base-chrome-100) / 1;
683
+ --canary-widget-bg-gradient-to: var(--canary-pure-white) / 1;
684
+ --canary-widget-number-gradient-from: var(--canary-base-chrome-500) / 1;
685
+ --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 1;
686
+ --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150) / 1;
687
+ --canary-widget-number-bg-gradient-to: var(--canary-pure-white) / 1;
688
+
689
+ /* Graph */
690
+ --canary-graph-gradient-bg-1: hsla(var(--canary-pure-white) / 0.5);
691
+ --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-100) / 0.3);
692
+ --canary-graph-gradient-executing-1: hsla(var(--canary-amber-150));
693
+ --canary-graph-gradient-executing-2: hsla(var(--canary-amber-600));
694
+ --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
695
+
696
+ /* Navigation gradients */
697
+ /* We’ve removed them until we find a better solution in the design.
698
+ --canary-nav-gradient-1-1: var();
699
+ --canary-nav-gradient-1-2: var();
700
+ --canary-nav-gradient-2-1: var();
701
+ --canary-nav-gradient-2-2: var();
702
+ --canary-nav-gradient-2-3: var();
703
+ --canary-nav-gradient-3-1: var();
704
+ --canary-nav-gradient-3-2: var();
705
+ --canary-nav-gradient-4-1: var();
706
+ --canary-nav-gradient-4-2: var();
707
+ --canary-nav-item-gradient-1: var();
708
+ --canary-nav-item-gradient-2: var();
709
+ --canary-nav-item-gradient-3: var();
710
+ --canary-nav-item-gradient-4: var();
711
+ --canary-nav-item-gradient-5: var();
712
+ --canary-nav-item-gradient-6: var();
713
+ */
714
+
715
+ /* Selected tab bg element*/
716
+ /* We’ve removed them until we find a better solution in the design.
717
+ --canary-tab-item-gradient-from: var();
718
+ --canary-tab-item-gradient-to: var();
719
+ --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
720
+ hsla(var(--canary-tab-item-gradient-to));
721
+ --canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
722
+ */
723
+ }
724
+
465
725
  .light-std-std {
466
726
  --canary-background: var(--canary-base-chrome-50);
467
727
  --canary-foreground: var(--canary-base-chrome-850);
@@ -722,6 +982,266 @@
722
982
  */
723
983
  }
724
984
 
985
+ .light-std-high {
986
+ --canary-background: var(--canary-base-chrome-50);
987
+ --canary-foreground: var(--canary-base-chrome-850);
988
+ --canary-card: var(--canary-pure-white);
989
+ --canary-card-foreground: var(--canary-base-chrome-1000);
990
+ --canary-popover: var(--canary-pure-white);
991
+ --canary-popover-foreground: var(--canary-base-chrome-1000);
992
+ --canary-primary: var(--canary-base-chrome-1000);
993
+ --canary-primary-background: var(--canary-base-chrome-50);
994
+ --canary-primary-foreground: var(--canary-base-chrome-850);
995
+ --canary-primary-muted: var(--canary-base-chrome-850);
996
+ --canary-primary-accent: var(--canary-base-chrome-950);
997
+ --canary-secondary: var(--canary-base-chrome-100);
998
+ --canary-secondary-foreground: var(--canary-base-chrome-1000);
999
+ --canary-secondary-background: var(--canary-pure-white);
1000
+ --canary-secondary-muted: var(--canary-base-chrome-600);
1001
+ --canary-tertiary: var(--canary-base-chrome-100);
1002
+ --canary-tertiary-foreground: var(--canary-base-chrome-1000);
1003
+ --canary-tertiary-background: var(--canary-base-chrome-600);
1004
+ --canary-muted: var(--canary-base-chrome-100);
1005
+ --canary-muted-foreground: var(--canary-base-chrome-600);
1006
+ --canary-accent: var(--canary-base-chrome-100);
1007
+ --canary-accent-foreground: var(--canary-base-chrome-1000);
1008
+ --canary-destructive: var(--canary-red-600);
1009
+ --canary-destructive-foreground: var(--canary-pure-white);
1010
+ --canary-border: var(--canary-base-chrome-150);
1011
+ --canary-border-background: var(--canary-base-chrome-150);
1012
+ --canary-input: var(--canary-base-chrome-150);
1013
+ --canary-input-background: var(--canary-pure-white);
1014
+ --canary-ring: var(--canary-accent-400);
1015
+
1016
+ --canary-radius: 0.5rem;
1017
+ --canary-success: var(--canary-green-600);
1018
+ --canary-error: var(--canary-red-500);
1019
+ --canary-warning: var(--canary-amber-700);
1020
+ --canary-emphasis: var(--canary-accent-600);
1021
+ --canary-ai: var(--canary-purple-700);
1022
+ --canary-ai-button-stop-1: var(--canary-yellow-100);
1023
+ --canary-ai-button-stop-2: var(--canary-pink-200);
1024
+ --canary-ai-button-stop-3: var(--canary-purple-400);
1025
+ --canary-ai-button-stop-4: var(--canary-cyan-200);
1026
+
1027
+ --diff-grey: hsl(var(--canary-base-chrome-50));
1028
+ --diff-add-content--: hsl(var(--canary-green-50));
1029
+ --diff-del-content--: hsl(var(--canary-red-50));
1030
+ --diff-add-lineNumber--: hsl(var(--canary-green-100));
1031
+ --diff-del-lineNumber--: hsl(var(--canary-red-100));
1032
+ --diff-plain-content--: hsl(var(--canary-background-01));
1033
+ --diff-expand-content--: hsl(var(--canary-background-01));
1034
+ --diff-plain-lineNumber--: hsl(var(--canary-background-01));
1035
+ --diff-plain-lineNumber-color--: hsl(var(--canary-base-chrome-850));
1036
+ --diff-hunk-content--: hsl(var(--canary-accent-50));
1037
+ --diff-hunk-lineNumber--: hsla(var(--canary-accent-100) / 0.7);
1038
+ --diff-add-content-highlight--: hsl(var(--canary-green-100));
1039
+ --diff-del-content-highlight--: hsl(var(--canary-red-100));
1040
+ --diff-add-widget--: hsl(var(--canary-base-chrome-100));
1041
+ --diff-add-widget-color--: hsl(var(--canary-base-chrome-850));
1042
+ --diff-empty-content--: hsl(var(--canary-background-01));
1043
+ --diff-hunk-content-color--: hsl(var(--canary-base-chrome-850));
1044
+
1045
+ /* New colors design variables */
1046
+ /* Text */
1047
+ --canary-foreground-01: var(--canary-base-chrome-1000);
1048
+ --canary-foreground-02: var(--canary-base-chrome-850);
1049
+ --canary-foreground-03: var(--canary-base-chrome-700);
1050
+ --canary-foreground-04: var(--canary-base-chrome-600);
1051
+ --canary-foreground-05: var(--canary-base-chrome-600);
1052
+ --canary-foreground-06: var(--canary-pure-white);
1053
+ --canary-foreground-07: var(--canary-base-chrome-600);
1054
+ --canary-foreground-08: var(--canary-base-chrome-850);
1055
+ --canary-foreground-09: var(--canary-base-chrome-600);
1056
+ --canary-foreground-10: var(--canary-base-chrome-200);
1057
+ --canary-foreground-danger: var(--canary-red-500);
1058
+ --canary-foreground-alert: var(--canary-amber-700);
1059
+ --canary-foreground-success: var(--canary-green-600);
1060
+ --canary-foreground-accent: var(--canary-accent-600);
1061
+
1062
+ /* Backgrounds */
1063
+ --canary-background-01: var(--canary-base-chrome-50);
1064
+ --canary-background-02: var(--canary-pure-white);
1065
+ --canary-background-03: var(--canary-chrome-50);
1066
+ --canary-background-04: var(--canary-base-chrome-500) / 0.12;
1067
+ --canary-background-05: var(--canary-base-chrome-950);
1068
+ --canary-background-06: var(--canary-base-chrome-850);
1069
+ --canary-background-07: var(--canary-base-chrome-50);
1070
+ --canary-background-08: var(--canary-pure-white);
1071
+ --canary-background-09: var(--canary-base-chrome-150);
1072
+ --canary-background-10: var(--canary-base-chrome-850);
1073
+ --canary-background-11: var(--canary-base-chrome-200);
1074
+ --canary-background-12: var(--canary-base-chrome-150);
1075
+ --canary-background-13: var(--canary-base-chrome-600);
1076
+ --canary-background-14: var(--canary-base-chrome-200);
1077
+ --canary-background-surface: var(--canary-pure-white);
1078
+ --canary-background-accent: var(--canary-accent-500);
1079
+ --canary-background-danger: var(--canary-red-50);
1080
+ --canary-background-success: var(--canary-green-50);
1081
+ --canary-toast-background-danger: var(--canary-red-200);
1082
+
1083
+ /* Borders */
1084
+ --canary-border-01: var(--canary-base-chrome-150);
1085
+ --canary-border-02: var(--canary-base-chrome-150);
1086
+ --canary-border-03: var(--canary-base-chrome-500);
1087
+ --canary-border-04: var(--canary-base-chrome-150);
1088
+ --canary-border-05: var(--canary-base-chrome-150);
1089
+ --canary-border-06: var(--canary-base-chrome-600);
1090
+ --canary-border-07: var(--canary-pure-white);
1091
+ --canary-border-08: var(--canary-base-chrome-150);
1092
+ --canary-border-09: var(--canary-base-chrome-1000);
1093
+ --canary-border-10: var(--canary-base-chrome-150);
1094
+ --canary-border-danger: var(--canary-red-400);
1095
+ --canary-border-success: var(--canary-green-400);
1096
+ --canary-border-accent: var(--canary-accent-400);
1097
+ --canary-border-alert: var(--canary-amber-500);
1098
+
1099
+ /* Icons */
1100
+ --canary-icon-01: var(--canary-base-chrome-600);
1101
+ --canary-icon-02: var(--canary-base-chrome-1000);
1102
+ --canary-icon-03: var(--canary-base-chrome-850);
1103
+ --canary-icon-04: var(--canary-base-chrome-600);
1104
+ --canary-icon-05: var(--canary-pure-white);
1105
+ --canary-icon-06: var(--canary-base-chrome-200);
1106
+ --canary-icon-07: var(--canary-base-chrome-850);
1107
+ --canary-icon-08: var(--canary-base-chrome-1000);
1108
+ --canary-icon-09: var(--canary-base-chrome-600);
1109
+ --canary-icon-10: var(--canary-pure-white);
1110
+ --canary-icon-danger: var(--canary-red-500);
1111
+ --canary-icon-alert: var(--canary-amber-700);
1112
+ --canary-icon-success: var(--canary-green-600);
1113
+ --canary-icon-accent: var(--canary-accent-600);
1114
+ --canary-icon-merged: var(--canary-purple-700);
1115
+
1116
+ /* Tags */
1117
+ /* --gray */
1118
+ --canary-tag-foreground-gray-01: var(--canary-base-chrome-800);
1119
+ --canary-tag-border-gray-01: var(--canary-base-chrome-200);
1120
+ --canary-tag-background-gray-01: var(--canary-base-chrome-100);
1121
+ --canary-tag-background-gray-02: var(--canary-base-chrome-150);
1122
+ /* --purple */
1123
+ --canary-tag-foreground-purple-01: var(--canary-purple-700);
1124
+ --canary-tag-border-purple-01: var(--canary-purple-150);
1125
+ --canary-tag-background-purple-01: var(--canary-purple-50);
1126
+ --canary-tag-background-purple-02: var(--canary-purple-100);
1127
+ /* --blue */
1128
+ --canary-tag-foreground-blue-01: var(--canary-accent-700);
1129
+ --canary-tag-border-blue-01: var(--canary-accent-150);
1130
+ --canary-tag-background-blue-01: var(--canary-accent-50);
1131
+ --canary-tag-background-blue-02: var(--canary-accent-100);
1132
+ /* --mint */
1133
+ --canary-tag-foreground-mint-01: var(--canary-green-700);
1134
+ --canary-tag-border-mint-01: var(--canary-green-150);
1135
+ --canary-tag-background-mint-01: var(--canary-green-50);
1136
+ --canary-tag-background-mint-02: var(--canary-green-100);
1137
+ /* --amber */
1138
+ --canary-tag-foreground-amber-01: var(--canary-amber-700);
1139
+ --canary-tag-border-amber-01: var(--canary-amber-150);
1140
+ --canary-tag-background-amber-01: var(--canary-amber-50);
1141
+ --canary-tag-background-amber-02: var(--canary-amber-100);
1142
+ /* --peach */
1143
+ --canary-tag-foreground-peach-01: var(--canary-peach-700);
1144
+ --canary-tag-border-peach-01: var(--canary-peach-150);
1145
+ --canary-tag-background-peach-01: var(--canary-peach-50);
1146
+ --canary-tag-background-peach-02: var(--canary-peach-100);
1147
+ /* --red */
1148
+ --canary-tag-foreground-red-01: var(--canary-red-700);
1149
+ --canary-tag-border-red-01: var(--canary-red-150);
1150
+ --canary-tag-background-red-01: var(--canary-red-50);
1151
+ --canary-tag-background-red-02: var(--canary-red-100);
1152
+
1153
+ /* Labels */
1154
+ --canary-label-background-black-01: hsla(var(--canary-pure-white) / 0.7);
1155
+ --canary-label-background-blue-01: hsla(var(--canary-accent-100));
1156
+ --canary-label-background-brown-01: hsla(var(--canary-brown-100));
1157
+ --canary-label-background-cyan-01: hsla(var(--canary-cyan-100));
1158
+ --canary-label-background-green-01: hsla(var(--canary-green-100));
1159
+ --canary-label-background-indigo-01: hsla(var(--canary-indigo-100));
1160
+ --canary-label-background-lime-01: hsla(var(--canary-lime-100));
1161
+ --canary-label-background-mint-01: hsla(var(--canary-mint-100));
1162
+ --canary-label-background-orange-01: hsla(var(--canary-orange-100));
1163
+ --canary-label-background-pink-01: hsla(var(--canary-pink-100));
1164
+ --canary-label-background-purple-01: hsla(var(--canary-purple-100));
1165
+ --canary-label-background-red-01: hsla(var(--canary-red-100));
1166
+ --canary-label-background-violet-01: hsla(var(--canary-violet-100));
1167
+ --canary-label-background-yellow-01: hsla(var(--canary-yellow-100));
1168
+ --canary-label-foreground-blue-01: hsla(var(--canary-accent-700));
1169
+ --canary-label-foreground-brown-01: hsla(var(--canary-brown-700));
1170
+ --canary-label-foreground-cyan-01: hsla(var(--canary-cyan-700));
1171
+ --canary-label-foreground-green-01: hsla(var(--canary-green-700));
1172
+ --canary-label-foreground-indigo-01: hsla(var(--canary-indigo-700));
1173
+ --canary-label-foreground-lime-01: hsla(var(--canary-lime-700));
1174
+ --canary-label-foreground-mint-01: hsla(var(--canary-mint-700));
1175
+ --canary-label-foreground-orange-01: hsla(var(--canary-orange-700));
1176
+ --canary-label-foreground-pink-01: hsla(var(--canary-pink-700));
1177
+ --canary-label-foreground-purple-01: hsla(var(--canary-purple-700));
1178
+ --canary-label-foreground-red-01: hsla(var(--canary-red-700));
1179
+ --canary-label-foreground-violet-01: hsla(var(--canary-violet-700));
1180
+ --canary-label-foreground-yellow-01: hsla(var(--canary-yellow-700));
1181
+
1182
+ /* Button */
1183
+ --canary-button-foreground-danger-01: var(--canary-red-700);
1184
+ --canary-button-background-danger-01: var(--canary-red-50);
1185
+ --canary-button-background-danger-02: var(--canary-red-100);
1186
+ --canary-button-background-danger-03: var(--canary-red-50);
1187
+ --canary-button-border-danger-01: var(--canary-red-150);
1188
+ --canary-button-foreground-success-01: var(--canary-green-700);
1189
+ --canary-button-background-success-01: var(--canary-green-50);
1190
+ --canary-button-background-success-02: var(--canary-green-100);
1191
+ --canary-button-border-success-01: var(--canary-green-150);
1192
+ --canary-button-foreground-disabled-01: var(--canary-base-chrome-500);
1193
+ --canary-button-background-disabled-01: var(--canary-base-chrome-50);
1194
+ --canary-button-border-disabled-01: var(--canary-base-chrome-150);
1195
+
1196
+ /* Box shadow colors */
1197
+ --canary-box-shadow-1: var(--canary-base-chrome-300) / 0.3;
1198
+ --canary-box-shadow-2: var(--canary-base-chrome-300) / 0.12;
1199
+ --canary-box-shadow-pagination: var(--canary-base-chrome-300) / 0.12;
1200
+ --shadow-sm: var(--canary-base-chrome-100);
1201
+
1202
+ --canary-widget-bg-gradient-from: var(--canary-base-chrome-100) / 1;
1203
+ --canary-widget-bg-gradient-to: var(--canary-pure-white) / 1;
1204
+ --canary-widget-number-gradient-from: var(--canary-base-chrome-500) / 1;
1205
+ --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 1;
1206
+ --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150) / 1;
1207
+ --canary-widget-number-bg-gradient-to: var(--canary-pure-white) / 1;
1208
+
1209
+ /* Graph */
1210
+ --canary-graph-gradient-bg-1: hsla(var(--canary-pure-white) / 0.5);
1211
+ --canary-graph-gradient-bg-2: hsla(var(--canary-base-chrome-100) / 0.3);
1212
+ --canary-graph-gradient-executing-1: hsla(var(--canary-amber-150));
1213
+ --canary-graph-gradient-executing-2: hsla(var(--canary-amber-600));
1214
+ --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
1215
+
1216
+ /* Navigation gradients */
1217
+ /* We’ve removed them until we find a better solution in the design.
1218
+ --canary-nav-gradient-1-1: var();
1219
+ --canary-nav-gradient-1-2: var();
1220
+ --canary-nav-gradient-2-1: var();
1221
+ --canary-nav-gradient-2-2: var();
1222
+ --canary-nav-gradient-2-3: var();
1223
+ --canary-nav-gradient-3-1: var();
1224
+ --canary-nav-gradient-3-2: var();
1225
+ --canary-nav-gradient-4-1: var();
1226
+ --canary-nav-gradient-4-2: var();
1227
+ --canary-nav-item-gradient-1: var();
1228
+ --canary-nav-item-gradient-2: var();
1229
+ --canary-nav-item-gradient-3: var();
1230
+ --canary-nav-item-gradient-4: var();
1231
+ --canary-nav-item-gradient-5: var();
1232
+ --canary-nav-item-gradient-6: var();
1233
+ */
1234
+
1235
+ /* Selected tab bg element*/
1236
+ /* We’ve removed them until we find a better solution in the design.
1237
+ --canary-tab-item-gradient-from: var();
1238
+ --canary-tab-item-gradient-to: var();
1239
+ --canary-tab-item-gradient-stops: hsla(var(--canary-tab-item-gradient-from)),
1240
+ hsla(var(--canary-tab-item-gradient-to));
1241
+ --canary-tab-background-gradient: radial-gradient(closest-side, var(--canary-tab-item-gradient-stops));
1242
+ */
1243
+ }
1244
+
725
1245
  .light-prot-std {
726
1246
  --canary-background: var(--canary-base-chrome-50);
727
1247
  --canary-foreground: var(--canary-base-chrome-850);
@@ -945,6 +1465,13 @@
945
1465
  --canary-graph-gradient-executing-1: hsla(var(--canary-amber-150));
946
1466
  --canary-graph-gradient-executing-2: hsla(var(--canary-amber-600));
947
1467
  --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-150));
1468
+
1469
+ --canary-widget-bg-gradient-from: var(--canary-base-chrome-100);
1470
+ --canary-widget-bg-gradient-to: var(--canary-pure-white);
1471
+ --canary-widget-number-gradient-from: var(--canary-base-chrome-500);
1472
+ --canary-widget-number-gradient-to: var(--canary-base-chrome-600);
1473
+ --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-150);
1474
+ --canary-widget-number-bg-gradient-to: var(--canary-pure-white);
948
1475
  }
949
1476
 
950
1477
  .dark,
@@ -1263,12 +1790,12 @@
1263
1790
  /* Backgrounds */
1264
1791
  --canary-background-01: var(--canary-base-chrome-1000);
1265
1792
  --canary-background-02: var(--canary-base-chrome-950);
1266
- --canary-background-03: var(--canary-base-chrome-950);
1793
+ --canary-background-03: var(--canary-base-chrome-900);
1267
1794
  --canary-background-04: var(--canary-base-chrome-850) / 0.5;
1268
1795
  --canary-background-05: var(--canary-base-chrome-100);
1269
1796
  --canary-background-06: var(--canary-base-chrome-150);
1270
1797
  --canary-background-07: var(--canary-base-chrome-1000);
1271
- --canary-background-08: var(--canary-base-chrome-900);
1798
+ --canary-background-08: var(--canary-base-chrome-850);
1272
1799
  --canary-background-09: var(--canary-base-chrome-850);
1273
1800
  --canary-background-10: var(--canary-base-chrome-150);
1274
1801
  --canary-background-11: var(--canary-base-chrome-800);
@@ -1285,7 +1812,7 @@
1285
1812
  --canary-border-01: var(--canary-base-chrome-850);
1286
1813
  --canary-border-02: var(--canary-base-chrome-850);
1287
1814
  --canary-border-03: var(--canary-base-chrome-400);
1288
- --canary-border-04: var(--canary-base-chrome-850);
1815
+ --canary-border-04: var(--canary-base-chrome-850) / 0.6;
1289
1816
  --canary-border-05: var(--canary-base-chrome-850);
1290
1817
  --canary-border-06: var(--canary-base-chrome-400);
1291
1818
  --canary-border-07: var(--canary-pure-white);
@@ -1407,6 +1934,13 @@
1407
1934
  --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-850));
1408
1935
  --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-850) / 0.6);
1409
1936
 
1937
+ --canary-widget-number-gradient-from: var(--canary-base-chrome-200) / 1;
1938
+ --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 0;
1939
+ --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
1940
+ --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
1941
+ --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
1942
+ --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
1943
+
1410
1944
  /* Navigation gradients */
1411
1945
  /* We’ve removed them until we find a better solution in the design.
1412
1946
  --canary-nav-gradient-1-1: var();
@@ -1538,7 +2072,7 @@
1538
2072
  --canary-border-01: var(--canary-base-chrome-700);
1539
2073
  --canary-border-02: var(--canary-base-chrome-700);
1540
2074
  --canary-border-03: var(--canary-base-chrome-200);
1541
- --canary-border-04: var(--canary-base-chrome-700);
2075
+ --canary-border-04: var(--canary-base-chrome-700) / 0.6;
1542
2076
  --canary-border-05: var(--canary-base-chrome-700);
1543
2077
  --canary-border-06: var(--canary-base-chrome-400);
1544
2078
  --canary-border-07: var(--canary-pure-white);
@@ -1660,6 +2194,13 @@
1660
2194
  --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-700));
1661
2195
  --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-700) / 0.5);
1662
2196
 
2197
+ --canary-widget-number-gradient-from: var(--canary-base-chrome-100);
2198
+ --canary-widget-number-gradient-to: var(--canary-base-chrome-500);
2199
+ --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
2200
+ --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
2201
+ --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
2202
+ --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
2203
+
1663
2204
  /* Navigation gradients */
1664
2205
  /* We’ve removed them until we find a better solution in the design.
1665
2206
  --canary-nav-gradient-1-1: var();
@@ -1766,12 +2307,12 @@
1766
2307
  /* Backgrounds */
1767
2308
  --canary-background-01: var(--canary-base-chrome-1000);
1768
2309
  --canary-background-02: var(--canary-base-chrome-950);
1769
- --canary-background-03: var(--canary-base-chrome-950);
2310
+ --canary-background-03: var(--canary-base-chrome-900);
1770
2311
  --canary-background-04: var(--canary-base-chrome-850) / 0.5;
1771
2312
  --canary-background-05: var(--canary-base-chrome-100);
1772
2313
  --canary-background-06: var(--canary-base-chrome-150);
1773
2314
  --canary-background-07: var(--canary-base-chrome-1000);
1774
- --canary-background-08: var(--canary-base-chrome-900);
2315
+ --canary-background-08: var(--canary-base-chrome-850);
1775
2316
  --canary-background-09: var(--canary-base-chrome-850);
1776
2317
  --canary-background-10: var(--canary-base-chrome-150);
1777
2318
  --canary-background-11: var(--canary-base-chrome-800);
@@ -1788,7 +2329,7 @@
1788
2329
  --canary-border-01: var(--canary-base-chrome-850);
1789
2330
  --canary-border-02: var(--canary-base-chrome-850);
1790
2331
  --canary-border-03: var(--canary-base-chrome-400);
1791
- --canary-border-04: var(--canary-base-chrome-850);
2332
+ --canary-border-04: var(--canary-base-chrome-850) / 0.6;
1792
2333
  --canary-border-05: var(--canary-base-chrome-850);
1793
2334
  --canary-border-06: var(--canary-base-chrome-400);
1794
2335
  --canary-border-07: var(--canary-pure-white);
@@ -1909,5 +2450,12 @@
1909
2450
  --canary-graph-gradient-executing-1: hsla(var(--canary-amber-200));
1910
2451
  --canary-graph-gradient-executing-2: hsla(var(--canary-base-chrome-850));
1911
2452
  --canary-graph-viewport-bg: hsla(var(--canary-base-chrome-850) / 0.4);
2453
+
2454
+ --canary-widget-number-gradient-from: var(--canary-grey-200) / 1;
2455
+ --canary-widget-number-gradient-to: var(--canary-base-chrome-600) / 0;
2456
+ --canary-widget-number-bg-gradient-from: var(--canary-base-chrome-800);
2457
+ --canary-widget-number-bg-gradient-to: var(--canary-base-chrome-850);
2458
+ --canary-widget-bg-gradient-from: var(--canary-base-chrome-850);
2459
+ --canary-widget-bg-gradient-to: var(--canary-base-chrome-950);
1912
2460
  }
1913
2461
  }