@blackbaud/skyux-design-tokens 3.1.1 → 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 +21 -0
  2. package/assets/assets.json +1 -1
  3. package/assets/scss/base.css +37 -18
  4. package/assets/scss/blackbaud.css +8 -2
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +37 -18
  7. package/bundles/blackbaud.css +8 -2
  8. package/bundles/modern.css +1 -1
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,27 @@
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
+
19
+ ## [3.2.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.1.1...3.2.0) (2025-10-20)
20
+
21
+
22
+ ### Features
23
+
24
+ * add body.xs font ([#294](https://github.com/blackbaud/skyux-design-tokens/issues/294)) ([2f555fc](https://github.com/blackbaud/skyux-design-tokens/commit/2f555fc76068ff9436d22d67d755f447d842ce28))
25
+
5
26
  ## [3.1.1](https://github.com/blackbaud/skyux-design-tokens/compare/3.1.0...3.1.1) (2025-10-15)
6
27
 
7
28
 
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.1.1/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;
@@ -147,6 +148,7 @@
147
148
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
148
149
  --bb-font-blkb_sans-name: BLKB Sans;
149
150
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
151
+ --bb-font-size-200: 0.6875rem;
150
152
  --bb-font-size-300: 0.8125rem;
151
153
  --bb-font-size-400: 0.9375rem;
152
154
  --bb-font-size-500: 1.0625rem;
@@ -165,13 +167,16 @@
165
167
  --bb-font-style-semibold: 600;
166
168
  --bb-font-style-semibold-italic-style: italic;
167
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
168
171
  --bb-font-weight-bold: 700;
169
172
  --bb-font-weight-light: 300;
170
173
  --bb-font-weight-regular: 400;
171
174
  --bb-font-weight-semibold: 600;
172
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/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');
173
176
  --bb-letter_spacing-normal: normal;
174
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
179
+ --bb-line_height-200: calc(16/11);
175
180
  --bb-line_height-300: calc(18/13);
176
181
  --bb-line_height-400: calc(20/15);
177
182
  --bb-line_height-500: calc(24/17);
@@ -289,6 +294,7 @@
289
294
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
290
295
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
291
296
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
297
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
292
298
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
293
299
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
294
300
  --sky-color-background-input-base: var(--bb-color-gray-900);
@@ -395,6 +401,7 @@
395
401
  --sky-color-icon-danger: var(--bb-color-red-400);
396
402
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
397
403
  --sky-color-icon-default: var(--bb-color-gray-25);
404
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
398
405
  --sky-color-icon-info: var(--bb-color-blue-600);
399
406
  --sky-color-icon-input-action: var(--bb-color-sky-600);
400
407
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
@@ -468,6 +475,7 @@
468
475
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
469
476
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
470
477
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
478
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
471
479
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
472
480
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
473
481
  --sky-color-background-input-base: var(--bb-color-white);
@@ -585,6 +593,7 @@
585
593
  --sky-color-icon-danger: var(--bb-color-red-600);
586
594
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
587
595
  --sky-color-icon-default: var(--bb-color-gray-900);
596
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
588
597
  --sky-color-icon-info: var(--bb-color-blue-600);
589
598
  --sky-color-icon-input-action: var(--bb-color-gray-600);
590
599
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -1163,15 +1172,18 @@
1163
1172
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1164
1173
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1165
1174
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1175
+ --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1166
1176
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
1167
1177
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
1168
1178
  --sky-font-line_height-body-l: var(--bb-line_height-500);
1169
1179
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1170
1180
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1181
+ --sky-font-line_height-body-xs: var(--bb-line_height-200);
1171
1182
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1172
1183
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1173
1184
  --sky-font-line_height-display-3: var(--bb-line_height-600);
1174
1185
  --sky-font-line_height-display-4: var(--bb-line_height-500);
1186
+ --sky-font-line_height-eyebrow: var(--bb-line_height-400);
1175
1187
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1176
1188
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1177
1189
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1184,10 +1196,12 @@
1184
1196
  --sky-font-size-body-l: var(--bb-font-size-500);
1185
1197
  --sky-font-size-body-m: var(--bb-font-size-400);
1186
1198
  --sky-font-size-body-s: var(--bb-font-size-300);
1199
+ --sky-font-size-body-xs: var(--bb-font-size-200);
1187
1200
  --sky-font-size-display-1: var(--bb-font-size-700);
1188
1201
  --sky-font-size-display-2: var(--bb-font-size-650);
1189
1202
  --sky-font-size-display-3: var(--bb-font-size-600);
1190
1203
  --sky-font-size-display-4: var(--bb-font-size-500);
1204
+ --sky-font-size-eyebrow: var(--bb-font-size-400);
1191
1205
  --sky-font-size-heading-1: var(--bb-font-size-800);
1192
1206
  --sky-font-size-heading-2: var(--bb-font-size-600);
1193
1207
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1200,17 +1214,20 @@
1200
1214
  --sky-font-style-body-l: var(--bb-font-style-regular);
1201
1215
  --sky-font-style-body-m: var(--bb-font-style-regular);
1202
1216
  --sky-font-style-body-s: var(--bb-font-style-regular);
1217
+ --sky-font-style-body-xs: var(--bb-font-style-regular);
1203
1218
  --sky-font-style-display-1: var(--bb-font-style-semibold);
1204
1219
  --sky-font-style-display-2: var(--bb-font-style-semibold);
1205
1220
  --sky-font-style-display-3: var(--bb-font-style-semibold);
1206
1221
  --sky-font-style-display-4: var(--bb-font-style-semibold);
1207
1222
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1223
+ --sky-font-style-eyebrow: var(--bb-font-style-semibold);
1208
1224
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1209
1225
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1210
1226
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1211
1227
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1212
1228
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1213
1229
  --sky-font-style-input-label: var(--bb-font-style-regular);
1230
+ --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1214
1231
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1215
1232
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1216
1233
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1331,23 +1348,25 @@
1331
1348
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1332
1349
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1333
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)';
1334
1363
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1335
1364
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1336
1365
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1337
- --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);
1338
- --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);
1339
- --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);
1340
- --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);
1341
- --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);
1342
- --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);
1343
- --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);
1344
- --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);
1345
- --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);
1346
- --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);
1347
- --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);
1348
- --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);
1349
- --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);
1350
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
1351
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1352
- --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)';
1353
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;
@@ -147,6 +148,7 @@
147
148
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
148
149
  --bb-font-blkb_sans-name: BLKB Sans;
