@blackbaud/skyux-design-tokens 3.1.0 → 3.2.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 +10 -2
  4. package/assets/scss/blackbaud.css +6 -2
  5. package/assets/scss/modern.css +1 -1
  6. package/bundles/base.css +10 -2
  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.2.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.1.1...3.2.0) (2025-10-20)
6
+
7
+
8
+ ### Features
9
+
10
+ * add body.xs font ([#294](https://github.com/blackbaud/skyux-design-tokens/issues/294)) ([2f555fc](https://github.com/blackbaud/skyux-design-tokens/commit/2f555fc76068ff9436d22d67d755f447d842ce28))
11
+
12
+ ## [3.1.1](https://github.com/blackbaud/skyux-design-tokens/compare/3.1.0...3.1.1) (2025-10-15)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * use rgba tokens for linear gradient ([#291](https://github.com/blackbaud/skyux-design-tokens/issues/291)) ([1e0827f](https://github.com/blackbaud/skyux-design-tokens/commit/1e0827faf9d46ab07d5140d842821c39b695924c))
18
+
5
19
  ## [3.1.0](https://github.com/blackbaud/skyux-design-tokens/compare/3.0.0...3.1.0) (2025-10-14)
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.1.0/assets/images/favicon.ico"
5
+ "src": "https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/favicon.ico"
6
6
  }
7
7
  },
8
8
  "strings": {
package/assets/scss/base.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -145,6 +147,7 @@
145
147
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
146
148
  --bb-font-blkb_sans-name: BLKB Sans;
147
149
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
150
+ --bb-font-size-200: 0.6875rem;
148
151
  --bb-font-size-300: 0.8125rem;
149
152
  --bb-font-size-400: 0.9375rem;
150
153
  --bb-font-size-500: 1.0625rem;
@@ -167,9 +170,10 @@
167
170
  --bb-font-weight-light: 300;
168
171
  --bb-font-weight-regular: 400;
169
172
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.0/assets/images/bb-logo.png');
173
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
171
174
  --bb-letter_spacing-normal: normal;
172
175
  --bb-letter_spacing-wider: 0.16px;
176
+ --bb-line_height-200: calc(16/11);
173
177
  --bb-line_height-300: calc(18/13);
174
178
  --bb-line_height-400: calc(20/15);
175
179
  --bb-line_height-500: calc(24/17);
@@ -229,7 +233,7 @@
229
233
  --bb-space-8: 24px;
230
234
  --bb-space-9: 36px;
231
235
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
232
- --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-sky-600)66, var(--bb-color-purple-600)66);
236
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
233
237
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
234
238
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
235
239
  --bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
@@ -1166,6 +1170,7 @@
1166
1170
  --sky-font-line_height-body-l: var(--bb-line_height-500);
1167
1171
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1168
1172
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1173
+ --sky-font-line_height-body-xs: var(--bb-line_height-200);
1169
1174
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1170
1175
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1171
1176
  --sky-font-line_height-display-3: var(--bb-line_height-600);
@@ -1182,6 +1187,7 @@
1182
1187
  --sky-font-size-body-l: var(--bb-font-size-500);
1183
1188
  --sky-font-size-body-m: var(--bb-font-size-400);
1184
1189
  --sky-font-size-body-s: var(--bb-font-size-300);
1190
+ --sky-font-size-body-xs: var(--bb-font-size-200);
1185
1191
  --sky-font-size-display-1: var(--bb-font-size-700);
1186
1192
  --sky-font-size-display-2: var(--bb-font-size-650);
1187
1193
  --sky-font-size-display-3: var(--bb-font-size-600);
@@ -1198,6 +1204,7 @@
1198
1204
  --sky-font-style-body-l: var(--bb-font-style-regular);
1199
1205
  --sky-font-style-body-m: var(--bb-font-style-regular);
1200
1206
  --sky-font-style-body-s: var(--bb-font-style-regular);
