Material3-style NPM

Typography

For example, using Sass:

@use 'material3-style/typography/css';

// Or you can include it yourself
@use 'material3-style/typography';
:root {
  @include typography.theme();
}

.prose:not(:where([class~='not-prose'] *)) {
  @include typography.typography();
}

.prose-ul-star:not(:where([class~='not-prose'] *)) {
  @include typography.ul-star();
}

And add prose class to your content container:

<body>
  <article class="prose">
    <!-- your content -->
    <h1>...</h1>
  </article>
</body>

You can also directly insert the link tag:

<html>
  <head>
    <link
      rel="stylesheet"
      href="path/to/material3-style/typography/css/index.css"
    />
  </head>
  <body class="prose">
    <!-- your content -->
  </body>
</html>

Color

Using Sass:

@use 'material3-style/color';

:root {
  @include var.light-theme();
}

.dark:root {
  @include var.dark-theme();
}

body {
  color: var(--m3-color-on-surface);
  background: var(--m3-color-surface);
}

Material3 Style also provides CSS files with two themes of bright and dark(material3-style/color/css/dark-theme.css, material3-style/color/css/light-theme.css).

Change source color

The default source color is #673ab7.

default color

You can change the source color using the following command:

npx --no-install material3-style color -s "#518242"

Then, you will get a new theme palette!

new color

Roadmap

typography
color
elevation
shape
motion

License

material3 material design css style typography color elevation shape

@material/material-color-utilities yargs

0.0.1

2 years ago