diff --git a/README.md b/README.md index 79ebe9a..62b974e 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,95 @@ [![NPM version][npm-version-src]][npm-version-href] [![License][license-src]][license-href] -see [m3.material.io/styles](https://m3.material.io/styles) +Design see [m3.material.io/styles](https://m3.material.io/styles) + +## 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 +npm material3-style color -s "#518242" +``` + +Then, you will get a new theme palette! + +![new color](./example/assets/new-color.png) ## Roadmap diff --git a/color/_index.scss b/color/_index.scss new file mode 100644 index 0000000..24ba97d --- /dev/null +++ b/color/_index.scss @@ -0,0 +1 @@ +@forward './var' show light-theme, dark-theme; diff --git a/example/assets/default-color.png b/example/assets/default-color.png new file mode 100644 index 0000000..e0c51b7 Binary files /dev/null and b/example/assets/default-color.png differ diff --git a/example/assets/new-color.png b/example/assets/new-color.png new file mode 100644 index 0000000..4b3f63c Binary files /dev/null and b/example/assets/new-color.png differ