@bcc-code/component-library-vue 1.3.3 → 1.3.4

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 (5) hide show
  1. package/dist/component-library.js +4 -3
  2. package/dist/component-library.umd.cjs +110 -110
  3. package/dist/index.css +1 -1
  4. package/dist/theme.css +134 -387
  5. package/package.json +1 -1
package/dist/theme.css CHANGED
@@ -803,15 +803,11 @@
803
803
  --ctx-background: var(--color-default-neutral-0);
804
804
  --ctx-gradient: var(--color-default-neutral-100);
805
805
  --ctx-border: var(--color-default-neutral-300);
806
+ --ctx-border-bold: var(--color-default-neutral-800);
806
807
  --ctx-shadow: var(--color-neutral-alpha-500A);
807
808
  --ctx-text-hover: var(--color-default-neutral-1000);
808
- --ctx-text-pressed: var(--color-default-neutral-1000);
809
809
  --ctx-background-hover: var(--color-default-neutral-100);
810
- --ctx-background-pressed: var(--color-default-neutral-200);
811
- --ctx-gradient-hover: var(--color-default-neutral-200);
812
- --ctx-gradient-pressed: var(--color-default-neutral-200);
813
810
  --ctx-border-hover: var(--color-default-neutral-300);
814
- --ctx-border-pressed: var(--color-default-neutral-300);
815
811
  }
816
812
 
817
813
  @utility ctx-blue-bolder {
@@ -819,16 +815,12 @@
819
815
  --ctx-text-bold: var(--color-default-blue-100);
820
816
  --ctx-background: var(--color-default-blue-700);
821
817
  --ctx-gradient: var(--color-default-blue-800);
822
- --ctx-border: var(--color-default-blue-700);
818
+ --ctx-border: var(--color-default-blue-800);
819
+ --ctx-border-bold: var(--color-default-blue-600);
823
820
  --ctx-shadow: var(--color-neutral-alpha-500A);
824
821
  --ctx-text-hover: var(--color-default-blue-200);
825
- --ctx-text-pressed: var(--color-default-blue-200);
826
822
  --ctx-background-hover: var(--color-default-blue-800);
827
- --ctx-background-pressed: var(--color-default-blue-900);
828
- --ctx-gradient-hover: var(--color-default-blue-900);
829
- --ctx-gradient-pressed: var(--color-default-blue-900);
830
- --ctx-border-hover: var(--color-default-blue-700);
831
- --ctx-border-pressed: var(--color-default-blue-700);
823
+ --ctx-border-hover: var(--color-default-blue-800);
832
824
  }
833
825
 
834
826
  @utility ctx-blue-subtle {
@@ -837,15 +829,11 @@
837
829
  --ctx-background: var(--color-default-blue-400);
838
830
  --ctx-gradient: var(--color-default-blue-300);
839
831
  --ctx-border: var(--color-default-blue-500);
832
+ --ctx-border-bold: var(--color-default-blue-700);
840
833
  --ctx-shadow: var(--color-neutral-alpha-500A);
841
834
  --ctx-text-hover: var(--color-default-blue-900);
842
- --ctx-text-pressed: var(--color-default-blue-900);
843
835
  --ctx-background-hover: var(--color-default-blue-300);
844
- --ctx-background-pressed: var(--color-default-blue-200);
845
- --ctx-gradient-hover: var(--color-default-blue-200);
846
- --ctx-gradient-pressed: var(--color-default-blue-200);
847
836
  --ctx-border-hover: var(--color-default-blue-500);
848
- --ctx-border-pressed: var(--color-default-blue-500);
849
837
  }
850
838
 
851
839
  @utility ctx-blue-subtler {
@@ -853,16 +841,12 @@
853
841
  --ctx-text-bold: var(--color-default-blue-900);
854
842
  --ctx-background: var(--color-default-blue-200);
855
843
  --ctx-gradient: var(--color-default-blue-300);
856
- --ctx-border: var(--color-default-blue-400);
844
+ --ctx-border: var(--color-default-blue-300);
845
+ --ctx-border-bold: var(--color-default-blue-500);
857
846
  --ctx-shadow: var(--color-neutral-alpha-500A);
858
847
  --ctx-text-hover: var(--color-default-blue-800);
859
- --ctx-text-pressed: var(--color-default-blue-800);
860
848
  --ctx-background-hover: var(--color-default-blue-300);
861
- --ctx-background-pressed: var(--color-default-blue-400);
862
- --ctx-gradient-hover: var(--color-default-blue-400);
863
- --ctx-gradient-pressed: var(--color-default-blue-400);
864
- --ctx-border-hover: var(--color-default-blue-400);
865
- --ctx-border-pressed: var(--color-default-blue-400);
849
+ --ctx-border-hover: var(--color-default-blue-300);
866
850
  }
867
851
 
868
852
  @utility ctx-blue-subtlest {
@@ -870,16 +854,12 @@
870
854
  --ctx-text-bold: var(--color-default-blue-900);
871
855
  --ctx-background: var(--color-default-blue-100);
872
856
  --ctx-gradient: var(--color-default-blue-200);
873
- --ctx-border: var(--color-default-blue-300);
857
+ --ctx-border: var(--color-default-blue-200);
858
+ --ctx-border-bold: var(--color-default-blue-400);
874
859
  --ctx-shadow: var(--color-neutral-alpha-500A);
875
860
  --ctx-text-hover: var(--color-default-blue-800);
876
- --ctx-text-pressed: var(--color-default-blue-800);
877
861
  --ctx-background-hover: var(--color-default-blue-200);
878
- --ctx-background-pressed: var(--color-default-blue-300);
879
- --ctx-gradient-hover: var(--color-default-blue-300);
880
- --ctx-gradient-pressed: var(--color-default-blue-300);
881
- --ctx-border-hover: var(--color-default-blue-300);
882
- --ctx-border-pressed: var(--color-default-blue-300);
862
+ --ctx-border-hover: var(--color-default-blue-200);
883
863
  }
884
864
 
885
865
  @utility ctx-brand-bold {
@@ -887,16 +867,12 @@
887
867
  --ctx-text-bold: var(--color-default-neutral-100);
888
868
  --ctx-background: var(--color-default-bcc-600);
889
869
  --ctx-gradient: var(--color-default-bcc-700);
890
- --ctx-border: var(--color-default-bcc-600);
870
+ --ctx-border: var(--color-default-bcc-700);
871
+ --ctx-border-bold: var(--color-default-bcc-500);
891
872
  --ctx-shadow: var(--color-neutral-alpha-500A);
892
873
  --ctx-text-hover: var(--color-default-bcc-200);
893
- --ctx-text-pressed: var(--color-default-bcc-200);
894
874
  --ctx-background-hover: var(--color-default-bcc-700);
895
- --ctx-background-pressed: var(--color-default-bcc-800);
896
- --ctx-gradient-hover: var(--color-default-bcc-800);
897
- --ctx-gradient-pressed: var(--color-default-bcc-800);
898
- --ctx-border-hover: var(--color-default-bcc-600);
899
- --ctx-border-pressed: var(--color-default-bcc-600);
875
+ --ctx-border-hover: var(--color-default-bcc-700);
900
876
  }
901
877
 
902
878
  @utility ctx-brand-bolder {
@@ -904,16 +880,12 @@
904
880
  --ctx-text-bold: var(--color-default-neutral-0);
905
881
  --ctx-background: var(--color-default-bcc-800);
906
882
  --ctx-gradient: var(--color-default-bcc-900);
907
- --ctx-border: var(--color-default-bcc-700);
883
+ --ctx-border: var(--color-default-bcc-900);
884
+ --ctx-border-bold: var(--color-default-bcc-700);
908
885
  --ctx-shadow: var(--color-neutral-alpha-500A);
909
886
  --ctx-text-hover: var(--color-default-neutral-0);
910
- --ctx-text-pressed: var(--color-default-neutral-0);
911
887
  --ctx-background-hover: var(--color-default-bcc-900);
912
- --ctx-background-pressed: var(--color-default-bcc-1000);
913
- --ctx-gradient-hover: var(--color-default-bcc-1000);
914
- --ctx-gradient-pressed: var(--color-default-bcc-1000);
915
- --ctx-border-hover: var(--color-default-bcc-700);
916
- --ctx-border-pressed: var(--color-default-bcc-700);
888
+ --ctx-border-hover: var(--color-default-bcc-900);
917
889
  }
918
890
 
919
891
  @utility ctx-brand-boldest {
@@ -922,15 +894,11 @@
922
894
  --ctx-background: var(--color-default-bcc-1000);
923
895
  --ctx-gradient: var(--color-default-bcc-900);
924
896
  --ctx-border: var(--color-default-bcc-800);
897
+ --ctx-border-bold: var(--color-default-bcc-600);
925
898
  --ctx-shadow: var(--color-neutral-alpha-500A);
926
899
  --ctx-text-hover: var(--color-default-neutral-0);
927
- --ctx-text-pressed: var(--color-default-neutral-0);
928
900
  --ctx-background-hover: var(--color-default-bcc-900);
929
- --ctx-background-pressed: var(--color-default-bcc-800);
930
- --ctx-gradient-hover: var(--color-default-bcc-800);
931
- --ctx-gradient-pressed: var(--color-default-bcc-800);
932
901
  --ctx-border-hover: var(--color-default-bcc-800);
933
- --ctx-border-pressed: var(--color-default-bcc-800);
934
902
  }
