@bcc-code/component-library-vue 0.0.0-dev.8e45c14 → 0.0.0-dev.b7ec5fd

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 (15) hide show
  1. package/README.md +9 -0
  2. package/dist/component-library.js +26144 -26371
  3. package/dist/component-library.umd.cjs +3894 -4090
  4. package/dist/index.css +1 -1
  5. package/dist/theme.css +316 -286
  6. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +28 -0
  7. package/dist-types/components/custom/index.d.ts +2 -6
  8. package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +1 -0
  9. package/dist-types/components/wrapped/BccChip/BccChip.vue.d.ts +18 -0
  10. package/dist-types/components/{custom → wrapped}/BccTabs/BccTabs.vue.d.ts +1 -1
  11. package/dist-types/components/wrapped/index.d.ts +6 -0
  12. package/dist-types/index.d.ts +0 -2
  13. package/package.json +2 -3
  14. /package/dist-types/components/{custom → wrapped}/BccAvatar/BccAvatar.vue.d.ts +0 -0
  15. /package/dist-types/components/{custom → wrapped}/BccToggle/BccToggle.vue.d.ts +0 -0
package/dist/theme.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
2
2
  @layer theme, base, tailwind, primevue;
3
+ @import "@bcc-code/design-tokens/css";
3
4
 
4
5
  @import "tailwindcss";
5
6
  @import "@bcc-code/design-tokens/tailwind";
@@ -684,16 +685,16 @@
684
685
  @utility ctx-blue-bolder {
685
686
  --ctx-text: var(--color-default-blue-200);
686
687
  --ctx-text-bold: var(--color-default-blue-100);
687
- --ctx-background: var(--color-default-blue-800);
688
- --ctx-gradient: var(--color-default-blue-700);
688
+ --ctx-background: var(--color-default-blue-700);
689
+ --ctx-gradient: var(--color-default-blue-800);
689
690
  --ctx-border: var(--color-default-blue-700);
690
691
  --ctx-shadow: var(--color-neutral-alpha-500A);
691
692
  --ctx-text-hover: var(--color-default-blue-200);
692
693
  --ctx-text-pressed: var(--color-default-blue-200);
693
- --ctx-background-hover: var(--color-default-blue-700);
694
- --ctx-background-pressed: var(--color-default-blue-600);
695
- --ctx-gradient-hover: var(--color-default-blue-600);
696
- --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);
697
698
  --ctx-border-hover: var(--color-default-blue-700);
698
699
  --ctx-border-pressed: var(--color-default-blue-700);
699
700
  }
@@ -701,16 +702,16 @@
701
702
  @utility ctx-blue-subtle {
702
703
  --ctx-text: var(--color-default-blue-900);
703
704
  --ctx-text-bold: var(--color-default-blue-1000);
704
- --ctx-background: var(--color-default-blue-300);
705
- --ctx-gradient: var(--color-default-blue-400);
705
+ --ctx-background: var(--color-default-blue-400);
706
+ --ctx-gradient: var(--color-default-blue-300);
706
707
  --ctx-border: var(--color-default-blue-500);
707
708
  --ctx-shadow: var(--color-neutral-alpha-500A);
708
709
  --ctx-text-hover: var(--color-default-blue-900);
709
710
  --ctx-text-pressed: var(--color-default-blue-900);
710
- --ctx-background-hover: var(--color-default-blue-400);
711
- --ctx-background-pressed: var(--color-default-blue-500);
712
- --ctx-gradient-hover: var(--color-default-blue-500);
713
- --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);
714
715
  --ctx-border-hover: var(--color-default-blue-500);
715
716
  --ctx-border-pressed: var(--color-default-blue-500);
716
717
  }
@@ -752,16 +753,16 @@
752
753
  @utility ctx-brand-bold {
753
754
  --ctx-text: var(--color-default-bcc-200);
754
755
  --ctx-text-bold: var(--color-default-neutral-100);
755
- --ctx-background: var(--color-default-bcc-800);
756
+ --ctx-background: var(--color-default-bcc-600);
756
757
  --ctx-gradient: var(--color-default-bcc-700);
757
758
  --ctx-border: var(--color-default-bcc-600);
758
759
  --ctx-shadow: var(--color-neutral-alpha-500A);
759
760
  --ctx-text-hover: var(--color-default-bcc-200);
760
761
  --ctx-text-pressed: var(--color-default-bcc-200);
761
762
  --ctx-background-hover: var(--color-default-bcc-700);
762
- --ctx-background-pressed: var(--color-default-bcc-600);
763
- --ctx-gradient-hover: var(--color-default-bcc-600);
764
- --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);
765
766
  --ctx-border-hover: var(--color-default-bcc-600);
766
767
  --ctx-border-pressed: var(--color-default-bcc-600);
767
768
  }
@@ -769,16 +770,16 @@
769
770
  @utility ctx-brand-bolder {
770
771
  --ctx-text: var(--color-default-bcc-100);
771
772
  --ctx-text-bold: var(--color-default-neutral-0);
772
- --ctx-background: var(--color-default-bcc-900);
773
+ --ctx-background: var(--color-default-bcc-700);
773
774
  --ctx-gradient: var(--color-default-bcc-800);
774
775
  --ctx-border: var(--color-default-bcc-700);
775
776
  --ctx-shadow: var(--color-neutral-alpha-500A);
776
777
  --ctx-text-hover: var(--color-default-bcc-100);
777
778
  --ctx-text-pressed: var(--color-default-bcc-100);
778
779
  --ctx-background-hover: var(--color-default-bcc-800);
779
- --ctx-background-pressed: var(--color-default-bcc-700);
780
- --ctx-gradient-hover: var(--color-default-bcc-700);
781
- --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);
782
783
  --ctx-border-hover: var(--color-default-bcc-700);
