@bcc-code/component-library-vue 0.6.9 → 0.7.1

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