935
903
 
936
904
  @utility ctx-brand-default {
@@ -939,15 +907,11 @@
939
907
  --ctx-background: var(--color-default-neutral-0);
940
908
  --ctx-gradient: var(--color-default-neutral-0);
941
909
  --ctx-border: var(--color-default-neutral-700);
910
+ --ctx-border-bold: var(--color-default-neutral-800);
942
911
  --ctx-shadow: var(--color-neutral-alpha-500A);
943
912
  --ctx-text-hover: var(--color-default-neutral-1000);
944
- --ctx-text-pressed: var(--color-default-neutral-1000);
945
913
  --ctx-background-hover: var(--color-default-neutral-0);
946
- --ctx-background-pressed: var(--color-default-neutral-0);
947
- --ctx-gradient-hover: var(--color-default-neutral-0);
948
- --ctx-gradient-pressed: var(--color-default-neutral-0);
949
914
  --ctx-border-hover: var(--color-default-neutral-700);
950
- --ctx-border-pressed: var(--color-default-neutral-700);
951
915
  }
952
916
 
953
917
  @utility ctx-brand-subtle {
@@ -956,15 +920,11 @@
956
920
  --ctx-background: var(--color-default-bcc-400);
957
921
  --ctx-gradient: var(--color-default-bcc-300);
958
922
  --ctx-border: var(--color-default-bcc-500);
923
+ --ctx-border-bold: var(--color-default-bcc-700);
959
924
  --ctx-shadow: var(--color-neutral-alpha-500A);
960
925
  --ctx-text-hover: var(--color-default-bcc-1000);
961
- --ctx-text-pressed: var(--color-default-bcc-1000);
962
926
  --ctx-background-hover: var(--color-default-bcc-300);
963
- --ctx-background-pressed: var(--color-default-bcc-200);
964
- --ctx-gradient-hover: var(--color-default-bcc-200);
965
- --ctx-gradient-pressed: var(--color-default-bcc-200);
966
927
  --ctx-border-hover: var(--color-default-bcc-500);
967
- --ctx-border-pressed: var(--color-default-bcc-500);
968
928
  }
969
929
 
970
930
  @utility ctx-brand-subtler {
@@ -972,16 +932,12 @@
972
932
  --ctx-text-bold: var(--color-default-bcc-800);
973
933
  --ctx-background: var(--color-default-bcc-200);
974
934
  --ctx-gradient: var(--color-default-bcc-300);
975
- --ctx-border: var(--color-default-bcc-400);
935
+ --ctx-border: var(--color-default-bcc-300);
936
+ --ctx-border-bold: var(--color-default-bcc-500);
976
937
  --ctx-shadow: var(--color-neutral-alpha-500A);
977
938
  --ctx-text-hover: var(--color-default-bcc-900);
978
- --ctx-text-pressed: var(--color-default-bcc-900);
979
939
  --ctx-background-hover: var(--color-default-bcc-300);
980
- --ctx-background-pressed: var(--color-default-bcc-400);
981
- --ctx-gradient-hover: var(--color-default-bcc-400);
982
- --ctx-gradient-pressed: var(--color-default-bcc-400);
983
- --ctx-border-hover: var(--color-default-bcc-400);
984
- --ctx-border-pressed: var(--color-default-bcc-400);
940
+ --ctx-border-hover: var(--color-default-bcc-300);
985
941
  }
986
942
 
987
943
  @utility ctx-brand-subtlest {
@@ -989,16 +945,12 @@
989
945
  --ctx-text-bold: var(--color-default-bcc-700);
990
946
  --ctx-background: var(--color-default-bcc-100);
991
947
  --ctx-gradient: var(--color-default-bcc-200);
992
- --ctx-border: var(--color-default-bcc-300);
948
+ --ctx-border: var(--color-default-bcc-200);
949
+ --ctx-border-bold: var(--color-default-bcc-400);
993
950
  --ctx-shadow: var(--color-neutral-alpha-500A);
994
951
  --ctx-text-hover: var(--color-default-bcc-800);
995
- --ctx-text-pressed: var(--color-default-bcc-800);
996
952
  --ctx-background-hover: var(--color-default-bcc-200);
997
- --ctx-background-pressed: var(--color-default-bcc-300);
998
- --ctx-gradient-hover: var(--color-default-bcc-300);
999
- --ctx-gradient-pressed: var(--color-default-bcc-300);
1000
- --ctx-border-hover: var(--color-default-bcc-300);
1001
- --ctx-border-pressed: var(--color-default-bcc-300);
953
+ --ctx-border-hover: var(--color-default-bcc-200);
1002
954
  }
1003
955
 
1004
956
  @utility ctx-brown-bolder {
@@ -1006,16 +958,12 @@
1006
958
  --ctx-text-bold: var(--color-default-brown-100);
1007
959
  --ctx-background: var(--color-default-brown-700);
1008
960
  --ctx-gradient: var(--color-default-brown-800);
1009
- --ctx-border: var(--color-default-brown-700);
961
+ --ctx-border: var(--color-default-brown-800);
962
+ --ctx-border-bold: var(--color-default-brown-600);
1010
963
  --ctx-shadow: var(--color-neutral-alpha-500A);
1011
964
  --ctx-text-hover: var(--color-default-brown-200);
1012
- --ctx-text-pressed: var(--color-default-brown-200);
1013
965
  --ctx-background-hover: var(--color-default-brown-800);
1014
- --ctx-background-pressed: var(--color-default-brown-900);
1015
- --ctx-gradient-hover: var(--color-default-brown-900);
1016
- --ctx-gradient-pressed: var(--color-default-brown-900);
1017
- --ctx-border-hover: var(--color-default-brown-700);
1018
- --ctx-border-pressed: var(--color-default-brown-700);
966
+ --ctx-border-hover: var(--color-default-brown-800);
1019
967
  }
1020
968
 
1021
969
  @utility ctx-brown-subtle {
@@ -1024,15 +972,11 @@
1024
972
  --ctx-background: var(--color-default-brown-400);
1025
973
  --ctx-gradient: var(--color-default-brown-300);
1026
974
  --ctx-border: var(--color-default-brown-500);
975
+ --ctx-border-bold: var(--color-default-brown-700);
1027
976
  --ctx-shadow: var(--color-neutral-alpha-500A);
1028
977
  --ctx-text-hover: var(--color-default-brown-900);
1029
- --ctx-text-pressed: var(--color-default-brown-900);
1030
978
  --ctx-background-hover: var(--color-default-brown-300);
1031
- --ctx-background-pressed: var(--color-default-brown-200);
1032
- --ctx-gradient-hover: var(--color-default-brown-200);
1033
- --ctx-gradient-pressed: var(--color-default-brown-200);
1034
979
  --ctx-border-hover: var(--color-default-brown-500);
1035
- --ctx-border-pressed: var(--color-default-brown-500);
1036
980
  }
1037
981
 
1038
982
  @utility ctx-brown-subtler {
@@ -1040,16 +984,12 @@
1040
984
  --ctx-text-bold: var(--color-default-brown-900);
1041
985
  --ctx-background: var(--color-default-brown-200);
1042
986
  --ctx-gradient: var(--color-default-brown-300);
1043
- --ctx-border: var(--color-default-brown-400);
987
+ --ctx-border: var(--color-default-brown-300);
988
+ --ctx-border-bold: var(--color-default-brown-500);
1044
989
  --ctx-shadow: var(--color-neutral-alpha-500A);
1045
990
  --ctx-text-hover: var(--color-default-brown-800);
1046
- --ctx-text-pressed: var(--color-default-brown-800);
1047
991
  --ctx-background-hover: var(--color-default-brown-300);
1048
- --ctx-background-pressed: var(--color-default-brown-400);
1049
- --ctx-gradient-hover: var(--color-default-brown-400);
1050
- --ctx-gradient-pressed: var(--color-default-brown-400);
1051
- --ctx-border-hover: var(--color-default-brown-400);
1052
- --ctx-border-pressed: var(--color-default-brown-400);
992
+ --ctx-border-hover: var(--color-default-brown-300);
1053
993
  }
1054
994
 
1055
995
  @utility ctx-brown-subtlest {
@@ -1057,16 +997,12 @@
1057
997
  --ctx-text-bold: var(--color-default-brown-900);
1058
998
  --ctx-background: var(--color-default-brown-100);
1059
999
  --ctx-gradient: var(--color-default-brown-200);
1060
- --ctx-border: var(--color-default-brown-300);
1000
+ --ctx-border: var(--color-default-brown-200);
1001
+ --ctx-border-bold: var(--color-default-brown-400);
1061
1002
  --ctx-shadow: var(--color-neutral-alpha-500A);
1062
1003
  --ctx-text-hover: var(--color-default-brown-800);
1063
- --ctx-text-pressed: var(--color-default-brown-800);
1064
1004
  --ctx-background-hover: var(--color-default-brown-200);
1065
- --ctx-background-pressed: var(--color-default-brown-300);
1066
- --ctx-gradient-hover: var(--color-default-brown-300);
1067
- --ctx-gradient-pressed: var(--color-default-brown-300);
1068
- --ctx-border-hover: var(--color-default-brown-300);
1069
- --ctx-border-pressed: var(--color-default-brown-300);
1005
+ --ctx-border-hover: var(--color-default-brown-200);
1070
1006
  }
