@blackbaud/skyux-design-tokens 0.0.31 → 0.0.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +46 -26
  4. package/scss/modern.css +29 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  - Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
4
4
 
5
+ ## [0.0.32](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.31...0.0.32) (2024-09-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * border, elevation tokens for public classes + size tokens for overlays ([#83](https://github.com/blackbaud/skyux-design-tokens/issues/83)) ([1f4f70b](https://github.com/blackbaud/skyux-design-tokens/commit/1f4f70bd530990d0e9b5684e2bb6035143a4e6d0))
11
+
5
12
  ## [0.0.31](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.30...0.0.31) (2024-09-26)
6
13
 
7
14
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.31",
3
+ "version": "0.0.32",
4
4
  "description": "Design tokens for SKY UX",
5
5
  "homepage": "https://github.com/blackbaud/skyux-design-tokens",
6
6
  "license": "MIT",
package/scss/blackbaud.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .sky-theme-modern.sky-theme-brand-blackbaud {
2
- --bb-size-reading_container-max_width: 65ch, 33vw;
2
+ --bb-size-reading_container-max_width: 50ch, 40vw;
3
3
  --bb-size-fixed-6000: 960px;
4
4
  --bb-size-fixed-4000: 640px;
5
5
  --bb-size-fixed-2000: 320px;
@@ -114,18 +114,16 @@
114
114
  --bb-border-radius-050: 0.5rem;
115
115
  --bb-border-radius-025: 0.25rem;
116
116
  --bb-border-radius-none: 0rem;
117
- --bb-line_height-1200: 4.75rem;
118
- --bb-line_height-1100: 4.25rem;
119
- --bb-line_height-1000: 3.375rem;
120
- --bb-line_height-900: 3rem;
121
- --bb-line_height-800: 3rem;
122
- --bb-line_height-700: 2.625rem;
123
- --bb-line_height-600: 2.25rem;
124
- --bb-line_height-500: 2rem;
125
- --bb-line_height-400: 1.75rem;
126
- --bb-line_height-300: 1.5rem;
127
- --bb-line_height-200: 1.25rem;
128
- --bb-line_height-100: 1rem;
117
+ --bb-line_height-1000: 1.2308;
118
+ --bb-line_height-900: 1.1429;
119
+ --bb-line_height-800: 1.1111;
120
+ --bb-line_height-700: 1.25;
121
+ --bb-line_height-600: 1.2857;
122
+ --bb-line_height-500: 1.3333;
123
+ --bb-line_height-400: 1.4;
124
+ --bb-line_height-300: 1.5;
125
+ --bb-line_height-200: 1.4286;
126
+ --bb-line_height-100: 1.3333;
129
127
  --bb-letter_spacing-normal: normal;
130
128
  --bb-letter_spacing-wider: 0.32px;
131
129
  --bb-font-src-sans-italic: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff") format("woff");
@@ -148,9 +146,7 @@
148
146
  --bb-font-family-sans: var(--bb-font-name), Helvetica Neue, Arial, sans-serif;
149
147
  --bb-font-family-monospaced: Menlo, Monaco, Consolas, 'Courier New', monospace;
150
148
  --bb-font-name: 'BLKB Sans';
151
- --bb-font-size-1200: 3.75rem;
152
- --bb-font-size-1100: 3.375rem;
153
- --bb-font-size-1000: 3rem;
149
+ --bb-font-size-1000: 3.25rem;
154
150
  --bb-font-size-900: 2.625rem;
155
151
  --bb-font-size-800: 2.25rem;
156
152
  --bb-font-size-700: 2rem;
@@ -210,12 +206,15 @@
210
206
  --sky-elevation-overflow: var(--bb-shadow-gray-2);
211
207
  --sky-elevation-focus: var(--bb-shadow-gray-2);
212
208
  --sky-elevation-none: var(--bb-shadow-gray-0);
209
+ --sky-color-border-separator-row: var(--bb-color-gray-50);
210
+ --sky-color-border-separator-dark: var(--bb-color-gray-100);
213
211
  --sky-color-border-input-error: var(--bb-color-red-600);
214
212
  --sky-color-border-input-disabled: var(--bb-color-gray-100);
215
213
  --sky-color-border-input-focus: var(--bb-color-blue-600);
216
214
  --sky-color-border-input-active: var(--bb-color-blue-600);
217
215
  --sky-color-border-input-hover: var(--bb-color-blue-600);
218
216
  --sky-color-border-input-base: var(--bb-color-gray-100);
217
+ --sky-color-border-container-base: var(--bb-color-gray-100);
219
218
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
220
219
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
221
220
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
@@ -229,7 +228,8 @@
229
228
  --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
230
229
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
231
230
  --sky-color-border-action-disabled: var(--bb-color-gray-100);
232
- --sky-color-border-container-base: var(--bb-color-gray-100);
231
+ --sky-color-border-elevation: var(--bb-color-gray-100);
232
+ --sky-color-border-divider: var(--bb-color-gray-100);
233
233
  --sky-color-border-info: var(--bb-color-blue-600);
234
234
  --sky-color-border-success: var(--bb-color-green-600);
235
235
  --sky-color-border-warning: var(--bb-color-yellow-600);
@@ -266,6 +266,9 @@
266
266
  --sky-color-text-default: var(--bb-color-gray-900);
267
267
  }
