@bcc-code/component-library-vue 0.6.8 → 0.7.0

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 (10) hide show
  1. package/dist/component-library.js +4279 -4492
  2. package/dist/component-library.umd.cjs +171 -367
  3. package/dist/index.css +1 -1
  4. package/dist/theme.css +237 -181
  5. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +27 -0
  6. package/dist-types/components/custom/index.d.ts +2 -0
  7. package/dist-types/components/wrapped/BccCheckbox.vue.d.ts +1 -0
  8. package/dist-types/index.d.ts +0 -1
  9. package/package.json +1 -1
  10. package/dist-types/components/custom/BccStepper/BccStepper.vue.d.ts +0 -16
package/dist/theme.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
2
2
  @layer theme, base, tailwind, primevue;
3
+ @import "@bcc-code/design-tokens/css";
3
4
 
4
5
  @import "tailwindcss";
5
6
  @import "@bcc-code/design-tokens/tailwind";
@@ -648,7 +649,7 @@
648
649
 
649
650
  /* Capitalize first letter */
650
651
  @utility capital {
651
- display: inline-flex;
652
+ display: inline-block;
652
653
  &::first-letter {
653
654
  text-transform: uppercase;
654
655
  }
@@ -684,16 +685,16 @@
684
685
  @utility ctx-blue-bolder {
685
686
  --ctx-text: var(--color-default-blue-200);
686
687
  --ctx-text-bold: var(--color-default-blue-100);
687
- --ctx-background: var(--color-default-blue-800);
688
- --ctx-gradient: var(--color-default-blue-700);
688
+ --ctx-background: var(--color-default-blue-700);
689
+ --ctx-gradient: var(--color-default-blue-800);
689
690
  --ctx-border: var(--color-default-blue-700);
690
691
  --ctx-shadow: var(--color-neutral-alpha-500A);
691
692
  --ctx-text-hover: var(--color-default-blue-200);
692
693
  --ctx-text-pressed: var(--color-default-blue-200);
693
- --ctx-background-hover: var(--color-default-blue-700);
694
- --ctx-background-pressed: var(--color-default-blue-600);
695
- --ctx-gradient-hover: var(--color-default-blue-600);
696
- --ctx-gradient-pressed: var(--color-default-blue-600);
694
+ --ctx-background-hover: var(--color-default-blue-800);
695
+ --ctx-background-pressed: var(--color-default-blue-900);
696
+ --ctx-gradient-hover: var(--color-default-blue-900);
697
+ --ctx-gradient-pressed: var(--color-default-blue-900);
697
698
  --ctx-border-hover: var(--color-default-blue-700);
698
699
  --ctx-border-pressed: var(--color-default-blue-700);
699
700
  }
@@ -701,16 +702,16 @@
701
702
  @utility ctx-blue-subtle {
702
703
  --ctx-text: var(--color-default-blue-900);
703
704
  --ctx-text-bold: var(--color-default-blue-1000);
704
- --ctx-background: var(--color-default-blue-300);
705
- --ctx-gradient: var(--color-default-blue-400);
705
+ --ctx-background: var(--color-default-blue-400);
706
+ --ctx-gradient: var(--color-default-blue-300);
706
707
  --ctx-border: var(--color-default-blue-500);
707
708
  --ctx-shadow: var(--color-neutral-alpha-500A);
708
709
  --ctx-text-hover: var(--color-default-blue-900);
709
710
  --ctx-text-pressed: var(--color-default-blue-900);
710
- --ctx-background-hover: var(--color-default-blue-400);
711
- --ctx-background-pressed: var(--color-default-blue-500);
712
- --ctx-gradient-hover: var(--color-default-blue-500);
713
- --ctx-gradient-pressed: var(--color-default-blue-500);
711
+ --ctx-background-hover: var(--color-default-blue-300);
712
+ --ctx-background-pressed: var(--color-default-blue-200);
713
+ --ctx-gradient-hover: var(--color-default-blue-200);
714
+ --ctx-gradient-pressed: var(--color-default-blue-200);
714
715
  --ctx-border-hover: var(--color-default-blue-500);
715
716
  --ctx-border-pressed: var(--color-default-blue-500);
716
717
  }
@@ -752,16 +753,16 @@
752
753
  @utility ctx-brand-bold {
753
754
  --ctx-text: var(--color-default-bcc-200);
754
755
  --ctx-text-bold: var(--color-default-neutral-100);
755
- --ctx-background: var(--color-default-bcc-800);
756
+ --ctx-background: var(--color-default-bcc-600);
756
757
  --ctx-gradient: var(--color-default-bcc-700);
757
758
  --ctx-border: var(--color-default-bcc-600);
758
759
  --ctx-shadow: var(--color-neutral-alpha-500A);
759
760
  --ctx-text-hover: var(--color-default-bcc-200);
760
761
  --ctx-text-pressed: var(--color-default-bcc-200);
761
762
  --ctx-background-hover: var(--color-default-bcc-700);
762
- --ctx-background-pressed: var(--color-default-bcc-600);
763
- --ctx-gradient-hover: var(--color-default-bcc-600);
764
- --ctx-gradient-pressed: var(--color-default-bcc-600);
763
+ --ctx-background-pressed: var(--color-default-bcc-800);
764
+ --ctx-gradient-hover: var(--color-default-bcc-800);
765
+ --ctx-gradient-pressed: var(--color-default-bcc-800);
765
766
  --ctx-border-hover: var(--color-default-bcc-600);
766
767
  --ctx-border-pressed: var(--color-default-bcc-600);
767
768
  }
@@ -769,16 +770,16 @@
769
770
  @utility ctx-brand-bolder {
770
771
  --ctx-text: var(--color-default-bcc-100);
771
772
  --ctx-text-bold: var(--color-default-neutral-0);
772
- --ctx-background: var(--color-default-bcc-900);
773
+ --ctx-background: var(--color-default-bcc-700);
773
774
  --ctx-gradient: var(--color-default-bcc-800);
774
775
  --ctx-border: var(--color-default-bcc-700);
775
776
  --ctx-shadow: var(--color-neutral-alpha-500A);
776
777
  --ctx-text-hover: var(--color-default-bcc-100);
777
778
  --ctx-text-pressed: var(--color-default-bcc-100);
778
779
  --ctx-background-hover: var(--color-default-bcc-800);
779
- --ctx-background-pressed: var(--color-default-bcc-700);
780
- --ctx-gradient-hover: var(--color-default-bcc-700);
781
- --ctx-gradient-pressed: var(--color-default-bcc-700);
780
+ --ctx-background-pressed: var(--color-default-bcc-900);
781
+ --ctx-gradient-hover: var(--color-default-bcc-900);
782
+ --ctx-gradient-pressed: var(--color-default-bcc-900);
782
783
  --ctx-border-hover: var(--color-default-bcc-700);
783
784
  --ctx-border-pressed: var(--color-default-bcc-700);
784
785
  }
@@ -818,31 +819,31 @@
818
819
  }
