@bcc-code/component-library-vue 0.0.0-dev.053d9fc → 0.0.0-dev.06d31a8

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 (27) hide show
  1. package/README.md +9 -0
  2. package/dist/component-library.js +44965 -42120
  3. package/dist/component-library.umd.cjs +1139 -943
  4. package/dist/index.css +1 -1
  5. package/dist/theme.css +489 -390
  6. package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +32 -0
  7. package/dist-types/components/custom/BccBadge/BccBadge.vue.d.ts +2 -0
  8. package/dist-types/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue.d.ts +3 -0
  9. package/dist-types/components/custom/BccDialKnob/BccDialKnob.vue.d.ts +1 -1
  10. package/dist-types/components/custom/BccNpsResult/BccNpsResult.vue.d.ts +2 -2
  11. package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +1 -1
  12. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +28 -0
  13. package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +47 -0
  14. package/dist-types/components/custom/index.d.ts +6 -2
  15. package/dist-types/components/wrapped/BccAvatar/BccAvatar.vue.d.ts +2 -2
  16. package/dist-types/components/wrapped/BccButton.vue.d.ts +1 -0
  17. package/dist-types/components/wrapped/BccChip/BccChip.vue.d.ts +18 -0
  18. package/dist-types/components/wrapped/BccImage.vue.d.ts +17 -0
  19. package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +14 -0
  20. package/dist-types/components/wrapped/BccMessage.vue.d.ts +4 -2
  21. package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +18 -0
  22. package/dist-types/components/wrapped/BccTabs/BccTabs.vue.d.ts +2 -0
  23. package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts +12 -1
  24. package/dist-types/components/wrapped/index.d.ts +9 -0
  25. package/dist-types/index.d.ts +14 -6
  26. package/package.json +103 -101
  27. package/dist-types/components/custom/BccStepper/BccStepper.vue.d.ts +0 -16
package/dist/theme.css CHANGED
@@ -1,10 +1,10 @@
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
+ @import '@bcc-code/design-tokens/css';
4
4
 
5
- @import "tailwindcss";
6
- @import "@bcc-code/design-tokens/tailwind";
7
- @import "@bcc-code/design-tokens/primevue/overrides";
5
+ @import 'tailwindcss';
6
+ @import '@bcc-code/design-tokens/tailwind';
7
+ @import '@bcc-code/design-tokens/primevue/overrides';
8
8
 
9
9
 
10
10
  /* === ./styles/theme.css === */
@@ -649,7 +649,8 @@
649
649
 
650
650
  /* Capitalize first letter */
651
651
  @utility capital {
652
- display: inline-block;
652
+ @apply inline-block;
653
+
653
654
  &::first-letter {
654
655
  text-transform: uppercase;
655
656
  }
@@ -685,16 +686,16 @@
685
686
  @utility ctx-blue-bolder {
686
687
  --ctx-text: var(--color-default-blue-200);
687
688
  --ctx-text-bold: var(--color-default-blue-100);
688
- --ctx-background: var(--color-default-blue-800);
689
- --ctx-gradient: var(--color-default-blue-700);
689
+ --ctx-background: var(--color-default-blue-700);
690
+ --ctx-gradient: var(--color-default-blue-800);
690
691
  --ctx-border: var(--color-default-blue-700);
691
692
  --ctx-shadow: var(--color-neutral-alpha-500A);
692
693
  --ctx-text-hover: var(--color-default-blue-200);
693
694
  --ctx-text-pressed: var(--color-default-blue-200);
694
- --ctx-background-hover: var(--color-default-blue-700);
695
- --ctx-background-pressed: var(--color-default-blue-600);
696
- --ctx-gradient-hover: var(--color-default-blue-600);
697
- --ctx-gradient-pressed: var(--color-default-blue-600);
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);
698
699
  --ctx-border-hover: var(--color-default-blue-700);
699
700
  --ctx-border-pressed: var(--color-default-blue-700);
700
701
  }
@@ -702,16 +703,16 @@
702
703
  @utility ctx-blue-subtle {
703
704
  --ctx-text: var(--color-default-blue-900);
704
705
  --ctx-text-bold: var(--color-default-blue-1000);
705
- --ctx-background: var(--color-default-blue-300);
706
- --ctx-gradient: var(--color-default-blue-400);
706
+ --ctx-background: var(--color-default-blue-400);
707
+ --ctx-gradient: var(--color-default-blue-300);
707
708
  --ctx-border: var(--color-default-blue-500);
708
709
  --ctx-shadow: var(--color-neutral-alpha-500A);
709
710
  --ctx-text-hover: var(--color-default-blue-900);
710
711
  --ctx-text-pressed: var(--color-default-blue-900);
711
- --ctx-background-hover: var(--color-default-blue-400);
712
- --ctx-background-pressed: var(--color-default-blue-500);
713
- --ctx-gradient-hover: var(--color-default-blue-500);
714
- --ctx-gradient-pressed: var(--color-default-blue-500);
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);
715
716
  --ctx-border-hover: var(--color-default-blue-500);
716
717
  --ctx-border-pressed: var(--color-default-blue-500);
717
718
  }
@@ -753,16 +754,16 @@
753
754
  @utility ctx-brand-bold {
754
755
  --ctx-text: var(--color-default-bcc-200);
755
756
  --ctx-text-bold: var(--color-default-neutral-100);
756
- --ctx-background: var(--color-default-bcc-800);
757
+ --ctx-background: var(--color-default-bcc-600);
757
758
  --ctx-gradient: var(--color-default-bcc-700);
758
759
  --ctx-border: var(--color-default-bcc-600);
759
760
  --ctx-shadow: var(--color-neutral-alpha-500A);
760
761
  --ctx-text-hover: var(--color-default-bcc-200);
761
762
  --ctx-text-pressed: var(--color-default-bcc-200);
762
763
  --ctx-background-hover: var(--color-default-bcc-700);
763
- --ctx-background-pressed: var(--color-default-bcc-600);
764
- --ctx-gradient-hover: var(--color-default-bcc-600);
765
- --ctx-gradient-pressed: var(--color-default-bcc-600);
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);
766
767
  --ctx-border-hover: var(--color-default-bcc-600);
767
768
  --ctx-border-pressed: var(--color-default-bcc-600);
768
769
  }
@@ -770,16 +771,16 @@
770
771
  @utility ctx-brand-bolder {
771
772
  --ctx-text: var(--color-default-bcc-100);
772
773
  --ctx-text-bold: var(--color-default-neutral-0);
773
- --ctx-background: var(--color-default-bcc-900);
774
+ --ctx-background: var(--color-default-bcc-700);
774
775
  --ctx-gradient: var(--color-default-bcc-800);
775
776
  --ctx-border: var(--color-default-bcc-700);
776
777
  --ctx-shadow: var(--color-neutral-alpha-500A);
777
778
  --ctx-text-hover: var(--color-default-bcc-100);
778
779
  --ctx-text-pressed: var(--color-default-bcc-100);
779
780
  --ctx-background-hover: var(--color-default-bcc-800);
780
- --ctx-background-pressed: var(--color-default-bcc-700);
781
- --ctx-gradient-hover: var(--color-default-bcc-700);
782
- --ctx-gradient-pressed: var(--color-default-bcc-700);
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);
783
784
  --ctx-border-hover: var(--color-default-bcc-700);
784
785
  --ctx-border-pressed: var(--color-default-bcc-700);
785
786
  }
@@ -819,31 +820,31 @@
819
820
  }
820
821
 
