draft-components 4.1.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/css/draft-components-variables.css +11 -11
  2. package/css/draft-components.css +66 -67
  3. package/dist/components/button/button.css +3 -3
  4. package/dist/components/dialog/dialog.css +8 -10
  5. package/dist/components/popover/popover.css +8 -7
  6. package/dist/components/table/table.css +2 -2
  7. package/dist/components/tag/tag.css +34 -34
  8. package/package.json +1 -1
package/css/draft-components-variables.css CHANGED
@@ -561,14 +561,14 @@
561
561
 
562
562
  /* Background Colors */
563
563
  --dc-background-primary: var(--dc-white);
564
- --dc-background-color-1: rgb(var(--dc-neutral-950-rgb) / 4%);
565
- --dc-background-color-2: rgb(var(--dc-neutral-950-rgb) / 8%);
566
- --dc-background-color-3: rgb(var(--dc-neutral-950-rgb) / 16%);
564
+ --dc-background-color-1: rgb(var(--dc-neutral-950-rgb) / 3%);
565
+ --dc-background-color-2: rgb(var(--dc-neutral-950-rgb) / 6%);
566
+ --dc-background-color-3: rgb(var(--dc-neutral-950-rgb) / 12%);
567
567
 
568
568
  /* Border Colors */
569
- --dc-border-color-1: rgb(var(--dc-neutral-950-rgb) / 8%);
570
- --dc-border-color-2: rgb(var(--dc-neutral-950-rgb) / 16%);
571
- --dc-border-color-3: rgb(var(--dc-neutral-950-rgb) / 24%);
569
+ --dc-border-color-1: var(--dc-neutral-200);
570
+ --dc-border-color-2: var(--dc-neutral-300);
571
+ --dc-border-color-3: var(--dc-neutral-400);
572
572
 
573
573
  /* Text Color */
574
574
  --dc-text-color-primary: var(--dc-neutral-900);
@@ -600,15 +600,15 @@
600
600
 
601
601
  .dark {
602
602
  /* Background Colors */
603
- --dc-background-primary: var(--dc-neutral-900);
603
+ --dc-background-primary: var(--dc-neutral-800);
604
604
  --dc-background-color-1: rgb(var(--dc-neutral-50-rgb) / 4%);
605
605
  --dc-background-color-2: rgb(var(--dc-neutral-50-rgb) / 8%);
606
606
  --dc-background-color-3: rgb(var(--dc-neutral-50-rgb) / 16%);
607
607
 
608
608
  /* Border Colors */
609
- --dc-border-color-1: rgb(var(--dc-neutral-50-rgb) / 8%);
610
- --dc-border-color-2: rgb(var(--dc-neutral-50-rgb) / 16%);
611
- --dc-border-color-3: rgb(var(--dc-neutral-50-rgb) / 24%);
609
+ --dc-border-color-1: var(--dc-neutral-700);
610
+ --dc-border-color-2: var(--dc-neutral-600);
611
+ --dc-border-color-3: var(--dc-neutral-500);
612
612
 
613
613
  /* Text Color */
614
614
  --dc-text-color-primary: var(--dc-neutral-50);
@@ -617,7 +617,7 @@
617
617
  --dc-text-color-info: var(--dc-blue-400);
618
618
  --dc-text-color-success: var(--dc-green-500);
619
619
  --dc-text-color-warning: var(--dc-orange-400);
620
- --dc-text-color-error: var(--dc-red-500);
620
+ --dc-text-color-error: var(--dc-red-400);
621
621
 
622
622
  /* Inputs */
623
623
  --dc-focus-ring-color: var(--dc-blue-400);
package/css/draft-components.css CHANGED
@@ -561,14 +561,14 @@
561
561
 
562
562
  /* Background Colors */
563
563
  --dc-background-primary: var(--dc-white);
564
- --dc-background-color-1: rgb(var(--dc-neutral-950-rgb) / 4%);
565
- --dc-background-color-2: rgb(var(--dc-neutral-950-rgb) / 8%);
566
- --dc-background-color-3: rgb(var(--dc-neutral-950-rgb) / 16%);
564
+ --dc-background-color-1: rgb(var(--dc-neutral-950-rgb) / 3%);
565
+ --dc-background-color-2: rgb(var(--dc-neutral-950-rgb) / 6%);
566
+ --dc-background-color-3: rgb(var(--dc-neutral-950-rgb) / 12%);
567
567
 
568
568
  /* Border Colors */
569
- --dc-border-color-1: rgb(var(--dc-neutral-950-rgb) / 8%);
570
- --dc-border-color-2: rgb(var(--dc-neutral-950-rgb) / 16%);
571
- --dc-border-color-3: rgb(var(--dc-neutral-950-rgb) / 24%);
569
+ --dc-border-color-1: var(--dc-neutral-200);
570
+ --dc-border-color-2: var(--dc-neutral-300);
571
+ --dc-border-color-3: var(--dc-neutral-400);
572
572
 
573
573
  /* Text Color */
574
574
  --dc-text-color-primary: var(--dc-neutral-900);
@@ -600,15 +600,15 @@
600
600
 
601
601
  .dark {
602
602
  /* Background Colors */
603
- --dc-background-primary: var(--dc-neutral-900);
603
+ --dc-background-primary: var(--dc-neutral-800);
604
604
  --dc-background-color-1: rgb(var(--dc-neutral-50-rgb) / 4%);
605
605
  --dc-background-color-2: rgb(var(--dc-neutral-50-rgb) / 8%);
606
606
  --dc-background-color-3: rgb(var(--dc-neutral-50-rgb) / 16%);
607
607
 
608
608
  /* Border Colors */
609
- --dc-border-color-1: rgb(var(--dc-neutral-50-rgb) / 8%);
610
- --dc-border-color-2: rgb(var(--dc-neutral-50-rgb) / 16%);
611
- --dc-border-color-3: rgb(var(--dc-neutral-50-rgb) / 24%);
609
+ --dc-border-color-1: var(--dc-neutral-700);
610
+ --dc-border-color-2: var(--dc-neutral-600);
611
+ --dc-border-color-3: var(--dc-neutral-500);
612
612
 
613
613
  /* Text Color */
614
614
  --dc-text-color-primary: var(--dc-neutral-50);
@@ -617,7 +617,7 @@
617
617
  --dc-text-color-info: var(--dc-blue-400);
618
618
  --dc-text-color-success: var(--dc-green-500);
619
619
  --dc-text-color-warning: var(--dc-orange-400);
620
- --dc-text-color-error: var(--dc-red-500);
620
+ --dc-text-color-error: var(--dc-red-400);
621
621
 
622
622
  /* Inputs */
623
623
  --dc-focus-ring-color: var(--dc-blue-400);
@@ -674,13 +674,13 @@
674
674
  }
675
675
 
676
676
  .dc-tag_filled {
677
- --color: var(--dc-neutral-800);
677
+ --color: var(--dc-neutral-900);
678
678
  --background: var(--dc-neutral-300);
679
679
  --border-color: transparent;
680
680
  }
681
681
 
682
682
  .dc-tag_tinted {
683
- --color: var(--dc-neutral-900);
683
+ --color: var(--dc-neutral-800);
684
684
  --background: rgb(var(--dc-neutral-300-rgb) / 40%);
685
685
  --border-color: transparent;
686
686
  }
@@ -712,37 +712,37 @@
712
712
  }
