@bcc-code/component-library-vue 0.0.0-dev.053d9fc → 0.0.0-dev.0ebcb8d

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 (12) hide show
  1. package/README.md +9 -0
  2. package/dist/component-library.js +4407 -4421
  3. package/dist/component-library.umd.cjs +264 -264
  4. package/dist/index.css +1 -1
  5. package/dist/theme.css +222 -248
  6. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +28 -0
  7. package/dist-types/components/custom/index.d.ts +2 -2
  8. package/dist-types/components/wrapped/BccAvatar/BccAvatar.vue.d.ts +1 -1
  9. package/dist-types/components/wrapped/BccChip/BccChip.vue.d.ts +18 -0
  10. package/dist-types/components/wrapped/index.d.ts +2 -0
  11. package/package.json +2 -3
  12. package/dist-types/components/custom/BccStepper/BccStepper.vue.d.ts +0 -16
package/dist/theme.css CHANGED
@@ -685,16 +685,16 @@
685
685
  @utility ctx-blue-bolder {
686
686
  --ctx-text: var(--color-default-blue-200);
687
687
  --ctx-text-bold: var(--color-default-blue-100);
688
- --ctx-background: var(--color-default-blue-800);
689
- --ctx-gradient: var(--color-default-blue-700);
688
+ --ctx-background: var(--color-default-blue-700);
689
+ --ctx-gradient: var(--color-default-blue-800);
690
690
  --ctx-border: var(--color-default-blue-700);
691
691
  --ctx-shadow: var(--color-neutral-alpha-500A);
692
692
  --ctx-text-hover: var(--color-default-blue-200);
693
693
  --ctx-text-pressed: var(--color-default-blue-200);
694
- --ctx-background-hover: var(--color-default-blue-700);
695
- --ctx-background-pressed: var(--color-default-blue-600);
696
- --ctx-gradient-hover: var(--color-default-blue-600);
697
- --ctx-gradient-pressed: var(--color-default-blue-600);
694
+ --ctx-background-hover: var(--color-default-blue-800);
695
+ --ctx-background-pressed: var(--color-default-blue-900);
696
+ --ctx-gradient-hover: var(--color-default-blue-900);
697
+ --ctx-gradient-pressed: var(--color-default-blue-900);
698
698
  --ctx-border-hover: var(--color-default-blue-700);
699
699
  --ctx-border-pressed: var(--color-default-blue-700);
700
700
  }
@@ -702,16 +702,16 @@
702
702
  @utility ctx-blue-subtle {
703
703
  --ctx-text: var(--color-default-blue-900);
704
704
  --ctx-text-bold: var(--color-default-blue-1000);
705
- --ctx-background: var(--color-default-blue-300);
706
- --ctx-gradient: var(--color-default-blue-400);
705
+ --ctx-background: var(--color-default-blue-400);
706
+ --ctx-gradient: var(--color-default-blue-300);
707
707
  --ctx-border: var(--color-default-blue-500);
708
708
  --ctx-shadow: var(--color-neutral-alpha-500A);
709
709
  --ctx-text-hover: var(--color-default-blue-900);
710
710
  --ctx-text-pressed: var(--color-default-blue-900);
711
- --ctx-background-hover: var(--color-default-blue-400);
712
- --ctx-background-pressed: var(--color-default-blue-500);
713
- --ctx-gradient-hover: var(--color-default-blue-500);
714
- --ctx-gradient-pressed: var(--color-default-blue-500);
711
+ --ctx-background-hover: var(--color-default-blue-300);
712
+ --ctx-background-pressed: var(--color-default-blue-200);
713
+ --ctx-gradient-hover: var(--color-default-blue-200);
714
+ --ctx-gradient-pressed: var(--color-default-blue-200);
715
715
  --ctx-border-hover: var(--color-default-blue-500);
716
716
  --ctx-border-pressed: var(--color-default-blue-500);
717
717
  }
@@ -753,16 +753,16 @@
753
753
  @utility ctx-brand-bold {
754
754
  --ctx-text: var(--color-default-bcc-200);
755
755
  --ctx-text-bold: var(--color-default-neutral-100);
756
- --ctx-background: var(--color-default-bcc-800);
756
+ --ctx-background: var(--color-default-bcc-600);
757
757
  --ctx-gradient: var(--color-default-bcc-700);
758
758
  --ctx-border: var(--color-default-bcc-600);
759
759
  --ctx-shadow: var(--color-neutral-alpha-500A);
760
760
  --ctx-text-hover: var(--color-default-bcc-200);
761
761
  --ctx-text-pressed: var(--color-default-bcc-200);
762
762
  --ctx-background-hover: var(--color-default-bcc-700);
763
- --ctx-background-pressed: var(--color-default-bcc-600);
764
- --ctx-gradient-hover: var(--color-default-bcc-600);
765
- --ctx-gradient-pressed: var(--color-default-bcc-600);
763
+ --ctx-background-pressed: var(--color-default-bcc-800);
764
+ --ctx-gradient-hover: var(--color-default-bcc-800);
765
+ --ctx-gradient-pressed: var(--color-default-bcc-800);
766
766
  --ctx-border-hover: var(--color-default-bcc-600);
767
767
  --ctx-border-pressed: var(--color-default-bcc-600);
768
768
  }
@@ -770,16 +770,16 @@
770
770
  @utility ctx-brand-bolder {
771
771
  --ctx-text: var(--color-default-bcc-100);
772
772
  --ctx-text-bold: var(--color-default-neutral-0);
773
- --ctx-background: var(--color-default-bcc-900);
773
+ --ctx-background: var(--color-default-bcc-700);
774
774
  --ctx-gradient: var(--color-default-bcc-800);
775
775
  --ctx-border: var(--color-default-bcc-700);
776
776
  --ctx-shadow: var(--color-neutral-alpha-500A);
777
777
  --ctx-text-hover: var(--color-default-bcc-100);
778
778
  --ctx-text-pressed: var(--color-default-bcc-100);
779
779
  --ctx-background-hover: var(--color-default-bcc-800);
780
- --ctx-background-pressed: var(--color-default-bcc-700);
781
- --ctx-gradient-hover: var(--color-default-bcc-700);
782
- --ctx-gradient-pressed: var(--color-default-bcc-700);
780
+ --ctx-background-pressed: var(--color-default-bcc-900);
781
+ --ctx-gradient-hover: var(--color-default-bcc-900);
782
+ --ctx-gradient-pressed: var(--color-default-bcc-900);
783
783
  --ctx-border-hover: var(--color-default-bcc-700);
784
784
  --ctx-border-pressed: var(--color-default-bcc-700);
785
785
  }
