@bcc-code/component-library-vue 0.0.0-dev.b82d660 → 0.0.0-dev.ed4fb0b

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 (17) hide show
  1. package/README.md +9 -0
  2. package/dist/component-library.js +32258 -32463
  3. package/dist/component-library.umd.cjs +3926 -3939
  4. package/dist/index.css +1 -1
  5. package/dist/theme.css +369 -310
  6. package/dist-types/components/custom/BccNpsResult/BccNpsResult.vue.d.ts +2 -2
  7. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +28 -0
  8. package/dist-types/components/custom/index.d.ts +2 -6
  9. package/dist-types/components/{custom → wrapped}/BccAvatar/BccAvatar.vue.d.ts +1 -1
  10. package/dist-types/components/wrapped/BccButton.vue.d.ts +1 -0
  11. package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +1 -0
  12. package/dist-types/components/wrapped/BccChip/BccChip.vue.d.ts +18 -0
  13. package/dist-types/components/{custom → wrapped}/BccTabs/BccTabs.vue.d.ts +1 -1
  14. package/dist-types/components/wrapped/index.d.ts +8 -0
  15. package/dist-types/index.d.ts +13 -4
  16. package/package.json +4 -3
  17. /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";
@@ -648,7 +649,8 @@
648
649
 
649
650
  /* Capitalize first letter */
650
651
  @utility capital {
651
- display: inline-block;
652
+ @apply inline-block;
653
+
652
654
  &::first-letter {
653
655
  text-transform: uppercase;
654
656
  }
@@ -684,16 +686,16 @@
684
686
  @utility ctx-blue-bolder {
685
687
  --ctx-text: var(--color-default-blue-200);
686
688
  --ctx-text-bold: var(--color-default-blue-100);
687
- --ctx-background: var(--color-default-blue-800);
688
- --ctx-gradient: var(--color-default-blue-700);
689
+ --ctx-background: var(--color-default-blue-700);
690
+ --ctx-gradient: var(--color-default-blue-800);
689
691
  --ctx-border: var(--color-default-blue-700);
690
692
  --ctx-shadow: var(--color-neutral-alpha-500A);
691
693
  --ctx-text-hover: var(--color-default-blue-200);
692
694
  --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);
695
+ --ctx-background-hover: var(--color-default-blue-800);
696
+ --ctx-background-pressed: var(--color-default-blue-900);
697
+ --ctx-gradient-hover: var(--color-default-blue-900);
698
+ --ctx-gradient-pressed: var(--color-default-blue-900);
697
699
  --ctx-border-hover: var(--color-default-blue-700);
698
700
  --ctx-border-pressed: var(--color-default-blue-700);
699
701
  }
@@ -701,16 +703,16 @@
701
703
  @utility ctx-blue-subtle {
702
704
  --ctx-text: var(--color-default-blue-900);
703
705
  --ctx-text-bold: var(--color-default-blue-1000);
704
- --ctx-background: var(--color-default-blue-300);
705
- --ctx-gradient: var(--color-default-blue-400);
706
+ --ctx-background: var(--color-default-blue-400);
707
+ --ctx-gradient: var(--color-default-blue-300);
706
708
  --ctx-border: var(--color-default-blue-500);
707
709
  --ctx-shadow: var(--color-neutral-alpha-500A);
708
710
  --ctx-text-hover: var(--color-default-blue-900);
709
711
  --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);
712
+ --ctx-background-hover: var(--color-default-blue-300);
713
+ --ctx-background-pressed: var(--color-default-blue-200);
714
+ --ctx-gradient-hover: var(--color-default-blue-200);
715
+ --ctx-gradient-pressed: var(--color-default-blue-200);
714
716
  --ctx-border-hover: var(--color-default-blue-500);
715
717
  --ctx-border-pressed: var(--color-default-blue-500);
716
718
  }
@@ -752,16 +754,16 @@
752
754
  @utility ctx-brand-bold {
753
755
  --ctx-text: var(--color-default-bcc-200);
754
756
  --ctx-text-bold: var(--color-default-neutral-100);
755
- --ctx-background: var(--color-default-bcc-800);
757
+ --ctx-background: var(--color-default-bcc-600);
756
758
  --ctx-gradient: var(--color-default-bcc-700);
757
759
  --ctx-border: var(--color-default-bcc-600);
758
760
  --ctx-shadow: var(--color-neutral-alpha-500A);
759
761
  --ctx-text-hover: var(--color-default-bcc-200);
760
762
  --ctx-text-pressed: var(--color-default-bcc-200);
761
763
  --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);
764
+ --ctx-background-pressed: var(--color-default-bcc-800);
765
+ --ctx-gradient-hover: var(--color-default-bcc-800);
766
+ --ctx-gradient-pressed: var(--color-default-bcc-800);
765
767
  --ctx-border-hover: var(--color-default-bcc-600);
766
768
  --ctx-border-pressed: var(--color-default-bcc-600);
767
769
  }
@@ -769,16 +771,16 @@
769
771
  @utility ctx-brand-bolder {
770
772
  --ctx-text: var(--color-default-bcc-100);
771
773
  --ctx-text-bold: var(--color-default-neutral-0);
772
- --ctx-background: var(--color-default-bcc-900);
774
+ --ctx-background: var(--color-default-bcc-700);
773
775
  --ctx-gradient: var(--color-default-bcc-800);
774
776
  --ctx-border: var(--color-default-bcc-700);
775
777
  --ctx-shadow: var(--color-neutral-alpha-500A);
776
778
  --ctx-text-hover: var(--color-default-bcc-100);
777
779
  --ctx-text-pressed: var(--color-default-bcc-100);
778
780
  --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);
781
+ --ctx-background-pressed: var(--color-default-bcc-900);
782
+ --ctx-gradient-hover: var(--color-default-bcc-900);
783
+ --ctx-gradient-pressed: var(--color-default-bcc-900);
782
784
  --ctx-border-hover: var(--color-default-bcc-700);
