@blackbaud/skyux-design-tokens 0.0.40 → 0.0.42

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 +31 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +35 -6
  4. package/scss/modern.css +53 -14
package/CHANGELOG.md CHANGED
@@ -2,6 +2,37 @@
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.42](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.41...0.0.42) (2024-11-19)
6
+
7
+
8
+ ### Features
9
+
10
+ * file attach tokens ([#124](https://github.com/blackbaud/skyux-design-tokens/issues/124)) ([02cfa91](https://github.com/blackbaud/skyux-design-tokens/commit/02cfa91e53cbfc059136bdf9a6c62345f1d1e41e))
11
+
12
+
13
+ ### Bug Fixes
14
+
15
+ * move border.width.selected out of action ([#121](https://github.com/blackbaud/skyux-design-tokens/issues/121)) ([ff72d51](https://github.com/blackbaud/skyux-design-tokens/commit/ff72d514d91988c3f8b3c45a3326a256aa87dc15))
16
+
17
+ ## [0.0.41](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.40...0.0.41) (2024-10-29)
18
+
19
+
20
+ ### Features
21
+
22
+ * add bottomless medium inset ([#115](https://github.com/blackbaud/skyux-design-tokens/issues/115)) ([a511cbd](https://github.com/blackbaud/skyux-design-tokens/commit/a511cbd630bc4abb76b01530494bb328a31ba193))
23
+ * add size.icon.xxs ([#119](https://github.com/blackbaud/skyux-design-tokens/issues/119)) ([d2a8be7](https://github.com/blackbaud/skyux-design-tokens/commit/d2a8be794262ce6d5884bba7c600f7efe5970681))
24
+ * balanced.xxs and color.border.selected_soft ([#123](https://github.com/blackbaud/skyux-design-tokens/issues/123)) ([4682d81](https://github.com/blackbaud/skyux-design-tokens/commit/4682d81b178acc7e1b618c3cf4721cd6bd608fb3))
25
+ * new button variants ([#111](https://github.com/blackbaud/skyux-design-tokens/issues/111)) ([a69d3a2](https://github.com/blackbaud/skyux-design-tokens/commit/a69d3a24d8a52ac33bccdaa14bc2f9dac09f37dc))
26
+ * new round tokens ([#118](https://github.com/blackbaud/skyux-design-tokens/issues/118)) ([6d9553f](https://github.com/blackbaud/skyux-design-tokens/commit/6d9553f516ba09531cb63d08f04eae924221baae))
27
+ * new size and form gap tokens for file attach ([#122](https://github.com/blackbaud/skyux-design-tokens/issues/122)) ([1c234cf](https://github.com/blackbaud/skyux-design-tokens/commit/1c234cfe7c06df0457a6b75d78d77a31c6721c6d))
28
+ * new space for use in color picker, add in letterbox m modern ([#117](https://github.com/blackbaud/skyux-design-tokens/issues/117)) ([0705485](https://github.com/blackbaud/skyux-design-tokens/commit/0705485616decedecde7b5828c67484c502dcca4))
29
+ * text_highlight tokens for colors and border width ([#109](https://github.com/blackbaud/skyux-design-tokens/issues/109)) ([015ee57](https://github.com/blackbaud/skyux-design-tokens/commit/015ee57b31fef4a07ca2a42c1e4f8ed0297bd4ad))
30
+
31
+
32
+ ### Bug Fixes
33
+
34
+ * removed border.width.input.selected ([#120](https://github.com/blackbaud/skyux-design-tokens/issues/120)) ([46ec521](https://github.com/blackbaud/skyux-design-tokens/commit/46ec5210d8a1a9b6c3b2b7d892b61accd6a23ac4))
35
+
5
36
  ## [0.0.40](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.39...0.0.40) (2024-10-22)
6
37
 
7
38
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.40",
3
+ "version": "0.0.42",
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
@@ -3,6 +3,7 @@
3
3
  --bb-size-fixed-6000: 960px;
4
4
  --bb-size-fixed-4000: 640px;
5
5
  --bb-size-fixed-2000: 320px;
6
+ --bb-size-fixed-600: 96px;
6
7
  --bb-size-fixed-250: 36px;
7
8
  --bb-size-fixed-150: 24px;
8
9
  --bb-size-fixed-125: 20px;
@@ -216,6 +217,11 @@
216
217
  --sky-color-border-input-hover: var(--bb-color-blue-600);
217
218
  --sky-color-border-input-base: var(--bb-color-gray-400);
218
219
  --sky-color-border-container-base: var(--bb-color-gray-100);
220
+ --sky-color-border-action-input-disabled: var(--bb-color-gray-400);
221
+ --sky-color-border-action-input-focus: var(--bb-color-blue-600);
222
+ --sky-color-border-action-input-active: var(--bb-color-blue-600);
223
+ --sky-color-border-action-input-hover: var(--bb-color-blue-600);
224
+ --sky-color-border-action-input-base: var(--bb-color-gray-400);
219
225
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
220
226
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
221
227
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
@@ -236,13 +242,16 @@
236
242
  --sky-color-border-action-primary-active: var(--bb-color-blue-200);
237
243
  --sky-color-border-action-primary-hover: var(--bb-color-blue-200);
238
244
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
245
+ --sky-color-border-text_highlight: var(--bb-color-yellow-800);
239
246
  --sky-color-border-elevation: var(--bb-color-gray-100);
240
247
  --sky-color-border-divider: var(--bb-color-gray-100);
241
248
  --sky-color-border-info: var(--bb-color-blue-600);
242
249
  --sky-color-border-success: var(--bb-color-green-600);
243
250
  --sky-color-border-warning: var(--bb-color-yellow-600);
244
251
  --sky-color-border-danger: var(--bb-color-red-600);
252
+ --sky-color-border-selected_soft: var(--bb-color-blue-300);
245
253
  --sky-color-border-selected: var(--bb-color-blue-600);
254
+ --sky-color-background-file_drop: var(--bb-color-gray-25);
246
255
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
247
256
  --sky-color-background-list-focus: var(--bb-color-transparent);
248
257
  --sky-color-background-list-active: var(--bb-color-transparent);
@@ -262,6 +271,11 @@
262
271
  --sky-color-background-thumb-base: var(--bb-color-white);
263
272
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
264
273
  --sky-color-background-input-base: var(--bb-color-transparent);
274
+ --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
275
+ --sky-color-background-action-input-focus: var(--bb-color-transparent);
276
+ --sky-color-background-action-input-active: var(--bb-color-transparent);
277
+ --sky-color-background-action-input-hover: var(--bb-color-transparent);
278
+ --sky-color-background-action-input-base: var(--bb-color-transparent);
265
279
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
266
280
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
267
281
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
@@ -288,6 +302,7 @@
288
302
  --sky-color-background-container-danger: var(--bb-color-red-300);
289
303
  --sky-color-background-container-menu: var(--bb-color-white);
290
304
  --sky-color-background-container-base: var(--bb-color-white);
305
+ --sky-color-background-text_highlight: var(--bb-color-yellow-400);
291
306
  --sky-color-background-scrim: var(--bb-color-scrim);
292
307
  --sky-color-background-page: var(--bb-color-gray-25);
293
308
  --sky-color-icon-action: var(--bb-color-blue-600);
@@ -298,9 +313,10 @@
298
313
  --sky-color-icon-danger: var(--bb-color-red-600);
299
314
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
300
315
  --sky-color-icon-default: var(--bb-color-gray-900);
316
+ --sky-color-text-link_highlighted: var(--bb-color-blue-800);
301
317
  --sky-color-text-heading: var(--bb-color-blue-800);
302
318
  --sky-color-text-inverse: var(--bb-color-white);
303
- --sky-color-text-danger: var(--bb-color-red-700);
319
+ --sky-color-text-danger: var(--bb-color-red-600);
304
320
  --sky-color-text-action: var(--bb-color-blue-600);
305
321
  --sky-color-text-deemphasized: var(--bb-color-gray-600);
306
322
  --sky-color-text-default: var(--bb-color-gray-900);
@@ -315,7 +331,10 @@
315
331
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
316
332
  --sky-border-width-separator-light: var(--bb-size-fixed-6);
317
333
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
318
- --sky-border-width-input-selected: var(--bb-size-fixed-6);
334
+ --sky-border-width-selected-xl: var(--bb-size-fixed-37);
335
+ --sky-border-width-selected-l: var(--bb-size-fixed-25);
336
+ --sky-border-width-selected-m: var(--bb-size-fixed-12);
337
+ --sky-border-width-selected-s: var(--bb-size-fixed-6);
319
338
  --sky-border-width-input-disabled: var(--bb-size-fixed-6);
320
339
  --sky-border-width-input-error: var(--bb-size-fixed-12);
321
340
  --sky-border-width-input-focus: var(--bb-size-fixed-12);
@@ -323,10 +342,6 @@
323
342
  --sky-border-width-input-hover: var(--bb-size-fixed-6);
324
343
  --sky-border-width-input-base: var(--bb-size-fixed-6);
325
344
  --sky-border-width-container-base: var(--bb-size-fixed-6);
326
- --sky-border-width-action-selected-xl: var(--bb-size-fixed-37);
327
- --sky-border-width-action-selected-l: var(--bb-size-fixed-25);
328
- --sky-border-width-action-selected-m: var(--bb-size-fixed-12);
329
- --sky-border-width-action-selected-s: var(--bb-size-fixed-6);
330
345
  --sky-border-width-action-disabled: var(--bb-size-fixed-6);
331
346
  --sky-border-width-action-error: var(--bb-size-fixed-12);
332
347
  --sky-border-width-action-focus: var(--bb-size-fixed-12);
@@ -334,8 +349,10 @@
334
349
  --sky-border-width-action-hover: var(--bb-size-fixed-6);
335
350
  --sky-border-width-action-base: var(--bb-size-fixed-6);
336
351
  --sky-border-width-elevation: var(--bb-size-fixed-6);
352
+ --sky-border-width-text_highlight: var(--bb-size-fixed-6);
337
353
  --sky-border-width-divider: var(--bb-size-fixed-6);
338
354
  --sky-border-width-accent: var(--bb-size-fixed-37);
355
+ --sky-border-radius-round: var(--bb-border-radius-round);
339
356
  --sky-border-radius-thumb: var(--bb-border-radius-round);
340
357
  --sky-border-radius-pill: var(--bb-border-radius-pill);
341
358
  --sky-border-radius-m: var(--bb-border-radius-050);
@@ -455,6 +472,7 @@
455
472
  --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);
456
473
  --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);
457
474
  --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);
475
+ --sky-size-thumbnail-l: var(--bb-size-fixed-600);
458
476
  --sky-size-max_width-overlay_message: var(--bb-size-reading_container-max_width);
459
477
  --sky-size-width-viewport-smallest: var(--bb-size-fixed-2000);
460
478
  --sky-size-illustration-xl: var(--bb-size-fluid-600);
@@ -465,6 +483,9 @@
465
483
  --sky-size-icon-l: var(--bb-size-fluid-150);
466
484
  --sky-size-icon-m: var(--bb-size-fluid-125);
467
485
  --sky-size-icon-s: var(--bb-size-fluid-100);
486
+ --sky-size-icon-xs: var(--bb-size-fluid-50);
487
+ --sky-size-icon-xxs: var(--bb-size-fluid-25);
488
+ --sky-size-picker_btn: var(--bb-size-fluid-200);
468
489
  --sky-size-switch: var(--bb-size-fluid-125);
469
490
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
470
491
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
@@ -478,11 +499,13 @@
478
499
  --sky-space-inline-m: var(--bb-size-fluid-75);
479
500
  --sky-space-inline-s: var(--bb-size-fluid-50);
480
501
  --sky-space-inline-xs: var(--bb-size-fluid-25);
502
+ --sky-space-inline-xxs: var(--bb-size-fluid-12);
481
503
  --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
482
504
  --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
483
505
  --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
484
506
  --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
485
507
  --sky-space-gap-text_action-0: 0rem;
508
+ --sky-space-gap-stacked_supplemental-l: var(--bb-size-fluid-100);
486
509
  --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
487
510
  --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
488
511
  --sky-space-gap-stacked_supplemental-0: 0rem;
@@ -502,6 +525,7 @@
502
525
  --sky-space-gap-form-l: var(--bb-size-fluid-100);
503
526
  --sky-space-gap-form-m: var(--bb-size-fluid-75);
504
527
  --sky-space-gap-form-s: var(--bb-size-fluid-50);
528
+ --sky-space-gap-form-xs: var(--bb-size-fluid-25);
505
529
  --sky-space-gap-form-0: 0rem;
506
530
  --sky-space-gap-action_group-xl: var(--bb-size-fluid-100);
507
531
  --sky-space-gap-action_group-l: var(--bb-size-fluid-75);
@@ -607,16 +631,21 @@
607
631
  --sky-space-inset-floated-top-0: 0rem;
608
632
  --sky-space-inset-bottomless-left-xl: var(--bb-size-fluid-150);
609
633
  --sky-space-inset-bottomless-left-l: var(--bb-size-fluid-100);
634
+ --sky-space-inset-bottomless-left-m: var(--bb-size-fluid-75);
610
635
  --sky-space-inset-bottomless-bottom-xl: var(--bb-size-fluid-0);
611
636
  --sky-space-inset-bottomless-bottom-l: var(--bb-size-fluid-0);
637
+ --sky-space-inset-bottomless-bottom-m: var(--bb-size-fluid-0);
612
638
  --sky-space-inset-bottomless-right-xl: var(--bb-size-fluid-150);
613
639
  --sky-space-inset-bottomless-right-l: var(--bb-size-fluid-100);
640
+ --sky-space-inset-bottomless-right-m: var(--bb-size-fluid-75);
614
641
  --sky-space-inset-bottomless-top-xl: var(--bb-size-fluid-150);
615
642
  --sky-space-inset-bottomless-top-l: var(--bb-size-fluid-100);
643
+ --sky-space-inset-bottomless-top-m: var(--bb-size-fluid-75);
616
644
  --sky-space-inset-balanced-xl: var(--bb-size-fluid-150);
617
645
  --sky-space-inset-balanced-l: var(--bb-size-fluid-100);
618
646
  --sky-space-inset-balanced-m: var(--bb-size-fluid-75);
619
647
  --sky-space-inset-balanced-s: var(--bb-size-fluid-50);
620
648
  --sky-space-inset-balanced-xs: var(--bb-size-fluid-25);
649
+ --sky-space-inset-balanced-xxs: var(--bb-size-fluid-12);
621
650
  --sky-space-inset-balanced-none: 0rem;
622
651
  }
package/scss/modern.css CHANGED
@@ -50,11 +50,13 @@
50
50
  --modern-size-296: 296px;
51
51
  --modern-size-276: 276px;
52
52
  --modern-size-236: 236px;
53
+ --modern-size-100: 100px;
53
54
  --modern-size-96: 96px;
54
55
  --modern-size-80: 80px;
55
56
  --modern-size-64: 64px;
56
57
  --modern-size-48: 48px;
57
58
  --modern-size-44: 44px;
59
+ --modern-size-40: 40px;
58
60
  --modern-size-32: 32px;
59
61
  --modern-size-30: 30px;
60
62
  --modern-size-26: 26px;
@@ -84,11 +86,14 @@
84
86
  --modern-space-none: 0rem;
85
87
  --modern-color-sky_blue-40: #40c7f4;
86
88
  --modern-color-sky_blue-20: #bfecfb;
89
+ --modern-color-yellow-80: #c57c00;
87
90
  --modern-color-yellow-50: #fbb034;
91
+ --modern-color-yellow-40: #fcd085;
88
92
  --modern-color-yellow-30: #ffd597;
89
93
  --modern-color-green-50: #72bf44;
90
94
  --modern-color-green-30: #b7da9b;
91
95
  --modern-color-blue-05: #ebfbff;
96
+ --modern-color-blue-80: #0d5ead;
92
97
  --modern-color-blue-74: #1870b8;
93
98
  --modern-color-blue-50: #00b4f1;
94
99
  --modern-color-blue-30: #81d4f7;
@@ -103,6 +108,7 @@
103
108
  --modern-color-red-30: #f7a08f;
104
109
  --modern-color-gray-005: #fcfcfc;
105
110
  --modern-color-gray-07: #ededee;
111
+ --modern-color-gray-05: #eeeeef;
106
112
  --modern-color-gray-105: #212327;
107
113
  --modern-color-gray-70: #686c73;
108
114
  --modern-color-gray-50: #8c929c;
@@ -128,6 +134,11 @@
128
134
  --sky-color-border-input-active: var(--modern-color-blue-74);
129
135
  --sky-color-border-input-hover: var(--modern-color-blue-74);
130
136
  --sky-color-border-input-base: var(--modern-color-gray-50);
137
+ --sky-color-border-action-input-disabled: var(--modern-color-gray-50);
138
+ --sky-color-border-action-input-focus: var(--modern-color-blue-74);
139
+ --sky-color-border-action-input-active: var(--modern-color-blue-74);
140
+ --sky-color-border-action-input-hover: var(--modern-color-blue-74);
141
+ --sky-color-border-action-input-base: var(--modern-color-gray-50);
131
142
  --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
132
143
  --sky-color-border-action-danger-focus: var(--modern-color-red-30);
133
144
  --sky-color-border-action-danger-active: var(--modern-color-red-30);
@@ -149,13 +160,16 @@
149
160
  --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
150
161
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
151
162
  --sky-color-border-container-base: var(--modern-color-gray-15);
163
+ --sky-color-border-text_highlight: var(--modern-color-yellow-80);
152
164
  --sky-color-border-elevation: var(--modern-color-gray-15);
153
165
  --sky-color-border-divider: var(--modern-color-gray-15);
154
166
  --sky-color-border-info: var(--modern-color-blue-50);
155
167
  --sky-color-border-success: var(--modern-color-green-50);
156
168
  --sky-color-border-warning: var(--modern-color-yellow-50);
157
169
  --sky-color-border-danger: var(--modern-color-red-50);
170
+ --sky-color-border-selected_soft: var(--modern-color-blue-30);
158
171
  --sky-color-border-selected: var(--modern-color-blue-74);
172
+ --sky-color-background-file_drop: var(--modern-color-gray-05);
159
173
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
160
174
  --sky-color-background-list-focus: var(--modern-color-transparent);
161
175
  --sky-color-background-list-active: var(--modern-color-transparent);
@@ -175,6 +189,11 @@
175
189
  --sky-color-background-selected-danger: var(--modern-color-red-30);
176
190
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
177
191
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
192
+ --sky-color-background-action-input-disabled: var(--modern-color-gray-07);
193
+ --sky-color-background-action-input-focus: var(--modern-color-transparent);
194
+ --sky-color-background-action-input-active: var(--modern-color-transparent);
195
+ --sky-color-background-action-input-hover: var(--modern-color-transparent);
196
+ --sky-color-background-action-input-base: var(--modern-color-transparent);
178
197
  --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
179
198
  --sky-color-background-action-danger-focus: var(--modern-color-red-70);
180
199
  --sky-color-background-action-danger-active: var(--modern-color-red-70);
@@ -201,6 +220,7 @@
201
220
  --sky-color-background-container-danger: var(--modern-color-red-30);
202
221
  --sky-color-background-container-menu: var(--modern-color-white);
203
222
  --sky-color-background-container-base: var(--modern-color-white);
223
+ --sky-color-background-text_highlight: var(--modern-color-yellow-40);
204
224
  --sky-color-background-scrim: var(--modern-color-scrim);
205
225
  --sky-color-background-page: var(--modern-color-gray-005);
206
226
  --sky-color-icon-action: var(--modern-color-blue-74);
@@ -211,6 +231,7 @@
211
231
  --sky-color-icon-danger: var(--modern-color-red-50);
212
232
  --sky-color-icon-deemphasized: var(--modern-color-gray-70);
213
233
  --sky-color-icon-default: var(--modern-color-gray-105);
234
+ --sky-color-text-link_highlight: var(--modern-color-blue-80);
214
235
  --sky-color-text-heading: var(--modern-color-gray-105);
215
236
  --sky-color-text-inverse: var(--modern-color-white);
216
237
  --sky-color-text-danger: var(--modern-color-red-70);
@@ -225,6 +246,7 @@
225
246
  --sky-border-style-elevation: var(--modern-border-style-solid);
226
247
  --sky-border-style-divider: var(--modern-border-style-solid);
227
248
  --sky-border-style-accent: var(--modern-border-style-solid);
249
+ --sky-border-radius-round: var(--modern-border-radius-round);
228
250
  --sky-border-radius-thumb: var(--modern-border-radius-round);
229
251
  --sky-border-radius-pill: var(--modern-border-radius-pill);
230
252
  --sky-border-radius-m: var(--modern-border-radius-md);
@@ -233,7 +255,10 @@
233
255
  --sky-border-width-separator-row: var(--modern-size-1);
234
256
  --sky-border-width-separator-light: var(--modern-size-1);
235
257
  --sky-border-width-separator-dark: var(--modern-size-1);
236
- --sky-border-width-input-selected: var(--modern-size-1);
258
+ --sky-border-width-selected-xl: var(--modern-size-6);
259
+ --sky-border-width-selected-l: var(--modern-size-4);
260
+ --sky-border-width-selected-m: var(--modern-size-2);
261
+ --sky-border-width-selected-s: var(--modern-size-1);
237
262
  --sky-border-width-input-disabled: var(--modern-size-1);
238
263
  --sky-border-width-input-error: var(--modern-size-2);
239
264
  --sky-border-width-input-focus: var(--modern-size-2);
@@ -241,10 +266,6 @@
241
266
  --sky-border-width-input-hover: var(--modern-size-1);
242
267
  --sky-border-width-input-base: var(--modern-size-1);
243
268
  --sky-border-width-container-base: var(--modern-size-1);
244
- --sky-border-width-action-selected-xl: var(--modern-size-6);
245
- --sky-border-width-action-selected-l: var(--modern-size-4);
246
- --sky-border-width-action-selected-m: var(--modern-size-2);
247
- --sky-border-width-action-selected-s: var(--modern-size-1);
248
269
  --sky-border-width-action-disabled: var(--modern-size-1);
249
270
  --sky-border-width-action-error: var(--modern-size-2);
250
271
  --sky-border-width-action-focus: var(--modern-size-2);
@@ -252,8 +273,10 @@
252
273
  --sky-border-width-action-hover: var(--modern-size-1);
253
274
  --sky-border-width-action-base: var(--modern-size-1);
254
275
  --sky-border-width-elevation: var(--modern-size-1);
276
+ --sky-border-width-text_highlight: var(--modern-size-1);
255
277
  --sky-border-width-divider: var(--modern-size-1);
256
278
  --sky-border-width-accent: var(--modern-size-7);
279
+ --sky-size-thumbnail-l: var(--modern-size-100);
257
280
  --sky-size-max_width-overlay_message: var(--modern-size-236);
258
281
  --sky-size-width-viewport-smallest: var(--modern-size-296);
259
282
  --sky-size-illustration-xl: var(--modern-size-96);
@@ -264,6 +287,9 @@
264
287
  --sky-size-icon-l: var(--modern-size-24);
265
288
  --sky-size-icon-m: var(--modern-size-20);
266
289
  --sky-size-icon-s: var(--modern-size-16);
290
+ --sky-size-icon-xs: var(--modern-size-10);
291
+ --sky-size-icon-xxs: var(--modern-size-5);
292
+ --sky-size-picker_btn: var(--modern-size-30);
267
293
  --sky-size-switch: var(--modern-size-26);
268
294
  --sky-space-stacked-xxl: var(--modern-space-xxl);
269
295
  --sky-space-stacked-xl: var(--modern-space-xl);
@@ -277,11 +303,13 @@
277
303
  --sky-space-inline-m: var(--modern-space-md);
278
304
  --sky-space-inline-s: var(--modern-space-s);
279
305
  --sky-space-inline-xs: var(--modern-space-xs);
306
+ --sky-space-inline-xxs: var(--modern-size-2);
280
307
  --sky-space-gap-text_action-l: var(--modern-space-lg);
281
308
  --sky-space-gap-text_action-m: var(--modern-space-md);
282
309
  --sky-space-gap-text_action-s: var(--modern-space-s);
283
310
  --sky-space-gap-text_action-xs: var(--modern-space-xs);
284
311
  --sky-space-gap-text_action-0: 0rem;
312
+ --sky-space-gap-stacked_supplemental-l: var(--modern-size-15);
285
313
  --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
286
314
  --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
287
315
  --sky-space-gap-stacked_supplemental-0: 0rem;
@@ -301,21 +329,13 @@
301
329
  --sky-space-gap-form-l: var(--modern-space-lg);
302
330
  --sky-space-gap-form-m: var(--modern-space-md);
303
331
  --sky-space-gap-form-s: var(--modern-space-s);
332
+ --sky-space-gap-form-xs: var(--modern-space-xs);
304
333
  --sky-space-gap-form-0: 0rem;
305
334
  --sky-space-gap-action_group-xl: var(--modern-size-20);
306
335
  --sky-space-gap-action_group-l: var(--modern-size-15);
307
336
  --sky-space-gap-action_group-m: var(--modern-size-10);
308
337
  --sky-space-gap-action_group-s: var(--modern-size-5);
309
338
  --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);
319
339
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
320
340
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
321
341
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -386,25 +406,44 @@
386
406
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
387
407
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
388
408
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
409
+ --sky-space-inset-letterbox-left-m: var(--modern-space-s);
410
+ --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
411
+ --sky-space-inset-letterbox-right-m: var(--modern-space-s);
412
+ --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
389
413
  --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
390
414
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
391
415
  --sky-space-inset-input-left-m: var(--modern-size-15);
392
416
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
393
417
  --sky-space-inset-input-right-m: var(--modern-size-15);
394
418
  --sky-space-inset-input-top-m: var(--modern-size-10);
419
+ --sky-space-inset-floated-left-m: var(--modern-space-xl);
420
+ --sky-space-inset-floated-left-s: var(--modern-space-lg);
421
+ --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
422
+ --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
423
+ --sky-space-inset-floated-right-m: var(--modern-space-xl);
424
+ --sky-space-inset-floated-right-s: var(--modern-space-lg);
425
+ --sky-space-inset-floated-top-m: var(--modern-space-s);
426
+ --sky-space-inset-floated-top-s: var(--modern-space-xs);
427
+ --sky-space-inset-floated-top-0: var(--modern-space-none);
395
428
  --sky-space-inset-bottomless-bottom-xl: var(--modern-space-none);
396
429
  --sky-space-inset-bottomless-bottom-l: var(--modern-space-none);
430
+ --sky-space-inset-bottomless-bottom-m: var(--modern-space-none);
397
431
  --sky-space-inset-bottomless-left-xl: var(--modern-space-xl);
398
432
  --sky-space-inset-bottomless-left-l: var(--modern-space-lg);
433
+ --sky-space-inset-bottomless-left-m: var(--modern-size-15);
399
434
  --sky-space-inset-bottomless-right-xl: var(--modern-space-xl);
400
435
  --sky-space-inset-bottomless-right-l: var(--modern-space-lg);
436
+ --sky-space-inset-bottomless-right-m: var(--modern-size-15);
401
437
  --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
402
438
  --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
439
+ --sky-space-inset-bottomless-top-m: var(--modern-size-15);
403
440
  --sky-space-inset-balanced-xl: var(--modern-space-xl);
404
441
  --sky-space-inset-balanced-l: var(--modern-space-lg);
405
442
  --sky-space-inset-balanced-m: var(--modern-space-md);
406
443
  --sky-space-inset-balanced-s: var(--modern-space-s);
407
444
  --sky-space-inset-balanced-xs: var(--modern-space-xs);
445
+ --sky-space-inset-balanced-xxs: var(--modern-size-2);
446
+ --sky-space-inset-balanced-none: 0rem;
408
447
  --sky-font-text_decoration-inline_link-disabled: none;
409
448
  --sky-font-text_decoration-inline_link-focus: none;
410
449
  --sky-font-text_decoration-inline_link-active: underline;