@@ -819,31 +819,31 @@
819
819
  }
820
820
 
821
821
  @utility ctx-brand-subtle {
822
- --ctx-text: var(--color-default-neutral-900);
823
- --ctx-text-bold: var(--color-default-bcc-1000);
824
- --ctx-background: var(--color-default-bcc-300);
825
- --ctx-gradient: var(--color-default-bcc-400);
822
+ --ctx-text: var(--color-default-bcc-1000);
823
+ --ctx-text-bold: var(--color-default-bcc-900);
824
+ --ctx-background: var(--color-default-bcc-400);
825
+ --ctx-gradient: var(--color-default-bcc-300);
826
826
  --ctx-border: var(--color-default-bcc-500);
827
827
  --ctx-shadow: var(--color-neutral-alpha-500A);
828
- --ctx-text-hover: var(--color-default-neutral-900);
829
- --ctx-text-pressed: var(--color-default-neutral-900);
830
- --ctx-background-hover: var(--color-default-bcc-400);
831
- --ctx-background-pressed: var(--color-default-bcc-500);
832
- --ctx-gradient-hover: var(--color-default-bcc-500);
833
- --ctx-gradient-pressed: var(--color-default-bcc-500);
828
+ --ctx-text-hover: var(--color-default-bcc-1000);
829
+ --ctx-text-pressed: var(--color-default-bcc-1000);
830
+ --ctx-background-hover: var(--color-default-bcc-300);
831
+ --ctx-background-pressed: var(--color-default-bcc-200);
832
+ --ctx-gradient-hover: var(--color-default-bcc-200);
833
+ --ctx-gradient-pressed: var(--color-default-bcc-200);
834
834
  --ctx-border-hover: var(--color-default-bcc-500);
835
835
  --ctx-border-pressed: var(--color-default-bcc-500);
836
836
  }
837
837
 
838
838
  @utility ctx-brand-subtler {
839
- --ctx-text: var(--color-default-neutral-800);
840
- --ctx-text-bold: var(--color-default-bcc-900);
839
+ --ctx-text: var(--color-default-bcc-900);
840
+ --ctx-text-bold: var(--color-default-bcc-800);
841
841
  --ctx-background: var(--color-default-bcc-200);
842
842
  --ctx-gradient: var(--color-default-bcc-300);
843
843
  --ctx-border: var(--color-default-bcc-400);
844
844
  --ctx-shadow: var(--color-neutral-alpha-500A);
845
- --ctx-text-hover: var(--color-default-neutral-800);
846
- --ctx-text-pressed: var(--color-default-neutral-800);
845
+ --ctx-text-hover: var(--color-default-bcc-900);
846
+ --ctx-text-pressed: var(--color-default-bcc-900);
847
847
  --ctx-background-hover: var(--color-default-bcc-300);
848
848
  --ctx-background-pressed: var(--color-default-bcc-400);
849
849
  --ctx-gradient-hover: var(--color-default-bcc-400);
@@ -853,14 +853,14 @@
853
853
  }
854
854
 
855
855
  @utility ctx-brand-subtlest {
856
- --ctx-text: var(--color-default-neutral-900);
857
- --ctx-text-bold: var(--color-default-bcc-1000);
856
+ --ctx-text: var(--color-default-bcc-800);
857
+ --ctx-text-bold: var(--color-default-bcc-700);
858
858
  --ctx-background: var(--color-default-bcc-100);
859
859
  --ctx-gradient: var(--color-default-bcc-200);
860
860
  --ctx-border: var(--color-default-bcc-300);
861
861
  --ctx-shadow: var(--color-neutral-alpha-500A);
862
- --ctx-text-hover: var(--color-default-neutral-900);
863
- --ctx-text-pressed: var(--color-default-neutral-900);
862
+ --ctx-text-hover: var(--color-default-bcc-800);
863
+ --ctx-text-pressed: var(--color-default-bcc-800);
864
864
  --ctx-background-hover: var(--color-default-bcc-200);
865
865
  --ctx-background-pressed: var(--color-default-bcc-300);
866
866
  --ctx-gradient-hover: var(--color-default-bcc-300);
@@ -872,16 +872,16 @@
872
872
  @utility ctx-brown-bolder {
873
873
  --ctx-text: var(--color-default-brown-200);
874
874
  --ctx-text-bold: var(--color-default-brown-100);
875
- --ctx-background: var(--color-default-brown-800);
876
- --ctx-gradient: var(--color-default-brown-700);
875
+ --ctx-background: var(--color-default-brown-700);
876
+ --ctx-gradient: var(--color-default-brown-800);
877
877
  --ctx-border: var(--color-default-brown-700);
878
878
  --ctx-shadow: var(--color-neutral-alpha-500A);
879
879
  --ctx-text-hover: var(--color-default-brown-200);
880
880
  --ctx-text-pressed: var(--color-default-brown-200);
881
- --ctx-background-hover: var(--color-default-brown-700);
882
- --ctx-background-pressed: var(--color-default-brown-600);
883
- --ctx-gradient-hover: var(--color-default-brown-600);
884
- --ctx-gradient-pressed: var(--color-default-brown-600);
881
+ --ctx-background-hover: var(--color-default-brown-800);
882
+ --ctx-background-pressed: var(--color-default-brown-900);
883
+ --ctx-gradient-hover: var(--color-default-brown-900);
884
+ --ctx-gradient-pressed: var(--color-default-brown-900);
885
885
  --ctx-border-hover: var(--color-default-brown-700);
886
886
  --ctx-border-pressed: var(--color-default-brown-700);
887
887
  }
@@ -889,16 +889,16 @@
889
889
  @utility ctx-brown-subtle {
890
890
  --ctx-text: var(--color-default-brown-900);
891
891
  --ctx-text-bold: var(--color-default-brown-1000);
892
- --ctx-background: var(--color-default-brown-300);
893
- --ctx-gradient: var(--color-default-brown-400);
892
+ --ctx-background: var(--color-default-brown-400);
893
+ --ctx-gradient: var(--color-default-brown-300);
894
894
  --ctx-border: var(--color-default-brown-500);
895
895
  --ctx-shadow: var(--color-neutral-alpha-500A);
896
896
  --ctx-text-hover: var(--color-default-brown-900);
897
897
  --ctx-text-pressed: var(--color-default-brown-900);
898
- --ctx-background-hover: var(--color-default-brown-400);
899
- --ctx-background-pressed: var(--color-default-brown-500);
900
- --ctx-gradient-hover: var(--color-default-brown-500);
901
- --ctx-gradient-pressed: var(--color-default-brown-500);
898
+ --ctx-background-hover: var(--color-default-brown-300);
899
+ --ctx-background-pressed: var(--color-default-brown-200);
900
+ --ctx-gradient-hover: var(--color-default-brown-200);
901
+ --ctx-gradient-pressed: var(--color-default-brown-200);
902
902
  --ctx-border-hover: var(--color-default-brown-500);
903
903
  --ctx-border-pressed: var(--color-default-brown-500);
904
904
  }
@@ -938,18 +938,18 @@
938
938
  }
