m3-svelte/package/etc/styles.css

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

@layer base {
  /* Reset a few things */
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  .m3-container {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }
  .m3-container a,
  a.m3-container {
    text-decoration: none;
  }
  .m3-container dialog,
  dialog.m3-container {
    margin: auto;
  }

  :root {
    accent-color: var(--m3c-primary);
  }
  :focus-visible {
    outline: none;
    @apply --m3-focused-outward;
  }
}

@layer tokens {
  :root {
    /* Needed for elevation to work */
    --m3-elevation-0: none;
    --m3-elevation-1:
    /* Spot */
      0px 1px 2px 0px --translucent(var(--m3c-shadow), 0.3),
      /* Ambient */ 0px 1px 3px 1px --translucent(var(--m3c-shadow), 0.15);
    --m3-elevation-2:
      0px 1px 2px 0px --translucent(var(--m3c-shadow), 0.3),
      0px 2px 6px 2px --translucent(var(--m3c-shadow), 0.15);
    --m3-elevation-3:
      0px 1px 3px 0px --translucent(var(--m3c-shadow), 0.3),
      0px 4px 8px 3px --translucent(var(--m3c-shadow), 0.15);
    --m3-elevation-4:
      0px 2px 3px 0px --translucent(var(--m3c-shadow), 0.3),
      0px 6px 10px 4px --translucent(var(--m3c-shadow), 0.15);
    --m3-elevation-5:
      0px 4px 4px 0px --translucent(var(--m3c-shadow), 0.3),
      0px 8px 12px 6px --translucent(var(--m3c-shadow), 0.15);

    /* Shapes */
    --m3-shape-none: 0;
    --m3-shape-extra-small: 4px;
    --m3-shape-small: 8px;
    --m3-shape-medium: 12px;
    --m3-shape-large: 16px;
    --m3-shape-large-increased: 20px;
    --m3-shape-extra-large: 28px;
    --m3-shape-full: calc(infinity * 1px);
    --m3-optical-centering-coefficient: 0.11;

    /* Typography */
    --m3-font: "Google Sans Flex", "Google Sans Flex Variable", Roboto, system-ui;
    --m3-font-mono: "Google Sans Code", monospace;

    /* The rest of this brought to you by scripts/easing.ts */
    /* Expressive easing */
    --m3-timing-function-fast-spatial: linear(
      0,
      0.02,
      0.07,
      0.15,
      0.25 7.8%,
      0.65 15.5%,
      0.81,
      0.93,
      1.015,
      1.07 29.9%,
      1.09,
      1.092 38.3%,
      1.015 55.9%,
      0.99 66.2%,
      1
    );
    --m3-duration-fast-spatial: 383ms;
    --m3-easing-fast-spatial: var(--m3-timing-function-fast-spatial) var(--m3-duration-fast-spatial);

    --m3-timing-function-spatial: linear(
      0,
      0.018,
      0.06,
      0.13,
      0.2 9%,
      0.53 18%,
      0.692,
      0.82,
      0.9,
      0.96,
      0.99 45%,
      1.012 54%,
      1
    );
    --m3-duration-spatial: 450ms;
    --m3-easing-spatial: var(--m3-timing-function-spatial) var(--m3-duration-spatial);

    --m3-timing-function-slow-spatial: linear(
      0,
      0.015,
      0.06,
      0.12,
      0.195 9%,
      0.54 19%,
      0.7,
      0.82,
      0.9,
      0.954,
      0.99 46%,
      1.01 55%,
      1.01,
      1
    );
    --m3-duration-slow-spatial: 600ms;
    --m3-easing-slow-spatial: var(--m3-timing-function-slow-spatial) var(--m3-duration-slow-spatial);

    --m3-timing-function-fast: linear(
      0,
      0.02 2.3%,
      0.08 5.1%,
      0.265,
      0.452,
      0.61,
      0.732,
      0.82 33.7%,
      0.89,
      0.93 46.9%,
      0.974 58.6%,
      0.994,
      1
    );
    --m3-duration-fast: 150ms;
    --m3-easing-fast: var(--m3-timing-function-fast) var(--m3-duration-fast);

    --m3-timing-function: linear(
      0,
      0.016 2%,
      0.08 5%,
      0.26,
      0.45,
      0.605,
      0.726,
      0.815 33%,
      0.89,
      0.935 47%,
      0.972 58%,
      0.996,
      1
    );
    --m3-duration: 233ms;
    --m3-easing: var(--m3-timing-function) var(--m3-duration);

    --m3-timing-function-slow: linear(
      0,
      0.016 2%,
      0.08 5%,
      0.26,
      0.452,
      0.61,
      0.73,
      0.82 33%,
      0.89,
      0.932 46%,
      0.975 58%,
      0.995,
      1
    );
    --m3-duration-slow: 333ms;
    --m3-easing-slow: var(--m3-timing-function-slow) var(--m3-duration-slow);

    /* Other easing */
    --m3-timing-function-emphasized: linear(
      0,
      0.01 3.2%,
      0.03,
      0.06,
      0.11,
      0.19 13.3%,
      0.25,
      0.32,
      0.43,
      0.53,
      0.61 19.3%,
      0.69,
      0.74,
      0.78,
      0.81 27.2%,
      0.88,
      0.92 40.6%,
      0.964 55%,
      0.994,
      1
    );
    --m3-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
    --m3-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);

    --m3-timing-function-zeno: linear(
      0,
      0.175,
      0.32,
      0.44,
      0.54,
      0.62 17.2%,
      0.73,
      0.81,
      0.87 36.1%,
      0.926,
      0.96 55.6%,
      0.99,
      1
    );
  }
}
/* Background is dynamic, so not a token */
:root {
  --m3v-background: var(--m3c-surface);
}