819
820
 
820
821
  @utility ctx-brand-subtle {
821
- --ctx-text: var(--color-default-neutral-900);
822
- --ctx-text-bold: var(--color-default-bcc-1000);
823
- --ctx-background: var(--color-default-bcc-300);
824
- --ctx-gradient: var(--color-default-bcc-400);
822
+ --ctx-text: var(--color-default-bcc-1000);
823
+ --ctx-text-bold: var(--color-default-bcc-900);
824
+ --ctx-background: var(--color-default-bcc-400);
825
+ --ctx-gradient: var(--color-default-bcc-300);
825
826
  --ctx-border: var(--color-default-bcc-500);
826
827
  --ctx-shadow: var(--color-neutral-alpha-500A);
827
- --ctx-text-hover: var(--color-default-neutral-900);
828
- --ctx-text-pressed: var(--color-default-neutral-900);
829
- --ctx-background-hover: var(--color-default-bcc-400);
830
- --ctx-background-pressed: var(--color-default-bcc-500);
831
- --ctx-gradient-hover: var(--color-default-bcc-500);
832
- --ctx-gradient-pressed: var(--color-default-bcc-500);
828
+ --ctx-text-hover: var(--color-default-bcc-1000);
829
+ --ctx-text-pressed: var(--color-default-bcc-1000);
830
+ --ctx-background-hover: var(--color-default-bcc-300);
831
+ --ctx-background-pressed: var(--color-default-bcc-200);
832
+ --ctx-gradient-hover: var(--color-default-bcc-200);
833
+ --ctx-gradient-pressed: var(--color-default-bcc-200);
833
834
  --ctx-border-hover: var(--color-default-bcc-500);
834
835
  --ctx-border-pressed: var(--color-default-bcc-500);
835
836
  }
836
837
 
837
838
  @utility ctx-brand-subtler {
838
- --ctx-text: var(--color-default-neutral-800);
839
- --ctx-text-bold: var(--color-default-bcc-900);
839
+ --ctx-text: var(--color-default-bcc-900);
840
+ --ctx-text-bold: var(--color-default-bcc-800);
840
841
  --ctx-background: var(--color-default-bcc-200);
841
842
  --ctx-gradient: var(--color-default-bcc-300);
842
843
  --ctx-border: var(--color-default-bcc-400);
843
844
  --ctx-shadow: var(--color-neutral-alpha-500A);
844
- --ctx-text-hover: var(--color-default-neutral-800);
845
- --ctx-text-pressed: var(--color-default-neutral-800);
845
+ --ctx-text-hover: var(--color-default-bcc-900);
846
+ --ctx-text-pressed: var(--color-default-bcc-900);
846
847
  --ctx-background-hover: var(--color-default-bcc-300);
847
848
  --ctx-background-pressed: var(--color-default-bcc-400);
848
849
  --ctx-gradient-hover: var(--color-default-bcc-400);
@@ -852,14 +853,14 @@
852
853
  }
853
854
 
