@blackbaud/skyux-design-tokens 0.0.64 → 0.0.65

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 (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/assets/scss/blackbaud.css +156 -130
  3. package/assets/scss/modern.css +31 -0
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [0.0.65](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.64...0.0.65) (2025-06-24)
6
+
7
+
8
+ ### Features
9
+
10
+ * visual updates for v13 ([#194](https://github.com/blackbaud/skyux-design-tokens/issues/194)) ([72d9ef4](https://github.com/blackbaud/skyux-design-tokens/commit/72d9ef4626a51fae2205d4b09e6c15284c505bf8))
11
+
5
12
  ## [0.0.64](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.63...0.0.64) (2025-06-17)
6
13
 
7
14
 
package/assets/scss/blackbaud.css CHANGED
@@ -12,9 +12,10 @@
12
12
  --bb-color-blue-100: #eef3fc;
13
13
  --bb-color-blue-1000: #09152b;
14
14
  --bb-color-blue-200: #d0e1f7;
15
- --bb-color-blue-25: #fbfcfe;
15
+ --bb-color-blue-25: #f1f5fa;
16
16
  --bb-color-blue-300: #aac4ee;
17
17
  --bb-color-blue-400: #80a6e6;
18
+ --bb-color-blue-50: #f4f8fd;
18
19
  --bb-color-blue-500: #5589dd;
19
20
  --bb-color-blue-600: #2b6bd5;
20
21
  --bb-color-blue-700: #2256aa;
@@ -120,16 +121,12 @@
120
121
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
121
122
  --bb-font-blkb_sans-name: BLKB Sans;
122
123
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
123
- --bb-font-size-100: 0.75rem;
124
- --bb-font-size-1000: 3.25rem;
125
- --bb-font-size-200: 0.875rem;
126
- --bb-font-size-300: 1rem;
127
- --bb-font-size-400: 1.25rem;
128
- --bb-font-size-500: 1.5rem;
129
- --bb-font-size-600: 1.75rem;
130
- --bb-font-size-700: 2rem;
131
- --bb-font-size-800: 2.25rem;
132
- --bb-font-size-900: 2.625rem;
124
+ --bb-font-size-300: 0.8125rem;
125
+ --bb-font-size-400: 0.9375rem;
126
+ --bb-font-size-500: 1.0625rem;
127
+ --bb-font-size-600: 1.1875rem;
128
+ --bb-font-size-700: 1.5rem;
129
+ --bb-font-size-800: 1.6875rem;
133
130
  --bb-font-style-italic-style: italic;
134
131
  --bb-font-style-italic-weight: 400;
135
132
  --bb-font-style-light: 300;
@@ -146,25 +143,23 @@
146
143
  --bb-font-weight-regular: 400;
147
144
  --bb-font-weight-semibold: 600;
148
145
  --bb-letter_spacing-normal: normal;
149
- --bb-letter_spacing-wider: 0.32px;
150
- --bb-line_height-100: calc(16/12);
151
- --bb-line_height-1000: calc(64/52);
152
- --bb-line_height-200: calc(20/14);
153
- --bb-line_height-300: calc(24/16);
154
- --bb-line_height-400: calc(28/20);
155
- --bb-line_height-500: calc(32/24);
156
- --bb-line_height-600: calc(36/28);
157
- --bb-line_height-700: calc(40/32);
158
- --bb-line_height-800: calc(40/36);
159
- --bb-line_height-900: calc(48/42);
146
+ --bb-letter_spacing-wider: 0.16px;
147
+ --bb-line_height-300: calc(18/13);
148
+ --bb-line_height-400: calc(20/15);
149
+ --bb-line_height-500: calc(24/17);
150
+ --bb-line_height-600: calc(28/19);
151
+ --bb-line_height-700: calc(32/24);
152
+ --bb-line_height-800: calc(36/26);
160
153
  --bb-opacity-600: .6;
161
154
  --bb-shadow-gray-0: 0 0 0 0 #000000;
162
- --bb-shadow-gray-1: 0 1px 3px 0 rgba(0,0,0,0.2), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.14);
163
- --bb-shadow-gray-16: 0 8px 10px -5px rgba(0,0,0,0.2), 0 6px 30px 5px rgba(0,0,0,0.12), 0 16px 24px 2px rgba(0,0,0,0.14);
164
- --bb-shadow-gray-2: 0 1px 8px 0 rgba(0,0,0,0.2), 0 3px 3px -2px rgba(0,0,0,0.12), 0 3px 4px 0 rgba(0,0,0,0.14);
165
- --bb-shadow-gray-24: 0 11px 15px -7px rgba(0,0,0,0.2), 0 9px 46px 8px rgba(0,0,0,0.12), 0 24px 38px 3px rgba(0,0,0,0.14);
166
- --bb-shadow-gray-4: 0 2px 4px -1px rgba(0,0,0,0.2), 0 1px 10px 0 rgba(0,0,0,0.12), 0 4px 5px 0 rgba(0,0,0,0.14);
167
- --bb-shadow-gray-8: 0 5px 5px -3px rgba(0,0,0,0.2), 0 3px 14px 2px rgba(0,0,0,0.12), 0 8px 10px 1px rgba(0,0,0,0.14);
155
+ --bb-shadow-gray-100: 0 1px 3px 0 rgba(13,62,130,0.2), 0 2px 1px -1px rgba(13,62,130,0.12), 0 1px 1px 0 rgba(13,62,130,0.14);
156
+ --bb-shadow-gray-1600: 0 8px 10px -5px rgba(13,62,130,0.2), 0 6px 30px 5px rgba(13,62,130,0.12), 0 16px 24px 2px rgba(13,62,130,0.14);
157
+ --bb-shadow-gray-200: 0 1px 8px 0 rgba(13,62,130,0.2), 0 3px 3px -2px rgba(13,62,130,0.12), 0 3px 4px 0 rgba(13,62,130,0.14);
158
+ --bb-shadow-gray-2400: 0 11px 15px -7px rgba(13,62,130,0.2), 0 9px 46px 8px rgba(13,62,130,0.12), 0 24px 38px 3px rgba(13,62,130,0.14);
159
+ --bb-shadow-gray-25: 0 1px 1px 0 rgba(13,62,130,0.05);
160
+ --bb-shadow-gray-400: 0 2px 4px -1px rgba(13,62,130,0.2), 0 1px 10px 0 rgba(13,62,130,0.12), 0 4px 5px 0 rgba(13,62,130,0.14);
161
+ --bb-shadow-gray-50: 0 1px 1px 0 rgba(13,62,130,0.12), 0 1.5px 1px -1px rgba(13,62,130,0.12);
162
+ --bb-shadow-gray-800: 0 5px 5px -3px rgba(13,62,130,0.2), 0 3px 14px 2px rgba(13,62,130,0.12), 0 8px 10px 1px rgba(13,62,130,0.14);
168
163
  --bb-size-0: 0rem;
169
164
  --bb-size-fixed-100: 16px;
170
165
  --bb-size-fixed-12: 2px;
@@ -234,7 +229,7 @@
234
229
  --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-125);
235
230
  --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-75);
