@blackbaud/skyux-design-tokens 0.0.43 → 0.0.45

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 +16 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +27 -14
  4. package/scss/modern.css +14 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
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.45](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.44...0.0.45) (2025-02-18)
6
+
7
+
8
+ ### Features
9
+
10
+ * don't resolve math in token generation ([#134](https://github.com/blackbaud/skyux-design-tokens/issues/134)) ([0c9a31d](https://github.com/blackbaud/skyux-design-tokens/commit/0c9a31d1ee8b49e19b252611dafb95abf5ae3ff8))
11
+ * new tokens for avatar ([#130](https://github.com/blackbaud/skyux-design-tokens/issues/130)) ([7b82b08](https://github.com/blackbaud/skyux-design-tokens/commit/7b82b08bbe5cb0e12f328b78d2ec54afe137073d))
12
+ * new tokens for tree view including xs border radius ([#136](https://github.com/blackbaud/skyux-design-tokens/issues/136)) ([2e186b8](https://github.com/blackbaud/skyux-design-tokens/commit/2e186b87de931d6bff418199fb673033478bd026))
13
+
14
+ ## [0.0.44](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.43...0.0.44) (2025-02-03)
15
+
16
+
17
+ ### Features
18
+
19
+ * resize handle token ([#129](https://github.com/blackbaud/skyux-design-tokens/issues/129)) ([225bc52](https://github.com/blackbaud/skyux-design-tokens/commit/225bc5295f496182d54766df9af24326deda27c4))
20
+
5
21
  ## [0.0.43](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.42...0.0.43) (2025-01-14)
6
22
 
7
23
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.43",
3
+ "version": "0.0.45",
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
@@ -15,8 +15,10 @@
15
15
  --bb-size-fixed-12: 2px;
16
16
  --bb-size-fixed-6: 1px;
17
17
  --bb-size-fluid-600: 6rem;
18
+ --bb-size-fluid-550: 5.5rem;
18
19
  --bb-size-fluid-500: 5rem;
19
20
  --bb-size-fluid-400: 4rem;
21
+ --bb-size-fluid-350: 3.5rem;
20
22
  --bb-size-fluid-300: 3rem;
21
23
  --bb-size-fluid-250: 2.5rem;
22
24
  --bb-size-fluid-225: 2.25rem;
@@ -29,6 +31,7 @@
29
31
  --bb-size-fluid-50: 0.5rem;
30
32
  --bb-size-fluid-37: 0.375rem;
31
33
  --bb-size-fluid-25: 0.25rem;
34
+ --bb-size-fluid-18: 0.1875rem;
32
35
  --bb-size-fluid-12: 0.125rem;
33
36
  --bb-size-fluid-6: 0.0625rem;
34
37
  --bb-size-fluid-0: 0rem;
@@ -113,19 +116,20 @@
113
116
  --bb-border-style-solid: solid;
114
117
  --bb-border-radius-round: 50%;
115
118
  --bb-border-radius-pill: 999rem;
116
- --bb-border-radius-050: 0.5rem;
117
- --bb-border-radius-025: 0.25rem;
119
+ --bb-border-radius-050: .5rem;
120
+ --bb-border-radius-012: .125rem;
121
+ --bb-border-radius-025: .25rem;
118
122
  --bb-border-radius-0: 0rem;
119
- --bb-line_height-1000: 1.2308;
120
- --bb-line_height-900: 1.1429;
121
- --bb-line_height-800: 1.1111;
122
- --bb-line_height-700: 1.25;
123
- --bb-line_height-600: 1.2857;
124
- --bb-line_height-500: 1.3333;
125
- --bb-line_height-400: 1.4;
126
- --bb-line_height-300: 1.5;
127
- --bb-line_height-200: 1.4286;
128
- --bb-line_height-100: 1.3333;
123
+ --bb-line_height-1000: calc(64/52);
124
+ --bb-line_height-900: calc(48/42);
125
+ --bb-line_height-800: calc(40/36);
126
+ --bb-line_height-700: calc(40/32);
127
+ --bb-line_height-600: calc(36/28);
128
+ --bb-line_height-500: calc(32/24);
129
+ --bb-line_height-400: calc(28/20);
130
+ --bb-line_height-300: calc(24/16);
131
+ --bb-line_height-200: calc(20/14);
132
+ --bb-line_height-100: calc(16/12);
129
133
  --bb-letter_spacing-normal: normal;
130
134
  --bb-letter_spacing-wider: 0.32px;
131
135
  --bb-font-monospaced-family: Menlo, Monaco, Consolas, Courier New, monospace;
@@ -251,6 +255,7 @@
251
255
  --sky-color-border-danger: var(--bb-color-red-600);
252
256
  --sky-color-border-selected_soft: var(--bb-color-blue-300);
253
257
  --sky-color-border-selected: var(--bb-color-blue-600);
258
+ --sky-color-background-thumbnail_matte: var(--bb-color-white);
254
259
  --sky-color-background-file_drop: var(--bb-color-gray-25);
255
260
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
256
261
  --sky-color-background-list-focus: var(--bb-color-transparent);
@@ -357,6 +362,7 @@
357
362
  --sky-border-radius-pill: var(--bb-border-radius-pill);
358
363
  --sky-border-radius-m: var(--bb-border-radius-050);
359
364
  --sky-border-radius-s: var(--bb-border-radius-025);
365
+ --sky-border-radius-xs: var(--bb-border-radius-012);
360
366
  --sky-border-radius-0: var(--bb-border-radius-0);
361
367
  --sky-font-text_decoration-inline_link-disabled: none;
362
368
  --sky-font-text_decoration-inline_link-focus: none;
@@ -472,8 +478,12 @@
472
478
  --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);
473
479
  --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);
474
480
  --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);
481
+ --sky-size-avatar-l: var(--bb-size-fluid-550);
482
+ --sky-size-avatar-m: var(--bb-size-fluid-350);
483
+ --sky-size-avatar-s: var(--bb-size-fluid-200);
475
484
  --sky-size-thumbnail-l: var(--bb-size-fixed-600);
476
485
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
486
+ --sky-size-width-resize_handle: var(--bb-size-fixed-150);
477
487
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
478
488
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
479
489
  --sky-size-illustration-l: var(--bb-size-fluid-500);
@@ -532,6 +542,8 @@
532
542
  --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
533
543
  --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
534
544
  --sky-space-gap-action_group-0: 0rem;
545
+ --sky-space-inset-thumb: var(--bb-size-fixed-6);
546
+ --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
535
547
  --sky-space-inset-horizontal-left-xl: var(--bb-size-fluid-150);
536
548
  --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
537
549
  --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
@@ -564,8 +576,9 @@
564
576
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
565
577
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
566
578
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
567
- --sky-space-inset-thumb: var(--bb-size-fixed-6);
568
- --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
579
+ --sky-space-inset-thumbnail_matte-l: var(--bb-size-fluid-25);
580
+ --sky-space-inset-thumbnail_matte-m: var(--bb-size-fluid-18);
581
+ --sky-space-inset-thumbnail_matte-s: var(--bb-size-fluid-12);
569
582
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
570
583
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
571
584
  --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
package/scss/modern.css CHANGED
@@ -53,6 +53,7 @@
53
53
  --modern-size-100: 100px;
54
54
  --modern-size-96: 96px;
55
55
  --modern-size-80: 80px;
56
+ --modern-size-65: 65px;
56
57
  --modern-size-64: 64px;
57
58
  --modern-size-48: 48px;
58
59
  --modern-size-44: 44px;
@@ -62,8 +63,10 @@
62
63
  --modern-size-26: 26px;
63
64
  --modern-size-24: 24px;
64
65
  --modern-size-20: 20px;
66
+ --modern-size-19: 19px;
65
67
  --modern-size-16: 16px;
66
68
  --modern-size-15: 15px;
69
+ --modern-size-14: 14px;
67
70
  --modern-size-13: 13px;
68
71
  --modern-size-12: 12px;
69
72
  --modern-size-10: 10px;
@@ -169,6 +172,7 @@
169
172
  --sky-color-border-danger: var(--modern-color-red-50);
170
173
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
171
174
  --sky-color-border-selected: var(--modern-color-blue-74);
175
+ --sky-color-background-thumbnail_matte: var(--modern-color-white);
172
176
  --sky-color-background-file_drop: var(--modern-color-gray-05);
173
177
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
174
178
  --sky-color-background-list-focus: var(--modern-color-transparent);
@@ -251,6 +255,7 @@
251
255
  --sky-border-radius-pill: var(--modern-border-radius-pill);
252
256
  --sky-border-radius-m: var(--modern-border-radius-md);
253
257
  --sky-border-radius-s: var(--modern-border-radius-md);
258
+ --sky-border-radius-xs: var(--modern-border-radius-0);
254
259
  --sky-border-radius-0: var(--modern-border-radius-0);
255
260
  --sky-border-width-separator-row: var(--modern-size-1);
256
261
  --sky-border-width-separator-light: var(--modern-size-1);
@@ -276,8 +281,12 @@
276
281
  --sky-border-width-text_highlight: var(--modern-size-1);
277
282
  --sky-border-width-divider: var(--modern-size-1);
278
283
  --sky-border-width-accent: var(--modern-size-7);
284
+ --sky-size-avatar-l: var(--modern-size-100);
285
+ --sky-size-avatar-m: var(--modern-size-65);
286
+ --sky-size-avatar-s: var(--modern-size-32);
279
287
  --sky-size-thumbnail-l: var(--modern-size-100);
280
288
  --sky-size-max_width-overlay_message: var(--modern-size-236);
289
+ --sky-size-width-resize_handle: var(--modern-size-14);
281
290
  --sky-size-width-viewport-smallest: var(--modern-size-296);
282
291
  --sky-size-illustration-xl: var(--modern-size-96);
283
292
  --sky-size-illustration-l: var(--modern-size-80);
@@ -336,6 +345,8 @@
336
345
  --sky-space-gap-action_group-m: var(--modern-size-10);
337
346
  --sky-space-gap-action_group-s: var(--modern-size-5);
338
347
  --sky-space-gap-action_group-0: 0rem;
348
+ --sky-space-inset-thumb: var(--modern-size-1);
349
+ --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
339
350
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
340
351
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
341
352
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -368,8 +379,9 @@
368
379
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
369
380
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
370
381
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
371
- --sky-space-inset-thumb: var(--modern-size-1);
372
- --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
382
+ --sky-space-inset-thumbnail_matte-l: var(--modern-size-5);
383
+ --sky-space-inset-thumbnail_matte-m: var(--modern-size-3);
384
+ --sky-space-inset-thumbnail_matte-s: var(--modern-size-2);
373
385
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
374
386
  --sky-space-inset-tabs-l: var(--modern-space-lg);
375
387
  --sky-space-inset-tabs-m: var(--modern-space-md);