Skip to content

A Material 3 (Material Design) style library, including typography, color, elevation, shape and motion.

License

Notifications You must be signed in to change notification settings

Daydreamer-riri/material3-style

Repository files navigation


NPM version License

Design see m3.material.io/styles

See demo: https://daydreamer-riri.github.io/material3-style/example/color-demo/

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

MIT License © 2023 Riri

About

A Material 3 (Material Design) style library, including typography, color, elevation, shape and motion.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published