@blackbaud/skyux-design-tokens 4.1.0 → 4.2.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 (17) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/images/chevron_up_down_24_fill-base-dark.svg +1 -0
  4. package/assets/images/chevron_up_down_24_fill-base-light.svg +1 -0
  5. package/assets/images/chevron_up_down_24_fill-bb-dark.svg +1 -0
  6. package/assets/images/chevron_up_down_24_fill-bb-light.svg +1 -0
  7. package/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg +1 -0
  8. package/assets/images/chevron_up_down_24_fill-disabled-base-light.svg +1 -0
  9. package/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg +1 -0
  10. package/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg +1 -0
  11. package/assets/scss/base.css +108 -44
  12. package/assets/scss/blackbaud.css +62 -2
  13. package/assets/scss/modern.css +1 -1
  14. package/bundles/base.css +108 -44
  15. package/bundles/blackbaud.css +62 -2
  16. package/bundles/modern.css +1 -1
  17. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [4.2.0](https://github.com/blackbaud/skyux-design-tokens/compare/4.1.1...4.2.0) (2026-01-29)
6
+
7
+
8
+ ### Features
9
+
10
+ * add new configuration for Figma export ([#307](https://github.com/blackbaud/skyux-design-tokens/issues/307)) ([c0e28ce](https://github.com/blackbaud/skyux-design-tokens/commit/c0e28ce7150394e1e13991b5a0d8b73db8f441c5))
11
+ * add select chevron icon ([#313](https://github.com/blackbaud/skyux-design-tokens/issues/313)) ([8eba3f4](https://github.com/blackbaud/skyux-design-tokens/commit/8eba3f4701688a684770d941a419cc79be8fd273))
12
+ * border and background disabled color ref token layer ([#312](https://github.com/blackbaud/skyux-design-tokens/issues/312)) ([5fb431d](https://github.com/blackbaud/skyux-design-tokens/commit/5fb431d0e97eeb2845f1b3ad225c7c854f790f1f))
13
+
14
+ ## [4.1.1](https://github.com/blackbaud/skyux-design-tokens/compare/4.1.0...4.1.1) (2026-01-09)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * darken gray 600 slightly ([#308](https://github.com/blackbaud/skyux-design-tokens/issues/308)) ([080fce7](https://github.com/blackbaud/skyux-design-tokens/commit/080fce71e131c99aaa9509fd1debb95ad1e227ed))
20
+
5
21
  ## [4.1.0](https://github.com/blackbaud/skyux-design-tokens/compare/4.0.2...4.1.0) (2026-01-09)
6
22
 
7
23
 
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/4.1.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/images/chevron_up_down_24_fill-base-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\r\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#0095b8"/>\r\n</svg>\r\n
package/assets/images/chevron_up_down_24_fill-base-light.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\r\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#666b70"/>\r\n</svg>\r\n
package/assets/images/chevron_up_down_24_fill-bb-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\r\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#0095b8"/>\r\n</svg>\r\n
package/assets/images/chevron_up_down_24_fill-bb-light.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\r\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#2b6bd5"/>\r\n</svg>\r\n
package/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#c2c4c6"/>\n</svg>
package/assets/images/chevron_up_down_24_fill-disabled-base-light.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#666b70"/>\n</svg>
package/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#c2c4c6"/>\n</svg>
package/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg ADDED
@@ -0,0 +1 @@
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10.5303 2.71967C10.2374 2.42678 9.76256 2.42678 9.46967 2.71967L5.21967 6.96967C4.92678 7.26256 4.92678 7.73744 5.21967 8.03033C5.51256 8.32322 5.98744 8.32322 6.28033 8.03033L10 4.31066L13.7197 8.03033C14.0126 8.32322 14.4874 8.32322 14.7803 8.03033C15.0732 7.73744 15.0732 7.26256 14.7803 6.96967L10.5303 2.71967ZM14.7803 13.0303L10.5303 17.2803C10.2374 17.5732 9.76256 17.5732 9.46967 17.2803L5.21967 13.0303C4.92678 12.7374 4.92678 12.2626 5.21967 11.9697C5.51256 11.6768 5.98744 11.6768 6.28033 11.9697L10 15.6893L13.7197 11.9697C14.0126 11.6768 14.4874 11.6768 14.7803 11.9697C15.0732 12.2626 15.0732 12.7374 14.7803 13.0303Z" fill="#666b70"/>\n</svg>
package/assets/scss/base.css CHANGED
@@ -4,6 +4,54 @@
4
4
  initial-value: url('data:,');
5
5
  }
6
6
 
7
+ @property --bb-image-select_icon-base-dark-src {
8
+ syntax: '<url>';
9
+ inherits: true;
10
+ initial-value: url('data:,');
11
+ }
12
+
13
+ @property --bb-image-select_icon-base-light-src {
14
+ syntax: '<url>';
15
+ inherits: true;
16
+ initial-value: url('data:,');
17
+ }
18
+
19
+ @property --bb-image-select_icon-bb-dark-src {
20
+ syntax: '<url>';
21
+ inherits: true;
22
+ initial-value: url('data:,');
23
+ }
24
+
25
+ @property --bb-image-select_icon-bb-light-src {
26
+ syntax: '<url>';
27
+ inherits: true;
28
+ initial-value: url('data:,');
29
+ }
30
+
31
+ @property --bb-image-select_icon-disabled-base-dark-src {
32
+ syntax: '<url>';
33
+ inherits: true;
34
+ initial-value: url('data:,');
35
+ }
36
+
37
+ @property --bb-image-select_icon-disabled-base-light-src {
38
+ syntax: '<url>';
39
+ inherits: true;
40
+ initial-value: url('data:,');
41
+ }
42
+
43
+ @property --bb-image-select_icon-disabled-bb-dark-src {
44
+ syntax: '<url>';
45
+ inherits: true;
46
+ initial-value: url('data:,');
47
+ }
48
+
49
+ @property --bb-image-select_icon-disabled-bb-light-src {
50
+ syntax: '<url>';
51
+ inherits: true;
52
+ initial-value: url('data:,');
53
+ }
54
+
7
55
  .sky-theme-modern.sky-theme-brand-base {
8
56
  --bb-border-radius-0: 0rem;
9
57
  --bb-border-radius-012: .125rem;
@@ -43,7 +91,7 @@
43
91
  --bb-color-gray-400: #a3a6a9;
44
92
  --bb-color-gray-50: #f4f4f5;
45
93
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
94
+ --bb-color-gray-600: #666b70;
47
95
  --bb-color-gray-700: #51555c;
48
96
  --bb-color-gray-800: #3b4047;
49
97
  --bb-color-gray-900: #252b33;
@@ -206,7 +254,15 @@
206
254
  --bb-font-weight-light: 300;
207
255
  --bb-font-weight-regular: 400;
208
256
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png');
257
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
258
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-light.svg');
260
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
210
266
  --bb-letter_spacing-normal: normal;
211
267
  --bb-letter_spacing-wider: 0.01rem;
212
268
  --bb-letter_spacing-widest: 0.046875rem;
@@ -292,27 +348,22 @@
292
348
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
293
349
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
294
350
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
295
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
296
351
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
297
352
  --sky-color-background-action-danger-hover: var(--bb-color-red-600);
298
353
  --sky-color-background-action-input-active: var(--bb-color-transparent);
299
354
  --sky-color-background-action-input-base: var(--bb-color-blue-900);
300
- --sky-color-background-action-input-disabled: var(--bb-color-gray-700);
301
355
  --sky-color-background-action-input-focus: var(--bb-color-blue-900);
302
356
  --sky-color-background-action-input-hover: var(--bb-color-transparent);
303
357
  --sky-color-background-action-primary-active: var(--bb-color-sky-500);
304
358
  --sky-color-background-action-primary-base: var(--bb-color-sky-600);
305
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
306
359
  --sky-color-background-action-primary-focus: var(--bb-color-sky-600);
307
360
  --sky-color-background-action-primary-hover: var(--bb-color-sky-600);
308
361
  --sky-color-background-action-secondary-active: var(--bb-color-gray-600);
309
362
  --sky-color-background-action-secondary-base: var(--bb-color-gray-800);
310
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-700);
311
363
  --sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
312
364
  --sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
313
365
  --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
314
366
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
315
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
316
367
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
317
368
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
318
369
  --sky-color-background-blocking: var(--bb-color-blocking);
@@ -324,6 +375,7 @@
324
375
  --sky-color-background-container-success: var(--bb-color-green-900);
325
376
  --sky-color-background-container-tooltip: var(--bb-color-gray-25);
326
377
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
378
+ --sky-color-background-disabled: var(--bb-color-gray-700);
327
379
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
328
380
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
329
381
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
@@ -332,16 +384,13 @@
332
384
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
333
385
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
334
386
  --sky-color-background-input-base: var(--bb-color-gray-900);
335
- --sky-color-background-input-disabled: var(--bb-color-gray-700);
336
387
  --sky-color-background-nav-active: var(--bb-color-transparent);
337
388
  --sky-color-background-nav-base: var(--bb-color-transparent);
338
- --sky-color-background-nav-disabled: var(--bb-color-gray-700);
339
389
  --sky-color-background-nav-focus: var(--bb-color-transparent);
340
390
  --sky-color-background-nav-hover: var(--bb-color-transparent);
341
391
  --sky-color-background-page: var(--bb-color-gray-1100);
342
392
  --sky-color-background-row-active: var(--bb-color-transparent);
343
393
  --sky-color-background-row-base: var(--bb-color-gray-1000);
344
- --sky-color-background-row-disabled: var(--bb-color-gray-700);
345
394
  --sky-color-background-row-focus: var(--bb-color-gray-1000);
346
395
  --sky-color-background-row-hover: var(--bb-color-transparent);
347
396
  --sky-color-background-scrim: var(--bb-color-scrim);
@@ -350,11 +399,9 @@
350
399
  --sky-color-background-selected-soft: var(--bb-color-blue-900);
351
400
  --sky-color-background-selected-success: var(--bb-color-green-900);
352
401
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
353
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-700);
354
402
  --sky-color-background-selected-warning: var(--bb-color-yellow-900);
355
403
  --sky-color-background-tab-active: var(--bb-color-transparent);
356
404
  --sky-color-background-tab-base: var(--bb-color-transparent);
357
- --sky-color-background-tab-disabled: var(--bb-color-gray-700);
358
405
  --sky-color-background-tab-focus: var(--bb-color-transparent);
359
406
  --sky-color-background-tab-hover: var(--bb-color-transparent);
360
407
  --sky-color-background-tab-selected: var(--bb-color-transparent);
@@ -365,44 +412,38 @@
365
412
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
366
413
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
367
414
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
368
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
369
415
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
370
416
  --sky-color-border-action-danger-hover: var(--bb-color-red-200);
371
417
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
372
418
  --sky-color-border-action-input-base: var(--bb-color-blue-400);
373
- --sky-color-border-action-input-disabled: var(--bb-color-gray-800);
374
419
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
375
420
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
376
421
  --sky-color-border-action-primary-active: var(--bb-color-sky-500);
377
422
  --sky-color-border-action-primary-base: var(--bb-color-sky-600);
378
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
379
423
  --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
380
424
  --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
381
425
  --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
382
426
  --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
383
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
384
427
  --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
385
428
  --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
386
429
  --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
387
430
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
388
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
389
431
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
390
432
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
391
433
  --sky-color-border-column_divider: var(--bb-color-blue-400);
392
434
  --sky-color-border-container-base: var(--bb-color-blue-900);
393
435
  --sky-color-border-danger: var(--bb-color-red-400);
436
+ --sky-color-border-disabled: var(--bb-color-gray-800);
394
437
  --sky-color-border-divider: var(--bb-color-gray-800);
395
438
  --sky-color-border-elevation: var(--bb-color-gray-800);
396
439
  --sky-color-border-info: var(--bb-color-blue-400);
397
440
  --sky-color-border-input-active: var(--bb-color-blue-600);
398
441
  --sky-color-border-input-base: var(--bb-color-blue-200);
399
- --sky-color-border-input-disabled: var(--bb-color-gray-400);
400
442
  --sky-color-border-input-error: var(--bb-color-red-600);
401
443
  --sky-color-border-input-focus: var(--bb-color-blue-600);
402
444
  --sky-color-border-input-hover: var(--bb-color-blue-600);
403
445
  --sky-color-border-nav-active: var(--bb-color-sky-500);
404
446
  --sky-color-border-nav-base: var(--bb-color-transparent);
405
- --sky-color-border-nav-disabled: var(--bb-color-gray-800);
406
447
  --sky-color-border-nav-focus: var(--bb-color-sky-600);
407
448
  --sky-color-border-nav-hover: var(--bb-color-sky-600);
408
449
  --sky-color-border-progress_step: var(--bb-color-gray-600);
@@ -414,18 +455,15 @@
414
455
  --sky-color-border-success: var(--bb-color-green-400);
415
456
  --sky-color-border-switch-active: var(--bb-color-blue-600);
416
457
  --sky-color-border-switch-base: var(--bb-color-blue-500);
417
- --sky-color-border-switch-disabled: var(--bb-color-gray-400);
418
458
  --sky-color-border-switch-error: var(--bb-color-red-600);
419
459
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
420
460
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
421
461
  --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
422
462
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
423
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
424
463
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
425
464
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
426
465
  --sky-color-border-tab-active: var(--bb-color-sky-500);
427
466
  --sky-color-border-tab-base: var(--bb-color-transparent);
428
- --sky-color-border-tab-disabled: var(--bb-color-gray-800);
429
467
  --sky-color-border-tab-focus: var(--bb-color-sky-600);
430
468
  --sky-color-border-tab-hover: var(--bb-color-sky-600);
431
469
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
@@ -517,7 +555,29 @@
517
555
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
518
556
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
519
557
  --sky-elevation-none: var(--bb-shadow-gray-0);
558
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
559
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
520
560
  --sky-opacity-wait: var(--bb-opacity-600);
561
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
562
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
563
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
564
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
565
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
566
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
567
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
568
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
569
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
570
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
571
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
572
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
573
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
574
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
575
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
576
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
577
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
578
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
579
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
580
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
521
581
  --sky-elevation-focus: var(--bb-shadow-gray-200);
522
582
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
523
583
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -530,32 +590,26 @@
530
590
  --sky-brand-name: var(--bb-brand-name);
531
591
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
532
592
  --sky-color-background-action-accent-base: var(--bb-color-white);
533
- --sky-color-background-action-accent-disabled: var(--bb-color-gray-50);
534
593
  --sky-color-background-action-accent-focus: var(--bb-color-white);
535
594
  --sky-color-background-action-accent-hover: var(--bb-color-blue-50);
536
595
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
537
596
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
538
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-100);
539
597
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
540
598
  --sky-color-background-action-danger-hover: var(--bb-color-red-700);
541
599
  --sky-color-background-action-input-active: var(--bb-color-blue-100);
542
600
  --sky-color-background-action-input-base: var(--bb-color-white);
543
- --sky-color-background-action-input-disabled: var(--bb-color-gray-100);
544
601
  --sky-color-background-action-input-focus: var(--bb-color-white);
545
602
  --sky-color-background-action-input-hover: var(--bb-color-blue-50);
546
603
  --sky-color-background-action-primary-active: var(--bb-color-blue-800);
547
604
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
548
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-100);
549
605
  --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
550
606
  --sky-color-background-action-primary-hover: var(--bb-color-blue-700);
551
607
  --sky-color-background-action-secondary-active: var(--bb-color-blue-100);
552
608
  --sky-color-background-action-secondary-base: var(--bb-color-white);
553
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-100);
554
609
  --sky-color-background-action-secondary-focus: var(--bb-color-white);
555
610
  --sky-color-background-action-secondary-hover: var(--bb-color-blue-50);
556
611
  --sky-color-background-action-tertiary-active: var(--bb-color-blue-100);
557
612
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
558
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-100);
559
613
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
560
614
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
561
615
  --sky-color-background-blocking: var(--bb-color-blocking);
@@ -567,6 +621,7 @@
567
621
  --sky-color-background-container-success: var(--bb-color-green-200);
568
622
  --sky-color-background-container-tooltip: var(--bb-color-gray-900);
569
623
  --sky-color-background-container-warning: var(--bb-color-yellow-200);
624
+ --sky-color-background-disabled: var(--bb-color-gray-100);
570
625
  --sky-color-background-file_drop: var(--bb-color-gray-25);
571
626
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
572
627
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
@@ -575,16 +630,13 @@
575
630
  --sky-color-background-icon_matte-success: var(--bb-color-green-600);
576
631
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-400);
577
632
  --sky-color-background-input-base: var(--bb-color-white);