939
939
 
940
940
  @utility ctx-danger-bolder {
941
- --ctx-text: var(--color-default-neutral-100);
942
- --ctx-text-bold: var(--color-default-neutral-0);
943
- --ctx-background: var(--color-default-red-800);
944
- --ctx-gradient: var(--color-default-red-700);
941
+ --ctx-text: var(--color-default-red-200);
942
+ --ctx-text-bold: var(--color-default-red-100);
943
+ --ctx-background: var(--color-default-red-700);
944
+ --ctx-gradient: var(--color-default-red-800);
945
945
  --ctx-border: var(--color-default-red-700);
946
946
  --ctx-shadow: var(--color-neutral-alpha-500A);
947
- --ctx-text-hover: var(--color-default-neutral-100);
948
- --ctx-text-pressed: var(--color-default-neutral-100);
949
- --ctx-background-hover: var(--color-default-red-700);
950
- --ctx-background-pressed: var(--color-default-red-600);
951
- --ctx-gradient-hover: var(--color-default-red-600);
952
- --ctx-gradient-pressed: var(--color-default-red-600);
947
+ --ctx-text-hover: var(--color-default-red-200);
948
+ --ctx-text-pressed: var(--color-default-red-200);
949
+ --ctx-background-hover: var(--color-default-red-800);
950
+ --ctx-background-pressed: var(--color-default-red-900);
951
+ --ctx-gradient-hover: var(--color-default-red-900);
952
+ --ctx-gradient-pressed: var(--color-default-red-900);
953
953
  --ctx-border-hover: var(--color-default-red-700);
954
954
  --ctx-border-pressed: var(--color-default-red-700);
955
955
  }
@@ -991,16 +991,16 @@
991
991
  @utility ctx-gray-subtle {
992
992
  --ctx-text: var(--color-default-neutral-900);
993
993
  --ctx-text-bold: var(--color-default-neutral-1000);
994
- --ctx-background: var(--color-default-neutral-300);
995
- --ctx-gradient: var(--color-default-neutral-400);
994
+ --ctx-background: var(--color-default-neutral-400);
995
+ --ctx-gradient: var(--color-default-neutral-300);
996
996
  --ctx-border: var(--color-default-neutral-500);
997
997
  --ctx-shadow: var(--color-neutral-alpha-500A);
998
998
  --ctx-text-hover: var(--color-default-neutral-900);
999
999
  --ctx-text-pressed: var(--color-default-neutral-900);
1000
- --ctx-background-hover: var(--color-default-neutral-400);
1001
- --ctx-background-pressed: var(--color-default-neutral-500);
1002
- --ctx-gradient-hover: var(--color-default-neutral-500);
1003
- --ctx-gradient-pressed: var(--color-default-neutral-500);
1000
+ --ctx-background-hover: var(--color-default-neutral-300);
1001
+ --ctx-background-pressed: var(--color-default-neutral-200);
1002
+ --ctx-gradient-hover: var(--color-default-neutral-200);
1003
+ --ctx-gradient-pressed: var(--color-default-neutral-200);
1004
1004
  --ctx-border-hover: var(--color-default-neutral-500);
1005
1005
  --ctx-border-pressed: var(--color-default-neutral-500);
1006
1006
  }
@@ -1042,16 +1042,16 @@
1042
1042
  @utility ctx-green-bolder {
1043
1043
  --ctx-text: var(--color-default-green-200);
1044
1044
  --ctx-text-bold: var(--color-default-green-100);
1045
- --ctx-background: var(--color-default-green-800);
1046
- --ctx-gradient: var(--color-default-green-700);
1045
+ --ctx-background: var(--color-default-green-700);
1046
+ --ctx-gradient: var(--color-default-green-800);
1047
1047
  --ctx-border: var(--color-default-green-700);
1048
1048
  --ctx-shadow: var(--color-neutral-alpha-500A);
1049
1049
  --ctx-text-hover: var(--color-default-green-200);
1050
1050
  --ctx-text-pressed: var(--color-default-green-200);
1051
- --ctx-background-hover: var(--color-default-green-700);
1052
- --ctx-background-pressed: var(--color-default-green-600);
1053
- --ctx-gradient-hover: var(--color-default-green-600);
1054
- --ctx-gradient-pressed: var(--color-default-green-600);
1051
+ --ctx-background-hover: var(--color-default-green-800);
1052
+ --ctx-background-pressed: var(--color-default-green-900);
1053
+ --ctx-gradient-hover: var(--color-default-green-900);
1054
+ --ctx-gradient-pressed: var(--color-default-green-900);
1055
1055
  --ctx-border-hover: var(--color-default-green-700);
1056
1056
  --ctx-border-pressed: var(--color-default-green-700);
1057
1057
  }