236
231
  --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-25);
237
- --sky-type-body-m: var(--bb-font-size-100) sans-serif;
232
+ --sky-type-body-m: var(--bb-font-size-300) sans-serif;
238
233
  }
239
234
  .sky-theme-modern.sky-theme-brand-base.sky-theme-mode-dark {
240
235
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
@@ -372,50 +367,50 @@
372
367
  --sky-color-text-inverse: var(--bb-color-gray-1100);
373
368
  --sky-color-text-link_highlighted: var(--bb-color-blue-300);
374
369
  --sky-color-text-selected: var(--bb-color-blue-400);
375
- --sky-elevation-focus: var(--bb-shadow-gray-2);
370
+ --sky-elevation-focus: var(--bb-shadow-gray-200);
376
371
  --sky-elevation-none: var(--bb-shadow-gray-0);
377
- --sky-elevation-overflow: var(--bb-shadow-gray-2);
378
- --sky-elevation-overlay-100: var(--bb-shadow-gray-4);
379
- --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
380
- --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
381
- --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
382
- --sky-elevation-raised-100: var(--bb-shadow-gray-1);
372
+ --sky-elevation-overflow: var(--bb-shadow-gray-200);
373
+ --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
374
+ --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
375
+ --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
376
+ --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
377
+ --sky-elevation-raised-100: var(--bb-shadow-gray-100);
383
378
  --sky-opacity-wait: var(--bb-opacity-600);
384
379
  }
