@blackbaud/skyux-design-tokens 0.0.41 → 0.0.43

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 +19 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +24 -16
  4. package/scss/modern.css +25 -8
package/CHANGELOG.md CHANGED
@@ -2,6 +2,25 @@
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.43](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.42...0.0.43) (2025-01-14)
6
+
7
+
8
+ ### Features
9
+
10
+ * page tokens ([#127](https://github.com/blackbaud/skyux-design-tokens/issues/127)) ([2b34669](https://github.com/blackbaud/skyux-design-tokens/commit/2b34669645e3fae9e725c317157d376c28cf49ae))
11
+
12
+ ## [0.0.42](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.41...0.0.42) (2024-11-19)
13
+
14
+
15
+ ### Features
16
+
17
+ * file attach tokens ([#124](https://github.com/blackbaud/skyux-design-tokens/issues/124)) ([02cfa91](https://github.com/blackbaud/skyux-design-tokens/commit/02cfa91e53cbfc059136bdf9a6c62345f1d1e41e))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * move border.width.selected out of action ([#121](https://github.com/blackbaud/skyux-design-tokens/issues/121)) ([ff72d51](https://github.com/blackbaud/skyux-design-tokens/commit/ff72d514d91988c3f8b3c45a3326a256aa87dc15))
23
+
5
24
  ## [0.0.41](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.40...0.0.41) (2024-10-29)
6
25
 
7
26
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.41",
3
+ "version": "0.0.43",
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
@@ -3,6 +3,7 @@
3
3
  --bb-size-fixed-6000: 960px;
4
4
  --bb-size-fixed-4000: 640px;
5
5
  --bb-size-fixed-2000: 320px;
6
+ --bb-size-fixed-600: 96px;
6
7
  --bb-size-fixed-250: 36px;
7
8
  --bb-size-fixed-150: 24px;
8
9
  --bb-size-fixed-125: 20px;
@@ -250,6 +251,7 @@
250
251
  --sky-color-border-danger: var(--bb-color-red-600);
251
252
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
252
253
  --sky-color-border-selected: var(--bb-color-blue-600);
254
+ --sky-color-background-file_drop: var(--bb-color-gray-25);
253
255
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
254
256
  --sky-color-background-list-focus: var(--bb-color-transparent);
255
257
  --sky-color-background-list-active: var(--bb-color-transparent);
@@ -329,6 +331,10 @@
329
331
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
330
332
  --sky-border-width-separator-light: var(--bb-size-fixed-6);
331
333
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
334
+ --sky-border-width-selected-xl: var(--bb-size-fixed-37);
335
+ --sky-border-width-selected-l: var(--bb-size-fixed-25);
336
+ --sky-border-width-selected-m: var(--bb-size-fixed-12);
337
+ --sky-border-width-selected-s: var(--bb-size-fixed-6);
332
338
  --sky-border-width-input-disabled: var(--bb-size-fixed-6);
333
339
  --sky-border-width-input-error: var(--bb-size-fixed-12);
334
340
  --sky-border-width-input-focus: var(--bb-size-fixed-12);
@@ -336,10 +342,6 @@
336
342
  --sky-border-width-input-hover: var(--bb-size-fixed-6);
337
343
  --sky-border-width-input-base: var(--bb-size-fixed-6);
338
344
  --sky-border-width-container-base: var(--bb-size-fixed-6);
339
- --sky-border-width-action-selected-xl: var(--bb-size-fixed-37);
340
- --sky-border-width-action-selected-l: var(--bb-size-fixed-25);
341
- --sky-border-width-action-selected-m: var(--bb-size-fixed-12);
342
- --sky-border-width-action-selected-s: var(--bb-size-fixed-6);
343
345
  --sky-border-width-action-disabled: var(--bb-size-fixed-6);
344
346
  --sky-border-width-action-error: var(--bb-size-fixed-12);
345
347
  --sky-border-width-action-focus: var(--bb-size-fixed-12);
@@ -470,6 +472,7 @@
470
472
  --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);
471
473
  --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);
472
474
  --sky-type-data_label: var(--sky-font-style-data_label) var(--sky-font-size-data_label)/var(--sky-font-line_height-data_label) var(--sky-font-family-primary);
475
+ --sky-size-thumbnail-l: var(--bb-size-fixed-600);
473
476
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
474
477
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
475
478
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
@@ -502,6 +505,7 @@
502
505
  --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
503
506
  --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
504
507
  --sky-space-gap-text_action-0: 0rem;
508
+ --sky-space-gap-stacked_supplemental-l: var(--bb-size-fluid-100);
505
509
  --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
506
510
  --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
507
511
  --sky-space-gap-stacked_supplemental-0: 0rem;
@@ -566,6 +570,10 @@
566
570
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
567
571
  --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
568
572
  --sky-space-inset-tabs-s: var(--bb-size-fluid-50);
573
+ --sky-space-inset-sunk-left-l: var(--bb-size-fluid-150);
574
+ --sky-space-inset-sunk-bottom-l: var(--bb-size-fluid-100);
575
+ --sky-space-inset-sunk-right-l: var(--bb-size-fluid-150);
576
+ --sky-space-inset-sunk-top-l: var(--bb-size-fluid-150);
569
577
  --sky-space-inset-pillarbox-2_3-left-l: var(--bb-size-fluid-150);
570
578
  --sky-space-inset-pillarbox-2_3-left-m: var(--bb-size-fluid-75);
571
579
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--bb-size-fluid-100);
@@ -598,18 +606,18 @@
598
606
  --sky-space-inset-pillarbox-1_4-right-xs: var(--bb-size-fluid-25);
599
607
  --sky-space-inset-pillarbox-1_4-top-s: var(--bb-size-fluid-12);
600
608
  --sky-space-inset-pillarbox-1_4-top-xs: var(--bb-size-fluid-6);
601
- --sky-space-inset-letterbox-left-l: var(--bb-size-fluid-100);
602
- --sky-space-inset-letterbox-left-m: var(--bb-size-fluid-50);
603
- --sky-space-inset-letterbox-left-s: var(--bb-size-fluid-25);
604
- --sky-space-inset-letterbox-bottom-l: var(--bb-size-fluid-150);
605
- --sky-space-inset-letterbox-bottom-m: var(--bb-size-fluid-100);
606
- --sky-space-inset-letterbox-bottom-s: var(--bb-size-fluid-50);
607
- --sky-space-inset-letterbox-right-l: var(--bb-size-fluid-100);
608
- --sky-space-inset-letterbox-right-m: var(--bb-size-fluid-50);
609
- --sky-space-inset-letterbox-right-s: var(--bb-size-fluid-25);
610
- --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-150);
611
- --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-100);
612
- --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-50);
609
+ --sky-space-inset-letterbox-2_3-left-m: var(--bb-size-fluid-50);
610
+ --sky-space-inset-letterbox-2_3-bottom-m: var(--bb-size-fluid-75);
611
+ --sky-space-inset-letterbox-2_3-right-m: var(--bb-size-fluid-50);
612
+ --sky-space-inset-letterbox-2_3-top-m: var(--bb-size-fluid-75);
613
+ --sky-space-inset-letterbox-1_2-left-m: var(--bb-size-fluid-50);
614
+ --sky-space-inset-letterbox-1_2-bottom-m: var(--bb-size-fluid-100);
615
+ --sky-space-inset-letterbox-1_2-right-m: var(--bb-size-fluid-50);
616
+ --sky-space-inset-letterbox-1_2-top-m: var(--bb-size-fluid-100);
617
+ --sky-space-inset-letterbox-1_3-left-m: var(--bb-size-fluid-50);
618
+ --sky-space-inset-letterbox-1_3-bottom-m: var(--bb-size-fluid-150);
619
+ --sky-space-inset-letterbox-1_3-right-m: var(--bb-size-fluid-50);
620
+ --sky-space-inset-letterbox-1_3-top-m: var(--bb-size-fluid-150);
613
621
  --sky-space-inset-input_label-bottom-m: var(--bb-size-fluid-12);
