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

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 (24) hide show
  1. package/README.md +9 -0
  2. package/dist/component-library.js +31808 -31435
  3. package/dist/component-library.umd.cjs +4095 -4095
  4. package/dist/index.css +1 -1
  5. package/dist/theme.css +479 -311
  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/BccDialKnob/BccDialKnob.vue.d.ts +1 -1
  9. package/dist-types/components/custom/BccNpsResult/BccNpsResult.vue.d.ts +2 -2
  10. package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +1 -1
  11. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +28 -0
  12. package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +47 -0
  13. package/dist-types/components/custom/index.d.ts +6 -6
  14. package/dist-types/components/{custom → wrapped}/BccAvatar/BccAvatar.vue.d.ts +2 -2
  15. package/dist-types/components/wrapped/BccButton.vue.d.ts +1 -0
  16. package/dist-types/components/wrapped/BccCheckbox.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/{custom → wrapped}/BccTabs/BccTabs.vue.d.ts +1 -1
  21. package/dist-types/components/{custom → wrapped}/BccToggle/BccToggle.vue.d.ts +12 -1
  22. package/dist-types/components/wrapped/index.d.ts +13 -0
  23. package/dist-types/index.d.ts +13 -6
  24. package/package.json +103 -101
package/dist/theme.css CHANGED
@@ -1,9 +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
4
 
4
- @import "tailwindcss";
5
- @import "@bcc-code/design-tokens/tailwind";
6
- @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';
7
8
 
8
9
 
9
10
  /* === ./styles/theme.css === */
@@ -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,87 +1822,157 @@
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
+ * 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-treeselect-overlay {
1836
+ margin: var(--p-anchor-gutter) 0;
1837
+ }
1838
+
1839
+ /* This fix is to ensure overlay badge is contained within the size of the component it wraps */
1840
+ .p-overlaybadge {
1841
+ display: inline-block;
1842
+ }
1843
+
1844
+ /**
1845
+ * BccAutocomplete
1846
+ **/
1847
+
1848
+ /** Our icons are a bit smaller that Primevue's default */
1823
1849
  .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;
1850
+ --p-icon-size: var(--icon-size-sm);
1851
+ --p-form-field-sm-font-size: var(--icon-size-sm);
1852
+ --p-form-field-lg-font-size: var(--icon-size-md);
1827
1853
  }
1828
1854
 
1855
+ .p-autocomplete .p-autocomplete-clear-icon {
1856
+ /** middle-align the icon */
1857
+ top: calc(50% - var(--icon-size-sm) / 2);
1858
+ margin-top: 0;
1859
+ }
1860
+
1861
+ .p-autocomplete-clearable .p-inputtext {
1862
+ flex-grow: 1;
1863
+ }
1864
+
1865
+ .p-autocomplete-chip.p-chip {
1866
+ padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
1867
+ padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
1868
+ border-radius: var(--p-autocomplete-chip-border-radius);
1869
+ }
1870
+
1871
+ /**
1872
+ * BccSelect
1873
+ **/
1874
+ .p-select {
1875
+ --p-icon-size: var(--icon-size-sm);
1876
+ }
1877
+
1878
+ .p-select.inline-select {
1879
+ @apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
1880
+ --p-icon-size: 1.25em;
1881
+ --p-select-dropdown-width: 1.5em;
1882
+ --p-select-min-height: auto;
1883
+ }
1884
+
1885
+ .p-select.inline-select .p-select-label {
1886
+ @apply inline-block font-semibold;
1887
+ font-size: inherit;
1888
+ padding: 0 0 0 0.25em;
1889
+ }
1890
+
1891
+ .p-select.inline-select.inverse {
1892
+ --p-select-color: var(--color-neutral-0);
1893
+ --p-select-dropdown-color: var(--color-neutral-0);
1894
+ --p-select-placeholder-color: var(--color-dark-neutral-1000);
1895
+ }
1896
+
1897
+ /**
1898
+ * Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
1899
+ **/
1900
+ .p-inputicon {
1901
+ z-index: 2;
1902
+ }
1903
+
1904
+ .p-dialog-close-button .p-icon {
1905
+ height: var(--icon-size-sm);
1906
+ width: var(--icon-size-sm);
1907
+ }
1908
+ .p-dialog .p-button-icon:empty {
1909
+ display: none;
1910
+ }
1911
+
1912
+
1829
1913
 