385
380
  .sky-theme-modern.sky-theme-brand-base {
386
- --sky-color-background-action-danger-active: var(--bb-color-red-600);
381
+ --sky-color-background-action-danger-active: var(--bb-color-red-800);
387
382
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
388
383
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
389
384
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
390
- --sky-color-background-action-danger-hover: var(--bb-color-red-600);
391
- --sky-color-background-action-input-active: var(--bb-color-transparent);
385
+ --sky-color-background-action-danger-hover: var(--bb-color-red-700);
386
+ --sky-color-background-action-input-active: var(--bb-color-blue-100);
392
387
  --sky-color-background-action-input-base: var(--bb-color-transparent);
393
388
  --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
394
389
  --sky-color-background-action-input-focus: var(--bb-color-transparent);
395
- --sky-color-background-action-input-hover: var(--bb-color-transparent);
396
- --sky-color-background-action-primary-active: var(--bb-color-blue-600);
390
+ --sky-color-background-action-input-hover: var(--bb-color-blue-50);
391
+ --sky-color-background-action-primary-active: var(--bb-color-blue-800);
397
392
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
398
393
  --sky-color-background-action-primary-disabled: var(--bb-color-gray-50);
399
394
  --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
400
- --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
401
- --sky-color-background-action-secondary-active: var(--bb-color-white);
395
+ --sky-color-background-action-primary-hover: var(--bb-color-blue-700);
396
+ --sky-color-background-action-secondary-active: var(--bb-color-blue-100);
402
397
  --sky-color-background-action-secondary-base: var(--bb-color-white);
403
398
  --sky-color-background-action-secondary-disabled: var(--bb-color-gray-50);
404
399
  --sky-color-background-action-secondary-focus: var(--bb-color-white);
405
- --sky-color-background-action-secondary-hover: var(--bb-color-white);
406
- --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
400
+ --sky-color-background-action-secondary-hover: var(--bb-color-blue-50);
401
+ --sky-color-background-action-tertiary-active: var(--bb-color-blue-100);
407
402
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
408
403
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
409
404
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
410
- --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
405
+ --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
411
406
  --sky-color-background-blocking: var(--bb-color-blocking);
412
407
  --sky-color-background-container-base: var(--bb-color-white);
413
408
  --sky-color-background-container-danger: var(--bb-color-red-300);
414
- --sky-color-background-container-info: var(--bb-color-blue-100);
409
+ --sky-color-background-container-info: var(--bb-color-blue-200);
415
410
  --sky-color-background-container-menu: var(--bb-color-white);
416
411
  --sky-color-background-container-success: var(--bb-color-green-300);
417
412
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
418
- --sky-color-background-file_drop: var(--bb-color-gray-25);
413
+ --sky-color-background-file_drop: var(--bb-color-blue-25);
419
414
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
420
415
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
421
416
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
@@ -423,17 +418,17 @@
423
418
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
424
419
  --sky-color-background-input-base: var(--bb-color-blue-25);
425
420
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
426
- --sky-color-background-list-active: var(--bb-color-transparent);
421
+ --sky-color-background-list-active: var(--bb-color-blue-100);
427
422
  --sky-color-background-list-base: var(--bb-color-transparent);
428
423
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
429
424
  --sky-color-background-list-focus: var(--bb-color-transparent);
430
- --sky-color-background-list-hover: var(--bb-color-transparent);
431
- --sky-color-background-nav-active: var(--bb-color-transparent);
425
+ --sky-color-background-list-hover: var(--bb-color-blue-50);
426
+ --sky-color-background-nav-active: var(--bb-color-blue-100);
432
427
  --sky-color-background-nav-base: var(--bb-color-transparent);
433
428
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
434
429
  --sky-color-background-nav-focus: var(--bb-color-transparent);
435
- --sky-color-background-nav-hover: var(--bb-color-transparent);
436
- --sky-color-background-page: var(--bb-color-gray-25);
430
+ --sky-color-background-nav-hover: var(--bb-color-blue-50);
431
+ --sky-color-background-page: var(--bb-color-blue-25);
437
432
  --sky-color-background-scrim: var(--bb-color-scrim);
438
433
  --sky-color-background-selected-danger: var(--bb-color-red-300);
439
434
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -444,58 +439,58 @@
444
439
  --sky-color-background-thumb-base: var(--bb-color-white);
445
440
  --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
446
441
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
447
- --sky-color-border-action-danger-active: var(--bb-color-red-200);
442
+ --sky-color-border-action-danger-active: var(--bb-color-red-1000);
448
443
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
449
- --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
450
- --sky-color-border-action-danger-focus: var(--bb-color-red-200);
451
- --sky-color-border-action-danger-hover: var(--bb-color-red-200);
444
+ --sky-color-border-action-danger-disabled: var(--bb-color-gray-200);
445
+ --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
446
+ --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
452
447
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
453
448
  --sky-color-border-action-input-base: var(--bb-color-blue-200);
454
- --sky-color-border-action-input-disabled: var(--bb-color-gray-400);
449
+ --sky-color-border-action-input-disabled: var(--bb-color-gray-200);
455
450
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
456
451
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
457
- --sky-color-border-action-primary-active: var(--bb-color-blue-200);
452
+ --sky-color-border-action-primary-active: var(--bb-color-blue-1000);
458
453
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
459
- --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
460
- --sky-color-border-action-primary-focus: var(--bb-color-blue-200);
461
- --sky-color-border-action-primary-hover: var(--bb-color-blue-200);
454
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-200);
455
+ --sky-color-border-action-primary-focus: var(--bb-color-blue-1000);
456
+ --sky-color-border-action-primary-hover: var(--bb-color-blue-1000);
462
457
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
463
- --sky-color-border-action-secondary-base: var(--bb-color-gray-100);
464
- --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
458
+ --sky-color-border-action-secondary-base: var(--bb-color-blue-300);
459
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-200);
465
460
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
466
461
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
467
462
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
468
463
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
469
- --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
464
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
470
465
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
471
466
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
472
467
  --sky-color-border-column_divider: var(--bb-color-blue-600);