578
- --sky-color-background-input-disabled: var(--bb-color-gray-100);
579
633
  --sky-color-background-nav-active: var(--bb-color-blue-100);
580
634
  --sky-color-background-nav-base: var(--bb-color-transparent);
581
- --sky-color-background-nav-disabled: var(--bb-color-gray-100);
582
635
  --sky-color-background-nav-focus: var(--bb-color-transparent);
583
636
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
584
637
  --sky-color-background-page: var(--bb-color-gray-100);
585
638
  --sky-color-background-row-active: var(--bb-color-blue-100);
586
639
  --sky-color-background-row-base: var(--bb-color-white);
587
- --sky-color-background-row-disabled: var(--bb-color-gray-100);
588
640
  --sky-color-background-row-focus: var(--bb-color-white);
589
641
  --sky-color-background-row-hover: var(--bb-color-blue-50);
590
642
  --sky-color-background-scrim: var(--bb-color-scrim);
@@ -593,11 +645,9 @@
593
645
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
594
646
  --sky-color-background-selected-success: var(--bb-color-green-200);
595
647
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
596
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-100);
597
648
  --sky-color-background-selected-warning: var(--bb-color-yellow-200);
598
649
  --sky-color-background-tab-active: var(--bb-color-transparent);
599
650
  --sky-color-background-tab-base: var(--bb-color-transparent);