1207
+ --sky-font-style-body-xs: var(--bb-font-style-regular);
1201
1208
  --sky-font-style-display-1: var(--bb-font-style-semibold);
1202
1209
  --sky-font-style-display-2: var(--bb-font-style-semibold);
1203
1210
  --sky-font-style-display-3: var(--bb-font-style-semibold);
@@ -1335,6 +1342,7 @@
1335
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);
1336
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);
1337
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);
1338
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);
1339
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);
1340
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);
package/assets/scss/blackbaud.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -145,6 +147,7 @@
145
147
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
146
148
  --bb-font-blkb_sans-name: BLKB Sans;
147
149
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
150
+ --bb-font-size-200: 0.6875rem;
148
151
  --bb-font-size-300: 0.8125rem;
149
152
  --bb-font-size-400: 0.9375rem;
150
153
  --bb-font-size-500: 1.0625rem;
@@ -167,9 +170,10 @@
167
170
  --bb-font-weight-light: 300;
168
171
  --bb-font-weight-regular: 400;
169
172
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.0/assets/images/bb-logo.png');
173
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
171
174
  --bb-letter_spacing-normal: normal;
172
175
  --bb-letter_spacing-wider: 0.16px;
176
+ --bb-line_height-200: calc(16/11);
173
177
  --bb-line_height-300: calc(18/13);
174
178
  --bb-line_height-400: calc(20/15);
175
179
  --bb-line_height-500: calc(24/17);
@@ -229,7 +233,7 @@
229
233
  --bb-space-8: 24px;
230
234
  --bb-space-9: 36px;
231
235
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
232
- --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-sky-600)66, var(--bb-color-purple-600)66);
236
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
233
237
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
234
238
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
235
239
  --bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
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.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.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
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -145,6 +147,7 @@
145
147
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
146
148
  --bb-font-blkb_sans-name: BLKB Sans;
147
149
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
150
+ --bb-font-size-200: 0.6875rem;
148
151
  --bb-font-size-300: 0.8125rem;
149
152
  --bb-font-size-400: 0.9375rem;
150
153
  --bb-font-size-500: 1.0625rem;
@@ -167,9 +170,10 @@
167
170
  --bb-font-weight-light: 300;
168
171
  --bb-font-weight-regular: 400;
169
172
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.0/assets/images/bb-logo.png');
173
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
171
174
  --bb-letter_spacing-normal: normal;
172
175
  --bb-letter_spacing-wider: 0.16px;
176
+ --bb-line_height-200: calc(16/11);
173
177
  --bb-line_height-300: calc(18/13);
174
178
  --bb-line_height-400: calc(20/15);
175
179
  --bb-line_height-500: calc(24/17);
@@ -229,7 +233,7 @@
229
233
  --bb-space-8: 24px;
230
234
  --bb-space-9: 36px;
231
235
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
232
- --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-sky-600)66, var(--bb-color-purple-600)66);
236
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
233
237
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
234
238
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
235
239
  --bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
@@ -1166,6 +1170,7 @@
1166
1170
  --sky-font-line_height-body-l: var(--bb-line_height-500);
1167
1171
  --sky-font-line_height-body-m: var(--bb-line_height-400);
1168
1172
  --sky-font-line_height-body-s: var(--bb-line_height-300);
1173
+ --sky-font-line_height-body-xs: var(--bb-line_height-200);
1169
1174
  --sky-font-line_height-display-1: var(--bb-line_height-700);
1170
1175
  --sky-font-line_height-display-2: var(--bb-line_height-650);
1171
1176
  --sky-font-line_height-display-3: var(--bb-line_height-600);
@@ -1182,6 +1187,7 @@
1182
1187
  --sky-font-size-body-l: var(--bb-font-size-500);
1183
1188
  --sky-font-size-body-m: var(--bb-font-size-400);
1184
1189
  --sky-font-size-body-s: var(--bb-font-size-300);
1190
+ --sky-font-size-body-xs: var(--bb-font-size-200);
1185
1191
  --sky-font-size-display-1: var(--bb-font-size-700);
