@blackbaud/skyux-design-tokens 0.0.39 → 0.0.41

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 +26 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +30 -2
  4. package/scss/modern.css +48 -10
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
+ ## [0.0.41](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.40...0.0.41) (2024-10-29)
6
+
7
+
8
+ ### Features
9
+
10
+ * add bottomless medium inset ([#115](https://github.com/blackbaud/skyux-design-tokens/issues/115)) ([a511cbd](https://github.com/blackbaud/skyux-design-tokens/commit/a511cbd630bc4abb76b01530494bb328a31ba193))
11
+ * add size.icon.xxs ([#119](https://github.com/blackbaud/skyux-design-tokens/issues/119)) ([d2a8be7](https://github.com/blackbaud/skyux-design-tokens/commit/d2a8be794262ce6d5884bba7c600f7efe5970681))
12
+ * 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))
13
+ * new button variants ([#111](https://github.com/blackbaud/skyux-design-tokens/issues/111)) ([a69d3a2](https://github.com/blackbaud/skyux-design-tokens/commit/a69d3a24d8a52ac33bccdaa14bc2f9dac09f37dc))
14
+ * new round tokens ([#118](https://github.com/blackbaud/skyux-design-tokens/issues/118)) ([6d9553f](https://github.com/blackbaud/skyux-design-tokens/commit/6d9553f516ba09531cb63d08f04eae924221baae))
15
+ * 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))
16
+ * 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))
17
+ * 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))
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * 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))
23
+
24
+ ## [0.0.40](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.39...0.0.40) (2024-10-22)
25
+
26
+
27
+ ### Features
28
+
29
+ * tokens for light borders ([#113](https://github.com/blackbaud/skyux-design-tokens/issues/113)) ([78fe98b](https://github.com/blackbaud/skyux-design-tokens/commit/78fe98ba1cf8e392c765d4a15bb72ddc1a9d4e44))
30
+
5
31
  ## [0.0.39](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.38...0.0.39) (2024-10-18)
6
32
 
7
33
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.39",
3
+ "version": "0.0.41",
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
@@ -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);
@@ -215,6 +216,11 @@
215
216
  --sky-color-border-input-hover: var(--bb-color-blue-600);
216
217
  --sky-color-border-input-base: var(--bb-color-gray-400);
217
218
  --sky-color-border-container-base: var(--bb-color-gray-100);
219
+ --sky-color-border-action-input-disabled: var(--bb-color-gray-400);
220
+ --sky-color-border-action-input-focus: var(--bb-color-blue-600);
221
+ --sky-color-border-action-input-active: var(--bb-color-blue-600);
222
+ --sky-color-border-action-input-hover: var(--bb-color-blue-600);
223
+ --sky-color-border-action-input-base: var(--bb-color-gray-400);
218
224
  --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
219
225
  --sky-color-border-action-danger-focus: var(--bb-color-red-200);
220
226
  --sky-color-border-action-danger-active: var(--bb-color-red-200);
@@ -235,12 +241,14 @@
235
241
  --sky-color-border-action-primary-active: var(--bb-color-blue-200);
236
242
  --sky-color-border-action-primary-hover: var(--bb-color-blue-200);
237
243
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
244
+ --sky-color-border-text_highlight: var(--bb-color-yellow-800);
238
245
  --sky-color-border-elevation: var(--bb-color-gray-100);
239
246
  --sky-color-border-divider: var(--bb-color-gray-100);
240
247
  --sky-color-border-info: var(--bb-color-blue-600);
241
248
  --sky-color-border-success: var(--bb-color-green-600);
242
249
  --sky-color-border-warning: var(--bb-color-yellow-600);
243
250
  --sky-color-border-danger: var(--bb-color-red-600);
251
+ --sky-color-border-selected_soft: var(--bb-color-blue-300);
244
252
  --sky-color-border-selected: var(--bb-color-blue-600);
245
253
  --sky-color-background-list-disabled: var(--bb-color-gray-50);
246
254
  --sky-color-background-list-focus: var(--bb-color-transparent);
@@ -261,6 +269,11 @@
261
269
  --sky-color-background-thumb-base: var(--bb-color-white);
262
270
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
263
271
  --sky-color-background-input-base: var(--bb-color-transparent);
272
+ --sky-color-background-action-input-disabled: var(--bb-color-gray-50);
273
+ --sky-color-background-action-input-focus: var(--bb-color-transparent);
274
+ --sky-color-background-action-input-active: var(--bb-color-transparent);
275
+ --sky-color-background-action-input-hover: var(--bb-color-transparent);
276
+ --sky-color-background-action-input-base: var(--bb-color-transparent);
264
277
  --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
265
278
  --sky-color-background-action-danger-focus: var(--bb-color-red-600);
266
279
  --sky-color-background-action-danger-active: var(--bb-color-red-600);
@@ -287,6 +300,7 @@
287
300
  --sky-color-background-container-danger: var(--bb-color-red-300);
288
301
  --sky-color-background-container-menu: var(--bb-color-white);
289
302
  --sky-color-background-container-base: var(--bb-color-white);
303
+ --sky-color-background-text_highlight: var(--bb-color-yellow-400);
290
304
  --sky-color-background-scrim: var(--bb-color-scrim);
291
305
  --sky-color-background-page: var(--bb-color-gray-25);
292
306
  --sky-color-icon-action: var(--bb-color-blue-600);
@@ -297,22 +311,24 @@
297
311
  --sky-color-icon-danger: var(--bb-color-red-600);
298
312
  --sky-color-icon-deemphasized: var(--bb-color-gray-600);
299
313
  --sky-color-icon-default: var(--bb-color-gray-900);
314
+ --sky-color-text-link_highlighted: var(--bb-color-blue-800);
300
315
  --sky-color-text-heading: var(--bb-color-blue-800);
301
316
  --sky-color-text-inverse: var(--bb-color-white);
302
- --sky-color-text-danger: var(--bb-color-red-700);
317
+ --sky-color-text-danger: var(--bb-color-red-600);
303
318
  --sky-color-text-action: var(--bb-color-blue-600);
304
319
  --sky-color-text-deemphasized: var(--bb-color-gray-600);
305
320
  --sky-color-text-default: var(--bb-color-gray-900);
306
321
  }
