@blackbaud/skyux-design-tokens 3.2.0 → 3.3.0

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 (9) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +32 -19
  4. package/assets/scss/blackbaud.css +6 -2
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +32 -19
  7. package/bundles/blackbaud.css +6 -2
  8. package/bundles/modern.css +1 -1
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [3.3.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.2.0...3.3.0) (2025-12-02)
6
+
7
+
8
+ ### Features
9
+
10
+ * add color.background.icon_matte.info to light and dark ([#299](https://github.com/blackbaud/skyux-design-tokens/issues/299)) ([c1edcd8](https://github.com/blackbaud/skyux-design-tokens/commit/c1edcd8634c74876044be16cd3fc6aad9acc3ca3))
11
+ * colors and font styles for eyebrows ([#300](https://github.com/blackbaud/skyux-design-tokens/issues/300)) ([d953471](https://github.com/blackbaud/skyux-design-tokens/commit/d9534719d9a2ded88d07b4918dae0329708e7635))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * update tokens for Figma export ([#296](https://github.com/blackbaud/skyux-design-tokens/issues/296)) ([20e5f02](https://github.com/blackbaud/skyux-design-tokens/commit/20e5f0216c8280661c02fab5d5075d5dcf66f4a4))
17
+ * update type composite tokens for Figma export ([#298](https://github.com/blackbaud/skyux-design-tokens/issues/298)) ([88f56c1](https://github.com/blackbaud/skyux-design-tokens/commit/88f56c1a7676782987939518d3ec6fd8328ce0ab))
18
+
5
19
  ## [3.2.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.1.1...3.2.0) (2025-10-20)
6
20
 
7
21
 
package/assets/assets.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "fonts": [],
3
3
  "images": {
4
4
  "favicon": {
5
- "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --bb-color-blue-700: #2256aa;
30
30
  --bb-color-blue-800: #1a4080;
31
31
  --bb-color-blue-900: #112b55;
32
+ --bb-color-brand-impact_green: #0cd973;
32
33
  --bb-color-brand-trusted_blue: #004054;
33
34
  --bb-color-gray-100: #d3d5d6;
34
35
  --bb-color-gray-1000: #1e2229;
@@ -166,13 +167,15 @@
166
167
  --bb-font-style-semibold: 600;
167
168
  --bb-font-style-semibold-italic-style: italic;
168
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
169
171
  --bb-font-weight-bold: 700;
170
172
  --bb-font-weight-light: 300;
171
173
  --bb-font-weight-regular: 400;
172
174
  --bb-font-weight-semibold: 600;
173
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
175
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png');
174
176
  --bb-letter_spacing-normal: normal;
175
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
176
179
  --bb-line_height-200: calc(16/11);
177
180
  --bb-line_height-300: calc(18/13);
178
181
  --bb-line_height-400: calc(20/15);
@@ -291,6 +294,7 @@
291
294
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
292
295
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
293
296
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
297
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
294
298
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
295
299
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
296
300
  --sky-color-background-input-base: var(--bb-color-gray-900);
@@ -397,6 +401,7 @@
397
401
  --sky-color-icon-danger: var(--bb-color-red-400);
398
402
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
399
403
  --sky-color-icon-default: var(--bb-color-gray-25);
404
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
400
405
  --sky-color-icon-info: var(--bb-color-blue-600);
401
406
  --sky-color-icon-input-action: var(--bb-color-sky-600);
402
407
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
@@ -470,6 +475,7 @@
470
475
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
471
476
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
472
477
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
478
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
473
479
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
474
480
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
475
481
  --sky-color-background-input-base: var(--bb-color-white);
@@ -587,6 +593,7 @@
587
593
  --sky-color-icon-danger: var(--bb-color-red-600);
588
594
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
589
595
  --sky-color-icon-default: var(--bb-color-gray-900);
596
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
590
597
  --sky-color-icon-info: var(--bb-color-blue-600);
591
598
  --sky-color-icon-input-action: var(--bb-color-gray-600);
592
599
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -1165,6 +1172,7 @@
1165
1172
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1166
1173
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1167
1174
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1175
+ --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1168
1176
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
1169
1177
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
1170
1178
  --sky-font-line_height-body-l: var(--bb-line_height-500);
@@ -1175,6 +1183,7 @@
1175
1183
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1176
1184
  --sky-font-line_height-display-3: var(--bb-line_height-600);
1177
1185
  --sky-font-line_height-display-4: var(--bb-line_height-500);
1186
+ --sky-font-line_height-eyebrow: var(--bb-line_height-400);
1178
1187
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1179
1188
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1180
1189
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1192,6 +1201,7 @@
1192
1201
  --sky-font-size-display-2: var(--bb-font-size-650);
1193
1202
  --sky-font-size-display-3: var(--bb-font-size-600);
1194
1203
  --sky-font-size-display-4: var(--bb-font-size-500);
1204
+ --sky-font-size-eyebrow: var(--bb-font-size-400);
1195
1205
  --sky-font-size-heading-1: var(--bb-font-size-800);
1196
1206
  --sky-font-size-heading-2: var(--bb-font-size-600);
1197
1207
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1210,12 +1220,14 @@
1210
1220
  --sky-font-style-display-3: var(--bb-font-style-semibold);
1211
1221
  --sky-font-style-display-4: var(--bb-font-style-semibold);
1212
1222
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1223
+ --sky-font-style-eyebrow: var(--bb-font-style-semibold);
1213
1224
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1214
1225
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1215
1226
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1216
1227
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1217
1228
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1218
1229
  --sky-font-style-input-label: var(--bb-font-style-regular);
1230
+ --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1219
1231
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1220
1232
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1221
1233
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1336,24 +1348,25 @@
1336
1348
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1337
1349
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1338
1350
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
1351
+ --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/32 'var(--bb-font-blkb_sans-name)';
1352
+ --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/28 'var(--bb-font-blkb_sans-name)';
1353
+ --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/28 'var(--bb-font-blkb_sans-name)';
1354
+ --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/24 'var(--bb-font-blkb_sans-name)';
1355
+ --sky-type-eyebrow: var(--sky-font-style-eyebrow) var(--sky-font-size-eyebrow)/20 'var(--bb-font-blkb_sans-name)';
1356
+ --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/28 'var(--bb-font-blkb_sans-name)';
1357
+ --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/24 'var(--bb-font-blkb_sans-name)';
1358
+ --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/20 'var(--bb-font-blkb_sans-name)';
1359
+ --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/20 'var(--bb-font-blkb_sans-name)';
1360
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/20 'var(--bb-font-blkb_sans-name)';
1361
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/18 'var(--bb-font-blkb_sans-name)';
1362
+ --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/18 'var(--bb-font-blkb_sans-name)';
1339
1363
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1340
1364
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1341
1365
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1342
- --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/var(--sky-font-line_height-body-l) var(--sky-font-family-primary);
1343
- --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/var(--sky-font-line_height-body-m) var(--sky-font-family-primary);
1344
- --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/var(--sky-font-line_height-body-s) var(--sky-font-family-primary);
1345
- --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/var(--sky-font-line_height-body-xs) var(--sky-font-family-primary);
1346
- --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/var(--sky-font-line_height-heading-1) var(--sky-font-family-primary);
1347
- --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/var(--sky-font-line_height-input-val) var(--sky-font-family-primary);
1348
- --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/var(--sky-font-line_height-display-1) var(--sky-font-family-primary);
1349
- --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/var(--sky-font-line_height-display-2) var(--sky-font-family-primary);
1350
- --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/var(--sky-font-line_height-display-3) var(--sky-font-family-primary);
1351
- --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/var(--sky-font-line_height-display-4) var(--sky-font-family-primary);
1352
- --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/var(--sky-font-line_height-heading-2) var(--sky-font-family-primary);
1353
- --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/var(--sky-font-line_height-heading-3) var(--sky-font-family-primary);
1354
- --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/var(--sky-font-line_height-heading-4) var(--sky-font-family-primary);
1355
- --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/var(--sky-font-line_height-heading-5) var(--sky-font-family-primary);
1356
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
1357
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1358
- --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--sky-font-family-primary);
1366
+ --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/24 'var(--bb-font-blkb_sans-name)';
1367
+ --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/20 'var(--bb-font-blkb_sans-name)';
1368
+ --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/18 'var(--bb-font-blkb_sans-name)';
1369
+ --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/16 'var(--bb-font-blkb_sans-name)';
1370
+ --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 'var(--bb-font-blkb_sans-name)';
1371
+ --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1359
1372
  }
package/assets/scss/blackbaud.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --bb-color-blue-700: #2256aa;
30
30
  --bb-color-blue-800: #1a4080;
31
31
  --bb-color-blue-900: #112b55;
32
+ --bb-color-brand-impact_green: #0cd973;
32
33
  --bb-color-brand-trusted_blue: #004054;
33
34
  --bb-color-gray-100: #d3d5d6;
34
35
  --bb-color-gray-1000: #1e2229;
@@ -166,13 +167,15 @@
166
167
  --bb-font-style-semibold: 600;
167
168
  --bb-font-style-semibold-italic-style: italic;
168
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
169
171
  --bb-font-weight-bold: 700;
170
172
  --bb-font-weight-light: 300;
171
173
  --bb-font-weight-regular: 400;
172
174
  --bb-font-weight-semibold: 600;
173
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
175
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png');
174
176
  --bb-letter_spacing-normal: normal;
175
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
176
179
  --bb-line_height-200: calc(16/11);
177
180
  --bb-line_height-300: calc(18/13);
178
181
  --bb-line_height-400: calc(20/15);
@@ -365,6 +368,7 @@
365
368
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
366
369
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
367
370
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
371
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
368
372
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
369
373
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
370
374
  --sky-color-background-input-base: var(--bb-color-gray-900);
package/assets/scss/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;
package/bundles/base.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --bb-color-blue-700: #2256aa;
30
30
  --bb-color-blue-800: #1a4080;
31
31
  --bb-color-blue-900: #112b55;
32
+ --bb-color-brand-impact_green: #0cd973;
32
33
  --bb-color-brand-trusted_blue: #004054;
33
34
  --bb-color-gray-100: #d3d5d6;
34
35
  --bb-color-gray-1000: #1e2229;
@@ -166,13 +167,15 @@
166
167
  --bb-font-style-semibold: 600;
167
168
  --bb-font-style-semibold-italic-style: italic;
168
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
169
171
  --bb-font-weight-bold: 700;
170
172
  --bb-font-weight-light: 300;
171
173
  --bb-font-weight-regular: 400;
172
174
  --bb-font-weight-semibold: 600;
173
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
175
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png');
174
176
  --bb-letter_spacing-normal: normal;
175
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
176
179
  --bb-line_height-200: calc(16/11);
177
180
  --bb-line_height-300: calc(18/13);
178
181
  --bb-line_height-400: calc(20/15);
@@ -291,6 +294,7 @@
291
294
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
292
295
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
293
296
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
297
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
294
298
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
295
299
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
296
300
  --sky-color-background-input-base: var(--bb-color-gray-900);
@@ -397,6 +401,7 @@
397
401
  --sky-color-icon-danger: var(--bb-color-red-400);
398
402
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
399
403
  --sky-color-icon-default: var(--bb-color-gray-25);
404
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
400
405
  --sky-color-icon-info: var(--bb-color-blue-600);
401
406
  --sky-color-icon-input-action: var(--bb-color-sky-600);
402
407
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
@@ -470,6 +475,7 @@
470
475
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
471
476
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
472
477
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
478
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
473
479
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
474
480
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
475
481
  --sky-color-background-input-base: var(--bb-color-white);
@@ -587,6 +593,7 @@
587
593
  --sky-color-icon-danger: var(--bb-color-red-600);
588
594
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
589
595
  --sky-color-icon-default: var(--bb-color-gray-900);
596
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
590
597
  --sky-color-icon-info: var(--bb-color-blue-600);
591
598
  --sky-color-icon-input-action: var(--bb-color-gray-600);
592
599
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -1165,6 +1172,7 @@
1165
1172
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1166
1173
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1167
1174
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1175
+ --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1168
1176
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
1169
1177
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
1170
1178
  --sky-font-line_height-body-l: var(--bb-line_height-500);
@@ -1175,6 +1183,7 @@
1175
1183
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1176
1184
  --sky-font-line_height-display-3: var(--bb-line_height-600);
1177
1185
  --sky-font-line_height-display-4: var(--bb-line_height-500);
1186
+ --sky-font-line_height-eyebrow: var(--bb-line_height-400);
1178
1187
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1179
1188
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1180
1189
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1192,6 +1201,7 @@
1192
1201
  --sky-font-size-display-2: var(--bb-font-size-650);
1193
1202
  --sky-font-size-display-3: var(--bb-font-size-600);
1194
1203
  --sky-font-size-display-4: var(--bb-font-size-500);
1204
+ --sky-font-size-eyebrow: var(--bb-font-size-400);
1195
1205
  --sky-font-size-heading-1: var(--bb-font-size-800);
1196
1206
  --sky-font-size-heading-2: var(--bb-font-size-600);
1197
1207
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1210,12 +1220,14 @@
1210
1220
  --sky-font-style-display-3: var(--bb-font-style-semibold);
1211
1221
  --sky-font-style-display-4: var(--bb-font-style-semibold);
1212
1222
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1223
+ --sky-font-style-eyebrow: var(--bb-font-style-semibold);
1213
1224
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1214
1225
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1215
1226
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1216
1227
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1217
1228
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1218
1229
  --sky-font-style-input-label: var(--bb-font-style-regular);
1230
+ --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1219
1231
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1220
1232
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1221
1233
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1336,24 +1348,25 @@
1336
1348
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1337
1349
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1338
1350
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
1351
+ --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/32 'var(--bb-font-blkb_sans-name)';
1352
+ --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/28 'var(--bb-font-blkb_sans-name)';
1353
+ --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/28 'var(--bb-font-blkb_sans-name)';
1354
+ --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/24 'var(--bb-font-blkb_sans-name)';
1355
+ --sky-type-eyebrow: var(--sky-font-style-eyebrow) var(--sky-font-size-eyebrow)/20 'var(--bb-font-blkb_sans-name)';
1356
+ --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/28 'var(--bb-font-blkb_sans-name)';
1357
+ --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/24 'var(--bb-font-blkb_sans-name)';
1358
+ --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/20 'var(--bb-font-blkb_sans-name)';
1359
+ --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/20 'var(--bb-font-blkb_sans-name)';
1360
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/20 'var(--bb-font-blkb_sans-name)';
1361
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/18 'var(--bb-font-blkb_sans-name)';
1362
+ --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/18 'var(--bb-font-blkb_sans-name)';
1339
1363
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1340
1364
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1341
1365
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1342
- --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/var(--sky-font-line_height-body-l) var(--sky-font-family-primary);
1343
- --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/var(--sky-font-line_height-body-m) var(--sky-font-family-primary);
1344
- --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/var(--sky-font-line_height-body-s) var(--sky-font-family-primary);
1345
- --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/var(--sky-font-line_height-body-xs) var(--sky-font-family-primary);
1346
- --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/var(--sky-font-line_height-heading-1) var(--sky-font-family-primary);
1347
- --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/var(--sky-font-line_height-input-val) var(--sky-font-family-primary);
1348
- --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/var(--sky-font-line_height-display-1) var(--sky-font-family-primary);
1349
- --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/var(--sky-font-line_height-display-2) var(--sky-font-family-primary);
1350
- --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/var(--sky-font-line_height-display-3) var(--sky-font-family-primary);
1351
- --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/var(--sky-font-line_height-display-4) var(--sky-font-family-primary);
1352
- --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/var(--sky-font-line_height-heading-2) var(--sky-font-family-primary);
1353
- --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/var(--sky-font-line_height-heading-3) var(--sky-font-family-primary);
1354
- --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/var(--sky-font-line_height-heading-4) var(--sky-font-family-primary);
1355
- --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/var(--sky-font-line_height-heading-5) var(--sky-font-family-primary);
1356
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
1357
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1358
- --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/var(--sky-font-line_height-input-label) var(--sky-font-family-primary);
1366
+ --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/24 'var(--bb-font-blkb_sans-name)';
1367
+ --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/20 'var(--bb-font-blkb_sans-name)';
1368
+ --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/18 'var(--bb-font-blkb_sans-name)';
1369
+ --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/16 'var(--bb-font-blkb_sans-name)';
1370
+ --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 'var(--bb-font-blkb_sans-name)';
1371
+ --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 'var(--bb-font-blkb_sans-name)';
1359
1372
  }
package/bundles/blackbaud.css CHANGED
@@ -29,6 +29,7 @@
29
29
  --bb-color-blue-700: #2256aa;
30
30
  --bb-color-blue-800: #1a4080;
31
31
  --bb-color-blue-900: #112b55;
32
+ --bb-color-brand-impact_green: #0cd973;
32
33
  --bb-color-brand-trusted_blue: #004054;
33
34
  --bb-color-gray-100: #d3d5d6;
34
35
  --bb-color-gray-1000: #1e2229;
@@ -166,13 +167,15 @@
166
167
  --bb-font-style-semibold: 600;
167
168
  --bb-font-style-semibold-italic-style: italic;
168
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
169
171
  --bb-font-weight-bold: 700;
170
172
  --bb-font-weight-light: 300;
171
173
  --bb-font-weight-regular: 400;
172
174
  --bb-font-weight-semibold: 600;
173
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
175
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png');
174
176
  --bb-letter_spacing-normal: normal;
175
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
176
179
  --bb-line_height-200: calc(16/11);
177
180
  --bb-line_height-300: calc(18/13);
178
181
  --bb-line_height-400: calc(20/15);
@@ -365,6 +368,7 @@
365
368
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
366
369
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
367
370
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
371
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
368
372
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
369
373
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
370
374
  --sky-color-background-input-base: var(--bb-color-gray-900);
package/bundles/modern.css CHANGED
@@ -77,7 +77,7 @@
77
77
  --modern-font-weight-light: 300;
78
78
  --modern-font-weight-regular: 400;
79
79
  --modern-font-weight-semibold: 600;
80
- --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png');
81
81
  --modern-letter_spacing-normal: normal;
82
82
  --modern-line_height-110: 1.1;
83
83
  --modern-line_height-115: 1.15;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "3.2.0",
3
+ "version": "3.3.0",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",