600
- --sky-color-background-tab-disabled: var(--bb-color-gray-100);
601
651
  --sky-color-background-tab-focus: var(--bb-color-transparent);
602
652
  --sky-color-background-tab-hover: var(--bb-color-transparent);
603
653
  --sky-color-background-tab-selected: var(--bb-color-transparent);
@@ -608,49 +658,42 @@
608
658
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
609
659
  --sky-color-border-action-accent-active: var(--bb-color-blue-600);
610
660
  --sky-color-border-action-accent-base: var(--bb-color-gray-200);
611
- --sky-color-border-action-accent-disabled: var(--bb-color-gray-200);
612
661
  --sky-color-border-action-accent-focus: var(--bb-color-blue-600);
613
662
  --sky-color-border-action-accent-hover: var(--bb-color-blue-600);
614
663
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
615
664
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
616
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-300);
617
665
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
618
666
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
619
667
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
620
668
  --sky-color-border-action-input-base: var(--bb-color-gray-300);
621
- --sky-color-border-action-input-disabled: var(--bb-color-gray-300);
622
669
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
623
670
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
624
671
  --sky-color-border-action-primary-active: var(--bb-color-blue-1000);
625
672
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
626
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-300);
627
673
  --sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
628
674
  --sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
629
675
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
630
676
  --sky-color-border-action-secondary-base: var(--bb-color-gray-300);
631
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-300);
632
677
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
633
678
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
634
679
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
635
680
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
636
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-300);
637
681
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
638
682
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
639
683
  --sky-color-border-column_divider: var(--bb-color-blue-600);
640
684
  --sky-color-border-container-base: var(--bb-color-gray-200);
641
685
  --sky-color-border-danger: var(--bb-color-red-600);