783
785
  --ctx-border-pressed: var(--color-default-bcc-700);
784
786
  }
@@ -818,31 +820,31 @@
818
820
  }
819
821
 
820
822
  @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);
823
+ --ctx-text: var(--color-default-bcc-1000);
824
+ --ctx-text-bold: var(--color-default-bcc-900);
825
+ --ctx-background: var(--color-default-bcc-400);
826
+ --ctx-gradient: var(--color-default-bcc-300);
825
827
  --ctx-border: var(--color-default-bcc-500);
826
828
  --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);
829
+ --ctx-text-hover: var(--color-default-bcc-1000);
830
+ --ctx-text-pressed: var(--color-default-bcc-1000);
831
+ --ctx-background-hover: var(--color-default-bcc-300);
832
+ --ctx-background-pressed: var(--color-default-bcc-200);
833
+ --ctx-gradient-hover: var(--color-default-bcc-200);
834
+ --ctx-gradient-pressed: var(--color-default-bcc-200);
833
835
  --ctx-border-hover: var(--color-default-bcc-500);
834
836
  --ctx-border-pressed: var(--color-default-bcc-500);
835
837
  }
836
838
 
837
839
  @utility ctx-brand-subtler {
838
- --ctx-text: var(--color-default-neutral-800);
839
- --ctx-text-bold: var(--color-default-bcc-900);
840
+ --ctx-text: var(--color-default-bcc-900);
841
+ --ctx-text-bold: var(--color-default-bcc-800);
840
842
  --ctx-background: var(--color-default-bcc-200);
841
843
  --ctx-gradient: var(--color-default-bcc-300);
842
844
  --ctx-border: var(--color-default-bcc-400);
843
845
  --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);
846
+ --ctx-text-hover: var(--color-default-bcc-900);
847
+ --ctx-text-pressed: var(--color-default-bcc-900);
846
848
  --ctx-background-hover: var(--color-default-bcc-300);
847
849
  --ctx-background-pressed: var(--color-default-bcc-400);
848
850
  --ctx-gradient-hover: var(--color-default-bcc-400);
@@ -852,14 +854,14 @@
852
854
  }
853
855
 
854
856
  @utility ctx-brand-subtlest {
855
- --ctx-text: var(--color-default-neutral-900);
856
- --ctx-text-bold: var(--color-default-bcc-1000);
857
+ --ctx-text: var(--color-default-bcc-800);
858
+ --ctx-text-bold: var(--color-default-bcc-700);
857
859
  --ctx-background: var(--color-default-bcc-100);
858
860
  --ctx-gradient: var(--color-default-bcc-200);
859
861
  --ctx-border: var(--color-default-bcc-300);
860
862
  --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);
863
+ --ctx-text-hover: var(--color-default-bcc-800);
864
+ --ctx-text-pressed: var(--color-default-bcc-800);
863
865
  --ctx-background-hover: var(--color-default-bcc-200);
864
866
  --ctx-background-pressed: var(--color-default-bcc-300);
865
867
  --ctx-gradient-hover: var(--color-default-bcc-300);
@@ -871,16 +873,16 @@
871
873
  @utility ctx-brown-bolder {
872
874
  --ctx-text: var(--color-default-brown-200);
873
875
  --ctx-text-bold: var(--color-default-brown-100);
874
- --ctx-background: var(--color-default-brown-800);
875
- --ctx-gradient: var(--color-default-brown-700);
876
+ --ctx-background: var(--color-default-brown-700);
877
+ --ctx-gradient: var(--color-default-brown-800);
876
878
  --ctx-border: var(--color-default-brown-700);
877
879
  --ctx-shadow: var(--color-neutral-alpha-500A);
878
880
  --ctx-text-hover: var(--color-default-brown-200);
879
881
  --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);
882
+ --ctx-background-hover: var(--color-default-brown-800);
883
+ --ctx-background-pressed: var(--color-default-brown-900);
884
+ --ctx-gradient-hover: var(--color-default-brown-900);
885
+ --ctx-gradient-pressed: var(--color-default-brown-900);
884
886
  --ctx-border-hover: var(--color-default-brown-700);
885
887
  --ctx-border-pressed: var(--color-default-brown-700);
886
888
  }
@@ -888,16 +890,16 @@
888
890
  @utility ctx-brown-subtle {
889
891
  --ctx-text: var(--color-default-brown-900);
890
892
  --ctx-text-bold: var(--color-default-brown-1000);
891
- --ctx-background: var(--color-default-brown-300);
892
- --ctx-gradient: var(--color-default-brown-400);
893
+ --ctx-background: var(--color-default-brown-400);
894
+ --ctx-gradient: var(--color-default-brown-300);
893
895
  --ctx-border: var(--color-default-brown-500);
894
896
  --ctx-shadow: var(--color-neutral-alpha-500A);
895
897
  --ctx-text-hover: var(--color-default-brown-900);
896
898
  --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);
899
+ --ctx-background-hover: var(--color-default-brown-300);
900
+ --ctx-background-pressed: var(--color-default-brown-200);
901
+ --ctx-gradient-hover: var(--color-default-brown-200);
902
+ --ctx-gradient-pressed: var(--color-default-brown-200);
901
903
  --ctx-border-hover: var(--color-default-brown-500);
902
904
  --ctx-border-pressed: var(--color-default-brown-500);
903
905
  }
@@ -937,18 +939,18 @@
937
939
  }
938
940
 
939
941
  @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);
942
+ --ctx-text: var(--color-default-red-200);
943
+ --ctx-text-bold: var(--color-default-red-100);
944
+ --ctx-background: var(--color-default-red-700);
945
+ --ctx-gradient: var(--color-default-red-800);
944
946
  --ctx-border: var(--color-default-red-700);
945
947
  --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);