713
713
 
714
714
  .dc-tag_green {
715
- --color: var(--dc-green-900);
715
+ --color: var(--dc-green-700);
716
716
  --background: rgb(var(--dc-green-300-rgb) / 10%);
717
717
  --border-color: rgb(var(--dc-green-700-rgb) / 20%);
718
718
  }
719
719
 
720
720
  .dc-tag_green.dc-tag_filled {
721
- --color: var(--dc-white);
721
+ --color: var(--dc-green-50);
722
722
  --background: var(--dc-green-600);
723
723
  --border-color: transparent;
724
724
  }
725
725
 
726
726
  .dc-tag_green.dc-tag_tinted {
727
- --color: var(--dc-green-900);
727
+ --color: var(--dc-green-800);
728
728
  --background: rgb(var(--dc-green-300-rgb) / 40%);
729
729
  --border-color: transparent;
730
730
  }
731
731
 
732
732
  .dc-tag_lime {
733
- --color: var(--dc-lime-900);
733
+ --color: var(--dc-lime-700);
734
734
  --background: rgb(var(--dc-lime-300-rgb) / 10%);
735
735
  --border-color: rgb(var(--dc-lime-700-rgb) / 20%);
736
736
  }
737
737
 
738
738
  .dc-tag_lime.dc-tag_filled {
739
- --color: var(--dc-lime-950);
739
+ --color: var(--dc-lime-900);
740
740
  --background: var(--dc-lime-300);
741
741
  --border-color: transparent;
742
742
  }
743
743
 
744
744
  .dc-tag_lime.dc-tag_tinted {
745
- --color: var(--dc-lime-900);
745
+ --color: var(--dc-lime-800);
746
746
  --background: rgb(var(--dc-lime-300-rgb) / 40%);
747
747
  --border-color: transparent;
748
748
  }
@@ -754,49 +754,49 @@
754
754
  }
755
755
 
756
756
  .dc-tag_sky.dc-tag_filled {
757
- --color: var(--dc-white);
757
+ --color: var(--dc-sky-50);
758
758
  --background: var(--dc-sky-600);
759
759
  --border-color: transparent;
760
760
  }
761
761
 
762
762
  .dc-tag_sky.dc-tag_tinted {
763
- --color: var(--dc-sky-900);
763
+ --color: var(--dc-sky-800);
764
764
  --background: rgb(var(--dc-sky-300-rgb) / 40%);
765
765
  --border-color: transparent;
766
766
  }
767
767
 
768
768
  .dc-tag_blue {
769
- --color: var(--dc-blue-800);
769
+ --color: var(--dc-blue-700);
770
770
  --background: rgb(var(--dc-blue-300-rgb) / 10%);
771
771
  --border-color: rgb(var(--dc-blue-700-rgb) / 20%);
772
772
  }
773
773
 
774
774
  .dc-tag_blue.dc-tag_filled {
775
- --color: var(--dc-white);
775
+ --color: var(--dc-blue-50);
776
776
  --background: var(--dc-blue-600);
777
777
  --border-color: transparent;
778
778
  }
