@blackbaud/skyux-design-tokens 2.0.0-alpha.14 → 2.0.0-alpha.16
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 +21 -0
- package/assets/assets.json +10 -2
- package/assets/images/favicon.ico +0 -0
- package/assets/scss/blackbaud.css +20 -3
- package/assets/scss/modern.css +14 -1
- package/bundles/blackbaud.css +1303 -0
- package/bundles/modern.css +1010 -0
- package/package.json +10 -5
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
- Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
|
|
4
4
|
|
|
5
|
+
## [2.0.0-alpha.16](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.15...2.0.0-alpha.16) (2025-08-06)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add support for favicon ([#267](https://github.com/blackbaud/skyux-design-tokens/issues/267)) ([ee8be86](https://github.com/blackbaud/skyux-design-tokens/commit/ee8be86a99d796ccfcaad64b448ac26a0beb422c))
|
|
11
|
+
* initial colors for illustrations ([#255](https://github.com/blackbaud/skyux-design-tokens/issues/255)) ([93039f6](https://github.com/blackbaud/skyux-design-tokens/commit/93039f6c9d2edd329af756c94ad4894cb2979cd6))
|
|
12
|
+
* list summary tokens ([#261](https://github.com/blackbaud/skyux-design-tokens/issues/261)) ([b0f3837](https://github.com/blackbaud/skyux-design-tokens/commit/b0f3837997cb2c2f7f3bb76a644e05f24effa247))
|
|
13
|
+
* publish stylesheets to bundles ([#265](https://github.com/blackbaud/skyux-design-tokens/issues/265)) ([2b53bd0](https://github.com/blackbaud/skyux-design-tokens/commit/2b53bd057bbe1ead0e48915d90e85e72506f79f5))
|
|
14
|
+
|
|
15
|
+
## [2.0.0-alpha.15](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.14...2.0.0-alpha.15) (2025-08-04)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### ⚠ BREAKING CHANGES
|
|
19
|
+
|
|
20
|
+
* add selected switch backgrounds ([#260](https://github.com/blackbaud/skyux-design-tokens/issues/260))
|
|
21
|
+
|
|
22
|
+
### Features
|
|
23
|
+
|
|
24
|
+
* add selected switch backgrounds ([#260](https://github.com/blackbaud/skyux-design-tokens/issues/260)) ([341a4ec](https://github.com/blackbaud/skyux-design-tokens/commit/341a4eca483a3d4e295750464eb3776b681cab43))
|
|
25
|
+
|
|
5
26
|
## [2.0.0-alpha.14](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.13...2.0.0-alpha.14) (2025-07-31)
|
|
6
27
|
|
|
7
28
|
|
package/assets/assets.json
CHANGED
|
Binary file
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
--bb-color-blue-700: #2256aa;
|
|
30
30
|
--bb-color-blue-800: #1a4080;
|
|
31
31
|
--bb-color-blue-900: #112b55;
|
|
32
|
+
--bb-color-brand-trusted_blue: #004054;
|
|
32
33
|
--bb-color-gray-100: #d3d5d6;
|
|
33
34
|
--bb-color-gray-1000: #1e2229;
|
|
34
35
|
--bb-color-gray-1100: #161a1f;
|
|
@@ -152,7 +153,7 @@
|
|
|
152
153
|
--bb-font-weight-light: 300;
|
|
153
154
|
--bb-font-weight-regular: 400;
|
|
154
155
|
--bb-font-weight-semibold: 600;
|
|
155
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
156
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.16/assets/images/bb-logo.png');
|
|
156
157
|
--bb-letter_spacing-normal: normal;
|
|
157
158
|
--bb-letter_spacing-wider: 0.16px;
|
|
158
159
|
--bb-line_height-300: calc(18/13);
|
|
@@ -287,13 +288,13 @@
|
|
|
287
288
|
--sky-color-background-input-disabled: var(--bb-color-gray-700);
|
|
288
289
|
--sky-color-background-nav-active: var(--bb-color-transparent);
|
|
289
290
|
--sky-color-background-nav-base: var(--bb-color-transparent);
|
|
290
|
-
--sky-color-background-nav-disabled: var(--bb-color-gray-
|
|
291
|
+
--sky-color-background-nav-disabled: var(--bb-color-gray-700);
|
|
291
292
|
--sky-color-background-nav-focus: var(--bb-color-transparent);
|
|
292
293
|
--sky-color-background-nav-hover: var(--bb-color-transparent);
|
|
293
294
|
--sky-color-background-page: var(--bb-color-gray-1100);
|
|
294
295
|
--sky-color-background-row-active: var(--bb-color-transparent);
|
|
295
296
|
--sky-color-background-row-base: var(--bb-color-gray-1000);
|
|
296
|
-
--sky-color-background-row-disabled: var(--bb-color-gray-
|
|
297
|
+
--sky-color-background-row-disabled: var(--bb-color-gray-700);
|
|
297
298
|
--sky-color-background-row-focus: var(--bb-color-transparent);
|
|
298
299
|
--sky-color-background-row-hover: var(--bb-color-transparent);
|
|
299
300
|
--sky-color-background-scrim: var(--bb-color-scrim);
|
|
@@ -301,6 +302,8 @@
|
|
|
301
302
|
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
302
303
|
--sky-color-background-selected-soft: var(--bb-color-blue-900);
|
|
303
304
|
--sky-color-background-selected-success: var(--bb-color-green-900);
|
|
305
|
+
--sky-color-background-selected-switch-base: var(--bb-color-blue-600);
|
|
306
|
+
--sky-color-background-selected-switch-disabled: var(--bb-color-gray-700);
|
|
304
307
|
--sky-color-background-selected-warning: var(--bb-color-yellow-900);
|
|
305
308
|
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
306
309
|
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
@@ -391,6 +394,10 @@
|
|
|
391
394
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
392
395
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
393
396
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
397
|
+
--sky-color-illustration-fill-heavy: var(--bb-color-green-700);
|
|
398
|
+
--sky-color-illustration-fill-soft: var(--bb-color-green-900);
|
|
399
|
+
--sky-color-illustration-fill-softest: var(--bb-color-gray-900);
|
|
400
|
+
--sky-color-illustration-stroke: var(--bb-color-green-200);
|
|
394
401
|
--sky-color-text-action: var(--bb-color-sky-600);
|
|
395
402
|
--sky-color-text-action_contrast: var(--bb-color-blue-300);
|
|
396
403
|
--sky-color-text-danger: var(--bb-color-red-400);
|
|
@@ -468,6 +475,7 @@
|
|
|
468
475
|
--sky-color-background-selected-heavy: var(--bb-color-blue-600);
|
|
469
476
|
--sky-color-background-selected-soft: var(--bb-color-blue-100);
|
|
470
477
|
--sky-color-background-selected-success: var(--bb-color-green-300);
|
|
478
|
+
--sky-color-background-selected-switch-disabled: var(--bb-color-gray-50);
|
|
471
479
|
--sky-color-background-selected-warning: var(--bb-color-yellow-300);
|
|
472
480
|
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
473
481
|
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
@@ -564,6 +572,10 @@
|
|
|
564
572
|
--sky-color-icon-selected: var(--bb-color-blue-600);
|
|
565
573
|
--sky-color-icon-success: var(--bb-color-green-700);
|
|
566
574
|
--sky-color-icon-warning: var(--bb-color-yellow-600);
|
|
575
|
+
--sky-color-illustration-fill-heavy: var(--bb-color-green-400);
|
|
576
|
+
--sky-color-illustration-fill-soft: var(--bb-color-green-100);
|
|
577
|
+
--sky-color-illustration-fill-softest: var(--bb-color-white);
|
|
578
|
+
--sky-color-illustration-stroke: var(--bb-color-brand-trusted_blue);
|
|
567
579
|
--sky-color-text-action: var(--bb-color-blue-600);
|
|
568
580
|
--sky-color-text-action_contrast: var(--bb-color-blue-700);
|
|
569
581
|
--sky-color-text-danger: var(--bb-color-red-600);
|
|
@@ -591,6 +603,7 @@
|
|
|
591
603
|
--sky-elevation-none: var(--bb-shadow-blue-0);
|
|
592
604
|
--sky-image-logo-primary-src: var(--bb-image-logo-primary-src);
|
|
593
605
|
--sky-opacity-wait: var(--bb-opacity-600);
|
|
606
|
+
--sky-color-background-selected-switch-base: var(--bb-color-gradient-blue);
|
|
594
607
|
--sky-elevation-action-danger-base: var(--bb-shadow-blue-50);
|
|
595
608
|
--sky-elevation-action-danger-focus: var(--bb-shadow-blue-50);
|
|
596
609
|
--sky-elevation-action-danger-hover: var(--bb-shadow-blue-50);
|
|
@@ -899,6 +912,10 @@
|
|
|
899
912
|
--sky-comp-layout-tabset-tabs-space-inset-xs-left: var(--bb-size-fluid-50);
|
|
900
913
|
--sky-comp-layout-tabset-tabs-space-inset-xs-right: var(--bb-size-0);
|
|
901
914
|
--sky-comp-layout-tabset-tabs-space-inset-xs-top: var(--bb-size-0);
|
|
915
|
+
--sky-comp-list_summary-space-inset-bottom: var(--bb-size-fluid-25);
|
|
916
|
+
--sky-comp-list_summary-space-inset-left: var(--bb-size-fluid-50);
|
|
917
|
+
--sky-comp-list_summary-space-inset-right: var(--bb-size-fluid-50);
|
|
918
|
+
--sky-comp-list_summary-space-inset-top: var(--bb-size-fluid-25);
|
|
902
919
|
--sky-comp-modal-content-space-inset-bottom: var(--bb-size-fluid-150);
|
|
903
920
|
--sky-comp-modal-content-space-inset-left: var(--bb-size-fluid-150);
|
|
904
921
|
--sky-comp-modal-content-space-inset-right: var(--bb-size-fluid-150);
|
package/assets/scss/modern.css
CHANGED
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
--modern-border-style-dotted: dotted;
|
|
13
13
|
--modern-border-style-solid: solid;
|
|
14
14
|
--modern-brand-name: 'Blackbaud';
|
|
15
|
+
--modern-color-bb_green: #6de8ab;
|
|
16
|
+
--modern-color-bb_green_tint: #e7fbf1;
|
|
15
17
|
--modern-color-black: #000000;
|
|
16
18
|
--modern-color-blocking: rgba(255, 255, 255, 0.7);
|
|
17
19
|
--modern-color-blue-05: #ebfbff;
|
|
@@ -44,6 +46,7 @@
|
|
|
44
46
|
--modern-color-scrim: rgba(0, 0, 0, 0.5);
|
|
45
47
|
--modern-color-shadow_color: rgba(0, 0, 0, 0.3);
|
|
46
48
|
--modern-color-transparent: rgba(0, 0, 0, 0);
|
|
49
|
+
--modern-color-trusted_blue: #004054;
|
|
47
50
|
--modern-color-white: #ffffff;
|
|
48
51
|
--modern-color-yellow-30: #ffd597;
|
|
49
52
|
--modern-color-yellow-40: #fcd085;
|
|
@@ -74,7 +77,7 @@
|
|
|
74
77
|
--modern-font-weight-light: 300;
|
|
75
78
|
--modern-font-weight-regular: 400;
|
|
76
79
|
--modern-font-weight-semibold: 600;
|
|
77
|
-
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
80
|
+
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.16/assets/images/bb-logo.png');
|
|
78
81
|
--modern-letter_spacing-normal: normal;
|
|
79
82
|
--modern-line_height-110: 1.1;
|
|
80
83
|
--modern-line_height-115: 1.15;
|
|
@@ -195,6 +198,8 @@
|
|
|
195
198
|
--sky-color-background-selected-heavy: var(--modern-color-blue-05);
|
|
196
199
|
--sky-color-background-selected-soft: var(--modern-color-blue-05);
|
|
197
200
|
--sky-color-background-selected-success: var(--modern-color-green-30);
|
|
201
|
+
--sky-color-background-selected-switch-base: var(--modern-color-blue-05);
|
|
202
|
+
--sky-color-background-selected-switch-disabled: var(--modern-color-gray-07);
|
|
198
203
|
--sky-color-background-selected-warning: var(--modern-color-yellow-30);
|
|
199
204
|
--sky-color-background-tab-active: var(--modern-color-transparent);
|
|
200
205
|
--sky-color-background-tab-base: var(--modern-color-transparent);
|
|
@@ -291,6 +296,10 @@
|
|
|
291
296
|
--sky-color-icon-selected: var(--modern-color-blue-74);
|
|
292
297
|
--sky-color-icon-success: var(--modern-color-green-50);
|
|
293
298
|
--sky-color-icon-warning: var(--modern-color-yellow-50);
|
|
299
|
+
--sky-color-illustration-fill-heavy: var(--modern-color-bb_green);
|
|
300
|
+
--sky-color-illustration-fill-soft: var(--modern-color-bb_green_tint);
|
|
301
|
+
--sky-color-illustration-fill-softest: var(--modern-color-white);
|
|
302
|
+
--sky-color-illustration-stroke: var(--modern-color-trusted_blue);
|
|
294
303
|
--sky-color-text-action: var(--modern-color-blue-74);
|
|
295
304
|
--sky-color-text-action_contrast: var(--modern-color-blue-80);
|
|
296
305
|
--sky-color-text-danger: var(--modern-color-red-70);
|
|
@@ -626,6 +635,10 @@
|
|
|
626
635
|
--sky-comp-layout-tabset-tabs-space-inset-xs-left: var(--modern-space-md);
|
|
627
636
|
--sky-comp-layout-tabset-tabs-space-inset-xs-right: var(--modern-size-0);
|
|
628
637
|
--sky-comp-layout-tabset-tabs-space-inset-xs-top: var(--modern-size-0);
|
|
638
|
+
--sky-comp-list_summary-space-inset-bottom: var(--modern-size-5);
|
|
639
|
+
--sky-comp-list_summary-space-inset-left: var(--modern-size-10);
|
|
640
|
+
--sky-comp-list_summary-space-inset-right: var(--modern-size-10);
|
|
641
|
+
--sky-comp-list_summary-space-inset-top: var(--modern-size-5);
|
|
629
642
|
--sky-comp-modal-content-space-inset-bottom: var(--modern-space-xl);
|
|
630
643
|
--sky-comp-modal-content-space-inset-left: var(--modern-space-xl);
|
|
631
644
|
--sky-comp-modal-content-space-inset-right: var(--modern-space-xl);
|