948
+ --ctx-text-hover: var(--color-default-red-200);
949
+ --ctx-text-pressed: var(--color-default-red-200);
950
+ --ctx-background-hover: var(--color-default-red-800);
951
+ --ctx-background-pressed: var(--color-default-red-900);
952
+ --ctx-gradient-hover: var(--color-default-red-900);
953
+ --ctx-gradient-pressed: var(--color-default-red-900);
952
954
  --ctx-border-hover: var(--color-default-red-700);
953
955
  --ctx-border-pressed: var(--color-default-red-700);
954
956
  }
@@ -990,16 +992,16 @@
990
992
  @utility ctx-gray-subtle {
991
993
  --ctx-text: var(--color-default-neutral-900);
992
994
  --ctx-text-bold: var(--color-default-neutral-1000);
993
- --ctx-background: var(--color-default-neutral-300);
994
- --ctx-gradient: var(--color-default-neutral-400);
995
+ --ctx-background: var(--color-default-neutral-400);
996
+ --ctx-gradient: var(--color-default-neutral-300);
995
997
  --ctx-border: var(--color-default-neutral-500);
996
998
  --ctx-shadow: var(--color-neutral-alpha-500A);
997
999
  --ctx-text-hover: var(--color-default-neutral-900);
998
1000
  --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);
1001
+ --ctx-background-hover: var(--color-default-neutral-300);
1002
+ --ctx-background-pressed: var(--color-default-neutral-200);
1003
+ --ctx-gradient-hover: var(--color-default-neutral-200);
1004
+ --ctx-gradient-pressed: var(--color-default-neutral-200);
1003
1005
  --ctx-border-hover: var(--color-default-neutral-500);
1004
1006
  --ctx-border-pressed: var(--color-default-neutral-500);
1005
1007
  }
@@ -1041,16 +1043,16 @@
1041
1043
  @utility ctx-green-bolder {
1042
1044
  --ctx-text: var(--color-default-green-200);
1043
1045
  --ctx-text-bold: var(--color-default-green-100);
1044
- --ctx-background: var(--color-default-green-800);
1045
- --ctx-gradient: var(--color-default-green-700);
1046
+ --ctx-background: var(--color-default-green-700);
1047
+ --ctx-gradient: var(--color-default-green-800);
1046
1048
  --ctx-border: var(--color-default-green-700);
1047
1049
  --ctx-shadow: var(--color-neutral-alpha-500A);
1048
1050
  --ctx-text-hover: var(--color-default-green-200);
1049
1051
  --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);
1052
+ --ctx-background-hover: var(--color-default-green-800);
1053
+ --ctx-background-pressed: var(--color-default-green-900);
1054
+ --ctx-gradient-hover: var(--color-default-green-900);
1055
+ --ctx-gradient-pressed: var(--color-default-green-900);
1054
1056
  --ctx-border-hover: var(--color-default-green-700);
1055
1057
  --ctx-border-pressed: var(--color-default-green-700);
1056
1058
  }
@@ -1058,16 +1060,16 @@
1058
1060
  @utility ctx-green-subtle {
1059
1061
  --ctx-text: var(--color-default-green-900);
1060
1062
  --ctx-text-bold: var(--color-default-green-1000);
1061
- --ctx-background: var(--color-default-green-300);
1062
- --ctx-gradient: var(--color-default-green-400);
1063
+ --ctx-background: var(--color-default-green-400);
1064
+ --ctx-gradient: var(--color-default-green-300);
1063
1065
  --ctx-border: var(--color-default-green-500);
1064
1066
  --ctx-shadow: var(--color-neutral-alpha-500A);
1065
1067
  --ctx-text-hover: var(--color-default-green-900);
1066
1068
  --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);
1069
+ --ctx-background-hover: var(--color-default-green-300);
1070
+ --ctx-background-pressed: var(--color-default-green-200);
1071
+ --ctx-gradient-hover: var(--color-default-green-200);
1072
+ --ctx-gradient-pressed: var(--color-default-green-200);
1071
1073
  --ctx-border-hover: var(--color-default-green-500);
1072
1074
  --ctx-border-pressed: var(--color-default-green-500);
1073
1075
  }
@@ -1107,18 +1109,18 @@
1107
1109
  }
1108
1110
 
1109
1111
  @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);
1112
+ --ctx-text: var(--color-default-blue-200);
1113
+ --ctx-text-bold: var(--color-default-blue-100);
1114
+ --ctx-background: var(--color-default-blue-700);
1115
+ --ctx-gradient: var(--color-default-blue-800);
1114
1116
  --ctx-border: var(--color-default-blue-700);
1115
1117
  --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);
1118
+ --ctx-text-hover: var(--color-default-blue-200);
1119
+ --ctx-text-pressed: var(--color-default-blue-200);
1120
+ --ctx-background-hover: var(--color-default-blue-800);
1121
+ --ctx-background-pressed: var(--color-default-blue-900);
1122
+ --ctx-gradient-hover: var(--color-default-blue-900);
1123
+ --ctx-gradient-pressed: var(--color-default-blue-900);
1122
1124
  --ctx-border-hover: var(--color-default-blue-700);
1123
1125
  --ctx-border-pressed: var(--color-default-blue-700);
1124
1126
  }
@@ -1143,16 +1145,16 @@
1143
1145
  @utility ctx-magenta-bolder {
1144
1146
  --ctx-text: var(--color-default-magenta-200);
1145
1147
  --ctx-text-bold: var(--color-default-magenta-100);
1146
- --ctx-background: var(--color-default-magenta-800);
1147
- --ctx-gradient: var(--color-default-magenta-700);
1148
+ --ctx-background: var(--color-default-magenta-700);
1149
+ --ctx-gradient: var(--color-default-magenta-800);
1148
1150
  --ctx-border: var(--color-default-magenta-700);
1149
1151
  --ctx-shadow: var(--color-neutral-alpha-500A);
1150
1152
  --ctx-text-hover: var(--color-default-magenta-200);
1151
1153
  --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);
1154
+ --ctx-background-hover: var(--color-default-magenta-800);
1155
+ --ctx-background-pressed: var(--color-default-magenta-900);
1156
+ --ctx-gradient-hover: var(--color-default-magenta-900);
1157
+ --ctx-gradient-pressed: var(--color-default-magenta-900);
1156
1158
  --ctx-border-hover: var(--color-default-magenta-700);