686
+ --sky-color-border-disabled: var(--bb-color-gray-300);
642
687
  --sky-color-border-divider: var(--bb-color-gray-300);
643
688
  --sky-color-border-elevation: var(--bb-color-gray-200);
644
689
  --sky-color-border-info: var(--bb-color-blue-600);
645
690
  --sky-color-border-input-active: var(--bb-color-blue-600);
646
691
  --sky-color-border-input-base: var(--bb-color-gray-300);
647
- --sky-color-border-input-disabled: var(--bb-color-gray-300);
648
692
  --sky-color-border-input-error: var(--bb-color-red-600);
649
693
  --sky-color-border-input-focus: var(--bb-color-blue-600);
650
694
  --sky-color-border-input-hover: var(--bb-color-blue-600);
651
695
  --sky-color-border-nav-active: var(--bb-color-blue-600);
652
696
  --sky-color-border-nav-base: var(--bb-color-transparent);
653
- --sky-color-border-nav-disabled: var(--bb-color-gray-300);
654
697
  --sky-color-border-nav-focus: var(--bb-color-blue-600);
655
698
  --sky-color-border-nav-hover: var(--bb-color-blue-600);
656
699
  --sky-color-border-progress_step: var(--bb-color-gray-400);
@@ -661,18 +704,15 @@
661
704
  --sky-color-border-success: var(--bb-color-green-600);
662
705
  --sky-color-border-switch-active: var(--bb-color-blue-600);
663
706
  --sky-color-border-switch-base: var(--bb-color-gray-500);
664
- --sky-color-border-switch-disabled: var(--bb-color-gray-300);
665
707
  --sky-color-border-switch-error: var(--bb-color-red-600);
666
708
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
667
709
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
668
710
  --sky-color-border-switch-selected-active: var(--bb-color-blue-1000);
669
711
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
670
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-300);
671
712
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
672
713
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
673
714
  --sky-color-border-tab-active: var(--bb-color-blue-600);
674
715
  --sky-color-border-tab-base: var(--bb-color-transparent);
675
- --sky-color-border-tab-disabled: var(--bb-color-gray-300);
676
716
  --sky-color-border-tab-focus: var(--bb-color-blue-600);
677
717
  --sky-color-border-tab-hover: var(--bb-color-blue-600);
678
718
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
@@ -797,7 +837,31 @@
797
837
  --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
798
838
  --sky-elevation-none: var(--bb-shadow-gray-0);
799
839
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
840
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-light-src);
841
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-light-src);
800
842
  --sky-opacity-wait: var(--bb-opacity-600);
843
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
844
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
845
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
846
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
847
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
848
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
849
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
850
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
851
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
852
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
853
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
854
+ --sky-color-border-action-accent-disabled: var(--sky-color-border-disabled);
855
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
856
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
857
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
858
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
859
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
860
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
861
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
862
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
863
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
864
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
801
865
  --sky-elevation-focus: var(--bb-shadow-gray-200);
802
866
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
803
867
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
package/assets/scss/blackbaud.css CHANGED
@@ -4,6 +4,54 @@
4
4
  initial-value: url('data:,');
5
5
  }
6
6
 
7
+ @property --bb-image-select_icon-base-dark-src {
8
+ syntax: '<url>';
9
+ inherits: true;
10
+ initial-value: url('data:,');
11
+ }
12
+
13
+ @property --bb-image-select_icon-base-light-src {
14
+ syntax: '<url>';
15
+ inherits: true;
16
+ initial-value: url('data:,');
17
+ }
18
+
19
+ @property --bb-image-select_icon-bb-dark-src {
20
+ syntax: '<url>';
21
+ inherits: true;
22
+ initial-value: url('data:,');
23
+ }
24
+
25
+ @property --bb-image-select_icon-bb-light-src {
26
+ syntax: '<url>';
27
+ inherits: true;
28
+ initial-value: url('data:,');
29
+ }
30
+
31
+ @property --bb-image-select_icon-disabled-base-dark-src {
32
+ syntax: '<url>';
33
+ inherits: true;
34
+ initial-value: url('data:,');
35
+ }
36
+
37
+ @property --bb-image-select_icon-disabled-base-light-src {
38
+ syntax: '<url>';
39
+ inherits: true;
40
+ initial-value: url('data:,');
41
+ }
42
+
43
+ @property --bb-image-select_icon-disabled-bb-dark-src {
44
+ syntax: '<url>';
45
+ inherits: true;
46
+ initial-value: url('data:,');
47
+ }
48
+
49
+ @property --bb-image-select_icon-disabled-bb-light-src {
50
+ syntax: '<url>';
51
+ inherits: true;
52
+ initial-value: url('data:,');
53
+ }
54
+
7
55
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
8
56
  --bb-border-radius-0: 0rem;
9
57
  --bb-border-radius-012: .125rem;
@@ -43,7 +91,7 @@
43
91
  --bb-color-gray-400: #a3a6a9;
44
92
  --bb-color-gray-50: #f4f4f5;
45
93
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
94
+ --bb-color-gray-600: #666b70;
47
95
  --bb-color-gray-700: #51555c;
48
96
  --bb-color-gray-800: #3b4047;
49
97
  --bb-color-gray-900: #252b33;
@@ -206,7 +254,15 @@
206
254
  --bb-font-weight-light: 300;
207
255
  --bb-font-weight-regular: 400;
208
256
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png');
257
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
258
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-light.svg');
260
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
210
266
  --bb-letter_spacing-normal: normal;
211
267
  --bb-letter_spacing-wider: 0.01rem;
212
268
  --bb-letter_spacing-widest: 0.046875rem;
@@ -330,6 +386,8 @@
330
386
  --sky-elevation-input-disabled: var(--bb-shadow-slate-0);
331
387
  --sky-elevation-none: var(--bb-shadow-slate-0);
332
388
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
389
+ --sky-image-select_icon-base: var(--bb-image-select_icon-bb-light-src);
390
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-light-src);
333
391
  --sky-opacity-wait: var(--bb-opacity-600);
334
392
  --sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
335
393
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
@@ -521,6 +579,8 @@
521
579
  --sky-color-text-inverse: var(--bb-color-gray-1100);
522
580
  --sky-color-text-selected: var(--bb-color-blue-400);
523
581
  --sky-elevation-none: var(--bb-shadow-slate-0);
582
+ --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
583
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
524
584
  --sky-opacity-wait: var(--bb-opacity-600);
525
585
  --sky-elevation-focus: var(--bb-shadow-slate-200);
526
586
  --sky-elevation-overflow: var(--bb-shadow-slate-200);