1071
1007
 
1072
1008
  @utility ctx-danger-bolder {
@@ -1075,15 +1011,11 @@
1075
1011
  --ctx-background: var(--color-default-red-700);
1076
1012
  --ctx-gradient: var(--color-default-red-800);
1077
1013
  --ctx-border: var(--color-default-red-700);
1014
+ --ctx-border-bold: var(--color-default-red-400);
1078
1015
  --ctx-shadow: var(--color-neutral-alpha-500A);
1079
1016
  --ctx-text-hover: var(--color-default-red-200);
1080
- --ctx-text-pressed: var(--color-default-red-200);
1081
1017
  --ctx-background-hover: var(--color-default-red-800);
1082
- --ctx-background-pressed: var(--color-default-red-900);
1083
- --ctx-gradient-hover: var(--color-default-red-900);
1084
- --ctx-gradient-pressed: var(--color-default-red-900);
1085
1018
  --ctx-border-hover: var(--color-default-red-700);
1086
- --ctx-border-pressed: var(--color-default-red-700);
1087
1019
  }
1088
1020
 
1089
1021
  @utility ctx-danger-subtlest {
@@ -1092,15 +1024,11 @@
1092
1024
  --ctx-background: var(--color-default-red-100);
1093
1025
  --ctx-gradient: var(--color-default-red-200);
1094
1026
  --ctx-border: var(--color-default-red-300);
1027
+ --ctx-border-bold: var(--color-default-red-800);
1095
1028
  --ctx-shadow: var(--color-neutral-alpha-500A);
1096
1029
  --ctx-text-hover: var(--color-default-red-800);
1097
- --ctx-text-pressed: var(--color-default-red-800);
1098
1030
  --ctx-background-hover: var(--color-default-red-200);
1099
- --ctx-background-pressed: var(--color-default-red-300);
1100
- --ctx-gradient-hover: var(--color-default-red-300);
1101
- --ctx-gradient-pressed: var(--color-default-red-300);
1102
1031
  --ctx-border-hover: var(--color-default-red-300);
1103
- --ctx-border-pressed: var(--color-default-red-300);
1104
1032
  }
1105
1033
 
1106
1034
  @utility ctx-gray-bolder {
@@ -1108,16 +1036,12 @@
1108
1036
  --ctx-text-bold: var(--color-default-neutral-100);
1109
1037
  --ctx-background: var(--color-default-neutral-700);
1110
1038
  --ctx-gradient: var(--color-default-neutral-800);
1111
- --ctx-border: var(--color-default-neutral-700);
1039
+ --ctx-border: var(--color-default-neutral-800);
1040
+ --ctx-border-bold: var(--color-default-neutral-600);
1112
1041
  --ctx-shadow: var(--color-neutral-alpha-500A);
1113
1042
  --ctx-text-hover: var(--color-default-neutral-200);
1114
- --ctx-text-pressed: var(--color-default-neutral-200);
1115
1043
  --ctx-background-hover: var(--color-default-neutral-800);
1116
- --ctx-background-pressed: var(--color-default-neutral-900);
1117
- --ctx-gradient-hover: var(--color-default-neutral-900);
1118
- --ctx-gradient-pressed: var(--color-default-neutral-900);
1119
- --ctx-border-hover: var(--color-default-neutral-700);
1120
- --ctx-border-pressed: var(--color-default-neutral-700);
1044
+ --ctx-border-hover: var(--color-default-neutral-800);
1121
1045
  }
1122
1046
 
1123
1047
  @utility ctx-gray-subtle {
@@ -1126,15 +1050,11 @@
1126
1050
  --ctx-background: var(--color-default-neutral-400);
1127
1051
  --ctx-gradient: var(--color-default-neutral-300);
1128
1052
  --ctx-border: var(--color-default-neutral-500);
1053
+ --ctx-border-bold: var(--color-default-neutral-700);
1129
1054
  --ctx-shadow: var(--color-neutral-alpha-500A);
1130
1055
  --ctx-text-hover: var(--color-default-neutral-900);
1131
- --ctx-text-pressed: var(--color-default-neutral-900);
1132
1056
  --ctx-background-hover: var(--color-default-neutral-300);
1133
- --ctx-background-pressed: var(--color-default-neutral-200);
1134
- --ctx-gradient-hover: var(--color-default-neutral-200);
1135
- --ctx-gradient-pressed: var(--color-default-neutral-200);
1136
1057
  --ctx-border-hover: var(--color-default-neutral-500);
1137
- --ctx-border-pressed: var(--color-default-neutral-500);
1138
1058
  }
1139
1059
 
1140
1060
  @utility ctx-gray-subtler {
@@ -1142,16 +1062,12 @@
1142
1062
  --ctx-text-bold: var(--color-default-neutral-900);
1143
1063
  --ctx-background: var(--color-default-neutral-200);
1144
1064
  --ctx-gradient: var(--color-default-neutral-300);
1145
- --ctx-border: var(--color-default-neutral-400);
1065
+ --ctx-border: var(--color-default-neutral-300);
1066
+ --ctx-border-bold: var(--color-default-neutral-500);
1146
1067
  --ctx-shadow: var(--color-neutral-alpha-500A);
1147
1068
  --ctx-text-hover: var(--color-default-neutral-800);
1148
- --ctx-text-pressed: var(--color-default-neutral-800);
1149
1069
  --ctx-background-hover: var(--color-default-neutral-300);
1150
- --ctx-background-pressed: var(--color-default-neutral-400);
1151
- --ctx-gradient-hover: var(--color-default-neutral-400);
1152
- --ctx-gradient-pressed: var(--color-default-neutral-400);
1153
- --ctx-border-hover: var(--color-default-neutral-400);
1154
- --ctx-border-pressed: var(--color-default-neutral-400);
1070
+ --ctx-border-hover: var(--color-default-neutral-300);
1155
1071
  }
1156
1072
 
1157
1073
  @utility ctx-gray-subtlest {
@@ -1159,16 +1075,12 @@
1159
1075
  --ctx-text-bold: var(--color-default-neutral-900);
1160
1076
  --ctx-background: var(--color-default-neutral-100);
1161
1077
  --ctx-gradient: var(--color-default-neutral-200);
1162
- --ctx-border: var(--color-default-neutral-300);
1078
+ --ctx-border: var(--color-default-neutral-200);
1079
+ --ctx-border-bold: var(--color-default-neutral-400);
1163
1080
  --ctx-shadow: var(--color-neutral-alpha-500A);
1164
1081
  --ctx-text-hover: var(--color-default-neutral-800);
1165
- --ctx-text-pressed: var(--color-default-neutral-800);
1166
1082
  --ctx-background-hover: var(--color-default-neutral-200);
1167
- --ctx-background-pressed: var(--color-default-neutral-300);
1168
- --ctx-gradient-hover: var(--color-default-neutral-300);
1169
- --ctx-gradient-pressed: var(--color-default-neutral-300);
1170
- --ctx-border-hover: var(--color-default-neutral-300);
1171
- --ctx-border-pressed: var(--color-default-neutral-300);
1083
+ --ctx-border-hover: var(--color-default-neutral-200);
1172
1084
  }
1173
1085
 
1174
1086
  @utility ctx-green-bolder {
@@ -1176,16 +1088,12 @@
1176
1088
  --ctx-text-bold: var(--color-default-green-100);
1177
1089
  --ctx-background: var(--color-default-green-700);
1178
1090
  --ctx-gradient: var(--color-default-green-800);
1179
- --ctx-border: var(--color-default-green-700);
1091
+ --ctx-border: var(--color-default-green-800);
1092
+ --ctx-border-bold: var(--color-default-green-600);
1180
1093
  --ctx-shadow: var(--color-neutral-alpha-500A);
1181
1094
  --ctx-text-hover: var(--color-default-green-200);
1182
- --ctx-text-pressed: var(--color-default-green-200);
1183
1095
  --ctx-background-hover: var(--color-default-green-800);
1184
- --ctx-background-pressed: var(--color-default-green-900);
1185
- --ctx-gradient-hover: var(--color-default-green-900);
1186
- --ctx-gradient-pressed: var(--color-default-green-900);
1187
- --ctx-border-hover: var(--color-default-green-700);
1188
- --ctx-border-pressed: var(--color-default-green-700);
1096
+ --ctx-border-hover: var(--color-default-green-800);
1189
1097
  }
1190
1098
 
1191
1099
  @utility ctx-green-subtle {
@@ -1194,15 +1102,11 @@
1194
1102
  --ctx-background: var(--color-default-green-400);
1195
1103
  --ctx-gradient: var(--color-default-green-300);
1196
1104
  --ctx-border: var(--color-default-green-500);
1105
+ --ctx-border-bold: var(--color-default-green-700);
1197
1106
  --ctx-shadow: var(--color-neutral-alpha-500A);
1198
1107
  --ctx-text-hover: var(--color-default-green-900);
1199
- --ctx-text-pressed: var(--color-default-green-900);
1200
1108
  --ctx-background-hover: var(--color-default-green-300);
1201
- --ctx-background-pressed: var(--color-default-green-200);
1202
- --ctx-gradient-hover: var(--color-default-green-200);
1203
- --ctx-gradient-pressed: var(--color-default-green-200);
1204
1109
  --ctx-border-hover: var(--color-default-green-500);
1205
- --ctx-border-pressed: var(--color-default-green-500);
1206
1110
  }