307
322
  .sky-theme-modern.sky-theme-brand-blackbaud {
308
323
  --sky-border-style-separator-row: var(--bb-border-style-dotted);
324
+ --sky-border-style-separator-light: var(--bb-border-style-solid);
309
325
  --sky-border-style-separator-dark: var(--bb-border-style-solid);
310
326
  --sky-border-style-elevation: var(--bb-border-style-solid);
311
327
  --sky-border-style-divider: var(--bb-border-style-solid);
312
328
  --sky-border-style-accent: var(--bb-border-style-solid);
313
329
  --sky-border-width-separator-row: var(--bb-size-fixed-6);
330
+ --sky-border-width-separator-light: var(--bb-size-fixed-6);
314
331
  --sky-border-width-separator-dark: var(--bb-size-fixed-6);
315
- --sky-border-width-input-selected: var(--bb-size-fixed-6);
316
332
  --sky-border-width-input-disabled: var(--bb-size-fixed-6);
317
333
  --sky-border-width-input-error: var(--bb-size-fixed-12);
318
334
  --sky-border-width-input-focus: var(--bb-size-fixed-12);
@@ -331,8 +347,10 @@
331
347
  --sky-border-width-action-hover: var(--bb-size-fixed-6);
332
348
  --sky-border-width-action-base: var(--bb-size-fixed-6);
333
349
  --sky-border-width-elevation: var(--bb-size-fixed-6);
350
+ --sky-border-width-text_highlight: var(--bb-size-fixed-6);
334
351
  --sky-border-width-divider: var(--bb-size-fixed-6);
335
352
  --sky-border-width-accent: var(--bb-size-fixed-37);
353
+ --sky-border-radius-round: var(--bb-border-radius-round);
336
354
  --sky-border-radius-thumb: var(--bb-border-radius-round);
337
355
  --sky-border-radius-pill: var(--bb-border-radius-pill);
338
356
  --sky-border-radius-m: var(--bb-border-radius-050);
@@ -462,6 +480,9 @@
462
480
  --sky-size-icon-l: var(--bb-size-fluid-150);
463
481
  --sky-size-icon-m: var(--bb-size-fluid-125);
464
482
  --sky-size-icon-s: var(--bb-size-fluid-100);
483
+ --sky-size-icon-xs: var(--bb-size-fluid-50);
484
+ --sky-size-icon-xxs: var(--bb-size-fluid-25);
485
+ --sky-size-picker_btn: var(--bb-size-fluid-200);
465
486
  --sky-size-switch: var(--bb-size-fluid-125);
466
487
  --sky-space-stacked-xxl: var(--bb-size-fluid-300);
467
488
  --sky-space-stacked-xl: var(--bb-size-fluid-150);
@@ -475,6 +496,7 @@
475
496
  --sky-space-inline-m: var(--bb-size-fluid-75);
476
497
  --sky-space-inline-s: var(--bb-size-fluid-50);
477
498
  --sky-space-inline-xs: var(--bb-size-fluid-25);
499
+ --sky-space-inline-xxs: var(--bb-size-fluid-12);
478
500
  --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
479
501
  --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
480
502
  --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
@@ -499,6 +521,7 @@
499
521
  --sky-space-gap-form-l: var(--bb-size-fluid-100);
500
522
  --sky-space-gap-form-m: var(--bb-size-fluid-75);
501
523
  --sky-space-gap-form-s: var(--bb-size-fluid-50);
524
+ --sky-space-gap-form-xs: var(--bb-size-fluid-25);
502
525
  --sky-space-gap-form-0: 0rem;
503
526
  --sky-space-gap-action_group-xl: var(--bb-size-fluid-100);
504
527
  --sky-space-gap-action_group-l: var(--bb-size-fluid-75);
@@ -604,16 +627,21 @@
604
627
  --sky-space-inset-floated-top-0: 0rem;
605
628
  --sky-space-inset-bottomless-left-xl: var(--bb-size-fluid-150);
606
629
  --sky-space-inset-bottomless-left-l: var(--bb-size-fluid-100);
630
+ --sky-space-inset-bottomless-left-m: var(--bb-size-fluid-75);
607
631
  --sky-space-inset-bottomless-bottom-xl: var(--bb-size-fluid-0);
608
632
  --sky-space-inset-bottomless-bottom-l: var(--bb-size-fluid-0);
633
+ --sky-space-inset-bottomless-bottom-m: var(--bb-size-fluid-0);
609
634
  --sky-space-inset-bottomless-right-xl: var(--bb-size-fluid-150);
610
635
  --sky-space-inset-bottomless-right-l: var(--bb-size-fluid-100);
636
+ --sky-space-inset-bottomless-right-m: var(--bb-size-fluid-75);
611
637
  --sky-space-inset-bottomless-top-xl: var(--bb-size-fluid-150);
612
638
  --sky-space-inset-bottomless-top-l: var(--bb-size-fluid-100);
639
+ --sky-space-inset-bottomless-top-m: var(--bb-size-fluid-75);
613
640
  --sky-space-inset-balanced-xl: var(--bb-size-fluid-150);
614
641
  --sky-space-inset-balanced-l: var(--bb-size-fluid-100);
615
642
  --sky-space-inset-balanced-m: var(--bb-size-fluid-75);
616
643
  --sky-space-inset-balanced-s: var(--bb-size-fluid-50);
617
644
  --sky-space-inset-balanced-xs: var(--bb-size-fluid-25);
645
+ --sky-space-inset-balanced-xxs: var(--bb-size-fluid-12);
618
646
  --sky-space-inset-balanced-none: 0rem;
619
647
  }