268
268
  .sky-theme-modern.sky-theme-brand-blackbaud {
269
+ --sky-border-style-separator-row: var(--bb-border-style-dotted);
270
+ --sky-border-style-separator-dark: var(--bb-border-style-solid);
271
+ --sky-border-style-elevation: var(--bb-border-style-solid);
269
272
  --sky-border-style-accent: var(--bb-border-style-solid);
270
273
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
271
274
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
@@ -286,8 +289,9 @@
286
289
  --sky-border-width-action-active: var(--bb-size-fixed-12);
287
290
  --sky-border-width-action-hover: var(--bb-size-fixed-6);
288
291
  --sky-border-width-action-base: var(--bb-size-fixed-6);
289
- --sky-border-width-accent: var(--bb-size-fixed-37);
292
+ --sky-border-width-elevation: var(--bb-size-fixed-6);
290
293
  --sky-border-width-divider: var(--bb-size-fixed-6);
294
+ --sky-border-width-accent: var(--bb-size-fixed-37);
291
295
  --sky-border-radius-pill: var(--bb-border-radius-pill);
292
296
  --sky-border-radius-m: var(--bb-size-fluid-50);
293
297
  --sky-border-radius-s: var(--bb-size-fluid-25);
@@ -325,10 +329,10 @@
325
329
  --sky-font-line_height-heading-3: var(--bb-line_height-300);
326
330
  --sky-font-line_height-heading-2: var(--bb-line_height-400);
327
331
  --sky-font-line_height-heading-1: var(--bb-line_height-500);
328
- --sky-font-line_height-display-4: var(--bb-line_height-800);
329
- --sky-font-line_height-display-3: var(--bb-line_height-900);
330
- --sky-font-line_height-display-2: var(--bb-line_height-1000);
331
- --sky-font-line_height-display-1: var(--bb-line_height-1100);
332
+ --sky-font-line_height-display-4: var(--bb-line_height-200);
333
+ --sky-font-line_height-display-3: var(--bb-line_height-300);
334
+ --sky-font-line_height-display-2: var(--bb-line_height-500);
335
+ --sky-font-line_height-display-1: var(--bb-line_height-800);
332
336
  --sky-font-line_height-body-l: var(--bb-line_height-300);
333
337
  --sky-font-line_height-body-m: var(--bb-line_height-200);
334
338
  --sky-font-line_height-body-s: var(--bb-line_height-100);
@@ -369,10 +373,10 @@
369
373
  --sky-font-size-heading-3: var(--bb-font-size-300);
370
374
  --sky-font-size-heading-2: var(--bb-font-size-400);
371
375
  --sky-font-size-heading-1: var(--bb-font-size-500);
372
- --sky-font-size-display-4: var(--bb-font-size-800);
373
- --sky-font-size-display-3: var(--bb-font-size-900);
374
- --sky-font-size-display-2: var(--bb-font-size-1000);
375
- --sky-font-size-display-1: var(--bb-font-size-1100);
376
+ --sky-font-size-display-4: var(--bb-font-size-200);
377
+ --sky-font-size-display-3: var(--bb-font-size-300);
378
+ --sky-font-size-display-2: var(--bb-font-size-500);
379
+ --sky-font-size-display-1: var(--bb-font-size-800);
376
380
  --sky-font-size-body-l: var(--bb-font-size-300);
377
381
  --sky-font-size-body-m: var(--bb-font-size-200);
378
382
  --sky-font-size-body-s: var(--bb-font-size-100);
@@ -410,6 +414,18 @@
410
414
  --sky-size-icon-l: var(--bb-size-fluid-150);
411
415
  --sky-size-icon-m: var(--bb-size-fluid-125);
412
416
  --sky-size-icon-s: var(--bb-size-fluid-100);
417
+ --sky-space-stacked-xxl: var(--bb-size-fluid-300);
418
+ --sky-space-stacked-xl: var(--bb-size-fluid-150);
419
+ --sky-space-stacked-l: var(--bb-size-fluid-100);
420
+ --sky-space-stacked-m: var(--bb-size-fluid-75);
421
+ --sky-space-stacked-s: var(--bb-size-fluid-50);
422
+ --sky-space-stacked-xs: var(--bb-size-fluid-25);
423
+ --sky-space-inline-xxl: var(--bb-size-fluid-300);
424
+ --sky-space-inline-xl: var(--bb-size-fluid-150);
425
+ --sky-space-inline-l: var(--bb-size-fluid-100);
426
+ --sky-space-inline-m: var(--bb-size-fluid-75);
427
+ --sky-space-inline-s: var(--bb-size-fluid-50);
428
+ --sky-space-inline-xs: var(--bb-size-fluid-25);
413
429
  --sky-space-switch_inset: calc(var(--sky-size-switch)+var(--sky-space-label_gap-s));
414
430
  --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
415
431
  --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
@@ -441,6 +457,10 @@
441
457
  --sky-space-action_group_gap-m: var(--bb-size-fluid-50);
442
458
  --sky-space-action_group_gap-s: var(--bb-size-fluid-25);
443
459
  --sky-space-action_group_gap-0: 0rem;
460
+ --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
461
+ --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
462
+ --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
463
+ --sky-space-inset-tabs-s: var(--bb-size-fluid-50);
444
464
  --sky-space-inset-pillarbox-2_3-left-l: var(--bb-size-fluid-150);
445
465
  --sky-space-inset-pillarbox-2_3-left-m: var(--bb-size-fluid-75);
446
466
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--bb-size-fluid-100);
package/scss/modern.css CHANGED
@@ -39,8 +39,10 @@
39
39
  --modern-font-size-150: 14px;
