@muraldevkit/ds-foundation 2.26.0 → 2.28.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.
- package/dist/TOKENS.md +752 -0
- package/dist/foundation.css +139 -75
- package/dist/foundation.css.map +1 -1
- package/dist/foundation.min.css +1 -1
- package/dist/foundation.min.css.map +1 -1
- package/dist/tokens/contextual-variables/border.json +6 -6
- package/dist/tokens/contextual-variables/color.json +48 -48
- package/dist/tokens/contextual-variables/typography.json +19 -16
- package/dist/tokens/global-variables/typography.json +5 -5
- package/package.json +1 -1
- package/src/styles/_tokens.scss +165 -75
package/dist/foundation.css
CHANGED
|
@@ -226,17 +226,17 @@
|
|
|
226
226
|
--mrl-letter-spacing-03: 0%; /** Letter spacing token. */
|
|
227
227
|
--mrl-letter-spacing-04: 1%; /** Letter spacing token. */
|
|
228
228
|
--mrl-letter-spacing-05: 2%; /** Letter spacing token. */
|
|
229
|
-
--mrl-font-weight-01: 400; /** Font weight token. */
|
|
230
|
-
--mrl-font-weight-02: 500; /** Font weight token. */
|
|
231
|
-
--mrl-font-weight-03: 600; /** Font weight token. */
|
|
232
|
-
--mrl-font-weight-04: 700; /** Font weight token. */
|
|
233
|
-
--mrl-font-weight-05: 800; /** Font weight token. */
|
|
229
|
+
--mrl-font-weight-01: 400; /** Regular. Font weight token. */
|
|
230
|
+
--mrl-font-weight-02: 500; /** Medium. Font weight token. */
|
|
231
|
+
--mrl-font-weight-03: 600; /** Semi-bold. Font weight token. */
|
|
232
|
+
--mrl-font-weight-04: 700; /** Bold. Font weight token. */
|
|
233
|
+
--mrl-font-weight-05: 800; /** Extra-bold. Font weight token. */
|
|
234
234
|
--mrl-line-width-border-fine: 1px; /** Fine border width. No global stroke token for 1px, so this is hard-coded. */
|
|
235
235
|
--mrl-color-background-page: rgb(
|
|
236
236
|
243,
|
|
237
237
|
245,
|
|
238
238
|
246
|
|
239
|
-
); /**
|
|
239
|
+
); /** This is an intentional one-off contextual token that does not use our standard color scales. It should only be used as the background color for non-canvas pages. */
|
|
240
240
|
--mrl-space-offset-focus: 1px; /** Focus ring offset. No global spacing token for 1px, so this is hard-coded. */
|
|
241
241
|
--mrl-space-inset-control-small: calc(
|
|
242
242
|
10 / var(--mrl-baseline) * 1rem
|
|
@@ -255,18 +255,26 @@
|
|
|
255
255
|
--mrl-line-width-focus: var(--mrl-stroke-01); /** Focus ring width. */
|
|
256
256
|
--mrl-line-width-control: var(--mrl-stroke-01); /** Border width for controls. */
|
|
257
257
|
--mrl-line-width-divider: var(--mrl-stroke-01); /** Width for divider lines. */
|
|
258
|
-
--mrl-border-radius-tight: var(
|
|
259
|
-
|
|
258
|
+
--mrl-border-radius-tight: var(
|
|
259
|
+
--mrl-radii-01
|
|
260
|
+
); /** When the content has tight spacing considerations. */
|
|
261
|
+
--mrl-border-radius-content: var(--mrl-radii-02); /** For elements that are static content. */
|
|
260
262
|
--mrl-border-radius-content-large: var(--mrl-radii-03); /** Large content corner radius. */
|
|
261
|
-
--mrl-border-radius-functional: var(
|
|
263
|
+
--mrl-border-radius-functional: var(
|
|
264
|
+
--mrl-radii-03
|
|
265
|
+
); /** For interactive elements. If a component can be both static and functional (e.g., Avatars), use the functional token over the "Content" token. */
|
|
262
266
|
--mrl-border-radius-functional-large: var(
|
|
263
267
|
--mrl-radii-04
|
|
264
268
|
); /** Large corner radius for functional elements. */
|
|
265
|
-
--mrl-border-radius-container: var(
|
|
269
|
+
--mrl-border-radius-container: var(
|
|
270
|
+
--mrl-radii-04
|
|
271
|
+
); /** For components/elements that are shells, meaning that the element itself doesn't typically know or care what the child elements are and simply provide a bounding element, for example, drawers, popovers, etc. */
|
|
266
272
|
--mrl-border-radius-container-large: var(
|
|
267
273
|
--mrl-radii-05
|
|
268
|
-
); /**
|
|
269
|
-
--mrl-border-radius-rounded: var(
|
|
274
|
+
); /** For components/elements that are large, shell containers (e.g., modals or other near full-page elements). */
|
|
275
|
+
--mrl-border-radius-rounded: var(
|
|
276
|
+
--mrl-radii-07
|
|
277
|
+
); /** For components/elements that intentionally have an overly rounded appearance. Special note for elements that are pure circles (e.g. spinner, radio button, etc.), in these cases use a component token overwrite to make it 100% rounded. */
|
|
270
278
|
--mrl-border-radius-rounded-large: var(--mrl-radii-08); /** Large rounded corner radius. */
|
|
271
279
|
--mrl-color-focus: rgba(var(--mrl-blue-70), 1); /** Focus ring on interactive elements. */
|
|
272
280
|
--mrl-color-focus-inverse: rgba(
|
|
@@ -310,39 +318,39 @@
|
|
|
310
318
|
--mrl-color-background-info: rgba(
|
|
311
319
|
var(--mrl-status-info),
|
|
312
320
|
1
|
|
313
|
-
); /**
|
|
321
|
+
); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
|
|
314
322
|
--mrl-color-background-info-light: rgba(
|
|
315
323
|
var(--mrl-status-info-light),
|
|
316
324
|
1
|
|
317
|
-
); /**
|
|
325
|
+
); /** Use for background of inline block notifications and badges. */
|
|
318
326
|
--mrl-color-background-success: rgba(
|
|
319
327
|
var(--mrl-status-success),
|
|
320
328
|
1
|
|
321
|
-
); /**
|
|
329
|
+
); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
|
|
322
330
|
--mrl-color-background-success-light: rgba(
|
|
323
331
|
var(--mrl-status-success-light),
|
|
324
332
|
1
|
|
325
|
-
); /**
|
|
333
|
+
); /** Use for background of inline block notifications and badges. */
|
|
326
334
|
--mrl-color-background-warning: rgba(
|
|
327
335
|
var(--mrl-status-warning),
|
|
328
336
|
1
|
|
329
|
-
); /**
|
|
337
|
+
); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
|
|
330
338
|
--mrl-color-background-warning-light: rgba(
|
|
331
339
|
var(--mrl-status-warning-light),
|
|
332
340
|
1
|
|
333
|
-
); /**
|
|
341
|
+
); /** Use for background of inline block notifications and badges. */
|
|
334
342
|
--mrl-color-background-error: rgba(
|
|
335
343
|
var(--mrl-status-error),
|
|
336
344
|
1
|
|
337
|
-
); /**
|
|
345
|
+
); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. */
|
|
338
346
|
--mrl-color-background-error-light: rgba(
|
|
339
347
|
var(--mrl-status-error-light),
|
|
340
348
|
1
|
|
341
|
-
); /**
|
|
349
|
+
); /** Use for background of inline block notifications and badges. */
|
|
342
350
|
--mrl-color-background-private: rgba(
|
|
343
351
|
var(--mrl-gray-100),
|
|
344
352
|
1
|
|
345
|
-
); /**
|
|
353
|
+
); /** Use for all use cases where we denote a status and there is a colored background. Use --mrl-color-text-inverse with these background colors. The private variable is deprecated and will be removed in v2. */
|
|
346
354
|
--mrl-color-background-inverse: rgba(
|
|
347
355
|
var(--mrl-gray-100),
|
|
348
356
|
1
|
|
@@ -350,35 +358,44 @@
|
|
|
350
358
|
--mrl-color-background-inverse-hover: rgba(
|
|
351
359
|
var(--mrl-gray-90),
|
|
352
360
|
1
|
|
353
|
-
); /**
|
|
361
|
+
); /** Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. */
|
|
354
362
|
--mrl-color-background-disabled: rgba(
|
|
355
363
|
var(--mrl-gray-40),
|
|
356
364
|
1
|
|
357
|
-
); /**
|
|
358
|
-
--mrl-color-line: rgba(var(--mrl-gray-70), 1); /**
|
|
359
|
-
--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /**
|
|
360
|
-
--mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /**
|
|
361
|
-
--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1); /**
|
|
362
|
-
--mrl-color-line-disabled: rgba(
|
|
365
|
+
); /** Use only when there is a background on a disabled element and the text used would be --mrl-color-text-inverse. In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. */
|
|
366
|
+
--mrl-color-line: rgba(var(--mrl-gray-70), 1); /** Use with the Base style set. */
|
|
367
|
+
--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /** Use with the Base style set. */
|
|
368
|
+
--mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /** Use with the Base style set. */
|
|
369
|
+
--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1); /** Use with the Base style set. */
|
|
370
|
+
--mrl-color-line-disabled: rgba(
|
|
371
|
+
var(--mrl-gray-40),
|
|
372
|
+
1
|
|
373
|
+
); /** In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. */
|
|
363
374
|
--mrl-color-line-secondary: rgba(var(--mrl-gray-30), 1); /** Secondary line color. */
|
|
364
375
|
--mrl-color-line-decorative: rgba(
|
|
365
376
|
var(--mrl-blue-20),
|
|
366
377
|
1
|
|
367
378
|
); /** Line color for decorative, non-interactive surfaces. */
|
|
368
|
-
--mrl-color-line-divider: rgba(
|
|
379
|
+
--mrl-color-line-divider: rgba(
|
|
380
|
+
var(--mrl-gray-20),
|
|
381
|
+
1
|
|
382
|
+
); /** Design calls this Light but we want a more semantic name in the code base. */
|
|
369
383
|
--mrl-color-line-divider-inverse: rgba(
|
|
370
384
|
var(--mrl-gray-80),
|
|
371
385
|
1
|
|
372
|
-
); /**
|
|
373
|
-
--mrl-color-line-emph: rgba(
|
|
386
|
+
); /** Design calls this Dark but we want a more semantic name in the code base. This is intended for use on dark or saturated backgrounds. */
|
|
387
|
+
--mrl-color-line-emph: rgba(
|
|
388
|
+
var(--mrl-gray-20),
|
|
389
|
+
1
|
|
390
|
+
); /** Use with the Base with Emphasis style set. */
|
|
374
391
|
--mrl-color-line-emph-hover: rgba(
|
|
375
392
|
var(--mrl-gray-90),
|
|
376
393
|
1
|
|
377
|
-
); /**
|
|
394
|
+
); /** Use with the Base with Emphasis style set. */
|
|
378
395
|
--mrl-color-line-emph-active: rgba(
|
|
379
396
|
var(--mrl-black),
|
|
380
397
|
1
|
|
381
|
-
); /**
|
|
398
|
+
); /** Use with the Base with Emphasis style set. */
|
|
382
399
|
--mrl-color-line-inverse: rgba(var(--mrl-white), 1); /** Line color on inverse surfaces. */
|
|
383
400
|
--mrl-color-line-inverse-disabled: rgba(
|
|
384
401
|
var(--mrl-white),
|
|
@@ -390,57 +407,87 @@
|
|
|
390
407
|
--mrl-color-icon-emph-selected: rgba(
|
|
391
408
|
var(--mrl-gray-100),
|
|
392
409
|
1
|
|
393
|
-
); /**
|
|
410
|
+
); /** Used when there is an icon and you're following the Base with Emphasis style set. For all other states, the icon is the same color as the text. */
|
|
394
411
|
--mrl-color-input-icon-default: rgba(
|
|
395
412
|
var(--mrl-gray-70),
|
|
396
413
|
1
|
|
397
414
|
); /** Default icon color inside form inputs. */
|
|
398
|
-
--mrl-color-text: rgba(var(--mrl-gray-80), 1); /**
|
|
399
|
-
--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1); /**
|
|
400
|
-
--mrl-color-text-active: rgba(var(--mrl-gray-90), 1); /**
|
|
401
|
-
--mrl-color-text-selected: rgba(var(--mrl-gray-100), 1); /**
|
|
402
|
-
--mrl-color-text-disabled: rgba(
|
|
415
|
+
--mrl-color-text: rgba(var(--mrl-gray-80), 1); /** Use for the Base style set. */
|
|
416
|
+
--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1); /** Use for the Base style set. */
|
|
417
|
+
--mrl-color-text-active: rgba(var(--mrl-gray-90), 1); /** Use for the Base style set. */
|
|
418
|
+
--mrl-color-text-selected: rgba(var(--mrl-gray-100), 1); /** Use for the Base style set. */
|
|
419
|
+
--mrl-color-text-disabled: rgba(
|
|
420
|
+
var(--mrl-gray-40),
|
|
421
|
+
1
|
|
422
|
+
); /** In the product the current usage aligns to --mrl-gray-50 but Design provided new guidelines for all future work. */
|
|
403
423
|
--mrl-color-text-disabled-inverse: rgba(
|
|
404
424
|
var(--mrl-white),
|
|
405
425
|
1
|
|
406
|
-
); /**
|
|
407
|
-
--mrl-color-text-emph: rgba(
|
|
426
|
+
); /** Use when the background of the element uses --mrl-color-background-disabled. */
|
|
427
|
+
--mrl-color-text-emph: rgba(
|
|
428
|
+
var(--mrl-gray-90),
|
|
429
|
+
1
|
|
430
|
+
); /** Use for the Base with Emphasis style set. */
|
|
408
431
|
--mrl-color-text-emph-hover: rgba(
|
|
409
432
|
var(--mrl-gray-90),
|
|
410
433
|
1
|
|
411
|
-
); /**
|
|
434
|
+
); /** Use for the Base with Emphasis style set. */
|
|
412
435
|
--mrl-color-text-emph-active: rgba(
|
|
413
436
|
var(--mrl-black),
|
|
414
437
|
1
|
|
415
|
-
); /**
|
|
416
|
-
--mrl-color-text-inverse: rgba(
|
|
438
|
+
); /** Use for the Base with Emphasis style set. */
|
|
439
|
+
--mrl-color-text-inverse: rgba(
|
|
440
|
+
var(--mrl-white),
|
|
441
|
+
1
|
|
442
|
+
); /** Use for Inverse or any saturated background color, such as statuses. */
|
|
417
443
|
--mrl-color-text-inverse-secondary: rgba(
|
|
418
444
|
var(--mrl-gray-10),
|
|
419
445
|
1
|
|
420
|
-
); /**
|
|
421
|
-
--mrl-color-text-inverse-hover: rgba(
|
|
446
|
+
); /** Use for Inverse or any saturated background color, such as statuses. This should only be used when there are multiple text colors within a single element. If there is only one color, always use --mrl-color-text-inverse to create consistency. */
|
|
447
|
+
--mrl-color-text-inverse-hover: rgba(
|
|
448
|
+
var(--mrl-white),
|
|
449
|
+
1
|
|
450
|
+
); /** Use for Inverse or any saturated background color, such as statuses. */
|
|
422
451
|
--mrl-color-text-inverse-active: rgba(
|
|
423
452
|
var(--mrl-white),
|
|
424
453
|
1
|
|
425
|
-
); /** Inverse
|
|
454
|
+
); /** Use for Inverse or any saturated background color, such as statuses. */
|
|
426
455
|
--mrl-color-text-inverse-selected: rgba(
|
|
427
456
|
var(--mrl-white),
|
|
428
457
|
1
|
|
429
|
-
); /** Inverse
|
|
430
|
-
--mrl-color-text-secondary: rgba(
|
|
431
|
-
|
|
432
|
-
|
|
458
|
+
); /** Use for Inverse or any saturated background color, such as statuses. */
|
|
459
|
+
--mrl-color-text-secondary: rgba(
|
|
460
|
+
var(--mrl-gray-70),
|
|
461
|
+
1
|
|
462
|
+
); /** Use for static text only; if you're working on an interactive element, use one of the defined style sets. This is also used for placeholder text within form elements. */
|
|
463
|
+
--mrl-color-text-label: rgba(
|
|
464
|
+
var(--mrl-gray-100),
|
|
465
|
+
1
|
|
466
|
+
); /** Use for static text only; if you're working on an interactive element, use one of the defined style sets. */
|
|
467
|
+
--mrl-color-text-heading: rgba(
|
|
468
|
+
var(--mrl-gray-100),
|
|
469
|
+
1
|
|
470
|
+
); /** Use for static text only; if you're working on an interactive element, use one of the defined style sets. */
|
|
433
471
|
--mrl-color-text-success: rgba(
|
|
434
472
|
var(--mrl-status-success),
|
|
435
473
|
1
|
|
436
|
-
); /**
|
|
437
|
-
--mrl-color-text-warning: rgba(
|
|
474
|
+
); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
|
|
475
|
+
--mrl-color-text-warning: rgba(
|
|
476
|
+
var(--mrl-gray-90),
|
|
477
|
+
1
|
|
478
|
+
); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
|
|
438
479
|
--mrl-color-text-warning-light: rgba(
|
|
439
480
|
var(--mrl-gray-80),
|
|
440
481
|
1
|
|
441
482
|
); /** Text color for light-warning messages. */
|
|
442
|
-
--mrl-color-text-error: rgba(
|
|
443
|
-
|
|
483
|
+
--mrl-color-text-error: rgba(
|
|
484
|
+
var(--mrl-status-error),
|
|
485
|
+
1
|
|
486
|
+
); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
|
|
487
|
+
--mrl-color-text-info: rgba(
|
|
488
|
+
var(--mrl-status-info),
|
|
489
|
+
1
|
|
490
|
+
); /** Use when the background is white/transparent only; for elements with a status color background use --mrl-color-text-inverse. */
|
|
444
491
|
--mrl-color-text-private: rgba(var(--mrl-gray-100), 1); /** Text color for private content. */
|
|
445
492
|
--mrl-color-background-hover: var(--mrl-black-opacity-00); /** Hover overlay. */
|
|
446
493
|
--mrl-color-background-inverse-hover-opacity: var(
|
|
@@ -509,30 +556,47 @@
|
|
|
509
556
|
); /** Horizontal spacing between closely placed sibling elements. */
|
|
510
557
|
--mrl-space-gutter: var(--mrl-spacing-04); /** Default grid/layout gutter. */
|
|
511
558
|
--mrl-space-gutter-label: var(--mrl-spacing-05); /** Gutter spacing around labels. */
|
|
512
|
-
--mrl-body-font: var(--mrl-font-family-01), sans-serif;
|
|
513
|
-
--mrl-heading-font: var(--mrl-font-family-01), sans-serif;
|
|
514
|
-
--mrl-heading-font-alt:
|
|
515
|
-
|
|
516
|
-
--mrl-type-size-display
|
|
517
|
-
|
|
518
|
-
|
|
559
|
+
--mrl-body-font: var(--mrl-font-family-01), sans-serif; /** Used for all body copy. */
|
|
560
|
+
--mrl-heading-font: var(--mrl-font-family-01), sans-serif; /** Used for most headings. */
|
|
561
|
+
--mrl-heading-font-alt:
|
|
562
|
+
var(--mrl-font-family-02), serif; /** Used for headings with kind="display". */
|
|
563
|
+
--mrl-type-size-display: var(
|
|
564
|
+
--mrl-font-size-08
|
|
565
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-font-size-09. */
|
|
566
|
+
--mrl-type-size-display-large: var(
|
|
567
|
+
--mrl-font-size-09
|
|
568
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-font-size-10. */
|
|
569
|
+
--mrl-type-size-display-small: var(
|
|
570
|
+
--mrl-font-size-07
|
|
571
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-font-size-08. */
|
|
572
|
+
--mrl-type-size-display-xsmall: var(
|
|
573
|
+
--mrl-font-size-06
|
|
574
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-font-size-07. */
|
|
519
575
|
--mrl-type-size-headline: var(--mrl-font-size-06); /** Contextual typography token. */
|
|
520
|
-
--mrl-type-size-headline-large: var(
|
|
576
|
+
--mrl-type-size-headline-large: var(
|
|
577
|
+
--mrl-font-size-06
|
|
578
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-font-size-07. */
|
|
521
579
|
--mrl-type-size-headline-small: var(--mrl-font-size-04); /** Contextual typography token. */
|
|
522
580
|
--mrl-type-size-text: var(--mrl-font-size-04); /** Contextual typography token. */
|
|
523
581
|
--mrl-type-size-text-large: var(--mrl-font-size-05); /** Contextual typography token. */
|
|
524
582
|
--mrl-type-size-text-small: var(--mrl-font-size-03); /** Contextual typography token. */
|
|
525
583
|
--mrl-type-size-text-xsmall: var(--mrl-font-size-02); /** Contextual typography token. */
|
|
526
584
|
--mrl-type-size-text-xxsmall: var(--mrl-font-size-01); /** Contextual typography token. */
|
|
527
|
-
--mrl-type-line-height-title: var(
|
|
528
|
-
|
|
529
|
-
|
|
585
|
+
--mrl-type-line-height-title: var(
|
|
586
|
+
--mrl-line-height-05
|
|
587
|
+
); /** The title use case follows the same line-height scale as text. */
|
|
588
|
+
--mrl-type-line-height-title-large: var(
|
|
589
|
+
--mrl-line-height-06
|
|
590
|
+
); /** The title use case follows the same line-height scale as text. */
|
|
591
|
+
--mrl-type-line-height-title-small: var(
|
|
592
|
+
--mrl-line-height-08
|
|
593
|
+
); /** The title use case follows the same line-height scale as text. */
|
|
530
594
|
--mrl-type-line-height-title-xsmall: var(
|
|
531
595
|
--mrl-line-height-06
|
|
532
|
-
); /**
|
|
596
|
+
); /** The title use case follows the same line-height scale as text. */
|
|
533
597
|
--mrl-type-line-height-title-xxsmall: var(
|
|
534
598
|
--mrl-line-height-06
|
|
535
|
-
); /**
|
|
599
|
+
); /** The title use case follows the same line-height scale as text. */
|
|
536
600
|
--mrl-type-line-height-display: var(--mrl-line-height-02); /** Contextual typography token. */
|
|
537
601
|
--mrl-type-line-height-display-large: var(
|
|
538
602
|
--mrl-line-height-02
|
|
@@ -546,10 +610,10 @@
|
|
|
546
610
|
--mrl-type-line-height-headline: var(--mrl-line-height-07); /** Contextual typography token. */
|
|
547
611
|
--mrl-type-line-height-headline-large: var(
|
|
548
612
|
--mrl-line-height-07
|
|
549
|
-
); /**
|
|
613
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-line-height-06. */
|
|
550
614
|
--mrl-type-line-height-headline-small: var(
|
|
551
615
|
--mrl-line-height-02
|
|
552
|
-
); /**
|
|
616
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-line-height-09. */
|
|
553
617
|
--mrl-type-line-height-text: var(--mrl-line-height-09); /** Contextual typography token. */
|
|
554
618
|
--mrl-type-line-height-text-large: var(--mrl-line-height-10); /** Contextual typography token. */
|
|
555
619
|
--mrl-type-line-height-text-small: var(--mrl-line-height-08); /** Contextual typography token. */
|
|
@@ -594,7 +658,7 @@
|
|
|
594
658
|
); /** Contextual typography token. */
|
|
595
659
|
--mrl-type-spacing-headline-small: var(
|
|
596
660
|
--mrl-letter-spacing-04
|
|
597
|
-
); /**
|
|
661
|
+
); /** When the viewport is 600px or wider, this token uses --mrl-letter-spacing-03. */
|
|
598
662
|
--mrl-type-spacing-text: var(--mrl-letter-spacing-03); /** Contextual typography token. */
|
|
599
663
|
--mrl-type-spacing-interactive-xsmall: var(
|
|
600
664
|
--mrl-letter-spacing-04
|
|
@@ -620,16 +684,16 @@
|
|
|
620
684
|
--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider); /** Divider line border shorthand. */
|
|
621
685
|
--mrl-color-background-inverse-active: var(
|
|
622
686
|
--mrl-color-accent
|
|
623
|
-
); /**
|
|
687
|
+
); /** Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. */
|
|
624
688
|
--mrl-color-background-inverse-selected: var(
|
|
625
689
|
--mrl-color-accent
|
|
626
|
-
); /**
|
|
690
|
+
); /** Use only with --mrl-color-background-inverse; other colored backgrounds will have a different style set that's TBD. */
|
|
627
691
|
--mrl-color-line-emph-selected: var(
|
|
628
692
|
--mrl-color-accent
|
|
629
|
-
); /**
|
|
693
|
+
); /** Use with the Base with Emphasis style set. */
|
|
630
694
|
--mrl-color-text-emph-selected: var(
|
|
631
695
|
--mrl-color-accent
|
|
632
|
-
); /**
|
|
696
|
+
); /** Use for the Base with Emphasis style set. */
|
|
633
697
|
--mrl-space-inline-sibling-xsmall: var(
|
|
634
698
|
--mrl-space-inline-sibling-small
|
|
635
699
|
); /** Horizontal spacing between very closely placed sibling elements. */
|
package/dist/foundation.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,0EACwE;EAExE;AAAA,0EACwE;EAExE;AAAA,4EAC0E;EAE1E;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;AAAA,KAIG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,0EACwE;EAExE;AAAA,0EACwE;EAExE;AAAA,4EAC0E;EAE1E;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;AAAA,KAIG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;AAAA,qCACmC;EAEnC;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA,wCACsC;EAEtC;EACA;EACA;EACA;AAAA,kCACgC;EAEhC;AAAA,2CACyC;EAEzC;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;;;AC7xBH;EADD;IAEE;;;;ACCF;EACC;IAEC;IACA;IACA;IACA;IACA;IACA;IACA;IAGA;IACA;IACA;IAGA;;;AC5BF;AAEA;EACC;;;ACED;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAuEC;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAQC;EACA;EACA;EACA;EACA;;;AAGD;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;EAEC;;;AAGD;AAAA;AAAA;AAAA;EAIC;;;AAGD;EACC;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;;;AAGD;AAAA;AAAA;EAGC;;;ACtJD;ECgHC,SANmB;;;ADtGpB;EC4GC,SAHoB;;;ADrGrB;ECoFC;EACA,SAPmB;;AASnB;EACC;;;ADpFF;ECgFC;EACA,SAJoB;;AAMpB;EACC;;;AC9FD;EDgCA;EACA;EACA;EACA;EACA;;;ACpCA;EDgCA;EACA;EACA;EACA;EACA;;;ACpCA;EDgCA;EACA;EACA;EACA;EACA;;;ACpCA;EDgCA;EACA;EACA;EACA;EACA;;;AC/BD;EDqEC;EACA;;;AEnBD;EACC;EACA;;;AAaA;AAAA;AAAA;EA1CA,YA7B4B;EAgC3B,WAhC2B;EA4C5B;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA6BA;AAAA;AAAA;AAAA;AAAA;AAAA;EAMC;;;AAMF;AAAA;EA/DC,YA5B0B;;;AAgG3B;EApEC,YA5B0B;EA+BzB,WA/ByB;;;AAqG3B;AAAA;EAzEC,YAxB0B;;;AAsG3B;EA9EC,YAxB0B;EA2BzB,WA3ByB;;;AA2G3B;AAAA;EAnFC,YAvB2B;EA0B1B,WA1B0B","file":"foundation.css"}
|
package/dist/foundation.min.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
:root{--mrl-radii-01: 2px;--mrl-radii-02: 4px;--mrl-radii-03: 8px;--mrl-radii-04: 12px;--mrl-radii-05: 16px;--mrl-radii-06: 24px;--mrl-radii-07: 32px;--mrl-radii-08: 40px;--mrl-stroke-01: 2px;--mrl-stroke-02: 2px;--mrl-stroke-03: 2px;--mrl-gray-10: 249, 250, 250;--mrl-gray-20: 236, 240, 244;--mrl-gray-30: 220, 225, 229;--mrl-gray-40: 184, 193, 204;--mrl-gray-50: 155, 168, 182;--mrl-gray-60: 129, 143, 156;--mrl-gray-70: 99, 112, 126;--mrl-gray-80: 72, 82, 91;--mrl-gray-90: 40, 46, 52;--mrl-gray-100: 27, 31, 34;--mrl-blue-10: 247, 250, 255;--mrl-blue-20: 230, 244, 254;--mrl-blue-30: 205, 230, 254;--mrl-blue-40: 180, 217, 253;--mrl-blue-50: 131, 191, 252;--mrl-blue-60: 81, 143, 251;--mrl-blue-70: 48, 106, 227;--mrl-blue-80: 49, 99, 201;--mrl-blue-90: 42, 86, 176;--mrl-blue-100: 30, 61, 125;--mrl-red-10: 255, 235, 235;--mrl-red-20: 255, 214, 214;--mrl-red-30: 255, 204, 204;--mrl-red-40: 255, 179, 179;--mrl-red-50: 255, 128, 128;--mrl-red-60: 255, 75, 75;--mrl-red-70: 224, 41, 53;--mrl-red-80: 179, 33, 42;--mrl-red-90: 140, 26, 33;--mrl-red-100: 115, 21, 27;--mrl-tomato-10: 251, 224, 223;--mrl-tomato-20: 253, 216, 216;--mrl-tomato-30: 246, 193, 194;--mrl-tomato-40: 240, 148, 151;--mrl-tomato-50: 227, 99, 103;--mrl-tomato-60: 224, 72, 77;--mrl-tomato-70: 212, 58, 64;--mrl-tomato-80: 205, 45, 51;--mrl-tomato-90: 190, 39, 48;--mrl-tomato-100: 157, 32, 40;--mrl-tomato-desaturated: 229, 179, 182;--mrl-orange-10: 255, 231, 204;--mrl-orange-20: 254, 226, 194;--mrl-orange-30: 252, 218, 192;--mrl-orange-40: 245, 199, 146;--mrl-orange-50: 244, 158, 72;--mrl-orange-60: 229, 121, 26;--mrl-orange-70: 201, 79, 19;--mrl-orange-80: 191, 76, 18;--mrl-orange-90: 178, 68, 1;--mrl-orange-100: 147, 57, 1;--mrl-orange-desaturated: 235, 186, 142;--mrl-lemon-10: 250, 241, 193;--mrl-lemon-20: 249, 240, 190;--mrl-lemon-30: 249, 237, 174;--mrl-lemon-40: 245, 226, 127;--mrl-lemon-50: 228, 203, 73;--mrl-lemon-60: 182, 158, 35;--mrl-lemon-70: 142, 116, 23;--mrl-lemon-80: 132, 108, 21;--mrl-lemon-90: 122, 99, 16;--mrl-lemon-100: 104, 84, 13;--mrl-lemon-desaturated: 228, 215, 149;--mrl-melon-10: 227, 248, 216;--mrl-melon-20: 214, 237, 202;--mrl-melon-30: 190, 226, 171;--mrl-melon-40: 161, 214, 135;--mrl-melon-50: 122, 185, 91;--mrl-melon-60: 93, 160, 59;--mrl-melon-70: 75, 132, 46;--mrl-melon-80: 69, 121, 42;--mrl-melon-90: 71, 114, 49;--mrl-melon-100: 60, 96, 41;--mrl-melon-desaturated: 169, 208, 178;--mrl-mint-10: 220, 242, 249;--mrl-mint-20: 207, 234, 242;--mrl-mint-30: 177, 217, 231;--mrl-mint-40: 138, 199, 219;--mrl-mint-50: 89, 181, 212;--mrl-mint-60: 36, 150, 188;--mrl-mint-70: 9, 126, 165;--mrl-mint-80: 8, 118, 155;--mrl-mint-90: 1, 114, 152;--mrl-mint-100: 1, 99, 132;--mrl-mint-desaturated: 162, 203, 216;--mrl-blueberry-10: 215, 228, 255;--mrl-blueberry-20: 202, 219, 252;--mrl-blueberry-30: 187, 209, 251;--mrl-blueberry-40: 139, 175, 249;--mrl-blueberry-50: 105, 146, 226;--mrl-blueberry-60: 91, 131, 210;--mrl-blueberry-70: 64, 110, 203;--mrl-blueberry-80: 32, 89, 202;--mrl-blueberry-90: 28, 77, 175;--mrl-blueberry-100: 24, 66, 149;--mrl-blueberry-desaturated: 173, 199, 224;--mrl-grape-10: 222, 220, 249;--mrl-grape-20: 216, 216, 249;--mrl-grape-30: 207, 207, 247;--mrl-grape-40: 162, 163, 240;--mrl-grape-50: 142, 129, 228;--mrl-grape-60: 132, 108, 224;--mrl-grape-70: 114, 86, 219;--mrl-grape-80: 94, 62, 214;--mrl-grape-90: 74, 58, 182;--mrl-grape-100: 63, 49, 155;--mrl-grape-desaturated: 189, 187, 221;--mrl-dragonfruit-10: 255, 225, 243;--mrl-dragonfruit-20: 246, 213, 243;--mrl-dragonfruit-30: 230, 188, 226;--mrl-dragonfruit-40: 216, 151, 209;--mrl-dragonfruit-50: 202, 114, 193;--mrl-dragonfruit-60: 196, 100, 186;--mrl-dragonfruit-70: 186, 74, 171;--mrl-dragonfruit-80: 175, 75, 168;--mrl-dragonfruit-90: 163, 67, 157;--mrl-dragonfruit-100: 141, 58, 136;--mrl-dragonfruit-desaturated: 232, 201, 221;--mrl-truffle-10: 236, 239, 238;--mrl-truffle-20: 219, 225, 223;--mrl-truffle-30: 197, 206, 203;--mrl-truffle-40: 170, 182, 178;--mrl-truffle-50: 131, 149, 144;--mrl-truffle-60: 108, 127, 121;--mrl-truffle-70: 96, 113, 108;--mrl-truffle-80: 80, 98, 93;--mrl-truffle-90: 70, 83, 79;--mrl-truffle-100: 56, 66, 63;--mrl-truffle-desaturated: 196, 202, 200;--mrl-white: 255, 255, 255;--mrl-black: 0, 0, 0;--mrl-status-info: 49, 99, 201;--mrl-status-info-light: 236, 242, 254;--mrl-status-success: 0, 132, 63;--mrl-status-success-light: 243, 250, 235;--mrl-status-warning: 255, 170, 1;--mrl-status-warning-light: 254, 246, 231;--mrl-status-error: 179, 33, 42;--mrl-status-error-light: 252, 233, 235;--mrl-black-opacity-00: rgba(42, 82, 121, 0.06);--mrl-black-opacity-01: rgba(42, 82, 121, 0.12);--mrl-black-opacity-02: rgba(21, 57, 75, 0.24);--mrl-black-opacity-03: rgba(11, 41, 70, 0.32);--mrl-black-opacity-05: rgba(31, 51, 71, 0.56);--mrl-black-opacity-06: rgba(21, 41, 60, 0.64);--mrl-black-opacity-08: rgba(24, 36, 47, 0.8);--mrl-timing-m1: cubic-bezier(0.17, 0, 0, 1);--mrl-timing-m1r: cubic-bezier(1, 0, 0.83, 1);--mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);--mrl-timing-m3: cubic-bezier(0.33, 0, 0.67, 1);--mrl-timing-m4: cubic-bezier(0, 0, 0, 1);--mrl-duration-01: 17ms;--mrl-duration-02: 167ms;--mrl-duration-03: 333ms;--mrl-duration-04: 667ms;--mrl-distance-01: 4px;--mrl-distance-02: 8px;--mrl-shadow-01: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04);--mrl-shadow-02: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04);--mrl-shadow-03: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08);--mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08);--mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.2);--mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);--mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);--mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);--mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);--mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);--mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem);--mrl-baseline: 16;--mrl-font-family-01: abcsocial;--mrl-font-family-02: stkbureau;--mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);--mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);--mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);--mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);--mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);--mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);--mrl-line-height-01: 0.875;--mrl-line-height-02: 1;--mrl-line-height-03: 1.125;--mrl-line-height-04: 1.167;--mrl-line-height-05: 1.25;--mrl-line-height-06: 1.333;--mrl-line-height-07: 1.4;--mrl-line-height-08: 1.429;--mrl-line-height-09: 1.5;--mrl-line-height-10: 1.56;--mrl-line-height-11: 1.75;--mrl-line-height-12: 2;--mrl-letter-spacing-01: -2%;--mrl-letter-spacing-02: -1%;--mrl-letter-spacing-03: 0%;--mrl-letter-spacing-04: 1%;--mrl-letter-spacing-05: 2%;--mrl-font-weight-01: 400;--mrl-font-weight-02: 500;--mrl-font-weight-03: 600;--mrl-font-weight-04: 700;--mrl-font-weight-05: 800;--mrl-line-width-border-fine: 1px;--mrl-color-background-page: rgb( 243, 245, 246 );--mrl-space-offset-focus: 1px;--mrl-space-inset-control-small: calc( 10 / var(--mrl-baseline) * 1rem );--mrl-type-size-toggleable-label: calc( 10 / var(--mrl-baseline) * 1rem );--mrl-status-private: var(--mrl-gray-100);--mrl-white-opacity-02: rgba(var(--mrl-white), 0.24);--mrl-white-opacity-03: rgba(var(--mrl-white), 0.3);--mrl-white-opacity-04: rgba(var(--mrl-white), 0.4);--mrl-white-opacity-06: rgba(var(--mrl-white), 0.6);--mrl-white-opacity-08: rgba(var(--mrl-white), 0.8);--mrl-line-width-border: var(--mrl-stroke-01);--mrl-line-width-border-selected: var(--mrl-stroke-01);--mrl-line-width-focus: var(--mrl-stroke-01);--mrl-line-width-control: var(--mrl-stroke-01);--mrl-line-width-divider: var(--mrl-stroke-01);--mrl-border-radius-tight: var(--mrl-radii-01);--mrl-border-radius-content: var(--mrl-radii-02);--mrl-border-radius-content-large: var(--mrl-radii-03);--mrl-border-radius-functional: var(--mrl-radii-03);--mrl-border-radius-functional-large: var( --mrl-radii-04 );--mrl-border-radius-container: var(--mrl-radii-04);--mrl-border-radius-container-large: var( --mrl-radii-05 );--mrl-border-radius-rounded: var(--mrl-radii-07);--mrl-border-radius-rounded-large: var(--mrl-radii-08);--mrl-color-focus: rgba(var(--mrl-blue-70), 1);--mrl-color-focus-inverse: rgba( var(--mrl-white), 1 );--mrl-color-shadows: rgba(var(--mrl-black), 1);--mrl-color-brand: rgba(var(--mrl-red-70), 1);--mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);--mrl-color-brand-active: rgba(var(--mrl-red-90), 1);--mrl-color-accent: rgba( var(--mrl-blue-70), 1 );--mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);--mrl-color-skeleton-inverse: rgba( var(--mrl-white), 1 );--mrl-color-background: rgba(var(--mrl-white), 1);--mrl-color-background-secondary: rgba( var(--mrl-gray-10), 1 );--mrl-color-background-decorative: rgba( var(--mrl-blue-10), 1 );--mrl-color-background-active: var( --mrl-black-opacity-01 );--mrl-color-background-selected: rgba(var(--mrl-gray-100), 1);--mrl-color-background-emph-hover: rgba( var(--mrl-gray-10), 1 );--mrl-color-background-emph-active: rgba( var(--mrl-gray-20), 1 );--mrl-color-background-info: rgba( var(--mrl-status-info), 1 );--mrl-color-background-info-light: rgba( var(--mrl-status-info-light), 1 );--mrl-color-background-success: rgba( var(--mrl-status-success), 1 );--mrl-color-background-success-light: rgba( var(--mrl-status-success-light), 1 );--mrl-color-background-warning: rgba( var(--mrl-status-warning), 1 );--mrl-color-background-warning-light: rgba( var(--mrl-status-warning-light), 1 );--mrl-color-background-error: rgba( var(--mrl-status-error), 1 );--mrl-color-background-error-light: rgba( var(--mrl-status-error-light), 1 );--mrl-color-background-private: rgba( var(--mrl-gray-100), 1 );--mrl-color-background-inverse: rgba( var(--mrl-gray-100), 1 );--mrl-color-background-inverse-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-background-disabled: rgba( var(--mrl-gray-40), 1 );--mrl-color-line: rgba(var(--mrl-gray-70), 1);--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-line-active: rgba(var(--mrl-gray-100), 1);--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-line-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-line-secondary: rgba(var(--mrl-gray-30), 1);--mrl-color-line-decorative: rgba( var(--mrl-blue-20), 1 );--mrl-color-line-divider: rgba(var(--mrl-gray-20), 1);--mrl-color-line-divider-inverse: rgba( var(--mrl-gray-80), 1 );--mrl-color-line-emph: rgba(var(--mrl-gray-20), 1);--mrl-color-line-emph-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-line-emph-active: rgba( var(--mrl-black), 1 );--mrl-color-line-inverse: rgba(var(--mrl-white), 1);--mrl-color-line-inverse-disabled: rgba( var(--mrl-white), 1 );--mrl-color-icon-light: rgba(var(--mrl-gray-70), 1);--mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-icon-inverse: rgba(var(--mrl-white), 1);--mrl-color-icon-emph-selected: rgba( var(--mrl-gray-100), 1 );--mrl-color-input-icon-default: rgba( var(--mrl-gray-70), 1 );--mrl-color-text: rgba(var(--mrl-gray-80), 1);--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-active: rgba(var(--mrl-gray-90), 1);--mrl-color-text-selected: rgba(var(--mrl-gray-100), 1);--mrl-color-text-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-text-disabled-inverse: rgba( var(--mrl-white), 1 );--mrl-color-text-emph: rgba(var(--mrl-gray-90), 1);--mrl-color-text-emph-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-emph-active: rgba( var(--mrl-black), 1 );--mrl-color-text-inverse: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-secondary: rgba( var(--mrl-gray-10), 1 );--mrl-color-text-inverse-hover: rgba(var(--mrl-white), 1);--mrl-color-text-inverse-active: rgba( var(--mrl-white), 1 );--mrl-color-text-inverse-selected: rgba( var(--mrl-white), 1 );--mrl-color-text-secondary: rgba(var(--mrl-gray-70), 1);--mrl-color-text-label: rgba(var(--mrl-gray-100), 1);--mrl-color-text-heading: rgba(var(--mrl-gray-100), 1);--mrl-color-text-success: rgba( var(--mrl-status-success), 1 );--mrl-color-text-warning: rgba(var(--mrl-gray-90), 1);--mrl-color-text-warning-light: rgba( var(--mrl-gray-80), 1 );--mrl-color-text-error: rgba(var(--mrl-status-error), 1);--mrl-color-text-info: rgba(var(--mrl-status-info), 1);--mrl-color-text-private: rgba(var(--mrl-gray-100), 1);--mrl-color-background-hover: var(--mrl-black-opacity-00);--mrl-color-background-inverse-hover-opacity: var( --mrl-black-opacity-02 );--mrl-shadows-lifted: var(--mrl-shadow-01);--mrl-shadows-raised: var(--mrl-shadow-02);--mrl-shadows-floating: var(--mrl-shadow-03);--mrl-shadows-hover: var(--mrl-shadow-interactive-01);--mrl-shadows-drag: var(--mrl-shadow-interactive-02);--mrl-space-stack-components: var( --mrl-spacing-06 );--mrl-space-stack-controls: var(--mrl-spacing-05);--mrl-space-stack-controls-small: var( --mrl-spacing-04 );--mrl-space-stack-section: var(--mrl-spacing-07);--mrl-space-stack-section-divider: var( --mrl-spacing-04 );--mrl-space-stack-section-divider-small: var( --mrl-spacing-03 );--mrl-space-stack-section-divider-large: var( --mrl-spacing-06 );--mrl-space-stack-section-divider-xlarge: var( --mrl-spacing-08 );--mrl-space-stack-section-divider-label: var( --mrl-spacing-05 );--mrl-space-stack-siblings: var( --mrl-spacing-04 );--mrl-space-stack-related: var( --mrl-spacing-03 );--mrl-space-stack-related-small: var( --mrl-spacing-02 );--mrl-space-stack-subheading: var( --mrl-spacing-05 );--mrl-space-stack-title: var(--mrl-spacing-07);--mrl-space-stack-title-related: var( --mrl-spacing-05 );--mrl-space-inset: var(--mrl-spacing-03);--mrl-space-inset-container: var(--mrl-spacing-08);--mrl-space-inset-container-large: var( --mrl-spacing-05 );--mrl-space-inset-large: var(--mrl-spacing-05);--mrl-space-inset-control: var(--mrl-spacing-06);--mrl-space-inset-control-large: var(--mrl-spacing-05);--mrl-space-inline-related: var( --mrl-spacing-03 );--mrl-space-inline-sibling: var( --mrl-spacing-04 );--mrl-space-inline-sibling-small: var( --mrl-spacing-02 );--mrl-space-gutter: var(--mrl-spacing-04);--mrl-space-gutter-label: var(--mrl-spacing-05);--mrl-body-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font-alt: var(--mrl-font-family-02), serif;--mrl-type-size-display: var(--mrl-font-size-08);--mrl-type-size-display-large: var(--mrl-font-size-09);--mrl-type-size-display-small: var(--mrl-font-size-07);--mrl-type-size-display-xsmall: var(--mrl-font-size-06);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-06);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-size-text: var(--mrl-font-size-04);--mrl-type-size-text-large: var(--mrl-font-size-05);--mrl-type-size-text-small: var(--mrl-font-size-03);--mrl-type-size-text-xsmall: var(--mrl-font-size-02);--mrl-type-size-text-xxsmall: var(--mrl-font-size-01);--mrl-type-line-height-title: var(--mrl-line-height-05);--mrl-type-line-height-title-large: var(--mrl-line-height-06);--mrl-type-line-height-title-small: var(--mrl-line-height-08);--mrl-type-line-height-title-xsmall: var( --mrl-line-height-06 );--mrl-type-line-height-title-xxsmall: var( --mrl-line-height-06 );--mrl-type-line-height-display: var(--mrl-line-height-02);--mrl-type-line-height-display-large: var( --mrl-line-height-02 );--mrl-type-line-height-display-small: var( --mrl-line-height-02 );--mrl-type-line-height-display-xsmall: var( --mrl-line-height-02 );--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var( --mrl-line-height-07 );--mrl-type-line-height-headline-small: var( --mrl-line-height-02 );--mrl-type-line-height-text: var(--mrl-line-height-09);--mrl-type-line-height-text-large: var(--mrl-line-height-10);--mrl-type-line-height-text-small: var(--mrl-line-height-08);--mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);--mrl-type-line-height-text-xxsmall: var( --mrl-line-height-08 );--mrl-type-line-height-interactive: var(--mrl-line-height-09);--mrl-type-line-height-interactive-large: var( --mrl-line-height-10 );--mrl-type-line-height-interactive-small: var( --mrl-line-height-08 );--mrl-type-line-height-interactive-xsmall: var( --mrl-line-height-06 );--mrl-type-weight-display: var(--mrl-font-weight-01);--mrl-type-weight-headline: var(--mrl-font-weight-04);--mrl-type-weight-title: var(--mrl-font-weight-04);--mrl-type-weight-title-secondary: var(--mrl-font-weight-02);--mrl-type-weight-text: var(--mrl-font-weight-01);--mrl-type-weight-text-bold: var(--mrl-font-weight-04);--mrl-type-weight-text-secondary: var(--mrl-font-weight-01);--mrl-type-weight-interactive: var(--mrl-font-weight-04);--mrl-type-weight-toggleable-label: var( --mrl-font-weight-03 );--mrl-type-spacing-display: var(--mrl-letter-spacing-03);--mrl-type-spacing-display-large: var( --mrl-letter-spacing-02 );--mrl-type-spacing-display-small: var( --mrl-letter-spacing-02 );--mrl-type-spacing-display-xsmall: var( --mrl-letter-spacing-02 );--mrl-type-spacing-headline: var(--mrl-letter-spacing-03);--mrl-type-spacing-headline-large: var( --mrl-letter-spacing-03 );--mrl-type-spacing-headline-small: var( --mrl-letter-spacing-04 );--mrl-type-spacing-text: var(--mrl-letter-spacing-03);--mrl-type-spacing-interactive-xsmall: var( --mrl-letter-spacing-04 );--mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);--mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);--mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);--mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);--mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);--mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);--mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);--mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);--mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected);--mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse);--mrl-border-inverse-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled);--mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider);--mrl-color-background-inverse-active: var( --mrl-color-accent );--mrl-color-background-inverse-selected: var( --mrl-color-accent );--mrl-color-line-emph-selected: var( --mrl-color-accent );--mrl-color-text-emph-selected: var( --mrl-color-accent );--mrl-space-inline-sibling-xsmall: var( --mrl-space-inline-sibling-small )}@media only screen and (min-width: 600px){:root{--mrl-space-inset-container-large: var(--mrl-spacing-08)}}@media screen and (min-width: 600px){:root{--mrl-type-size-display: var(--mrl-font-size-09);--mrl-type-size-display-large: var(--mrl-font-size-10);--mrl-type-size-display-small: var(--mrl-font-size-08);--mrl-type-size-display-xsmall: var(--mrl-font-size-07);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-07);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var(--mrl-line-height-06);--mrl-type-line-height-headline-small: var(--mrl-line-height-09);--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03)}}.mrl-u-focus-wrapper{position:relative}body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,samp,small,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;margin:0;padding:0;vertical-align:baseline}b,em,i,strike,strong,sub,sup,u{border:0;font-family:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:none}table{border-collapse:collapse;border-spacing:0}html{border:0;box-sizing:border-box;font:inherit;font-family:var(--mrl-body-font);font-size:var(--mrl-font-size, 100%);-webkit-font-smoothing:antialiased;margin:0;padding:0;vertical-align:baseline}h1,h2,h3,h4,h5,h6{font-family:var(--mrl-heading-font)}*,*::before,*::after{box-sizing:inherit}.mrl-u-space-center-horizontal{display:flex}.mrl-u-space-center-horizontal-inline{display:inline-flex}.mrl-u-space-center-vertical{align-items:center;display:flex}.mrl-u-space-center-vertical>*{display:inline-flex}.mrl-u-space-center-vertical-inline{align-items:center;display:inline-flex}.mrl-u-space-center-vertical-inline>*{display:inline-flex}.mrl-u-text-interactive-xsmall{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall)}.mrl-u-text-interactive-small{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small)}.mrl-u-text-interactive-medium{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive)}.mrl-u-text-interactive-large{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-large);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-large)}.mrl-u-text-toggleable-label{font-size:var(--mrl-type-size-toggleable-label);font-weight:var(--mrl-type-weight-toggleable-label)}:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}
|
|
1
|
+
:root{--mrl-radii-01: 2px;--mrl-radii-02: 4px;--mrl-radii-03: 8px;--mrl-radii-04: 12px;--mrl-radii-05: 16px;--mrl-radii-06: 24px;--mrl-radii-07: 32px;--mrl-radii-08: 40px;--mrl-stroke-01: 2px;--mrl-stroke-02: 2px;--mrl-stroke-03: 2px;--mrl-gray-10: 249, 250, 250;--mrl-gray-20: 236, 240, 244;--mrl-gray-30: 220, 225, 229;--mrl-gray-40: 184, 193, 204;--mrl-gray-50: 155, 168, 182;--mrl-gray-60: 129, 143, 156;--mrl-gray-70: 99, 112, 126;--mrl-gray-80: 72, 82, 91;--mrl-gray-90: 40, 46, 52;--mrl-gray-100: 27, 31, 34;--mrl-blue-10: 247, 250, 255;--mrl-blue-20: 230, 244, 254;--mrl-blue-30: 205, 230, 254;--mrl-blue-40: 180, 217, 253;--mrl-blue-50: 131, 191, 252;--mrl-blue-60: 81, 143, 251;--mrl-blue-70: 48, 106, 227;--mrl-blue-80: 49, 99, 201;--mrl-blue-90: 42, 86, 176;--mrl-blue-100: 30, 61, 125;--mrl-red-10: 255, 235, 235;--mrl-red-20: 255, 214, 214;--mrl-red-30: 255, 204, 204;--mrl-red-40: 255, 179, 179;--mrl-red-50: 255, 128, 128;--mrl-red-60: 255, 75, 75;--mrl-red-70: 224, 41, 53;--mrl-red-80: 179, 33, 42;--mrl-red-90: 140, 26, 33;--mrl-red-100: 115, 21, 27;--mrl-tomato-10: 251, 224, 223;--mrl-tomato-20: 253, 216, 216;--mrl-tomato-30: 246, 193, 194;--mrl-tomato-40: 240, 148, 151;--mrl-tomato-50: 227, 99, 103;--mrl-tomato-60: 224, 72, 77;--mrl-tomato-70: 212, 58, 64;--mrl-tomato-80: 205, 45, 51;--mrl-tomato-90: 190, 39, 48;--mrl-tomato-100: 157, 32, 40;--mrl-tomato-desaturated: 229, 179, 182;--mrl-orange-10: 255, 231, 204;--mrl-orange-20: 254, 226, 194;--mrl-orange-30: 252, 218, 192;--mrl-orange-40: 245, 199, 146;--mrl-orange-50: 244, 158, 72;--mrl-orange-60: 229, 121, 26;--mrl-orange-70: 201, 79, 19;--mrl-orange-80: 191, 76, 18;--mrl-orange-90: 178, 68, 1;--mrl-orange-100: 147, 57, 1;--mrl-orange-desaturated: 235, 186, 142;--mrl-lemon-10: 250, 241, 193;--mrl-lemon-20: 249, 240, 190;--mrl-lemon-30: 249, 237, 174;--mrl-lemon-40: 245, 226, 127;--mrl-lemon-50: 228, 203, 73;--mrl-lemon-60: 182, 158, 35;--mrl-lemon-70: 142, 116, 23;--mrl-lemon-80: 132, 108, 21;--mrl-lemon-90: 122, 99, 16;--mrl-lemon-100: 104, 84, 13;--mrl-lemon-desaturated: 228, 215, 149;--mrl-melon-10: 227, 248, 216;--mrl-melon-20: 214, 237, 202;--mrl-melon-30: 190, 226, 171;--mrl-melon-40: 161, 214, 135;--mrl-melon-50: 122, 185, 91;--mrl-melon-60: 93, 160, 59;--mrl-melon-70: 75, 132, 46;--mrl-melon-80: 69, 121, 42;--mrl-melon-90: 71, 114, 49;--mrl-melon-100: 60, 96, 41;--mrl-melon-desaturated: 169, 208, 178;--mrl-mint-10: 220, 242, 249;--mrl-mint-20: 207, 234, 242;--mrl-mint-30: 177, 217, 231;--mrl-mint-40: 138, 199, 219;--mrl-mint-50: 89, 181, 212;--mrl-mint-60: 36, 150, 188;--mrl-mint-70: 9, 126, 165;--mrl-mint-80: 8, 118, 155;--mrl-mint-90: 1, 114, 152;--mrl-mint-100: 1, 99, 132;--mrl-mint-desaturated: 162, 203, 216;--mrl-blueberry-10: 215, 228, 255;--mrl-blueberry-20: 202, 219, 252;--mrl-blueberry-30: 187, 209, 251;--mrl-blueberry-40: 139, 175, 249;--mrl-blueberry-50: 105, 146, 226;--mrl-blueberry-60: 91, 131, 210;--mrl-blueberry-70: 64, 110, 203;--mrl-blueberry-80: 32, 89, 202;--mrl-blueberry-90: 28, 77, 175;--mrl-blueberry-100: 24, 66, 149;--mrl-blueberry-desaturated: 173, 199, 224;--mrl-grape-10: 222, 220, 249;--mrl-grape-20: 216, 216, 249;--mrl-grape-30: 207, 207, 247;--mrl-grape-40: 162, 163, 240;--mrl-grape-50: 142, 129, 228;--mrl-grape-60: 132, 108, 224;--mrl-grape-70: 114, 86, 219;--mrl-grape-80: 94, 62, 214;--mrl-grape-90: 74, 58, 182;--mrl-grape-100: 63, 49, 155;--mrl-grape-desaturated: 189, 187, 221;--mrl-dragonfruit-10: 255, 225, 243;--mrl-dragonfruit-20: 246, 213, 243;--mrl-dragonfruit-30: 230, 188, 226;--mrl-dragonfruit-40: 216, 151, 209;--mrl-dragonfruit-50: 202, 114, 193;--mrl-dragonfruit-60: 196, 100, 186;--mrl-dragonfruit-70: 186, 74, 171;--mrl-dragonfruit-80: 175, 75, 168;--mrl-dragonfruit-90: 163, 67, 157;--mrl-dragonfruit-100: 141, 58, 136;--mrl-dragonfruit-desaturated: 232, 201, 221;--mrl-truffle-10: 236, 239, 238;--mrl-truffle-20: 219, 225, 223;--mrl-truffle-30: 197, 206, 203;--mrl-truffle-40: 170, 182, 178;--mrl-truffle-50: 131, 149, 144;--mrl-truffle-60: 108, 127, 121;--mrl-truffle-70: 96, 113, 108;--mrl-truffle-80: 80, 98, 93;--mrl-truffle-90: 70, 83, 79;--mrl-truffle-100: 56, 66, 63;--mrl-truffle-desaturated: 196, 202, 200;--mrl-white: 255, 255, 255;--mrl-black: 0, 0, 0;--mrl-status-info: 49, 99, 201;--mrl-status-info-light: 236, 242, 254;--mrl-status-success: 0, 132, 63;--mrl-status-success-light: 243, 250, 235;--mrl-status-warning: 255, 170, 1;--mrl-status-warning-light: 254, 246, 231;--mrl-status-error: 179, 33, 42;--mrl-status-error-light: 252, 233, 235;--mrl-black-opacity-00: rgba(42, 82, 121, 0.06);--mrl-black-opacity-01: rgba(42, 82, 121, 0.12);--mrl-black-opacity-02: rgba(21, 57, 75, 0.24);--mrl-black-opacity-03: rgba(11, 41, 70, 0.32);--mrl-black-opacity-05: rgba(31, 51, 71, 0.56);--mrl-black-opacity-06: rgba(21, 41, 60, 0.64);--mrl-black-opacity-08: rgba(24, 36, 47, 0.8);--mrl-timing-m1: cubic-bezier(0.17, 0, 0, 1);--mrl-timing-m1r: cubic-bezier(1, 0, 0.83, 1);--mrl-timing-m2: cubic-bezier(0, 0.5, 0, 1);--mrl-timing-m3: cubic-bezier(0.33, 0, 0.67, 1);--mrl-timing-m4: cubic-bezier(0, 0, 0, 1);--mrl-duration-01: 17ms;--mrl-duration-02: 167ms;--mrl-duration-03: 333ms;--mrl-duration-04: 667ms;--mrl-distance-01: 4px;--mrl-distance-02: 8px;--mrl-shadow-01: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 4px 4px 0 rgba(42, 82, 121, 0.04);--mrl-shadow-02: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 6px 8px 0 rgba(42, 82, 121, 0.04);--mrl-shadow-03: 0 0 1px 0 rgba(11, 41, 70, 0.32), 0 24px 20px 0 rgba(42, 82, 121, 0.08);--mrl-shadow-interactive-01: 0 4px 5px 0 rgba(24, 36, 47, 0.08);--mrl-shadow-interactive-02: 0 12px 20px 0px rgba(27, 57, 75, 0.2);--mrl-spacing-01: calc(2 / var(--mrl-baseline) * 1rem);--mrl-spacing-02: calc(4 / var(--mrl-baseline) * 1rem);--mrl-spacing-03: calc(8 / var(--mrl-baseline) * 1rem);--mrl-spacing-04: calc(12 / var(--mrl-baseline) * 1rem);--mrl-spacing-05: calc(16 / var(--mrl-baseline) * 1rem);--mrl-spacing-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-spacing-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-spacing-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-spacing-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-spacing-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-spacing-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-spacing-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-spacing-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-spacing-14: calc(160 / var(--mrl-baseline) * 1rem);--mrl-baseline: 16;--mrl-font-family-01: abcsocial;--mrl-font-family-02: stkbureau;--mrl-font-size-01: calc(11 / var(--mrl-baseline) * 1rem);--mrl-font-size-02: calc(12 / var(--mrl-baseline) * 1rem);--mrl-font-size-03: calc(14 / var(--mrl-baseline) * 1rem);--mrl-font-size-04: calc(16 / var(--mrl-baseline) * 1rem);--mrl-font-size-05: calc(18 / var(--mrl-baseline) * 1rem);--mrl-font-size-06: calc(20 / var(--mrl-baseline) * 1rem);--mrl-font-size-07: calc(24 / var(--mrl-baseline) * 1rem);--mrl-font-size-08: calc(32 / var(--mrl-baseline) * 1rem);--mrl-font-size-09: calc(40 / var(--mrl-baseline) * 1rem);--mrl-font-size-10: calc(48 / var(--mrl-baseline) * 1rem);--mrl-font-size-11: calc(64 / var(--mrl-baseline) * 1rem);--mrl-font-size-12: calc(80 / var(--mrl-baseline) * 1rem);--mrl-font-size-13: calc(96 / var(--mrl-baseline) * 1rem);--mrl-font-size-14: calc(120 / var(--mrl-baseline) * 1rem);--mrl-line-height-01: 0.875;--mrl-line-height-02: 1;--mrl-line-height-03: 1.125;--mrl-line-height-04: 1.167;--mrl-line-height-05: 1.25;--mrl-line-height-06: 1.333;--mrl-line-height-07: 1.4;--mrl-line-height-08: 1.429;--mrl-line-height-09: 1.5;--mrl-line-height-10: 1.56;--mrl-line-height-11: 1.75;--mrl-line-height-12: 2;--mrl-letter-spacing-01: -2%;--mrl-letter-spacing-02: -1%;--mrl-letter-spacing-03: 0%;--mrl-letter-spacing-04: 1%;--mrl-letter-spacing-05: 2%;--mrl-font-weight-01: 400;--mrl-font-weight-02: 500;--mrl-font-weight-03: 600;--mrl-font-weight-04: 700;--mrl-font-weight-05: 800;--mrl-line-width-border-fine: 1px;--mrl-color-background-page: rgb( 243, 245, 246 );--mrl-space-offset-focus: 1px;--mrl-space-inset-control-small: calc( 10 / var(--mrl-baseline) * 1rem );--mrl-type-size-toggleable-label: calc( 10 / var(--mrl-baseline) * 1rem );--mrl-status-private: var(--mrl-gray-100);--mrl-white-opacity-02: rgba(var(--mrl-white), 0.24);--mrl-white-opacity-03: rgba(var(--mrl-white), 0.3);--mrl-white-opacity-04: rgba(var(--mrl-white), 0.4);--mrl-white-opacity-06: rgba(var(--mrl-white), 0.6);--mrl-white-opacity-08: rgba(var(--mrl-white), 0.8);--mrl-line-width-border: var(--mrl-stroke-01);--mrl-line-width-border-selected: var(--mrl-stroke-01);--mrl-line-width-focus: var(--mrl-stroke-01);--mrl-line-width-control: var(--mrl-stroke-01);--mrl-line-width-divider: var(--mrl-stroke-01);--mrl-border-radius-tight: var( --mrl-radii-01 );--mrl-border-radius-content: var(--mrl-radii-02);--mrl-border-radius-content-large: var(--mrl-radii-03);--mrl-border-radius-functional: var( --mrl-radii-03 );--mrl-border-radius-functional-large: var( --mrl-radii-04 );--mrl-border-radius-container: var( --mrl-radii-04 );--mrl-border-radius-container-large: var( --mrl-radii-05 );--mrl-border-radius-rounded: var( --mrl-radii-07 );--mrl-border-radius-rounded-large: var(--mrl-radii-08);--mrl-color-focus: rgba(var(--mrl-blue-70), 1);--mrl-color-focus-inverse: rgba( var(--mrl-white), 1 );--mrl-color-shadows: rgba(var(--mrl-black), 1);--mrl-color-brand: rgba(var(--mrl-red-70), 1);--mrl-color-brand-hover: rgba(var(--mrl-red-80), 1);--mrl-color-brand-active: rgba(var(--mrl-red-90), 1);--mrl-color-accent: rgba( var(--mrl-blue-70), 1 );--mrl-color-skeleton: rgba(var(--mrl-gray-20), 1);--mrl-color-skeleton-inverse: rgba( var(--mrl-white), 1 );--mrl-color-background: rgba(var(--mrl-white), 1);--mrl-color-background-secondary: rgba( var(--mrl-gray-10), 1 );--mrl-color-background-decorative: rgba( var(--mrl-blue-10), 1 );--mrl-color-background-active: var( --mrl-black-opacity-01 );--mrl-color-background-selected: rgba(var(--mrl-gray-100), 1);--mrl-color-background-emph-hover: rgba( var(--mrl-gray-10), 1 );--mrl-color-background-emph-active: rgba( var(--mrl-gray-20), 1 );--mrl-color-background-info: rgba( var(--mrl-status-info), 1 );--mrl-color-background-info-light: rgba( var(--mrl-status-info-light), 1 );--mrl-color-background-success: rgba( var(--mrl-status-success), 1 );--mrl-color-background-success-light: rgba( var(--mrl-status-success-light), 1 );--mrl-color-background-warning: rgba( var(--mrl-status-warning), 1 );--mrl-color-background-warning-light: rgba( var(--mrl-status-warning-light), 1 );--mrl-color-background-error: rgba( var(--mrl-status-error), 1 );--mrl-color-background-error-light: rgba( var(--mrl-status-error-light), 1 );--mrl-color-background-private: rgba( var(--mrl-gray-100), 1 );--mrl-color-background-inverse: rgba( var(--mrl-gray-100), 1 );--mrl-color-background-inverse-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-background-disabled: rgba( var(--mrl-gray-40), 1 );--mrl-color-line: rgba(var(--mrl-gray-70), 1);--mrl-color-line-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-line-active: rgba(var(--mrl-gray-100), 1);--mrl-color-line-selected: rgba(var(--mrl-gray-90), 1);--mrl-color-line-disabled: rgba( var(--mrl-gray-40), 1 );--mrl-color-line-secondary: rgba(var(--mrl-gray-30), 1);--mrl-color-line-decorative: rgba( var(--mrl-blue-20), 1 );--mrl-color-line-divider: rgba( var(--mrl-gray-20), 1 );--mrl-color-line-divider-inverse: rgba( var(--mrl-gray-80), 1 );--mrl-color-line-emph: rgba( var(--mrl-gray-20), 1 );--mrl-color-line-emph-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-line-emph-active: rgba( var(--mrl-black), 1 );--mrl-color-line-inverse: rgba(var(--mrl-white), 1);--mrl-color-line-inverse-disabled: rgba( var(--mrl-white), 1 );--mrl-color-icon-light: rgba(var(--mrl-gray-70), 1);--mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1);--mrl-color-icon-inverse: rgba(var(--mrl-white), 1);--mrl-color-icon-emph-selected: rgba( var(--mrl-gray-100), 1 );--mrl-color-input-icon-default: rgba( var(--mrl-gray-70), 1 );--mrl-color-text: rgba(var(--mrl-gray-80), 1);--mrl-color-text-hover: rgba(var(--mrl-gray-90), 1);--mrl-color-text-active: rgba(var(--mrl-gray-90), 1);--mrl-color-text-selected: rgba(var(--mrl-gray-100), 1);--mrl-color-text-disabled: rgba( var(--mrl-gray-40), 1 );--mrl-color-text-disabled-inverse: rgba( var(--mrl-white), 1 );--mrl-color-text-emph: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-emph-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-emph-active: rgba( var(--mrl-black), 1 );--mrl-color-text-inverse: rgba( var(--mrl-white), 1 );--mrl-color-text-inverse-secondary: rgba( var(--mrl-gray-10), 1 );--mrl-color-text-inverse-hover: rgba( var(--mrl-white), 1 );--mrl-color-text-inverse-active: rgba( var(--mrl-white), 1 );--mrl-color-text-inverse-selected: rgba( var(--mrl-white), 1 );--mrl-color-text-secondary: rgba( var(--mrl-gray-70), 1 );--mrl-color-text-label: rgba( var(--mrl-gray-100), 1 );--mrl-color-text-heading: rgba( var(--mrl-gray-100), 1 );--mrl-color-text-success: rgba( var(--mrl-status-success), 1 );--mrl-color-text-warning: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-warning-light: rgba( var(--mrl-gray-80), 1 );--mrl-color-text-error: rgba( var(--mrl-status-error), 1 );--mrl-color-text-info: rgba( var(--mrl-status-info), 1 );--mrl-color-text-private: rgba(var(--mrl-gray-100), 1);--mrl-color-background-hover: var(--mrl-black-opacity-00);--mrl-color-background-inverse-hover-opacity: var( --mrl-black-opacity-02 );--mrl-shadows-lifted: var(--mrl-shadow-01);--mrl-shadows-raised: var(--mrl-shadow-02);--mrl-shadows-floating: var(--mrl-shadow-03);--mrl-shadows-hover: var(--mrl-shadow-interactive-01);--mrl-shadows-drag: var(--mrl-shadow-interactive-02);--mrl-space-stack-components: var( --mrl-spacing-06 );--mrl-space-stack-controls: var(--mrl-spacing-05);--mrl-space-stack-controls-small: var( --mrl-spacing-04 );--mrl-space-stack-section: var(--mrl-spacing-07);--mrl-space-stack-section-divider: var( --mrl-spacing-04 );--mrl-space-stack-section-divider-small: var( --mrl-spacing-03 );--mrl-space-stack-section-divider-large: var( --mrl-spacing-06 );--mrl-space-stack-section-divider-xlarge: var( --mrl-spacing-08 );--mrl-space-stack-section-divider-label: var( --mrl-spacing-05 );--mrl-space-stack-siblings: var( --mrl-spacing-04 );--mrl-space-stack-related: var( --mrl-spacing-03 );--mrl-space-stack-related-small: var( --mrl-spacing-02 );--mrl-space-stack-subheading: var( --mrl-spacing-05 );--mrl-space-stack-title: var(--mrl-spacing-07);--mrl-space-stack-title-related: var( --mrl-spacing-05 );--mrl-space-inset: var(--mrl-spacing-03);--mrl-space-inset-container: var(--mrl-spacing-08);--mrl-space-inset-container-large: var( --mrl-spacing-05 );--mrl-space-inset-large: var(--mrl-spacing-05);--mrl-space-inset-control: var(--mrl-spacing-06);--mrl-space-inset-control-large: var(--mrl-spacing-05);--mrl-space-inline-related: var( --mrl-spacing-03 );--mrl-space-inline-sibling: var( --mrl-spacing-04 );--mrl-space-inline-sibling-small: var( --mrl-spacing-02 );--mrl-space-gutter: var(--mrl-spacing-04);--mrl-space-gutter-label: var(--mrl-spacing-05);--mrl-body-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font: var(--mrl-font-family-01), sans-serif;--mrl-heading-font-alt: var(--mrl-font-family-02), serif;--mrl-type-size-display: var( --mrl-font-size-08 );--mrl-type-size-display-large: var( --mrl-font-size-09 );--mrl-type-size-display-small: var( --mrl-font-size-07 );--mrl-type-size-display-xsmall: var( --mrl-font-size-06 );--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var( --mrl-font-size-06 );--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-size-text: var(--mrl-font-size-04);--mrl-type-size-text-large: var(--mrl-font-size-05);--mrl-type-size-text-small: var(--mrl-font-size-03);--mrl-type-size-text-xsmall: var(--mrl-font-size-02);--mrl-type-size-text-xxsmall: var(--mrl-font-size-01);--mrl-type-line-height-title: var( --mrl-line-height-05 );--mrl-type-line-height-title-large: var( --mrl-line-height-06 );--mrl-type-line-height-title-small: var( --mrl-line-height-08 );--mrl-type-line-height-title-xsmall: var( --mrl-line-height-06 );--mrl-type-line-height-title-xxsmall: var( --mrl-line-height-06 );--mrl-type-line-height-display: var(--mrl-line-height-02);--mrl-type-line-height-display-large: var( --mrl-line-height-02 );--mrl-type-line-height-display-small: var( --mrl-line-height-02 );--mrl-type-line-height-display-xsmall: var( --mrl-line-height-02 );--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var( --mrl-line-height-07 );--mrl-type-line-height-headline-small: var( --mrl-line-height-02 );--mrl-type-line-height-text: var(--mrl-line-height-09);--mrl-type-line-height-text-large: var(--mrl-line-height-10);--mrl-type-line-height-text-small: var(--mrl-line-height-08);--mrl-type-line-height-text-xsmall: var(--mrl-line-height-06);--mrl-type-line-height-text-xxsmall: var( --mrl-line-height-08 );--mrl-type-line-height-interactive: var(--mrl-line-height-09);--mrl-type-line-height-interactive-large: var( --mrl-line-height-10 );--mrl-type-line-height-interactive-small: var( --mrl-line-height-08 );--mrl-type-line-height-interactive-xsmall: var( --mrl-line-height-06 );--mrl-type-weight-display: var(--mrl-font-weight-01);--mrl-type-weight-headline: var(--mrl-font-weight-04);--mrl-type-weight-title: var(--mrl-font-weight-04);--mrl-type-weight-title-secondary: var(--mrl-font-weight-02);--mrl-type-weight-text: var(--mrl-font-weight-01);--mrl-type-weight-text-bold: var(--mrl-font-weight-04);--mrl-type-weight-text-secondary: var(--mrl-font-weight-01);--mrl-type-weight-interactive: var(--mrl-font-weight-04);--mrl-type-weight-toggleable-label: var( --mrl-font-weight-03 );--mrl-type-spacing-display: var(--mrl-letter-spacing-03);--mrl-type-spacing-display-large: var( --mrl-letter-spacing-02 );--mrl-type-spacing-display-small: var( --mrl-letter-spacing-02 );--mrl-type-spacing-display-xsmall: var( --mrl-letter-spacing-02 );--mrl-type-spacing-headline: var(--mrl-letter-spacing-03);--mrl-type-spacing-headline-large: var( --mrl-letter-spacing-03 );--mrl-type-spacing-headline-small: var( --mrl-letter-spacing-04 );--mrl-type-spacing-text: var(--mrl-letter-spacing-03);--mrl-type-spacing-interactive-xsmall: var( --mrl-letter-spacing-04 );--mrl-border: var(--mrl-line-width-border) solid var(--mrl-color-line);--mrl-border-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-hover);--mrl-border-active: var(--mrl-line-width-border) solid var(--mrl-color-line-active);--mrl-border-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-selected);--mrl-border-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-disabled);--mrl-border-emph: var(--mrl-line-width-border) solid var(--mrl-color-line-emph);--mrl-border-emph-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-hover);--mrl-border-emph-active: var(--mrl-line-width-border) solid var(--mrl-color-line-emph-active);--mrl-border-emph-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-emph-selected);--mrl-border-inverse: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-hover: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-active: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse);--mrl-border-inverse-selected: var(--mrl-line-width-border-selected) solid var(--mrl-color-line-inverse);--mrl-border-inverse-disabled: var(--mrl-line-width-border) solid var(--mrl-color-line-inverse-disabled);--mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus);--mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider);--mrl-color-background-inverse-active: var( --mrl-color-accent );--mrl-color-background-inverse-selected: var( --mrl-color-accent );--mrl-color-line-emph-selected: var( --mrl-color-accent );--mrl-color-text-emph-selected: var( --mrl-color-accent );--mrl-space-inline-sibling-xsmall: var( --mrl-space-inline-sibling-small )}@media only screen and (min-width: 600px){:root{--mrl-space-inset-container-large: var(--mrl-spacing-08)}}@media screen and (min-width: 600px){:root{--mrl-type-size-display: var(--mrl-font-size-09);--mrl-type-size-display-large: var(--mrl-font-size-10);--mrl-type-size-display-small: var(--mrl-font-size-08);--mrl-type-size-display-xsmall: var(--mrl-font-size-07);--mrl-type-size-headline: var(--mrl-font-size-06);--mrl-type-size-headline-large: var(--mrl-font-size-07);--mrl-type-size-headline-small: var(--mrl-font-size-04);--mrl-type-line-height-headline: var(--mrl-line-height-07);--mrl-type-line-height-headline-large: var(--mrl-line-height-06);--mrl-type-line-height-headline-small: var(--mrl-line-height-09);--mrl-type-spacing-headline-small: var(--mrl-letter-spacing-03)}}.mrl-u-focus-wrapper{position:relative}body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,samp,small,tt,var,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;margin:0;padding:0;vertical-align:baseline}b,em,i,strike,strong,sub,sup,u{border:0;font-family:inherit;margin:0;padding:0;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote::before,blockquote::after,q::before,q::after{content:none}table{border-collapse:collapse;border-spacing:0}html{border:0;box-sizing:border-box;font:inherit;font-family:var(--mrl-body-font);font-size:var(--mrl-font-size, 100%);-webkit-font-smoothing:antialiased;margin:0;padding:0;vertical-align:baseline}h1,h2,h3,h4,h5,h6{font-family:var(--mrl-heading-font)}*,*::before,*::after{box-sizing:inherit}.mrl-u-space-center-horizontal{display:flex}.mrl-u-space-center-horizontal-inline{display:inline-flex}.mrl-u-space-center-vertical{align-items:center;display:flex}.mrl-u-space-center-vertical>*{display:inline-flex}.mrl-u-space-center-vertical-inline{align-items:center;display:inline-flex}.mrl-u-space-center-vertical-inline>*{display:inline-flex}.mrl-u-text-interactive-xsmall{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall)}.mrl-u-text-interactive-small{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small)}.mrl-u-text-interactive-medium{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive)}.mrl-u-text-interactive-large{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-large);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-large)}.mrl-u-text-toggleable-label{font-size:var(--mrl-type-size-toggleable-label);font-weight:var(--mrl-type-weight-toggleable-label)}:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-body-font);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}
|
|
2
2
|
/*# sourceMappingURL=foundation.min.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAIA,MACC,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,0BACA,0BACA,2BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,2BACA,+BACA,+BACA,+BACA,+BACA,8BACA,6BACA,6BACA,6BACA,6BACA,8BACA,wCACA,+BACA,+BACA,+BACA,+BACA,8BACA,8BACA,6BACA,6BACA,4BACA,6BACA,wCACA,8BACA,8BACA,8BACA,8BACA,6BACA,6BACA,6BACA,6BACA,4BACA,6BACA,uCACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,4BACA,4BACA,4BACA,uCACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,2BACA,2BACA,sCACA,kCACA,kCACA,kCACA,kCACA,kCACA,iCACA,iCACA,gCACA,gCACA,iCACA,2CACA,8BACA,8BACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,6BACA,uCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,mCACA,mCACA,mCACA,oCACA,6CACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,+BACA,6BACA,6BACA,8BACA,yCACA,2BACA,qBACA,+BACA,uCACA,iCACA,0CACA,kCACA,0CACA,gCACA,wCACA,gDACA,gDACA,+CACA,+CACA,+CACA,+CACA,8CACA,6CACA,8CACA,4CACA,gDACA,0CACA,wBACA,yBACA,yBACA,yBACA,uBACA,uBACA,uFAGA,uFAGA,yFAGA,gEACA,mEACA,uDACA,uDACA,uDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,yDACA,mBACA,gCACA,gCACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,2DACA,4BACA,wBACA,4BACA,4BACA,2BACA,4BACA,0BACA,4BACA,0BACA,2BACA,2BACA,wBACA,6BACA,6BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,0BACA,kCACA,kDAMA,8BACA,yEAIA,0EAIA,0CACA,qDACA,oDACA,oDACA,oDACA,oDACA,8CACA,uDACA,6CACA,+CACA,+CACA
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../src/styles/_tokens.scss","../src/styles/contextual-variables/spacing.scss","../src/styles/contextual-variables/typography.scss","../src/styles/focus.scss","../src/styles/baseline.scss","../src/styles/spacing.scss","../src/styles/_mixins.scss","../src/styles/typography.scss","../src/styles/skeletons/button.scss"],"names":[],"mappings":"AAIA,MACC,oBACA,oBACA,oBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,qBACA,6BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,0BACA,0BACA,2BACA,6BACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,4BACA,4BACA,4BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,2BACA,+BACA,+BACA,+BACA,+BACA,8BACA,6BACA,6BACA,6BACA,6BACA,8BACA,wCACA,+BACA,+BACA,+BACA,+BACA,8BACA,8BACA,6BACA,6BACA,4BACA,6BACA,wCACA,8BACA,8BACA,8BACA,8BACA,6BACA,6BACA,6BACA,6BACA,4BACA,6BACA,uCACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,4BACA,4BACA,4BACA,uCACA,6BACA,6BACA,6BACA,6BACA,4BACA,4BACA,2BACA,2BACA,2BACA,2BACA,sCACA,kCACA,kCACA,kCACA,kCACA,kCACA,iCACA,iCACA,gCACA,gCACA,iCACA,2CACA,8BACA,8BACA,8BACA,8BACA,8BACA,8BACA,6BACA,4BACA,4BACA,6BACA,uCACA,oCACA,oCACA,oCACA,oCACA,oCACA,oCACA,mCACA,mCACA,mCACA,oCACA,6CACA,gCACA,gCACA,gCACA,gCACA,gCACA,gCACA,+BACA,6BACA,6BACA,8BACA,yCACA,2BACA,qBACA,+BACA,uCACA,iCACA,0CACA,kCACA,0CACA,gCACA,wCACA,gDACA,gDACA,+CACA,+CACA,+CACA,+CACA,8CACA,6CACA,8CACA,4CACA,gDACA,0CACA,wBACA,yBACA,yBACA,yBACA,uBACA,uBACA,uFAGA,uFAGA,yFAGA,gEACA,mEACA,uDACA,uDACA,uDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,wDACA,yDACA,mBACA,gCACA,gCACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,0DACA,2DACA,4BACA,wBACA,4BACA,4BACA,2BACA,4BACA,0BACA,4BACA,0BACA,2BACA,2BACA,wBACA,6BACA,6BACA,4BACA,4BACA,4BACA,0BACA,0BACA,0BACA,0BACA,0BACA,kCACA,kDAMA,8BACA,yEAIA,0EAIA,0CACA,qDACA,oDACA,oDACA,oDACA,oDACA,8CACA,uDACA,6CACA,+CACA,+CACA,iDAIA,iDACA,uDACA,sDAIA,4DAIA,qDAIA,2DAIA,mDAIA,uDACA,+CACA,uDAKA,+CACA,8CACA,oDACA,qDACA,kDAKA,kDACA,0DAKA,kDACA,gEAKA,iEAKA,6DAIA,8DACA,iEAKA,kEAKA,+DAKA,2EAKA,qEAKA,iFAKA,qEAKA,iFAKA,iEAKA,6EAKA,+DAKA,+DAKA,oEAKA,+DAKA,8CACA,oDACA,sDACA,uDACA,yDAKA,wDACA,2DAKA,wDAKA,gEAKA,qDAKA,2DAKA,0DAKA,oDACA,+DAKA,oDACA,uDACA,oDACA,+DAKA,8DAKA,8CACA,oDACA,qDACA,wDACA,yDAKA,+DAKA,qDAKA,2DAKA,0DAKA,sDAKA,kEAKA,4DAKA,6DAKA,+DAKA,0DAKA,uDAKA,yDAKA,+DAKA,wDAKA,8DAKA,2DAKA,yDAKA,uDACA,0DACA,4EAIA,2CACA,2CACA,6CACA,sDACA,qDACA,sDAIA,kDACA,0DAIA,iDACA,2DAIA,iEAIA,iEAIA,kEAIA,iEAIA,oDAIA,mDAIA,yDAIA,sDAIA,+CACA,yDAIA,yCACA,mDACA,2DAIA,+CACA,iDACA,uDACA,oDAIA,oDAIA,0DAIA,0CACA,gDACA,uDACA,0DACA,yDAGA,mDAIA,yDAIA,yDAIA,0DAIA,kDACA,0DAIA,wDACA,8CACA,oDACA,oDACA,qDACA,sDACA,0DAIA,gEAIA,gEAIA,iEAIA,kEAIA,0DACA,kEAIA,kEAIA,mEAIA,2DACA,mEAIA,mEAIA,uDACA,6DACA,6DACA,8DACA,iEAIA,8DACA,sEAIA,sEAIA,uEAIA,qDACA,sDACA,mDACA,6DACA,kDACA,uDACA,4DACA,yDACA,gEAIA,yDACA,iEAIA,iEAIA,kEAIA,0DACA,kEAIA,kEAIA,sDACA,sEAIA,uEACA,mFACA,qFACA,kGACA,yFACA,iFACA,6FACA,+FACA,4GAGA,uFACA,6FACA,8FACA,yGAGA,yGAGA,6EACA,wFACA,iEAIA,mEAIA,0DAIA,0DAIA,2EC3xBA,0CADD,MAEE,0DCCF,qCACC,MAEC,iDACA,uDACA,uDACA,wDACA,kDACA,wDACA,wDAGA,2DACA,iEACA,iEAGA,iEC1BF,qBACC,kBCED,qXAuEC,SACA,SACA,UACA,wBAGD,+BAQC,SACA,oBACA,SACA,UACA,wBAID,8EAWC,cAGD,MAEC,gBAGD,aAEC,YAGD,wDAIC,aAGD,MACC,yBACA,iBAKD,KACC,SACA,sBACA,aACA,iCACA,qCACA,mCACA,SACA,UACA,wBAGD,kBACC,oCAGD,qBAGC,mBCtJD,+BCgHC,QANmB,KDtGpB,sCC4GC,QAHoB,YDrGrB,6BCoFC,mBACA,QAPmB,KASnB,+BACC,oBDpFF,oCCgFC,mBACA,QAJoB,YAMpB,sCACC,oBC9FD,+BDgCA,iCACA,2CACA,+CACA,0DACA,2DCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DCpCA,+BDgCA,iCACA,oCACA,+CACA,4CACA,oDCpCA,8BDgCA,iCACA,0CACA,+CACA,4CACA,0DC/BD,6BDqEC,gDACA,oDEnBD,MACC,kEACA,gEAaA,wKA1CA,WA7B4B,sBAgC3B,UAhC2B,sBA4C5B,uDACA,8CACA,gBACA,oBACA,oBACA,iCACA,oBACA,mBA6BA,sbAMC,0EAMF,qDA/DC,WA5B0B,sBAgG3B,4BApEC,WA5B0B,sBA+BzB,UA/ByB,sBAqG3B,qDAzEC,WAxB0B,oDAsG3B,4BA9EC,WAxB0B,oDA2BzB,UA3ByB,oDA2G3B,0FAnFC,WAvB2B,sBA0B1B,UA1B0B","file":"foundation.min.css"}
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"border-radius": {
|
|
29
29
|
"tight": {
|
|
30
30
|
"$value": "{radii.01}",
|
|
31
|
-
"$description": "
|
|
31
|
+
"$description": "When the content has tight spacing considerations."
|
|
32
32
|
},
|
|
33
33
|
"content": {
|
|
34
34
|
"$value": "{radii.02}",
|
|
35
|
-
"$description": "
|
|
35
|
+
"$description": "For elements that are static content."
|
|
36
36
|
},
|
|
37
37
|
"content-large": {
|
|
38
38
|
"$value": "{radii.03}",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
},
|
|
41
41
|
"functional": {
|
|
42
42
|
"$value": "{radii.03}",
|
|
43
|
-
"$description": "
|
|
43
|
+
"$description": "For interactive elements. If a component can be both static and functional (e.g., Avatars), use the functional token over the \"Content\" token."
|
|
44
44
|
},
|
|
45
45
|
"functional-large": {
|
|
46
46
|
"$value": "{radii.04}",
|
|
@@ -48,15 +48,15 @@
|
|
|
48
48
|
},
|
|
49
49
|
"container": {
|
|
50
50
|
"$value": "{radii.04}",
|
|
51
|
-
"$description": "
|
|
51
|
+
"$description": "For components/elements that are shells, meaning that the element itself doesn't typically know or care what the child elements are and simply provide a bounding element, for example, drawers, popovers, etc."
|
|
52
52
|
},
|
|
53
53
|
"container-large": {
|
|
54
54
|
"$value": "{radii.05}",
|
|
55
|
-
"$description": "
|
|
55
|
+
"$description": "For components/elements that are large, shell containers (e.g., modals or other near full-page elements)."
|
|
56
56
|
},
|
|
57
57
|
"rounded": {
|
|
58
58
|
"$value": "{radii.07}",
|
|
59
|
-
"$description": "
|
|
59
|
+
"$description": "For components/elements that intentionally have an overly rounded appearance. Special note for elements that are pure circles (e.g. spinner, radio button, etc.), in these cases use a component token overwrite to make it 100% rounded."
|
|
60
60
|
},
|
|
61
61
|
"rounded-large": {
|
|
62
62
|
"$value": "{radii.08}",
|