@blackbaud/skyux-design-tokens 6.10.0 → 6.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +196 -193
  4. package/assets/scss/blackbaud.css +291 -290
  5. package/bundles/base.css +196 -193
  6. package/bundles/base_blackbaud_public-api.css +487 -483
  7. package/bundles/base_public-api.css +196 -193
  8. package/bundles/blackbaud.css +291 -290
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## [6.11.1](https://github.com/blackbaud/skyux-design-tokens/compare/6.11.0...6.11.1) (2026-09-17)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * dark mode tweaks ([#479](https://github.com/blackbaud/skyux-design-tokens/issues/479)) ([f4363ef](https://github.com/blackbaud/skyux-design-tokens/commit/f4363efe20c17734bc3e444b219d8e987e446466))
9
+ * underscores for color names ([#478](https://github.com/blackbaud/skyux-design-tokens/issues/478)) ([73a4e16](https://github.com/blackbaud/skyux-design-tokens/commit/73a4e16ab6c8a27ca1dee1c6adbab20e74338a79))
10
+ * warning colors in light mode ([#483](https://github.com/blackbaud/skyux-design-tokens/issues/483)) ([ea4a7e3](https://github.com/blackbaud/skyux-design-tokens/commit/ea4a7e34b49f381d315182afed321e20a06221ad))
11
+
12
+ ## [6.11.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.10.0...6.11.0) (2026-09-08)
13
+
14
+
15
+ ### Features
16
+
17
+ * add color scheme token ([#472](https://github.com/blackbaud/skyux-design-tokens/issues/472)) ([c58a798](https://github.com/blackbaud/skyux-design-tokens/commit/c58a798c0dc2fa49c40453f23c7629e1041c2c7f))
18
+
3
19
  ## [6.10.0](https://github.com/blackbaud/skyux-design-tokens/compare/6.9.0...6.10.0) (2026-09-01)
4
20
 
5
21
 
package/assets/assets.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "fonts": [],
3
3
  "images": {
4
4
  "favicon": {
5
- "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -86,17 +86,17 @@
86
86
  --bb-color-blue-800: #1a4080;
87
87
  --bb-color-blue-850: #16366b;
88
88
  --bb-color-blue-900: #112b55;
89
- --bb-color-blue-dark-100: #ddf0ff;
90
- --bb-color-blue-dark-1000: #00112b;
91
- --bb-color-blue-dark-200: #b4dbff;
92
- --bb-color-blue-dark-300: #83c1ff;
93
- --bb-color-blue-dark-375: #79adf1;
94
- --bb-color-blue-dark-400: #59a6ff;
95
- --bb-color-blue-dark-500: #2885ef;
96
- --bb-color-blue-dark-600: #0066cd;
97
- --bb-color-blue-dark-700: #0049a1;
98
- --bb-color-blue-dark-800: #003275;
99
- --bb-color-blue-dark-900: #00204b;
89
+ --bb-color-blue_dark-100: #ddf0ff;
90
+ --bb-color-blue_dark-1000: #00112b;
91
+ --bb-color-blue_dark-200: #b4dbff;
92
+ --bb-color-blue_dark-300: #83c1ff;
93
+ --bb-color-blue_dark-375: #79adf1;
94
+ --bb-color-blue_dark-400: #59a6ff;
95
+ --bb-color-blue_dark-500: #2885ef;
96
+ --bb-color-blue_dark-600: #0066cd;
97
+ --bb-color-blue_dark-700: #0049a1;
98
+ --bb-color-blue_dark-800: #003275;
99
+ --bb-color-blue_dark-900: #00204b;
100
100
  --bb-color-brand-impact_green: #0cd973;
101
101
  --bb-color-brand-trusted_blue: #004054;
102
102
  --bb-color-gray-100: #eeeeef;
@@ -129,17 +129,17 @@
129
129
  --bb-color-green-700: #077e43;
130
130
  --bb-color-green-800: #055f33;
131
131
  --bb-color-green-900: #044525;
132
- --bb-color-green-dark-100: #daf7e3;
133
- --bb-color-green-dark-1000: #001905;
134
- --bb-color-green-dark-200: #aee8c1;
135
- --bb-color-green-dark-300: #72d699;
136
- --bb-color-green-dark-400: #35c177;
137
- --bb-color-green-dark-500: #00a452;
138
- --bb-color-green-dark-600: #008435;
139
- --bb-color-green-dark-700: #00641f;
140
- --bb-color-green-dark-800: #004712;
141
- --bb-color-green-dark-900: #002d0c;
142
- --bb-color-oklch-blue-375: #79adf1;
132
+ --bb-color-green_dark-100: #daf7e3;
133
+ --bb-color-green_dark-1000: #001905;
134
+ --bb-color-green_dark-200: #aee8c1;
135
+ --bb-color-green_dark-300: #72d699;
136
+ --bb-color-green_dark-400: #35c177;
137
+ --bb-color-green_dark-500: #00a452;
138
+ --bb-color-green_dark-600: #008435;
139
+ --bb-color-green_dark-700: #00641f;
140
+ --bb-color-green_dark-800: #004712;
141
+ --bb-color-green_dark-900: #002d0c;
142
+ --bb-color-oklch_blue-375: #79adf1;
143
143
  --bb-color-orange-100: #feede0;
144
144
  --bb-color-orange-1000: #451d00;
145
145
  --bb-color-orange-1100: #311400;
@@ -154,16 +154,16 @@
154
154
  --bb-color-orange-700: #a74500;
155
155
  --bb-color-orange-800: #7f3500;
156
156
  --bb-color-orange-900: #622900;
157
- --bb-color-orange-dark-100: #ffe9df;
158
- --bb-color-orange-dark-1000: #200b03;
159
- --bb-color-orange-dark-200: #fbccb6;
160
- --bb-color-orange-dark-300: #f3aa88;
161
- --bb-color-orange-dark-400: #e5895d;
162
- --bb-color-orange-dark-500: #ca6633;
163
- --bb-color-orange-dark-600: #a74500;
164
- --bb-color-orange-dark-700: #822f00;
165
- --bb-color-orange-dark-800: #5c2000;
166
- --bb-color-orange-dark-900: #3a1503;
157
+ --bb-color-orange_dark-100: #ffe9df;
158
+ --bb-color-orange_dark-1000: #200b03;
159
+ --bb-color-orange_dark-200: #fbccb6;
160
+ --bb-color-orange_dark-300: #f3aa88;
161
+ --bb-color-orange_dark-400: #e5895d;
162
+ --bb-color-orange_dark-500: #ca6633;
163
+ --bb-color-orange_dark-600: #a74500;
164
+ --bb-color-orange_dark-700: #822f00;
165
+ --bb-color-orange_dark-800: #5c2000;
166
+ --bb-color-orange_dark-900: #3a1503;
167
167
  --bb-color-pink-100: #fdecfd;
168
168
  --bb-color-pink-1000: #3f193d;
169
169
  --bb-color-pink-1100: #30132f;
@@ -178,16 +178,16 @@
178
178
  --bb-color-pink-700: #a542a0;
179
179
  --bb-color-pink-800: #853581;
180
180
  --bb-color-pink-900: #5c2559;
181
- --bb-color-pink-dark-100: #fbe8f9;
182
- --bb-color-pink-dark-1000: #1b0a1b;
183
- --bb-color-pink-dark-200: #f0c9ec;
184
- --bb-color-pink-dark-300: #e3a6de;
185
- --bb-color-pink-dark-400: #d285cd;
186
- --bb-color-pink-dark-500: #b562b1;
187
- --bb-color-pink-dark-600: #923f8f;
188
- --bb-color-pink-dark-700: #722c70;
189
- --bb-color-pink-dark-800: #501d4f;
190
- --bb-color-pink-dark-900: #331431;
181
+ --bb-color-pink_dark-100: #fbe8f9;
182
+ --bb-color-pink_dark-1000: #1b0a1b;
183
+ --bb-color-pink_dark-200: #f0c9ec;
184
+ --bb-color-pink_dark-300: #e3a6de;
185
+ --bb-color-pink_dark-400: #d285cd;
186
+ --bb-color-pink_dark-500: #b562b1;
187
+ --bb-color-pink_dark-600: #923f8f;
188
+ --bb-color-pink_dark-700: #722c70;
189
+ --bb-color-pink_dark-800: #501d4f;
190
+ --bb-color-pink_dark-900: #331431;
191
191
  --bb-color-purple-100: #f2e6fd;
192
192
  --bb-color-purple-1000: #351d49;
193
193
  --bb-color-purple-1100: #271535;
@@ -202,16 +202,16 @@
202
202
  --bb-color-purple-700: #8d4ec2;
203
203
  --bb-color-purple-800: #6d3c96;
204
204
  --bb-color-purple-900: #4d2b6a;
205
- --bb-color-purple-dark-100: #f4e9ff;
206
- --bb-color-purple-dark-1000: #170b23;
207
- --bb-color-purple-dark-200: #e3ccff;
208
- --bb-color-purple-dark-300: #d0aafb;
209
- --bb-color-purple-dark-400: #bc89f1;
210
- --bb-color-purple-dark-500: #9f65d7;
211
- --bb-color-purple-dark-600: #7a3daf;
212
- --bb-color-purple-dark-700: #622e8f;
213
- --bb-color-purple-dark-800: #441f65;
214
- --bb-color-purple-dark-900: #2b153f;
205
+ --bb-color-purple_dark-100: #f4e9ff;
206
+ --bb-color-purple_dark-1000: #170b23;
207
+ --bb-color-purple_dark-200: #e3ccff;
208
+ --bb-color-purple_dark-300: #d0aafb;
209
+ --bb-color-purple_dark-400: #bc89f1;
210
+ --bb-color-purple_dark-500: #9f65d7;
211
+ --bb-color-purple_dark-600: #7a3daf;
212
+ --bb-color-purple_dark-700: #622e8f;
213
+ --bb-color-purple_dark-800: #441f65;
214
+ --bb-color-purple_dark-900: #2b153f;
215
215
  --bb-color-red-100: #fae7e8;
216
216
  --bb-color-red-1000: #4a1415;
217
217
  --bb-color-red-1100: #380f10;
@@ -226,38 +226,38 @@
226
226
  --bb-color-red-700: #ae2e31;
227
227
  --bb-color-red-800: #822325;
228
228
  --bb-color-red-900: #641b1c;
229
- --bb-color-red-dark-100: #fdecea;
230
- --bb-color-red-dark-1000: #27090a;
231
- --bb-color-red-dark-200: #facac8;
232
- --bb-color-red-dark-300: #f59a98;
233
- --bb-color-red-dark-400: #e96063;
234
- --bb-color-red-dark-500: #d93a3d;
235
- --bb-color-red-dark-600: #b52f32;
236
- --bb-color-red-dark-700: #912528;
237
- --bb-color-red-dark-800: #6d1b1d;
238
- --bb-color-red-dark-900: #4a1213;
229
+ --bb-color-red_dark-100: #fdecea;
230
+ --bb-color-red_dark-1000: #27090a;
231
+ --bb-color-red_dark-200: #facac8;
232
+ --bb-color-red_dark-300: #f59a98;
233
+ --bb-color-red_dark-400: #e96063;
234
+ --bb-color-red_dark-500: #d93a3d;
235
+ --bb-color-red_dark-600: #b52f32;
236
+ --bb-color-red_dark-700: #912528;
237
+ --bb-color-red_dark-800: #6d1b1d;
238
+ --bb-color-red_dark-900: #4a1213;
239
239
  --bb-color-rgba-black-70: rgba(0, 0, 0, 0.7);
240
240
  --bb-color-rgba-blue-600-25: rgba(43, 107, 213, 0.25);
241
241
  --bb-color-rgba-blue-600-35: rgba(43, 107, 213, 0.35);
242
242
  --bb-color-rgba-blue-600-50: rgba(43, 107, 213, 0.5);
243
- --bb-color-rgba-blue-dark-600-20: rgba(0, 102, 205, 0.2);
243
+ --bb-color-rgba-blue_dark-600-20: rgba(0, 102, 205, 0.2);
244
244
  --bb-color-rgba-green-600-35: rgba(9, 156, 83, 0.35);
245
245
  --bb-color-rgba-green-600-50: rgba(9, 156, 83, 0.5);
246
246
  --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
247
- --bb-color-rgba-red-dark-600-35: rgba(181, 47, 50, 0.35);
248
- --bb-color-rgba-red-dark-600-50: rgba(181, 47, 50, 0.5);
247
+ --bb-color-rgba-red_dark-600-35: rgba(181, 47, 50, 0.35);
248
+ --bb-color-rgba-red_dark-600-50: rgba(181, 47, 50, 0.5);
249
249
  --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
250
- --bb-color-rgba-steel-fusion-100-5: rgba(243, 246, 249, 0.05);
251
- --bb-color-rgba-steel-fusion-1100-70: rgba(28, 34, 40, 0.7);
252
- --bb-color-rgba-steel-gray-100-10: rgba(245, 246, 247, 0.1);
253
- --bb-color-rgba-steel-gray-100-15: rgba(245, 246, 247, 0.15);
254
- --bb-color-rgba-steel-gray-100-25: rgba(245, 246, 247, 0.25);
255
- --bb-color-rgba-steel-gray-100-7: rgba(245, 246, 247, 0.07);
250
+ --bb-color-rgba-steel_fusion-100-5: rgba(243, 246, 249, 0.05);
251
+ --bb-color-rgba-steel_fusion-1100-70: rgba(28, 34, 40, 0.7);
252
+ --bb-color-rgba-steel_gray-100-10: rgba(245, 246, 247, 0.1);
253
+ --bb-color-rgba-steel_gray-100-15: rgba(245, 246, 247, 0.15);
254
+ --bb-color-rgba-steel_gray-100-25: rgba(245, 246, 247, 0.25);
255
+ --bb-color-rgba-steel_gray-100-7: rgba(245, 246, 247, 0.07);
256
256
  --bb-color-rgba-white-18: rgba(255, 255, 255, 0.18);
257
257
  --bb-color-rgba-white-5: rgba(255, 255, 255, 0.05);
258
258
  --bb-color-rgba-white-70: rgba(255, 255, 255, 0.7);
259
- --bb-color-rgba-yellow-dark-600-25: rgba(162, 81, 0, 0.25);
260
- --bb-color-rgba-yellow-dark-600-35: rgba(162, 81, 0, 0.35);
259
+ --bb-color-rgba-yellow_dark-600-25: rgba(162, 81, 0, 0.25);
260
+ --bb-color-rgba-yellow_dark-600-35: rgba(162, 81, 0, 0.35);
261
261
  --bb-color-scrim-heavy: rgba(0, 0, 0, 0.6);
262
262
  --bb-color-scrim-soft: rgba(37, 43, 51, 0.5);
263
263
  --bb-color-sky-100: #d6f7ff;
@@ -274,16 +274,16 @@
274
274
  --bb-color-sky-700: #007894;
275
275
  --bb-color-sky-800: #005b70;
276
276
  --bb-color-sky-900: #004252;
277
- --bb-color-sky-dark-100: #e3f1f7;
278
- --bb-color-sky-dark-1000: #051419;
279
- --bb-color-sky-dark-200: #bfdde9;
280
- --bb-color-sky-dark-300: #96c6d9;
281
- --bb-color-sky-dark-400: #6fafc7;
282
- --bb-color-sky-dark-500: #4791ab;
283
- --bb-color-sky-dark-600: #005f78;
284
- --bb-color-sky-dark-700: #0c556b;
285
- --bb-color-sky-dark-800: #083b4b;
286
- --bb-color-sky-dark-900: #09252f;
277
+ --bb-color-sky_dark-100: #e3f1f7;
278
+ --bb-color-sky_dark-1000: #051419;
279
+ --bb-color-sky_dark-200: #bfdde9;
280
+ --bb-color-sky_dark-300: #96c6d9;
281
+ --bb-color-sky_dark-400: #6fafc7;
282
+ --bb-color-sky_dark-500: #4791ab;
283
+ --bb-color-sky_dark-600: #005f78;
284
+ --bb-color-sky_dark-700: #0c556b;
285
+ --bb-color-sky_dark-800: #083b4b;
286
+ --bb-color-sky_dark-900: #09252f;
287
287
  --bb-color-slate-100: #f1f3f7;
288
288
  --bb-color-slate-1000: #1a2231;
289
289
  --bb-color-slate-1100: #141b26;
@@ -300,46 +300,46 @@
300
300
  --bb-color-slate-800: #32435e;
301
301
  --bb-color-slate-850: #2a384f;
302
302
  --bb-color-slate-900: #212c3f;
303
- --bb-color-steel-blue-dark-100: #617695;
304
- --bb-color-steel-blue-dark-1000: #06152e;
305
- --bb-color-steel-blue-dark-200: #566a88;
306
- --bb-color-steel-blue-dark-300: #4b5f7c;
307
- --bb-color-steel-blue-dark-400: #405371;
308
- --bb-color-steel-blue-dark-500: #354865;
309
- --bb-color-steel-blue-dark-600: #2b3e5a;
310
- --bb-color-steel-blue-dark-700: #21334e;
311
- --bb-color-steel-blue-dark-800: #172943;
312
- --bb-color-steel-blue-dark-900: #0e1f39;
313
- --bb-color-steel-fusion-100: #f3f6f9;
314
- --bb-color-steel-fusion-1000: #2a313c;
315
- --bb-color-steel-fusion-1050: #21282f;
316
- --bb-color-steel-fusion-1100: #1c2228;
317
- --bb-color-steel-fusion-1150: #181e25;
318
- --bb-color-steel-fusion-1200: #141a1f;
319
- --bb-color-steel-fusion-200: #e0e4e8;
320
- --bb-color-steel-fusion-300: #c8cdd3;
321
- --bb-color-steel-fusion-400: #b0b6bc;
322
- --bb-color-steel-fusion-500: #929ba4;
323
- --bb-color-steel-fusion-600: #757e88;
324
- --bb-color-steel-fusion-700: #5e6770;
325
- --bb-color-steel-fusion-800: #4a5259;
326
- --bb-color-steel-fusion-900: #363d44;
327
- --bb-color-steel-gray-100: #f5f6f7;
328
- --bb-color-steel-gray-1000: #2e3135;
329
- --bb-color-steel-gray-1050: #25272a;
330
- --bb-color-steel-gray-1075: #222427;
331
- --bb-color-steel-gray-1100: #1f2224;
332
- --bb-color-steel-gray-1125: #1e2022;
333
- --bb-color-steel-gray-1150: #1c1e20;
334
- --bb-color-steel-gray-1200: #17191b;
335
- --bb-color-steel-gray-200: #e2e4e5;
336
- --bb-color-steel-gray-300: #cbcdcf;
337
- --bb-color-steel-gray-400: #b3b5b8;
338
- --bb-color-steel-gray-500: #979a9d;
339
- --bb-color-steel-gray-600: #7a7d81;
340
- --bb-color-steel-gray-700: #636669;
341
- --bb-color-steel-gray-800: #4e5154;
342
- --bb-color-steel-gray-900: #3a3c3f;
303
+ --bb-color-steel_blue_dark-100: #617695;
304
+ --bb-color-steel_blue_dark-1000: #06152e;
305
+ --bb-color-steel_blue_dark-200: #566a88;
306
+ --bb-color-steel_blue_dark-300: #4b5f7c;
307
+ --bb-color-steel_blue_dark-400: #405371;
308
+ --bb-color-steel_blue_dark-500: #354865;
309
+ --bb-color-steel_blue_dark-600: #2b3e5a;
310
+ --bb-color-steel_blue_dark-700: #21334e;
311
+ --bb-color-steel_blue_dark-800: #172943;
312
+ --bb-color-steel_blue_dark-900: #0e1f39;
313
+ --bb-color-steel_fusion-100: #f3f6f9;
314
+ --bb-color-steel_fusion-1000: #2a313c;
315
+ --bb-color-steel_fusion-1050: #21282f;
316
+ --bb-color-steel_fusion-1100: #1c2228;
317
+ --bb-color-steel_fusion-1150: #181e25;
318
+ --bb-color-steel_fusion-1200: #141a1f;
319
+ --bb-color-steel_fusion-200: #e0e4e8;
320
+ --bb-color-steel_fusion-300: #c8cdd3;
321
+ --bb-color-steel_fusion-400: #b0b6bc;
322
+ --bb-color-steel_fusion-500: #929ba4;
323
+ --bb-color-steel_fusion-600: #757e88;
324
+ --bb-color-steel_fusion-700: #5e6770;
325
+ --bb-color-steel_fusion-800: #4a5259;
326
+ --bb-color-steel_fusion-900: #363d44;
327
+ --bb-color-steel_gray-100: #f5f6f7;
328
+ --bb-color-steel_gray-1000: #2e3135;
329
+ --bb-color-steel_gray-1050: #25272a;
330
+ --bb-color-steel_gray-1075: #222427;
331
+ --bb-color-steel_gray-1100: #1f2224;
332
+ --bb-color-steel_gray-1125: #1e2022;
333
+ --bb-color-steel_gray-1150: #1c1e20;
334
+ --bb-color-steel_gray-1200: #17191b;
335
+ --bb-color-steel_gray-200: #e2e4e5;
336
+ --bb-color-steel_gray-300: #cbcdcf;
337
+ --bb-color-steel_gray-400: #b3b5b8;
338
+ --bb-color-steel_gray-500: #979a9d;
339
+ --bb-color-steel_gray-600: #7a7d81;
340
+ --bb-color-steel_gray-700: #636669;
341
+ --bb-color-steel_gray-800: #4e5154;
342
+ --bb-color-steel_gray-900: #3a3c3f;
343
343
  --bb-color-teal-100: #dcf6f5;
344
344
  --bb-color-teal-1000: #022a28;
345
345
  --bb-color-teal-1100: #011e1d;
@@ -354,16 +354,16 @@
354
354
  --bb-color-teal-700: #046e6b;
355
355
  --bb-color-teal-800: #035755;
356
356
  --bb-color-teal-900: #02413f;
357
- --bb-color-teal-dark-100: #e1f3f1;
358
- --bb-color-teal-dark-1000: #031514;
359
- --bb-color-teal-dark-200: #bce0dd;
360
- --bb-color-teal-dark-300: #8fcbc7;
361
- --bb-color-teal-dark-400: #63b5b0;
362
- --bb-color-teal-dark-500: #359793;
363
- --bb-color-teal-dark-600: #047e7a;
364
- --bb-color-teal-dark-700: #005b57;
365
- --bb-color-teal-dark-800: #003f3d;
366
- --bb-color-teal-dark-900: #022826;
357
+ --bb-color-teal_dark-100: #e1f3f1;
358
+ --bb-color-teal_dark-1000: #031514;
359
+ --bb-color-teal_dark-200: #bce0dd;
360
+ --bb-color-teal_dark-300: #8fcbc7;
361
+ --bb-color-teal_dark-400: #63b5b0;
362
+ --bb-color-teal_dark-500: #359793;
363
+ --bb-color-teal_dark-600: #047e7a;
364
+ --bb-color-teal_dark-700: #005b57;
365
+ --bb-color-teal_dark-800: #003f3d;
366
+ --bb-color-teal_dark-900: #022826;
367
367
  --bb-color-transparent: rgba(0, 0, 0, 0);
368
368
  --bb-color-white: #ffffff;
369
369
  --bb-color-yellow-100: #feefd6;
@@ -380,16 +380,17 @@
380
380
  --bb-color-yellow-700: #92661e;
381
381
  --bb-color-yellow-800: #6e4d17;
382
382
  --bb-color-yellow-900: #503811;
383
- --bb-color-yellow-dark-100: #fff8ec;
384
- --bb-color-yellow-dark-1000: #200c00;
385
- --bb-color-yellow-dark-200: #fef0d0;
386
- --bb-color-yellow-dark-300: #fde0a8;
387
- --bb-color-yellow-dark-400: #fbb034;
388
- --bb-color-yellow-dark-500: #c37000;
389
- --bb-color-yellow-dark-600: #a25100;
390
- --bb-color-yellow-dark-700: #7d3800;
391
- --bb-color-yellow-dark-800: #5a2500;
392
- --bb-color-yellow-dark-900: #391800;
383
+ --bb-color-yellow_dark-100: #fff8ec;
384
+ --bb-color-yellow_dark-1000: #200c00;
385
+ --bb-color-yellow_dark-200: #fef0d0;
386
+ --bb-color-yellow_dark-300: #fde0a8;
387
+ --bb-color-yellow_dark-400: #fbb034;
388
+ --bb-color-yellow_dark-475: #d17f10;
389
+ --bb-color-yellow_dark-500: #c37000;
390
+ --bb-color-yellow_dark-600: #a25100;
391
+ --bb-color-yellow_dark-700: #7d3800;
392
+ --bb-color-yellow_dark-800: #5a2500;
393
+ --bb-color-yellow_dark-900: #391800;
393
394
  --bb-duration-150: 150ms;
394
395
  --bb-duration-250: 250ms;
395
396
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
@@ -420,16 +421,16 @@
420
421
  --bb-font-weight-light: 300;
421
422
  --bb-font-weight-regular: 400;
422
423
  --bb-font-weight-semibold: 600;
423
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/bb-logo.png');
424
- --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/bb-logo-white.png');
425
- --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-base-dark.svg');
426
- --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-base-light.svg');
427
- --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-bb-dark.svg');
428
- --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-bb-light.svg');
429
- --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
430
- --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
431
- --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
432
- --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.10.0/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
424
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/bb-logo.png');
425
+ --bb-image-logo-primary-white-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/bb-logo-white.png');
426
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-base-dark.svg');
427
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-base-light.svg');
428
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-bb-dark.svg');
429
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-bb-light.svg');
430
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-disabled-base-dark.svg');
431
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-disabled-base-light.svg');
432
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-disabled-bb-dark.svg');
433
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/6.11.1/assets/images/chevron_up_down_20_fill-disabled-bb-light.svg');
433
434
  --bb-letter_spacing-normal: normal;
434
435
  --bb-letter_spacing-wider: 0.01rem;
435
436
  --bb-letter_spacing-widest: 0.046875rem;
@@ -497,7 +498,7 @@
497
498
  --bb-space-9: 36px;
498
499
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
499
500
  --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40) , var(--bb-color-rgba-purple-600-40));
500
- --bb-color-gradient-container-primary: linear-gradient(90deg, var(--bb-color-steel-fusion-700), var(--bb-color-steel-fusion-800));
501
+ --bb-color-gradient-container-primary: linear-gradient(90deg, var(--bb-color-steel_fusion-700), var(--bb-color-steel_fusion-800));
501
502
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
502
503
  --bb-shadow-gray-0: 0 0 0 0 rgba(22, 26, 31, 0);
503
504
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
@@ -557,6 +558,7 @@
557
558
  --bb-color-scrollbar-bb-dark-track: #1c2228;
558
559
  }
559
560
  .sky-theme-modern.sky-theme-brand-base:not(.sky-theme-mode-dark) {
561
+ --sky-color_scheme: light;
560
562
  --sky-brand-name: var(--bb-brand-name);
561
563
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
562
564
  --sky-color-background-action-accent-base: var(--bb-color-white);
@@ -610,7 +612,7 @@
610
612
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
611
613
  --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
612
614
  --sky-color-background-icon_matte-success: var(--bb-color-green-600);
613
- --sky-color-background-icon_matte-warning: var(--bb-color-yellow-400);
615
+ --sky-color-background-icon_matte-warning: var(--bb-color-yellow_dark-475);
614
616
  --sky-color-background-input-base: var(--bb-color-white);
615
617
  --sky-color-background-nav-active: var(--bb-color-blue-100);
616
618
  --sky-color-background-nav-base: var(--bb-color-transparent);
@@ -709,7 +711,7 @@
709
711
  --sky-color-border-tab-hover: var(--bb-color-blue-600);
710
712
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
711
713
  --sky-color-border-text_highlight: var(--bb-color-yellow-700);
712
- --sky-color-border-warning: var(--bb-color-yellow-400);
714
+ --sky-color-border-warning: var(--bb-color-yellow_dark-475);
713
715
  --sky-color-category-blue: var(--bb-color-sky-200);
714
716
  --sky-color-category-green: var(--bb-color-green-200);
715
717
  --sky-color-category-orange: var(--bb-color-orange-200);
@@ -745,7 +747,7 @@
745
747
  --sky-color-icon-on_status_bg: var(--bb-color-gray-1000);
746
748
  --sky-color-icon-selected: var(--bb-color-blue-600);
747
749
  --sky-color-icon-success: var(--bb-color-green-600);
748
- --sky-color-icon-warning: var(--bb-color-yellow-400);
750
+ --sky-color-icon-warning: var(--bb-color-yellow_dark-475);
749
751
  --sky-color-illustration-fill-heavy: var(--bb-color-green-300);
750
752
  --sky-color-illustration-fill-soft: var(--bb-color-green-50);
751
753
  --sky-color-illustration-fill-softest: var(--bb-color-white);
@@ -877,6 +879,7 @@
877
879
  --sky-color-scrollbar-track: var(--bb-color-scrollbar-base-light-track);
878
880
  }
879
881
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
882
+ --sky-color_scheme: dark;
880
883
  --sky-brand-name: var(--bb-brand-name);
881
884
  --sky-color-background-action-accent-active: var(--bb-color-gray-600);
882
885
  --sky-color-background-action-accent-base: var(--bb-color-blue-900);
@@ -910,7 +913,7 @@
910
913
  --sky-color-background-action-tertiary-on_prominent-base: var(--bb-color-transparent);
911
914
  --sky-color-background-action-tertiary-on_prominent-focus: var(--bb-color-transparent);
912
915
  --sky-color-background-action-tertiary-on_prominent-hover: var(--bb-color-slate-700);
913
- --sky-color-background-blocking: var(--bb-color-rgba-steel-fusion-1100-70);
916
+ --sky-color-background-blocking: var(--bb-color-rgba-steel_fusion-1100-70);
914
917
  --sky-color-background-container-backdrop: var(--bb-color-gray-900);
915
918
  --sky-color-background-container-base: var(--bb-color-gray-1000);
916
919
  --sky-color-background-container-danger: var(--bb-color-red-800);
@@ -918,7 +921,7 @@
918
921
  --sky-color-background-container-header-prominent: var(--bb-color-slate-800);
919
922
  --sky-color-background-container-info: var(--bb-color-blue-800);
920
923
  --sky-color-background-container-menu: var(--bb-color-gray-900);
921
- --sky-color-background-container-prominent: var(--bb-color-steel-gray-1125);
924
+ --sky-color-background-container-prominent: var(--bb-color-steel_gray-1125);
922
925
  --sky-color-background-container-success: var(--bb-color-green-900);
923
926
  --sky-color-background-container-tooltip: var(--bb-color-gray-25);
924
927
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
@@ -942,10 +945,10 @@
942
945
  --sky-color-background-row-hover: var(--bb-color-transparent);
943
946
  --sky-color-background-scrim: var(--bb-color-scrim-heavy);
944
947
  --sky-color-background-selected-danger: var(--bb-color-red-900);
945
- --sky-color-background-selected-heavy: var(--bb-color-blue-dark-375);
946
- --sky-color-background-selected-soft: var(--bb-color-rgba-blue-dark-600-20);
948
+ --sky-color-background-selected-heavy: var(--bb-color-blue_dark-375);
949
+ --sky-color-background-selected-soft: var(--bb-color-rgba-blue_dark-600-20);
947
950
  --sky-color-background-selected-success: var(--bb-color-green-900);
948
- --sky-color-background-selected-switch-base: var(--bb-color-blue-dark-375);
951
+ --sky-color-background-selected-switch-base: var(--bb-color-blue_dark-375);
949
952
  --sky-color-background-selected-warning: var(--bb-color-yellow-900);
950
953
  --sky-color-background-tab-active: var(--bb-color-transparent);
951
954
  --sky-color-background-tab-base: var(--bb-color-transparent);
@@ -953,10 +956,10 @@
953
956
  --sky-color-background-tab-hover: var(--bb-color-transparent);
954
957
  --sky-color-background-tab-selected: var(--bb-color-transparent);
955
958
  --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
956
- --sky-color-background-text_highlight: var(--bb-color-yellow-dark-700);
959
+ --sky-color-background-text_highlight: var(--bb-color-yellow_dark-700);
957
960
  --sky-color-background-thumb-base: var(--bb-color-white);
958
961
  --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
959
- --sky-color-background-thumbnail_matte: var(--bb-color-rgba-steel-gray-100-7);
962
+ --sky-color-background-thumbnail_matte: var(--bb-color-rgba-steel_gray-100-7);
960
963
  --sky-color-border-action-accent-active: var(--bb-color-sky-500);
961
964
  --sky-color-border-action-accent-base: var(--bb-color-gray-700);
962
965
  --sky-color-border-action-accent-focus: var(--bb-color-sky-600);
@@ -973,23 +976,23 @@
973
976
  --sky-color-border-action-on_status-base: var(--bb-color-transparent);
974
977
  --sky-color-border-action-on_status-focus: var(--bb-color-gray-1000);
975
978
  --sky-color-border-action-on_status-hover: var(--bb-color-gray-1000);
976
- --sky-color-border-action-primary-active: var(--bb-color-blue-dark-100);
977
- --sky-color-border-action-primary-base: var(--bb-color-blue-dark-375);
978
- --sky-color-border-action-primary-focus: var(--bb-color-blue-dark-100);
979
- --sky-color-border-action-primary-hover: var(--bb-color-blue-dark-100);
979
+ --sky-color-border-action-primary-active: var(--bb-color-blue_dark-100);
980
+ --sky-color-border-action-primary-base: var(--bb-color-blue_dark-375);
981
+ --sky-color-border-action-primary-focus: var(--bb-color-blue_dark-100);
982
+ --sky-color-border-action-primary-hover: var(--bb-color-blue_dark-100);
980
983
  --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
981
984
  --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
982
985
  --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
983
986
  --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
984
- --sky-color-border-action-tertiary-active: var(--bb-color-blue-dark-375);
987
+ --sky-color-border-action-tertiary-active: var(--bb-color-blue_dark-375);
985
988
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
986
- --sky-color-border-action-tertiary-focus: var(--bb-color-blue-dark-375);
987
- --sky-color-border-action-tertiary-hover: var(--bb-color-blue-dark-375);
989
+ --sky-color-border-action-tertiary-focus: var(--bb-color-blue_dark-375);
990
+ --sky-color-border-action-tertiary-hover: var(--bb-color-blue_dark-375);
988
991
  --sky-color-border-action-tertiary-on_prominent-active: var(--bb-color-blue-300);
989
992
  --sky-color-border-action-tertiary-on_prominent-base: var(--bb-color-transparent);
990
993
  --sky-color-border-action-tertiary-on_prominent-focus: var(--bb-color-blue-300);
991
994
  --sky-color-border-action-tertiary-on_prominent-hover: var(--bb-color-blue-300);
992
- --sky-color-border-column_divider: var(--bb-color-blue-dark-400);
995
+ --sky-color-border-column_divider: var(--bb-color-blue_dark-400);
993
996
  --sky-color-border-container-base: var(--bb-color-blue-900);
994
997
  --sky-color-border-container-header-prominent: var(--bb-color-slate-500);
995
998
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -999,7 +1002,7 @@
999
1002
  --sky-color-border-info: var(--bb-color-blue-400);
1000
1003
  --sky-color-border-input-active: var(--bb-color-blue-600);
1001
1004
  --sky-color-border-input-base: var(--bb-color-blue-200);
1002
- --sky-color-border-input-error: var(--bb-color-red-dark-600);
1005
+ --sky-color-border-input-error: var(--bb-color-red_dark-600);
1003
1006
  --sky-color-border-input-focus: var(--bb-color-blue-600);
1004
1007
  --sky-color-border-input-hover: var(--bb-color-blue-600);
1005
1008
  --sky-color-border-nav-active: var(--bb-color-sky-500);
@@ -1007,26 +1010,26 @@
1007
1010
  --sky-color-border-nav-focus: var(--bb-color-sky-600);
1008
1011
  --sky-color-border-nav-hover: var(--bb-color-sky-600);
1009
1012
  --sky-color-border-progress_step: var(--bb-color-gray-600);
1010
- --sky-color-border-selected: var(--bb-color-blue-dark-375);
1011
- --sky-color-border-selected_soft: var(--bb-color-blue-dark-600);
1013
+ --sky-color-border-selected: var(--bb-color-blue_dark-375);
1014
+ --sky-color-border-selected_soft: var(--bb-color-blue_dark-600);
1012
1015
  --sky-color-border-separator-light: var(--bb-color-gray-700);
1013
1016
  --sky-color-border-separator-row: var(--bb-color-gray-800);
1014
1017
  --sky-color-border-success: var(--bb-color-green-400);
1015
1018
  --sky-color-border-switch-active: var(--bb-color-blue-600);
1016
1019
  --sky-color-border-switch-base: var(--bb-color-blue-500);
1017
- --sky-color-border-switch-error: var(--bb-color-red-dark-600);
1020
+ --sky-color-border-switch-error: var(--bb-color-red_dark-600);
1018
1021
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
1019
1022
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
1020
- --sky-color-border-switch-selected-active: var(--bb-color-blue-dark-100);
1023
+ --sky-color-border-switch-selected-active: var(--bb-color-blue_dark-100);
1021
1024
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
1022
- --sky-color-border-switch-selected-focus: var(--bb-color-blue-dark-100);
1023
- --sky-color-border-switch-selected-hover: var(--bb-color-blue-dark-100);
1025
+ --sky-color-border-switch-selected-focus: var(--bb-color-blue_dark-100);
1026
+ --sky-color-border-switch-selected-hover: var(--bb-color-blue_dark-100);
1024
1027
  --sky-color-border-tab-active: var(--bb-color-sky-500);
1025
1028
  --sky-color-border-tab-base: var(--bb-color-transparent);
1026
1029
  --sky-color-border-tab-focus: var(--bb-color-sky-600);
1027
1030
  --sky-color-border-tab-hover: var(--bb-color-sky-600);
1028
1031
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
1029
- --sky-color-border-text_highlight: var(--bb-color-yellow-dark-400);
1032
+ --sky-color-border-text_highlight: var(--bb-color-yellow_dark-400);
1030
1033
  --sky-color-border-warning: var(--bb-color-yellow-400);
1031
1034
  --sky-color-category-blue: var(--bb-color-sky-900);
1032
1035
  --sky-color-category-green: var(--bb-color-green-900);
@@ -1064,12 +1067,12 @@
1064
1067
  --sky-color-icon-selected: var(--bb-color-blue-600);
1065
1068
  --sky-color-icon-success: var(--bb-color-green-700);
1066
1069
  --sky-color-icon-warning: var(--bb-color-yellow-600);
1067
- --sky-color-illustration-fill-heavy: var(--bb-color-teal-dark-600);
1068
- --sky-color-illustration-fill-soft: var(--bb-color-teal-dark-800);
1069
- --sky-color-illustration-fill-softest: var(--bb-color-steel-gray-1100);
1070
- --sky-color-illustration-stroke: var(--bb-color-teal-dark-100);
1070
+ --sky-color-illustration-fill-heavy: var(--bb-color-teal_dark-600);
1071
+ --sky-color-illustration-fill-soft: var(--bb-color-teal_dark-800);
1072
+ --sky-color-illustration-fill-softest: var(--bb-color-steel_gray-1100);
1073
+ --sky-color-illustration-stroke: var(--bb-color-teal_dark-100);
1071
1074
  --sky-color-text-action: var(--bb-color-sky-600);
1072
- --sky-color-text-action_contrast: var(--bb-color-blue-dark-200);
1075
+ --sky-color-text-action_contrast: var(--bb-color-blue_dark-200);
1073
1076
  --sky-color-text-action_on_status: var(--bb-color-gray-1000);
1074
1077
  --sky-color-text-danger: var(--bb-color-red-400);
1075
1078
  --sky-color-text-deemphasized: var(--bb-color-gray-300);
@@ -1080,14 +1083,14 @@
1080
1083
  --sky-color-text-on_status: var(--bb-color-gray-1000);
1081
1084
  --sky-color-text-selected: var(--bb-color-blue-400);
1082
1085
  --sky-color-viz-axis: var(--bb-color-gray-600);
1083
- --sky-color-viz-category-1: var(--bb-color-teal-dark-600);
1084
- --sky-color-viz-category-2: var(--bb-color-purple-dark-300);
1085
- --sky-color-viz-category-3: var(--bb-color-blue-dark-600);
1086
- --sky-color-viz-category-4: var(--bb-color-sky-dark-200);
1087
- --sky-color-viz-category-5: var(--bb-color-orange-dark-500);
1088
- --sky-color-viz-category-6: var(--bb-color-red-dark-300);
1089
- --sky-color-viz-category-7: var(--bb-color-pink-dark-500);
1090
- --sky-color-viz-category-8: var(--bb-color-green-dark-400);
1086
+ --sky-color-viz-category-1: var(--bb-color-teal_dark-600);
1087
+ --sky-color-viz-category-2: var(--bb-color-purple_dark-300);
1088
+ --sky-color-viz-category-3: var(--bb-color-blue_dark-600);
1089
+ --sky-color-viz-category-4: var(--bb-color-sky_dark-200);
1090
+ --sky-color-viz-category-5: var(--bb-color-orange_dark-500);
1091
+ --sky-color-viz-category-6: var(--bb-color-red_dark-300);
1092
+ --sky-color-viz-category-7: var(--bb-color-pink_dark-500);
1093
+ --sky-color-viz-category-8: var(--bb-color-green_dark-400);
1091
1094
  --sky-color-viz-diverge-neg-1: var(--bb-color-red-1000);
1092
1095
  --sky-color-viz-diverge-neg-10: var(--bb-color-red-100);
1093
1096
  --sky-color-viz-diverge-neg-2: var(--bb-color-red-900);