783
784
  --ctx-border-pressed: var(--color-default-bcc-700);
784
785
  }
@@ -818,31 +819,31 @@
818
819
  }
819
820
 
820
821
  @utility ctx-brand-subtle {
821
- --ctx-text: var(--color-default-neutral-900);
822
- --ctx-text-bold: var(--color-default-bcc-1000);
823
- --ctx-background: var(--color-default-bcc-300);
824
- --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);
825
826
  --ctx-border: var(--color-default-bcc-500);
826
827
  --ctx-shadow: var(--color-neutral-alpha-500A);
827
- --ctx-text-hover: var(--color-default-neutral-900);
828
- --ctx-text-pressed: var(--color-default-neutral-900);
829
- --ctx-background-hover: var(--color-default-bcc-400);
830
- --ctx-background-pressed: var(--color-default-bcc-500);
831
- --ctx-gradient-hover: var(--color-default-bcc-500);
832
- --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);
833
834
  --ctx-border-hover: var(--color-default-bcc-500);
834
835
  --ctx-border-pressed: var(--color-default-bcc-500);
835
836
  }
836
837
 
837
838
  @utility ctx-brand-subtler {
838
- --ctx-text: var(--color-default-neutral-800);
839
- --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);
840
841
  --ctx-background: var(--color-default-bcc-200);
841
842
  --ctx-gradient: var(--color-default-bcc-300);
842
843
  --ctx-border: var(--color-default-bcc-400);
843
844
  --ctx-shadow: var(--color-neutral-alpha-500A);
844
- --ctx-text-hover: var(--color-default-neutral-800);
845
- --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);
846
847
  --ctx-background-hover: var(--color-default-bcc-300);
847
848
  --ctx-background-pressed: var(--color-default-bcc-400);
848
849
  --ctx-gradient-hover: var(--color-default-bcc-400);
@@ -852,14 +853,14 @@
852
853
  }
853
854
 
854
855
  @utility ctx-brand-subtlest {
855
- --ctx-text: var(--color-default-neutral-900);
856
- --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);
857
858
  --ctx-background: var(--color-default-bcc-100);
858
859
  --ctx-gradient: var(--color-default-bcc-200);
859
860
  --ctx-border: var(--color-default-bcc-300);
860
861
  --ctx-shadow: var(--color-neutral-alpha-500A);
861
- --ctx-text-hover: var(--color-default-neutral-900);
862
- --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);
863
864
  --ctx-background-hover: var(--color-default-bcc-200);
864
865
  --ctx-background-pressed: var(--color-default-bcc-300);
865
866
  --ctx-gradient-hover: var(--color-default-bcc-300);
@@ -871,16 +872,16 @@
871
872
  @utility ctx-brown-bolder {
872
873
  --ctx-text: var(--color-default-brown-200);
873
874
  --ctx-text-bold: var(--color-default-brown-100);
874
- --ctx-background: var(--color-default-brown-800);
875
- --ctx-gradient: var(--color-default-brown-700);
875
+ --ctx-background: var(--color-default-brown-700);
876
+ --ctx-gradient: var(--color-default-brown-800);
876
877
  --ctx-border: var(--color-default-brown-700);
877
878
  --ctx-shadow: var(--color-neutral-alpha-500A);
878
879
  --ctx-text-hover: var(--color-default-brown-200);
879
880
  --ctx-text-pressed: var(--color-default-brown-200);
880
- --ctx-background-hover: var(--color-default-brown-700);
881
- --ctx-background-pressed: var(--color-default-brown-600);
882
- --ctx-gradient-hover: var(--color-default-brown-600);
883
- --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);
884
885
  --ctx-border-hover: var(--color-default-brown-700);
885
886
  --ctx-border-pressed: var(--color-default-brown-700);
886
887
  }
@@ -888,16 +889,16 @@
888
889
  @utility ctx-brown-subtle {
889
890
  --ctx-text: var(--color-default-brown-900);
890
891
  --ctx-text-bold: var(--color-default-brown-1000);
891
- --ctx-background: var(--color-default-brown-300);
892
- --ctx-gradient: var(--color-default-brown-400);
892
+ --ctx-background: var(--color-default-brown-400);
893
+ --ctx-gradient: var(--color-default-brown-300);
893
894
  --ctx-border: var(--color-default-brown-500);
894
895
  --ctx-shadow: var(--color-neutral-alpha-500A);
895
896
  --ctx-text-hover: var(--color-default-brown-900);
896
897
  --ctx-text-pressed: var(--color-default-brown-900);
897
- --ctx-background-hover: var(--color-default-brown-400);
898
- --ctx-background-pressed: var(--color-default-brown-500);
899
- --ctx-gradient-hover: var(--color-default-brown-500);
900
- --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);
901
902
  --ctx-border-hover: var(--color-default-brown-500);
902
903
  --ctx-border-pressed: var(--color-default-brown-500);
903
904
  }
@@ -937,18 +938,18 @@
937
938
  }
938
939
 
939
940
  @utility ctx-danger-bolder {
940
- --ctx-text: var(--color-default-neutral-100);
941
- --ctx-text-bold: var(--color-default-neutral-0);
942
- --ctx-background: var(--color-default-red-800);
943
- --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);
944
945
  --ctx-border: var(--color-default-red-700);
945
946
  --ctx-shadow: var(--color-neutral-alpha-500A);