package/scss/modern.css CHANGED
@@ -55,6 +55,7 @@
55
55
  --modern-size-64: 64px;
56
56
  --modern-size-48: 48px;
57
57
  --modern-size-44: 44px;
58
+ --modern-size-40: 40px;
58
59
  --modern-size-32: 32px;
59
60
  --modern-size-30: 30px;
60
61
  --modern-size-26: 26px;
@@ -84,11 +85,14 @@
84
85
  --modern-space-none: 0rem;
85
86
  --modern-color-sky_blue-40: #40c7f4;
86
87
  --modern-color-sky_blue-20: #bfecfb;
88
+ --modern-color-yellow-80: #c57c00;
87
89
  --modern-color-yellow-50: #fbb034;
90
+ --modern-color-yellow-40: #fcd085;
88
91
  --modern-color-yellow-30: #ffd597;
89
92
  --modern-color-green-50: #72bf44;
90
93
  --modern-color-green-30: #b7da9b;
91
94
  --modern-color-blue-05: #ebfbff;
95
+ --modern-color-blue-80: #0d5ead;
92
96
  --modern-color-blue-74: #1870b8;
93
97
  --modern-color-blue-50: #00b4f1;
94
98
  --modern-color-blue-30: #81d4f7;
@@ -108,6 +112,7 @@
108
112
  --modern-color-gray-50: #8c929c;
