https://github.com/daydreamer-riri/material3-style

A Material 3 (Material Design) style library, including typography, color, elevation, shape and motion.
https://github.com/daydreamer-riri/material3-style

color css material-design material-you material3 sass scss shadow typography

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/daydreamer-riri/material3-style
• Owner: Daydreamer-riri
• License: mit
• Created: 2023-12-31T14:20:00.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-01T18:09:43.000Z (7 months ago)
• Last Synced: 2024-11-08T07:02:25.481Z (3 months ago)
• Topics: color, css, material-design, material-you, material3, sass, scss, shadow, typography
• Language: SCSS
• Homepage:
• Size: 2.04 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        






---

[![NPM version][npm-version-src]][npm-version-href]

[![License][license-src]][license-href]

Design see [m3.material.io/styles](https://m3.material.io/styles)

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

## Typography

For example, using Sass:

```scss

@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:

```html

  

    

    
...

  


```

You can also directly insert the link tag:

```html

  

    

  

  

    

  

```

## Color

Using Sass:

```scss

@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](./example/assets/default-color.png)

You can change the source color using the following command:

```bash

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

```

Then, you will get a new theme palette!

![new color](./example/assets/new-color.png)

## Roadmap

- [x] typography

- [x] color

- [ ] elevation

- [ ] shape

- [ ] motion

## License

[MIT](./LICENSE) License © 2023 [Riri](https://github.com/Daydreamer-riri)

[npm-version-src]: https://img.shields.io/npm/v/material3-style?style=flat&colorA=080f12&colorB=1fa669

[npm-version-href]: https://www.npmjs.com/package/material3-style

[license-src]: https://img.shields.io/github/license/daydreamer-riri/material3-style.svg?style=flat&colorA=080f12&colorB=1fa669

[license-href]: https://github.com/daydreamer-riri/material3-style/blob/main/LICENSE