946
- --ctx-text-hover: var(--color-default-neutral-100);
947
- --ctx-text-pressed: var(--color-default-neutral-100);
948
- --ctx-background-hover: var(--color-default-red-700);
949
- --ctx-background-pressed: var(--color-default-red-600);
950
- --ctx-gradient-hover: var(--color-default-red-600);
951
- --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);
952
953
  --ctx-border-hover: var(--color-default-red-700);
953
954
  --ctx-border-pressed: var(--color-default-red-700);
954
955
  }
@@ -990,16 +991,16 @@
990
991
  @utility ctx-gray-subtle {
991
992
  --ctx-text: var(--color-default-neutral-900);
992
993
  --ctx-text-bold: var(--color-default-neutral-1000);
993
- --ctx-background: var(--color-default-neutral-300);
994
- --ctx-gradient: var(--color-default-neutral-400);
994
+ --ctx-background: var(--color-default-neutral-400);
995
+ --ctx-gradient: var(--color-default-neutral-300);
995
996
  --ctx-border: var(--color-default-neutral-500);
996
997
  --ctx-shadow: var(--color-neutral-alpha-500A);
997
998
  --ctx-text-hover: var(--color-default-neutral-900);
998
999
  --ctx-text-pressed: var(--color-default-neutral-900);
999
- --ctx-background-hover: var(--color-default-neutral-400);
1000
- --ctx-background-pressed: var(--color-default-neutral-500);
1001
- --ctx-gradient-hover: var(--color-default-neutral-500);
1002
- --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);
1003
1004
  --ctx-border-hover: var(--color-default-neutral-500);
1004
1005
  --ctx-border-pressed: var(--color-default-neutral-500);
1005
1006
  }
@@ -1041,16 +1042,16 @@
1041
1042
  @utility ctx-green-bolder {
1042
1043
  --ctx-text: var(--color-default-green-200);
1043
1044
  --ctx-text-bold: var(--color-default-green-100);
1044
- --ctx-background: var(--color-default-green-800);
1045
- --ctx-gradient: var(--color-default-green-700);
1045
+ --ctx-background: var(--color-default-green-700);
1046
+ --ctx-gradient: var(--color-default-green-800);
1046
1047
  --ctx-border: var(--color-default-green-700);
1047
1048
  --ctx-shadow: var(--color-neutral-alpha-500A);
1048
1049
  --ctx-text-hover: var(--color-default-green-200);
1049
1050
  --ctx-text-pressed: var(--color-default-green-200);
1050
- --ctx-background-hover: var(--color-default-green-700);
1051
- --ctx-background-pressed: var(--color-default-green-600);
1052
- --ctx-gradient-hover: var(--color-default-green-600);
1053
- --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);
1054
1055
  --ctx-border-hover: var(--color-default-green-700);
1055
1056
  --ctx-border-pressed: var(--color-default-green-700);
1056
1057
  }
@@ -1058,16 +1059,16 @@
1058
1059
  @utility ctx-green-subtle {
1059
1060
  --ctx-text: var(--color-default-green-900);
1060
1061
  --ctx-text-bold: var(--color-default-green-1000);
1061
- --ctx-background: var(--color-default-green-300);
1062
- --ctx-gradient: var(--color-default-green-400);
1062
+ --ctx-background: var(--color-default-green-400);
1063
+ --ctx-gradient: var(--color-default-green-300);
1063
1064
  --ctx-border: var(--color-default-green-500);
1064
1065
  --ctx-shadow: var(--color-neutral-alpha-500A);
1065
1066
  --ctx-text-hover: var(--color-default-green-900);
1066
1067
  --ctx-text-pressed: var(--color-default-green-900);
1067
- --ctx-background-hover: var(--color-default-green-400);
1068
- --ctx-background-pressed: var(--color-default-green-500);
1069
- --ctx-gradient-hover: var(--color-default-green-500);
1070
- --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);
1071
1072
  --ctx-border-hover: var(--color-default-green-500);
1072
1073
  --ctx-border-pressed: var(--color-default-green-500);
1073
1074
  }
@@ -1107,18 +1108,18 @@
1107
1108
  }
1108
1109
 
1109
1110
  @utility ctx-info-bolder {
1110
- --ctx-text: var(--color-default-neutral-100);
1111
- --ctx-text-bold: var(--color-default-neutral-0);
1112
- --ctx-background: var(--color-default-blue-800);
1113
- --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);
1114
1115
  --ctx-border: var(--color-default-blue-700);
1115
1116
  --ctx-shadow: var(--color-neutral-alpha-500A);
1116
- --ctx-text-hover: var(--color-default-neutral-100);
1117
- --ctx-text-pressed: var(--color-default-neutral-100);
1118
- --ctx-background-hover: var(--color-default-blue-700);
1119
- --ctx-background-pressed: var(--color-default-blue-600);
1120
- --ctx-gradient-hover: var(--color-default-blue-600);
1121
- --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);
1122
1123
  --ctx-border-hover: var(--color-default-blue-700);
1123
1124
  --ctx-border-pressed: var(--color-default-blue-700);
1124
1125
  }