package/assets/scss/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;
package/bundles/base.css CHANGED
@@ -4,6 +4,54 @@
4
4
  initial-value: url('data:,');
5
5
  }
6
6
 
7
+ @property --bb-image-select_icon-base-dark-src {
8
+ syntax: '<url>';
9
+ inherits: true;
10
+ initial-value: url('data:,');
11
+ }
12
+
13
+ @property --bb-image-select_icon-base-light-src {
14
+ syntax: '<url>';
15
+ inherits: true;
16
+ initial-value: url('data:,');
17
+ }
18
+
19
+ @property --bb-image-select_icon-bb-dark-src {
20
+ syntax: '<url>';
21
+ inherits: true;
22
+ initial-value: url('data:,');
23
+ }
24
+
25
+ @property --bb-image-select_icon-bb-light-src {
26
+ syntax: '<url>';
27
+ inherits: true;
28
+ initial-value: url('data:,');
29
+ }
30
+
31
+ @property --bb-image-select_icon-disabled-base-dark-src {
32
+ syntax: '<url>';
33
+ inherits: true;
34
+ initial-value: url('data:,');
35
+ }
36
+
37
+ @property --bb-image-select_icon-disabled-base-light-src {
38
+ syntax: '<url>';
39
+ inherits: true;
40
+ initial-value: url('data:,');
41
+ }
42
+
43
+ @property --bb-image-select_icon-disabled-bb-dark-src {
44
+ syntax: '<url>';
45
+ inherits: true;
46
+ initial-value: url('data:,');
47
+ }
48
+
49
+ @property --bb-image-select_icon-disabled-bb-light-src {
50
+ syntax: '<url>';
51
+ inherits: true;
52
+ initial-value: url('data:,');
53
+ }
54
+
7
55
  .sky-theme-modern.sky-theme-brand-base {
8
56
  --bb-border-radius-0: 0rem;
9
57
  --bb-border-radius-012: .125rem;
@@ -43,7 +91,7 @@
43
91
  --bb-color-gray-400: #a3a6a9;
44
92
  --bb-color-gray-50: #f4f4f5;
45
93
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
94
+ --bb-color-gray-600: #666b70;
47
95
  --bb-color-gray-700: #51555c;
48
96
  --bb-color-gray-800: #3b4047;
49
97
  --bb-color-gray-900: #252b33;
@@ -206,7 +254,15 @@
206
254
  --bb-font-weight-light: 300;
207
255
  --bb-font-weight-regular: 400;
208
256
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png');
257
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
258
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-light.svg');
260
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
210
266
  --bb-letter_spacing-normal: normal;
211
267
  --bb-letter_spacing-wider: 0.01rem;
212
268
  --bb-letter_spacing-widest: 0.046875rem;
@@ -292,27 +348,22 @@
292
348
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
293
349
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
294
350
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
295
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-700);
296
351
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
297
352
  --sky-color-background-action-danger-hover: var(--bb-color-red-600);
298
353
  --sky-color-background-action-input-active: var(--bb-color-transparent);
299
354
  --sky-color-background-action-input-base: var(--bb-color-blue-900);
300
- --sky-color-background-action-input-disabled: var(--bb-color-gray-700);
301
355
  --sky-color-background-action-input-focus: var(--bb-color-blue-900);
302
356
  --sky-color-background-action-input-hover: var(--bb-color-transparent);
303
357
  --sky-color-background-action-primary-active: var(--bb-color-sky-500);
304
358
  --sky-color-background-action-primary-base: var(--bb-color-sky-600);
305
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-700);
306
359
  --sky-color-background-action-primary-focus: var(--bb-color-sky-600);
307
360
  --sky-color-background-action-primary-hover: var(--bb-color-sky-600);
308
361
  --sky-color-background-action-secondary-active: var(--bb-color-gray-600);
309
362
  --sky-color-background-action-secondary-base: var(--bb-color-gray-800);
310
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-700);
311
363
  --sky-color-background-action-secondary-focus: var(--bb-color-gray-700);
312
364
  --sky-color-background-action-secondary-hover: var(--bb-color-gray-700);
313
365
  --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
314
366
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
315
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
316
367
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
317
368
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
318
369
  --sky-color-background-blocking: var(--bb-color-blocking);
@@ -324,6 +375,7 @@
324
375
  --sky-color-background-container-success: var(--bb-color-green-900);
325
376
  --sky-color-background-container-tooltip: var(--bb-color-gray-25);
326
377
  --sky-color-background-container-warning: var(--bb-color-yellow-800);
378
+ --sky-color-background-disabled: var(--bb-color-gray-700);
327
379
  --sky-color-background-file_drop: var(--bb-color-gray-1000);
328
380
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
329
381
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
@@ -332,16 +384,13 @@
332
384
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
333
385
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
334
386
  --sky-color-background-input-base: var(--bb-color-gray-900);
335
- --sky-color-background-input-disabled: var(--bb-color-gray-700);
336
387
  --sky-color-background-nav-active: var(--bb-color-transparent);
337
388
  --sky-color-background-nav-base: var(--bb-color-transparent);
338
- --sky-color-background-nav-disabled: var(--bb-color-gray-700);
339
389
  --sky-color-background-nav-focus: var(--bb-color-transparent);
340
390
  --sky-color-background-nav-hover: var(--bb-color-transparent);
341
391
  --sky-color-background-page: var(--bb-color-gray-1100);
342
392
  --sky-color-background-row-active: var(--bb-color-transparent);
343
393
  --sky-color-background-row-base: var(--bb-color-gray-1000);
344
- --sky-color-background-row-disabled: var(--bb-color-gray-700);
345
394
  --sky-color-background-row-focus: var(--bb-color-gray-1000);
346
395
  --sky-color-background-row-hover: var(--bb-color-transparent);
347
396
  --sky-color-background-scrim: var(--bb-color-scrim);
@@ -350,11 +399,9 @@
350
399
  --sky-color-background-selected-soft: var(--bb-color-blue-900);
351
400
  --sky-color-background-selected-success: var(--bb-color-green-900);
352
401
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
353
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-700);
354
402
  --sky-color-background-selected-warning: var(--bb-color-yellow-900);
355
403
  --sky-color-background-tab-active: var(--bb-color-transparent);
356
404
  --sky-color-background-tab-base: var(--bb-color-transparent);
357
- --sky-color-background-tab-disabled: var(--bb-color-gray-700);
358
405
  --sky-color-background-tab-focus: var(--bb-color-transparent);
359
406
  --sky-color-background-tab-hover: var(--bb-color-transparent);
360
407
  --sky-color-background-tab-selected: var(--bb-color-transparent);
