@blackbaud/skyux-design-tokens 2.0.0-alpha.2 → 2.0.0-alpha.4

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 +32 -0
  2. package/assets/scss/blackbaud.css +26 -45
  3. package/assets/scss/modern.css +6 -16
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,38 @@
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.4](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.3...2.0.0-alpha.4) (2025-07-17)
6
+
7
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ * delete toolbar button background and border colors ([#233](https://github.com/blackbaud/skyux-design-tokens/issues/233))
11
+ * change row background colors ([#229](https://github.com/blackbaud/skyux-design-tokens/issues/229))
12
+
13
+ ### Bug Fixes
14
+
15
+ * change row background colors ([#229](https://github.com/blackbaud/skyux-design-tokens/issues/229)) ([8df042d](https://github.com/blackbaud/skyux-design-tokens/commit/8df042d35c3cd02c9bdd767402d0b5a8373db3c7))
16
+ * delete toolbar button background and border colors ([#233](https://github.com/blackbaud/skyux-design-tokens/issues/233)) ([d428dec](https://github.com/blackbaud/skyux-design-tokens/commit/d428dec886af1feec89cf037b49f8fc15a3b7bef))
17
+
18
+ ## [2.0.0-alpha.3](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.2...2.0.0-alpha.3) (2025-07-16)
19
+
20
+
21
+ ### ⚠ BREAKING CHANGES
22
+
23
+ * change heading-1 style from semibold to regular ([#225](https://github.com/blackbaud/skyux-design-tokens/issues/225))
24
+ * add blue-250 and change border references ([#230](https://github.com/blackbaud/skyux-design-tokens/issues/230))
25
+ * layout fit list inset space reduction ([#231](https://github.com/blackbaud/skyux-design-tokens/issues/231))
26
+
27
+ ### Features
28
+
29
+ * add blue-250 and change border references ([#230](https://github.com/blackbaud/skyux-design-tokens/issues/230)) ([1ad9628](https://github.com/blackbaud/skyux-design-tokens/commit/1ad9628028f548215fc21de5e1d91af93a956b92))
30
+ * layout fit list inset space reduction ([#231](https://github.com/blackbaud/skyux-design-tokens/issues/231)) ([98ecefd](https://github.com/blackbaud/skyux-design-tokens/commit/98ecefd02cf502114dd5ff82f66700fb6299c546))
31
+
32
+
33
+ ### Bug Fixes
34
+
35
+ * change heading-1 style from semibold to regular ([#225](https://github.com/blackbaud/skyux-design-tokens/issues/225)) ([61fcb40](https://github.com/blackbaud/skyux-design-tokens/commit/61fcb40a89d723257e15f5aabfd6815b7574c950))
36
+
5
37
  ## [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
38
 
7
39
 
package/assets/scss/blackbaud.css CHANGED
@@ -18,8 +18,9 @@
18
18
  --bb-color-blocking: rgba(255, 255, 255, 0.7);
19
19
  --bb-color-blue-100: #eef3fc;
20
20
  --bb-color-blue-1000: #09152b;
21
- --bb-color-blue-200: #d0e1f7;
21
+ --bb-color-blue-200: #d5e1f7;
22
22
  --bb-color-blue-25: #fbfcfe;
23
+ --bb-color-blue-250: #bfd3f2;
23
24
  --bb-color-blue-300: #aac4ee;
24
25
  --bb-color-blue-400: #80a6e6;
25
26
  --bb-color-blue-50: #f4f8fd;
@@ -150,7 +151,7 @@
150
151
  --bb-font-weight-light: 300;
151
152
  --bb-font-weight-regular: 400;
152
153
  --bb-font-weight-semibold: 600;
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');
154
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.4/assets/images/bb-logo.png');
154
155
  --bb-letter_spacing-normal: normal;
155
156
  --bb-letter_spacing-wider: 0.16px;
156
157
  --bb-line_height-300: calc(18/13);
@@ -266,11 +267,6 @@
266
267
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
267
268
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
268
269
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
269
- --sky-color-background-action-toolbar-active: var(--bb-color-transparent);
270
- --sky-color-background-action-toolbar-base: var(--bb-color-transparent);
271
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-700);
272
- --sky-color-background-action-toolbar-focus: var(--bb-color-transparent);
273
- --sky-color-background-action-toolbar-hover: var(--bb-color-transparent);
274
270
  --sky-color-background-blocking: var(--bb-color-blocking);
275
271
  --sky-color-background-container-base: var(--bb-color-gray-1000);
276
272
  --sky-color-background-container-danger: var(--bb-color-red-800);
@@ -286,17 +282,17 @@
286
282
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
287
283
  --sky-color-background-input-base: var(--bb-color-gray-900);
288
284
  --sky-color-background-input-disabled: var(--bb-color-gray-700);
289
- --sky-color-background-list-active: var(--bb-color-transparent);
290
- --sky-color-background-list-base: var(--bb-color-transparent);
291
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
292
- --sky-color-background-list-focus: var(--bb-color-transparent);
293
- --sky-color-background-list-hover: var(--bb-color-transparent);
294
285
  --sky-color-background-nav-active: var(--bb-color-transparent);
295
286
  --sky-color-background-nav-base: var(--bb-color-transparent);
296
287
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
297
288
  --sky-color-background-nav-focus: var(--bb-color-transparent);
298
289
  --sky-color-background-nav-hover: var(--bb-color-transparent);
299
290
  --sky-color-background-page: var(--bb-color-gray-1100);
291
+ --sky-color-background-row-active: var(--bb-color-transparent);
292
+ --sky-color-background-row-base: var(--bb-color-gray-1000);
293
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
294
+ --sky-color-background-row-focus: var(--bb-color-transparent);
295
+ --sky-color-background-row-hover: var(--bb-color-transparent);
300
296
  --sky-color-background-scrim: var(--bb-color-scrim);
301
297
  --sky-color-background-selected-danger: var(--bb-color-red-900);
302
298
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -337,11 +333,6 @@
337
333
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
338
334
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
339
335
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
340
- --sky-color-border-action-toolbar-active: var(--bb-color-sky-500);
341
- --sky-color-border-action-toolbar-base: var(--bb-color-transparent);
342
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-800);
343
- --sky-color-border-action-toolbar-focus: var(--bb-color-sky-600);
344
- --sky-color-border-action-toolbar-hover: var(--bb-color-sky-600);
345
336
  --sky-color-border-column_divider: var(--bb-color-blue-400);
346
337
  --sky-color-border-container-base: var(--bb-color-blue-900);
347
338
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -439,11 +430,6 @@
439
430
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
440
431
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
441
432
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
442
- --sky-color-background-action-toolbar-active: var(--bb-color-blue-100);
443
- --sky-color-background-action-toolbar-base: var(--bb-color-white);
444
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-50);
445
- --sky-color-background-action-toolbar-focus: var(--bb-color-white);
446
- --sky-color-background-action-toolbar-hover: var(--bb-color-blue-50);
447
433
  --sky-color-background-blocking: var(--bb-color-blocking);
448
434
  --sky-color-background-container-base: var(--bb-color-white);
449
435
  --sky-color-background-container-danger: var(--bb-color-red-300);
@@ -459,17 +445,17 @@
459
445
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
460
446
  --sky-color-background-input-base: var(--bb-color-blue-25);
461
447
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
462
- --sky-color-background-list-active: var(--bb-color-blue-100);
463
- --sky-color-background-list-base: var(--bb-color-transparent);
464
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
465
- --sky-color-background-list-focus: var(--bb-color-transparent);
466
- --sky-color-background-list-hover: var(--bb-color-blue-50);
467
448
  --sky-color-background-nav-active: var(--bb-color-blue-100);
468
449
  --sky-color-background-nav-base: var(--bb-color-transparent);
469
450
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
470
451
  --sky-color-background-nav-focus: var(--bb-color-transparent);
471
452
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
472
453
  --sky-color-background-page: var(--bb-color-slate-100);
454
+ --sky-color-background-row-active: var(--bb-color-blue-100);
455
+ --sky-color-background-row-base: var(--bb-color-white);
456
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
457
+ --sky-color-background-row-focus: var(--bb-color-transparent);
458
+ --sky-color-background-row-hover: var(--bb-color-blue-50);
473
459
  --sky-color-background-scrim: var(--bb-color-scrim);
474
460
  --sky-color-background-selected-danger: var(--bb-color-red-300);
475
461
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -491,7 +477,7 @@
491
477
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
492
478
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
493
479
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
494
- --sky-color-border-action-input-base: var(--bb-color-blue-200);
480
+ --sky-color-border-action-input-base: var(--bb-color-blue-250);
495
481
  --sky-color-border-action-input-disabled: var(--bb-color-gray-200);
496
482
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
497
483
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
@@ -510,11 +496,6 @@
510
496
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
511
497
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
512
498
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
513
- --sky-color-border-action-toolbar-active: var(--bb-color-blue-600);
514
- --sky-color-border-action-toolbar-base: var(--bb-color-blue-300);
515
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-200);
516
- --sky-color-border-action-toolbar-focus: var(--bb-color-blue-600);
517
- --sky-color-border-action-toolbar-hover: var(--bb-color-blue-600);
518
499
  --sky-color-border-column_divider: var(--bb-color-blue-600);
519
500
  --sky-color-border-container-base: var(--bb-color-blue-200);
520
501
  --sky-color-border-danger: var(--bb-color-red-600);
@@ -522,7 +503,7 @@
522
503
  --sky-color-border-elevation: var(--bb-color-blue-200);
523
504
  --sky-color-border-info: var(--bb-color-blue-600);
524
505
  --sky-color-border-input-active: var(--bb-color-blue-600);
525
- --sky-color-border-input-base: var(--bb-color-blue-200);
506
+ --sky-color-border-input-base: var(--bb-color-blue-250);
526
507
  --sky-color-border-input-disabled: var(--bb-color-gray-200);
527
508
  --sky-color-border-input-error: var(--bb-color-red-600);
528
509
  --sky-color-border-input-focus: var(--bb-color-blue-600);
@@ -535,8 +516,8 @@
535
516
  --sky-color-border-progress_step: var(--bb-color-gray-400);
536
517
  --sky-color-border-selected: var(--bb-color-blue-600);
537
518
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
538
- --sky-color-border-separator-light: var(--bb-color-blue-200);
539
- --sky-color-border-separator-row: var(--bb-color-blue-200);
519
+ --sky-color-border-separator-light: var(--bb-color-blue-250);
520
+ --sky-color-border-separator-row: var(--bb-color-blue-250);
540
521
  --sky-color-border-success: var(--bb-color-green-700);
541
522
  --sky-color-border-switch-active: var(--bb-color-blue-600);
542
523
  --sky-color-border-switch-base: var(--bb-color-blue-500);
@@ -845,20 +826,20 @@
845
826
  --sky-comp-page-content-blocks-space-inset-xs-right: var(--bb-size-fluid-50);
846
827
  --sky-comp-page-content-blocks-space-inset-xs-top: var(--bb-size-fluid-50);
847
828
  --sky-comp-page-content-fit-space-inset-sm-bottom: var(--bb-size-0);
848
- --sky-comp-page-content-fit-space-inset-sm-left: var(--bb-size-fluid-150);
849
- --sky-comp-page-content-fit-space-inset-sm-right: var(--bb-size-fluid-150);
829
+ --sky-comp-page-content-fit-space-inset-sm-left: var(--bb-size-0);
830
+ --sky-comp-page-content-fit-space-inset-sm-right: var(--bb-size-0);
850
831
  --sky-comp-page-content-fit-space-inset-sm-top: var(--bb-size-0);
851
832
  --sky-comp-page-content-fit-space-inset-xs-bottom: var(--bb-size-0);
852
- --sky-comp-page-content-fit-space-inset-xs-left: var(--bb-size-fluid-50);
853
- --sky-comp-page-content-fit-space-inset-xs-right: var(--bb-size-fluid-50);
833
+ --sky-comp-page-content-fit-space-inset-xs-left: var(--bb-size-0);
834
+ --sky-comp-page-content-fit-space-inset-xs-right: var(--bb-size-0);
854
835
  --sky-comp-page-content-fit-space-inset-xs-top: var(--bb-size-0);
855
836
  --sky-comp-page-content-list-space-inset-sm-bottom: var(--bb-size-0);
856
- --sky-comp-page-content-list-space-inset-sm-left: var(--bb-size-fluid-150);
857
- --sky-comp-page-content-list-space-inset-sm-right: var(--bb-size-fluid-150);
837
+ --sky-comp-page-content-list-space-inset-sm-left: var(--bb-size-0);
838
+ --sky-comp-page-content-list-space-inset-sm-right: var(--bb-size-0);
858
839
  --sky-comp-page-content-list-space-inset-sm-top: var(--bb-size-0);
859
840
  --sky-comp-page-content-list-space-inset-xs-bottom: var(--bb-size-0);
860
- --sky-comp-page-content-list-space-inset-xs-left: var(--bb-size-fluid-50);
861
- --sky-comp-page-content-list-space-inset-xs-right: var(--bb-size-fluid-50);
841
+ --sky-comp-page-content-list-space-inset-xs-left: var(--bb-size-0);
842
+ --sky-comp-page-content-list-space-inset-xs-right: var(--bb-size-0);
862
843
  --sky-comp-page-content-list-space-inset-xs-top: var(--bb-size-0);
863
844
  --sky-comp-page-content-tabs-space-inset-sm-bottom: var(--bb-size-0);
864
845
  --sky-comp-page-content-tabs-space-inset-sm-left: var(--bb-size-0);
@@ -1139,7 +1120,7 @@
1139
1120
  --sky-font-style-display-3: var(--bb-font-style-regular);
1140
1121
  --sky-font-style-display-4: var(--bb-font-style-regular);
1141
1122
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1142
- --sky-font-style-heading-1: var(--bb-font-style-semibold);
1123
+ --sky-font-style-heading-1: var(--bb-font-style-regular);
1143
1124
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1144
1125
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1145
1126
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
package/assets/scss/modern.css CHANGED
@@ -74,7 +74,7 @@
74
74
  --modern-font-weight-light: 300;
75
75
  --modern-font-weight-regular: 400;
76
76
  --modern-font-weight-semibold: 600;
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
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.4/assets/images/bb-logo.png');
78
78
  --modern-letter_spacing-normal: normal;
79
79
  --modern-line_height-110: 1.1;
80
80
  --modern-line_height-115: 1.15;
@@ -163,11 +163,6 @@
163
163
  --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
164
164
  --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
165
165
  --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
166
- --sky-color-background-action-toolbar-active: var(--modern-color-transparent);
167
- --sky-color-background-action-toolbar-base: var(--modern-color-transparent);
168
- --sky-color-background-action-toolbar-disabled: var(--modern-color-gray-07);
169
- --sky-color-background-action-toolbar-focus: var(--modern-color-transparent);
170
- --sky-color-background-action-toolbar-hover: var(--modern-color-transparent);
171
166
  --sky-color-background-blocking: var(--modern-color-blocking);
172
167
  --sky-color-background-container-base: var(--modern-color-white);
173
168
  --sky-color-background-container-danger: var(--modern-color-red-30);
@@ -183,17 +178,17 @@
183
178
  --sky-color-background-icon_matte-warning: var(--modern-color-yellow-50);
184
179
  --sky-color-background-input-base: var(--modern-color-transparent);
185
180
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
186
- --sky-color-background-list-active: var(--modern-color-transparent);
187
- --sky-color-background-list-base: var(--modern-color-transparent);
188
- --sky-color-background-list-disabled: var(--modern-color-gray-07);
189
- --sky-color-background-list-focus: var(--modern-color-transparent);
190
- --sky-color-background-list-hover: var(--modern-color-transparent);
191
181
  --sky-color-background-nav-active: var(--modern-color-transparent);
192
182
  --sky-color-background-nav-base: var(--modern-color-transparent);
193
183
  --sky-color-background-nav-disabled: var(--modern-color-gray-07);
194
184
  --sky-color-background-nav-focus: var(--modern-color-transparent);
195
185
  --sky-color-background-nav-hover: var(--modern-color-transparent);
196
186
  --sky-color-background-page: var(--modern-color-gray-005);
187
+ --sky-color-background-row-active: var(--modern-color-transparent);
188
+ --sky-color-background-row-base: var(--modern-color-transparent);
189
+ --sky-color-background-row-disabled: var(--modern-color-gray-07);
190
+ --sky-color-background-row-focus: var(--modern-color-transparent);
191
+ --sky-color-background-row-hover: var(--modern-color-transparent);
197
192
  --sky-color-background-scrim: var(--modern-color-scrim);
198
193
  --sky-color-background-selected-danger: var(--modern-color-red-30);
199
194
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
@@ -234,11 +229,6 @@
234
229
  --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
235
230
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
236
231
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
237
- --sky-color-border-action-toolbar-active: var(--modern-color-blue-74);
238
- --sky-color-border-action-toolbar-base: var(--modern-color-transparent);
239
- --sky-color-border-action-toolbar-disabled: var(--modern-color-gray-15);
240
- --sky-color-border-action-toolbar-focus: var(--modern-color-blue-74);
241
- --sky-color-border-action-toolbar-hover: var(--modern-color-blue-74);
242
232
  --sky-color-border-column_divider: var(--modern-color-gray-70);
243
233
  --sky-color-border-container-base: var(--modern-color-gray-15);
244
234
  --sky-color-border-danger: var(--modern-color-red-50);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "2.0.0-alpha.2",
3
+ "version": "2.0.0-alpha.4",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",