docs: add typography and color styles to README.md

Daydreamer-riri · Jan 2, 2024 · 4ea16ef · 4ea16ef
1 parent d1f43d1
commit 4ea16ef
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 1 deletion.
diff --git 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
+<body>
+  <article class="prose">
+    <!-- your content -->
+    <h1>...</h1>
+  </article>
+</body>
+```
+
+You can also directly insert the link tag:
+
+```html
+<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:
+
+```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
@@ -0,0 +1 @@
+@forward './var' show light-theme, dark-theme;
diff --git a/example/assets/default-color.png b/example/assets/default-color.png
diff --git a/example/assets/new-color.png b/example/assets/new-color.png