1207
1111
 
1208
1112
  @utility ctx-green-subtler {
@@ -1210,16 +1114,12 @@
1210
1114
  --ctx-text-bold: var(--color-default-green-900);
1211
1115
  --ctx-background: var(--color-default-green-200);
1212
1116
  --ctx-gradient: var(--color-default-green-300);
1213
- --ctx-border: var(--color-default-green-400);
1117
+ --ctx-border: var(--color-default-green-300);
1118
+ --ctx-border-bold: var(--color-default-green-500);
1214
1119
  --ctx-shadow: var(--color-neutral-alpha-500A);
1215
1120
  --ctx-text-hover: var(--color-default-green-800);
1216
- --ctx-text-pressed: var(--color-default-green-800);
1217
1121
  --ctx-background-hover: var(--color-default-green-300);
1218
- --ctx-background-pressed: var(--color-default-green-400);
1219
- --ctx-gradient-hover: var(--color-default-green-400);
1220
- --ctx-gradient-pressed: var(--color-default-green-400);
1221
- --ctx-border-hover: var(--color-default-green-400);
1222
- --ctx-border-pressed: var(--color-default-green-400);
1122
+ --ctx-border-hover: var(--color-default-green-300);
1223
1123
  }
1224
1124
 
1225
1125
  @utility ctx-green-subtlest {
@@ -1227,16 +1127,12 @@
1227
1127
  --ctx-text-bold: var(--color-default-green-900);
1228
1128
  --ctx-background: var(--color-default-green-100);
1229
1129
  --ctx-gradient: var(--color-default-green-200);
1230
- --ctx-border: var(--color-default-green-300);
1130
+ --ctx-border: var(--color-default-green-200);
1131
+ --ctx-border-bold: var(--color-default-green-400);
1231
1132
  --ctx-shadow: var(--color-neutral-alpha-500A);
1232
1133
  --ctx-text-hover: var(--color-default-green-800);
1233
- --ctx-text-pressed: var(--color-default-green-800);
1234
1134
  --ctx-background-hover: var(--color-default-green-200);
1235
- --ctx-background-pressed: var(--color-default-green-300);
1236
- --ctx-gradient-hover: var(--color-default-green-300);
1237
- --ctx-gradient-pressed: var(--color-default-green-300);
1238
- --ctx-border-hover: var(--color-default-green-300);
1239
- --ctx-border-pressed: var(--color-default-green-300);
1135
+ --ctx-border-hover: var(--color-default-green-200);
1240
1136
  }
1241
1137
 
1242
1138
  @utility ctx-info-bolder {
@@ -1245,15 +1141,11 @@
1245
1141
  --ctx-background: var(--color-default-blue-700);
1246
1142
  --ctx-gradient: var(--color-default-blue-800);
1247
1143
  --ctx-border: var(--color-default-blue-700);
1144
+ --ctx-border-bold: var(--color-default-blue-400);
1248
1145
  --ctx-shadow: var(--color-neutral-alpha-500A);
1249
1146
  --ctx-text-hover: var(--color-default-blue-200);
1250
- --ctx-text-pressed: var(--color-default-blue-200);
1251
1147
  --ctx-background-hover: var(--color-default-blue-800);
1252
- --ctx-background-pressed: var(--color-default-blue-900);
1253
- --ctx-gradient-hover: var(--color-default-blue-900);
1254
- --ctx-gradient-pressed: var(--color-default-blue-900);
1255
1148
  --ctx-border-hover: var(--color-default-blue-700);
1256
- --ctx-border-pressed: var(--color-default-blue-700);
1257
1149
  }
1258
1150
 
1259
1151
  @utility ctx-info-subtlest {
@@ -1262,15 +1154,11 @@
1262
1154
  --ctx-background: var(--color-default-blue-100);
1263
1155
  --ctx-gradient: var(--color-default-blue-200);
1264
1156
  --ctx-border: var(--color-default-blue-300);
1157
+ --ctx-border-bold: var(--color-default-blue-800);
1265
1158
  --ctx-shadow: var(--color-neutral-alpha-500A);
1266
1159
  --ctx-text-hover: var(--color-default-blue-800);
1267
- --ctx-text-pressed: var(--color-default-blue-800);
1268
1160
  --ctx-background-hover: var(--color-default-blue-200);
1269
- --ctx-background-pressed: var(--color-default-blue-300);
1270
- --ctx-gradient-hover: var(--color-default-blue-300);
1271
- --ctx-gradient-pressed: var(--color-default-blue-300);
1272
1161
  --ctx-border-hover: var(--color-default-blue-300);
1273
- --ctx-border-pressed: var(--color-default-blue-300);
1274
1162
  }
1275
1163
 
1276
1164
  @utility ctx-magenta-bolder {
@@ -1278,16 +1166,12 @@
1278
1166
  --ctx-text-bold: var(--color-default-magenta-100);
1279
1167
  --ctx-background: var(--color-default-magenta-700);
1280
1168
  --ctx-gradient: var(--color-default-magenta-800);
1281
- --ctx-border: var(--color-default-magenta-700);
1169
+ --ctx-border: var(--color-default-magenta-800);
1170
+ --ctx-border-bold: var(--color-default-magenta-600);
1282
1171
  --ctx-shadow: var(--color-neutral-alpha-500A);
1283
1172
  --ctx-text-hover: var(--color-default-magenta-200);
1284
- --ctx-text-pressed: var(--color-default-magenta-200);
1285
1173
  --ctx-background-hover: var(--color-default-magenta-800);
1286
- --ctx-background-pressed: var(--color-default-magenta-900);
1287
- --ctx-gradient-hover: var(--color-default-magenta-900);
1288
- --ctx-gradient-pressed: var(--color-default-magenta-900);
1289
- --ctx-border-hover: var(--color-default-magenta-700);
1290
- --ctx-border-pressed: var(--color-default-magenta-700);
1174
+ --ctx-border-hover: var(--color-default-magenta-800);
1291
1175
  }
1292
1176
 
1293
1177
  @utility ctx-magenta-subtle {
@@ -1296,15 +1180,11 @@
1296
1180
  --ctx-background: var(--color-default-magenta-400);
1297
1181
  --ctx-gradient: var(--color-default-magenta-300);
1298
1182
  --ctx-border: var(--color-default-magenta-500);
1183
+ --ctx-border-bold: var(--color-default-magenta-700);
1299
1184
  --ctx-shadow: var(--color-neutral-alpha-500A);
1300
1185
  --ctx-text-hover: var(--color-default-magenta-900);
1301
- --ctx-text-pressed: var(--color-default-magenta-900);
1302
1186
  --ctx-background-hover: var(--color-default-magenta-300);
1303
- --ctx-background-pressed: var(--color-default-magenta-200);
1304
- --ctx-gradient-hover: var(--color-default-magenta-200);
1305
- --ctx-gradient-pressed: var(--color-default-magenta-200);
1306
1187
  --ctx-border-hover: var(--color-default-magenta-500);
1307
- --ctx-border-pressed: var(--color-default-magenta-500);
1308
1188
  }
1309
1189
 
1310
1190
  @utility ctx-magenta-subtler {
@@ -1312,16 +1192,12 @@
1312
1192
  --ctx-text-bold: var(--color-default-magenta-900);
1313
1193
  --ctx-background: var(--color-default-magenta-200);
1314
1194
  --ctx-gradient: var(--color-default-magenta-300);
1315
- --ctx-border: var(--color-default-magenta-400);
1195
+ --ctx-border: var(--color-default-magenta-300);
1196
+ --ctx-border-bold: var(--color-default-magenta-500);
1316
1197
  --ctx-shadow: var(--color-neutral-alpha-500A);
1317
1198
  --ctx-text-hover: var(--color-default-magenta-800);
1318
- --ctx-text-pressed: var(--color-default-magenta-800);
1319
1199
  --ctx-background-hover: var(--color-default-magenta-300);
1320
- --ctx-background-pressed: var(--color-default-magenta-400);
1321
- --ctx-gradient-hover: var(--color-default-magenta-400);
1322
- --ctx-gradient-pressed: var(--color-default-magenta-400);
1323
- --ctx-border-hover: var(--color-default-magenta-400);
1324
- --ctx-border-pressed: var(--color-default-magenta-400);
1200
+ --ctx-border-hover: var(--color-default-magenta-300);
1325
1201
  }
1326
1202
 
1327
1203
  @utility ctx-magenta-subtlest {
@@ -1329,16 +1205,12 @@
1329
1205
  --ctx-text-bold: var(--color-default-magenta-900);
1330
1206
  --ctx-background: var(--color-default-magenta-100);
1331
1207
  --ctx-gradient: var(--color-default-magenta-200);
1332
- --ctx-border: var(--color-default-magenta-300);
1208
+ --ctx-border: var(--color-default-magenta-200);
1209
+ --ctx-border-bold: var(--color-default-magenta-400);
1333
1210
  --ctx-shadow: var(--color-neutral-alpha-500A);
1334
1211
  --ctx-text-hover: var(--color-default-magenta-800);
1335
- --ctx-text-pressed: var(--color-default-magenta-800);
1336
1212
  --ctx-background-hover: var(--color-default-magenta-200);
1337
- --ctx-background-pressed: var(--color-default-magenta-300);
1338
- --ctx-gradient-hover: var(--color-default-magenta-300);
1339
- --ctx-gradient-pressed: var(--color-default-magenta-300);
1340
- --ctx-border-hover: var(--color-default-magenta-300);
1341
- --ctx-border-pressed: var(--color-default-magenta-300);
1213
+ --ctx-border-hover: var(--color-default-magenta-200);
1342
1214
  }