821
822
  @utility ctx-brand-subtle {
822
- --ctx-text: var(--color-default-neutral-900);
823
- --ctx-text-bold: var(--color-default-bcc-1000);
824
- --ctx-background: var(--color-default-bcc-300);
825
- --ctx-gradient: var(--color-default-bcc-400);
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);
826
827
  --ctx-border: var(--color-default-bcc-500);
827
828
  --ctx-shadow: var(--color-neutral-alpha-500A);
828
- --ctx-text-hover: var(--color-default-neutral-900);
829
- --ctx-text-pressed: var(--color-default-neutral-900);
830
- --ctx-background-hover: var(--color-default-bcc-400);
831
- --ctx-background-pressed: var(--color-default-bcc-500);
832
- --ctx-gradient-hover: var(--color-default-bcc-500);
833
- --ctx-gradient-pressed: var(--color-default-bcc-500);
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);
834
835
  --ctx-border-hover: var(--color-default-bcc-500);
835
836
  --ctx-border-pressed: var(--color-default-bcc-500);
836
837
  }
837
838
 
838
839
  @utility ctx-brand-subtler {
839
- --ctx-text: var(--color-default-neutral-800);
840
- --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);
841
842
  --ctx-background: var(--color-default-bcc-200);
842
843
  --ctx-gradient: var(--color-default-bcc-300);
843
844
  --ctx-border: var(--color-default-bcc-400);
844
845
  --ctx-shadow: var(--color-neutral-alpha-500A);
845
- --ctx-text-hover: var(--color-default-neutral-800);
846
- --ctx-text-pressed: var(--color-default-neutral-800);
846
+ --ctx-text-hover: var(--color-default-bcc-900);
847
+ --ctx-text-pressed: var(--color-default-bcc-900);
847
848
  --ctx-background-hover: var(--color-default-bcc-300);
848
849
  --ctx-background-pressed: var(--color-default-bcc-400);
849
850
  --ctx-gradient-hover: var(--color-default-bcc-400);
@@ -853,14 +854,14 @@
853
854
  }
854
855
 
855
856
  @utility ctx-brand-subtlest {
856
- --ctx-text: var(--color-default-neutral-900);
857
- --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);
858
859
  --ctx-background: var(--color-default-bcc-100);
859
860
  --ctx-gradient: var(--color-default-bcc-200);
860
861
  --ctx-border: var(--color-default-bcc-300);
861
862
  --ctx-shadow: var(--color-neutral-alpha-500A);
862
- --ctx-text-hover: var(--color-default-neutral-900);
863
- --ctx-text-pressed: var(--color-default-neutral-900);
863
+ --ctx-text-hover: var(--color-default-bcc-800);
864
+ --ctx-text-pressed: var(--color-default-bcc-800);
864
865
  --ctx-background-hover: var(--color-default-bcc-200);
865
866
  --ctx-background-pressed: var(--color-default-bcc-300);
866
867
  --ctx-gradient-hover: var(--color-default-bcc-300);
@@ -872,16 +873,16 @@
872
873
  @utility ctx-brown-bolder {
873
874
  --ctx-text: var(--color-default-brown-200);
874
875
  --ctx-text-bold: var(--color-default-brown-100);
875
- --ctx-background: var(--color-default-brown-800);
876
- --ctx-gradient: var(--color-default-brown-700);
876
+ --ctx-background: var(--color-default-brown-700);
877
+ --ctx-gradient: var(--color-default-brown-800);
877
878
  --ctx-border: var(--color-default-brown-700);
878
879
  --ctx-shadow: var(--color-neutral-alpha-500A);
879
880
  --ctx-text-hover: var(--color-default-brown-200);
880
881
  --ctx-text-pressed: var(--color-default-brown-200);
881
- --ctx-background-hover: var(--color-default-brown-700);
882
- --ctx-background-pressed: var(--color-default-brown-600);
883
- --ctx-gradient-hover: var(--color-default-brown-600);
884
- --ctx-gradient-pressed: var(--color-default-brown-600);
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);
885
886
  --ctx-border-hover: var(--color-default-brown-700);
886
887
  --ctx-border-pressed: var(--color-default-brown-700);
887
888
  }
@@ -889,16 +890,16 @@
889
890
  @utility ctx-brown-subtle {
890
891
  --ctx-text: var(--color-default-brown-900);
891
892
  --ctx-text-bold: var(--color-default-brown-1000);
892
- --ctx-background: var(--color-default-brown-300);
893
- --ctx-gradient: var(--color-default-brown-400);
893
+ --ctx-background: var(--color-default-brown-400);
894
+ --ctx-gradient: var(--color-default-brown-300);
894
895
  --ctx-border: var(--color-default-brown-500);
895
896
  --ctx-shadow: var(--color-neutral-alpha-500A);
896
897
  --ctx-text-hover: var(--color-default-brown-900);
897
898
  --ctx-text-pressed: var(--color-default-brown-900);
898
- --ctx-background-hover: var(--color-default-brown-400);
899
- --ctx-background-pressed: var(--color-default-brown-500);
900
- --ctx-gradient-hover: var(--color-default-brown-500);
901
- --ctx-gradient-pressed: var(--color-default-brown-500);
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);
902
903
  --ctx-border-hover: var(--color-default-brown-500);
903
904
  --ctx-border-pressed: var(--color-default-brown-500);
904
905
  }
@@ -938,18 +939,18 @@
938
939
  }
939
940
 
940
941
  @utility ctx-danger-bolder {
941
- --ctx-text: var(--color-default-neutral-100);
942
- --ctx-text-bold: var(--color-default-neutral-0);
943
- --ctx-background: var(--color-default-red-800);
944
- --ctx-gradient: var(--color-default-red-700);
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);
945
946
  --ctx-border: var(--color-default-red-700);
946
947
  --ctx-shadow: var(--color-neutral-alpha-500A);
947
- --ctx-text-hover: var(--color-default-neutral-100);
948
- --ctx-text-pressed: var(--color-default-neutral-100);
949
- --ctx-background-hover: var(--color-default-red-700);
950
- --ctx-background-pressed: var(--color-default-red-600);
951
- --ctx-gradient-hover: var(--color-default-red-600);
952
- --ctx-gradient-pressed: var(--color-default-red-600);
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);
953
954
  --ctx-border-hover: var(--color-default-red-700);
954
955
  --ctx-border-pressed: var(--color-default-red-700);
955
956
  }
@@ -991,16 +992,16 @@
991
992
  @utility ctx-gray-subtle {
992
993
  --ctx-text: var(--color-default-neutral-900);
993
994
  --ctx-text-bold: var(--color-default-neutral-1000);
994
- --ctx-background: var(--color-default-neutral-300);
995
- --ctx-gradient: var(--color-default-neutral-400);
995
+ --ctx-background: var(--color-default-neutral-400);
996
+ --ctx-gradient: var(--color-default-neutral-300);
996
997
  --ctx-border: var(--color-default-neutral-500);
997
998
  --ctx-shadow: var(--color-neutral-alpha-500A);
998
999
  --ctx-text-hover: var(--color-default-neutral-900);
999
1000
  --ctx-text-pressed: var(--color-default-neutral-900);
1000
- --ctx-background-hover: var(--color-default-neutral-400);
1001
- --ctx-background-pressed: var(--color-default-neutral-500);
1002
- --ctx-gradient-hover: var(--color-default-neutral-500);
1003
- --ctx-gradient-pressed: var(--color-default-neutral-500);
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);
1004
1005
  --ctx-border-hover: var(--color-default-neutral-500);