779
779
 
780
780
  .dc-tag_blue.dc-tag_tinted {
781
- --color: var(--dc-blue-900);
781
+ --color: var(--dc-blue-800);
782
782
  --background: rgb(var(--dc-blue-300-rgb) / 40%);
783
783
  --border-color: transparent;
784
784
  }
785
785
 
786
786
  .dc-tag_indigo {
787
- --color: var(--dc-indigo-800);
787
+ --color: var(--dc-indigo-700);
788
788
  --background: rgb(var(--dc-indigo-300-rgb) / 10%);
789
789
  --border-color: rgb(var(--dc-indigo-700-rgb) / 20%);
790
790
  }
791
791
 
792
792
  .dc-tag_indigo.dc-tag_filled {
793
- --color: var(--dc-white);
793
+ --color: var(--dc-indigo-50);
794
794
  --background: var(--dc-indigo-600);
795
795
  --border-color: transparent;
796
796
  }
797
797
 
798
798
  .dc-tag_indigo.dc-tag_tinted {
799
- --color: var(--dc-indigo-900);
799
+ --color: var(--dc-indigo-800);
800
800
  --background: rgb(var(--dc-indigo-300-rgb) / 40%);
801
801
  --border-color: transparent;
802
802
  }
@@ -808,13 +808,13 @@
808
808
  }
809
809
 
810
810
  .dc-tag_pink.dc-tag_filled {
811
- --color: var(--dc-white);
811
+ --color: var(--dc-pink-50);
812
812
  --background: var(--dc-pink-600);
813
813
  --border-color: transparent;
814
814
  }
815
815
 
816
816
  .dc-tag_pink.dc-tag_tinted {
817
- --color: var(--dc-pink-900);
817
+ --color: var(--dc-pink-800);
818
818
  --background: rgb(var(--dc-pink-300-rgb) / 40%);
819
819
  --border-color: transparent;
820
820
  }
@@ -826,13 +826,13 @@
826
826
  }
827
827
 
828
828
  .dc-tag_red.dc-tag_filled {
829
- --color: var(--dc-white);
829
+ --color: var(--dc-red-50);
830
830
  --background: var(--dc-red-500);
831
831
  --border-color: transparent;
832
832
  }
833
833
 
834
834
  .dc-tag_red.dc-tag_tinted {
835
- --color: var(--dc-red-900);
835
+ --color: var(--dc-red-800);
836
836
  --background: rgb(var(--dc-red-300-rgb) / 40%);
837
837
  --border-color: transparent;
838
838
  }
@@ -844,31 +844,31 @@
844
844
  }
845
845
 
846
846
  .dc-tag_orange.dc-tag_filled {
847
- --color: var(--dc-white);
847
+ --color: var(--dc-orange-50);
848
848
  --background: var(--dc-orange-500);
849
849
  --border-color: transparent;
850
850
  }
851
851
 
852
852
  .dc-tag_orange.dc-tag_tinted {
853
- --color: var(--dc-orange-900);
853
+ --color: var(--dc-orange-800);
854
854
  --background: rgb(var(--dc-orange-300-rgb) / 40%);
855
855
  --border-color: transparent;
856
856
  }
857
857
 
858
858
  .dc-tag_yellow {
859
- --color: var(--dc-yellow-900);
859
+ --color: var(--dc-yellow-700);
860
860
  --background: rgb(var(--dc-yellow-300-rgb) / 10%);
861
861
  --border-color: rgb(var(--dc-yellow-700-rgb) / 20%);
862
862
  }
863
863
 
864
864
  .dc-tag_yellow.dc-tag_filled {
865
- --color: var(--dc-yellow-950);
865
+ --color: var(--dc-yellow-900);
866
866
  --background: var(--dc-yellow-400);
867
867
  --border-color: transparent;
868
868
  }
869
869
 
870
870
  .dc-tag_yellow.dc-tag_tinted {
871
- --color: var(--dc-yellow-900);
871
+ --color: var(--dc-yellow-800);
872
872
  --background: rgb(var(--dc-yellow-300-rgb) / 40%);
873
873
  --border-color: transparent;
874
874
  }
@@ -905,7 +905,7 @@
905
905
 
906
906
  .dark.dc-tag_green.dc-tag_filled,
907
907
  .dark .dc-tag_green.dc-tag_filled {
908
- --color: var(--dc-white);
908
+ --color: var(--dc-green-50);
909
909
  --background: var(--dc-green-600);
910
910
  --border-color: transparent;
911
911
  }
@@ -926,7 +926,7 @@
926
926
 
927
927
  .dark.dc-tag_lime.dc-tag_filled,
928
928
  .dark .dc-tag_lime.dc-tag_filled {
929
- --color: var(--dc-lime-950);
929
+ --color: var(--dc-lime-900);
930
930
  --background: var(--dc-lime-400);
931
931
  --border-color: transparent;
932
932
  }
@@ -947,7 +947,7 @@
947
947
 
948
948
  .dark .dc-tag_sky.dc-tag_filled,