@@ -1059,16 +1059,16 @@
1059
1059
  @utility ctx-green-subtle {
1060
1060
  --ctx-text: var(--color-default-green-900);
1061
1061
  --ctx-text-bold: var(--color-default-green-1000);
1062
- --ctx-background: var(--color-default-green-300);
1063
- --ctx-gradient: var(--color-default-green-400);
1062
+ --ctx-background: var(--color-default-green-400);
1063
+ --ctx-gradient: var(--color-default-green-300);
1064
1064
  --ctx-border: var(--color-default-green-500);
1065
1065
  --ctx-shadow: var(--color-neutral-alpha-500A);
1066
1066
  --ctx-text-hover: var(--color-default-green-900);
1067
1067
  --ctx-text-pressed: var(--color-default-green-900);
1068
- --ctx-background-hover: var(--color-default-green-400);
1069
- --ctx-background-pressed: var(--color-default-green-500);
1070
- --ctx-gradient-hover: var(--color-default-green-500);
1071
- --ctx-gradient-pressed: var(--color-default-green-500);
1068
+ --ctx-background-hover: var(--color-default-green-300);
1069
+ --ctx-background-pressed: var(--color-default-green-200);
1070
+ --ctx-gradient-hover: var(--color-default-green-200);
1071
+ --ctx-gradient-pressed: var(--color-default-green-200);
1072
1072
  --ctx-border-hover: var(--color-default-green-500);
1073
1073
  --ctx-border-pressed: var(--color-default-green-500);
1074
1074
  }
@@ -1108,18 +1108,18 @@
1108
1108
  }
1109
1109
 
1110
1110
  @utility ctx-info-bolder {
1111
- --ctx-text: var(--color-default-neutral-100);
1112
- --ctx-text-bold: var(--color-default-neutral-0);
1113
- --ctx-background: var(--color-default-blue-800);
1114
- --ctx-gradient: var(--color-default-blue-700);
1111
+ --ctx-text: var(--color-default-blue-200);
1112
+ --ctx-text-bold: var(--color-default-blue-100);
1113
+ --ctx-background: var(--color-default-blue-700);
1114
+ --ctx-gradient: var(--color-default-blue-800);
1115
1115
  --ctx-border: var(--color-default-blue-700);
1116
1116
  --ctx-shadow: var(--color-neutral-alpha-500A);
1117
- --ctx-text-hover: var(--color-default-neutral-100);
1118
- --ctx-text-pressed: var(--color-default-neutral-100);
1119
- --ctx-background-hover: var(--color-default-blue-700);
1120
- --ctx-background-pressed: var(--color-default-blue-600);
1121
- --ctx-gradient-hover: var(--color-default-blue-600);
1122
- --ctx-gradient-pressed: var(--color-default-blue-600);
1117
+ --ctx-text-hover: var(--color-default-blue-200);
1118
+ --ctx-text-pressed: var(--color-default-blue-200);
1119
+ --ctx-background-hover: var(--color-default-blue-800);
1120
+ --ctx-background-pressed: var(--color-default-blue-900);
1121
+ --ctx-gradient-hover: var(--color-default-blue-900);
1122
+ --ctx-gradient-pressed: var(--color-default-blue-900);
1123
1123
  --ctx-border-hover: var(--color-default-blue-700);
1124
1124
  --ctx-border-pressed: var(--color-default-blue-700);
1125
1125
  }
@@ -1144,16 +1144,16 @@
1144
1144
  @utility ctx-magenta-bolder {
1145
1145
  --ctx-text: var(--color-default-magenta-200);
1146
1146
  --ctx-text-bold: var(--color-default-magenta-100);
1147
- --ctx-background: var(--color-default-magenta-800);
1148
- --ctx-gradient: var(--color-default-magenta-700);
1147
+ --ctx-background: var(--color-default-magenta-700);
1148
+ --ctx-gradient: var(--color-default-magenta-800);
1149
1149
  --ctx-border: var(--color-default-magenta-700);
1150
1150
  --ctx-shadow: var(--color-neutral-alpha-500A);
1151
1151
  --ctx-text-hover: var(--color-default-magenta-200);
1152
1152
  --ctx-text-pressed: var(--color-default-magenta-200);
1153
- --ctx-background-hover: var(--color-default-magenta-700);
1154
- --ctx-background-pressed: var(--color-default-magenta-600);
1155
- --ctx-gradient-hover: var(--color-default-magenta-600);
1156
- --ctx-gradient-pressed: var(--color-default-magenta-600);
1153
+ --ctx-background-hover: var(--color-default-magenta-800);
1154
+ --ctx-background-pressed: var(--color-default-magenta-900);
1155
+ --ctx-gradient-hover: var(--color-default-magenta-900);
1156
+ --ctx-gradient-pressed: var(--color-default-magenta-900);
1157
1157
  --ctx-border-hover: var(--color-default-magenta-700);
1158
1158
  --ctx-border-pressed: var(--color-default-magenta-700);
1159
1159
  }
@@ -1161,16 +1161,16 @@
1161
1161
  @utility ctx-magenta-subtle {
1162
1162
  --ctx-text: var(--color-default-magenta-900);
1163
1163
  --ctx-text-bold: var(--color-default-magenta-1000);
1164
- --ctx-background: var(--color-default-magenta-300);
1165
- --ctx-gradient: var(--color-default-magenta-400);
1164
+ --ctx-background: var(--color-default-magenta-400);
1165
+ --ctx-gradient: var(--color-default-magenta-300);
1166
1166
  --ctx-border: var(--color-default-magenta-500);
1167
1167
  --ctx-shadow: var(--color-neutral-alpha-500A);
1168
1168
  --ctx-text-hover: var(--color-default-magenta-900);
1169
1169
  --ctx-text-pressed: var(--color-default-magenta-900);
1170
- --ctx-background-hover: var(--color-default-magenta-400);
1171
- --ctx-background-pressed: var(--color-default-magenta-500);
1172
- --ctx-gradient-hover: var(--color-default-magenta-500);
1173
- --ctx-gradient-pressed: var(--color-default-magenta-500);
1170
+ --ctx-background-hover: var(--color-default-magenta-300);
1171
+ --ctx-background-pressed: var(--color-default-magenta-200);
1172
+ --ctx-gradient-hover: var(--color-default-magenta-200);
1173
+ --ctx-gradient-pressed: var(--color-default-magenta-200);
1174
1174
  --ctx-border-hover: var(--color-default-magenta-500);
1175
1175
  --ctx-border-pressed: var(--color-default-magenta-500);
1176
1176
  }