1157
1159
  --ctx-border-pressed: var(--color-default-magenta-700);
1158
1160
  }
@@ -1160,16 +1162,16 @@
1160
1162
  @utility ctx-magenta-subtle {
1161
1163
  --ctx-text: var(--color-default-magenta-900);
1162
1164
  --ctx-text-bold: var(--color-default-magenta-1000);
1163
- --ctx-background: var(--color-default-magenta-300);
1164
- --ctx-gradient: var(--color-default-magenta-400);
1165
+ --ctx-background: var(--color-default-magenta-400);
1166
+ --ctx-gradient: var(--color-default-magenta-300);
1165
1167
  --ctx-border: var(--color-default-magenta-500);
1166
1168
  --ctx-shadow: var(--color-neutral-alpha-500A);
1167
1169
  --ctx-text-hover: var(--color-default-magenta-900);
1168
1170
  --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);
1171
+ --ctx-background-hover: var(--color-default-magenta-300);
1172
+ --ctx-background-pressed: var(--color-default-magenta-200);
1173
+ --ctx-gradient-hover: var(--color-default-magenta-200);
1174
+ --ctx-gradient-pressed: var(--color-default-magenta-200);
1173
1175
  --ctx-border-hover: var(--color-default-magenta-500);
1174
1176
  --ctx-border-pressed: var(--color-default-magenta-500);
1175
1177
  }
@@ -1313,16 +1315,16 @@
1313
1315
  @utility ctx-orange-bolder {
1314
1316
  --ctx-text: var(--color-default-orange-200);
1315
1317
  --ctx-text-bold: var(--color-default-orange-100);
1316
- --ctx-background: var(--color-default-orange-800);
1317
- --ctx-gradient: var(--color-default-orange-700);
1318
+ --ctx-background: var(--color-default-orange-700);
1319
+ --ctx-gradient: var(--color-default-orange-800);
1318
1320
  --ctx-border: var(--color-default-orange-700);
1319
1321
  --ctx-shadow: var(--color-neutral-alpha-500A);
1320
1322
  --ctx-text-hover: var(--color-default-orange-200);
1321
1323
  --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);
1324
+ --ctx-background-hover: var(--color-default-orange-800);
1325
+ --ctx-background-pressed: var(--color-default-orange-900);
1326
+ --ctx-gradient-hover: var(--color-default-orange-900);
1327
+ --ctx-gradient-pressed: var(--color-default-orange-900);
1326
1328
  --ctx-border-hover: var(--color-default-orange-700);
1327
1329
  --ctx-border-pressed: var(--color-default-orange-700);
1328
1330
  }
@@ -1330,16 +1332,16 @@
1330
1332
  @utility ctx-orange-subtle {
1331
1333
  --ctx-text: var(--color-default-orange-900);
1332
1334
  --ctx-text-bold: var(--color-default-orange-1000);
1333
- --ctx-background: var(--color-default-orange-300);
1334
- --ctx-gradient: var(--color-default-orange-400);
1335
+ --ctx-background: var(--color-default-orange-400);
1336
+ --ctx-gradient: var(--color-default-orange-300);
1335
1337
  --ctx-border: var(--color-default-orange-500);
1336
1338
  --ctx-shadow: var(--color-neutral-alpha-500A);
1337
1339
  --ctx-text-hover: var(--color-default-orange-900);
1338
1340
  --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);
1341
+ --ctx-background-hover: var(--color-default-orange-300);
1342
+ --ctx-background-pressed: var(--color-default-orange-200);
1343
+ --ctx-gradient-hover: var(--color-default-orange-200);
1344
+ --ctx-gradient-pressed: var(--color-default-orange-200);
1343
1345
  --ctx-border-hover: var(--color-default-orange-500);
1344
1346
  --ctx-border-pressed: var(--color-default-orange-500);
1345
1347
  }
@@ -1381,16 +1383,16 @@
1381
1383
  @utility ctx-purple-bolder {
1382
1384
  --ctx-text: var(--color-default-purple-200);
1383
1385
  --ctx-text-bold: var(--color-default-purple-100);
1384
- --ctx-background: var(--color-default-purple-800);
1385
- --ctx-gradient: var(--color-default-purple-700);
1386
+ --ctx-background: var(--color-default-purple-700);
1387
+ --ctx-gradient: var(--color-default-purple-800);
1386
1388
  --ctx-border: var(--color-default-purple-700);
1387
1389
  --ctx-shadow: var(--color-neutral-alpha-500A);
1388
1390
  --ctx-text-hover: var(--color-default-purple-200);
1389
1391
  --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);
1392
+ --ctx-background-hover: var(--color-default-purple-800);
1393
+ --ctx-background-pressed: var(--color-default-purple-900);
1394
+ --ctx-gradient-hover: var(--color-default-purple-900);
1395
+ --ctx-gradient-pressed: var(--color-default-purple-900);
1394
1396
  --ctx-border-hover: var(--color-default-purple-700);
1395
1397
  --ctx-border-pressed: var(--color-default-purple-700);
1396
1398
  }
@@ -1398,16 +1400,16 @@
1398
1400
  @utility ctx-purple-subtle {
1399
1401
  --ctx-text: var(--color-default-purple-900);
1400
1402
  --ctx-text-bold: var(--color-default-purple-1000);
1401
- --ctx-background: var(--color-default-purple-300);
1402
- --ctx-gradient: var(--color-default-purple-400);
1403
+ --ctx-background: var(--color-default-purple-400);
1404
+ --ctx-gradient: var(--color-default-purple-300);
1403
1405
  --ctx-border: var(--color-default-purple-500);
1404
1406
  --ctx-shadow: var(--color-neutral-alpha-500A);
1405
1407
  --ctx-text-hover: var(--color-default-purple-900);
1406
1408
  --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);