1343
1215
 
1344
1216
  @utility ctx-neutral-bold {
@@ -1347,15 +1219,11 @@
1347
1219
  --ctx-background: var(--color-default-neutral-900);
1348
1220
  --ctx-gradient: var(--color-default-neutral-800);
1349
1221
  --ctx-border: var(--color-default-neutral-600);
1222
+ --ctx-border-bold: var(--color-default-neutral-500);
1350
1223
  --ctx-shadow: var(--color-neutral-alpha-500A);
1351
1224
  --ctx-text-hover: var(--color-default-neutral-300);
1352
- --ctx-text-pressed: var(--color-default-neutral-300);
1353
1225
  --ctx-background-hover: var(--color-default-neutral-800);
1354
- --ctx-background-pressed: var(--color-default-neutral-700);
1355
- --ctx-gradient-hover: var(--color-default-neutral-700);
1356
- --ctx-gradient-pressed: var(--color-default-neutral-700);
1357
1226
  --ctx-border-hover: var(--color-default-neutral-600);
1358
- --ctx-border-pressed: var(--color-default-neutral-600);
1359
1227
  }
1360
1228
 
1361
1229
  @utility ctx-neutral-bolder {
@@ -1364,15 +1232,11 @@
1364
1232
  --ctx-background: var(--color-default-neutral-1000);
1365
1233
  --ctx-gradient: var(--color-default-neutral-900);
1366
1234
  --ctx-border: var(--color-default-neutral-700);
1235
+ --ctx-border-bold: var(--color-default-neutral-400);
1367
1236
  --ctx-shadow: var(--color-neutral-alpha-500A);
1368
1237
  --ctx-text-hover: var(--color-default-neutral-200);
1369
- --ctx-text-pressed: var(--color-default-neutral-200);
1370
1238
  --ctx-background-hover: var(--color-default-neutral-900);
1371
- --ctx-background-pressed: var(--color-default-neutral-800);
1372
- --ctx-gradient-hover: var(--color-default-neutral-800);
1373
- --ctx-gradient-pressed: var(--color-default-neutral-800);
1374
1239
  --ctx-border-hover: var(--color-default-neutral-700);
1375
- --ctx-border-pressed: var(--color-default-neutral-700);
1376
1240
  }
1377
1241
 
1378
1242
  @utility ctx-neutral-boldest {
@@ -1381,15 +1245,11 @@
1381
1245
  --ctx-background: var(--color-default-neutral-1100);
1382
1246
  --ctx-gradient: var(--color-default-neutral-1000);
1383
1247
  --ctx-border: var(--color-default-neutral-800);
1248
+ --ctx-border-bold: var(--color-default-neutral-300);
1384
1249
  --ctx-shadow: var(--color-neutral-alpha-500A);
1385
1250
  --ctx-text-hover: var(--color-default-neutral-100);
1386
- --ctx-text-pressed: var(--color-default-neutral-100);
1387
1251
  --ctx-background-hover: var(--color-default-neutral-1000);
1388
- --ctx-background-pressed: var(--color-default-neutral-900);
1389
- --ctx-gradient-hover: var(--color-default-neutral-900);
1390
- --ctx-gradient-pressed: var(--color-default-neutral-900);
1391
1252
  --ctx-border-hover: var(--color-default-neutral-800);
1392
- --ctx-border-pressed: var(--color-default-neutral-800);
1393
1253
  }
1394
1254
 
1395
1255
  @utility ctx-neutral-subtle {
@@ -1398,15 +1258,11 @@
1398
1258
  --ctx-background: var(--color-default-neutral-200);
1399
1259
  --ctx-gradient: var(--color-default-neutral-300);
1400
1260
  --ctx-border: var(--color-default-neutral-500);
1261
+ --ctx-border-bold: var(--color-default-neutral-600);
1401
1262
  --ctx-shadow: var(--color-neutral-alpha-500A);
1402
1263
  --ctx-text-hover: var(--color-default-neutral-800);
1403
- --ctx-text-pressed: var(--color-default-neutral-800);
1404
1264
  --ctx-background-hover: var(--color-default-neutral-300);
1405
- --ctx-background-pressed: var(--color-default-neutral-400);
1406
- --ctx-gradient-hover: var(--color-default-neutral-400);
1407
- --ctx-gradient-pressed: var(--color-default-neutral-400);
1408
1265
  --ctx-border-hover: var(--color-default-neutral-500);
1409
- --ctx-border-pressed: var(--color-default-neutral-500);
1410
1266
  }
1411
1267
 
1412
1268
  @utility ctx-neutral-subtler {
@@ -1415,15 +1271,11 @@
1415
1271
  --ctx-background: var(--color-default-neutral-100);
1416
1272
  --ctx-gradient: var(--color-default-neutral-200);
1417
1273
  --ctx-border: var(--color-default-neutral-400);
1274
+ --ctx-border-bold: var(--color-default-neutral-700);
1418
1275
  --ctx-shadow: var(--color-neutral-alpha-500A);
1419
1276
  --ctx-text-hover: var(--color-default-neutral-900);
1420
- --ctx-text-pressed: var(--color-default-neutral-900);
1421
1277
  --ctx-background-hover: var(--color-default-neutral-200);
1422
- --ctx-background-pressed: var(--color-default-neutral-300);
1423
- --ctx-gradient-hover: var(--color-default-neutral-300);
1424
- --ctx-gradient-pressed: var(--color-default-neutral-300);
1425
1278
  --ctx-border-hover: var(--color-default-neutral-400);
1426
- --ctx-border-pressed: var(--color-default-neutral-400);
1427
1279
  }
1428
1280
 
1429
1281
  @utility ctx-neutral-subtlest {
@@ -1432,15 +1284,11 @@
1432
1284
  --ctx-background: var(--color-default-neutral-0);
1433
1285
  --ctx-gradient: var(--color-default-neutral-100);
1434
1286
  --ctx-border: var(--color-default-neutral-300);
1287
+ --ctx-border-bold: var(--color-default-neutral-800);
1435
1288
  --ctx-shadow: var(--color-neutral-alpha-500A);
1436
1289
  --ctx-text-hover: var(--color-default-neutral-1000);
1437
- --ctx-text-pressed: var(--color-default-neutral-1000);
1438
1290
  --ctx-background-hover: var(--color-default-neutral-100);
1439
- --ctx-background-pressed: var(--color-default-neutral-200);
1440
- --ctx-gradient-hover: var(--color-default-neutral-200);
1441
- --ctx-gradient-pressed: var(--color-default-neutral-200);
1442
1291
  --ctx-border-hover: var(--color-default-neutral-300);
1443
- --ctx-border-pressed: var(--color-default-neutral-300);
1444
1292
  }
1445
1293
 
1446
1294
  @utility ctx-orange-bolder {
@@ -1448,16 +1296,12 @@
1448
1296
  --ctx-text-bold: var(--color-default-orange-100);
1449
1297
  --ctx-background: var(--color-default-orange-700);
1450
1298
  --ctx-gradient: var(--color-default-orange-800);
1451
- --ctx-border: var(--color-default-orange-700);
1299
+ --ctx-border: var(--color-default-orange-800);
1300
+ --ctx-border-bold: var(--color-default-orange-600);
1452
1301
  --ctx-shadow: var(--color-neutral-alpha-500A);
1453
1302
  --ctx-text-hover: var(--color-default-orange-200);
1454
- --ctx-text-pressed: var(--color-default-orange-200);
1455
1303
  --ctx-background-hover: var(--color-default-orange-800);
1456
- --ctx-background-pressed: var(--color-default-orange-900);
1457
- --ctx-gradient-hover: var(--color-default-orange-900);
1458
- --ctx-gradient-pressed: var(--color-default-orange-900);
1459
- --ctx-border-hover: var(--color-default-orange-700);
1460
- --ctx-border-pressed: var(--color-default-orange-700);
1304
+ --ctx-border-hover: var(--color-default-orange-800);
1461
1305
  }
1462
1306
 
1463
1307
  @utility ctx-orange-subtle {
@@ -1466,15 +1310,11 @@
1466
1310
  --ctx-background: var(--color-default-orange-400);
1467
1311
  --ctx-gradient: var(--color-default-orange-300);
1468
1312
  --ctx-border: var(--color-default-orange-500);
1313
+ --ctx-border-bold: var(--color-default-orange-700);
1469
1314
  --ctx-shadow: var(--color-neutral-alpha-500A);
1470
1315
  --ctx-text-hover: var(--color-default-orange-900);
1471
- --ctx-text-pressed: var(--color-default-orange-900);
1472
1316
  --ctx-background-hover: var(--color-default-orange-300);
1473
- --ctx-background-pressed: var(--color-default-orange-200);
1474
- --ctx-gradient-hover: var(--color-default-orange-200);
1475
- --ctx-gradient-pressed: var(--color-default-orange-200);
1476
1317
  --ctx-border-hover: var(--color-default-orange-500);
1477
- --ctx-border-pressed: var(--color-default-orange-500);
1478
1318
  }
1479
1319
 