949
949
  .dark.dc-tag_sky.dc-tag_filled {
950
- --color: var(--dc-white);
950
+ --color: var(--dc-sky-50);
951
951
  --background: var(--dc-sky-600);
952
952
  --border-color: transparent;
953
953
  }
@@ -968,7 +968,7 @@
968
968
 
969
969
  .dark .dc-tag_blue.dc-tag_filled,
970
970
  .dark.dc-tag_blue.dc-tag_filled {
971
- --color: var(--dc-white);
971
+ --color: var(--dc-blue-50);
972
972
  --background: var(--dc-blue-600);
973
973
  --border-color: transparent;
974
974
  }
@@ -989,7 +989,7 @@
989
989
 
990
990
  .dark .dc-tag_indigo.dc-tag_filled,
991
991
  .dark.dc-tag_indigo.dc-tag_filled {
992
- --color: var(--dc-white);
992
+ --color: var(--dc-indigo-50);
993
993
  --background: var(--dc-indigo-600);
994
994
  --border-color: transparent;
995
995
  }
@@ -1010,7 +1010,7 @@
1010
1010
 
1011
1011
  .dark .dc-tag_pink.dc-tag_filled,
1012
1012
  .dark.dc-tag_pink.dc-tag_filled {
1013
- --color: var(--dc-white);
1013
+ --color: var(--dc-pink-50);
1014
1014
  --background: var(--dc-pink-600);
1015
1015
  --border-color: transparent;
1016
1016
  }
@@ -1031,7 +1031,7 @@
1031
1031
 
1032
1032
  .dark .dc-tag_red.dc-tag_filled,
1033
1033
  .dark.dc-tag_red.dc-tag_filled {
1034
- --color: var(--dc-white);
1034
+ --color: var(--dc-red-50);
1035
1035
  --background: var(--dc-red-500);
1036
1036
  --border-color: transparent;
1037
1037
  }
@@ -1052,7 +1052,7 @@
1052
1052
 
1053
1053
  .dark .dc-tag_orange.dc-tag_filled,
1054
1054
  .dark.dc-tag_orange.dc-tag_filled {
1055
- --color: var(--dc-white);
1055
+ --color: var(--dc-orange-50);
1056
1056
  --background: var(--dc-orange-500);
1057
1057
  --border-color: transparent;
1058
1058
  }
@@ -1073,7 +1073,7 @@
1073
1073
 
1074
1074
  .dark .dc-tag_yellow.dc-tag_filled,
1075
1075
  .dark.dc-tag_yellow.dc-tag_filled {
1076
- --color: var(--dc-yellow-950);
1076
+ --color: var(--dc-yellow-900);
1077
1077
  --background: var(--dc-yellow-400);
1078
1078
  --border-color: transparent;
1079
1079
  }
@@ -1809,9 +1809,9 @@
1809
1809
  .dark .dc-button_tint_red {
1810
1810
  --color: var(--dc-white);
1811
1811
  --color-hover: var(--dc-white);
1812
- --background: var(--dc-red-600);
1813
- --background-hover: var(--dc-red-600);
1814
- --border-color: rgb(var(--dc-red-600-rgb) / 15%);
1812
+ --background: var(--dc-red-500);
1813
+ --background-hover: var(--dc-red-500);
1814
+ --border-color: rgb(var(--dc-red-500-rgb) / 15%);
1815
1815
  }
1816
1816
 
1817
1817
  .dark.dc-button_tint_red.dc-button_style_tinted,
@@ -2119,11 +2119,10 @@
2119
2119
  --font: var(--dc-text-sm);
2120
2120
  --padding: 12px 16px;
2121
2121
  --color: var(--dc-text-color-primary);
2122
- --background: var(--dc-white);
2122
+ --background: rgb(var(--dc-white) / 85%);
2123
+ --background-filter: blur(20px) saturate(180%);
2123
2124
  --radius: 8px;
2124
- --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
2125
- 0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%),
2126
- var(--dc-shadow-lg);
2125
+ --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%), 0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%), var(--dc-shadow-lg);
2127
2126
 
2128
2127
  position: absolute;
2129
2128
  top: 0;
@@ -2141,6 +2140,8 @@
2141
2140
  background: var(--background);
2142
2141
  border-radius: var(--radius);
2143
2142
  box-shadow: var(--shadow);
2143
+ -webkit-backdrop-filter: var(--background-filter);
2144
+ backdrop-filter: var(--background-filter);
2144
2145
  }
2145
2146
 
2146
2147
  @keyframes dc-popover-enter {
@@ -2180,9 +2181,9 @@
2180
2181
 
2181
2182
  .dark .dc-popover,
2182
2183
  .dark.dc-popover {
2183
- --border-color: var(--dc-neutral-700);
2184
- --background: var(--dc-neutral-800);
2185
- --shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
2184
+ --border-color: var(--dc-neutral-600);
2185
+ --background: rgb(var(--dc-neutral-800-rgb) / 85%);
2186
+ --shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-lg);
2186
2187
 
2187
2188
  color-scheme: dark;
2188
2189
  }
@@ -2499,24 +2500,22 @@
2499
2500
  scrollbar-width: thin;
2500
2501
  }
2501
2502
 