@@ -1143,16 +1144,16 @@
1143
1144
  @utility ctx-magenta-bolder {
1144
1145
  --ctx-text: var(--color-default-magenta-200);
1145
1146
  --ctx-text-bold: var(--color-default-magenta-100);
1146
- --ctx-background: var(--color-default-magenta-800);
1147
- --ctx-gradient: var(--color-default-magenta-700);
1147
+ --ctx-background: var(--color-default-magenta-700);
1148
+ --ctx-gradient: var(--color-default-magenta-800);
1148
1149
  --ctx-border: var(--color-default-magenta-700);
1149
1150
  --ctx-shadow: var(--color-neutral-alpha-500A);
1150
1151
  --ctx-text-hover: var(--color-default-magenta-200);
1151
1152
  --ctx-text-pressed: var(--color-default-magenta-200);
1152
- --ctx-background-hover: var(--color-default-magenta-700);
1153
- --ctx-background-pressed: var(--color-default-magenta-600);
1154
- --ctx-gradient-hover: var(--color-default-magenta-600);
1155
- --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);
1156
1157
  --ctx-border-hover: var(--color-default-magenta-700);
1157
1158
  --ctx-border-pressed: var(--color-default-magenta-700);
1158
1159
  }
@@ -1160,16 +1161,16 @@
1160
1161
  @utility ctx-magenta-subtle {
1161
1162
  --ctx-text: var(--color-default-magenta-900);
1162
1163
  --ctx-text-bold: var(--color-default-magenta-1000);
1163
- --ctx-background: var(--color-default-magenta-300);
1164
- --ctx-gradient: var(--color-default-magenta-400);
1164
+ --ctx-background: var(--color-default-magenta-400);
1165
+ --ctx-gradient: var(--color-default-magenta-300);
1165
1166
  --ctx-border: var(--color-default-magenta-500);
1166
1167
  --ctx-shadow: var(--color-neutral-alpha-500A);
1167
1168
  --ctx-text-hover: var(--color-default-magenta-900);
1168
1169
  --ctx-text-pressed: var(--color-default-magenta-900);
1169
- --ctx-background-hover: var(--color-default-magenta-400);
1170
- --ctx-background-pressed: var(--color-default-magenta-500);
1171
- --ctx-gradient-hover: var(--color-default-magenta-500);
1172
- --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);
1173
1174
  --ctx-border-hover: var(--color-default-magenta-500);
1174
1175
  --ctx-border-pressed: var(--color-default-magenta-500);
1175
1176
  }
@@ -1313,16 +1314,16 @@
1313
1314
  @utility ctx-orange-bolder {
1314
1315
  --ctx-text: var(--color-default-orange-200);
1315
1316
  --ctx-text-bold: var(--color-default-orange-100);
1316
- --ctx-background: var(--color-default-orange-800);
1317
- --ctx-gradient: var(--color-default-orange-700);
1317
+ --ctx-background: var(--color-default-orange-700);
1318
+ --ctx-gradient: var(--color-default-orange-800);
1318
1319
  --ctx-border: var(--color-default-orange-700);
1319
1320
  --ctx-shadow: var(--color-neutral-alpha-500A);
1320
1321
  --ctx-text-hover: var(--color-default-orange-200);
1321
1322
  --ctx-text-pressed: var(--color-default-orange-200);
1322
- --ctx-background-hover: var(--color-default-orange-700);
1323
- --ctx-background-pressed: var(--color-default-orange-600);
1324
- --ctx-gradient-hover: var(--color-default-orange-600);
1325
- --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);
1326
1327
  --ctx-border-hover: var(--color-default-orange-700);
1327
1328
  --ctx-border-pressed: var(--color-default-orange-700);
1328
1329
  }
@@ -1330,16 +1331,16 @@
1330
1331
  @utility ctx-orange-subtle {
1331
1332
  --ctx-text: var(--color-default-orange-900);
1332
1333
  --ctx-text-bold: var(--color-default-orange-1000);
1333
- --ctx-background: var(--color-default-orange-300);
1334
- --ctx-gradient: var(--color-default-orange-400);
1334
+ --ctx-background: var(--color-default-orange-400);
1335
+ --ctx-gradient: var(--color-default-orange-300);
1335
1336
  --ctx-border: var(--color-default-orange-500);
1336
1337
  --ctx-shadow: var(--color-neutral-alpha-500A);
1337
1338
  --ctx-text-hover: var(--color-default-orange-900);
1338
1339
  --ctx-text-pressed: var(--color-default-orange-900);
1339
- --ctx-background-hover: var(--color-default-orange-400);
1340
- --ctx-background-pressed: var(--color-default-orange-500);
1341
- --ctx-gradient-hover: var(--color-default-orange-500);
1342
- --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);
1343
1344
  --ctx-border-hover: var(--color-default-orange-500);
1344
1345
  --ctx-border-pressed: var(--color-default-orange-500);
1345
1346
  }
@@ -1381,16 +1382,16 @@
1381
1382
  @utility ctx-purple-bolder {
1382
1383
  --ctx-text: var(--color-default-purple-200);
1383
1384
  --ctx-text-bold: var(--color-default-purple-100);
1384
- --ctx-background: var(--color-default-purple-800);
1385
- --ctx-gradient: var(--color-default-purple-700);
1385
+ --ctx-background: var(--color-default-purple-700);
1386
+ --ctx-gradient: var(--color-default-purple-800);
1386
1387
  --ctx-border: var(--color-default-purple-700);
1387
1388
  --ctx-shadow: var(--color-neutral-alpha-500A);
1388
1389
  --ctx-text-hover: var(--color-default-purple-200);
1389
1390
  --ctx-text-pressed: var(--color-default-purple-200);
1390
- --ctx-background-hover: var(--color-default-purple-700);
1391
- --ctx-background-pressed: var(--color-default-purple-600);
1392
- --ctx-gradient-hover: var(--color-default-purple-600);
1393
- --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);
1394
1395
  --ctx-border-hover: var(--color-default-purple-700);
1395
1396
  --ctx-border-pressed: var(--color-default-purple-700);
1396
1397
  }