@@ -1314,16 +1314,16 @@
1314
1314
  @utility ctx-orange-bolder {
1315
1315
  --ctx-text: var(--color-default-orange-200);
1316
1316
  --ctx-text-bold: var(--color-default-orange-100);
1317
- --ctx-background: var(--color-default-orange-800);
1318
- --ctx-gradient: var(--color-default-orange-700);
1317
+ --ctx-background: var(--color-default-orange-700);
1318
+ --ctx-gradient: var(--color-default-orange-800);
1319
1319
  --ctx-border: var(--color-default-orange-700);
1320
1320
  --ctx-shadow: var(--color-neutral-alpha-500A);
1321
1321
  --ctx-text-hover: var(--color-default-orange-200);
1322
1322
  --ctx-text-pressed: var(--color-default-orange-200);
1323
- --ctx-background-hover: var(--color-default-orange-700);
1324
- --ctx-background-pressed: var(--color-default-orange-600);
1325
- --ctx-gradient-hover: var(--color-default-orange-600);
1326
- --ctx-gradient-pressed: var(--color-default-orange-600);
1323
+ --ctx-background-hover: var(--color-default-orange-800);
1324
+ --ctx-background-pressed: var(--color-default-orange-900);
1325
+ --ctx-gradient-hover: var(--color-default-orange-900);
1326
+ --ctx-gradient-pressed: var(--color-default-orange-900);
1327
1327
  --ctx-border-hover: var(--color-default-orange-700);
1328
1328
  --ctx-border-pressed: var(--color-default-orange-700);
1329
1329
  }
@@ -1331,16 +1331,16 @@
1331
1331
  @utility ctx-orange-subtle {
1332
1332
  --ctx-text: var(--color-default-orange-900);
1333
1333
  --ctx-text-bold: var(--color-default-orange-1000);
1334
- --ctx-background: var(--color-default-orange-300);
1335
- --ctx-gradient: var(--color-default-orange-400);
1334
+ --ctx-background: var(--color-default-orange-400);
1335
+ --ctx-gradient: var(--color-default-orange-300);
1336
1336
  --ctx-border: var(--color-default-orange-500);
1337
1337
  --ctx-shadow: var(--color-neutral-alpha-500A);
1338
1338
  --ctx-text-hover: var(--color-default-orange-900);
1339
1339
  --ctx-text-pressed: var(--color-default-orange-900);
1340
- --ctx-background-hover: var(--color-default-orange-400);
1341
- --ctx-background-pressed: var(--color-default-orange-500);
1342
- --ctx-gradient-hover: var(--color-default-orange-500);
1343
- --ctx-gradient-pressed: var(--color-default-orange-500);
1340
+ --ctx-background-hover: var(--color-default-orange-300);
1341
+ --ctx-background-pressed: var(--color-default-orange-200);
1342
+ --ctx-gradient-hover: var(--color-default-orange-200);
1343
+ --ctx-gradient-pressed: var(--color-default-orange-200);
1344
1344
  --ctx-border-hover: var(--color-default-orange-500);
1345
1345
  --ctx-border-pressed: var(--color-default-orange-500);
1346
1346
  }
@@ -1382,16 +1382,16 @@
1382
1382
  @utility ctx-purple-bolder {
1383
1383
  --ctx-text: var(--color-default-purple-200);
1384
1384
  --ctx-text-bold: var(--color-default-purple-100);
1385
- --ctx-background: var(--color-default-purple-800);
1386
- --ctx-gradient: var(--color-default-purple-700);
1385
+ --ctx-background: var(--color-default-purple-700);
1386
+ --ctx-gradient: var(--color-default-purple-800);
1387
1387
  --ctx-border: var(--color-default-purple-700);
1388
1388
  --ctx-shadow: var(--color-neutral-alpha-500A);
1389
1389
  --ctx-text-hover: var(--color-default-purple-200);
1390
1390
  --ctx-text-pressed: var(--color-default-purple-200);
1391
- --ctx-background-hover: var(--color-default-purple-700);
1392
- --ctx-background-pressed: var(--color-default-purple-600);
1393
- --ctx-gradient-hover: var(--color-default-purple-600);
1394
- --ctx-gradient-pressed: var(--color-default-purple-600);
1391
+ --ctx-background-hover: var(--color-default-purple-800);
1392
+ --ctx-background-pressed: var(--color-default-purple-900);
1393
+ --ctx-gradient-hover: var(--color-default-purple-900);
1394
+ --ctx-gradient-pressed: var(--color-default-purple-900);
1395
1395
  --ctx-border-hover: var(--color-default-purple-700);
1396
1396
  --ctx-border-pressed: var(--color-default-purple-700);
1397
1397
  }
@@ -1399,16 +1399,16 @@
1399
1399
  @utility ctx-purple-subtle {
1400
1400
  --ctx-text: var(--color-default-purple-900);
1401
1401
  --ctx-text-bold: var(--color-default-purple-1000);
1402
- --ctx-background: var(--color-default-purple-300);
1403
- --ctx-gradient: var(--color-default-purple-400);
1402
+ --ctx-background: var(--color-default-purple-400);
1403
+ --ctx-gradient: var(--color-default-purple-300);
1404
1404
  --ctx-border: var(--color-default-purple-500);
1405
1405
  --ctx-shadow: var(--color-neutral-alpha-500A);
1406
1406
  --ctx-text-hover: var(--color-default-purple-900);
1407
1407
  --ctx-text-pressed: var(--color-default-purple-900);
1408
- --ctx-background-hover: var(--color-default-purple-400);
1409
- --ctx-background-pressed: var(--color-default-purple-500);
1410
- --ctx-gradient-hover: var(--color-default-purple-500);
1411
- --ctx-gradient-pressed: var(--color-default-purple-500);
1408
+ --ctx-background-hover: var(--color-default-purple-300);
1409
+ --ctx-background-pressed: var(--color-default-purple-200);
1410
+ --ctx-gradient-hover: var(--color-default-purple-200);
1411
+ --ctx-gradient-pressed: var(--color-default-purple-200);
1412
1412
  --ctx-border-hover: var(--color-default-purple-500);
1413
1413
  --ctx-border-pressed: var(--color-default-purple-500);
1414
1414
  }
