@muraldevkit/ds-foundation 2.21.0 → 2.23.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 (12) hide show
  1. package/dist/foundation.css +44 -39
  2. package/dist/foundation.css.map +1 -1
  3. package/dist/foundation.min.css +1 -1
  4. package/dist/foundation.min.css.map +1 -1
  5. package/dist/tokens/contextual-variables/color.json +68 -44
  6. package/dist/tokens/contextual-variables/shadows.json +2 -2
  7. package/dist/tokens/contextual-variables/spacing.json +78 -74
  8. package/dist/tokens/contextual-variables/typography.json +9 -7
  9. package/dist/tokens/global-variables/color.json +50 -46
  10. package/dist/tokens/global-variables/shadows.json +22 -20
  11. package/package.json +1 -1
  12. package/src/styles/_tokens.scss +54 -48
package/dist/foundation.css CHANGED
@@ -1,3 +1,4 @@
1
+ @charset "UTF-8";
1
2
  /**
2
3
  * Do not edit directly, this file was auto-generated.
3
4
  */
@@ -288,17 +289,25 @@
288
289
  ); /** Skeleton placeholder background on inverse surfaces. */
289
290
  --mrl-color-background: rgba(var(--mrl-white), 1); /** Default surface background. */
290
291
  --mrl-color-background-secondary: rgba(
291
- var(--mrl-gray-80),
292
+ var(--mrl-gray-10),
292
293
  1
293
294
  ); /** Secondary surface background. */
294
295
  --mrl-color-background-decorative: rgba(
295
- var(--mrl-gray-20),
296
+ var(--mrl-blue-10),
296
297
  1
297
298
  ); /** Background for decorative, non-interactive surfaces. */
298
- --mrl-color-background-highlight-secondary: rgba(
299
- var(--mrl-blue-10),
299
+ --mrl-color-background-active: var(
300
+ --mrl-black-opacity-01
301
+ ); /** Background, active/pressed state. */
302
+ --mrl-color-background-selected: rgba(var(--mrl-gray-100), 1); /** Background, selected state. */
303
+ --mrl-color-background-emph-hover: rgba(
304
+ var(--mrl-gray-10),
305
+ 1
306
+ ); /** Emphasized background, hover state. */
307
+ --mrl-color-background-emph-active: rgba(
308
+ var(--mrl-gray-20),
300
309
  1
301
- ); /** Secondary highlight background. */
310
+ ); /** Emphasized background, active state. */
302
311
  --mrl-color-background-info: rgba(
303
312
  var(--mrl-status-info),
304
313
  1
@@ -347,22 +356,6 @@
347
356
  var(--mrl-gray-40),
348
357
  1
349
358
  ); /** Background for disabled controls. */
350
- --mrl-color-background-highlight-hover: rgba(
351
- var(--mrl-gray-20),
352
- 1
353
- ); /** Highlight background, hover state. */
354
- --mrl-color-background-highlight-active: rgba(
355
- var(--mrl-gray-90),
356
- 1
357
- ); /** Highlight background, active/pressed state. */
358
- --mrl-color-background-highlight-selected: rgba(
359
- var(--mrl-gray-100),
360
- 1
361
- ); /** Highlight background, selected state. */
362
- --mrl-color-background-highlight-emph-active: rgba(
363
- var(--mrl-gray-30),
364
- 1
365
- ); /** Emphasized highlight background, active state. */
366
359
  --mrl-color-line: rgba(var(--mrl-gray-70), 1); /** Default line/border color. */
367
360
  --mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /** Line color, hover state. */
368
361
  --mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /** Line color, active state. */
@@ -394,6 +387,10 @@
394
387
  --mrl-color-icon-light: rgba(var(--mrl-gray-70), 1); /** Light icon color. */
395
388
  --mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1); /** Icon color for disabled controls. */
396
389
  --mrl-color-icon-inverse: rgba(var(--mrl-white), 1); /** Icon color on inverse surfaces. */