@@ -365,44 +412,38 @@
365
412
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
366
413
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
367
414
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
368
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-800);
369
415
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
370
416
  --sky-color-border-action-danger-hover: var(--bb-color-red-200);
371
417
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
372
418
  --sky-color-border-action-input-base: var(--bb-color-blue-400);
373
- --sky-color-border-action-input-disabled: var(--bb-color-gray-800);
374
419
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
375
420
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
376
421
  --sky-color-border-action-primary-active: var(--bb-color-sky-500);
377
422
  --sky-color-border-action-primary-base: var(--bb-color-sky-600);
378
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-800);
379
423
  --sky-color-border-action-primary-focus: var(--bb-color-sky-600);
380
424
  --sky-color-border-action-primary-hover: var(--bb-color-sky-600);
381
425
  --sky-color-border-action-secondary-active: var(--bb-color-sky-500);
382
426
  --sky-color-border-action-secondary-base: var(--bb-color-gray-700);
383
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-800);
384
427
  --sky-color-border-action-secondary-focus: var(--bb-color-sky-600);
385
428
  --sky-color-border-action-secondary-hover: var(--bb-color-sky-600);
386
429
  --sky-color-border-action-tertiary-active: var(--bb-color-sky-500);
387
430
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
388
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
389
431
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
390
432
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
391
433
  --sky-color-border-column_divider: var(--bb-color-blue-400);
392
434
  --sky-color-border-container-base: var(--bb-color-blue-900);
393
435
  --sky-color-border-danger: var(--bb-color-red-400);
436
+ --sky-color-border-disabled: var(--bb-color-gray-800);
394
437
  --sky-color-border-divider: var(--bb-color-gray-800);
395
438
  --sky-color-border-elevation: var(--bb-color-gray-800);
396
439
  --sky-color-border-info: var(--bb-color-blue-400);
397
440
  --sky-color-border-input-active: var(--bb-color-blue-600);
398
441
  --sky-color-border-input-base: var(--bb-color-blue-200);
399
- --sky-color-border-input-disabled: var(--bb-color-gray-400);
400
442
  --sky-color-border-input-error: var(--bb-color-red-600);
401
443
  --sky-color-border-input-focus: var(--bb-color-blue-600);
402
444
  --sky-color-border-input-hover: var(--bb-color-blue-600);
403
445
  --sky-color-border-nav-active: var(--bb-color-sky-500);
404
446
  --sky-color-border-nav-base: var(--bb-color-transparent);
405
- --sky-color-border-nav-disabled: var(--bb-color-gray-800);
406
447
  --sky-color-border-nav-focus: var(--bb-color-sky-600);
407
448
  --sky-color-border-nav-hover: var(--bb-color-sky-600);
408
449
  --sky-color-border-progress_step: var(--bb-color-gray-600);
@@ -414,18 +455,15 @@
414
455
  --sky-color-border-success: var(--bb-color-green-400);
415
456
  --sky-color-border-switch-active: var(--bb-color-blue-600);
416
457
  --sky-color-border-switch-base: var(--bb-color-blue-500);
417
- --sky-color-border-switch-disabled: var(--bb-color-gray-400);
418
458
  --sky-color-border-switch-error: var(--bb-color-red-600);
419
459
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
420
460
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
421
461
  --sky-color-border-switch-selected-active: var(--bb-color-blue-900);
422
462
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
423
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
424
463
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
425
464
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
426
465
  --sky-color-border-tab-active: var(--bb-color-sky-500);
427
466
  --sky-color-border-tab-base: var(--bb-color-transparent);
428
- --sky-color-border-tab-disabled: var(--bb-color-gray-800);
429
467
  --sky-color-border-tab-focus: var(--bb-color-sky-600);
430
468
  --sky-color-border-tab-hover: var(--bb-color-sky-600);
431
469
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
@@ -517,7 +555,29 @@
517
555
  --sky-color-viz-sequence-8: var(--bb-color-teal-300);
518
556
  --sky-color-viz-sequence-9: var(--bb-color-teal-200);
519
557
  --sky-elevation-none: var(--bb-shadow-gray-0);
558
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-dark-src);
559
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-dark-src);
520
560
  --sky-opacity-wait: var(--bb-opacity-600);
561
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
562
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
563
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
564
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
565
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
566
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
567
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
568
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
569
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
570
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
571
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
572
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
573
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
574
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
575
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
576
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
577
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
578
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
579
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
580
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
521
581
  --sky-elevation-focus: var(--bb-shadow-gray-200);
522
582
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
523
583
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
@@ -530,32 +590,26 @@
530
590
  --sky-brand-name: var(--bb-brand-name);
531
591
  --sky-color-background-action-accent-active: var(--bb-color-blue-100);
532
592
  --sky-color-background-action-accent-base: var(--bb-color-white);
533
- --sky-color-background-action-accent-disabled: var(--bb-color-gray-50);
534
593
  --sky-color-background-action-accent-focus: var(--bb-color-white);
535
594
  --sky-color-background-action-accent-hover: var(--bb-color-blue-50);
536
595
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
537
596
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
538
- --sky-color-background-action-danger-disabled: var(--bb-color-gray-100);
539
597
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
540
598
  --sky-color-background-action-danger-hover: var(--bb-color-red-700);
541
599
  --sky-color-background-action-input-active: var(--bb-color-blue-100);
542
600
  --sky-color-background-action-input-base: var(--bb-color-white);
543
- --sky-color-background-action-input-disabled: var(--bb-color-gray-100);
544
601
  --sky-color-background-action-input-focus: var(--bb-color-white);
545
602
  --sky-color-background-action-input-hover: var(--bb-color-blue-50);
546
603
  --sky-color-background-action-primary-active: var(--bb-color-blue-800);
547
604
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
548
- --sky-color-background-action-primary-disabled: var(--bb-color-gray-100);
549
605
  --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
550
606
  --sky-color-background-action-primary-hover: var(--bb-color-blue-700);
551
607
  --sky-color-background-action-secondary-active: var(--bb-color-blue-100);
552
608
  --sky-color-background-action-secondary-base: var(--bb-color-white);
553
- --sky-color-background-action-secondary-disabled: var(--bb-color-gray-100);
554
609
  --sky-color-background-action-secondary-focus: var(--bb-color-white);
555
610
  --sky-color-background-action-secondary-hover: var(--bb-color-blue-50);
556
611
  --sky-color-background-action-tertiary-active: var(--bb-color-blue-100);
557
612
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
558
- --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-100);
559
613
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
560
614
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
561
615
  --sky-color-background-blocking: var(--bb-color-blocking);
@@ -567,6 +621,7 @@
567
621
  --sky-color-background-container-success: var(--bb-color-green-200);
