@blackbaud/skyux-design-tokens 2.0.0-alpha.3 → 2.0.0-alpha.5

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 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.5](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.4...2.0.0-alpha.5) (2025-07-17)
6
+
7
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ * tab selected background color ([#239](https://github.com/blackbaud/skyux-design-tokens/issues/239))
11
+ * display type update ([#241](https://github.com/blackbaud/skyux-design-tokens/issues/241))
12
+ * change color of disabled toggle switch thumb ([#237](https://github.com/blackbaud/skyux-design-tokens/issues/237))
13
+
14
+ ### Features
15
+
16
+ * display type update ([#241](https://github.com/blackbaud/skyux-design-tokens/issues/241)) ([83233d5](https://github.com/blackbaud/skyux-design-tokens/commit/83233d5a04f826f51a4ad824ce0b6a17b54b5f1b))
17
+ * tab selected background color ([#239](https://github.com/blackbaud/skyux-design-tokens/issues/239)) ([942f688](https://github.com/blackbaud/skyux-design-tokens/commit/942f6887e4e10e9492c68a84c6d290d55f9c7ca2))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * change color of disabled toggle switch thumb ([#237](https://github.com/blackbaud/skyux-design-tokens/issues/237)) ([b4d1476](https://github.com/blackbaud/skyux-design-tokens/commit/b4d1476a2f930e99f695dfd6c8ac2eef2f67a1b6))
23
+
24
+ ## [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)
25
+
26
+
27
+ ### ⚠ BREAKING CHANGES
28
+
29
+ * delete toolbar button background and border colors ([#233](https://github.com/blackbaud/skyux-design-tokens/issues/233))
30
+ * change row background colors ([#229](https://github.com/blackbaud/skyux-design-tokens/issues/229))
31
+
32
+ ### Bug Fixes
33
+
34
+ * change row background colors ([#229](https://github.com/blackbaud/skyux-design-tokens/issues/229)) ([8df042d](https://github.com/blackbaud/skyux-design-tokens/commit/8df042d35c3cd02c9bdd767402d0b5a8373db3c7))
35
+ * 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))
36
+
5
37
  ## [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)
6
38
 
7
39
 
@@ -134,6 +134,7 @@
134
134
  --bb-font-size-400: 0.9375rem;
135
135
  --bb-font-size-500: 1.0625rem;
136
136
  --bb-font-size-600: 1.1875rem;
137
+ --bb-font-size-650: 1.3125rem;
137
138
  --bb-font-size-700: 1.5rem;
138
139
  --bb-font-size-800: 1.6875rem;
139
140
  --bb-font-style-italic-style: italic;
@@ -151,15 +152,16 @@
151
152
  --bb-font-weight-light: 300;
152
153
  --bb-font-weight-regular: 400;
153
154
  --bb-font-weight-semibold: 600;
154
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.3/assets/images/bb-logo.png');
155
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/assets/images/bb-logo.png');
155
156
  --bb-letter_spacing-normal: normal;
156
157
  --bb-letter_spacing-wider: 0.16px;
157
158
  --bb-line_height-300: calc(18/13);
158
159
  --bb-line_height-400: calc(20/15);
159
160
  --bb-line_height-500: calc(24/17);
160
161
  --bb-line_height-600: calc(28/19);
162
+ --bb-line_height-650: calc(28/21);
161
163
  --bb-line_height-700: calc(32/24);
162
- --bb-line_height-800: calc(36/26);
164
+ --bb-line_height-800: calc(36/27);
163
165
  --bb-opacity-600: .6;
164
166
  --bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
165
167
  --bb-size-0: 0rem;
@@ -267,11 +269,6 @@
267
269
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
268
270
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
269
271
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
270
- --sky-color-background-action-toolbar-active: var(--bb-color-transparent);
271
- --sky-color-background-action-toolbar-base: var(--bb-color-transparent);
272
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-700);
273
- --sky-color-background-action-toolbar-focus: var(--bb-color-transparent);
274
- --sky-color-background-action-toolbar-hover: var(--bb-color-transparent);
275
272
  --sky-color-background-blocking: var(--bb-color-blocking);
276
273
  --sky-color-background-container-base: var(--bb-color-gray-1000);
277
274
  --sky-color-background-container-danger: var(--bb-color-red-800);
@@ -287,17 +284,17 @@
287
284
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
288
285
  --sky-color-background-input-base: var(--bb-color-gray-900);
289
286
  --sky-color-background-input-disabled: var(--bb-color-gray-700);
290
- --sky-color-background-list-active: var(--bb-color-transparent);
291
- --sky-color-background-list-base: var(--bb-color-transparent);
292
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
293
- --sky-color-background-list-focus: var(--bb-color-transparent);
294
- --sky-color-background-list-hover: var(--bb-color-transparent);
295
287
  --sky-color-background-nav-active: var(--bb-color-transparent);
296
288
  --sky-color-background-nav-base: var(--bb-color-transparent);
297
289
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
298
290
  --sky-color-background-nav-focus: var(--bb-color-transparent);
299
291
  --sky-color-background-nav-hover: var(--bb-color-transparent);
300
292
  --sky-color-background-page: var(--bb-color-gray-1100);
293
+ --sky-color-background-row-active: var(--bb-color-transparent);
294
+ --sky-color-background-row-base: var(--bb-color-gray-1000);
295
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
296
+ --sky-color-background-row-focus: var(--bb-color-transparent);
297
+ --sky-color-background-row-hover: var(--bb-color-transparent);
301
298
  --sky-color-background-scrim: var(--bb-color-scrim);
302
299
  --sky-color-background-selected-danger: var(--bb-color-red-900);
303
300
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -309,9 +306,10 @@
309
306
  --sky-color-background-tab-disabled: var(--bb-color-gray-700);
310
307
  --sky-color-background-tab-focus: var(--bb-color-transparent);
311
308
  --sky-color-background-tab-hover: var(--bb-color-transparent);
309
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
312
310
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
313
311
  --sky-color-background-thumb-base: var(--bb-color-white);
314
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
312
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
315
313
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
316
314
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
317
315
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -338,11 +336,6 @@
338
336
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
339
337
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
340
338
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
341
- --sky-color-border-action-toolbar-active: var(--bb-color-sky-500);
342
- --sky-color-border-action-toolbar-base: var(--bb-color-transparent);
343
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-800);
344
- --sky-color-border-action-toolbar-focus: var(--bb-color-sky-600);
345
- --sky-color-border-action-toolbar-hover: var(--bb-color-sky-600);
346
339
  --sky-color-border-column_divider: var(--bb-color-blue-400);
347
340
  --sky-color-border-container-base: var(--bb-color-blue-900);
348
341
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -440,11 +433,6 @@
440
433
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
441
434
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
442
435
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
443
- --sky-color-background-action-toolbar-active: var(--bb-color-blue-100);
444
- --sky-color-background-action-toolbar-base: var(--bb-color-white);
445
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-50);
446
- --sky-color-background-action-toolbar-focus: var(--bb-color-white);
447
- --sky-color-background-action-toolbar-hover: var(--bb-color-blue-50);
448
436
  --sky-color-background-blocking: var(--bb-color-blocking);
449
437
  --sky-color-background-container-base: var(--bb-color-white);
450
438
  --sky-color-background-container-danger: var(--bb-color-red-300);
@@ -460,17 +448,17 @@
460
448
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
461
449
  --sky-color-background-input-base: var(--bb-color-blue-25);
462
450
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
463
- --sky-color-background-list-active: var(--bb-color-blue-100);
464
- --sky-color-background-list-base: var(--bb-color-transparent);
465
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
466
- --sky-color-background-list-focus: var(--bb-color-transparent);
467
- --sky-color-background-list-hover: var(--bb-color-blue-50);
468
451
  --sky-color-background-nav-active: var(--bb-color-blue-100);
469
452
  --sky-color-background-nav-base: var(--bb-color-transparent);
470
453
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
471
454
  --sky-color-background-nav-focus: var(--bb-color-transparent);
472
455
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
473
456
  --sky-color-background-page: var(--bb-color-slate-100);
457
+ --sky-color-background-row-active: var(--bb-color-blue-100);
458
+ --sky-color-background-row-base: var(--bb-color-white);
459
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
460
+ --sky-color-background-row-focus: var(--bb-color-transparent);
461
+ --sky-color-background-row-hover: var(--bb-color-blue-50);
474
462
  --sky-color-background-scrim: var(--bb-color-scrim);
475
463
  --sky-color-background-selected-danger: var(--bb-color-red-300);
476
464
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
@@ -482,9 +470,10 @@
482
470
  --sky-color-background-tab-disabled: var(--bb-color-gray-50);
483
471
  --sky-color-background-tab-focus: var(--bb-color-transparent);
484
472
  --sky-color-background-tab-hover: var(--bb-color-transparent);
473
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
485
474
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
486
475
  --sky-color-background-thumb-base: var(--bb-color-white);
487
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
476
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
488
477
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
489
478
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
490
479
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -511,11 +500,6 @@
511
500
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
512
501
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
513
502
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
514
- --sky-color-border-action-toolbar-active: var(--bb-color-blue-600);
515
- --sky-color-border-action-toolbar-base: var(--bb-color-blue-300);
516
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-200);
517
- --sky-color-border-action-toolbar-focus: var(--bb-color-blue-600);
518
- --sky-color-border-action-toolbar-hover: var(--bb-color-blue-600);
519
503
  --sky-color-border-column_divider: var(--bb-color-blue-600);
520
504
  --sky-color-border-container-base: var(--bb-color-blue-200);
521
505
  --sky-color-border-danger: var(--bb-color-red-600);
@@ -1104,9 +1088,9 @@
1104
1088
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1105
1089
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1106
1090
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1107
- --sky-font-line_height-display-2: var(--bb-line_height-600);
1108
- --sky-font-line_height-display-3: var(--bb-line_height-500);
1109
- --sky-font-line_height-display-4: var(--bb-line_height-400);
1091
+ --sky-font-line_height-display-2: var(--bb-line_height-650);
1092
+ --sky-font-line_height-display-3: var(--bb-line_height-600);
1093
+ --sky-font-line_height-display-4: var(--bb-line_height-500);
1110
1094
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1111
1095
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1112
1096
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1120,9 +1104,9 @@
1120
1104
  --sky-font-size-body-m: var(--bb-font-size-400);
1121
1105
  --sky-font-size-body-s: var(--bb-font-size-300);
1122
1106
  --sky-font-size-display-1: var(--bb-font-size-700);
1123
- --sky-font-size-display-2: var(--bb-font-size-600);
1124
- --sky-font-size-display-3: var(--bb-font-size-500);
1125
- --sky-font-size-display-4: var(--bb-font-size-400);
1107
+ --sky-font-size-display-2: var(--bb-font-size-650);
1108
+ --sky-font-size-display-3: var(--bb-font-size-600);
1109
+ --sky-font-size-display-4: var(--bb-font-size-500);
1126
1110
  --sky-font-size-heading-1: var(--bb-font-size-800);
1127
1111
  --sky-font-size-heading-2: var(--bb-font-size-600);
1128
1112
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1135,10 +1119,10 @@
1135
1119
  --sky-font-style-body-l: var(--bb-font-style-regular);
1136
1120
  --sky-font-style-body-m: var(--bb-font-style-regular);
1137
1121
  --sky-font-style-body-s: var(--bb-font-style-regular);
1138
- --sky-font-style-display-1: var(--bb-font-style-regular);
1139
- --sky-font-style-display-2: var(--bb-font-style-regular);
1140
- --sky-font-style-display-3: var(--bb-font-style-regular);
1141
- --sky-font-style-display-4: var(--bb-font-style-regular);
1122
+ --sky-font-style-display-1: var(--bb-font-style-semibold);
1123
+ --sky-font-style-display-2: var(--bb-font-style-semibold);
1124
+ --sky-font-style-display-3: var(--bb-font-style-semibold);
1125
+ --sky-font-style-display-4: var(--bb-font-style-semibold);
1142
1126
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1143
1127
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1144
1128
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
@@ -1149,8 +1133,8 @@
1149
1133
  --sky-font-weight-body-l: var(--bb-font-weight-regular);
1150
1134
  --sky-font-weight-body-m: var(--bb-font-weight-regular);
1151
1135
  --sky-font-weight-body-s: var(--bb-font-weight-semibold);
1152
- --sky-font-weight-display-1: var(--bb-font-weight-regular);
1153
- --sky-font-weight-display-2: var(--bb-font-weight-regular);
1136
+ --sky-font-weight-display-1: var(--bb-font-weight-semibold);
1137
+ --sky-font-weight-display-2: var(--bb-font-weight-semibold);
1154
1138
  --sky-font-weight-display-3: var(--bb-font-weight-semibold);
1155
1139
  --sky-font-weight-display-4: var(--bb-font-weight-semibold);
1156
1140
  --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
@@ -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.3/assets/images/bb-logo.png');
77
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.5/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);
@@ -205,6 +200,7 @@
205
200
  --sky-color-background-tab-disabled: var(--modern-color-transparent);
206
201
  --sky-color-background-tab-focus: var(--modern-color-transparent);
207
202
  --sky-color-background-tab-hover: var(--modern-color-transparent);
203
+ --sky-color-background-tab-selected: var(--modern-color-transparent);
208
204
  --sky-color-background-text_highlight: var(--modern-color-yellow-40);
209
205
  --sky-color-background-thumb-base: var(--modern-color-white);
210
206
  --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
@@ -234,11 +230,6 @@
234
230
  --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
235
231
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
236
232
  --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
233
  --sky-color-border-column_divider: var(--modern-color-gray-70);
243
234
  --sky-color-border-container-base: var(--modern-color-gray-15);
244
235
  --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.3",
3
+ "version": "2.0.0-alpha.5",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",