390
+ --mrl-color-icon-emph-selected: rgba(
391
+ var(--mrl-gray-100),
392
+ 1
393
+ ); /** Emphasized icon color, selected state. */
397
394
  --mrl-color-input-icon-default: rgba(
398
395
  var(--mrl-gray-70),
399
396
  1
@@ -478,14 +475,7 @@
478
475
  --mrl-color-text-error: rgba(var(--mrl-status-error), 1); /** Text color for error messages. */
479
476
  --mrl-color-text-info: rgba(var(--mrl-status-info), 1); /** Text color for info messages. */
480
477
  --mrl-color-text-private: rgba(var(--mrl-gray-100), 1); /** Text color for private content. */
481
- --mrl-color-icon-emph-selected: rgba(
482
- var(--mrl-gray-100),
483
- 1
484
- ); /** Emphasized icon color, selected state. */
485
- --mrl-color-background-hover-opacity: rgba(
486
- var(--mrl-gray-30),
487
- 0.2
488
- ); /** Hover overlay at 20% opacity. */
478
+ --mrl-color-background-hover: var(--mrl-black-opacity-00); /** Hover overlay. */
489
479
  --mrl-color-background-inverse-hover-opacity: var(
490
480
  --mrl-black-opacity-02
491
481
  ); /** Inverse hover overlay using black-opacity-02. */
@@ -526,6 +516,13 @@
526
516
  --mrl-space-stack-related-small: var(
527
517
  --mrl-spacing-02
528
518
  ); /** Vertical stack spacing between closely related elements. */
519
+ --mrl-space-stack-subheading: var(
520
+ --mrl-spacing-05
521
+ ); /** Vertical stack spacing around subheadings. */
522
+ --mrl-space-stack-title: var(--mrl-spacing-07); /** Vertical stack spacing around titles. */
523
+ --mrl-space-stack-title-related: var(
524
+ --mrl-spacing-05
525
+ ); /** Vertical stack spacing between a title and related content. */
529
526
  --mrl-space-inset: var(--mrl-spacing-03); /** Default inset padding. */
530
527
  --mrl-space-inset-container: var(--mrl-spacing-08); /** Inset padding for containers. */
531
528
  --mrl-space-inset-container-large: var(
@@ -545,13 +542,6 @@
545
542
  ); /** Horizontal spacing between closely placed sibling elements. */
546
543
  --mrl-space-gutter: var(--mrl-spacing-04); /** Default grid/layout gutter. */
547
544
  --mrl-space-gutter-label: var(--mrl-spacing-05); /** Gutter spacing around labels. */
548
- --mrl-space-stack-subheading: var(
549
- --mrl-spacing-05
550
- ); /** Vertical stack spacing around subheadings. */
551
- --mrl-space-stack-title: var(--mrl-spacing-07); /** Vertical stack spacing around titles. */
552
- --mrl-space-stack-title-related: var(
553
- --mrl-spacing-05
554
- ); /** Vertical stack spacing between a title and related content. */
555
545
  --mrl-body-font: var(--mrl-font-family-01), sans-serif;
556
546
  --mrl-heading-font: var(--mrl-font-family-01), sans-serif;
557
547
  --mrl-heading-font-alt: var(--mrl-font-family-02), serif;
@@ -661,15 +651,30 @@
661
651
  var(--mrl-color-line-inverse-disabled); /** Inverse border shorthand, disabled state. */
662
652
  --mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus); /** Focus ring border shorthand. */
663
653
  --mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider); /** Divider line border shorthand. */
654
+ --mrl-color-background-highlight-secondary: var(
655
+ --mrl-color-background-decorative
656
+ ); /** Deprecated — use `background-decorative` instead. */
657
+ --mrl-color-background-highlight-hover: var(
658
+ --mrl-color-background-hover
659
+ ); /** Deprecated — use `background-hover` instead. */
660
+ --mrl-color-background-highlight-active: var(
661
+ --mrl-color-background-active
662
+ ); /** Deprecated — use `background-active` instead. */
663
+ --mrl-color-background-highlight-selected: var(
664
+ --mrl-color-background-selected
665
+ ); /** Deprecated — use `background-selected` instead. */
666
+ --mrl-color-background-highlight-emph-active: var(
667
+ --mrl-color-background-emph-active
668
+ ); /** Deprecated — use `background-emph-active` instead. */
669
+ --mrl-color-background-highlight-emph-selected: var(
670
+ --mrl-color-background-active
671
+ ); /** Deprecated — use `background-active` instead. */
664
672
  --mrl-color-background-inverse-active: var(
665
673
  --mrl-color-accent
666
674
  ); /** Inverse surface background, active state. */
667
675
  --mrl-color-background-inverse-selected: var(
668
676
  --mrl-color-accent
669
677
  ); /** Inverse surface background, selected state. */