2502
- .dc-dialog__body:first-child,
2503
- .dc-dialog__body_has_top-delimiter:not(:first-child) {
2503
+ .dc-dialog__body:where(:first-child),
2504
+ .dc-dialog__body_has_top-delimiter:where(:not(:first-child)) {
2504
2505
  padding-top: 16px;
2505
2506
  }
2506
2507
 
2507
- .dc-dialog__body:last-child,
2508
- .dc-dialog__body_has_bottom-delimiter:not(:first-child) {
2508
+ .dc-dialog__body:where(:last-child),
2509
+ .dc-dialog__body_has_bottom-delimiter:where(:not(:first-child)) {
2509
2510
  padding-bottom: 16px;
2510
2511
  }
2511
2512
 
2512
2513
  .dc-dialog__body_has_top-delimiter:not(:first-child) {
2513
- border-top: var(--section-delimiter-width) solid
2514
- var(--section-delimiter-color);
2514
+ border-top: var(--section-delimiter-width) solid var(--section-delimiter-color);
2515
2515
  }
2516
2516
 
2517
2517
  .dc-dialog__body_has_bottom-delimiter:not(:first-child) {
2518
- border-bottom: var(--section-delimiter-width) solid
2519
- var(--section-delimiter-color);
2518
+ border-bottom: var(--section-delimiter-width) solid var(--section-delimiter-color);
2520
2519
  }
2521
2520
 
2522
2521
  .dc-dialog__footer {
@@ -2574,8 +2573,8 @@
2574
2573
  .dark .dc-dialog,
2575
2574
  .dark.dc-dialog {
2576
2575
  --modal-background: var(--dc-neutral-800);
2577
- --modal-shadow: 0 0 0 1px var(--dc-border-color-2), var(--dc-shadow-xl);
2578
- --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 65%);
2576
+ --modal-shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-xl);
2577
+ --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 75%);
2579
2578
  --scroll-shadow-top: 0 1px 1px rgb(255 255 255 / 15%);
2580
2579
  --scroll-shadow-bottom: 0 -1px 1px rgb(255 255 255 / 15%);
2581
2580
 
@@ -4432,7 +4431,7 @@
4432
4431
  --head-background: var(--dc-neutral-100);
4433
4432
  --row-background-stripped: var(--dc-neutral-100);
4434
4433
  --row-background-selected: var(--dc-neutral-100);
4435
- --row-background-highlighted: var(--dc-neutral-200);
4434
+ --row-background-highlighted: rgb(var(--dc-neutral-300-rgb) / 30%);
4436
4435
  --cell-background-hover: var(--dc-neutral-100);
4437
4436
  --cell-background-focus: var(--dc-neutral-100);
4438
4437
  --cell-padding-x: 12px;
@@ -4587,7 +4586,7 @@
4587
4586
  --head-background: var(--dc-neutral-800);
4588
4587
  --row-background-stripped: var(--dc-neutral-800);
4589
4588
  --row-background-selected: var(--dc-neutral-800);
4590
- --row-background-highlighted: var(--dc-neutral-700);
4589
+ --row-background-highlighted: rgb(var(--dc-neutral-600-rgb) / 30%);
4591
4590
  --cell-background-hover: var(--dc-neutral-800);
4592
4591
  --cell-background-focus: var(--dc-neutral-800);
4593
4592
 
package/dist/components/button/button.css CHANGED
@@ -630,9 +630,9 @@
630
630
  .dark .dc-button_tint_red {
631
631
  --color: var(--dc-white);
632
632
  --color-hover: var(--dc-white);
633
- --background: var(--dc-red-600);
634
- --background-hover: var(--dc-red-600);
635
- --border-color: rgb(var(--dc-red-600-rgb) / 15%);
633
+ --background: var(--dc-red-500);
634
+ --background-hover: var(--dc-red-500);
635
+ --border-color: rgb(var(--dc-red-500-rgb) / 15%);
636
636
  }
637
637
 
638
638
  .dark.dc-button_tint_red.dc-button_style_tinted,
package/dist/components/dialog/dialog.css CHANGED
@@ -310,24 +310,22 @@
310
310
  scrollbar-width: thin;
311
311
  }
312
312
 