@@ -1398,16 +1399,16 @@
1398
1399
  @utility ctx-purple-subtle {
1399
1400
  --ctx-text: var(--color-default-purple-900);
1400
1401
  --ctx-text-bold: var(--color-default-purple-1000);
1401
- --ctx-background: var(--color-default-purple-300);
1402
- --ctx-gradient: var(--color-default-purple-400);
1402
+ --ctx-background: var(--color-default-purple-400);
1403
+ --ctx-gradient: var(--color-default-purple-300);
1403
1404
  --ctx-border: var(--color-default-purple-500);
1404
1405
  --ctx-shadow: var(--color-neutral-alpha-500A);
1405
1406
  --ctx-text-hover: var(--color-default-purple-900);
1406
1407
  --ctx-text-pressed: var(--color-default-purple-900);
1407
- --ctx-background-hover: var(--color-default-purple-400);
1408
- --ctx-background-pressed: var(--color-default-purple-500);
1409
- --ctx-gradient-hover: var(--color-default-purple-500);
1410
- --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);
1411
1412
  --ctx-border-hover: var(--color-default-purple-500);
1412
1413
  --ctx-border-pressed: var(--color-default-purple-500);
1413
1414
  }
@@ -1449,16 +1450,16 @@
1449
1450
  @utility ctx-red-bolder {
1450
1451
  --ctx-text: var(--color-default-red-200);
1451
1452
  --ctx-text-bold: var(--color-default-red-100);
1452
- --ctx-background: var(--color-default-red-800);
1453
- --ctx-gradient: var(--color-default-red-700);
1453
+ --ctx-background: var(--color-default-red-700);
1454
+ --ctx-gradient: var(--color-default-red-800);
1454
1455
  --ctx-border: var(--color-default-red-700);
1455
1456
  --ctx-shadow: var(--color-neutral-alpha-500A);
1456
1457
  --ctx-text-hover: var(--color-default-red-200);
1457
1458
  --ctx-text-pressed: var(--color-default-red-200);
1458
- --ctx-background-hover: var(--color-default-red-700);
1459
- --ctx-background-pressed: var(--color-default-red-600);
1460
- --ctx-gradient-hover: var(--color-default-red-600);
1461
- --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);
1462
1463
  --ctx-border-hover: var(--color-default-red-700);
1463
1464
  --ctx-border-pressed: var(--color-default-red-700);
1464
1465
  }
@@ -1466,16 +1467,16 @@
1466
1467
  @utility ctx-red-subtle {
1467
1468
  --ctx-text: var(--color-default-red-900);
1468
1469
  --ctx-text-bold: var(--color-default-red-1000);
1469
- --ctx-background: var(--color-default-red-300);
1470
- --ctx-gradient: var(--color-default-red-400);
1470
+ --ctx-background: var(--color-default-red-400);
1471
+ --ctx-gradient: var(--color-default-red-300);
1471
1472
  --ctx-border: var(--color-default-red-500);
1472
1473
  --ctx-shadow: var(--color-neutral-alpha-500A);
1473
1474
  --ctx-text-hover: var(--color-default-red-900);
1474
1475
  --ctx-text-pressed: var(--color-default-red-900);
1475
- --ctx-background-hover: var(--color-default-red-400);
1476
- --ctx-background-pressed: var(--color-default-red-500);
1477
- --ctx-gradient-hover: var(--color-default-red-500);
1478
- --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);
1479
1480
  --ctx-border-hover: var(--color-default-red-500);
1480
1481
  --ctx-border-pressed: var(--color-default-red-500);
1481
1482
  }
@@ -1515,18 +1516,18 @@
1515
1516
  }
1516
1517
 
1517
1518
  @utility ctx-success-bolder {
1518
- --ctx-text: var(--color-default-neutral-100);
1519
- --ctx-text-bold: var(--color-default-neutral-0);
1520
- --ctx-background: var(--color-default-green-800);
1521
- --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);
1522
1523
  --ctx-border: var(--color-default-green-700);
1523
1524
  --ctx-shadow: var(--color-neutral-alpha-500A);
1524
- --ctx-text-hover: var(--color-default-neutral-100);
1525
- --ctx-text-pressed: var(--color-default-neutral-100);
1526
- --ctx-background-hover: var(--color-default-green-700);
1527
- --ctx-background-pressed: var(--color-default-green-600);
1528
- --ctx-gradient-hover: var(--color-default-green-600);
1529
- --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);
1530
1531
  --ctx-border-hover: var(--color-default-green-700);
1531
1532
  --ctx-border-pressed: var(--color-default-green-700);
1532
1533
  }
@@ -1551,16 +1552,16 @@
1551
1552
  @utility ctx-teal-bolder {
1552
1553
  --ctx-text: var(--color-default-teal-200);
1553
1554
  --ctx-text-bold: var(--color-default-teal-100);
1554
- --ctx-background: var(--color-default-teal-800);
1555
- --ctx-gradient: var(--color-default-teal-700);
1555
+ --ctx-background: var(--color-default-teal-700);
1556
+ --ctx-gradient: var(--color-default-teal-800);
1556
1557
  --ctx-border: var(--color-default-teal-700);
1557
1558
  --ctx-shadow: var(--color-neutral-alpha-500A);
1558
1559
  --ctx-text-hover: var(--color-default-teal-200);
1559
1560
  --ctx-text-pressed: var(--color-default-teal-200);
1560
- --ctx-background-hover: var(--color-default-teal-700);
1561
- --ctx-background-pressed: var(--color-default-teal-600);
1562
- --ctx-gradient-hover: var(--color-default-teal-600);
1563
- --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);
1564
1565
  --ctx-border-hover: var(--color-default-teal-700);