109
113
  --modern-color-gray-20: #cdcfd2;
110
114
  --modern-color-gray-15: #d2d2d2;
115
+ --modern-color-gray-10: #e2e3e4;
111
116
  }
112
117
  .sky-theme-modern {
113
118
  --sky-elevation-overlay-400: var(--modern-shadow-size-24);
@@ -119,6 +124,7 @@
119
124
  --sky-elevation-focus: var(--modern-shadow-size-3);
120
125
  --sky-elevation-none: var(--modern-shadow-size-0);
121
126
  --sky-color-border-separator-row: var(--modern-color-gray-20);
127
+ --sky-color-border-separator-light: var(--modern-color-gray-10);
122
128
  --sky-color-border-separator-dark: var(--modern-color-gray-20);
123
129
  --sky-color-border-input-error: var(--modern-color-red-50);
124
130
  --sky-color-border-input-disabled: var(--modern-color-gray-50);
@@ -126,6 +132,11 @@
126
132
  --sky-color-border-input-active: var(--modern-color-blue-74);
127
133
  --sky-color-border-input-hover: var(--modern-color-blue-74);
128
134
  --sky-color-border-input-base: var(--modern-color-gray-50);
135
+ --sky-color-border-action-input-disabled: var(--modern-color-gray-50);
136
+ --sky-color-border-action-input-focus: var(--modern-color-blue-74);
137
+ --sky-color-border-action-input-active: var(--modern-color-blue-74);
138
+ --sky-color-border-action-input-hover: var(--modern-color-blue-74);
139
+ --sky-color-border-action-input-base: var(--modern-color-gray-50);
129
140
  --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
130
141
  --sky-color-border-action-danger-focus: var(--modern-color-red-30);
131
142
  --sky-color-border-action-danger-active: var(--modern-color-red-30);
@@ -147,12 +158,14 @@
147
158
  --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
148
159
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
149
160
  --sky-color-border-container-base: var(--modern-color-gray-15);
161
+ --sky-color-border-text_highlight: var(--modern-color-yellow-80);
150
162
  --sky-color-border-elevation: var(--modern-color-gray-15);
151
163
  --sky-color-border-divider: var(--modern-color-gray-15);
152
164
  --sky-color-border-info: var(--modern-color-blue-50);
153
165
  --sky-color-border-success: var(--modern-color-green-50);
154
166
  --sky-color-border-warning: var(--modern-color-yellow-50);
155
167
  --sky-color-border-danger: var(--modern-color-red-50);
168
+ --sky-color-border-selected_soft: var(--modern-color-blue-30);
156
169
  --sky-color-border-selected: var(--modern-color-blue-74);
157
170
  --sky-color-background-list-disabled: var(--modern-color-gray-07);
158
171
  --sky-color-background-list-focus: var(--modern-color-transparent);
@@ -173,6 +186,11 @@
173
186
  --sky-color-background-selected-danger: var(--modern-color-red-30);
174
187
  --sky-color-background-selected-soft: var(--modern-color-blue-05);
175
188
  --sky-color-background-selected-heavy: var(--modern-color-blue-05);
189
+ --sky-color-background-action-input-disabled: var(--modern-color-gray-07);
190
+ --sky-color-background-action-input-focus: var(--modern-color-transparent);
191
+ --sky-color-background-action-input-active: var(--modern-color-transparent);
192
+ --sky-color-background-action-input-hover: var(--modern-color-transparent);
193
+ --sky-color-background-action-input-base: var(--modern-color-transparent);
176
194
  --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
177
195
  --sky-color-background-action-danger-focus: var(--modern-color-red-70);
178
196
  --sky-color-background-action-danger-active: var(--modern-color-red-70);
@@ -199,6 +217,7 @@
199
217
  --sky-color-background-container-danger: var(--modern-color-red-30);
200
218
  --sky-color-background-container-menu: var(--modern-color-white);
201
219
  --sky-color-background-container-base: var(--modern-color-white);
220
+ --sky-color-background-text_highlight: var(--modern-color-yellow-40);
202
221
  --sky-color-background-scrim: var(--modern-color-scrim);
203
222
  --sky-color-background-page: var(--modern-color-gray-005);
204
223
  --sky-color-icon-action: var(--modern-color-blue-74);
@@ -209,6 +228,7 @@
209
228
  --sky-color-icon-danger: var(--modern-color-red-50);
210
229
  --sky-color-icon-deemphasized: var(--modern-color-gray-70);
211
230
  --sky-color-icon-default: var(--modern-color-gray-105);
231
+ --sky-color-text-link_highlight: var(--modern-color-blue-80);
212
232
  --sky-color-text-heading: var(--modern-color-gray-105);
213
233
  --sky-color-text-inverse: var(--modern-color-white);
214
234
  --sky-color-text-danger: var(--modern-color-red-70);
@@ -218,18 +238,20 @@
218
238
  }