313
- .dc-dialog__body:first-child,
314
- .dc-dialog__body_has_top-delimiter:not(:first-child) {
313
+ .dc-dialog__body:where(:first-child),
314
+ .dc-dialog__body_has_top-delimiter:where(:not(:first-child)) {
315
315
  padding-top: 16px;
316
316
  }
317
317
 
318
- .dc-dialog__body:last-child,
319
- .dc-dialog__body_has_bottom-delimiter:not(:first-child) {
318
+ .dc-dialog__body:where(:last-child),
319
+ .dc-dialog__body_has_bottom-delimiter:where(:not(:first-child)) {
320
320
  padding-bottom: 16px;
321
321
  }
322
322
 
323
323
  .dc-dialog__body_has_top-delimiter:not(:first-child) {
324
- border-top: var(--section-delimiter-width) solid
325
- var(--section-delimiter-color);
324
+ border-top: var(--section-delimiter-width) solid var(--section-delimiter-color);
326
325
  }
327
326
 
328
327
  .dc-dialog__body_has_bottom-delimiter:not(:first-child) {
329
- border-bottom: var(--section-delimiter-width) solid
330
- var(--section-delimiter-color);
328
+ border-bottom: var(--section-delimiter-width) solid var(--section-delimiter-color);
331
329
  }
332
330
 
333
331
  .dc-dialog__footer {
@@ -385,8 +383,8 @@
385
383
  .dark .dc-dialog,
386
384
  .dark.dc-dialog {
387
385
  --modal-background: var(--dc-neutral-800);
388
- --modal-shadow: 0 0 0 1px var(--dc-border-color-2), var(--dc-shadow-xl);
389
- --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 65%);
386
+ --modal-shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-xl);
387
+ --backdrop-color: rgb(var(--dc-neutral-900-rgb) / 75%);
390
388
  --scroll-shadow-top: 0 1px 1px rgb(255 255 255 / 15%);
391
389
  --scroll-shadow-bottom: 0 -1px 1px rgb(255 255 255 / 15%);
392
390
 
package/dist/components/popover/popover.css CHANGED
@@ -2,11 +2,10 @@
2
2
  --font: var(--dc-text-sm);
3
3
  --padding: 12px 16px;
4
4
  --color: var(--dc-text-color-primary);
5
- --background: var(--dc-white);
5
+ --background: rgb(var(--dc-white) / 85%);
6
+ --background-filter: blur(20px) saturate(180%);
6
7
  --radius: 8px;
7
- --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%),
8
- 0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%),
9
- var(--dc-shadow-lg);
8
+ --shadow: 0 0 0 1px rgb(var(--dc-black-rgb) / 7.5%), 0 -1px 0 0 rgb(var(--dc-black-rgb) / 5%), var(--dc-shadow-lg);
10
9
 
11
10
  position: absolute;
12
11
  top: 0;
@@ -24,6 +23,8 @@
24
23
  background: var(--background);
25
24
  border-radius: var(--radius);
26
25
  box-shadow: var(--shadow);
26
+ -webkit-backdrop-filter: var(--background-filter);
27
+ backdrop-filter: var(--background-filter);
27
28
  }
28
29
 
29
30
  @keyframes dc-popover-enter {
@@ -63,9 +64,9 @@
63
64
 
64
65
  .dark .dc-popover,
65
66
  .dark.dc-popover {
66
- --border-color: var(--dc-neutral-700);
67
- --background: var(--dc-neutral-800);
68
- --shadow: 0 0 0 1px var(--dc-neutral-700), var(--dc-shadow-lg);
67
+ --border-color: var(--dc-neutral-600);
68
+ --background: rgb(var(--dc-neutral-800-rgb) / 85%);
69
+ --shadow: 0 0 0 1px var(--dc-neutral-600), var(--dc-shadow-lg);
69
70
 
70
71
  color-scheme: dark;
71
72
  }
package/dist/components/table/table.css CHANGED
@@ -6,7 +6,7 @@
6
6
  --head-background: var(--dc-neutral-100);
7
7
  --row-background-stripped: var(--dc-neutral-100);
8
8
  --row-background-selected: var(--dc-neutral-100);
9
- --row-background-highlighted: var(--dc-neutral-200);
9
+ --row-background-highlighted: rgb(var(--dc-neutral-300-rgb) / 30%);
10
10
  --cell-background-hover: var(--dc-neutral-100);
11
11
  --cell-background-focus: var(--dc-neutral-100);
12
12
  --cell-padding-x: 12px;
@@ -161,7 +161,7 @@
161
161
  --head-background: var(--dc-neutral-800);
162
162
  --row-background-stripped: var(--dc-neutral-800);
163
163
  --row-background-selected: var(--dc-neutral-800);
164
- --row-background-highlighted: var(--dc-neutral-700);
164
+ --row-background-highlighted: rgb(var(--dc-neutral-600-rgb) / 30%);
165
165
  --cell-background-hover: var(--dc-neutral-800);
166
166
  --cell-background-focus: var(--dc-neutral-800);
167
167
 
package/dist/components/tag/tag.css CHANGED
@@ -17,13 +17,13 @@
17
17
  }
18
18
 
19
19
  .dc-tag_filled {
20
- --color: var(--dc-neutral-800);
20
+ --color: var(--dc-neutral-900);
21
21
  --background: var(--dc-neutral-300);
22
22
  --border-color: transparent;
23
23
  }
24
24
 
25
25
  .dc-tag_tinted {
26
- --color: var(--dc-neutral-900);
26
+ --color: var(--dc-neutral-800);
27
27
  --background: rgb(var(--dc-neutral-300-rgb) / 40%);
28
28
  --border-color: transparent;
29
29
  }
@@ -55,37 +55,37 @@
55
55
  }
56
56
 
57
57
  .dc-tag_green {
58
- --color: var(--dc-green-900);
58
+ --color: var(--dc-green-700);
59
59
  --background: rgb(var(--dc-green-300-rgb) / 10%);
60
60
  --border-color: rgb(var(--dc-green-700-rgb) / 20%);
61
61
  }
62
62
 
63
63
  .dc-tag_green.dc-tag_filled {
64
- --color: var(--dc-white);
64
+ --color: var(--dc-green-50);
65
65
  --background: var(--dc-green-600);
66
66
  --border-color: transparent;
67
67
  }