473
- --sky-color-border-container-base: var(--bb-color-gray-100);
468
+ --sky-color-border-container-base: var(--bb-color-blue-200);
474
469
  --sky-color-border-danger: var(--bb-color-red-600);
475
- --sky-color-border-divider: var(--bb-color-gray-100);
476
- --sky-color-border-elevation: var(--bb-color-gray-100);
470
+ --sky-color-border-divider: var(--bb-color-blue-300);
471
+ --sky-color-border-elevation: var(--bb-color-blue-200);
477
472
  --sky-color-border-info: var(--bb-color-blue-600);
478
473
  --sky-color-border-input-active: var(--bb-color-blue-600);
479
474
  --sky-color-border-input-base: var(--bb-color-blue-200);
480
- --sky-color-border-input-disabled: var(--bb-color-gray-400);
475
+ --sky-color-border-input-disabled: var(--bb-color-gray-200);
481
476
  --sky-color-border-input-error: var(--bb-color-red-600);
482
477
  --sky-color-border-input-focus: var(--bb-color-blue-600);
483
478
  --sky-color-border-input-hover: var(--bb-color-blue-600);
484
479
  --sky-color-border-progress_step: var(--bb-color-gray-400);
485
480
  --sky-color-border-selected: var(--bb-color-blue-600);
486
481
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
487
- --sky-color-border-separator-light: var(--bb-color-gray-50);
488
- --sky-color-border-separator-row: var(--bb-color-gray-50);
482
+ --sky-color-border-separator-light: var(--bb-color-blue-200);
483
+ --sky-color-border-separator-row: var(--bb-color-blue-200);
489
484
  --sky-color-border-success: var(--bb-color-green-700);
490
485
  --sky-color-border-switch-active: var(--bb-color-blue-600);
491
486
  --sky-color-border-switch-base: var(--bb-color-blue-500);
492
- --sky-color-border-switch-disabled: var(--bb-color-gray-400);
487
+ --sky-color-border-switch-disabled: var(--bb-color-gray-200);
493
488
  --sky-color-border-switch-error: var(--bb-color-red-600);
494
489
  --sky-color-border-switch-focus: var(--bb-color-blue-600);
495
490
  --sky-color-border-switch-hover: var(--bb-color-blue-600);
496
491
  --sky-color-border-switch-selected-active: var(--bb-color-blue-1000);
497
492
  --sky-color-border-switch-selected-base: var(--bb-color-transparent);
498
- --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
493
+ --sky-color-border-switch-selected-disabled: var(--bb-color-gray-200);
499
494
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
500
495
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
501
496
  --sky-color-border-text_highlight: var(--bb-color-yellow-800);
@@ -520,18 +515,45 @@
520
515
  --sky-color-text-danger: var(--bb-color-red-600);
521
516
  --sky-color-text-deemphasized: var(--bb-color-gray-600);
522
517
  --sky-color-text-default: var(--bb-color-gray-900);
523
- --sky-color-text-heading: var(--bb-color-blue-800);
518
+ --sky-color-text-heading: var(--bb-color-blue-900);
524
519
  --sky-color-text-inverse: var(--bb-color-white);