1409
+ --ctx-background-hover: var(--color-default-purple-300);
1410
+ --ctx-background-pressed: var(--color-default-purple-200);
1411
+ --ctx-gradient-hover: var(--color-default-purple-200);
1412
+ --ctx-gradient-pressed: var(--color-default-purple-200);
1411
1413
  --ctx-border-hover: var(--color-default-purple-500);
1412
1414
  --ctx-border-pressed: var(--color-default-purple-500);
1413
1415
  }
@@ -1449,16 +1451,16 @@
1449
1451
  @utility ctx-red-bolder {
1450
1452
  --ctx-text: var(--color-default-red-200);
1451
1453
  --ctx-text-bold: var(--color-default-red-100);
1452
- --ctx-background: var(--color-default-red-800);
1453
- --ctx-gradient: var(--color-default-red-700);
1454
+ --ctx-background: var(--color-default-red-700);
1455
+ --ctx-gradient: var(--color-default-red-800);
1454
1456
  --ctx-border: var(--color-default-red-700);
1455
1457
  --ctx-shadow: var(--color-neutral-alpha-500A);
1456
1458
  --ctx-text-hover: var(--color-default-red-200);
1457
1459
  --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);
1460
+ --ctx-background-hover: var(--color-default-red-800);
1461
+ --ctx-background-pressed: var(--color-default-red-900);
1462
+ --ctx-gradient-hover: var(--color-default-red-900);
1463
+ --ctx-gradient-pressed: var(--color-default-red-900);
1462
1464
  --ctx-border-hover: var(--color-default-red-700);
1463
1465
  --ctx-border-pressed: var(--color-default-red-700);
1464
1466
  }
@@ -1466,16 +1468,16 @@
1466
1468
  @utility ctx-red-subtle {
1467
1469
  --ctx-text: var(--color-default-red-900);
1468
1470
  --ctx-text-bold: var(--color-default-red-1000);
1469
- --ctx-background: var(--color-default-red-300);
1470
- --ctx-gradient: var(--color-default-red-400);
1471
+ --ctx-background: var(--color-default-red-400);
1472
+ --ctx-gradient: var(--color-default-red-300);
1471
1473
  --ctx-border: var(--color-default-red-500);
1472
1474
  --ctx-shadow: var(--color-neutral-alpha-500A);
1473
1475
  --ctx-text-hover: var(--color-default-red-900);
1474
1476
  --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);
1477
+ --ctx-background-hover: var(--color-default-red-300);
1478
+ --ctx-background-pressed: var(--color-default-red-200);
1479
+ --ctx-gradient-hover: var(--color-default-red-200);
1480
+ --ctx-gradient-pressed: var(--color-default-red-200);
1479
1481
  --ctx-border-hover: var(--color-default-red-500);
1480
1482
  --ctx-border-pressed: var(--color-default-red-500);
1481
1483
  }
@@ -1515,18 +1517,18 @@
1515
1517
  }
1516
1518
 
1517
1519
  @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);
1520
+ --ctx-text: var(--color-default-green-200);
1521
+ --ctx-text-bold: var(--color-default-green-100);
1522
+ --ctx-background: var(--color-default-green-700);
1523
+ --ctx-gradient: var(--color-default-green-800);
1522
1524
  --ctx-border: var(--color-default-green-700);
1523
1525
  --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);
1526
+ --ctx-text-hover: var(--color-default-green-200);
1527
+ --ctx-text-pressed: var(--color-default-green-200);
1528
+ --ctx-background-hover: var(--color-default-green-800);
1529
+ --ctx-background-pressed: var(--color-default-green-900);
1530
+ --ctx-gradient-hover: var(--color-default-green-900);
1531
+ --ctx-gradient-pressed: var(--color-default-green-900);
1530
1532
  --ctx-border-hover: var(--color-default-green-700);
1531
1533
  --ctx-border-pressed: var(--color-default-green-700);
1532
1534
  }
@@ -1551,16 +1553,16 @@
1551
1553
  @utility ctx-teal-bolder {
1552
1554
  --ctx-text: var(--color-default-teal-200);
1553
1555
  --ctx-text-bold: var(--color-default-teal-100);
1554
- --ctx-background: var(--color-default-teal-800);
1555
- --ctx-gradient: var(--color-default-teal-700);
1556
+ --ctx-background: var(--color-default-teal-700);
1557
+ --ctx-gradient: var(--color-default-teal-800);
1556
1558
  --ctx-border: var(--color-default-teal-700);
1557
1559
  --ctx-shadow: var(--color-neutral-alpha-500A);
1558
1560
  --ctx-text-hover: var(--color-default-teal-200);
1559
1561
  --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);
1562
+ --ctx-background-hover: var(--color-default-teal-800);
1563
+ --ctx-background-pressed: var(--color-default-teal-900);
1564
+ --ctx-gradient-hover: var(--color-default-teal-900);
1565
+ --ctx-gradient-pressed: var(--color-default-teal-900);
1564
1566
  --ctx-border-hover: var(--color-default-teal-700);
1565
1567
  --ctx-border-pressed: var(--color-default-teal-700);
1566
1568
  }
@@ -1568,16 +1570,16 @@
1568
1570
  @utility ctx-teal-subtle {
1569
1571
  --ctx-text: var(--color-default-teal-900);
1570
1572
  --ctx-text-bold: var(--color-default-teal-1000);
1571
- --ctx-background: var(--color-default-teal-300);
1572
- --ctx-gradient: var(--color-default-teal-400);
1573
+ --ctx-background: var(--color-default-teal-400);
1574
+ --ctx-gradient: var(--color-default-teal-300);
1573
1575
  --ctx-border: var(--color-default-teal-500);
1574
1576
  --ctx-shadow: var(--color-neutral-alpha-500A);
1575
1577
  --ctx-text-hover: var(--color-default-teal-900);
1576
1578
  --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);