1830
1914
 
1831
1915
  /* === ./components/custom/styles.css === */
1832
1916
 
1833
- /* from ./BccAvatar/BccAvatar.css */
1917
+ /* from ./BccAppNavigation/BccAppNavigation.css */
1834
1918
  @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
- }
1919
+ .bcc-app-nav {
1920
+ @apply pb-inset-bottom-2 absolute inset-x-0 bottom-0 z-20 flex w-full items-center justify-center overflow-visible;
1921
+ }
1922
+ .bcc-app-nav .bcc-app-nav-container {
1923
+ @apply dark:border-default mx-auto flex items-center justify-center border border-white p-0.5;
1924
+
1925
+ border-radius: 20px;
1926
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
1927
+ backdrop-filter: blur(12px) saturate(160%);
1928
+ -webkit-backdrop-filter: blur(12px) saturate(160%);
1929
+
1930
+ max-width: min(96%, var(--container-lg));
1931
+ box-shadow:
1932
+ /* inner bevel (top-left highlight, bottom-right shade) */
1933
+ inset 0 0 32px white,
1934
+ inset 1px 0 4px -1px rgba(0, 0, 0, 0.3),
1935
+ inset 1px -2px 0 -1px white,
1936
+ inset -1px 2px 0 -1px white,
1937
+ 0px -1px 1px -2px rgba(16, 24, 40, 0.05),
1938
+ 0px 4px 6px -2px rgba(16, 24, 40, 0.05),
1939
+ 0px 12px 16px -4px rgba(16, 24, 40, 0.1);
1940
+ }
1941
+ .dark .bcc-app-nav {
1942
+ @apply backdrop-blur-sm;
1943
+ background: transparent;
1944
+ box-shadow: none;
1945
+ }
1881
1946
 
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
- }
1947
+ .bcc-app-nav .bcc-app-nav-item {
1948
+ @apply col text-text-subtlest relative h-12 min-w-16 cursor-pointer rounded-xl border border-transparent px-2 opacity-90 transition-all select-none focus:outline-none;
1949
+ }
1894
1950
 
1951
+ .bcc-app-nav .bcc-app-nav-item--active {
1952
+ @apply text-brand-default bg-dark-neutral-alpha-500-a border-white opacity-100;
1953
+ box-shadow:
1954
+ /* inner bevel (top-left highlight, bottom-right shade) */
1955
+ inset 1px 0 4px -1px rgba(0, 100, 50, 0.3),
1956
+ inset 1px 2px 0 -1px white,
1957
+ inset -1px -2px 0 -1px white,
1958
+ inset 0 0 1px 0 rgba(0, 100, 50, 0.1),
1959
+ inset 0 -3px 2px 0 rgba(0, 100, 50, 0.1);
1960
+ }
1895
1961
 
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
- }
1962
+ .dark .bcc-app-nav .bcc-app-nav-item--active {
1963
+ @apply bg-neutral-alpha-500-a text-brand-bold border-transparent;
1964
+ box-shadow:
1965
+ /* inner bevel (top-left highlight, bottom-right shade) */
1966
+ inset 1px 0 4px -1px var(--blue-500),
1967
+ inset 1px 2px 0 -1px var(--blue-900),
1968
+ inset -1px -2px 0 -1px var(--blue-900),
1969
+ inset 0 0 1px 0 var(--blue-300),
1970
+ inset 0 -3px 2px 0 var(--blue-300);
1971
+ }
1901
1972
  }
1902
1973
 
1903
1974
 