568
622
  --sky-color-background-container-tooltip: var(--bb-color-gray-900);
569
623
  --sky-color-background-container-warning: var(--bb-color-yellow-200);
624
+ --sky-color-background-disabled: var(--bb-color-gray-100);
570
625
  --sky-color-background-file_drop: var(--bb-color-gray-25);
571
626
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
572
627
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
@@ -575,16 +630,13 @@
575
630
  --sky-color-background-icon_matte-success: var(--bb-color-green-600);
576
631
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-400);
577
632
  --sky-color-background-input-base: var(--bb-color-white);
578
- --sky-color-background-input-disabled: var(--bb-color-gray-100);
579
633
  --sky-color-background-nav-active: var(--bb-color-blue-100);
580
634
  --sky-color-background-nav-base: var(--bb-color-transparent);
581
- --sky-color-background-nav-disabled: var(--bb-color-gray-100);
582
635
  --sky-color-background-nav-focus: var(--bb-color-transparent);
583
636
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
584
637
  --sky-color-background-page: var(--bb-color-gray-100);
585
638
  --sky-color-background-row-active: var(--bb-color-blue-100);
586
639
  --sky-color-background-row-base: var(--bb-color-white);
587
- --sky-color-background-row-disabled: var(--bb-color-gray-100);
588
640
  --sky-color-background-row-focus: var(--bb-color-white);
589
641
  --sky-color-background-row-hover: var(--bb-color-blue-50);
590
642
  --sky-color-background-scrim: var(--bb-color-scrim);
@@ -593,11 +645,9 @@
593
645
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
594
646
  --sky-color-background-selected-success: var(--bb-color-green-200);
595
647
  --sky-color-background-selected-switch-base: var(--bb-color-blue-600);
596
- --sky-color-background-selected-switch-disabled: var(--bb-color-gray-100);
597
648
  --sky-color-background-selected-warning: var(--bb-color-yellow-200);
598
649
  --sky-color-background-tab-active: var(--bb-color-transparent);
599
650
  --sky-color-background-tab-base: var(--bb-color-transparent);
600
- --sky-color-background-tab-disabled: var(--bb-color-gray-100);
601
651
  --sky-color-background-tab-focus: var(--bb-color-transparent);
602
652
  --sky-color-background-tab-hover: var(--bb-color-transparent);
603
653
  --sky-color-background-tab-selected: var(--bb-color-transparent);
@@ -608,49 +658,42 @@
608
658
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
609
659
  --sky-color-border-action-accent-active: var(--bb-color-blue-600);
610
660
  --sky-color-border-action-accent-base: var(--bb-color-gray-200);
611
- --sky-color-border-action-accent-disabled: var(--bb-color-gray-200);
612
661
  --sky-color-border-action-accent-focus: var(--bb-color-blue-600);
613
662
  --sky-color-border-action-accent-hover: var(--bb-color-blue-600);
614
663
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
615
664
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
616
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-300);
617
665
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
618
666
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
619
667
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
620
668
  --sky-color-border-action-input-base: var(--bb-color-gray-300);
621
- --sky-color-border-action-input-disabled: var(--bb-color-gray-300);
622
669
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
623
670
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
624
671
  --sky-color-border-action-primary-active: var(--bb-color-blue-1000);
625
672
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
626
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-300);
627
673
  --sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
628
674
  --sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
629
675
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
630
676
  --sky-color-border-action-secondary-base: var(--bb-color-gray-300);
631
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-300);
632
677
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
633
678
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
634
679
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
635
680
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
636
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-300);
637
681
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
638
682
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
639
683
  --sky-color-border-column_divider: var(--bb-color-blue-600);
640
684
  --sky-color-border-container-base: var(--bb-color-gray-200);
641
685
  --sky-color-border-danger: var(--bb-color-red-600);
686
+ --sky-color-border-disabled: var(--bb-color-gray-300);
642
687
  --sky-color-border-divider: var(--bb-color-gray-300);
643
688
  --sky-color-border-elevation: var(--bb-color-gray-200);
644
689
  --sky-color-border-info: var(--bb-color-blue-600);
645
690
  --sky-color-border-input-active: var(--bb-color-blue-600);
646
691
  --sky-color-border-input-base: var(--bb-color-gray-300);
647
- --sky-color-border-input-disabled: var(--bb-color-gray-300);
648
692
  --sky-color-border-input-error: var(--bb-color-red-600);
649
693
  --sky-color-border-input-focus: var(--bb-color-blue-600);
650
694
  --sky-color-border-input-hover: var(--bb-color-blue-600);
651
695
  --sky-color-border-nav-active: var(--bb-color-blue-600);
652
696
  --sky-color-border-nav-base: var(--bb-color-transparent);
653
- --sky-color-border-nav-disabled: var(--bb-color-gray-300);
654
697
  --sky-color-border-nav-focus: var(--bb-color-blue-600);
655
698
  --sky-color-border-nav-hover: var(--bb-color-blue-600);
656
699
  --sky-color-border-progress_step: var(--bb-color-gray-400);
@@ -661,18 +704,15 @@
661
704
  --sky-color-border-success: var(--bb-color-green-600);
662
705
  --sky-color-border-switch-active: var(--bb-color-blue-600);
663
706
  --sky-color-border-switch-base: var(--bb-color-gray-500);
664
- --sky-color-border-switch-disabled: var(--bb-color-gray-300);
665
707
  --sky-color-border-switch-error: var(--bb-color-red-600);
666
708
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
667
709
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
668
710
  --sky-color-border-switch-selected-active: var(--bb-color-blue-1000);
669
711
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
670
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-300);
671
712
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
672
713
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
673
714
  --sky-color-border-tab-active: var(--bb-color-blue-600);
674
715
  --sky-color-border-tab-base: var(--bb-color-transparent);
675
- --sky-color-border-tab-disabled: var(--bb-color-gray-300);
676
716
  --sky-color-border-tab-focus: var(--bb-color-blue-600);
677
717
  --sky-color-border-tab-hover: var(--bb-color-blue-600);
678
718
  --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
@@ -797,7 +837,31 @@
797
837
  --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
798
838
  --sky-elevation-none: var(--bb-shadow-gray-0);
799
839
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
840
+ --sky-image-select_icon-base: var(--bb-image-select_icon-base-light-src);
841
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-base-light-src);
800
842
  --sky-opacity-wait: var(--bb-opacity-600);