1579
+ --ctx-background-hover: var(--color-default-teal-300);
1580
+ --ctx-background-pressed: var(--color-default-teal-200);
1581
+ --ctx-gradient-hover: var(--color-default-teal-200);
1582
+ --ctx-gradient-pressed: var(--color-default-teal-200);
1581
1583
  --ctx-border-hover: var(--color-default-teal-500);
1582
1584
  --ctx-border-pressed: var(--color-default-teal-500);
1583
1585
  }
@@ -1617,18 +1619,18 @@
1617
1619
  }
1618
1620
 
1619
1621
  @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);
1622
+ --ctx-text: var(--color-default-yellow-200);
1623
+ --ctx-text-bold: var(--color-default-yellow-100);
1624
+ --ctx-background: var(--color-default-yellow-700);
1625
+ --ctx-gradient: var(--color-default-yellow-800);
1624
1626
  --ctx-border: var(--color-default-yellow-700);
1625
1627
  --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);
1628
+ --ctx-text-hover: var(--color-default-yellow-200);
1629
+ --ctx-text-pressed: var(--color-default-yellow-200);
1630
+ --ctx-background-hover: var(--color-default-yellow-800);
1631
+ --ctx-background-pressed: var(--color-default-yellow-900);
1632
+ --ctx-gradient-hover: var(--color-default-yellow-900);
1633
+ --ctx-gradient-pressed: var(--color-default-yellow-900);
1632
1634
  --ctx-border-hover: var(--color-default-yellow-700);
1633
1635
  --ctx-border-pressed: var(--color-default-yellow-700);
1634
1636
  }
@@ -1653,16 +1655,16 @@
1653
1655
  @utility ctx-yellow-bolder {
1654
1656
  --ctx-text: var(--color-default-yellow-200);
1655
1657
  --ctx-text-bold: var(--color-default-yellow-100);
1656
- --ctx-background: var(--color-default-yellow-800);
1657
- --ctx-gradient: var(--color-default-yellow-700);
1658
+ --ctx-background: var(--color-default-yellow-700);
1659
+ --ctx-gradient: var(--color-default-yellow-800);
1658
1660
  --ctx-border: var(--color-default-yellow-700);
1659
1661
  --ctx-shadow: var(--color-neutral-alpha-500A);
1660
1662
  --ctx-text-hover: var(--color-default-yellow-200);
1661
1663
  --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);
1664
+ --ctx-background-hover: var(--color-default-yellow-800);
1665
+ --ctx-background-pressed: var(--color-default-yellow-900);
1666
+ --ctx-gradient-hover: var(--color-default-yellow-900);
1667
+ --ctx-gradient-pressed: var(--color-default-yellow-900);
1666
1668
  --ctx-border-hover: var(--color-default-yellow-700);
1667
1669
  --ctx-border-pressed: var(--color-default-yellow-700);
1668
1670
  }
@@ -1670,16 +1672,16 @@
1670
1672
  @utility ctx-yellow-subtle {
1671
1673
  --ctx-text: var(--color-default-yellow-900);
1672
1674
  --ctx-text-bold: var(--color-default-yellow-1000);
1673
- --ctx-background: var(--color-default-yellow-300);
1674
- --ctx-gradient: var(--color-default-yellow-400);
1675
+ --ctx-background: var(--color-default-yellow-400);
1676
+ --ctx-gradient: var(--color-default-yellow-300);
1675
1677
  --ctx-border: var(--color-default-yellow-500);
1676
1678
  --ctx-shadow: var(--color-neutral-alpha-500A);
1677
1679
  --ctx-text-hover: var(--color-default-yellow-900);
1678
1680
  --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);
1681
+ --ctx-background-hover: var(--color-default-yellow-300);
1682
+ --ctx-background-pressed: var(--color-default-yellow-200);
1683
+ --ctx-gradient-hover: var(--color-default-yellow-200);
1684
+ --ctx-gradient-pressed: var(--color-default-yellow-200);
1683
1685
  --ctx-border-hover: var(--color-default-yellow-500);
1684
1686
  --ctx-border-pressed: var(--color-default-yellow-500);
1685
1687
  }
@@ -1771,7 +1773,7 @@
1771
1773
  }
1772
1774
 
1773
1775
  @utility ctx-gradient {
1774
- background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
1776
+ background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
1775
1777
  }
1776
1778
 
1777
1779
  @utility ctx-raised {
@@ -1820,86 +1822,50 @@
1820
1822
 
1821
1823
 
1822
1824
  /* === ./styles/component-overrides.css === */
1825
+ /** Custom styles to fix primevue components that are not custom or wrapped. */
1826
+
1827
+ /**
1828
+ .BccAutocomplete
1829
+ **/
1830
+
1831
+ /** Our icons are a bit smaller that Primevue's default */
1823
1832
  .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;
1833
+ --p-icon-size: var(--icon-size-sm);
1834
+ --p-form-field-sm-font-size: var(--icon-size-sm);
1835
+ --p-form-field-lg-font-size: var(--icon-size-md);
1827
1836
  }
1828
1837
 
1838
+ .p-autocomplete-clearable .p-inputtext {
1839
+ flex-grow: 1;
1840
+ }
1829
1841
 
1842
+ .p-autocomplete-chip.p-chip {
1843
+ padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
1844
+ padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
1845
+ border-radius: var(--p-autocomplete-chip-border-radius);
1846
+ }
1830
1847
 
1831
- /* === ./components/custom/styles.css === */
1832
1848
 
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
- }
1849
+ /**
1850
+ GUTTER FIX
1851
+ * Primevue's dropwdown components are all missing the gap between input and dropdown
1852
+ **/
1853
+ .p-autocomplete-overlay,
1854
+ .p-menu-overlay,
1855
+ .p-multiselect-overlay,
1856
+ .p-select-overlay,
1857
+ .p-treeselect-overlay {
1858
+ margin: var(--p-anchor-gutter) 0;
1859
+ }
1881
1860
 
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
- }
1861
+ /* This fix is to ensure overlay badge is contained within the size of the component it wraps */
1862
+ .p-overlaybadge {
1863
+ display: inline-block;
1864
+ }
1894
1865
 