854
855
  @utility ctx-brand-subtlest {
855
- --ctx-text: var(--color-default-neutral-900);
856
- --ctx-text-bold: var(--color-default-bcc-1000);
856
+ --ctx-text: var(--color-default-bcc-800);
857
+ --ctx-text-bold: var(--color-default-bcc-700);
857
858
  --ctx-background: var(--color-default-bcc-100);
858
859
  --ctx-gradient: var(--color-default-bcc-200);
859
860
  --ctx-border: var(--color-default-bcc-300);
860
861
  --ctx-shadow: var(--color-neutral-alpha-500A);
861
- --ctx-text-hover: var(--color-default-neutral-900);
862
- --ctx-text-pressed: var(--color-default-neutral-900);
862
+ --ctx-text-hover: var(--color-default-bcc-800);
863
+ --ctx-text-pressed: var(--color-default-bcc-800);
863
864
  --ctx-background-hover: var(--color-default-bcc-200);
864
865
  --ctx-background-pressed: var(--color-default-bcc-300);
865
866
  --ctx-gradient-hover: var(--color-default-bcc-300);
@@ -871,16 +872,16 @@
871
872
  @utility ctx-brown-bolder {
872
873
  --ctx-text: var(--color-default-brown-200);
873
874
  --ctx-text-bold: var(--color-default-brown-100);
874
- --ctx-background: var(--color-default-brown-800);
875
- --ctx-gradient: var(--color-default-brown-700);
875
+ --ctx-background: var(--color-default-brown-700);
876
+ --ctx-gradient: var(--color-default-brown-800);
876
877
  --ctx-border: var(--color-default-brown-700);
877
878
  --ctx-shadow: var(--color-neutral-alpha-500A);
878
879
  --ctx-text-hover: var(--color-default-brown-200);
879
880
  --ctx-text-pressed: var(--color-default-brown-200);
880
- --ctx-background-hover: var(--color-default-brown-700);
881
- --ctx-background-pressed: var(--color-default-brown-600);
882
- --ctx-gradient-hover: var(--color-default-brown-600);
883
- --ctx-gradient-pressed: var(--color-default-brown-600);
881
+ --ctx-background-hover: var(--color-default-brown-800);
882
+ --ctx-background-pressed: var(--color-default-brown-900);
883
+ --ctx-gradient-hover: var(--color-default-brown-900);
884
+ --ctx-gradient-pressed: var(--color-default-brown-900);
884
885
  --ctx-border-hover: var(--color-default-brown-700);
885
886
  --ctx-border-pressed: var(--color-default-brown-700);
886
887
  }
@@ -888,16 +889,16 @@
888
889
  @utility ctx-brown-subtle {
889
890
  --ctx-text: var(--color-default-brown-900);
890
891
  --ctx-text-bold: var(--color-default-brown-1000);
891
- --ctx-background: var(--color-default-brown-300);
892
- --ctx-gradient: var(--color-default-brown-400);
892
+ --ctx-background: var(--color-default-brown-400);
893
+ --ctx-gradient: var(--color-default-brown-300);
893
894
  --ctx-border: var(--color-default-brown-500);
894
895
  --ctx-shadow: var(--color-neutral-alpha-500A);
895
896
  --ctx-text-hover: var(--color-default-brown-900);
896
897
  --ctx-text-pressed: var(--color-default-brown-900);
897
- --ctx-background-hover: var(--color-default-brown-400);
898
- --ctx-background-pressed: var(--color-default-brown-500);
899
- --ctx-gradient-hover: var(--color-default-brown-500);
900
- --ctx-gradient-pressed: var(--color-default-brown-500);
898
+ --ctx-background-hover: var(--color-default-brown-300);
899
+ --ctx-background-pressed: var(--color-default-brown-200);
900
+ --ctx-gradient-hover: var(--color-default-brown-200);
901
+ --ctx-gradient-pressed: var(--color-default-brown-200);
901
902
  --ctx-border-hover: var(--color-default-brown-500);
902
903
  --ctx-border-pressed: var(--color-default-brown-500);
903
904
  }
@@ -937,18 +938,18 @@
937
938
  }
938
939
 
939
940
  @utility ctx-danger-bolder {
940
- --ctx-text: var(--color-default-neutral-100);
941
- --ctx-text-bold: var(--color-default-neutral-0);
942
- --ctx-background: var(--color-default-red-800);
943
- --ctx-gradient: var(--color-default-red-700);
941
+ --ctx-text: var(--color-default-red-200);
942
+ --ctx-text-bold: var(--color-default-red-100);
943
+ --ctx-background: var(--color-default-red-700);
944
+ --ctx-gradient: var(--color-default-red-800);
944
945
  --ctx-border: var(--color-default-red-700);
945
946
  --ctx-shadow: var(--color-neutral-alpha-500A);
946
- --ctx-text-hover: var(--color-default-neutral-100);
947
- --ctx-text-pressed: var(--color-default-neutral-100);
948
- --ctx-background-hover: var(--color-default-red-700);
949
- --ctx-background-pressed: var(--color-default-red-600);
950
- --ctx-gradient-hover: var(--color-default-red-600);
951
- --ctx-gradient-pressed: var(--color-default-red-600);
947
+ --ctx-text-hover: var(--color-default-red-200);
948
+ --ctx-text-pressed: var(--color-default-red-200);
949
+ --ctx-background-hover: var(--color-default-red-800);
950
+ --ctx-background-pressed: var(--color-default-red-900);
951
+ --ctx-gradient-hover: var(--color-default-red-900);
952
+ --ctx-gradient-pressed: var(--color-default-red-900);
952
953
  --ctx-border-hover: var(--color-default-red-700);
953
954
  --ctx-border-pressed: var(--color-default-red-700);
954
955
  }
@@ -990,16 +991,16 @@
990
991
  @utility ctx-gray-subtle {
991
992
  --ctx-text: var(--color-default-neutral-900);
992
993
  --ctx-text-bold: var(--color-default-neutral-1000);
993
- --ctx-background: var(--color-default-neutral-300);
994
- --ctx-gradient: var(--color-default-neutral-400);
994
+ --ctx-background: var(--color-default-neutral-400);
995
+ --ctx-gradient: var(--color-default-neutral-300);
995
996
  --ctx-border: var(--color-default-neutral-500);
996
997
  --ctx-shadow: var(--color-neutral-alpha-500A);
997
998
  --ctx-text-hover: var(--color-default-neutral-900);
998
999
  --ctx-text-pressed: var(--color-default-neutral-900);
999
- --ctx-background-hover: var(--color-default-neutral-400);
1000
- --ctx-background-pressed: var(--color-default-neutral-500);
1001
- --ctx-gradient-hover: var(--color-default-neutral-500);
1002
- --ctx-gradient-pressed: var(--color-default-neutral-500);
1000
+ --ctx-background-hover: var(--color-default-neutral-300);
1001
+ --ctx-background-pressed: var(--color-default-neutral-200);
1002
+ --ctx-gradient-hover: var(--color-default-neutral-200);
1003
+ --ctx-gradient-pressed: var(--color-default-neutral-200);
1003
1004
  --ctx-border-hover: var(--color-default-neutral-500);
1004
1005
  --ctx-border-pressed: var(--color-default-neutral-500);
1005
1006
  }
