@blackbaud/skyux-design-tokens 0.0.45 → 0.0.46
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.
- package/CHANGELOG.md +9 -0
- package/package.json +1 -1
- package/scss/blackbaud.css +10 -20
- package/scss/modern.css +7 -14
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,15 @@
|
|
|
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.46](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.45...0.0.46) (2025-03-14)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* darkening success colors for increased contrast 3.07:1 with white ([#142](https://github.com/blackbaud/skyux-design-tokens/issues/142)) ([07dd200](https://github.com/blackbaud/skyux-design-tokens/commit/07dd2006a86a1ed609ea1dcaaf8ed72a2ebb7c6c))
|
|
11
|
+
* new icons sizes for full range ([#137](https://github.com/blackbaud/skyux-design-tokens/issues/137)) ([0af15b0](https://github.com/blackbaud/skyux-design-tokens/commit/0af15b0cb735a5511f65cdd496a740ca0c6e4d9d))
|
|
12
|
+
* new tokens for icon decoration ([#138](https://github.com/blackbaud/skyux-design-tokens/issues/138)) ([1b98ed1](https://github.com/blackbaud/skyux-design-tokens/commit/1b98ed1259f4114ff4e20451a86da61a975aa7aa))
|
|
13
|
+
|
|
5
14
|
## [0.0.45](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.44...0.0.45) (2025-02-18)
|
|
6
15
|
|
|
7
16
|
|
package/package.json
CHANGED
package/scss/blackbaud.css
CHANGED
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
--bb-color-green-1000: #022b17;
|
|
66
66
|
--bb-color-green-900: #05572e;
|
|
67
67
|
--bb-color-green-800: #078245;
|
|
68
|
-
--bb-color-green-700: #
|
|
68
|
+
--bb-color-green-700: #0aa959;
|
|
69
69
|
--bb-color-green-600: #0cd973;
|
|
70
70
|
--bb-color-green-500: #3de18f;
|
|
71
71
|
--bb-color-green-400: #6de8ab;
|
|
@@ -250,11 +250,12 @@
|
|
|
250
250
|
--sky-color-border-elevation: var(--bb-color-gray-100);
|
|
251
251
|
--sky-color-border-divider: var(--bb-color-gray-100);
|
|
252
252
|
--sky-color-border-info: var(--bb-color-blue-600);
|
|
253
|
-
--sky-color-border-success: var(--bb-color-green-
|
|
253
|
+
--sky-color-border-success: var(--bb-color-green-700);
|
|
254
254
|
--sky-color-border-warning: var(--bb-color-yellow-600);
|
|
255
255
|
--sky-color-border-danger: var(--bb-color-red-600);
|
|
256
256
|
--sky-color-border-selected_soft: var(--bb-color-blue-300);
|
|
257
257
|
--sky-color-border-selected: var(--bb-color-blue-600);
|
|
258
|
+
--sky-color-background-icon_matte: var(--bb-color-blue-100);
|
|
258
259
|
--sky-color-background-thumbnail_matte: var(--bb-color-white);
|
|
259
260
|
--sky-color-background-file_drop: var(--bb-color-gray-25);
|
|
260
261
|
--sky-color-background-list-disabled: var(--bb-color-gray-50);
|
|
@@ -313,7 +314,7 @@
|
|
|
313
314
|
--sky-color-icon-action: var(--bb-color-blue-600);
|
|
314
315
|
--sky-color-icon-inverse: var(--bb-color-white);
|
|
315
316
|
--sky-color-icon-info: var(--bb-color-blue-600);
|
|
316
|
-
--sky-color-icon-success: var(--bb-color-green-
|
|
317
|
+
--sky-color-icon-success: var(--bb-color-green-700);
|
|
317
318
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
318
319
|
--sky-color-icon-danger: var(--bb-color-red-600);
|
|
319
320
|
--sky-color-icon-deemphasized: var(--bb-color-gray-600);
|
|
@@ -370,9 +371,6 @@
|
|
|
370
371
|
--sky-font-text_decoration-inline_link-hover: underline;
|
|
371
372
|
--sky-font-text_decoration-inline_link-base: none;
|
|
372
373
|
--sky-font-text_decoration-visible_link: underline;
|
|
373
|
-
--sky-font-weight-metric-l: var(--bb-font-weight-light);
|
|
374
|
-
--sky-font-weight-metric-m: var(--bb-font-weight-regular);
|
|
375
|
-
--sky-font-weight-metric-s: var(--bb-font-weight-semibold);
|
|
376
374
|
--sky-font-weight-input-label: var(--bb-font-weight-regular);
|
|
377
375
|
--sky-font-weight-hint-m: var(--bb-font-weight-regular);
|
|
378
376
|
--sky-font-weight-hint-s: var(--bb-font-weight-regular);
|
|
@@ -392,9 +390,6 @@
|
|
|
392
390
|
--sky-font-weight-emphasized: var(--bb-font-weight-semibold);
|
|
393
391
|
--sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-normal);
|
|
394
392
|
--sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
|
|
395
|
-
--sky-font-line_height-metric-l: var(--bb-line_height-700);
|
|
396
|
-
--sky-font-line_height-metric-m: var(--bb-line_height-400);
|
|
397
|
-
--sky-font-line_height-metric-s: var(--bb-line_height-200);
|
|
398
393
|
--sky-font-line_height-input-val: var(--bb-line_height-200);
|
|
399
394
|
--sky-font-line_height-input-label: var(--bb-line_height-100);
|
|
400
395
|
--sky-font-line_height-hint-m: var(--bb-line_height-200);
|
|
@@ -412,9 +407,6 @@
|
|
|
412
407
|
--sky-font-line_height-body-m: var(--bb-line_height-200);
|
|
413
408
|
--sky-font-line_height-body-s: var(--bb-line_height-100);
|
|
414
409
|
--sky-font-line_height-data_label: var(--bb-line_height-200);
|
|
415
|
-
--sky-font-style-metric-l: var(--bb-font-style-light);
|
|
416
|
-
--sky-font-style-metric-m: var(--bb-font-style-regular);
|
|
417
|
-
--sky-font-style-metric-s: var(--bb-font-style-semibold);
|
|
418
410
|
--sky-font-style-input-label: var(--bb-font-style-regular);
|
|
419
411
|
--sky-font-style-hint-m-style: italic;
|
|
420
412
|
--sky-font-style-hint-m-weight: 400;
|
|
@@ -436,9 +428,6 @@
|
|
|
436
428
|
--sky-font-style-emphasized: var(--bb-font-style-semibold);
|
|
437
429
|
--sky-font-style-deemphasized-style: italic;
|
|
438
430
|
--sky-font-style-deemphasized-weight: 400;
|
|
439
|
-
--sky-font-size-metric-l: var(--bb-font-size-700);
|
|
440
|
-
--sky-font-size-metric-m: var(--bb-font-size-400);
|
|
441
|
-
--sky-font-size-metric-s: var(--bb-font-size-200);
|
|
442
431
|
--sky-font-size-input-val: var(--bb-font-size-200);
|
|
443
432
|
--sky-font-size-input-label: var(--bb-font-size-100);
|
|
444
433
|
--sky-font-size-hint-m: var(--bb-font-size-200);
|
|
@@ -458,9 +447,6 @@
|
|
|
458
447
|
--sky-font-size-data_label: var(--bb-font-size-200);
|
|
459
448
|
--sky-font-family-monospaced: var(--bb-font-monospaced-family);
|
|
460
449
|
--sky-font-family-primary: var(--bb-font-blkb_sans-family);
|
|
461
|
-
--sky-type-metric-l: var(--sky-font-style-metric-l) var(--sky-font-size-metric-l)/var(--sky-font-line_height-metric-l) var(--sky-font-family-primary);
|
|
462
|
-
--sky-type-metric-m: var(--sky-font-style-metric-m) var(--sky-font-size-metric-m)/var(--sky-font-line_height-metric-m) var(--sky-font-family-primary);
|
|
463
|
-
--sky-type-metric-s: var(--sky-font-style-metric-s) var(--sky-font-size-metric-s)/var(--sky-font-line_height-metric-s) var(--sky-font-family-primary);
|
|
464
450
|
--sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/var(--sky-font-line_height-input-val) var(--sky-font-family-primary);
|
|
465
451
|
--sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--sky-font-family-primary);
|
|
466
452
|
--sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
|
|
@@ -489,12 +475,15 @@
|
|
|
489
475
|
--sky-size-illustration-l: var(--bb-size-fluid-500);
|
|
490
476
|
--sky-size-illustration-m: var(--bb-size-fluid-400);
|
|
491
477
|
--sky-size-illustration-s: var(--bb-size-fluid-300);
|
|
478
|
+
--sky-size-icon-xxxl: var(--bb-size-fluid-300);
|
|
479
|
+
--sky-size-icon-xxl: var(--bb-size-fluid-250);
|
|
492
480
|
--sky-size-icon-xl: var(--bb-size-fluid-200);
|
|
493
481
|
--sky-size-icon-l: var(--bb-size-fluid-150);
|
|
494
482
|
--sky-size-icon-m: var(--bb-size-fluid-125);
|
|
495
483
|
--sky-size-icon-s: var(--bb-size-fluid-100);
|
|
496
|
-
--sky-size-icon-xs: var(--bb-size-fluid-
|
|
497
|
-
--sky-size-icon-xxs: var(--bb-size-fluid-
|
|
484
|
+
--sky-size-icon-xs: var(--bb-size-fluid-75);
|
|
485
|
+
--sky-size-icon-xxs: var(--bb-size-fluid-50);
|
|
486
|
+
--sky-size-icon-xxxs: var(--bb-size-fluid-25);
|
|
498
487
|
--sky-size-picker_btn: var(--bb-size-fluid-200);
|
|
499
488
|
--sky-size-switch: var(--bb-size-fluid-125);
|
|
500
489
|
--sky-space-stacked-xxl: var(--bb-size-fluid-300);
|
|
@@ -576,6 +565,7 @@
|
|
|
576
565
|
--sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
|
|
577
566
|
--sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
|
|
578
567
|
--sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
|
|
568
|
+
--sky-space-inset-thumbnail_matte-xl: var(--bb-size-fluid-50);
|
|
579
569
|
--sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
|
|
580
570
|
--sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
|
|
581
571
|
--sky-space-inset-thumbnail_matte-s: var(--bb-size-fluid-12);
|
package/scss/modern.css
CHANGED
|
@@ -172,6 +172,7 @@
|
|
|
172
172
|
--sky-color-border-danger: var(--modern-color-red-50);
|
|
173
173
|
--sky-color-border-selected_soft: var(--modern-color-blue-30);
|
|
174
174
|
--sky-color-border-selected: var(--modern-color-blue-74);
|
|
175
|
+
--sky-color-background-icon_matte: var(--modern-color-blue-05);
|
|
175
176
|
--sky-color-background-thumbnail_matte: var(--modern-color-white);
|
|
176
177
|
--sky-color-background-file_drop: var(--modern-color-gray-05);
|
|
177
178
|
--sky-color-background-list-disabled: var(--modern-color-gray-07);
|
|
@@ -292,12 +293,15 @@
|
|
|
292
293
|
--sky-size-illustration-l: var(--modern-size-80);
|
|
293
294
|
--sky-size-illustration-m: var(--modern-size-64);
|
|
294
295
|
--sky-size-illustration-s: var(--modern-size-48);
|
|
296
|
+
--sky-size-icon-xxxl: var(--modern-size-48);
|
|
297
|
+
--sky-size-icon-xxl: var(--modern-size-40);
|
|
295
298
|
--sky-size-icon-xl: var(--modern-size-32);
|
|
296
299
|
--sky-size-icon-l: var(--modern-size-24);
|
|
297
300
|
--sky-size-icon-m: var(--modern-size-20);
|
|
298
301
|
--sky-size-icon-s: var(--modern-size-16);
|
|
299
|
-
--sky-size-icon-xs: var(--modern-size-
|
|
300
|
-
--sky-size-icon-xxs: var(--modern-size-
|
|
302
|
+
--sky-size-icon-xs: var(--modern-size-12);
|
|
303
|
+
--sky-size-icon-xxs: var(--modern-size-10);
|
|
304
|
+
--sky-size-icon-xxxs: var(--modern-size-5);
|
|
301
305
|
--sky-size-picker_btn: var(--modern-size-30);
|
|
302
306
|
--sky-size-switch: var(--modern-size-26);
|
|
303
307
|
--sky-space-stacked-xxl: var(--modern-space-xxl);
|
|
@@ -379,6 +383,7 @@
|
|
|
379
383
|
--sky-space-inset-vertical-top-l: var(--modern-space-lg);
|
|
380
384
|
--sky-space-inset-vertical-top-m: var(--modern-space-md);
|
|
381
385
|
--sky-space-inset-vertical-top-s: var(--modern-space-s);
|
|
386
|
+
--sky-space-inset-thumbnail_matte-xl: var(--modern-size-9);
|
|
382
387
|
--sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
|
|
383
388
|
--sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
|
|
384
389
|
--sky-space-inset-thumbnail_matte-s: var(--modern-size-2);
|
|
@@ -474,9 +479,6 @@
|
|
|
474
479
|
--sky-font-text_decoration-inline_link-hover: underline;
|
|
475
480
|
--sky-font-text_decoration-inline_link-base: none;
|
|
476
481
|
--sky-font-text_decoration-visible_link: underline;
|
|
477
|
-
--sky-font-weight-metric-l: var(--modern-font-weight-regular);
|
|
478
|
-
--sky-font-weight-metric-m: var(--modern-font-weight-regular);
|
|
479
|
-
--sky-font-weight-metric-s: var(--modern-font-weight-bold);
|
|
480
482
|
--sky-font-weight-input-label: var(--modern-font-weight-regular);
|
|
481
483
|
--sky-font-weight-hint-m: var(--modern-font-weight-regular);
|
|
482
484
|
--sky-font-weight-hint-s: var(--modern-font-weight-regular);
|
|
@@ -498,9 +500,6 @@
|
|
|
498
500
|
--sky-font-letter_spacing-input-label: var(--modern-letter_spacing-normal);
|
|
499
501
|
--sky-font-family-monospaced: var(--modern-font-monospaced-family);
|
|
500
502
|
--sky-font-family-primary: var(--modern-font-blkb_sans-family);
|
|
501
|
-
--sky-font-style-metric-l: var(--modern-font-weight-regular);
|
|
502
|
-
--sky-font-style-metric-m: var(--modern-font-weight-regular);
|
|
503
|
-
--sky-font-style-metric-s: var(--modern-font-weight-bold);
|
|
504
503
|
--sky-font-style-input-label: var(--modern-font-style-regular);
|
|
505
504
|
--sky-font-style-hint-m-style: italic;
|
|
506
505
|
--sky-font-style-hint-m-weight: 400;
|
|
@@ -522,9 +521,6 @@
|
|
|
522
521
|
--sky-font-style-emphasized: var(--modern-font-style-semibold);
|
|
523
522
|
--sky-font-style-deemphasized-style: italic;
|
|
524
523
|
--sky-font-style-deemphasized-weight: 400;
|
|
525
|
-
--sky-font-line_height-metric-l: var(--modern-line_height-normal);
|
|
526
|
-
--sky-font-line_height-metric-m: var(--modern-line_height-normal);
|
|
527
|
-
--sky-font-line_height-metric-s: var(--modern-line_height-normal);
|
|
528
524
|
--sky-font-line_height-input-val: var(--modern-line_height-20);
|
|
529
525
|
--sky-font-line_height-input-label: var(--modern-line_height-normal);
|
|
530
526
|
--sky-font-line_height-hint-m: var(--modern-line_height-normal);
|
|
@@ -542,9 +538,6 @@
|
|
|
542
538
|
--sky-font-line_height-body-m: var(--modern-line_height-150);
|
|
543
539
|
--sky-font-line_height-body-s: var(--modern-line_height-normal);
|
|
544
540
|
--sky-font-line_height-data_label: var(--modern-line_height-normal);
|
|
545
|
-
--sky-font-size-metric-l: var(--sky-font-size-display-1);
|
|
546
|
-
--sky-font-size-metric-m: var(--sky-font-size-display-3);
|
|
547
|
-
--sky-font-size-metric-s: var(--sky-font-size-display-4);
|
|
548
541
|
--sky-font-size-input-val: var(--modern-font-size-200);
|
|
549
542
|
--sky-font-size-input-label: var(--modern-font-size-125);
|
|
550
543
|
--sky-font-size-hint-m: var(--modern-font-size-200);
|