1005
1006
  --ctx-border-pressed: var(--color-default-neutral-500);
1006
1007
  }
@@ -1042,16 +1043,16 @@
1042
1043
  @utility ctx-green-bolder {
1043
1044
  --ctx-text: var(--color-default-green-200);
1044
1045
  --ctx-text-bold: var(--color-default-green-100);
1045
- --ctx-background: var(--color-default-green-800);
1046
- --ctx-gradient: var(--color-default-green-700);
1046
+ --ctx-background: var(--color-default-green-700);
1047
+ --ctx-gradient: var(--color-default-green-800);
1047
1048
  --ctx-border: var(--color-default-green-700);
1048
1049
  --ctx-shadow: var(--color-neutral-alpha-500A);
1049
1050
  --ctx-text-hover: var(--color-default-green-200);
1050
1051
  --ctx-text-pressed: var(--color-default-green-200);
1051
- --ctx-background-hover: var(--color-default-green-700);
1052
- --ctx-background-pressed: var(--color-default-green-600);
1053
- --ctx-gradient-hover: var(--color-default-green-600);
1054
- --ctx-gradient-pressed: var(--color-default-green-600);
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);
1055
1056
  --ctx-border-hover: var(--color-default-green-700);
1056
1057
  --ctx-border-pressed: var(--color-default-green-700);
1057
1058
  }
@@ -1059,16 +1060,16 @@
1059
1060
  @utility ctx-green-subtle {
1060
1061
  --ctx-text: var(--color-default-green-900);
1061
1062
  --ctx-text-bold: var(--color-default-green-1000);
1062
- --ctx-background: var(--color-default-green-300);
1063
- --ctx-gradient: var(--color-default-green-400);
1063
+ --ctx-background: var(--color-default-green-400);
1064
+ --ctx-gradient: var(--color-default-green-300);
1064
1065
  --ctx-border: var(--color-default-green-500);
1065
1066
  --ctx-shadow: var(--color-neutral-alpha-500A);
1066
1067
  --ctx-text-hover: var(--color-default-green-900);
1067
1068
  --ctx-text-pressed: var(--color-default-green-900);
1068
- --ctx-background-hover: var(--color-default-green-400);
1069
- --ctx-background-pressed: var(--color-default-green-500);
1070
- --ctx-gradient-hover: var(--color-default-green-500);
1071
- --ctx-gradient-pressed: var(--color-default-green-500);
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);
1072
1073
  --ctx-border-hover: var(--color-default-green-500);
1073
1074
  --ctx-border-pressed: var(--color-default-green-500);
1074
1075
  }
@@ -1108,18 +1109,18 @@
1108
1109
  }
1109
1110
 
1110
1111
  @utility ctx-info-bolder {
1111
- --ctx-text: var(--color-default-neutral-100);
1112
- --ctx-text-bold: var(--color-default-neutral-0);
1113
- --ctx-background: var(--color-default-blue-800);
1114
- --ctx-gradient: var(--color-default-blue-700);
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);
1115
1116
  --ctx-border: var(--color-default-blue-700);
1116
1117
  --ctx-shadow: var(--color-neutral-alpha-500A);
1117
- --ctx-text-hover: var(--color-default-neutral-100);
1118
- --ctx-text-pressed: var(--color-default-neutral-100);
1119
- --ctx-background-hover: var(--color-default-blue-700);
1120
- --ctx-background-pressed: var(--color-default-blue-600);
1121
- --ctx-gradient-hover: var(--color-default-blue-600);
1122
- --ctx-gradient-pressed: var(--color-default-blue-600);
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);
1123
1124
  --ctx-border-hover: var(--color-default-blue-700);
1124
1125
  --ctx-border-pressed: var(--color-default-blue-700);
1125
1126
  }
@@ -1144,16 +1145,16 @@
1144
1145
  @utility ctx-magenta-bolder {
1145
1146
  --ctx-text: var(--color-default-magenta-200);
1146
1147
  --ctx-text-bold: var(--color-default-magenta-100);
1147
- --ctx-background: var(--color-default-magenta-800);
1148
- --ctx-gradient: var(--color-default-magenta-700);
1148
+ --ctx-background: var(--color-default-magenta-700);
1149
+ --ctx-gradient: var(--color-default-magenta-800);
1149
1150
  --ctx-border: var(--color-default-magenta-700);
1150
1151
  --ctx-shadow: var(--color-neutral-alpha-500A);
1151
1152
  --ctx-text-hover: var(--color-default-magenta-200);
1152
1153
  --ctx-text-pressed: var(--color-default-magenta-200);
1153
- --ctx-background-hover: var(--color-default-magenta-700);
1154
- --ctx-background-pressed: var(--color-default-magenta-600);
1155
- --ctx-gradient-hover: var(--color-default-magenta-600);
1156
- --ctx-gradient-pressed: var(--color-default-magenta-600);
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);
1157
1158
  --ctx-border-hover: var(--color-default-magenta-700);
1158
1159
  --ctx-border-pressed: var(--color-default-magenta-700);
1159
1160
  }
@@ -1161,16 +1162,16 @@
1161
1162
  @utility ctx-magenta-subtle {
1162
1163
  --ctx-text: var(--color-default-magenta-900);
1163
1164
  --ctx-text-bold: var(--color-default-magenta-1000);
1164
- --ctx-background: var(--color-default-magenta-300);
1165
- --ctx-gradient: var(--color-default-magenta-400);
1165
+ --ctx-background: var(--color-default-magenta-400);
1166
+ --ctx-gradient: var(--color-default-magenta-300);
1166
1167
  --ctx-border: var(--color-default-magenta-500);
1167
1168
  --ctx-shadow: var(--color-neutral-alpha-500A);
1168
1169
  --ctx-text-hover: var(--color-default-magenta-900);
1169
1170
  --ctx-text-pressed: var(--color-default-magenta-900);
1170
- --ctx-background-hover: var(--color-default-magenta-400);
1171
- --ctx-background-pressed: var(--color-default-magenta-500);
1172
- --ctx-gradient-hover: var(--color-default-magenta-500);
1173
- --ctx-gradient-pressed: var(--color-default-magenta-500);
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);
1174
1175
  --ctx-border-hover: var(--color-default-magenta-500);
1175
1176
  --ctx-border-pressed: var(--color-default-magenta-500);
1176
1177
  }
@@ -1314,16 +1315,16 @@
1314
1315
  @utility ctx-orange-bolder {
1315
1316
  --ctx-text: var(--color-default-orange-200);
1316
1317
  --ctx-text-bold: var(--color-default-orange-100);
1317
- --ctx-background: var(--color-default-orange-800);
1318
- --ctx-gradient: var(--color-default-orange-700);
1318
+ --ctx-background: var(--color-default-orange-700);
1319
+ --ctx-gradient: var(--color-default-orange-800);
1319
1320
  --ctx-border: var(--color-default-orange-700);
1320
1321
  --ctx-shadow: var(--color-neutral-alpha-500A);
1321
1322
  --ctx-text-hover: var(--color-default-orange-200);
1322
1323
  --ctx-text-pressed: var(--color-default-orange-200);
1323
- --ctx-background-hover: var(--color-default-orange-700);
1324
- --ctx-background-pressed: var(--color-default-orange-600);
1325
- --ctx-gradient-hover: var(--color-default-orange-600);
1326
- --ctx-gradient-pressed: var(--color-default-orange-600);
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);
1327
1328
  --ctx-border-hover: var(--color-default-orange-700);