1565
1566
  --ctx-border-pressed: var(--color-default-teal-700);
1566
1567
  }
@@ -1568,16 +1569,16 @@
1568
1569
  @utility ctx-teal-subtle {
1569
1570
  --ctx-text: var(--color-default-teal-900);
1570
1571
  --ctx-text-bold: var(--color-default-teal-1000);
1571
- --ctx-background: var(--color-default-teal-300);
1572
- --ctx-gradient: var(--color-default-teal-400);
1572
+ --ctx-background: var(--color-default-teal-400);
1573
+ --ctx-gradient: var(--color-default-teal-300);
1573
1574
  --ctx-border: var(--color-default-teal-500);
1574
1575
  --ctx-shadow: var(--color-neutral-alpha-500A);
1575
1576
  --ctx-text-hover: var(--color-default-teal-900);
1576
1577
  --ctx-text-pressed: var(--color-default-teal-900);
1577
- --ctx-background-hover: var(--color-default-teal-400);
1578
- --ctx-background-pressed: var(--color-default-teal-500);
1579
- --ctx-gradient-hover: var(--color-default-teal-500);
1580
- --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);
1581
1582
  --ctx-border-hover: var(--color-default-teal-500);
1582
1583
  --ctx-border-pressed: var(--color-default-teal-500);
1583
1584
  }
@@ -1617,18 +1618,18 @@
1617
1618
  }
1618
1619
 
1619
1620
  @utility ctx-warning-bolder {
1620
- --ctx-text: var(--color-default-neutral-100);
1621
- --ctx-text-bold: var(--color-default-neutral-0);
1622
- --ctx-background: var(--color-default-yellow-800);
1623
- --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);
1624
1625
  --ctx-border: var(--color-default-yellow-700);
1625
1626
  --ctx-shadow: var(--color-neutral-alpha-500A);
1626
- --ctx-text-hover: var(--color-default-neutral-100);
1627
- --ctx-text-pressed: var(--color-default-neutral-100);
1628
- --ctx-background-hover: var(--color-default-yellow-700);
1629
- --ctx-background-pressed: var(--color-default-yellow-600);
1630
- --ctx-gradient-hover: var(--color-default-yellow-600);
1631
- --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);
1632
1633
  --ctx-border-hover: var(--color-default-yellow-700);
1633
1634
  --ctx-border-pressed: var(--color-default-yellow-700);
1634
1635
  }
@@ -1653,16 +1654,16 @@
1653
1654
  @utility ctx-yellow-bolder {
1654
1655
  --ctx-text: var(--color-default-yellow-200);
1655
1656
  --ctx-text-bold: var(--color-default-yellow-100);
1656
- --ctx-background: var(--color-default-yellow-800);
1657
- --ctx-gradient: var(--color-default-yellow-700);
1657
+ --ctx-background: var(--color-default-yellow-700);
1658
+ --ctx-gradient: var(--color-default-yellow-800);
1658
1659
  --ctx-border: var(--color-default-yellow-700);
1659
1660
  --ctx-shadow: var(--color-neutral-alpha-500A);
1660
1661
  --ctx-text-hover: var(--color-default-yellow-200);
1661
1662
  --ctx-text-pressed: var(--color-default-yellow-200);
1662
- --ctx-background-hover: var(--color-default-yellow-700);
1663
- --ctx-background-pressed: var(--color-default-yellow-600);
1664
- --ctx-gradient-hover: var(--color-default-yellow-600);
1665
- --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);
1666
1667
  --ctx-border-hover: var(--color-default-yellow-700);
1667
1668
  --ctx-border-pressed: var(--color-default-yellow-700);
1668
1669
  }
@@ -1670,16 +1671,16 @@
1670
1671
  @utility ctx-yellow-subtle {
1671
1672
  --ctx-text: var(--color-default-yellow-900);
1672
1673
  --ctx-text-bold: var(--color-default-yellow-1000);
1673
- --ctx-background: var(--color-default-yellow-300);
1674
- --ctx-gradient: var(--color-default-yellow-400);
1674
+ --ctx-background: var(--color-default-yellow-400);
1675
+ --ctx-gradient: var(--color-default-yellow-300);
1675
1676
  --ctx-border: var(--color-default-yellow-500);
1676
1677
  --ctx-shadow: var(--color-neutral-alpha-500A);
1677
1678
  --ctx-text-hover: var(--color-default-yellow-900);
1678
1679
  --ctx-text-pressed: var(--color-default-yellow-900);
1679
- --ctx-background-hover: var(--color-default-yellow-400);
1680
- --ctx-background-pressed: var(--color-default-yellow-500);
1681
- --ctx-gradient-hover: var(--color-default-yellow-500);
1682
- --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);
1683
1684
  --ctx-border-hover: var(--color-default-yellow-500);
1684
1685
  --ctx-border-pressed: var(--color-default-yellow-500);
1685
1686
  }
@@ -1771,7 +1772,7 @@
1771
1772
  }
1772
1773
 
1773
1774
  @utility ctx-gradient {
1774
- background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
1775
+ background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
1775
1776
  }
1776
1777
 