525
- --sky-color-text-link_highlighted: var(--bb-color-blue-800);
520
+ --sky-color-text-link_highlighted: var(--bb-color-blue-700);
526
521
  --sky-color-text-selected: var(--bb-color-blue-600);
527
- --sky-elevation-focus: var(--bb-shadow-gray-2);
522
+ --sky-elevation-action-danger-active: var(--bb-shadow-gray-0);
523
+ --sky-elevation-action-danger-base: var(--bb-shadow-gray-50);
524
+ --sky-elevation-action-danger-disabled: var(--bb-shadow-gray-0);
525
+ --sky-elevation-action-danger-focus: var(--bb-shadow-gray-50);
526
+ --sky-elevation-action-danger-hover: var(--bb-shadow-gray-50);
527
+ --sky-elevation-action-input-active: var(--bb-shadow-gray-25);
528
+ --sky-elevation-action-input-base: var(--bb-shadow-gray-25);
529
+ --sky-elevation-action-input-disabled: var(--bb-shadow-gray-0);
530
+ --sky-elevation-action-input-focus: var(--bb-shadow-gray-25);
531
+ --sky-elevation-action-input-hover: var(--bb-shadow-gray-25);
532
+ --sky-elevation-action-primary-active: var(--bb-shadow-gray-0);
533
+ --sky-elevation-action-primary-base: var(--bb-shadow-gray-50);
534
+ --sky-elevation-action-primary-disabled: var(--bb-shadow-gray-0);
535
+ --sky-elevation-action-primary-focus: var(--bb-shadow-gray-50);
536
+ --sky-elevation-action-primary-hover: var(--bb-shadow-gray-50);
537
+ --sky-elevation-action-secondary-active: var(--bb-shadow-gray-0);
538
+ --sky-elevation-action-secondary-base: var(--bb-shadow-gray-50);
539
+ --sky-elevation-action-secondary-disabled: var(--bb-shadow-gray-0);
540
+ --sky-elevation-action-secondary-focus: var(--bb-shadow-gray-50);
541
+ --sky-elevation-action-secondary-hover: var(--bb-shadow-gray-50);
542
+ --sky-elevation-action-tertiary-active: var(--bb-shadow-gray-0);
543
+ --sky-elevation-action-tertiary-base: var(--bb-shadow-gray-0);
544
+ --sky-elevation-action-tertiary-disabled: var(--bb-shadow-gray-0);
545
+ --sky-elevation-action-tertiary-focus: var(--bb-shadow-gray-0);
546
+ --sky-elevation-action-tertiary-hover: var(--bb-shadow-gray-50);
547
+ --sky-elevation-focus: var(--bb-shadow-gray-200);
548
+ --sky-elevation-input-base: var(--bb-shadow-gray-25);
549
+ --sky-elevation-input-disabled: var(--bb-shadow-gray-0);
528
550
  --sky-elevation-none: var(--bb-shadow-gray-0);
529
- --sky-elevation-overflow: var(--bb-shadow-gray-2);
530
- --sky-elevation-overlay-100: var(--bb-shadow-gray-4);
531
- --sky-elevation-overlay-200: var(--bb-shadow-gray-8);
532
- --sky-elevation-overlay-300: var(--bb-shadow-gray-16);
533
- --sky-elevation-overlay-400: var(--bb-shadow-gray-24);
534
- --sky-elevation-raised-100: var(--bb-shadow-gray-1);
551
+ --sky-elevation-overflow: var(--bb-shadow-gray-200);
552
+ --sky-elevation-overlay-100: var(--bb-shadow-gray-400);
553
+ --sky-elevation-overlay-200: var(--bb-shadow-gray-800);
554
+ --sky-elevation-overlay-300: var(--bb-shadow-gray-1600);
555
+ --sky-elevation-overlay-400: var(--bb-shadow-gray-2400);
556
+ --sky-elevation-raised-100: var(--bb-shadow-gray-100);
535
557
  --sky-opacity-wait: var(--bb-opacity-600);
536
558
  }