@@ -1450,16 +1450,16 @@
1450
1450
  @utility ctx-red-bolder {
1451
1451
  --ctx-text: var(--color-default-red-200);
1452
1452
  --ctx-text-bold: var(--color-default-red-100);
1453
- --ctx-background: var(--color-default-red-800);
1454
- --ctx-gradient: var(--color-default-red-700);
1453
+ --ctx-background: var(--color-default-red-700);
1454
+ --ctx-gradient: var(--color-default-red-800);
1455
1455
  --ctx-border: var(--color-default-red-700);
1456
1456
  --ctx-shadow: var(--color-neutral-alpha-500A);
1457
1457
  --ctx-text-hover: var(--color-default-red-200);
1458
1458
  --ctx-text-pressed: var(--color-default-red-200);
1459
- --ctx-background-hover: var(--color-default-red-700);
1460
- --ctx-background-pressed: var(--color-default-red-600);
1461
- --ctx-gradient-hover: var(--color-default-red-600);
1462
- --ctx-gradient-pressed: var(--color-default-red-600);
1459
+ --ctx-background-hover: var(--color-default-red-800);
1460
+ --ctx-background-pressed: var(--color-default-red-900);
1461
+ --ctx-gradient-hover: var(--color-default-red-900);
1462
+ --ctx-gradient-pressed: var(--color-default-red-900);
1463
1463
  --ctx-border-hover: var(--color-default-red-700);
1464
1464
  --ctx-border-pressed: var(--color-default-red-700);
1465
1465
  }
@@ -1467,16 +1467,16 @@
1467
1467
  @utility ctx-red-subtle {
1468
1468
  --ctx-text: var(--color-default-red-900);
1469
1469
  --ctx-text-bold: var(--color-default-red-1000);
1470
- --ctx-background: var(--color-default-red-300);
1471
- --ctx-gradient: var(--color-default-red-400);
1470
+ --ctx-background: var(--color-default-red-400);
1471
+ --ctx-gradient: var(--color-default-red-300);
1472
1472
  --ctx-border: var(--color-default-red-500);
1473
1473
  --ctx-shadow: var(--color-neutral-alpha-500A);
1474
1474
  --ctx-text-hover: var(--color-default-red-900);
1475
1475
  --ctx-text-pressed: var(--color-default-red-900);
1476
- --ctx-background-hover: var(--color-default-red-400);
1477
- --ctx-background-pressed: var(--color-default-red-500);
1478
- --ctx-gradient-hover: var(--color-default-red-500);
1479
- --ctx-gradient-pressed: var(--color-default-red-500);
1476
+ --ctx-background-hover: var(--color-default-red-300);
1477
+ --ctx-background-pressed: var(--color-default-red-200);
1478
+ --ctx-gradient-hover: var(--color-default-red-200);
1479
+ --ctx-gradient-pressed: var(--color-default-red-200);
1480
1480
  --ctx-border-hover: var(--color-default-red-500);
1481
1481
  --ctx-border-pressed: var(--color-default-red-500);
1482
1482
  }
@@ -1516,18 +1516,18 @@
1516
1516
  }
1517
1517
 
1518
1518
  @utility ctx-success-bolder {
1519
- --ctx-text: var(--color-default-neutral-100);
1520
- --ctx-text-bold: var(--color-default-neutral-0);
1521
- --ctx-background: var(--color-default-green-800);
1522
- --ctx-gradient: var(--color-default-green-700);
1519
+ --ctx-text: var(--color-default-green-200);
1520
+ --ctx-text-bold: var(--color-default-green-100);
1521
+ --ctx-background: var(--color-default-green-700);
1522
+ --ctx-gradient: var(--color-default-green-800);
1523
1523
  --ctx-border: var(--color-default-green-700);
1524
1524
  --ctx-shadow: var(--color-neutral-alpha-500A);
1525
- --ctx-text-hover: var(--color-default-neutral-100);
1526
- --ctx-text-pressed: var(--color-default-neutral-100);
1527
- --ctx-background-hover: var(--color-default-green-700);
1528
- --ctx-background-pressed: var(--color-default-green-600);
1529
- --ctx-gradient-hover: var(--color-default-green-600);
1530
- --ctx-gradient-pressed: var(--color-default-green-600);
1525
+ --ctx-text-hover: var(--color-default-green-200);
1526
+ --ctx-text-pressed: var(--color-default-green-200);
1527
+ --ctx-background-hover: var(--color-default-green-800);
1528
+ --ctx-background-pressed: var(--color-default-green-900);
1529
+ --ctx-gradient-hover: var(--color-default-green-900);
1530
+ --ctx-gradient-pressed: var(--color-default-green-900);
1531
1531
  --ctx-border-hover: var(--color-default-green-700);
1532
1532
  --ctx-border-pressed: var(--color-default-green-700);
1533
1533
  }
@@ -1552,16 +1552,16 @@
1552
1552
  @utility ctx-teal-bolder {
1553
1553
  --ctx-text: var(--color-default-teal-200);
1554
1554
  --ctx-text-bold: var(--color-default-teal-100);
1555
- --ctx-background: var(--color-default-teal-800);
1556
- --ctx-gradient: var(--color-default-teal-700);
1555
+ --ctx-background: var(--color-default-teal-700);
1556
+ --ctx-gradient: var(--color-default-teal-800);
1557
1557
  --ctx-border: var(--color-default-teal-700);
1558
1558
  --ctx-shadow: var(--color-neutral-alpha-500A);
1559
1559
  --ctx-text-hover: var(--color-default-teal-200);
1560
1560
  --ctx-text-pressed: var(--color-default-teal-200);
1561
- --ctx-background-hover: var(--color-default-teal-700);
1562
- --ctx-background-pressed: var(--color-default-teal-600);
1563
- --ctx-gradient-hover: var(--color-default-teal-600);
1564
- --ctx-gradient-pressed: var(--color-default-teal-600);
1561
+ --ctx-background-hover: var(--color-default-teal-800);
1562
+ --ctx-background-pressed: var(--color-default-teal-900);
1563
+ --ctx-gradient-hover: var(--color-default-teal-900);
1564
+ --ctx-gradient-pressed: var(--color-default-teal-900);
1565
1565
  --ctx-border-hover: var(--color-default-teal-700);
1566
1566
  --ctx-border-pressed: var(--color-default-teal-700);
1567
1567
  }
