@bcc-code/design-tokens 5.0.3 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/build/bcc/css/auto.css +2 -0
  2. package/build/bcc/css/auto.css.d.ts +3 -0
  3. package/build/bcc/css/dark.css.d.ts +3 -0
  4. package/build/bcc/css/light.css.d.ts +3 -0
  5. package/build/bcc/css/tailwind-auto.css.d.ts +3 -0
  6. package/build/bcc/css/tailwind-dark.css.d.ts +3 -0
  7. package/build/bcc/css/tailwind-light.css.d.ts +3 -0
  8. package/build/primevue/component-dark.js +2390 -0
  9. package/build/primevue/component-light.js +2390 -0
  10. package/build/primevue/config.js +822 -1274
  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
 
@@ -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,79 +975,35 @@ 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: "1px",
979
+ borderColor: "var(--color-border-default)"
1038
980
  },
1039
981
  header: {
982
+ color: "var(--color-text-subtle)",
983
+ hoverColor: "var(--color-text-default)",
984
+ activeColor: "var(--color-text-default)",
1040
985
  padding: "1rem",
1041
986
  fontWeight: "700",
1042
987
  borderRadius: "0",
1043
988
  borderWidth: "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
1008
  topBorderRadius: "0.375rem",
1052
1009
  borderWidth: "0"
@@ -1059,11 +1016,27 @@ const BCCPreset = definePreset(Aura, {
1059
1016
  },
1060
1017
  content: {
1061
1018
  borderWidth: "0",
1019
+ borderColor: "var(--color-border-default)",
1020
+ background: "var(--color-elevation-surface-default)",
1021
+ color: "var(--color-text-default)",
1062
1022
  padding: "1rem 0 1rem 1rem"
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
1041
  paddingX: "0.375rem",
1069
1042
  paddingY: "0.125rem",
@@ -1077,113 +1050,9 @@ 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: {
1054
+ background: "var(--color-elevation-surface-default)",
1055
+ borderColor: "var(--color-border-default)",
1187
1056
  borderRadius: "0.375rem",
1188
1057
  color: "{overlay.select.color}",
1189
1058
  shadow: "{overlay.select.shadow}"
@@ -1193,11 +1062,20 @@ const BCCPreset = definePreset(Aura, {
1193
1062
  gap: "0.125rem"
1194
1063
  },
1195
1064
  option: {
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)",
1196
1072
  padding: "0.5rem 0.75rem",
1197
1073
  borderRadius: "0.25rem",
1198
1074
  gap: "0.5rem"
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
1080
  padding: "0.5rem 0.75rem"
1203
1081
  },
@@ -1209,10 +1087,14 @@ const BCCPreset = definePreset(Aura, {
1209
1087
  lg: {
1210
1088
  width: "3rem"
1211
1089
  },
1090
+ borderColor: "var(--color-border-default)",
1091
+ hoverBorderColor: "var(--color-border-default)",
1092
+ activeBorderColor: "var(--color-border-default)",
1212
1093
  borderRadius: "0.375rem",
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
  }
@@ -1223,6 +1105,36 @@ const BCCPreset = definePreset(Aura, {
1223
1105
  emptyMessage: {
1224
1106
  padding: "0.5rem 0.75rem"
1225
1107
  },
1108
+ colorScheme: {
1109
+ light: {
1110
+ chip: {
1111
+ focusBackground: "var(--color-background-accent-gray-hover)",
1112
+ focusColor: "var(--color-text-default)"
1113
+ },
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)"
1121
+ }
1122
+ },
1123
+ dark: {
1124
+ chip: {
1125
+ focusBackground: "var(--color-background-accent-gray-hover)",
1126
+ focusColor: "var(--color-text-default)"
1127
+ },
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)"
1135
+ }
1136
+ }
1137
+ },
1226
1138
  input: {
1227
1139
  multiple: {
1228
1140
  gap: "0.25rem",
@@ -1235,32 +1147,15 @@ const BCCPreset = definePreset(Aura, {
1235
1147
  width: "2rem",
1236
1148
  height: "2rem",
1237
1149
  fontSize: "1rem",
1150
+ background: "var(--color-background-accent-gray-default)",
1151
+ color: "var(--color-text-default)",
1238
1152
  borderRadius: "0.375rem"
1239
1153
  },
1240
- colorScheme: {
1241
- light: {
1242
- root: {
1243
- background: "#dddee1",
1244
- color: "#292a2e"
1245
- },
1246
- group: {
1247
- borderColor: "#ffffff"
1248
- }
1249
- },
1250
- dark: {
1251
- root: {
1252
- background: "#303134",
1253
- color: "#e2e3e4"
1254
- },
1255
- group: {
1256
- borderColor: "#18191a"
1257
- }
1258
- }
1259
- },
1260
1154
  icon: {
1261
- size: "1rem"
1155
+ size: "1.25rem"
1262
1156
  },
1263
1157
  group: {
1158
+ borderColor: "var(--color-border-inverse)",
1264
1159
  offset: "-0.75rem"
1265
1160
  },
1266
1161
  lg: {
@@ -1279,7 +1174,7 @@ const BCCPreset = definePreset(Aura, {
1279
1174
  height: "4rem",
1280
1175
  fontSize: "2em",
1281
1176
  icon: {
1282
- size: "2.5rem"
1177
+ size: "2rem"
1283
1178
  },
1284
1179
  group: {
1285
1180
  offset: "-1.5rem"
@@ -1316,62 +1211,62 @@ const BCCPreset = definePreset(Aura, {
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
  },
@@ -1418,77 +1313,77 @@ const BCCPreset = definePreset(Aura, {
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}",
@@ -1886,10 +1781,24 @@ const BCCPreset = definePreset(Aura, {
1886
1781
  borderRadius: "0.25rem",
1887
1782
  width: "1.25rem",
1888
1783
  height: "1.25rem",
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
  },
@@ -1904,62 +1813,12 @@ const BCCPreset = definePreset(Aura, {
1904
1813
  },
1905
1814
  gap: "0.5rem"
1906
1815
  },
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
- }
1933
- },
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
- }
1960
- },
1961
1816
  icon: {
1962
1817
  size: "1rem",
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
1823
  size: "1rem"
1965
1824
  },
@@ -1988,6 +1847,7 @@ const BCCPreset = definePreset(Aura, {
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,58 +1855,38 @@ 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",
1889
+ color: "var(--color-text-default)",
2050
1890
  gap: "0.5rem"
2051
1891
  },
2052
1892
  horizontal: {
@@ -2066,30 +1906,30 @@ const BCCPreset = definePreset(Aura, {
2066
1906
  },
2067
1907
  inputgroup: {
2068
1908
  addon: {
1909
+ background: "var(--color-elevation-surface-default)",
1910
+ borderColor: "var(--color-border-input)",
1911
+ color: "var(--color-text-subtle)",
2069
1912
  borderRadius: "0.375rem",
2070
1913
  padding: "0.5rem",
2071
1914
  minWidth: "2.5rem",
2072
1915
  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
- }
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
1934
  paddingX: "0.75rem",
2095
1935
  paddingY: "0.25rem",
@@ -2116,106 +1956,20 @@ const BCCPreset = definePreset(Aura, {
2116
1956
  },
2117
1957
  gap: "0.25rem",
2118
1958
  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
- }
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
1970
  borderRadius: "0.375rem",
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
1974
  padding: "0.5rem",
2221
1975
  gap: "0.125rem",
@@ -2224,19 +1978,41 @@ const BCCPreset = definePreset(Aura, {
2224
1978
  }
2225
1979
  },
2226
1980
  option: {
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)",
2227
1988
  padding: "0.5rem 0.75rem",
2228
1989
  borderRadius: "0.25rem"
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
1995
  padding: "0.75rem"
2233
1996
  },
2234
1997
  checkmark: {
1998
+ color: "var(--color-icon-subtle)",
2235
1999
  gutterStart: "-0.375rem",
2236
2000
  gutterEnd: "0.375rem"
2237
2001
  },
2238
2002
  emptyMessage: {
2239
2003
  padding: "0.5rem 0.75rem"
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: {
@@ -2304,245 +2080,245 @@ const BCCPreset = definePreset(Aura, {
2304
2080
  colorScheme: {
2305
2081
  light: {
2306
2082
  info: {
2307
- background: "#f6fbff",
2308
- borderColor: "#446add",
2309
- color: "#273c8f",
2083
+ background: "var(--color-background-information-default)",
2084
+ borderColor: "var(--color-border-information)",
2085
+ color: "var(--color-text-information)",
2310
2086
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
2311
2087
  closeButton: {
2312
- hoverBackground: "#d9ecff",
2088
+ hoverBackground: "var(--color-background-information-hover)",
2313
2089
  focusRing: {
2314
- color: "#446add",
2090
+ color: "var(--color-border-information)",
2315
2091
  shadow: "0 0 0 0 #00000000"
2316
2092
  }
2317
2093
  },
2318
2094
  outlined: {
2319
- color: "#273c8f",
2320
- borderColor: "#446add"
2095
+ color: "var(--color-text-information)",
2096
+ borderColor: "var(--color-border-information)"
2321
2097
  },
2322
2098
  simple: {
2323
- color: "#273c8f"
2099
+ color: "var(--color-text-information)"
2324
2100
  }
2325
2101
  },
2326
2102
  success: {
2327
- background: "#efffed",
2328
- borderColor: "#09825d",
2329
- color: "#094c3b",
2103
+ background: "var(--color-background-success-default)",
2104
+ borderColor: "var(--color-border-success)",
2105
+ color: "var(--color-text-success)",
2330
2106
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
2331
2107
  closeButton: {
2332
- hoverBackground: "#cbf3c9",
2108
+ hoverBackground: "var(--color-background-success-hover)",
2333
2109
  focusRing: {
2334
- color: "#09825d",
2110
+ color: "var(--color-border-success)",
2335
2111
  shadow: "0 0 0 0 #00000000"
2336
2112
  }
2337
2113
  },
2338
2114
  outlined: {
2339
- color: "#094c3b",
2340
- borderColor: "#09825d"
2115
+ color: "var(--color-text-success)",
2116
+ borderColor: "var(--color-border-success)"
2341
2117
  },
2342
2118
  simple: {
2343
- color: "#094c3b"
2119
+ color: "var(--color-text-success)"
2344
2120
  }
2345
2121
  },
2346
2122
  warn: {
2347
- background: "#fdf8e9",
2348
- borderColor: "#b55919",
2349
- color: "#653805",
2123
+ background: "var(--color-background-warning-default)",
2124
+ borderColor: "var(--color-border-warning)",
2125
+ color: "var(--color-text-warning-default)",
2350
2126
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
2351
2127
  closeButton: {
2352
- hoverBackground: "#f8e6a0",
2128
+ hoverBackground: "var(--color-background-warning-hover)",
2353
2129
  focusRing: {
2354
- color: "#b55919",
2130
+ color: "var(--color-border-warning)",
2355
2131
  shadow: "0 0 0 0 #00000000"
2356
2132
  }
2357
2133
  },
2358
2134
  outlined: {
2359
- color: "#653805",
2360
- borderColor: "#b55919"
2135
+ color: "var(--color-text-warning-default)",
2136
+ borderColor: "var(--color-border-warning)"
2361
2137
  },
2362
2138
  simple: {
2363
- color: "#653805"
2139
+ color: "var(--color-text-warning-default)"
2364
2140
  }
2365
2141
  },
2366
2142
  error: {
2367
- background: "#fff8f3",
2368
- borderColor: "#ca414e",
2369
- color: "#811436",
2143
+ background: "var(--color-background-danger-default)",
2144
+ borderColor: "var(--color-border-danger)",
2145
+ color: "var(--color-text-danger)",
2370
2146
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
2371
2147
  closeButton: {
2372
- hoverBackground: "#fee2dd",
2148
+ hoverBackground: "var(--color-background-danger-hover)",
2373
2149
  focusRing: {
2374
- color: "#ca414e",
2150
+ color: "var(--color-border-danger)",
2375
2151
  shadow: "0 0 0 0 #00000000"
2376
2152
  }
2377
2153
  },
2378
2154
  outlined: {
2379
- color: "#811436",
2380
- borderColor: "#ca414e"
2155
+ color: "var(--color-text-danger)",
2156
+ borderColor: "var(--color-border-danger)"
2381
2157
  },
2382
2158
  simple: {
2383
- color: "#811436"
2159
+ color: "var(--color-text-danger)"
2384
2160
  }
2385
2161
  },
2386
2162
  secondary: {
2387
- background: "#f8f8f8",
2388
- borderColor: "#7d818a",
2389
- color: "#292a2e",
2163
+ background: "var(--color-background-accent-gray-subtler-default)",
2164
+ borderColor: "var(--color-border-accent-gray)",
2165
+ color: "var(--color-text-default)",
2390
2166
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
2391
2167
  closeButton: {
2392
- hoverBackground: "#f0f1f2",
2168
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
2393
2169
  focusRing: {
2394
- color: "#7d818a",
2170
+ color: "var(--color-border-accent-gray)",
2395
2171
  shadow: "0 0 0 0 #00000000"
2396
2172
  }
2397
2173
  },
2398
2174
  outlined: {
2399
- color: "#292a2e",
2400
- borderColor: "#7d818a"
2175
+ color: "var(--color-text-default)",
2176
+ borderColor: "var(--color-border-accent-gray)"
2401
2177
  },
2402
2178
  simple: {
2403
- color: "#292a2e"
2179
+ color: "var(--color-text-default)"
2404
2180
  }
2405
2181
  },
2406
2182
  contrast: {
2407
- background: "#1e1f21",
2408
- borderColor: "#1e1f21",
2409
- color: "#ffffff",
2183
+ background: "var(--color-background-accent-gray-boldest-default)",
2184
+ borderColor: "var(--color-icon-default)",
2185
+ color: "var(--color-text-inverse)",
2410
2186
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
2411
2187
  closeButton: {
2412
- hoverBackground: "#292a2e",
2188
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
2413
2189
  focusRing: {
2414
- color: "#ffffff",
2190
+ color: "var(--color-border-inverse)",
2415
2191
  shadow: "0 0 0 0 #00000000"
2416
2192
  }
2417
2193
  },
2418
2194
  outlined: {
2419
- color: "#292a2e",
2420
- borderColor: "#1e1f21"
2195
+ color: "var(--color-text-default)",
2196
+ borderColor: "var(--color-background-accent-gray-boldest-default)"
2421
2197
  },
2422
2198
  simple: {
2423
- color: "#292a2e"
2199
+ color: "var(--color-text-default)"
2424
2200
  }
2425
2201
  }
2426
2202
  },
2427
2203
  dark: {
2428
2204
  info: {
2429
- background: "#091e47",
2430
- borderColor: "#608ef6",
2431
- color: "#a6cdfd",
2205
+ background: "var(--color-background-information-default)",
2206
+ borderColor: "var(--color-border-information)",
2207
+ color: "var(--color-text-information)",
2432
2208
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
2433
2209
  closeButton: {
2434
- hoverBackground: "#212c64",
2210
+ hoverBackground: "var(--color-background-information-hover)",
2435
2211
  focusRing: {
2436
- color: "#608ef6",
2212
+ color: "var(--color-border-information)",
2437
2213
  shadow: "0 0 0 0 #00000000"
2438
2214
  }
2439
2215
  },
2440
2216
  outlined: {
2441
- color: "#a6cdfd",
2442
- borderColor: "#608ef6"
2217
+ color: "var(--color-text-information)",
2218
+ borderColor: "var(--color-border-information)"
2443
2219
  },
2444
2220
  simple: {
2445
- color: "#a6cdfd"
2221
+ color: "var(--color-text-information)"
2446
2222
  }
2447
2223
  },
2448
2224
  success: {
2449
- background: "#032429",
2450
- borderColor: "#1ca673",
2451
- color: "#83d895",
2225
+ background: "var(--color-background-success-default)",
2226
+ borderColor: "var(--color-border-success)",
2227
+ color: "var(--color-text-success)",
2452
2228
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
2453
2229
  closeButton: {
2454
- hoverBackground: "#073734",
2230
+ hoverBackground: "var(--color-background-success-hover)",
2455
2231
  focusRing: {
2456
- color: "#1ca673",
2232
+ color: "var(--color-border-success)",
2457
2233
  shadow: "0 0 0 0 #00000000"
2458
2234
  }
2459
2235
  },
2460
2236
  outlined: {
2461
- color: "#83d895",
2462
- borderColor: "#1ca673"
2237
+ color: "var(--color-text-success)",
2238
+ borderColor: "var(--color-border-success)"
2463
2239
  },
2464
2240
  simple: {
2465
- color: "#83d895"
2241
+ color: "var(--color-text-success)"
2466
2242
  }
2467
2243
  },
2468
2244
  warn: {
2469
- background: "#420e0d",
2470
- borderColor: "#da772e",
2471
- color: "#f6b981",
2245
+ background: "var(--color-background-warning-default)",
2246
+ borderColor: "var(--color-border-warning)",
2247
+ color: "var(--color-text-warning-default)",
2472
2248
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
2473
2249
  closeButton: {
2474
- hoverBackground: "#5d1712",
2250
+ hoverBackground: "var(--color-background-warning-hover)",
2475
2251
  focusRing: {
2476
- color: "#da772e",
2252
+ color: "var(--color-border-warning)",
2477
2253
  shadow: "0 0 0 0 #00000000"
2478
2254
  }
2479
2255
  },
2480
2256
  outlined: {
2481
- color: "#f6b981",
2482
- borderColor: "#da772e"
2257
+ color: "var(--color-text-warning-default)",
2258
+ borderColor: "var(--color-border-warning)"
2483
2259
  },
2484
2260
  simple: {
2485
- color: "#f6b981"
2261
+ color: "var(--color-text-warning-default)"
2486
2262
  }
2487
2263
  },
2488
2264
  error: {
2489
- background: "#440223",
2490
- borderColor: "#ed6362",
2491
- color: "#fab6ad",
2265
+ background: "var(--color-background-danger-default)",
2266
+ borderColor: "var(--color-border-danger)",
2267
+ color: "var(--color-text-danger)",
2492
2268
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
2493
2269
  closeButton: {
2494
- hoverBackground: "#630d2e",
2270
+ hoverBackground: "var(--color-background-danger-hover)",
2495
2271
  focusRing: {
2496
- color: "#ed6362",
2272
+ color: "var(--color-border-danger)",
2497
2273
  shadow: "0 0 0 0 #00000000"
2498
2274
  }
2499
2275
  },
2500
2276
  outlined: {
2501
- color: "#fab6ad",
2502
- borderColor: "#ed6362"
2277
+ color: "var(--color-text-danger)",
2278
+ borderColor: "var(--color-border-danger)"
2503
2279
  },
2504
2280
  simple: {
2505
- color: "#fab6ad"
2281
+ color: "var(--color-text-danger)"
2506
2282
  }
2507
2283
  },
2508
2284
  secondary: {
2509
- background: "#1f1f21",
2510
- borderColor: "#7e8188",
2511
- color: "#e2e3e4",
2285
+ background: "var(--color-background-accent-gray-subtler-default)",
2286
+ borderColor: "var(--color-border-accent-gray)",
2287
+ color: "var(--color-text-default)",
2512
2288
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
2513
2289
  closeButton: {
2514
- hoverBackground: "#242528",
2290
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
2515
2291
  focusRing: {
2516
- color: "#7e8188",
2292
+ color: "var(--color-border-accent-gray)",
2517
2293
  shadow: "0 0 0 0 #00000000"
2518
2294
  }
2519
2295
  },
2520
2296
  outlined: {
2521
- color: "#e2e3e4",
2522
- borderColor: "#7e8188"
2297
+ color: "var(--color-text-default)",
2298
+ borderColor: "var(--color-border-accent-gray)"
2523
2299
  },
2524
2300
  simple: {
2525
- color: "#e2e3e4"
2301
+ color: "var(--color-text-default)"
2526
2302
  }
2527
2303
  },
2528
2304
  contrast: {
2529
- background: "#e2e3e4",
2530
- borderColor: "#e2e3e4",
2531
- color: "#1f1f21",
2305
+ background: "var(--color-background-accent-gray-boldest-default)",
2306
+ borderColor: "var(--color-icon-default)",
2307
+ color: "var(--color-text-inverse)",
2532
2308
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
2533
2309
  closeButton: {
2534
- hoverBackground: "#cecfd2",
2310
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
2535
2311
  focusRing: {
2536
- color: "#18191a",
2312
+ color: "var(--color-border-inverse)",
2537
2313
  shadow: "0 0 0 0 #00000000"
2538
2314
  }
2539
2315
  },
2540
2316
  outlined: {
2541
- color: "#e2e3e4",
2542
- borderColor: "#e2e3e4"
2317
+ color: "var(--color-text-default)",
2318
+ borderColor: "var(--color-background-accent-gray-boldest-default)"
2543
2319
  },
2544
2320
  simple: {
2545
- color: "#e2e3e4"
2321
+ color: "var(--color-text-default)"
2546
2322
  }
2547
2323
  }
2548
2324
  }
@@ -2550,6 +2326,19 @@ const BCCPreset = definePreset(Aura, {
2550
2326
  },
2551
2327
  multiselect: {
2552
2328
  root: {
2329
+ background: "var(--color-elevation-surface-default)",
2330
+ disabledBackground: "var(--color-background-disabled-default)",
2331
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2332
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
2333
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
2334
+ borderColor: "var(--color-border-default)",
2335
+ hoverBorderColor: "var(--color-border-input)",
2336
+ focusBorderColor: "var(--color-border-focused)",
2337
+ invalidBorderColor: "var(--color-border-danger)",
2338
+ color: "var(--color-text-default)",
2339
+ disabledColor: "var(--color-text-disabled)",
2340
+ placeholderColor: "var(--color-text-subtlest)",
2341
+ invalidPlaceholderColor: "var(--color-text-danger)",
2553
2342
  shadow: "{form.field.shadow}",
2554
2343
  paddingX: "0.75rem",
2555
2344
  paddingY: "0.25rem",
@@ -2576,92 +2365,13 @@ const BCCPreset = definePreset(Aura, {
2576
2365
  },
2577
2366
  minHeight: "2.5rem"
2578
2367
  },
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
- }
2660
- },
2661
2368
  dropdown: {
2662
- width: "2.5rem"
2369
+ width: "2.5rem",
2370
+ color: "var(--color-icon-subtlest)"
2663
2371
  },
2664
2372
  overlay: {
2373
+ background: "var(--color-elevation-surface-default)",
2374
+ borderColor: "var(--color-border-default)",
2665
2375
  borderRadius: "0.375rem",
2666
2376
  color: "{overlay.select.color}",
2667
2377
  shadow: "{overlay.select.shadow}"
@@ -2674,51 +2384,44 @@ const BCCPreset = definePreset(Aura, {
2674
2384
  }
2675
2385
  },
2676
2386
  option: {
2387
+ focusBackground: "var(--color-background-accent-gray-subtle-hover)",
2388
+ selectedBackground: "var(--color-background-brand-subtlest-default)",
2389
+ selectedFocusBackground: "var(--color-background-brand-subtler-default)",
2390
+ color: "var(--color-text-subtle)",
2391
+ focusColor: "var(--color-text-default)",
2392
+ selectedColor: "var(--color-text-selected)",
2393
+ selectedFocusColor: "var(--color-text-selected)",
2677
2394
  padding: "0.5rem 0.75rem",
2678
2395
  borderRadius: "0.25rem",
2679
2396
  gap: "0.5rem"
2680
2397
  },
2681
2398
  optionGroup: {
2399
+ background: "var(--color-elevation-surface-default)",
2400
+ color: "var(--color-text-subtlest)",
2682
2401
  fontWeight: "{list.option.group.font.weight}",
2683
2402
  padding: "0.5rem 0.75rem"
2684
2403
  },
2685
2404
  chip: {
2686
2405
  borderRadius: "0.25rem"
2687
2406
  },
2407
+ clearIcon: {
2408
+ color: "var(--color-icon-subtlest)"
2409
+ },
2688
2410
  emptyMessage: {
2689
2411
  padding: "0.5rem 0.75rem"
2690
2412
  }
2691
2413
  },
2692
2414
  progressbar: {
2693
2415
  root: {
2416
+ background: "var(--color-background-accent-gray-default)",
2694
2417
  borderRadius: "0.375rem",
2695
2418
  height: "1.25rem"
2696
2419
  },
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
- }
2420
+ value: {
2421
+ background: "var(--color-background-brand-bolder-default)"
2720
2422
  },
2721
2423
  label: {
2424
+ color: "var(--color-text-inverse)",
2722
2425
  fontSize: "0.75rem",
2723
2426
  fontWeight: "500"
2724
2427
  }
@@ -2727,10 +2430,24 @@ const BCCPreset = definePreset(Aura, {
2727
2430
  root: {
2728
2431
  width: "1.25rem",
2729
2432
  height: "1.25rem",
2433
+ background: "var(--color-elevation-surface-default)",
2434
+ checkedBackground: "var(--color-background-brand-bolder-default)",
2435
+ checkedHoverBackground: "var(--color-background-brand-bolder-hover)",
2436
+ disabledBackground: "var(--color-background-disabled-default)",
2437
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2438
+ borderColor: "var(--color-border-default)",
2439
+ hoverBorderColor: "var(--color-border-bold)",
2440
+ focusBorderColor: "var(--color-border-focused)",
2441
+ checkedBorderColor: "var(--color-background-brand-bolder-default)",
2442
+ checkedHoverBorderColor: "var(--color-background-brand-bolder-hover)",
2443
+ checkedFocusBorderColor: "var(--color-border-focused)",
2444
+ checkedDisabledBorderColor: "var(--color-border-disabled)",
2445
+ invalidBorderColor: "var(--color-border-danger)",
2730
2446
  shadow: "{form.field.shadow}",
2731
2447
  focusRing: {
2732
2448
  width: "{focus.ring.width}",
2733
2449
  style: "{focus.ring.style}",
2450
+ color: "var(--color-border-focused)",
2734
2451
  offset: "{focus.ring.offset}",
2735
2452
  shadow: "{focus.ring.shadow}"
2736
2453
  },
@@ -2744,60 +2461,11 @@ const BCCPreset = definePreset(Aura, {
2744
2461
  height: "1.5rem"
2745
2462
  }
2746
2463
  },
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
- }
2797
- }
2798
- },
2799
2464
  icon: {
2800
2465
  size: "0.75rem",
2466
+ checkedColor: "var(--color-icon-inverse)",
2467
+ checkedHoverColor: "var(--color-icon-inverse)",
2468
+ disabledColor: "var(--color-icon-disabled)",
2801
2469
  sm: {
2802
2470
  size: "0.5rem",
2803
2471
  borderRadius: "9999px"
@@ -2813,6 +2481,19 @@ const BCCPreset = definePreset(Aura, {
2813
2481
  },
2814
2482
  select: {
2815
2483
  root: {
2484
+ background: "var(--color-elevation-surface-default)",
2485
+ disabledBackground: "var(--color-background-disabled-default)",
2486
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2487
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
2488
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
2489
+ borderColor: "var(--color-background-accent-gray-hover)",
2490
+ hoverBorderColor: "var(--color-background-accent-gray-pressed)",
2491
+ focusBorderColor: "var(--color-border-focused)",
2492
+ invalidBorderColor: "var(--color-border-danger)",
2493
+ color: "var(--color-text-default)",
2494
+ disabledColor: "var(--color-text-disabled)",
2495
+ placeholderColor: "var(--color-text-subtlest)",
2496
+ invalidPlaceholderColor: "var(--color-text-danger)",
2816
2497
  shadow: "{form.field.shadow}",
2817
2498
  paddingX: "0.75rem",
2818
2499
  paddingY: "0.25rem",
@@ -2839,98 +2520,13 @@ const BCCPreset = definePreset(Aura, {
2839
2520
  },
2840
2521
  minHeight: "2.5rem"
2841
2522
  },
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
- }
2885
- },
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
- }
2929
- },
2930
2523
  dropdown: {
2931
- width: "2.5rem"
2524
+ width: "2.5rem",
2525
+ color: "var(--color-icon-subtlest)"
2932
2526
  },
2933
2527
  overlay: {
2528
+ background: "var(--color-elevation-surface-default)",
2529
+ borderColor: "var(--color-border-default)",
2934
2530
  borderRadius: "0.375rem",
2935
2531
  color: "{overlay.select.color}",
2936
2532
  shadow: "{overlay.select.shadow}"
@@ -2943,15 +2539,28 @@ const BCCPreset = definePreset(Aura, {
2943
2539
  }
2944
2540
  },
2945
2541
  option: {
2542
+ focusBackground: "var(--color-background-accent-gray-subtle-hover)",
2543
+ selectedBackground: "var(--color-background-brand-subtlest-default)",
2544
+ selectedFocusBackground: "var(--color-background-brand-subtler-default)",
2545
+ color: "var(--color-text-subtle)",
2546
+ focusColor: "var(--color-text-default)",
2547
+ selectedColor: "var(--color-text-selected)",
2548
+ selectedFocusColor: "var(--color-text-selected)",
2946
2549
  padding: "0.5rem 0.75rem",
2947
2550
  borderRadius: "0.25rem",
2948
2551
  gap: "0.5rem"
2949
2552
  },
2950
2553
  optionGroup: {
2554
+ background: "var(--color-elevation-surface-default)",
2555
+ color: "var(--color-text-subtlest)",
2951
2556
  fontWeight: "{list.option.group.font.weight}",
2952
2557
  padding: "0.5rem 0.75rem"
2953
2558
  },
2559
+ clearIcon: {
2560
+ color: "var(--color-icon-subtle)"
2561
+ },
2954
2562
  checkmark: {
2563
+ color: "var(--color-text-subtle)",
2955
2564
  gutterStart: "-0.375rem",
2956
2565
  gutterEnd: "0.375rem"
2957
2566
  },
@@ -2966,12 +2575,12 @@ const BCCPreset = definePreset(Aura, {
2966
2575
  colorScheme: {
2967
2576
  light: {
2968
2577
  root: {
2969
- invalidBorderColor: "#ca414e"
2578
+ invalidBorderColor: "var(--color-border-danger)"
2970
2579
  }
2971
2580
  },
2972
2581
  dark: {
2973
2582
  root: {
2974
- invalidBorderColor: "#ed6362"
2583
+ invalidBorderColor: "var(--color-border-danger)"
2975
2584
  }
2976
2585
  }
2977
2586
  }
@@ -2982,65 +2591,20 @@ const BCCPreset = definePreset(Aura, {
2982
2591
  },
2983
2592
  tablist: {
2984
2593
  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
- }
2594
+ background: "transparent",
2595
+ borderColor: "var(--color-border-default)"
3038
2596
  },
3039
2597
  tab: {
3040
2598
  background: "transparent",
3041
2599
  hoverBackground: "transparent",
3042
2600
  activeBackground: "transparent",
3043
2601
  borderWidth: "0 0 1px 0",
2602
+ borderColor: "var(--color-border-default)",
2603
+ hoverBorderColor: "var(--color-border-default)",
2604
+ activeBorderColor: "var(--color-border-selected)",
2605
+ color: "var(--color-text-subtlest)",
2606
+ hoverColor: "var(--color-text-default)",
2607
+ activeColor: "var(--color-text-selected)",
3044
2608
  padding: "0.75rem",
3045
2609
  fontWeight: "500",
3046
2610
  margin: "0 0 -1px 0",
@@ -3048,16 +2612,19 @@ const BCCPreset = definePreset(Aura, {
3048
2612
  focusRing: {
3049
2613
  width: "{focus.ring.width}",
3050
2614
  style: "{focus.ring.style}",
2615
+ color: "var(--color-border-focused)",
3051
2616
  offset: "-1px",
3052
2617
  shadow: "{focus.ring.shadow}"
3053
2618
  }
3054
2619
  },
3055
2620
  tabpanel: {
3056
2621
  background: "transparent",
2622
+ color: "var(--color-text-default)",
3057
2623
  padding: "1rem",
3058
2624
  focusRing: {
3059
2625
  width: "{focus.ring.width}",
3060
2626
  style: "{focus.ring.style}",
2627
+ color: "var(--color-border-focused)",
3061
2628
  offset: "{focus.ring.offset}",
3062
2629
  shadow: "{focus.ring.shadow}"
3063
2630
  }
@@ -3079,6 +2646,18 @@ const BCCPreset = definePreset(Aura, {
3079
2646
  height: "0.125rem",
3080
2647
  bottom: "-1px",
3081
2648
  background: "{primary.color}"
2649
+ },
2650
+ colorScheme: {
2651
+ light: {
2652
+ navButton: {
2653
+ shadow: "0 0 10px 50px rgba(255, 255, 255, 0.6)"
2654
+ }
2655
+ },
2656
+ dark: {
2657
+ navButton: {
2658
+ shadow: "0 0 10px 50px #0F172A80"
2659
+ }
2660
+ }
3082
2661
  }
3083
2662
  },
3084
2663
  tag: {
@@ -3096,62 +2675,62 @@ const BCCPreset = definePreset(Aura, {
3096
2675
  colorScheme: {
3097
2676
  light: {
3098
2677
  primary: {
3099
- background: "#d2eeeb",
3100
- color: "#0b3633"
2678
+ background: "var(--color-background-brand-subtler-default)",
2679
+ color: "var(--color-text-brand-bold)"
3101
2680
  },
3102
2681
  secondary: {
3103
- background: "#f0f1f2",
3104
- color: "#1e1f21"
2682
+ background: "var(--color-background-accent-gray-subtle-default)",
2683
+ color: "var(--color-text-accent-gray-bold)"
3105
2684
  },
3106
2685
  success: {
3107
- background: "#cbf3c9",
3108
- color: "#073734"
2686
+ background: "var(--color-background-accent-green-subtler-default)",
2687
+ color: "var(--color-text-accent-green-bold)"
3109
2688
  },
3110
2689
  info: {
3111
- background: "#d9ecff",
3112
- color: "#212c64"
2690
+ background: "var(--color-background-accent-blue-subtler-default)",
2691
+ color: "var(--color-text-accent-blue-bold)"
3113
2692
  },
3114
2693
  warn: {
3115
- background: "#fee3c1",
3116
- color: "#5d1712"
2694
+ background: "var(--color-background-accent-orange-subtler-default)",
2695
+ color: "var(--color-text-accent-orange-bold)"
3117
2696
  },
3118
2697
  danger: {
3119
- background: "#fee2dd",
3120
- color: "#630d2e"
2698
+ background: "var(--color-background-accent-red-subtler-default)",
2699
+ color: "var(--color-text-accent-red-bold)"
3121
2700
  },
3122
2701
  contrast: {
3123
- background: "#3b3d42",
3124
- color: "#ffffff"
2702
+ background: "var(--color-background-accent-gray-bolder-default)",
2703
+ color: "var(--color-text-inverse)"
3125
2704
  }
3126
2705
  },
3127
2706
  dark: {
3128
2707
  primary: {
3129
- background: "#0b3633",
3130
- color: "#a0cec8"
2708
+ background: "var(--color-background-brand-subtler-default)",
2709
+ color: "var(--color-text-brand-bold)"
3131
2710
  },
3132
2711
  secondary: {
3133
- background: "#242528",
3134
- color: "#e2e3e4"
2712
+ background: "var(--color-background-accent-gray-subtle-default)",
2713
+ color: "var(--color-text-accent-gray-bold)"
3135
2714
  },
3136
2715
  success: {
3137
- background: "#073734",
3138
- color: "#cbf3c9"
2716
+ background: "var(--color-background-accent-green-subtler-default)",
2717
+ color: "var(--color-text-accent-green-bold)"
3139
2718
  },
3140
2719
  info: {
3141
- background: "#212c64",
3142
- color: "#d9ecff"
2720
+ background: "var(--color-background-accent-blue-subtler-default)",
2721
+ color: "var(--color-text-accent-blue-bold)"
3143
2722
  },
3144
2723
  warn: {
3145
- background: "#5d1712",
3146
- color: "#fee3c1"
2724
+ background: "var(--color-background-accent-orange-subtler-default)",
2725
+ color: "var(--color-text-accent-orange-bold)"
3147
2726
  },
3148
2727
  danger: {
3149
- background: "#630d2e",
3150
- color: "#fee2dd"
2728
+ background: "var(--color-background-accent-red-subtler-default)",
2729
+ color: "var(--color-text-accent-red-bold)"
3151
2730
  },
3152
2731
  contrast: {
3153
- background: "#bfc1c4",
3154
- color: "#1f1f21"
2732
+ background: "var(--color-background-accent-gray-bolder-default)",
2733
+ color: "var(--color-text-inverse)"
3155
2734
  }
3156
2735
  }
3157
2736
  },
@@ -3176,6 +2755,19 @@ const BCCPreset = definePreset(Aura, {
3176
2755
  },
3177
2756
  textarea: {
3178
2757
  root: {
2758
+ background: "var(--color-elevation-surface-default)",
2759
+ disabledBackground: "var(--color-background-disabled-default)",
2760
+ filledBackground: "var(--color-background-accent-gray-subtler-default)",
2761
+ filledHoverBackground: "var(--color-background-accent-gray-subtler-default)",
2762
+ filledFocusBackground: "var(--color-background-accent-gray-subtler-default)",
2763
+ borderColor: "var(--color-border-default)",
2764
+ hoverBorderColor: "var(--color-border-bold)",
2765
+ focusBorderColor: "var(--color-border-focused)",
2766
+ invalidBorderColor: "var(--color-border-danger)",
2767
+ color: "var(--color-text-default)",
2768
+ disabledColor: "var(--color-text-disabled)",
2769
+ placeholderColor: "var(--color-text-subtlest)",
2770
+ invalidPlaceholderColor: "var(--color-text-danger)",
3179
2771
  shadow: "{form.field.shadow}",
3180
2772
  paddingX: "0.75rem",
3181
2773
  paddingY: "0.25rem",
@@ -3200,42 +2792,6 @@ const BCCPreset = definePreset(Aura, {
3200
2792
  },
3201
2793
  gap: "1rem",
3202
2794
  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
- }
3239
2795
  }
3240
2796
  },
3241
2797
  toast: {
@@ -3249,7 +2805,7 @@ const BCCPreset = definePreset(Aura, {
3249
2805
  size: "1.25rem"
3250
2806
  },
3251
2807
  content: {
3252
- padding: "{overlay.popover.padding}",
2808
+ padding: "0.75rem 1rem",
3253
2809
  gap: "0.5rem"
3254
2810
  },
3255
2811
  text: {
@@ -3282,85 +2838,85 @@ const BCCPreset = definePreset(Aura, {
3282
2838
  blur: "1.5"
3283
2839
  },
3284
2840
  info: {
3285
- background: "#f6fbff",
3286
- borderColor: "#446add",
3287
- color: "#273c8f",
3288
- detailColor: "#505258",
2841
+ background: "var(--color-background-information-default)",
2842
+ borderColor: "var(--color-border-information)",
2843
+ color: "var(--color-text-information)",
2844
+ detailColor: "var(--color-text-subtle)",
3289
2845
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
3290
2846
  closeButton: {
3291
- hoverBackground: "#d9ecff",
2847
+ hoverBackground: "var(--color-background-information-hover)",
3292
2848
  focusRing: {
3293
- color: "#446add",
2849
+ color: "var(--color-border-information)",
3294
2850
  shadow: "0 0 0 0 #00000000"
3295
2851
  }
3296
2852
  }
3297
2853
  },
3298
2854
  success: {
3299
- background: "#efffed",
3300
- borderColor: "#09825d",
3301
- color: "#094c3b",
3302
- detailColor: "#505258",
2855
+ background: "var(--color-background-success-default)",
2856
+ borderColor: "var(--color-border-success)",
2857
+ color: "var(--color-text-success)",
2858
+ detailColor: "var(--color-text-subtle)",
3303
2859
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
3304
2860
  closeButton: {
3305
- hoverBackground: "#cbf3c9",
2861
+ hoverBackground: "var(--color-background-success-hover)",
3306
2862
  focusRing: {
3307
- color: "#09825d",
2863
+ color: "var(--color-border-success)",
3308
2864
  shadow: "0 0 0 0 #00000000"
3309
2865
  }
3310
2866
  }
3311
2867
  },
3312
2868
  warn: {
3313
- background: "#fdf8e9",
3314
- borderColor: "#b55919",
3315
- color: "#653805",
3316
- detailColor: "#505258",
2869
+ background: "var(--color-background-warning-default)",
2870
+ borderColor: "var(--color-border-warning)",
2871
+ color: "var(--color-text-warning-default)",
2872
+ detailColor: "var(--color-text-subtle)",
3317
2873
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
3318
2874
  closeButton: {
3319
- hoverBackground: "#f8e6a0",
2875
+ hoverBackground: "var(--color-background-warning-hover)",
3320
2876
  focusRing: {
3321
- color: "#b55919",
2877
+ color: "var(--color-border-warning)",
3322
2878
  shadow: "0 0 0 0 #00000000"
3323
2879
  }
3324
2880
  }
3325
2881
  },
3326
2882
  error: {
3327
- background: "#fff8f3",
3328
- borderColor: "#ca414e",
3329
- color: "#811436",
3330
- detailColor: "#505258",
2883
+ background: "var(--color-background-danger-default)",
2884
+ borderColor: "var(--color-border-danger)",
2885
+ color: "var(--color-text-danger)",
2886
+ detailColor: "var(--color-text-subtle)",
3331
2887
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
3332
2888
  closeButton: {
3333
- hoverBackground: "#fee2dd",
2889
+ hoverBackground: "var(--color-background-danger-hover)",
3334
2890
  focusRing: {
3335
- color: "#ca414e",
2891
+ color: "var(--color-border-danger)",
3336
2892
  shadow: "0 0 0 0 #00000000"
3337
2893
  }
3338
2894
  }
3339
2895
  },
3340
2896
  secondary: {
3341
- background: "#f8f8f8",
3342
- borderColor: "#7d818a",
3343
- color: "#292a2e",
3344
- detailColor: "#505258",
2897
+ background: "var(--color-background-accent-gray-subtler-default)",
2898
+ borderColor: "var(--color-border-accent-gray)",
2899
+ color: "var(--color-text-default)",
2900
+ detailColor: "var(--color-text-subtle)",
3345
2901
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
3346
2902
  closeButton: {
3347
- hoverBackground: "#f0f1f2",
2903
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
3348
2904
  focusRing: {
3349
- color: "#7d818a",
2905
+ color: "var(--color-border-accent-gray)",
3350
2906
  shadow: "0 0 0 0 #00000000"
3351
2907
  }
3352
2908
  }
3353
2909
  },
3354
2910
  contrast: {
3355
- background: "#1e1f21",
3356
- borderColor: "#ffffff",
3357
- color: "#ffffff",
3358
- detailColor: "#ffffff",
2911
+ background: "var(--color-background-accent-gray-boldest-default)",
2912
+ borderColor: "var(--color-border-inverse)",
2913
+ color: "var(--color-text-inverse)",
2914
+ detailColor: "var(--color-text-inverse)",
3359
2915
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
3360
2916
  closeButton: {
3361
- hoverBackground: "#292a2e",
2917
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
3362
2918
  focusRing: {
3363
- color: "#ffffff",
2919
+ color: "var(--color-border-inverse)",
3364
2920
  shadow: "0 0 0 0 #00000000"
3365
2921
  }
3366
2922
  }
@@ -3371,85 +2927,85 @@ const BCCPreset = definePreset(Aura, {
3371
2927
  blur: "10"
3372
2928
  },
3373
2929
  info: {
3374
- background: "#091e47",
3375
- borderColor: "#608ef6",
3376
- color: "#a6cdfd",
3377
- detailColor: "#a9abaf",
2930
+ background: "var(--color-background-information-default)",
2931
+ borderColor: "var(--color-border-information)",
2932
+ color: "var(--color-text-information)",
2933
+ detailColor: "var(--color-text-subtle)",
3378
2934
  shadow: "0 4px 8px 0 rgba(2, 5, 10, 0.04)",
3379
2935
  closeButton: {
3380
- hoverBackground: "#212c64",
2936
+ hoverBackground: "var(--color-background-information-hover)",
3381
2937
  focusRing: {
3382
- color: "#608ef6",
2938
+ color: "var(--color-border-information)",
3383
2939
  shadow: "none"
3384
2940
  }
3385
2941
  }
3386
2942
  },
3387
2943
  success: {
3388
- background: "#032429",
3389
- borderColor: "#1ca673",
3390
- color: "#83d895",
3391
- detailColor: "#a9abaf",
2944
+ background: "var(--color-background-success-default)",
2945
+ borderColor: "var(--color-border-success)",
2946
+ color: "var(--color-text-success)",
2947
+ detailColor: "var(--color-text-subtle)",
3392
2948
  shadow: "0 4px 8px 0 rgba(1, 8, 4, 0.04)",
3393
2949
  closeButton: {
3394
- hoverBackground: "#073734",
2950
+ hoverBackground: "var(--color-background-success-hover)",
3395
2951
  focusRing: {
3396
- color: "#1ca673",
2952
+ color: "var(--color-border-success)",
3397
2953
  shadow: "none"
3398
2954
  }
3399
2955
  }
3400
2956
  },
3401
2957
  warn: {
3402
- background: "#2d1f00",
3403
- borderColor: "#bc870d",
3404
- color: "#e9c348",
3405
- detailColor: "#a9abaf",
2958
+ background: "var(--color-background-warning-default)",
2959
+ borderColor: "var(--color-border-warning)",
2960
+ color: "var(--color-text-warning-default)",
2961
+ detailColor: "var(--color-text-subtle)",
3406
2962
  shadow: "0 4px 8px 0 rgba(9, 7, 0, 0.04)",
3407
2963
  closeButton: {
3408
- hoverBackground: "#4b2c04",
2964
+ hoverBackground: "var(--color-background-warning-hover)",
3409
2965
  focusRing: {
3410
- color: "#bc870d",
2966
+ color: "var(--color-border-warning)",
3411
2967
  shadow: "none"
3412
2968
  }
3413
2969
  }
3414
2970
  },
3415
2971
  error: {
3416
- background: "#440223",
3417
- borderColor: "#ed6362",
3418
- color: "#fab6ad",
3419
- detailColor: "#a9abaf",
2972
+ background: "var(--color-background-danger-default)",
2973
+ borderColor: "var(--color-border-danger)",
2974
+ color: "var(--color-text-danger)",
2975
+ detailColor: "var(--color-text-subtle)",
3420
2976
  shadow: "0 4px 8px 0 rgba(10, 3, 3, 0.04)",
3421
2977
  closeButton: {
3422
- hoverBackground: "#630d2e",
2978
+ hoverBackground: "var(--color-background-danger-hover)",
3423
2979
  focusRing: {
3424
- color: "#ed6362",
2980
+ color: "var(--color-border-danger)",
3425
2981
  shadow: "none"
3426
2982
  }
3427
2983
  }
3428
2984
  },
3429
2985
  secondary: {
3430
- background: "#1f1f21",
3431
- borderColor: "#7e8188",
3432
- color: "#e2e3e4",
3433
- detailColor: "#a9abaf",
2986
+ background: "var(--color-background-accent-gray-subtler-default)",
2987
+ borderColor: "var(--color-border-accent-gray)",
2988
+ color: "var(--color-text-default)",
2989
+ detailColor: "var(--color-text-subtle)",
3434
2990
  shadow: "0 4px 8px 0 rgba(4, 5, 6, 0.04)",
3435
2991
  closeButton: {
3436
- hoverBackground: "#242528",
2992
+ hoverBackground: "var(--color-background-accent-gray-subtler-hover)",
3437
2993
  focusRing: {
3438
- color: "#7e8188",
2994
+ color: "var(--color-border-accent-gray)",
3439
2995
  shadow: "none"
3440
2996
  }
3441
2997
  }
3442
2998
  },
3443
2999
  contrast: {
3444
- background: "#e2e3e4",
3445
- borderColor: "#18191a",
3446
- color: "#1f1f21",
3447
- detailColor: "#1f1f21",
3000
+ background: "var(--color-background-accent-gray-boldest-default)",
3001
+ borderColor: "var(--color-border-inverse)",
3002
+ color: "var(--color-text-inverse)",
3003
+ detailColor: "var(--color-text-inverse)",
3448
3004
  shadow: "0 4px 8px 0 rgba(0, 0, 1, 0.04)",
3449
3005
  closeButton: {
3450
- hoverBackground: "#cecfd2",
3006
+ hoverBackground: "var(--color-background-accent-gray-boldest-hover)",
3451
3007
  focusRing: {
3452
- color: "#18191a",
3008
+ color: "var(--color-border-inverse)",
3453
3009
  shadow: "none"
3454
3010
  }
3455
3011
  }
@@ -3463,9 +3019,14 @@ const BCCPreset = definePreset(Aura, {
3463
3019
  borderRadius: "0.5rem",
3464
3020
  gap: "0.5rem",
3465
3021
  fontWeight: "500",
3022
+ disabledBackground: "var(--color-background-disabled-default)",
3023
+ disabledBorderColor: "var(--color-background-disabled-default)",
3024
+ disabledColor: "var(--color-text-disabled)",
3025
+ invalidBorderColor: "var(--color-border-danger)",
3466
3026
  focusRing: {
3467
3027
  width: "{focus.ring.width}",
3468
3028
  style: "{focus.ring.style}",
3029
+ color: "var(--color-border-focused)",
3469
3030
  offset: "{focus.ring.offset}",
3470
3031
  shadow: "{focus.ring.shadow}"
3471
3032
  },
@@ -3479,63 +3040,8 @@ const BCCPreset = definePreset(Aura, {
3479
3040
  padding: "0.25rem"
3480
3041
  }
3481
3042
  },
3482
- colorScheme: {
3483
- light: {
3484
- 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"
3506
- },
3507
- content: {
3508
- checkedBackground: "#ffffff"
3509
- }
3510
- },
3511
- dark: {
3512
- 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"
3534
- },
3535
- content: {
3536
- checkedBackground: "#1f1f21"
3537
- }
3538
- }
3043
+ icon: {
3044
+ disabledColor: "var(--color-icon-disabled)"
3539
3045
  },
3540
3046
  content: {
3541
3047
  padding: "0.25rem 0.5rem",
@@ -3554,6 +3060,48 @@ const BCCPreset = definePreset(Aura, {
3554
3060
  },
3555
3061
  minHeight: "2rem"
3556
3062
  },
3063
+ colorScheme: {
3064
+ light: {
3065
+ root: {
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)"
3074
+ },
3075
+ content: {
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)"
3082
+ }
3083
+ },
3084
+ dark: {
3085
+ root: {
3086
+ background: "var(--color-background-accent-gray-default)",
3087
+ checkedBackground: "var(--color-background-accent-gray-default)",
3088
+ hoverBackground: "var(--color-background-accent-gray-default)",
3089
+ borderColor: "var(--color-background-accent-gray-default)",
3090
+ color: "var(--color-text-subtle)",
3091
+ hoverColor: "var(--color-text-default)",
3092
+ checkedColor: "var(--color-text-default)",
3093
+ checkedBorderColor: "var(--color-background-accent-gray-default)"
3094
+ },
3095
+ content: {
3096
+ checkedBackground: "var(--color-elevation-surface-default)"
3097
+ },
3098
+ icon: {
3099
+ color: "var(--color-icon-subtle)",
3100
+ hoverColor: "var(--color-icon-default)",
3101
+ checkedColor: "var(--color-icon-default)"
3102
+ }
3103
+ }
3104
+ },
3557
3105
  minHeight: "2.5rem",
3558
3106
  lineHeight: "16px",
3559
3107
  sm: {
@@ -3596,42 +3144,42 @@ const BCCPreset = definePreset(Aura, {
3596
3144
  colorScheme: {
3597
3145
  light: {
3598
3146
  root: {
3599
- background: "#dddee1",
3600
- disabledBackground: "rgba(5, 21, 36, 0.06)",
3601
- hoverBackground: "#b7b9be",
3602
- checkedBackground: "#0c625c",
3603
- checkedHoverBackground: "#0c625c"
3147
+ background: "var(--color-background-accent-gray-default)",
3148
+ disabledBackground: "var(--color-background-disabled-default)",
3149
+ hoverBackground: "var(--color-background-accent-gray-hover)",
3150
+ checkedBackground: "var(--color-background-brand-bolder-default)",
3151
+ checkedHoverBackground: "var(--color-background-brand-bolder-default)"
3604
3152
  },
3605
3153
  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"
3154
+ background: "var(--color-elevation-surface-default)",
3155
+ disabledBackground: "var(--color-icon-disabled)",
3156
+ hoverBackground: "var(--color-elevation-surface-hovered)",
3157
+ checkedBackground: "var(--color-elevation-surface-default)",
3158
+ checkedHoverBackground: "var(--color-elevation-surface-default)",
3159
+ color: "var(--color-text-subtlest)",
3160
+ hoverColor: "var(--color-text-default)",
3161
+ checkedColor: "var(--color-background-brand-bolder-default)",
3162
+ checkedHoverColor: "var(--color-background-brand-bolder-hover)"
3615
3163
  }
3616
3164
  },
3617
3165
  dark: {
3618
3166
  root: {
3619
- background: "#303134",
3620
- disabledBackground: "rgba(227, 228, 242, 0.12)",
3621
- hoverBackground: "#4b4d51",
3622
- checkedBackground: "#6fb5ad",
3623
- checkedHoverBackground: "#6fb5ad"
3167
+ background: "var(--color-background-accent-gray-default)",
3168
+ disabledBackground: "var(--color-background-disabled-default)",
3169
+ hoverBackground: "var(--color-background-accent-gray-hover)",
3170
+ checkedBackground: "var(--color-background-brand-bolder-default)",
3171
+ checkedHoverBackground: "var(--color-background-brand-bolder-default)"
3624
3172
  },
3625
3173
  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"
3174
+ background: "var(--color-elevation-surface-default)",
3175
+ disabledBackground: "var(--color-icon-disabled)",
3176
+ hoverBackground: "var(--color-elevation-surface-hovered)",
3177
+ checkedBackground: "var(--color-elevation-surface-default)",
3178
+ checkedHoverBackground: "var(--color-elevation-surface-default)",
3179
+ color: "var(--color-text-subtlest)",
3180
+ hoverColor: "var(--color-text-default)",
3181
+ checkedColor: "var(--color-background-brand-bolder-default)",
3182
+ checkedHoverColor: "var(--color-background-brand-bolder-hover)"
3635
3183
  }
3636
3184
  }
3637
3185
  }