material3-style
v0.0.1
Published
A Material 3 (Material Design) style library, including typography, color, elevation, shape and motion.
Downloads
7
Maintainers
riridReadme
Design see m3.material.io/styles
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.
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!
Roadmap
- [x] typography
- [x] color
- [ ] elevation
- [ ] shape
- [ ] motion