614
622
  --sky-space-inset-input_label-top-m: var(--bb-size-fluid-37);
615
623
  --sky-space-inset-input-left-m: var(--bb-size-fluid-100);
package/scss/modern.css CHANGED
@@ -50,6 +50,7 @@
50
50
  --modern-size-296: 296px;
51
51
  --modern-size-276: 276px;
52
52
  --modern-size-236: 236px;
53
+ --modern-size-100: 100px;
53
54
  --modern-size-96: 96px;
54
55
  --modern-size-80: 80px;
55
56
  --modern-size-64: 64px;
@@ -107,6 +108,7 @@
107
108
  --modern-color-red-30: #f7a08f;
108
109
  --modern-color-gray-005: #fcfcfc;
109
110
  --modern-color-gray-07: #ededee;
111
+ --modern-color-gray-05: #eeeeef;
110
112
  --modern-color-gray-105: #212327;
111
113
  --modern-color-gray-70: #686c73;
112
114
  --modern-color-gray-50: #8c929c;
@@ -167,6 +169,7 @@
167
169
  --sky-color-border-danger: var(--modern-color-red-50);
168
170
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
169
171
  --sky-color-border-selected: var(--modern-color-blue-74);
172
+ --sky-color-background-file_drop: var(--modern-color-gray-05);
170
173
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
171
174
  --sky-color-background-list-focus: var(--modern-color-transparent);
172
175
  --sky-color-background-list-active: var(--modern-color-transparent);
@@ -252,6 +255,10 @@
252
255
  --sky-border-width-separator-row: var(--modern-size-1);
