m3-svelte/package/misc/styles.css

M3 Svelte implements the Material 3 design system in Svelte. See the [website](https://ktibow.github.io/m3-svelte/) for demos and usage instructions.

/* Needed for elevation to work */
:root {
  --m3-util-elevation-0: none;
  --m3-util-elevation-1:
    0px 3px 1px -2px rgb(var(--m3-scheme-shadow) / 0.2),
    0px 2px 2px 0px rgb(var(--m3-scheme-shadow) / 0.14),
    0px 1px 5px 0px rgb(var(--m3-scheme-shadow) / 0.12);
  --m3-util-elevation-2:
    0px 2px 4px -1px rgb(var(--m3-scheme-shadow) / 0.2),
    0px 4px 5px 0px rgb(var(--m3-scheme-shadow) / 0.14),
    0px 1px 10px 0px rgb(var(--m3-scheme-shadow) / 0.12);
  --m3-util-elevation-3:
    0px 5px 5px -3px rgb(var(--m3-scheme-shadow) / 0.2),
    0px 8px 10px 1px rgb(var(--m3-scheme-shadow) / 0.14),
    0px 3px 14px 2px rgb(var(--m3-scheme-shadow) / 0.12);
  --m3-util-elevation-4:
    0px 5px 5px -3px rgb(var(--m3-scheme-shadow) / 0.2),
    0px 8px 10px 1px rgb(var(--m3-scheme-shadow) / 0.14),
    0px 3px 14px 2px rgb(var(--m3-scheme-shadow) / 0.12);
  --m3-util-elevation-5:
    0px 8px 10px -6px rgb(var(--m3-scheme-shadow) / 0.2),
    0px 16px 24px 2px rgb(var(--m3-scheme-shadow) / 0.14),
    0px 6px 30px 5px rgb(var(--m3-scheme-shadow) / 0.12);
  --m3-util-bottom-offset: 0;

  /*Shape*/
  --m3-util-rounding-none: 0;
  --m3-util-rounding-extra-small: 0.25rem;
  --m3-util-rounding-small: 0.5rem;
  --m3-util-rounding-medium: 0.75rem;
  --m3-util-rounding-large: 1rem;
  --m3-util-rounding-extra-large: 1.75rem;
  --m3-util-rounding-full: 100rem;

  --m3-font: Roboto, system-ui, sans-serif;

  accent-color: rgb(var(--m3-scheme-primary));
}
.m3-font-display-large,
.m3-font-display-medium,
.m3-font-display-small {
  font-family: var(--m3-font-display, var(--m3-font));
}
.m3-font-headline-large,
.m3-font-headline-medium,
.m3-font-headline-small {
  font-family: var(--m3-font-headline, var(--m3-font));
}
.m3-font-title-large,
.m3-font-title-medium,
.m3-font-title-small {
  font-family: var(--m3-font-title, var(--m3-font));
}
.m3-font-label-large,
.m3-font-label-medium,
.m3-font-label-small {
  font-family: var(--m3-font-label, var(--m3-font));
}
.m3-font-body-large,
.m3-font-body-medium,
.m3-font-body-small {
  font-family: var(--m3-font-body, var(--m3-font));
}
/* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
.m3-font-display-large {
  font-size: var(--m3-font-display-large-size, 3.563rem);
  line-height: var(--m3-font-display-large-height, 1.123);
  letter-spacing: var(--m3-font-display-large-tracking, 0);
  font-weight: var(--m3-font-display-large-weight, 400);
}
.m3-font-display-medium {
  font-size: var(--m3-font-display-medium-size, 2.813rem);
  line-height: var(--m3-font-display-medium-height, 1.156);
  letter-spacing: var(--m3-font-display-medium-tracking, 0);
  font-weight: var(--m3-font-display-medium-weight, 400);
}
.m3-font-display-small {
  font-size: var(--m3-font-display-small-size, 2.25rem);
  line-height: var(--m3-font-display-small-height, 1.222);
  letter-spacing: var(--m3-font-display-small-tracking, 0);
  font-weight: var(--m3-font-display-small-weight, 400);
}
/* Headlines are best-suited for short, high-emphasis text on smaller screens. */
.m3-font-headline-large {
  font-size: var(--m3-font-headline-large-size, 2rem);
  line-height: var(--m3-font-headline-large-height, 1.25);
  letter-spacing: var(--m3-font-headline-large-tracking, 0);
  font-weight: var(--m3-font-headline-large-weight, 400);
}
.m3-font-headline-medium {
  font-size: var(--m3-font-headline-medium-size, 1.75rem);
  line-height: var(--m3-font-headline-medium-height, 1.286);
  letter-spacing: var(--m3-font-headline-medium-tracking, 0);
  font-weight: var(--m3-font-headline-medium-weight, 400);
}
.m3-font-headline-small {
  font-size: var(--m3-font-headline-small-size, 1.5rem);
  line-height: var(--m3-font-headline-small-height, 1.333);
  letter-spacing: var(--m3-font-headline-small-tracking, 0);
  font-weight: var(--m3-font-headline-small-weight, 400);
}
/* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
.m3-font-title-large {
  font-size: var(--m3-font-title-large-size, 1.375rem);
  line-height: var(--m3-font-title-large-height, 1.273);
  letter-spacing: var(--m3-font-title-large-tracking, 0);
  font-weight: var(--m3-font-title-large-weight, 400);
}
.m3-font-title-medium {
  font-size: var(--m3-font-title-medium-size, 1rem);
  line-height: var(--m3-font-title-medium-height, 1.5);
  letter-spacing: var(--m3-font-title-medium-tracking, 0);
  font-weight: var(--m3-font-title-medium-weight, 500);
}
.m3-font-title-small {
  font-size: var(--m3-font-title-small-size, 0.875rem);
  line-height: var(--m3-font-title-small-height, 1.429);
  letter-spacing: var(--m3-font-title-small-tracking, 0.006rem);
  font-weight: var(--m3-font-title-small-weight, 500);
}
/* Label styles are smaller, utilitarian styles, used for things like the text inside components
or for very small text in the content body, such as captions. */
.m3-font-label-large {
  font-size: var(--m3-font-label-large-size, 0.875rem);
  line-height: var(--m3-font-label-large-height, 1.429);
  letter-spacing: var(--m3-font-label-large-tracking, 0.006rem);
  font-weight: var(--m3-font-label-large-weight, 500);
}
.m3-font-label-medium {
  font-size: var(--m3-font-label-medium-size, 0.75rem);
  line-height: var(--m3-font-label-medium-height, 1.333);
  letter-spacing: var(--m3-font-label-medium-tracking, 0.031rem);
  font-weight: var(--m3-font-label-medium-weight, 500);
}
.m3-font-label-small {
  font-size: var(--m3-font-label-small-size, 0.688rem);
  line-height: var(--m3-font-label-small-height, 1.455);
  letter-spacing: var(--m3-font-label-small-tracking, 0.031rem);
  font-weight: var(--m3-font-label-small-weight, 500);
}
/* Body styles are used for longer passages of text in your app. */
.m3-font-body-large {
  font-size: var(--m3-font-body-large-size, 1rem);
  line-height: var(--m3-font-body-large-height, 1.5);
  letter-spacing: var(--m3-font-body-large-tracking, 0);
  font-weight: var(--m3-font-body-large-weight, 400);
}
.m3-font-body-medium {
  font-size: var(--m3-font-body-medium-size, 0.875rem);
  line-height: var(--m3-font-body-medium-height, 1.429);
  letter-spacing: var(--m3-font-body-medium-tracking, 0.016rem);
  font-weight: var(--m3-font-body-medium-weight, 400);
}
.m3-font-body-small {
  font-size: var(--m3-font-body-small-size, 0.75rem);
  line-height: var(--m3-font-body-small-height, 1.333);
  letter-spacing: var(--m3-font-body-small-tracking, 0.025rem);
  font-weight: var(--m3-font-body-small-weight, 400);
}
/* Fix some browser stuff */
.m3-container {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
.m3-container a,
a.m3-container {
  text-decoration: none;
}