1975
+
1904
1976
  /* from ./BccBadge/BccBadge.css */
1905
1977
  @layer components {
1906
1978
  .bcc-badge {
@@ -1908,6 +1980,13 @@
1908
1980
 
1909
1981
  @apply bg-ctx text-ctx;
1910
1982
  }
1983
+
1984
+ .bcc-badge.capital {
1985
+ @apply inline-flex;
1986
+ }
1987
+ .bcc-badge.gradient {
1988
+ @apply ctx-gradient;
1989
+ }
1911
1990
  .bcc-badge.sm {
1912
1991
  @apply w-4 h-4 text-heading-xs;
1913
1992
  }
@@ -1918,7 +1997,7 @@
1918
1997
  @apply w-6 h-6 text-heading-md;
1919
1998
  }
1920
1999
  .bcc-badge.xl {
1921
- @apply w-8 h-8 text-heading-lg;
2000
+ @apply w-8 h-8 text-heading-md;
1922
2001
  }
1923
2002
 
1924
2003
  .bcc-badge .bcc-badge-icon {
@@ -1955,7 +2034,7 @@
1955
2034
  }
1956
2035
 
1957
2036
  .bcc-badge.squared {
1958
- @apply rounded;
2037
+ @apply rounded-sm;
1959
2038
  }
1960
2039
  }
1961
2040
 
@@ -2034,11 +2113,11 @@
2034
2113
  }
2035
2114
 
2036
2115
  .bcc-knob-top-left {
2037
- @apply absolute top-0 left-0 p-2 text-left;
2116
+ @apply absolute top-0 left-0 text-left;
2038
2117
  }
2039
2118
 
2040
2119
  .bcc-knob-top-right {
2041
- @apply absolute top-0 right-0 p-2 text-right;
2120
+ @apply absolute top-0 right-0 text-right;
2042
2121
  }
2043
2122
  }
2044
2123
 
@@ -2057,8 +2136,8 @@
2057
2136
  .bcc-frame--raised {
2058
2137
  --ctx-background: var(--color-elevation-surface-raised-default);
2059
2138
  }