40
40
  --modern-font-size-125: 13px;
41
41
  --modern-font-size-100: 12px;
42
+ --modern-size-320: 320px;
42
43
  --modern-size-296: 296px;
43
44
  --modern-size-276: 276px;
45
+ --modern-size-236: 236px;
44
46
  --modern-size-96: 96px;
45
47
  --modern-size-80: 80px;
46
48
  --modern-size-64: 64px;
@@ -92,6 +94,7 @@
92
94
  --modern-color-gray-07: #ededee;
93
95
  --modern-color-gray-105: #212327;
94
96
  --modern-color-gray-70: #686c73;
97
+ --modern-color-gray-20: #cdcfd2;
95
98
  --modern-color-gray-15: #d2d2d2;
96
99
  }
97
100
  .sky-theme-modern {
@@ -103,6 +106,8 @@
103
106
  --sky-elevation-overflow: var(--modern-shadow-size-3);
104
107
  --sky-elevation-focus: var(--modern-shadow-size-3);
105
108
  --sky-elevation-none: var(--modern-shadow-size-0);
109
+ --sky-color-border-separator-row: var(--modern-color-gray-20);
110
+ --sky-color-border-separator-dark: var(--modern-color-gray-20);
106
111
  --sky-color-border-input-error: var(--modern-color-red-50);
107
112
  --sky-color-border-input-disabled: var(--modern-color-gray-15);
108
113
  --sky-color-border-input-focus: var(--modern-color-blue-74);
@@ -117,6 +122,8 @@
117
122
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
118
123
  --sky-color-border-action-disabled: var(--modern-color-gray-15);
119
124
  --sky-color-border-container-base: var(--modern-color-gray-15);
125
+ --sky-color-border-elevation: var(--modern-color-gray-15);
126
+ --sky-color-border-divider: var(--modern-color-gray-15);
120
127
  --sky-color-border-info: var(--modern-color-blue-50);
121
128
  --sky-color-border-success: var(--modern-color-green-50);
122
129
  --sky-color-border-warning: var(--modern-color-yellow-50);
@@ -150,6 +157,9 @@
150
157
  --sky-color-text-default: var(--modern-color-gray-105);
151
158
  }
