@blackbaud/skyux-design-tokens 0.0.38 → 0.0.39

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 +8 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +9 -1
  4. package/scss/modern.css +19 -0
package/CHANGELOG.md CHANGED
@@ -2,6 +2,14 @@
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.39](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.38...0.0.39) (2024-10-18)
6
+
7
+
8
+ ### Features
9
+
10
+ * 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))
11
+ * 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))
12
+
5
13
  ## [0.0.38](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.37...0.0.38) (2024-10-14)
6
14
 
7
15
 
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.39",
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;
@@ -252,8 +252,13 @@
252
252
  --sky-color-background-nav-active: var(--bb-color-transparent);
253
253
  --sky-color-background-nav-hover: var(--bb-color-transparent);
254
254
  --sky-color-background-nav-base: var(--bb-color-transparent);
255
+ --sky-color-background-selected-success: var(--bb-color-green-300);
256
+ --sky-color-background-selected-warning: var(--bb-color-yellow-300);
257
+ --sky-color-background-selected-danger: var(--bb-color-red-300);
255
258
  --sky-color-background-selected-soft: var(--bb-color-blue-100);
256
259
  --sky-color-background-selected-heavy: var(--bb-color-blue-600);
260
+ --sky-color-background-thumb-disabled: var(--bb-color-gray-50);
261
+ --sky-color-background-thumb-base: var(--bb-color-white);
257
262
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
258
263
  --sky-color-background-input-base: var(--bb-color-transparent);
259
264
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
@@ -307,6 +312,7 @@
307
312
  --sky-border-style-accent: var(--bb-border-style-solid);
308
313
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
309
314
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
315
+ --sky-border-width-input-selected: var(--bb-size-fixed-6);
310
316
  --sky-border-width-input-disabled: var(--bb-size-fixed-6);
311
317
  --sky-border-width-input-error: var(--bb-size-fixed-12);
312
318
  --sky-border-width-input-focus: var(--bb-size-fixed-12);
@@ -327,6 +333,7 @@
327
333
  --sky-border-width-elevation: var(--bb-size-fixed-6);
328
334
  --sky-border-width-divider: var(--bb-size-fixed-6);
329
335
  --sky-border-width-accent: var(--bb-size-fixed-37);
336
+ --sky-border-radius-thumb: var(--bb-border-radius-round);
330
337
  --sky-border-radius-pill: var(--bb-border-radius-pill);
331
338
  --sky-border-radius-m: var(--bb-border-radius-050);
332
339
  --sky-border-radius-s: var(--bb-border-radius-025);
@@ -530,6 +537,7 @@
530
537
  --sky-space-inset-vertical-top-l: var(--bb-size-fluid-100);
531
538
  --sky-space-inset-vertical-top-m: var(--bb-size-fluid-75);
532
539
  --sky-space-inset-vertical-top-s: var(--bb-size-fluid-50);
540
+ --sky-space-inset-thumb: var(--bb-size-fixed-6);
533
541
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
534
542
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
535
543
  --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);
@@ -162,8 +164,13 @@
162
164
  --sky-color-background-nav-active: var(--modern-color-transparent);
163
165
  --sky-color-background-nav-hover: var(--modern-color-transparent);
164
166
  --sky-color-background-nav-base: var(--modern-color-transparent);
167
+ --sky-color-background-thumb-disabled: var(--modern-color-gray-07);
168
+ --sky-color-background-thumb-base: var(--modern-color-white);
165
169
  --sky-color-background-input-disabled: var(--modern-color-gray-07);
166
170
  --sky-color-background-input-base: var(--modern-color-transparent);
171
+ --sky-color-background-selected-success: var(--modern-color-green-30);
172
+ --sky-color-background-selected-warning: var(--modern-color-yellow-30);
173
+ --sky-color-background-selected-danger: var(--modern-color-red-30);
167
174
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
168
175
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
169
176
  --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
@@ -215,12 +222,14 @@
215
222
  --sky-border-style-elevation: var(--modern-border-style-solid);
216
223
  --sky-border-style-divider: var(--modern-border-style-solid);
217
224
  --sky-border-style-accent: var(--modern-border-style-solid);
225
+ --sky-border-radius-thumb: var(--modern-border-radius-round);
218
226
  --sky-border-radius-pill: var(--modern-border-radius-pill);
219
227
  --sky-border-radius-m: var(--modern-border-radius-md);
220
228
  --sky-border-radius-s: var(--modern-border-radius-md);
221
229
  --sky-border-radius-0: var(--modern-border-radius-0);
222
230
  --sky-border-width-separator-row: var(--modern-size-1);
223
231
  --sky-border-width-separator-dark: var(--modern-size-1);
232
+ --sky-border-width-input-selected: var(--modern-size-1);
224
233
  --sky-border-width-input-disabled: var(--modern-size-1);
225
234
  --sky-border-width-input-error: var(--modern-size-2);
226
235
  --sky-border-width-input-focus: var(--modern-size-2);
@@ -294,6 +303,15 @@
294
303
  --sky-space-gap-action_group-m: var(--modern-size-10);
295
304
  --sky-space-gap-action_group-s: var(--modern-size-5);
296
305
  --sky-space-gap-action_group-0: 0rem;
306
+ --sky-space-inset-floated-left-m: var(--modern-space-xl);
307
+ --sky-space-inset-floated-left-s: var(--modern-space-lg);
308
+ --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
309
+ --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
310
+ --sky-space-inset-floated-right-m: var(--modern-space-xl);
311
+ --sky-space-inset-floated-right-s: var(--modern-space-lg);
312
+ --sky-space-inset-floated-top-m: var(--modern-space-s);
313
+ --sky-space-inset-floated-top-s: var(--modern-space-xs);
314
+ --sky-space-inset-floated-top-0: var(--modern-space-none);
297
315
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
298
316
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
299
317
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -326,6 +344,7 @@
326
344
  --sky-space-inset-vertical-top-l: var(--modern-space-lg);
327
345
  --sky-space-inset-vertical-top-m: var(--modern-space-md);
328
346
  --sky-space-inset-vertical-top-s: var(--modern-space-s);
347
+ --sky-space-inset-thumb: var(--modern-size-1);
329
348
  --sky-space-inset-switch: calc(var(--sky-size-switch) + var(--sky-space-gap-label-s));
330
349
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
331
350
  --sky-space-inset-tabs-l: var(--modern-space-lg);