@@ -1041,16 +1042,16 @@
1041
1042
  @utility ctx-green-bolder {
1042
1043
  --ctx-text: var(--color-default-green-200);
1043
1044
  --ctx-text-bold: var(--color-default-green-100);
1044
- --ctx-background: var(--color-default-green-800);
1045
- --ctx-gradient: var(--color-default-green-700);
1045
+ --ctx-background: var(--color-default-green-700);
1046
+ --ctx-gradient: var(--color-default-green-800);
1046
1047
  --ctx-border: var(--color-default-green-700);
1047
1048
  --ctx-shadow: var(--color-neutral-alpha-500A);
1048
1049
  --ctx-text-hover: var(--color-default-green-200);
1049
1050
  --ctx-text-pressed: var(--color-default-green-200);
1050
- --ctx-background-hover: var(--color-default-green-700);
1051
- --ctx-background-pressed: var(--color-default-green-600);
1052
- --ctx-gradient-hover: var(--color-default-green-600);
1053
- --ctx-gradient-pressed: var(--color-default-green-600);
1051
+ --ctx-background-hover: var(--color-default-green-800);
1052
+ --ctx-background-pressed: var(--color-default-green-900);
1053
+ --ctx-gradient-hover: var(--color-default-green-900);
1054
+ --ctx-gradient-pressed: var(--color-default-green-900);
1054
1055
  --ctx-border-hover: var(--color-default-green-700);
1055
1056
  --ctx-border-pressed: var(--color-default-green-700);
1056
1057
  }
@@ -1058,16 +1059,16 @@
1058
1059
  @utility ctx-green-subtle {
1059
1060
  --ctx-text: var(--color-default-green-900);
1060
1061
  --ctx-text-bold: var(--color-default-green-1000);
1061
- --ctx-background: var(--color-default-green-300);
1062
- --ctx-gradient: var(--color-default-green-400);
1062
+ --ctx-background: var(--color-default-green-400);
1063
+ --ctx-gradient: var(--color-default-green-300);
1063
1064
  --ctx-border: var(--color-default-green-500);
1064
1065
  --ctx-shadow: var(--color-neutral-alpha-500A);
1065
1066
  --ctx-text-hover: var(--color-default-green-900);
1066
1067
  --ctx-text-pressed: var(--color-default-green-900);
1067
- --ctx-background-hover: var(--color-default-green-400);
1068
- --ctx-background-pressed: var(--color-default-green-500);
1069
- --ctx-gradient-hover: var(--color-default-green-500);
1070
- --ctx-gradient-pressed: var(--color-default-green-500);
1068
+ --ctx-background-hover: var(--color-default-green-300);
1069
+ --ctx-background-pressed: var(--color-default-green-200);
1070
+ --ctx-gradient-hover: var(--color-default-green-200);
1071
+ --ctx-gradient-pressed: var(--color-default-green-200);
1071
1072
  --ctx-border-hover: var(--color-default-green-500);
1072
1073
  --ctx-border-pressed: var(--color-default-green-500);
1073
1074
  }
@@ -1107,18 +1108,18 @@
1107
1108
  }
1108
1109
 
1109
1110
  @utility ctx-info-bolder {
1110
- --ctx-text: var(--color-default-neutral-100);
1111
- --ctx-text-bold: var(--color-default-neutral-0);
1112
- --ctx-background: var(--color-default-blue-800);
1113
- --ctx-gradient: var(--color-default-blue-700);
1111
+ --ctx-text: var(--color-default-blue-200);
1112
+ --ctx-text-bold: var(--color-default-blue-100);
1113
+ --ctx-background: var(--color-default-blue-700);
1114
+ --ctx-gradient: var(--color-default-blue-800);
1114
1115
  --ctx-border: var(--color-default-blue-700);
1115
1116
  --ctx-shadow: var(--color-neutral-alpha-500A);
1116
- --ctx-text-hover: var(--color-default-neutral-100);
1117
- --ctx-text-pressed: var(--color-default-neutral-100);
1118
- --ctx-background-hover: var(--color-default-blue-700);
1119
- --ctx-background-pressed: var(--color-default-blue-600);
1120
- --ctx-gradient-hover: var(--color-default-blue-600);
1121
- --ctx-gradient-pressed: var(--color-default-blue-600);
1117
+ --ctx-text-hover: var(--color-default-blue-200);
1118
+ --ctx-text-pressed: var(--color-default-blue-200);
1119
+ --ctx-background-hover: var(--color-default-blue-800);
1120
+ --ctx-background-pressed: var(--color-default-blue-900);
1121
+ --ctx-gradient-hover: var(--color-default-blue-900);
1122
+ --ctx-gradient-pressed: var(--color-default-blue-900);
1122
1123
  --ctx-border-hover: var(--color-default-blue-700);
1123
1124
  --ctx-border-pressed: var(--color-default-blue-700);
1124
1125
  }