219
239
  .sky-theme-modern {
220
240
  --sky-border-style-separator-row: var(--modern-border-style-dotted);
241
+ --sky-border-style-separator-light: var(--modern-border-style-solid);
221
242
  --sky-border-style-separator-dark: var(--modern-border-style-solid);
222
243
  --sky-border-style-elevation: var(--modern-border-style-solid);
223
244
  --sky-border-style-divider: var(--modern-border-style-solid);
224
245
  --sky-border-style-accent: var(--modern-border-style-solid);
246
+ --sky-border-radius-round: var(--modern-border-radius-round);
225
247
  --sky-border-radius-thumb: var(--modern-border-radius-round);
226
248
  --sky-border-radius-pill: var(--modern-border-radius-pill);
227
249
  --sky-border-radius-m: var(--modern-border-radius-md);
228
250
  --sky-border-radius-s: var(--modern-border-radius-md);
229
251
  --sky-border-radius-0: var(--modern-border-radius-0);
230
252
  --sky-border-width-separator-row: var(--modern-size-1);
253
+ --sky-border-width-separator-light: var(--modern-size-1);
231
254
  --sky-border-width-separator-dark: var(--modern-size-1);
232
- --sky-border-width-input-selected: var(--modern-size-1);
233
255
  --sky-border-width-input-disabled: var(--modern-size-1);
234
256
  --sky-border-width-input-error: var(--modern-size-2);
235
257
  --sky-border-width-input-focus: var(--modern-size-2);
@@ -248,6 +270,7 @@
248
270
  --sky-border-width-action-hover: var(--modern-size-1);
249
271
  --sky-border-width-action-base: var(--modern-size-1);
250
272
  --sky-border-width-elevation: var(--modern-size-1);
273
+ --sky-border-width-text_highlight: var(--modern-size-1);
251
274
  --sky-border-width-divider: var(--modern-size-1);
252
275
  --sky-border-width-accent: var(--modern-size-7);
253
276
  --sky-size-max_width-overlay_message: var(--modern-size-236);
@@ -260,6 +283,9 @@
260
283
  --sky-size-icon-l: var(--modern-size-24);
261
284
  --sky-size-icon-m: var(--modern-size-20);
262
285
  --sky-size-icon-s: var(--modern-size-16);
286
+ --sky-size-icon-xs: var(--modern-size-10);
287
+ --sky-size-icon-xxs: var(--modern-size-5);
288
+ --sky-size-picker_btn: var(--modern-size-30);
263
289
  --sky-size-switch: var(--modern-size-26);
264
290
  --sky-space-stacked-xxl: var(--modern-space-xxl);
265
291
  --sky-space-stacked-xl: var(--modern-space-xl);
@@ -273,6 +299,7 @@
273
299
  --sky-space-inline-m: var(--modern-space-md);
274
300
  --sky-space-inline-s: var(--modern-space-s);
275
301
  --sky-space-inline-xs: var(--modern-space-xs);
302
+ --sky-space-inline-xxs: var(--modern-size-2);
276
303
  --sky-space-gap-text_action-l: var(--modern-space-lg);
277
304
  --sky-space-gap-text_action-m: var(--modern-space-md);
278
305
  --sky-space-gap-text_action-s: var(--modern-space-s);
@@ -297,21 +324,13 @@
297
324
  --sky-space-gap-form-l: var(--modern-space-lg);
298
325
  --sky-space-gap-form-m: var(--modern-space-md);
299
326
  --sky-space-gap-form-s: var(--modern-space-s);
327
+ --sky-space-gap-form-xs: var(--modern-space-xs);
300
328
  --sky-space-gap-form-0: 0rem;
301
329
  --sky-space-gap-action_group-xl: var(--modern-size-20);
302
330
  --sky-space-gap-action_group-l: var(--modern-size-15);
303
331
  --sky-space-gap-action_group-m: var(--modern-size-10);
304
332
  --sky-space-gap-action_group-s: var(--modern-size-5);
305
333
  --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);