253
256
  --sky-border-width-separator-light: var(--modern-size-1);
254
257
  --sky-border-width-separator-dark: var(--modern-size-1);
258
+ --sky-border-width-selected-xl: var(--modern-size-6);
259
+ --sky-border-width-selected-l: var(--modern-size-4);
260
+ --sky-border-width-selected-m: var(--modern-size-2);
261
+ --sky-border-width-selected-s: var(--modern-size-1);
255
262
  --sky-border-width-input-disabled: var(--modern-size-1);
256
263
  --sky-border-width-input-error: var(--modern-size-2);
257
264
  --sky-border-width-input-focus: var(--modern-size-2);
@@ -259,10 +266,6 @@
259
266
  --sky-border-width-input-hover: var(--modern-size-1);
260
267
  --sky-border-width-input-base: var(--modern-size-1);
261
268
  --sky-border-width-container-base: var(--modern-size-1);
262
- --sky-border-width-action-selected-xl: var(--modern-size-6);
263
- --sky-border-width-action-selected-l: var(--modern-size-4);
264
- --sky-border-width-action-selected-m: var(--modern-size-2);
265
- --sky-border-width-action-selected-s: var(--modern-size-1);
266
269
  --sky-border-width-action-disabled: var(--modern-size-1);
267
270
  --sky-border-width-action-error: var(--modern-size-2);
268
271
  --sky-border-width-action-focus: var(--modern-size-2);
@@ -273,6 +276,7 @@
273
276
  --sky-border-width-text_highlight: var(--modern-size-1);
274
277
  --sky-border-width-divider: var(--modern-size-1);
275
278
  --sky-border-width-accent: var(--modern-size-7);
279
+ --sky-size-thumbnail-l: var(--modern-size-100);
276
280
  --sky-size-max_width-overlay_message: var(--modern-size-236);
277
281
  --sky-size-width-viewport-smallest: var(--modern-size-296);
278
282
  --sky-size-illustration-xl: var(--modern-size-96);
@@ -305,6 +309,7 @@
305
309
  --sky-space-gap-text_action-s: var(--modern-space-s);
306
310
  --sky-space-gap-text_action-xs: var(--modern-space-xs);
307
311
  --sky-space-gap-text_action-0: 0rem;
312
+ --sky-space-gap-stacked_supplemental-l: var(--modern-size-15);
308
313
  --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
309
314
  --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
310
315
  --sky-space-gap-stacked_supplemental-0: 0rem;
@@ -369,6 +374,10 @@
369
374
  --sky-space-inset-tabs-l: var(--modern-space-lg);
370
375
  --sky-space-inset-tabs-m: var(--modern-space-md);
371
376
  --sky-space-inset-tabs-s: var(--modern-space-s);
377
+ --sky-space-inset-sunk-left-l: var(--modern-space-xl);
378
+ --sky-space-inset-sunk-bottom-l: var(--modern-space-lg);
379
+ --sky-space-inset-sunk-right-l: var(--modern-space-xl);
380
+ --sky-space-inset-sunk-top-l: var(--modern-space-xl);
372
381
  --sky-space-inset-pillarbox-2_3-left-l: var(--modern-size-30);
373
382
  --sky-space-inset-pillarbox-2_3-left-m: var(--modern-size-15);
374
383
  --sky-space-inset-pillarbox-2_3-bottom-l: var(--modern-size-20);
@@ -401,10 +410,18 @@
401
410
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
402
411
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
403
412
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
404
- --sky-space-inset-letterbox-left-m: var(--modern-space-s);
405
- --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
406
- --sky-space-inset-letterbox-right-m: var(--modern-space-s);
407
- --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
413
+ --sky-space-inset-letterbox-2_3-left-m: var(--modern-space-s);
414
+ --sky-space-inset-letterbox-2_3-bottom-m: var(--modern-space-md);
415
+ --sky-space-inset-letterbox-2_3-right-m: var(--modern-space-s);
416
+ --sky-space-inset-letterbox-2_3-top-m: var(--modern-space-md);
417
+ --sky-space-inset-letterbox-1_2-left-m: var(--modern-space-s);
418
+ --sky-space-inset-letterbox-1_2-bottom-m: var(--modern-space-lg);
419
+ --sky-space-inset-letterbox-1_2-right-m: var(--modern-space-s);
420
+ --sky-space-inset-letterbox-1_2-top-m: var(--modern-space-lg);
421
+ --sky-space-inset-letterbox-1_3-left-m: var(--modern-space-s);
422
+ --sky-space-inset-letterbox-1_3-bottom-m: var(--modern-space-xl);
423
+ --sky-space-inset-letterbox-1_3-right-m: var(--modern-space-s);
424
+ --sky-space-inset-letterbox-1_3-top-m: var(--modern-space-xl);
408
425
  --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
409
426
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
410
427
  --sky-space-inset-input-left-m: var(--modern-size-15);