2060
- .bcc-frame--raised.rounded {
2061
- @apply rounded;
2139
+ .bcc-frame--rounded {
2140
+ @apply rounded-md;
2062
2141
  }
2063
2142
  .bcc-frame--raised.bcc-frame--shadow {
2064
2143
  @apply shadow-raised;
@@ -2129,43 +2208,53 @@
2129
2208
  @apply relative w-full;
2130
2209
  }
2131
2210
 
2132
- .bcc-nps-result .result-gauge-dial {
2211
+ .bcc-nps-result.xs {
2212
+ @apply w-24;
2213
+ }
2214
+ .bcc-nps-result.sm {
2215
+ @apply w-36;
2216
+ }
2217
+ .bcc-nps-result.md {
2218
+ @apply w-48;
2219
+ }
2220
+ .bcc-nps-result.lg {
2221
+ @apply w-60;
2222
+ }
2223
+ .bcc-nps-result.xl {
2224
+ @apply w-72;
2225
+ }
2226
+
2227
+ .bcc-nps-result .bcc-nps-result-gauge-dial {
2133
2228
  transform-origin: center;
2134
2229
  }
2135
2230
 
2136
- .bcc-nps-result.animated .result-gauge-dial {
2231
+ .bcc-nps-result.animated .bcc-nps-result-gauge-dial {
2137
2232
  transition-delay: 0.3s;
2138
2233
  transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
2139
2234
  }
2140
2235
 
2141
- .bcc-nps-result-labels.lg {
2142
- @apply bottom-[2em];
2143
- }
2144
2236
  .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;
2237
+ @apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
2149
2238
  }
2150
2239
 
2151
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
2152
- @apply text-heading-xl leading-tight;
2153
- }
2154
2240
  .bcc-nps-result-labels--heading {
2155
- @apply text-heading-lg leading-none;
2241
+ @apply text-[1.25em] font-semibold leading-none;
2156
2242
  }
2157
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
2158
- @apply text-heading-md leading-none;
2243
+ .bcc-nps-result-labels--label {
2244
+ @apply text-[0.75em] text-subtlest;
2159
2245
  }
2160
2246
 
2161
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
2162
- @apply text-body-lg opacity-60;
2247
+ .bcc-nps-result.md .bcc-nps-result-labels {
2248
+ @apply text-lg;
2163
2249
  }
2164
- .bcc-nps-result-labels--label {
2165
- @apply text-body-md opacity-60;
2250
+ .bcc-nps-result.lg .bcc-nps-result-labels {
2251
+ @apply text-xl;
2166
2252
  }
2167
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
2168
- @apply text-body-sm;
2253
+ .bcc-nps-result.xl .bcc-nps-result-labels {
2254
+ @apply text-2xl;
2255
+ }
2256
+ .bcc-nps-result.full .bcc-nps-result-labels {
2257
+ @apply text-lg;
2169
2258
  }
2170
2259
  }
2171
2260
 
@@ -2174,7 +2263,7 @@
2174
2263
  /* from ./BccNpsScore/BccNpsScore.css */
2175
2264
  @layer components {
2176
2265
  .bcc-nps-score {
2177
- @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2;
2266
+ @apply min-w-[280px] p-4 text-body-sm flex flex-col gap-y-2 select-none;
2178
2267
  }
2179
2268
 
2180
2269
  .bcc-nps-score--heading {
@@ -2195,7 +2284,7 @@
2195
2284
  }
2196
2285
 
2197
2286
  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
2198
- @apply bg-ctx ctx-gray-subtler text-disabled;
2287
+ @apply bg-ctx ctx-gray-subtlest text-disabled;
2199
2288
  }
2200
2289
 
2201
2290
  .bcc-nps-score--number {
@@ -2205,7 +2294,7 @@
2205
2294
  }
2206
2295
 
2207
2296
  .bcc-nps-score--number:disabled {
2208
- @apply pointer-events-none cursor-default;
2297
+ @apply cursor-not-allowed;
2209
2298
  }
2210
2299
 
2211
2300
  .bcc-nps-score--number.active {
@@ -2218,7 +2307,7 @@
2218
2307
  }
2219
2308
 
2220
2309
  .bcc-nps-score--number.inactive {
2221
- @apply bg-ctx text-ctx ctx-gray-subtle;
2310
+ @apply bg-ctx text-ctx ctx-gray-subtler;
2222
2311
  }
2223
2312
 
2224
2313
  .bcc-nps-score--number:first-child {
@@ -2322,6 +2411,100 @@
2322
2411
 
2323
2412
 
2324
2413
 
2414
+ /* from ./BccTag/BccTag.css */
2415
+
2416
+ @layer components {
2417
+ .bcc-tag.bcc-badge {
2418
+ @apply w-auto;
2419
+ }
2420
+ .bcc-tag.bcc-badge.md {
2421
+ @apply font-regular h-6;
2422
+ }
2423
+ .bcc-tag.bcc-badge.sm {
2424
+ @apply font-regular h-5;
2425
+ }
2426
+ .bcc-tag.bcc-badge.lg {
2427
+ @apply font-regular h-8;
2428
+ }
2429
+ .bcc-tag.bcc-badge.xl {
2430
+ @apply font-regular h-10;
2431
+ }
2432
+ }
2433
+
2434
+
2435
+
2436
+ /* === ./components/wrapped/styles.css === */
2437
+
2438
+ /* from ./BccAvatar/BccAvatar.css */
2439
+ @layer components {
2440
+ .bcc-avatar {
2441
+ --p-avatar-background: var(--ctx-background);
2442
+ --p-avatar-color: var(--ctx-text);
2443
+ --bcc-avatar-border: var(--ctx-border);
2444
+ --p-icon-size: var(--icon-size-sm);
2445
+ @apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
2446
+ }
2447
+
2448
+ .bcc-avatar.male,
2449
+ .bcc-avatar.M {
2450
+ @apply ctx-blue-subtler;
2451
+ }
2452
+ .bcc-avatar.female,
2453
+ .bcc-avatar.F {
2454
+ @apply ctx-purple-subtler;
2455
+ }
2456
+ .bcc-avatar.male.child,
2457
+ .bcc-avatar.M.child {
2458
+ @apply ctx-teal-subtler;
2459
+ }
2460
+ .bcc-avatar.female.child,
2461
+ .bcc-avatar.F.child {
2462
+ @apply ctx-magenta-subtler;
2463
+ }
2464
+ .bcc-avatar.bordered {
2465
+ @apply border-ctx border-2;
2466
+ }
2467
+ .bcc-avatar.xs {
2468
+ @apply size-5 text-xs;
2469
+ --p-icon-size: var(--icon-size-xs);
2470
+ }
2471
+ .bcc-avatar.sm {
2472
+ @apply size-6 text-xs;
2473
+ --p-icon-size: var(--icon-size-xs);
2474
+ }
2475
+ /* .bcc-avatar.md {
2476
+ same as default
2477
+ }*/
2478
+ .bcc-avatar.lg {
2479
+ @apply text-md size-10;
2480
+ --p-icon-size: var(--icon-size-md);
2481
+ }
2482
+ .bcc-avatar.xl {
2483
+ @apply size-12 text-xl;
2484
+ --p-icon-size: var(--icon-size-lg);
2485
+ }
2486
+ .bcc-avatar.xxl {
2487
+ @apply size-20 text-3xl;
2488
+ --p-icon-size: var(--icon-size-xl);
2489
+ }
2490
+ .bcc-avatar.xxxl {
2491
+ @apply size-24 text-4xl;
2492
+ --p-icon-size: var(--icon-size-xl);
2493
+ }
2494
+
2495
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
2496
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
2497
+ transform: translate(40%, -40%);
2498
+ }
2499
+
2500
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
2501
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
2502
+ transform: translate(20%, -20%);
2503
+ }
2504
+ }
2505
+
2506
+
2507
+
2325
2508
  /* from ./BccTabs/BccTabs.css */
