@skyux/theme 13.9.0 → 13.10.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 (2) hide show
  1. package/css/themes/modern/styles.css +46 -21
  2. package/package.json +2 -2
package/css/themes/modern/styles.css CHANGED
@@ -28,6 +28,7 @@
28
28
  --bb-color-blue-700: #2256aa;
29
29
  --bb-color-blue-800: #1a4080;
30
30
  --bb-color-blue-900: #112b55;
31
+ --bb-color-brand-impact_green: #0cd973;
31
32
  --bb-color-brand-trusted_blue: #004054;
32
33
  --bb-color-gray-100: #d3d5d6;
33
34
  --bb-color-gray-1000: #1e2229;
@@ -165,13 +166,15 @@
165
166
  --bb-font-style-semibold: 600;
166
167
  --bb-font-style-semibold-italic-style: italic;
167
168
  --bb-font-style-semibold-italic-weight: 600;
169
+ --bb-font-text_transform-uppercase: uppercase;
168
170
  --bb-font-weight-bold: 700;
169
171
  --bb-font-weight-light: 300;
170
172
  --bb-font-weight-regular: 400;
171
173
  --bb-font-weight-semibold: 600;
172
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png");
174
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png");
173
175
  --bb-letter_spacing-normal: normal;
174
- --bb-letter_spacing-wider: 0.16px;
176
+ --bb-letter_spacing-wider: 0.01rem;
177
+ --bb-letter_spacing-widest: 0.046875rem;
175
178
  --bb-line_height-200: calc(16/11);
176
179
  --bb-line_height-300: calc(18/13);
177
180
  --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);
@@ -471,6 +476,7 @@
471
476
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
472
477
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-100);
473
478
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
479
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
474
480
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
475
481
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
476
482
  --sky-color-background-input-base: var(--bb-color-white);
@@ -588,6 +594,7 @@
588
594
  --sky-color-icon-danger: var(--bb-color-red-600);
589
595
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
590
596
  --sky-color-icon-default: var(--bb-color-gray-900);
597
+ --sky-color-icon-eyebrow: var(--bb-color-brand-impact_green);
591
598
  --sky-color-icon-info: var(--bb-color-blue-600);
592
599
  --sky-color-icon-input-action: var(--bb-color-gray-600);
593
600
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -1167,6 +1174,7 @@
1167
1174
  --sky-comp-wizard-tabset-tabs-space-inset-right: var(--bb-size-fluid-150);
1168
1175
  --sky-comp-wizard-tabset-tabs-space-inset-top: var(--bb-size-0);
1169
1176
  --sky-font-family-monospaced: var(--bb-font-monospaced-family);
1177
+ --sky-font-letter_spacing-eyebrow: var(--bb-letter_spacing-widest);
1170
1178
  --sky-font-letter_spacing-hint-s: var(--bb-letter_spacing-wider);
1171
1179
  --sky-font-letter_spacing-input-label: var(--bb-letter_spacing-wider);
1172
1180
  --sky-font-line_height-body-l: var(--bb-line_height-500);
@@ -1177,6 +1185,7 @@
1177
1185
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1178
1186
  --sky-font-line_height-display-3: var(--bb-line_height-600);
1179
1187
  --sky-font-line_height-display-4: var(--bb-line_height-500);
1188
+ --sky-font-line_height-eyebrow: var(--bb-line_height-400);
1180
1189
  --sky-font-line_height-heading-1: var(--bb-line_height-800);
1181
1190
  --sky-font-line_height-heading-2: var(--bb-line_height-600);
1182
1191
  --sky-font-line_height-heading-3: var(--bb-line_height-500);
@@ -1194,6 +1203,7 @@
1194
1203
  --sky-font-size-display-2: var(--bb-font-size-650);
1195
1204
  --sky-font-size-display-3: var(--bb-font-size-600);
1196
1205
  --sky-font-size-display-4: var(--bb-font-size-500);
1206
+ --sky-font-size-eyebrow: var(--bb-font-size-400);
1197
1207
  --sky-font-size-heading-1: var(--bb-font-size-800);
1198
1208
  --sky-font-size-heading-2: var(--bb-font-size-600);
1199
1209
  --sky-font-size-heading-3: var(--bb-font-size-500);
@@ -1212,12 +1222,14 @@
1212
1222
  --sky-font-style-display-3: var(--bb-font-style-semibold);
1213
1223
  --sky-font-style-display-4: var(--bb-font-style-semibold);