843
+ --sky-color-background-action-accent-disabled: var(--sky-color-background-disabled);
844
+ --sky-color-background-action-danger-disabled: var(--sky-color-background-disabled);
845
+ --sky-color-background-action-input-disabled: var(--sky-color-background-disabled);
846
+ --sky-color-background-action-primary-disabled: var(--sky-color-background-disabled);
847
+ --sky-color-background-action-secondary-disabled: var(--sky-color-background-disabled);
848
+ --sky-color-background-action-tertiary-disabled: var(--sky-color-background-disabled);
849
+ --sky-color-background-input-disabled: var(--sky-color-background-disabled);
850
+ --sky-color-background-nav-disabled: var(--sky-color-background-disabled);
851
+ --sky-color-background-row-disabled: var(--sky-color-background-disabled);
852
+ --sky-color-background-selected-switch-disabled: var(--sky-color-background-disabled);
853
+ --sky-color-background-tab-disabled: var(--sky-color-background-disabled);
854
+ --sky-color-border-action-accent-disabled: var(--sky-color-border-disabled);
855
+ --sky-color-border-action-danger-disabled: var(--sky-color-border-disabled);
856
+ --sky-color-border-action-input-disabled: var(--sky-color-border-disabled);
857
+ --sky-color-border-action-primary-disabled: var(--sky-color-border-disabled);
858
+ --sky-color-border-action-secondary-disabled: var(--sky-color-border-disabled);
859
+ --sky-color-border-action-tertiary-disabled: var(--sky-color-border-disabled);
860
+ --sky-color-border-input-disabled: var(--sky-color-border-disabled);
861
+ --sky-color-border-nav-disabled: var(--sky-color-border-disabled);
862
+ --sky-color-border-switch-disabled: var(--sky-color-border-disabled);
863
+ --sky-color-border-switch-selected-disabled: var(--sky-color-border-disabled);
864
+ --sky-color-border-tab-disabled: var(--sky-color-border-disabled);
801
865
  --sky-elevation-focus: var(--bb-shadow-gray-200);
802
866
  --sky-elevation-overflow: var(--bb-shadow-gray-200);
803
867
  --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
package/bundles/blackbaud.css CHANGED
@@ -4,6 +4,54 @@
4
4
  initial-value: url('data:,');
5
5
  }
6
6
 
7
+ @property --bb-image-select_icon-base-dark-src {
8
+ syntax: '<url>';
9
+ inherits: true;
10
+ initial-value: url('data:,');
11
+ }
12
+
13
+ @property --bb-image-select_icon-base-light-src {
14
+ syntax: '<url>';
15
+ inherits: true;
16
+ initial-value: url('data:,');
17
+ }
18
+
19
+ @property --bb-image-select_icon-bb-dark-src {
20
+ syntax: '<url>';
21
+ inherits: true;
22
+ initial-value: url('data:,');
23
+ }
24
+
25
+ @property --bb-image-select_icon-bb-light-src {
26
+ syntax: '<url>';
27
+ inherits: true;
28
+ initial-value: url('data:,');
29
+ }
30
+
31
+ @property --bb-image-select_icon-disabled-base-dark-src {
32
+ syntax: '<url>';
33
+ inherits: true;
34
+ initial-value: url('data:,');
35
+ }
36
+
37
+ @property --bb-image-select_icon-disabled-base-light-src {
38
+ syntax: '<url>';
39
+ inherits: true;
40
+ initial-value: url('data:,');
41
+ }
42
+
43
+ @property --bb-image-select_icon-disabled-bb-dark-src {
44
+ syntax: '<url>';
45
+ inherits: true;
46
+ initial-value: url('data:,');
47
+ }
48
+
49
+ @property --bb-image-select_icon-disabled-bb-light-src {
50
+ syntax: '<url>';
51
+ inherits: true;
52
+ initial-value: url('data:,');
53
+ }
54
+
7
55
  .sky-theme-modern.sky-theme-brand-base.sky-theme-brand-blackbaud {
8
56
  --bb-border-radius-0: 0rem;
9
57
  --bb-border-radius-012: .125rem;
@@ -43,7 +91,7 @@
43
91
  --bb-color-gray-400: #a3a6a9;
44
92
  --bb-color-gray-50: #f4f4f5;
45
93
  --bb-color-gray-500: #85888d;
46
- --bb-color-gray-600: #6b6f74;
94
+ --bb-color-gray-600: #666b70;
47
95
  --bb-color-gray-700: #51555c;
48
96
  --bb-color-gray-800: #3b4047;
49
97
  --bb-color-gray-900: #252b33;
@@ -206,7 +254,15 @@
206
254
  --bb-font-weight-light: 300;
207
255
  --bb-font-weight-regular: 400;
208
256
  --bb-font-weight-semibold: 600;
209
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png');
257
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
258
+ --bb-image-select_icon-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-dark.svg');
259
+ --bb-image-select_icon-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-base-light.svg');
260
+ --bb-image-select_icon-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-dark.svg');
261
+ --bb-image-select_icon-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-bb-light.svg');
262
+ --bb-image-select_icon-disabled-base-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-dark.svg');
263
+ --bb-image-select_icon-disabled-base-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-base-light.svg');
264
+ --bb-image-select_icon-disabled-bb-dark-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-dark.svg');
265
+ --bb-image-select_icon-disabled-bb-light-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/chevron_up_down_24_fill-disabled-bb-light.svg');
210
266
  --bb-letter_spacing-normal: normal;
211
267
  --bb-letter_spacing-wider: 0.01rem;
212
268
  --bb-letter_spacing-widest: 0.046875rem;
@@ -330,6 +386,8 @@
330
386
  --sky-elevation-input-disabled: var(--bb-shadow-slate-0);
331
387
  --sky-elevation-none: var(--bb-shadow-slate-0);
332
388
  --sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
389
+ --sky-image-select_icon-base: var(--bb-image-select_icon-bb-light-src);
390
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-light-src);
333
391
  --sky-opacity-wait: var(--bb-opacity-600);
334
392
  --sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
335
393
  --sky-color-border-action-accent-base: var(--bb-color-gradient-brand-secondary);
@@ -521,6 +579,8 @@
521
579
  --sky-color-text-inverse: var(--bb-color-gray-1100);
522
580
  --sky-color-text-selected: var(--bb-color-blue-400);
523
581
  --sky-elevation-none: var(--bb-shadow-slate-0);
582
+ --sky-image-select_icon-base: var(--bb-image-select_icon-bb-dark-src);
583
+ --sky-image-select_icon-disabled: var(--bb-image-select_icon-disabled-bb-dark-src);
524
584
  --sky-opacity-wait: var(--bb-opacity-600);
525
585
  --sky-elevation-focus: var(--bb-shadow-slate-200);
526
586
  --sky-elevation-overflow: var(--bb-shadow-slate-200);
package/bundles/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.1.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/4.2.0/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "4.1.0",
3
+ "version": "4.2.0",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",