1480
1320
  @utility ctx-orange-subtler {
@@ -1482,16 +1322,12 @@
1482
1322
  --ctx-text-bold: var(--color-default-orange-900);
1483
1323
  --ctx-background: var(--color-default-orange-200);
1484
1324
  --ctx-gradient: var(--color-default-orange-300);
1485
- --ctx-border: var(--color-default-orange-400);
1325
+ --ctx-border: var(--color-default-orange-300);
1326
+ --ctx-border-bold: var(--color-default-orange-500);
1486
1327
  --ctx-shadow: var(--color-neutral-alpha-500A);
1487
1328
  --ctx-text-hover: var(--color-default-orange-800);
1488
- --ctx-text-pressed: var(--color-default-orange-800);
1489
1329
  --ctx-background-hover: var(--color-default-orange-300);
1490
- --ctx-background-pressed: var(--color-default-orange-400);
1491
- --ctx-gradient-hover: var(--color-default-orange-400);
1492
- --ctx-gradient-pressed: var(--color-default-orange-400);
1493
- --ctx-border-hover: var(--color-default-orange-400);
1494
- --ctx-border-pressed: var(--color-default-orange-400);
1330
+ --ctx-border-hover: var(--color-default-orange-300);
1495
1331
  }
1496
1332
 
1497
1333
  @utility ctx-orange-subtlest {
@@ -1499,16 +1335,12 @@
1499
1335
  --ctx-text-bold: var(--color-default-orange-900);
1500
1336
  --ctx-background: var(--color-default-orange-100);
1501
1337
  --ctx-gradient: var(--color-default-orange-200);
1502
- --ctx-border: var(--color-default-orange-300);
1338
+ --ctx-border: var(--color-default-orange-200);
1339
+ --ctx-border-bold: var(--color-default-orange-400);
1503
1340
  --ctx-shadow: var(--color-neutral-alpha-500A);
1504
1341
  --ctx-text-hover: var(--color-default-orange-800);
1505
- --ctx-text-pressed: var(--color-default-orange-800);
1506
1342
  --ctx-background-hover: var(--color-default-orange-200);
1507
- --ctx-background-pressed: var(--color-default-orange-300);
1508
- --ctx-gradient-hover: var(--color-default-orange-300);
1509
- --ctx-gradient-pressed: var(--color-default-orange-300);
1510
- --ctx-border-hover: var(--color-default-orange-300);
1511
- --ctx-border-pressed: var(--color-default-orange-300);
1343
+ --ctx-border-hover: var(--color-default-orange-200);
1512
1344
  }
1513
1345
 
1514
1346
  @utility ctx-purple-bolder {
@@ -1516,16 +1348,12 @@
1516
1348
  --ctx-text-bold: var(--color-default-purple-100);
1517
1349
  --ctx-background: var(--color-default-purple-700);
1518
1350
  --ctx-gradient: var(--color-default-purple-800);
1519
- --ctx-border: var(--color-default-purple-700);
1351
+ --ctx-border: var(--color-default-purple-800);
1352
+ --ctx-border-bold: var(--color-default-purple-600);
1520
1353
  --ctx-shadow: var(--color-neutral-alpha-500A);
1521
1354
  --ctx-text-hover: var(--color-default-purple-200);
1522
- --ctx-text-pressed: var(--color-default-purple-200);
1523
1355
  --ctx-background-hover: var(--color-default-purple-800);
1524
- --ctx-background-pressed: var(--color-default-purple-900);
1525
- --ctx-gradient-hover: var(--color-default-purple-900);
1526
- --ctx-gradient-pressed: var(--color-default-purple-900);
1527
- --ctx-border-hover: var(--color-default-purple-700);
1528
- --ctx-border-pressed: var(--color-default-purple-700);
1356
+ --ctx-border-hover: var(--color-default-purple-800);
1529
1357
  }
1530
1358
 
1531
1359
  @utility ctx-purple-subtle {
@@ -1534,15 +1362,11 @@
1534
1362
  --ctx-background: var(--color-default-purple-400);
1535
1363
  --ctx-gradient: var(--color-default-purple-300);
1536
1364
  --ctx-border: var(--color-default-purple-500);
1365
+ --ctx-border-bold: var(--color-default-purple-700);
1537
1366
  --ctx-shadow: var(--color-neutral-alpha-500A);
1538
1367
  --ctx-text-hover: var(--color-default-purple-900);
1539
- --ctx-text-pressed: var(--color-default-purple-900);
1540
1368
  --ctx-background-hover: var(--color-default-purple-300);
1541
- --ctx-background-pressed: var(--color-default-purple-200);
1542
- --ctx-gradient-hover: var(--color-default-purple-200);
1543
- --ctx-gradient-pressed: var(--color-default-purple-200);
1544
1369
  --ctx-border-hover: var(--color-default-purple-500);
1545
- --ctx-border-pressed: var(--color-default-purple-500);
1546
1370
  }
1547
1371
 
1548
1372
  @utility ctx-purple-subtler {
@@ -1550,16 +1374,12 @@
1550
1374
  --ctx-text-bold: var(--color-default-purple-900);
1551
1375
  --ctx-background: var(--color-default-purple-200);
1552
1376
  --ctx-gradient: var(--color-default-purple-300);
1553
- --ctx-border: var(--color-default-purple-400);
1377
+ --ctx-border: var(--color-default-purple-300);
1378
+ --ctx-border-bold: var(--color-default-purple-500);
1554
1379
  --ctx-shadow: var(--color-neutral-alpha-500A);
1555
1380
  --ctx-text-hover: var(--color-default-purple-800);
1556
- --ctx-text-pressed: var(--color-default-purple-800);
1557
1381
  --ctx-background-hover: var(--color-default-purple-300);
1558
- --ctx-background-pressed: var(--color-default-purple-400);
1559
- --ctx-gradient-hover: var(--color-default-purple-400);
1560
- --ctx-gradient-pressed: var(--color-default-purple-400);
1561
- --ctx-border-hover: var(--color-default-purple-400);
1562
- --ctx-border-pressed: var(--color-default-purple-400);
1382
+ --ctx-border-hover: var(--color-default-purple-300);
1563
1383
  }
1564
1384
 
1565
1385
  @utility ctx-purple-subtlest {
@@ -1567,16 +1387,12 @@
1567
1387
  --ctx-text-bold: var(--color-default-purple-900);
1568
1388
  --ctx-background: var(--color-default-purple-100);
1569
1389
  --ctx-gradient: var(--color-default-purple-200);
1570
- --ctx-border: var(--color-default-purple-300);
1390
+ --ctx-border: var(--color-default-purple-200);
1391
+ --ctx-border-bold: var(--color-default-purple-400);
1571
1392
  --ctx-shadow: var(--color-neutral-alpha-500A);
1572
1393
  --ctx-text-hover: var(--color-default-purple-800);
1573
- --ctx-text-pressed: var(--color-default-purple-800);
1574
1394
  --ctx-background-hover: var(--color-default-purple-200);
1575
- --ctx-background-pressed: var(--color-default-purple-300);
1576
- --ctx-gradient-hover: var(--color-default-purple-300);
1577
- --ctx-gradient-pressed: var(--color-default-purple-300);
1578
- --ctx-border-hover: var(--color-default-purple-300);
1579
- --ctx-border-pressed: var(--color-default-purple-300);
1395
+ --ctx-border-hover: var(--color-default-purple-200);
1580
1396
  }
1581
1397
 
1582
1398
  @utility ctx-red-bolder {
@@ -1584,16 +1400,12 @@
1584
1400
  --ctx-text-bold: var(--color-default-red-100);
1585
1401
  --ctx-background: var(--color-default-red-700);
1586
1402
  --ctx-gradient: var(--color-default-red-800);
1587
- --ctx-border: var(--color-default-red-700);
1403
+ --ctx-border: var(--color-default-red-800);
1404
+ --ctx-border-bold: var(--color-default-red-600);
1588
1405
  --ctx-shadow: var(--color-neutral-alpha-500A);
1589
1406
  --ctx-text-hover: var(--color-default-red-200);
1590
- --ctx-text-pressed: var(--color-default-red-200);
1591
1407
  --ctx-background-hover: var(--color-default-red-800);
1592
- --ctx-background-pressed: var(--color-default-red-900);
1593
- --ctx-gradient-hover: var(--color-default-red-900);
1594
- --ctx-gradient-pressed: var(--color-default-red-900);
1595
- --ctx-border-hover: var(--color-default-red-700);
1596
- --ctx-border-pressed: var(--color-default-red-700);
1408
+ --ctx-border-hover: var(--color-default-red-800);
1597
1409
  }
1598
1410
 
1599
1411
  @utility ctx-red-subtle {
@@ -1602,15 +1414,11 @@
1602
1414
  --ctx-background: var(--color-default-red-400);
1603
1415
  --ctx-gradient: var(--color-default-red-300);
1604
1416
  --ctx-border: var(--color-default-red-500);
1417
+ --ctx-border-bold: var(--color-default-red-700);
1605
1418
  --ctx-shadow: var(--color-neutral-alpha-500A);
1606
1419
  --ctx-text-hover: var(--color-default-red-900);
1607
- --ctx-text-pressed: var(--color-default-red-900);
1608
1420
  --ctx-background-hover: var(--color-default-red-300);
1609
- --ctx-background-pressed: var(--color-default-red-200);
1610
- --ctx-gradient-hover: var(--color-default-red-200);
1611
- --ctx-gradient-pressed: var(--color-default-red-200);
1612
1421
  --ctx-border-hover: var(--color-default-red-500);
1613
- --ctx-border-pressed: var(--color-default-red-500);
1614
1422
  }