@@ -1143,16 +1144,16 @@
1143
1144
  @utility ctx-magenta-bolder {
1144
1145
  --ctx-text: var(--color-default-magenta-200);
1145
1146
  --ctx-text-bold: var(--color-default-magenta-100);
1146
- --ctx-background: var(--color-default-magenta-800);
1147
- --ctx-gradient: var(--color-default-magenta-700);
1147
+ --ctx-background: var(--color-default-magenta-700);
1148
+ --ctx-gradient: var(--color-default-magenta-800);
1148
1149
  --ctx-border: var(--color-default-magenta-700);
1149
1150
  --ctx-shadow: var(--color-neutral-alpha-500A);
1150
1151
  --ctx-text-hover: var(--color-default-magenta-200);
1151
1152
  --ctx-text-pressed: var(--color-default-magenta-200);
1152
- --ctx-background-hover: var(--color-default-magenta-700);
1153
- --ctx-background-pressed: var(--color-default-magenta-600);
1154
- --ctx-gradient-hover: var(--color-default-magenta-600);
1155
- --ctx-gradient-pressed: var(--color-default-magenta-600);
1153
+ --ctx-background-hover: var(--color-default-magenta-800);
1154
+ --ctx-background-pressed: var(--color-default-magenta-900);
1155
+ --ctx-gradient-hover: var(--color-default-magenta-900);
1156
+ --ctx-gradient-pressed: var(--color-default-magenta-900);
1156
1157
  --ctx-border-hover: var(--color-default-magenta-700);
1157
1158
  --ctx-border-pressed: var(--color-default-magenta-700);
1158
1159
  }
@@ -1160,16 +1161,16 @@
1160
1161
  @utility ctx-magenta-subtle {
1161
1162
  --ctx-text: var(--color-default-magenta-900);
1162
1163
  --ctx-text-bold: var(--color-default-magenta-1000);
1163
- --ctx-background: var(--color-default-magenta-300);
1164
- --ctx-gradient: var(--color-default-magenta-400);
1164
+ --ctx-background: var(--color-default-magenta-400);
1165
+ --ctx-gradient: var(--color-default-magenta-300);
1165
1166
  --ctx-border: var(--color-default-magenta-500);
1166
1167
  --ctx-shadow: var(--color-neutral-alpha-500A);
1167
1168
  --ctx-text-hover: var(--color-default-magenta-900);
1168
1169
  --ctx-text-pressed: var(--color-default-magenta-900);
1169
- --ctx-background-hover: var(--color-default-magenta-400);
1170
- --ctx-background-pressed: var(--color-default-magenta-500);
1171
- --ctx-gradient-hover: var(--color-default-magenta-500);
1172
- --ctx-gradient-pressed: var(--color-default-magenta-500);
1170
+ --ctx-background-hover: var(--color-default-magenta-300);
1171
+ --ctx-background-pressed: var(--color-default-magenta-200);
1172
+ --ctx-gradient-hover: var(--color-default-magenta-200);
1173
+ --ctx-gradient-pressed: var(--color-default-magenta-200);
1173
1174
  --ctx-border-hover: var(--color-default-magenta-500);
1174
1175
  --ctx-border-pressed: var(--color-default-magenta-500);
1175
1176
  }
@@ -1313,16 +1314,16 @@
1313
1314
  @utility ctx-orange-bolder {
1314
1315
  --ctx-text: var(--color-default-orange-200);
1315
1316
  --ctx-text-bold: var(--color-default-orange-100);
1316
- --ctx-background: var(--color-default-orange-800);
1317
- --ctx-gradient: var(--color-default-orange-700);
1317
+ --ctx-background: var(--color-default-orange-700);
1318
+ --ctx-gradient: var(--color-default-orange-800);
1318
1319
  --ctx-border: var(--color-default-orange-700);
1319
1320
  --ctx-shadow: var(--color-neutral-alpha-500A);
1320
1321
  --ctx-text-hover: var(--color-default-orange-200);
1321
1322
  --ctx-text-pressed: var(--color-default-orange-200);
1322
- --ctx-background-hover: var(--color-default-orange-700);
1323
- --ctx-background-pressed: var(--color-default-orange-600);
1324
- --ctx-gradient-hover: var(--color-default-orange-600);
1325
- --ctx-gradient-pressed: var(--color-default-orange-600);
1323
+ --ctx-background-hover: var(--color-default-orange-800);
1324
+ --ctx-background-pressed: var(--color-default-orange-900);
1325
+ --ctx-gradient-hover: var(--color-default-orange-900);
1326
+ --ctx-gradient-pressed: var(--color-default-orange-900);
1326
1327
  --ctx-border-hover: var(--color-default-orange-700);
1327
1328
  --ctx-border-pressed: var(--color-default-orange-700);
1328
1329
  }
@@ -1330,16 +1331,16 @@
1330
1331
  @utility ctx-orange-subtle {
1331
1332
  --ctx-text: var(--color-default-orange-900);
1332
1333
  --ctx-text-bold: var(--color-default-orange-1000);
1333
- --ctx-background: var(--color-default-orange-300);
1334
- --ctx-gradient: var(--color-default-orange-400);
1334
+ --ctx-background: var(--color-default-orange-400);
1335
+ --ctx-gradient: var(--color-default-orange-300);
1335
1336
  --ctx-border: var(--color-default-orange-500);
1336
1337
  --ctx-shadow: var(--color-neutral-alpha-500A);
1337
1338
  --ctx-text-hover: var(--color-default-orange-900);
1338
1339
  --ctx-text-pressed: var(--color-default-orange-900);
1339
- --ctx-background-hover: var(--color-default-orange-400);
1340
- --ctx-background-pressed: var(--color-default-orange-500);
1341
- --ctx-gradient-hover: var(--color-default-orange-500);
1342
- --ctx-gradient-pressed: var(--color-default-orange-500);
1340
+ --ctx-background-hover: var(--color-default-orange-300);
1341
+ --ctx-background-pressed: var(--color-default-orange-200);
1342
+ --ctx-gradient-hover: var(--color-default-orange-200);
1343
+ --ctx-gradient-pressed: var(--color-default-orange-200);
1343
1344
  --ctx-border-hover: var(--color-default-orange-500);
1344
1345
  --ctx-border-pressed: var(--color-default-orange-500);
1345
1346
  }