1777
1778
  @utility ctx-raised {
@@ -1820,86 +1821,39 @@
1820
1821
 
1821
1822
 
1822
1823
  /* === ./styles/component-overrides.css === */
1824
+ /** Custom styles to fix primevue components that are not custom or wrapped. */
1825
+
1826
+ /**
1827
+ .BccAutocomplete
1828
+ **/
1829
+
1830
+ /** Our icons are a bit smaller that Primevue's default */
1823
1831
  .p-autocomplete .p-icon {
1824
- --p-icon-size: 20px;
1825
- --p-form-field-sm-font-size: 20px;
1826
- --p-form-field-lg-font-size: 24px;
1832
+ --p-icon-size: var(--icon-size-sm);
1833
+ --p-form-field-sm-font-size: var(--icon-size-sm);
1834
+ --p-form-field-lg-font-size: var(--icon-size-md);
1827
1835
  }
1828
1836
 
1837
+ .p-autocomplete-clearable .p-inputtext {
1838
+ flex-grow: 1;
1839
+ }
1829
1840
 
1830
1841
 
1831
- /* === ./components/custom/styles.css === */
1832
-
1833
- /* from ./BccAvatar/BccAvatar.css */
1834
- @layer components {
1835
- .bcc-avatar {
1836
- --p-avatar-background: var(--ctx-background);
1837
- --p-avatar-color: var(--ctx-text);
1838
- --bcc-avatar-border: var(--ctx-border);
1839
- @apply overflow-hidden shrink-0 ctx-gray-subtler;
1840
- }
1841
- .bcc-avatar.male,
1842
- .bcc-avatar.M {
1843
- @apply ctx-blue-subtler;
1844
- }
1845
- .bcc-avatar.female,
1846
- .bcc-avatar.F {
1847
- @apply ctx-purple-subtler;
1848
- }
1849
- .bcc-avatar.male.child,
1850
- .bcc-avatar.M.child {
1851
- @apply ctx-teal-subtler;
1852
- }
1853
- .bcc-avatar.female.child,
1854
- .bcc-avatar.F.child {
1855
- @apply ctx-magenta-subtler;
1856
- }
1857
- .bcc-avatar.bordered {
1858
- @apply border-2 border-ctx;
1859
- }
1860
- .bcc-avatar.xs {
1861
- @apply size-5 text-xs;
1862
- }
1863
- .bcc-avatar.sm {
1864
- @apply size-6 text-sm;
1865
- }
1866
- .bcc-avatar.md {
1867
- @apply size-8 text-base;
1868
- }
1869
- .bcc-avatar.lg {
1870
- @apply size-10 text-lg;
1871
- }
1872
- .bcc-avatar.xl {
1873
- @apply size-12 text-xl;
1874
- }
1875
- .bcc-avatar.xxl {
1876
- @apply size-20 text-3xl;
1877
- }
1878
- .bcc-avatar.xxxl {
1879
- @apply size-24 text-4xl;
1880
- }
1881
-
1882
- .bcc-avatar.squared.lg {
1883
- @apply text-xl;
1884
- }
1885
- .bcc-avatar.squared.xl {
1886
- @apply text-2xl;
1887
- }
1888
- .bcc-avatar.squared.xxl {
1889
- @apply text-4xl;
1890
- }
1891
- .bcc-avatar.squared.xxxl {
1892
- @apply text-5xl;
1893
- }
1842
+ /**
1843
+ GUTTER FIX
1844
+ * Primevue's dropwdown components are all missing the gap between input and dropdown
1845
+ **/
1846
+ .p-autocomplete-overlay,
1847
+ .p-menu-overlay,
1848
+ .p-multiselect-overlay,
1849
+ .p-select-overlay,
1850
+ .p-treeselect-overlay {
1851
+ margin: var(--p-anchor-gutter) 0;
1852
+ }
1894
1853
 
1895
1854
 
1896
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
1897
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
1898
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
1899
- transform: translate(25%, -25%);
1900
- }
1901
- }
1902
1855
 
1856
+ /* === ./components/custom/styles.css === */
1903
1857
 
1904
1858
  /* from ./BccBadge/BccBadge.css */
1905
1859
  @layer components {
@@ -2034,11 +1988,11 @@
2034
1988
  }
2035
1989
 
2036
1990
  .bcc-knob-top-left {
2037
- @apply absolute top-0 left-0 p-2 text-left;
1991
+ @apply absolute top-0 left-0 text-left;
2038
1992
  }
2039
1993
 
2040
1994
  .bcc-knob-top-right {
2041
- @apply absolute top-0 right-0 p-2 text-right;
1995
+ @apply absolute top-0 right-0 text-right;
2042
1996
  }
2043
1997
  }
2044
1998
 
@@ -2174,7 +2128,7 @@
2174
2128
  /* from ./BccNpsScore/BccNpsScore.css */
2175
2129
  @layer components {
2176
2130
  .bcc-nps-score {
2177
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
2131
+ @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2178
2132
  }
2179
2133
 
2180
2134
  .bcc-nps-score--heading {
@@ -2195,7 +2149,7 @@
2195
2149
  }
2196
2150
 
2197
2151
  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2198
- @apply bg-ctx ctx-gray-subtler text-disabled;
2152
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2199
2153
  }
2200
2154
 
2201
2155
  .bcc-nps-score--number {
@@ -2205,7 +2159,7 @@
2205
2159
  }
2206
2160
 
2207
2161
  .bcc-nps-score--number:disabled {
2208
- @apply pointer-events-none cursor-default;
2162
+ @apply cursor-not-allowed;
2209
2163
  }
2210
2164
 
2211
2165
  .bcc-nps-score--number.active {
@@ -2218,7 +2172,7 @@
2218
2172
  }
2219
2173
 
2220
2174
  .bcc-nps-score--number.inactive {
2221
- @apply bg-ctx text-ctx ctx-gray-subtle;
2175
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2222
2176
  }
2223
2177
 
