@bcc-code/design-tokens 5.0.3 → 5.1.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 (15) hide show
  1. package/build/bcc/css/auto.css.d.ts +3 -0
  2. package/build/bcc/css/dark.css.d.ts +3 -0
  3. package/build/bcc/css/light.css.d.ts +3 -0
  4. package/build/bcc/css/tailwind-auto.css.d.ts +3 -0
  5. package/build/bcc/css/tailwind-dark.css.d.ts +3 -0
  6. package/build/bcc/css/tailwind-light.css.d.ts +3 -0
  7. package/build/primevue/component-dark.js +2390 -0
  8. package/build/primevue/component-light.js +2390 -0
  9. package/build/primevue/config.js +1118 -1591
  10. package/build/primevue/overrides.css +2 -29
  11. package/build/primevue/overrides.css.d.ts +3 -0
  12. package/build/primevue/primitive.js +568 -0
  13. package/build/primevue/semantic-dark.js +368 -0
  14. package/build/primevue/semantic-light.js +368 -0
  15. package/package.json +31 -10
package/build/primevue/config.js CHANGED
@@ -1,6 +1,7 @@
1
1
  /**
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
+ import "../bcc/css/auto.css";
4
5
  import { definePreset } from "@primeuix/themes";
5
6
  import Aura from "@primeuix/themes/aura";
6
7
 
@@ -615,15 +616,15 @@ const BCCPreset = definePreset(Aura, {
615
616
  semantic: {
616
617
  transitionDuration: "0.2s",
617
618
  focusRing: {
618
- width: "1px",
619
+ width: "var(--border-width-1)",
619
620
  style: "solid",
620
621
  color: "{surface.700}",
621
- offset: "2px",
622
+ offset: "var(--border-width-2)",
622
623
  shadow: "0 0 0 0 rgba(0, 0, 0, 0)"
623
624
  },
624
625
  disabledOpacity: "0.6",
625
- iconSize: "1rem",
626
- anchorGutter: "0.125rem",
626
+ iconSize: "var(--space-200)",
627
+ anchorGutter: "var(--space-25)",
627
628
  primary: {
628
629
  "50": "{emerald.50}",
629
630
  "100": "{emerald.100}",
@@ -638,41 +639,41 @@ const BCCPreset = definePreset(Aura, {
638
639
  "950": "{emerald.950}"
639
640
  },
640
641
  formField: {
641
- paddingX: "0.75rem",
642
- paddingY: "0.25rem",
642
+ paddingX: "var(--space-150)",
643
+ paddingY: "var(--space-50)",
643
644
  sm: {
644
- fontSize: "0.875rem",
645
- paddingX: "0.75rem",
646
- paddingY: "0.25rem"
645
+ fontSize: "var(--font-size-sm)",
646
+ paddingX: "var(--space-150)",
647
+ paddingY: "var(--space-50)"
647
648
  },
648
649
  lg: {
649
- fontSize: "1rem",
650
- paddingX: "0.75rem",
651
- paddingY: "0.5rem"
650
+ fontSize: "var(--font-size-md)",
651
+ paddingX: "var(--space-150)",
652
+ paddingY: "var(--space-100)"
652
653
  },
653
654
  borderRadius: "{border.radius.md}",
654
655
  focusRing: {
655
- width: "0",
656
+ width: "var(--border-width-0)",
656
657
  style: "none",
657
658
  color: "transparent",
658
- offset: "0",
659
+ offset: "var(--border-width-0)",
659
660
  shadow: "0 0 0 0 rgba(0, 0, 0, 0)"
660
661
  },
661
662
  transitionDuration: "{transition.duration}"
662
663
  },
663
664
  list: {
664
- padding: "0.5rem",
665
- gap: "0.125rem",
665
+ padding: "var(--space-100)",
666
+ gap: "var(--space-25)",
666
667
  header: {
667
- padding: "0.5rem"
668
+ padding: "var(--space-100)"
668
669
  },
669
670
  option: {
670
- padding: "0.5rem 0.75rem",
671
+ padding: "var(--space-100) var(--space-150)",
671
672
  borderRadius: "{border.radius.sm}"
672
673
  },
673
674
  optionGroup: {
674
- padding: "0.5rem 0.75rem",
675
- fontWeight: "500"
675
+ padding: "var(--space-100) var(--space-150)",
676
+ fontWeight: "var(--font-weight-medium)"
676
677
  }
677
678
  },
678
679
  content: {
@@ -680,20 +681,20 @@ const BCCPreset = definePreset(Aura, {
680
681
  },
681
682
  navigation: {
682
683
  list: {
683
- padding: "0.25rem 0.25rem",
684
- gap: "0.125rem"
684
+ padding: "var(--space-50) var(--space-50)",
685
+ gap: "var(--space-25)"
685
686
  },
686
687
  item: {
687
- padding: "0.5rem 0.75rem",
688
+ padding: "var(--space-100) var(--space-150)",
688
689
  borderRadius: "{border.radius.sm}",
689
- gap: "0.5rem"
690
+ gap: "var(--space-100)"
690
691
  },
691
692
  submenuLabel: {
692
- padding: "0.5rem 0.75rem",
693
- fontWeight: "500"
693
+ padding: "var(--space-100) var(--space-150)",
694
+ fontWeight: "var(--font-weight-medium)"
694
695
  },
695
696
  submenuIcon: {
696
- size: "0.75rem"
697
+ size: "var(--space-150)"
697
698
  }
698
699
  },
699
700
  overlay: {
@@ -703,12 +704,12 @@ const BCCPreset = definePreset(Aura, {
703
704
  },
704
705
  popover: {
705
706
  borderRadius: "{border.radius.md}",
706
- padding: "1rem 0.75rem",
707
+ padding: "var(--space-200) var(--space-150)",
707
708
  shadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
708
709
  },
709
710
  modal: {
710
711
  borderRadius: "{border.radius.xl}",
711
- padding: "1rem",
712
+ padding: "var(--space-200)",
712
713
  shadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
713
714
  },
714
715
  navigation: {
@@ -769,7 +770,7 @@ const BCCPreset = definePreset(Aura, {
769
770
  shadow: "0 1px 2px 0 rgba(18, 18, 23, 0.05)"
770
771
  },
771
772
  text: {
772
- color: "#292a2e",
773
+ color: "var(--color-text-default)",
773
774
  hoverColor: "{surface.800}",
774
775
  mutedColor: "{surface.500}",
775
776
  hoverMutedColor: "{surface.600}"
@@ -894,7 +895,7 @@ const BCCPreset = definePreset(Aura, {
894
895
  shadow: "0 1px 2px 0 rgba(18, 18, 23, 0.05)"
895
896
  },
896
897
  text: {
897
- color: "#e2e3e4",
898
+ color: "var(--color-text-default)",
898
899
  hoverColor: "{surface.0}",
899
900
  mutedColor: "{surface.400}",
900
901
  hoverMutedColor: "{surface.300}"
@@ -974,100 +975,72 @@ const BCCPreset = definePreset(Aura, {
974
975
  transitionDuration: "{transition.duration}"
975
976
  },
976
977
  panel: {
977
- borderWidth: "1px"
978
- },
979
- colorScheme: {
980
- light: {
981
- panel: {
982
- borderColor: "rgba(11, 18, 14, 0.14)"
983
- },
984
- header: {
985
- color: "#505258",
986
- hoverColor: "#292a2e",
987
- activeColor: "#292a2e",
988
- borderColor: "#ffffff",
989
- background: "#ffffff",
990
- hoverBackground: "#ffffff",
991
- activeBackground: "#ffffff",
992
- activeHoverBackground: "#ffffff",
993
- focusRing: {
994
- color: "#505258"
995
- },
996
- toggleIcon: {
997
- color: "#505258",
998
- hoverColor: "#1e1f21",
999
- activeColor: "#1e1f21",
1000
- activeHoverColor: "#1e1f21"
1001
- }
1002
- },
1003
- content: {
1004
- borderColor: "rgba(11, 18, 14, 0.14)",
1005
- background: "#ffffff",
1006
- color: "#292a2e"
1007
- }
1008
- },
1009
- dark: {
1010
- panel: {
1011
- borderColor: "rgba(229, 233, 246, 0.25)"
1012
- },
1013
- header: {
1014
- color: "#a9abaf",
1015
- hoverColor: "#e2e3e4",
1016
- activeColor: "#e2e3e4",
1017
- borderColor: "#1f1f21",
1018
- background: "#1f1f21",
1019
- hoverBackground: "#1f1f21",
1020
- activeBackground: "#1f1f21",
1021
- activeHoverBackground: "#1f1f21",
1022
- focusRing: {
1023
- color: "#a9abaf"
1024
- },
1025
- toggleIcon: {
1026
- color: "#a9abaf",
1027
- hoverColor: "#cecfd2",
1028
- activeColor: "#cecfd2",
1029
- activeHoverColor: "#cecfd2"
1030
- }
1031
- },
1032
- content: {
1033
- borderColor: "rgba(229, 233, 246, 0.25)",
1034
- background: "#1f1f21",
1035
- color: "#e2e3e4"
1036
- }
1037
- }
978
+ borderWidth: "var(--border-width-1)",
979
+ borderColor: "var(--color-border-default)"
1038
980
  },
1039
981
  header: {
1040
- padding: "1rem",
1041
- fontWeight: "700",
982
+ color: "var(--color-text-subtle)",
983
+ hoverColor: "var(--color-text-default)",
984
+ activeColor: "var(--color-text-default)",
985
+ padding: "var(--space-200)",
986
+ fontWeight: "var(--font-weight-bold)",
1042
987
  borderRadius: "0",
1043
- borderWidth: "0",
988
+ borderWidth: "var(--border-width-0)",
989
+ borderColor: "var(--color-elevation-surface-default)",
990
+ background: "var(--color-elevation-surface-default)",
991
+ hoverBackground: "var(--color-elevation-surface-default)",
992
+ activeBackground: "var(--color-elevation-surface-default)",
993
+ activeHoverBackground: "var(--color-elevation-surface-default)",
1044
994
  focusRing: {
1045
995
  width: "{focus.ring.width}",
1046
996
  style: "{focus.ring.style}",
997
+ color: "var(--color-border-focused)",
1047
998
  offset: "{focus.ring.offset}",
1048
999
  shadow: "{focus.ring.shadow}"
1049
1000
  },
1001
+ toggleIcon: {
1002
+ color: "var(--color-icon-subtle)",
1003
+ hoverColor: "var(--color-icon-default)",
1004
+ activeColor: "var(--color-icon-default)",
1005
+ activeHoverColor: "var(--color-icon-default)"
1006
+ },
1050
1007
  first: {
1051
- topBorderRadius: "0.375rem",
1052
- borderWidth: "0"
1008
+ topBorderRadius: "var(--border-radius-sm)",
1009
+ borderWidth: "var(--border-width-0)"
1053
1010
  },
1054
1011
  last: {
1055
- bottomBorderRadius: "0.375rem",
1012
+ bottomBorderRadius: "var(--border-radius-sm)",
1056
1013
  activeBottomBorderRadius: "0"
1057
1014
  },
1058
- gap: "0.5rem"
1015
+ gap: "var(--space-100)"
1059
1016
  },
1060
1017
  content: {
1061
- borderWidth: "0",
1062
- padding: "1rem 0 1rem 1rem"
1018
+ borderWidth: "var(--border-width-0)",
1019
+ borderColor: "var(--color-border-default)",
1020
+ background: "var(--color-elevation-surface-default)",
1021
+ color: "var(--color-text-default)",
1022
+ padding: "var(--space-0) var(--space-200) var(--space-200) var(--space-200)"
1063
1023
  }
1064
1024
  },
1065
1025
  autocomplete: {
1066
1026
  root: {
1027
+ background: "var(--color-elevation-surface-default)",
1028
+ disabledBackground: "var(--color-background-disabled-default)",
1029
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
1030
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
1031
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
1032
+ borderColor: "var(--color-border-default)",
1033
+ hoverBorderColor: "var(--color-border-input)",
1034
+ focusBorderColor: "var(--color-border-focused)",
1035
+ invalidBorderColor: "var(--color-border-danger)",
1036
+ color: "var(--color-text-default)",
1037
+ disabledColor: "var(--color-text-disabled)",
1038
+ placeholderColor: "var(--color-text-subtlest)",
1039
+ invalidPlaceholderColor: "var(--color-text-danger)",
1067
1040
  shadow: "{form.field.shadow}",
1068
- paddingX: "0.375rem",
1069
- paddingY: "0.125rem",
1070
- borderRadius: "0.375rem",
1041
+ paddingX: "var(--space-75)",
1042
+ paddingY: "var(--space-25)",
1043
+ borderRadius: "var(--border-radius-sm)",
1071
1044
  focusRing: {
1072
1045
  width: "{form.field.focus.ring.width}",
1073
1046
  style: "{form.field.focus.ring.style}",
@@ -1077,301 +1050,223 @@ const BCCPreset = definePreset(Aura, {
1077
1050
  },
1078
1051
  transitionDuration: "{transition.duration}"
1079
1052
  },
1080
- colorScheme: {
1081
- light: {
1082
- root: {
1083
- background: "#ffffff",
1084
- disabledBackground: "rgba(5, 21, 36, 0.06)",
1085
- filledBackground: "#f8f8f8",
1086
- filledHoverBackground: "#f8f8f8",
1087
- filledFocusBackground: "#f8f8f8",
1088
- borderColor: "rgba(11, 18, 14, 0.14)",
1089
- hoverBorderColor: "#8c8f97",
1090
- focusBorderColor: "#505258",
1091
- invalidBorderColor: "#ca414e",
1092
- color: "#292a2e",
1093
- disabledColor: "rgba(8, 15, 33, 0.29)",
1094
- placeholderColor: "#6b6e76",
1095
- invalidPlaceholderColor: "#811436"
1096
- },
1097
- overlay: {
1098
- background: "#ffffff",
1099
- borderColor: "rgba(11, 18, 14, 0.14)"
1100
- },
1101
- option: {
1102
- focusBackground: "#dddee1",
1103
- selectedBackground: "#f0fcfa",
1104
- selectedFocusBackground: "#d2eeeb",
1105
- color: "#505258",
1106
- focusColor: "#292a2e",
1107
- selectedColor: "#0c625c",
1108
- selectedFocusColor: "#0c625c"
1109
- },
1110
- optionGroup: {
1111
- background: "#ffffff",
1112
- color: "#6b6e76"
1113
- },
1114
- dropdown: {
1115
- borderColor: "rgba(11, 18, 14, 0.14)",
1116
- hoverBorderColor: "rgba(11, 18, 14, 0.14)",
1117
- activeBorderColor: "rgba(11, 18, 14, 0.14)",
1118
- focusRing: {
1119
- color: "#505258"
1120
- },
1121
- background: "#f0f1f2",
1122
- hoverBackground: "#dddee1",
1123
- activeBackground: "#b7b9be",
1124
- color: "#6b6e76",
1125
- hoverColor: "#505258",
1126
- activeColor: "#1e1f21"
1127
- },
1128
- chip: {
1129
- focusBackground: "#b7b9be",
1130
- focusColor: "#292a2e"
1131
- }
1132
- },
1133
- dark: {
1134
- root: {
1135
- background: "#1f1f21",
1136
- disabledBackground: "rgba(227, 228, 242, 0.12)",
1137
- filledBackground: "#1f1f21",
1138
- filledHoverBackground: "#1f1f21",
1139
- filledFocusBackground: "#1f1f21",
1140
- borderColor: "rgba(229, 233, 246, 0.25)",
1141
- hoverBorderColor: "#63666b",
1142
- focusBorderColor: "#a9abaf",
1143
- invalidBorderColor: "#ed6362",
1144
- color: "#e2e3e4",
1145
- disabledColor: "rgba(229, 233, 246, 0.25)",
1146
- placeholderColor: "#96999e",
1147
- invalidPlaceholderColor: "#fab6ad"
1148
- },
1149
- overlay: {
1150
- background: "#1f1f21",
1151
- borderColor: "rgba(229, 233, 246, 0.25)"
1152
- },
1153
- option: {
1154
- focusBackground: "#303134",
1155
- selectedBackground: "#012320",
1156
- selectedFocusBackground: "#0b3633",
1157
- color: "#a9abaf",
1158
- focusColor: "#e2e3e4",
1159
- selectedColor: "#6fb5ad",
1160
- selectedFocusColor: "#6fb5ad"
1161
- },
1162
- optionGroup: {
1163
- background: "#1f1f21",
1164
- color: "#96999e"
1165
- },
1166
- dropdown: {
1167
- borderColor: "rgba(229, 233, 246, 0.25)",
1168
- hoverBorderColor: "rgba(229, 233, 246, 0.25)",
1169
- activeBorderColor: "rgba(229, 233, 246, 0.25)",
1170
- focusRing: {
1171
- color: "#a9abaf"
1172
- },
1173
- background: "#242528",
1174
- hoverBackground: "#303134",
1175
- activeBackground: "#4b4d51",
1176
- color: "#96999e",
1177
- hoverColor: "#a9abaf",
1178
- activeColor: "#cecfd2"
1179
- },
1180
- chip: {
1181
- focusBackground: "#4b4d51",
1182
- focusColor: "#e2e3e4"
1183
- }
1184
- }
1185
- },
1186
1053
  overlay: {
1187
- borderRadius: "0.375rem",
1054
+ background: "var(--color-elevation-surface-default)",
1055
+ borderColor: "var(--color-border-default)",
1056
+ borderRadius: "var(--border-radius-sm)",
1188
1057
  color: "{overlay.select.color}",
1189
1058
  shadow: "{overlay.select.shadow}"
1190
1059
  },
1191
1060
  list: {
1192
- padding: "0.5rem",
1193
- gap: "0.125rem"
1061
+ padding: "var(--space-100)",
1062
+ gap: "var(--space-25)"
1194
1063
  },
1195
1064
  option: {
1196
- padding: "0.5rem 0.75rem",
1197
- borderRadius: "0.25rem",
1198
- gap: "0.5rem"
1065
+ focusBackground: "var(--color-background-accent-gray-subtle-hover)",
1066
+ selectedBackground: "var(--color-background-brand-subtlest-default)",
1067
+ selectedFocusBackground: "var(--color-background-brand-subtler-default)",
1068
+ color: "var(--color-text-subtle)",
1069
+ focusColor: "var(--color-text-default)",
1070
+ selectedColor: "var(--color-text-selected)",
1071
+ selectedFocusColor: "var(--color-text-selected)",
1072
+ padding: "var(--space-100) var(--space-150)",
1073
+ borderRadius: "var(--border-radius-xs)",
1074
+ gap: "var(--space-100)"
1199
1075
  },
1200
1076
  optionGroup: {
1077
+ background: "var(--color-elevation-surface-default)",
1078
+ color: "var(--color-text-subtlest)",
1201
1079
  fontWeight: "{list.option.group.font.weight}",
1202
- padding: "0.5rem 0.75rem"
1080
+ padding: "var(--space-100) var(--space-150)"
1203
1081
  },
1204
1082
  dropdown: {
1205
- width: "2.5rem",
1083
+ width: "var(--space-500)",
1206
1084
  sm: {
1207
- width: "2rem"
1085
+ width: "var(--space-400)"
1208
1086
  },
1209
1087
  lg: {
1210
- width: "3rem"
1088
+ width: "var(--space-600)"
1211
1089
  },
1212
- borderRadius: "0.375rem",
1090
+ borderColor: "var(--color-border-default)",
1091
+ hoverBorderColor: "var(--color-border-default)",
1092
+ activeBorderColor: "var(--color-border-default)",
1093
+ borderRadius: "var(--border-radius-sm)",
1213
1094
  focusRing: {
1214
1095
  width: "{focus.ring.width}",
1215
1096
  style: "{focus.ring.style}",
1097
+ color: "var(--color-border-focused)",
1216
1098
  offset: "{focus.ring.offset}",
1217
1099
  shadow: "{focus.ring.shadow}"
1218
1100
  }
1219
1101
  },
1220
1102
  chip: {
1221
- borderRadius: "0.25rem"
1103
+ borderRadius: "var(--border-radius-xs)"
1222
1104
  },
1223
1105
  emptyMessage: {
1224
- padding: "0.5rem 0.75rem"
1225
- },
1226
- input: {
1227
- multiple: {
1228
- gap: "0.25rem",
1229
- minHeight: "2.5rem"
1230
- }
1231
- }
1232
- },
1233
- avatar: {
1234
- root: {
1235
- width: "2rem",
1236
- height: "2rem",
1237
- fontSize: "1rem",
1238
- borderRadius: "0.375rem"
1106
+ padding: "var(--space-100) var(--space-150)"
1239
1107
  },
1240
1108
  colorScheme: {
1241
1109
  light: {
1242
- root: {
1243
- background: "#dddee1",
1244
- color: "#292a2e"
1110
+ chip: {
1111
+ focusBackground: "var(--color-background-accent-gray-hover)",
1112
+ focusColor: "var(--color-text-default)"
1245
1113
  },
1246
- group: {
1247
- borderColor: "#ffffff"
1114
+ dropdown: {
1115
+ background: "var(--color-background-accent-gray-subtle-default)",
1116
+ hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
1117
+ activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
1118
+ color: "var(--color-icon-subtlest)",
1119
+ hoverColor: "var(--color-icon-subtle)",
1120
+ activeColor: "var(--color-icon-default)"
1248
1121
  }
1249
1122
  },
1250
1123
  dark: {
1251
- root: {
1252
- background: "#303134",
1253
- color: "#e2e3e4"
1124
+ chip: {
1125
+ focusBackground: "var(--color-background-accent-gray-hover)",
1126
+ focusColor: "var(--color-text-default)"
1254
1127
  },
1255
- group: {
1256
- borderColor: "#18191a"
1128
+ dropdown: {
1129
+ background: "var(--color-background-accent-gray-subtle-default)",
1130
+ hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
1131
+ activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
1132
+ color: "var(--color-icon-subtlest)",
1133
+ hoverColor: "var(--color-icon-subtle)",
1134
+ activeColor: "var(--color-icon-default)"
1257
1135
  }
1258
1136
  }
1259
1137
  },
1138
+ input: {
1139
+ multiple: {
1140
+ gap: "var(--space-50)",
1141
+ minHeight: "var(--space-500)"
1142
+ }
1143
+ }
1144
+ },
1145
+ avatar: {
1146
+ root: {
1147
+ width: "var(--space-400)",
1148
+ height: "var(--space-400)",
1149
+ fontSize: "var(--font-size-md)",
1150
+ background: "var(--color-background-accent-gray-default)",
1151
+ color: "var(--color-text-default)",
1152
+ borderRadius: "var(--border-radius-sm)"
1153
+ },
1260
1154
  icon: {
1261
- size: "1rem"
1155
+ size: "var(--icon-size-sm)"
1262
1156
  },
1263
1157
  group: {
1264
- offset: "-0.75rem"
1158
+ borderColor: "var(--color-border-inverse)",
1159
+ offset: "var(--space-negative-150)"
1265
1160
  },
1266
1161
  lg: {
1267
- width: "2.5rem",
1268
- height: "2.5rem",
1269
- fontSize: "1.25rem",
1162
+ width: "var(--space-500)",
1163
+ height: "var(--space-500)",
1164
+ fontSize: "var(--font-size-lg)",
1270
1165
  icon: {
1271
- size: "1.5rem"
1166
+ size: "var(--icon-size-md)"
1272
1167
  },
1273
1168
  group: {
1274
- offset: "-1rem"
1169
+ offset: "var(--space-negative-200)"
1275
1170
  }
1276
1171
  },
1277
1172
  xl: {
1278
- width: "4rem",
1279
- height: "4rem",
1280
- fontSize: "2em",
1173
+ width: "var(--space-800)",
1174
+ height: "var(--space-800)",
1175
+ fontSize: "var(--font-size-2xl)",
1281
1176
  icon: {
1282
- size: "2.5rem"
1177
+ size: "var(--icon-size-lg)"
1283
1178
  },
1284
1179
  group: {
1285
- offset: "-1.5rem"
1180
+ offset: "var(--space-negative-300)"
1286
1181
  }
1287
1182
  }
1288
1183
  },
1289
1184
  badge: {
1290
1185
  root: {
1291
- borderRadius: "0.375rem",
1292
- padding: "0.25rem",
1293
- fontSize: "0.75rem",
1294
- fontWeight: "700",
1295
- minWidth: "1.25rem",
1296
- height: "1.25rem"
1186
+ borderRadius: "var(--border-radius-sm)",
1187
+ padding: "var(--space-0)",
1188
+ fontSize: "var(--font-size-xs)",
1189
+ fontWeight: "var(--font-weight-bold)",
1190
+ minWidth: "var(--space-250)",
1191
+ height: "var(--space-250)"
1297
1192
  },
1298
1193
  dot: {
1299
- size: "0.5rem"
1194
+ size: "var(--space-100)"
1300
1195
  },
1301
1196
  sm: {
1302
- fontSize: "0.75rem",
1303
- minWidth: "1rem",
1304
- height: "1rem"
1197
+ fontSize: "var(--font-size-xs)",
1198
+ minWidth: "var(--space-200)",
1199
+ height: "var(--space-200)"
1305
1200
  },
1306
1201
  lg: {
1307
- fontSize: "0.875rem",
1308
- minWidth: "1.5rem",
1309
- height: "1.5rem"
1202
+ fontSize: "var(--font-size-sm)",
1203
+ minWidth: "var(--space-300)",
1204
+ height: "var(--space-300)"
1310
1205
  },
1311
1206
  xl: {
1312
- fontSize: "1rem",
1313
- minWidth: "2rem",
1314
- height: "2rem"
1207
+ fontSize: "var(--font-size-md)",
1208
+ minWidth: "var(--space-400)",
1209
+ height: "var(--space-400)"
1315
1210
  },
1316
1211
  colorScheme: {
1317
1212
  light: {
1318
1213
  primary: {
1319
- background: "#0c625c",
1320
- color: "#ffffff"
1214
+ background: "var(--color-background-brand-bolder-default)",
1215
+ color: "var(--color-text-inverse)"
1321
1216
  },
1322
1217
  secondary: {
1323
- background: "#dddee1",
1324
- color: "#292a2e"
1218
+ background: "var(--color-background-accent-gray-default)",
1219
+ color: "var(--color-text-default)"
1325
1220
  },
1326
1221
  success: {
1327
- background: "#0c6241",
1328
- color: "#ffffff"
1222
+ background: "var(--color-background-success-bolder-default)",
1223
+ color: "var(--color-text-inverse)"
1329
1224
  },
1330
1225
  info: {
1331
- background: "#274eb5",
1332
- color: "#ffffff"
1226
+ background: "var(--color-background-information-bolder-default)",
1227
+ color: "var(--color-text-inverse)"
1333
1228
  },
1334
1229
  warn: {
1335
- background: "#e9c348",
1336
- color: "#ffffff"
1230
+ background: "var(--color-background-warning-bolder-default)",
1231
+ color: "var(--color-text-inverse)"
1337
1232
  },
1338
1233
  danger: {
1339
- background: "#a42237",
1340
- color: "#ffffff"
1234
+ background: "var(--color-background-danger-bolder-default)",
1235
+ color: "var(--color-text-inverse)"
1341
1236
  },
1342
1237
  contrast: {
1343
- background: "#1e1f21",
1344
- color: "#ffffff"
1238
+ background: "var(--color-background-accent-gray-boldest-default)",
1239
+ color: "var(--color-text-inverse)"
1345
1240
  }
1346
1241
  },
1347
1242
  dark: {
1348
1243
  primary: {
1349
- background: "#6fb5ad",
1350
- color: "#1f1f21"
1244
+ background: "var(--color-background-brand-bolder-default)",
1245
+ color: "var(--color-text-inverse)"
1351
1246
  },
1352
1247
  secondary: {
1353
- background: "#303134",
1354
- color: "#e2e3e4"
1248
+ background: "var(--color-background-accent-gray-default)",
1249
+ color: "var(--color-text-default)"
1355
1250
  },
1356
1251
  success: {
1357
- background: "#32c180",
1358
- color: "#1f1f21"
1252
+ background: "var(--color-background-success-bolder-default)",
1253
+ color: "var(--color-text-inverse)"
1359
1254
  },
1360
1255
  info: {
1361
- background: "#7cabf9",
1362
- color: "#1f1f21"
1256
+ background: "var(--color-background-information-bolder-default)",
1257
+ color: "var(--color-text-inverse)"
1363
1258
  },
1364
1259
  warn: {
1365
- background: "#d5a406",
1366
- color: "#1f1f21"
1260
+ background: "var(--color-background-warning-bolder-default)",
1261
+ color: "var(--color-text-inverse)"
1367
1262
  },
1368
1263
  danger: {
1369
- background: "#fa877e",
1370
- color: "#1f1f21"
1264
+ background: "var(--color-background-danger-bolder-default)",
1265
+ color: "var(--color-text-inverse)"
1371
1266
  },
1372
1267
  contrast: {
1373
- background: "#e2e3e4",
1374
- color: "#1f1f21"
1268
+ background: "var(--color-background-accent-gray-boldest-default)",
1269
+ color: "var(--color-text-inverse)"
1375
1270
  }
1376
1271
  }
1377
1272
  },
@@ -1381,28 +1276,28 @@ const BCCPreset = definePreset(Aura, {
1381
1276
  },
1382
1277
  button: {
1383
1278
  root: {
1384
- borderRadius: "0.5rem",
1279
+ borderRadius: "var(--border-radius-md)",
1385
1280
  roundedBorderRadius: "2rem",
1386
- gap: "0.5rem",
1387
- paddingX: "1rem",
1388
- paddingY: "0.375rem",
1389
- iconOnlyWidth: "2.5rem",
1281
+ gap: "var(--space-100)",
1282
+ paddingX: "var(--space-200)",
1283
+ paddingY: "var(--space-75)",
1284
+ iconOnlyWidth: "var(--space-500)",
1390
1285
  sm: {
1391
- fontSize: "0.875rem",
1392
- paddingX: "0.75rem",
1393
- paddingY: "0.25rem",
1394
- iconOnlyWidth: "2rem",
1395
- minHeight: "2rem"
1286
+ fontSize: "var(--font-size-sm)",
1287
+ paddingX: "var(--space-150)",
1288
+ paddingY: "var(--space-50)",
1289
+ iconOnlyWidth: "var(--space-400)",
1290
+ minHeight: "var(--space-400)"
1396
1291
  },
1397
1292
  lg: {
1398
- fontSize: "1.25rem",
1399
- paddingX: "1.25rem",
1400
- paddingY: "0.5rem",
1401
- iconOnlyWidth: "3rem",
1402
- minHeight: "3rem"
1293
+ fontSize: "var(--font-size-lg)",
1294
+ paddingX: "var(--space-250)",
1295
+ paddingY: "var(--space-100)",
1296
+ iconOnlyWidth: "var(--space-600)",
1297
+ minHeight: "var(--space-600)"
1403
1298
  },
1404
1299
  label: {
1405
- fontWeight: "500"
1300
+ fontWeight: "var(--font-weight-medium)"
1406
1301
  },
1407
1302
  raisedShadow: "0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)",
1408
1303
  focusRing: {
@@ -1410,85 +1305,85 @@ const BCCPreset = definePreset(Aura, {
1410
1305
  style: "{focus.ring.style}",
1411
1306
  offset: "{focus.ring.offset}"
1412
1307
  },
1413
- badgeSize: "1rem",
1308
+ badgeSize: "var(--space-200)",
1414
1309
  transitionDuration: "{form.field.transition.duration}",
1415
- minHeight: "2.5rem"
1310
+ minHeight: "var(--space-500)"
1416
1311
  },
1417
1312
  colorScheme: {
1418
1313
  light: {
1419
1314
  root: {
1420
1315
  primary: {
1421
- background: "#0c625c",
1422
- hoverBackground: "#014d49",
1423
- activeBackground: "#0b3633",
1424
- borderColor: "#0c625c",
1425
- hoverBorderColor: "#014d49",
1426
- activeBorderColor: "#0b3633",
1427
- color: "#ffffff",
1428
- hoverColor: "#ffffff",
1429
- activeColor: "#ffffff",
1316
+ background: "var(--color-background-brand-bolder-default)",
1317
+ hoverBackground: "var(--color-background-brand-bolder-hover)",
1318
+ activeBackground: "var(--color-background-brand-bolder-pressed)",
1319
+ borderColor: "var(--color-background-brand-bolder-default)",
1320
+ hoverBorderColor: "var(--color-background-brand-bolder-hover)",
1321
+ activeBorderColor: "var(--color-background-brand-bolder-pressed)",
1322
+ color: "var(--color-elevation-surface-default)",
1323
+ hoverColor: "var(--color-elevation-surface-default)",
1324
+ activeColor: "var(--color-elevation-surface-default)",
1430
1325
  focusRing: {
1431
- color: "#505258",
1326
+ color: "var(--color-border-focused)",
1432
1327
  shadow: "0 0 0 0 #00000000"
1433
1328
  }
1434
1329
  },
1435
1330
  secondary: {
1436
- background: "#f0f1f2",
1437
- hoverBackground: "#dddee1",
1438
- activeBackground: "#b7b9be",
1439
- borderColor: "#f0f1f2",
1440
- hoverBorderColor: "#dddee1",
1441
- activeBorderColor: "#b7b9be",
1442
- color: "#292a2e",
1443
- hoverColor: "#292a2e",
1444
- activeColor: "#292a2e",
1331
+ background: "var(--color-background-accent-gray-subtle-default)",
1332
+ hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
1333
+ activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
1334
+ borderColor: "var(--color-background-accent-gray-subtle-default)",
1335
+ hoverBorderColor: "var(--color-background-accent-gray-subtle-hover)",
1336
+ activeBorderColor: "var(--color-background-accent-gray-subtle-pressed)",
1337
+ color: "var(--color-text-default)",
1338
+ hoverColor: "var(--color-text-default)",
1339
+ activeColor: "var(--color-text-default)",
1445
1340
  focusRing: {
1446
- color: "#7d818a",
1341
+ color: "var(--color-border-accent-gray)",
1447
1342
  shadow: "0 0 0 0 #00000000"
1448
1343
  }
1449
1344
  },
1450
1345
  info: {
1451
- background: "#274eb5",
1452
- hoverBackground: "#273c8f",
1453
- activeBackground: "#212c64",
1454
- borderColor: "#274eb5",
1455
- hoverBorderColor: "#273c8f",
1456
- activeBorderColor: "#212c64",
1457
- color: "#ffffff",
1458
- hoverColor: "#ffffff",
1459
- activeColor: "#ffffff",
1346
+ background: "var(--color-background-information-bolder-default)",
1347
+ hoverBackground: "var(--color-background-information-bolder-hover)",
1348
+ activeBackground: "var(--color-background-information-bolder-pressed)",
1349
+ borderColor: "var(--color-background-information-bolder-default)",
1350
+ hoverBorderColor: "var(--color-background-information-bolder-hover)",
1351
+ activeBorderColor: "var(--color-background-information-bolder-pressed)",
1352
+ color: "var(--color-text-inverse)",
1353
+ hoverColor: "var(--color-text-inverse)",
1354
+ activeColor: "var(--color-text-inverse)",
1460
1355
  focusRing: {
1461
- color: "#446add",
1356
+ color: "var(--color-border-information)",
1462
1357
  shadow: "0 0 0 0 #00000000"
1463
1358
  }
1464
1359
  },
1465
1360
  success: {
1466
- background: "#0c6241",
1467
- hoverBackground: "#094c3b",
1468
- activeBackground: "#073734",
1469
- borderColor: "#0c6241",
1470
- hoverBorderColor: "#094c3b",
1471
- activeBorderColor: "#073734",
1472
- color: "#ffffff",
1473
- hoverColor: "#ffffff",
1474
- activeColor: "#ffffff",
1361
+ background: "var(--color-background-success-bolder-default)",
1362
+ hoverBackground: "var(--color-background-success-bolder-hover)",
1363
+ activeBackground: "var(--color-background-success-bolder-pressed)",
1364
+ borderColor: "var(--color-background-success-bolder-default)",
1365
+ hoverBorderColor: "var(--color-background-success-bolder-hover)",
1366
+ activeBorderColor: "var(--color-background-success-bolder-pressed)",
1367
+ color: "var(--color-text-inverse)",
1368
+ hoverColor: "var(--color-text-inverse)",
1369
+ activeColor: "var(--color-text-inverse)",
1475
1370
  focusRing: {
1476
- color: "#09825d",
1371
+ color: "var(--color-border-success)",
1477
1372
  shadow: "0 0 0 0 #00000000"
1478
1373
  }
1479
1374
  },
1480
1375
  warn: {
1481
- background: "#e9c348",
1482
- hoverBackground: "#d5a406",
1483
- activeBackground: "#bc870d",
1484
- borderColor: "#e9c348",
1485
- hoverBorderColor: "#d5a406",
1486
- activeBorderColor: "#bc870d",
1487
- color: "#4b2c04",
1488
- hoverColor: "#4b2c04",
1489
- activeColor: "#4b2c04",
1376
+ background: "var(--color-background-warning-bolder-default)",
1377
+ hoverBackground: "var(--color-background-warning-bolder-hover)",
1378
+ activeBackground: "var(--color-background-warning-bolder-pressed)",
1379
+ borderColor: "var(--color-background-warning-bolder-default)",
1380
+ hoverBorderColor: "var(--color-background-warning-bolder-hover)",
1381
+ activeBorderColor: "var(--color-background-warning-bolder-pressed)",
1382
+ color: "var(--color-text-warning-inverse)",
1383
+ hoverColor: "var(--color-text-warning-inverse)",
1384
+ activeColor: "var(--color-text-warning-inverse)",
1490
1385
  focusRing: {
1491
- color: "#b55919",
1386
+ color: "var(--color-border-warning)",
1492
1387
  shadow: "0 0 0 0 #00000000"
1493
1388
  }
1494
1389
  },
@@ -1508,66 +1403,66 @@ const BCCPreset = definePreset(Aura, {
1508
1403
  }
1509
1404
  },
1510
1405
  danger: {
1511
- background: "#a42237",
1512
- hoverBackground: "#811436",
1513
- activeBackground: "#630d2e",
1514
- borderColor: "#a42237",
1515
- hoverBorderColor: "#811436",
1516
- activeBorderColor: "#630d2e",
1517
- color: "#ffffff",
1518
- hoverColor: "#ffffff",
1519
- activeColor: "#ffffff",
1406
+ background: "var(--color-background-danger-bolder-default)",
1407
+ hoverBackground: "var(--color-background-danger-bolder-hover)",
1408
+ activeBackground: "var(--color-background-danger-bolder-pressed)",
1409
+ borderColor: "var(--color-background-danger-bolder-default)",
1410
+ hoverBorderColor: "var(--color-background-danger-bolder-hover)",
1411
+ activeBorderColor: "var(--color-background-danger-bolder-pressed)",
1412
+ color: "var(--color-text-inverse)",
1413
+ hoverColor: "var(--color-text-inverse)",
1414
+ activeColor: "var(--color-text-inverse)",
1520
1415
  focusRing: {
1521
- color: "#ca414e",
1416
+ color: "var(--color-border-danger)",
1522
1417
  shadow: "0 0 0 0 #00000000"
1523
1418
  }
1524
1419
  },
1525
1420
  contrast: {
1526
- background: "#1e1f21",
1527
- hoverBackground: "#292a2e",
1528
- activeBackground: "#3b3d42",
1529
- borderColor: "#1e1f21",
1530
- hoverBorderColor: "#292a2e",
1531
- activeBorderColor: "#3b3d42",
1532
- color: "#ffffff",
1533
- hoverColor: "#ffffff",
1534
- activeColor: "#ffffff",
1421
+ background: "var(--color-background-accent-gray-boldest-default)",
1422
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
1423
+ activeBackground: "var(--color-background-accent-gray-boldest-pressed)",
1424
+ borderColor: "var(--color-background-accent-gray-boldest-default)",
1425
+ hoverBorderColor: "var(--color-background-accent-gray-boldest-hover)",
1426
+ activeBorderColor: "var(--color-background-accent-gray-boldest-pressed)",
1427
+ color: "var(--color-text-inverse)",
1428
+ hoverColor: "var(--color-text-inverse)",
1429
+ activeColor: "var(--color-text-inverse)",
1535
1430
  focusRing: {
1536
- color: "#7d818a",
1431
+ color: "var(--color-border-accent-gray)",
1537
1432
  shadow: "0 0 0 0 #00000000"
1538
1433
  }
1539
1434
  }
1540
1435
  },
1541
1436
  outlined: {
1542
1437
  primary: {
1543
- hoverBackground: "#d2eeeb",
1544
- activeBackground: "#a0cec8",
1545
- borderColor: "#0c625c",
1546
- color: "#014d49"
1438
+ hoverBackground: "var(--color-background-brand-subtlest-hover)",
1439
+ activeBackground: "var(--color-background-brand-subtlest-pressed)",
1440
+ borderColor: "var(--color-border-brand)",
1441
+ color: "var(--color-text-brand-default)"
1547
1442
  },
1548
1443
  secondary: {
1549
- hoverBackground: "#f8f8f8",
1550
- activeBackground: "#f0f1f2",
1551
- borderColor: "#7d818a",
1552
- color: "#292a2e"
1444
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1445
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1446
+ borderColor: "var(--color-border-accent-gray)",
1447
+ color: "var(--color-text-default)"
1553
1448
  },
1554
1449
  success: {
1555
- hoverBackground: "#cbf3c9",
1556
- activeBackground: "#83d895",
1557
- borderColor: "#09825d",
1558
- color: "#094c3b"
1450
+ hoverBackground: "var(--color-background-success-hover)",
1451
+ activeBackground: "var(--color-background-success-pressed)",
1452
+ borderColor: "var(--color-border-success)",
1453
+ color: "var(--color-text-success)"
1559
1454
  },
1560
1455
  info: {
1561
- hoverBackground: "#d9ecff",
1562
- activeBackground: "#a6cdfd",
1563
- borderColor: "#446add",
1564
- color: "#273c8f"
1456
+ hoverBackground: "var(--color-background-information-hover)",
1457
+ activeBackground: "var(--color-background-information-pressed)",
1458
+ borderColor: "var(--color-border-information)",
1459
+ color: "var(--color-text-information)"
1565
1460
  },
1566
1461
  warn: {
1567
- hoverBackground: "#f8e6a0",
1568
- activeBackground: "#e9c348",
1569
- borderColor: "#b55919",
1570
- color: "#653805"
1462
+ hoverBackground: "var(--color-background-warning-hover)",
1463
+ activeBackground: "var(--color-background-warning-pressed)",
1464
+ borderColor: "var(--color-border-warning)",
1465
+ color: "var(--color-text-warning-default)"
1571
1466
  },
1572
1467
  help: {
1573
1468
  hoverBackground: "{purple.50}",
@@ -1576,16 +1471,16 @@ const BCCPreset = definePreset(Aura, {
1576
1471
  color: "{purple.500}"
1577
1472
  },
1578
1473
  danger: {
1579
- hoverBackground: "#fee2dd",
1580
- activeBackground: "#fab6ad",
1581
- borderColor: "#ca414e",
1582
- color: "#811436"
1474
+ hoverBackground: "var(--color-background-danger-hover)",
1475
+ activeBackground: "var(--color-background-danger-pressed)",
1476
+ borderColor: "var(--color-border-danger)",
1477
+ color: "var(--color-text-danger)"
1583
1478
  },
1584
1479
  contrast: {
1585
- hoverBackground: "#f8f8f8",
1586
- activeBackground: "#f0f1f2",
1587
- borderColor: "#7d818a",
1588
- color: "#292a2e"
1480
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1481
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1482
+ borderColor: "var(--color-border-accent-gray)",
1483
+ color: "var(--color-text-default)"
1589
1484
  },
1590
1485
  plain: {
1591
1486
  hoverBackground: "{surface.50}",
@@ -1596,29 +1491,29 @@ const BCCPreset = definePreset(Aura, {
1596
1491
  },
1597
1492
  text: {
1598
1493
  primary: {
1599
- hoverBackground: "#d2eeeb",
1600
- activeBackground: "#a0cec8",
1601
- color: "#014d49"
1494
+ hoverBackground: "var(--color-background-brand-subtlest-hover)",
1495
+ activeBackground: "var(--color-background-brand-subtlest-pressed)",
1496
+ color: "var(--color-text-brand-default)"
1602
1497
  },
1603
1498
  secondary: {
1604
- hoverBackground: "#f8f8f8",
1605
- activeBackground: "#f0f1f2",
1606
- color: "#292a2e"
1499
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1500
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1501
+ color: "var(--color-text-default)"
1607
1502
  },
1608
1503
  success: {
1609
- hoverBackground: "#cbf3c9",
1610
- activeBackground: "#83d895",
1611
- color: "#094c3b"
1504
+ hoverBackground: "var(--color-background-success-hover)",
1505
+ activeBackground: "var(--color-background-success-pressed)",
1506
+ color: "var(--color-text-success)"
1612
1507
  },
1613
1508
  info: {
1614
- hoverBackground: "#d9ecff",
1615
- activeBackground: "#a6cdfd",
1616
- color: "#273c8f"
1509
+ hoverBackground: "var(--color-background-information-hover)",
1510
+ activeBackground: "var(--color-background-information-pressed)",
1511
+ color: "var(--color-text-information)"
1617
1512
  },
1618
1513
  warn: {
1619
- hoverBackground: "#f8e6a0",
1620
- activeBackground: "#e9c348",
1621
- color: "#653805"
1514
+ hoverBackground: "var(--color-background-warning-hover)",
1515
+ activeBackground: "var(--color-background-warning-pressed)",
1516
+ color: "var(--color-text-warning-default)"
1622
1517
  },
1623
1518
  help: {
1624
1519
  hoverBackground: "{purple.50}",
@@ -1626,14 +1521,14 @@ const BCCPreset = definePreset(Aura, {
1626
1521
  color: "{purple.500}"
1627
1522
  },
1628
1523
  danger: {
1629
- hoverBackground: "#fee2dd",
1630
- activeBackground: "#fab6ad",
1631
- color: "#811436"
1524
+ hoverBackground: "var(--color-background-danger-hover)",
1525
+ activeBackground: "var(--color-background-danger-pressed)",
1526
+ color: "var(--color-text-danger)"
1632
1527
  },
1633
1528
  contrast: {
1634
- hoverBackground: "#f8f8f8",
1635
- activeBackground: "#f0f1f2",
1636
- color: "#292a2e"
1529
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1530
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1531
+ color: "var(--color-text-default)"
1637
1532
  },
1638
1533
  plain: {
1639
1534
  hoverBackground: "{surface.50}",
@@ -1650,77 +1545,77 @@ const BCCPreset = definePreset(Aura, {
1650
1545
  dark: {
1651
1546
  root: {
1652
1547
  primary: {
1653
- background: "#6fb5ad",
1654
- hoverBackground: "#a0cec8",
1655
- activeBackground: "#d2eeeb",
1656
- borderColor: "#6fb5ad",
1657
- hoverBorderColor: "#a0cec8",
1658
- activeBorderColor: "#d2eeeb",
1659
- color: "#1f1f21",
1660
- hoverColor: "#1f1f21",
1661
- activeColor: "#1f1f21",
1548
+ background: "var(--color-background-brand-bolder-default)",
1549
+ hoverBackground: "var(--color-background-brand-bolder-hover)",
1550
+ activeBackground: "var(--color-background-brand-bolder-pressed)",
1551
+ borderColor: "var(--color-background-brand-bolder-default)",
1552
+ hoverBorderColor: "var(--color-background-brand-bolder-hover)",
1553
+ activeBorderColor: "var(--color-background-brand-bolder-pressed)",
1554
+ color: "var(--color-elevation-surface-default)",
1555
+ hoverColor: "var(--color-elevation-surface-default)",
1556
+ activeColor: "var(--color-elevation-surface-default)",
1662
1557
  focusRing: {
1663
- color: "#a9abaf",
1558
+ color: "var(--color-border-focused)",
1664
1559
  shadow: "0 0 0 0 #00000000"
1665
1560
  }
1666
1561
  },
1667
1562
  secondary: {
1668
- background: "#242528",
1669
- hoverBackground: "#303134",
1670
- activeBackground: "#4b4d51",
1671
- borderColor: "#242528",
1672
- hoverBorderColor: "#303134",
1673
- activeBorderColor: "#4b4d51",
1674
- color: "#e2e3e4",
1675
- hoverColor: "#e2e3e4",
1676
- activeColor: "#e2e3e4",
1563
+ background: "var(--color-background-accent-gray-subtle-default)",
1564
+ hoverBackground: "var(--color-background-accent-gray-subtle-hover)",
1565
+ activeBackground: "var(--color-background-accent-gray-subtle-pressed)",
1566
+ borderColor: "var(--color-background-accent-gray-subtle-default)",
1567
+ hoverBorderColor: "var(--color-background-accent-gray-subtle-hover)",
1568
+ activeBorderColor: "var(--color-background-accent-gray-subtle-pressed)",
1569
+ color: "var(--color-text-default)",
1570
+ hoverColor: "var(--color-text-default)",
1571
+ activeColor: "var(--color-text-default)",
1677
1572
  focusRing: {
1678
- color: "#7e8188",
1573
+ color: "var(--color-border-accent-gray)",
1679
1574
  shadow: "0 0 0 0 #00000000"
1680
1575
  }
1681
1576
  },
1682
1577
  info: {
1683
- background: "#7cabf9",
1684
- hoverBackground: "#a6cdfd",
1685
- activeBackground: "#d9ecff",
1686
- borderColor: "#7cabf9",
1687
- hoverBorderColor: "#a6cdfd",
1688
- activeBorderColor: "#d9ecff",
1689
- color: "#1f1f21",
1690
- hoverColor: "#1f1f21",
1691
- activeColor: "#1f1f21",
1578
+ background: "var(--color-background-information-bolder-default)",
1579
+ hoverBackground: "var(--color-background-information-bolder-hover)",
1580
+ activeBackground: "var(--color-background-information-bolder-pressed)",
1581
+ borderColor: "var(--color-background-information-bolder-default)",
1582
+ hoverBorderColor: "var(--color-background-information-bolder-hover)",
1583
+ activeBorderColor: "var(--color-background-information-bolder-pressed)",
1584
+ color: "var(--color-text-inverse)",
1585
+ hoverColor: "var(--color-text-inverse)",
1586
+ activeColor: "var(--color-text-inverse)",
1692
1587
  focusRing: {
1693
- color: "#608ef6",
1588
+ color: "var(--color-border-information)",
1694
1589
  shadow: "0 0 0 0 #00000000"
1695
1590
  }
1696
1591
  },
1697
1592
  success: {
1698
- background: "#32c180",
1699
- hoverBackground: "#83d895",
1700
- activeBackground: "#cbf3c9",
1701
- borderColor: "#32c180",
1702
- hoverBorderColor: "#83d895",
1703
- activeBorderColor: "#cbf3c9",
1704
- color: "#1f1f21",
1705
- hoverColor: "#1f1f21",
1706
- activeColor: "#1f1f21",
1593
+ background: "var(--color-background-success-bolder-default)",
1594
+ hoverBackground: "var(--color-background-success-bolder-hover)",
1595
+ activeBackground: "var(--color-background-success-bolder-pressed)",
1596
+ borderColor: "var(--color-background-success-bolder-default)",
1597
+ hoverBorderColor: "var(--color-background-success-bolder-hover)",
1598
+ activeBorderColor: "var(--color-background-success-bolder-pressed)",
1599
+ color: "var(--color-text-inverse)",
1600
+ hoverColor: "var(--color-text-inverse)",
1601
+ activeColor: "var(--color-text-inverse)",
1707
1602
  focusRing: {
1708
- color: "#1ca673",
1603
+ color: "var(--color-border-success)",
1709
1604
  shadow: "0 0 0 0 #00000000"
1710
1605
  }
1711
1606
  },
1712
1607
  warn: {
1713
- background: "#d5a406",
1714
- hoverBackground: "#e9c348",
1715
- activeBackground: "#f8e6a0",
1716
- borderColor: "#d5a406",
1717
- hoverBorderColor: "#e9c348",
1718
- activeBorderColor: "#f8e6a0",
1719
- color: "#1f1f21",
1720
- hoverColor: "#1f1f21",
1721
- activeColor: "#1f1f21",
1608
+ background: "var(--color-background-warning-bolder-default)",
1609
+ hoverBackground: "var(--color-background-warning-bolder-hover)",
1610
+ activeBackground: "var(--color-background-warning-bolder-pressed)",
1611
+ borderColor: "var(--color-background-warning-bolder-default)",
1612
+ hoverBorderColor: "var(--color-background-warning-bolder-hover)",
1613
+ activeBorderColor: "var(--color-background-warning-bolder-pressed)",
1614
+ color: "var(--color-text-warning-inverse)",
1615
+ hoverColor: "var(--color-text-warning-inverse)",
1616
+ activeColor: "var(--color-text-warning-inverse)",
1722
1617
  focusRing: {
1723
- color: "#bc870d",
1618
+ color: "var(--color-border-warning)",
1724
1619
  shadow: "0 0 0 0 #00000000"
1725
1620
  }
1726
1621
  },
@@ -1740,66 +1635,66 @@ const BCCPreset = definePreset(Aura, {
1740
1635
  }
1741
1636
  },
1742
1637
  danger: {
1743
- background: "#fa877e",
1744
- hoverBackground: "#fab6ad",
1745
- activeBackground: "#fee2dd",
1746
- borderColor: "#fa877e",
1747
- hoverBorderColor: "#fab6ad",
1748
- activeBorderColor: "#fee2dd",
1749
- color: "#1f1f21",
1750
- hoverColor: "#1f1f21",
1751
- activeColor: "#1f1f21",
1638
+ background: "var(--color-background-danger-bolder-default)",
1639
+ hoverBackground: "var(--color-background-danger-bolder-hover)",
1640
+ activeBackground: "var(--color-background-danger-bolder-pressed)",
1641
+ borderColor: "var(--color-background-danger-bolder-default)",
1642
+ hoverBorderColor: "var(--color-background-danger-bolder-hover)",
1643
+ activeBorderColor: "var(--color-background-danger-bolder-pressed)",
1644
+ color: "var(--color-text-inverse)",
1645
+ hoverColor: "var(--color-text-inverse)",
1646
+ activeColor: "var(--color-text-inverse)",
1752
1647
  focusRing: {
1753
- color: "#ed6362",
1648
+ color: "var(--color-border-danger)",
1754
1649
  shadow: "0 0 0 0 #00000000"
1755
1650
  }
1756
1651
  },
1757
1652
  contrast: {
1758
- background: "#e2e3e4",
1759
- hoverBackground: "#cecfd2",
1760
- activeBackground: "#bfc1c4",
1761
- borderColor: "#e2e3e4",
1762
- hoverBorderColor: "#cecfd2",
1763
- activeBorderColor: "#bfc1c4",
1764
- color: "#1f1f21",
1765
- hoverColor: "#1f1f21",
1766
- activeColor: "#1f1f21",
1653
+ background: "var(--color-background-accent-gray-boldest-default)",
1654
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
1655
+ activeBackground: "var(--color-background-accent-gray-boldest-pressed)",
1656
+ borderColor: "var(--color-background-accent-gray-boldest-default)",
1657
+ hoverBorderColor: "var(--color-background-accent-gray-boldest-hover)",
1658
+ activeBorderColor: "var(--color-background-accent-gray-boldest-pressed)",
1659
+ color: "var(--color-text-inverse)",
1660
+ hoverColor: "var(--color-text-inverse)",
1661
+ activeColor: "var(--color-text-inverse)",
1767
1662
  focusRing: {
1768
- color: "#7e8188",
1663
+ color: "var(--color-border-accent-gray)",
1769
1664
  shadow: "0 0 0 0 #00000000"
1770
1665
  }
1771
1666
  }
1772
1667
  },
1773
1668
  outlined: {
1774
1669
  primary: {
1775
- hoverBackground: "#0b3633",
1776
- activeBackground: "#014d49",
1777
- borderColor: "#6fb5ad",
1778
- color: "#6fb5ad"
1670
+ hoverBackground: "var(--color-background-brand-subtlest-hover)",
1671
+ activeBackground: "var(--color-background-brand-subtlest-pressed)",
1672
+ borderColor: "var(--color-border-brand)",
1673
+ color: "var(--color-text-brand-default)"
1779
1674
  },
1780
1675
  secondary: {
1781
- hoverBackground: "#1f1f21",
1782
- activeBackground: "#242528",
1783
- borderColor: "#7e8188",
1784
- color: "#e2e3e4"
1676
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1677
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1678
+ borderColor: "var(--color-border-accent-gray)",
1679
+ color: "var(--color-text-default)"
1785
1680
  },
1786
1681
  success: {
1787
- hoverBackground: "#073734",
1788
- activeBackground: "#094c3b",
1789
- borderColor: "#1ca673",
1790
- color: "#83d895"
1682
+ hoverBackground: "var(--color-background-success-hover)",
1683
+ activeBackground: "var(--color-background-success-pressed)",
1684
+ borderColor: "var(--color-border-success)",
1685
+ color: "var(--color-text-success)"
1791
1686
  },
1792
1687
  info: {
1793
- hoverBackground: "#212c64",
1794
- activeBackground: "#273c8f",
1795
- borderColor: "#608ef6",
1796
- color: "#a6cdfd"
1688
+ hoverBackground: "var(--color-background-information-hover)",
1689
+ activeBackground: "var(--color-background-information-pressed)",
1690
+ borderColor: "var(--color-border-information)",
1691
+ color: "var(--color-text-information)"
1797
1692
  },
1798
1693
  warn: {
1799
- hoverBackground: "#4b2c04",
1800
- activeBackground: "#653805",
1801
- borderColor: "#bc870d",
1802
- color: "#e9c348"
1694
+ hoverBackground: "var(--color-background-warning-hover)",
1695
+ activeBackground: "var(--color-background-warning-pressed)",
1696
+ borderColor: "var(--color-border-warning)",
1697
+ color: "var(--color-text-warning-default)"
1803
1698
  },
1804
1699
  help: {
1805
1700
  hoverBackground: "{purple.400}",
@@ -1808,16 +1703,16 @@ const BCCPreset = definePreset(Aura, {
1808
1703
  color: "{purple.400}"
1809
1704
  },
1810
1705
  danger: {
1811
- hoverBackground: "#630d2e",
1812
- activeBackground: "#811436",
1813
- borderColor: "#ed6362",
1814
- color: "#fab6ad"
1706
+ hoverBackground: "var(--color-background-danger-hover)",
1707
+ activeBackground: "var(--color-background-danger-pressed)",
1708
+ borderColor: "var(--color-border-danger)",
1709
+ color: "var(--color-text-danger)"
1815
1710
  },
1816
1711
  contrast: {
1817
- hoverBackground: "#1f1f21",
1818
- activeBackground: "#242528",
1819
- borderColor: "#7e8188",
1820
- color: "#e2e3e4"
1712
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1713
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1714
+ borderColor: "var(--color-border-accent-gray)",
1715
+ color: "var(--color-text-default)"
1821
1716
  },
1822
1717
  plain: {
1823
1718
  hoverBackground: "{surface.800}",
@@ -1828,29 +1723,29 @@ const BCCPreset = definePreset(Aura, {
1828
1723
  },
1829
1724
  text: {
1830
1725
  primary: {
1831
- hoverBackground: "#0b3633",
1832
- activeBackground: "#014d49",
1833
- color: "#6fb5ad"
1726
+ hoverBackground: "var(--color-background-brand-subtlest-hover)",
1727
+ activeBackground: "var(--color-background-brand-subtlest-pressed)",
1728
+ color: "var(--color-text-brand-default)"
1834
1729
  },
1835
1730
  secondary: {
1836
- hoverBackground: "#1f1f21",
1837
- activeBackground: "#242528",
1838
- color: "#e2e3e4"
1731
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1732
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1733
+ color: "var(--color-text-default)"
1839
1734
  },
1840
1735
  success: {
1841
- hoverBackground: "#073734",
1842
- activeBackground: "#094c3b",
1843
- color: "#83d895"
1736
+ hoverBackground: "var(--color-background-success-hover)",
1737
+ activeBackground: "var(--color-background-success-pressed)",
1738
+ color: "var(--color-text-success)"
1844
1739
  },
1845
1740
  info: {
1846
- hoverBackground: "#212c64",
1847
- activeBackground: "#273c8f",
1848
- color: "#a6cdfd"
1741
+ hoverBackground: "var(--color-background-information-hover)",
1742
+ activeBackground: "var(--color-background-information-pressed)",
1743
+ color: "var(--color-text-information)"
1849
1744
  },
1850
1745
  warn: {
1851
- hoverBackground: "#4b2c04",
1852
- activeBackground: "#653805",
1853
- color: "#e9c348"
1746
+ hoverBackground: "var(--color-background-warning-hover)",
1747
+ activeBackground: "var(--color-background-warning-pressed)",
1748
+ color: "var(--color-text-warning-default)"
1854
1749
  },
1855
1750
  help: {
1856
1751
  hoverBackground: "{purple.400}",
@@ -1858,14 +1753,14 @@ const BCCPreset = definePreset(Aura, {
1858
1753
  color: "{purple.400}"
1859
1754
  },
1860
1755
  danger: {
1861
- hoverBackground: "#630d2e",
1862
- activeBackground: "#811436",
1863
- color: "#fab6ad"
1756
+ hoverBackground: "var(--color-background-danger-hover)",
1757
+ activeBackground: "var(--color-background-danger-pressed)",
1758
+ color: "var(--color-text-danger)"
1864
1759
  },
1865
1760
  contrast: {
1866
- hoverBackground: "#1f1f21",
1867
- activeBackground: "#242528",
1868
- color: "#e2e3e4"
1761
+ hoverBackground: "var(--color-background-accent-gray-subtlest-hover)",
1762
+ activeBackground: "var(--color-background-accent-gray-subtlest-pressed)",
1763
+ color: "var(--color-text-default)"
1869
1764
  },
1870
1765
  plain: {
1871
1766
  hoverBackground: "{surface.800}",
@@ -1883,111 +1778,76 @@ const BCCPreset = definePreset(Aura, {
1883
1778
  },
1884
1779
  checkbox: {
1885
1780
  root: {
1886
- borderRadius: "0.25rem",
1887
- width: "1.25rem",
1888
- height: "1.25rem",
1781
+ borderRadius: "var(--border-radius-xs)",
1782
+ width: "var(--space-250)",
1783
+ height: "var(--space-250)",
1784
+ background: "var(--color-elevation-surface-default)",
1785
+ checkedBackground: "var(--color-background-brand-bolder-default)",
1786
+ checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
1787
+ disabledBackground: "var(--color-background-disabled-default)",
1788
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
1789
+ borderColor: "var(--color-border-default)",
1790
+ hoverBorderColor: "var(--color-border-bold)",
1791
+ focusBorderColor: "var(--color-border-focused)",
1792
+ checkedBorderColor: "var(--color-background-brand-bolder-default)",
1793
+ checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
1794
+ checkedFocusBorderColor: "var(--color-border-focused)",
1795
+ checkedDisabledBorderColor: "var(--color-border-disabled)",
1796
+ invalidBorderColor: "var(--color-border-danger)",
1889
1797
  shadow: "{form.field.shadow}",
1890
1798
  focusRing: {
1891
1799
  width: "{focus.ring.width}",
1892
1800
  style: "{focus.ring.style}",
1801
+ color: "var(--color-border-focused)",
1893
1802
  offset: "{focus.ring.offset}",
1894
1803
  shadow: "{focus.ring.shadow}"
1895
1804
  },
1896
1805
  transitionDuration: "{form.field.transition.duration}",
1897
1806
  sm: {
1898
- width: "1rem",
1899
- height: "1rem"
1807
+ width: "var(--space-200)",
1808
+ height: "var(--space-200)"
1900
1809
  },
1901
1810
  lg: {
1902
- width: "1.5rem",
1903
- height: "1.5rem"
1904
- },
1905
- gap: "0.5rem"
1906
- },
1907
- colorScheme: {
1908
- light: {
1909
- root: {
1910
- background: "#ffffff",
1911
- checkedBackground: "#0c625c",
1912
- checkedHoverBackground: "#014d49",
1913
- disabledBackground: "rgba(5, 21, 36, 0.06)",
1914
- filledBackground: "#f8f8f8",
1915
- borderColor: "rgba(11, 18, 14, 0.14)",
1916
- hoverBorderColor: "#7d818a",
1917
- focusBorderColor: "#505258",
1918
- checkedBorderColor: "#0c625c",
1919
- checkedHoverBorderColor: "#014d49",
1920
- checkedFocusBorderColor: "#505258",
1921
- checkedDisabledBorderColor: "rgba(5, 21, 36, 0.06)",
1922
- invalidBorderColor: "#ca414e",
1923
- focusRing: {
1924
- color: "#505258"
1925
- }
1926
- },
1927
- icon: {
1928
- color: "#ffffff",
1929
- checkedColor: "#ffffff",
1930
- checkedHoverColor: "#ffffff",
1931
- disabledColor: "rgba(8, 15, 33, 0.29)"
1932
- }
1811
+ width: "var(--space-300)",
1812
+ height: "var(--space-300)"
1933
1813
  },
1934
- dark: {
1935
- root: {
1936
- background: "#1f1f21",
1937
- checkedBackground: "#6fb5ad",
1938
- checkedHoverBackground: "#a0cec8",
1939
- disabledBackground: "rgba(227, 228, 242, 0.12)",
1940
- filledBackground: "#1f1f21",
1941
- borderColor: "rgba(229, 233, 246, 0.25)",
1942
- hoverBorderColor: "#7e8188",
1943
- focusBorderColor: "#a9abaf",
1944
- checkedBorderColor: "#6fb5ad",
1945
- checkedHoverBorderColor: "#a0cec8",
1946
- checkedFocusBorderColor: "#a9abaf",
1947
- checkedDisabledBorderColor: "rgba(206, 206, 217, 0.07)",
1948
- invalidBorderColor: "#ed6362",
1949
- focusRing: {
1950
- color: "#a9abaf"
1951
- }
1952
- },
1953
- icon: {
1954
- color: "#1f1f21",
1955
- checkedColor: "#1f1f21",
1956
- checkedHoverColor: "#1f1f21",
1957
- disabledColor: "rgba(229, 233, 246, 0.25)"
1958
- }
1959
- }
1814
+ gap: "var(--space-100)"
1960
1815
  },
1961
1816
  icon: {
1962
- size: "1rem",
1817
+ size: "var(--icon-size-xs)",
1818
+ color: "var(--color-icon-inverse)",
1819
+ checkedColor: "var(--color-icon-inverse)",
1820
+ checkedHoverColor: "var(--color-icon-inverse)",
1821
+ disabledColor: "var(--color-icon-disabled)",
1963
1822
  sm: {
1964
- size: "1rem"
1823
+ size: "var(--icon-size-xs)"
1965
1824
  },
1966
1825
  lg: {
1967
- size: "1.25rem"
1826
+ size: "var(--icon-size-sm)"
1968
1827
  }
1969
1828
  }
1970
1829
  },
1971
1830
  chip: {
1972
1831
  root: {
1973
- borderRadius: "0.5rem",
1974
- paddingX: "0.75rem",
1975
- paddingY: "0.5rem",
1976
- gap: "0.5rem",
1832
+ borderRadius: "var(--border-radius-md)",
1833
+ paddingX: "var(--space-150)",
1834
+ paddingY: "var(--space-100)",
1835
+ gap: "var(--space-100)",
1977
1836
  transitionDuration: "{transition.duration}"
1978
1837
  },
1979
1838
  image: {
1980
- width: "2rem",
1981
- height: "2rem"
1839
+ width: "var(--space-400)",
1840
+ height: "var(--space-400)"
1982
1841
  },
1983
1842
  icon: {
1984
- size: "1.25rem"
1843
+ size: "var(--space-250)"
1985
1844
  },
1986
1845
  removeIcon: {
1987
- size: "1.25rem",
1846
+ size: "var(--space-250)",
1988
1847
  focusRing: {
1989
1848
  width: "{focus.ring.width}",
1990
1849
  style: "{focus.ring.style}",
1850
+ color: "var(--color-border-focused)",
1991
1851
  offset: "{focus.ring.offset}",
1992
1852
  shadow: "{form.field.focus.ring.shadow}"
1993
1853
  },
@@ -1995,105 +1855,85 @@ const BCCPreset = definePreset(Aura, {
1995
1855
  },
1996
1856
  colorScheme: {
1997
1857
  light: {
1998
- removeIcon: {
1999
- focusRing: {
2000
- color: "#505258"
2001
- },
2002
- color: "#1e1f21"
2003
- },
2004
1858
  root: {
2005
- background: "#dddee1",
2006
- color: "#292a2e"
1859
+ background: "var(--color-background-accent-gray-default)",
1860
+ color: "var(--color-text-default)"
2007
1861
  },
2008
1862
  icon: {
2009
- color: "#1e1f21"
1863
+ color: "var(--color-icon-default)"
1864
+ },
1865
+ removeIcon: {
1866
+ color: "var(--color-icon-default)"
2010
1867
  }
2011
1868
  },
2012
1869
  dark: {
2013
- removeIcon: {
2014
- focusRing: {
2015
- color: "#a9abaf"
2016
- },
2017
- color: "#cecfd2"
2018
- },
2019
1870
  root: {
2020
- background: "#303134",
2021
- color: "#e2e3e4"
1871
+ background: "var(--color-background-accent-gray-default)",
1872
+ color: "var(--color-text-default)"
2022
1873
  },
2023
1874
  icon: {
2024
- color: "#cecfd2"
1875
+ color: "var(--color-icon-default)"
1876
+ },
1877
+ removeIcon: {
1878
+ color: "var(--color-icon-default)"
2025
1879
  }
2026
1880
  }
2027
1881
  }
2028
1882
  },
2029
1883
  divider: {
2030
- colorScheme: {
2031
- light: {
2032
- root: {
2033
- borderColor: "rgba(11, 18, 14, 0.14)"
2034
- },
2035
- content: {
2036
- color: "#292a2e"
2037
- }
2038
- },
2039
- dark: {
2040
- root: {
2041
- borderColor: "rgba(229, 233, 246, 0.25)"
2042
- },
2043
- content: {
2044
- color: "#e2e3e4"
2045
- }
2046
- }
1884
+ root: {
1885
+ borderColor: "var(--color-border-default)"
2047
1886
  },
2048
1887
  content: {
2049
1888
  background: "transparent",
2050
- gap: "0.5rem"
1889
+ color: "var(--color-text-default)",
1890
+ gap: "var(--space-100)"
2051
1891
  },
2052
1892
  horizontal: {
2053
- margin: "1rem 0",
2054
- padding: "0.5rem",
1893
+ margin: "var(--space-200) 0",
1894
+ padding: "var(--space-100)",
2055
1895
  content: {
2056
- padding: "0 0.5rem"
1896
+ padding: "0 var(--space-100)"
2057
1897
  }
2058
1898
  },
2059
1899
  vertical: {
2060
- margin: "0 1rem",
2061
- padding: "0.5rem",
1900
+ margin: "0 var(--space-200)",
1901
+ padding: "var(--space-100)",
2062
1902
  content: {
2063
- padding: "0.5rem 0"
1903
+ padding: "var(--space-100) 0"
2064
1904
  }
2065
1905
  }
2066
1906
  },
2067
1907
  inputgroup: {
2068
1908
  addon: {
2069
- borderRadius: "0.375rem",
2070
- padding: "0.5rem",
2071
- minWidth: "2.5rem",
2072
- minHeight: "2.5rem"
2073
- },
2074
- colorScheme: {
2075
- light: {
2076
- addon: {
2077
- background: "#ffffff",
2078
- borderColor: "#8c8f97",
2079
- color: "#505258"
2080
- }
2081
- },
2082
- dark: {
2083
- addon: {
2084
- background: "#1f1f21",
2085
- borderColor: "#63666b",
2086
- color: "#a9abaf"
2087
- }
2088
- }
1909
+ background: "var(--color-elevation-surface-default)",
1910
+ borderColor: "var(--color-border-input)",
1911
+ color: "var(--color-text-subtle)",
1912
+ borderRadius: "var(--border-radius-sm)",
1913
+ padding: "var(--space-100)",
1914
+ minWidth: "var(--space-500)",
1915
+ minHeight: "var(--space-500)"
2089
1916
  }
2090
1917
  },
2091
1918
  inputtext: {
2092
1919
  root: {
1920
+ background: "var(--color-elevation-surface-default)",
1921
+ disabledBackground: "var(--color-background-disabled-default)",
1922
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
1923
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
1924
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
1925
+ borderColor: "var(--color-border-default)",
1926
+ hoverBorderColor: "var(--color-border-input)",
1927
+ focusBorderColor: "var(--color-border-focused)",
1928
+ invalidBorderColor: "var(--color-border-danger)",
1929
+ color: "var(--color-text-default)",
1930
+ disabledColor: "var(--color-text-disabled)",
1931
+ placeholderColor: "var(--color-text-subtlest)",
1932
+ invalidPlaceholderColor: "var(--color-text-danger)",
2093
1933
  shadow: "{form.field.shadow}",
2094
- paddingX: "0.75rem",
2095
- paddingY: "0.25rem",
2096
- borderRadius: "0.375rem",
1934
+ paddingX: "var(--space-150)",
1935
+ paddingY: "var(--space-50)",
1936
+ borderRadius: "var(--border-radius-sm)",
2097
1937
  focusRing: {
2098
1938
  width: "{form.field.focus.ring.width}",
2099
1939
  style: "{form.field.focus.ring.style}",
@@ -2103,184 +1943,118 @@ const BCCPreset = definePreset(Aura, {
2103
1943
  },
2104
1944
  transitionDuration: "{form.field.transition.duration}",
2105
1945
  sm: {
2106
- fontSize: "0.875rem",
2107
- paddingX: "0.75rem",
2108
- paddingY: "0.125rem",
2109
- minHeight: "2rem"
1946
+ fontSize: "var(--font-size-sm)",
1947
+ paddingX: "var(--space-150)",
1948
+ paddingY: "var(--space-25)",
1949
+ minHeight: "var(--space-400)"
2110
1950
  },
2111
1951
  lg: {
2112
- fontSize: "1.25rem",
2113
- paddingX: "0.75rem",
2114
- paddingY: "0.5rem",
2115
- minHeight: "3rem"
1952
+ fontSize: "var(--font-size-lg)",
1953
+ paddingX: "var(--space-150)",
1954
+ paddingY: "var(--space-100)",
1955
+ minHeight: "var(--space-600)"
2116
1956
  },
2117
- gap: "0.25rem",
2118
- minHeight: "2.5rem"
2119
- },
2120
- colorScheme: {
2121
- light: {
2122
- root: {
2123
- background: "#ffffff",
2124
- disabledBackground: "rgba(5, 21, 36, 0.06)",
2125
- filledBackground: "#f8f8f8",
2126
- filledHoverBackground: "#f8f8f8",
2127
- filledFocusBackground: "#f8f8f8",
2128
- borderColor: "rgba(11, 18, 14, 0.14)",
2129
- hoverBorderColor: "#8c8f97",
2130
- focusBorderColor: "#505258",
2131
- invalidBorderColor: "#ca414e",
2132
- color: "#292a2e",
2133
- disabledColor: "rgba(8, 15, 33, 0.29)",
2134
- placeholderColor: "#6b6e76",
2135
- invalidPlaceholderColor: "#811436"
2136
- }
2137
- },
2138
- dark: {
2139
- root: {
2140
- background: "#1f1f21",
2141
- disabledBackground: "rgba(227, 228, 242, 0.12)",
2142
- filledBackground: "#1f1f21",
2143
- filledHoverBackground: "#1f1f21",
2144
- filledFocusBackground: "#1f1f21",
2145
- borderColor: "rgba(229, 233, 246, 0.25)",
2146
- hoverBorderColor: "#63666b",
2147
- focusBorderColor: "#a9abaf",
2148
- invalidBorderColor: "#ed6362",
2149
- color: "#e2e3e4",
2150
- disabledColor: "rgba(229, 233, 246, 0.25)",
2151
- placeholderColor: "#96999e",
2152
- invalidPlaceholderColor: "#fab6ad"
2153
- }
2154
- }
1957
+ gap: "var(--space-50)",
1958
+ minHeight: "var(--space-500)"
2155
1959
  }
2156
1960
  },
2157
1961
  listbox: {
2158
1962
  root: {
1963
+ background: "var(--color-elevation-surface-default)",
1964
+ disabledBackground: "var(--color-background-disabled-default)",
1965
+ borderColor: "var(--color-border-default)",
1966
+ invalidBorderColor: "var(--color-border-danger)",
1967
+ color: "var(--color-elevation-surface-default)",
1968
+ disabledColor: "var(--color-background-accent-gray-default)",
2159
1969
  shadow: "{form.field.shadow}",
2160
- borderRadius: "0.375rem",
1970
+ borderRadius: "var(--border-radius-sm)",
2161
1971
  transitionDuration: "{form.field.transition.duration}"
2162
1972
  },
2163
- colorScheme: {
2164
- light: {
2165
- root: {
2166
- background: "#ffffff",
2167
- disabledBackground: "rgba(5, 21, 36, 0.06)",
2168
- borderColor: "rgba(11, 18, 14, 0.14)",
2169
- invalidBorderColor: "#ca414e",
2170
- color: "#ffffff",
2171
- disabledColor: "#dddee1"
2172
- },
2173
- option: {
2174
- focusBackground: "#dddee1",
2175
- selectedBackground: "#f0fcfa",
2176
- selectedFocusBackground: "#d2eeeb",
2177
- color: "#505258",
2178
- focusColor: "#292a2e",
2179
- selectedColor: "#0c625c",
2180
- selectedFocusColor: "#0c625c",
2181
- stripedBackground: "{surface.50}"
2182
- },
2183
- optionGroup: {
2184
- background: "#ffffff",
2185
- color: "#6b6e76"
2186
- },
2187
- checkmark: {
2188
- color: "#505258"
2189
- }
2190
- },
2191
- dark: {
2192
- root: {
2193
- background: "#1f1f21",
2194
- disabledBackground: "rgba(227, 228, 242, 0.12)",
2195
- borderColor: "rgba(229, 233, 246, 0.25)",
2196
- invalidBorderColor: "#ed6362",
2197
- color: "#1f1f21",
2198
- disabledColor: "#303134"
2199
- },
2200
- option: {
2201
- focusBackground: "#303134",
2202
- selectedBackground: "#012320",
2203
- selectedFocusBackground: "#0b3633",
2204
- color: "#a9abaf",
2205
- focusColor: "#e2e3e4",
2206
- selectedColor: "#6fb5ad",
2207
- selectedFocusColor: "#6fb5ad",
2208
- stripedBackground: "{surface.900}"
2209
- },
2210
- optionGroup: {
2211
- background: "#1f1f21",
2212
- color: "#96999e"
2213
- },
2214
- checkmark: {
2215
- color: "#a9abaf"
2216
- }
2217
- }
2218
- },
2219
1973
  list: {
2220
- padding: "0.5rem",
2221
- gap: "0.125rem",
1974
+ padding: "var(--space-100)",
1975
+ gap: "var(--space-25)",
2222
1976
  header: {
2223
- padding: "0.5rem"
1977
+ padding: "var(--space-100)"
2224
1978
  }
2225
1979
  },
2226
1980
  option: {
2227
- padding: "0.5rem 0.75rem",
2228
- borderRadius: "0.25rem"
1981
+ focusBackground: "var(--color-background-accent-gray-subtle-hover)",
1982
+ selectedBackground: "var(--color-background-brand-subtlest-default)",
1983
+ selectedFocusBackground: "var(--color-background-brand-subtler-default)",
1984
+ color: "var(--color-text-subtle)",
1985
+ focusColor: "var(--color-text-default)",
1986
+ selectedColor: "var(--color-text-selected)",
1987
+ selectedFocusColor: "var(--color-text-selected)",
1988
+ padding: "var(--space-100) var(--space-150)",
1989
+ borderRadius: "var(--border-radius-xs)"
2229
1990
  },
2230
1991
  optionGroup: {
1992
+ background: "var(--color-elevation-surface-default)",
1993
+ color: "var(--color-text-subtlest)",
2231
1994
  fontWeight: "{list.option.group.font.weight}",
2232
- padding: "0.75rem"
1995
+ padding: "var(--space-100) var(--space-150)"
2233
1996
  },
2234
1997
  checkmark: {
2235
- gutterStart: "-0.375rem",
2236
- gutterEnd: "0.375rem"
1998
+ color: "var(--color-icon-subtle)",
1999
+ gutterStart: "var(--space-negative-75)",
2000
+ gutterEnd: "var(--space-75)"
2237
2001
  },
2238
2002
  emptyMessage: {
2239
- padding: "0.5rem 0.75rem"
2003
+ padding: "var(--space-100) var(--space-150)"
2004
+ },
2005
+ colorScheme: {
2006
+ light: {
2007
+ option: {
2008
+ stripedBackground: "{surface.50}"
2009
+ }
2010
+ },
2011
+ dark: {
2012
+ option: {
2013
+ stripedBackground: "{surface.900}"
2014
+ }
2015
+ }
2240
2016
  }
2241
2017
  },
2242
2018
  message: {
2243
2019
  root: {
2244
- borderRadius: "0.375rem",
2245
- borderWidth: "1px",
2020
+ borderRadius: "var(--border-radius-sm)",
2021
+ borderWidth: "var(--border-width-1)",
2246
2022
  transitionDuration: "{transition.duration}"
2247
2023
  },
2248
2024
  content: {
2249
- padding: "0.375rem 0.75rem",
2250
- gap: "0.5rem",
2025
+ padding: "var(--space-75) var(--space-150)",
2026
+ gap: "var(--space-100)",
2251
2027
  sm: {
2252
- padding: "0.125rem 0.5rem",
2253
- minHeight: "2rem"
2028
+ padding: "var(--space-25) var(--space-100)"
2254
2029
  },
2255
2030
  lg: {
2256
- padding: "0.5rem 1rem",
2257
- minHeight: "3rem"
2258
- },
2259
- minHeight: "2.5rem"
2031
+ padding: "var(--space-100) var(--space-200)"
2032
+ }
2260
2033
  },
2261
2034
  text: {
2262
- fontSize: "0.875rem",
2263
- fontWeight: "500",
2035
+ fontSize: "var(--font-size-sm)",
2036
+ fontWeight: "var(--font-weight-medium)",
2264
2037
  sm: {
2265
- fontSize: "0.875rem"
2038
+ fontSize: "var(--font-size-sm)"
2266
2039
  },
2267
2040
  lg: {
2268
- fontSize: "1rem"
2269
- }
2041
+ fontSize: "var(--font-size-md)"
2042
+ },
2043
+ lineHeight: "var(--line-height-4)"
2270
2044
  },
2271
2045
  icon: {
2272
- size: "1.25rem",
2046
+ size: "var(--space-250)",
2273
2047
  sm: {
2274
- size: "1.25rem"
2048
+ size: "var(--space-250)"
2275
2049
  },
2276
2050
  lg: {
2277
- size: "1.25rem"
2051
+ size: "var(--space-250)"
2278
2052
  }
2279
2053
  },
2280
2054
  closeButton: {
2281
- width: "1.5rem",
2282
- height: "1.5rem",
2283
- borderRadius: "0.75rem",
2055
+ width: "var(--space-300)",
2056
+ height: "var(--space-300)",
2057
+ borderRadius: "var(--border-radius-lg)",
2284
2058
  focusRing: {
2285
2059
  width: "{focus.ring.width}",
2286
2060
  style: "{focus.ring.style}",
@@ -2288,261 +2062,261 @@ const BCCPreset = definePreset(Aura, {
2288
2062
  }
2289
2063
  },
2290
2064
  closeIcon: {
2291
- size: "1.25rem",
2065
+ size: "var(--space-250)",
2292
2066
  sm: {
2293
- size: "0.75rem"
2067
+ size: "var(--space-150)"
2294
2068
  },
2295
2069
  lg: {
2296
- size: "1rem"
2070
+ size: "var(--space-200)"
2297
2071
  }
2298
2072
  },
2299
2073
  simple: {
2300
2074
  content: {
2301
- padding: "0rem"
2075
+ padding: "var(--space-0)"
2302
2076
  }
2303
2077
  },
2304
2078
  colorScheme: {
2305
2079
  light: {
2306
2080
  info: {
2307
- background: "#f6fbff",
2308
- borderColor: "#446add",
2309
- color: "#273c8f",
2081
+ background: "var(--color-background-information-default)",
2082
+ borderColor: "var(--color-border-information)",
2083
+ color: "var(--color-text-information)",
2310
2084
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
2311
2085
  closeButton: {
2312
- hoverBackground: "#d9ecff",
2086
+ hoverBackground: "var(--color-background-information-hover)",
2313
2087
  focusRing: {
2314
- color: "#446add",
2088
+ color: "var(--color-border-information)",
2315
2089
  shadow: "0 0 0 0 #00000000"
2316
2090
  }
2317
2091
  },
2318
2092
  outlined: {
2319
- color: "#273c8f",
2320
- borderColor: "#446add"
2093
+ color: "var(--color-text-information)",
2094
+ borderColor: "var(--color-border-information)"
2321
2095
  },
2322
2096
  simple: {
2323
- color: "#273c8f"
2097
+ color: "var(--color-text-information)"
2324
2098
  }
2325
2099
  },
2326
2100
  success: {
2327
- background: "#efffed",
2328
- borderColor: "#09825d",
2329
- color: "#094c3b",
2101
+ background: "var(--color-background-success-default)",
2102
+ borderColor: "var(--color-border-success)",
2103
+ color: "var(--color-text-success)",
2330
2104
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
2331
2105
  closeButton: {
2332
- hoverBackground: "#cbf3c9",
2106
+ hoverBackground: "var(--color-background-success-hover)",
2333
2107
  focusRing: {
2334
- color: "#09825d",
2108
+ color: "var(--color-border-success)",
2335
2109
  shadow: "0 0 0 0 #00000000"
2336
2110
  }
2337
2111
  },
2338
2112
  outlined: {
2339
- color: "#094c3b",
2340
- borderColor: "#09825d"
2113
+ color: "var(--color-text-success)",
2114
+ borderColor: "var(--color-border-success)"
2341
2115
  },
2342
2116
  simple: {
2343
- color: "#094c3b"
2117
+ color: "var(--color-text-success)"
2344
2118
  }
2345
2119
  },
2346
2120
  warn: {
2347
- background: "#fdf8e9",
2348
- borderColor: "#b55919",
2349
- color: "#653805",
2121
+ background: "var(--color-background-warning-default)",
2122
+ borderColor: "var(--color-border-warning)",
2123
+ color: "var(--color-text-warning-default)",
2350
2124
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
2351
2125
  closeButton: {
2352
- hoverBackground: "#f8e6a0",
2126
+ hoverBackground: "var(--color-background-warning-hover)",
2353
2127
  focusRing: {
2354
- color: "#b55919",
2128
+ color: "var(--color-border-warning)",
2355
2129
  shadow: "0 0 0 0 #00000000"
2356
2130
  }
2357
2131
  },
2358
2132
  outlined: {
2359
- color: "#653805",
2360
- borderColor: "#b55919"
2133
+ color: "var(--color-text-warning-default)",
2134
+ borderColor: "var(--color-border-warning)"
2361
2135
  },
2362
2136
  simple: {
2363
- color: "#653805"
2137
+ color: "var(--color-text-warning-default)"
2364
2138
  }
2365
2139
  },
2366
2140
  error: {
2367
- background: "#fff8f3",
2368
- borderColor: "#ca414e",
2369
- color: "#811436",
2141
+ background: "var(--color-background-danger-default)",
2142
+ borderColor: "var(--color-border-danger)",
2143
+ color: "var(--color-text-danger)",
2370
2144
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
2371
2145
  closeButton: {
2372
- hoverBackground: "#fee2dd",
2146
+ hoverBackground: "var(--color-background-danger-hover)",
2373
2147
  focusRing: {
2374
- color: "#ca414e",
2148
+ color: "var(--color-border-danger)",
2375
2149
  shadow: "0 0 0 0 #00000000"
2376
2150
  }
2377
2151
  },
2378
2152
  outlined: {
2379
- color: "#811436",
2380
- borderColor: "#ca414e"
2153
+ color: "var(--color-text-danger)",
2154
+ borderColor: "var(--color-border-danger)"
2381
2155
  },
2382
2156
  simple: {
2383
- color: "#811436"
2157
+ color: "var(--color-text-danger)"
2384
2158
  }
2385
2159
  },
2386
2160
  secondary: {
2387
- background: "#f8f8f8",
2388
- borderColor: "#7d818a",
2389
- color: "#292a2e",
2161
+ background: "var(--color-background-accent-gray-subtler-default)",
2162
+ borderColor: "var(--color-border-accent-gray)",
2163
+ color: "var(--color-text-default)",
2390
2164
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
2391
2165
  closeButton: {
2392
- hoverBackground: "#f0f1f2",
2166
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
2393
2167
  focusRing: {
2394
- color: "#7d818a",
2168
+ color: "var(--color-border-accent-gray)",
2395
2169
  shadow: "0 0 0 0 #00000000"
2396
2170
  }
2397
2171
  },
2398
2172
  outlined: {
2399
- color: "#292a2e",
2400
- borderColor: "#7d818a"
2173
+ color: "var(--color-text-default)",
2174
+ borderColor: "var(--color-border-accent-gray)"
2401
2175
  },
2402
2176
  simple: {
2403
- color: "#292a2e"
2177
+ color: "var(--color-text-default)"
2404
2178
  }
2405
2179
  },
2406
2180
  contrast: {
2407
- background: "#1e1f21",
2408
- borderColor: "#1e1f21",
2409
- color: "#ffffff",
2181
+ background: "var(--color-background-accent-gray-boldest-default)",
2182
+ borderColor: "var(--color-icon-default)",
2183
+ color: "var(--color-text-inverse)",
2410
2184
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
2411
2185
  closeButton: {
2412
- hoverBackground: "#292a2e",
2186
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
2413
2187
  focusRing: {
2414
- color: "#ffffff",
2188
+ color: "var(--color-border-inverse)",
2415
2189
  shadow: "0 0 0 0 #00000000"
2416
2190
  }
2417
2191
  },
2418
2192
  outlined: {
2419
- color: "#292a2e",
2420
- borderColor: "#1e1f21"
2193
+ color: "var(--color-text-default)",
2194
+ borderColor: "var(--color-background-accent-gray-boldest-default)"
2421
2195
  },
2422
2196
  simple: {
2423
- color: "#292a2e"
2197
+ color: "var(--color-text-default)"
2424
2198
  }
2425
2199
  }
2426
2200
  },
2427
2201
  dark: {
2428
2202
  info: {
2429
- background: "#091e47",
2430
- borderColor: "#608ef6",
2431
- color: "#a6cdfd",
2203
+ background: "var(--color-background-information-default)",
2204
+ borderColor: "var(--color-border-information)",
2205
+ color: "var(--color-text-information)",
2432
2206
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
2433
2207
  closeButton: {
2434
- hoverBackground: "#212c64",
2208
+ hoverBackground: "var(--color-background-information-hover)",
2435
2209
  focusRing: {
2436
- color: "#608ef6",
2210
+ color: "var(--color-border-information)",
2437
2211
  shadow: "0 0 0 0 #00000000"
2438
2212
  }
2439
2213
  },
2440
2214
  outlined: {
2441
- color: "#a6cdfd",
2442
- borderColor: "#608ef6"
2215
+ color: "var(--color-text-information)",
2216
+ borderColor: "var(--color-border-information)"
2443
2217
  },
2444
2218
  simple: {
2445
- color: "#a6cdfd"
2219
+ color: "var(--color-text-information)"
2446
2220
  }
2447
2221
  },
2448
2222
  success: {
2449
- background: "#032429",
2450
- borderColor: "#1ca673",
2451
- color: "#83d895",
2223
+ background: "var(--color-background-success-default)",
2224
+ borderColor: "var(--color-border-success)",
2225
+ color: "var(--color-text-success)",
2452
2226
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
2453
2227
  closeButton: {
2454
- hoverBackground: "#073734",
2228
+ hoverBackground: "var(--color-background-success-hover)",
2455
2229
  focusRing: {
2456
- color: "#1ca673",
2230
+ color: "var(--color-border-success)",
2457
2231
  shadow: "0 0 0 0 #00000000"
2458
2232
  }
2459
2233
  },
2460
2234
  outlined: {
2461
- color: "#83d895",
2462
- borderColor: "#1ca673"
2235
+ color: "var(--color-text-success)",
2236
+ borderColor: "var(--color-border-success)"
2463
2237
  },
2464
2238
  simple: {
2465
- color: "#83d895"
2239
+ color: "var(--color-text-success)"
2466
2240
  }
2467
2241
  },
2468
2242
  warn: {
2469
- background: "#420e0d",
2470
- borderColor: "#da772e",
2471
- color: "#f6b981",
2243
+ background: "var(--color-background-warning-default)",
2244
+ borderColor: "var(--color-border-warning)",
2245
+ color: "var(--color-text-warning-default)",
2472
2246
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
2473
2247
  closeButton: {
2474
- hoverBackground: "#5d1712",
2248
+ hoverBackground: "var(--color-background-warning-hover)",
2475
2249
  focusRing: {
2476
- color: "#da772e",
2250
+ color: "var(--color-border-warning)",
2477
2251
  shadow: "0 0 0 0 #00000000"
2478
2252
  }
2479
2253
  },
2480
2254
  outlined: {
2481
- color: "#f6b981",
2482
- borderColor: "#da772e"
2255
+ color: "var(--color-text-warning-default)",
2256
+ borderColor: "var(--color-border-warning)"
2483
2257
  },
2484
2258
  simple: {
2485
- color: "#f6b981"
2259
+ color: "var(--color-text-warning-default)"
2486
2260
  }
2487
2261
  },
2488
2262
  error: {
2489
- background: "#440223",
2490
- borderColor: "#ed6362",
2491
- color: "#fab6ad",
2263
+ background: "var(--color-background-danger-default)",
2264
+ borderColor: "var(--color-border-danger)",
2265
+ color: "var(--color-text-danger)",
2492
2266
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
2493
2267
  closeButton: {
2494
- hoverBackground: "#630d2e",
2268
+ hoverBackground: "var(--color-background-danger-hover)",
2495
2269
  focusRing: {
2496
- color: "#ed6362",
2270
+ color: "var(--color-border-danger)",
2497
2271
  shadow: "0 0 0 0 #00000000"
2498
2272
  }
2499
2273
  },
2500
2274
  outlined: {
2501
- color: "#fab6ad",
2502
- borderColor: "#ed6362"
2275
+ color: "var(--color-text-danger)",
2276
+ borderColor: "var(--color-border-danger)"
2503
2277
  },
2504
2278
  simple: {
2505
- color: "#fab6ad"
2279
+ color: "var(--color-text-danger)"
2506
2280
  }
2507
2281
  },
2508
2282
  secondary: {
2509
- background: "#1f1f21",
2510
- borderColor: "#7e8188",
2511
- color: "#e2e3e4",
2283
+ background: "var(--color-background-accent-gray-subtler-default)",
2284
+ borderColor: "var(--color-border-accent-gray)",
2285
+ color: "var(--color-text-default)",
2512
2286
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
2513
2287
  closeButton: {
2514
- hoverBackground: "#242528",
2288
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
2515
2289
  focusRing: {
2516
- color: "#7e8188",
2290
+ color: "var(--color-border-accent-gray)",
2517
2291
  shadow: "0 0 0 0 #00000000"
2518
2292
  }
2519
2293
  },
2520
2294
  outlined: {
2521
- color: "#e2e3e4",
2522
- borderColor: "#7e8188"
2295
+ color: "var(--color-text-default)",
2296
+ borderColor: "var(--color-border-accent-gray)"
2523
2297
  },
2524
2298
  simple: {
2525
- color: "#e2e3e4"
2299
+ color: "var(--color-text-default)"
2526
2300
  }
2527
2301
  },
2528
2302
  contrast: {
2529
- background: "#e2e3e4",
2530
- borderColor: "#e2e3e4",
2531
- color: "#1f1f21",
2303
+ background: "var(--color-background-accent-gray-boldest-default)",
2304
+ borderColor: "var(--color-icon-default)",
2305
+ color: "var(--color-text-inverse)",
2532
2306
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
2533
2307
  closeButton: {
2534
- hoverBackground: "#cecfd2",
2308
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
2535
2309
  focusRing: {
2536
- color: "#18191a",
2310
+ color: "var(--color-border-inverse)",
2537
2311
  shadow: "0 0 0 0 #00000000"
2538
2312
  }
2539
2313
  },
2540
2314
  outlined: {
2541
- color: "#e2e3e4",
2542
- borderColor: "#e2e3e4"
2315
+ color: "var(--color-text-default)",
2316
+ borderColor: "var(--color-background-accent-gray-boldest-default)"
2543
2317
  },
2544
2318
  simple: {
2545
- color: "#e2e3e4"
2319
+ color: "var(--color-text-default)"
2546
2320
  }
2547
2321
  }
2548
2322
  }
@@ -2550,10 +2324,23 @@ const BCCPreset = definePreset(Aura, {
2550
2324
  },
2551
2325
  multiselect: {
2552
2326
  root: {
2327
+ background: "var(--color-elevation-surface-default)",
2328
+ disabledBackground: "var(--color-background-disabled-default)",
2329
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2330
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
2331
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
2332
+ borderColor: "var(--color-border-default)",
2333
+ hoverBorderColor: "var(--color-border-input)",
2334
+ focusBorderColor: "var(--color-border-focused)",
2335
+ invalidBorderColor: "var(--color-border-danger)",
2336
+ color: "var(--color-text-default)",
2337
+ disabledColor: "var(--color-text-disabled)",
2338
+ placeholderColor: "var(--color-text-subtlest)",
2339
+ invalidPlaceholderColor: "var(--color-text-danger)",
2553
2340
  shadow: "{form.field.shadow}",
2554
- paddingX: "0.75rem",
2555
- paddingY: "0.25rem",
2556
- borderRadius: "0.375rem",
2341
+ paddingX: "var(--space-150)",
2342
+ paddingY: "var(--space-50)",
2343
+ borderRadius: "var(--border-radius-sm)",
2557
2344
  focusRing: {
2558
2345
  width: "{form.field.focus.ring.width}",
2559
2346
  style: "{form.field.focus.ring.style}",
@@ -2563,260 +2350,152 @@ const BCCPreset = definePreset(Aura, {
2563
2350
  },
2564
2351
  transitionDuration: "{form.field.transition.duration}",
2565
2352
  sm: {
2566
- fontSize: "0.875rem",
2567
- paddingX: "0.75rem",
2568
- paddingY: "0.25rem",
2569
- minHeight: "2rem"
2353
+ fontSize: "var(--font-size-sm)",
2354
+ paddingX: "var(--space-150)",
2355
+ paddingY: "var(--space-50)",
2356
+ minHeight: "var(--space-400)"
2570
2357
  },
2571
2358
  lg: {
2572
- fontSize: "1rem",
2573
- paddingX: "0.75rem",
2574
- paddingY: "0.5rem",
2575
- minHeight: "3rem"
2359
+ fontSize: "var(--font-size-md)",
2360
+ paddingX: "var(--space-150)",
2361
+ paddingY: "var(--space-100)",
2362
+ minHeight: "var(--space-600)"
2576
2363
  },
2577
- minHeight: "2.5rem"
2578
- },
2579
- colorScheme: {
2580
- light: {
2581
- root: {
2582
- background: "#ffffff",
2583
- disabledBackground: "rgba(5, 21, 36, 0.06)",
2584
- filledBackground: "#f8f8f8",
2585
- filledHoverBackground: "#f8f8f8",
2586
- filledFocusBackground: "#f8f8f8",
2587
- borderColor: "rgba(11, 18, 14, 0.14)",
2588
- hoverBorderColor: "#8c8f97",
2589
- focusBorderColor: "#505258",
2590
- invalidBorderColor: "#ca414e",
2591
- color: "#292a2e",
2592
- disabledColor: "rgba(8, 15, 33, 0.29)",
2593
- placeholderColor: "#6b6e76",
2594
- invalidPlaceholderColor: "#811436"
2595
- },
2596
- dropdown: {
2597
- color: "#6b6e76"
2598
- },
2599
- overlay: {
2600
- background: "#ffffff",
2601
- borderColor: "rgba(11, 18, 14, 0.14)"
2602
- },
2603
- option: {
2604
- focusBackground: "#dddee1",
2605
- selectedBackground: "#f0fcfa",
2606
- selectedFocusBackground: "#d2eeeb",
2607
- color: "#505258",
2608
- focusColor: "#292a2e",
2609
- selectedColor: "#0c625c",
2610
- selectedFocusColor: "#0c625c"
2611
- },
2612
- optionGroup: {
2613
- background: "#ffffff",
2614
- color: "#6b6e76"
2615
- },
2616
- clearIcon: {
2617
- color: "#6b6e76"
2618
- }
2619
- },
2620
- dark: {
2621
- root: {
2622
- background: "#1f1f21",
2623
- disabledBackground: "rgba(227, 228, 242, 0.12)",
2624
- filledBackground: "#1f1f21",
2625
- filledHoverBackground: "#1f1f21",
2626
- filledFocusBackground: "#1f1f21",
2627
- borderColor: "rgba(229, 233, 246, 0.25)",
2628
- hoverBorderColor: "#63666b",
2629
- focusBorderColor: "#a9abaf",
2630
- invalidBorderColor: "#ed6362",
2631
- color: "#e2e3e4",
2632
- disabledColor: "rgba(229, 233, 246, 0.25)",
2633
- placeholderColor: "#96999e",
2634
- invalidPlaceholderColor: "#fab6ad"
2635
- },
2636
- dropdown: {
2637
- color: "#96999e"
2638
- },
2639
- overlay: {
2640
- background: "#1f1f21",
2641
- borderColor: "rgba(229, 233, 246, 0.25)"
2642
- },
2643
- option: {
2644
- focusBackground: "#303134",
2645
- selectedBackground: "#012320",
2646
- selectedFocusBackground: "#0b3633",
2647
- color: "#a9abaf",
2648
- focusColor: "#e2e3e4",
2649
- selectedColor: "#6fb5ad",
2650
- selectedFocusColor: "#6fb5ad"
2651
- },
2652
- optionGroup: {
2653
- background: "#1f1f21",
2654
- color: "#96999e"
2655
- },
2656
- clearIcon: {
2657
- color: "#96999e"
2658
- }
2659
- }
2364
+ minHeight: "var(--space-500)"
2660
2365
  },
2661
2366
  dropdown: {
2662
- width: "2.5rem"
2367
+ width: "var(--space-500)",
2368
+ color: "var(--color-icon-subtlest)"
2663
2369
  },
2664
2370
  overlay: {
2665
- borderRadius: "0.375rem",
2371
+ background: "var(--color-elevation-surface-default)",
2372
+ borderColor: "var(--color-border-default)",
2373
+ borderRadius: "var(--border-radius-sm)",
2666
2374
  color: "{overlay.select.color}",
2667
2375
  shadow: "{overlay.select.shadow}"
2668
2376
  },
2669
2377
  list: {
2670
- padding: "0.5rem",
2671
- gap: "0.125rem",
2378
+ padding: "var(--space-100)",
2379
+ gap: "var(--space-25)",
2672
2380
  header: {
2673
- padding: "0.5rem"
2381
+ padding: "var(--space-100)"
2674
2382
  }
2675
2383
  },
2676
2384
  option: {
2677
- padding: "0.5rem 0.75rem",
2678
- borderRadius: "0.25rem",
2679
- gap: "0.5rem"
2385
+ focusBackground: "var(--color-background-accent-gray-subtle-hover)",
2386
+ selectedBackground: "var(--color-background-brand-subtlest-default)",
2387
+ selectedFocusBackground: "var(--color-background-brand-subtler-default)",
2388
+ color: "var(--color-text-subtle)",
2389
+ focusColor: "var(--color-text-default)",
2390
+ selectedColor: "var(--color-text-selected)",
2391
+ selectedFocusColor: "var(--color-text-selected)",
2392
+ padding: "var(--space-100) var(--space-150)",
2393
+ borderRadius: "var(--border-radius-xs)",
2394
+ gap: "var(--space-100)"
2680
2395
  },
2681
2396
  optionGroup: {
2397
+ background: "var(--color-elevation-surface-default)",
2398
+ color: "var(--color-text-subtlest)",
2682
2399
  fontWeight: "{list.option.group.font.weight}",
2683
- padding: "0.5rem 0.75rem"
2400
+ padding: "var(--space-100) var(--space-150)"
2684
2401
  },
2685
2402
  chip: {
2686
- borderRadius: "0.25rem"
2403
+ borderRadius: "var(--border-radius-xs)"
2404
+ },
2405
+ clearIcon: {
2406
+ color: "var(--color-icon-subtlest)"
2687
2407
  },
2688
2408
  emptyMessage: {
2689
- padding: "0.5rem 0.75rem"
2409
+ padding: "var(--space-100) var(--space-150)"
2690
2410
  }
2691
2411
  },
2692
2412
  progressbar: {
2693
2413
  root: {
2694
- borderRadius: "0.375rem",
2695
- height: "1.25rem"
2414
+ background: "var(--color-background-accent-gray-default)",
2415
+ borderRadius: "var(--border-radius-sm)",
2416
+ height: "var(--space-250)"
2696
2417
  },
2697
- colorScheme: {
2698
- light: {
2699
- root: {
2700
- background: "#dddee1"
2701
- },
2702
- value: {
2703
- background: "#0c625c"
2704
- },
2705
- label: {
2706
- color: "#ffffff"
2707
- }
2708
- },
2709
- dark: {
2710
- root: {
2711
- background: "#303134"
2712
- },
2713
- value: {
2714
- background: "#6fb5ad"
2715
- },
2716
- label: {
2717
- color: "#1f1f21"
2718
- }
2719
- }
2418
+ value: {
2419
+ background: "var(--color-background-brand-bolder-default)"
2720
2420
  },
2721
2421
  label: {
2722
- fontSize: "0.75rem",
2723
- fontWeight: "500"
2422
+ color: "var(--color-text-inverse)",
2423
+ fontSize: "var(--font-size-xs)",
2424
+ fontWeight: "var(--font-weight-medium)"
2724
2425
  }
2725
2426
  },
2726
2427
  radiobutton: {
2727
2428
  root: {
2728
- width: "1.25rem",
2729
- height: "1.25rem",
2429
+ width: "var(--space-250)",
2430
+ height: "var(--space-250)",
2431
+ background: "var(--color-elevation-surface-default)",
2432
+ checkedBackground: "var(--color-background-brand-bolder-default)",
2433
+ checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
2434
+ disabledBackground: "var(--color-background-disabled-default)",
2435
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2436
+ borderColor: "var(--color-border-default)",
2437
+ hoverBorderColor: "var(--color-border-bold)",
2438
+ focusBorderColor: "var(--color-border-focused)",
2439
+ checkedBorderColor: "var(--color-background-brand-bolder-default)",
2440
+ checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
2441
+ checkedFocusBorderColor: "var(--color-border-focused)",
2442
+ checkedDisabledBorderColor: "var(--color-border-disabled)",
2443
+ invalidBorderColor: "var(--color-border-danger)",
2730
2444
  shadow: "{form.field.shadow}",
2731
2445
  focusRing: {
2732
2446
  width: "{focus.ring.width}",
2733
2447
  style: "{focus.ring.style}",
2448
+ color: "var(--color-border-focused)",
2734
2449
  offset: "{focus.ring.offset}",
2735
2450
  shadow: "{focus.ring.shadow}"
2736
2451
  },
2737
2452
  transitionDuration: "{form.field.transition.duration}",
2738
2453
  sm: {
2739
- width: "1rem",
2740
- height: "1rem"
2454
+ width: "var(--space-200)",
2455
+ height: "var(--space-200)"
2741
2456
  },
2742
2457
  lg: {
2743
- width: "1.5rem",
2744
- height: "1.5rem"
2745
- }
2746
- },
2747
- colorScheme: {
2748
- light: {
2749
- root: {
2750
- background: "#ffffff",
2751
- checkedBackground: "#0c625c",
2752
- checkedHoverBackground: "#014d49",
2753
- disabledBackground: "rgba(5, 21, 36, 0.06)",
2754
- filledBackground: "#f8f8f8",
2755
- borderColor: "rgba(11, 18, 14, 0.14)",
2756
- hoverBorderColor: "#7d818a",
2757
- focusBorderColor: "#505258",
2758
- checkedBorderColor: "#0c625c",
2759
- checkedHoverBorderColor: "#014d49",
2760
- checkedFocusBorderColor: "#505258",
2761
- checkedDisabledBorderColor: "rgba(5, 21, 36, 0.06)",
2762
- invalidBorderColor: "#ca414e",
2763
- focusRing: {
2764
- color: "#505258"
2765
- }
2766
- },
2767
- icon: {
2768
- checkedColor: "#ffffff",
2769
- checkedHoverColor: "#ffffff",
2770
- disabledColor: "rgba(8, 15, 33, 0.29)"
2771
- }
2772
- },
2773
- dark: {
2774
- root: {
2775
- background: "#1f1f21",
2776
- checkedBackground: "#6fb5ad",
2777
- checkedHoverBackground: "#a0cec8",
2778
- disabledBackground: "rgba(227, 228, 242, 0.12)",
2779
- filledBackground: "#1f1f21",
2780
- borderColor: "rgba(229, 233, 246, 0.25)",
2781
- hoverBorderColor: "#7e8188",
2782
- focusBorderColor: "#a9abaf",
2783
- checkedBorderColor: "#6fb5ad",
2784
- checkedHoverBorderColor: "#a0cec8",
2785
- checkedFocusBorderColor: "#a9abaf",
2786
- checkedDisabledBorderColor: "rgba(206, 206, 217, 0.07)",
2787
- invalidBorderColor: "#ed6362",
2788
- focusRing: {
2789
- color: "#a9abaf"
2790
- }
2791
- },
2792
- icon: {
2793
- checkedColor: "#1f1f21",
2794
- checkedHoverColor: "#1f1f21",
2795
- disabledColor: "rgba(229, 233, 246, 0.25)"
2796
- }
2458
+ width: "var(--space-300)",
2459
+ height: "var(--space-300)"
2797
2460
  }
2798
2461
  },
2799
2462
  icon: {
2800
- size: "0.75rem",
2463
+ size: "var(--space-150)",
2464
+ checkedColor: "var(--color-icon-inverse)",
2465
+ checkedHoverColor: "var(--color-icon-inverse)",
2466
+ disabledColor: "var(--color-icon-disabled)",
2801
2467
  sm: {
2802
- size: "0.5rem",
2468
+ size: "var(--space-100)",
2803
2469
  borderRadius: "9999px"
2804
2470
  },
2805
2471
  lg: {
2806
- size: "1rem",
2472
+ size: "var(--space-200)",
2807
2473
  borderRadius: "9999px"
2808
2474
  },
2809
2475
  borderRadius: "9999px"
2810
2476
  },
2811
- gap: "0.5rem",
2477
+ gap: "var(--space-100)",
2812
2478
  borderRadius: "9999px"
2813
2479
  },
2814
2480
  select: {
2815
2481
  root: {
2482
+ background: "var(--color-elevation-surface-default)",
2483
+ disabledBackground: "var(--color-background-disabled-default)",
2484
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2485
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
2486
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
2487
+ borderColor: "var(--color-background-accent-gray-hover)",
2488
+ hoverBorderColor: "var(--color-background-accent-gray-pressed)",
2489
+ focusBorderColor: "var(--color-border-focused)",
2490
+ invalidBorderColor: "var(--color-border-danger)",
2491
+ color: "var(--color-text-default)",
2492
+ disabledColor: "var(--color-text-disabled)",
2493
+ placeholderColor: "var(--color-text-subtlest)",
2494
+ invalidPlaceholderColor: "var(--color-text-danger)",
2816
2495
  shadow: "{form.field.shadow}",
2817
- paddingX: "0.75rem",
2818
- paddingY: "0.25rem",
2819
- borderRadius: "0.375rem",
2496
+ paddingX: "var(--space-150)",
2497
+ paddingY: "var(--space-50)",
2498
+ borderRadius: "var(--border-radius-sm)",
2820
2499
  focusRing: {
2821
2500
  width: "{form.field.focus.ring.width}",
2822
2501
  style: "{form.field.focus.ring.style}",
@@ -2826,152 +2505,80 @@ const BCCPreset = definePreset(Aura, {
2826
2505
  },
2827
2506
  transitionDuration: "{form.field.transition.duration}",
2828
2507
  sm: {
2829
- fontSize: "0.875rem",
2830
- paddingX: "0.75rem",
2831
- paddingY: "0.25rem",
2832
- minHeight: "2rem"
2508
+ fontSize: "var(--font-size-sm)",
2509
+ paddingX: "var(--space-150)",
2510
+ paddingY: "var(--space-50)",
2511
+ minHeight: "var(--space-400)"
2833
2512
  },
2834
2513
  lg: {
2835
- fontSize: "1rem",
2836
- paddingX: "0.75rem",
2837
- paddingY: "0.5rem",
2838
- minHeight: "3rem"
2839
- },
2840
- minHeight: "2.5rem"
2841
- },
2842
- colorScheme: {
2843
- light: {
2844
- root: {
2845
- background: "#ffffff",
2846
- disabledBackground: "rgba(5, 21, 36, 0.06)",
2847
- filledBackground: "#f8f8f8",
2848
- filledHoverBackground: "#f8f8f8",
2849
- filledFocusBackground: "#f8f8f8",
2850
- borderColor: "#b7b9be",
2851
- hoverBorderColor: "#8c8f97",
2852
- focusBorderColor: "#505258",
2853
- invalidBorderColor: "#ca414e",
2854
- color: "#292a2e",
2855
- disabledColor: "rgba(8, 15, 33, 0.29)",
2856
- placeholderColor: "#6b6e76",
2857
- invalidPlaceholderColor: "#811436"
2858
- },
2859
- dropdown: {
2860
- color: "#6b6e76"
2861
- },
2862
- overlay: {
2863
- background: "#ffffff",
2864
- borderColor: "rgba(11, 18, 14, 0.14)"
2865
- },
2866
- option: {
2867
- focusBackground: "#dddee1",
2868
- selectedBackground: "#f0fcfa",
2869
- selectedFocusBackground: "#d2eeeb",
2870
- color: "#505258",
2871
- focusColor: "#292a2e",
2872
- selectedColor: "#0c625c",
2873
- selectedFocusColor: "#0c625c"
2874
- },
2875
- optionGroup: {
2876
- background: "#ffffff",
2877
- color: "#6b6e76"
2878
- },
2879
- clearIcon: {
2880
- color: "#505258"
2881
- },
2882
- checkmark: {
2883
- color: "#505258"
2884
- }
2514
+ fontSize: "var(--font-size-md)",
2515
+ paddingX: "var(--space-150)",
2516
+ paddingY: "var(--space-100)",
2517
+ minHeight: "var(--space-600)"
2885
2518
  },
2886
- dark: {
2887
- root: {
2888
- background: "#1f1f21",
2889
- disabledBackground: "rgba(227, 228, 242, 0.12)",
2890
- filledBackground: "#1f1f21",
2891
- filledHoverBackground: "#1f1f21",
2892
- filledFocusBackground: "#1f1f21",
2893
- borderColor: "#4b4d51",
2894
- hoverBorderColor: "#63666b",
2895
- focusBorderColor: "#a9abaf",
2896
- invalidBorderColor: "#ed6362",
2897
- color: "#e2e3e4",
2898
- disabledColor: "rgba(229, 233, 246, 0.25)",
2899
- placeholderColor: "#96999e",
2900
- invalidPlaceholderColor: "#fab6ad"
2901
- },
2902
- dropdown: {
2903
- color: "#96999e"
2904
- },
2905
- overlay: {
2906
- background: "#1f1f21",
2907
- borderColor: "rgba(229, 233, 246, 0.25)"
2908
- },
2909
- option: {
2910
- focusBackground: "#303134",
2911
- selectedBackground: "#012320",
2912
- selectedFocusBackground: "#0b3633",
2913
- color: "#a9abaf",
2914
- focusColor: "#e2e3e4",
2915
- selectedColor: "#6fb5ad",
2916
- selectedFocusColor: "#6fb5ad"
2917
- },
2918
- optionGroup: {
2919
- background: "#1f1f21",
2920
- color: "#96999e"
2921
- },
2922
- clearIcon: {
2923
- color: "#a9abaf"
2924
- },
2925
- checkmark: {
2926
- color: "#a9abaf"
2927
- }
2928
- }
2519
+ minHeight: "var(--space-500)"
2929
2520
  },
2930
2521
  dropdown: {
2931
- width: "2.5rem"
2522
+ width: "var(--space-500)",
2523
+ color: "var(--color-icon-subtlest)"
2932
2524
  },
2933
2525
  overlay: {
2934
- borderRadius: "0.375rem",
2526
+ background: "var(--color-elevation-surface-default)",
2527
+ borderColor: "var(--color-border-default)",
2528
+ borderRadius: "var(--border-radius-sm)",
2935
2529
  color: "{overlay.select.color}",
2936
2530
  shadow: "{overlay.select.shadow}"
2937
2531
  },
2938
2532
  list: {
2939
- padding: "0.5rem",
2940
- gap: "0.125rem",
2533
+ padding: "var(--space-100)",
2534
+ gap: "var(--space-25)",
2941
2535
  header: {
2942
- padding: "0.5rem"
2536
+ padding: "var(--space-100)"
2943
2537
  }
2944
2538
  },
2945
2539
  option: {
2946
- padding: "0.5rem 0.75rem",
2947
- borderRadius: "0.25rem",
2948
- gap: "0.5rem"
2540
+ focusBackground: "var(--color-background-accent-gray-subtle-hover)",
2541
+ selectedBackground: "var(--color-background-brand-subtlest-default)",
2542
+ selectedFocusBackground: "var(--color-background-brand-subtler-default)",
2543
+ color: "var(--color-text-subtle)",
2544
+ focusColor: "var(--color-text-default)",
2545
+ selectedColor: "var(--color-text-selected)",
2546
+ selectedFocusColor: "var(--color-text-selected)",
2547
+ padding: "var(--space-100) var(--space-150)",
2548
+ borderRadius: "var(--border-radius-xs)",
2549
+ gap: "var(--space-100)"
2949
2550
  },
2950
2551
  optionGroup: {
2552
+ background: "var(--color-elevation-surface-default)",
2553
+ color: "var(--color-text-subtlest)",
2951
2554
  fontWeight: "{list.option.group.font.weight}",
2952
- padding: "0.5rem 0.75rem"
2555
+ padding: "var(--space-100) var(--space-150)"
2556
+ },
2557
+ clearIcon: {
2558
+ color: "var(--color-icon-subtle)"
2953
2559
  },
2954
2560
  checkmark: {
2955
- gutterStart: "-0.375rem",
2956
- gutterEnd: "0.375rem"
2561
+ color: "var(--color-text-subtle)",
2562
+ gutterStart: "var(--space-negative-75)",
2563
+ gutterEnd: "var(--space-75)"
2957
2564
  },
2958
2565
  emptyMessage: {
2959
- padding: "0.5rem 0.75rem"
2566
+ padding: "var(--space-100) var(--space-150)"
2960
2567
  }
2961
2568
  },
2962
2569
  selectbutton: {
2963
2570
  root: {
2964
- borderRadius: "0.5rem"
2571
+ borderRadius: "var(--border-radius-md)"
2965
2572
  },
2966
2573
  colorScheme: {
2967
2574
  light: {
2968
2575
  root: {
2969
- invalidBorderColor: "#ca414e"
2576
+ invalidBorderColor: "var(--color-border-danger)"
2970
2577
  }
2971
2578
  },
2972
2579
  dark: {
2973
2580
  root: {
2974
- invalidBorderColor: "#ed6362"
2581
+ invalidBorderColor: "var(--color-border-danger)"
2975
2582
  }
2976
2583
  }
2977
2584
  }
@@ -2982,82 +2589,40 @@ const BCCPreset = definePreset(Aura, {
2982
2589
  },
2983
2590
  tablist: {
2984
2591
  borderWidth: "0 0 1px 0",
2985
- background: "transparent"
2986
- },
2987
- colorScheme: {
2988
- light: {
2989
- tablist: {
2990
- borderColor: "rgba(11, 18, 14, 0.14)"
2991
- },
2992
- tab: {
2993
- borderColor: "rgba(11, 18, 14, 0.14)",
2994
- hoverBorderColor: "rgba(11, 18, 14, 0.14)",
2995
- activeBorderColor: "#0c625c",
2996
- color: "#6b6e76",
2997
- hoverColor: "#292a2e",
2998
- activeColor: "#0c625c",
2999
- focusRing: {
3000
- color: "#505258"
3001
- }
3002
- },
3003
- tabpanel: {
3004
- color: "#292a2e",
3005
- focusRing: {
3006
- color: "#505258"
3007
- }
3008
- },
3009
- navButton: {
3010
- shadow: "0 0 10px 50px rgba(255, 255, 255, 0.6)"
3011
- }
3012
- },
3013
- dark: {
3014
- tablist: {
3015
- borderColor: "rgba(229, 233, 246, 0.25)"
3016
- },
3017
- tab: {
3018
- borderColor: "rgba(229, 233, 246, 0.25)",
3019
- hoverBorderColor: "rgba(229, 233, 246, 0.25)",
3020
- activeBorderColor: "#6fb5ad",
3021
- color: "#96999e",
3022
- hoverColor: "#e2e3e4",
3023
- activeColor: "#6fb5ad",
3024
- focusRing: {
3025
- color: "#a9abaf"
3026
- }
3027
- },
3028
- tabpanel: {
3029
- color: "#e2e3e4",
3030
- focusRing: {
3031
- color: "#a9abaf"
3032
- }
3033
- },
3034
- navButton: {
3035
- shadow: "0 0 10px 50px #0F172A80"
3036
- }
3037
- }
2592
+ background: "transparent",
2593
+ borderColor: "var(--color-border-default)"
3038
2594
  },
3039
2595
  tab: {
3040
2596
  background: "transparent",
3041
2597
  hoverBackground: "transparent",
3042
2598
  activeBackground: "transparent",
3043
2599
  borderWidth: "0 0 1px 0",
3044
- padding: "0.75rem",
3045
- fontWeight: "500",
2600
+ borderColor: "var(--color-border-default)",
2601
+ hoverBorderColor: "var(--color-border-default)",
2602
+ activeBorderColor: "var(--color-border-selected)",
2603
+ color: "var(--color-text-subtlest)",
2604
+ hoverColor: "var(--color-text-default)",
2605
+ activeColor: "var(--color-text-selected)",
2606
+ padding: "var(--space-150)",
2607
+ fontWeight: "var(--font-weight-medium)",
3046
2608
  margin: "0 0 -1px 0",
3047
- gap: "0.5rem",
2609
+ gap: "var(--space-100)",
3048
2610
  focusRing: {
3049
2611
  width: "{focus.ring.width}",
3050
2612
  style: "{focus.ring.style}",
2613
+ color: "var(--color-border-focused)",
3051
2614
  offset: "-1px",
3052
2615
  shadow: "{focus.ring.shadow}"
3053
2616
  }
3054
2617
  },
3055
2618
  tabpanel: {
3056
2619
  background: "transparent",
3057
- padding: "1rem",
2620
+ color: "var(--color-text-default)",
2621
+ padding: "var(--space-200)",
3058
2622
  focusRing: {
3059
2623
  width: "{focus.ring.width}",
3060
2624
  style: "{focus.ring.style}",
2625
+ color: "var(--color-border-focused)",
3061
2626
  offset: "{focus.ring.offset}",
3062
2627
  shadow: "{focus.ring.shadow}"
3063
2628
  }
@@ -3066,7 +2631,7 @@ const BCCPreset = definePreset(Aura, {
3066
2631
  background: "{content.background}",
3067
2632
  color: "{text.muted.color}",
3068
2633
  hoverColor: "{text.color}",
3069
- width: "2.5rem",
2634
+ width: "var(--space-500)",
3070
2635
  focusRing: {
3071
2636
  width: "{focus.ring.width}",
3072
2637
  style: "{focus.ring.style}",
@@ -3076,110 +2641,117 @@ const BCCPreset = definePreset(Aura, {
3076
2641
  }
3077
2642
  },
3078
2643
  activeBar: {
3079
- height: "0.125rem",
2644
+ height: "var(--space-25)",
3080
2645
  bottom: "-1px",
3081
2646
  background: "{primary.color}"
2647
+ },
2648
+ colorScheme: {
2649
+ light: {
2650
+ navButton: {
2651
+ shadow: "0 0 10px 50px rgba(255, 255, 255, 0.6)"
2652
+ }
2653
+ },
2654
+ dark: {
2655
+ navButton: {
2656
+ shadow: "0 0 10px 50px #0F172A80"
2657
+ }
2658
+ }
3082
2659
  }
3083
2660
  },
3084
2661
  tag: {
3085
2662
  root: {
3086
- fontSize: "0.875rem",
3087
- fontWeight: "400",
3088
- padding: "0.5rem 0.25rem",
3089
- gap: "0.25rem",
3090
- borderRadius: "0.375rem",
3091
- roundedBorderRadius: "999px"
2663
+ fontSize: "var(--font-size-sm)",
2664
+ fontWeight: "var(--font-weight-regular)",
2665
+ padding: "var(--space-50) var(--space-100)",
2666
+ gap: "var(--space-50)",
2667
+ borderRadius: "var(--border-radius-sm)",
2668
+ roundedBorderRadius: "var(--border-radius-full)"
3092
2669
  },
3093
2670
  icon: {
3094
- size: "1rem"
2671
+ size: "var(--icon-size-xs)"
3095
2672
  },
3096
2673
  colorScheme: {
3097
2674
  light: {
3098
2675
  primary: {
3099
- background: "#d2eeeb",
3100
- color: "#0b3633"
2676
+ background: "var(--color-background-brand-subtler-default)",
2677
+ color: "var(--color-text-brand-bold)"
3101
2678
  },
3102
2679
  secondary: {
3103
- background: "#f0f1f2",
3104
- color: "#1e1f21"
2680
+ background: "var(--color-background-accent-gray-subtle-default)",
2681
+ color: "var(--color-text-accent-gray-bold)"
3105
2682
  },
3106
2683
  success: {
3107
- background: "#cbf3c9",
3108
- color: "#073734"
2684
+ background: "var(--color-background-accent-green-subtler-default)",
2685
+ color: "var(--color-text-accent-green-bold)"
3109
2686
  },
3110
2687
  info: {
3111
- background: "#d9ecff",
3112
- color: "#212c64"
2688
+ background: "var(--color-background-accent-blue-subtler-default)",
2689
+ color: "var(--color-text-accent-blue-bold)"
3113
2690
  },
3114
2691
  warn: {
3115
- background: "#fee3c1",
3116
- color: "#5d1712"
2692
+ background: "var(--color-background-accent-orange-subtler-default)",
2693
+ color: "var(--color-text-accent-orange-bold)"
3117
2694
  },
3118
2695
  danger: {
3119
- background: "#fee2dd",
3120
- color: "#630d2e"
2696
+ background: "var(--color-background-accent-red-subtler-default)",
2697
+ color: "var(--color-text-accent-red-bold)"
3121
2698
  },
3122
2699
  contrast: {
3123
- background: "#3b3d42",
3124
- color: "#ffffff"
2700
+ background: "var(--color-background-accent-gray-bolder-default)",
2701
+ color: "var(--color-text-inverse)"
3125
2702
  }
3126
2703
  },
3127
2704
  dark: {
3128
2705
  primary: {
3129
- background: "#0b3633",
3130
- color: "#a0cec8"
2706
+ background: "var(--color-background-brand-subtler-default)",
2707
+ color: "var(--color-text-brand-bold)"
3131
2708
  },
3132
2709
  secondary: {
3133
- background: "#242528",
3134
- color: "#e2e3e4"
2710
+ background: "var(--color-background-accent-gray-subtle-default)",
2711
+ color: "var(--color-text-accent-gray-bold)"
3135
2712
  },
3136
2713
  success: {
3137
- background: "#073734",
3138
- color: "#cbf3c9"
2714
+ background: "var(--color-background-accent-green-subtler-default)",
2715
+ color: "var(--color-text-accent-green-bold)"
3139
2716
  },
3140
2717
  info: {
3141
- background: "#212c64",
3142
- color: "#d9ecff"
2718
+ background: "var(--color-background-accent-blue-subtler-default)",
2719
+ color: "var(--color-text-accent-blue-bold)"
3143
2720
  },
3144
2721
  warn: {
3145
- background: "#5d1712",
3146
- color: "#fee3c1"
2722
+ background: "var(--color-background-accent-orange-subtler-default)",
2723
+ color: "var(--color-text-accent-orange-bold)"
3147
2724
  },
3148
2725
  danger: {
3149
- background: "#630d2e",
3150
- color: "#fee2dd"
2726
+ background: "var(--color-background-accent-red-subtler-default)",
2727
+ color: "var(--color-text-accent-red-bold)"
3151
2728
  },
3152
2729
  contrast: {
3153
- background: "#bfc1c4",
3154
- color: "#1f1f21"
2730
+ background: "var(--color-background-accent-gray-bolder-default)",
2731
+ color: "var(--color-text-inverse)"
3155
2732
  }
3156
2733
  }
3157
- },
3158
- sm: {
3159
- padding: "0.5rem 0.125rem",
3160
- font: {
3161
- size: "0.75rem"
3162
- },
3163
- icon: {
3164
- size: "1rem"
3165
- }
3166
- },
3167
- lg: {
3168
- padding: "0.5rem 0.25rem",
3169
- font: {
3170
- size: "1rem"
3171
- },
3172
- icon: {
3173
- size: "1.5rem"
3174
- }
3175
2734
  }
3176
2735
  },
3177
2736
  textarea: {
3178
2737
  root: {
2738
+ background: "var(--color-elevation-surface-default)",
2739
+ disabledBackground: "var(--color-background-disabled-default)",
2740
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2741
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
2742
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
2743
+ borderColor: "var(--color-border-default)",
2744
+ hoverBorderColor: "var(--color-border-bold)",
2745
+ focusBorderColor: "var(--color-border-focused)",
2746
+ invalidBorderColor: "var(--color-border-danger)",
2747
+ color: "var(--color-text-default)",
2748
+ disabledColor: "var(--color-text-disabled)",
2749
+ placeholderColor: "var(--color-text-subtlest)",
2750
+ invalidPlaceholderColor: "var(--color-text-danger)",
3179
2751
  shadow: "{form.field.shadow}",
3180
- paddingX: "0.75rem",
3181
- paddingY: "0.25rem",
3182
- borderRadius: "0.375rem",
2752
+ paddingX: "var(--space-150)",
2753
+ paddingY: "var(--space-50)",
2754
+ borderRadius: "var(--border-radius-sm)",
3183
2755
  focusRing: {
3184
2756
  width: "{form.field.focus.ring.width}",
3185
2757
  style: "{form.field.focus.ring.style}",
@@ -3190,83 +2762,47 @@ const BCCPreset = definePreset(Aura, {
3190
2762
  transitionDuration: "{form.field.transition.duration}",
3191
2763
  sm: {
3192
2764
  fontSize: "{form.field.sm.font.size}",
3193
- paddingX: "0.75rem",
3194
- paddingY: "0.25rem"
2765
+ paddingX: "var(--space-150)",
2766
+ paddingY: "var(--space-50)"
3195
2767
  },
3196
2768
  lg: {
3197
2769
  fontSize: "{form.field.lg.font.size}",
3198
- paddingX: "0.75rem",
3199
- paddingY: "0.25rem"
2770
+ paddingX: "var(--space-150)",
2771
+ paddingY: "var(--space-50)"
3200
2772
  },
3201
- gap: "1rem",
3202
- minHeight: "1.5rem"
3203
- },
3204
- colorScheme: {
3205
- light: {
3206
- root: {
3207
- background: "#ffffff",
3208
- disabledBackground: "rgba(5, 21, 36, 0.06)",
3209
- filledBackground: "#f8f8f8",
3210
- filledHoverBackground: "#f8f8f8",
3211
- filledFocusBackground: "#f8f8f8",
3212
- borderColor: "rgba(11, 18, 14, 0.14)",
3213
- hoverBorderColor: "#7d818a",
3214
- focusBorderColor: "#505258",
3215
- invalidBorderColor: "#ca414e",
3216
- color: "#292a2e",
3217
- disabledColor: "rgba(8, 15, 33, 0.29)",
3218
- placeholderColor: "#6b6e76",
3219
- invalidPlaceholderColor: "#811436"
3220
- }
3221
- },
3222
- dark: {
3223
- root: {
3224
- background: "#1f1f21",
3225
- disabledBackground: "rgba(227, 228, 242, 0.12)",
3226
- filledBackground: "#1f1f21",
3227
- filledHoverBackground: "#1f1f21",
3228
- filledFocusBackground: "#1f1f21",
3229
- borderColor: "rgba(229, 233, 246, 0.25)",
3230
- hoverBorderColor: "#7e8188",
3231
- focusBorderColor: "#a9abaf",
3232
- invalidBorderColor: "#ed6362",
3233
- color: "#e2e3e4",
3234
- disabledColor: "rgba(229, 233, 246, 0.25)",
3235
- placeholderColor: "#96999e",
3236
- invalidPlaceholderColor: "#fab6ad"
3237
- }
3238
- }
2773
+ gap: "var(--space-200)",
2774
+ minHeight: "var(--space-300)"
3239
2775
  }
3240
2776
  },
3241
2777
  toast: {
3242
2778
  root: {
3243
2779
  width: "25rem",
3244
- borderRadius: "0.375rem",
3245
- borderWidth: "1px",
2780
+ borderRadius: "var(--border-radius-sm)",
2781
+ borderWidth: "var(--border-width-1)",
3246
2782
  transitionDuration: "{transition.duration}"
3247
2783
  },
3248
2784
  icon: {
3249
- size: "1.25rem"
2785
+ size: "var(--space-250)"
3250
2786
  },
3251
2787
  content: {
3252
- padding: "{overlay.popover.padding}",
3253
- gap: "0.5rem"
2788
+ padding: "var(--space-150) var(--space-200)",
2789
+ gap: "var(--space-100)"
3254
2790
  },
3255
2791
  text: {
3256
- gap: "0.125rem"
2792
+ gap: "var(--space-25)"
3257
2793
  },
3258
2794
  summary: {
3259
- fontWeight: "500",
3260
- fontSize: "1rem"
2795
+ fontWeight: "var(--font-weight-medium)",
2796
+ fontSize: "var(--font-size-md)"
3261
2797
  },
3262
2798
  detail: {
3263
- fontWeight: "500",
3264
- fontSize: "0.875rem"
2799
+ fontWeight: "var(--font-weight-medium)",
2800
+ fontSize: "var(--font-size-sm)"
3265
2801
  },
3266
2802
  closeButton: {
3267
- width: "1.5rem",
3268
- height: "1.5rem",
3269
- borderRadius: "0.75rem",
2803
+ width: "var(--space-300)",
2804
+ height: "var(--space-300)",
2805
+ borderRadius: "var(--border-radius-lg)",
3270
2806
  focusRing: {
3271
2807
  width: "{focus.ring.width}",
3272
2808
  style: "{focus.ring.style}",
@@ -3274,7 +2810,7 @@ const BCCPreset = definePreset(Aura, {
3274
2810
  }
3275
2811
  },
3276
2812
  closeIcon: {
3277
- size: "1.25rem"
2813
+ size: "var(--space-250)"
3278
2814
  },
3279
2815
  colorScheme: {
3280
2816
  light: {
@@ -3282,85 +2818,85 @@ const BCCPreset = definePreset(Aura, {
3282
2818
  blur: "1.5"
3283
2819
  },
3284
2820
  info: {
3285
- background: "#f6fbff",
3286
- borderColor: "#446add",
3287
- color: "#273c8f",
3288
- detailColor: "#505258",
2821
+ background: "var(--color-background-information-default)",
2822
+ borderColor: "var(--color-border-information)",
2823
+ color: "var(--color-text-information)",
2824
+ detailColor: "var(--color-text-subtle)",
3289
2825
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
3290
2826
  closeButton: {
3291
- hoverBackground: "#d9ecff",
2827
+ hoverBackground: "var(--color-background-information-hover)",
3292
2828
  focusRing: {
3293
- color: "#446add",
2829
+ color: "var(--color-border-information)",
3294
2830
  shadow: "0 0 0 0 #00000000"
3295
2831
  }
3296
2832
  }
3297
2833
  },
3298
2834
  success: {
3299
- background: "#efffed",
3300
- borderColor: "#09825d",
3301
- color: "#094c3b",
3302
- detailColor: "#505258",
2835
+ background: "var(--color-background-success-default)",
2836
+ borderColor: "var(--color-border-success)",
2837
+ color: "var(--color-text-success)",
2838
+ detailColor: "var(--color-text-subtle)",
3303
2839
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
3304
2840
  closeButton: {
3305
- hoverBackground: "#cbf3c9",
2841
+ hoverBackground: "var(--color-background-success-hover)",
3306
2842
  focusRing: {
3307
- color: "#09825d",
2843
+ color: "var(--color-border-success)",
3308
2844
  shadow: "0 0 0 0 #00000000"
3309
2845
  }
3310
2846
  }
3311
2847
  },
3312
2848
  warn: {
3313
- background: "#fdf8e9",
3314
- borderColor: "#b55919",
3315
- color: "#653805",
3316
- detailColor: "#505258",
2849
+ background: "var(--color-background-warning-default)",
2850
+ borderColor: "var(--color-border-warning)",
2851
+ color: "var(--color-text-warning-default)",
2852
+ detailColor: "var(--color-text-subtle)",
3317
2853
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
3318
2854
  closeButton: {
3319
- hoverBackground: "#f8e6a0",
2855
+ hoverBackground: "var(--color-background-warning-hover)",
3320
2856
  focusRing: {
3321
- color: "#b55919",
2857
+ color: "var(--color-border-warning)",
3322
2858
  shadow: "0 0 0 0 #00000000"
3323
2859
  }
3324
2860
  }
3325
2861
  },
3326
2862
  error: {
3327
- background: "#fff8f3",
3328
- borderColor: "#ca414e",
3329
- color: "#811436",
3330
- detailColor: "#505258",
2863
+ background: "var(--color-background-danger-default)",
2864
+ borderColor: "var(--color-border-danger)",
2865
+ color: "var(--color-text-danger)",
2866
+ detailColor: "var(--color-text-subtle)",
3331
2867
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
3332
2868
  closeButton: {
3333
- hoverBackground: "#fee2dd",
2869
+ hoverBackground: "var(--color-background-danger-hover)",
3334
2870
  focusRing: {
3335
- color: "#ca414e",
2871
+ color: "var(--color-border-danger)",
3336
2872
  shadow: "0 0 0 0 #00000000"
3337
2873
  }
3338
2874
  }
3339
2875
  },
3340
2876
  secondary: {
3341
- background: "#f8f8f8",
3342
- borderColor: "#7d818a",
3343
- color: "#292a2e",
3344
- detailColor: "#505258",
2877
+ background: "var(--color-background-accent-gray-subtler-default)",
2878
+ borderColor: "var(--color-border-accent-gray)",
2879
+ color: "var(--color-text-default)",
2880
+ detailColor: "var(--color-text-subtle)",
3345
2881
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
3346
2882
  closeButton: {
3347
- hoverBackground: "#f0f1f2",
2883
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
3348
2884
  focusRing: {
3349
- color: "#7d818a",
2885
+ color: "var(--color-border-accent-gray)",
3350
2886
  shadow: "0 0 0 0 #00000000"
3351
2887
  }
3352
2888
  }
3353
2889
  },
3354
2890
  contrast: {
3355
- background: "#1e1f21",
3356
- borderColor: "#ffffff",
3357
- color: "#ffffff",
3358
- detailColor: "#ffffff",
2891
+ background: "var(--color-background-accent-gray-boldest-default)",
2892
+ borderColor: "var(--color-border-inverse)",
2893
+ color: "var(--color-text-inverse)",
2894
+ detailColor: "var(--color-text-inverse)",
3359
2895
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
3360
2896
  closeButton: {
3361
- hoverBackground: "#292a2e",
2897
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
3362
2898
  focusRing: {
3363
- color: "#ffffff",
2899
+ color: "var(--color-border-inverse)",
3364
2900
  shadow: "0 0 0 0 #00000000"
3365
2901
  }
3366
2902
  }
@@ -3371,85 +2907,85 @@ const BCCPreset = definePreset(Aura, {
3371
2907
  blur: "10"
3372
2908
  },
3373
2909
  info: {
3374
- background: "#091e47",
3375
- borderColor: "#608ef6",
3376
- color: "#a6cdfd",
3377
- detailColor: "#a9abaf",
2910
+ background: "var(--color-background-information-default)",
2911
+ borderColor: "var(--color-border-information)",
2912
+ color: "var(--color-text-information)",
2913
+ detailColor: "var(--color-text-subtle)",
3378
2914
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
3379
2915
  closeButton: {
3380
- hoverBackground: "#212c64",
2916
+ hoverBackground: "var(--color-background-information-hover)",
3381
2917
  focusRing: {
3382
- color: "#608ef6",
2918
+ color: "var(--color-border-information)",
3383
2919
  shadow: "none"
3384
2920
  }
3385
2921
  }
3386
2922
  },
3387
2923
  success: {
3388
- background: "#032429",
3389
- borderColor: "#1ca673",
3390
- color: "#83d895",
3391
- detailColor: "#a9abaf",
2924
+ background: "var(--color-background-success-default)",
2925
+ borderColor: "var(--color-border-success)",
2926
+ color: "var(--color-text-success)",
2927
+ detailColor: "var(--color-text-subtle)",
3392
2928
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
3393
2929
  closeButton: {
3394
- hoverBackground: "#073734",
2930
+ hoverBackground: "var(--color-background-success-hover)",
3395
2931
  focusRing: {
3396
- color: "#1ca673",
2932
+ color: "var(--color-border-success)",
3397
2933
  shadow: "none"
3398
2934
  }
3399
2935
  }
3400
2936
  },
3401
2937
  warn: {
3402
- background: "#2d1f00",
3403
- borderColor: "#bc870d",
3404
- color: "#e9c348",
3405
- detailColor: "#a9abaf",
2938
+ background: "var(--color-background-warning-default)",
2939
+ borderColor: "var(--color-border-warning)",
2940
+ color: "var(--color-text-warning-default)",
2941
+ detailColor: "var(--color-text-subtle)",
3406
2942
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
3407
2943
  closeButton: {
3408
- hoverBackground: "#4b2c04",
2944
+ hoverBackground: "var(--color-background-warning-hover)",
3409
2945
  focusRing: {
3410
- color: "#bc870d",
2946
+ color: "var(--color-border-warning)",
3411
2947
  shadow: "none"
3412
2948
  }
3413
2949
  }
3414
2950
  },
3415
2951
  error: {
3416
- background: "#440223",
3417
- borderColor: "#ed6362",
3418
- color: "#fab6ad",
3419
- detailColor: "#a9abaf",
2952
+ background: "var(--color-background-danger-default)",
2953
+ borderColor: "var(--color-border-danger)",
2954
+ color: "var(--color-text-danger)",
2955
+ detailColor: "var(--color-text-subtle)",
3420
2956
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
3421
2957
  closeButton: {
3422
- hoverBackground: "#630d2e",
2958
+ hoverBackground: "var(--color-background-danger-hover)",
3423
2959
  focusRing: {
3424
- color: "#ed6362",
2960
+ color: "var(--color-border-danger)",
3425
2961
  shadow: "none"
3426
2962
  }
3427
2963
  }
3428
2964
  },
3429
2965
  secondary: {
3430
- background: "#1f1f21",
3431
- borderColor: "#7e8188",
3432
- color: "#e2e3e4",
3433
- detailColor: "#a9abaf",
2966
+ background: "var(--color-background-accent-gray-subtler-default)",
2967
+ borderColor: "var(--color-border-accent-gray)",
2968
+ color: "var(--color-text-default)",
2969
+ detailColor: "var(--color-text-subtle)",
3434
2970
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
3435
2971
  closeButton: {
3436
- hoverBackground: "#242528",
2972
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
3437
2973
  focusRing: {
3438
- color: "#7e8188",
2974
+ color: "var(--color-border-accent-gray)",
3439
2975
  shadow: "none"
3440
2976
  }
3441
2977
  }
3442
2978
  },
3443
2979
  contrast: {
3444
- background: "#e2e3e4",
3445
- borderColor: "#18191a",
3446
- color: "#1f1f21",
3447
- detailColor: "#1f1f21",
2980
+ background: "var(--color-background-accent-gray-boldest-default)",
2981
+ borderColor: "var(--color-border-inverse)",
2982
+ color: "var(--color-text-inverse)",
2983
+ detailColor: "var(--color-text-inverse)",
3448
2984
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
3449
2985
  closeButton: {
3450
- hoverBackground: "#cecfd2",
2986
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
3451
2987
  focusRing: {
3452
- color: "#18191a",
2988
+ color: "var(--color-border-inverse)",
3453
2989
  shadow: "none"
3454
2990
  }
3455
2991
  }
@@ -3459,119 +2995,110 @@ const BCCPreset = definePreset(Aura, {
3459
2995
  },
3460
2996
  togglebutton: {
3461
2997
  root: {
3462
- padding: "0.25rem",
3463
- borderRadius: "0.5rem",
3464
- gap: "0.5rem",
3465
- fontWeight: "500",
2998
+ padding: "var(--space-50)",
2999
+ borderRadius: "var(--border-radius-md)",
3000
+ gap: "var(--space-100)",
3001
+ fontWeight: "var(--font-weight-medium)",
3002
+ disabledBackground: "var(--color-background-disabled-default)",
3003
+ disabledBorderColor: "var(--color-background-disabled-default)",
3004
+ disabledColor: "var(--color-text-disabled)",
3005
+ invalidBorderColor: "var(--color-border-danger)",
3466
3006
  focusRing: {
3467
3007
  width: "{focus.ring.width}",
3468
3008
  style: "{focus.ring.style}",
3009
+ color: "var(--color-border-focused)",
3469
3010
  offset: "{focus.ring.offset}",
3470
3011
  shadow: "{focus.ring.shadow}"
3471
3012
  },
3472
3013
  transitionDuration: "{form.field.transition.duration}",
3473
3014
  sm: {
3474
- fontSize: "0.875rem",
3475
- padding: "0.25rem"
3015
+ fontSize: "var(--font-size-sm)",
3016
+ padding: "var(--space-50)"
3476
3017
  },
3477
3018
  lg: {
3478
3019
  fontSize: "{form.field.lg.font.size}",
3479
- padding: "0.25rem"
3020
+ padding: "var(--space-50)"
3480
3021
  }
3481
3022
  },
3023
+ icon: {
3024
+ disabledColor: "var(--color-icon-disabled)"
3025
+ },
3026
+ content: {
3027
+ padding: "var(--space-50) var(--space-100)",
3028
+ borderRadius: "var(--border-radius-sm)",
3029
+ checkedShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
3030
+ sm: {
3031
+ padding: "var(--space-25) var(--space-50)",
3032
+ minHeight: "var(--space-300)",
3033
+ border: {
3034
+ radius: "var(--border-radius-sm)"
3035
+ }
3036
+ },
3037
+ lg: {
3038
+ padding: "var(--space-75) var(--space-150)",
3039
+ minHeight: "var(--space-500)"
3040
+ },
3041
+ minHeight: "var(--space-400)"
3042
+ },
3482
3043
  colorScheme: {
3483
3044
  light: {
3484
3045
  root: {
3485
- disabledBackground: "rgba(5, 21, 36, 0.06)",
3486
- disabledBorderColor: "rgba(5, 21, 36, 0.06)",
3487
- disabledColor: "rgba(8, 15, 33, 0.29)",
3488
- invalidBorderColor: "#ca414e",
3489
- focusRing: {
3490
- color: "#505258"
3491
- },
3492
- background: "#dddee1",
3493
- checkedBackground: "#dddee1",
3494
- hoverBackground: "#dddee1",
3495
- borderColor: "#dddee1",
3496
- color: "#505258",
3497
- hoverColor: "#292a2e",
3498
- checkedColor: "#292a2e",
3499
- checkedBorderColor: "#dddee1"
3500
- },
3501
- icon: {
3502
- disabledColor: "rgba(8, 15, 33, 0.29)",
3503
- color: "#505258",
3504
- hoverColor: "#1e1f21",
3505
- checkedColor: "#1e1f21"
3046
+ background: "var(--color-background-accent-gray-default)",
3047
+ checkedBackground: "var(--color-background-accent-gray-default)",
3048
+ hoverBackground: "var(--color-background-accent-gray-default)",
3049
+ borderColor: "var(--color-background-accent-gray-default)",
3050
+ color: "var(--color-text-subtle)",
3051
+ hoverColor: "var(--color-text-default)",
3052
+ checkedColor: "var(--color-text-default)",
3053
+ checkedBorderColor: "var(--color-background-accent-gray-default)"
3506
3054
  },
3507
3055
  content: {
3508
- checkedBackground: "#ffffff"
3056
+ checkedBackground: "var(--color-elevation-surface-default)"
3057
+ },
3058
+ icon: {
3059
+ color: "var(--color-icon-subtle)",
3060
+ hoverColor: "var(--color-icon-default)",
3061
+ checkedColor: "var(--color-icon-default)"
3509
3062
  }
3510
3063
  },
3511
3064
  dark: {
3512
3065
  root: {
3513
- disabledBackground: "rgba(227, 228, 242, 0.12)",
3514
- disabledBorderColor: "rgba(227, 228, 242, 0.12)",
3515
- disabledColor: "rgba(229, 233, 246, 0.25)",
3516
- invalidBorderColor: "#ed6362",
3517
- focusRing: {
3518
- color: "#a9abaf"
3519
- },
3520
- background: "#303134",
3521
- checkedBackground: "#303134",
3522
- hoverBackground: "#303134",
3523
- borderColor: "#303134",
3524
- color: "#a9abaf",
3525
- hoverColor: "#e2e3e4",
3526
- checkedColor: "#e2e3e4",
3527
- checkedBorderColor: "#303134"
3528
- },
3529
- icon: {
3530
- disabledColor: "rgba(229, 233, 246, 0.25)",
3531
- color: "#a9abaf",
3532
- hoverColor: "#cecfd2",
3533
- checkedColor: "#cecfd2"
3066
+ background: "var(--color-background-accent-gray-default)",
3067
+ checkedBackground: "var(--color-background-accent-gray-default)",
3068
+ hoverBackground: "var(--color-background-accent-gray-default)",
3069
+ borderColor: "var(--color-background-accent-gray-default)",
3070
+ color: "var(--color-text-subtle)",
3071
+ hoverColor: "var(--color-text-default)",
3072
+ checkedColor: "var(--color-text-default)",
3073
+ checkedBorderColor: "var(--color-background-accent-gray-default)"
3534
3074
  },
3535
3075
  content: {
3536
- checkedBackground: "#1f1f21"
3076
+ checkedBackground: "var(--color-elevation-surface-default)"
3077
+ },
3078
+ icon: {
3079
+ color: "var(--color-icon-subtle)",
3080
+ hoverColor: "var(--color-icon-default)",
3081
+ checkedColor: "var(--color-icon-default)"
3537
3082
  }
3538
3083
  }
3539
3084
  },
3540
- content: {
3541
- padding: "0.25rem 0.5rem",
3542
- borderRadius: "0.375rem",
3543
- checkedShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.02), 0 1px 2px 0 rgba(0, 0, 0, 0.04)",
3544
- sm: {
3545
- padding: "0.125rem 0.25rem",
3546
- minHeight: "1.5rem",
3547
- border: {
3548
- radius: "0.375rem"
3549
- }
3550
- },
3551
- lg: {
3552
- padding: "0.375rem 0.75rem",
3553
- minHeight: "2.5rem"
3554
- },
3555
- minHeight: "2rem"
3556
- },
3557
- minHeight: "2.5rem",
3558
- lineHeight: "16px",
3085
+ minHeight: "var(--space-500)",
3559
3086
  sm: {
3560
- minHeight: "2rem",
3087
+ minHeight: "var(--space-400)",
3561
3088
  border: {
3562
- radius: "0.375rem"
3089
+ radius: "var(--border-radius-sm)"
3563
3090
  }
3564
3091
  },
3565
3092
  lg: {
3566
- minHeight: "3rem"
3093
+ minHeight: "var(--space-600)"
3567
3094
  }
3568
3095
  },
3569
3096
  toggleswitch: {
3570
3097
  root: {
3571
- width: "2.5rem",
3572
- height: "1.5rem",
3573
- borderRadius: "2rem",
3574
- gap: "0.25rem",
3098
+ width: "var(--space-500)",
3099
+ height: "var(--space-300)",
3100
+ borderRadius: "var(--border-radius-3xl)",
3101
+ gap: "var(--space-50)",
3575
3102
  shadow: "{form.field.shadow}",
3576
3103
  focusRing: {
3577
3104
  width: "{focus.ring.width}",
@@ -3580,7 +3107,7 @@ const BCCPreset = definePreset(Aura, {
3580
3107
  offset: "{focus.ring.offset}",
3581
3108
  shadow: "{focus.ring.shadow}"
3582
3109
  },
3583
- borderWidth: "1px",
3110
+ borderWidth: "var(--border-width-1)",
3584
3111
  borderColor: "transparent",
3585
3112
  hoverBorderColor: "transparent",
3586
3113
  checkedBorderColor: "transparent",
@@ -3590,55 +3117,55 @@ const BCCPreset = definePreset(Aura, {
3590
3117
  slideDuration: "0.2s"
3591
3118
  },
3592
3119
  handle: {
3593
- borderRadius: "999px",
3594
- size: "1rem"
3120
+ borderRadius: "var(--border-radius-full)",
3121
+ size: "var(--space-200)"
3595
3122
  },
3596
3123
  colorScheme: {
3597
3124
  light: {
3598
3125
  root: {
3599
- background: "#dddee1",
3600
- disabledBackground: "rgba(5, 21, 36, 0.06)",
3601
- hoverBackground: "#b7b9be",
3602
- checkedBackground: "#0c625c",
3603
- checkedHoverBackground: "#0c625c"
3126
+ background: "var(--color-background-accent-gray-default)",
3127
+ disabledBackground: "var(--color-background-disabled-default)",
3128
+ hoverBackground: "var(--color-background-accent-gray-hover)",
3129
+ checkedBackground: "var(--color-background-brand-bolder-default)",
3130
+ checkedHoverBackground: "var(--color-background-brand-bolder-default)"
3604
3131
  },
3605
3132
  handle: {
3606
- background: "#ffffff",
3607
- disabledBackground: "rgba(8, 15, 33, 0.29)",
3608
- hoverBackground: "#f0f1f2",
3609
- checkedBackground: "#ffffff",
3610
- checkedHoverBackground: "#ffffff",
3611
- color: "#6b6e76",
3612
- hoverColor: "#292a2e",
3613
- checkedColor: "#0c625c",
3614
- checkedHoverColor: "#014d49"
3133
+ background: "var(--color-elevation-surface-default)",
3134
+ disabledBackground: "var(--color-icon-disabled)",
3135
+ hoverBackground: "var(--color-elevation-surface-hovered)",
3136
+ checkedBackground: "var(--color-elevation-surface-default)",
3137
+ checkedHoverBackground: "var(--color-elevation-surface-default)",
3138
+ color: "var(--color-text-subtlest)",
3139
+ hoverColor: "var(--color-text-default)",
3140
+ checkedColor: "var(--color-background-brand-bolder-default)",
3141
+ checkedHoverColor: "var(--color-background-brand-bolder-hover)"
3615
3142
  }
3616
3143
  },
3617
3144
  dark: {
3618
3145
  root: {
3619
- background: "#303134",
3620
- disabledBackground: "rgba(227, 228, 242, 0.12)",
3621
- hoverBackground: "#4b4d51",
3622
- checkedBackground: "#6fb5ad",
3623
- checkedHoverBackground: "#6fb5ad"
3146
+ background: "var(--color-background-accent-gray-default)",
3147
+ disabledBackground: "var(--color-background-disabled-default)",
3148
+ hoverBackground: "var(--color-background-accent-gray-hover)",
3149
+ checkedBackground: "var(--color-background-brand-bolder-default)",
3150
+ checkedHoverBackground: "var(--color-background-brand-bolder-default)"
3624
3151
  },
3625
3152
  handle: {
3626
- background: "#1f1f21",
3627
- disabledBackground: "rgba(229, 233, 246, 0.25)",
3628
- hoverBackground: "#242528",
3629
- checkedBackground: "#1f1f21",
3630
- checkedHoverBackground: "#1f1f21",
3631
- color: "#96999e",
3632
- hoverColor: "#e2e3e4",
3633
- checkedColor: "#6fb5ad",
3634
- checkedHoverColor: "#a0cec8"
3153
+ background: "var(--color-elevation-surface-default)",
3154
+ disabledBackground: "var(--color-icon-disabled)",
3155
+ hoverBackground: "var(--color-elevation-surface-hovered)",
3156
+ checkedBackground: "var(--color-elevation-surface-default)",
3157
+ checkedHoverBackground: "var(--color-elevation-surface-default)",
3158
+ color: "var(--color-text-subtlest)",
3159
+ hoverColor: "var(--color-text-default)",
3160
+ checkedColor: "var(--color-background-brand-bolder-default)",
3161
+ checkedHoverColor: "var(--color-background-brand-bolder-hover)"
3635
3162
  }
3636
3163
  }
3637
3164
  }
3638
3165
  },
3639
3166
  floatlabel: {
3640
3167
  on: {
3641
- gap: "-0.5rem"
3168
+ gap: "var(--space-negative-100)"
3642
3169
  }
3643
3170
  }
3644
3171
  }