@tedi-design-system/core 2.0.0 → 2.2.0

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 (20) hide show
  1. package/_base.scss +3 -4
  2. package/_fonts.scss +10 -0
  3. package/_mixins.scss +4 -25
  4. package/_typography.scss +28 -29
  5. package/fonts/SpaceGrotesk-Light.woff +0 -0
  6. package/fonts/SpaceGrotesk-Light.woff2 +0 -0
  7. package/index.css +1 -1
  8. package/index.scss +2 -0
  9. package/package.json +5 -5
  10. package/variables/_base-variables-legacy.scss +110 -0
  11. package/variables/_base-variables.scss +231 -110
  12. package/variables/_color-variables.scss +6 -1111
  13. package/variables/_dimensional-variables-legacy.scss +1236 -0
  14. package/variables/_dimensional-variables.scss +1092 -1234
  15. package/variables/_font-variables.scss +5 -75
  16. package/variables/themes/default/color-variables__dark.scss +611 -0
  17. package/variables/themes/default/color-variables__default.scss +617 -0
  18. package/variables/themes/default/font-variables__default.scss +94 -0
  19. package/variables/themes/rit/color-variables__rit.scss +617 -0
  20. package/variables/themes/rit/font-variables__rit.scss +90 -0
package/variables/_dimensional-variables.scss CHANGED
@@ -1,1236 +1,1094 @@
1
1
  :root {
2
- --icon-05-desktop: var(--dimensions-13);
3
- --icon-05-tablet: var(--dimensions-13);
4
- --icon-05-mobile: var(--dimensions-13);
5
- --icon-06-desktop: var(--dimensions-15);
6
- --icon-06-tablet: var(--dimensions-15);
7
- --icon-06-mobile: var(--dimensions-15);
8
- --icon-07-desktop: var(--dimensions-18);
9
- --icon-07-tablet: var(--dimensions-18);
10
- --icon-07-mobile: var(--dimensions-18);
11
- --button-radius-default-desktop: var(--radius-08);
12
- --button-radius-default-tablet: var(--radius-08);
13
- --button-radius-default-mobile: var(--radius-08);
14
- --button-md-padding-x-desktop: var(--dimensions-11);
15
- --button-md-padding-x-tablet: var(--dimensions-11);
16
- --button-md-padding-x-mobile: var(--dimensions-11);
17
- --button-md-padding-y-desktop: var(--dimensions-05);
18
- --button-md-padding-y-tablet: var(--dimensions-05);
19
- --button-md-padding-y-mobile: var(--dimensions-06);
20
- --button-md-icon-padding-desktop: var(--dimensions-03);
21
- --button-md-icon-padding-tablet: var(--dimensions-03);
22
- --button-md-icon-padding-mobile: var(--dimensions-03);
23
- --button-sm-padding-x-desktop: var(--dimensions-09);
24
- --button-sm-padding-x-tablet: var(--dimensions-09);
25
- --button-sm-padding-x-mobile: var(--dimensions-11);
26
- --button-sm-padding-y-desktop: var(--dimensions-03);
27
- --button-sm-padding-y-tablet: var(--dimensions-03);
28
- --button-sm-padding-y-mobile: var(--dimensions-06);
29
- --button-sm-icon-padding-desktop: var(--dimensions-00);
30
- --button-sm-icon-padding-tablet: var(--dimensions-00);
31
- --button-sm-icon-padding-mobile: var(--dimensions-00);
32
- --button-md-inner-spacing-desktop: var(--dimensions-04);
33
- --button-md-inner-spacing-tablet: var(--dimensions-04);
34
- --button-md-inner-spacing-mobile: var(--dimensions-04);
35
- --button-sm-inner-spacing-desktop: var(--dimensions-03);
36
- --button-sm-inner-spacing-tablet: var(--dimensions-03);
37
- --button-sm-inner-spacing-mobile: var(--dimensions-04);
38
- --button-md-icon-size-desktop: var(--dimensions-16);
39
- --button-md-icon-size-tablet: var(--dimensions-16);
40
- --button-md-icon-size-mobile: var(--dimensions-17);
41
- --button-sm-icon-size-desktop: var(--dimensions-14);
42
- --button-sm-icon-size-tablet: var(--dimensions-14);
43
- --button-sm-icon-size-mobile: var(--dimensions-17);
44
- --button-md-neutral-padding-x-desktop: var(--dimensions-00);
45
- --button-md-neutral-padding-x-tablet: var(--dimensions-00);
46
- --button-md-neutral-padding-x-mobile: var(--dimensions-00);
47
- --button-md-neutral-padding-y-desktop: var(--dimensions-05);
48
- --button-md-neutral-padding-y-tablet: var(--dimensions-05);
49
- --button-md-neutral-padding-y-mobile: var(--dimensions-06);
50
- --button-sm-neutral-padding-x-desktop: var(--dimensions-00);
51
- --button-sm-neutral-padding-x-tablet: var(--dimensions-00);
52
- --button-sm-neutral-padding-x-mobile: var(--dimensions-00);
53
- --button-sm-neutral-padding-y-desktop: var(--dimensions-03);
54
- --button-sm-neutral-padding-y-tablet: var(--dimensions-03);
55
- --button-sm-neutral-padding-y-mobile: var(--dimensions-06);
56
- --button-gutter-x-desktop: var(--dimensions-10);
57
- --button-gutter-x-tablet: var(--dimensions-10);
58
- --button-gutter-x-mobile: var(--dimensions-10);
59
- --button-gutter-y-desktop: var(--dimensions-10);
60
- --button-gutter-y-tablet: var(--dimensions-10);
61
- --button-gutter-y-mobile: var(--dimensions-10);
62
- --list-icon-padding-y-desktop: var(--dimensions-05);
63
- --list-icon-padding-y-tablet: var(--dimensions-05);
64
- --list-icon-padding-y-mobile: var(--dimensions-05);
65
- --list-icon-size-desktop: var(--icon-00-desktop);
66
- --list-icon-size-tablet: var(--icon-00-tablet);
67
- --list-icon-size-mobile: var(--icon-00-mobile);
68
- --icon-02-desktop: var(--dimensions-10);
69
- --icon-02-tablet: var(--dimensions-10);
70
- --icon-02-mobile: var(--dimensions-10);
71
- --list-inner-spacing-x-desktop: var(--dimensions-05);
72
- --list-inner-spacing-x-tablet: var(--dimensions-05);
73
- --list-inner-spacing-x-mobile: var(--dimensions-05);
74
- --list-padding-left-level-2-desktop: var(--dimensions-14);
75
- --list-padding-left-level-2-tablet: var(--dimensions-14);
76
- --list-padding-left-level-2-mobile: var(--dimensions-13);
77
- --list-padding-left-level-3-desktop: var(--dimensions-18);
78
- --list-padding-left-level-3-tablet: var(--dimensions-18);
79
- --list-padding-left-level-3-mobile: var(--dimensions-16);
80
- --link-inner-spacing-x-desktop: var(--dimensions-03);
81
- --link-inner-spacing-x-tablet: var(--dimensions-03);
82
- --link-inner-spacing-x-mobile: var(--dimensions-03);
83
- --card-padding-md-default-desktop: var(--dimensions-10);
84
- --card-padding-md-default-tablet: var(--dimensions-10);
85
- --card-padding-md-default-mobile: var(--dimensions-10);
86
- --card-padding-lg-desktop: var(--dimensions-13);
87
- --card-padding-lg-tablet: var(--dimensions-10);
88
- --card-padding-lg-mobile: var(--dimensions-05);
89
- --card-radius-rounded-desktop: var(--radius-02-default);
90
- --card-radius-rounded-tablet: var(--radius-02-default);
91
- --card-radius-rounded-mobile: var(--radius-02-default);
92
- --separator-spacing-y-02-desktop: var(--dimensions-05);
93
- --separator-spacing-y-02-tablet: var(--dimensions-05);
94
- --separator-spacing-y-02-mobile: var(--dimensions-05);
95
- --separator-spacing-y-03-desktop: var(--dimensions-10);
96
- --separator-spacing-y-03-tablet: var(--dimensions-10);
97
- --separator-spacing-y-03-mobile: var(--dimensions-10);
98
- --separator-spacing-y-04-desktop: var(--dimensions-13);
99
- --separator-spacing-y-04-tablet: var(--dimensions-13);
100
- --separator-spacing-y-04-mobile: var(--dimensions-13);
101
- --content-heading-inner-spacing-x-desktop: var(--dimensions-05);
102
- --content-heading-inner-spacing-x-tablet: var(--dimensions-05);
103
- --content-heading-inner-spacing-x-mobile: var(--dimensions-05);
104
- --content-label-inner-spacing-x-desktop: var(--dimensions-02);
105
- --content-label-inner-spacing-x-tablet: var(--dimensions-02);
106
- --content-label-inner-spacing-x-mobile: var(--dimensions-02);
107
- --separator-spacing-x-01-desktop: var(--dimensions-04);
108
- --separator-spacing-x-01-tablet: var(--dimensions-04);
109
- --separator-spacing-x-01-mobile: var(--dimensions-04);
110
- --separator-spacing-y-01-desktop: var(--dimensions-03);
111
- --separator-spacing-y-01-tablet: var(--dimensions-03);
112
- --separator-spacing-y-01-mobile: var(--dimensions-03);
113
- --button-width-max-desktop: var(--dimensions-25);
114
- --button-width-max-tablet: var(--dimensions-25);
115
- --button-width-max-mobile: var(--dimensions-25);
116
- --separator-dotted-dot-lg-desktop: 15px;
117
- --separator-dotted-dot-lg-rem-desktop: 0.9375rem;
118
- --separator-dotted-dot-lg-tablet: 15px;
119
- --separator-dotted-dot-lg-rem-tablet: 0.9375rem;
120
- --separator-dotted-dot-lg-mobile: 15px;
121
- --separator-dotted-dot-lg-rem-mobile: 0.9375rem;
122
- --separator-dotted-line-width-desktop: var(--dimensions-01);
123
- --separator-dotted-line-width-tablet: var(--dimensions-01);
124
- --separator-dotted-line-width-mobile: var(--dimensions-01);
125
- --separator-dotted-dot-md-desktop: 9px;
126
- --separator-dotted-dot-md-rem-desktop: 0.5625rem;
127
- --separator-dotted-dot-md-tablet: 9px;
128
- --separator-dotted-dot-md-rem-tablet: 0.5625rem;
129
- --separator-dotted-dot-md-mobile: 9px;
130
- --separator-dotted-dot-md-rem-mobile: 0.5625rem;
131
- --card-radius-sharp-desktop: var(--radius-00);
132
- --card-radius-sharp-tablet: var(--radius-00);
133
- --card-radius-sharp-mobile: var(--radius-00);
134
- --icon-background-padding-lg-desktop: var(--dimensions-07);
135
- --icon-background-padding-lg-tablet: var(--dimensions-07);
136
- --icon-background-padding-lg-mobile: var(--dimensions-07);
137
- --icon-background-radius-desktop: var(--radius-08);
138
- --icon-background-radius-tablet: var(--radius-08);
139
- --icon-background-radius-mobile: var(--radius-08);
140
- --loader-spinner-sizing-sm-desktop: var(--dimensions-06);
141
- --loader-spinner-sizing-sm-tablet: var(--dimensions-06);
142
- --loader-spinner-sizing-sm-mobile: var(--dimensions-06);
143
- --loader-spinner-sizing-md-desktop: var(--dimensions-10);
144
- --loader-spinner-sizing-md-tablet: var(--dimensions-10);
145
- --loader-spinner-sizing-md-mobile: var(--dimensions-10);
146
- --loader-spinner-sizing-lg-desktop: var(--dimensions-18);
147
- --loader-spinner-sizing-lg-tablet: var(--dimensions-18);
148
- --loader-spinner-sizing-lg-mobile: var(--dimensions-18);
149
- --loader-spinner-page-spacing-top-desktop: var(--dimensions-22);
150
- --loader-spinner-page-spacing-top-tablet: var(--dimensions-22);
151
- --loader-spinner-page-spacing-top-mobile: var(--dimensions-22);
152
- --icon-background-padding-sm-desktop: var(--dimensions-05);
153
- --icon-background-padding-sm-tablet: var(--dimensions-05);
154
- --icon-background-padding-sm-mobile: var(--dimensions-05);
155
- --icon-00-desktop: var(--dimensions-05);
156
- --icon-00-tablet: var(--dimensions-05);
157
- --icon-00-mobile: var(--dimensions-05);
158
- --loader-skeleton-height-100-desktop: 24px;
159
- --loader-skeleton-height-100-rem-desktop: 1.5rem;
160
- --loader-skeleton-height-100-tablet: 24px;
161
- --loader-skeleton-height-100-rem-tablet: 1.5rem;
162
- --loader-skeleton-height-100-mobile: 24px;
163
- --loader-skeleton-height-100-rem-mobile: 1.5rem;
164
- --loader-skeleton-height-200-desktop: 32px;
165
- --loader-skeleton-height-200-rem-desktop: 2rem;
166
- --loader-skeleton-height-200-tablet: 32px;
167
- --loader-skeleton-height-200-rem-tablet: 2rem;
168
- --loader-skeleton-height-200-mobile: 32px;
169
- --loader-skeleton-height-200-rem-mobile: 2rem;
170
- --loader-skeleton-height-300-desktop: 36px;
171
- --loader-skeleton-height-300-rem-desktop: 2.25rem;
172
- --loader-skeleton-height-300-tablet: 36px;
173
- --loader-skeleton-height-300-rem-tablet: 2.25rem;
174
- --loader-skeleton-height-300-mobile: 36px;
175
- --loader-skeleton-height-300-rem-mobile: 2.25rem;
176
- --loader-skeleton-height-400-desktop: 46px;
177
- --loader-skeleton-height-400-rem-desktop: 2.875rem;
178
- --loader-skeleton-height-400-tablet: 46px;
179
- --loader-skeleton-height-400-rem-tablet: 2.875rem;
180
- --loader-skeleton-height-400-mobile: 46px;
181
- --loader-skeleton-height-400-rem-mobile: 2.875rem;
182
- --loader-skeleton-height-500-desktop: 100;
183
- --loader-skeleton-height-500-tablet: 100;
184
- --loader-skeleton-height-500-mobile: 100;
185
- --loader-skeleton-radius-desktop: var(--radius-02-default);
186
- --loader-skeleton-radius-tablet: var(--radius-02-default);
187
- --loader-skeleton-radius-mobile: var(--radius-02-default);
188
- --loader-skeleton-inner-spacing-y-desktop: var(--dimensions-10);
189
- --loader-skeleton-inner-spacing-y-tablet: var(--dimensions-10);
190
- --loader-skeleton-inner-spacing-y-mobile: var(--dimensions-10);
191
- --button-width-min-desktop: var(--dimensions-23);
192
- --button-width-min-tablet: var(--dimensions-23);
193
- --button-width-min-mobile: var(--dimensions-23);
194
- --button-width-min-sm-desktop: var(--dimensions-21);
195
- --button-width-min-sm-tablet: var(--dimensions-21);
196
- --button-width-min-sm-mobile: var(--dimensions-21);
197
- --card-padding-xs-desktop: var(--dimensions-05);
198
- --card-padding-xs-tablet: var(--dimensions-05);
199
- --card-padding-xs-mobile: var(--dimensions-05);
200
- --icon-03-desktop: var(--dimensions-11);
201
- --icon-03-tablet: var(--dimensions-11);
202
- --icon-03-mobile: var(--dimensions-11);
203
- --icon-01-desktop: var(--dimensions-07);
204
- --icon-01-tablet: var(--dimensions-07);
205
- --icon-01-mobile: var(--dimensions-07);
206
- --tag-default-padding-x-desktop: var(--dimensions-03);
207
- --tag-default-padding-x-tablet: var(--dimensions-03);
208
- --tag-default-padding-x-mobile: var(--dimensions-03);
209
- --tag-default-padding-y-desktop: var(--dimensions-02);
210
- --tag-default-padding-y-tablet: var(--dimensions-02);
211
- --tag-default-padding-y-mobile: var(--dimensions-02);
212
- --tag-default-radius-desktop: var(--radius-02-default);
213
- --tag-default-radius-tablet: var(--radius-02-default);
214
- --tag-default-radius-mobile: var(--radius-02-default);
215
- --tag-status-icon-padding-y-desktop: var(--dimensions-03);
216
- --tag-status-icon-padding-y-tablet: var(--dimensions-03);
217
- --tag-status-icon-padding-y-mobile: var(--dimensions-03);
218
- --tag-status-icon-padding-x-desktop: var(--dimensions-03);
219
- --tag-status-icon-padding-x-tablet: var(--dimensions-03);
220
- --tag-status-icon-padding-x-mobile: var(--dimensions-03);
221
- --button-xxs-icon-size-desktop: var(--dimensions-10);
222
- --button-xxs-icon-size-tablet: var(--dimensions-10);
223
- --button-xxs-icon-size-mobile: var(--dimensions-10);
224
- --avatar-size-md-desktop: var(--dimensions-14);
225
- --avatar-size-md-tablet: var(--dimensions-14);
226
- --avatar-size-md-mobile: var(--dimensions-14);
227
- --avatar-size-sm-desktop: var(--dimensions-13);
228
- --avatar-size-sm-tablet: var(--dimensions-13);
229
- --avatar-size-sm-mobile: var(--dimensions-13);
230
- --avatar-size-lg-desktop: var(--dimensions-16);
231
- --avatar-size-lg-tablet: var(--dimensions-16);
232
- --avatar-size-lg-mobile: var(--dimensions-16);
233
- --status-indicator-sm-desktop: var(--dimensions-05);
234
- --status-indicator-sm-tablet: var(--dimensions-05);
235
- --status-indicator-sm-mobile: var(--dimensions-05);
236
- --status-indicator-lg-desktop: var(--dimensions-07);
237
- --status-indicator-lg-tablet: var(--dimensions-07);
238
- --status-indicator-lg-mobile: var(--dimensions-07);
239
- --breadcrumb-inner-spacing-desktop: var(--dimensions-03);
240
- --breadcrumb-inner-spacing-tablet: var(--dimensions-03);
241
- --breadcrumb-inner-spacing-mobile: var(--dimensions-03);
242
- --empty-state-padding-desktop: var(--dimensions-13);
243
- --empty-state-padding-tablet: var(--dimensions-13);
244
- --empty-state-padding-mobile: var(--dimensions-10);
245
- --empty-state-radius-desktop: var(--radius-02-default);
246
- --empty-state-radius-tablet: var(--radius-02-default);
247
- --empty-state-radius-mobile: var(--radius-02-default);
248
- --empty-state-inner-spacing-y-lg-desktop: var(--dimensions-10);
249
- --empty-state-inner-spacing-y-lg-tablet: var(--dimensions-10);
250
- --empty-state-inner-spacing-y-lg-mobile: var(--dimensions-05);
251
- --link-icon-padding-y-desktop: var(--dimensions-03);
252
- --link-icon-padding-y-tablet: var(--dimensions-03);
253
- --link-icon-padding-y-mobile: var(--dimensions-03);
254
- --link-icon-padding-top-desktop: var(--dimensions-02);
255
- --link-icon-padding-top-tablet: var(--dimensions-02);
256
- --link-icon-padding-top-mobile: var(--dimensions-02);
257
- --form-checkbox-radio-card-radius-desktop: var(--radius-02-default);
258
- --form-checkbox-radio-card-radius-tablet: var(--radius-02-default);
259
- --form-checkbox-radio-card-radius-mobile: var(--radius-02-default);
260
- --form-checkbox-radio-card-checkbox-padding-x-desktop: var(--form-checkbox-radio-card-checkbox-padding-y-desktop);
261
- --form-checkbox-radio-card-checkbox-padding-x-tablet: var(--form-checkbox-radio-card-checkbox-padding-y-tablet);
262
- --form-checkbox-radio-card-checkbox-padding-x-mobile: var(--form-checkbox-radio-card-checkbox-padding-y-mobile);
263
- --form-checkbox-radio-card-checkbox-padding-y-desktop: var(--dimensions-05);
264
- --form-checkbox-radio-card-checkbox-padding-y-tablet: var(--dimensions-05);
265
- --form-checkbox-radio-card-checkbox-padding-y-mobile: var(--dimensions-05);
266
- --form-checkbox-radio-card-inner-spacing-desktop: var(--button-md-inner-spacing-desktop);
267
- --form-checkbox-radio-card-inner-spacing-tablet: var(--button-md-inner-spacing-tablet);
268
- --form-checkbox-radio-card-inner-spacing-mobile: var(--button-md-inner-spacing-mobile);
269
- --form-checkbox-radio-size-responsive-desktop: var(--dimensions-11);
270
- --form-checkbox-radio-size-responsive-tablet: var(--dimensions-11);
271
- --form-checkbox-radio-size-responsive-mobile: var(--dimensions-13);
272
- --form-checkbox-radio-inner-spacing-desktop: var(--dimensions-05);
273
- --form-checkbox-radio-inner-spacing-tablet: var(--dimensions-05);
274
- --form-checkbox-radio-inner-spacing-mobile: var(--dimensions-05);
275
- --form-checkbox-radio-indicator-radius-checkbox-desktop: var(--dimensions-02);
276
- --form-checkbox-radio-indicator-radius-checkbox-tablet: var(--dimensions-02);
277
- --form-checkbox-radio-indicator-radius-checkbox-mobile: var(--dimensions-02);
278
- --form-checkbox-radio-card-checkbox-indicator-padding-y-desktop: var(--dimensions-07);
279
- --form-checkbox-radio-card-checkbox-indicator-padding-y-tablet: var(--dimensions-07);
280
- --form-checkbox-radio-card-checkbox-indicator-padding-y-mobile: var(--dimensions-07);
281
- --tag-status-large-padding-y-desktop: var(--dimensions-05);
282
- --tag-status-large-padding-y-tablet: var(--dimensions-05);
283
- --tag-status-large-padding-y-mobile: var(--dimensions-05);
284
- --tag-status-large-padding-x-desktop: var(--dimensions-05);
285
- --tag-status-large-padding-x-tablet: var(--dimensions-05);
286
- --tag-status-large-padding-x-mobile: var(--dimensions-05);
287
- --status-indicator-inner-spacing-desktop: var(--dimensions-05);
288
- --status-indicator-inner-spacing-tablet: var(--dimensions-05);
289
- --status-indicator-inner-spacing-mobile: var(--dimensions-05);
290
- --text-group-value-inner-spacing-desktop: var(--dimensions-04);
291
- --text-group-value-inner-spacing-tablet: var(--dimensions-04);
292
- --text-group-value-inner-spacing-mobile: var(--dimensions-04);
293
- --text-group-value-icon-padding-top-desktop: var(--dimensions-03);
294
- --text-group-value-icon-padding-top-tablet: var(--dimensions-03);
295
- --text-group-value-icon-padding-top-mobile: var(--dimensions-03);
296
- --list-list-item-margin-y-desktop: var(--dimensions-05);
297
- --list-list-item-margin-y-tablet: var(--dimensions-05);
298
- --list-list-item-margin-y-mobile: var(--dimensions-05);
299
- --tag-status-large-min-width-desktop: var(--dimensions-21);
300
- --tag-status-large-min-width-tablet: var(--dimensions-21);
301
- --tag-status-large-min-width-mobile: var(--dimensions-21);
302
- --text-group-label-width-sm-desktop: 132px;
303
- --text-group-label-width-sm-rem-desktop: 8.25rem;
304
- --text-group-label-width-sm-tablet: 132px;
305
- --text-group-label-width-sm-rem-tablet: 8.25rem;
306
- --text-group-label-width-sm-mobile: 132px;
307
- --text-group-label-width-sm-rem-mobile: 8.25rem;
308
- --text-group-label-width-md-desktop: 164px;
309
- --text-group-label-width-md-rem-desktop: 10.25rem;
310
- --text-group-label-width-md-tablet: 164px;
311
- --text-group-label-width-md-rem-tablet: 10.25rem;
312
- --text-group-label-width-md-mobile: 164px;
313
- --text-group-label-width-md-rem-mobile: 10.25rem;
314
- --text-group-label-width-lg-desktop: 196px;
315
- --text-group-label-width-lg-rem-desktop: 12.25rem;
316
- --text-group-label-width-lg-tablet: 196px;
317
- --text-group-label-width-lg-rem-tablet: 12.25rem;
318
- --text-group-label-width-lg-mobile: 196px;
319
- --text-group-label-width-lg-rem-mobile: 12.25rem;
320
- --layout-page-spacing-top-desktop: var(--dimensions-13);
321
- --layout-page-spacing-top-tablet: var(--dimensions-13);
322
- --layout-page-spacing-top-mobile: var(--dimensions-13);
323
- --layout-page-spacing-x-desktop: 40px;
324
- --layout-page-spacing-x-rem-desktop: 2.5rem;
325
- --layout-page-spacing-x-tablet: 24px;
326
- --layout-page-spacing-x-rem-tablet: 1.5rem;
327
- --layout-page-spacing-x-mobile: 8px;
328
- --layout-page-spacing-x-rem-mobile: 0.5rem;
329
- --breadcrumb-spacing-bottom-desktop: var(--dimensions-13);
330
- --breadcrumb-spacing-bottom-tablet: var(--dimensions-13);
331
- --breadcrumb-spacing-bottom-mobile: var(--dimensions-10);
332
- --layout-header-padding-y-sm-desktop: var(--dimensions-07);
333
- --layout-header-padding-y-sm-tablet: var(--dimensions-07);
334
- --layout-header-padding-y-sm-mobile: 0rem;
335
- --layout-header-padding-y-desktop: var(--dimensions-10);
336
- --layout-header-padding-y-tablet: 0rem;
337
- --layout-header-padding-y-mobile: 0rem;
338
- --layout-header-padding-left-desktop: var(--dimensions-13);
339
- --layout-header-padding-left-tablet: var(--dimensions-13);
340
- --layout-header-padding-left-mobile: var(--dimensions-06);
341
- --layout-header-padding-right-desktop: var(--dimensions-13);
342
- --layout-header-padding-right-tablet: var(--dimensions-13);
343
- --layout-header-padding-right-mobile: 0rem;
344
- --layout-header-profile-icon-desktop: var(--icon-06);
345
- --layout-header-profile-icon-tablet: var(--icon-06);
346
- --layout-header-profile-icon-mobile: var(--icon-05);
347
- --layout-header-mobile-button-size-desktop: var(--dimensions-19);
348
- --layout-header-mobile-button-size-tablet: var(--dimensions-19);
349
- --layout-header-mobile-button-size-mobile: var(--dimensions-19);
350
- --layout-header-min-height-desktop: 5.25rem;
351
- --layout-header-min-height-tablet: 3.5rem;
352
- --layout-header-min-height-mobile: 3.5rem;
353
- --layout-header-items-right-gutter-x-desktop: var(--dimensions-13);
354
- --layout-header-items-right-gutter-x-tablet: var(--dimensions-10);
355
- --layout-header-items-center-gutter-x-mobile: var(--dimensions-07);
356
- --layout-header-items-center-gutter-x-desktop: var(--dimensions-18);
357
- --layout-header-items-center-gutter-x-tablet: var(--dimensions-13);
358
- --layout-header-items-right-gutter-x-mobile: var(--dimensions-07);
359
- --layout-header-modal-item-padding-desktop: var(--dimensions-10);
360
- --layout-header-modal-item-padding-tablet: var(--dimensions-10);
361
- --layout-header-modal-item-padding-mobile: var(--dimensions-10);
362
- --button-gutter-x-sm-desktop: var(--dimensions-05);
363
- --button-gutter-x-sm-tablet: var(--dimensions-05);
364
- --button-gutter-x-sm-mobile: var(--dimensions-05);
365
- --button-radius-sm-desktop: var(--radius-02-default);
366
- --button-radius-sm-tablet: var(--radius-02-default);
367
- --button-radius-sm-mobile: var(--radius-02-default);
368
- --form-checkbox-radio-card-gutter-desktop: var(--button-gutter-x-sm-desktop);
369
- --form-checkbox-radio-card-gutter-tablet: var(--button-gutter-x-sm-tablet);
370
- --form-checkbox-radio-card-gutter-mobile: var(--button-gutter-x-sm-mobile);
371
- --form-checkbox-radio-card-checkbox-icon-padding-y-desktop: var(--dimensions-04);
372
- --form-checkbox-radio-card-checkbox-icon-padding-y-tablet: var(--dimensions-04);
373
- --form-checkbox-radio-card-checkbox-icon-padding-y-mobile: var(--dimensions-04);
374
- --content-label-info-icon-padding-y-desktop: var(--dimensions-03);
375
- --content-label-info-icon-padding-y-tablet: var(--dimensions-03);
376
- --content-label-info-icon-padding-y-mobile: var(--dimensions-03);
377
- --tooltip-padding-x-desktop: var(--card-padding-xs-desktop);
378
- --tooltip-padding-x-tablet: var(--card-padding-xs-tablet);
379
- --tooltip-padding-x-mobile: var(--card-padding-xs-mobile);
380
- --tooltip-padding-y-desktop: var(--tooltip-padding-x-desktop);
381
- --tooltip-padding-y-tablet: var(--tooltip-padding-x-tablet);
382
- --tooltip-padding-y-mobile: var(--tooltip-padding-x-mobile);
383
- --tooltip-radius-desktop: var(--card-radius-rounded-desktop);
384
- --tooltip-radius-tablet: var(--card-radius-rounded-tablet);
385
- --tooltip-radius-mobile: var(--card-radius-rounded-mobile);
386
- --tooltip-max-width-desktop: var(--containers-02);
387
- --tooltip-max-width-tablet: var(--containers-02);
388
- --tooltip-max-width-mobile: var(--containers-02);
389
- --popover-padding-xs-desktop: var(--card-padding-xs-desktop);
390
- --popover-padding-xs-tablet: var(--card-padding-xs-tablet);
391
- --popover-padding-xs-mobile: var(--card-padding-xs-mobile);
392
- --popover-padding-sm-desktop: var(--card-padding-md-default-desktop);
393
- --popover-padding-sm-tablet: var(--card-padding-md-default-tablet);
394
- --popover-padding-sm-mobile: var(--card-padding-md-default-mobile);
395
- --popover-padding-md-desktop: var(--card-padding-lg-desktop);
396
- --popover-padding-md-tablet: var(--card-padding-lg-tablet);
397
- --popover-padding-md-mobile: var(--card-padding-lg-mobile);
398
- --popover-radius-rounded-desktop: var(--card-radius-rounded-desktop);
399
- --popover-radius-rounded-tablet: var(--card-radius-rounded-tablet);
400
- --popover-radius-rounded-mobile: var(--card-radius-rounded-mobile);
401
- --popover-width-01-desktop: var(--containers-02);
402
- --popover-width-01-tablet: var(--containers-02);
403
- --popover-width-01-mobile: var(--containers-02);
404
- --popover-width-02-desktop: var(--containers-06);
405
- --popover-width-02-tablet: var(--containers-06);
406
- --popover-width-02-mobile: var(--containers-06);
407
- --popover-width-03-desktop: var(--containers-10);
408
- --popover-width-03-tablet: var(--containers-10);
409
- --popover-width-03-mobile: var(--containers-10);
410
- --content-heading-icon-padding-top-desktop: var(--dimensions-02);
411
- --content-heading-icon-padding-top-tablet: var(--dimensions-02);
412
- --content-heading-icon-padding-top-mobile: var(--dimensions-02);
413
- --empty-state-inner-spacing-y-sm-desktop: var(--dimensions-03);
414
- --empty-state-inner-spacing-y-sm-tablet: var(--dimensions-03);
415
- --empty-state-inner-spacing-y-sm-mobile: var(--dimensions-03);
416
- --form-checkbox-radio-card-radio-padding-y-desktop: var(--dimensions-05);
417
- --form-checkbox-radio-card-radio-padding-y-tablet: var(--dimensions-05);
418
- --form-checkbox-radio-card-radio-padding-y-mobile: var(--dimensions-05);
419
- --form-checkbox-radio-card-radio-padding-x-desktop: var(--form-checkbox-radio-card-checkbox-padding-y-desktop);
420
- --form-checkbox-radio-card-radio-padding-x-tablet: var(--form-checkbox-radio-card-checkbox-padding-y-tablet);
421
- --form-checkbox-radio-card-radio-padding-x-mobile: var(--form-checkbox-radio-card-checkbox-padding-y-mobile);
422
- --form-checkbox-radio-card-radio-indicator-padding-y-desktop: var(--dimensions-06);
423
- --form-checkbox-radio-card-radio-indicator-padding-y-tablet: var(--dimensions-06);
424
- --form-checkbox-radio-card-radio-indicator-padding-y-mobile: var(--dimensions-06);
425
- --form-checkbox-radio-card-radio-icon-padding-y-desktop: var(--dimensions-04);
426
- --form-checkbox-radio-card-radio-icon-padding-y-tablet: var(--dimensions-04);
427
- --form-checkbox-radio-card-radio-icon-padding-y-mobile: var(--dimensions-04);
428
- --button-icon-inner-size-desktop: var(--dimensions-11);
429
- --button-icon-inner-size-tablet: var(--dimensions-11);
430
- --button-icon-inner-size-mobile: var(--dimensions-11);
431
- --button-icon-inner-icon-only-size-desktop: var(--dimensions-11);
432
- --button-icon-inner-icon-only-size-tablet: var(--dimensions-11);
433
- --button-icon-inner-icon-only-size-mobile: var(--dimensions-11);
434
- --empty-state-padding-sm-desktop: var(--dimensions-10);
435
- --empty-state-padding-sm-tablet: var(--dimensions-10);
436
- --empty-state-padding-sm-mobile: var(--dimensions-10);
437
- --button-xs-icon-size-desktop: var(--dimensions-13);
438
- --button-xs-icon-size-tablet: var(--dimensions-13);
439
- --button-xs-icon-size-mobile: var(--dimensions-13);
440
- --form-checkbox-radio-gutter-y-desktop: var(--dimensions-03);
441
- --form-checkbox-radio-gutter-y-tablet: var(--dimensions-03);
442
- --form-checkbox-radio-gutter-y-mobile: var(--dimensions-05);
443
- --form-checkbox-radio-gutter-x-desktop: var(--dimensions-07);
444
- --form-checkbox-radio-gutter-x-tablet: var(--dimensions-07);
445
- --form-checkbox-radio-gutter-x-mobile: var(--dimensions-07);
446
- --layout-grid-gutters-04-desktop: var(--dimensions-03);
447
- --layout-grid-gutters-04-tablet: var(--dimensions-03);
448
- --layout-grid-gutters-04-mobile: var(--dimensions-03);
449
- --layout-grid-gutters-08-desktop: var(--dimensions-05);
450
- --layout-grid-gutters-08-tablet: var(--dimensions-05);
451
- --layout-grid-gutters-08-mobile: var(--dimensions-05);
452
- --layout-grid-gutters-12-desktop: var(--dimensions-07);
453
- --layout-grid-gutters-12-tablet: var(--dimensions-07);
454
- --layout-grid-gutters-12-mobile: var(--dimensions-07);
455
- --layout-grid-gutters-16-desktop: var(--dimensions-10);
456
- --layout-grid-gutters-16-tablet: var(--dimensions-10);
457
- --layout-grid-gutters-16-mobile: var(--dimensions-10);
458
- --form-checkbox-radio-subitem-padding-left-desktop: var(--dimensions-14);
459
- --form-checkbox-radio-subitem-padding-left-tablet: var(--dimensions-14);
460
- --form-checkbox-radio-subitem-padding-left-mobile: var(--dimensions-14);
461
- --separator-spacing-x-02-desktop: var(--dimensions-07);
462
- --separator-spacing-x-02-tablet: var(--dimensions-07);
463
- --separator-spacing-x-02-mobile: var(--dimensions-07);
464
- --separator-spacing-x-03-desktop: var(--dimensions-13);
465
- --separator-spacing-x-03-tablet: var(--dimensions-13);
466
- --separator-spacing-x-03-mobile: var(--dimensions-13);
467
- --separator-dotted-dot-sm-desktop: var(--dimensions-03);
468
- --separator-dotted-dot-sm-tablet: var(--dimensions-03);
469
- --separator-dotted-dot-sm-mobile: var(--dimensions-03);
470
- --tab-spacing-x-desktop: var(--dimensions-10);
471
- --tab-spacing-x-tablet: var(--dimensions-10);
472
- --tab-spacing-x-mobile: var(--dimensions-10);
473
- --tab-spacing-y-desktop: var(--tab-spacing-x-desktop);
474
- --tab-spacing-y-tablet: var(--tab-spacing-x-tablet);
475
- --tab-spacing-y-mobile: var(--dimensions-07);
476
- --tab-top-radius-desktop: var(--card-radius-rounded-desktop);
477
- --tab-top-radius-tablet: var(--card-radius-rounded-tablet);
478
- --tab-top-radius-mobile: var(--card-radius-rounded-mobile);
479
- --tab-icon-desktop: 18px;
480
- --tab-icon-rem-desktop: 1.125rem;
481
- --tab-icon-tablet: 18px;
482
- --tab-icon-rem-tablet: 1.125rem;
483
- --tab-icon-mobile: 18px;
484
- --tab-icon-rem-mobile: 1.125rem;
485
- --tab-inner-spacing-desktop: var(--dimensions-05);
486
- --tab-inner-spacing-tablet: var(--dimensions-05);
487
- --tab-inner-spacing-mobile: var(--dimensions-05);
488
- --alert-default-padding-x-desktop: 20px;
489
- --alert-default-padding-x-rem-desktop: 1.25rem;
490
- --alert-default-padding-x-tablet: 20px;
491
- --alert-default-padding-x-rem-tablet: 1.25rem;
492
- --alert-default-padding-x-mobile: var(--dimensions-10);
493
- --alert-default-padding-y-desktop: var(--dimensions-10);
494
- --alert-default-padding-y-tablet: var(--dimensions-10);
495
- --alert-default-padding-y-mobile: var(--dimensions-10);
496
- --alert-radius-desktop: var(--card-radius-rounded-desktop);
497
- --alert-radius-tablet: var(--card-radius-rounded-tablet);
498
- --alert-radius-mobile: var(--card-radius-rounded-mobile);
499
- --alert-default-inner-spacing-y-desktop: var(--dimensions-03);
500
- --alert-default-inner-spacing-y-tablet: var(--dimensions-03);
501
- --alert-default-inner-spacing-y-mobile: var(--dimensions-03);
502
- --alert-default-inner-spacing-x-desktop: var(--dimensions-05);
503
- --alert-default-inner-spacing-x-tablet: var(--dimensions-05);
504
- --alert-default-inner-spacing-x-mobile: var(--dimensions-05);
505
- --alert-default-icon-top-padding-desktop: var(--dimensions-02);
506
- --alert-default-icon-top-padding-tablet: var(--dimensions-02);
507
- --alert-default-icon-top-padding-mobile: var(--dimensions-02);
508
- --alert-default-icon-size-desktop: var(--button-icon-inner-size-desktop);
509
- --alert-default-icon-size-tablet: var(--button-icon-inner-size-tablet);
510
- --alert-default-icon-size-mobile: var(--button-icon-inner-size-mobile);
511
- --alert-illustrative-inner-spacing-x-desktop: var(--dimensions-10);
512
- --alert-illustrative-inner-spacing-x-tablet: var(--dimensions-10);
513
- --alert-illustrative-inner-spacing-x-mobile: var(--dimensions-10);
514
- --alert-illustrative-padding-y-desktop: var(--dimensions-07);
515
- --alert-illustrative-padding-y-tablet: var(--dimensions-07);
516
- --alert-illustrative-padding-y-mobile: var(--dimensions-07);
517
- --alert-illustrative-padding-x-desktop: var(--alert-default-padding-x-desktop);
518
- --alert-illustrative-padding-x-tablet: var(--alert-default-padding-x-tablet);
519
- --alert-illustrative-padding-x-mobile: var(--alert-default-padding-x-mobile);
520
- --alert-illustrative-min-width-desktop: 380px;
521
- --alert-illustrative-min-width-rem-desktop: 23.75rem;
522
- --alert-illustrative-min-width-tablet: 380px;
523
- --alert-illustrative-min-width-rem-tablet: 23.75rem;
524
- --alert-illustrative-min-width-mobile: 380px;
525
- --alert-illustrative-min-width-rem-mobile: 23.75rem;
526
- --alert-illustrative-text-max-width-desktop: 748px;
527
- --alert-illustrative-text-max-width-rem-desktop: 46.75rem;
528
- --alert-illustrative-text-max-width-tablet: 748px;
529
- --alert-illustrative-text-max-width-rem-tablet: 46.75rem;
530
- --alert-illustrative-text-max-width-mobile: 748px;
531
- --alert-illustrative-text-max-width-rem-mobile: 46.75rem;
532
- --form-select-item-padding-y-desktop: var(--dimensions-05);
533
- --form-select-item-padding-y-tablet: var(--dimensions-05);
534
- --form-select-item-padding-y-mobile: var(--dimensions-07);
535
- --form-select-item-padding-x-desktop: var(--dimensions-07);
536
- --form-select-item-padding-x-tablet: var(--dimensions-07);
537
- --form-select-item-padding-x-mobile: var(--dimensions-07);
538
- --form-select-item-radius-desktop: var(--radius-02-default);
539
- --form-select-item-radius-tablet: var(--radius-02-default);
540
- --form-select-item-radius-mobile: var(--radius-02-default);
541
- --empty-state-inner-spacing-y-md-desktop: var(--dimensions-05);
542
- --empty-state-inner-spacing-y-md-tablet: var(--dimensions-05);
543
- --empty-state-inner-spacing-y-md-mobile: var(--dimensions-05);
544
- --toast-width-desktop: var(--containers-03);
545
- --toast-width-tablet: var(--containers-03);
546
- --toast-width-mobile: var(--containers-03);
547
- --toast-padding-y-desktop: var(--alert-default-padding-y-desktop);
548
- --toast-padding-y-tablet: var(--alert-default-padding-y-tablet);
549
- --toast-padding-y-mobile: var(--alert-default-padding-y-mobile);
550
- --toast-padding-x-desktop: var(--alert-default-padding-x-desktop);
551
- --toast-padding-x-tablet: var(--alert-default-padding-x-tablet);
552
- --toast-padding-x-mobile: var(--alert-default-padding-x-mobile);
553
- --toast-inner-spacing-y-desktop: var(--alert-default-inner-spacing-y-desktop);
554
- --toast-inner-spacing-y-tablet: var(--alert-default-inner-spacing-y-tablet);
555
- --toast-inner-spacing-y-mobile: var(--alert-default-inner-spacing-y-mobile);
556
- --toast-outer-spacing-desktop: var(--dimensions-03);
557
- --toast-outer-spacing-tablet: var(--dimensions-03);
558
- --toast-outer-spacing-mobile: var(--dimensions-00);
559
- --toast-margin-bottom-desktop: var(--dimensions-10);
560
- --toast-margin-bottom-tablet: var(--dimensions-10);
561
- --toast-margin-bottom-mobile: var(--dimensions-05);
562
- --toast-margin-right-desktop: var(--dimensions-10);
563
- --toast-margin-right-tablet: var(--dimensions-10);
564
- --toast-margin-right-mobile: var(--dimensions-05);
565
- --form-field-padding-x-md-default-desktop: var(--dimensions-05);
566
- --form-field-padding-x-md-default-tablet: var(--dimensions-05);
567
- --form-field-padding-x-md-default-mobile: var(--dimensions-05);
568
- --form-field-padding-y-md-default-desktop: var(--dimensions-05);
569
- --form-field-padding-y-md-default-tablet: var(--dimensions-05);
570
- --form-field-padding-y-md-default-mobile: var(--dimensions-06);
571
- --form-field-radius-desktop: var(--card-radius-rounded-desktop);
572
- --form-field-radius-tablet: var(--card-radius-rounded-tablet);
573
- --form-field-radius-mobile: var(--card-radius-rounded-mobile);
574
- --form-field-inner-spacing-desktop: var(--dimensions-05);
575
- --form-field-inner-spacing-tablet: var(--dimensions-05);
576
- --form-field-inner-spacing-mobile: var(--dimensions-05);
577
- --form-field-outer-spacing-desktop: var(--dimensions-03);
578
- --form-field-outer-spacing-tablet: var(--dimensions-03);
579
- --form-field-outer-spacing-mobile: var(--dimensions-03);
580
- --form-field-inner-spacing-sm-desktop: var(--dimensions-03);
581
- --form-field-inner-spacing-sm-tablet: var(--dimensions-03);
582
- --form-field-inner-spacing-sm-mobile: var(--dimensions-03);
583
- --form-field-height-sm-desktop: var(--dimensions-14);
584
- --form-field-height-sm-tablet: var(--dimensions-14);
585
- --form-field-height-sm-mobile: var(--dimensions-17);
586
- --form-field-height-desktop: var(--dimensions-16);
587
- --form-field-height-tablet: var(--dimensions-16);
588
- --form-field-height-mobile: var(--dimensions-17);
589
- --form-textarea-min-height-desktop: 136px;
590
- --form-textarea-min-height-rem-desktop: 8.5rem;
591
- --form-textarea-min-height-tablet: 136px;
592
- --form-textarea-min-height-rem-tablet: 8.5rem;
593
- --form-textarea-min-height-mobile: 136px;
594
- --form-textarea-min-height-rem-mobile: 8.5rem;
595
- --form-number-input-min-width-desktop: var(--dimensions-22);
596
- --form-number-input-min-width-tablet: var(--dimensions-22);
597
- --form-number-input-min-width-mobile: var(--dimensions-22);
598
- --form-select-group-label-padding-x-desktop: var(--form-select-item-padding-x-desktop);
599
- --form-select-group-label-padding-x-tablet: var(--form-select-item-padding-x-tablet);
600
- --form-select-group-label-padding-x-mobile: var(--form-select-item-padding-x-mobile);
601
- --form-select-group-label-padding-y-desktop: var(--form-select-item-padding-y-desktop);
602
- --form-select-group-label-padding-y-tablet: var(--form-select-item-padding-y-tablet);
603
- --form-select-group-label-padding-y-mobile: var(--form-select-item-padding-y-mobile);
604
- --form-select-item-inner-spacing-desktop: var(--dimensions-05);
605
- --form-select-item-inner-spacing-tablet: var(--dimensions-05);
606
- --form-select-item-inner-spacing-mobile: var(--dimensions-05);
607
- --form-checkbox-radio-indicator-radius-radio-desktop: var(--radius-08);
608
- --form-checkbox-radio-indicator-radius-radio-tablet: var(--radius-08);
609
- --form-checkbox-radio-indicator-radius-radio-mobile: var(--radius-08);
610
- --filter-default-padding-y-desktop: var(--dimensions-03);
611
- --filter-default-padding-y-tablet: var(--dimensions-03);
612
- --filter-default-padding-y-mobile: var(--dimensions-03);
613
- --filter-default-padding-x-desktop: var(--dimensions-04);
614
- --filter-default-padding-x-tablet: var(--dimensions-04);
615
- --filter-default-padding-x-mobile: var(--dimensions-04);
616
- --filter-sm-padding-y-desktop: var(--dimensions-02);
617
- --filter-sm-padding-y-tablet: var(--dimensions-02);
618
- --filter-sm-padding-y-mobile: var(--dimensions-02);
619
- --filter-sm-padding-x-desktop: var(--dimensions-03);
620
- --filter-sm-padding-x-tablet: var(--dimensions-03);
621
- --filter-sm-padding-x-mobile: var(--dimensions-03);
622
- --modal-max-width-sm-desktop: var(--containers-08);
623
- --modal-max-width-sm-tablet: var(--containers-08);
624
- --modal-max-width-sm-mobile: var(--containers-05);
625
- --modal-max-width-lg-desktop: var(--containers-11);
626
- --modal-max-width-lg-tablet: var(--containers-11);
627
- --modal-max-width-lg-mobile: var(--containers-05);
628
- --modal-max-width-xl-desktop: var(--containers-13);
629
- --modal-max-width-xl-tablet: var(--containers-13);
630
- --modal-max-width-xl-mobile: var(--containers-05);
631
- --modal-max-width-md-desktop: var(--containers-09);
632
- --modal-max-width-md-tablet: var(--containers-09);
633
- --modal-max-width-md-mobile: var(--containers-05);
634
- --modal-body-padding-desktop: var(--dimensions-13);
635
- --modal-body-padding-tablet: var(--dimensions-13);
636
- --modal-body-padding-mobile: var(--dimensions-10);
637
- --modal-radius-desktop: var(--card-radius-rounded-desktop);
638
- --modal-radius-tablet: var(--card-radius-rounded-tablet);
639
- --modal-radius-mobile: var(--card-radius-rounded-mobile);
640
- --modal-max-width-xs-desktop: var(--containers-05);
641
- --modal-max-width-xs-tablet: var(--containers-05);
642
- --modal-max-width-xs-mobile: var(--containers-05);
643
- --separator-dotted-dot-xs-desktop: var(--dimensions-02);
644
- --separator-dotted-dot-xs-tablet: var(--dimensions-02);
645
- --separator-dotted-dot-xs-mobile: var(--dimensions-02);
646
- --form-field-padding-x-lg-desktop: var(--dimensions-10);
647
- --form-field-padding-x-lg-tablet: var(--dimensions-10);
648
- --form-field-padding-x-lg-mobile: var(--dimensions-10);
649
- --form-field-padding-y-xxs-desktop: var(--dimensions-00);
650
- --form-field-padding-y-xxs-tablet: var(--dimensions-00);
651
- --form-field-padding-y-xxs-mobile: var(--dimensions-04);
652
- --layout-grid-gutters-24-desktop: var(--dimensions-13);
653
- --layout-grid-gutters-24-tablet: var(--dimensions-13);
654
- --layout-grid-gutters-24-mobile: var(--dimensions-13);
655
- --card-padding-sm-desktop: var(--dimensions-07);
656
- --card-padding-sm-tablet: var(--dimensions-07);
657
- --card-padding-sm-mobile: var(--dimensions-07);
658
- --stepper-item-vertical-compact-inner-spacing-desktop: var(--dimensions-04);
659
- --stepper-item-vertical-compact-inner-spacing-tablet: var(--dimensions-04);
660
- --stepper-item-vertical-compact-inner-spacing-mobile: var(--dimensions-04);
661
- --stepper-item-vertical-step-size-md-desktop: 16px;
662
- --stepper-item-vertical-step-size-md-rem-desktop: 1rem;
663
- --stepper-item-vertical-step-size-md-tablet: 16px;
664
- --stepper-item-vertical-step-size-md-rem-tablet: 1rem;
665
- --stepper-item-vertical-step-size-md-mobile: 16px;
666
- --stepper-item-vertical-step-size-md-rem-mobile: 1rem;
667
- --stepper-item-vertical-line-height-desktop: 6px;
668
- --stepper-item-vertical-line-height-rem-desktop: 0.375rem;
669
- --stepper-item-vertical-line-height-tablet: 6px;
670
- --stepper-item-vertical-line-height-rem-tablet: 0.375rem;
671
- --stepper-item-vertical-line-height-mobile: 6px;
672
- --stepper-item-vertical-line-height-rem-mobile: 0.375rem;
673
- --stepper-item-vertical-sub-line-bottom-desktop: 9px;
674
- --stepper-item-vertical-sub-line-bottom-rem-desktop: 0.5625rem;
675
- --stepper-item-vertical-sub-line-bottom-tablet: 9px;
676
- --stepper-item-vertical-sub-line-bottom-rem-tablet: 0.5625rem;
677
- --stepper-item-vertical-sub-line-bottom-mobile: 9px;
678
- --stepper-item-vertical-sub-line-bottom-rem-mobile: 0.5625rem;
679
- --stepper-item-vertical-lg-padding-top-desktop: 8px;
680
- --stepper-item-vertical-lg-padding-top-rem-desktop: 0.5rem;
681
- --stepper-item-vertical-lg-padding-top-tablet: 8px;
682
- --stepper-item-vertical-lg-padding-top-rem-tablet: 0.5rem;
683
- --stepper-item-vertical-lg-padding-top-mobile: 8px;
684
- --stepper-item-vertical-lg-padding-top-rem-mobile: 0.5rem;
685
- --modal-top-margin-desktop: 120px;
686
- --modal-top-margin-rem-desktop: 7.5rem;
687
- --modal-top-margin-tablet: var(--dimensions-16);
688
- --modal-top-margin-mobile: var(--dimensions-10);
689
- --button-lg-padding-x-desktop: var(--dimensions-11);
690
- --button-lg-padding-x-tablet: var(--dimensions-11);
691
- --button-lg-padding-x-mobile: var(--dimensions-11);
692
- --button-lg-padding-y-desktop: var(--dimensions-06);
693
- --button-lg-padding-y-tablet: var(--dimensions-06);
694
- --button-lg-padding-y-mobile: var(--dimensions-06);
695
- --button-lg-inner-spacing-desktop: var(--dimensions-04);
696
- --button-lg-inner-spacing-tablet: var(--dimensions-04);
697
- --button-lg-inner-spacing-mobile: var(--dimensions-04);
698
- --button-lg-icon-padding-desktop: var(--dimensions-03);
699
- --button-lg-icon-padding-tablet: var(--dimensions-03);
700
- --button-lg-icon-padding-mobile: var(--dimensions-03);
701
- --button-lg-icon-size-desktop: var(--dimensions-17);
702
- --button-lg-icon-size-tablet: var(--dimensions-17);
703
- --button-lg-icon-size-mobile: var(--dimensions-17);
704
- --form-toggl-default-width-desktop: var(--dimensions-16);
705
- --form-toggl-default-width-tablet: var(--dimensions-16);
706
- --form-toggl-default-width-mobile: 56px;
707
- --form-toggl-default-width-rem-mobile: 3.5rem;
708
- --form-toggl-default-height-desktop: 20px;
709
- --form-toggl-default-height-rem-desktop: 1.25rem;
710
- --form-toggl-default-height-tablet: 20px;
711
- --form-toggl-default-height-rem-tablet: 1.25rem;
712
- --form-toggl-default-height-mobile: 28px;
713
- --form-toggl-default-height-rem-mobile: 1.75rem;
714
- --form-toggl-large-width-desktop: 56px;
715
- --form-toggl-large-width-rem-desktop: 3.5rem;
716
- --form-toggl-large-width-tablet: 56px;
717
- --form-toggl-large-width-rem-tablet: 3.5rem;
718
- --form-toggl-large-width-mobile: 56px;
719
- --form-toggl-large-width-rem-mobile: 3.5rem;
720
- --form-toggl-large-height-desktop: 28px;
721
- --form-toggl-large-height-rem-desktop: 1.75rem;
722
- --form-toggl-large-height-tablet: 28px;
723
- --form-toggl-large-height-rem-tablet: 1.75rem;
724
- --form-toggl-large-height-mobile: 28px;
725
- --form-toggl-large-height-rem-mobile: 1.75rem;
726
- --form-toggl-large-indicator-desktop: 24px;
727
- --form-toggl-large-indicator-rem-desktop: 1.5rem;
728
- --form-toggl-large-indicator-tablet: 24px;
729
- --form-toggl-large-indicator-rem-tablet: 1.5rem;
730
- --form-toggl-large-indicator-mobile: 24px;
731
- --form-toggl-large-indicator-rem-mobile: 1.5rem;
732
- --form-toggl-default-indicator-desktop: var(--dimensions-10);
733
- --form-toggl-default-indicator-tablet: var(--dimensions-10);
734
- --form-toggl-default-indicator-mobile: var(--dimensions-13);
735
- --form-toggl-radius-desktop: var(--radius-04);
736
- --form-toggl-radius-tablet: var(--radius-04);
737
- --form-toggl-radius-mobile: var(--radius-04);
738
- --form-calendar-date-width-desktop: 40px;
739
- --form-calendar-date-width-rem-desktop: 2.5rem;
740
- --form-calendar-date-width-tablet: 40px;
741
- --form-calendar-date-width-rem-tablet: 2.5rem;
742
- --form-calendar-date-width-mobile: 40px;
743
- --form-calendar-date-width-rem-mobile: 2.5rem;
744
- --form-field-padding-y-sm-desktop: var(--dimensions-03);
745
- --form-field-padding-y-sm-tablet: var(--dimensions-03);
746
- --form-field-padding-y-sm-mobile: var(--dimensions-06);
747
- --form-field-padding-x-sm-desktop: var(--dimensions-03);
748
- --form-field-padding-x-sm-tablet: var(--dimensions-03);
749
- --form-field-padding-x-sm-mobile: var(--dimensions-03);
750
- --form-field-padding-y-xs-desktop: var(--dimensions-02);
751
- --form-field-padding-y-xs-tablet: var(--dimensions-02);
752
- --form-field-padding-y-xs-mobile: var(--dimensions-02);
753
- --layout-grid-gutters-02-desktop: var(--dimensions-02);
754
- --layout-grid-gutters-02-tablet: var(--dimensions-02);
755
- --layout-grid-gutters-02-mobile: var(--dimensions-02);
756
- --table-header-padding-x-desktop: 14px;
757
- --table-header-padding-x-rem-desktop: 0.875rem;
758
- --table-header-padding-x-tablet: 14px;
759
- --table-header-padding-x-rem-tablet: 0.875rem;
760
- --table-header-padding-x-mobile: 14px;
761
- --table-header-padding-x-rem-mobile: 0.875rem;
762
- --table-header-padding-y-desktop: 12px;
763
- --table-header-padding-y-rem-desktop: 0.75rem;
764
- --table-header-padding-y-tablet: 12px;
765
- --table-header-padding-y-rem-tablet: 0.75rem;
766
- --table-header-padding-y-mobile: 12px;
767
- --table-header-padding-y-rem-mobile: 0.75rem;
768
- --table-data-padding-x-desktop: 14px;
769
- --table-data-padding-x-rem-desktop: 0.875rem;
770
- --table-data-padding-x-tablet: 14px;
771
- --table-data-padding-x-rem-tablet: 0.875rem;
772
- --table-data-padding-x-mobile: 14px;
773
- --table-data-padding-x-rem-mobile: 0.875rem;
774
- --table-data-padding-y-desktop: 12px;
775
- --table-data-padding-y-rem-desktop: 0.75rem;
776
- --table-data-padding-y-tablet: 12px;
777
- --table-data-padding-y-rem-tablet: 0.75rem;
778
- --table-data-padding-y-mobile: 12px;
779
- --table-data-padding-y-rem-mobile: 0.75rem;
780
- --table-header-padding-x-sm-desktop: 8px;
781
- --table-header-padding-x-sm-rem-desktop: 0.5rem;
782
- --table-header-padding-x-sm-tablet: 8px;
783
- --table-header-padding-x-sm-rem-tablet: 0.5rem;
784
- --table-header-padding-x-sm-mobile: 8px;
785
- --table-header-padding-x-sm-rem-mobile: 0.5rem;
786
- --table-header-padding-y-sm-desktop: 12px;
787
- --table-header-padding-y-sm-rem-desktop: 0.75rem;
788
- --table-header-padding-y-sm-tablet: 12px;
789
- --table-header-padding-y-sm-rem-tablet: 0.75rem;
790
- --table-header-padding-y-sm-mobile: 12px;
791
- --table-header-padding-y-sm-rem-mobile: 0.75rem;
792
- --table-data-padding-x-sm-desktop: 8px;
793
- --table-data-padding-x-sm-rem-desktop: 0.5rem;
794
- --table-data-padding-x-sm-tablet: 8px;
795
- --table-data-padding-x-sm-rem-tablet: 0.5rem;
796
- --table-data-padding-x-sm-mobile: 8px;
797
- --table-data-padding-x-sm-rem-mobile: 0.5rem;
798
- --table-data-padding-y-sm-desktop: 4px;
799
- --table-data-padding-y-sm-rem-desktop: 0.25rem;
800
- --table-data-padding-y-sm-tablet: 4px;
801
- --table-data-padding-y-sm-rem-tablet: 0.25rem;
802
- --table-data-padding-y-sm-mobile: 4px;
803
- --table-data-padding-y-sm-rem-mobile: 0.25rem;
804
- --pagination-padding-x-desktop: 14px;
805
- --pagination-padding-x-rem-desktop: 0.875rem;
806
- --pagination-padding-x-tablet: 14px;
807
- --pagination-padding-x-rem-tablet: 0.875rem;
808
- --pagination-padding-x-mobile: 14px;
809
- --pagination-padding-x-rem-mobile: 0.875rem;
810
- --pagination-padding-y-desktop: 12px;
811
- --pagination-padding-y-rem-desktop: 0.75rem;
812
- --pagination-padding-y-tablet: 12px;
813
- --pagination-padding-y-rem-tablet: 0.75rem;
814
- --pagination-padding-y-mobile: 12px;
815
- --pagination-padding-y-rem-mobile: 0.75rem;
816
- --button-xs-icon-inner-size-desktop: var(--dimensions-10);
817
- --button-xs-icon-inner-size-tablet: var(--dimensions-10);
818
- --button-xs-icon-inner-size-mobile: var(--dimensions-10);
819
- --form-toggl-padding-desktop: var(--dimensions-02);
820
- --form-toggl-padding-tablet: var(--dimensions-02);
821
- --form-toggl-padding-mobile: var(--dimensions-02);
822
- --form-field-padding-y-lg-desktop: var(--dimensions-10);
823
- --form-field-padding-y-lg-tablet: var(--dimensions-10);
824
- --form-field-padding-y-lg-mobile: var(--dimensions-10);
825
- --table-radius-desktop: var(--radius-02-default);
826
- --table-radius-tablet: var(--radius-02-default);
827
- --table-radius-mobile: var(--radius-02-default);
828
- --modal-heading-padding-y-desktop: var(--dimensions-10);
829
- --modal-heading-padding-y-tablet: var(--dimensions-10);
830
- --modal-heading-padding-y-mobile: var(--dimensions-10);
831
- --modal-heading-padding-x-desktop: var(--dimensions-13);
832
- --modal-heading-padding-x-tablet: var(--dimensions-13);
833
- --modal-heading-padding-x-mobile: var(--dimensions-10);
834
- --modal-footer-padding-y-desktop: var(--dimensions-10);
835
- --modal-footer-padding-y-tablet: var(--dimensions-10);
836
- --modal-footer-padding-y-mobile: var(--dimensions-10);
837
- --modal-footer-padding-x-desktop: var(--dimensions-13);
838
- --modal-footer-padding-x-tablet: var(--dimensions-13);
839
- --modal-footer-padding-x-mobile: var(--dimensions-10);
840
- --layout-grid-gutters-32-desktop: var(--dimensions-14);
841
- --layout-grid-gutters-32-tablet: var(--dimensions-14);
842
- --layout-grid-gutters-32-mobile: var(--dimensions-14);
843
- --layout-grid-gutters-48-desktop: var(--dimensions-18);
844
- --layout-grid-gutters-48-tablet: var(--dimensions-18);
845
- --layout-grid-gutters-48-mobile: var(--dimensions-18);
846
- --side-navigation-item-padding-right-desktop: var(--dimensions-10);
847
- --side-navigation-item-padding-right-tablet: var(--dimensions-10);
848
- --side-navigation-item-padding-right-mobile: var(--dimensions-10);
849
- --side-navigation-item-padding-y-desktop: var(--dimensions-07);
850
- --side-navigation-item-padding-y-tablet: var(--dimensions-10);
851
- --side-navigation-item-padding-y-mobile: var(--dimensions-10);
852
- --side-navigation-item-inner-spacing-desktop: var(--dimensions-10);
853
- --side-navigation-item-inner-spacing-tablet: var(--dimensions-10);
854
- --side-navigation-item-inner-spacing-mobile: var(--dimensions-10);
855
- --side-navigation-item-min-height-desktop: var(--dimensions-21);
856
- --side-navigation-item-min-height-tablet: var(--dimensions-21);
857
- --side-navigation-item-min-height-mobile: 56px;
858
- --side-navigation-item-min-height-rem-mobile: 3.5rem;
859
- --side-navigation-item-width-default-desktop: 240px;
860
- --side-navigation-item-width-default-tablet: 400px;
861
- --side-navigation-item-width-default-mobile: 320px;
862
- --side-navigation-text-size-desktop: var(--body-regular-size-desktop);
863
- --side-navigation-text-size-tablet: var(--body-regular-size-tablet);
864
- --side-navigation-text-size-mobile: var(--body-regular-size-mobile);
865
- --side-navigation-item-padding-left-level-1-desktop: var(--dimensions-10);
866
- --side-navigation-item-padding-left-level-1-tablet: var(--dimensions-10);
867
- --side-navigation-item-padding-left-level-1-mobile: var(--dimensions-10);
868
- --side-navigation-item-inner-spacing-sm-desktop: var(--dimensions-05);
869
- --side-navigation-item-inner-spacing-sm-tablet: var(--dimensions-05);
870
- --side-navigation-item-inner-spacing-sm-mobile: var(--dimensions-10);
871
- --side-navigation-item-icon-desktop: var(--icon-05-desktop);
872
- --side-navigation-item-icon-tablet: var(--icon-05-tablet);
873
- --side-navigation-item-icon-mobile: var(--icon-05-mobile);
874
- --side-navigation-item-icon-sm-desktop: var(--icon-03-desktop);
875
- --side-navigation-item-icon-sm-tablet: var(--icon-05-tablet);
876
- --side-navigation-item-icon-sm-mobile: var(--icon-05-mobile);
877
- --side-navigation-item-padding-y-sm-desktop: var(--dimensions-05);
878
- --side-navigation-item-padding-y-sm-tablet: var(--dimensions-10);
879
- --side-navigation-item-padding-y-sm-mobile: var(--dimensions-10);
880
- --side-navigation-item-padding-left-level-2-desktop: var(--dimensions-10);
881
- --side-navigation-item-padding-left-level-2-tablet: var(--dimensions-10);
882
- --side-navigation-item-padding-left-level-2-mobile: var(--dimensions-10);
883
- --side-navigation-item-padding-y-md-desktop: var(--dimensions-10);
884
- --side-navigation-item-padding-y-md-tablet: var(--dimensions-10);
885
- --side-navigation-item-padding-y-md-mobile: var(--dimensions-10);
886
- --side-navigation-text-size-sm-desktop: var(--body-small-regular-size-desktop);
887
- --side-navigation-text-size-sm-tablet: var(--body-small-regular-size-tablet);
888
- --side-navigation-text-size-sm-mobile: var(--body-regular-size-mobile);
889
- --side-navigation-item-icon-md-desktop: var(--icon-04-desktop);
890
- --side-navigation-item-icon-md-tablet: var(--icon-05-tablet);
891
- --side-navigation-item-icon-md-mobile: var(--icon-05-mobile);
892
- --side-navigation-item-width-collapsed-desktop: 96px;
893
- --side-navigation-item-width-collapsed-tablet: 96px;
894
- --side-navigation-item-width-collapsed-mobile: 96px;
895
- --side-navigation-item-padding-x-sm-desktop: var(--dimensions-05);
896
- --side-navigation-item-padding-x-sm-tablet: var(--dimensions-05);
897
- --side-navigation-item-padding-x-sm-mobile: var(--dimensions-05);
898
- --side-navigation-item-min-height-medium-desktop: var(--dimensions-19);
899
- --side-navigation-item-min-height-medium-tablet: var(--dimensions-19);
900
- --side-navigation-item-min-height-medium-mobile: var(--dimensions-19);
901
- --side-navigation-item-min-height-small-desktop: var(--dimensions-16);
902
- --side-navigation-item-min-height-small-tablet: var(--dimensions-16);
903
- --side-navigation-item-min-height-small-mobile: var(--dimensions-19);
904
- --form-checkbox-radio-label-gutter-y-desktop: var(--dimensions-00);
905
- --form-checkbox-radio-label-gutter-y-tablet: var(--dimensions-00);
906
- --form-checkbox-radio-label-gutter-y-mobile: var(--dimensions-03);
907
- --header-items-right-gutter-x-desktop: var(--dimensions-13);
908
- --header-items-right-gutter-x-tablet: var(--dimensions-07);
909
- --header-items-right-gutter-x-mobile: var(--dimensions-07);
910
- --header-items-center-gutter-x-desktop: var(--dimensions-18);
911
- --header-items-center-gutter-x-tablet: var(--dimensions-07);
912
- --header-items-center-gutter-x-mobile: var(--dimensions-07);
913
- --header-padding-left-desktop: var(--dimensions-13);
914
- --header-padding-left-tablet: var(--dimensions-13);
915
- --header-padding-left-mobile: var(--dimensions-05);
916
- --header-padding-y-desktop: var(--dimensions-10);
917
- --header-padding-y-tablet: var(--dimensions-10);
918
- --header-padding-y-mobile: 0px;
919
- --header-padding-y-rem-mobile: 0rem;
920
- --header-padding-right-desktop: var(--dimensions-13);
921
- --header-padding-right-tablet: var(--dimensions-13);
922
- --header-padding-right-mobile: var(--dimensions-10);
923
- --header-min-height-desktop: 80px;
924
- --header-min-height-rem-desktop: 5rem;
925
- --header-min-height-tablet: 80px;
926
- --header-min-height-rem-tablet: 5rem;
927
- --header-min-height-mobile: 56px;
928
- --header-min-height-rem-mobile: 3.5rem;
929
- --header-modal-item-padding-desktop: var(--dimensions-10);
930
- --header-modal-item-padding-tablet: var(--dimensions-10);
931
- --header-modal-item-padding-mobile: var(--dimensions-10);
932
- --form-checkbox-radio-size-fixed-desktop: var(--dimensions-11);
933
- --form-checkbox-radio-size-fixed-tablet: var(--dimensions-11);
934
- --form-checkbox-radio-size-fixed-mobile: var(--dimensions-11);
935
- --form-select-area-max-height-desktop: 300;
936
- --form-select-area-max-height-tablet: 300;
937
- --form-select-area-max-height-mobile: 300;
938
- --footer-padding-x-desktop: var(--dimensions-16);
939
- --footer-padding-x-tablet: var(--dimensions-16);
940
- --footer-padding-x-mobile: var(--dimensions-10);
941
- --footer-padding-y-desktop: var(--dimensions-16);
942
- --footer-padding-y-tablet: var(--dimensions-16);
943
- --footer-padding-y-mobile: var(--dimensions-10);
944
- --footer-col-padding-x-desktop: 12px;
945
- --footer-col-padding-x-rem-desktop: 0.75rem;
946
- --footer-col-padding-x-tablet: 12px;
947
- --footer-col-padding-x-rem-tablet: 0.75rem;
948
- --footer-col-padding-x-mobile: 12px;
949
- --footer-col-padding-x-rem-mobile: 0.75rem;
950
- --footer-item-vertical-spacing-desktop: var(--dimensions-05);
951
- --footer-item-vertical-spacing-tablet: var(--dimensions-05);
952
- --footer-item-vertical-spacing-mobile: var(--dimensions-05);
953
- --footer-bottom-padding-x-desktop: var(--dimensions-16);
954
- --footer-bottom-padding-x-tablet: var(--dimensions-16);
955
- --footer-bottom-padding-x-mobile: var(--dimensions-10);
956
- --footer-bottom-padding-y-desktop: var(--dimensions-05);
957
- --footer-bottom-padding-y-tablet: var(--dimensions-05);
958
- --footer-bottom-padding-y-mobile: var(--dimensions-05);
959
- --button-group-icon-container-height-desktop: var(--dimensions-13);
960
- --button-group-icon-container-height-tablet: var(--dimensions-13);
961
- --button-group-icon-container-height-mobile: var(--dimensions-13);
962
- --toast-margin-left-desktop: var(--dimensions-00);
963
- --toast-margin-left-tablet: var(--dimensions-00);
964
- --toast-margin-left-mobile: var(--dimensions-05);
965
- --form-select-area-radius-desktop: var(--radius-02-default);
966
- --form-select-area-radius-tablet: var(--radius-02-default);
967
- --form-select-area-radius-mobile: var(--radius-02-default);
968
- --list-padding-left-level-1-desktop: var(--dimensions-10);
969
- --list-padding-left-level-1-tablet: var(--dimensions-10);
970
- --list-padding-left-level-1-mobile: var(--dimensions-05);
971
- --button-text-size-sm-desktop: var(--body-small-regular-size-desktop);
972
- --button-text-size-sm-tablet: var(--body-small-regular-size-tablet);
973
- --button-text-size-sm-mobile: var(--body-regular-size-mobile);
974
- --button-text-size-default-desktop: var(--body-regular-size-desktop);
975
- --button-text-size-default-tablet: var(--body-regular-size-tablet);
976
- --button-text-size-default-mobile: var(--body-regular-size-mobile);
977
- --button-xl-padding-x-desktop: var(--dimensions-11);
978
- --button-xl-padding-x-tablet: var(--dimensions-11);
979
- --button-xl-padding-x-mobile: var(--dimensions-11);
980
- --button-xl-padding-y-desktop: var(--dimensions-07);
981
- --button-xl-padding-y-tablet: var(--dimensions-07);
982
- --button-xl-padding-y-mobile: var(--dimensions-07);
983
- --button-xl-inner-spacing-desktop: var(--dimensions-04);
984
- --button-xl-inner-spacing-tablet: var(--dimensions-04);
985
- --button-xl-inner-spacing-mobile: var(--dimensions-04);
986
- --button-xl-icon-padding-desktop: var(--dimensions-05);
987
- --button-xl-icon-padding-tablet: var(--dimensions-05);
988
- --button-xl-icon-padding-mobile: var(--dimensions-05);
989
- --button-xl-icon-size-desktop: var(--dimensions-18);
990
- --button-xl-icon-size-tablet: var(--dimensions-18);
991
- --button-xl-icon-size-mobile: var(--dimensions-18);
992
- --form-checkbox-radio-indicator-container-height-desktop: var(--dimensions-13);
993
- --form-checkbox-radio-indicator-container-height-tablet: var(--dimensions-13);
994
- --form-checkbox-radio-indicator-container-height-mobile: var(--dimensions-13);
995
- --header-padding-y-sm-desktop: var(--dimensions-07);
996
- --header-padding-y-sm-tablet: var(--dimensions-07);
997
- --header-padding-y-sm-mobile: 0px;
998
- --header-padding-y-sm-rem-mobile: 0rem;
999
- --pagination-button-size-desktop: var(--button-xs-icon-size-desktop);
1000
- --pagination-button-size-tablet: var(--button-xs-icon-size-tablet);
1001
- --pagination-button-size-mobile: var(--dimensions-14);
1002
- --filter-sm-inner-spacing-desktop: var(--dimensions-02);
1003
- --filter-sm-inner-spacing-tablet: var(--dimensions-02);
1004
- --filter-sm-inner-spacing-mobile: var(--dimensions-02);
1005
- --filter-default-inner-spacing-desktop: var(--dimensions-02);
1006
- --filter-default-inner-spacing-tablet: var(--dimensions-02);
1007
- --filter-default-inner-spacing-mobile: var(--dimensions-02);
1008
- --table-of-contents-width-desktop: var(--containers-04);
1009
- --table-of-contents-width-tablet: var(--containers-04);
1010
- --table-of-contents-width-mobile: var(--containers-04);
1011
- --content-label-label-sm-height-desktop: var(--dimensions-13);
1012
- --content-label-label-sm-height-tablet: var(--dimensions-13);
1013
- --content-label-label-sm-height-mobile: var(--dimensions-13);
1014
- --link-link-sm-height-desktop: var(--body-regular-line-height-desktop);
1015
- --link-link-sm-height-tablet: var(--body-regular-line-height-tablet);
1016
- --link-link-sm-height-mobile: var(--body-regular-line-height-mobile);
1017
- --form-toggl-default-margin-y-desktop: var(--dimensions-02);
1018
- --form-toggl-default-margin-y-tablet: var(--dimensions-02);
1019
- --form-toggl-default-margin-y-mobile: var(--dimensions-00);
1020
- --form-number-min-width-desktop: 163px;
1021
- --form-number-min-width-rem-desktop: 10.1875rem;
1022
- --form-number-min-width-tablet: 163px;
1023
- --form-number-min-width-rem-tablet: 10.1875rem;
1024
- --form-number-min-width-mobile: 168px;
1025
- --form-number-min-width-rem-mobile: 10.5rem;
1026
- --table-of-contents-padding-left-level-1-desktop: var(--dimensions-10);
1027
- --table-of-contents-padding-left-level-1-tablet: var(--dimensions-10);
1028
- --table-of-contents-padding-left-level-1-mobile: var(--dimensions-10);
1029
- --table-of-contents-padding-left-level-2-desktop: var(--dimensions-14);
1030
- --table-of-contents-padding-left-level-2-tablet: var(--dimensions-14);
1031
- --table-of-contents-padding-left-level-2-mobile: var(--dimensions-14);
1032
- --form-field-padding-y-sm-has-button-desktop: var(--dimensions-03);
1033
- --form-field-padding-y-sm-has-button-tablet: var(--dimensions-03);
1034
- --form-field-padding-y-sm-has-button-mobile: var(--dimensions-04);
1035
- --form-field-padding-y-md-has-button-desktop: var(--dimensions-05);
1036
- --form-field-padding-y-md-has-button-tablet: var(--dimensions-05);
1037
- --form-field-padding-y-md-has-button-mobile: var(--dimensions-04);
1038
- --icon-04-desktop: var(--dimensions-12);
1039
- --icon-04-tablet: var(--dimensions-12);
1040
- --icon-04-mobile: var(--dimensions-12);
1041
- --layout-container-max-width-xxl-desktop: 1440px;
1042
- --layout-container-max-width-xxl-rem-desktop: 90rem;
1043
- --layout-container-max-width-xxl-tablet: 1440px;
1044
- --layout-container-max-width-xxl-rem-tablet: 90rem;
1045
- --layout-container-max-width-xxl-mobile: 1440px;
1046
- --layout-container-max-width-xxl-rem-mobile: 90rem;
1047
- --layout-container-max-width-xl-desktop: 1320px;
1048
- --layout-container-max-width-xl-rem-desktop: 82.5rem;
1049
- --layout-container-max-width-xl-tablet: 1320px;
1050
- --layout-container-max-width-xl-rem-tablet: 82.5rem;
1051
- --layout-container-max-width-xl-mobile: 1320px;
1052
- --layout-container-max-width-xl-rem-mobile: 82.5rem;
1053
- --layout-container-max-width-lg-desktop: 1140px;
1054
- --layout-container-max-width-lg-rem-desktop: 71.25rem;
1055
- --layout-container-max-width-lg-tablet: 1140px;
1056
- --layout-container-max-width-lg-rem-tablet: 71.25rem;
1057
- --layout-container-max-width-lg-mobile: 1140px;
1058
- --layout-container-max-width-lg-rem-mobile: 71.25rem;
1059
- --layout-container-max-width-md-desktop: 960px;
1060
- --layout-container-max-width-md-rem-desktop: 60rem;
1061
- --layout-container-max-width-md-tablet: 960px;
1062
- --layout-container-max-width-md-rem-tablet: 60rem;
1063
- --layout-container-max-width-md-mobile: 960px;
1064
- --layout-container-max-width-md-rem-mobile: 60rem;
1065
- --layout-container-max-width-sm-desktop: 720px;
1066
- --layout-container-max-width-sm-rem-desktop: 45rem;
1067
- --layout-container-max-width-sm-tablet: 720px;
1068
- --layout-container-max-width-sm-rem-tablet: 45rem;
1069
- --layout-container-max-width-sm-mobile: 720px;
1070
- --layout-container-max-width-sm-rem-mobile: 45rem;
1071
- --layout-container-max-width-xs-desktop: 540px;
1072
- --layout-container-max-width-xs-rem-desktop: 33.75rem;
1073
- --layout-container-max-width-xs-tablet: 540px;
1074
- --layout-container-max-width-xs-rem-tablet: 33.75rem;
1075
- --layout-container-max-width-xs-mobile: 540px;
1076
- --layout-container-max-width-xs-rem-mobile: 33.75rem;
1077
- --layout-grid-column-width-desktop: 464px;
1078
- --layout-grid-column-width-rem-desktop: 29rem;
1079
- --layout-grid-column-width-tablet: 224px;
1080
- --layout-grid-column-width-rem-tablet: 14rem;
1081
- --layout-grid-column-width-mobile: 0px;
1082
- --layout-grid-column-width-rem-mobile: 0rem;
1083
- --layout-grid-column-gutter-desktop: var(--dimensions-13);
1084
- --layout-grid-column-gutter-tablet: var(--dimensions-13);
1085
- --layout-grid-column-gutter-mobile: var(--dimensions-13);
1086
- --layout-grid-column-offset-desktop: 40px;
1087
- --layout-grid-column-offset-rem-desktop: 2.5rem;
1088
- --layout-grid-column-offset-tablet: 24px;
1089
- --layout-grid-column-offset-rem-tablet: 1.5rem;
1090
- --layout-grid-column-offset-mobile: 8px;
1091
- --layout-grid-column-offset-rem-mobile: 0.5rem;
1092
- --layout-common-device-width-desktop: 1920px;
1093
- --layout-common-device-width-rem-desktop: 120rem;
1094
- --layout-common-device-width-tablet: 768px;
1095
- --layout-common-device-width-rem-tablet: 48rem;
1096
- --layout-common-device-width-mobile: 360px;
1097
- --layout-common-device-width-rem-mobile: 22.5rem;
1098
- --layout-common-device-height-desktop: 1080px;
1099
- --layout-common-device-height-rem-desktop: 67.5rem;
1100
- --layout-common-device-height-tablet: 1024px;
1101
- --layout-common-device-height-rem-tablet: 64rem;
1102
- --layout-common-device-height-mobile: 812px;
1103
- --layout-common-device-height-rem-mobile: 50.75rem;
1104
- --form-checkbox-radio-size-large-desktop: var(--dimensions-13);
1105
- --form-checkbox-radio-size-large-tablet: var(--dimensions-13);
1106
- --form-checkbox-radio-size-large-mobile: var(--dimensions-13);
1107
- --stepper-item-vertical-compact-min-height-desktop: 32px;
1108
- --stepper-item-vertical-compact-min-height-rem-desktop: 2rem;
1109
- --stepper-item-vertical-compact-min-height-tablet: 32px;
1110
- --stepper-item-vertical-compact-min-height-rem-tablet: 2rem;
1111
- --stepper-item-vertical-compact-min-height-mobile: 40px;
1112
- --stepper-item-vertical-compact-min-height-rem-mobile: 2.5rem;
1113
- --stepper-item-vertical-lg-min-height-desktop: 40px;
1114
- --stepper-item-vertical-lg-min-height-rem-desktop: 2.5rem;
1115
- --stepper-item-vertical-lg-min-height-tablet: 40px;
1116
- --stepper-item-vertical-lg-min-height-rem-tablet: 2.5rem;
1117
- --stepper-item-vertical-lg-min-height-mobile: 44px;
1118
- --stepper-item-vertical-lg-min-height-rem-mobile: 2.75rem;
1119
- --stepper-item-vertical-lg-inner-spacing-desktop: var(--dimensions-05);
1120
- --stepper-item-vertical-lg-inner-spacing-tablet: var(--dimensions-05);
1121
- --stepper-item-vertical-lg-inner-spacing-mobile: var(--dimensions-05);
1122
- --stepper-item-vertical-step-size-lg-desktop: 24px;
1123
- --stepper-item-vertical-step-size-lg-rem-desktop: 1.5rem;
1124
- --stepper-item-vertical-step-size-lg-tablet: 24px;
1125
- --stepper-item-vertical-step-size-lg-rem-tablet: 1.5rem;
1126
- --stepper-item-vertical-step-size-lg-mobile: 24px;
1127
- --stepper-item-vertical-step-size-lg-rem-mobile: 1.5rem;
1128
- --stepper-item-vertical-step-size-sm-desktop: var(--separator-dotted-dot-md-desktop);
1129
- --stepper-item-vertical-step-size-sm-tablet: var(--separator-dotted-dot-md-tablet);
1130
- --stepper-item-vertical-step-size-sm-mobile: var(--separator-dotted-dot-md-mobile);
1131
- --stepper-item-vertical-compact-sub-item-indicator-width-desktop: var(--dimensions-10);
1132
- --stepper-item-vertical-compact-sub-item-indicator-width-tablet: var(--dimensions-10);
1133
- --stepper-item-vertical-compact-sub-item-indicator-width-mobile: var(--dimensions-10);
1134
- --stepper-item-vertical-lg-sub-item-indicator-width-desktop: var(--dimensions-13);
1135
- --stepper-item-vertical-lg-sub-item-indicator-width-tablet: var(--dimensions-13);
1136
- --stepper-item-vertical-lg-sub-item-indicator-width-mobile: var(--dimensions-13);
1137
- --stepper-item-vertical-sub-line-top-desktop: 9.5px;
1138
- --stepper-item-vertical-sub-line-top-rem-desktop: 0.5938rem;
1139
- --stepper-item-vertical-sub-line-top-tablet: 9.5px;
1140
- --stepper-item-vertical-sub-line-top-rem-tablet: 0.5938rem;
1141
- --stepper-item-vertical-sub-line-top-mobile: 9.5px;
1142
- --stepper-item-vertical-sub-line-top-rem-mobile: 0.5938rem;
1143
- --stepper-item-vertical-padding-y-sm-desktop: 2px;
1144
- --stepper-item-vertical-padding-y-sm-rem-desktop: 0.125rem;
1145
- --stepper-item-vertical-padding-y-sm-tablet: 2px;
1146
- --stepper-item-vertical-padding-y-sm-rem-tablet: 0.125rem;
1147
- --stepper-item-vertical-padding-y-sm-mobile: 2px;
1148
- --stepper-item-vertical-padding-y-sm-rem-mobile: 0.125rem;
1149
- --stepper-item-vertical-lg-min-height-first-item-desktop: 32px;
1150
- --stepper-item-vertical-lg-min-height-first-item-rem-desktop: 2rem;
1151
- --stepper-item-vertical-lg-min-height-first-item-tablet: 32px;
1152
- --stepper-item-vertical-lg-min-height-first-item-rem-tablet: 2rem;
1153
- --stepper-item-vertical-lg-min-height-first-item-mobile: 32px;
1154
- --stepper-item-vertical-lg-min-height-first-item-rem-mobile: 2rem;
1155
- --stepper-item-vertical-compact-padding-top-desktop: 3px;
1156
- --stepper-item-vertical-compact-padding-top-rem-desktop: 0.1875rem;
1157
- --stepper-item-vertical-compact-padding-top-tablet: 3px;
1158
- --stepper-item-vertical-compact-padding-top-rem-tablet: 0.1875rem;
1159
- --stepper-item-vertical-compact-padding-top-mobile: 3px;
1160
- --stepper-item-vertical-compact-padding-top-rem-mobile: 0.1875rem;
1161
- --stepper-item-vertical-compact-min-height-first-item-desktop: 29px;
1162
- --stepper-item-vertical-compact-min-height-first-item-rem-desktop: 1.8125rem;
1163
- --stepper-item-vertical-compact-min-height-first-item-tablet: 29px;
1164
- --stepper-item-vertical-compact-min-height-first-item-rem-tablet: 1.8125rem;
1165
- --stepper-item-vertical-compact-min-height-first-item-mobile: 32px;
1166
- --stepper-item-vertical-compact-min-height-first-item-rem-mobile: 2rem;
1167
- --stepper-item-horizontal-padding-y-desktop: var(--dimensions-05);
1168
- --stepper-item-horizontal-padding-y-tablet: var(--dimensions-05);
1169
- --stepper-item-horizontal-padding-y-mobile: var(--dimensions-05);
1170
- --stepper-item-horizontal-padding-x-desktop: var(--dimensions-10);
1171
- --stepper-item-horizontal-padding-x-tablet: var(--dimensions-10);
1172
- --stepper-item-horizontal-padding-x-mobile: var(--dimensions-10);
1173
- --stepper-item-horizontal-inner-spacing-desktop: var(--dimensions-05);
1174
- --stepper-item-horizontal-inner-spacing-tablet: var(--dimensions-05);
1175
- --stepper-item-horizontal-inner-spacing-mobile: var(--dimensions-05);
1176
- --stepper-item-horizontal-min-height-desktop: var(--dimensions-16);
1177
- --stepper-item-horizontal-min-height-tablet: var(--dimensions-16);
1178
- --stepper-item-horizontal-min-height-mobile: var(--dimensions-17);
1179
- --card-padding-xxs-desktop: var(--dimensions-03);
1180
- --card-padding-xxs-tablet: var(--dimensions-03);
1181
- --card-padding-xxs-mobile: var(--dimensions-03);
1182
- --file-dropzone-padding-x-desktop: var(--dimensions-13);
1183
- --file-dropzone-padding-x-tablet: var(--dimensions-13);
1184
- --file-dropzone-padding-x-mobile: var(--dimensions-13);
1185
- --file-dropzone-padding-y-desktop: var(--dimensions-13);
1186
- --file-dropzone-padding-y-tablet: var(--dimensions-13);
1187
- --file-dropzone-padding-y-mobile: var(--dimensions-13);
1188
- --dropdown-item-padding-y-desktop: var(--dimensions-05);
1189
- --dropdown-item-padding-y-tablet: var(--dimensions-05);
1190
- --dropdown-item-padding-y-mobile: var(--dimensions-07);
1191
- --dropdown-item-padding-x-desktop: var(--dimensions-07);
1192
- --dropdown-item-padding-x-tablet: var(--dimensions-07);
1193
- --dropdown-item-padding-x-mobile: var(--dimensions-07);
1194
- --dropdown-item-radius-desktop: var(--radius-02-default);
1195
- --dropdown-item-radius-tablet: var(--radius-02-default);
1196
- --dropdown-item-radius-mobile: var(--radius-02-default);
1197
- --dropdown-group-label-padding-x-desktop: var(--dropdown-item-padding-x-desktop);
1198
- --dropdown-group-label-padding-x-tablet: var(--dropdown-item-padding-x-tablet);
1199
- --dropdown-group-label-padding-x-mobile: var(--dropdown-item-padding-x-mobile);
1200
- --dropdown-group-label-padding-y-desktop: var(--dropdown-item-padding-y-desktop);
1201
- --dropdown-group-label-padding-y-tablet: var(--dropdown-item-padding-y-tablet);
1202
- --dropdown-group-label-padding-y-mobile: var(--dropdown-item-padding-y-mobile);
1203
- --dropdown-item-inner-spacing-desktop: var(--dimensions-05);
1204
- --dropdown-item-inner-spacing-tablet: var(--dimensions-05);
1205
- --dropdown-item-inner-spacing-mobile: var(--dimensions-05);
1206
- --dropdown-body-padding-x-desktop: var(--dimensions-07);
1207
- --dropdown-body-padding-x-tablet: var(--dimensions-07);
1208
- --dropdown-body-padding-x-mobile: var(--dimensions-07);
1209
- --dropdown-body-padding-y-desktop: var(--dimensions-05);
1210
- --dropdown-body-padding-y-tablet: var(--dimensions-05);
1211
- --dropdown-body-padding-y-mobile: var(--dimensions-07);
1212
- --button-sm-height-desktop: var(--dimensions-14);
1213
- --button-sm-height-tablet: var(--dimensions-14);
1214
- --button-sm-height-mobile: var(--dimensions-16);
1215
- --button-md-height-desktop: var(--dimensions-16);
1216
- --button-md-height-tablet: var(--dimensions-16);
1217
- --button-md-height-mobile: var(--dimensions-17);
1218
- --layout-footer-padding-x-desktop: var(--dimensions-16);
1219
- --layout-footer-padding-x-tablet: var(--dimensions-16);
1220
- --layout-footer-padding-x-mobile: var(--dimensions-10);
1221
- --layout-footer-padding-y-desktop: var(--dimensions-16);
1222
- --layout-footer-padding-y-tablet: var(--dimensions-16);
1223
- --layout-footer-padding-y-mobile: var(--dimensions-10);
1224
- --layout-footer-bottom-padding-x-desktop: var(--layout-page-spacing-x-desktop);
1225
- --layout-footer-bottom-padding-x-tablet: var(--layout-page-spacing-x-tablet);
1226
- --layout-footer-bottom-padding-x-mobile: var(--layout-page-spacing-x-mobile);
1227
- --layout-footer-bottom-padding-y-desktop: var(--dimensions-05);
1228
- --layout-footer-bottom-padding-y-tablet: var(--dimensions-05);
1229
- --layout-footer-bottom-padding-y-mobile: var(--dimensions-05);
1230
- --layout-footer-item-vertical-spacing-desktop: var(--dimensions-05);
1231
- --layout-footer-item-vertical-spacing-tablet: var(--dimensions-05);
1232
- --layout-footer-item-vertical-spacing-mobile: var(--dimensions-05);
1233
- --layout-footer-col-padding-x-desktop: var(--dimensions-07);
1234
- --layout-footer-col-padding-x-tablet: var(--dimensions-07);
1235
- --layout-footer-col-padding-x-mobile: 0rem;
2
+ --alert-radius: var(--card-radius-rounded);
3
+ --alert-default-padding-x-sm: var(--dimensions-05);
4
+ --alert-default-padding-y-sm: var(--dimensions-05);
5
+ --alert-default-padding-x: var(--dimensions-10);
6
+ --alert-default-padding-y: var(--dimensions-10);
7
+ --alert-default-icon-size: var(--button-icon-inner-size);
8
+ --alert-default-icon-container-height: var(--dimensions-13);
9
+ --alert-illustrative-padding-y: var(--dimensions-07);
10
+ --alert-illustrative-inner-spacing-x: var(--dimensions-10);
11
+ --alert-illustrative-padding-x: var(--alert-default-padding-x);
12
+ --alert-illustrative-min-width: 23.75rem;
13
+ --alert-illustrative-text-max-width: 46.75rem;
14
+ --avatar-size-sm: var(--dimensions-13);
15
+ --avatar-size-md: var(--dimensions-14);
16
+ --avatar-size-lg: var(--dimensions-16);
17
+ --breadcrumb-inner-spacing: var(--dimensions-03);
18
+ --breadcrumb-spacing-bottom: var(--dimensions-10);
19
+ --button-group-icon-container-height: var(--dimensions-13);
20
+ --button-gutter-x-sm: var(--dimensions-05);
21
+ --button-gutter-x: var(--dimensions-10);
22
+ --button-gutter-y: var(--dimensions-10);
23
+ --button-icon-inner-icon-only-size: var(--dimensions-11);
24
+ --button-icon-inner-size: var(--dimensions-11);
25
+ --button-lg-inner-spacing: var(--dimensions-04);
26
+ --button-lg-padding-y: var(--dimensions-06);
27
+ --button-lg-padding-x: var(--dimensions-11);
28
+ --button-lg-icon-padding: var(--dimensions-03);
29
+ --button-lg-icon-size: var(--dimensions-17);
30
+ --button-md-inner-spacing: var(--dimensions-04);
31
+ --button-md-padding-y: var(--dimensions-06);
32
+ --button-md-padding-x: var(--dimensions-11);
33
+ --button-md-height: var(--dimensions-17);
34
+ --button-md-icon-padding: var(--dimensions-03);
35
+ --button-md-icon-size: var(--dimensions-17);
36
+ --button-md-neutral-padding-x: var(--dimensions-00);
37
+ --button-md-neutral-padding-y: var(--dimensions-06);
38
+ --button-radius-sm: var(--radius-02-default);
39
+ --button-radius-default: var(--radius-08);
40
+ --button-sm-inner-spacing: var(--dimensions-04);
41
+ --button-sm-padding-y: var(--dimensions-06);
42
+ --button-sm-padding-x: var(--dimensions-11);
43
+ --button-sm-height: var(--dimensions-16);
44
+ --button-sm-icon-padding: var(--dimensions-00);
45
+ --button-sm-icon-size: var(--dimensions-17);
46
+ --button-sm-neutral-padding-x: var(--dimensions-00);
47
+ --button-sm-neutral-padding-y: var(--dimensions-06);
48
+ --button-text-size-default: var(--body-regular-size);
49
+ --button-text-size-sm: var(--body-regular-size);
50
+ --button-width-min-sm: var(--dimensions-21);
51
+ --button-width-min: var(--dimensions-23);
52
+ --button-width-max: var(--dimensions-25);
53
+ --button-xl-inner-spacing: var(--dimensions-04);
54
+ --button-xl-padding-y: var(--dimensions-07);
55
+ --button-xl-padding-x: var(--dimensions-11);
56
+ --button-xl-icon-padding: var(--dimensions-05);
57
+ --button-xl-icon-size: var(--dimensions-18);
58
+ --button-xs-icon-inner-size: var(--dimensions-10);
59
+ --button-xs-icon-size: var(--dimensions-13);
60
+ --button-xxs-icon-size: var(--dimensions-10);
61
+ --card-padding-xxs: var(--dimensions-03);
62
+ --card-padding-lg: var(--dimensions-05);
63
+ --card-padding-xs: var(--dimensions-05);
64
+ --card-padding-sm: var(--dimensions-07);
65
+ --card-padding-md-default: var(--dimensions-10);
66
+ --card-radius-sharp: var(--radius-00);
67
+ --card-radius-rounded: var(--radius-02-default);
68
+ --carousel-indicator-height: var(--dimensions-06);
69
+ --carousel-indicator-width: var(--dimensions-14);
70
+ --content-heading-icon-padding-top: var(--dimensions-02);
71
+ --content-heading-inner-spacing-x: var(--dimensions-05);
72
+ --content-label-inner-spacing-x: var(--dimensions-02);
73
+ --content-label-info-icon-padding-y: var(--dimensions-03);
74
+ --content-label-label-sm-height: var(--dimensions-13);
75
+ --dropdown-max-height: 37.5rem;
76
+ --dropdown-body-padding-x: var(--dimensions-07);
77
+ --dropdown-body-padding-y: var(--dimensions-07);
78
+ --dropdown-group-label-padding-x: var(--dropdown-item-padding-x);
79
+ --dropdown-group-label-padding-y: var(--dropdown-item-padding-y);
80
+ --dropdown-item-radius: var(--radius-02-default);
81
+ --dropdown-item-inner-spacing: var(--dimensions-05);
82
+ --dropdown-item-padding-x: var(--dimensions-07);
83
+ --dropdown-item-padding-y: var(--dimensions-07);
84
+ --empty-state-inner-spacing-y-sm: var(--dimensions-03);
85
+ --empty-state-radius: var(--radius-02-default);
86
+ --empty-state-inner-spacing-y-lg: var(--dimensions-05);
87
+ --empty-state-inner-spacing-y-md: var(--dimensions-05);
88
+ --empty-state-padding: var(--dimensions-10);
89
+ --empty-state-padding-sm: var(--dimensions-10);
90
+ --file-dropzone-padding-x: var(--dimensions-10);
91
+ --file-dropzone-padding-y: var(--dimensions-13);
92
+ --filter-default-inner-spacing: var(--dimensions-02);
93
+ --filter-default-padding-y: var(--dimensions-03);
94
+ --filter-default-padding-x: var(--dimensions-04);
95
+ --filter-sm-inner-spacing: var(--dimensions-02);
96
+ --filter-sm-padding-y: var(--dimensions-02);
97
+ --filter-sm-padding-x: var(--dimensions-03);
98
+ --form-calendar-date-width: 2.5rem;
99
+ --form-checkbox-radio-label-gutter-y: var(--dimensions-03);
100
+ --form-checkbox-radio-gutter-y: var(--dimensions-05);
101
+ --form-checkbox-radio-inner-spacing: var(--dimensions-05);
102
+ --form-checkbox-radio-gutter-x: var(--dimensions-07);
103
+ --form-checkbox-radio-card-radius: var(--radius-02-default);
104
+ --form-checkbox-radio-card-inner-spacing: var(--button-md-inner-spacing);
105
+ --form-checkbox-radio-card-gutter: var(--button-gutter-x-sm);
106
+ --form-checkbox-radio-card-checkbox-icon-padding-y: var(--dimensions-04);
107
+ --form-checkbox-radio-card-checkbox-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
108
+ --form-checkbox-radio-card-checkbox-padding-y: var(--dimensions-05);
109
+ --form-checkbox-radio-card-checkbox-indicator-padding-y: var(--dimensions-07);
110
+ --form-checkbox-radio-card-radio-icon-padding-y: var(--dimensions-04);
111
+ --form-checkbox-radio-card-radio-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
112
+ --form-checkbox-radio-card-radio-padding-y: var(--dimensions-05);
113
+ --form-checkbox-radio-card-radio-indicator-padding-y: var(--dimensions-06);
114
+ --form-checkbox-radio-indicator-container-height: var(--dimensions-13);
115
+ --form-checkbox-radio-indicator-radius-checkbox: var(--dimensions-02);
116
+ --form-checkbox-radio-indicator-radius-radio: var(--radius-08);
117
+ --form-checkbox-radio-size-fixed: var(--dimensions-11);
118
+ --form-checkbox-radio-size-large: var(--dimensions-13);
119
+ --form-checkbox-radio-size-responsive: var(--dimensions-13);
120
+ --form-checkbox-radio-subitem-padding-left: var(--dimensions-14);
121
+ --form-field-inner-spacing-sm: var(--dimensions-03);
122
+ --form-field-outer-spacing: var(--dimensions-03);
123
+ --form-field-radius: var(--card-radius-rounded);
124
+ --form-field-inner-spacing: var(--dimensions-05);
125
+ --form-field-button-height-sm: var(--dimensions-13);
126
+ --form-field-button-height: var(--dimensions-14);
127
+ --form-field-height: var(--dimensions-17);
128
+ --form-field-height-sm: var(--dimensions-17);
129
+ --form-field-padding-x-md-default: var(--dimensions-05);
130
+ --form-field-padding-x-lg: var(--dimensions-10);
131
+ --form-field-padding-y-xs: var(--dimensions-02);
132
+ --form-field-padding-y-md-has-button: var(--dimensions-04);
133
+ --form-field-padding-y-sm-has-button: var(--dimensions-04);
134
+ --form-field-padding-y-xxs: var(--dimensions-04);
135
+ --form-field-padding-y-md-default: var(--dimensions-06);
136
+ --form-field-padding-y-sm: var(--dimensions-06);
137
+ --form-field-padding-y-lg: var(--dimensions-10);
138
+ --form-number-input-min-width: var(--dimensions-22);
139
+ --form-number-min-width: 10.5rem;
140
+ --form-select-area-radius: var(--radius-02-default);
141
+ --form-select-area-max-height: 18.75rem;
142
+ --form-slider-radius: var(--radius-02-default);
143
+ --form-slider-height: var(--dimensions-05);
144
+ --form-slider-inner-spacing: var(--dimensions-07);
145
+ --form-slider-thumb-size: var(--dimensions-13);
146
+ --form-textarea-min-height: 8.5rem;
147
+ --form-toggl-padding: var(--dimensions-02);
148
+ --form-toggl-radius: var(--radius-04);
149
+ --form-toggl-default-margin-y: var(--dimensions-00);
150
+ --form-toggl-default-indicator: var(--dimensions-13);
151
+ --form-toggl-default-height: 1.75rem;
152
+ --form-toggl-default-width: 3.5rem;
153
+ --form-toggl-large-indicator: 1.5rem;
154
+ --form-toggl-large-height: 1.75rem;
155
+ --form-toggl-large-width: 3.5rem;
156
+ --general-selected-border-width: var(--borders-02);
157
+ --icon-00: var(--dimensions-05);
158
+ --icon-01: var(--dimensions-07);
159
+ --icon-02: var(--dimensions-10);
160
+ --icon-03: var(--dimensions-11);
161
+ --icon-04: var(--dimensions-12);
162
+ --icon-05: var(--dimensions-13);
163
+ --icon-06: var(--dimensions-15);
164
+ --icon-07: var(--dimensions-18);
165
+ --icon-background-padding-sm: var(--dimensions-05);
166
+ --icon-background-padding-lg: var(--dimensions-07);
167
+ --icon-background-radius: var(--radius-08);
168
+ --layout-page-spacing-x: 0.5rem;
169
+ --layout-page-spacing-top: var(--dimensions-13);
170
+ --layout-common-device-width: 22.5rem;
171
+ --layout-common-device-height: 50.75rem;
172
+ --layout-container-max-width-xs: 33.75rem;
173
+ --layout-container-max-width-sm: 45rem;
174
+ --layout-container-max-width-md: 60rem;
175
+ --layout-container-max-width-lg: 71.25rem;
176
+ --layout-container-max-width-xl: 82.5rem;
177
+ --layout-container-max-width-xxl: 90rem;
178
+ --layout-footer-item-vertical-spacing: var(--dimensions-05);
179
+ --layout-footer-padding-x: var(--dimensions-10);
180
+ --layout-footer-padding-y: var(--dimensions-10);
181
+ --layout-footer-bottom-padding-y: var(--dimensions-05);
182
+ --layout-footer-bottom-padding-x: var(--layout-page-spacing-x);
183
+ --layout-footer-col-padding-x: 0rem;
184
+ --layout-grid-column-width: 0rem;
185
+ --layout-grid-column-offset: 0.5rem;
186
+ --layout-grid-column-gutter: var(--dimensions-13);
187
+ --layout-grid-gutters-02: var(--dimensions-02);
188
+ --layout-grid-gutters-04: var(--dimensions-03);
189
+ --layout-grid-gutters-08: var(--dimensions-05);
190
+ --layout-grid-gutters-12: var(--dimensions-07);
191
+ --layout-grid-gutters-16: var(--dimensions-10);
192
+ --layout-grid-gutters-24: var(--dimensions-13);
193
+ --layout-grid-gutters-32: var(--dimensions-14);
194
+ --layout-grid-gutters-48: var(--dimensions-18);
195
+ --layout-header-padding-right: 0rem;
196
+ --layout-header-padding-y: 0rem;
197
+ --layout-header-padding-y-sm: 0rem;
198
+ --layout-header-padding-left: var(--dimensions-06);
199
+ --layout-header-profile-icon: var(--icon-05);
200
+ --layout-header-min-height: 3.5rem;
201
+ --layout-header-mobile-button-size: var(--dimensions-19);
202
+ --layout-header-items-center-gutter-x: var(--dimensions-07);
203
+ --layout-header-items-right-gutter-x: var(--dimensions-07);
204
+ --layout-header-modal-item-padding: var(--dimensions-10);
205
+ --link-icon-padding-top: var(--dimensions-02);
206
+ --link-icon-padding-y: var(--dimensions-03);
207
+ --link-inner-spacing-x: var(--dimensions-03);
208
+ --link-link-sm-height: var(--body-regular-line-height);
209
+ --list-icon-padding-y: var(--dimensions-05);
210
+ --list-icon-size: var(--icon-00);
211
+ --list-inner-spacing-x: var(--dimensions-05);
212
+ --list-list-item-margin-y: var(--dimensions-05);
213
+ --list-padding-left-level-1: var(--dimensions-05);
214
+ --list-padding-left-level-2: var(--dimensions-13);
215
+ --list-padding-left-level-3: var(--dimensions-16);
216
+ --loader-skeleton-radius: var(--radius-02-default);
217
+ --loader-skeleton-inner-spacing-y: var(--dimensions-10);
218
+ --loader-skeleton-height-100: 1.5rem;
219
+ --loader-skeleton-height-200: 2rem;
220
+ --loader-skeleton-height-300: 2.25rem;
221
+ --loader-skeleton-height-400: 2.875rem;
222
+ --loader-skeleton-height-500: 6.25rem;
223
+ --loader-spinner-page-spacing-top: var(--dimensions-22);
224
+ --loader-spinner-sizing-sm: var(--dimensions-06);
225
+ --loader-spinner-sizing-md: var(--dimensions-10);
226
+ --loader-spinner-sizing-lg: var(--dimensions-18);
227
+ --modal-radius: var(--card-radius-rounded);
228
+ --modal-top-margin: var(--dimensions-10);
229
+ --modal-body-padding: var(--dimensions-10);
230
+ --modal-body-padding-sm: var(--modal-heading-padding-x-sm);
231
+ --modal-footer-padding-y-sm: var(--dimensions-05);
232
+ --modal-footer-padding-x: var(--dimensions-10);
233
+ --modal-footer-padding-x-sm: var(--modal-heading-padding-x-sm);
234
+ --modal-footer-padding-y: var(--dimensions-10);
235
+ --modal-heading-padding-y-sm: var(--dimensions-05);
236
+ --modal-heading-padding-x: var(--dimensions-10);
237
+ --modal-heading-padding-x-sm: var(--dimensions-10);
238
+ --modal-heading-padding-y: var(--dimensions-10);
239
+ --modal-max-width-lg: var(--containers-05);
240
+ --modal-max-width-md: var(--containers-05);
241
+ --modal-max-width-sm: var(--containers-05);
242
+ --modal-max-width-xl: var(--containers-05);
243
+ --modal-max-width-xs: var(--containers-05);
244
+ --pagination-padding-y: 0.75rem;
245
+ --pagination-padding-x: 0.875rem;
246
+ --pagination-button-size: var(--dimensions-14);
247
+ --popover-padding-md: var(--card-padding-lg);
248
+ --popover-padding-xs: var(--card-padding-xs);
249
+ --popover-padding-sm: var(--card-padding-md-default);
250
+ --popover-radius-rounded: var(--card-radius-rounded);
251
+ --popover-width-01: var(--containers-02);
252
+ --popover-width-02: var(--containers-06);
253
+ --popover-width-03: var(--containers-10);
254
+ --progress-bar-height-sm: var(--dimensions-03);
255
+ --progress-bar-radius: var(--form-slider-radius);
256
+ --progress-bar-height: var(--form-slider-height);
257
+ --separator-spacing-y-01: var(--dimensions-03);
258
+ --separator-spacing-x-01: var(--dimensions-04);
259
+ --separator-spacing-y-02: var(--dimensions-05);
260
+ --separator-spacing-x-02: var(--dimensions-07);
261
+ --separator-spacing-y-03: var(--dimensions-10);
262
+ --separator-spacing-x-03: var(--dimensions-13);
263
+ --separator-spacing-y-04: var(--dimensions-13);
264
+ --separator-dotted-line-width: var(--dimensions-01);
265
+ --separator-dotted-dot-xs: var(--dimensions-02);
266
+ --separator-dotted-dot-sm: var(--dimensions-03);
267
+ --separator-dotted-dot-md: 0.5625rem;
268
+ --separator-dotted-dot-lg: 0.9375rem;
269
+ --separator-top-spacing-large-dot-sm: var(--dimensions-03);
270
+ --separator-top-spacing-large-dot-md: 0.9688rem;
271
+ --separator-top-spacing-large-dot-lg: 1.3125rem;
272
+ --separator-top-spacing-small-dot-sm: var(--dimensions-05);
273
+ --separator-top-spacing-small-dot-md: var(--dimensions-06);
274
+ --separator-top-spacing-small-dot-lg: var(--dimensions-13);
275
+ --side-navigation-text-size: var(--body-regular-size);
276
+ --side-navigation-text-size-sm: var(--body-regular-size);
277
+ --side-navigation-item-padding-x-sm: var(--dimensions-05);
278
+ --side-navigation-item-inner-spacing: var(--dimensions-10);
279
+ --side-navigation-item-inner-spacing-sm: var(--dimensions-10);
280
+ --side-navigation-item-padding-left-level-1: var(--dimensions-10);
281
+ --side-navigation-item-padding-left-level-2: var(--dimensions-10);
282
+ --side-navigation-item-padding-right: var(--dimensions-10);
283
+ --side-navigation-item-padding-y: var(--dimensions-10);
284
+ --side-navigation-item-padding-y-md: var(--dimensions-10);
285
+ --side-navigation-item-padding-y-sm: var(--dimensions-10);
286
+ --side-navigation-item-icon: var(--icon-05);
287
+ --side-navigation-item-icon-md: var(--icon-05);
288
+ --side-navigation-item-icon-sm: var(--icon-05);
289
+ --side-navigation-item-min-height-large: var(--dimensions-19);
290
+ --side-navigation-item-min-height-medium: var(--dimensions-19);
291
+ --side-navigation-item-min-height-small: var(--dimensions-19);
292
+ --side-navigation-item-width-collapsed: 6rem;
293
+ --side-navigation-item-width-default: 20rem;
294
+ --status-indicator-inner-spacing: var(--dimensions-05);
295
+ --status-indicator-sm: var(--dimensions-05);
296
+ --status-indicator-lg: var(--dimensions-07);
297
+ --stepper-item-horizontal-inner-spacing: var(--dimensions-05);
298
+ --stepper-item-horizontal-padding-y: var(--dimensions-05);
299
+ --stepper-item-horizontal-padding-x: var(--dimensions-10);
300
+ --stepper-item-horizontal-min-height: var(--dimensions-17);
301
+ --stepper-item-vertical-padding-y-sm: 0.125rem;
302
+ --stepper-item-vertical-line-height: 0.375rem;
303
+ --stepper-item-vertical-sub-line-bottom: 0.5625rem;
304
+ --stepper-item-vertical-sub-line-top: 0.5938rem;
305
+ --stepper-item-vertical-compact-padding-top: 0.1875rem;
306
+ --stepper-item-vertical-compact-inner-spacing: var(--dimensions-04);
307
+ --stepper-item-vertical-compact-sub-item-indicator-width: var(--dimensions-10);
308
+ --stepper-item-vertical-compact-min-height-first-item: 2rem;
309
+ --stepper-item-vertical-compact-min-height: 2.5rem;
310
+ --stepper-item-vertical-lg-inner-spacing: var(--dimensions-05);
311
+ --stepper-item-vertical-lg-padding-top: 0.5rem;
312
+ --stepper-item-vertical-lg-sub-item-indicator-width: var(--dimensions-13);
313
+ --stepper-item-vertical-lg-min-height-first-item: 2rem;
314
+ --stepper-item-vertical-lg-min-height: 2.75rem;
315
+ --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
316
+ --stepper-item-vertical-step-size-md: 1rem;
317
+ --stepper-item-vertical-step-size-lg: 1.5rem;
318
+ --tab-top-radius: var(--card-radius-rounded);
319
+ --tab-inner-spacing: var(--dimensions-05);
320
+ --tab-spacing-y: var(--dimensions-07);
321
+ --tab-spacing-x: var(--dimensions-10);
322
+ --tab-icon: 1.125rem;
323
+ --table-radius: var(--radius-02-default);
324
+ --table-of-contents-padding-left-level-1: var(--dimensions-10);
325
+ --table-of-contents-padding-left-level-2: var(--dimensions-14);
326
+ --table-of-contents-width: var(--containers-04);
327
+ --table-data-padding-y-sm: 0.25rem;
328
+ --table-data-padding-x-sm: 0.5rem;
329
+ --table-data-padding-y: 0.75rem;
330
+ --table-data-padding-x: 0.875rem;
331
+ --table-header-padding-x-sm: 0.5rem;
332
+ --table-header-padding-y: 0.75rem;
333
+ --table-header-padding-y-sm: 0.75rem;
334
+ --table-header-padding-x: 0.875rem;
335
+ --tag-default-padding-y: var(--dimensions-02);
336
+ --tag-default-padding-x: var(--dimensions-03);
337
+ --tag-default-radius: var(--radius-02-default);
338
+ --tag-default-loader-padding-y: var(--dimensions-04);
339
+ --tag-status-icon-padding-x: var(--dimensions-03);
340
+ --tag-status-icon-padding-y: var(--dimensions-03);
341
+ --tag-status-large-padding-x: var(--dimensions-05);
342
+ --tag-status-large-padding-y: var(--dimensions-05);
343
+ --tag-status-large-min-width: var(--dimensions-21);
344
+ --text-group-label-width-sm: 8.25rem;
345
+ --text-group-label-width-md: 10.25rem;
346
+ --text-group-label-width-lg: 12.25rem;
347
+ --text-group-value-inner-spacing: var(--dimensions-04);
348
+ --text-group-value-icon-padding-top: var(--dimensions-03);
349
+ --timeline-padding-y: var(--dimensions-05);
350
+ --timeline-text-min-height: var(--dimensions-13);
351
+ --timeline-date-container-width: 6.5625rem;
352
+ --toast-outer-spacing: var(--dimensions-00);
353
+ --toast-inner-spacing-y: var(--alert-default-inner-spacing-y);
354
+ --toast-margin-bottom: var(--dimensions-05);
355
+ --toast-margin-left: var(--dimensions-05);
356
+ --toast-margin-right: var(--dimensions-05);
357
+ --toast-padding-y: var(--alert-default-padding-y);
358
+ --toast-padding-x: var(--alert-default-padding-x);
359
+ --toast-width: var(--containers-03);
360
+ --tooltip-radius: var(--card-radius-rounded);
361
+ --tooltip-padding-x: var(--card-padding-xs);
362
+ --tooltip-padding-y: var(--tooltip-padding-x);
363
+ --tooltip-max-width: var(--containers-02);
364
+
365
+ @media (width >= 48rem) {
366
+ --alert-radius: var(--card-radius-rounded);
367
+ --alert-default-padding-x-sm: var(--dimensions-05);
368
+ --alert-default-padding-y-sm: var(--dimensions-05);
369
+ --alert-default-padding-y: var(--dimensions-10);
370
+ --alert-default-icon-size: var(--button-icon-inner-size);
371
+ --alert-default-padding-x: 1.25rem;
372
+ --alert-default-icon-container-height: var(--dimensions-13);
373
+ --alert-illustrative-padding-y: var(--dimensions-07);
374
+ --alert-illustrative-inner-spacing-x: var(--dimensions-10);
375
+ --alert-illustrative-padding-x: var(--alert-default-padding-x);
376
+ --alert-illustrative-min-width: 23.75rem;
377
+ --alert-illustrative-text-max-width: 46.75rem;
378
+ --avatar-size-sm: var(--dimensions-13);
379
+ --avatar-size-md: var(--dimensions-14);
380
+ --avatar-size-lg: var(--dimensions-16);
381
+ --breadcrumb-inner-spacing: var(--dimensions-03);
382
+ --breadcrumb-spacing-bottom: var(--dimensions-13);
383
+ --button-group-icon-container-height: var(--dimensions-13);
384
+ --button-gutter-x-sm: var(--dimensions-05);
385
+ --button-gutter-x: var(--dimensions-10);
386
+ --button-gutter-y: var(--dimensions-10);
387
+ --button-icon-inner-icon-only-size: var(--dimensions-11);
388
+ --button-icon-inner-size: var(--dimensions-11);
389
+ --button-lg-inner-spacing: var(--dimensions-04);
390
+ --button-lg-padding-y: var(--dimensions-06);
391
+ --button-lg-padding-x: var(--dimensions-11);
392
+ --button-lg-icon-padding: var(--dimensions-03);
393
+ --button-lg-icon-size: var(--dimensions-17);
394
+ --button-md-inner-spacing: var(--dimensions-04);
395
+ --button-md-padding-y: var(--dimensions-05);
396
+ --button-md-padding-x: var(--dimensions-11);
397
+ --button-md-height: var(--dimensions-16);
398
+ --button-md-icon-padding: var(--dimensions-03);
399
+ --button-md-icon-size: var(--dimensions-16);
400
+ --button-md-neutral-padding-x: var(--dimensions-00);
401
+ --button-md-neutral-padding-y: var(--dimensions-05);
402
+ --button-radius-sm: var(--radius-02-default);
403
+ --button-radius-default: var(--radius-08);
404
+ --button-sm-inner-spacing: var(--dimensions-03);
405
+ --button-sm-padding-y: var(--dimensions-03);
406
+ --button-sm-padding-x: var(--dimensions-09);
407
+ --button-sm-height: var(--dimensions-14);
408
+ --button-sm-icon-padding: var(--dimensions-00);
409
+ --button-sm-icon-size: var(--dimensions-14);
410
+ --button-sm-neutral-padding-x: var(--dimensions-00);
411
+ --button-sm-neutral-padding-y: var(--dimensions-03);
412
+ --button-text-size-sm: var(--body-small-regular-size);
413
+ --button-text-size-default: var(--body-regular-size);
414
+ --button-width-min-sm: var(--dimensions-21);
415
+ --button-width-min: var(--dimensions-23);
416
+ --button-width-max: var(--dimensions-25);
417
+ --button-xl-inner-spacing: var(--dimensions-04);
418
+ --button-xl-padding-y: var(--dimensions-07);
419
+ --button-xl-padding-x: var(--dimensions-11);
420
+ --button-xl-icon-padding: var(--dimensions-05);
421
+ --button-xl-icon-size: var(--dimensions-18);
422
+ --button-xs-icon-inner-size: var(--dimensions-10);
423
+ --button-xs-icon-size: var(--dimensions-13);
424
+ --button-xxs-icon-size: var(--dimensions-10);
425
+ --card-padding-xxs: var(--dimensions-03);
426
+ --card-padding-xs: var(--dimensions-05);
427
+ --card-padding-sm: var(--dimensions-07);
428
+ --card-padding-lg: var(--dimensions-10);
429
+ --card-padding-md-default: var(--dimensions-10);
430
+ --card-radius-sharp: var(--radius-00);
431
+ --card-radius-rounded: var(--radius-02-default);
432
+ --carousel-indicator-height: var(--dimensions-05);
433
+ --carousel-indicator-width: var(--dimensions-12);
434
+ --content-heading-icon-padding-top: var(--dimensions-02);
435
+ --content-heading-inner-spacing-x: var(--dimensions-05);
436
+ --content-label-inner-spacing-x: var(--dimensions-02);
437
+ --content-label-info-icon-padding-y: var(--dimensions-03);
438
+ --content-label-label-sm-height: var(--dimensions-13);
439
+ --dropdown-max-height: 37.5rem;
440
+ --dropdown-body-padding-y: var(--dimensions-05);
441
+ --dropdown-body-padding-x: var(--dimensions-07);
442
+ --dropdown-group-label-padding-y: var(--dropdown-item-padding-y);
443
+ --dropdown-group-label-padding-x: var(--dropdown-item-padding-x);
444
+ --dropdown-item-radius: var(--radius-02-default);
445
+ --dropdown-item-inner-spacing: var(--dimensions-05);
446
+ --dropdown-item-padding-y: var(--dimensions-05);
447
+ --dropdown-item-padding-x: var(--dimensions-07);
448
+ --empty-state-inner-spacing-y-sm: var(--dimensions-03);
449
+ --empty-state-radius: var(--radius-02-default);
450
+ --empty-state-inner-spacing-y-md: var(--dimensions-05);
451
+ --empty-state-inner-spacing-y-lg: var(--dimensions-10);
452
+ --empty-state-padding-sm: var(--dimensions-10);
453
+ --empty-state-padding: var(--dimensions-13);
454
+ --file-dropzone-padding-x: var(--dimensions-13);
455
+ --file-dropzone-padding-y: var(--dimensions-13);
456
+ --filter-default-inner-spacing: var(--dimensions-02);
457
+ --filter-default-padding-y: var(--dimensions-03);
458
+ --filter-default-padding-x: var(--dimensions-04);
459
+ --filter-sm-inner-spacing: var(--dimensions-02);
460
+ --filter-sm-padding-y: var(--dimensions-02);
461
+ --filter-sm-padding-x: var(--dimensions-03);
462
+ --form-calendar-date-width: 2.5rem;
463
+ --form-checkbox-radio-label-gutter-y: var(--dimensions-00);
464
+ --form-checkbox-radio-gutter-y: var(--dimensions-03);
465
+ --form-checkbox-radio-inner-spacing: var(--dimensions-05);
466
+ --form-checkbox-radio-gutter-x: var(--dimensions-07);
467
+ --form-checkbox-radio-card-radius: var(--radius-02-default);
468
+ --form-checkbox-radio-card-inner-spacing: var(--button-md-inner-spacing);
469
+ --form-checkbox-radio-card-gutter: var(--button-gutter-x-sm);
470
+ --form-checkbox-radio-card-checkbox-icon-padding-y: var(--dimensions-04);
471
+ --form-checkbox-radio-card-checkbox-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
472
+ --form-checkbox-radio-card-checkbox-padding-y: var(--dimensions-05);
473
+ --form-checkbox-radio-card-checkbox-indicator-padding-y: var(--dimensions-07);
474
+ --form-checkbox-radio-card-radio-icon-padding-y: var(--dimensions-04);
475
+ --form-checkbox-radio-card-radio-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
476
+ --form-checkbox-radio-card-radio-padding-y: var(--dimensions-05);
477
+ --form-checkbox-radio-card-radio-indicator-padding-y: var(--dimensions-06);
478
+ --form-checkbox-radio-indicator-container-height: var(--dimensions-13);
479
+ --form-checkbox-radio-indicator-radius-checkbox: var(--dimensions-02);
480
+ --form-checkbox-radio-indicator-radius-radio: var(--radius-08);
481
+ --form-checkbox-radio-size-fixed: var(--dimensions-11);
482
+ --form-checkbox-radio-size-responsive: var(--dimensions-11);
483
+ --form-checkbox-radio-size-large: var(--dimensions-13);
484
+ --form-checkbox-radio-subitem-padding-left: var(--dimensions-14);
485
+ --form-field-inner-spacing-sm: var(--dimensions-03);
486
+ --form-field-outer-spacing: var(--dimensions-03);
487
+ --form-field-radius: var(--card-radius-rounded);
488
+ --form-field-inner-spacing: var(--dimensions-05);
489
+ --form-field-button-height-sm: var(--dimensions-13);
490
+ --form-field-button-height: var(--dimensions-14);
491
+ --form-field-height-sm: var(--dimensions-14);
492
+ --form-field-height: var(--dimensions-16);
493
+ --form-field-padding-x-md-default: var(--dimensions-05);
494
+ --form-field-padding-x-lg: var(--dimensions-10);
495
+ --form-field-padding-y-xxs: var(--dimensions-00);
496
+ --form-field-padding-y-xs: var(--dimensions-02);
497
+ --form-field-padding-y-md-has-button: var(--dimensions-03);
498
+ --form-field-padding-y-sm: var(--dimensions-03);
499
+ --form-field-padding-y-sm-has-button: var(--dimensions-03);
500
+ --form-field-padding-y-md-default: var(--dimensions-05);
501
+ --form-field-padding-y-lg: var(--dimensions-10);
502
+ --form-number-input-min-width: var(--dimensions-22);
503
+ --form-number-min-width: 10.1875rem;
504
+ --form-select-area-radius: var(--radius-02-default);
505
+ --form-select-area-max-height: 18.75rem;
506
+ --form-slider-radius: var(--radius-02-default);
507
+ --form-slider-height: var(--dimensions-05);
508
+ --form-slider-inner-spacing: var(--dimensions-07);
509
+ --form-slider-thumb-size: var(--dimensions-13);
510
+ --form-textarea-min-height: 8.5rem;
511
+ --form-toggl-padding: var(--dimensions-02);
512
+ --form-toggl-radius: var(--radius-04);
513
+ --form-toggl-default-margin-y: var(--dimensions-02);
514
+ --form-toggl-default-indicator: var(--dimensions-10);
515
+ --form-toggl-default-height: 1.25rem;
516
+ --form-toggl-default-width: var(--dimensions-16);
517
+ --form-toggl-large-indicator: 1.5rem;
518
+ --form-toggl-large-height: 1.75rem;
519
+ --form-toggl-large-width: 3.5rem;
520
+ --general-selected-border-width: var(--borders-02);
521
+ --icon-00: var(--dimensions-05);
522
+ --icon-01: var(--dimensions-07);
523
+ --icon-02: var(--dimensions-10);
524
+ --icon-03: var(--dimensions-11);
525
+ --icon-04: var(--dimensions-12);
526
+ --icon-05: var(--dimensions-13);
527
+ --icon-06: var(--dimensions-15);
528
+ --icon-07: var(--dimensions-18);
529
+ --icon-background-padding-sm: var(--dimensions-05);
530
+ --icon-background-padding-lg: var(--dimensions-07);
531
+ --icon-background-radius: var(--radius-08);
532
+ --layout-page-spacing-top: var(--dimensions-13);
533
+ --layout-page-spacing-x: 1.5rem;
534
+ --layout-common-device-width: 48rem;
535
+ --layout-common-device-height: 64rem;
536
+ --layout-container-max-width-xs: 33.75rem;
537
+ --layout-container-max-width-sm: 45rem;
538
+ --layout-container-max-width-md: 60rem;
539
+ --layout-container-max-width-lg: 71.25rem;
540
+ --layout-container-max-width-xl: 82.5rem;
541
+ --layout-container-max-width-xxl: 90rem;
542
+ --layout-footer-item-vertical-spacing: var(--dimensions-05);
543
+ --layout-footer-padding-x: var(--dimensions-16);
544
+ --layout-footer-padding-y: var(--dimensions-16);
545
+ --layout-footer-bottom-padding-y: var(--dimensions-05);
546
+ --layout-footer-bottom-padding-x: var(--layout-page-spacing-x);
547
+ --layout-footer-col-padding-x: var(--dimensions-07);
548
+ --layout-grid-column-gutter: var(--dimensions-13);
549
+ --layout-grid-column-offset: 1.5rem;
550
+ --layout-grid-column-width: 14rem;
551
+ --layout-grid-gutters-02: var(--dimensions-02);
552
+ --layout-grid-gutters-04: var(--dimensions-03);
553
+ --layout-grid-gutters-08: var(--dimensions-05);
554
+ --layout-grid-gutters-12: var(--dimensions-07);
555
+ --layout-grid-gutters-16: var(--dimensions-10);
556
+ --layout-grid-gutters-24: var(--dimensions-13);
557
+ --layout-grid-gutters-32: var(--dimensions-14);
558
+ --layout-grid-gutters-48: var(--dimensions-18);
559
+ --layout-header-padding-y-sm: var(--dimensions-07);
560
+ --layout-header-padding-y: var(--dimensions-10);
561
+ --layout-header-padding-left: var(--dimensions-13);
562
+ --layout-header-padding-right: var(--dimensions-13);
563
+ --layout-header-profile-icon: var(--icon-06);
564
+ --layout-header-min-height: 3.5rem;
565
+ --layout-header-mobile-button-size: var(--dimensions-19);
566
+ --layout-header-items-right-gutter-x: var(--dimensions-10);
567
+ --layout-header-items-center-gutter-x: var(--dimensions-13);
568
+ --layout-header-modal-item-padding: var(--dimensions-10);
569
+ --link-icon-padding-top: var(--dimensions-02);
570
+ --link-icon-padding-y: var(--dimensions-03);
571
+ --link-inner-spacing-x: var(--dimensions-03);
572
+ --link-link-sm-height: var(--body-regular-line-height);
573
+ --list-icon-padding-y: var(--dimensions-05);
574
+ --list-icon-size: var(--icon-00);
575
+ --list-inner-spacing-x: var(--dimensions-05);
576
+ --list-list-item-margin-y: var(--dimensions-05);
577
+ --list-padding-left-level-1: var(--dimensions-10);
578
+ --list-padding-left-level-2: var(--dimensions-14);
579
+ --list-padding-left-level-3: var(--dimensions-18);
580
+ --loader-skeleton-radius: var(--radius-02-default);
581
+ --loader-skeleton-inner-spacing-y: var(--dimensions-10);
582
+ --loader-skeleton-height-100: 1.5rem;
583
+ --loader-skeleton-height-200: 2rem;
584
+ --loader-skeleton-height-300: 2.25rem;
585
+ --loader-skeleton-height-400: 2.875rem;
586
+ --loader-skeleton-height-500: 6.25rem;
587
+ --loader-spinner-page-spacing-top: var(--dimensions-22);
588
+ --loader-spinner-sizing-sm: var(--dimensions-06);
589
+ --loader-spinner-sizing-md: var(--dimensions-10);
590
+ --loader-spinner-sizing-lg: var(--dimensions-18);
591
+ --modal-radius: var(--card-radius-rounded);
592
+ --modal-top-margin: var(--dimensions-16);
593
+ --modal-body-padding-sm: var(--modal-heading-padding-x-sm);
594
+ --modal-body-padding: var(--dimensions-13);
595
+ --modal-footer-padding-y-sm: var(--dimensions-05);
596
+ --modal-footer-padding-x-sm: var(--modal-heading-padding-x-sm);
597
+ --modal-footer-padding-y: var(--dimensions-10);
598
+ --modal-footer-padding-x: var(--dimensions-13);
599
+ --modal-heading-padding-y-sm: var(--dimensions-05);
600
+ --modal-heading-padding-x-sm: var(--dimensions-10);
601
+ --modal-heading-padding-y: var(--dimensions-10);
602
+ --modal-heading-padding-x: var(--dimensions-13);
603
+ --modal-max-width-xs: var(--containers-05);
604
+ --modal-max-width-sm: var(--containers-08);
605
+ --modal-max-width-md: var(--containers-09);
606
+ --modal-max-width-lg: var(--containers-11);
607
+ --modal-max-width-xl: var(--containers-13);
608
+ --pagination-padding-y: 0.75rem;
609
+ --pagination-padding-x: 0.875rem;
610
+ --pagination-button-size: var(--button-xs-icon-size);
611
+ --popover-padding-xs: var(--card-padding-xs);
612
+ --popover-padding-md: var(--card-padding-lg);
613
+ --popover-padding-sm: var(--card-padding-md-default);
614
+ --popover-radius-rounded: var(--card-radius-rounded);
615
+ --popover-width-01: var(--containers-02);
616
+ --popover-width-02: var(--containers-06);
617
+ --popover-width-03: var(--containers-10);
618
+ --progress-bar-height-sm: var(--dimensions-03);
619
+ --progress-bar-radius: var(--form-slider-radius);
620
+ --progress-bar-height: var(--form-slider-height);
621
+ --separator-spacing-y-01: var(--dimensions-03);
622
+ --separator-spacing-x-01: var(--dimensions-04);
623
+ --separator-spacing-y-02: var(--dimensions-05);
624
+ --separator-spacing-x-02: var(--dimensions-07);
625
+ --separator-spacing-y-03: var(--dimensions-10);
626
+ --separator-spacing-x-03: var(--dimensions-13);
627
+ --separator-spacing-y-04: var(--dimensions-13);
628
+ --separator-dotted-line-width: var(--dimensions-01);
629
+ --separator-dotted-dot-xs: var(--dimensions-02);
630
+ --separator-dotted-dot-sm: var(--dimensions-03);
631
+ --separator-dotted-dot-md: 0.5625rem;
632
+ --separator-dotted-dot-lg: 0.9375rem;
633
+ --separator-top-spacing-large-dot-sm: var(--dimensions-03);
634
+ --separator-top-spacing-large-dot-md: 0.9688rem;
635
+ --separator-top-spacing-large-dot-lg: 1.3125rem;
636
+ --separator-top-spacing-small-dot-sm: var(--dimensions-05);
637
+ --separator-top-spacing-small-dot-md: var(--dimensions-06);
638
+ --separator-top-spacing-small-dot-lg: var(--dimensions-13);
639
+ --side-navigation-text-size-sm: var(--body-small-regular-size);
640
+ --side-navigation-text-size: var(--body-regular-size);
641
+ --side-navigation-item-inner-spacing-sm: var(--dimensions-05);
642
+ --side-navigation-item-padding-x-sm: var(--dimensions-05);
643
+ --side-navigation-item-inner-spacing: var(--dimensions-10);
644
+ --side-navigation-item-padding-left-level-1: var(--dimensions-10);
645
+ --side-navigation-item-padding-left-level-2: var(--dimensions-10);
646
+ --side-navigation-item-padding-right: var(--dimensions-10);
647
+ --side-navigation-item-padding-y: var(--dimensions-10);
648
+ --side-navigation-item-padding-y-md: var(--dimensions-10);
649
+ --side-navigation-item-padding-y-sm: var(--dimensions-10);
650
+ --side-navigation-item-icon: var(--icon-05);
651
+ --side-navigation-item-icon-md: var(--icon-05);
652
+ --side-navigation-item-icon-sm: var(--icon-05);
653
+ --side-navigation-item-min-height-small: var(--dimensions-16);
654
+ --side-navigation-item-min-height-medium: var(--dimensions-19);
655
+ --side-navigation-item-min-height-large: var(--dimensions-21);
656
+ --side-navigation-item-width-collapsed: 6rem;
657
+ --side-navigation-item-width-default: 25rem;
658
+ --status-indicator-inner-spacing: var(--dimensions-05);
659
+ --status-indicator-sm: var(--dimensions-05);
660
+ --status-indicator-lg: var(--dimensions-07);
661
+ --stepper-item-horizontal-inner-spacing: var(--dimensions-05);
662
+ --stepper-item-horizontal-padding-y: var(--dimensions-05);
663
+ --stepper-item-horizontal-padding-x: var(--dimensions-10);
664
+ --stepper-item-horizontal-min-height: var(--dimensions-16);
665
+ --stepper-item-vertical-padding-y-sm: 0.125rem;
666
+ --stepper-item-vertical-line-height: 0.375rem;
667
+ --stepper-item-vertical-sub-line-bottom: 0.5625rem;
668
+ --stepper-item-vertical-sub-line-top: 0.5938rem;
669
+ --stepper-item-vertical-compact-padding-top: 0.1875rem;
670
+ --stepper-item-vertical-compact-inner-spacing: var(--dimensions-04);
671
+ --stepper-item-vertical-compact-sub-item-indicator-width: var(--dimensions-10);
672
+ --stepper-item-vertical-compact-min-height-first-item: 1.8125rem;
673
+ --stepper-item-vertical-compact-min-height: 2rem;
674
+ --stepper-item-vertical-lg-inner-spacing: var(--dimensions-05);
675
+ --stepper-item-vertical-lg-padding-top: 0.5rem;
676
+ --stepper-item-vertical-lg-sub-item-indicator-width: var(--dimensions-13);
677
+ --stepper-item-vertical-lg-min-height-first-item: 2rem;
678
+ --stepper-item-vertical-lg-min-height: 2.5rem;
679
+ --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
680
+ --stepper-item-vertical-step-size-md: 1rem;
681
+ --stepper-item-vertical-step-size-lg: 1.5rem;
682
+ --tab-top-radius: var(--card-radius-rounded);
683
+ --tab-inner-spacing: var(--dimensions-05);
684
+ --tab-spacing-x: var(--dimensions-10);
685
+ --tab-spacing-y: var(--tab-spacing-x);
686
+ --tab-icon: 1.125rem;
687
+ --table-radius: var(--radius-02-default);
688
+ --table-of-contents-padding-left-level-1: var(--dimensions-10);
689
+ --table-of-contents-padding-left-level-2: var(--dimensions-14);
690
+ --table-of-contents-width: var(--containers-04);
691
+ --table-data-padding-y-sm: 0.25rem;
692
+ --table-data-padding-x-sm: 0.5rem;
693
+ --table-data-padding-y: 0.75rem;
694
+ --table-data-padding-x: 0.875rem;
695
+ --table-header-padding-x-sm: 0.5rem;
696
+ --table-header-padding-y: 0.75rem;
697
+ --table-header-padding-y-sm: 0.75rem;
698
+ --table-header-padding-x: 0.875rem;
699
+ --tag-default-padding-y: var(--dimensions-02);
700
+ --tag-default-padding-x: var(--dimensions-03);
701
+ --tag-default-radius: var(--radius-02-default);
702
+ --tag-default-loader-padding-y: var(--dimensions-04);
703
+ --tag-status-icon-padding-x: var(--dimensions-03);
704
+ --tag-status-icon-padding-y: var(--dimensions-03);
705
+ --tag-status-large-padding-x: var(--dimensions-05);
706
+ --tag-status-large-padding-y: var(--dimensions-05);
707
+ --tag-status-large-min-width: var(--dimensions-21);
708
+ --text-group-label-width-sm: 8.25rem;
709
+ --text-group-label-width-md: 10.25rem;
710
+ --text-group-label-width-lg: 12.25rem;
711
+ --text-group-value-inner-spacing: var(--dimensions-04);
712
+ --text-group-value-icon-padding-top: var(--dimensions-03);
713
+ --timeline-padding-y: var(--dimensions-05);
714
+ --timeline-text-min-height: var(--dimensions-13);
715
+ --timeline-date-container-width: 6.5625rem;
716
+ --toast-margin-left: var(--dimensions-00);
717
+ --toast-inner-spacing-y: var(--alert-default-inner-spacing-y);
718
+ --toast-outer-spacing: var(--dimensions-03);
719
+ --toast-margin-bottom: var(--dimensions-10);
720
+ --toast-margin-right: var(--dimensions-10);
721
+ --toast-padding-y: var(--alert-default-padding-y);
722
+ --toast-padding-x: var(--alert-default-padding-x);
723
+ --toast-width: var(--containers-03);
724
+ --tooltip-radius: var(--card-radius-rounded);
725
+ --tooltip-padding-x: var(--card-padding-xs);
726
+ --tooltip-padding-y: var(--tooltip-padding-x);
727
+ --tooltip-max-width: var(--containers-02);
728
+ }
729
+
730
+ @media (width >= 62rem) {
731
+ --alert-radius: var(--card-radius-rounded);
732
+ --alert-default-padding-x-sm: var(--dimensions-05);
733
+ --alert-default-padding-y-sm: var(--dimensions-05);
734
+ --alert-default-padding-y: var(--dimensions-10);
735
+ --alert-default-icon-size: var(--button-icon-inner-size);
736
+ --alert-default-padding-x: 1.25rem;
737
+ --alert-default-icon-container-height: var(--dimensions-13);
738
+ --alert-illustrative-padding-y: var(--dimensions-07);
739
+ --alert-illustrative-inner-spacing-x: var(--dimensions-10);
740
+ --alert-illustrative-padding-x: var(--alert-default-padding-x);
741
+ --alert-illustrative-min-width: 23.75rem;
742
+ --alert-illustrative-text-max-width: 46.75rem;
743
+ --avatar-size-sm: var(--dimensions-13);
744
+ --avatar-size-md: var(--dimensions-14);
745
+ --avatar-size-lg: var(--dimensions-16);
746
+ --breadcrumb-inner-spacing: var(--dimensions-03);
747
+ --breadcrumb-spacing-bottom: var(--dimensions-13);
748
+ --button-group-icon-container-height: var(--dimensions-13);
749
+ --button-gutter-x-sm: var(--dimensions-05);
750
+ --button-gutter-x: var(--dimensions-10);
751
+ --button-gutter-y: var(--dimensions-10);
752
+ --button-icon-inner-icon-only-size: var(--dimensions-11);
753
+ --button-icon-inner-size: var(--dimensions-11);
754
+ --button-lg-inner-spacing: var(--dimensions-04);
755
+ --button-lg-padding-y: var(--dimensions-06);
756
+ --button-lg-padding-x: var(--dimensions-11);
757
+ --button-lg-icon-padding: var(--dimensions-03);
758
+ --button-lg-icon-size: var(--dimensions-17);
759
+ --button-md-inner-spacing: var(--dimensions-04);
760
+ --button-md-padding-y: var(--dimensions-05);
761
+ --button-md-padding-x: var(--dimensions-11);
762
+ --button-md-height: var(--dimensions-16);
763
+ --button-md-icon-padding: var(--dimensions-03);
764
+ --button-md-icon-size: var(--dimensions-16);
765
+ --button-md-neutral-padding-x: var(--dimensions-00);
766
+ --button-md-neutral-padding-y: var(--dimensions-05);
767
+ --button-radius-sm: var(--radius-02-default);
768
+ --button-radius-default: var(--radius-08);
769
+ --button-sm-inner-spacing: var(--dimensions-03);
770
+ --button-sm-padding-y: var(--dimensions-03);
771
+ --button-sm-padding-x: var(--dimensions-09);
772
+ --button-sm-height: var(--dimensions-14);
773
+ --button-sm-icon-padding: var(--dimensions-00);
774
+ --button-sm-icon-size: var(--dimensions-14);
775
+ --button-sm-neutral-padding-x: var(--dimensions-00);
776
+ --button-sm-neutral-padding-y: var(--dimensions-03);
777
+ --button-text-size-sm: var(--body-small-regular-size);
778
+ --button-text-size-default: var(--body-regular-size);
779
+ --button-width-min-sm: var(--dimensions-21);
780
+ --button-width-min: var(--dimensions-23);
781
+ --button-width-max: var(--dimensions-25);
782
+ --button-xl-inner-spacing: var(--dimensions-04);
783
+ --button-xl-padding-y: var(--dimensions-07);
784
+ --button-xl-padding-x: var(--dimensions-11);
785
+ --button-xl-icon-padding: var(--dimensions-05);
786
+ --button-xl-icon-size: var(--dimensions-18);
787
+ --button-xs-icon-inner-size: var(--dimensions-10);
788
+ --button-xs-icon-size: var(--dimensions-13);
789
+ --button-xxs-icon-size: var(--dimensions-10);
790
+ --card-padding-xxs: var(--dimensions-03);
791
+ --card-padding-xs: var(--dimensions-05);
792
+ --card-padding-sm: var(--dimensions-07);
793
+ --card-padding-md-default: var(--dimensions-10);
794
+ --card-padding-lg: var(--dimensions-13);
795
+ --card-radius-sharp: var(--radius-00);
796
+ --card-radius-rounded: var(--radius-02-default);
797
+ --carousel-indicator-height: var(--dimensions-05);
798
+ --carousel-indicator-width: var(--dimensions-12);
799
+ --content-heading-icon-padding-top: var(--dimensions-02);
800
+ --content-heading-inner-spacing-x: var(--dimensions-05);
801
+ --content-label-inner-spacing-x: var(--dimensions-02);
802
+ --content-label-info-icon-padding-y: var(--dimensions-03);
803
+ --content-label-label-sm-height: var(--dimensions-13);
804
+ --dropdown-max-height: 37.5rem;
805
+ --dropdown-body-padding-y: var(--dimensions-05);
806
+ --dropdown-body-padding-x: var(--dimensions-07);
807
+ --dropdown-group-label-padding-y: var(--dropdown-item-padding-y);
808
+ --dropdown-group-label-padding-x: var(--dropdown-item-padding-x);
809
+ --dropdown-item-radius: var(--radius-02-default);
810
+ --dropdown-item-inner-spacing: var(--dimensions-05);
811
+ --dropdown-item-padding-y: var(--dimensions-05);
812
+ --dropdown-item-padding-x: var(--dimensions-07);
813
+ --empty-state-inner-spacing-y-sm: var(--dimensions-03);
814
+ --empty-state-radius: var(--radius-02-default);
815
+ --empty-state-inner-spacing-y-md: var(--dimensions-05);
816
+ --empty-state-inner-spacing-y-lg: var(--dimensions-10);
817
+ --empty-state-padding-sm: var(--dimensions-10);
818
+ --empty-state-padding: var(--dimensions-13);
819
+ --file-dropzone-padding-x: var(--dimensions-13);
820
+ --file-dropzone-padding-y: var(--dimensions-13);
821
+ --filter-default-inner-spacing: var(--dimensions-02);
822
+ --filter-default-padding-y: var(--dimensions-03);
823
+ --filter-default-padding-x: var(--dimensions-04);
824
+ --filter-sm-inner-spacing: var(--dimensions-02);
825
+ --filter-sm-padding-y: var(--dimensions-02);
826
+ --filter-sm-padding-x: var(--dimensions-03);
827
+ --form-calendar-date-width: 2.5rem;
828
+ --form-checkbox-radio-label-gutter-y: var(--dimensions-00);
829
+ --form-checkbox-radio-gutter-y: var(--dimensions-03);
830
+ --form-checkbox-radio-inner-spacing: var(--dimensions-05);
831
+ --form-checkbox-radio-gutter-x: var(--dimensions-07);
832
+ --form-checkbox-radio-card-radius: var(--radius-02-default);
833
+ --form-checkbox-radio-card-inner-spacing: var(--button-md-inner-spacing);
834
+ --form-checkbox-radio-card-gutter: var(--button-gutter-x-sm);
835
+ --form-checkbox-radio-card-checkbox-icon-padding-y: var(--dimensions-04);
836
+ --form-checkbox-radio-card-checkbox-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
837
+ --form-checkbox-radio-card-checkbox-padding-y: var(--dimensions-05);
838
+ --form-checkbox-radio-card-checkbox-indicator-padding-y: var(--dimensions-07);
839
+ --form-checkbox-radio-card-radio-icon-padding-y: var(--dimensions-04);
840
+ --form-checkbox-radio-card-radio-padding-x: var(--form-checkbox-radio-card-checkbox-padding-y);
841
+ --form-checkbox-radio-card-radio-padding-y: var(--dimensions-05);
842
+ --form-checkbox-radio-card-radio-indicator-padding-y: var(--dimensions-06);
843
+ --form-checkbox-radio-indicator-container-height: var(--dimensions-13);
844
+ --form-checkbox-radio-indicator-radius-checkbox: var(--dimensions-02);
845
+ --form-checkbox-radio-indicator-radius-radio: var(--radius-08);
846
+ --form-checkbox-radio-size-fixed: var(--dimensions-11);
847
+ --form-checkbox-radio-size-responsive: var(--dimensions-11);
848
+ --form-checkbox-radio-size-large: var(--dimensions-13);
849
+ --form-checkbox-radio-subitem-padding-left: var(--dimensions-14);
850
+ --form-field-inner-spacing-sm: var(--dimensions-03);
851
+ --form-field-outer-spacing: var(--dimensions-03);
852
+ --form-field-radius: var(--card-radius-rounded);
853
+ --form-field-inner-spacing: var(--dimensions-05);
854
+ --form-field-button-height-sm: var(--dimensions-13);
855
+ --form-field-button-height: var(--dimensions-14);
856
+ --form-field-height-sm: var(--dimensions-14);
857
+ --form-field-height: var(--dimensions-16);
858
+ --form-field-padding-x-md-default: var(--dimensions-05);
859
+ --form-field-padding-x-lg: var(--dimensions-10);
860
+ --form-field-padding-y-xxs: var(--dimensions-00);
861
+ --form-field-padding-y-xs: var(--dimensions-02);
862
+ --form-field-padding-y-md-has-button: var(--dimensions-03);
863
+ --form-field-padding-y-sm: var(--dimensions-03);
864
+ --form-field-padding-y-sm-has-button: var(--dimensions-03);
865
+ --form-field-padding-y-md-default: var(--dimensions-05);
866
+ --form-field-padding-y-lg: var(--dimensions-10);
867
+ --form-number-input-min-width: var(--dimensions-22);
868
+ --form-number-min-width: 10.1875rem;
869
+ --form-select-area-radius: var(--radius-02-default);
870
+ --form-select-area-max-height: 18.75rem;
871
+ --form-slider-radius: var(--radius-02-default);
872
+ --form-slider-height: var(--dimensions-05);
873
+ --form-slider-inner-spacing: var(--dimensions-07);
874
+ --form-slider-thumb-size: var(--dimensions-13);
875
+ --form-textarea-min-height: 8.5rem;
876
+ --form-toggl-padding: var(--dimensions-02);
877
+ --form-toggl-radius: var(--radius-04);
878
+ --form-toggl-default-margin-y: var(--dimensions-02);
879
+ --form-toggl-default-indicator: var(--dimensions-10);
880
+ --form-toggl-default-height: 1.25rem;
881
+ --form-toggl-default-width: var(--dimensions-16);
882
+ --form-toggl-large-indicator: 1.5rem;
883
+ --form-toggl-large-height: 1.75rem;
884
+ --form-toggl-large-width: 3.5rem;
885
+ --general-selected-border-width: var(--borders-02);
886
+ --icon-00: var(--dimensions-05);
887
+ --icon-01: var(--dimensions-07);
888
+ --icon-02: var(--dimensions-10);
889
+ --icon-03: var(--dimensions-11);
890
+ --icon-04: var(--dimensions-12);
891
+ --icon-05: var(--dimensions-13);
892
+ --icon-06: var(--dimensions-15);
893
+ --icon-07: var(--dimensions-18);
894
+ --icon-background-padding-sm: var(--dimensions-05);
895
+ --icon-background-padding-lg: var(--dimensions-07);
896
+ --icon-background-radius: var(--radius-08);
897
+ --layout-page-spacing-top: var(--dimensions-13);
898
+ --layout-page-spacing-x: 2.5rem;
899
+ --layout-common-device-height: 67.5rem;
900
+ --layout-common-device-width: 120rem;
901
+ --layout-container-max-width-xs: 33.75rem;
902
+ --layout-container-max-width-sm: 45rem;
903
+ --layout-container-max-width-md: 60rem;
904
+ --layout-container-max-width-lg: 71.25rem;
905
+ --layout-container-max-width-xl: 82.5rem;
906
+ --layout-container-max-width-xxl: 90rem;
907
+ --layout-footer-item-vertical-spacing: var(--dimensions-05);
908
+ --layout-footer-padding-x: var(--dimensions-16);
909
+ --layout-footer-padding-y: var(--dimensions-16);
910
+ --layout-footer-bottom-padding-y: var(--dimensions-05);
911
+ --layout-footer-bottom-padding-x: var(--layout-page-spacing-x);
912
+ --layout-footer-col-padding-x: var(--dimensions-07);
913
+ --layout-grid-column-gutter: var(--dimensions-13);
914
+ --layout-grid-column-offset: 2.5rem;
915
+ --layout-grid-column-width: 29rem;
916
+ --layout-grid-gutters-02: var(--dimensions-02);
917
+ --layout-grid-gutters-04: var(--dimensions-03);
918
+ --layout-grid-gutters-08: var(--dimensions-05);
919
+ --layout-grid-gutters-12: var(--dimensions-07);
920
+ --layout-grid-gutters-16: var(--dimensions-10);
921
+ --layout-grid-gutters-24: var(--dimensions-13);
922
+ --layout-grid-gutters-32: var(--dimensions-14);
923
+ --layout-grid-gutters-48: var(--dimensions-18);
924
+ --layout-header-padding-y-sm: var(--dimensions-07);
925
+ --layout-header-padding-y: var(--dimensions-10);
926
+ --layout-header-padding-left: var(--dimensions-13);
927
+ --layout-header-padding-right: var(--dimensions-13);
928
+ --layout-header-profile-icon: var(--icon-06);
929
+ --layout-header-mobile-button-size: var(--dimensions-19);
930
+ --layout-header-min-height: 5.25rem;
931
+ --layout-header-items-right-gutter-x: var(--dimensions-13);
932
+ --layout-header-items-center-gutter-x: var(--dimensions-18);
933
+ --layout-header-modal-item-padding: var(--dimensions-10);
934
+ --link-icon-padding-top: var(--dimensions-02);
935
+ --link-icon-padding-y: var(--dimensions-03);
936
+ --link-inner-spacing-x: var(--dimensions-03);
937
+ --link-link-sm-height: var(--body-regular-line-height);
938
+ --list-icon-padding-y: var(--dimensions-05);
939
+ --list-icon-size: var(--icon-00);
940
+ --list-inner-spacing-x: var(--dimensions-05);
941
+ --list-list-item-margin-y: var(--dimensions-05);
942
+ --list-padding-left-level-1: var(--dimensions-10);
943
+ --list-padding-left-level-2: var(--dimensions-14);
944
+ --list-padding-left-level-3: var(--dimensions-18);
945
+ --loader-skeleton-radius: var(--radius-02-default);
946
+ --loader-skeleton-inner-spacing-y: var(--dimensions-10);
947
+ --loader-skeleton-height-100: 1.5rem;
948
+ --loader-skeleton-height-200: 2rem;
949
+ --loader-skeleton-height-300: 2.25rem;
950
+ --loader-skeleton-height-400: 2.875rem;
951
+ --loader-skeleton-height-500: 6.25rem;
952
+ --loader-spinner-page-spacing-top: var(--dimensions-22);
953
+ --loader-spinner-sizing-sm: var(--dimensions-06);
954
+ --loader-spinner-sizing-md: var(--dimensions-10);
955
+ --loader-spinner-sizing-lg: var(--dimensions-18);
956
+ --modal-radius: var(--card-radius-rounded);
957
+ --modal-top-margin: 7.5rem;
958
+ --modal-body-padding-sm: var(--modal-heading-padding-x-sm);
959
+ --modal-body-padding: var(--dimensions-13);
960
+ --modal-footer-padding-y-sm: var(--dimensions-05);
961
+ --modal-footer-padding-x-sm: var(--modal-heading-padding-x-sm);
962
+ --modal-footer-padding-y: var(--dimensions-10);
963
+ --modal-footer-padding-x: var(--dimensions-13);
964
+ --modal-heading-padding-y-sm: var(--dimensions-05);
965
+ --modal-heading-padding-x-sm: var(--dimensions-10);
966
+ --modal-heading-padding-y: var(--dimensions-10);
967
+ --modal-heading-padding-x: var(--dimensions-13);
968
+ --modal-max-width-xs: var(--containers-05);
969
+ --modal-max-width-sm: var(--containers-08);
970
+ --modal-max-width-md: var(--containers-09);
971
+ --modal-max-width-lg: var(--containers-11);
972
+ --modal-max-width-xl: var(--containers-13);
973
+ --pagination-padding-y: 0.75rem;
974
+ --pagination-padding-x: 0.875rem;
975
+ --pagination-button-size: var(--button-xs-icon-size);
976
+ --popover-padding-xs: var(--card-padding-xs);
977
+ --popover-padding-sm: var(--card-padding-md-default);
978
+ --popover-padding-md: var(--card-padding-lg);
979
+ --popover-radius-rounded: var(--card-radius-rounded);
980
+ --popover-width-01: var(--containers-02);
981
+ --popover-width-02: var(--containers-06);
982
+ --popover-width-03: var(--containers-10);
983
+ --progress-bar-height-sm: var(--dimensions-03);
984
+ --progress-bar-radius: var(--form-slider-radius);
985
+ --progress-bar-height: var(--form-slider-height);
986
+ --separator-spacing-y-01: var(--dimensions-03);
987
+ --separator-spacing-x-01: var(--dimensions-04);
988
+ --separator-spacing-y-02: var(--dimensions-05);
989
+ --separator-spacing-x-02: var(--dimensions-07);
990
+ --separator-spacing-y-03: var(--dimensions-10);
991
+ --separator-spacing-x-03: var(--dimensions-13);
992
+ --separator-spacing-y-04: var(--dimensions-13);
993
+ --separator-dotted-line-width: var(--dimensions-01);
994
+ --separator-dotted-dot-xs: var(--dimensions-02);
995
+ --separator-dotted-dot-sm: var(--dimensions-03);
996
+ --separator-dotted-dot-md: 0.5625rem;
997
+ --separator-dotted-dot-lg: 0.9375rem;
998
+ --separator-top-spacing-large-dot-sm: var(--dimensions-03);
999
+ --separator-top-spacing-large-dot-md: 0.9688rem;
1000
+ --separator-top-spacing-large-dot-lg: 1.3125rem;
1001
+ --separator-top-spacing-small-dot-sm: var(--dimensions-05);
1002
+ --separator-top-spacing-small-dot-md: var(--dimensions-06);
1003
+ --separator-top-spacing-small-dot-lg: var(--dimensions-13);
1004
+ --side-navigation-text-size-sm: var(--body-small-regular-size);
1005
+ --side-navigation-text-size: var(--body-regular-size);
1006
+ --side-navigation-item-inner-spacing-sm: var(--dimensions-05);
1007
+ --side-navigation-item-padding-x-sm: var(--dimensions-05);
1008
+ --side-navigation-item-padding-y-sm: var(--dimensions-05);
1009
+ --side-navigation-item-padding-y: var(--dimensions-07);
1010
+ --side-navigation-item-inner-spacing: var(--dimensions-10);
1011
+ --side-navigation-item-padding-left-level-1: var(--dimensions-10);
1012
+ --side-navigation-item-padding-left-level-2: var(--dimensions-10);
1013
+ --side-navigation-item-padding-right: var(--dimensions-10);
1014
+ --side-navigation-item-padding-y-md: var(--dimensions-10);
1015
+ --side-navigation-item-icon-sm: var(--icon-03);
1016
+ --side-navigation-item-icon-md: var(--icon-04);
1017
+ --side-navigation-item-icon: var(--icon-05);
1018
+ --side-navigation-item-min-height-small: var(--dimensions-16);
1019
+ --side-navigation-item-min-height-medium: var(--dimensions-19);
1020
+ --side-navigation-item-min-height-large: var(--dimensions-21);
1021
+ --side-navigation-item-width-collapsed: 6rem;
1022
+ --side-navigation-item-width-default: 15rem;
1023
+ --status-indicator-inner-spacing: var(--dimensions-05);
1024
+ --status-indicator-sm: var(--dimensions-05);
1025
+ --status-indicator-lg: var(--dimensions-07);
1026
+ --stepper-item-horizontal-inner-spacing: var(--dimensions-05);
1027
+ --stepper-item-horizontal-padding-y: var(--dimensions-05);
1028
+ --stepper-item-horizontal-padding-x: var(--dimensions-10);
1029
+ --stepper-item-horizontal-min-height: var(--dimensions-16);
1030
+ --stepper-item-vertical-padding-y-sm: 0.125rem;
1031
+ --stepper-item-vertical-line-height: 0.375rem;
1032
+ --stepper-item-vertical-sub-line-bottom: 0.5625rem;
1033
+ --stepper-item-vertical-sub-line-top: 0.5938rem;
1034
+ --stepper-item-vertical-compact-padding-top: 0.1875rem;
1035
+ --stepper-item-vertical-compact-inner-spacing: var(--dimensions-04);
1036
+ --stepper-item-vertical-compact-sub-item-indicator-width: var(--dimensions-10);
1037
+ --stepper-item-vertical-compact-min-height-first-item: 1.8125rem;
1038
+ --stepper-item-vertical-compact-min-height: 2rem;
1039
+ --stepper-item-vertical-lg-inner-spacing: var(--dimensions-05);
1040
+ --stepper-item-vertical-lg-padding-top: 0.5rem;
1041
+ --stepper-item-vertical-lg-sub-item-indicator-width: var(--dimensions-13);
1042
+ --stepper-item-vertical-lg-min-height-first-item: 2rem;
1043
+ --stepper-item-vertical-lg-min-height: 2.5rem;
1044
+ --stepper-item-vertical-step-size-sm: var(--separator-dotted-dot-md);
1045
+ --stepper-item-vertical-step-size-md: 1rem;
1046
+ --stepper-item-vertical-step-size-lg: 1.5rem;
1047
+ --tab-top-radius: var(--card-radius-rounded);
1048
+ --tab-inner-spacing: var(--dimensions-05);
1049
+ --tab-spacing-x: var(--dimensions-10);
1050
+ --tab-spacing-y: var(--tab-spacing-x);
1051
+ --tab-icon: 1.125rem;
1052
+ --table-radius: var(--radius-02-default);
1053
+ --table-of-contents-padding-left-level-1: var(--dimensions-10);
1054
+ --table-of-contents-padding-left-level-2: var(--dimensions-14);
1055
+ --table-of-contents-width: var(--containers-04);
1056
+ --table-data-padding-y-sm: 0.25rem;
1057
+ --table-data-padding-x-sm: 0.5rem;
1058
+ --table-data-padding-y: 0.75rem;
1059
+ --table-data-padding-x: 0.875rem;
1060
+ --table-header-padding-x-sm: 0.5rem;
1061
+ --table-header-padding-y: 0.75rem;
1062
+ --table-header-padding-y-sm: 0.75rem;
1063
+ --table-header-padding-x: 0.875rem;
1064
+ --tag-default-padding-y: var(--dimensions-02);
1065
+ --tag-default-padding-x: var(--dimensions-03);
1066
+ --tag-default-radius: var(--radius-02-default);
1067
+ --tag-default-loader-padding-y: var(--dimensions-04);
1068
+ --tag-status-icon-padding-x: var(--dimensions-03);
1069
+ --tag-status-icon-padding-y: var(--dimensions-03);
1070
+ --tag-status-large-padding-x: var(--dimensions-05);
1071
+ --tag-status-large-padding-y: var(--dimensions-05);
1072
+ --tag-status-large-min-width: var(--dimensions-21);
1073
+ --text-group-label-width-sm: 8.25rem;
1074
+ --text-group-label-width-md: 10.25rem;
1075
+ --text-group-label-width-lg: 12.25rem;
1076
+ --text-group-value-inner-spacing: var(--dimensions-04);
1077
+ --text-group-value-icon-padding-top: var(--dimensions-03);
1078
+ --timeline-padding-y: var(--dimensions-05);
1079
+ --timeline-text-min-height: var(--dimensions-13);
1080
+ --timeline-date-container-width: 6.5625rem;
1081
+ --toast-margin-left: var(--dimensions-00);
1082
+ --toast-inner-spacing-y: var(--alert-default-inner-spacing-y);
1083
+ --toast-outer-spacing: var(--dimensions-03);
1084
+ --toast-margin-bottom: var(--dimensions-10);
1085
+ --toast-margin-right: var(--dimensions-10);
1086
+ --toast-padding-y: var(--alert-default-padding-y);
1087
+ --toast-padding-x: var(--alert-default-padding-x);
1088
+ --toast-width: var(--containers-03);
1089
+ --tooltip-radius: var(--card-radius-rounded);
1090
+ --tooltip-padding-x: var(--card-padding-xs);
1091
+ --tooltip-padding-y: var(--tooltip-padding-x);
1092
+ --tooltip-max-width: var(--containers-02);
1093
+ }
1236
1094
  }