537
559
  .sky-theme-modern.sky-theme-brand-base, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-xs, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-sm, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-md, .sky-theme-modern.sky-theme-brand-base .sky-responsive-container-lg {
@@ -567,7 +589,7 @@
567
589
  --sky-border-style-elevation: var(--bb-border-style-solid);
568
590
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
569
591
  --sky-border-style-separator-light: var(--bb-border-style-solid);
570
- --sky-border-style-separator-row: var(--bb-border-style-dotted);
592
+ --sky-border-style-separator-row: var(--bb-border-style-solid);
571
593
  --sky-border-width-accent: var(--bb-size-fixed-37);
572
594
  --sky-border-width-action-active: var(--bb-size-fixed-12);
573
595
  --sky-border-width-action-base: var(--bb-size-fixed-6);
@@ -647,6 +669,10 @@
647
669
  --sky-comp-datepicker-header-space-inset-left: var(--bb-size-fluid-75);
648
670
  --sky-comp-datepicker-header-space-inset-right: var(--bb-size-fluid-75);
649
671
  --sky-comp-datepicker-header-space-inset-top: var(--bb-size-fluid-75);
672
+ --sky-comp-datepicker-m_y_button-space-inset-bottom: var(--bb-size-fluid-50);
673
+ --sky-comp-datepicker-m_y_button-space-inset-left: var(--bb-size-fluid-50);
674
+ --sky-comp-datepicker-m_y_button-space-inset-right: var(--bb-size-fluid-50);
675
+ --sky-comp-datepicker-m_y_button-space-inset-top: var(--bb-size-fluid-50);
650
676
  --sky-comp-dropdown-menu-space-inset-bottom: var(--bb-size-fluid-50);
651
677
  --sky-comp-dropdown-menu-space-inset-left: var(--bb-size-fluid-50);
652
678
  --sky-comp-dropdown-menu-space-inset-right: var(--bb-size-fluid-50);
@@ -900,65 +926,65 @@
900
926
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
901
927
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
902
928
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
903
- --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-normal);
929
+ --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
904
930
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
905
- --sky-font-line_height-body-l: var(--bb-line_height-300);
906
- --sky-font-line_height-body-m: var(--bb-line_height-200);
907
- --sky-font-line_height-body-s: var(--bb-line_height-100);
908
- --sky-font-line_height-display-1: var(--bb-line_height-800);
909
- --sky-font-line_height-display-2: var(--bb-line_height-500);
910
- --sky-font-line_height-display-3: var(--bb-line_height-300);
911
- --sky-font-line_height-display-4: var(--bb-line_height-200);
912
- --sky-font-line_height-heading-1: var(--bb-line_height-500);
913
- --sky-font-line_height-heading-2: var(--bb-line_height-400);
914
- --sky-font-line_height-heading-3: var(--bb-line_height-300);
915
- --sky-font-line_height-heading-4: var(--bb-line_height-200);
916
- --sky-font-line_height-heading-5: var(--bb-line_height-200);
917
- --sky-font-line_height-hint-m: var(--bb-line_height-200);
918
- --sky-font-line_height-hint-s: var(--bb-line_height-100);
919
- --sky-font-line_height-input-label: var(--bb-line_height-100);
920
- --sky-font-line_height-input-val: var(--bb-line_height-200);
921
- --sky-font-size-body-l: var(--bb-font-size-300);
922
- --sky-font-size-body-m: var(--bb-font-size-200);
923
- --sky-font-size-body-s: var(--bb-font-size-100);
924
- --sky-font-size-display-1: var(--bb-font-size-800);
925
- --sky-font-size-display-2: var(--bb-font-size-500);
926
- --sky-font-size-display-3: var(--bb-font-size-300);
927
- --sky-font-size-display-4: var(--bb-font-size-200);
928
- --sky-font-size-heading-1: var(--bb-font-size-500);
929
- --sky-font-size-heading-2: var(--bb-font-size-400);
930
- --sky-font-size-heading-3: var(--bb-font-size-300);
931
- --sky-font-size-heading-4: var(--bb-font-size-200);
932
- --sky-font-size-heading-5: var(--bb-font-size-200);
933
- --sky-font-size-hint-m: var(--bb-font-size-200);
934
- --sky-font-size-hint-s: var(--bb-font-size-100);
935
- --sky-font-size-input-label: var(--bb-font-size-100);
936
- --sky-font-size-input-val: var(--bb-font-size-200);
931
+ --sky-font-line_height-body-l: var(--bb-line_height-500);
932
+ --sky-font-line_height-body-m: var(--bb-line_height-400);
933
+ --sky-font-line_height-body-s: var(--bb-line_height-300);
934
+ --sky-font-line_height-display-1: var(--bb-line_height-700);
935
+ --sky-font-line_height-display-2: var(--bb-line_height-600);
936
+ --sky-font-line_height-display-3: var(--bb-line_height-500);
937
+ --sky-font-line_height-display-4: var(--bb-line_height-400);
938
+ --sky-font-line_height-heading-1: var(--bb-line_height-800);
939
+ --sky-font-line_height-heading-2: var(--bb-line_height-600);
940
+ --sky-font-line_height-heading-3: var(--bb-line_height-500);
941
+ --sky-font-line_height-heading-4: var(--bb-line_height-400);
942
+ --sky-font-line_height-heading-5: var(--bb-line_height-400);
943
+ --sky-font-line_height-hint-m: var(--bb-line_height-400);
944
+ --sky-font-line_height-hint-s: var(--bb-line_height-300);
945
+ --sky-font-line_height-input-label: var(--bb-line_height-300);
946
+ --sky-font-line_height-input-val: var(--bb-line_height-400);
947
+ --sky-font-size-body-l: var(--bb-font-size-500);
948
+ --sky-font-size-body-m: var(--bb-font-size-400);
949
+ --sky-font-size-body-s: var(--bb-font-size-300);
950
+ --sky-font-size-display-1: var(--bb-font-size-700);
951
+ --sky-font-size-display-2: var(--bb-font-size-600);
952
+ --sky-font-size-display-3: var(--bb-font-size-500);
953
+ --sky-font-size-display-4: var(--bb-font-size-400);
954
+ --sky-font-size-heading-1: var(--bb-font-size-800);
955
+ --sky-font-size-heading-2: var(--bb-font-size-600);
956
+ --sky-font-size-heading-3: var(--bb-font-size-500);
957
+ --sky-font-size-heading-4: var(--bb-font-size-400);
958
+ --sky-font-size-heading-5: var(--bb-font-size-400);
959
+ --sky-font-size-hint-m: var(--bb-font-size-400);
960
+ --sky-font-size-hint-s: var(--bb-font-size-300);
961
+ --sky-font-size-input-label: var(--bb-font-size-300);
962
+ --sky-font-size-input-val: var(--bb-font-size-400);
937
963
  --sky-font-style-body-l: var(--bb-font-style-regular);