@@ -1381,16 +1382,16 @@
1381
1382
  @utility ctx-purple-bolder {
1382
1383
  --ctx-text: var(--color-default-purple-200);
1383
1384
  --ctx-text-bold: var(--color-default-purple-100);
1384
- --ctx-background: var(--color-default-purple-800);
1385
- --ctx-gradient: var(--color-default-purple-700);
1385
+ --ctx-background: var(--color-default-purple-700);
1386
+ --ctx-gradient: var(--color-default-purple-800);
1386
1387
  --ctx-border: var(--color-default-purple-700);
1387
1388
  --ctx-shadow: var(--color-neutral-alpha-500A);
1388
1389
  --ctx-text-hover: var(--color-default-purple-200);
1389
1390
  --ctx-text-pressed: var(--color-default-purple-200);
1390
- --ctx-background-hover: var(--color-default-purple-700);
1391
- --ctx-background-pressed: var(--color-default-purple-600);
1392
- --ctx-gradient-hover: var(--color-default-purple-600);
1393
- --ctx-gradient-pressed: var(--color-default-purple-600);
1391
+ --ctx-background-hover: var(--color-default-purple-800);
1392
+ --ctx-background-pressed: var(--color-default-purple-900);
1393
+ --ctx-gradient-hover: var(--color-default-purple-900);
1394
+ --ctx-gradient-pressed: var(--color-default-purple-900);
1394
1395
  --ctx-border-hover: var(--color-default-purple-700);
1395
1396
  --ctx-border-pressed: var(--color-default-purple-700);
1396
1397
  }
@@ -1398,16 +1399,16 @@
1398
1399
  @utility ctx-purple-subtle {
1399
1400
  --ctx-text: var(--color-default-purple-900);
1400
1401
  --ctx-text-bold: var(--color-default-purple-1000);
1401
- --ctx-background: var(--color-default-purple-300);
1402
- --ctx-gradient: var(--color-default-purple-400);
1402
+ --ctx-background: var(--color-default-purple-400);
1403
+ --ctx-gradient: var(--color-default-purple-300);
1403
1404
  --ctx-border: var(--color-default-purple-500);
1404
1405
  --ctx-shadow: var(--color-neutral-alpha-500A);
1405
1406
  --ctx-text-hover: var(--color-default-purple-900);
1406
1407
  --ctx-text-pressed: var(--color-default-purple-900);
1407
- --ctx-background-hover: var(--color-default-purple-400);
1408
- --ctx-background-pressed: var(--color-default-purple-500);
1409
- --ctx-gradient-hover: var(--color-default-purple-500);
1410
- --ctx-gradient-pressed: var(--color-default-purple-500);
1408
+ --ctx-background-hover: var(--color-default-purple-300);
1409
+ --ctx-background-pressed: var(--color-default-purple-200);
1410
+ --ctx-gradient-hover: var(--color-default-purple-200);
1411
+ --ctx-gradient-pressed: var(--color-default-purple-200);
1411
1412
  --ctx-border-hover: var(--color-default-purple-500);
1412
1413
  --ctx-border-pressed: var(--color-default-purple-500);
1413
1414
  }
@@ -1449,16 +1450,16 @@
1449
1450
  @utility ctx-red-bolder {
1450
1451
  --ctx-text: var(--color-default-red-200);
1451
1452
  --ctx-text-bold: var(--color-default-red-100);
1452
- --ctx-background: var(--color-default-red-800);
1453
- --ctx-gradient: var(--color-default-red-700);
1453
+ --ctx-background: var(--color-default-red-700);
1454
+ --ctx-gradient: var(--color-default-red-800);
1454
1455
  --ctx-border: var(--color-default-red-700);
1455
1456
  --ctx-shadow: var(--color-neutral-alpha-500A);
1456
1457
  --ctx-text-hover: var(--color-default-red-200);
1457
1458
  --ctx-text-pressed: var(--color-default-red-200);
1458
- --ctx-background-hover: var(--color-default-red-700);
1459
- --ctx-background-pressed: var(--color-default-red-600);
1460
- --ctx-gradient-hover: var(--color-default-red-600);
1461
- --ctx-gradient-pressed: var(--color-default-red-600);
1459
+ --ctx-background-hover: var(--color-default-red-800);
1460
+ --ctx-background-pressed: var(--color-default-red-900);
1461
+ --ctx-gradient-hover: var(--color-default-red-900);
1462
+ --ctx-gradient-pressed: var(--color-default-red-900);
1462
1463
  --ctx-border-hover: var(--color-default-red-700);
1463
1464
  --ctx-border-pressed: var(--color-default-red-700);
1464
1465
  }
@@ -1466,16 +1467,16 @@
1466
1467
  @utility ctx-red-subtle {
1467
1468
  --ctx-text: var(--color-default-red-900);
1468
1469
  --ctx-text-bold: var(--color-default-red-1000);
1469
- --ctx-background: var(--color-default-red-300);
1470
- --ctx-gradient: var(--color-default-red-400);
1470
+ --ctx-background: var(--color-default-red-400);
1471
+ --ctx-gradient: var(--color-default-red-300);
1471
1472
  --ctx-border: var(--color-default-red-500);
1472
1473
  --ctx-shadow: var(--color-neutral-alpha-500A);
1473
1474
  --ctx-text-hover: var(--color-default-red-900);
1474
1475
  --ctx-text-pressed: var(--color-default-red-900);
1475
- --ctx-background-hover: var(--color-default-red-400);
1476
- --ctx-background-pressed: var(--color-default-red-500);
1477
- --ctx-gradient-hover: var(--color-default-red-500);
1478
- --ctx-gradient-pressed: var(--color-default-red-500);
1476
+ --ctx-background-hover: var(--color-default-red-300);
1477
+ --ctx-background-pressed: var(--color-default-red-200);
1478
+ --ctx-gradient-hover: var(--color-default-red-200);
1479
+ --ctx-gradient-pressed: var(--color-default-red-200);
1479
1480
  --ctx-border-hover: var(--color-default-red-500);
1480
1481
  --ctx-border-pressed: var(--color-default-red-500);
1481
1482
  }