/* As the largest text on the screen, display styles are reserved for short, important text or numerals. */
@mixin --m3-display-large {
  font-family: var(--m3-font);
  font-size: 3.563rem;
  line-height: 1.123;
  /*letter-spacing: 0;*/
  font-weight: 400;
}
@mixin --m3-display-medium {
  font-family: var(--m3-font);
  font-size: 2.813rem;
  line-height: 1.156;
  /*letter-spacing: 0;*/
  font-weight: 400;
}
@mixin --m3-display-small {
  font-family: var(--m3-font);
  font-size: 2.25rem;
  line-height: 1.222;
  /*letter-spacing: 0;*/
  font-weight: 400;
}

/* Headlines are best-suited for short, high-emphasis text on smaller screens. */
@mixin --m3-headline-large {
  font-family: var(--m3-font);
  font-size: 2rem;
  line-height: 1.25;
  /*letter-spacing: 0;*/
  font-weight: 400;
}
@mixin --m3-headline-medium {
  font-family: var(--m3-font);
  font-size: 1.75rem;
  line-height: 1.286;
  /*letter-spacing: 0;*/
  font-weight: 400;
}
@mixin --m3-headline-small {
  font-family: var(--m3-font);
  font-size: 1.5rem;
  line-height: 1.333;
  /*letter-spacing: 0;*/
  font-weight: 400;
}

/* Titles are smaller than headline styles, and should be used for medium-emphasis text that remains relatively short. */
@mixin --m3-title-large {
  font-family: var(--m3-font);
  font-size: 1.375rem;
  line-height: 1.273;
  /*letter-spacing: 0;*/
  font-weight: 400;
}
@mixin --m3-title-medium {
  font-family: var(--m3-font);
  font-size: 1rem;
  line-height: 1.5;
  /*letter-spacing: 0;*/
  font-weight: 500;
}
@mixin --m3-title-small {
  font-family: var(--m3-font);
  font-size: 0.875rem;
  line-height: 1.429;
  /*letter-spacing: 0.006rem;*/
  font-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. */
@mixin --m3-label-large {
  font-family: var(--m3-font);
  font-size: 0.875rem;
  line-height: 1.429;
  /*letter-spacing: 0.006rem;*/
  font-weight: 500;
}
@mixin --m3-label-medium {
  font-family: var(--m3-font);
  font-size: 0.75rem;
  line-height: 1.333;
  /*letter-spacing: 0.031rem;*/
  font-weight: 500;
}
@mixin --m3-label-small {
  font-family: var(--m3-font);
  font-size: 0.688rem;
  line-height: 1.455;
  /*letter-spacing: 0.031rem;*/
  font-weight: 500;
}

/* Body styles are used for longer passages of text in your app. */
@mixin --m3-body-large {
  font-family: var(--m3-font);
  font-size: 1rem;
  line-height: 1.5;
  /*letter-spacing: 0;*/
  font-weight: 400;
}
@mixin --m3-body-medium {
  font-family: var(--m3-font);
  font-size: 0.875rem;
  line-height: 1.429;
  /*letter-spacing: 0.016rem;*/
  font-weight: 400;
}
@mixin --m3-body-small {
  font-family: var(--m3-font);
  font-size: 0.75rem;
  line-height: 1.333;
  /*letter-spacing: 0.025rem;*/
  font-weight: 400;
}

@keyframes focus-outward {
  0% {
    box-shadow: 0 0 0 0px var(--m3c-secondary);
  }
  100% {
    box-shadow: 0 0 0 3px var(--m3c-secondary);
  }
}
@keyframes focus-inward {
  0% {
    box-shadow: inset 0 0 0 0px var(--m3c-secondary);
  }
  100% {
    box-shadow: inset 0 0 0 3px var(--m3c-secondary);
  }
}
@mixin --m3-focused-outward {
  animation: focus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
}
@mixin --m3-focused-inward {
  animation: focus-inward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
}
@mixin --m3-focus-inward {
  &:focus-visible {
    @apply --m3-focused-inward;
  }
}
@mixin --m3-focus-none {
  animation: none;
}

@function --translucent(--color, --opacity) {
  result: oklch(from var(--color) l c h / var(--opacity));
}