@blackbaud/skyux-design-tokens 2.0.0-alpha.0 → 2.0.0-alpha.2
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 +20 -0
- package/assets/scss/blackbaud.css +42 -2
- package/assets/scss/modern.css +26 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,26 @@
|
|
|
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.2](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.1...2.0.0-alpha.2) (2025-07-16)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add brand name ([#234](https://github.com/blackbaud/skyux-design-tokens/issues/234)) ([85a03c6](https://github.com/blackbaud/skyux-design-tokens/commit/85a03c6c17639f26a9f339972e1a1a3b1569684a))
|
|
11
|
+
* add split view drawer spacing ([#219](https://github.com/blackbaud/skyux-design-tokens/issues/219)) ([1d47046](https://github.com/blackbaud/skyux-design-tokens/commit/1d47046766fd9d1f9a93d021c942f3b462e58fc4))
|
|
12
|
+
|
|
13
|
+
## [2.0.0-alpha.1](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.0...2.0.0-alpha.1) (2025-07-10)
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
### Features
|
|
17
|
+
|
|
18
|
+
* add border colors for nav and tabs, and background colors for tabs ([#221](https://github.com/blackbaud/skyux-design-tokens/issues/221)) ([1ea9c67](https://github.com/blackbaud/skyux-design-tokens/commit/1ea9c676585dd88c057e41b3e5723db5c16d0d4c))
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
* blue 200 shadow in bb base tokens is formatted correctly ([#226](https://github.com/blackbaud/skyux-design-tokens/issues/226)) ([56c4fbc](https://github.com/blackbaud/skyux-design-tokens/commit/56c4fbc0c0dfc9d8239c0e3a94c3b27e8e4e0bb5))
|
|
24
|
+
|
|
5
25
|
## [2.0.0-alpha.0](https://github.com/blackbaud/skyux-design-tokens/compare/1.0.1...2.0.0-alpha.0) (2025-07-09)
|
|
6
26
|
|
|
7
27
|
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
--bb-border-radius-round: 50%;
|
|
14
14
|
--bb-border-style-dotted: dotted;
|
|
15
15
|
--bb-border-style-solid: solid;
|
|
16
|
+
--bb-brand-name: Blackbaud;
|
|
16
17
|
--bb-color-black: #000000;
|
|
17
18
|
--bb-color-blocking: rgba(255, 255, 255, 0.7);
|
|
18
19
|
--bb-color-blue-100: #eef3fc;
|
|
@@ -149,7 +150,7 @@
|
|
|
149
150
|
--bb-font-weight-light: 300;
|
|
150
151
|
--bb-font-weight-regular: 400;
|
|
151
152
|
--bb-font-weight-semibold: 600;
|
|
152
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
153
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.2/assets/images/bb-logo.png');
|
|
153
154
|
--bb-letter_spacing-normal: normal;
|
|
154
155
|
--bb-letter_spacing-wider: 0.16px;
|
|
155
156
|
--bb-line_height-300: calc(18/13);
|
|
@@ -212,7 +213,7 @@
|
|
|
212
213
|
--bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
|
|
213
214
|
--bb-shadow-blue-100: 0 1px 3px 0 rgba(17, 43, 85, 0.2), 0 2px 1px -1px rgba(17, 43, 85, 0.12), 0 1px 1px 0 rgba(17, 43, 85, 0.14);
|
|
214
215
|
--bb-shadow-blue-1600: 0 8px 10px -5px rgba(17, 43, 85, 0.2), 0 6px 30px 5px rgba(17, 43, 85, 0.12), 0 16px 24px 2px rgba(17, 43, 85, 0.14);
|
|
215
|
-
--bb-shadow-blue-200: 0 1px 8px 0 rgba(17, 43, 85, 0.2), 0 3px 3px -2px rgba(17, 43, 85, 0.12), 0 3px 4px 0 rgba(
|
|
216
|
+
--bb-shadow-blue-200: 0 1px 8px 0 rgba(17, 43, 85, 0.2), 0 3px 3px -2px rgba(17, 43, 85, 0.12), 0 3px 4px 0 rgba(17, 43, 85, 0.14);
|
|
216
217
|
--bb-shadow-blue-2400: 0 11px 15px -7px rgba(17, 43, 85, 0.2), 0 9px 46px 8px rgba(17, 43, 85, 0.12), 0 24px 38px 3px rgba(17, 43, 85, 0.14);
|
|
217
218
|
--bb-shadow-blue-25: 0 1px 1px 0 rgba(17, 43, 85, 0.05);
|
|
218
219
|
--bb-shadow-blue-400: 0 2px 4px -1px rgba(17, 43, 85, 0.2), 0 1px 10px 0 rgba(17, 43, 85, 0.12), 0 4px 5px 0 rgba(17, 43, 85, 0.14);
|
|
@@ -302,6 +303,11 @@
|
|
|
302
303
|
--sky-color-background-selected-soft: var(--bb-color-blue-900);
|
|
303
304
|
--sky-color-background-selected-success: var(--bb-color-green-900);
|
|
304
305
|
--sky-color-background-selected-warning: var(--bb-color-yellow-900);
|
|
306
|
+
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
307
|
+
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
308
|
+
--sky-color-background-tab-disabled: var(--bb-color-gray-700);
|
|
309
|
+
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
310
|
+
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
305
311
|
--sky-color-background-text_highlight: var(--bb-color-yellow-800);
|
|
306
312
|
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
307
313
|
--sky-color-background-thumb-disabled: var(--bb-color-gray-50);
|
|
@@ -348,6 +354,11 @@
|
|
|
348
354
|
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
349
355
|
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
350
356
|
--sky-color-border-input-hover: var(--bb-color-blue-600);
|
|
357
|
+
--sky-color-border-nav-active: var(--bb-color-sky-500);
|
|
358
|
+
--sky-color-border-nav-base: var(--bb-color-transparent);
|
|
359
|
+
--sky-color-border-nav-disabled: var(--bb-color-gray-800);
|
|
360
|
+
--sky-color-border-nav-focus: var(--bb-color-sky-600);
|
|
361
|
+
--sky-color-border-nav-hover: var(--bb-color-sky-600);
|
|
351
362
|
--sky-color-border-progress_step: var(--bb-color-gray-600);
|
|
352
363
|
--sky-color-border-selected: var(--bb-color-blue-400);
|
|
353
364
|
--sky-color-border-selected_soft: var(--bb-color-blue-500);
|
|
@@ -366,6 +377,11 @@
|
|
|
366
377
|
--sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
|
|
367
378
|
--sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
|
|
368
379
|
--sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
|
|
380
|
+
--sky-color-border-tab-active: var(--bb-color-sky-500);
|
|
381
|
+
--sky-color-border-tab-base: var(--bb-color-transparent);
|
|
382
|
+
--sky-color-border-tab-disabled: var(--bb-color-gray-800);
|
|
383
|
+
--sky-color-border-tab-focus: var(--bb-color-sky-600);
|
|
384
|
+
--sky-color-border-tab-hover: var(--bb-color-sky-600);
|
|
369
385
|
--sky-color-border-text_highlight: var(--bb-color-yellow-600);
|
|
370
386
|
--sky-color-border-warning: var(--bb-color-yellow-400);
|
|
371
387
|
--sky-color-icon-action: var(--bb-color-sky-600);
|
|
@@ -397,6 +413,7 @@
|
|
|
397
413
|
--sky-elevation-raised-100: var(--bb-shadow-blue-100);
|
|
398
414
|
}
|
|
399
415
|
.sky-theme-modern.sky-theme-brand-base {
|
|
416
|
+
--sky-brand-name: var(--bb-brand-name);
|
|
400
417
|
--sky-color-background-action-danger-active: var(--bb-color-red-800);
|
|
401
418
|
--sky-color-background-action-danger-base: var(--bb-color-red-600);
|
|
402
419
|
--sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
|
|
@@ -459,6 +476,11 @@
|
|
|
459
476
|
--sky-color-background-selected-soft: var(--bb-color-blue-100);
|
|
460
477
|
--sky-color-background-selected-success: var(--bb-color-green-300);
|
|
461
478
|
--sky-color-background-selected-warning: var(--bb-color-yellow-300);
|
|
479
|
+
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
480
|
+
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
481
|
+
--sky-color-background-tab-disabled: var(--bb-color-gray-50);
|
|
482
|
+
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
483
|
+
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
462
484
|
--sky-color-background-text_highlight: var(--bb-color-yellow-400);
|
|
463
485
|
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
464
486
|
--sky-color-background-thumb-disabled: var(--bb-color-gray-50);
|
|
@@ -505,6 +527,11 @@
|
|
|
505
527
|
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
506
528
|
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
507
529
|
--sky-color-border-input-hover: var(--bb-color-blue-600);
|
|
530
|
+
--sky-color-border-nav-active: var(--bb-color-blue-600);
|
|
531
|
+
--sky-color-border-nav-base: var(--bb-color-transparent);
|
|
532
|
+
--sky-color-border-nav-disabled: var(--bb-color-gray-200);
|
|
533
|
+
--sky-color-border-nav-focus: var(--bb-color-blue-600);
|
|
534
|
+
--sky-color-border-nav-hover: var(--bb-color-blue-600);
|
|
508
535
|
--sky-color-border-progress_step: var(--bb-color-gray-400);
|
|
509
536
|
--sky-color-border-selected: var(--bb-color-blue-600);
|
|
510
537
|
--sky-color-border-selected_soft: var(--bb-color-blue-300);
|
|
@@ -522,6 +549,11 @@
|
|
|
522
549
|
--sky-color-border-switch-selected-disabled: var(--bb-color-gray-200);
|
|
523
550
|
--sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
|
|
524
551
|
--sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
|
|
552
|
+
--sky-color-border-tab-active: var(--bb-color-blue-600);
|
|
553
|
+
--sky-color-border-tab-base: var(--bb-color-transparent);
|
|
554
|
+
--sky-color-border-tab-disabled: var(--bb-color-gray-200);
|
|
555
|
+
--sky-color-border-tab-focus: var(--bb-color-blue-600);
|
|
556
|
+
--sky-color-border-tab-hover: var(--bb-color-blue-600);
|
|
525
557
|
--sky-color-border-text_highlight: var(--bb-color-yellow-800);
|
|
526
558
|
--sky-color-border-warning: var(--bb-color-yellow-600);
|
|
527
559
|
--sky-color-category-blue: var(--bb-color-sky-300);
|
|
@@ -948,6 +980,14 @@
|
|
|
948
980
|
--sky-comp-selection_box-expanded-space-inset-left: var(--bb-size-fluid-150);
|
|
949
981
|
--sky-comp-selection_box-expanded-space-inset-right: var(--bb-size-fluid-150);
|
|
950
982
|
--sky-comp-selection_box-expanded-space-inset-top: var(--bb-size-fluid-150);
|
|
983
|
+
--sky-comp-split_view-drawer-space-inset-sm-bottom: var(--bb-size-fluid-75);
|
|
984
|
+
--sky-comp-split_view-drawer-space-inset-sm-left: var(--bb-size-fluid-75);
|
|
985
|
+
--sky-comp-split_view-drawer-space-inset-sm-right: var(--bb-size-0);
|
|
986
|
+
--sky-comp-split_view-drawer-space-inset-sm-top: var(--bb-size-fluid-75);
|
|
987
|
+
--sky-comp-split_view-drawer-space-inset-xs-bottom: var(--bb-size-fluid-50);
|
|
988
|
+
--sky-comp-split_view-drawer-space-inset-xs-left: var(--bb-size-fluid-50);
|
|
989
|
+
--sky-comp-split_view-drawer-space-inset-xs-right: var(--bb-size-0);
|
|
990
|
+
--sky-comp-split_view-drawer-space-inset-xs-top: var(--bb-size-fluid-50);
|
|
951
991
|
--sky-comp-split_view-footer-space-inset-bottom: var(--bb-size-fluid-50);
|
|
952
992
|
--sky-comp-split_view-footer-space-inset-left: var(--bb-size-fluid-50);
|
|
953
993
|
--sky-comp-split_view-footer-space-inset-right: var(--bb-size-fluid-50);
|
package/assets/scss/modern.css
CHANGED
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
--modern-border-radius-round: 50%;
|
|
12
12
|
--modern-border-style-dotted: dotted;
|
|
13
13
|
--modern-border-style-solid: solid;
|
|
14
|
+
--modern-brand-name: Blackbaud;
|
|
14
15
|
--modern-color-black: #000000;
|
|
15
16
|
--modern-color-blocking: rgba(255, 255, 255, 0.7);
|
|
16
17
|
--modern-color-blue-05: #ebfbff;
|
|
@@ -73,7 +74,7 @@
|
|
|
73
74
|
--modern-font-weight-light: 300;
|
|
74
75
|
--modern-font-weight-regular: 400;
|
|
75
76
|
--modern-font-weight-semibold: 600;
|
|
76
|
-
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
77
|
+
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.2/assets/images/bb-logo.png');
|
|
77
78
|
--modern-letter_spacing-normal: normal;
|
|
78
79
|
--modern-line_height-110: 1.1;
|
|
79
80
|
--modern-line_height-115: 1.15;
|
|
@@ -136,6 +137,7 @@
|
|
|
136
137
|
--modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
|
|
137
138
|
}
|
|
138
139
|
.sky-theme-modern {
|
|
140
|
+
--sky-brand-name: var(--modern-brand-name);
|
|
139
141
|
--sky-color-background-action-danger-active: var(--modern-color-red-70);
|
|
140
142
|
--sky-color-background-action-danger-base: var(--modern-color-red-70);
|
|
141
143
|
--sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
|
|
@@ -198,6 +200,11 @@
|
|
|
198
200
|
--sky-color-background-selected-soft: var(--modern-color-blue-05);
|
|
199
201
|
--sky-color-background-selected-success: var(--modern-color-green-30);
|
|
200
202
|
--sky-color-background-selected-warning: var(--modern-color-yellow-30);
|
|
203
|
+
--sky-color-background-tab-active: var(--modern-color-transparent);
|
|
204
|
+
--sky-color-background-tab-base: var(--modern-color-transparent);
|
|
205
|
+
--sky-color-background-tab-disabled: var(--modern-color-transparent);
|
|
206
|
+
--sky-color-background-tab-focus: var(--modern-color-transparent);
|
|
207
|
+
--sky-color-background-tab-hover: var(--modern-color-transparent);
|
|
201
208
|
--sky-color-background-text_highlight: var(--modern-color-yellow-40);
|
|
202
209
|
--sky-color-background-thumb-base: var(--modern-color-white);
|
|
203
210
|
--sky-color-background-thumb-disabled: var(--modern-color-gray-07);
|
|
@@ -244,6 +251,11 @@
|
|
|
244
251
|
--sky-color-border-input-error: var(--modern-color-red-50);
|
|
245
252
|
--sky-color-border-input-focus: var(--modern-color-blue-74);
|
|
246
253
|
--sky-color-border-input-hover: var(--modern-color-blue-74);
|
|
254
|
+
--sky-color-border-nav-active: var(--modern-color-transparent);
|
|
255
|
+
--sky-color-border-nav-base: var(--modern-color-transparent);
|
|
256
|
+
--sky-color-border-nav-disabled: var(--modern-color-transparent);
|
|
257
|
+
--sky-color-border-nav-focus: var(--modern-color-blue-74);
|
|
258
|
+
--sky-color-border-nav-hover: var(--modern-color-transparent);
|
|
247
259
|
--sky-color-border-progress_step: var(--modern-color-gray-50);
|
|
248
260
|
--sky-color-border-selected: var(--modern-color-blue-74);
|
|
249
261
|
--sky-color-border-selected_soft: var(--modern-color-blue-30);
|
|
@@ -261,6 +273,11 @@
|
|
|
261
273
|
--sky-color-border-switch-selected-disabled: var(--modern-color-gray-50);
|
|
262
274
|
--sky-color-border-switch-selected-focus: var(--modern-color-blue-74);
|
|
263
275
|
--sky-color-border-switch-selected-hover: var(--modern-color-blue-74);
|
|
276
|
+
--sky-color-border-tab-active: var(--modern-color-blue-50);
|
|
277
|
+
--sky-color-border-tab-base: var(--modern-color-transparent);
|
|
278
|
+
--sky-color-border-tab-disabled: var(--modern-color-transparent);
|
|
279
|
+
--sky-color-border-tab-focus: var(--modern-color-blue-74);
|
|
280
|
+
--sky-color-border-tab-hover: var(--modern-color-blue-50);
|
|
264
281
|
--sky-color-border-text_highlight: var(--modern-color-yellow-80);
|
|
265
282
|
--sky-color-border-warning: var(--modern-color-yellow-50);
|
|
266
283
|
--sky-color-category-blue: var(--modern-color-category-sky_blue-40);
|
|
@@ -687,6 +704,14 @@
|
|
|
687
704
|
--sky-comp-selection_box-expanded-space-inset-left: var(--modern-space-xl);
|
|
688
705
|
--sky-comp-selection_box-expanded-space-inset-right: var(--modern-space-xl);
|
|
689
706
|
--sky-comp-selection_box-expanded-space-inset-top: var(--modern-space-xl);
|
|
707
|
+
--sky-comp-split_view-drawer-space-inset-sm-bottom: var(--modern-size-0);
|
|
708
|
+
--sky-comp-split_view-drawer-space-inset-sm-left: var(--modern-size-0);
|
|
709
|
+
--sky-comp-split_view-drawer-space-inset-sm-right: var(--modern-size-0);
|
|
710
|
+
--sky-comp-split_view-drawer-space-inset-sm-top: var(--modern-size-0);
|
|
711
|
+
--sky-comp-split_view-drawer-space-inset-xs-bottom: var(--modern-size-0);
|
|
712
|
+
--sky-comp-split_view-drawer-space-inset-xs-left: var(--modern-size-0);
|
|
713
|
+
--sky-comp-split_view-drawer-space-inset-xs-right: var(--modern-size-0);
|
|
714
|
+
--sky-comp-split_view-drawer-space-inset-xs-top: var(--modern-size-0);
|
|
690
715
|
--sky-comp-split_view-footer-space-inset-bottom: var(--modern-space-s);
|
|
691
716
|
--sky-comp-split_view-footer-space-inset-left: var(--modern-space-s);
|
|
692
717
|
--sky-comp-split_view-footer-space-inset-right: var(--modern-space-s);
|