68
68
 
69
69
  .dc-tag_green.dc-tag_tinted {
70
- --color: var(--dc-green-900);
70
+ --color: var(--dc-green-800);
71
71
  --background: rgb(var(--dc-green-300-rgb) / 40%);
72
72
  --border-color: transparent;
73
73
  }
74
74
 
75
75
  .dc-tag_lime {
76
- --color: var(--dc-lime-900);
76
+ --color: var(--dc-lime-700);
77
77
  --background: rgb(var(--dc-lime-300-rgb) / 10%);
78
78
  --border-color: rgb(var(--dc-lime-700-rgb) / 20%);
79
79
  }
80
80
 
81
81
  .dc-tag_lime.dc-tag_filled {
82
- --color: var(--dc-lime-950);
82
+ --color: var(--dc-lime-900);
83
83
  --background: var(--dc-lime-300);
84
84
  --border-color: transparent;
85
85
  }
86
86
 
87
87
  .dc-tag_lime.dc-tag_tinted {
88
- --color: var(--dc-lime-900);
88
+ --color: var(--dc-lime-800);
89
89
  --background: rgb(var(--dc-lime-300-rgb) / 40%);
90
90
  --border-color: transparent;
91
91
  }
@@ -97,49 +97,49 @@
97
97
  }
98
98
 
99
99
  .dc-tag_sky.dc-tag_filled {
100
- --color: var(--dc-white);
100
+ --color: var(--dc-sky-50);
101
101
  --background: var(--dc-sky-600);
102
102
  --border-color: transparent;
103
103
  }
104
104
 
105
105
  .dc-tag_sky.dc-tag_tinted {
106
- --color: var(--dc-sky-900);
106
+ --color: var(--dc-sky-800);
107
107
  --background: rgb(var(--dc-sky-300-rgb) / 40%);
108
108
  --border-color: transparent;
109
109
  }
110
110
 
111
111
  .dc-tag_blue {
112
- --color: var(--dc-blue-800);
112
+ --color: var(--dc-blue-700);
113
113
  --background: rgb(var(--dc-blue-300-rgb) / 10%);
114
114
  --border-color: rgb(var(--dc-blue-700-rgb) / 20%);
115
115
  }
116
116
 
117
117
  .dc-tag_blue.dc-tag_filled {
118
- --color: var(--dc-white);
118
+ --color: var(--dc-blue-50);
119
119
  --background: var(--dc-blue-600);
120
120
  --border-color: transparent;
121
121
  }
122
122
 
123
123
  .dc-tag_blue.dc-tag_tinted {
124
- --color: var(--dc-blue-900);
124
+ --color: var(--dc-blue-800);
125
125
  --background: rgb(var(--dc-blue-300-rgb) / 40%);
126
126
  --border-color: transparent;
127
127
  }
128
128
 
129
129
  .dc-tag_indigo {
130
- --color: var(--dc-indigo-800);
130
+ --color: var(--dc-indigo-700);
131
131
  --background: rgb(var(--dc-indigo-300-rgb) / 10%);
132
132
  --border-color: rgb(var(--dc-indigo-700-rgb) / 20%);
133
133
  }
134
134
 
135
135
  .dc-tag_indigo.dc-tag_filled {
136
- --color: var(--dc-white);
136
+ --color: var(--dc-indigo-50);
137
137
  --background: var(--dc-indigo-600);
138
138
  --border-color: transparent;
139
139
  }
140
140
 
141
141
  .dc-tag_indigo.dc-tag_tinted {
142
- --color: var(--dc-indigo-900);
142
+ --color: var(--dc-indigo-800);
143
143
  --background: rgb(var(--dc-indigo-300-rgb) / 40%);
144
144
  --border-color: transparent;
145
145
  }
@@ -151,13 +151,13 @@
151
151
  }
152
152
 
153
153
  .dc-tag_pink.dc-tag_filled {
154
- --color: var(--dc-white);
154
+ --color: var(--dc-pink-50);
155
155
  --background: var(--dc-pink-600);
156
156
  --border-color: transparent;
157
157
  }
158
158
 
159
159
  .dc-tag_pink.dc-tag_tinted {
160
- --color: var(--dc-pink-900);
160
+ --color: var(--dc-pink-800);
161
161
  --background: rgb(var(--dc-pink-300-rgb) / 40%);
162
162
  --border-color: transparent;
163
163
  }
@@ -169,13 +169,13 @@
169
169
  }
170
170
 
171
171
  .dc-tag_red.dc-tag_filled {
172
- --color: var(--dc-white);
172
+ --color: var(--dc-red-50);
173
173
  --background: var(--dc-red-500);
174
174
  --border-color: transparent;
175
175
  }
176
176
 
177
177
  .dc-tag_red.dc-tag_tinted {
178
- --color: var(--dc-red-900);
178
+ --color: var(--dc-red-800);
179
179
  --background: rgb(var(--dc-red-300-rgb) / 40%);
180
180
  --border-color: transparent;
181
181
  }
@@ -187,31 +187,31 @@
187
187
  }
188
188
 
