From 4ea16ef05451e907560e08ac195ea4ee2382aadf Mon Sep 17 00:00:00 2001 From: Riri Date: Tue, 2 Jan 2024 13:10:41 +0800 Subject: [PATCH] docs: add typography and color styles to README.md --- README.md | 90 ++++++++++++++++++++++++++++++- color/_index.scss | 1 + example/assets/default-color.png | Bin 0 -> 19252 bytes example/assets/new-color.png | Bin 0 -> 5486 bytes 4 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 color/_index.scss create mode 100644 example/assets/default-color.png create mode 100644 example/assets/new-color.png 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 0000000000000000000000000000000000000000..e0c51b7de60dcc0c53579e2f9ec647dd9e4f138f GIT binary patch literal 19252 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 literal 0 HcmV?d00001 diff --git a/example/assets/new-color.png b/example/assets/new-color.png new file mode 100644 index 0000000000000000000000000000000000000000..4b3f63c40c8957381bf9726efe19d326d010718e GIT binary patch literal 5486 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 NXsPL|Ry=(X`aeo!5KsUB literal 0 HcmV?d00001