@@ -1515,18 +1516,18 @@
1515
1516
  }
1516
1517
 
1517
1518
  @utility ctx-success-bolder {
1518
- --ctx-text: var(--color-default-neutral-100);
1519
- --ctx-text-bold: var(--color-default-neutral-0);
1520
- --ctx-background: var(--color-default-green-800);
1521
- --ctx-gradient: var(--color-default-green-700);
1519
+ --ctx-text: var(--color-default-green-200);
1520
+ --ctx-text-bold: var(--color-default-green-100);
1521
+ --ctx-background: var(--color-default-green-700);
1522
+ --ctx-gradient: var(--color-default-green-800);
1522
1523
  --ctx-border: var(--color-default-green-700);
1523
1524
  --ctx-shadow: var(--color-neutral-alpha-500A);
1524
- --ctx-text-hover: var(--color-default-neutral-100);
1525
- --ctx-text-pressed: var(--color-default-neutral-100);
1526
- --ctx-background-hover: var(--color-default-green-700);
1527
- --ctx-background-pressed: var(--color-default-green-600);
1528
- --ctx-gradient-hover: var(--color-default-green-600);
1529
- --ctx-gradient-pressed: var(--color-default-green-600);
1525
+ --ctx-text-hover: var(--color-default-green-200);
1526
+ --ctx-text-pressed: var(--color-default-green-200);
1527
+ --ctx-background-hover: var(--color-default-green-800);
1528
+ --ctx-background-pressed: var(--color-default-green-900);
1529
+ --ctx-gradient-hover: var(--color-default-green-900);
1530
+ --ctx-gradient-pressed: var(--color-default-green-900);
1530
1531
  --ctx-border-hover: var(--color-default-green-700);
1531
1532
  --ctx-border-pressed: var(--color-default-green-700);
1532
1533
  }
@@ -1551,16 +1552,16 @@
1551
1552
  @utility ctx-teal-bolder {
1552
1553
  --ctx-text: var(--color-default-teal-200);
1553
1554
  --ctx-text-bold: var(--color-default-teal-100);
1554
- --ctx-background: var(--color-default-teal-800);
1555
- --ctx-gradient: var(--color-default-teal-700);
1555
+ --ctx-background: var(--color-default-teal-700);
1556
+ --ctx-gradient: var(--color-default-teal-800);
1556
1557
  --ctx-border: var(--color-default-teal-700);
1557
1558
  --ctx-shadow: var(--color-neutral-alpha-500A);
1558
1559
  --ctx-text-hover: var(--color-default-teal-200);
1559
1560
  --ctx-text-pressed: var(--color-default-teal-200);
1560
- --ctx-background-hover: var(--color-default-teal-700);
1561
- --ctx-background-pressed: var(--color-default-teal-600);
1562
- --ctx-gradient-hover: var(--color-default-teal-600);
1563
- --ctx-gradient-pressed: var(--color-default-teal-600);
1561
+ --ctx-background-hover: var(--color-default-teal-800);
1562
+ --ctx-background-pressed: var(--color-default-teal-900);
1563
+ --ctx-gradient-hover: var(--color-default-teal-900);
1564
+ --ctx-gradient-pressed: var(--color-default-teal-900);
1564
1565
  --ctx-border-hover: var(--color-default-teal-700);
1565
1566
  --ctx-border-pressed: var(--color-default-teal-700);
1566
1567
  }
@@ -1568,16 +1569,16 @@
1568
1569
  @utility ctx-teal-subtle {
1569
1570
  --ctx-text: var(--color-default-teal-900);
1570
1571
  --ctx-text-bold: var(--color-default-teal-1000);
1571
- --ctx-background: var(--color-default-teal-300);
1572
- --ctx-gradient: var(--color-default-teal-400);
1572
+ --ctx-background: var(--color-default-teal-400);
1573
+ --ctx-gradient: var(--color-default-teal-300);
1573
1574
  --ctx-border: var(--color-default-teal-500);
1574
1575
  --ctx-shadow: var(--color-neutral-alpha-500A);
1575
1576
  --ctx-text-hover: var(--color-default-teal-900);
1576
1577
  --ctx-text-pressed: var(--color-default-teal-900);
1577
- --ctx-background-hover: var(--color-default-teal-400);
1578
- --ctx-background-pressed: var(--color-default-teal-500);
1579
- --ctx-gradient-hover: var(--color-default-teal-500);
1580
- --ctx-gradient-pressed: var(--color-default-teal-500);
1578
+ --ctx-background-hover: var(--color-default-teal-300);
1579
+ --ctx-background-pressed: var(--color-default-teal-200);
1580
+ --ctx-gradient-hover: var(--color-default-teal-200);
1581
+ --ctx-gradient-pressed: var(--color-default-teal-200);
1581
1582
  --ctx-border-hover: var(--color-default-teal-500);
1582
1583
  --ctx-border-pressed: var(--color-default-teal-500);
1583
1584
  }
@@ -1617,18 +1618,18 @@
1617
1618
  }
1618
1619
 