1895
1866
 
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
1867
 
1868
+ /* === ./components/custom/styles.css === */
1903
1869
 
1904
1870
  /* from ./BccBadge/BccBadge.css */
1905
1871
  @layer components {
@@ -1908,6 +1874,10 @@
1908
1874
 
1909
1875
  @apply bg-ctx text-ctx;
1910
1876
  }
1877
+
1878
+ .bcc-badge.capital {
1879
+ @apply inline-flex;
1880
+ }
1911
1881
  .bcc-badge.sm {
1912
1882
  @apply w-4 h-4 text-heading-xs;
1913
1883
  }
@@ -1918,7 +1888,7 @@
1918
1888
  @apply w-6 h-6 text-heading-md;
1919
1889
  }
1920
1890
  .bcc-badge.xl {
1921
- @apply w-8 h-8 text-heading-lg;
1891
+ @apply w-8 h-8 text-heading-md;
1922
1892
  }
1923
1893
 
1924
1894
  .bcc-badge .bcc-badge-icon {
@@ -1955,7 +1925,7 @@
1955
1925
  }
1956
1926
 
1957
1927
  .bcc-badge.squared {
1958
- @apply rounded;
1928
+ @apply rounded-sm;
1959
1929
  }
1960
1930
  }
1961
1931
 
@@ -2034,11 +2004,11 @@
2034
2004
  }
2035
2005
 
2036
2006
  .bcc-knob-top-left {
2037
- @apply absolute top-0 left-0 p-2 text-left;
2007
+ @apply absolute top-0 left-0 text-left;
2038
2008
  }
2039
2009
 
2040
2010
  .bcc-knob-top-right {
2041
- @apply absolute top-0 right-0 p-2 text-right;
2011
+ @apply absolute top-0 right-0 text-right;
2042
2012
  }
2043
2013
  }
2044
2014
 
@@ -2057,8 +2027,8 @@
2057
2027
  .bcc-frame--raised {
2058
2028
  --ctx-background: var(--color-elevation-surface-raised-default);
2059
2029
  }