1328
1329
  --ctx-border-pressed: var(--color-default-orange-700);
1329
1330
  }
@@ -1331,16 +1332,16 @@
1331
1332
  @utility ctx-orange-subtle {
1332
1333
  --ctx-text: var(--color-default-orange-900);
1333
1334
  --ctx-text-bold: var(--color-default-orange-1000);
1334
- --ctx-background: var(--color-default-orange-300);
1335
- --ctx-gradient: var(--color-default-orange-400);
1335
+ --ctx-background: var(--color-default-orange-400);
1336
+ --ctx-gradient: var(--color-default-orange-300);
1336
1337
  --ctx-border: var(--color-default-orange-500);
1337
1338
  --ctx-shadow: var(--color-neutral-alpha-500A);
1338
1339
  --ctx-text-hover: var(--color-default-orange-900);
1339
1340
  --ctx-text-pressed: var(--color-default-orange-900);
1340
- --ctx-background-hover: var(--color-default-orange-400);
1341
- --ctx-background-pressed: var(--color-default-orange-500);
1342
- --ctx-gradient-hover: var(--color-default-orange-500);
1343
- --ctx-gradient-pressed: var(--color-default-orange-500);
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);
1344
1345
  --ctx-border-hover: var(--color-default-orange-500);
1345
1346
  --ctx-border-pressed: var(--color-default-orange-500);
1346
1347
  }
@@ -1382,16 +1383,16 @@
1382
1383
  @utility ctx-purple-bolder {
1383
1384
  --ctx-text: var(--color-default-purple-200);
1384
1385
  --ctx-text-bold: var(--color-default-purple-100);
1385
- --ctx-background: var(--color-default-purple-800);
1386
- --ctx-gradient: var(--color-default-purple-700);
1386
+ --ctx-background: var(--color-default-purple-700);
1387
+ --ctx-gradient: var(--color-default-purple-800);
1387
1388
  --ctx-border: var(--color-default-purple-700);
1388
1389
  --ctx-shadow: var(--color-neutral-alpha-500A);
1389
1390
  --ctx-text-hover: var(--color-default-purple-200);
1390
1391
  --ctx-text-pressed: var(--color-default-purple-200);
1391
- --ctx-background-hover: var(--color-default-purple-700);
1392
- --ctx-background-pressed: var(--color-default-purple-600);
1393
- --ctx-gradient-hover: var(--color-default-purple-600);
1394
- --ctx-gradient-pressed: var(--color-default-purple-600);
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);
1395
1396
  --ctx-border-hover: var(--color-default-purple-700);
1396
1397
  --ctx-border-pressed: var(--color-default-purple-700);
1397
1398
  }
@@ -1399,16 +1400,16 @@
1399
1400
  @utility ctx-purple-subtle {
1400
1401
  --ctx-text: var(--color-default-purple-900);
1401
1402
  --ctx-text-bold: var(--color-default-purple-1000);
1402
- --ctx-background: var(--color-default-purple-300);
1403
- --ctx-gradient: var(--color-default-purple-400);
1403
+ --ctx-background: var(--color-default-purple-400);
1404
+ --ctx-gradient: var(--color-default-purple-300);
1404
1405
  --ctx-border: var(--color-default-purple-500);
1405
1406
  --ctx-shadow: var(--color-neutral-alpha-500A);
1406
1407
  --ctx-text-hover: var(--color-default-purple-900);
1407
1408
  --ctx-text-pressed: var(--color-default-purple-900);
1408
- --ctx-background-hover: var(--color-default-purple-400);
1409
- --ctx-background-pressed: var(--color-default-purple-500);
1410
- --ctx-gradient-hover: var(--color-default-purple-500);
1411
- --ctx-gradient-pressed: var(--color-default-purple-500);
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);
1412
1413
  --ctx-border-hover: var(--color-default-purple-500);
1413
1414
  --ctx-border-pressed: var(--color-default-purple-500);
1414
1415
  }
@@ -1450,16 +1451,16 @@
1450
1451
  @utility ctx-red-bolder {
1451
1452
  --ctx-text: var(--color-default-red-200);
1452
1453
  --ctx-text-bold: var(--color-default-red-100);
1453
- --ctx-background: var(--color-default-red-800);
1454
- --ctx-gradient: var(--color-default-red-700);
1454
+ --ctx-background: var(--color-default-red-700);
1455
+ --ctx-gradient: var(--color-default-red-800);
1455
1456
  --ctx-border: var(--color-default-red-700);
1456
1457
  --ctx-shadow: var(--color-neutral-alpha-500A);
1457
1458
  --ctx-text-hover: var(--color-default-red-200);
1458
1459
  --ctx-text-pressed: var(--color-default-red-200);
1459
- --ctx-background-hover: var(--color-default-red-700);
1460
- --ctx-background-pressed: var(--color-default-red-600);
1461
- --ctx-gradient-hover: var(--color-default-red-600);
1462
- --ctx-gradient-pressed: var(--color-default-red-600);
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);
1463
1464
  --ctx-border-hover: var(--color-default-red-700);
1464
1465
  --ctx-border-pressed: var(--color-default-red-700);
1465
1466
  }
@@ -1467,16 +1468,16 @@
1467
1468
  @utility ctx-red-subtle {
1468
1469
  --ctx-text: var(--color-default-red-900);
1469
1470
  --ctx-text-bold: var(--color-default-red-1000);
1470
- --ctx-background: var(--color-default-red-300);
1471
- --ctx-gradient: var(--color-default-red-400);
1471
+ --ctx-background: var(--color-default-red-400);
1472
+ --ctx-gradient: var(--color-default-red-300);
1472
1473
  --ctx-border: var(--color-default-red-500);
1473
1474
  --ctx-shadow: var(--color-neutral-alpha-500A);
1474
1475
  --ctx-text-hover: var(--color-default-red-900);
1475
1476
  --ctx-text-pressed: var(--color-default-red-900);
1476
- --ctx-background-hover: var(--color-default-red-400);
1477
- --ctx-background-pressed: var(--color-default-red-500);
1478
- --ctx-gradient-hover: var(--color-default-red-500);
1479
- --ctx-gradient-pressed: var(--color-default-red-500);
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);
1480
1481
  --ctx-border-hover: var(--color-default-red-500);
1481
1482
  --ctx-border-pressed: var(--color-default-red-500);
1482
1483
  }
@@ -1516,18 +1517,18 @@
1516
1517
  }
1517
1518
 
1518
1519
  @utility ctx-success-bolder {
1519
- --ctx-text: var(--color-default-neutral-100);
1520
- --ctx-text-bold: var(--color-default-neutral-0);
1521
- --ctx-background: var(--color-default-green-800);
1522
- --ctx-gradient: var(--color-default-green-700);
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);
1523
1524
  --ctx-border: var(--color-default-green-700);
1524
1525
  --ctx-shadow: var(--color-neutral-alpha-500A);
1525
- --ctx-text-hover: var(--color-default-neutral-100);
1526
- --ctx-text-pressed: var(--color-default-neutral-100);
1527
- --ctx-background-hover: var(--color-default-green-700);
1528
- --ctx-background-pressed: var(--color-default-green-600);
1529
- --ctx-gradient-hover: var(--color-default-green-600);
1530
- --ctx-gradient-pressed: var(--color-default-green-600);
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);
1531
1532
  --ctx-border-hover: var(--color-default-green-700);
1532
1533
  --ctx-border-pressed: var(--color-default-green-700);