1615
1423
 
1616
1424
  @utility ctx-red-subtler {
@@ -1618,16 +1426,12 @@
1618
1426
  --ctx-text-bold: var(--color-default-red-900);
1619
1427
  --ctx-background: var(--color-default-red-200);
1620
1428
  --ctx-gradient: var(--color-default-red-300);
1621
- --ctx-border: var(--color-default-red-400);
1429
+ --ctx-border: var(--color-default-red-300);
1430
+ --ctx-border-bold: var(--color-default-red-500);
1622
1431
  --ctx-shadow: var(--color-neutral-alpha-500A);
1623
1432
  --ctx-text-hover: var(--color-default-red-800);
1624
- --ctx-text-pressed: var(--color-default-red-800);
1625
1433
  --ctx-background-hover: var(--color-default-red-300);
1626
- --ctx-background-pressed: var(--color-default-red-400);
1627
- --ctx-gradient-hover: var(--color-default-red-400);
1628
- --ctx-gradient-pressed: var(--color-default-red-400);
1629
- --ctx-border-hover: var(--color-default-red-400);
1630
- --ctx-border-pressed: var(--color-default-red-400);
1434
+ --ctx-border-hover: var(--color-default-red-300);
1631
1435
  }
1632
1436
 
1633
1437
  @utility ctx-red-subtlest {
@@ -1635,16 +1439,12 @@
1635
1439
  --ctx-text-bold: var(--color-default-red-900);
1636
1440
  --ctx-background: var(--color-default-red-100);
1637
1441
  --ctx-gradient: var(--color-default-red-200);
1638
- --ctx-border: var(--color-default-red-300);
1442
+ --ctx-border: var(--color-default-red-200);
1443
+ --ctx-border-bold: var(--color-default-red-400);
1639
1444
  --ctx-shadow: var(--color-neutral-alpha-500A);
1640
1445
  --ctx-text-hover: var(--color-default-red-800);
1641
- --ctx-text-pressed: var(--color-default-red-800);
1642
1446
  --ctx-background-hover: var(--color-default-red-200);
1643
- --ctx-background-pressed: var(--color-default-red-300);
1644
- --ctx-gradient-hover: var(--color-default-red-300);
1645
- --ctx-gradient-pressed: var(--color-default-red-300);
1646
- --ctx-border-hover: var(--color-default-red-300);
1647
- --ctx-border-pressed: var(--color-default-red-300);
1447
+ --ctx-border-hover: var(--color-default-red-200);
1648
1448
  }
1649
1449
 
1650
1450
  @utility ctx-success-bolder {
@@ -1653,15 +1453,11 @@
1653
1453
  --ctx-background: var(--color-default-green-700);
1654
1454
  --ctx-gradient: var(--color-default-green-800);
1655
1455
  --ctx-border: var(--color-default-green-700);
1456
+ --ctx-border-bold: var(--color-default-green-400);
1656
1457
  --ctx-shadow: var(--color-neutral-alpha-500A);
1657
1458
  --ctx-text-hover: var(--color-default-green-200);
1658
- --ctx-text-pressed: var(--color-default-green-200);
1659
1459
  --ctx-background-hover: var(--color-default-green-800);
1660
- --ctx-background-pressed: var(--color-default-green-900);
1661
- --ctx-gradient-hover: var(--color-default-green-900);
1662
- --ctx-gradient-pressed: var(--color-default-green-900);
1663
1460
  --ctx-border-hover: var(--color-default-green-700);
1664
- --ctx-border-pressed: var(--color-default-green-700);
1665
1461
  }
1666
1462
 
1667
1463
  @utility ctx-success-subtlest {
@@ -1670,15 +1466,11 @@
1670
1466
  --ctx-background: var(--color-default-green-100);
1671
1467
  --ctx-gradient: var(--color-default-green-200);
1672
1468
  --ctx-border: var(--color-default-green-300);
1469
+ --ctx-border-bold: var(--color-default-green-800);
1673
1470
  --ctx-shadow: var(--color-neutral-alpha-500A);
1674
1471
  --ctx-text-hover: var(--color-default-green-800);
1675
- --ctx-text-pressed: var(--color-default-green-800);
1676
1472
  --ctx-background-hover: var(--color-default-green-200);
1677
- --ctx-background-pressed: var(--color-default-green-300);
1678
- --ctx-gradient-hover: var(--color-default-green-300);
1679
- --ctx-gradient-pressed: var(--color-default-green-300);
1680
1473
  --ctx-border-hover: var(--color-default-green-300);
1681
- --ctx-border-pressed: var(--color-default-green-300);
1682
1474
  }
1683
1475
 
1684
1476
  @utility ctx-teal-bolder {
@@ -1686,16 +1478,12 @@
1686
1478
  --ctx-text-bold: var(--color-default-teal-100);
1687
1479
  --ctx-background: var(--color-default-teal-700);
1688
1480
  --ctx-gradient: var(--color-default-teal-800);
1689
- --ctx-border: var(--color-default-teal-700);
1481
+ --ctx-border: var(--color-default-teal-800);
1482
+ --ctx-border-bold: var(--color-default-teal-600);
1690
1483
  --ctx-shadow: var(--color-neutral-alpha-500A);
1691
1484
  --ctx-text-hover: var(--color-default-teal-200);
1692
- --ctx-text-pressed: var(--color-default-teal-200);
1693
1485
  --ctx-background-hover: var(--color-default-teal-800);
1694
- --ctx-background-pressed: var(--color-default-teal-900);
1695
- --ctx-gradient-hover: var(--color-default-teal-900);
1696
- --ctx-gradient-pressed: var(--color-default-teal-900);
1697
- --ctx-border-hover: var(--color-default-teal-700);
1698
- --ctx-border-pressed: var(--color-default-teal-700);
1486
+ --ctx-border-hover: var(--color-default-teal-800);
1699
1487
  }
1700
1488
 
1701
1489
  @utility ctx-teal-subtle {
@@ -1704,15 +1492,11 @@
1704
1492
  --ctx-background: var(--color-default-teal-400);
1705
1493
  --ctx-gradient: var(--color-default-teal-300);
1706
1494
  --ctx-border: var(--color-default-teal-500);
1495
+ --ctx-border-bold: var(--color-default-teal-700);
1707
1496
  --ctx-shadow: var(--color-neutral-alpha-500A);
1708
1497
  --ctx-text-hover: var(--color-default-teal-900);
1709
- --ctx-text-pressed: var(--color-default-teal-900);
1710
1498
  --ctx-background-hover: var(--color-default-teal-300);
1711
- --ctx-background-pressed: var(--color-default-teal-200);
1712
- --ctx-gradient-hover: var(--color-default-teal-200);
1713
- --ctx-gradient-pressed: var(--color-default-teal-200);
1714
1499
  --ctx-border-hover: var(--color-default-teal-500);
1715
- --ctx-border-pressed: var(--color-default-teal-500);
1716
1500
  }
1717
1501
 
1718
1502
  @utility ctx-teal-subtler {
@@ -1720,16 +1504,12 @@
1720
1504
  --ctx-text-bold: var(--color-default-teal-900);
1721
1505
  --ctx-background: var(--color-default-teal-200);
1722
1506
  --ctx-gradient: var(--color-default-teal-300);
1723
- --ctx-border: var(--color-default-teal-400);
1507
+ --ctx-border: var(--color-default-teal-300);
1508
+ --ctx-border-bold: var(--color-default-teal-500);
1724
1509
  --ctx-shadow: var(--color-neutral-alpha-500A);
1725
1510
  --ctx-text-hover: var(--color-default-teal-800);
1726
- --ctx-text-pressed: var(--color-default-teal-800);
1727
1511
  --ctx-background-hover: var(--color-default-teal-300);
1728
- --ctx-background-pressed: var(--color-default-teal-400);
1729
- --ctx-gradient-hover: var(--color-default-teal-400);
1730
- --ctx-gradient-pressed: var(--color-default-teal-400);
1731
- --ctx-border-hover: var(--color-default-teal-400);
1732
- --ctx-border-pressed: var(--color-default-teal-400);
1512
+ --ctx-border-hover: var(--color-default-teal-300);
1733
1513
  }
1734
1514
 
1735
1515
  @utility ctx-teal-subtlest {
@@ -1737,16 +1517,12 @@
1737
1517
  --ctx-text-bold: var(--color-default-teal-900);
1738
1518
  --ctx-background: var(--color-default-teal-100);
1739
1519
  --ctx-gradient: var(--color-default-teal-200);
1740
- --ctx-border: var(--color-default-teal-300);
1520
+ --ctx-border: var(--color-default-teal-200);
1521
+ --ctx-border-bold: var(--color-default-teal-400);
1741
1522
  --ctx-shadow: var(--color-neutral-alpha-500A);
1742
1523
  --ctx-text-hover: var(--color-default-teal-800);
1743
- --ctx-text-pressed: var(--color-default-teal-800);
1744
1524
  --ctx-background-hover: var(--color-default-teal-200);
1745
- --ctx-background-pressed: var(--color-default-teal-300);
1746
- --ctx-gradient-hover: var(--color-default-teal-300);
1747
- --ctx-gradient-pressed: var(--color-default-teal-300);
1748
- --ctx-border-hover: var(--color-default-teal-300);
1749
- --ctx-border-pressed: var(--color-default-teal-300);
1525
+ --ctx-border-hover: var(--color-default-teal-200);
1750
1526
  }
