@blackbaud/skyux-design-tokens 0.0.35 → 0.0.37

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 +22 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +7 -24
  4. package/scss/modern.css +35 -50
package/CHANGELOG.md CHANGED
@@ -2,6 +2,28 @@
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.37](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.36...0.0.37) (2024-10-14)
6
+
7
+
8
+ ### Features
9
+
10
+ * add input label inset ([#102](https://github.com/blackbaud/skyux-design-tokens/issues/102)) ([ed495c8](https://github.com/blackbaud/skyux-design-tokens/commit/ed495c834bbe5f746513bcd4ccadb3d14500e0c3))
11
+ * update input border color ([#104](https://github.com/blackbaud/skyux-design-tokens/issues/104)) ([cb574de](https://github.com/blackbaud/skyux-design-tokens/commit/cb574dec825dbb1b84f06fc258a0b0ac87bf7415))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * update disabled input border color ([#106](https://github.com/blackbaud/skyux-design-tokens/issues/106)) ([8f570bc](https://github.com/blackbaud/skyux-design-tokens/commit/8f570bcb3422d16623cc5f09d7d06bb5bf971bcf))
17
+
18
+ ## [0.0.36](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.35...0.0.36) (2024-10-04)
19
+
20
+
21
+ ### Bug Fixes
22
+
23
+ * line heights and border radii ([#98](https://github.com/blackbaud/skyux-design-tokens/issues/98)) ([842e517](https://github.com/blackbaud/skyux-design-tokens/commit/842e517242f697312cc407a525c73dd4ff259f5c))
24
+ * remove tokens used for font-face at-rules ([#97](https://github.com/blackbaud/skyux-design-tokens/issues/97)) ([1a92a4a](https://github.com/blackbaud/skyux-design-tokens/commit/1a92a4adeddf14f3828ce2581d87b1ac0b1ef5e9))
25
+ * update heading 2 to regular weight ([#100](https://github.com/blackbaud/skyux-design-tokens/issues/100)) ([52af2b3](https://github.com/blackbaud/skyux-design-tokens/commit/52af2b36fa62c62370b3d2eecf3c033b1a31e885))
26
+
5
27
  ## [0.0.35](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.34...0.0.35) (2024-10-02)
6
28
 
7
29
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.35",
3
+ "version": "0.0.37",
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
@@ -114,7 +114,7 @@
114
114
  --bb-border-radius-pill: 999rem;
115
115
  --bb-border-radius-050: 0.5rem;
116
116
  --bb-border-radius-025: 0.25rem;
117
- --bb-border-radius-none: 0rem;
117
+ --bb-border-radius-0: 0rem;
118
118
  --bb-line_height-1000: 1.2308;
119
119
  --bb-line_height-900: 1.1429;
120
120
  --bb-line_height-800: 1.1111;
@@ -209,11 +209,11 @@
209
209
  --sky-color-border-separator-row: var(--bb-color-gray-50);
210
210
  --sky-color-border-separator-dark: var(--bb-color-gray-100);
211
211
  --sky-color-border-input-error: var(--bb-color-red-600);
212
- --sky-color-border-input-disabled: var(--bb-color-gray-100);
212
+ --sky-color-border-input-disabled: var(--bb-color-gray-400);
213
213
  --sky-color-border-input-focus: var(--bb-color-blue-600);
214
214
  --sky-color-border-input-active: var(--bb-color-blue-600);
215
215
  --sky-color-border-input-hover: var(--bb-color-blue-600);
216
- --sky-color-border-input-base: var(--bb-color-gray-100);
216
+ --sky-color-border-input-base: var(--bb-color-gray-400);
217
217
  --sky-color-border-container-base: var(--bb-color-gray-100);
218
218
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
219
219
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
@@ -300,25 +300,6 @@
300
300
  --sky-color-text-default: var(--bb-color-gray-900);
301
301
  }
302
302
  .sky-theme-modern.sky-theme-brand-blackbaud {
303
- --sky-font_face-blkb_sans-bold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format("woff");
304
- --sky-font_face-blkb_sans-bold-weight: 700;
305
- --sky-font_face-blkb_sans-bold-style: normal;
306
- --sky-font_face-blkb_sans-semibold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format("woff");
307
- --sky-font_face-blkb_sans-semibold-weight: 600;
308
- --sky-font_face-blkb_sans-semibold-style: normal;
309
- --sky-font_face-blkb_sans-light-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format("woff");
310
- --sky-font_face-blkb_sans-light-weight: 300;
311
- --sky-font_face-blkb_sans-light-style: normal;
312
- --sky-font_face-blkb_sans-thin-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format("woff");
313
- --sky-font_face-blkb_sans-thin-weight: 100;
314
- --sky-font_face-blkb_sans-thin-style: normal;
315
- --sky-font_face-blkb_sans-italic-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format("woff");
316
- --sky-font_face-blkb_sans-italic-weight: 400;
317
- --sky-font_face-blkb_sans-italic-style: italic;
318
- --sky-font_face-blkb_sans-regular-src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
319
- --sky-font_face-blkb_sans-regular-weight: 400;
320
- --sky-font_face-blkb_sans-regular-style: normal;
321
- --sky-font_face-blkb_sans-name: var(--bb-font-blkb_sans-name);
322
303
  --sky-border-style-separator-row: var(--bb-border-style-dotted);
323
304
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
324
305
  --sky-border-style-elevation: var(--bb-border-style-solid);
@@ -347,8 +328,9 @@
347
328
  --sky-border-width-divider: var(--bb-size-fixed-6);
348
329
  --sky-border-width-accent: var(--bb-size-fixed-37);
349
330
  --sky-border-radius-pill: var(--bb-border-radius-pill);
350
- --sky-border-radius-m: var(--bb-size-fluid-50);
351
- --sky-border-radius-s: var(--bb-size-fluid-25);
331
+ --sky-border-radius-m: var(--bb-border-radius-050);
332
+ --sky-border-radius-s: var(--bb-border-radius-025);
333
+ --sky-border-radius-0: var(--bb-border-radius-0);
352
334
  --sky-font-text_decoration-inline_link-disabled: none;
353
335
  --sky-font-text_decoration-inline_link-focus: none;
354
336
  --sky-font-text_decoration-inline_link-active: underline;
@@ -597,6 +579,7 @@
597
579
  --sky-space-inset-letterbox-top-l: var(--bb-size-fluid-150);
598
580
  --sky-space-inset-letterbox-top-m: var(--bb-size-fluid-100);
599
581
  --sky-space-inset-letterbox-top-s: var(--bb-size-fluid-50);
582
+ --sky-space-inset-input_label-bottom-m: var(--bb-size-fluid-12);
600
583
  --sky-space-inset-input_label-top-m: var(--bb-size-fluid-37);
601
584
  --sky-space-inset-input-left-m: var(--bb-size-fluid-100);
602
585
  --sky-space-inset-input-bottom-m: var(--bb-size-fluid-50);
package/scss/modern.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --modern-border-style-solid: solid;
4
4
  --modern-border-radius-pill: 10rem;
5
5
  --modern-border-radius-md: 6px;
6
+ --modern-border-radius-0: 0rem;
6
7
  --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
7
8
  --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
8
9
  --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
@@ -11,11 +12,11 @@
11
12
  --modern-shadow-size-1: 0 1px 3px 0 var(--modern-color-shadow_color);
12
13
  --modern-shadow-size-0: 0 0 0 0 #000000;
13
14
  --modern-letter_spacing-normal: normal;
14
- --modern-line-height-normal: normal;
15
- --modern-line-height-150: 1.5;
16
- --modern-line-height-115: 1.15;
17
- --modern-line-height-110: 1.1;
18
- --modern-line-height-20: 20px;
15
+ --modern-line_height-normal: normal;
16
+ --modern-line_height-150: 1.5;
17
+ --modern-line_height-115: 1.15;
18
+ --modern-line_height-110: 1.1;
19
+ --modern-line_height-20: 20px;
19
20
  --modern-font-blkb_sans-family: var(--modern-font-blkb_sans-name), var(--modern-font-blkb_sans-fallback);
20
21
  --modern-font-blkb_sans-fallback: Helvetica Neue, Arial, sans-serif;
21
22
  --modern-font-blkb_sans-name: BLKB Sans;
@@ -102,6 +103,7 @@
102
103
  --modern-color-gray-07: #ededee;
103
104
  --modern-color-gray-105: #212327;
104
105
  --modern-color-gray-70: #686c73;
106
+ --modern-color-gray-50: #8c929c;
105
107
  --modern-color-gray-20: #cdcfd2;
106
108
  --modern-color-gray-15: #d2d2d2;
107
109
  }
@@ -117,11 +119,11 @@
117
119
  --sky-color-border-separator-row: var(--modern-color-gray-20);
118
120
  --sky-color-border-separator-dark: var(--modern-color-gray-20);
119
121
  --sky-color-border-input-error: var(--modern-color-red-50);
120
- --sky-color-border-input-disabled: var(--modern-color-gray-15);
122
+ --sky-color-border-input-disabled: var(--modern-color-gray-50);
121
123
  --sky-color-border-input-focus: var(--modern-color-blue-74);
122
124
  --sky-color-border-input-active: var(--modern-color-blue-74);
123
125
  --sky-color-border-input-hover: var(--modern-color-blue-74);
124
- --sky-color-border-input-base: var(--modern-color-gray-15);
126
+ --sky-color-border-input-base: var(--modern-color-gray-50);
125
127
  --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
126
128
  --sky-color-border-action-danger-focus: var(--modern-color-red-30);
127
129
  --sky-color-border-action-danger-active: var(--modern-color-red-30);
@@ -208,33 +210,15 @@
208
210
  --sky-color-text-default: var(--modern-color-gray-105);
209
211
  }
210
212
  .sky-theme-modern {
211
- --sky-font_face-blkb_sans-bold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format("woff");
212
- --sky-font_face-blkb_sans-bold-weight: 700;
213
- --sky-font_face-blkb_sans-bold-style: normal;
214
- --sky-font_face-blkb_sans-semibold-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format("woff");
215
- --sky-font_face-blkb_sans-semibold-weight: 600;
216
- --sky-font_face-blkb_sans-semibold-style: normal;
217
- --sky-font_face-blkb_sans-light-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format("woff");
218
- --sky-font_face-blkb_sans-light-weight: 300;
219
- --sky-font_face-blkb_sans-light-style: normal;
220
- --sky-font_face-blkb_sans-thin-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format("woff");
221
- --sky-font_face-blkb_sans-thin-weight: 100;
222
- --sky-font_face-blkb_sans-thin-style: normal;
223
- --sky-font_face-blkb_sans-italic-src: url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format("woff");
224
- --sky-font_face-blkb_sans-italic-weight: 400;
225
- --sky-font_face-blkb_sans-italic-style: italic;
226
- --sky-font_face-blkb_sans-regular-src: url("https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff") format("woff");
227
- --sky-font_face-blkb_sans-regular-weight: 400;
228
- --sky-font_face-blkb_sans-regular-style: normal;
229
- --sky-font_face-blkb_sans-name: var(--modern-font-blkb_sans-name);
230
213
  --sky-border-style-separator-row: var(--modern-border-style-dotted);
231
214
  --sky-border-style-separator-dark: var(--modern-border-style-solid);
232
215
  --sky-border-style-elevation: var(--modern-border-style-solid);
233
216
  --sky-border-style-divider: var(--modern-border-style-solid);
234
217
  --sky-border-style-accent: var(--modern-border-style-solid);
235
218
  --sky-border-radius-pill: var(--modern-border-radius-pill);
236
- --sky-border-radius-m: var(--modern-size-6);
237
- --sky-border-radius-s: var(--modern-size-6);
219
+ --sky-border-radius-m: var(--modern-border-radius-md);
220
+ --sky-border-radius-s: var(--modern-border-radius-md);
221
+ --sky-border-radius-0: var(--modern-border-radius-0);
238
222
  --sky-border-width-separator-row: var(--modern-size-1);
239
223
  --sky-border-width-separator-dark: var(--modern-size-1);
240
224
  --sky-border-width-input-disabled: var(--modern-size-1);
@@ -379,6 +363,7 @@
379
363
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
380
364
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
381
365
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
366
+ --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
382
367
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
383
368
  --sky-space-inset-input-left-m: var(--modern-size-15);
384
369
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
@@ -412,7 +397,7 @@
412
397
  --sky-font-weight-heading-5: var(--modern-font-weight-semibold);
413
398
  --sky-font-weight-heading-4: var(--modern-font-weight-semibold);
414
399
  --sky-font-weight-heading-3: var(--modern-font-weight-regular);
415
- --sky-font-weight-heading-2: var(--modern-font-weight-light);
400
+ --sky-font-weight-heading-2: var(--modern-font-weight-regular);
416
401
  --sky-font-weight-heading-1: var(--modern-font-weight-light);
417
402
  --sky-font-weight-display-4: var(--modern-font-weight-bold);
418
403
  --sky-font-weight-display-3: var(--modern-font-weight-regular);
@@ -438,7 +423,7 @@
438
423
  --sky-font-style-heading-5: var(--modern-font-style-semibold);
439
424
  --sky-font-style-heading-4: var(--modern-font-style-semibold);
440
425
  --sky-font-style-heading-3: var(--modern-font-style-regular);
441
- --sky-font-style-heading-2: var(--modern-font-style-light);
426
+ --sky-font-style-heading-2: var(--modern-font-style-regular);
442
427
  --sky-font-style-heading-1: var(--modern-font-style-light);
443
428
  --sky-font-style-display-4: var(--modern-font-style-bold);
444
429
  --sky-font-style-display-3: var(--modern-font-style-regular);
@@ -451,26 +436,26 @@
451
436
  --sky-font-style-emphasized: var(--modern-font-style-semibold);
452
437
  --sky-font-style-deemphasized-style: italic;
453
438
  --sky-font-style-deemphasized-weight: 400;
454
- --sky-font-line_height-metric-l: var(--modern-line-height-normal);
455
- --sky-font-line_height-metric-m: var(--modern-line-height-normal);
456
- --sky-font-line_height-metric-s: var(--modern-line-height-normal);
457
- --sky-font-line_height-input-val: var(--modern-line-height-20);
458
- --sky-font-line_height-input-label: var(--modern-line-height-normal);
459
- --sky-font-line_height-hint-m: var(--modern-line-height-normal);
460
- --sky-font-line_height-hint-s: var(--modern-line-height-normal);
461
- --sky-font-line_height-heading-5: var(--modern-line-height-110);
462
- --sky-font-line_height-heading-4: var(--modern-line-height-110);
463
- --sky-font-line_height-heading-3: var(--modern-line-height-110);
464
- --sky-font-line_height-heading-2: var(--modern-line-height-110);
465
- --sky-font-line_height-heading-1: var(--modern-line-height-110);
466
- --sky-font-line_height-display-4: var(--modern-line-height-110);
467
- --sky-font-line_height-display-3: var(--modern-line-height-110);
468
- --sky-font-line_height-display-2: var(--modern-line-height-110);
469
- --sky-font-line_height-display-1: var(--modern-line-height-110);
470
- --sky-font-line_height-body-l: var(--modern-line-height-normal);
471
- --sky-font-line_height-body-m: var(--modern-line-height-150);
472
- --sky-font-line_height-body-s: var(--modern-line-height-normal);
473
- --sky-font-line_height-data_label: var(--modern-line-height-normal);
439
+ --sky-font-line_height-metric-l: var(--modern-line_height-normal);
440
+ --sky-font-line_height-metric-m: var(--modern-line_height-normal);
441
+ --sky-font-line_height-metric-s: var(--modern-line_height-normal);
442
+ --sky-font-line_height-input-val: var(--modern-line_height-20);
443
+ --sky-font-line_height-input-label: var(--modern-line_height-normal);
444
+ --sky-font-line_height-hint-m: var(--modern-line_height-normal);
445
+ --sky-font-line_height-hint-s: var(--modern-line_height-normal);
446
+ --sky-font-line_height-heading-5: var(--modern-line_height-110);
447
+ --sky-font-line_height-heading-4: var(--modern-line_height-110);
448
+ --sky-font-line_height-heading-3: var(--modern-line_height-110);
449
+ --sky-font-line_height-heading-2: var(--modern-line_height-110);
450
+ --sky-font-line_height-heading-1: var(--modern-line_height-110);
451
+ --sky-font-line_height-display-4: var(--modern-line_height-110);
452
+ --sky-font-line_height-display-3: var(--modern-line_height-110);
453
+ --sky-font-line_height-display-2: var(--modern-line_height-110);
454
+ --sky-font-line_height-display-1: var(--modern-line_height-110);
455
+ --sky-font-line_height-body-l: var(--modern-line_height-normal);
456
+ --sky-font-line_height-body-m: var(--modern-line_height-150);
457
+ --sky-font-line_height-body-s: var(--modern-line_height-normal);
458
+ --sky-font-line_height-data_label: var(--modern-line_height-normal);
474
459
  --sky-font-size-metric-l: var(--sky-font-size-display-1);
475
460
  --sky-font-size-metric-m: var(--sky-font-size-display-3);
476
461
  --sky-font-size-metric-s: var(--sky-font-size-display-4);