1533
1534
  }
@@ -1552,16 +1553,16 @@
1552
1553
  @utility ctx-teal-bolder {
1553
1554
  --ctx-text: var(--color-default-teal-200);
1554
1555
  --ctx-text-bold: var(--color-default-teal-100);
1555
- --ctx-background: var(--color-default-teal-800);
1556
- --ctx-gradient: var(--color-default-teal-700);
1556
+ --ctx-background: var(--color-default-teal-700);
1557
+ --ctx-gradient: var(--color-default-teal-800);
1557
1558
  --ctx-border: var(--color-default-teal-700);
1558
1559
  --ctx-shadow: var(--color-neutral-alpha-500A);
1559
1560
  --ctx-text-hover: var(--color-default-teal-200);
1560
1561
  --ctx-text-pressed: var(--color-default-teal-200);
1561
- --ctx-background-hover: var(--color-default-teal-700);
1562
- --ctx-background-pressed: var(--color-default-teal-600);
1563
- --ctx-gradient-hover: var(--color-default-teal-600);
1564
- --ctx-gradient-pressed: var(--color-default-teal-600);
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);
1565
1566
  --ctx-border-hover: var(--color-default-teal-700);
1566
1567
  --ctx-border-pressed: var(--color-default-teal-700);
1567
1568
  }
@@ -1569,16 +1570,16 @@
1569
1570
  @utility ctx-teal-subtle {
1570
1571
  --ctx-text: var(--color-default-teal-900);
1571
1572
  --ctx-text-bold: var(--color-default-teal-1000);
1572
- --ctx-background: var(--color-default-teal-300);
1573
- --ctx-gradient: var(--color-default-teal-400);
1573
+ --ctx-background: var(--color-default-teal-400);
1574
+ --ctx-gradient: var(--color-default-teal-300);
1574
1575
  --ctx-border: var(--color-default-teal-500);
1575
1576
  --ctx-shadow: var(--color-neutral-alpha-500A);
1576
1577
  --ctx-text-hover: var(--color-default-teal-900);
1577
1578
  --ctx-text-pressed: var(--color-default-teal-900);
1578
- --ctx-background-hover: var(--color-default-teal-400);
1579
- --ctx-background-pressed: var(--color-default-teal-500);
1580
- --ctx-gradient-hover: var(--color-default-teal-500);
1581
- --ctx-gradient-pressed: var(--color-default-teal-500);
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);
1582
1583
  --ctx-border-hover: var(--color-default-teal-500);
1583
1584
  --ctx-border-pressed: var(--color-default-teal-500);
1584
1585
  }
@@ -1618,18 +1619,18 @@
1618
1619
  }
1619
1620
 
1620
1621
  @utility ctx-warning-bolder {
1621
- --ctx-text: var(--color-default-neutral-100);
1622
- --ctx-text-bold: var(--color-default-neutral-0);
1623
- --ctx-background: var(--color-default-yellow-800);
1624
- --ctx-gradient: var(--color-default-yellow-700);
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);
1625
1626
  --ctx-border: var(--color-default-yellow-700);
1626
1627
  --ctx-shadow: var(--color-neutral-alpha-500A);
1627
- --ctx-text-hover: var(--color-default-neutral-100);
1628
- --ctx-text-pressed: var(--color-default-neutral-100);
1629
- --ctx-background-hover: var(--color-default-yellow-700);
1630
- --ctx-background-pressed: var(--color-default-yellow-600);
1631
- --ctx-gradient-hover: var(--color-default-yellow-600);
1632
- --ctx-gradient-pressed: var(--color-default-yellow-600);
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);
1633
1634
  --ctx-border-hover: var(--color-default-yellow-700);
1634
1635
  --ctx-border-pressed: var(--color-default-yellow-700);
1635
1636
  }
@@ -1654,16 +1655,16 @@
1654
1655
  @utility ctx-yellow-bolder {
1655
1656
  --ctx-text: var(--color-default-yellow-200);
1656
1657
  --ctx-text-bold: var(--color-default-yellow-100);
1657
- --ctx-background: var(--color-default-yellow-800);
1658
- --ctx-gradient: var(--color-default-yellow-700);
1658
+ --ctx-background: var(--color-default-yellow-700);
1659
+ --ctx-gradient: var(--color-default-yellow-800);
1659
1660
  --ctx-border: var(--color-default-yellow-700);
1660
1661
  --ctx-shadow: var(--color-neutral-alpha-500A);
1661
1662
  --ctx-text-hover: var(--color-default-yellow-200);
1662
1663
  --ctx-text-pressed: var(--color-default-yellow-200);
1663
- --ctx-background-hover: var(--color-default-yellow-700);
1664
- --ctx-background-pressed: var(--color-default-yellow-600);
1665
- --ctx-gradient-hover: var(--color-default-yellow-600);
1666
- --ctx-gradient-pressed: var(--color-default-yellow-600);
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);
1667
1668
  --ctx-border-hover: var(--color-default-yellow-700);
1668
1669
  --ctx-border-pressed: var(--color-default-yellow-700);
1669
1670
  }
@@ -1671,16 +1672,16 @@
1671
1672
  @utility ctx-yellow-subtle {
1672
1673
  --ctx-text: var(--color-default-yellow-900);
1673
1674
  --ctx-text-bold: var(--color-default-yellow-1000);
1674
- --ctx-background: var(--color-default-yellow-300);
1675
- --ctx-gradient: var(--color-default-yellow-400);
1675
+ --ctx-background: var(--color-default-yellow-400);
1676
+ --ctx-gradient: var(--color-default-yellow-300);
1676
1677
  --ctx-border: var(--color-default-yellow-500);
1677
1678
  --ctx-shadow: var(--color-neutral-alpha-500A);
1678
1679
  --ctx-text-hover: var(--color-default-yellow-900);
1679
1680
  --ctx-text-pressed: var(--color-default-yellow-900);
1680
- --ctx-background-hover: var(--color-default-yellow-400);
1681
- --ctx-background-pressed: var(--color-default-yellow-500);
1682
- --ctx-gradient-hover: var(--color-default-yellow-500);
1683
- --ctx-gradient-pressed: var(--color-default-yellow-500);
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);
1684
1685
  --ctx-border-hover: var(--color-default-yellow-500);
1685
1686
  --ctx-border-pressed: var(--color-default-yellow-500);
1686
1687
  }
@@ -1824,23 +1825,101 @@
1824
1825
  /** Custom styles to fix primevue components that are not custom or wrapped. */
1825
1826
 
1826
1827
  /**
1827
- .BccAutocomplete
1828
+ * GUTTER FIX
1829
+ * Primevue's dropwdown components are all missing the gap between input and dropdown
1830
+ **/
1831
+ .p-autocomplete-overlay,
1832
+ .p-menu-overlay,
1833
+ .p-multiselect-overlay,
1834
+ .p-select-overlay,
1835
+ .p-datepicker-panel,
1836
+ .p-treeselect-overlay {
1837
+ margin: var(--p-anchor-gutter) 0;
1838
+ }
1839
+
1840
+ /* This fix is to ensure overlay badge is contained within the size of the component it wraps */
1841
+ .p-overlaybadge {
1842
+ display: inline-block;
1843
+ }
1844
+
1845
+ /**
1846
+ * BccAutocomplete
1828
1847
  **/
1829
1848
 
1830
1849
  /** Our icons are a bit smaller that Primevue's default */
