@blackbaud/skyux-design-tokens 0.0.38 → 0.0.40

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 +15 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +12 -1
  4. package/scss/modern.css +23 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,21 @@
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.40](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.39...0.0.40) (2024-10-22)
6
+
7
+
8
+ ### Features
9
+
10
+ * tokens for light borders ([#113](https://github.com/blackbaud/skyux-design-tokens/issues/113)) ([78fe98b](https://github.com/blackbaud/skyux-design-tokens/commit/78fe98ba1cf8e392c765d4a15bb72ddc1a9d4e44))
11
+
12
+ ## [0.0.39](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.38...0.0.39) (2024-10-18)
13
+
14
+
15
+ ### Features
16
+
17
+ * adding floated tokens for modern ([#112](https://github.com/blackbaud/skyux-design-tokens/issues/112)) ([19daf57](https://github.com/blackbaud/skyux-design-tokens/commit/19daf57a9cb3054db33df47a8e505961b6adcedc))
18
+ * switch additions - border width selected token and thumb tokens ([#101](https://github.com/blackbaud/skyux-design-tokens/issues/101)) ([51ffc59](https://github.com/blackbaud/skyux-design-tokens/commit/51ffc5951a78b610176a1d6704af26b299ccfc2a))
19
+
5
20
  ## [0.0.38](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.37...0.0.38) (2024-10-14)
6
21
 
7
22
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.38",
3
+ "version": "0.0.40",
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
@@ -110,7 +110,7 @@
110
110
  --bb-space-0: 0rem;
111
111
  --bb-border-style-dotted: dotted;
112
112
  --bb-border-style-solid: solid;
113
- --bb-border-radius-circle: 50%;
113
+ --bb-border-radius-round: 50%;
114
114
  --bb-border-radius-pill: 999rem;
115
115
  --bb-border-radius-050: 0.5rem;
116
116
  --bb-border-radius-025: 0.25rem;
@@ -207,6 +207,7 @@
207
207
  --sky-elevation-focus: var(--bb-shadow-gray-2);
208
208
  --sky-elevation-none: var(--bb-shadow-gray-0);
209
209
  --sky-color-border-separator-row: var(--bb-color-gray-50);
210
+ --sky-color-border-separator-light: var(--bb-color-gray-50);
210
211
  --sky-color-border-separator-dark: var(--bb-color-gray-100);
211
212
  --sky-color-border-input-error: var(--bb-color-red-600);
212
213
  --sky-color-border-input-disabled: var(--bb-color-gray-400);
@@ -252,8 +253,13 @@
252
253
  --sky-color-background-nav-active: var(--bb-color-transparent);
253
254
  --sky-color-background-nav-hover: var(--bb-color-transparent);
254
255
  --sky-color-background-nav-base: var(--bb-color-transparent);
256
+ --sky-color-background-selected-success: var(--bb-color-green-300);
257
+ --sky-color-background-selected-warning: var(--bb-color-yellow-300);
258
+ --sky-color-background-selected-danger: var(--bb-color-red-300);
255
259
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
256
260
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
261
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
262
+ --sky-color-background-thumb-base: var(--bb-color-white);
257
263
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
258
264
  --sky-color-background-input-base: var(--bb-color-transparent);
259
265
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
@@ -301,12 +307,15 @@
301
307
  }
302
308
  .sky-theme-modern.sky-theme-brand-blackbaud {
303
309
  --sky-border-style-separator-row: var(--bb-border-style-dotted);
310
+ --sky-border-style-separator-light: var(--bb-border-style-solid);
304
311
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
305
312
  --sky-border-style-elevation: var(--bb-border-style-solid);
306
313
  --sky-border-style-divider: var(--bb-border-style-solid);
307
314
  --sky-border-style-accent: var(--bb-border-style-solid);
308
315
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
316
+ --sky-border-width-separator-light: var(--bb-size-fixed-6);
309
317
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
318
+ --sky-border-width-input-selected: var(--bb-size-fixed-6);
310
319
  --sky-border-width-input-disabled: var(--bb-size-fixed-6);
311
320
  --sky-border-width-input-error: var(--bb-size-fixed-12);
312
321
  --sky-border-width-input-focus: var(--bb-size-fixed-12);
@@ -327,6 +336,7 @@
327
336
  --sky-border-width-elevation: var(--bb-size-fixed-6);
328
337
  --sky-border-width-divider: var(--bb-size-fixed-6);
329
338
  --sky-border-width-accent: var(--bb-size-fixed-37);
339
+ --sky-border-radius-thumb: var(--bb-border-radius-round);
330
340
  --sky-border-radius-pill: var(--bb-border-radius-pill);
331
341
  --sky-border-radius-m: var(--bb-border-radius-050);
332
342
  --sky-border-radius-s: var(--bb-border-radius-025);
@@ -530,6 +540,7 @@
530
540
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
531
541
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
532
542
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
543
+ --sky-space-inset-thumb: var(--bb-size-fixed-6);
533
544
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
534
545
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
535
546
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
package/scss/modern.css CHANGED
@@ -1,9 +1,11 @@
1
1
  .sky-theme-modern {
2
2
  --modern-border-style-dotted: dotted;
3
3
  --modern-border-style-solid: solid;
4
+ --modern-border-radius-round: 50%;
4
5
  --modern-border-radius-pill: 10rem;
5
6
  --modern-border-radius-md: 6px;
6
7
  --modern-border-radius-0: 0rem;
8
+ --modern-shadow-thumb: 0 1px 2px 0 rgba(0,0,0,0.5);
7
9
  --modern-shadow-size-24: 0 7px 27px 3px var(--modern-color-shadow_color);
8
10
  --modern-shadow-size-16: 0 3px 25px 2px var(--modern-color-shadow_color);
9
11
  --modern-shadow-size-8: 0 2px 15px 2px var(--modern-color-shadow_color);
@@ -106,6 +108,7 @@
106
108
  --modern-color-gray-50: #8c929c;
107
109
  --modern-color-gray-20: #cdcfd2;
108
110
  --modern-color-gray-15: #d2d2d2;
111
+ --modern-color-gray-10: #e2e3e4;
109
112
  }
110
113
  .sky-theme-modern {
111
114
  --sky-elevation-overlay-400: var(--modern-shadow-size-24);
@@ -117,6 +120,7 @@
117
120
  --sky-elevation-focus: var(--modern-shadow-size-3);
118
121
  --sky-elevation-none: var(--modern-shadow-size-0);
119
122
  --sky-color-border-separator-row: var(--modern-color-gray-20);
123
+ --sky-color-border-separator-light: var(--modern-color-gray-10);
120
124
  --sky-color-border-separator-dark: var(--modern-color-gray-20);
121
125
  --sky-color-border-input-error: var(--modern-color-red-50);
122
126
  --sky-color-border-input-disabled: var(--modern-color-gray-50);
@@ -162,8 +166,13 @@
162
166
  --sky-color-background-nav-active: var(--modern-color-transparent);
163
167
  --sky-color-background-nav-hover: var(--modern-color-transparent);
164
168
  --sky-color-background-nav-base: var(--modern-color-transparent);
169
+ --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
170
+ --sky-color-background-thumb-base: var(--modern-color-white);
165
171
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
166
172
  --sky-color-background-input-base: var(--modern-color-transparent);
173
+ --sky-color-background-selected-success: var(--modern-color-green-30);
174
+ --sky-color-background-selected-warning: var(--modern-color-yellow-30);
175
+ --sky-color-background-selected-danger: var(--modern-color-red-30);
167
176
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
168
177
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
169
178
  --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
@@ -211,16 +220,20 @@
211
220
  }
212
221
  .sky-theme-modern {
213
222
  --sky-border-style-separator-row: var(--modern-border-style-dotted);
223
+ --sky-border-style-separator-light: var(--modern-border-style-solid);
214
224
  --sky-border-style-separator-dark: var(--modern-border-style-solid);
215
225
  --sky-border-style-elevation: var(--modern-border-style-solid);
216
226
  --sky-border-style-divider: var(--modern-border-style-solid);
217
227
  --sky-border-style-accent: var(--modern-border-style-solid);
228
+ --sky-border-radius-thumb: var(--modern-border-radius-round);
218
229
  --sky-border-radius-pill: var(--modern-border-radius-pill);
219
230
  --sky-border-radius-m: var(--modern-border-radius-md);
220
231
  --sky-border-radius-s: var(--modern-border-radius-md);
221
232
  --sky-border-radius-0: var(--modern-border-radius-0);
222
233
  --sky-border-width-separator-row: var(--modern-size-1);
234
+ --sky-border-width-separator-light: var(--modern-size-1);
223
235
  --sky-border-width-separator-dark: var(--modern-size-1);
236
+ --sky-border-width-input-selected: var(--modern-size-1);
224
237
  --sky-border-width-input-disabled: var(--modern-size-1);
225
238
  --sky-border-width-input-error: var(--modern-size-2);
226
239
  --sky-border-width-input-focus: var(--modern-size-2);
@@ -294,6 +307,15 @@
294
307
  --sky-space-gap-action_group-m: var(--modern-size-10);
295
308
  --sky-space-gap-action_group-s: var(--modern-size-5);
296
309
  --sky-space-gap-action_group-0: 0rem;
310
+ --sky-space-inset-floated-left-m: var(--modern-space-xl);
311
+ --sky-space-inset-floated-left-s: var(--modern-space-lg);
312
+ --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
313
+ --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
314
+ --sky-space-inset-floated-right-m: var(--modern-space-xl);
315
+ --sky-space-inset-floated-right-s: var(--modern-space-lg);
316
+ --sky-space-inset-floated-top-m: var(--modern-space-s);
317
+ --sky-space-inset-floated-top-s: var(--modern-space-xs);
318
+ --sky-space-inset-floated-top-0: var(--modern-space-none);
297
319
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
298
320
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
299
321
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -326,6 +348,7 @@
326
348
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
327
349
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
328
350
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
351
+ --sky-space-inset-thumb: var(--modern-size-1);
329
352
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
330
353
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
331
354
  --sky-space-inset-tabs-l: var(--modern-space-lg);