315
334
  --sky-space-inset-horizontal-left-xl: var(--modern-space-xl);
316
335
  --sky-space-inset-horizontal-left-l: var(--modern-space-lg);
317
336
  --sky-space-inset-horizontal-left-m: var(--modern-space-md);
@@ -382,25 +401,44 @@
382
401
  --sky-space-inset-pillarbox-1_4-right-xs: var(--modern-size-5);
383
402
  --sky-space-inset-pillarbox-1_4-top-s: var(--modern-size-4);
384
403
  --sky-space-inset-pillarbox-1_4-top-xs: var(--modern-size-1);
404
+ --sky-space-inset-letterbox-left-m: var(--modern-space-s);
405
+ --sky-space-inset-letterbox-bottom-m: var(--modern-space-lg);
406
+ --sky-space-inset-letterbox-right-m: var(--modern-space-s);
407
+ --sky-space-inset-letterbox-top-m: var(--modern-space-lg);
385
408
  --sky-space-inset-input_label-bottom-m: var(--modern-size-2);
386
409
  --sky-space-inset-input_label-top-m: var(--modern-size-6);
387
410
  --sky-space-inset-input-left-m: var(--modern-size-15);
388
411
  --sky-space-inset-input-bottom-m: var(--modern-size-9);
389
412
  --sky-space-inset-input-right-m: var(--modern-size-15);
390
413
  --sky-space-inset-input-top-m: var(--modern-size-10);
414
+ --sky-space-inset-floated-left-m: var(--modern-space-xl);
415
+ --sky-space-inset-floated-left-s: var(--modern-space-lg);
416
+ --sky-space-inset-floated-bottom-m: var(--modern-space-xl);
417
+ --sky-space-inset-floated-bottom-s: var(--modern-space-lg);
418
+ --sky-space-inset-floated-right-m: var(--modern-space-xl);
419
+ --sky-space-inset-floated-right-s: var(--modern-space-lg);
420
+ --sky-space-inset-floated-top-m: var(--modern-space-s);
421
+ --sky-space-inset-floated-top-s: var(--modern-space-xs);
422
+ --sky-space-inset-floated-top-0: var(--modern-space-none);
391
423
  --sky-space-inset-bottomless-bottom-xl: var(--modern-space-none);
392
424
  --sky-space-inset-bottomless-bottom-l: var(--modern-space-none);
425
+ --sky-space-inset-bottomless-bottom-m: var(--modern-space-none);
393
426
  --sky-space-inset-bottomless-left-xl: var(--modern-space-xl);
394
427
  --sky-space-inset-bottomless-left-l: var(--modern-space-lg);
428
+ --sky-space-inset-bottomless-left-m: var(--modern-size-15);
395
429
  --sky-space-inset-bottomless-right-xl: var(--modern-space-xl);
396
430
  --sky-space-inset-bottomless-right-l: var(--modern-space-lg);
431
+ --sky-space-inset-bottomless-right-m: var(--modern-size-15);
397
432
  --sky-space-inset-bottomless-top-xl: var(--modern-space-xl);
398
433
  --sky-space-inset-bottomless-top-l: var(--modern-space-lg);
434
+ --sky-space-inset-bottomless-top-m: var(--modern-size-15);
399
435
  --sky-space-inset-balanced-xl: var(--modern-space-xl);
400
436
  --sky-space-inset-balanced-l: var(--modern-space-lg);
401
437
  --sky-space-inset-balanced-m: var(--modern-space-md);
402
438
  --sky-space-inset-balanced-s: var(--modern-space-s);
403
439
  --sky-space-inset-balanced-xs: var(--modern-space-xs);
440
+ --sky-space-inset-balanced-xxs: var(--modern-size-2);
441
+ --sky-space-inset-balanced-none: 0rem;
404
442
  --sky-font-text_decoration-inline_link-disabled: none;
405
443
  --sky-font-text_decoration-inline_link-focus: none;
406
444
  --sky-font-text_decoration-inline_link-active: underline;