1831
1850
  .p-autocomplete .p-icon {
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);
1851
+ --p-icon-size: var(--icon-size-sm);
1852
+ --p-form-field-sm-font-size: var(--icon-size-sm);
1853
+ --p-form-field-lg-font-size: var(--icon-size-md);
1854
+ }
1855
+
1856
+ .p-autocomplete .p-autocomplete-clear-icon {
1857
+ /** middle-align the icon */
1858
+ top: calc(50% - var(--icon-size-sm) / 2);
1859
+ margin-top: 0;
1835
1860
  }
1836
1861
 
1837
1862
  .p-autocomplete-clearable .p-inputtext {
1838
- flex-grow: 1;
1863
+ flex-grow: 1;
1839
1864
  }
1840
1865
 
1841
- /** Primevue 's component is missing the gap between input and dropdown */
1842
- .p-autocomplete-overlay {
1843
- margin-top: var(--p-anchor-gutter);
1866
+ .p-autocomplete-chip.p-chip {
1867
+ padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
1868
+ padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
1869
+ border-radius: var(--p-autocomplete-chip-border-radius);
1870
+ }
1871
+
1872
+ /**
1873
+ * BccSelect
1874
+ **/
1875
+ .p-select {
1876
+ --p-icon-size: var(--icon-size-sm);
1877
+ }
1878
+
1879
+ .p-select.inline-select {
1880
+ @apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
1881
+ --p-icon-size: 1.25em;
1882
+ --p-select-dropdown-width: 1.5em;
1883
+ --p-select-min-height: auto;
1884
+ }
1885
+
1886
+ .p-select.inline-select .p-select-label {
1887
+ @apply inline-block font-semibold;
1888
+ font-size: inherit;
1889
+ padding: 0 0 0 0.25em;
1890
+ }
1891
+
1892
+ .p-select.inline-select.inverse {
1893
+ --p-select-color: var(--color-neutral-0);
1894
+ --p-select-dropdown-color: var(--color-neutral-0);
1895
+ --p-select-placeholder-color: var(--color-dark-neutral-1000);
1896
+ }
1897
+
1898
+ /**
1899
+ * Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
1900
+ **/
1901
+ .p-inputicon {
1902
+ z-index: 2;
1903
+ }
1904
+
1905
+ .p-dialog-close-button {
1906
+ --p-icon-size: var(--icon-size-sm);
1907
+ }
1908
+ .p-dialog .p-button-icon:empty {
1909
+ display: none;
1910
+ }
1911
+
1912
+ .p-togglebutton {
1913
+ font-size: var(--text-sm);
1914
+ border: 0;
1915
+ }
1916
+
1917
+ .p-togglebutton-sm {
1918
+ font-size: var(--text-sm);
1919
+ }
1920
+
1921
+ .p-togglebutton-lg {
1922
+ font-size: var(--text-md);
1844
1923
  }
1845
1924
 
1846
1925
 
@@ -1848,62 +1927,110 @@
1848
1927
 
1849
1928
  /* === ./components/custom/styles.css === */
1850
1929
 
1930
+ /* from ./BccAppNavigation/BccAppNavigation.css */
1931
+ @layer components {
1932
+ .bcc-app-nav {
1933
+ @apply bg-elevation-surface-default dark:border-brand-800 sticky inset-x-0 bottom-0 z-20 overflow-visible shadow-md sm:rounded-t-xl dark:border-t;
1934
+ }
1935
+ .bcc-app-nav-container {
1936
+ @apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
1937
+ }
1938
+
1939
+ .bcc-app-nav-item {
1940
+ @apply ctx-gray-subtlest text-ctx relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
1941
+ }
1942
+
1943
+ .bcc-nav-item-icon {
1944
+ @apply size-6 opacity-50;
1945
+ }
1946
+
1947
+ .bcc-nav-item-badge {
1948
+ @apply absolute top-0 right-1 opacity-75;
1949
+ }
1950
+
1951
+ .bcc-nav-item-title {
1952
+ @apply text-heading-xs text-center opacity-50;
1953
+ }
1954
+
1955
+ .bcc-app-nav-item--active {
1956
+ @apply text-selected;
1957
+ }
1958
+
1959
+ .bcc-app-nav-item--active .bcc-nav-item-icon,
1960
+ .bcc-app-nav-item--active .bcc-nav-item-badge,
1961
+ .bcc-app-nav-item--active .bcc-nav-item-title {
1962
+ @apply opacity-100;
1963
+ }
1964
+ }
1965
+
1966
+
1967
+
1851
1968
  /* from ./BccBadge/BccBadge.css */
1852
1969
  @layer components {
1853
- .bcc-badge {
1854
- @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
1855
-
1856
- @apply bg-ctx text-ctx;
1857
- }
1858
- .bcc-badge.sm {
1859
- @apply w-4 h-4 text-heading-xs;
1860
- }
1861
- .bcc-badge.md {
1862
- @apply h-5 w-5 text-heading-sm;
1863
- }
1864
- .bcc-badge.lg {
1865
- @apply w-6 h-6 text-heading-md;
1866
- }
1867
- .bcc-badge.xl {
1868
- @apply w-8 h-8 text-heading-lg;
1869
- }
1970
+ .bcc-badge {
1971
+ @apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
1870
1972
 
1871
- .bcc-badge .bcc-badge-icon {
1872
- @apply size-4;
1873
- }
1874
- .bcc-badge.lg .bcc-badge-icon {
1875
- @apply size-5;
1876
- }
1877
- .bcc-badge.xl .bcc-badge-icon {
1878
- @apply size-6;
1879
- }
1973
+ @apply bg-ctx text-ctx;
1974
+ }
1880
1975
 
1881
- .bcc-badge.bcc-badge-text {
1882
- @apply w-auto px-2;
1883
- }
1884
- .bcc-badge-text.lg, .bcc-badge-text.xl {
1885
- @apply px-3;
1886
- }
1887
- .bcc-badge-text.border.lg, .bcc-badge-text.border.xl {
1888
- @apply px-2;
1889
- }
1890
- .bcc-badge-text.bordered.lg, .bcc-badge-text.bordered.xl {
1891
- @apply px-1;
1892
- }
1976
+ .bcc-badge.capital {
1977
+ @apply inline-flex;
1978
+ }
1979
+ .bcc-badge.gradient {
1980
+ @apply ctx-gradient;
1981
+ }
1982
+ .bcc-badge.sm {
1983
+ @apply text-heading-xs h-4 w-4;
1984
+ }
1985
+ .bcc-badge.md {
1986
+ @apply text-heading-sm h-5 w-5;
1987
+ }
1988
+ .bcc-badge.lg {
1989
+ @apply text-heading-md h-6 w-6;
1990
+ }
1991
+ .bcc-badge.xl {
1992
+ @apply text-heading-md h-8 w-8;
1993
+ }
1893
1994
 
1894
- .bcc-badge.border {
1895
- @apply border-1;
1896
- border-color: var(--ctx-background-pressed);
1897
- }
1995
+ .bcc-badge .bcc-badge-icon {
1996
+ @apply size-4;
1997
+ }
1998
+ .bcc-badge.lg .bcc-badge-icon {
1999
+ @apply size-5;
2000
+ }
2001
+ .bcc-badge.xl .bcc-badge-icon {
2002
+ @apply size-6;
2003
+ }
1898
2004
 
1899
- .bcc-badge.bordered {
1900
- @apply border-2;
1901
- border-color: var(--ctx-background-pressed);
1902
- }
2005
+ .bcc-badge.bcc-badge-text {
2006
+ @apply w-auto px-2;
2007
+ }
2008
+ .bcc-badge-text.lg,
2009
+ .bcc-badge-text.xl {
2010
+ @apply px-3;
2011
+ }
2012
+ .bcc-badge-text.border.lg,
2013
+ .bcc-badge-text.border.xl {
2014
+ @apply px-2;
2015
+ }
2016
+ .bcc-badge-text.bordered.lg,
2017
+ .bcc-badge-text.bordered.xl {
2018
+ @apply px-1;
2019
+ }
1903
2020
 
1904
- .bcc-badge.squared {
1905
- @apply rounded;
1906
- }
2021
+ .bcc-badge.border {
2022
+ @apply border-1;
2023
+ border-color: var(--ctx-background-pressed);
2024
+ }
2025
+
2026
+ .bcc-badge.bordered {
2027
+ @apply border-2;
2028
+ border-color: var(--ctx-background-pressed);
2029
+ }
2030
+
2031
+ .bcc-badge.squared {
2032
+ @apply rounded-sm;
2033
+ }
1907
2034
  }
1908
2035
 
1909
2036
 
@@ -1952,6 +2079,7 @@
1952
2079
 
1953
2080
  .bcc-capacity-indicator.is-warning {
1954
2081
  @apply ctx-yellow-subtlest;
2082
+ --bcc-capacity-indicator-circle: var(--ctx-background);
1955
2083
  }
1956
2084
 
1957
2085
  .bcc-capacity-indicator.is-full {
@@ -1981,11 +2109,11 @@
1981
2109
  }
1982
2110
 
1983
2111
  .bcc-knob-top-left {
1984
- @apply absolute top-0 left-0 p-2 text-left;
2112
+ @apply absolute top-0 left-0 text-left;
1985
2113
  }
1986
2114
 
1987
2115
  .bcc-knob-top-right {
1988
- @apply absolute top-0 right-0 p-2 text-right;
2116
+ @apply absolute top-0 right-0 text-right;
1989
2117
  }
1990
2118
  }