149
150
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
151
+ --bb-font-size-200: 0.6875rem;
150
152
  --bb-font-size-300: 0.8125rem;
151
153
  --bb-font-size-400: 0.9375rem;
152
154
  --bb-font-size-500: 1.0625rem;
@@ -165,13 +167,16 @@
165
167
  --bb-font-style-semibold: 600;
166
168
  --bb-font-style-semibold-italic-style: italic;
167
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
168
171
  --bb-font-weight-bold: 700;
169
172
  --bb-font-weight-light: 300;
170
173
  --bb-font-weight-regular: 400;
171
174
  --bb-font-weight-semibold: 600;
172
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/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');
173
176
  --bb-letter_spacing-normal: normal;
174
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
179
+ --bb-line_height-200: calc(16/11);
175
180
  --bb-line_height-300: calc(18/13);
176
181
  --bb-line_height-400: calc(20/15);
177
182
  --bb-line_height-500: calc(24/17);
@@ -363,6 +368,7 @@
363
368
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
364
369
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
365
370
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
371
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
366
372
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
367
373
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
368
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.1.1/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;
@@ -147,6 +148,7 @@
147
148
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
148
149
  --bb-font-blkb_sans-name: BLKB Sans;
149
150
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
151
+ --bb-font-size-200: 0.6875rem;
150
152
  --bb-font-size-300: 0.8125rem;
151
153
  --bb-font-size-400: 0.9375rem;
152
154
  --bb-font-size-500: 1.0625rem;
@@ -165,13 +167,16 @@
165
167
  --bb-font-style-semibold: 600;
166
168
  --bb-font-style-semibold-italic-style: italic;
167
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
168
171
  --bb-font-weight-bold: 700;
169
172
  --bb-font-weight-light: 300;
170
173
  --bb-font-weight-regular: 400;
171
174
  --bb-font-weight-semibold: 600;
172
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/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');
173
176
  --bb-letter_spacing-normal: normal;
174
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
179
+ --bb-line_height-200: calc(16/11);
175
180
  --bb-line_height-300: calc(18/13);
176
181
  --bb-line_height-400: calc(20/15);
177
182
  --bb-line_height-500: calc(24/17);
@@ -289,6 +294,7 @@
289
294
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
290
295
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
291
296
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
297
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
292
298
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
293
299
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
294
300
  --sky-color-background-input-base: var(--bb-color-gray-900);
@@ -395,6 +401,7 @@
395
401
  --sky-color-icon-danger: var(--bb-color-red-400);
396
402
  --sky-color-icon-deemphasized: var(--bb-color-gray-300);
397
403
  --sky-color-icon-default: var(--bb-color-gray-25);
404
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
398
405
  --sky-color-icon-info: var(--bb-color-blue-600);
399
406
  --sky-color-icon-input-action: var(--bb-color-sky-600);
400
407
  --sky-color-icon-inverse: var(--bb-color-gray-1100);
@@ -468,6 +475,7 @@
468
475
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
469
476
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
470
477
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
478
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
471
479
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
472
480
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
473
481
  --sky-color-background-input-base: var(--bb-color-white);
@@ -585,6 +593,7 @@
585
593
  --sky-color-icon-danger: var(--bb-color-red-600);
586
594
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
587
595
  --sky-color-icon-default: var(--bb-color-gray-900);
