@blackbaud/skyux-design-tokens 0.0.44 → 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 +9 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +26 -14
  4. package/scss/modern.css +12 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
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
+
5
14
  ## [0.0.44](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.43...0.0.44) (2025-02-03)
6
15
 
7
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.44",
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,6 +478,9 @@
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);
477
486
  --sky-size-width-resize_handle: var(--bb-size-fixed-150);
@@ -533,6 +542,8 @@
533
542
  --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
534
543
  --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
535
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));
536
547
  --sky-space-inset-horizontal-left-xl: var(--bb-size-fluid-150);
537
548
  --sky-space-inset-horizontal-left-l: var(--bb-size-fluid-100);
538
549
  --sky-space-inset-horizontal-left-m: var(--bb-size-fluid-75);
@@ -565,8 +576,9 @@
565
576
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
566
577
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
567
578
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
568
- --sky-space-inset-thumb: var(--bb-size-fixed-6);
569
- --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);
570
582
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
571
583
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
572
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,6 +63,7 @@
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;
67
69
  --modern-size-14: 14px;
@@ -170,6 +172,7 @@
170
172
  --sky-color-border-danger: var(--modern-color-red-50);
171
173
  --sky-color-border-selected_soft: var(--modern-color-blue-30);
172
174
  --sky-color-border-selected: var(--modern-color-blue-74);
175
+ --sky-color-background-thumbnail_matte: var(--modern-color-white);
173
176
  --sky-color-background-file_drop: var(--modern-color-gray-05);
174
177
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
175
178
  --sky-color-background-list-focus: var(--modern-color-transparent);
@@ -252,6 +255,7 @@
252
255
  --sky-border-radius-pill: var(--modern-border-radius-pill);
253
256
  --sky-border-radius-m: var(--modern-border-radius-md);
254
257
  --sky-border-radius-s: var(--modern-border-radius-md);
258
+ --sky-border-radius-xs: var(--modern-border-radius-0);
255
259
  --sky-border-radius-0: var(--modern-border-radius-0);
256
260
  --sky-border-width-separator-row: var(--modern-size-1);
257
261
  --sky-border-width-separator-light: var(--modern-size-1);
@@ -277,6 +281,9 @@
277
281
  --sky-border-width-text_highlight: var(--modern-size-1);
278
282
  --sky-border-width-divider: var(--modern-size-1);
279
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);
280
287
  --sky-size-thumbnail-l: var(--modern-size-100);
281
288
  --sky-size-max_width-overlay_message: var(--modern-size-236);
282
289
  --sky-size-width-resize_handle: var(--modern-size-14);
@@ -338,6 +345,8 @@
338
345
  --sky-space-gap-action_group-m: var(--modern-size-10);
339
346
  --sky-space-gap-action_group-s: var(--modern-size-5);
340
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));
341
350
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
342
351
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
343
352
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -370,8 +379,9 @@
370
379
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
371
380
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
372
381
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
373
- --sky-space-inset-thumb: var(--modern-size-1);
374
- --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);
375
385
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
376
386
  --sky-space-inset-tabs-l: var(--modern-space-lg);
377
387
  --sky-space-inset-tabs-m: var(--modern-space-md);