1214
1224
  --sky-font-style-emphasized: var(--bb-font-style-semibold);
1225
+ --sky-font-style-eyebrow: var(--bb-font-style-semibold);
1215
1226
  --sky-font-style-heading-1: var(--bb-font-style-regular);
1216
1227
  --sky-font-style-heading-2: var(--bb-font-style-semibold);
1217
1228
  --sky-font-style-heading-3: var(--bb-font-style-semibold);
1218
1229
  --sky-font-style-heading-4: var(--bb-font-style-semibold);
1219
1230
  --sky-font-style-heading-5: var(--bb-font-style-semibold);
1220
1231
  --sky-font-style-input-label: var(--bb-font-style-regular);
1232
+ --sky-font-text_transform-eyebrow: var(--bb-font-text_transform-uppercase);
1221
1233
  --sky-size-avatar-l: var(--bb-size-fluid-550);
1222
1234
  --sky-size-avatar-m: var(--bb-size-fluid-350);
1223
1235
  --sky-size-avatar-s: var(--bb-size-fluid-200);
@@ -1338,26 +1350,27 @@
1338
1350
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
1339
1351
  --sky-space-stacked-xs: var(--bb-size-fluid-25);
1340
1352
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
1353
+ --sky-type-display-1: var(--sky-font-style-display-1) var(--sky-font-size-display-1)/32 "var(--bb-font-blkb_sans-name)";
1354
+ --sky-type-display-2: var(--sky-font-style-display-2) var(--sky-font-size-display-2)/28 "var(--bb-font-blkb_sans-name)";
1355
+ --sky-type-display-3: var(--sky-font-style-display-3) var(--sky-font-size-display-3)/28 "var(--bb-font-blkb_sans-name)";
1356
+ --sky-type-display-4: var(--sky-font-style-display-4) var(--sky-font-size-display-4)/24 "var(--bb-font-blkb_sans-name)";
1357
+ --sky-type-eyebrow: var(--sky-font-style-eyebrow) var(--sky-font-size-eyebrow)/20 "var(--bb-font-blkb_sans-name)";
1358
+ --sky-type-heading-2: var(--sky-font-style-heading-2) var(--sky-font-size-heading-2)/28 "var(--bb-font-blkb_sans-name)";
1359
+ --sky-type-heading-3: var(--sky-font-style-heading-3) var(--sky-font-size-heading-3)/24 "var(--bb-font-blkb_sans-name)";
1360
+ --sky-type-heading-4: var(--sky-font-style-heading-4) var(--sky-font-size-heading-4)/20 "var(--bb-font-blkb_sans-name)";
1361
+ --sky-type-heading-5: var(--sky-font-style-heading-5) var(--sky-font-size-heading-5)/20 "var(--bb-font-blkb_sans-name)";
1362
+ --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/20 "var(--bb-font-blkb_sans-name)";
1363
+ --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/18 "var(--bb-font-blkb_sans-name)";
1364
+ --sky-type-input-label: var(--sky-font-style-input-label) var(--sky-font-size-input-label)/18 "var(--bb-font-blkb_sans-name)";
1341
1365
  --sky-comp-checkbox-border-radius: var(--sky-border-radius-s);
1342
1366
  --sky-font-family-primary: var(--bb-font-blkb_sans-family);
1343
1367
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
1344
- --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);
1345
- --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);
1346
- --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);
1347
- --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);
1348
- --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);
1349
- --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);
1350
- --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);
1351
- --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);
1352
- --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);
1353
- --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);
1354
- --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);
1355
- --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);
1356
- --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);
1357
- --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);
1358
- --sky-type-hint-m: italic 400 var(--sky-font-size-hint-m)/var(--sky-font-line_height-hint-m) var(--sky-font-family-primary);
1359
- --sky-type-hint-s: italic 400 var(--sky-font-size-hint-s)/var(--sky-font-line_height-hint-s) var(--sky-font-family-primary);
1360
- --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);
1368
+ --sky-type-body-l: var(--sky-font-style-body-l) var(--sky-font-size-body-l)/24 "var(--bb-font-blkb_sans-name)";
1369
+ --sky-type-body-m: var(--sky-font-style-body-m) var(--sky-font-size-body-m)/20 "var(--bb-font-blkb_sans-name)";
1370
+ --sky-type-body-s: var(--sky-font-style-body-s) var(--sky-font-size-body-s)/18 "var(--bb-font-blkb_sans-name)";
1371
+ --sky-type-body-xs: var(--sky-font-style-body-xs) var(--sky-font-size-body-xs)/16 "var(--bb-font-blkb_sans-name)";
1372
+ --sky-type-heading-1: var(--sky-font-style-heading-1) var(--sky-font-size-heading-1)/36 "var(--bb-font-blkb_sans-name)";
1373
+ --sky-type-input-val: var(--sky-font-style-body-s) var(--sky-font-size-input-val)/20 "var(--bb-font-blkb_sans-name)";
1361
1374
  }
