@blackbaud/skyux-design-tokens 2.0.0-alpha.4 → 2.0.0-alpha.6
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.
- package/CHANGELOG.md +26 -0
- package/assets/scss/blackbaud.css +22 -16
- package/assets/scss/modern.css +3 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,32 @@
|
|
|
2
2
|
|
|
3
3
|
- Added `neutral-medium-dark` token in modern. [#64](https://github.com/blackbaud/skyux-design-tokens/pull/64)
|
|
4
4
|
|
|
5
|
+
## [2.0.0-alpha.6](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.5...2.0.0-alpha.6) (2025-07-18)
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
* add dimmed container background color ([#232](https://github.com/blackbaud/skyux-design-tokens/issues/232)) ([f370faf](https://github.com/blackbaud/skyux-design-tokens/commit/f370faf858cca7b4dcd115a57e84b0eca6588d87))
|
|
11
|
+
|
|
12
|
+
## [2.0.0-alpha.5](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.4...2.0.0-alpha.5) (2025-07-17)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### ⚠ BREAKING CHANGES
|
|
16
|
+
|
|
17
|
+
* tab selected background color ([#239](https://github.com/blackbaud/skyux-design-tokens/issues/239))
|
|
18
|
+
* display type update ([#241](https://github.com/blackbaud/skyux-design-tokens/issues/241))
|
|
19
|
+
* change color of disabled toggle switch thumb ([#237](https://github.com/blackbaud/skyux-design-tokens/issues/237))
|
|
20
|
+
|
|
21
|
+
### Features
|
|
22
|
+
|
|
23
|
+
* display type update ([#241](https://github.com/blackbaud/skyux-design-tokens/issues/241)) ([83233d5](https://github.com/blackbaud/skyux-design-tokens/commit/83233d5a04f826f51a4ad824ce0b6a17b54b5f1b))
|
|
24
|
+
* tab selected background color ([#239](https://github.com/blackbaud/skyux-design-tokens/issues/239)) ([942f688](https://github.com/blackbaud/skyux-design-tokens/commit/942f6887e4e10e9492c68a84c6d290d55f9c7ca2))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### Bug Fixes
|
|
28
|
+
|
|
29
|
+
* change color of disabled toggle switch thumb ([#237](https://github.com/blackbaud/skyux-design-tokens/issues/237)) ([b4d1476](https://github.com/blackbaud/skyux-design-tokens/commit/b4d1476a2f930e99f695dfd6c8ac2eef2f67a1b6))
|
|
30
|
+
|
|
5
31
|
## [2.0.0-alpha.4](https://github.com/blackbaud/skyux-design-tokens/compare/2.0.0-alpha.3...2.0.0-alpha.4) (2025-07-17)
|
|
6
32
|
|
|
7
33
|
|
|
@@ -134,6 +134,7 @@
|
|
|
134
134
|
--bb-font-size-400: 0.9375rem;
|
|
135
135
|
--bb-font-size-500: 1.0625rem;
|
|
136
136
|
--bb-font-size-600: 1.1875rem;
|
|
137
|
+
--bb-font-size-650: 1.3125rem;
|
|
137
138
|
--bb-font-size-700: 1.5rem;
|
|
138
139
|
--bb-font-size-800: 1.6875rem;
|
|
139
140
|
--bb-font-style-italic-style: italic;
|
|
@@ -151,15 +152,16 @@
|
|
|
151
152
|
--bb-font-weight-light: 300;
|
|
152
153
|
--bb-font-weight-regular: 400;
|
|
153
154
|
--bb-font-weight-semibold: 600;
|
|
154
|
-
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
155
|
+
--bb-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.6/assets/images/bb-logo.png');
|
|
155
156
|
--bb-letter_spacing-normal: normal;
|
|
156
157
|
--bb-letter_spacing-wider: 0.16px;
|
|
157
158
|
--bb-line_height-300: calc(18/13);
|
|
158
159
|
--bb-line_height-400: calc(20/15);
|
|
159
160
|
--bb-line_height-500: calc(24/17);
|
|
160
161
|
--bb-line_height-600: calc(28/19);
|
|
162
|
+
--bb-line_height-650: calc(28/21);
|
|
161
163
|
--bb-line_height-700: calc(32/24);
|
|
162
|
-
--bb-line_height-800: calc(36/
|
|
164
|
+
--bb-line_height-800: calc(36/27);
|
|
163
165
|
--bb-opacity-600: .6;
|
|
164
166
|
--bb-shadow-blue-0: 0 0 0 0 rgba(0, 0, 0, 0);
|
|
165
167
|
--bb-size-0: 0rem;
|
|
@@ -270,6 +272,7 @@
|
|
|
270
272
|
--sky-color-background-blocking: var(--bb-color-blocking);
|
|
271
273
|
--sky-color-background-container-base: var(--bb-color-gray-1000);
|
|
272
274
|
--sky-color-background-container-danger: var(--bb-color-red-800);
|
|
275
|
+
--sky-color-background-container-dimmed: var(--bb-color-gray-1000);
|
|
273
276
|
--sky-color-background-container-info: var(--bb-color-blue-800);
|
|
274
277
|
--sky-color-background-container-menu: var(--bb-color-gray-900);
|
|
275
278
|
--sky-color-background-container-success: var(--bb-color-green-900);
|
|
@@ -304,9 +307,10 @@
|
|
|
304
307
|
--sky-color-background-tab-disabled: var(--bb-color-gray-700);
|
|
305
308
|
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
306
309
|
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
310
|
+
--sky-color-background-tab-selected: var(--bb-color-transparent);
|
|
307
311
|
--sky-color-background-text_highlight: var(--bb-color-yellow-800);
|
|
308
312
|
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
309
|
-
--sky-color-background-thumb-disabled: var(--bb-color-gray-
|
|
313
|
+
--sky-color-background-thumb-disabled: var(--bb-color-gray-600);
|
|
310
314
|
--sky-color-background-thumbnail_matte: var(--bb-color-white);
|
|
311
315
|
--sky-color-border-action-danger-active: var(--bb-color-red-200);
|
|
312
316
|
--sky-color-border-action-danger-base: var(--bb-color-red-600);
|
|
@@ -433,6 +437,7 @@
|
|
|
433
437
|
--sky-color-background-blocking: var(--bb-color-blocking);
|
|
434
438
|
--sky-color-background-container-base: var(--bb-color-white);
|
|
435
439
|
--sky-color-background-container-danger: var(--bb-color-red-300);
|
|
440
|
+
--sky-color-background-container-dimmed: var(--bb-color-blue-25);
|
|
436
441
|
--sky-color-background-container-info: var(--bb-color-blue-200);
|
|
437
442
|
--sky-color-background-container-menu: var(--bb-color-white);
|
|
438
443
|
--sky-color-background-container-success: var(--bb-color-green-300);
|
|
@@ -467,9 +472,10 @@
|
|
|
467
472
|
--sky-color-background-tab-disabled: var(--bb-color-gray-50);
|
|
468
473
|
--sky-color-background-tab-focus: var(--bb-color-transparent);
|
|
469
474
|
--sky-color-background-tab-hover: var(--bb-color-transparent);
|
|
475
|
+
--sky-color-background-tab-selected: var(--bb-color-transparent);
|
|
470
476
|
--sky-color-background-text_highlight: var(--bb-color-yellow-400);
|
|
471
477
|
--sky-color-background-thumb-base: var(--bb-color-white);
|
|
472
|
-
--sky-color-background-thumb-disabled: var(--bb-color-gray-
|
|
478
|
+
--sky-color-background-thumb-disabled: var(--bb-color-gray-25);
|
|
473
479
|
--sky-color-background-thumbnail_matte: var(--bb-color-white);
|
|
474
480
|
--sky-color-border-action-danger-active: var(--bb-color-red-1000);
|
|
475
481
|
--sky-color-border-action-danger-base: var(--bb-color-red-600);
|
|
@@ -1084,9 +1090,9 @@
|
|
|
1084
1090
|
--sky-font-line_height-body-m: var(--bb-line_height-400);
|
|
1085
1091
|
--sky-font-line_height-body-s: var(--bb-line_height-300);
|
|
1086
1092
|
--sky-font-line_height-display-1: var(--bb-line_height-700);
|
|
1087
|
-
--sky-font-line_height-display-2: var(--bb-line_height-
|
|
1088
|
-
--sky-font-line_height-display-3: var(--bb-line_height-
|
|
1089
|
-
--sky-font-line_height-display-4: var(--bb-line_height-
|
|
1093
|
+
--sky-font-line_height-display-2: var(--bb-line_height-650);
|
|
1094
|
+
--sky-font-line_height-display-3: var(--bb-line_height-600);
|
|
1095
|
+
--sky-font-line_height-display-4: var(--bb-line_height-500);
|
|
1090
1096
|
--sky-font-line_height-heading-1: var(--bb-line_height-800);
|
|
1091
1097
|
--sky-font-line_height-heading-2: var(--bb-line_height-600);
|
|
1092
1098
|
--sky-font-line_height-heading-3: var(--bb-line_height-500);
|
|
@@ -1100,9 +1106,9 @@
|
|
|
1100
1106
|
--sky-font-size-body-m: var(--bb-font-size-400);
|
|
1101
1107
|
--sky-font-size-body-s: var(--bb-font-size-300);
|
|
1102
1108
|
--sky-font-size-display-1: var(--bb-font-size-700);
|
|
1103
|
-
--sky-font-size-display-2: var(--bb-font-size-
|
|
1104
|
-
--sky-font-size-display-3: var(--bb-font-size-
|
|
1105
|
-
--sky-font-size-display-4: var(--bb-font-size-
|
|
1109
|
+
--sky-font-size-display-2: var(--bb-font-size-650);
|
|
1110
|
+
--sky-font-size-display-3: var(--bb-font-size-600);
|
|
1111
|
+
--sky-font-size-display-4: var(--bb-font-size-500);
|
|
1106
1112
|
--sky-font-size-heading-1: var(--bb-font-size-800);
|
|
1107
1113
|
--sky-font-size-heading-2: var(--bb-font-size-600);
|
|
1108
1114
|
--sky-font-size-heading-3: var(--bb-font-size-500);
|
|
@@ -1115,10 +1121,10 @@
|
|
|
1115
1121
|
--sky-font-style-body-l: var(--bb-font-style-regular);
|
|
1116
1122
|
--sky-font-style-body-m: var(--bb-font-style-regular);
|
|
1117
1123
|
--sky-font-style-body-s: var(--bb-font-style-regular);
|
|
1118
|
-
--sky-font-style-display-1: var(--bb-font-style-
|
|
1119
|
-
--sky-font-style-display-2: var(--bb-font-style-
|
|
1120
|
-
--sky-font-style-display-3: var(--bb-font-style-
|
|
1121
|
-
--sky-font-style-display-4: var(--bb-font-style-
|
|
1124
|
+
--sky-font-style-display-1: var(--bb-font-style-semibold);
|
|
1125
|
+
--sky-font-style-display-2: var(--bb-font-style-semibold);
|
|
1126
|
+
--sky-font-style-display-3: var(--bb-font-style-semibold);
|
|
1127
|
+
--sky-font-style-display-4: var(--bb-font-style-semibold);
|
|
1122
1128
|
--sky-font-style-emphasized: var(--bb-font-style-semibold);
|
|
1123
1129
|
--sky-font-style-heading-1: var(--bb-font-style-regular);
|
|
1124
1130
|
--sky-font-style-heading-2: var(--bb-font-style-semibold);
|
|
@@ -1129,8 +1135,8 @@
|
|
|
1129
1135
|
--sky-font-weight-body-l: var(--bb-font-weight-regular);
|
|
1130
1136
|
--sky-font-weight-body-m: var(--bb-font-weight-regular);
|
|
1131
1137
|
--sky-font-weight-body-s: var(--bb-font-weight-semibold);
|
|
1132
|
-
--sky-font-weight-display-1: var(--bb-font-weight-
|
|
1133
|
-
--sky-font-weight-display-2: var(--bb-font-weight-
|
|
1138
|
+
--sky-font-weight-display-1: var(--bb-font-weight-semibold);
|
|
1139
|
+
--sky-font-weight-display-2: var(--bb-font-weight-semibold);
|
|
1134
1140
|
--sky-font-weight-display-3: var(--bb-font-weight-semibold);
|
|
1135
1141
|
--sky-font-weight-display-4: var(--bb-font-weight-semibold);
|
|
1136
1142
|
--sky-font-weight-emphasized: var(--bb-font-weight-semibold);
|
package/assets/scss/modern.css
CHANGED
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
--modern-font-weight-light: 300;
|
|
75
75
|
--modern-font-weight-regular: 400;
|
|
76
76
|
--modern-font-weight-semibold: 600;
|
|
77
|
-
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.
|
|
77
|
+
--modern-image-logo-primary-src: url('https://sky.blackbaudcdn.net/static/skyux-design-tokens/2.0.0-alpha.6/assets/images/bb-logo.png');
|
|
78
78
|
--modern-letter_spacing-normal: normal;
|
|
79
79
|
--modern-line_height-110: 1.1;
|
|
80
80
|
--modern-line_height-115: 1.15;
|
|
@@ -166,6 +166,7 @@
|
|
|
166
166
|
--sky-color-background-blocking: var(--modern-color-blocking);
|
|
167
167
|
--sky-color-background-container-base: var(--modern-color-white);
|
|
168
168
|
--sky-color-background-container-danger: var(--modern-color-red-30);
|
|
169
|
+
--sky-color-background-container-dimmed: var(--modern-color-transparent);
|
|
169
170
|
--sky-color-background-container-info: var(--modern-color-blue-10);
|
|
170
171
|
--sky-color-background-container-menu: var(--modern-color-white);
|
|
171
172
|
--sky-color-background-container-success: var(--modern-color-green-30);
|
|
@@ -200,6 +201,7 @@
|
|
|
200
201
|
--sky-color-background-tab-disabled: var(--modern-color-transparent);
|
|
201
202
|
--sky-color-background-tab-focus: var(--modern-color-transparent);
|
|
202
203
|
--sky-color-background-tab-hover: var(--modern-color-transparent);
|
|
204
|
+
--sky-color-background-tab-selected: var(--modern-color-transparent);
|
|
203
205
|
--sky-color-background-text_highlight: var(--modern-color-yellow-40);
|
|
204
206
|
--sky-color-background-thumb-base: var(--modern-color-white);
|
|
205
207
|
--sky-color-background-thumb-disabled: var(--modern-color-gray-07);
|