670
- --mrl-color-background-highlight-emph-selected: var(
671
- --mrl-color-accent
672
- ); /** Emphasized highlight background, selected state. */
673
678
  --mrl-color-line-emph-selected: var(
674
679
  --mrl-color-accent
675
680
  ); /** Emphasized line color, selected state. */
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;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;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;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;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;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;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;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;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;EACA;EACA;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;AAAA;AAAA;AAAA,KAGG;EAEH;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;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;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;EAEH;AAAA;AAAA,KAEG;;;AC7vBH;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"}
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;EACA;EACA;EACA;EACA;AAAA;AAAA,KAEG;EAEH;EACA;AAAA;AAAA,KAEG;EAEH;EACA;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;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;AAAA;AAAA;AAAA,KAGG;EAEH;EACA;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;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;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;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;EACA;EACA;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;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;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;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;EAEH;AAAA;AAAA,KAEG;;;ACnwBH;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-80), 1 );--mrl-color-background-decorative: rgba( var(--mrl-gray-20), 1 );--mrl-color-background-highlight-secondary: rgba( var(--mrl-blue-10), 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-background-highlight-hover: rgba( var(--mrl-gray-20), 1 );--mrl-color-background-highlight-active: rgba( var(--mrl-gray-90), 1 );--mrl-color-background-highlight-selected: rgba( var(--mrl-gray-100), 1 );--mrl-color-background-highlight-emph-active: rgba( var(--mrl-gray-30), 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-highlight-secondary: 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-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-80), 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-highlight: rgba( var(--mrl-gray-80), 1 );--mrl-color-text-highlight-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-highlight-active: rgba( var(--mrl-white), 1 );--mrl-color-text-highlight-selected: rgba( var(--mrl-white), 1 );--mrl-color-text-highlight-emph: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-highlight-emph-hover: rgba( var(--mrl-gray-100), 1 );--mrl-color-text-highlight-emph-active: rgba( var(--mrl-black), 1 );--mrl-color-text-highlight-emph-selected: rgba( var(--mrl-white), 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-02: rgba(var(--mrl-gray-90), 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-icon-emph-selected: rgba( var(--mrl-gray-100), 1 );--mrl-color-background-hover-opacity: rgba( var(--mrl-gray-30), 0.2 );--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-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-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-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-background-highlight-emph-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-highlight-secondary: 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-80), 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-highlight: rgba( var(--mrl-gray-80), 1 );--mrl-color-text-highlight-hover: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-highlight-active: rgba( var(--mrl-white), 1 );--mrl-color-text-highlight-selected: rgba( var(--mrl-white), 1 );--mrl-color-text-highlight-emph: rgba( var(--mrl-gray-90), 1 );--mrl-color-text-highlight-emph-hover: rgba( var(--mrl-gray-100), 1 );--mrl-color-text-highlight-emph-active: rgba( var(--mrl-black), 1 );--mrl-color-text-highlight-emph-selected: rgba( var(--mrl-white), 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-02: rgba(var(--mrl-gray-90), 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-highlight-secondary: var( --mrl-color-background-decorative );--mrl-color-background-highlight-hover: var( --mrl-color-background-hover );--mrl-color-background-highlight-active: var( --mrl-color-background-active );--mrl-color-background-highlight-selected: var( --mrl-color-background-selected );--mrl-color-background-highlight-emph-active: var( --mrl-color-background-emph-active );--mrl-color-background-highlight-emph-selected: var( --mrl-color-background-active );--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 */
package/dist/foundation.min.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":"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,+CACA,iDACA,uDACA,oDACA,4DAIA,mDACA,2DAIA,iDACA,uDACA,+CACA,uDAKA,+CACA,8CACA,oDACA,qDACA,kDAKA,kDACA,0DAKA,kDACA,gEAKA,iEAKA,0EAKA,+DAKA,2EAKA,qEAKA,iFAKA,qEAKA,iFAKA,iEAKA,6EAKA,+DAKA,+DAKA,oEAKA,+DAKA,sEAKA,uEAKA,0EAKA,4EAKA,8CACA,oDACA,sDACA,uDACA,uDACA,oEAKA,sDACA,gEAKA,mDACA,2DAKA,0DAKA,oDACA,+DAKA,oDACA,uDACA,oDACA,8DAKA,8CACA,oDACA,qDACA,wDACA,uDACA,+DAKA,mDACA,2DAKA,0DAKA,0DAKA,gEAKA,+DAKA,iEAKA,+DAKA,sEAKA,oEAKA,sEAKA,oDACA,kEAKA,0DACA,6DAKA,+DAKA,iDACA,wDACA,qDACA,uDACA,+DAKA,sDACA,8DAKA,yDACA,uDACA,uDACA,+DAKA,sEAKA,4EAIA,2CACA,2CACA,6CACA,sDACA,qDACA,sDAIA,kDACA,0DAIA,iDACA,2DAIA,iEAIA,iEAIA,kEAIA,iEAIA,oDAIA,mDAIA,yDAIA,yCACA,mDACA,2DAIA,+CACA,iDACA,uDACA,oDAIA,oDAIA,0DAIA,0CACA,gDACA,sDAIA,+CACA,yDAIA,uDACA,0DACA,yDACA,iDACA,uDACA,uDACA,wDACA,kDACA,wDACA,wDACA,8CACA,oDACA,oDACA,qDACA,sDACA,wDACA,8DACA,8DACA,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,0EAIA,0DAIA,0DAIA,2EC3vBA,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"}
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,+CACA,iDACA,uDACA,oDACA,4DAIA,mDACA,2DAIA,iDACA,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,uDACA,oEAKA,sDACA,gEAKA,mDACA,2DAKA,0DAKA,oDACA,+DAKA,oDACA,uDACA,oDACA,+DAKA,8DAKA,8CACA,oDACA,qDACA,wDACA,uDACA,+DAKA,mDACA,2DAKA,0DAKA,0DAKA,gEAKA,+DAKA,iEAKA,+DAKA,sEAKA,oEAKA,sEAKA,oDACA,kEAKA,0DACA,6DAKA,+DAKA,iDACA,wDACA,qDACA,uDACA,+DAKA,sDACA,8DAKA,yDACA,uDACA,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,yDACA,iDACA,uDACA,uDACA,wDACA,kDACA,wDACA,wDACA,8CACA,oDACA,oDACA,qDACA,sDACA,wDACA,8DACA,8DACA,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,qFAIA,4EAIA,8EAIA,kFAIA,wFAIA,qFAIA,iEAIA,mEAIA,0DAIA,0DAIA,2ECjwBA,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"}
package/dist/tokens/contextual-variables/color.json CHANGED
@@ -41,16 +41,58 @@
41
41
  "$description": "Default surface background."
42
42
  },
43
43
  "background-secondary": {
44
- "$value": "rgba({gray.80}, 1)",
44
+ "$value": "rgba({gray.10}, 1)",
45
45
  "$description": "Secondary surface background."
46
46
  },
47
47
  "background-decorative": {
48
- "$value": "rgba({gray.20}, 1)",
48
+ "$value": "rgba({blue.10}, 1)",
49
49
  "$description": "Background for decorative, non-interactive surfaces."
50
50
  },
51
- "background-highlight-secondary": {
52
- "$value": "rgba({blue.10}, 1)",
53
- "$description": "Secondary highlight background."
51
+ "background-active": {
52
+ "$value": "{black-opacity.01}",
53
+ "$description": "Background, active/pressed state."
54
+ },
55
+ "background-selected": {
56
+ "$value": "rgba({gray.100}, 1)",
57
+ "$description": "Background, selected state."
58
+ },
59
+ "background-highlight": {
60
+ "secondary": {
61
+ "$value": "{color.background-decorative}",
62
+ "$description": "Deprecated — use `background-decorative` instead."
63
+ },
64
+ "hover": {
65
+ "$value": "{color.background-hover}",
66
+ "$description": "Deprecated — use `background-hover` instead."
67
+ },
68
+ "active": {
69
+ "$value": "{color.background-active}",
70
+ "$description": "Deprecated — use `background-active` instead."
71
+ },
72
+ "selected": {
73
+ "$value": "{color.background-selected}",
74
+ "$description": "Deprecated — use `background-selected` instead."
75
+ },
76
+ "emph": {
77
+ "active": {
78
+ "$value": "{color.background-emph.active}",
79
+ "$description": "Deprecated — use `background-emph-active` instead."
80
+ },
81
+ "selected": {
82
+ "$value": "{color.background-active}",
83
+ "$description": "Deprecated — use `background-active` instead."
84
+ }
85
+ }
86
+ },
87
+ "background-emph": {
88
+ "hover": {
89
+ "$value": "rgba({gray.10}, 1)",
90
+ "$description": "Emphasized background, hover state."
91
+ },
92
+ "active": {
93
+ "$value": "rgba({gray.20}, 1)",
94
+ "$description": "Emphasized background, active state."
95
+ }
54
96
  },
55
97
  "background-info": {
56
98
  "$value": "rgba({status.info}, 1)",
@@ -100,22 +142,6 @@
100
142
  "$value": "rgba({gray.40}, 1)",
101
143
  "$description": "Background for disabled controls."
102
144
  },
103
- "background-highlight-hover": {
104
- "$value": "rgba({gray.20}, 1)",
105
- "$description": "Highlight background, hover state."
106
- },
107
- "background-highlight-active": {
108
- "$value": "rgba({gray.90}, 1)",
109
- "$description": "Highlight background, active/pressed state."
110
- },
111
- "background-highlight-selected": {
112
- "$value": "rgba({gray.100}, 1)",
113
- "$description": "Highlight background, selected state."
114
- },
115
- "background-highlight-emph-active": {
116
- "$value": "rgba({gray.30}, 1)",
117
- "$description": "Emphasized highlight background, active state."
118
- },
119
145
  "line": {
120
146
  "$value": "rgba({gray.70}, 1)",
121
147
  "$description": "Default line/border color."
@@ -168,17 +194,23 @@
168
194
  "$value": "rgba({white}, 1)",
169
195
  "$description": "Line color for disabled controls on inverse surfaces."
170
196
  },
171
- "icon-light": {
172
- "$value": "rgba({gray.70}, 1)",
173
- "$description": "Light icon color."
174
- },
175
- "icon-disabled": {
176
- "$value": "rgba({gray.40}, 1)",
177
- "$description": "Icon color for disabled controls."
178
- },
179
- "icon-inverse": {
180
- "$value": "rgba({white}, 1)",
181
- "$description": "Icon color on inverse surfaces."
197
+ "icon": {
198
+ "light": {
199
+ "$value": "rgba({gray.70}, 1)",
200
+ "$description": "Light icon color."
201
+ },
202
+ "disabled": {
203
+ "$value": "rgba({gray.40}, 1)",
204
+ "$description": "Icon color for disabled controls."
205
+ },
206
+ "inverse": {
207
+ "$value": "rgba({white}, 1)",
208
+ "$description": "Icon color on inverse surfaces."
209
+ },
210
+ "emph-selected": {
211
+ "$value": "rgba({gray.100}, 1)",
212
+ "$description": "Emphasized icon color, selected state."
213
+ }
182
214
  },
183
215
  "input-icon-default": {
184
216
  "$value": "rgba({gray.70}, 1)",
@@ -312,10 +344,6 @@
312
344
  "$value": "rgba({gray.100}, 1)",
313
345
  "$description": "Text color for private content."
314
346
  },
315
- "icon-emph-selected": {
316
- "$value": "rgba({gray.100}, 1)",
317
- "$description": "Emphasized icon color, selected state."
318
- },
319
347
  "background-inverse-active": {
320
348
  "$value": "{color.accent}",
321
349
  "$description": "Inverse surface background, active state."
@@ -324,10 +352,6 @@
324
352
  "$value": "{color.accent}",
325
353
  "$description": "Inverse surface background, selected state."
326
354
  },
327
- "background-highlight-emph-selected": {
328
- "$value": "{color.accent}",
329
- "$description": "Emphasized highlight background, selected state."
330
- },
331
355
  "line-emph-selected": {
332
356
  "$value": "{color.accent}",
333
357
  "$description": "Emphasized line color, selected state."
@@ -340,12 +364,12 @@
340
364
  "$value": "rgb(243, 245, 246)",
341
365
  "$description": "Intentional one-off page background (#f3f5f6)."
342
366
  },
343
- "background-hover-opacity": {
344
- "$value": "rgba({gray.30}, 0.2)",
345
- "$description": "Hover overlay at 20% opacity."
367
+ "background-hover": {
368
+ "$value": "{black-opacity.00}",
369
+ "$description": "Hover overlay."
346
370
  },
347
371
  "background-inverse-hover-opacity": {
348
- "$value": "{black-opacity-02}",
372
+ "$value": "{black-opacity.02}",
349
373
  "$description": "Inverse hover overlay using black-opacity-02."
350
374
  }
351
375
  }
package/dist/tokens/contextual-variables/shadows.json CHANGED
@@ -18,12 +18,12 @@
18
18
  },
19
19
  "hover": {
20
20
  "$type": "shadow",
21
- "$value": "{shadow.interactive-01}",
21
+ "$value": "{shadow.interactive.01}",
22
22
  "$description": "Contextual shadow token."
23
23
  },
24
24
  "drag": {
25
25
  "$type": "shadow",
26
- "$value": "{shadow.interactive-02}",
26
+ "$value": "{shadow.interactive.02}",
27
27
  "$description": "Contextual shadow token."
28
28
  }
29
29
  }
package/dist/tokens/contextual-variables/spacing.json CHANGED
@@ -4,53 +4,67 @@
4
4
  "$value": "1px",
5
5
  "$description": "Focus ring offset. No global spacing token for 1px, so this is hard-coded."
6
6
  },
7
- "stack-components": {
8
- "$value": "{spacing.06}",
9
- "$description": "Vertical stack spacing between components."
10
- },
11
- "stack-controls": {
12
- "$value": "{spacing.05}",
13
- "$description": "Vertical stack spacing between controls."
14
- },
15
- "stack-controls-small": {
16
- "$value": "{spacing.04}",
17
- "$description": "Vertical stack spacing between small controls."
18
- },
19
- "stack-section": {
20
- "$value": "{spacing.07}",
21
- "$description": "Vertical stack spacing between sections."
22
- },
23
- "stack-section-divider": {
24
- "$value": "{spacing.04}",
25
- "$description": "Vertical stack spacing around section dividers."
26
- },
27
- "stack-section-divider-small": {
28
- "$value": "{spacing.03}",
29
- "$description": "Vertical stack spacing around small section dividers."
30
- },
31
- "stack-section-divider-large": {
32
- "$value": "{spacing.06}",
33
- "$description": "Vertical stack spacing around large section dividers."
34
- },
35
- "stack-section-divider-xlarge": {
36
- "$value": "{spacing.08}",
37
- "$description": "Vertical stack spacing around xlarge section dividers."
38
- },
39
- "stack-section-divider-label": {
40
- "$value": "{spacing.05}",
41
- "$description": "Vertical stack spacing around section divider labels."
42
- },
43
- "stack-siblings": {
44
- "$value": "{spacing.04}",
45
- "$description": "Vertical stack spacing between sibling elements."
46
- },
47
- "stack-related": {
48
- "$value": "{spacing.03}",
49
- "$description": "Vertical stack spacing between related elements."
50
- },
51
- "stack-related-small": {
52
- "$value": "{spacing.02}",
53
- "$description": "Vertical stack spacing between closely related elements."
7
+ "stack": {
8
+ "components": {
9
+ "$value": "{spacing.06}",
10
+ "$description": "Vertical stack spacing between components."
11
+ },
12
+ "controls": {
13
+ "$value": "{spacing.05}",
14
+ "$description": "Vertical stack spacing between controls."
15
+ },
16
+ "controls-small": {
17
+ "$value": "{spacing.04}",
18
+ "$description": "Vertical stack spacing between small controls."
19
+ },
20
+ "section": {
21
+ "$value": "{spacing.07}",
22
+ "$description": "Vertical stack spacing between sections."
23
+ },
24
+ "section-divider": {
25
+ "$value": "{spacing.04}",
26
+ "$description": "Vertical stack spacing around section dividers."
27
+ },
28
+ "section-divider-small": {
29
+ "$value": "{spacing.03}",
30
+ "$description": "Vertical stack spacing around small section dividers."
31
+ },
32
+ "section-divider-large": {
33
+ "$value": "{spacing.06}",
34
+ "$description": "Vertical stack spacing around large section dividers."
35
+ },
36
+ "section-divider-xlarge": {
37
+ "$value": "{spacing.08}",
38
+ "$description": "Vertical stack spacing around xlarge section dividers."
39
+ },
40
+ "section-divider-label": {
41
+ "$value": "{spacing.05}",
42
+ "$description": "Vertical stack spacing around section divider labels."
43
+ },
44
+ "siblings": {
45
+ "$value": "{spacing.04}",
46
+ "$description": "Vertical stack spacing between sibling elements."
47
+ },
48
+ "related": {
49
+ "$value": "{spacing.03}",
50
+ "$description": "Vertical stack spacing between related elements."
51
+ },
52
+ "related-small": {
53
+ "$value": "{spacing.02}",
54
+ "$description": "Vertical stack spacing between closely related elements."
55
+ },
56
+ "subheading": {
57
+ "$value": "{spacing.05}",
58
+ "$description": "Vertical stack spacing around subheadings."
59
+ },
60
+ "title": {
61
+ "$value": "{spacing.07}",
62
+ "$description": "Vertical stack spacing around titles."
63
+ },
64
+ "title-related": {
65
+ "$value": "{spacing.05}",
66
+ "$description": "Vertical stack spacing between a title and related content."
67
+ }
54
68
  },
55
69
  "inset": {
56
70
  "$value": "{spacing.03}",
@@ -80,21 +94,23 @@
80
94
  "$value": "calc(10 / var(--mrl-baseline) * 1rem)",
81
95
  "$description": "Inset padding for small controls (form inputs, buttons). No global spacing token for 10px, so this is hard-coded."
82
96
  },
83
- "inline-related": {
84
- "$value": "{spacing.03}",
85
- "$description": "Horizontal spacing between related elements."
86
- },
87
- "inline-sibling": {
88
- "$value": "{spacing.04}",
89
- "$description": "Horizontal spacing between sibling elements."
90
- },
91
- "inline-sibling-small": {
92
- "$value": "{spacing.02}",
93
- "$description": "Horizontal spacing between closely placed sibling elements."
94
- },
95
- "inline-sibling-xsmall": {
96
- "$value": "{space.inline-sibling-small}",
97
- "$description": "Horizontal spacing between very closely placed sibling elements."
97
+ "inline": {
98
+ "related": {
99
+ "$value": "{spacing.03}",
100
+ "$description": "Horizontal spacing between related elements."
101
+ },
102
+ "sibling": {
103
+ "$value": "{spacing.04}",
104
+ "$description": "Horizontal spacing between sibling elements."
105
+ },
106
+ "sibling-small": {
107
+ "$value": "{spacing.02}",
108
+ "$description": "Horizontal spacing between closely placed sibling elements."
109
+ },
110
+ "sibling-xsmall": {
111
+ "$value": "{space.inline.sibling-small}",
112
+ "$description": "Horizontal spacing between very closely placed sibling elements."
113
+ }
98
114
  },
99
115
  "gutter": {
100
116
  "$value": "{spacing.04}",
@@ -103,18 +119,6 @@
103
119
  "gutter-label": {
104
120
  "$value": "{spacing.05}",
105
121
  "$description": "Gutter spacing around labels."
106
- },
107
- "stack-subheading": {
108
- "$value": "{spacing.05}",
109
- "$description": "Vertical stack spacing around subheadings."
110
- },
111
- "stack-title": {
112
- "$value": "{spacing.07}",
113
- "$description": "Vertical stack spacing around titles."
114
- },
115
- "stack-title-related": {
116
- "$value": "{spacing.05}",
117
- "$description": "Vertical stack spacing between a title and related content."
118
122
  }
119
123
  }
120
124
  }
package/dist/tokens/contextual-variables/typography.json CHANGED
@@ -4,13 +4,15 @@
4
4
  "$value": "{font-family.01}, sans-serif",
5
5
  "$type": "fontFamily"
6
6
  },
7
- "heading-font": {
8
- "$value": "{font-family.01}, sans-serif",
9
- "$type": "fontFamily"
10
- },
11
- "heading-font-alt": {
12
- "$value": "{font-family.02}, serif",
13
- "$type": "fontFamily"
7
+ "heading": {
8
+ "font": {
9
+ "$value": "{font-family.01}, sans-serif",
10
+ "$type": "fontFamily"
11
+ },
12
+ "font-alt": {
13
+ "$value": "{font-family.02}, serif",
14
+ "$type": "fontFamily"
15
+ }
14
16
  },
15
17
  "type-size": {
16
18
  "$description": "Typography - Font Size",
package/dist/tokens/global-variables/color.json CHANGED
@@ -585,52 +585,56 @@
585
585
  "$description": "Color token."
586
586
  }
587
587
  },
588
- "white-opacity-02": {
589
- "$value": "rgba({white}, 0.24)",
590
- "$description": "Color token."
591
- },
592
- "white-opacity-03": {
593
- "$value": "rgba({white}, 0.3)",
594
- "$description": "Color token."
595
- },
596
- "white-opacity-04": {
597
- "$value": "rgba({white}, 0.4)",
598
- "$description": "Color token."
599
- },
600
- "white-opacity-06": {
601
- "$value": "rgba({white}, 0.6)",
602
- "$description": "Color token."
603
- },
604
- "white-opacity-08": {
605
- "$value": "rgba({white}, 0.8)",
606
- "$description": "Color token."
607
- },
608
- "black-opacity-00": {
609
- "$value": "rgba(42, 82, 121, 0.06)",
610
- "$description": "Color token."
611
- },
612
- "black-opacity-01": {
613
- "$value": "rgba(42, 82, 121, 0.12)",
614
- "$description": "Color token."
615
- },
616
- "black-opacity-02": {
617
- "$value": "rgba(21, 57, 75, 0.24)",
618
- "$description": "Color token."
619
- },
620
- "black-opacity-03": {
621
- "$value": "rgba(11, 41, 70, 0.32)",
622
- "$description": "Color token."
623
- },
624
- "black-opacity-05": {
625
- "$value": "rgba(31, 51, 71, 0.56)",
626
- "$description": "Color token."
627
- },
628
- "black-opacity-06": {
629
- "$value": "rgba(21, 41, 60, 0.64)",
630
- "$description": "Color token."
588
+ "white-opacity": {
589
+ "02": {
590
+ "$value": "rgba({white}, 0.24)",
591
+ "$description": "Color token."
592
+ },
593
+ "03": {
594
+ "$value": "rgba({white}, 0.3)",
595
+ "$description": "Color token."
596
+ },
597
+ "04": {
598
+ "$value": "rgba({white}, 0.4)",
599
+ "$description": "Color token."
600
+ },
601
+ "06": {
602
+ "$value": "rgba({white}, 0.6)",
603
+ "$description": "Color token."
604
+ },
605
+ "08": {
606
+ "$value": "rgba({white}, 0.8)",
607
+ "$description": "Color token."
608
+ }
631
609
  },
632
- "black-opacity-08": {
633
- "$value": "rgba(24, 36, 47, 0.8)",
634
- "$description": "Color token."
610
+ "black-opacity": {
611
+ "00": {
612
+ "$value": "rgba(42, 82, 121, 0.06)",
613
+ "$description": "Color token."
614
+ },
615
+ "01": {
616
+ "$value": "rgba(42, 82, 121, 0.12)",
617
+ "$description": "Color token."
618
+ },
619
+ "02": {
620
+ "$value": "rgba(21, 57, 75, 0.24)",
621
+ "$description": "Color token."
622
+ },
623
+ "03": {
624
+ "$value": "rgba(11, 41, 70, 0.32)",
625
+ "$description": "Color token."
626
+ },
627
+ "05": {
628
+ "$value": "rgba(31, 51, 71, 0.56)",
629
+ "$description": "Color token."
630
+ },
631
+ "06": {
632
+ "$value": "rgba(21, 41, 60, 0.64)",
633
+ "$description": "Color token."
634
+ },
635
+ "08": {
636
+ "$value": "rgba(24, 36, 47, 0.8)",
637
+ "$description": "Color token."
638
+ }
635
639
  }
636
640
  }
package/dist/tokens/global-variables/shadows.json CHANGED
@@ -60,27 +60,29 @@
60
60
  ],
61
61
  "$description": "Shadow token."
62
62
  },
63
- "interactive-01": {
64
- "$type": "shadow",
65
- "$value": {
66
- "offsetX": "0",
67
- "offsetY": "4px",
68
- "blur": "5px",
69
- "spread": "0",
70
- "color": "rgba(24, 36, 47, 0.08)"
71
- },
72
- "$description": "Shadow token."
73
- },
74
- "interactive-02": {
75
- "$type": "shadow",
76
- "$value": {
77
- "offsetX": "0",
78
- "offsetY": "12px",
79
- "blur": "20px",
80
- "spread": "0px",
81
- "color": "rgba(27, 57, 75, 0.2)"
63
+ "interactive": {
64
+ "01": {
65
+ "$type": "shadow",
66
+ "$value": {
67
+ "offsetX": "0",
68
+ "offsetY": "4px",
69
+ "blur": "5px",
70
+ "spread": "0",
71
+ "color": "rgba(24, 36, 47, 0.08)"
72
+ },
73
+ "$description": "Shadow token."
82
74
  },
83
- "$description": "Shadow token."
75
+ "02": {
76
+ "$type": "shadow",
77
+ "$value": {
78
+ "offsetX": "0",
79
+ "offsetY": "12px",
80
+ "blur": "20px",
81
+ "spread": "0px",
82
+ "color": "rgba(27, 57, 75, 0.2)"
83
+ },
84
+ "$description": "Shadow token."
85
+ }
84
86
  }
85
87
  }
86
88
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@muraldevkit/ds-foundation",
3
- "version": "2.21.0",
3
+ "version": "2.23.0",
4
4
  "description": "Mural's design system's Foundation package containing our design language features used across all components",
5
5
  "license": "https://www.mural.co/terms/developer-addendum",
6
6
  "scripts": {
package/src/styles/_tokens.scss CHANGED
@@ -300,19 +300,29 @@
300
300
 
301
301
  --mrl-color-background: rgba(var(--mrl-white), 1); /** Default surface background. */
302
302
  --mrl-color-background-secondary: rgba(
303
- var(--mrl-gray-80),
303
+ var(--mrl-gray-10),
304
304
  1
305
305
  ); /** Secondary surface background. */
306
306
 
307
307
  --mrl-color-background-decorative: rgba(
308
- var(--mrl-gray-20),
308
+ var(--mrl-blue-10),
309
309
  1
310
310
  ); /** Background for decorative, non-interactive surfaces. */
311
311
 
312
- --mrl-color-background-highlight-secondary: rgba(
313
- var(--mrl-blue-10),
312
+ --mrl-color-background-active: var(
313
+ --mrl-black-opacity-01
314
+ ); /** Background, active/pressed state. */
315
+
316
+ --mrl-color-background-selected: rgba(var(--mrl-gray-100), 1); /** Background, selected state. */
317
+ --mrl-color-background-emph-hover: rgba(
318
+ var(--mrl-gray-10),
314
319
  1
315
- ); /** Secondary highlight background. */
320
+ ); /** Emphasized background, hover state. */
321
+
322
+ --mrl-color-background-emph-active: rgba(
323
+ var(--mrl-gray-20),
324
+ 1
325
+ ); /** Emphasized background, active state. */
316
326
 
317
327
  --mrl-color-background-info: rgba(
318
328
  var(--mrl-status-info),
@@ -374,26 +384,6 @@
374
384
  1
375
385
  ); /** Background for disabled controls. */
376
386
 
377
- --mrl-color-background-highlight-hover: rgba(
378
- var(--mrl-gray-20),
379
- 1
380
- ); /** Highlight background, hover state. */
381
-
382
- --mrl-color-background-highlight-active: rgba(
383
- var(--mrl-gray-90),
384
- 1
385
- ); /** Highlight background, active/pressed state. */
386
-
387
- --mrl-color-background-highlight-selected: rgba(
388
- var(--mrl-gray-100),
389
- 1
390
- ); /** Highlight background, selected state. */
391
-
392
- --mrl-color-background-highlight-emph-active: rgba(
393
- var(--mrl-gray-30),
394
- 1
395
- ); /** Emphasized highlight background, active state. */
396
-
397
387
  --mrl-color-line: rgba(var(--mrl-gray-70), 1); /** Default line/border color. */
398
388
  --mrl-color-line-hover: rgba(var(--mrl-gray-90), 1); /** Line color, hover state. */
399
389
  --mrl-color-line-active: rgba(var(--mrl-gray-100), 1); /** Line color, active state. */
@@ -430,6 +420,11 @@
430
420
  --mrl-color-icon-light: rgba(var(--mrl-gray-70), 1); /** Light icon color. */
431
421
  --mrl-color-icon-disabled: rgba(var(--mrl-gray-40), 1); /** Icon color for disabled controls. */
432
422
  --mrl-color-icon-inverse: rgba(var(--mrl-white), 1); /** Icon color on inverse surfaces. */
423
+ --mrl-color-icon-emph-selected: rgba(
424
+ var(--mrl-gray-100),
425
+ 1
426
+ ); /** Emphasized icon color, selected state. */
427
+
433
428
  --mrl-color-input-icon-default: rgba(
434
429
  var(--mrl-gray-70),
435
430
  1
@@ -531,16 +526,7 @@
531
526
  --mrl-color-text-error: rgba(var(--mrl-status-error), 1); /** Text color for error messages. */
532
527
  --mrl-color-text-info: rgba(var(--mrl-status-info), 1); /** Text color for info messages. */
533
528
  --mrl-color-text-private: rgba(var(--mrl-gray-100), 1); /** Text color for private content. */
534
- --mrl-color-icon-emph-selected: rgba(
535
- var(--mrl-gray-100),
536
- 1
537
- ); /** Emphasized icon color, selected state. */
538
-
539
- --mrl-color-background-hover-opacity: rgba(
540
- var(--mrl-gray-30),
541
- 0.2
542
- ); /** Hover overlay at 20% opacity. */
543
-
529
+ --mrl-color-background-hover: var(--mrl-black-opacity-00); /** Hover overlay. */
544
530
  --mrl-color-background-inverse-hover-opacity: var(
545
531
  --mrl-black-opacity-02
546
532
  ); /** Inverse hover overlay using black-opacity-02. */
@@ -592,6 +578,15 @@
592
578
  --mrl-spacing-02
593
579
  ); /** Vertical stack spacing between closely related elements. */
594
580
 
581
+ --mrl-space-stack-subheading: var(
582
+ --mrl-spacing-05
583
+ ); /** Vertical stack spacing around subheadings. */
584
+
585
+ --mrl-space-stack-title: var(--mrl-spacing-07); /** Vertical stack spacing around titles. */
586
+ --mrl-space-stack-title-related: var(
587
+ --mrl-spacing-05
588
+ ); /** Vertical stack spacing between a title and related content. */
589
+
595
590
  --mrl-space-inset: var(--mrl-spacing-03); /** Default inset padding. */
596
591
  --mrl-space-inset-container: var(--mrl-spacing-08); /** Inset padding for containers. */
597
592
  --mrl-space-inset-container-large: var(
@@ -615,15 +610,6 @@
615
610
 
616
611
  --mrl-space-gutter: var(--mrl-spacing-04); /** Default grid/layout gutter. */
617
612
  --mrl-space-gutter-label: var(--mrl-spacing-05); /** Gutter spacing around labels. */
618
- --mrl-space-stack-subheading: var(
619
- --mrl-spacing-05
620
- ); /** Vertical stack spacing around subheadings. */
621
-
622
- --mrl-space-stack-title: var(--mrl-spacing-07); /** Vertical stack spacing around titles. */
623
- --mrl-space-stack-title-related: var(
624
- --mrl-spacing-05
625
- ); /** Vertical stack spacing between a title and related content. */
626
-
627
613
  --mrl-body-font: var(--mrl-font-family-01), sans-serif;
628
614
  --mrl-heading-font: var(--mrl-font-family-01), sans-serif;
629
615
  --mrl-heading-font-alt: var(--mrl-font-family-02), serif;
@@ -754,6 +740,30 @@
754
740
 
755
741
  --mrl-border-focus: var(--mrl-line-width-focus) solid var(--mrl-color-focus); /** Focus ring border shorthand. */
756
742
  --mrl-border-divider: var(--mrl-line-width-divider) solid var(--mrl-color-line-divider); /** Divider line border shorthand. */
743
+ --mrl-color-background-highlight-secondary: var(
744
+ --mrl-color-background-decorative
745
+ ); /** Deprecated — use `background-decorative` instead. */
746
+
747
+ --mrl-color-background-highlight-hover: var(
748
+ --mrl-color-background-hover
749
+ ); /** Deprecated — use `background-hover` instead. */
750
+
751
+ --mrl-color-background-highlight-active: var(
752
+ --mrl-color-background-active
753
+ ); /** Deprecated — use `background-active` instead. */
754
+
755
+ --mrl-color-background-highlight-selected: var(
756
+ --mrl-color-background-selected
757
+ ); /** Deprecated — use `background-selected` instead. */
758
+
759
+ --mrl-color-background-highlight-emph-active: var(
760
+ --mrl-color-background-emph-active
761
+ ); /** Deprecated — use `background-emph-active` instead. */
762
+
763
+ --mrl-color-background-highlight-emph-selected: var(
764
+ --mrl-color-background-active
765
+ ); /** Deprecated — use `background-active` instead. */
766
+
757
767
  --mrl-color-background-inverse-active: var(
758
768
  --mrl-color-accent
759
769
  ); /** Inverse surface background, active state. */
@@ -762,10 +772,6 @@
762
772
  --mrl-color-accent
763
773
  ); /** Inverse surface background, selected state. */
764
774
 
765
- --mrl-color-background-highlight-emph-selected: var(
766
- --mrl-color-accent
767
- ); /** Emphasized highlight background, selected state. */
768
-
769
775
  --mrl-color-line-emph-selected: var(
770
776
  --mrl-color-accent
771
777
  ); /** Emphasized line color, selected state. */