2060
- .bcc-frame--raised.rounded {
2061
- @apply rounded;
2030
+ .bcc-frame--rounded {
2031
+ @apply rounded-md;
2062
2032
  }
2063
2033
  .bcc-frame--raised.bcc-frame--shadow {
2064
2034
  @apply shadow-raised;
@@ -2129,43 +2099,53 @@
2129
2099
  @apply relative w-full;
2130
2100
  }
2131
2101
 
2132
- .bcc-nps-result .result-gauge-dial {
2102
+ .bcc-nps-result.xs {
2103
+ @apply w-24;
2104
+ }
2105
+ .bcc-nps-result.sm {
2106
+ @apply w-36;
2107
+ }
2108
+ .bcc-nps-result.md {
2109
+ @apply w-48;
2110
+ }
2111
+ .bcc-nps-result.lg {
2112
+ @apply w-60;
2113
+ }
2114
+ .bcc-nps-result.xl {
2115
+ @apply w-72;
2116
+ }
2117
+
2118
+ .bcc-nps-result .bcc-nps-result-gauge-dial {
2133
2119
  transform-origin: center;
2134
2120
  }
2135
2121
 
2136
- .bcc-nps-result.animated .result-gauge-dial {
2122
+ .bcc-nps-result.animated .bcc-nps-result-gauge-dial {
2137
2123
  transition-delay: 0.3s;
2138
2124
  transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
2139
2125
  }
2140
2126
 
2141
- .bcc-nps-result-labels.lg {
2142
- @apply bottom-[2em];
2143
- }
2144
2127
  .bcc-nps-result-labels {
2145
- @apply absolute bottom-[1em] flex w-full flex-col items-center justify-center;
2146
- }
2147
- .bcc-nps-result-labels.sm {
2148
- @apply bottom-0;
2128
+ @apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
2149
2129
  }
2150
2130
 
2151
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
2152
- @apply text-heading-xl leading-tight;
2153
- }
2154
2131
  .bcc-nps-result-labels--heading {
2155
- @apply text-heading-lg leading-none;
2132
+ @apply text-[1.25em] font-semibold leading-none;
2156
2133
  }
2157
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
2158
- @apply text-heading-md leading-none;
2134
+ .bcc-nps-result-labels--label {
2135
+ @apply text-[0.75em] text-subtlest;
2159
2136
  }
2160
2137
 
2161
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
2162
- @apply text-body-lg opacity-60;
2138
+ .bcc-nps-result.md .bcc-nps-result-labels {
2139
+ @apply text-lg;
2163
2140
  }
2164
- .bcc-nps-result-labels--label {
2165
- @apply text-body-md opacity-60;
2141
+ .bcc-nps-result.lg .bcc-nps-result-labels {
2142
+ @apply text-xl;
2143
+ }
2144
+ .bcc-nps-result.xl .bcc-nps-result-labels {
2145
+ @apply text-2xl;
2166
2146
  }
2167
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
2168
- @apply text-body-sm;
2147
+ .bcc-nps-result.full .bcc-nps-result-labels {
2148
+ @apply text-lg;
2169
2149
  }
2170
2150
  }
2171
2151
 
@@ -2174,7 +2154,7 @@
2174
2154
  /* from ./BccNpsScore/BccNpsScore.css */
2175
2155
  @layer components {
2176
2156
  .bcc-nps-score {
2177
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
2157
+ @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2178
2158
  }
2179
2159
 
2180
2160
  .bcc-nps-score--heading {
@@ -2195,7 +2175,7 @@
2195
2175
  }
2196
2176
 
2197
2177
  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2198
- @apply bg-ctx ctx-gray-subtler text-disabled;
2178
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2199
2179
  }
2200
2180
 
2201
2181
  .bcc-nps-score--number {
@@ -2205,7 +2185,7 @@
2205
2185
  }
2206
2186
 
2207
2187
  .bcc-nps-score--number:disabled {
2208
- @apply pointer-events-none cursor-default;
2188
+ @apply cursor-not-allowed;
2209
2189
  }
2210
2190
 
2211
2191
  .bcc-nps-score--number.active {
@@ -2218,7 +2198,7 @@
2218
2198
  }
2219
2199
 
2220
2200
  .bcc-nps-score--number.inactive {
2221
- @apply bg-ctx text-ctx ctx-gray-subtle;
2201
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2222
2202
  }
2223
2203
 
2224
2204
  .bcc-nps-score--number:first-child {
@@ -2322,6 +2302,104 @@
2322
2302
 
2323
2303
 
2324
2304
 
2305
+ /* from ./BccTag/BccTag.css */
2306
+
2307
+ @layer components {
2308
+ .bcc-tag.bcc-badge {
2309
+ @apply w-auto;
2310
+ }
2311
+ .bcc-tag.bcc-badge.md {
2312
+ @apply font-regular h-6;
2313
+ }
2314
+ .bcc-tag.bcc-badge.sm {
2315
+ @apply font-regular h-5;
2316
+ }
2317
+ .bcc-tag.bcc-badge.lg {
2318
+ @apply font-regular h-8;
2319
+ }
2320
+ .bcc-tag.bcc-badge.xl {
2321
+ @apply font-regular h-10;
2322
+ }
2323
+ }
2324
+
2325
+
2326
+
2327
+ /* === ./components/wrapped/styles.css === */
2328
+
2329
+ /* from ./BccAvatar/BccAvatar.css */
2330
+ @layer components {
2331
+ .bcc-avatar {
2332
+ --p-avatar-background: var(--ctx-background);
2333
+ --p-avatar-color: var(--ctx-text);
2334
+ --bcc-avatar-border: var(--ctx-border);
2335
+ @apply overflow-hidden shrink-0 ctx-gray-subtler;
2336
+ }
2337
+ .bcc-avatar.male,
2338
+ .bcc-avatar.M {
2339
+ @apply ctx-blue-subtler;
2340
+ }
2341
+ .bcc-avatar.female,
2342
+ .bcc-avatar.F {
2343
+ @apply ctx-purple-subtler;
2344
+ }
2345
+ .bcc-avatar.male.child,
2346
+ .bcc-avatar.M.child {
2347
+ @apply ctx-teal-subtler;
2348
+ }
2349
+ .bcc-avatar.female.child,
2350
+ .bcc-avatar.F.child {
2351
+ @apply ctx-magenta-subtler;
2352
+ }
2353
+ .bcc-avatar.bordered {
2354
+ @apply border-2 border-ctx;
2355
+ }
2356
+ .bcc-avatar.xs {
2357
+ @apply size-5 text-xs;
2358
+ }
2359
+ .bcc-avatar.sm {
2360
+ @apply size-6 text-sm;
2361
+ }
2362
+ .bcc-avatar.md {
2363
+ @apply size-8 text-base;
2364
+ }
2365
+ .bcc-avatar.lg {
2366
+ @apply size-10 text-lg;
2367
+ }
2368
+ .bcc-avatar.xl {
2369
+ @apply size-12 text-xl;
2370
+ }
2371
+ .bcc-avatar.xxl {
2372
+ @apply size-20 text-3xl;
2373
+ }
2374
+ .bcc-avatar.xxxl {
2375
+ @apply size-24 text-4xl;
2376
+ }
2377
+
2378
+ .bcc-avatar.squared.lg {
2379
+ @apply text-xl;
2380
+ }
2381
+ .bcc-avatar.squared.xl {
2382
+ @apply text-2xl;
2383
+ }
2384
+ .bcc-avatar.squared.xxl {
2385
+ @apply text-4xl;
2386
+ }
2387
+ .bcc-avatar.squared.xxxl {
2388
+ @apply text-5xl;
2389
+ }
2390
+
2391
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
2392
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2393
+ transform: translate(40%, -40%);
2394
+ }
2395
+
2396
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2397
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge {
2398
+ transform: translate(20%, -20%);
2399
+ }
2400
+ }
2401
+
2402
+
2325
2403
  /* from ./BccTabs/BccTabs.css */
2326
2404
  @layer components {
2327
2405
  .bcc-tabs-fill.p-tabs {
@@ -2343,27 +2421,6 @@
2343
2421
  }
2344
2422
 
2345
2423
 
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-sm font-regular h-6;
2354
- }
2355
- .bcc-tag.bcc-badge.sm {
2356
- @apply text-xs font-regular h-5;
2357
- }
2358
- .bcc-tag.bcc-badge.lg {
2359
- @apply text-md font-regular h-8;
2360
- }
2361
- .bcc-tag.bcc-badge.xl {
2362
- @apply text-lg font-regular h-10;
2363
- }
2364
- }
2365
-
2366
-
2367
2424
  /* from ./BccToggle/BccToggle.css */
2368
2425
  @layer components {
2369
2426
  .p-toggleswitch.useCtx {
@@ -2383,17 +2440,19 @@
2383
2440
 
2384
2441
 
2385
2442
 
2386
- :host {
2387
- @apply font-sans antialiased p-0 m-0;
2388
- -webkit-font-smoothing: antialiased;
2389
- -moz-osx-font-smoothing: grayscale;
2443
+ :root, :host {
2444
+ --font-sans: 'Archivo', system-ui, sans-serif;
2445
+ @apply font-sans antialiased p-0 m-0;
2446
+ -webkit-font-smoothing: antialiased;
2447
+ -moz-osx-font-smoothing: grayscale;
2448
+
2390
2449
  }
2391
2450
 
2392
2451
  b,
2393
2452
  strong,
2394
2453
  .bold {
2395
- font-weight: bold;
2396
- --ctx-text: var(--ctx-text-bold);
2454
+ font-weight: bold;
2455
+ --ctx-text: var(--ctx-text-bold);
2397
2456
  }
2398
2457
 
2399
2458
  /* Disable state */