938
964
  --sky-font-style-body-m: var(--bb-font-style-regular);
939
965
  --sky-font-style-body-s: var(--bb-font-style-regular);
940
- --sky-font-style-display-1: var(--bb-font-style-light);
941
- --sky-font-style-display-2: var(--bb-font-style-light);
942
- --sky-font-style-display-3: var(--bb-font-style-light);
943
- --sky-font-style-display-4: var(--bb-font-style-light);
966
+ --sky-font-style-display-1: var(--bb-font-style-regular);
967
+ --sky-font-style-display-2: var(--bb-font-style-regular);
968
+ --sky-font-style-display-3: var(--bb-font-style-regular);
969
+ --sky-font-style-display-4: var(--bb-font-style-regular);
944
970
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
945
- --sky-font-style-heading-1: var(--bb-font-style-regular);
946
- --sky-font-style-heading-2: var(--bb-font-style-regular);
947
- --sky-font-style-heading-3: var(--bb-font-style-regular);
971
+ --sky-font-style-heading-1: var(--bb-font-style-semibold);
972
+ --sky-font-style-heading-2: var(--bb-font-style-semibold);
973
+ --sky-font-style-heading-3: var(--bb-font-style-semibold);
948
974
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
949
975
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
950
976
  --sky-font-style-input-label: var(--bb-font-style-regular);
951
977
  --sky-font-weight-body-l: var(--bb-font-weight-regular);
952
978
  --sky-font-weight-body-m: var(--bb-font-weight-regular);
953
- --sky-font-weight-body-s: var(--bb-font-weight-regular);
954
- --sky-font-weight-display-1: var(--bb-font-weight-light);
955
- --sky-font-weight-display-2: var(--bb-font-weight-light);
956
- --sky-font-weight-display-3: var(--bb-font-weight-light);
957
- --sky-font-weight-display-4: var(--bb-font-weight-light);
979
+ --sky-font-weight-body-s: var(--bb-font-weight-semibold);
980
+ --sky-font-weight-display-1: var(--bb-font-weight-regular);
981
+ --sky-font-weight-display-2: var(--bb-font-weight-regular);
982
+ --sky-font-weight-display-3: var(--bb-font-weight-semibold);
983
+ --sky-font-weight-display-4: var(--bb-font-weight-semibold);
958
984
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
959
985
  --sky-font-weight-heading-1: var(--bb-font-weight-regular);
960
- --sky-font-weight-heading-2: var(--bb-font-weight-regular);
961
- --sky-font-weight-heading-3: var(--bb-font-weight-regular);
986
+ --sky-font-weight-heading-2: var(--bb-font-weight-semibold);
987
+ --sky-font-weight-heading-3: var(--bb-font-weight-semibold);
962
988
  --sky-font-weight-heading-4: var(--bb-font-weight-semibold);
