@blackbaud/skyux-design-tokens 0.0.32 → 0.0.33

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 +13 -0
  2. package/package.json +1 -1
  3. package/scss/blackbaud.css +70 -35
  4. package/scss/modern.css +81 -19
package/CHANGELOG.md CHANGED
@@ -2,6 +2,19 @@
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.33](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.32...0.0.33) (2024-09-27)
6
+
7
+
8
+ ### Features
9
+
10
+ * add background colors ([#85](https://github.com/blackbaud/skyux-design-tokens/issues/85)) ([0113a8b](https://github.com/blackbaud/skyux-design-tokens/commit/0113a8b332e1f63814d0bde1a49426a9939c7c2b))
11
+ * border colors ([#87](https://github.com/blackbaud/skyux-design-tokens/issues/87)) ([277f903](https://github.com/blackbaud/skyux-design-tokens/commit/277f903189e05de85f26f81669dee393c8bdca1b))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * gap naming schema in space tokens ([#88](https://github.com/blackbaud/skyux-design-tokens/issues/88)) ([fb1deff](https://github.com/blackbaud/skyux-design-tokens/commit/fb1deffe094fbe93d9ba057bd34b98428940c940))
17
+
5
18
  ## [0.0.32](https://github.com/blackbaud/skyux-design-tokens/compare/0.0.31...0.0.32) (2024-09-27)
6
19
 
7
20
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@blackbaud/skyux-design-tokens",
3
- "version": "0.0.32",
3
+ "version": "0.0.33",
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
@@ -92,6 +92,7 @@
92
92
  --bb-color-gray-100: #d3d5d6;
93
93
  --bb-color-gray-50: #e9eaeb;
94
94
  --bb-color-gray-25: #f9f9f9;
95
+ --bb-color-scrim: rgba(37, 43, 51, 0.5);
95
96
  --bb-color-transparent: rgba(0, 0, 0, 0);
96
97
  --bb-color-black: #000000;
97
98
  --bb-color-white: #ffffff;
@@ -215,19 +216,26 @@
215
216
  --sky-color-border-input-hover: var(--bb-color-blue-600);
216
217
  --sky-color-border-input-base: var(--bb-color-gray-100);
217
218
  --sky-color-border-container-base: var(--bb-color-gray-100);
219
+ --sky-color-border-action-danger-disabled: var(--bb-color-gray-100);
220
+ --sky-color-border-action-danger-active: var(--bb-color-red-600);
221
+ --sky-color-border-action-danger-focus: var(--bb-color-red-600);
222
+ --sky-color-border-action-danger-hover: var(--bb-color-red-600);
223
+ --sky-color-border-action-danger-base: var(--bb-color-red-600);
224
+ --sky-color-border-action-tertiary-disabled: var(--bb-color-gray-100);
218
225
  --sky-color-border-action-tertiary-focus: var(--bb-color-blue-600);
219
226
  --sky-color-border-action-tertiary-active: var(--bb-color-blue-600);
220
227
  --sky-color-border-action-tertiary-hover: var(--bb-color-blue-600);
221
228
  --sky-color-border-action-tertiary-base: var(--bb-color-transparent);
229
+ --sky-color-border-action-secondary-disabled: var(--bb-color-gray-100);
222
230
  --sky-color-border-action-secondary-focus: var(--bb-color-blue-600);
223
231
  --sky-color-border-action-secondary-active: var(--bb-color-blue-600);
224
232
  --sky-color-border-action-secondary-hover: var(--bb-color-blue-600);
225
- --sky-color-border-action-secondary-base: var(--bb-color-transparent);
233
+ --sky-color-border-action-secondary-base: var(--bb-color-gray-100);
234
+ --sky-color-border-action-primary-disabled: var(--bb-color-gray-100);
226
235
  --sky-color-border-action-primary-focus: var(--bb-color-blue-600);
227
236
  --sky-color-border-action-primary-active: var(--bb-color-blue-600);
228
237
  --sky-color-border-action-primary-hover: var(--bb-color-blue-600);
229
238
  --sky-color-border-action-primary-base: var(--bb-color-blue-600);
230
- --sky-color-border-action-disabled: var(--bb-color-gray-100);
231
239
  --sky-color-border-elevation: var(--bb-color-gray-100);
232
240
  --sky-color-border-divider: var(--bb-color-gray-100);
233
241
  --sky-color-border-info: var(--bb-color-blue-600);
@@ -235,20 +243,47 @@
235
243
  --sky-color-border-warning: var(--bb-color-yellow-600);
236
244
  --sky-color-border-danger: var(--bb-color-red-600);
237
245
  --sky-color-border-selected: var(--bb-color-blue-600);
238
- --sky-color-background-input-selected: var(--bb-color-blue-600);
246
+ --sky-color-background-list-disabled: var(--bb-color-gray-50);
247
+ --sky-color-background-list-focus: var(--bb-color-transparent);
248
+ --sky-color-background-list-active: var(--bb-color-transparent);
249
+ --sky-color-background-list-hover: var(--bb-color-transparent);
250
+ --sky-color-background-list-base: var(--bb-color-transparent);
251
+ --sky-color-background-nav-disabled: var(--bb-color-gray-50);
252
+ --sky-color-background-nav-focus: var(--bb-color-transparent);
253
+ --sky-color-background-nav-active: var(--bb-color-transparent);
254
+ --sky-color-background-nav-hover: var(--bb-color-transparent);
255
+ --sky-color-background-nav-base: var(--bb-color-transparent);
256
+ --sky-color-background-selected-soft: var(--bb-color-blue-100);
257
+ --sky-color-background-selected-heavy: var(--bb-color-blue-600);
239
258
  --sky-color-background-input-disabled: var(--bb-color-gray-50);
240
259
  --sky-color-background-input-base: var(--bb-color-transparent);
260
+ --sky-color-background-action-danger-disabled: var(--bb-color-gray-50);
261
+ --sky-color-background-action-danger-focus: var(--bb-color-red-600);
262
+ --sky-color-background-action-danger-active: var(--bb-color-red-600);
263
+ --sky-color-background-action-danger-hover: var(--bb-color-red-600);
241
264
  --sky-color-background-action-danger-base: var(--bb-color-red-600);
265
+ --sky-color-background-action-tertiary-disabled: var(--bb-color-gray-50);
266
+ --sky-color-background-action-tertiary-focus: var(--bb-color-transparent);
267
+ --sky-color-background-action-tertiary-active: var(--bb-color-transparent);
268
+ --sky-color-background-action-tertiary-hover: var(--bb-color-transparent);
242
269
  --sky-color-background-action-tertiary-base: var(--bb-color-transparent);
270
+ --sky-color-background-action-secondary-disabled: var(--bb-color-gray-50);
271
+ --sky-color-background-action-secondary-focus: var(--bb-color-white);
272
+ --sky-color-background-action-secondary-active: var(--bb-color-white);
273
+ --sky-color-background-action-secondary-hover: var(--bb-color-white);
243
274
  --sky-color-background-action-secondary-base: var(--bb-color-white);
275
+ --sky-color-background-action-primary-disabled: var(--bb-color-gray-50);
276
+ --sky-color-background-action-primary-focus: var(--bb-color-blue-600);
277
+ --sky-color-background-action-primary-active: var(--bb-color-blue-600);
278
+ --sky-color-background-action-primary-hover: var(--bb-color-blue-600);
244
279
  --sky-color-background-action-primary-base: var(--bb-color-blue-600);
245
- --sky-color-background-action-disabled: var(--bb-color-gray-50);
246
280
  --sky-color-background-container-info: var(--bb-color-blue-100);
247
281
  --sky-color-background-container-success: var(--bb-color-green-300);
248
282
  --sky-color-background-container-warning: var(--bb-color-yellow-300);
249
283
  --sky-color-background-container-danger: var(--bb-color-red-300);
250
284
  --sky-color-background-container-menu: var(--bb-color-white);
251
285
  --sky-color-background-container-base: var(--bb-color-white);
286
+ --sky-color-background-scrim: var(--bb-color-scrim);
252
287
  --sky-color-background-page: var(--bb-color-gray-25);
253
288
  --sky-color-icon-action: var(--bb-color-blue-600);
254
289
  --sky-color-icon-inverse: var(--bb-color-white);
@@ -426,37 +461,37 @@
426
461
  --sky-space-inline-m: var(--bb-size-fluid-75);
427
462
  --sky-space-inline-s: var(--bb-size-fluid-50);
428
463
  --sky-space-inline-xs: var(--bb-size-fluid-25);
429
- --sky-space-switch_inset: calc(var(--sky-size-switch)+var(--sky-space-label_gap-s));
430
- --sky-space-text_action_gap-l: var(--bb-size-fluid-100);
431
- --sky-space-text_action_gap-m: var(--bb-size-fluid-75);
432
- --sky-space-text_action_gap-s: var(--bb-size-fluid-50);
433
- --sky-space-text_action_gap-xs: var(--bb-size-fluid-25);
434
- --sky-space-text_action_gap-0: 0rem;
435
- --sky-space-stacked_supplemental-m: var(--bb-size-fluid-50);
436
- --sky-space-stacked_supplemental-s: var(--bb-size-fluid-25);
437
- --sky-space-stacked_supplemental-0: 0rem;
438
- --sky-space-label_gap-xl: var(--bb-size-fluid-100);
439
- --sky-space-label_gap-l: var(--bb-size-fluid-75);
440
- --sky-space-label_gap-m: var(--bb-size-fluid-50);
441
- --sky-space-label_gap-s: var(--bb-size-fluid-25);
442
- --sky-space-label_gap-xs: var(--bb-size-fluid-12);
443
- --sky-space-label_gap-xxs: var(--bb-size-fluid-6);
444
- --sky-space-label_gap-0: 0rem;
445
- --sky-space-icon_gap-xl: var(--bb-size-fluid-100);
446
- --sky-space-icon_gap-l: var(--bb-size-fluid-75);
447
- --sky-space-icon_gap-m: var(--bb-size-fluid-50);
448
- --sky-space-icon_gap-s: var(--bb-size-fluid-25);
449
- --sky-space-icon_gap-0: 0rem;
450
- --sky-space-form_gap-xl: var(--bb-size-fluid-150);
451
- --sky-space-form_gap-l: var(--bb-size-fluid-100);
452
- --sky-space-form_gap-m: var(--bb-size-fluid-75);
453
- --sky-space-form_gap-s: var(--bb-size-fluid-50);
454
- --sky-space-form_gap-0: 0rem;
455
- --sky-space-action_group_gap-xl: var(--bb-size-fluid-100);
456
- --sky-space-action_group_gap-l: var(--bb-size-fluid-75);
457
- --sky-space-action_group_gap-m: var(--bb-size-fluid-50);
458
- --sky-space-action_group_gap-s: var(--bb-size-fluid-25);
459
- --sky-space-action_group_gap-0: 0rem;
464
+ --sky-space-gap-text_action-l: var(--bb-size-fluid-100);
465
+ --sky-space-gap-text_action-m: var(--bb-size-fluid-75);
466
+ --sky-space-gap-text_action-s: var(--bb-size-fluid-50);
467
+ --sky-space-gap-text_action-xs: var(--bb-size-fluid-25);
468
+ --sky-space-gap-text_action-0: 0rem;
469
+ --sky-space-gap-stacked_supplemental-m: var(--bb-size-fluid-50);
470
+ --sky-space-gap-stacked_supplemental-s: var(--bb-size-fluid-25);
471
+ --sky-space-gap-stacked_supplemental-0: 0rem;
472
+ --sky-space-gap-label-xl: var(--bb-size-fluid-100);
473
+ --sky-space-gap-label-l: var(--bb-size-fluid-75);
474
+ --sky-space-gap-label-m: var(--bb-size-fluid-50);
475
+ --sky-space-gap-label-s: var(--bb-size-fluid-25);
476
+ --sky-space-gap-label-xs: var(--bb-size-fluid-12);
477
+ --sky-space-gap-label-xxs: var(--bb-size-fluid-6);
478
+ --sky-space-gap-label-0: 0rem;
479
+ --sky-space-gap-icon-xl: var(--bb-size-fluid-100);
480
+ --sky-space-gap-icon-l: var(--bb-size-fluid-75);
481
+ --sky-space-gap-icon-m: var(--bb-size-fluid-50);
482
+ --sky-space-gap-icon-s: var(--bb-size-fluid-25);
483
+ --sky-space-gap-icon-0: 0rem;
484
+ --sky-space-gap-form-xl: var(--bb-size-fluid-150);
485
+ --sky-space-gap-form-l: var(--bb-size-fluid-100);
486
+ --sky-space-gap-form-m: var(--bb-size-fluid-75);
487
+ --sky-space-gap-form-s: var(--bb-size-fluid-50);
488
+ --sky-space-gap-form-0: 0rem;
489
+ --sky-space-gap-action_group-xl: var(--bb-size-fluid-100);
490
+ --sky-space-gap-action_group-l: var(--bb-size-fluid-75);
491
+ --sky-space-gap-action_group-m: var(--bb-size-fluid-50);
492
+ --sky-space-gap-action_group-s: var(--bb-size-fluid-25);
493
+ --sky-space-gap-action_group-0: 0rem;
494
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
460
495
  --sky-space-inset-tabs-xl: var(--bb-size-fluid-150);
461
496
  --sky-space-inset-tabs-l: var(--bb-size-fluid-100);
462
497
  --sky-space-inset-tabs-m: var(--bb-size-fluid-75);
package/scss/modern.css CHANGED
@@ -39,6 +39,7 @@
39
39
  --modern-font-size-150: 14px;
40
40
  --modern-font-size-125: 13px;
41
41
  --modern-font-size-100: 12px;
42
+ --modern-size-400: 400px;
42
43
  --modern-size-320: 320px;
43
44
  --modern-size-296: 296px;
44
45
  --modern-size-276: 276px;
@@ -73,20 +74,22 @@
73
74
  --modern-space-s: 10px;
74
75
  --modern-space-xs: 5px;
75
76
  --modern-space-none: 0rem;
76
- --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
77
77
  --modern-color-sky_blue-40: #40c7f4;
78
78
  --modern-color-sky_blue-20: #bfecfb;
79
79
  --modern-color-yellow-50: #fbb034;
80
80
  --modern-color-yellow-30: #ffd597;
81
81
  --modern-color-green-50: #72bf44;
82
82
  --modern-color-green-30: #b7da9b;
83
- --modern-color-white: #ffffff;
84
83
  --modern-color-blue-05: #ebfbff;
85
84
  --modern-color-blue-74: #1870b8;
86
85
  --modern-color-blue-50: #00b4f1;
87
86
  --modern-color-blue-30: #81d4f7;
88
87
  --modern-color-blue-10: #c1e8fb;
88
+ --modern-color-scrim: rgba(0, 0, 0, 0.5);
89
+ --modern-color-shadow_color: rgba(0, 0, 0, 0.3);
89
90
  --modern-color-transparent: rgba(0, 0, 0, 0);
91
+ --modern-color-black: #000000;
92
+ --modern-color-white: #ffffff;
90
93
  --modern-color-red-70: #d93a3d;
91
94
  --modern-color-red-50: #ef4044;
92
95
  --modern-color-red-30: #f7a08f;
@@ -114,11 +117,25 @@
114
117
  --sky-color-border-input-active: var(--modern-color-blue-74);
115
118
  --sky-color-border-input-hover: var(--modern-color-blue-74);
116
119
  --sky-color-border-input-base: var(--modern-color-gray-15);
120
+ --sky-color-border-action-danger-disabled: var(--modern-color-gray-15);
121
+ --sky-color-border-action-danger-focus: var(--modern-color-red-30);
122
+ --sky-color-border-action-danger-active: var(--modern-color-red-30);
123
+ --sky-color-border-action-danger-hover: var(--modern-color-red-30);
124
+ --sky-color-border-action-danger-base: var(--modern-color-red-70);
125
+ --sky-color-border-action-tertiary-disabled: var(--modern-color-gray-15);
117
126
  --sky-color-border-action-tertiary-active: var(--modern-color-blue-74);
118
127
  --sky-color-border-action-tertiary-focus: var(--modern-color-blue-74);
119
128
  --sky-color-border-action-tertiary-hover: var(--modern-color-blue-74);
120
129
  --sky-color-border-action-tertiary-base: var(--modern-color-transparent);
130
+ --sky-color-border-action-secondary-disabled: var(--modern-color-gray-15);
131
+ --sky-color-border-action-secondary-focus: var(--modern-color-blue-74);
132
+ --sky-color-border-action-secondary-active: var(--modern-color-blue-74);
133
+ --sky-color-border-action-secondary-hover: var(--modern-color-blue-74);
121
134
  --sky-color-border-action-secondary-base: var(--modern-color-gray-15);
135
+ --sky-color-border-action-primary-disabled: var(--modern-color-gray-15);
136
+ --sky-color-border-action-primary-focus: var(--modern-color-blue-10);
137
+ --sky-color-border-action-primary-active: var(--modern-color-blue-10);
138
+ --sky-color-border-action-primary-hover: var(--modern-color-blue-10);
122
139
  --sky-color-border-action-primary-base: var(--modern-color-blue-74);
123
140
  --sky-color-border-action-disabled: var(--modern-color-gray-15);
124
141
  --sky-color-border-container-base: var(--modern-color-gray-15);
@@ -129,17 +146,47 @@
129
146
  --sky-color-border-warning: var(--modern-color-yellow-50);
130
147
  --sky-color-border-danger: var(--modern-color-red-50);
131
148
  --sky-color-border-selected: var(--modern-color-blue-74);
149
+ --sky-color-background-list-disabled: var(--modern-color-gray-07);
150
+ --sky-color-background-list-focus: var(--modern-color-transparent);
151
+ --sky-color-background-list-active: var(--modern-color-transparent);
152
+ --sky-color-background-list-hover: var(--modern-color-transparent);
153
+ --sky-color-background-list-base: var(--modern-color-transparent);
154
+ --sky-color-background-nav-disabled: var(--modern-color-gray-07);
155
+ --sky-color-background-nav-focus: var(--modern-color-transparent);
156
+ --sky-color-background-nav-active: var(--modern-color-transparent);
157
+ --sky-color-background-nav-hover: var(--modern-color-transparent);
158
+ --sky-color-background-nav-base: var(--modern-color-transparent);
159
+ --sky-color-background-input-disabled: var(--modern-color-gray-07);
160
+ --sky-color-background-input-base: var(--modern-color-transparent);
161
+ --sky-color-background-selected-soft: var(--modern-color-blue-05);
162
+ --sky-color-background-selected-heavy: var(--modern-color-blue-05);
163
+ --sky-color-background-action-danger-disabled: var(--modern-color-gray-07);
164
+ --sky-color-background-action-danger-focus: var(--modern-color-red-70);
165
+ --sky-color-background-action-danger-active: var(--modern-color-red-70);
166
+ --sky-color-background-action-danger-hover: var(--modern-color-red-70);
132
167
  --sky-color-background-action-danger-base: var(--modern-color-red-70);
168
+ --sky-color-background-action-tertiary-disabled: var(--modern-color-gray-07);
169
+ --sky-color-background-action-tertiary-focus: var(--modern-color-transparent);
170
+ --sky-color-background-action-tertiary-active: var(--modern-color-transparent);
171
+ --sky-color-background-action-tertiary-hover: var(--modern-color-transparent);
133
172
  --sky-color-background-action-tertiary-base: var(--modern-color-transparent);
173
+ --sky-color-background-action-secondary-disabled: var(--modern-color-gray-07);
174
+ --sky-color-background-action-secondary-focus: var(--modern-color-white);
175
+ --sky-color-background-action-secondary-active: var(--modern-color-white);
176
+ --sky-color-background-action-secondary-hover: var(--modern-color-white);
134
177
  --sky-color-background-action-secondary-base: var(--modern-color-white);
178
+ --sky-color-background-action-primary-disabled: var(--modern-color-gray-07);
179
+ --sky-color-background-action-primary-focus: var(--modern-color-blue-74);
180
+ --sky-color-background-action-primary-active: var(--modern-color-blue-74);
181
+ --sky-color-background-action-primary-hover: var(--modern-color-blue-74);
135
182
  --sky-color-background-action-primary-base: var(--modern-color-blue-74);
136
- --sky-color-background-action-disabled: var(--modern-color-gray-07);
137
183
  --sky-color-background-container-info: var(--modern-color-blue-10);
138
184
  --sky-color-background-container-success: var(--modern-color-green-30);
139
185
  --sky-color-background-container-warning: var(--modern-color-yellow-30);
140
186
  --sky-color-background-container-danger: var(--modern-color-red-30);
141
187
  --sky-color-background-container-menu: var(--modern-color-white);
142
188
  --sky-color-background-container-base: var(--modern-color-white);
189
+ --sky-color-background-scrim: var(--modern-color-scrim);
143
190
  --sky-color-background-page: var(--modern-color-gray-005);
144
191
  --sky-color-icon-action: var(--modern-color-blue-74);
145
192
  --sky-color-icon-inverse: var(--modern-color-white);
@@ -210,22 +257,37 @@
210
257
  --sky-space-inline-m: var(--modern-space-md);
211
258
  --sky-space-inline-s: var(--modern-space-s);
212
259
  --sky-space-inline-xs: var(--modern-space-xs);
213
- --sky-space-text_action_gap-l: var(--modern-space-lg);
214
- --sky-space-text_action_gap-m: var(--modern-space-md);
215
- --sky-space-text_action_gap-xs: var(--modern-space-xs);
216
- --sky-space-stacked_supplemental-s: var(--modern-space-xs);
217
- --sky-space-stacked_supplemental-0: 0rem;
218
- --sky-space-label_gap-s: var(--modern-space-xs);
219
- --sky-space-label_gap-xs: var(--modern-size-2);
220
- --sky-space-label_gap-xxs: var(--modern-size-1);
221
- --sky-space-label_gap-0: 0rem;
222
- --sky-space-icon_gap-l: var(--modern-space-md);
223
- --sky-space-icon_gap-m: var(--modern-space-s);
224
- --sky-space-icon_gap-s: var(--modern-space-xs);
225
- --sky-space-form_gap-xl: var(--modern-space-xl);
226
- --sky-space-form_gap-l: var(--modern-space-lg);
227
- --sky-space-form_gap-m: var(--modern-space-md);
228
- --sky-space-form_gap-s: var(--modern-space-s);
260
+ --sky-space-gap-text_action-l: var(--modern-space-lg);
261
+ --sky-space-gap-text_action-m: var(--modern-space-md);
262
+ --sky-space-gap-text_action-s: var(--modern-space-s);
263
+ --sky-space-gap-text_action-xs: var(--modern-space-xs);
264
+ --sky-space-gap-text_action-0: 0rem;
265
+ --sky-space-gap-stacked_supplemental-m: var(--modern-size-10);
266
+ --sky-space-gap-stacked_supplemental-s: var(--modern-size-5);
267
+ --sky-space-gap-stacked_supplemental-0: 0rem;
268
+ --sky-space-gap-label-xl: var(--modern-size-20);
269
+ --sky-space-gap-label-l: var(--modern-size-15);
270
+ --sky-space-gap-label-m: var(--modern-size-10);
271
+ --sky-space-gap-label-s: var(--modern-size-5);
272
+ --sky-space-gap-label-xs: var(--modern-size-2);
273
+ --sky-space-gap-label-xxs: var(--modern-size-1);
274
+ --sky-space-gap-label-0: 0rem;
275
+ --sky-space-gap-icon-xl: var(--modern-size-20);
276
+ --sky-space-gap-icon-l: var(--modern-size-15);
277
+ --sky-space-gap-icon-m: var(--modern-size-10);
278
+ --sky-space-gap-icon-s: var(--modern-size-5);
279
+ --sky-space-gap-icon-0: 0rem;
280
+ --sky-space-gap-form-xl: var(--modern-space-xl);
281
+ --sky-space-gap-form-l: var(--modern-space-lg);
282
+ --sky-space-gap-form-m: var(--modern-space-md);
283
+ --sky-space-gap-form-s: var(--modern-space-s);
284
+ --sky-space-gap-form-0: 0rem;
285
+ --sky-space-gap-action_group-xl: var(--modern-size-20);
286
+ --sky-space-gap-action_group-l: var(--modern-size-15);
287
+ --sky-space-gap-action_group-m: var(--modern-size-10);
288
+ --sky-space-gap-action_group-s: var(--modern-size-5);
289
+ --sky-space-gap-action_group-0: 0rem;
290
+ --sky-space-inset-switch: calc(var(--sky-size-switch)+var(--sky-space-gap-label-s));
229
291
  --sky-space-inset-tabs-xl: var(--modern-space-xl);
230
292
  --sky-space-inset-tabs-l: var(--modern-space-lg);
231
293
  --sky-space-inset-tabs-m: var(--modern-space-md);