1991
2119
 
@@ -2004,8 +2132,8 @@
2004
2132
  .bcc-frame--raised {
2005
2133
  --ctx-background: var(--color-elevation-surface-raised-default);
2006
2134
  }
2007
- .bcc-frame--raised.rounded {
2008
- @apply rounded;
2135
+ .bcc-frame--rounded {
2136
+ @apply rounded-md;
2009
2137
  }
2010
2138
  .bcc-frame--raised.bcc-frame--shadow {
2011
2139
  @apply shadow-raised;
@@ -2076,43 +2204,53 @@
2076
2204
  @apply relative w-full;
2077
2205
  }
2078
2206
 
2079
- .bcc-nps-result .result-gauge-dial {
2207
+ .bcc-nps-result.xs {
2208
+ @apply w-24;
2209
+ }
2210
+ .bcc-nps-result.sm {
2211
+ @apply w-36;
2212
+ }
2213
+ .bcc-nps-result.md {
2214
+ @apply w-48;
2215
+ }
2216
+ .bcc-nps-result.lg {
2217
+ @apply w-60;
2218
+ }
2219
+ .bcc-nps-result.xl {
2220
+ @apply w-72;
2221
+ }
2222
+
2223
+ .bcc-nps-result .bcc-nps-result-gauge-dial {
2080
2224
  transform-origin: center;
2081
2225
  }
2082
2226
 
2083
- .bcc-nps-result.animated .result-gauge-dial {
2227
+ .bcc-nps-result.animated .bcc-nps-result-gauge-dial {
2084
2228
  transition-delay: 0.3s;
2085
2229
  transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
2086
2230
  }
2087
2231
 
2088
- .bcc-nps-result-labels.lg {
2089
- @apply bottom-[2em];
2090
- }
2091
2232
  .bcc-nps-result-labels {
2092
- @apply absolute bottom-[1em] flex w-full flex-col items-center justify-center;
2093
- }
2094
- .bcc-nps-result-labels.sm {
2095
- @apply bottom-0;
2233
+ @apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
2096
2234
  }
2097
2235
 
2098
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
2099
- @apply text-heading-xl leading-tight;
2100
- }
2101
2236
  .bcc-nps-result-labels--heading {
2102
- @apply text-heading-lg leading-none;
2237
+ @apply text-[1.25em] font-semibold leading-none;
2103
2238
  }
2104
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
2105
- @apply text-heading-md leading-none;
2239
+ .bcc-nps-result-labels--label {
2240
+ @apply text-[0.75em] text-subtlest;
2106
2241
  }
2107
2242
 
2108
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
2109
- @apply text-body-lg opacity-60;
2243
+ .bcc-nps-result.md .bcc-nps-result-labels {
2244
+ @apply text-lg;
2110
2245
  }
2111
- .bcc-nps-result-labels--label {
2112
- @apply text-body-md opacity-60;
2246
+ .bcc-nps-result.lg .bcc-nps-result-labels {
2247
+ @apply text-xl;
2248
+ }
2249
+ .bcc-nps-result.xl .bcc-nps-result-labels {
2250
+ @apply text-2xl;
2113
2251
  }
2114
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
2115
- @apply text-body-sm;
2252
+ .bcc-nps-result.full .bcc-nps-result-labels {
2253
+ @apply text-lg;
2116
2254
  }
2117
2255
  }
2118
2256
 
@@ -2121,7 +2259,7 @@
2121
2259
  /* from ./BccNpsScore/BccNpsScore.css */
2122
2260
  @layer components {
2123
2261
  .bcc-nps-score {
2124
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
2262
+ @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2125
2263
  }
2126
2264
 
2127
2265
  .bcc-nps-score--heading {
@@ -2142,7 +2280,7 @@
2142
2280
  }
2143
2281
 
2144
2282
  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2145
- @apply bg-ctx ctx-gray-subtler text-disabled;
2283
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2146
2284
  }
2147
2285
 
2148
2286
  .bcc-nps-score--number {
@@ -2152,7 +2290,7 @@
2152
2290
  }
2153
2291
 
2154
2292
  .bcc-nps-score--number:disabled {
2155
- @apply pointer-events-none cursor-default;
2293
+ @apply cursor-not-allowed;
2156
2294
  }
2157
2295
 
2158
2296
  .bcc-nps-score--number.active {
@@ -2165,7 +2303,7 @@
2165
2303
  }
2166
2304
 
2167
2305
  .bcc-nps-score--number.inactive {
2168
- @apply bg-ctx text-ctx ctx-gray-subtle;
2306
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2169
2307
  }
2170
2308
 
2171
2309
  .bcc-nps-score--number:first-child {
@@ -2269,55 +2407,6 @@
2269
2407
 
2270
2408
 
2271
2409
 
2272
- /* from ./BccStepper/BccStepper.css */
2273
- @layer components {
2274
- .bcc-stepper-container {
2275
- @apply flex flex-col;
2276
- }
2277
-
2278
- .bcc-stepper-header {
2279
- @apply mb-2 text-left;
2280
- }
2281
-
2282
- .bcc-stepper-current-step {
2283
- @apply text-heading-sm text-default;
2284
- }
2285
-
2286
- .bcc-stepper-current-label {
2287
- @apply text-body-sm pl-2 text-subtle;
2288
- }
2289
-
2290
- .bcc-stepper-indicators {
2291
- @apply flex justify-start gap-2;
2292
- }
2293
-
2294
- .bcc-stepper-indicator-container {
2295
- @apply flex flex-col items-center justify-center;
2296
- }
2297
-
2298
- .bcc-stepper-indicator {
2299
- @apply h-1.5 rounded-lg duration-300;
2300
- }
2301
-
2302
- .bcc-stepper-indicator-active {
2303
- @apply w-6;
2304
- }
2305
-
2306
- .bcc-stepper-indicator-inactive {
2307
- @apply w-1.5;
2308
- }
2309
-
2310
- .bcc-stepper-indicator-completed {
2311
- @apply bg-selected-bold-default;
2312
- }
2313
-
2314
- .bcc-stepper-indicator-pending {
2315
- @apply bg-alpha-subtle-default;
2316
- }
2317
- }
2318
-
2319
-
2320
-
2321
2410
  /* from ./BccTag/BccTag.css */
2322
2411
 
2323
2412
  @layer components {
@@ -2344,75 +2433,74 @@
2344
2433
 
2345
2434
  /* from ./BccAvatar/BccAvatar.css */
2346
2435
  @layer components {
2347
- .bcc-avatar {
2348
- --p-avatar-background: var(--ctx-background);
2349
- --p-avatar-color: var(--ctx-text);
2350
- --bcc-avatar-border: var(--ctx-border);
2351
- @apply overflow-hidden shrink-0 ctx-gray-subtler;
2352
- }
2353
- .bcc-avatar.male,
2354
- .bcc-avatar.M {
2355
- @apply ctx-blue-subtler;
2356
- }
2357
- .bcc-avatar.female,
2358
- .bcc-avatar.F {
2359
- @apply ctx-purple-subtler;
2360
- }
2361
- .bcc-avatar.male.child,
2362
- .bcc-avatar.M.child {
2363
- @apply ctx-teal-subtler;
2364
- }
2365
- .bcc-avatar.female.child,
2366
- .bcc-avatar.F.child {
2367
- @apply ctx-magenta-subtler;
2368
- }
2369
- .bcc-avatar.bordered {
2370
- @apply border-2 border-ctx;
2371
- }
2372
- .bcc-avatar.xs {
2373
- @apply size-5 text-xs;
2374
- }
2375
- .bcc-avatar.sm {
2376
- @apply size-6 text-sm;
2377
- }
2378
- .bcc-avatar.md {
2379
- @apply size-8 text-base;
2380
- }
2381
- .bcc-avatar.lg {
2382
- @apply size-10 text-lg;
2383
- }
2384
- .bcc-avatar.xl {
2385
- @apply size-12 text-xl;
2386
- }
2387
- .bcc-avatar.xxl {
2388
- @apply size-20 text-3xl;
2389
- }
2390
- .bcc-avatar.xxxl {
2391
- @apply size-24 text-4xl;
2392
- }
2436
+ .bcc-avatar {
2437
+ --p-avatar-background: var(--ctx-background);
2438
+ --p-avatar-color: var(--ctx-text);
2439
+ --bcc-avatar-border: var(--ctx-border);
2440
+ --p-icon-size: var(--icon-size-sm);
2441
+ @apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
2442
+ }
2393
2443
 
2394
- .bcc-avatar.squared.lg {
2395
- @apply text-xl;
2396
- }
2397
- .bcc-avatar.squared.xl {
2398
- @apply text-2xl;
2399
- }
2400
- .bcc-avatar.squared.xxl {
2401
- @apply text-4xl;
2402
- }
2403
- .bcc-avatar.squared.xxxl {
2404
- @apply text-5xl;
2405
- }
2444
+ .bcc-avatar.male,
2445
+ .bcc-avatar.M {
2446
+ @apply ctx-blue-subtler;
2447
+ }
2448
+ .bcc-avatar.female,
2449
+ .bcc-avatar.F {
2450
+ @apply ctx-purple-subtler;
2451
+ }
2452
+ .bcc-avatar.male.child,
2453
+ .bcc-avatar.M.child {
2454
+ @apply ctx-teal-subtler;
2455
+ }
2456
+ .bcc-avatar.female.child,
2457
+ .bcc-avatar.F.child {
2458
+ @apply ctx-magenta-subtler;
2459
+ }
2460
+ .bcc-avatar.bordered {
2461
+ @apply border-ctx border-2;
2462
+ }
2463
+ .bcc-avatar.xs {
2464
+ @apply size-5 text-xs;
2465
+ --p-icon-size: var(--icon-size-xs);
2466
+ }
2467
+ .bcc-avatar.sm {
2468
+ @apply size-6 text-xs;
2469
+ --p-icon-size: var(--icon-size-xs);
2470
+ }
2471
+ /* .bcc-avatar.md {
2472
+ same as default
2473
+ }*/
2474
+ .bcc-avatar.lg {
2475
+ @apply text-md size-10;
2476
+ --p-icon-size: var(--icon-size-md);
2477
+ }
2478
+ .bcc-avatar.xl {
2479
+ @apply size-12 text-xl;
2480
+ --p-icon-size: var(--icon-size-lg);
2481
+ }
2482
+ .bcc-avatar.xxl {
2483
+ @apply size-20 text-3xl;
2484
+ --p-icon-size: var(--icon-size-xl);
2485
+ }
2486
+ .bcc-avatar.xxxl {
2487
+ @apply size-24 text-4xl;
2488
+ --p-icon-size: var(--icon-size-xl);
2489
+ }
2406
2490
 
2491
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
2492
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
2493
+ transform: translate(40%, -40%);
2494
+ }
2407
2495
 
2408
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2409
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
2410
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2411
- transform: translate(25%, -25%);
2412
- }
2496
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
2497
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
2498
+ transform: translate(20%, -20%);
2499
+ }
2413
2500
  }
2414
2501
 
2415
2502
 
2503
+
2416
2504
  /* from ./BccTabs/BccTabs.css */
2417
2505
  @layer components {
2418
2506
  .bcc-tabs-fill.p-tabs {
@@ -2431,6 +2519,9 @@
2431
2519
  height: 100%;
2432
2520
  overflow: auto;
2433
2521
  }
2522
+ .bcc-tabs-fluid.p-tabs {
2523
+ width: 100%;
2524
+ }
2434
2525
  }
2435
2526
 
2436
2527
 
@@ -2453,22 +2544,30 @@
2453
2544
 
2454
2545
 
2455
2546
 
2547
+ :root,
2456
2548
  :host {
2457
- @apply font-sans antialiased p-0 m-0;
2458
- -webkit-font-smoothing: antialiased;
2459
- -moz-osx-font-smoothing: grayscale;
2549
+ --font-sans: 'Archivo', system-ui, sans-serif;
2550
+ @apply m-0 p-0 font-sans antialiased;
2551
+ -webkit-font-smoothing: antialiased;
2552
+ -moz-osx-font-smoothing: grayscale;
2553
+ line-height: 1.2;
2554
+ font-kerning: normal;
2555
+ }
2556
+
2557
+ hr {
2558
+ border-color: var(--color-border-default);
2460
2559
  }
2461
2560
 
2462
2561
  b,
2463
2562
  strong,
2464
2563
  .bold {
2465
- font-weight: bold;
2466
- --ctx-text: var(--ctx-text-bold);
2564
+ font-weight: bold;
2565
+ --ctx-text: var(--ctx-text-bold);
2467
2566
  }
2468
2567
 
2469
2568
  /* Disable state */
2470
2569
  :disabled,
2471
2570
  .disabled {
2472
- cursor: not-allowed;
2473
- pointer-events: none;
2571
+ cursor: not-allowed;
2572
+ pointer-events: none;
2474
2573
  }