@blackbaud/skyux-design-tokens 2.0.0-alpha.0 → 2.0.0-alpha.1
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 +12 -0
- package/assets/scss/blackbaud.css +32 -2
- package/assets/scss/modern.css +16 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,18 @@
|
|
|
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.1](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.0...2.0.0-alpha.1) (2025-07-10)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* 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))
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
### Bug Fixes
|
|
14
|
+
|
|
15
|
+
* 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))
|
|
16
|
+
|
|
5
17
|
## [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
18
|
|
|
7
19
|
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
--bb-font-weight-light: 300;
|
|
150
150
|
--bb-font-weight-regular: 400;
|
|
151
151
|
--bb-font-weight-semibold: 600;
|
|
152
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
152
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.1/assets/images/bb-logo.png');
|
|
153
153
|
--bb-letter_spacing-normal: normal;
|
|
154
154
|
--bb-letter_spacing-wider: 0.16px;
|
|
155
155
|
--bb-line_height-300: calc(18/13);
|
|
@@ -212,7 +212,7 @@
|
|
|
212
212
|
--bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
|
|
213
213
|
--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
214
|
--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(
|
|
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(17, 43, 85, 0.14);
|
|
216
216
|
--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
217
|
--bb-shadow-blue-25: 0 1px 1px 0 rgba(17, 43, 85, 0.05);
|
|
218
218
|
--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 +302,11 @@
|
|
|
302
302
|
--sky-color-background-selected-soft: var(--bb-color-blue-900);
|
|
303
303
|
--sky-color-background-selected-success: var(--bb-color-green-900);
|
|
304
304
|
--sky-color-background-selected-warning: var(--bb-color-yellow-900);
|
|
305
|
+
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
306
|
+
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
307
|
+
--sky-color-background-tab-disabled: var(--bb-color-gray-700);
|
|
308
|
+
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
309
|
+
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
305
310
|
--sky-color-background-text_highlight: var(--bb-color-yellow-800);
|
|
306
311
|
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
307
312
|
--sky-color-background-thumb-disabled: var(--bb-color-gray-50);
|
|
@@ -348,6 +353,11 @@
|
|
|
348
353
|
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
349
354
|
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
350
355
|
--sky-color-border-input-hover: var(--bb-color-blue-600);
|
|
356
|
+
--sky-color-border-nav-active: var(--bb-color-sky-500);
|
|
357
|
+
--sky-color-border-nav-base: var(--bb-color-transparent);
|
|
358
|
+
--sky-color-border-nav-disabled: var(--bb-color-gray-800);
|
|
359
|
+
--sky-color-border-nav-focus: var(--bb-color-sky-600);
|
|
360
|
+
--sky-color-border-nav-hover: var(--bb-color-sky-600);
|
|
351
361
|
--sky-color-border-progress_step: var(--bb-color-gray-600);
|
|
352
362
|
--sky-color-border-selected: var(--bb-color-blue-400);
|
|
353
363
|
--sky-color-border-selected_soft: var(--bb-color-blue-500);
|
|
@@ -366,6 +376,11 @@
|
|
|
366
376
|
--sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
|
|
367
377
|
--sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
|
|
368
378
|
--sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
|
|
379
|
+
--sky-color-border-tab-active: var(--bb-color-sky-500);
|
|
380
|
+
--sky-color-border-tab-base: var(--bb-color-transparent);
|
|
381
|
+
--sky-color-border-tab-disabled: var(--bb-color-gray-800);
|
|
382
|
+
--sky-color-border-tab-focus: var(--bb-color-sky-600);
|
|
383
|
+
--sky-color-border-tab-hover: var(--bb-color-sky-600);
|
|
369
384
|
--sky-color-border-text_highlight: var(--bb-color-yellow-600);
|
|
370
385
|
--sky-color-border-warning: var(--bb-color-yellow-400);
|
|
371
386
|
--sky-color-icon-action: var(--bb-color-sky-600);
|
|
@@ -459,6 +474,11 @@
|
|
|
459
474
|
--sky-color-background-selected-soft: var(--bb-color-blue-100);
|
|
460
475
|
--sky-color-background-selected-success: var(--bb-color-green-300);
|
|
461
476
|
--sky-color-background-selected-warning: var(--bb-color-yellow-300);
|
|
477
|
+
--sky-color-background-tab-active: var(--bb-color-transparent);
|
|
478
|
+
--sky-color-background-tab-base: var(--bb-color-transparent);
|
|
479
|
+
--sky-color-background-tab-disabled: var(--bb-color-gray-50);
|
|
480
|
+
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
481
|
+
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
462
482
|
--sky-color-background-text_highlight: var(--bb-color-yellow-400);
|
|
463
483
|
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
464
484
|
--sky-color-background-thumb-disabled: var(--bb-color-gray-50);
|
|
@@ -505,6 +525,11 @@
|
|
|
505
525
|
--sky-color-border-input-error: var(--bb-color-red-600);
|
|
506
526
|
--sky-color-border-input-focus: var(--bb-color-blue-600);
|
|
507
527
|
--sky-color-border-input-hover: var(--bb-color-blue-600);
|
|
528
|
+
--sky-color-border-nav-active: var(--bb-color-blue-600);
|
|
529
|
+
--sky-color-border-nav-base: var(--bb-color-transparent);
|
|
530
|
+
--sky-color-border-nav-disabled: var(--bb-color-gray-200);
|
|
531
|
+
--sky-color-border-nav-focus: var(--bb-color-blue-600);
|
|
532
|
+
--sky-color-border-nav-hover: var(--bb-color-blue-600);
|
|
508
533
|
--sky-color-border-progress_step: var(--bb-color-gray-400);
|
|
509
534
|
--sky-color-border-selected: var(--bb-color-blue-600);
|
|
510
535
|
--sky-color-border-selected_soft: var(--bb-color-blue-300);
|
|
@@ -522,6 +547,11 @@
|
|
|
522
547
|
--sky-color-border-switch-selected-disabled: var(--bb-color-gray-200);
|
|
523
548
|
--sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
|
|
524
549
|
--sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
|
|
550
|
+
--sky-color-border-tab-active: var(--bb-color-blue-600);
|
|
551
|
+
--sky-color-border-tab-base: var(--bb-color-transparent);
|
|
552
|
+
--sky-color-border-tab-disabled: var(--bb-color-gray-200);
|
|
553
|
+
--sky-color-border-tab-focus: var(--bb-color-blue-600);
|
|
554
|
+
--sky-color-border-tab-hover: var(--bb-color-blue-600);
|
|
525
555
|
--sky-color-border-text_highlight: var(--bb-color-yellow-800);
|
|
526
556
|
--sky-color-border-warning: var(--bb-color-yellow-600);
|
|
527
557
|
--sky-color-category-blue: var(--bb-color-sky-300);
|
package/assets/scss/modern.css
CHANGED
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
--modern-font-weight-light: 300;
|
|
74
74
|
--modern-font-weight-regular: 400;
|
|
75
75
|
--modern-font-weight-semibold: 600;
|
|
76
|
-
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
76
|
+
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.1/assets/images/bb-logo.png');
|
|
77
77
|
--modern-letter_spacing-normal: normal;
|
|
78
78
|
--modern-line_height-110: 1.1;
|
|
79
79
|
--modern-line_height-115: 1.15;
|
|
@@ -198,6 +198,11 @@
|
|
|
198
198
|
--sky-color-background-selected-soft: var(--modern-color-blue-05);
|
|
199
199
|
--sky-color-background-selected-success: var(--modern-color-green-30);
|
|
200
200
|
--sky-color-background-selected-warning: var(--modern-color-yellow-30);
|
|
201
|
+
--sky-color-background-tab-active: var(--modern-color-transparent);
|
|
202
|
+
--sky-color-background-tab-base: var(--modern-color-transparent);
|
|
203
|
+
--sky-color-background-tab-disabled: var(--modern-color-transparent);
|
|
204
|
+
--sky-color-background-tab-focus: var(--modern-color-transparent);
|
|
205
|
+
--sky-color-background-tab-hover: var(--modern-color-transparent);
|
|
201
206
|
--sky-color-background-text_highlight: var(--modern-color-yellow-40);
|
|
202
207
|
--sky-color-background-thumb-base: var(--modern-color-white);
|
|
203
208
|
--sky-color-background-thumb-disabled: var(--modern-color-gray-07);
|
|
@@ -244,6 +249,11 @@
|
|
|
244
249
|
--sky-color-border-input-error: var(--modern-color-red-50);
|
|
245
250
|
--sky-color-border-input-focus: var(--modern-color-blue-74);
|
|
246
251
|
--sky-color-border-input-hover: var(--modern-color-blue-74);
|
|
252
|
+
--sky-color-border-nav-active: var(--modern-color-transparent);
|
|
253
|
+
--sky-color-border-nav-base: var(--modern-color-transparent);
|
|
254
|
+
--sky-color-border-nav-disabled: var(--modern-color-transparent);
|
|
255
|
+
--sky-color-border-nav-focus: var(--modern-color-blue-74);
|
|
256
|
+
--sky-color-border-nav-hover: var(--modern-color-transparent);
|
|
247
257
|
--sky-color-border-progress_step: var(--modern-color-gray-50);
|
|
248
258
|
--sky-color-border-selected: var(--modern-color-blue-74);
|
|
249
259
|
--sky-color-border-selected_soft: var(--modern-color-blue-30);
|
|
@@ -261,6 +271,11 @@
|
|
|
261
271
|
--sky-color-border-switch-selected-disabled: var(--modern-color-gray-50);
|
|
262
272
|
--sky-color-border-switch-selected-focus: var(--modern-color-blue-74);
|
|
263
273
|
--sky-color-border-switch-selected-hover: var(--modern-color-blue-74);
|
|
274
|
+
--sky-color-border-tab-active: var(--modern-color-blue-50);
|
|
275
|
+
--sky-color-border-tab-base: var(--modern-color-transparent);
|
|
276
|
+
--sky-color-border-tab-disabled: var(--modern-color-transparent);
|
|
277
|
+
--sky-color-border-tab-focus: var(--modern-color-blue-74);
|
|
278
|
+
--sky-color-border-tab-hover: var(--modern-color-blue-50);
|
|
264
279
|
--sky-color-border-text_highlight: var(--modern-color-yellow-80);
|
|
265
280
|
--sky-color-border-warning: var(--modern-color-yellow-50);
|
|
266
281
|
--sky-color-category-blue: var(--modern-color-category-sky_blue-40);
|