2224
2178
  .bcc-nps-score--number:first-child {
@@ -2322,6 +2276,101 @@
2322
2276
 
2323
2277
 
2324
2278
 
2279
+ /* from ./BccTag/BccTag.css */
2280
+
2281
+ @layer components {
2282
+ .bcc-tag.bcc-badge {
2283
+ @apply w-auto;
2284
+ }
2285
+ .bcc-tag.bcc-badge.md {
2286
+ @apply font-regular h-6;
2287
+ }
2288
+ .bcc-tag.bcc-badge.sm {
2289
+ @apply font-regular h-5;
2290
+ }
2291
+ .bcc-tag.bcc-badge.lg {
2292
+ @apply font-regular h-8;
2293
+ }
2294
+ .bcc-tag.bcc-badge.xl {
2295
+ @apply font-regular h-10;
2296
+ }
2297
+ }
2298
+
2299
+
2300
+
2301
+ /* === ./components/wrapped/styles.css === */
2302
+
2303
+ /* from ./BccAvatar/BccAvatar.css */
2304
+ @layer components {
2305
+ .bcc-avatar {
2306
+ --p-avatar-background: var(--ctx-background);
2307
+ --p-avatar-color: var(--ctx-text);
2308
+ --bcc-avatar-border: var(--ctx-border);
2309
+ @apply overflow-hidden shrink-0 ctx-gray-subtler;
2310
+ }
2311
+ .bcc-avatar.male,
2312
+ .bcc-avatar.M {
2313
+ @apply ctx-blue-subtler;
2314
+ }
2315
+ .bcc-avatar.female,
2316
+ .bcc-avatar.F {
2317
+ @apply ctx-purple-subtler;
2318
+ }
2319
+ .bcc-avatar.male.child,
2320
+ .bcc-avatar.M.child {
2321
+ @apply ctx-teal-subtler;
2322
+ }
2323
+ .bcc-avatar.female.child,
2324
+ .bcc-avatar.F.child {
2325
+ @apply ctx-magenta-subtler;
2326
+ }
2327
+ .bcc-avatar.bordered {
2328
+ @apply border-2 border-ctx;
2329
+ }
2330
+ .bcc-avatar.xs {
2331
+ @apply size-5 text-xs;
2332
+ }
2333
+ .bcc-avatar.sm {
2334
+ @apply size-6 text-sm;
2335
+ }
2336
+ .bcc-avatar.md {
2337
+ @apply size-8 text-base;
2338
+ }
2339
+ .bcc-avatar.lg {
2340
+ @apply size-10 text-lg;
2341
+ }
2342
+ .bcc-avatar.xl {
2343
+ @apply size-12 text-xl;
2344
+ }
2345
+ .bcc-avatar.xxl {
2346
+ @apply size-20 text-3xl;
2347
+ }
2348
+ .bcc-avatar.xxxl {
2349
+ @apply size-24 text-4xl;
2350
+ }
2351
+
2352
+ .bcc-avatar.squared.lg {
2353
+ @apply text-xl;
2354
+ }
2355
+ .bcc-avatar.squared.xl {
2356
+ @apply text-2xl;
2357
+ }
2358
+ .bcc-avatar.squared.xxl {
2359
+ @apply text-4xl;
2360
+ }
2361
+ .bcc-avatar.squared.xxxl {
2362
+ @apply text-5xl;
2363
+ }
2364
+
2365
+
2366
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2367
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
2368
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2369
+ transform: translate(25%, -25%);
2370
+ }
2371
+ }
2372
+
2373
+
2325
2374
  /* from ./BccTabs/BccTabs.css */
2326
2375
  @layer components {
2327
2376
  .bcc-tabs-fill.p-tabs {
@@ -2343,27 +2392,6 @@
2343
2392
  }
2344
2393
 
2345
2394
 
2346
- /* from ./BccTag/BccTag.css */
2347
-
2348
- @layer components {
2349
- .bcc-tag.bcc-badge {
2350
- @apply w-auto;
2351
- }
2352
- .bcc-tag.bcc-badge.md {
2353
- @apply text-md font-regular h-6;
2354
- }
2355
- .bcc-tag.bcc-badge.sm {
2356
- @apply text-sm font-regular h-5;
2357
- }
2358
- .bcc-tag.bcc-badge.lg {
2359
- @apply text-lg font-regular h-8;
2360
- }
2361
- .bcc-tag.bcc-badge.xl {
2362
- @apply text-xl font-regular h-10;
2363
- }
2364
- }
2365
-
2366
-
2367
2395
  /* from ./BccToggle/BccToggle.css */
2368
2396
  @layer components {
2369
2397
  .p-toggleswitch.useCtx {
@@ -2383,17 +2411,19 @@
2383
2411
 
2384
2412
 
2385
2413
 
2386
- :host {
2387
- @apply font-sans antialiased p-0 m-0;
2388
- -webkit-font-smoothing: antialiased;
2389
- -moz-osx-font-smoothing: grayscale;
2414
+ :root, :host {
2415
+ --font-sans: 'Archivo', system-ui, sans-serif;
2416
+ @apply font-sans antialiased p-0 m-0;
2417
+ -webkit-font-smoothing: antialiased;
2418
+ -moz-osx-font-smoothing: grayscale;
2419
+
2390
2420
  }
2391
2421
 
2392
2422
  b,
2393
2423
  strong,
2394
2424
  .bold {
2395
- font-weight: bold;
2396
- --ctx-text: var(--ctx-text-bold);
2425
+ font-weight: bold;
2426
+ --ctx-text: var(--ctx-text-bold);
2397
2427
  }
2398
2428
 
2399
2429
  /* Disable state */