1619
1620
  @utility ctx-warning-bolder {
1620
- --ctx-text: var(--color-default-neutral-100);
1621
- --ctx-text-bold: var(--color-default-neutral-0);
1622
- --ctx-background: var(--color-default-yellow-800);
1623
- --ctx-gradient: var(--color-default-yellow-700);
1621
+ --ctx-text: var(--color-default-yellow-200);
1622
+ --ctx-text-bold: var(--color-default-yellow-100);
1623
+ --ctx-background: var(--color-default-yellow-700);
1624
+ --ctx-gradient: var(--color-default-yellow-800);
1624
1625
  --ctx-border: var(--color-default-yellow-700);
1625
1626
  --ctx-shadow: var(--color-neutral-alpha-500A);
1626
- --ctx-text-hover: var(--color-default-neutral-100);
1627
- --ctx-text-pressed: var(--color-default-neutral-100);
1628
- --ctx-background-hover: var(--color-default-yellow-700);
1629
- --ctx-background-pressed: var(--color-default-yellow-600);
1630
- --ctx-gradient-hover: var(--color-default-yellow-600);
1631
- --ctx-gradient-pressed: var(--color-default-yellow-600);
1627
+ --ctx-text-hover: var(--color-default-yellow-200);
1628
+ --ctx-text-pressed: var(--color-default-yellow-200);
1629
+ --ctx-background-hover: var(--color-default-yellow-800);
1630
+ --ctx-background-pressed: var(--color-default-yellow-900);
1631
+ --ctx-gradient-hover: var(--color-default-yellow-900);
1632
+ --ctx-gradient-pressed: var(--color-default-yellow-900);
1632
1633
  --ctx-border-hover: var(--color-default-yellow-700);
1633
1634
  --ctx-border-pressed: var(--color-default-yellow-700);
1634
1635
  }
@@ -1653,16 +1654,16 @@
1653
1654
  @utility ctx-yellow-bolder {
1654
1655
  --ctx-text: var(--color-default-yellow-200);
1655
1656
  --ctx-text-bold: var(--color-default-yellow-100);
1656
- --ctx-background: var(--color-default-yellow-800);
1657
- --ctx-gradient: var(--color-default-yellow-700);
1657
+ --ctx-background: var(--color-default-yellow-700);
1658
+ --ctx-gradient: var(--color-default-yellow-800);
1658
1659
  --ctx-border: var(--color-default-yellow-700);
1659
1660
  --ctx-shadow: var(--color-neutral-alpha-500A);
1660
1661
  --ctx-text-hover: var(--color-default-yellow-200);
1661
1662
  --ctx-text-pressed: var(--color-default-yellow-200);
1662
- --ctx-background-hover: var(--color-default-yellow-700);
1663
- --ctx-background-pressed: var(--color-default-yellow-600);
1664
- --ctx-gradient-hover: var(--color-default-yellow-600);
1665
- --ctx-gradient-pressed: var(--color-default-yellow-600);
1663
+ --ctx-background-hover: var(--color-default-yellow-800);
1664
+ --ctx-background-pressed: var(--color-default-yellow-900);
1665
+ --ctx-gradient-hover: var(--color-default-yellow-900);
1666
+ --ctx-gradient-pressed: var(--color-default-yellow-900);
1666
1667
  --ctx-border-hover: var(--color-default-yellow-700);
1667
1668
  --ctx-border-pressed: var(--color-default-yellow-700);
1668
1669
  }
@@ -1670,16 +1671,16 @@
1670
1671
  @utility ctx-yellow-subtle {
1671
1672
  --ctx-text: var(--color-default-yellow-900);
1672
1673
  --ctx-text-bold: var(--color-default-yellow-1000);
1673
- --ctx-background: var(--color-default-yellow-300);
1674
- --ctx-gradient: var(--color-default-yellow-400);
1674
+ --ctx-background: var(--color-default-yellow-400);
1675
+ --ctx-gradient: var(--color-default-yellow-300);
1675
1676
  --ctx-border: var(--color-default-yellow-500);
1676
1677
  --ctx-shadow: var(--color-neutral-alpha-500A);
1677
1678
  --ctx-text-hover: var(--color-default-yellow-900);
1678
1679
  --ctx-text-pressed: var(--color-default-yellow-900);
1679
- --ctx-background-hover: var(--color-default-yellow-400);
1680
- --ctx-background-pressed: var(--color-default-yellow-500);
1681
- --ctx-gradient-hover: var(--color-default-yellow-500);
1682
- --ctx-gradient-pressed: var(--color-default-yellow-500);
1680
+ --ctx-background-hover: var(--color-default-yellow-300);
1681
+ --ctx-background-pressed: var(--color-default-yellow-200);
1682
+ --ctx-gradient-hover: var(--color-default-yellow-200);
1683
+ --ctx-gradient-pressed: var(--color-default-yellow-200);
1683
1684
  --ctx-border-hover: var(--color-default-yellow-500);
1684
1685
  --ctx-border-pressed: var(--color-default-yellow-500);
1685
1686
  }
@@ -1820,6 +1821,12 @@
1820
1821
 
1821
1822
 
1822
1823
  /* === ./styles/component-overrides.css === */
1824
+ /** Custom styles to fix primevue components that are not custom or wrapped. */
1825
+
1826
+ /**
1827
+ .BccAutocomplete
1828
+ **/
1829
+
1823
1830
  /** Our icons are a bit smaller that Primevue's default */
1824
1831
  .p-autocomplete .p-icon {
1825
1832
  --p-icon-size: var(--icon-size-sm);
@@ -2262,6 +2269,55 @@
2262
2269
 
2263
2270
 
2264
2271
 
2272
+ /* from ./BccStepIndicator/BccStepIndicator.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 col;
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
+
2265
2321
  /* from ./BccTag/BccTag.css */
2266
2322
 
2267
2323
  @layer components {