596
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
588
597
  --sky-color-icon-info: var(--bb-color-blue-600);
589
598
  --sky-color-icon-input-action: var(--bb-color-gray-600);
590
599
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -1163,15 +1172,18 @@
1163
1172
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1164
1173
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1165
1174
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1175
+ --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1166
1176
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
1167
1177
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
1168
1178
  --sky-font-line_height-body-l: var(--bb-line_height-500);
1169
1179
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1170
1180
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1181
+ --sky-font-line_height-body-xs: var(--bb-line_height-200);
1171
1182
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1172
1183
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1173
1184
  --sky-font-line_height-display-3: var(--bb-line_height-600);
1174
1185
  --sky-font-line_height-display-4: var(--bb-line_height-500);
1186
+ --sky-font-line_height-eyebrow: var(--bb-line_height-400);
1175
1187
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1176
1188
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1177
1189
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1184,10 +1196,12 @@
1184
1196
  --sky-font-size-body-l: var(--bb-font-size-500);
1185
1197
  --sky-font-size-body-m: var(--bb-font-size-400);
1186
1198
  --sky-font-size-body-s: var(--bb-font-size-300);
1199
+ --sky-font-size-body-xs: var(--bb-font-size-200);
1187
1200
  --sky-font-size-display-1: var(--bb-font-size-700);
1188
1201
  --sky-font-size-display-2: var(--bb-font-size-650);
1189
1202
  --sky-font-size-display-3: var(--bb-font-size-600);
1190
1203
  --sky-font-size-display-4: var(--bb-font-size-500);
1204
+ --sky-font-size-eyebrow: var(--bb-font-size-400);
1191
1205
  --sky-font-size-heading-1: var(--bb-font-size-800);
1192
1206
  --sky-font-size-heading-2: var(--bb-font-size-600);
1193
1207
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1200,17 +1214,20 @@
1200
1214
  --sky-font-style-body-l: var(--bb-font-style-regular);
1201
1215
  --sky-font-style-body-m: var(--bb-font-style-regular);
1202
1216
  --sky-font-style-body-s: var(--bb-font-style-regular);
1217
+ --sky-font-style-body-xs: var(--bb-font-style-regular);
1203
1218
  --sky-font-style-display-1: var(--bb-font-style-semibold);
1204
1219
  --sky-font-style-display-2: var(--bb-font-style-semibold);
1205
1220
  --sky-font-style-display-3: var(--bb-font-style-semibold);
1206
1221
  --sky-font-style-display-4: var(--bb-font-style-semibold);
1207
1222
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1223
+ --sky-font-style-eyebrow: var(--bb-font-style-semibold);
1208
1224
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1209
1225
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1210
1226
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1211
1227
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1212
1228
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1213
1229
  --sky-font-style-input-label: var(--bb-font-style-regular);
1230
+ --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1214
1231
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1215
1232
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1216
1233
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1331,23 +1348,25 @@
1331
1348
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1332
1349
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1333
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)';
1334
1363
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1335
1364
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1336
1365
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1337
- --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);
1338
- --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);
1339
- --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);
1340
- --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);
1341
- --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);
1342
- --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);
1343
- --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);
1344
- --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);
1345
- --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);
1346
- --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);
1347
- --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);
1348
- --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);
1349
- --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);
1350
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
1351
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1352
- --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)';
1353
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;
@@ -147,6 +148,7 @@
147
148
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
148
149
  --bb-font-blkb_sans-name: BLKB Sans;
149
150
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
151
+ --bb-font-size-200: 0.6875rem;
150
152
  --bb-font-size-300: 0.8125rem;
151
153
  --bb-font-size-400: 0.9375rem;
152
154
  --bb-font-size-500: 1.0625rem;
@@ -165,13 +167,16 @@
165
167
  --bb-font-style-semibold: 600;
166
168
  --bb-font-style-semibold-italic-style: italic;
167
169
  --bb-font-style-semibold-italic-weight: 600;
170
+ --bb-font-text_transform-uppercase: uppercase;
168
171
  --bb-font-weight-bold: 700;
169
172
  --bb-font-weight-light: 300;
170
173
  --bb-font-weight-regular: 400;
171
174
  --bb-font-weight-semibold: 600;
172
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.1/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');
173
176
  --bb-letter_spacing-normal: normal;
174
- --bb-letter_spacing-wider: 0.16px;
177
+ --bb-letter_spacing-wider: 0.01rem;
178
+ --bb-letter_spacing-widest: 0.046875rem;
179
+ --bb-line_height-200: calc(16/11);
175
180
  --bb-line_height-300: calc(18/13);
176
181
  --bb-line_height-400: calc(20/15);
177
182
  --bb-line_height-500: calc(24/17);
@@ -363,6 +368,7 @@
363
368
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
364
369
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
365
370
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
371
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
366
372
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
367
373
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
368
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.1.1/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.1.1",
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",