189
189
  .dc-tag_orange.dc-tag_filled {
190
- --color: var(--dc-white);
190
+ --color: var(--dc-orange-50);
191
191
  --background: var(--dc-orange-500);
192
192
  --border-color: transparent;
193
193
  }
194
194
 
195
195
  .dc-tag_orange.dc-tag_tinted {
196
- --color: var(--dc-orange-900);
196
+ --color: var(--dc-orange-800);
197
197
  --background: rgb(var(--dc-orange-300-rgb) / 40%);
198
198
  --border-color: transparent;
199
199
  }
200
200
 
201
201
  .dc-tag_yellow {
202
- --color: var(--dc-yellow-900);
202
+ --color: var(--dc-yellow-700);
203
203
  --background: rgb(var(--dc-yellow-300-rgb) / 10%);
204
204
  --border-color: rgb(var(--dc-yellow-700-rgb) / 20%);
205
205
  }
206
206
 
207
207
  .dc-tag_yellow.dc-tag_filled {
208
- --color: var(--dc-yellow-950);
208
+ --color: var(--dc-yellow-900);
209
209
  --background: var(--dc-yellow-400);
210
210
  --border-color: transparent;
211
211
  }
212
212
 
213
213
  .dc-tag_yellow.dc-tag_tinted {
214
- --color: var(--dc-yellow-900);
214
+ --color: var(--dc-yellow-800);
215
215
  --background: rgb(var(--dc-yellow-300-rgb) / 40%);
216
216
  --border-color: transparent;
217
217
  }
@@ -248,7 +248,7 @@
248
248
 
249
249
  .dark.dc-tag_green.dc-tag_filled,
250
250
  .dark .dc-tag_green.dc-tag_filled {
251
- --color: var(--dc-white);
251
+ --color: var(--dc-green-50);
252
252
  --background: var(--dc-green-600);
253
253
  --border-color: transparent;
254
254
  }
@@ -269,7 +269,7 @@
269
269
 
270
270
  .dark.dc-tag_lime.dc-tag_filled,
271
271
  .dark .dc-tag_lime.dc-tag_filled {
272
- --color: var(--dc-lime-950);
272
+ --color: var(--dc-lime-900);
273
273
  --background: var(--dc-lime-400);
274
274
  --border-color: transparent;
275
275
  }
@@ -290,7 +290,7 @@
290
290
 
291
291
  .dark .dc-tag_sky.dc-tag_filled,
292
292
  .dark.dc-tag_sky.dc-tag_filled {
293
- --color: var(--dc-white);
293
+ --color: var(--dc-sky-50);
294
294
  --background: var(--dc-sky-600);
295
295
  --border-color: transparent;
296
296
  }
@@ -311,7 +311,7 @@
311
311
 
312
312
  .dark .dc-tag_blue.dc-tag_filled,
313
313
  .dark.dc-tag_blue.dc-tag_filled {
314
- --color: var(--dc-white);
314
+ --color: var(--dc-blue-50);
315
315
  --background: var(--dc-blue-600);
316
316
  --border-color: transparent;
317
317
  }
@@ -332,7 +332,7 @@
332
332
 
333
333
  .dark .dc-tag_indigo.dc-tag_filled,
334
334
  .dark.dc-tag_indigo.dc-tag_filled {
335
- --color: var(--dc-white);
335
+ --color: var(--dc-indigo-50);
336
336
  --background: var(--dc-indigo-600);
337
337
  --border-color: transparent;
338
338
  }
@@ -353,7 +353,7 @@
353
353
 
354
354
  .dark .dc-tag_pink.dc-tag_filled,
355
355
  .dark.dc-tag_pink.dc-tag_filled {
356
- --color: var(--dc-white);
356
+ --color: var(--dc-pink-50);
357
357
  --background: var(--dc-pink-600);
358
358
  --border-color: transparent;
359
359
  }
@@ -374,7 +374,7 @@
374
374
 
375
375
  .dark .dc-tag_red.dc-tag_filled,
376
376
  .dark.dc-tag_red.dc-tag_filled {
377
- --color: var(--dc-white);
377
+ --color: var(--dc-red-50);
378
378
  --background: var(--dc-red-500);
379
379
  --border-color: transparent;
380
380
  }
@@ -395,7 +395,7 @@
395
395
 
396
396
  .dark .dc-tag_orange.dc-tag_filled,
397
397
  .dark.dc-tag_orange.dc-tag_filled {
398
- --color: var(--dc-white);
398
+ --color: var(--dc-orange-50);
399
399
  --background: var(--dc-orange-500);
400
400
  --border-color: transparent;
401
401
  }
@@ -416,7 +416,7 @@
416
416
 
417
417
  .dark .dc-tag_yellow.dc-tag_filled,
418
418
  .dark.dc-tag_yellow.dc-tag_filled {
419
- --color: var(--dc-yellow-950);
419
+ --color: var(--dc-yellow-900);
420
420
  --background: var(--dc-yellow-400);
421
421
  --border-color: transparent;
422
422
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "draft-components",
3
- "version": "4.1.0",
3
+ "version": "4.3.0",
4
4
  "description": "The React based UI components library.",
5
5
  "type": "module",
6
6
  "exports": {