152
159
  .sky-theme-modern {
160
+ --sky-border-style-separator-row: var(--modern-border-style-dotted);
161
+ --sky-border-style-separator-dark: var(--modern-border-style-solid);
162
+ --sky-border-style-elevation: var(--modern-border-style-solid);
153
163
  --sky-border-style-accent: var(--modern-border-style-solid);
154
164
  --sky-border-radius-pill: var(--modern-border-radius-pill);
155
165
  --sky-border-radius-m: var(--modern-size-6);
@@ -173,10 +183,11 @@
173
183
  --sky-border-width-action-active: var(--modern-size-2);
174
184
  --sky-border-width-action-hover: var(--modern-size-1);
175
185
  --sky-border-width-action-base: var(--modern-size-1);
176
- --sky-border-width-accent: var(--modern-size-7);
186
+ --sky-border-width-elevation: var(--modern-size-1);
177
187
  --sky-border-width-divider: var(--modern-size-1);
188
+ --sky-border-width-accent: var(--modern-size-7);
178
189
  --sky-text-font_family: var(--modern-font-name);
179
- --sky-size-max_width-overlay_message: var(--modern-size-276);
190
+ --sky-size-max_width-overlay_message: var(--modern-size-236);
180
191
  --sky-size-width-viewport-smallest: var(--modern-size-296);
181
192
  --sky-size-switch: var(--modern-size-26);
182
193
  --sky-size-illustration-xl: var(--modern-size-96);
@@ -187,6 +198,18 @@
187
198
  --sky-size-icon-l: var(--modern-size-24);
188
199
  --sky-size-icon-m: var(--modern-size-20);
189
200
  --sky-size-icon-s: var(--modern-size-16);
201
+ --sky-space-stacked-xxl: var(--modern-space-xxl);
202
+ --sky-space-stacked-xl: var(--modern-space-xl);
203
+ --sky-space-stacked-l: var(--modern-space-lg);
204
+ --sky-space-stacked-m: var(--modern-space-md);
205
+ --sky-space-stacked-s: var(--modern-space-s);
206
+ --sky-space-stacked-xs: var(--modern-space-xs);
207
+ --sky-space-inline-xxl: var(--modern-space-xxl);
208
+ --sky-space-inline-xl: var(--modern-space-xl);
209
+ --sky-space-inline-l: var(--modern-space-lg);
210
+ --sky-space-inline-m: var(--modern-space-md);
211
+ --sky-space-inline-s: var(--modern-space-s);
212
+ --sky-space-inline-xs: var(--modern-space-xs);
190
213
  --sky-space-text_action_gap-l: var(--modern-space-lg);
191
214
  --sky-space-text_action_gap-m: var(--modern-space-md);
192
215
  --sky-space-text_action_gap-xs: var(--modern-space-xs);
@@ -203,6 +226,10 @@
203
226
  --sky-space-form_gap-l: var(--modern-space-lg);
204
227
  --sky-space-form_gap-m: var(--modern-space-md);
205
228
  --sky-space-form_gap-s: var(--modern-space-s);
229
+ --sky-space-inset-tabs-xl: var(--modern-space-xl);
230
+ --sky-space-inset-tabs-l: var(--modern-space-lg);
231
+ --sky-space-inset-tabs-m: var(--modern-space-md);
232
+ --sky-space-inset-tabs-s: var(--modern-space-s);
206
233
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
207
234
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
208
235
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);