1186
1192
  --sky-font-size-display-2: var(--bb-font-size-650);
1187
1193
  --sky-font-size-display-3: var(--bb-font-size-600);
@@ -1198,6 +1204,7 @@
1198
1204
  --sky-font-style-body-l: var(--bb-font-style-regular);
1199
1205
  --sky-font-style-body-m: var(--bb-font-style-regular);
1200
1206
  --sky-font-style-body-s: var(--bb-font-style-regular);
1207
+ --sky-font-style-body-xs: var(--bb-font-style-regular);
1201
1208
  --sky-font-style-display-1: var(--bb-font-style-semibold);
1202
1209
  --sky-font-style-display-2: var(--bb-font-style-semibold);
1203
1210
  --sky-font-style-display-3: var(--bb-font-style-semibold);
@@ -1335,6 +1342,7 @@
1335
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);
1336
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);
1337
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);
1338
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);
1339
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);
1340
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);
package/bundles/blackbaud.css CHANGED
@@ -94,6 +94,8 @@
94
94
  --bb-color-red-700: #ae2e31;
95
95
  --bb-color-red-800: #822325;
96
96
  --bb-color-red-900: #571718;
97
+ --bb-color-rgba-purple-600-40: rgba(176, 97, 242, 0.4);
98
+ --bb-color-rgba-sky-600-40: rgba(0, 207, 255, 0.4);
97
99
  --bb-color-scrim: rgba(37, 43, 51, 0.5);
98
100
  --bb-color-sky-100: #ebfbff;
99
101
  --bb-color-sky-1000: #002933;
@@ -145,6 +147,7 @@
145
147
  --bb-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
146
148
  --bb-font-blkb_sans-name: BLKB Sans;
147
149
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
150
+ --bb-font-size-200: 0.6875rem;
148
151
  --bb-font-size-300: 0.8125rem;
149
152
  --bb-font-size-400: 0.9375rem;
150
153
  --bb-font-size-500: 1.0625rem;
@@ -167,9 +170,10 @@
167
170
  --bb-font-weight-light: 300;
168
171
  --bb-font-weight-regular: 400;
169
172
  --bb-font-weight-semibold: 600;
170
- --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.1.0/assets/images/bb-logo.png');
173
+ --bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.0/assets/images/bb-logo.png');
171
174
  --bb-letter_spacing-normal: normal;
172
175
  --bb-letter_spacing-wider: 0.16px;
176
+ --bb-line_height-200: calc(16/11);
173
177
  --bb-line_height-300: calc(18/13);
174
178
  --bb-line_height-400: calc(20/15);
175
179
  --bb-line_height-500: calc(24/17);
@@ -229,7 +233,7 @@
229
233
  --bb-space-8: 24px;
230
234
  --bb-space-9: 36px;
231
235
  --bb-color-gradient-blue: linear-gradient( var(--bb-color-blue-500), var(--bb-color-blue-700));
232
- --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-sky-600)66, var(--bb-color-purple-600)66);
236
+ --bb-color-gradient-brand-secondary: linear-gradient(90deg, var(--bb-color-rgba-sky-600-40), var(--bb-color-rgba-purple-600-40));
233
237
  --bb-font-blkb_sans-family: var(--bb-font-blkb_sans-name), var(--bb-font-blkb_sans-fallback);
234
238
  --bb-shadow-gray-100: 0 1px 3px 0 rgba(22, 26, 31, 0.2), 0 2px 1px -1px rgba(22, 26, 31, 0.12), 0 1px 1px 0 rgba(22, 26, 31, 0.14);
235
239
  --bb-shadow-gray-1600: 0 8px 10px -5px rgba(22, 26, 31, 0.2), 0 6px 30px 5px rgba(22, 26, 31, 0.12), 0 16px 24px 2px rgba(30, 34, 41, 0.14);
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.0/assets/images/bb-logo.png');
80
+ --modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/3.2.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.0",
3
+ "version": "3.2.0",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",