1751
1527
 
1752
1528
  @utility ctx-warning-bolder {
@@ -1755,15 +1531,11 @@
1755
1531
  --ctx-background: var(--color-default-yellow-700);
1756
1532
  --ctx-gradient: var(--color-default-yellow-800);
1757
1533
  --ctx-border: var(--color-default-yellow-700);
1534
+ --ctx-border-bold: var(--color-default-yellow-400);
1758
1535
  --ctx-shadow: var(--color-neutral-alpha-500A);
1759
1536
  --ctx-text-hover: var(--color-default-yellow-200);
1760
- --ctx-text-pressed: var(--color-default-yellow-200);
1761
1537
  --ctx-background-hover: var(--color-default-yellow-800);
1762
- --ctx-background-pressed: var(--color-default-yellow-900);
1763
- --ctx-gradient-hover: var(--color-default-yellow-900);
1764
- --ctx-gradient-pressed: var(--color-default-yellow-900);
1765
1538
  --ctx-border-hover: var(--color-default-yellow-700);
1766
- --ctx-border-pressed: var(--color-default-yellow-700);
1767
1539
  }
1768
1540
 
1769
1541
  @utility ctx-warning-subtlest {
@@ -1772,15 +1544,11 @@
1772
1544
  --ctx-background: var(--color-default-yellow-100);
1773
1545
  --ctx-gradient: var(--color-default-yellow-200);
1774
1546
  --ctx-border: var(--color-default-yellow-300);
1547
+ --ctx-border-bold: var(--color-default-yellow-800);
1775
1548
  --ctx-shadow: var(--color-neutral-alpha-500A);
1776
1549
  --ctx-text-hover: var(--color-default-yellow-800);
1777
- --ctx-text-pressed: var(--color-default-yellow-800);
1778
1550
  --ctx-background-hover: var(--color-default-yellow-200);
1779
- --ctx-background-pressed: var(--color-default-yellow-300);
1780
- --ctx-gradient-hover: var(--color-default-yellow-300);
1781
- --ctx-gradient-pressed: var(--color-default-yellow-300);
1782
1551
  --ctx-border-hover: var(--color-default-yellow-300);
1783
- --ctx-border-pressed: var(--color-default-yellow-300);
1784
1552
  }
1785
1553
 
1786
1554
  @utility ctx-yellow-bolder {
@@ -1788,16 +1556,12 @@
1788
1556
  --ctx-text-bold: var(--color-default-yellow-100);
1789
1557
  --ctx-background: var(--color-default-yellow-700);
1790
1558
  --ctx-gradient: var(--color-default-yellow-800);
1791
- --ctx-border: var(--color-default-yellow-700);
1559
+ --ctx-border: var(--color-default-yellow-800);
1560
+ --ctx-border-bold: var(--color-default-yellow-600);
1792
1561
  --ctx-shadow: var(--color-neutral-alpha-500A);
1793
1562
  --ctx-text-hover: var(--color-default-yellow-200);
1794
- --ctx-text-pressed: var(--color-default-yellow-200);
1795
1563
  --ctx-background-hover: var(--color-default-yellow-800);
1796
- --ctx-background-pressed: var(--color-default-yellow-900);
1797
- --ctx-gradient-hover: var(--color-default-yellow-900);
1798
- --ctx-gradient-pressed: var(--color-default-yellow-900);
1799
- --ctx-border-hover: var(--color-default-yellow-700);
1800
- --ctx-border-pressed: var(--color-default-yellow-700);
1564
+ --ctx-border-hover: var(--color-default-yellow-800);
1801
1565
  }
1802
1566
 
1803
1567
  @utility ctx-yellow-subtle {
@@ -1806,15 +1570,11 @@
1806
1570
  --ctx-background: var(--color-default-yellow-400);
1807
1571
  --ctx-gradient: var(--color-default-yellow-300);
1808
1572
  --ctx-border: var(--color-default-yellow-500);
1573
+ --ctx-border-bold: var(--color-default-yellow-700);
1809
1574
  --ctx-shadow: var(--color-neutral-alpha-500A);
1810
1575
  --ctx-text-hover: var(--color-default-yellow-900);
1811
- --ctx-text-pressed: var(--color-default-yellow-900);
1812
1576
  --ctx-background-hover: var(--color-default-yellow-300);
1813
- --ctx-background-pressed: var(--color-default-yellow-200);
1814
- --ctx-gradient-hover: var(--color-default-yellow-200);
1815
- --ctx-gradient-pressed: var(--color-default-yellow-200);
1816
1577
  --ctx-border-hover: var(--color-default-yellow-500);
1817
- --ctx-border-pressed: var(--color-default-yellow-500);
1818
1578
  }
1819
1579
 
1820
1580
  @utility ctx-yellow-subtler {
@@ -1822,16 +1582,12 @@
1822
1582
  --ctx-text-bold: var(--color-default-yellow-900);
1823
1583
  --ctx-background: var(--color-default-yellow-200);
1824
1584
  --ctx-gradient: var(--color-default-yellow-300);
1825
- --ctx-border: var(--color-default-yellow-400);
1585
+ --ctx-border: var(--color-default-yellow-300);
1586
+ --ctx-border-bold: var(--color-default-yellow-500);
1826
1587
  --ctx-shadow: var(--color-neutral-alpha-500A);
1827
1588
  --ctx-text-hover: var(--color-default-yellow-800);
1828
- --ctx-text-pressed: var(--color-default-yellow-800);
1829
1589
  --ctx-background-hover: var(--color-default-yellow-300);
1830
- --ctx-background-pressed: var(--color-default-yellow-400);
1831
- --ctx-gradient-hover: var(--color-default-yellow-400);
1832
- --ctx-gradient-pressed: var(--color-default-yellow-400);
1833
- --ctx-border-hover: var(--color-default-yellow-400);
1834
- --ctx-border-pressed: var(--color-default-yellow-400);
1590
+ --ctx-border-hover: var(--color-default-yellow-300);
1835
1591
  }
1836
1592
 
1837
1593
  @utility ctx-yellow-subtlest {
@@ -1839,16 +1595,12 @@
1839
1595
  --ctx-text-bold: var(--color-default-yellow-900);
1840
1596
  --ctx-background: var(--color-default-yellow-100);
1841
1597
  --ctx-gradient: var(--color-default-yellow-200);
1842
- --ctx-border: var(--color-default-yellow-300);
1598
+ --ctx-border: var(--color-default-yellow-200);
1599
+ --ctx-border-bold: var(--color-default-yellow-400);
1843
1600
  --ctx-shadow: var(--color-neutral-alpha-500A);
1844
1601
  --ctx-text-hover: var(--color-default-yellow-800);
1845
- --ctx-text-pressed: var(--color-default-yellow-800);
1846
1602
  --ctx-background-hover: var(--color-default-yellow-200);
1847
- --ctx-background-pressed: var(--color-default-yellow-300);
1848
- --ctx-gradient-hover: var(--color-default-yellow-300);
1849
- --ctx-gradient-pressed: var(--color-default-yellow-300);
1850
- --ctx-border-hover: var(--color-default-yellow-300);
1851
- --ctx-border-pressed: var(--color-default-yellow-300);
1603
+ --ctx-border-hover: var(--color-default-yellow-200);
1852
1604
  }
1853
1605
 
1854
1606
 
@@ -2350,16 +2102,14 @@
2350
2102
  .bcc-capacity-indicator {
2351
2103
  --bcc-capacity-indicator-background: transparent;
2352
2104
  --bcc-capacity-indicator-text: var(--ctx-text);
2353
- --bcc-capacity-indicator-circle: var(--ctx-background);
2354
- --bcc-capacity-indicator-circle-used: var(--color-brand-500);
2105
+ --bcc-capacity-indicator-circle: var(--ctx-border);
2106
+ --bcc-capacity-indicator-circle-used: var(--ctx-border-bold);
2355
2107
  background: var(--bcc-capacity-indicator-background);
2356
- @apply ctx-gray-subtlest;
2108
+ @apply ctx-gray-subtler;
2357
2109
  }
2358
2110
 
2359
2111
  .bcc-capacity-indicator.colored {
2360
2112
  --bcc-capacity-indicator-background: var(--ctx-background);
2361
- --bcc-capacity-indicator-circle: var(--ctx-background-hover);
2362
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2363
2113
  @apply ctx-blue-subtlest;
2364
2114
  }
2365
2115
 
@@ -2375,14 +2125,11 @@
2375
2125
 
2376
2126
  .bcc-capacity-indicator.is-warning {
2377
2127
  @apply ctx-yellow-subtlest;
2378
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2379
2128
  }
2380
2129
 
2381
2130
  .bcc-capacity-indicator.is-full {
2382
2131
  @apply ctx-red-subtlest;
2383
-
2384
- --bcc-capacity-indicator-circle: var(--ctx-background);
2385
- --bcc-capacity-indicator-circle-used: var(--ctx-border);
2132
+ --bcc-capacity-indicator-background: var(--ctx-background);
2386
2133
  }
2387
2134
  }
2388
2135