docs: optimize theme docus

Aybrea · Feb 28, 2024 · a0be378 · a0be378
1 parent 8a8ae77
commit a0be378
Show file tree

Hide file tree

Showing 5 changed files with 220 additions and 334 deletions.
diff --git a/packages/varlet-ui/src/style-provider/docs/en-US.md b/packages/varlet-ui/src/style-provider/docs/en-US.md
@@ -2,71 +2,7 @@
 
 ### Intro
 
-Component libraries organize styles through [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
-Each component has a corresponding style variable, you can directly replace the style variable on the root node by overriding it with a CSS file.
-Or use StyleProvider components.
-
-### Basic Style Variable
-
-Here are some basic style variables for the component library
-
-```css
-/* playground-ignore */
-:root {
-  --font-size-xs: 10px;
-  --font-size-sm: 12px;
-  --font-size-md: 14px;
-  --font-size-lg: 16px;
-  --icon-size-xs: 16px;
-  --icon-size-sm: 18px;
-  --icon-size-md: 20px;
-  --icon-size-lg: 22px;
-  --color-body: #fff;
-  --color-text: #333;
-  --color-primary: #3a7afe;
-  --color-info: #00afef;
-  --color-success: #00c48f;
-  --color-warning: #ff9f00;
-  --color-danger: #f44336;
-  --color-disabled: #e0e0e0;
-  --color-text-disabled: #aaa;
-  --color-on-primary: #fff;
-  --color-on-info: #fff;
-  --color-on-success: #fff;
-  --color-on-warning: #fff;
-  --color-on-danger: #fff;
-  --color-primary-container: #3a7afe;
-  --color-info-container: #00afef;
-  --color-success-container: #00c48f;
-  --color-warning-container: #ff9f00;
-  --color-danger-container: #f44336;
-  --color-on-primary-container: #fff;
-  --color-on-info-container: #fff;
-  --color-on-success-container: #fff;
-  --color-on-warning-container: #fff;
-  --color-on-danger-container: #fff;
-  --color-surface-container: #fff;
-  --color-surface-container-low: #fff;
-  --color-surface-container-high: #fff;
-  --color-surface-container-highest: #fff;
-  --color-inverse-surface: #333;
-  --color-outline: rgba(0, 0, 0, 0.12);
-  --color-on-surface-variant: #888;
-  --opacity-disabled: 0.6;
-  --opacity-hover: 0.15;
-  --opacity-focus: 0.2;
-  --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
-  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
-  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
-  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
-}
-```
-
-### Modify Styles At Runtime
-
-Maybe you have a need to replace the style while the program is runtime, like a one-click skin change or something.
-The component library provides a StyleProvider component to assist in managing styles,
-Component provides' `component call` and `function call` and two invocation modes.
+Style variables can be easily mounted through the StyleProvider component. The component provides two calling methods: `component calling` and `functional calling`.
 
 ### Component Call
 
@@ -150,57 +86,4 @@ function toggleRootTheme() {
 
 | Name | Description | SlotProps |
 | --- | --- | --- |
-| `default` | Component content | `-` |
-
-### Style Variables
-
-The following is a style variable universal in the module library. Please check the style variable table at the bottom of each component document with unique style variables in each component.
-
-| Variable | Default |
-| --- | --- |
-| `--font-size-xs` | `10px` |
-| `--font-size-sm` | `12px` |
-| `--font-size-md` | `14px` |
-| `--font-size-lg` | `16px` |
-| `--icon-size-xs` | `16px` |
-| `--icon-size-sm` | `18px` |
-| `--icon-size-md` | `20px` |
-| `--icon-size-lg` | `22px` |
-| `--color-body` | `#fff` |
-| `--color-text` | `#333` |
-| `--color-primary` | `#3a7afe` |
-| `--color-info` | `#00afef` |
-| `--color-success` | `#00c48f` |
-| `--color-warning` | `#ff9f00` |
-| `--color-danger` | `#f44336` |
-| `--color-disabled` | `#e0e0e0` |
-| `--color-text-disabled` | `#aaa` |
-| `--color-on-primary` | `#fff` |
-| `--color-on-info` | `#fff` |
-| `--color-on-success` | `#fff` |
-| `--color-on-warning` | `#fff` |
-| `--color-on-danger` | `#fff` |
-| `--color-primary-container` | `#3a7afe` |
-| `--color-info-container` | `#00afef` |
-| `--color-success-container` | `#00c48f` |
-| `--color-warning-container` | `#ff9f00` |
-| `--color-danger-container` | `#f44336` |
-| `--color-on-primary-container` | `#fff` |
-| `--color-on-info-container` | `#fff` |
-| `--color-on-success-container` | `#fff` |
-| `--color-on-warning-container` | `#fff` |
-| `--color-on-danger-container` | `#fff` |
-| `--color-surface-container` | `#fff` |
-| `--color-surface-container-low` | `#fff` |
-| `--color-surface-container-high` | `#fff` |
-| `--color-surface-container-highest` | `#fff` |
-| `--color-inverse-surface` | `#333` |
-| `--color-outline` | `rgba(0, 0, 0, 0.12)` |
-| `--color-on-surface-variant` | `#888` |
-| `--opacity-disabled` | `0.6` |
-| `--opacity-hover` | `0.15` |
-| `--opacity-focus` | `0.2` |
-| `--cubic-bezier` | `cubic-bezier(0.25, 0.8, 0.5, 1)` |
-| `--shadow-key-umbra-opacity` | `rgba(0, 0, 0, 0.2)` |
-| `--shadow-key-penumbra-opacity` | `rgba(0, 0, 0, 0.14)` |
-| `--shadow-key-ambient-opacity` | `rgba(0, 0, 0, 0.12)` |
+| `default` | Component content | `-` |
diff --git a/packages/varlet-ui/src/style-provider/docs/zh-CN.md b/packages/varlet-ui/src/style-provider/docs/zh-CN.md
@@ -2,73 +2,11 @@
 
 ### 介绍
 
-组件库通过 [css 变量](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties) 来组织样式，每个组件都有对应的样式变量，
-您可以通过 css 文件覆盖的方式直接替换根节点上的样式变量, 或者使用 StyleProvider 组件。
-
-### 基本样式变量
-
-以下是组件库一些基本的样式变量。
-
-```css
-/* playground-ignore */
-:root {
-  --font-size-xs: 10px;
-  --font-size-sm: 12px;
-  --font-size-md: 14px;
-  --font-size-lg: 16px;
-  --icon-size-xs: 16px;
-  --icon-size-sm: 18px;
-  --icon-size-md: 20px;
-  --icon-size-lg: 22px;
-  --color-body: #fff;
-  --color-text: #333;
-  --color-primary: #3a7afe;
-  --color-info: #00afef;
-  --color-success: #00c48f;
-  --color-warning: #ff9f00;
-  --color-danger: #f44336;
-  --color-disabled: #e0e0e0;
-  --color-text-disabled: #aaa;
-  --color-on-primary: #fff;
-  --color-on-info: #fff;
-  --color-on-success: #fff;
-  --color-on-warning: #fff;
-  --color-on-danger: #fff;
-  --color-primary-container: #3a7afe;
-  --color-info-container: #00afef;
-  --color-success-container: #00c48f;
-  --color-warning-container: #ff9f00;
-  --color-danger-container: #f44336;
-  --color-on-primary-container: #fff;
-  --color-on-info-container: #fff;
-  --color-on-success-container: #fff;
-  --color-on-warning-container: #fff;
-  --color-on-danger-container: #fff;
-  --color-surface-container: #fff;
-  --color-surface-container-low: #fff;
-  --color-surface-container-high: #fff;
-  --color-surface-container-highest: #fff;
-  --color-inverse-surface: #333;
-  --color-outline: rgba(0, 0, 0, 0.12);
-  --color-on-surface-variant: #888;
-  --opacity-disabled: 0.6;
-  --opacity-hover: 0.15;
-  --opacity-focus: 0.2;
-  --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
-  --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
-  --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
-  --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);
-}
-```
-
-### 运行时修改样式
-
-可能您有在程序运行时替换样式的需求，比如一键换肤之类的，组件库提供了 StyleProvider 组件来辅助管理样式，
-组件提供了 `组件式调用` 和 `函数式调用` 两种调用方式。
+通过 StyleProvider 组件可以很容易的挂载样式变量，组件提供了 `组件式调用` 和 `函数式调用` 两种调用方式。
 
 ### 组件式调用
 
-组件式调用可以有范围性的定制组件样式，避免了全局污染，需要注意是有些使用 `teleport` 传送到  `StyleProvider` 外的元素将不会生效。
+组件式调用范围性的定制组件样式，需要注意是有些使用 `teleport` 传送到  `StyleProvider` 外的元素将不会生效。
 
 ```html
 <script setup>
@@ -111,7 +49,7 @@ function toggleTheme() {
 
 ### 函数式调用
 
-函数式的调用是直接更新 `:root` 上的变量，适合需要全局更新样式的情况。
+函数式的调用直接更新 `:root` 上的变量，适合需要全局更新样式的情况。
 
 ```html
 <script setup>
@@ -147,57 +85,4 @@ function toggleRootTheme() {
 
 | 插槽名 | 说明 | 参数 |
 | --- | --- | --- |
-| `default` | 组件内容 | `-` |
-
-### 样式变量
-
-以下为组件库的通用样式变量，各组件独有的样式变量请查询各组件文档底部的样式变量表格。
-
-| 变量名 | 默认值 |
-| --- | --- |
-| `--font-size-xs` | `10px` |
-| `--font-size-sm` | `12px` |
-| `--font-size-md` | `14px` |
-| `--font-size-lg` | `16px` |
-| `--icon-size-xs` | `16px` |
-| `--icon-size-sm` | `18px` |
-| `--icon-size-md` | `20px` |
-| `--icon-size-lg` | `22px` |
-| `--color-body` | `#fff` |
-| `--color-text` | `#333` |
-| `--color-primary` | `#3a7afe` |
-| `--color-info` | `#00afef` |
-| `--color-success` | `#00c48f` |
-| `--color-warning` | `#ff9f00` |
-| `--color-danger` | `#f44336` |
-| `--color-disabled` | `#e0e0e0` |
-| `--color-text-disabled` | `#aaa` |
-| `--color-on-primary` | `#fff` |
-| `--color-on-info` | `#fff` |
-| `--color-on-success` | `#fff` |
-| `--color-on-warning` | `#fff` |
-| `--color-on-danger` | `#fff` |
-| `--color-primary-container` | `#3a7afe` |
-| `--color-info-container` | `#00afef` |
-| `--color-success-container` | `#00c48f` |
-| `--color-warning-container` | `#ff9f00` |
-| `--color-danger-container` | `#f44336` |
-| `--color-on-primary-container` | `#fff` |
-| `--color-on-info-container` | `#fff` |
-| `--color-on-success-container` | `#fff` |
-| `--color-on-warning-container` | `#fff` |
-| `--color-on-danger-container` | `#fff` |
-| `--color-surface-container` | `#fff` |
-| `--color-surface-container-low` | `#fff` |
-| `--color-surface-container-high` | `#fff` |
-| `--color-surface-container-highest` | `#fff` |
-| `--color-inverse-surface` | `#333` |
-| `--color-outline` | `rgba(0, 0, 0, 0.12)` |
-| `--color-on-surface-variant` | `#888` |
-| `--opacity-disabled` | `0.6` |
-| `--opacity-hover` | `0.15` |
-| `--opacity-focus` | `0.2` |
-| `--cubic-bezier` | `cubic-bezier(0.25, 0.8, 0.5, 1)` |
-| `--shadow-key-umbra-opacity` | `rgba(0, 0, 0, 0.2)` |
-| `--shadow-key-penumbra-opacity` | `rgba(0, 0, 0, 0.14)` |
-| `--shadow-key-ambient-opacity` | `rgba(0, 0, 0, 0.12)` |
+| `default` | 组件内容 | `-` |
diff --git a/packages/varlet-ui/src/themes/docs/en-US.md b/packages/varlet-ui/src/themes/docs/en-US.md
@@ -2,13 +2,13 @@
 
 ### Intro
 
-The first-party component library provides four sets of themes: `Material Design 2 Light`, `Material Design 2 Dark`, `Material Design 3 Light`, and `Material Design 3 Dark`.
+The component library organizes styles through [css variables](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties). Variables are divided into general style variables and component style variables. It is recommended to use the [StyleProvider](#/en-US/style-provider) component to load theme files and customize the theme. The themes supported by the component library are as follows.
 
 ### Available Themes
 
 | Available Themes | Theme Pack |
 | --- | --- |
-| `Material Design 2 Light` | _-_ |
+| `Material Design 2 Light` | CSS Default_ |
 | `Material Design 2 Dark` | _Themes.dark_ |
 | `Material Design 3 Light` | _Themes.md3Light_ |
 | `Material Design 3 Dark` | _Themes.md3Dark_ |
@@ -41,3 +41,62 @@ body {
   background-color: var(--color-body);
 }
 ```
+
+### Theme Builder
+
+We provide a [theme builder](https://varletjs.github.io/varlet-theme-builder), which can intelligently deduce color matching that conforms to the design system through product theme colors or product pictures.
+
+- Note: Only supports generating theme colors for Material Design 3
+
+### Common style variables
+
+The following are the common style variables of the component library. For style variables unique to each component, please see the style variable table at the bottom of each component document.
+
+| Variable | Default |
+| --- | --- |
+| `--font-size-xs` | `10px` |
+| `--font-size-sm` | `12px` |
+| `--font-size-md` | `14px` |
+| `--font-size-lg` | `16px` |
+| `--icon-size-xs` | `16px` |
+| `--icon-size-sm` | `18px` |
+| `--icon-size-md` | `20px` |
+| `--icon-size-lg` | `22px` |
+| `--color-body` | `#fff` |
+| `--color-text` | `#333` |
+| `--color-primary` | `#3a7afe` |
+| `--color-info` | `#00afef` |
+| `--color-success` | `#00c48f` |
+| `--color-warning` | `#ff9f00` |
+| `--color-danger` | `#f44336` |
+| `--color-disabled` | `#e0e0e0` |
+| `--color-text-disabled` | `#aaa` |
+| `--color-on-primary` | `#fff` |
+| `--color-on-info` | `#fff` |
+| `--color-on-success` | `#fff` |
+| `--color-on-warning` | `#fff` |
+| `--color-on-danger` | `#fff` |
+| `--color-primary-container` | `#3a7afe` |
+| `--color-info-container` | `#00afef` |
+| `--color-success-container` | `#00c48f` |
+| `--color-warning-container` | `#ff9f00` |
+| `--color-danger-container` | `#f44336` |
+| `--color-on-primary-container` | `#fff` |
+| `--color-on-info-container` | `#fff` |
+| `--color-on-success-container` | `#fff` |
+| `--color-on-warning-container` | `#fff` |
+| `--color-on-danger-container` | `#fff` |
+| `--color-surface-container` | `#fff` |
+| `--color-surface-container-low` | `#fff` |
+| `--color-surface-container-high` | `#fff` |
+| `--color-surface-container-highest` | `#fff` |
+| `--color-inverse-surface` | `#333` |
+| `--color-outline` | `rgba(0, 0, 0, 0.12)` |
+| `--color-on-surface-variant` | `#888` |
+| `--opacity-disabled` | `0.6` |
+| `--opacity-hover` | `0.15` |
+| `--opacity-focus` | `0.2` |
+| `--cubic-bezier` | `cubic-bezier(0.25, 0.8, 0.5, 1)` |
+| `--shadow-key-umbra-opacity` | `rgba(0, 0, 0, 0.2)` |
+| `--shadow-key-penumbra-opacity` | `rgba(0, 0, 0, 0.14)` |
+| `--shadow-key-ambient-opacity` | `rgba(0, 0, 0, 0.12)` |