1362
1375
 
1363
1376
  @property --bb-image-logo-primary-src {
@@ -1390,6 +1403,7 @@
1390
1403
  --bb-color-blue-700: #2256aa;
1391
1404
  --bb-color-blue-800: #1a4080;
1392
1405
  --bb-color-blue-900: #112b55;
1406
+ --bb-color-brand-impact_green: #0cd973;
1393
1407
  --bb-color-brand-trusted_blue: #004054;
1394
1408
  --bb-color-gray-100: #d3d5d6;
1395
1409
  --bb-color-gray-1000: #1e2229;
@@ -1527,13 +1541,15 @@
1527
1541
  --bb-font-style-semibold: 600;
1528
1542
  --bb-font-style-semibold-italic-style: italic;
1529
1543
  --bb-font-style-semibold-italic-weight: 600;
1544
+ --bb-font-text_transform-uppercase: uppercase;
1530
1545
  --bb-font-weight-bold: 700;
1531
1546
  --bb-font-weight-light: 300;
1532
1547
  --bb-font-weight-regular: 400;
1533
1548
  --bb-font-weight-semibold: 600;
1534
- --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png");
1549
+ --bb-image-logo-primary-src: url("https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.3.0/assets/images/bb-logo.png");
1535
1550
  --bb-letter_spacing-normal: normal;
1536
- --bb-letter_spacing-wider: 0.16px;
1551
+ --bb-letter_spacing-wider: 0.01rem;
1552
+ --bb-letter_spacing-widest: 0.046875rem;
1537
1553
  --bb-line_height-200: calc(16/11);
1538
1554
  --bb-line_height-300: calc(18/13);
1539
1555
  --bb-line_height-400: calc(20/15);
@@ -1728,6 +1744,7 @@
1728
1744
  --sky-color-background-icon_matte-action-heavy: var(--bb-color-blue-600);
1729
1745
  --sky-color-background-icon_matte-action-soft: var(--bb-color-blue-900);
1730
1746
  --sky-color-background-icon_matte-danger: var(--bb-color-red-600);
1747
+ --sky-color-background-icon_matte-info: var(--bb-color-blue-600);
1731
1748
  --sky-color-background-icon_matte-success: var(--bb-color-green-700);
1732
1749
  --sky-color-background-icon_matte-warning: var(--bb-color-yellow-600);
1733
1750
  --sky-color-background-input-base: var(--bb-color-gray-900);
@@ -2956,6 +2973,14 @@ body.sky-theme-modern {
2956
2973
  font-size: inherit;
2957
2974
  font-weight: var(--sky-font-style-emphasized);
2958
2975
  }
2976
+ .sky-theme-modern .sky-font-eyebrow {
2977
+ color: var(--sky-color-text-heading);
2978
+ font-size: var(--sky-font-size-eyebrow);
2979
+ font-weight: var(--sky-font-style-eyebrow);
2980
+ letter-spacing: var(--sky-font-letter_spacing-eyebrow);
2981
+ line-height: var(--sky-font-line_height-eyebrow);
2982
+ text-transform: var(--sky-font-text_transform-eyebrow);
2983
+ }
2959
2984
  .sky-theme-modern .sky-font-hint-text-s {
2960
2985
  color: var(--sky-color-text-deemphasized);
2961
2986
  font-family: var(--sky-font-family-primary);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyux/theme",
3
- "version": "13.9.0",
3
+ "version": "13.10.0",
4
4
  "author": "Blackbaud, Inc.",
5
5
  "keywords": [
6
6
  "blackbaud",
@@ -20,7 +20,7 @@
20
20
  "@angular/core": "^20.3.0"
21
21
  },
22
22
  "dependencies": {
23
- "@blackbaud/skyux-design-tokens": "3.2.0",
23
+ "@blackbaud/skyux-design-tokens": "3.3.0",
24
24
  "fontfaceobserver": "2.3.0",
25
25
  "tslib": "^2.8.1"
26
26
  },