@@ -1569,16 +1569,16 @@
1569
1569
  @utility ctx-teal-subtle {
1570
1570
  --ctx-text: var(--color-default-teal-900);
1571
1571
  --ctx-text-bold: var(--color-default-teal-1000);
1572
- --ctx-background: var(--color-default-teal-300);
1573
- --ctx-gradient: var(--color-default-teal-400);
1572
+ --ctx-background: var(--color-default-teal-400);
1573
+ --ctx-gradient: var(--color-default-teal-300);
1574
1574
  --ctx-border: var(--color-default-teal-500);
1575
1575
  --ctx-shadow: var(--color-neutral-alpha-500A);
1576
1576
  --ctx-text-hover: var(--color-default-teal-900);
1577
1577
  --ctx-text-pressed: var(--color-default-teal-900);
1578
- --ctx-background-hover: var(--color-default-teal-400);
1579
- --ctx-background-pressed: var(--color-default-teal-500);
1580
- --ctx-gradient-hover: var(--color-default-teal-500);
1581
- --ctx-gradient-pressed: var(--color-default-teal-500);
1578
+ --ctx-background-hover: var(--color-default-teal-300);
1579
+ --ctx-background-pressed: var(--color-default-teal-200);
1580
+ --ctx-gradient-hover: var(--color-default-teal-200);
1581
+ --ctx-gradient-pressed: var(--color-default-teal-200);
1582
1582
  --ctx-border-hover: var(--color-default-teal-500);
1583
1583
  --ctx-border-pressed: var(--color-default-teal-500);
1584
1584
  }
@@ -1618,18 +1618,18 @@
1618
1618
  }
1619
1619
 
1620
1620
  @utility ctx-warning-bolder {
1621
- --ctx-text: var(--color-default-neutral-100);
1622
- --ctx-text-bold: var(--color-default-neutral-0);
1623
- --ctx-background: var(--color-default-yellow-800);
1624
- --ctx-gradient: var(--color-default-yellow-700);
1621
+ --ctx-text: var(--color-default-yellow-200);
1622
+ --ctx-text-bold: var(--color-default-yellow-100);
1623
+ --ctx-background: var(--color-default-yellow-700);
1624
+ --ctx-gradient: var(--color-default-yellow-800);
1625
1625
  --ctx-border: var(--color-default-yellow-700);
1626
1626
  --ctx-shadow: var(--color-neutral-alpha-500A);
1627
- --ctx-text-hover: var(--color-default-neutral-100);
1628
- --ctx-text-pressed: var(--color-default-neutral-100);
1629
- --ctx-background-hover: var(--color-default-yellow-700);
1630
- --ctx-background-pressed: var(--color-default-yellow-600);
1631
- --ctx-gradient-hover: var(--color-default-yellow-600);
1632
- --ctx-gradient-pressed: var(--color-default-yellow-600);
1627
+ --ctx-text-hover: var(--color-default-yellow-200);
1628
+ --ctx-text-pressed: var(--color-default-yellow-200);
1629
+ --ctx-background-hover: var(--color-default-yellow-800);
1630
+ --ctx-background-pressed: var(--color-default-yellow-900);
1631
+ --ctx-gradient-hover: var(--color-default-yellow-900);
1632
+ --ctx-gradient-pressed: var(--color-default-yellow-900);
1633
1633
  --ctx-border-hover: var(--color-default-yellow-700);
1634
1634
  --ctx-border-pressed: var(--color-default-yellow-700);
1635
1635
  }
@@ -1654,16 +1654,16 @@
1654
1654
  @utility ctx-yellow-bolder {
1655
1655
  --ctx-text: var(--color-default-yellow-200);
1656
1656
  --ctx-text-bold: var(--color-default-yellow-100);
1657
- --ctx-background: var(--color-default-yellow-800);
1658
- --ctx-gradient: var(--color-default-yellow-700);
1657
+ --ctx-background: var(--color-default-yellow-700);
1658
+ --ctx-gradient: var(--color-default-yellow-800);
1659
1659
  --ctx-border: var(--color-default-yellow-700);
1660
1660
  --ctx-shadow: var(--color-neutral-alpha-500A);
1661
1661
  --ctx-text-hover: var(--color-default-yellow-200);
1662
1662
  --ctx-text-pressed: var(--color-default-yellow-200);
1663
- --ctx-background-hover: var(--color-default-yellow-700);
1664
- --ctx-background-pressed: var(--color-default-yellow-600);
1665
- --ctx-gradient-hover: var(--color-default-yellow-600);
1666
- --ctx-gradient-pressed: var(--color-default-yellow-600);
1663
+ --ctx-background-hover: var(--color-default-yellow-800);
1664
+ --ctx-background-pressed: var(--color-default-yellow-900);
1665
+ --ctx-gradient-hover: var(--color-default-yellow-900);
1666
+ --ctx-gradient-pressed: var(--color-default-yellow-900);
1667
1667
  --ctx-border-hover: var(--color-default-yellow-700);
1668
1668
  --ctx-border-pressed: var(--color-default-yellow-700);
1669
1669
  }
@@ -1671,16 +1671,16 @@
1671
1671
  @utility ctx-yellow-subtle {
1672
1672
  --ctx-text: var(--color-default-yellow-900);
1673
1673
  --ctx-text-bold: var(--color-default-yellow-1000);
1674
- --ctx-background: var(--color-default-yellow-300);
1675
- --ctx-gradient: var(--color-default-yellow-400);
1674
+ --ctx-background: var(--color-default-yellow-400);
1675
+ --ctx-gradient: var(--color-default-yellow-300);
1676
1676
  --ctx-border: var(--color-default-yellow-500);
1677
1677
  --ctx-shadow: var(--color-neutral-alpha-500A);
1678
1678
  --ctx-text-hover: var(--color-default-yellow-900);
1679
1679
  --ctx-text-pressed: var(--color-default-yellow-900);
1680
- --ctx-background-hover: var(--color-default-yellow-400);
1681
- --ctx-background-pressed: var(--color-default-yellow-500);
1682
- --ctx-gradient-hover: var(--color-default-yellow-500);
1683
- --ctx-gradient-pressed: var(--color-default-yellow-500);
1680
+ --ctx-background-hover: var(--color-default-yellow-300);
1681
+ --ctx-background-pressed: var(--color-default-yellow-200);
1682
+ --ctx-gradient-hover: var(--color-default-yellow-200);
1683
+ --ctx-gradient-pressed: var(--color-default-yellow-200);
1684
1684
  --ctx-border-hover: var(--color-default-yellow-500);
1685
1685
  --ctx-border-pressed: var(--color-default-yellow-500);
1686
1686
  }
@@ -1838,12 +1838,30 @@
1838
1838
  flex-grow: 1;
1839
1839
  }
1840
1840
 