2326
2509
  @layer components {
2327
2510
  .bcc-tabs-fill.p-tabs {
@@ -2343,27 +2526,6 @@
2343
2526
  }
2344
2527
 
2345
2528
 
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
2529
  /* from ./BccToggle/BccToggle.css */
2368
2530
  @layer components {
2369
2531
  .p-toggleswitch.useCtx {
@@ -2383,22 +2545,28 @@
2383
2545
 
2384
2546
 
2385
2547
 
2548
+ :root,
2386
2549
  :host {
2387
- @apply font-sans antialiased p-0 m-0;
2388
- -webkit-font-smoothing: antialiased;
2389
- -moz-osx-font-smoothing: grayscale;
2550
+ --font-sans: 'Archivo', system-ui, sans-serif;
2551
+ @apply m-0 p-0 font-sans antialiased;
2552
+ -webkit-font-smoothing: antialiased;
2553
+ -moz-osx-font-smoothing: grayscale;
2554
+ }
2555
+
2556
+ hr {
2557
+ border-color: var(--color-border-default);
2390
2558
  }
2391
2559
 
2392
2560
  b,
2393
2561
  strong,
2394
2562
  .bold {
2395
- font-weight: bold;
2396
- --ctx-text: var(--ctx-text-bold);
2563
+ font-weight: bold;
2564
+ --ctx-text: var(--ctx-text-bold);
2397
2565
  }
2398
2566
 
2399
2567
  /* Disable state */
2400
2568
  :disabled,
2401
2569
  .disabled {
2402
- cursor: not-allowed;
2403
- pointer-events: none;
2570
+ cursor: not-allowed;
2571
+ pointer-events: none;
2404
2572
  }