963
989
  --sky-font-weight-heading-5: var(--bb-font-weight-semibold);
964
990
  --sky-font-weight-hint-m: var(--bb-font-weight-regular);
package/assets/scss/modern.css CHANGED
@@ -270,8 +270,35 @@
270
270
  --sky-color-text-inverse: var(--modern-color-white);
271
271
  --sky-color-text-link_highlight: var(--modern-color-blue-80);
272
272
  --sky-color-text-selected: var(--modern-color-blue-74);
273
+ --sky-elevation-action-danger-active: var(--modern-shadow-size-0);
274
+ --sky-elevation-action-danger-base: var(--modern-shadow-size-0);
275
+ --sky-elevation-action-danger-disabled: var(--modern-shadow-size-0);
276
+ --sky-elevation-action-danger-hover: var(--modern-shadow-size-0);
277
+ --sky-elevation-action-input-active: var(--modern-shadow-size-0);
278
+ --sky-elevation-action-input-base: var(--modern-shadow-size-0);
279
+ --sky-elevation-action-input-disabled: var(--modern-shadow-size-0);
280
+ --sky-elevation-action-input-hover: var(--modern-shadow-size-0);
281
+ --sky-elevation-action-primary-active: var(--modern-shadow-size-0);
282
+ --sky-elevation-action-primary-base: var(--modern-shadow-size-0);
283
+ --sky-elevation-action-primary-disabled: var(--modern-shadow-size-0);
284
+ --sky-elevation-action-primary-hover: var(--modern-shadow-size-0);
285
+ --sky-elevation-action-secondary-active: var(--modern-shadow-size-0);
286
+ --sky-elevation-action-secondary-base: var(--modern-shadow-size-0);
287
+ --sky-elevation-action-secondary-disabled: var(--modern-shadow-size-0);
288
+ --sky-elevation-action-secondary-hover: var(--modern-shadow-size-0);
289
+ --sky-elevation-action-tertiary-active: var(--modern-shadow-size-0);
290
+ --sky-elevation-action-tertiary-base: var(--modern-shadow-size-0);
291
+ --sky-elevation-action-tertiary-disabled: var(--modern-shadow-size-0);
292
+ --sky-elevation-action-tertiary-hover: var(--modern-shadow-size-0);
293
+ --sky-elevation-input-base: var(--modern-shadow-size-0);
294
+ --sky-elevation-input-disabled: var(--modern-shadow-size-0);
273
295
  --sky-elevation-none: var(--modern-shadow-size-0);
274
296
  --sky-opacity-wait: var(--modern-opacity-600);
297
+ --sky-elevation-action-danger-focus: var(--modern-shadow-size-3);
298
+ --sky-elevation-action-input-focus: var(--modern-shadow-size-3);
299
+ --sky-elevation-action-primary-focus: var(--modern-shadow-size-3);
300
+ --sky-elevation-action-secondary-focus: var(--modern-shadow-size-3);
301
+ --sky-elevation-action-tertiary-focus: var(--modern-shadow-size-3);
275
302
  --sky-elevation-focus: var(--modern-shadow-size-3);
276
303
  --sky-elevation-overflow: var(--modern-shadow-size-3);
277
304
  --sky-elevation-overlay-100: var(--modern-shadow-size-4);
@@ -392,6 +419,10 @@
392
419
  --sky-comp-datepicker-header-space-inset-left: var(--modern-size-15);
393
420
  --sky-comp-datepicker-header-space-inset-right: var(--modern-size-15);
394
421
  --sky-comp-datepicker-header-space-inset-top: var(--modern-size-15);
422
+ --sky-comp-datepicker-m_y_button-space-inset-bottom: var(--modern-size-5);
423
+ --sky-comp-datepicker-m_y_button-space-inset-left: var(--modern-size-10);
424
+ --sky-comp-datepicker-m_y_button-space-inset-right: var(--modern-size-10);
425
+ --sky-comp-datepicker-m_y_button-space-inset-top: var(--modern-size-5);
395
426
  --sky-comp-dropdown-menu-space-inset-bottom: var(--modern-size-10);
396
427
  --sky-comp-dropdown-menu-space-inset-left: var(--modern-size-0);
397
428
  --sky-comp-dropdown-menu-space-inset-right: var(--modern-size-0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.64",
3
+ "version": "0.0.65",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",