@blackbaud/skyux-design-tokens 2.0.0-alpha.0 → 2.0.0-alpha.10

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 +128 -0
  2. package/assets/scss/blackbaud.css +98 -79
  3. package/assets/scss/modern.css +44 -37
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,134 @@
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.10](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.9...2.0.0-alpha.10) (2025-07-22)
6
+
7
+
8
+ ### ⚠ BREAKING CHANGES
9
+
10
+ * remove unneeded font-weight tokens ([#141](https://github.com/blackbaud/skyux-design-tokens/issues/141))
11
+
12
+ ### Features
13
+
14
+ * add colors for disabled wizard tabs ([#244](https://github.com/blackbaud/skyux-design-tokens/issues/244)) ([a4479c6](https://github.com/blackbaud/skyux-design-tokens/commit/a4479c69f3630313feaaedde7cf5b58b74ab9fe4))
15
+ * remove unneeded font-weight tokens ([#141](https://github.com/blackbaud/skyux-design-tokens/issues/141)) ([9f23375](https://github.com/blackbaud/skyux-design-tokens/commit/9f233751b8e6e57daf3cf1a1075da8a29abc49c5))
16
+
17
+ ## [2.0.0-alpha.9](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.8...2.0.0-alpha.9) (2025-07-22)
18
+
19
+
20
+ ### ⚠ BREAKING CHANGES
21
+
22
+ * letterbox spacing is now comp.grid.cell spacing ([#238](https://github.com/blackbaud/skyux-design-tokens/issues/238))
23
+
24
+ ### Bug Fixes
25
+
26
+ * letterbox spacing is now comp.grid.cell spacing ([#238](https://github.com/blackbaud/skyux-design-tokens/issues/238)) ([b9cde87](https://github.com/blackbaud/skyux-design-tokens/commit/b9cde879634668ea74047b4e5d06b48ae4a619c5))
27
+
28
+ ## [2.0.0-alpha.8](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.7...2.0.0-alpha.8) (2025-07-18)
29
+
30
+
31
+ ### ⚠ BREAKING CHANGES
32
+
33
+ * wrap brand name token in quotes ([#249](https://github.com/blackbaud/skyux-design-tokens/issues/249))
34
+
35
+ ### Bug Fixes
36
+
37
+ * wrap brand name token in quotes ([#249](https://github.com/blackbaud/skyux-design-tokens/issues/249)) ([e09752b](https://github.com/blackbaud/skyux-design-tokens/commit/e09752bd44e601ce80d7e6d76c294b04b3f7e37e))
38
+
39
+ ## [2.0.0-alpha.7](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.6...2.0.0-alpha.7) (2025-07-18)
40
+
41
+
42
+ ### ⚠ BREAKING CHANGES
43
+
44
+ * change font weights ([#248](https://github.com/blackbaud/skyux-design-tokens/issues/248))
45
+
46
+ ### Features
47
+
48
+ * add tokens for card margins ([#245](https://github.com/blackbaud/skyux-design-tokens/issues/245)) ([30f849b](https://github.com/blackbaud/skyux-design-tokens/commit/30f849b70743e8776a797be40c14df22339196f4))
49
+
50
+
51
+ ### Bug Fixes
52
+
53
+ * change font weights ([#248](https://github.com/blackbaud/skyux-design-tokens/issues/248)) ([150428e](https://github.com/blackbaud/skyux-design-tokens/commit/150428e4367069294e7980f77d014d22332eab06))
54
+
55
+ ## [2.0.0-alpha.6](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.5...2.0.0-alpha.6) (2025-07-18)
56
+
57
+
58
+ ### Features
59
+
60
+ * add dimmed container background color ([#232](https://github.com/blackbaud/skyux-design-tokens/issues/232)) ([f370faf](https://github.com/blackbaud/skyux-design-tokens/commit/f370faf858cca7b4dcd115a57e84b0eca6588d87))
61
+
62
+ ## [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)
63
+
64
+
65
+ ### ⚠ BREAKING CHANGES
66
+
67
+ * tab selected background color ([#239](https://github.com/blackbaud/skyux-design-tokens/issues/239))
68
+ * display type update ([#241](https://github.com/blackbaud/skyux-design-tokens/issues/241))
69
+ * change color of disabled toggle switch thumb ([#237](https://github.com/blackbaud/skyux-design-tokens/issues/237))
70
+
71
+ ### Features
72
+
73
+ * display type update ([#241](https://github.com/blackbaud/skyux-design-tokens/issues/241)) ([83233d5](https://github.com/blackbaud/skyux-design-tokens/commit/83233d5a04f826f51a4ad824ce0b6a17b54b5f1b))
74
+ * tab selected background color ([#239](https://github.com/blackbaud/skyux-design-tokens/issues/239)) ([942f688](https://github.com/blackbaud/skyux-design-tokens/commit/942f6887e4e10e9492c68a84c6d290d55f9c7ca2))
75
+
76
+
77
+ ### Bug Fixes
78
+
79
+ * 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))
80
+
81
+ ## [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)
82
+
83
+
84
+ ### ⚠ BREAKING CHANGES
85
+
86
+ * delete toolbar button background and border colors ([#233](https://github.com/blackbaud/skyux-design-tokens/issues/233))
87
+ * change row background colors ([#229](https://github.com/blackbaud/skyux-design-tokens/issues/229))
88
+
89
+ ### Bug Fixes
90
+
91
+ * change row background colors ([#229](https://github.com/blackbaud/skyux-design-tokens/issues/229)) ([8df042d](https://github.com/blackbaud/skyux-design-tokens/commit/8df042d35c3cd02c9bdd767402d0b5a8373db3c7))
92
+ * 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))
93
+
94
+ ## [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)
95
+
96
+
97
+ ### ⚠ BREAKING CHANGES
98
+
99
+ * change heading-1 style from semibold to regular ([#225](https://github.com/blackbaud/skyux-design-tokens/issues/225))
100
+ * add blue-250 and change border references ([#230](https://github.com/blackbaud/skyux-design-tokens/issues/230))
101
+ * layout fit list inset space reduction ([#231](https://github.com/blackbaud/skyux-design-tokens/issues/231))
102
+
103
+ ### Features
104
+
105
+ * 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))
106
+ * 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))
107
+
108
+
109
+ ### Bug Fixes
110
+
111
+ * 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))
112
+
113
+ ## [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)
114
+
115
+
116
+ ### Features
117
+
118
+ * add brand name ([#234](https://github.com/blackbaud/skyux-design-tokens/issues/234)) ([85a03c6](https://github.com/blackbaud/skyux-design-tokens/commit/85a03c6c17639f26a9f339972e1a1a3b1569684a))
119
+ * 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))
120
+
121
+ ## [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)
122
+
123
+
124
+ ### Features
125
+
126
+ * 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))
127
+
128
+
129
+ ### Bug Fixes
130
+
131
+ * 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))
132
+
5
133
  ## [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
134
 
7
135
 
package/assets/scss/blackbaud.css CHANGED
@@ -13,12 +13,14 @@
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;
19
20
  --bb-color-blue-1000: #09152b;
20
- --bb-color-blue-200: #d0e1f7;
21
+ --bb-color-blue-200: #d5e1f7;
21
22
  --bb-color-blue-25: #fbfcfe;
23
+ --bb-color-blue-250: #bfd3f2;
22
24
  --bb-color-blue-300: #aac4ee;
23
25
  --bb-color-blue-400: #80a6e6;
24
26
  --bb-color-blue-50: #f4f8fd;
@@ -132,6 +134,7 @@
132
134
  --bb-font-size-400: 0.9375rem;
133
135
  --bb-font-size-500: 1.0625rem;
134
136
  --bb-font-size-600: 1.1875rem;
137
+ --bb-font-size-650: 1.3125rem;
135
138
  --bb-font-size-700: 1.5rem;
136
139
  --bb-font-size-800: 1.6875rem;
137
140
  --bb-font-style-italic-style: italic;
@@ -149,15 +152,16 @@
149
152
  --bb-font-weight-light: 300;
150
153
  --bb-font-weight-regular: 400;
151
154
  --bb-font-weight-semibold: 600;
152
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.0/assets/images/bb-logo.png');
155
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.10/assets/images/bb-logo.png');
153
156
  --bb-letter_spacing-normal: normal;
154
157
  --bb-letter_spacing-wider: 0.16px;
155
158
  --bb-line_height-300: calc(18/13);
156
159
  --bb-line_height-400: calc(20/15);
157
160
  --bb-line_height-500: calc(24/17);
158
161
  --bb-line_height-600: calc(28/19);
162
+ --bb-line_height-650: calc(28/21);
159
163
  --bb-line_height-700: calc(32/24);
160
- --bb-line_height-800: calc(36/26);
164
+ --bb-line_height-800: calc(36/27);
161
165
  --bb-opacity-600: .6;
162
166
  --bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
163
167
  --bb-size-0: 0rem;
@@ -212,7 +216,7 @@
212
216
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
213
217
  --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
218
  --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(var(--bb-color-blue-900)0.14);
219
+ --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
220
  --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
221
  --bb-shadow-blue-25: 0 1px 1px 0 rgba(17, 43, 85, 0.05);
218
222
  --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);
@@ -265,14 +269,10 @@
265
269
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-700);
266
270
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
267
271
  --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
268
- --sky-color-background-action-toolbar-active: var(--bb-color-transparent);
269
- --sky-color-background-action-toolbar-base: var(--bb-color-transparent);
270
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-700);
271
- --sky-color-background-action-toolbar-focus: var(--bb-color-transparent);
272
- --sky-color-background-action-toolbar-hover: var(--bb-color-transparent);
273
272
  --sky-color-background-blocking: var(--bb-color-blocking);
274
273
  --sky-color-background-container-base: var(--bb-color-gray-1000);
275
274
  --sky-color-background-container-danger: var(--bb-color-red-800);
275
+ --sky-color-background-container-dimmed: var(--bb-color-gray-1000);
276
276
  --sky-color-background-container-info: var(--bb-color-blue-800);
277
277
  --sky-color-background-container-menu: var(--bb-color-gray-900);
278
278
  --sky-color-background-container-success: var(--bb-color-green-900);
@@ -285,26 +285,33 @@
285
285
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
286
286
  --sky-color-background-input-base: var(--bb-color-gray-900);
287
287
  --sky-color-background-input-disabled: var(--bb-color-gray-700);
288
- --sky-color-background-list-active: var(--bb-color-transparent);
289
- --sky-color-background-list-base: var(--bb-color-transparent);
290
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
291
- --sky-color-background-list-focus: var(--bb-color-transparent);
292
- --sky-color-background-list-hover: var(--bb-color-transparent);
293
288
  --sky-color-background-nav-active: var(--bb-color-transparent);
294
289
  --sky-color-background-nav-base: var(--bb-color-transparent);
295
290
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
296
291
  --sky-color-background-nav-focus: var(--bb-color-transparent);
297
292
  --sky-color-background-nav-hover: var(--bb-color-transparent);
298
293
  --sky-color-background-page: var(--bb-color-gray-1100);
294
+ --sky-color-background-row-active: var(--bb-color-transparent);
295
+ --sky-color-background-row-base: var(--bb-color-gray-1000);
296
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
297
+ --sky-color-background-row-focus: var(--bb-color-transparent);
298
+ --sky-color-background-row-hover: var(--bb-color-transparent);
299
299
  --sky-color-background-scrim: var(--bb-color-scrim);
300
300
  --sky-color-background-selected-danger: var(--bb-color-red-900);
301
301
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
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);
310
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
311
+ --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
305
312
  --sky-color-background-text_highlight: var(--bb-color-yellow-800);
306
313
  --sky-color-background-thumb-base: var(--bb-color-white);
307
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
314
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-600);
308
315
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
309
316
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
310
317
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -331,11 +338,6 @@
331
338
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-800);
332
339
  --sky-color-border-action-tertiary-focus: var(--bb-color-sky-600);
333
340
  --sky-color-border-action-tertiary-hover: var(--bb-color-sky-600);
334
- --sky-color-border-action-toolbar-active: var(--bb-color-sky-500);
335
- --sky-color-border-action-toolbar-base: var(--bb-color-transparent);
336
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-800);
337
- --sky-color-border-action-toolbar-focus: var(--bb-color-sky-600);
338
- --sky-color-border-action-toolbar-hover: var(--bb-color-sky-600);
339
341
  --sky-color-border-column_divider: var(--bb-color-blue-400);
340
342
  --sky-color-border-container-base: var(--bb-color-blue-900);
341
343
  --sky-color-border-danger: var(--bb-color-red-400);
@@ -348,6 +350,11 @@
348
350
  --sky-color-border-input-error: var(--bb-color-red-600);
349
351
  --sky-color-border-input-focus: var(--bb-color-blue-600);
350
352
  --sky-color-border-input-hover: var(--bb-color-blue-600);
353
+ --sky-color-border-nav-active: var(--bb-color-sky-500);
354
+ --sky-color-border-nav-base: var(--bb-color-transparent);
355
+ --sky-color-border-nav-disabled: var(--bb-color-gray-800);
356
+ --sky-color-border-nav-focus: var(--bb-color-sky-600);
357
+ --sky-color-border-nav-hover: var(--bb-color-sky-600);
351
358
  --sky-color-border-progress_step: var(--bb-color-gray-600);
352
359
  --sky-color-border-selected: var(--bb-color-blue-400);
353
360
  --sky-color-border-selected_soft: var(--bb-color-blue-500);
@@ -366,6 +373,12 @@
366
373
  --sky-color-border-switch-selected-disabled: var(--bb-color-gray-400);
367
374
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-900);
368
375
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-900);
376
+ --sky-color-border-tab-active: var(--bb-color-sky-500);
377
+ --sky-color-border-tab-base: var(--bb-color-transparent);
378
+ --sky-color-border-tab-disabled: var(--bb-color-gray-800);
379
+ --sky-color-border-tab-focus: var(--bb-color-sky-600);
380
+ --sky-color-border-tab-hover: var(--bb-color-sky-600);
381
+ --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
369
382
  --sky-color-border-text_highlight: var(--bb-color-yellow-600);
370
383
  --sky-color-border-warning: var(--bb-color-yellow-400);
371
384
  --sky-color-icon-action: var(--bb-color-sky-600);
@@ -397,6 +410,7 @@
397
410
  --sky-elevation-raised-100: var(--bb-shadow-blue-100);
398
411
  }
399
412
  .sky-theme-modern.sky-theme-brand-base {
413
+ --sky-brand-name: var(--bb-brand-name);
400
414
  --sky-color-background-action-danger-active: var(--bb-color-red-800);
401
415
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
402
416
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
@@ -422,14 +436,10 @@
422
436
  --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
423
437
  --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
424
438
  --sky-color-background-action-tertiary-hover: var(--bb-color-blue-50);
425
- --sky-color-background-action-toolbar-active: var(--bb-color-blue-100);
426
- --sky-color-background-action-toolbar-base: var(--bb-color-white);
427
- --sky-color-background-action-toolbar-disabled: var(--bb-color-gray-50);
428
- --sky-color-background-action-toolbar-focus: var(--bb-color-white);
429
- --sky-color-background-action-toolbar-hover: var(--bb-color-blue-50);
430
439
  --sky-color-background-blocking: var(--bb-color-blocking);
431
440
  --sky-color-background-container-base: var(--bb-color-white);
432
441
  --sky-color-background-container-danger: var(--bb-color-red-300);
442
+ --sky-color-background-container-dimmed: var(--bb-color-blue-25);
433
443
  --sky-color-background-container-info: var(--bb-color-blue-200);
434
444
  --sky-color-background-container-menu: var(--bb-color-white);
435
445
  --sky-color-background-container-success: var(--bb-color-green-300);
@@ -442,26 +452,33 @@
442
452
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
443
453
  --sky-color-background-input-base: var(--bb-color-blue-25);
444
454
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
445
- --sky-color-background-list-active: var(--bb-color-blue-100);
446
- --sky-color-background-list-base: var(--bb-color-transparent);
447
- --sky-color-background-list-disabled: var(--bb-color-gray-50);
448
- --sky-color-background-list-focus: var(--bb-color-transparent);
449
- --sky-color-background-list-hover: var(--bb-color-blue-50);
450
455
  --sky-color-background-nav-active: var(--bb-color-blue-100);
451
456
  --sky-color-background-nav-base: var(--bb-color-transparent);
452
457
  --sky-color-background-nav-disabled: var(--bb-color-gray-50);
453
458
  --sky-color-background-nav-focus: var(--bb-color-transparent);
454
459
  --sky-color-background-nav-hover: var(--bb-color-blue-50);
455
460
  --sky-color-background-page: var(--bb-color-slate-100);
461
+ --sky-color-background-row-active: var(--bb-color-blue-100);
462
+ --sky-color-background-row-base: var(--bb-color-white);
463
+ --sky-color-background-row-disabled: var(--bb-color-gray-50);
464
+ --sky-color-background-row-focus: var(--bb-color-transparent);
465
+ --sky-color-background-row-hover: var(--bb-color-blue-50);
456
466
  --sky-color-background-scrim: var(--bb-color-scrim);
457
467
  --sky-color-background-selected-danger: var(--bb-color-red-300);
458
468
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
459
469
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
460
470
  --sky-color-background-selected-success: var(--bb-color-green-300);
461
471
  --sky-color-background-selected-warning: var(--bb-color-yellow-300);
472
+ --sky-color-background-tab-active: var(--bb-color-transparent);
473
+ --sky-color-background-tab-base: var(--bb-color-transparent);
474
+ --sky-color-background-tab-disabled: var(--bb-color-gray-50);
475
+ --sky-color-background-tab-focus: var(--bb-color-transparent);
476
+ --sky-color-background-tab-hover: var(--bb-color-transparent);
477
+ --sky-color-background-tab-selected: var(--bb-color-transparent);
478
+ --sky-color-background-tab-wizard-disabled: var(--bb-color-transparent);
462
479
  --sky-color-background-text_highlight: var(--bb-color-yellow-400);
463
480
  --sky-color-background-thumb-base: var(--bb-color-white);
464
- --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
481
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-25);
465
482
  --sky-color-background-thumbnail_matte: var(--bb-color-white);
466
483
  --sky-color-border-action-danger-active: var(--bb-color-red-1000);
467
484
  --sky-color-border-action-danger-base: var(--bb-color-red-600);
@@ -469,7 +486,7 @@
469
486
  --sky-color-border-action-danger-focus: var(--bb-color-red-1000);
470
487
  --sky-color-border-action-danger-hover: var(--bb-color-red-1000);
471
488
  --sky-color-border-action-input-active: var(--bb-color-blue-600);
472
- --sky-color-border-action-input-base: var(--bb-color-blue-200);
489
+ --sky-color-border-action-input-base: var(--bb-color-blue-250);
473
490
  --sky-color-border-action-input-disabled: var(--bb-color-gray-200);
474
491
  --sky-color-border-action-input-focus: var(--bb-color-blue-600);
475
492
  --sky-color-border-action-input-hover: var(--bb-color-blue-600);
@@ -488,11 +505,6 @@
488
505
  --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-200);
489
506
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
490
507
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
491
- --sky-color-border-action-toolbar-active: var(--bb-color-blue-600);
492
- --sky-color-border-action-toolbar-base: var(--bb-color-blue-300);
493
- --sky-color-border-action-toolbar-disabled: var(--bb-color-gray-200);
494
- --sky-color-border-action-toolbar-focus: var(--bb-color-blue-600);
495
- --sky-color-border-action-toolbar-hover: var(--bb-color-blue-600);
496
508
  --sky-color-border-column_divider: var(--bb-color-blue-600);
497
509
  --sky-color-border-container-base: var(--bb-color-blue-200);
498
510
  --sky-color-border-danger: var(--bb-color-red-600);
@@ -500,16 +512,21 @@
500
512
  --sky-color-border-elevation: var(--bb-color-blue-200);
501
513
  --sky-color-border-info: var(--bb-color-blue-600);
502
514
  --sky-color-border-input-active: var(--bb-color-blue-600);
503
- --sky-color-border-input-base: var(--bb-color-blue-200);
515
+ --sky-color-border-input-base: var(--bb-color-blue-250);
504
516
  --sky-color-border-input-disabled: var(--bb-color-gray-200);
505
517
  --sky-color-border-input-error: var(--bb-color-red-600);
506
518
  --sky-color-border-input-focus: var(--bb-color-blue-600);
507
519
  --sky-color-border-input-hover: var(--bb-color-blue-600);
520
+ --sky-color-border-nav-active: var(--bb-color-blue-600);
521
+ --sky-color-border-nav-base: var(--bb-color-transparent);
522
+ --sky-color-border-nav-disabled: var(--bb-color-gray-200);
523
+ --sky-color-border-nav-focus: var(--bb-color-blue-600);
524
+ --sky-color-border-nav-hover: var(--bb-color-blue-600);
508
525
  --sky-color-border-progress_step: var(--bb-color-gray-400);
509
526
  --sky-color-border-selected: var(--bb-color-blue-600);
510
527
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
511
- --sky-color-border-separator-light: var(--bb-color-blue-200);
512
- --sky-color-border-separator-row: var(--bb-color-blue-200);
528
+ --sky-color-border-separator-light: var(--bb-color-blue-250);
529
+ --sky-color-border-separator-row: var(--bb-color-blue-250);
513
530
  --sky-color-border-success: var(--bb-color-green-700);
514
531
  --sky-color-border-switch-active: var(--bb-color-blue-600);
515
532
  --sky-color-border-switch-base: var(--bb-color-blue-500);
@@ -522,6 +539,12 @@
522
539
  --sky-color-border-switch-selected-disabled: var(--bb-color-gray-200);
523
540
  --sky-color-border-switch-selected-focus: var(--bb-color-blue-1000);
524
541
  --sky-color-border-switch-selected-hover: var(--bb-color-blue-1000);
542
+ --sky-color-border-tab-active: var(--bb-color-blue-600);
543
+ --sky-color-border-tab-base: var(--bb-color-transparent);
544
+ --sky-color-border-tab-disabled: var(--bb-color-gray-200);
545
+ --sky-color-border-tab-focus: var(--bb-color-blue-600);
546
+ --sky-color-border-tab-hover: var(--bb-color-blue-600);
547
+ --sky-color-border-tab-wizard-disabled: var(--bb-color-transparent);
525
548
  --sky-color-border-text_highlight: var(--bb-color-yellow-800);
526
549
  --sky-color-border-warning: var(--bb-color-yellow-600);
527
550
  --sky-color-category-blue: var(--bb-color-sky-300);
@@ -716,6 +739,10 @@
716
739
  --sky-comp-card-small-header-space-inset-left: var(--bb-size-fluid-100);
717
740
  --sky-comp-card-small-header-space-inset-right: var(--bb-size-fluid-100);
718
741
  --sky-comp-card-small-header-space-inset-top: var(--bb-size-fluid-100);
742
+ --sky-comp-card-space-offset-bottom: var(--bb-size-fluid-50);
743
+ --sky-comp-card-space-offset-left: var(--bb-size-0);
744
+ --sky-comp-card-space-offset-right: var(--bb-size-fluid-50);
745
+ --sky-comp-card-space-offset-top: var(--bb-size-0);
719
746
  --sky-comp-colorpicker-content-space-inset-bottom: var(--bb-size-fluid-50);
720
747
  --sky-comp-colorpicker-content-space-inset-left: var(--bb-size-fluid-75);
721
748
  --sky-comp-colorpicker-content-space-inset-right: var(--bb-size-fluid-75);
@@ -752,6 +779,10 @@
752
779
  --sky-comp-flyout-header-space-inset-left: var(--bb-size-fluid-50);
753
780
  --sky-comp-flyout-header-space-inset-right: var(--bb-size-fluid-50);
754
781
  --sky-comp-flyout-header-space-inset-top: var(--bb-size-fluid-75);
782
+ --sky-comp-grid-cell-space-inset-bottom: var(--bb-size-fluid-75);
783
+ --sky-comp-grid-cell-space-inset-left: var(--bb-size-fluid-50);
784
+ --sky-comp-grid-cell-space-inset-right: var(--bb-size-fluid-50);
785
+ --sky-comp-grid-cell-space-inset-top: var(--bb-size-fluid-75);
755
786
  --sky-comp-help_inline-space-inset-bottom: var(--bb-size-fluid-6);
756
787
  --sky-comp-help_inline-space-inset-left: var(--bb-size-fluid-25);
757
788
  --sky-comp-help_inline-space-inset-right: var(--bb-size-fluid-25);
@@ -813,20 +844,20 @@
813
844
  --sky-comp-page-content-blocks-space-inset-xs-right: var(--bb-size-fluid-50);
814
845
  --sky-comp-page-content-blocks-space-inset-xs-top: var(--bb-size-fluid-50);
815
846
  --sky-comp-page-content-fit-space-inset-sm-bottom: var(--bb-size-0);
816
- --sky-comp-page-content-fit-space-inset-sm-left: var(--bb-size-fluid-150);
817
- --sky-comp-page-content-fit-space-inset-sm-right: var(--bb-size-fluid-150);
847
+ --sky-comp-page-content-fit-space-inset-sm-left: var(--bb-size-0);
848
+ --sky-comp-page-content-fit-space-inset-sm-right: var(--bb-size-0);
818
849
  --sky-comp-page-content-fit-space-inset-sm-top: var(--bb-size-0);
819
850
  --sky-comp-page-content-fit-space-inset-xs-bottom: var(--bb-size-0);
820
- --sky-comp-page-content-fit-space-inset-xs-left: var(--bb-size-fluid-50);
821
- --sky-comp-page-content-fit-space-inset-xs-right: var(--bb-size-fluid-50);
851
+ --sky-comp-page-content-fit-space-inset-xs-left: var(--bb-size-0);
852
+ --sky-comp-page-content-fit-space-inset-xs-right: var(--bb-size-0);
822
853
  --sky-comp-page-content-fit-space-inset-xs-top: var(--bb-size-0);
823
854
  --sky-comp-page-content-list-space-inset-sm-bottom: var(--bb-size-0);
824
- --sky-comp-page-content-list-space-inset-sm-left: var(--bb-size-fluid-150);
825
- --sky-comp-page-content-list-space-inset-sm-right: var(--bb-size-fluid-150);
855
+ --sky-comp-page-content-list-space-inset-sm-left: var(--bb-size-0);
856
+ --sky-comp-page-content-list-space-inset-sm-right: var(--bb-size-0);
826
857
  --sky-comp-page-content-list-space-inset-sm-top: var(--bb-size-0);
827
858
  --sky-comp-page-content-list-space-inset-xs-bottom: var(--bb-size-0);
828
- --sky-comp-page-content-list-space-inset-xs-left: var(--bb-size-fluid-50);
829
- --sky-comp-page-content-list-space-inset-xs-right: var(--bb-size-fluid-50);
859
+ --sky-comp-page-content-list-space-inset-xs-left: var(--bb-size-0);
860
+ --sky-comp-page-content-list-space-inset-xs-right: var(--bb-size-0);
830
861
  --sky-comp-page-content-list-space-inset-xs-top: var(--bb-size-0);
831
862
  --sky-comp-page-content-tabs-space-inset-sm-bottom: var(--bb-size-0);
832
863
  --sky-comp-page-content-tabs-space-inset-sm-left: var(--bb-size-0);
@@ -948,6 +979,14 @@
948
979
  --sky-comp-selection_box-expanded-space-inset-left: var(--bb-size-fluid-150);
949
980
  --sky-comp-selection_box-expanded-space-inset-right: var(--bb-size-fluid-150);
950
981
  --sky-comp-selection_box-expanded-space-inset-top: var(--bb-size-fluid-150);
982
+ --sky-comp-split_view-drawer-space-inset-sm-bottom: var(--bb-size-fluid-75);
983
+ --sky-comp-split_view-drawer-space-inset-sm-left: var(--bb-size-fluid-75);
984
+ --sky-comp-split_view-drawer-space-inset-sm-right: var(--bb-size-0);
985
+ --sky-comp-split_view-drawer-space-inset-sm-top: var(--bb-size-fluid-75);
986
+ --sky-comp-split_view-drawer-space-inset-xs-bottom: var(--bb-size-fluid-50);
987
+ --sky-comp-split_view-drawer-space-inset-xs-left: var(--bb-size-fluid-50);
988
+ --sky-comp-split_view-drawer-space-inset-xs-right: var(--bb-size-0);
989
+ --sky-comp-split_view-drawer-space-inset-xs-top: var(--bb-size-fluid-50);
951
990
  --sky-comp-split_view-footer-space-inset-bottom: var(--bb-size-fluid-50);
952
991
  --sky-comp-split_view-footer-space-inset-left: var(--bb-size-fluid-50);
953
992
  --sky-comp-split_view-footer-space-inset-right: var(--bb-size-fluid-50);
@@ -1063,9 +1102,9 @@
1063
1102
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1064
1103
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1065
1104
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1066
- --sky-font-line_height-display-2: var(--bb-line_height-600);
1067
- --sky-font-line_height-display-3: var(--bb-line_height-500);
1068
- --sky-font-line_height-display-4: var(--bb-line_height-400);
1105
+ --sky-font-line_height-display-2: var(--bb-line_height-650);
1106
+ --sky-font-line_height-display-3: var(--bb-line_height-600);
1107
+ --sky-font-line_height-display-4: var(--bb-line_height-500);
1069
1108
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1070
1109
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1071
1110
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1079,9 +1118,9 @@
1079
1118
  --sky-font-size-body-m: var(--bb-font-size-400);
1080
1119
  --sky-font-size-body-s: var(--bb-font-size-300);
1081
1120
  --sky-font-size-display-1: var(--bb-font-size-700);
1082
- --sky-font-size-display-2: var(--bb-font-size-600);
1083
- --sky-font-size-display-3: var(--bb-font-size-500);
1084
- --sky-font-size-display-4: var(--bb-font-size-400);
1121
+ --sky-font-size-display-2: var(--bb-font-size-650);
1122
+ --sky-font-size-display-3: var(--bb-font-size-600);
1123
+ --sky-font-size-display-4: var(--bb-font-size-500);
1085
1124
  --sky-font-size-heading-1: var(--bb-font-size-800);
1086
1125
  --sky-font-size-heading-2: var(--bb-font-size-600);
1087
1126
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1094,33 +1133,17 @@
1094
1133
  --sky-font-style-body-l: var(--bb-font-style-regular);
1095
1134
  --sky-font-style-body-m: var(--bb-font-style-regular);
1096
1135
  --sky-font-style-body-s: var(--bb-font-style-regular);
1097
- --sky-font-style-display-1: var(--bb-font-style-regular);
1098
- --sky-font-style-display-2: var(--bb-font-style-regular);
1099
- --sky-font-style-display-3: var(--bb-font-style-regular);
1100
- --sky-font-style-display-4: var(--bb-font-style-regular);
1136
+ --sky-font-style-display-1: var(--bb-font-style-semibold);
1137
+ --sky-font-style-display-2: var(--bb-font-style-semibold);
1138
+ --sky-font-style-display-3: var(--bb-font-style-semibold);
1139
+ --sky-font-style-display-4: var(--bb-font-style-semibold);
1101
1140
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1102
- --sky-font-style-heading-1: var(--bb-font-style-semibold);
1141
+ --sky-font-style-heading-1: var(--bb-font-style-regular);
1103
1142
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1104
1143
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1105
1144
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1106
1145
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1107
1146
  --sky-font-style-input-label: var(--bb-font-style-regular);
1108
- --sky-font-weight-body-l: var(--bb-font-weight-regular);
1109
- --sky-font-weight-body-m: var(--bb-font-weight-regular);
1110
- --sky-font-weight-body-s: var(--bb-font-weight-semibold);
1111
- --sky-font-weight-display-1: var(--bb-font-weight-regular);
1112
- --sky-font-weight-display-2: var(--bb-font-weight-regular);
1113
- --sky-font-weight-display-3: var(--bb-font-weight-semibold);
1114
- --sky-font-weight-display-4: var(--bb-font-weight-semibold);
1115
- --sky-font-weight-emphasized: var(--bb-font-weight-semibold);
1116
- --sky-font-weight-heading-1: var(--bb-font-weight-regular);
1117
- --sky-font-weight-heading-2: var(--bb-font-weight-semibold);
1118
- --sky-font-weight-heading-3: var(--bb-font-weight-semibold);
1119
- --sky-font-weight-heading-4: var(--bb-font-weight-semibold);
1120
- --sky-font-weight-heading-5: var(--bb-font-weight-semibold);
1121
- --sky-font-weight-hint-m: var(--bb-font-weight-regular);
1122
- --sky-font-weight-hint-s: var(--bb-font-weight-regular);
1123
- --sky-font-weight-input-label: var(--bb-font-weight-regular);
1124
1147
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1125
1148
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1126
1149
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1209,10 +1232,6 @@
1209
1232
  --sky-space-inset-horizontal-top-m: var(--bb-size-0);
1210
1233
  --sky-space-inset-horizontal-top-s: var(--bb-size-0);
1211
1234
  --sky-space-inset-horizontal-top-xl: var(--bb-size-0);
1212
- --sky-space-inset-letterbox-2_3-bottom-m: var(--bb-size-fluid-75);
1213
- --sky-space-inset-letterbox-2_3-left-m: var(--bb-size-fluid-50);
1214
- --sky-space-inset-letterbox-2_3-right-m: var(--bb-size-fluid-50);
1215
- --sky-space-inset-letterbox-2_3-top-m: var(--bb-size-fluid-75);
1216
1235
  --sky-space-inset-thumb: var(--bb-size-fixed-6);
1217
1236
  --sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
1218
1237
  --sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
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.0/assets/images/bb-logo.png');
77
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.10/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);
@@ -161,14 +163,10 @@
161
163
  --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
162
164
  --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
163
165
  --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
164
- --sky-color-background-action-toolbar-active: var(--modern-color-transparent);
165
- --sky-color-background-action-toolbar-base: var(--modern-color-transparent);
166
- --sky-color-background-action-toolbar-disabled: var(--modern-color-gray-07);
167
- --sky-color-background-action-toolbar-focus: var(--modern-color-transparent);
168
- --sky-color-background-action-toolbar-hover: var(--modern-color-transparent);
169
166
  --sky-color-background-blocking: var(--modern-color-blocking);
170
167
  --sky-color-background-container-base: var(--modern-color-white);
171
168
  --sky-color-background-container-danger: var(--modern-color-red-30);
169
+ --sky-color-background-container-dimmed: var(--modern-color-transparent);
172
170
  --sky-color-background-container-info: var(--modern-color-blue-10);
173
171
  --sky-color-background-container-menu: var(--modern-color-white);
174
172
  --sky-color-background-container-success: var(--modern-color-green-30);
@@ -181,23 +179,30 @@
181
179
  --sky-color-background-icon_matte-warning: var(--modern-color-yellow-50);
182
180
  --sky-color-background-input-base: var(--modern-color-transparent);
183
181
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
184
- --sky-color-background-list-active: var(--modern-color-transparent);
185
- --sky-color-background-list-base: var(--modern-color-transparent);
186
- --sky-color-background-list-disabled: var(--modern-color-gray-07);
187
- --sky-color-background-list-focus: var(--modern-color-transparent);
188
- --sky-color-background-list-hover: var(--modern-color-transparent);
189
182
  --sky-color-background-nav-active: var(--modern-color-transparent);
190
183
  --sky-color-background-nav-base: var(--modern-color-transparent);
191
184
  --sky-color-background-nav-disabled: var(--modern-color-gray-07);
192
185
  --sky-color-background-nav-focus: var(--modern-color-transparent);
193
186
  --sky-color-background-nav-hover: var(--modern-color-transparent);
194
187
  --sky-color-background-page: var(--modern-color-gray-005);
188
+ --sky-color-background-row-active: var(--modern-color-transparent);
189
+ --sky-color-background-row-base: var(--modern-color-transparent);
190
+ --sky-color-background-row-disabled: var(--modern-color-gray-07);
191
+ --sky-color-background-row-focus: var(--modern-color-transparent);
192
+ --sky-color-background-row-hover: var(--modern-color-transparent);
195
193
  --sky-color-background-scrim: var(--modern-color-scrim);
196
194
  --sky-color-background-selected-danger: var(--modern-color-red-30);
197
195
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
198
196
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
199
197
  --sky-color-background-selected-success: var(--modern-color-green-30);
200
198
  --sky-color-background-selected-warning: var(--modern-color-yellow-30);
199
+ --sky-color-background-tab-active: var(--modern-color-transparent);
200
+ --sky-color-background-tab-base: var(--modern-color-transparent);
201
+ --sky-color-background-tab-disabled: var(--modern-color-transparent);
202
+ --sky-color-background-tab-focus: var(--modern-color-transparent);
203
+ --sky-color-background-tab-hover: var(--modern-color-transparent);
204
+ --sky-color-background-tab-selected: var(--modern-color-transparent);
205
+ --sky-color-background-tab-wizard-disabled: 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);
@@ -227,11 +232,6 @@
227
232
  --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
228
233
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
229
234
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
230
- --sky-color-border-action-toolbar-active: var(--modern-color-blue-74);
231
- --sky-color-border-action-toolbar-base: var(--modern-color-transparent);
232
- --sky-color-border-action-toolbar-disabled: var(--modern-color-gray-15);
233
- --sky-color-border-action-toolbar-focus: var(--modern-color-blue-74);
234
- --sky-color-border-action-toolbar-hover: var(--modern-color-blue-74);
235
235
  --sky-color-border-column_divider: var(--modern-color-gray-70);
236
236
  --sky-color-border-container-base: var(--modern-color-gray-15);
237
237
  --sky-color-border-danger: var(--modern-color-red-50);
@@ -244,6 +244,11 @@
244
244
  --sky-color-border-input-error: var(--modern-color-red-50);
245
245
  --sky-color-border-input-focus: var(--modern-color-blue-74);
246
246
  --sky-color-border-input-hover: var(--modern-color-blue-74);
247
+ --sky-color-border-nav-active: var(--modern-color-transparent);
248
+ --sky-color-border-nav-base: var(--modern-color-transparent);
249
+ --sky-color-border-nav-disabled: var(--modern-color-transparent);
250
+ --sky-color-border-nav-focus: var(--modern-color-blue-74);
251
+ --sky-color-border-nav-hover: var(--modern-color-transparent);
247
252
  --sky-color-border-progress_step: var(--modern-color-gray-50);
248
253
  --sky-color-border-selected: var(--modern-color-blue-74);
249
254
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
@@ -261,6 +266,12 @@
261
266
  --sky-color-border-switch-selected-disabled: var(--modern-color-gray-50);
262
267
  --sky-color-border-switch-selected-focus: var(--modern-color-blue-74);
263
268
  --sky-color-border-switch-selected-hover: var(--modern-color-blue-74);
269
+ --sky-color-border-tab-active: var(--modern-color-blue-50);
270
+ --sky-color-border-tab-base: var(--modern-color-transparent);
271
+ --sky-color-border-tab-disabled: var(--modern-color-transparent);
272
+ --sky-color-border-tab-focus: var(--modern-color-blue-74);
273
+ --sky-color-border-tab-hover: var(--modern-color-blue-50);
274
+ --sky-color-border-tab-wizard-disabled: var(--modern-color-transparent);
264
275
  --sky-color-border-text_highlight: var(--modern-color-yellow-80);
265
276
  --sky-color-border-warning: var(--modern-color-yellow-50);
266
277
  --sky-color-category-blue: var(--modern-color-category-sky_blue-40);
@@ -455,6 +466,10 @@
455
466
  --sky-comp-card-small-header-space-inset-left: var(--modern-size-15);
456
467
  --sky-comp-card-small-header-space-inset-right: var(--modern-size-15);
457
468
  --sky-comp-card-small-header-space-inset-top: var(--modern-size-15);
469
+ --sky-comp-card-space-offset-bottom: var(--modern-size-10);
470
+ --sky-comp-card-space-offset-left: var(--modern-size-0);
471
+ --sky-comp-card-space-offset-right: var(--modern-size-10);
472
+ --sky-comp-card-space-offset-top: var(--modern-size-0);
458
473
  --sky-comp-colorpicker-content-space-inset-bottom: var(--modern-size-15);
459
474
  --sky-comp-colorpicker-content-space-inset-left: var(--modern-size-30);
460
475
  --sky-comp-colorpicker-content-space-inset-right: var(--modern-size-30);
@@ -491,6 +506,10 @@
491
506
  --sky-comp-flyout-header-space-inset-left: var(--modern-space-s);
492
507
  --sky-comp-flyout-header-space-inset-right: var(--modern-space-s);
493
508
  --sky-comp-flyout-header-space-inset-top: var(--modern-space-md);
509
+ --sky-comp-grid-cell-space-inset-bottom: var(--modern-space-md);
510
+ --sky-comp-grid-cell-space-inset-left: var(--modern-space-s);
511
+ --sky-comp-grid-cell-space-inset-right: var(--modern-space-s);
512
+ --sky-comp-grid-cell-space-inset-top: var(--modern-space-md);
494
513
  --sky-comp-help_inline-space-inset-bottom: var(--modern-size-1);
495
514
  --sky-comp-help_inline-space-inset-left: var(--modern-size-5);
496
515
  --sky-comp-help_inline-space-inset-right: var(--modern-size-5);
@@ -687,6 +706,14 @@
687
706
  --sky-comp-selection_box-expanded-space-inset-left: var(--modern-space-xl);
688
707
  --sky-comp-selection_box-expanded-space-inset-right: var(--modern-space-xl);
689
708
  --sky-comp-selection_box-expanded-space-inset-top: var(--modern-space-xl);
709
+ --sky-comp-split_view-drawer-space-inset-sm-bottom: var(--modern-size-0);
710
+ --sky-comp-split_view-drawer-space-inset-sm-left: var(--modern-size-0);
711
+ --sky-comp-split_view-drawer-space-inset-sm-right: var(--modern-size-0);
712
+ --sky-comp-split_view-drawer-space-inset-sm-top: var(--modern-size-0);
713
+ --sky-comp-split_view-drawer-space-inset-xs-bottom: var(--modern-size-0);
714
+ --sky-comp-split_view-drawer-space-inset-xs-left: var(--modern-size-0);
715
+ --sky-comp-split_view-drawer-space-inset-xs-right: var(--modern-size-0);
716
+ --sky-comp-split_view-drawer-space-inset-xs-top: var(--modern-size-0);
690
717
  --sky-comp-split_view-footer-space-inset-bottom: var(--modern-space-s);
691
718
  --sky-comp-split_view-footer-space-inset-left: var(--modern-space-s);
692
719
  --sky-comp-split_view-footer-space-inset-right: var(--modern-space-s);
@@ -837,29 +864,13 @@
837
864
  --sky-font-style-display-2: var(--modern-font-style-regular);
838
865
  --sky-font-style-display-3: var(--modern-font-style-regular);
839
866
  --sky-font-style-display-4: var(--modern-font-style-bold);
840
- --sky-font-style-emphasized: var(--modern-font-style-semibold);
867
+ --sky-font-style-emphasized: var(--modern-font-style-bold);
841
868
  --sky-font-style-heading-1: var(--modern-font-style-light);
842
869
  --sky-font-style-heading-2: var(--modern-font-style-regular);
843
870
  --sky-font-style-heading-3: var(--modern-font-style-regular);
844
871
  --sky-font-style-heading-4: var(--modern-font-style-semibold);
845
872
  --sky-font-style-heading-5: var(--modern-font-style-semibold);
846
873
  --sky-font-style-input-label: var(--modern-font-style-regular);
847
- --sky-font-weight-body-l: var(--modern-font-weight-light);
848
- --sky-font-weight-body-m: var(--modern-font-weight-regular);
849
- --sky-font-weight-body-s: var(--modern-font-weight-regular);
850
- --sky-font-weight-display-1: var(--modern-font-weight-regular);
851
- --sky-font-weight-display-2: var(--modern-font-weight-regular);
852
- --sky-font-weight-display-3: var(--modern-font-weight-regular);
853
- --sky-font-weight-display-4: var(--modern-font-weight-bold);
854
- --sky-font-weight-emphasized: var(--modern-font-weight-bold);
855
- --sky-font-weight-heading-1: var(--modern-font-weight-light);
856
- --sky-font-weight-heading-2: var(--modern-font-weight-regular);
857
- --sky-font-weight-heading-3: var(--modern-font-weight-regular);
858
- --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
859
- --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
860
- --sky-font-weight-hint-m: var(--modern-font-weight-regular);
861
- --sky-font-weight-hint-s: var(--modern-font-weight-regular);
862
- --sky-font-weight-input-label: var(--modern-font-weight-regular);
863
874
  --sky-size-avatar-l: var(--modern-size-100);
864
875
  --sky-size-avatar-m: var(--modern-size-65);
865
876
  --sky-size-avatar-s: var(--modern-size-32);
@@ -948,10 +959,6 @@
948
959
  --sky-space-inset-horizontal-top-m: var(--modern-size-0);
949
960
  --sky-space-inset-horizontal-top-s: var(--modern-size-0);
950
961
  --sky-space-inset-horizontal-top-xl: var(--modern-size-0);
951
- --sky-space-inset-letterbox-2_3-bottom-m: var(--modern-space-md);
952
- --sky-space-inset-letterbox-2_3-left-m: var(--modern-space-s);
953
- --sky-space-inset-letterbox-2_3-right-m: var(--modern-space-s);
954
- --sky-space-inset-letterbox-2_3-top-m: var(--modern-space-md);
955
962
  --sky-space-inset-thumb: var(--modern-size-1);
956
963
  --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
957
964
  --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "2.0.0-alpha.0",
3
+ "version": "2.0.0-alpha.10",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",