1841
- /** Primevue 's component is missing the gap between input and dropdown */
1842
- .p-autocomplete-overlay {
1843
- margin-top: var(--p-anchor-gutter);
1841
+ .p-autocomplete-chip.p-chip {
1842
+ padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
1843
+ padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
1844
+ border-radius: var(--p-autocomplete-chip-border-radius);
1844
1845
  }
1845
1846
 
1846
1847
 
1848
+ /**
1849
+ GUTTER FIX
1850
+ * Primevue's dropwdown components are all missing the gap between input and dropdown
1851
+ **/
1852
+ .p-autocomplete-overlay,
1853
+ .p-menu-overlay,
1854
+ .p-multiselect-overlay,
1855
+ .p-select-overlay,
1856
+ .p-treeselect-overlay {
1857
+ margin: var(--p-anchor-gutter) 0;
1858
+ }
1859
+
1860
+ /* This fix is to ensure overlay badge is contained within the size of the component it wraps */
1861
+ .p-overlaybadge {
1862
+ display: inline-block;
1863
+ }
1864
+
1847
1865
 
1848
1866
 
1849
1867
  /* === ./components/custom/styles.css === */
@@ -1902,7 +1920,7 @@
1902
1920
  }
1903
1921
 
1904
1922
  .bcc-badge.squared {
1905
- @apply rounded;
1923
+ @apply rounded-sm;
1906
1924
  }
1907
1925
  }
1908
1926
 
@@ -1981,11 +1999,11 @@
1981
1999
  }
1982
2000
 
1983
2001
  .bcc-knob-top-left {
1984
- @apply absolute top-0 left-0 p-2 text-left;
2002
+ @apply absolute top-0 left-0 text-left;
1985
2003
  }
1986
2004
 
1987
2005
  .bcc-knob-top-right {
1988
- @apply absolute top-0 right-0 p-2 text-right;
2006
+ @apply absolute top-0 right-0 text-right;
1989
2007
  }
1990
2008
  }
1991
2009
 
@@ -2121,7 +2139,7 @@
2121
2139
  /* from ./BccNpsScore/BccNpsScore.css */
2122
2140
  @layer components {
2123
2141
  .bcc-nps-score {
2124
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
2142
+ @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2125
2143
  }
2126
2144
 
2127
2145
  .bcc-nps-score--heading {
@@ -2142,7 +2160,7 @@
2142
2160
  }
2143
2161
 
2144
2162
  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2145
- @apply bg-ctx ctx-gray-subtler text-disabled;
2163
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2146
2164
  }
2147
2165
 
2148
2166
  .bcc-nps-score--number {
@@ -2152,7 +2170,7 @@
2152
2170
  }
2153
2171
 
2154
2172
  .bcc-nps-score--number:disabled {
2155
- @apply pointer-events-none cursor-default;
2173
+ @apply cursor-not-allowed;
2156
2174
  }
2157
2175
 
2158
2176
  .bcc-nps-score--number.active {
@@ -2165,7 +2183,7 @@
2165
2183
  }
2166
2184
 
2167
2185
  .bcc-nps-score--number.inactive {
2168
- @apply bg-ctx text-ctx ctx-gray-subtle;
2186
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2169
2187
  }
2170
2188
 
2171
2189
  .bcc-nps-score--number:first-child {
@@ -2269,55 +2287,6 @@
2269
2287
 
2270
2288
 
2271
2289
 
2272
- /* from ./BccStepper/BccStepper.css */
2273
- @layer components {
2274
- .bcc-stepper-container {
2275
- @apply flex flex-col;
2276
- }
2277
-
2278
- .bcc-stepper-header {
2279
- @apply mb-2 text-left;
2280
- }
2281
-
2282
- .bcc-stepper-current-step {
2283
- @apply text-heading-sm text-default;
2284
- }
2285
-
2286
- .bcc-stepper-current-label {
2287
- @apply text-body-sm pl-2 text-subtle;
2288
- }
2289
-
2290
- .bcc-stepper-indicators {
2291
- @apply flex justify-start gap-2;
2292
- }
2293
-
2294
- .bcc-stepper-indicator-container {
2295
- @apply flex flex-col items-center justify-center;
2296
- }
2297
-
2298
- .bcc-stepper-indicator {
2299
- @apply h-1.5 rounded-lg duration-300;
2300
- }
2301
-
2302
- .bcc-stepper-indicator-active {
2303
- @apply w-6;
2304
- }
2305
-
2306
- .bcc-stepper-indicator-inactive {
2307
- @apply w-1.5;
2308
- }
2309
-
2310
- .bcc-stepper-indicator-completed {
2311
- @apply bg-selected-bold-default;
2312
- }
2313
-
2314
- .bcc-stepper-indicator-pending {
2315
- @apply bg-alpha-subtle-default;
2316
- }
2317
- }
2318
-
2319
-
2320
-
2321
2290
  /* from ./BccTag/BccTag.css */
2322
2291
 
2323
2292
  @layer components {
@@ -2404,11 +2373,14 @@
2404
2373
  @apply text-5xl;
2405
2374
  }
2406
2375
 
2376
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
2377
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2378
+ transform: translate(40%, -40%);
2379
+ }
2407
2380
 
2408
2381
  .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2409
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
2410
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2411
- transform: translate(25%, -25%);
2382
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge {
2383
+ transform: translate(20%, -20%);
2412
2384
  }
2413
2385
  }
2414
2386
 
@@ -2453,17 +2425,19 @@
2453
2425
 
2454
2426
 
2455
2427
 
2456
- :host {
2457
- @apply font-sans antialiased p-0 m-0;
2458
- -webkit-font-smoothing: antialiased;
2459
- -moz-osx-font-smoothing: grayscale;
2428
+ :root, :host {
2429
+ --font-sans: 'Archivo', system-ui, sans-serif;
2430
+ @apply font-sans antialiased p-0 m-0;
2431
+ -webkit-font-smoothing: antialiased;
2432
+ -moz-osx-font-smoothing: grayscale;
2433
+
2460
2434
  }
2461
2435
 
2462
2436
  b,
2463
2437
  strong,
2464
2438
  .bold {
2465
- font-weight: bold;
2466
- --ctx-text: var(--ctx-text-bold);
2439
+ font-weight: bold;
2440
+ --ctx-text: var(--ctx-text-bold);
2467
2441
  }
2468
2442
 
2469
2443
  /* Disable state */