docs: 更新对主题和全局变量的配置

.umirc.ts

@@ -74,10 +74,10 @@ export default defineConfig({
         title: '设计变量',
         path: '/guide/token',
       },
-      // {
-      //   title: '定制主题',
-      //   path: '/guide/theme',
-      // },
+      {
+        title: '定制主题',
+        path: '/guide/theme',
+      },
       {
         title: '贡献指南',
         path: '/guide/contribution',
@@ -181,10 +181,10 @@ export default defineConfig({
         title: '其他组件',
         children: ['components/config-provider', 'components/transition'],
       },
-      // {
-      //   title: '业务组件',
-      //   children: [],
-      // },
+      {
+        title: '业务组件',
+        children: [],
+      },
     ],
   },
   themeConfig: {

docs/guide/theme.md

@@ -1 +1,198 @@
 # 定制主题
+
+得益于 CSS 变量强大而灵活的能力，自定义一套 aunt 的主题是非常简单的，你不需要配置任何编译工具，也不需要安装额外的插件，直接修在 `:root` 覆盖 CSS 变量就可以了：
+
+```css
+:root:root {
+  --aunt-primary-color: #722ed1;
+  --aunt-success-color: #437004;
+  --aunt-danger-color: #ffb65d;
+  --aunt-warning-color: #fbe842;
+}
+```
+
+> 注：为什么要写两个重复的 `:root`？
+>
+> 由于 aunt 中的主题变量也是在 `:root` 下声明的，所以在有些情况下会由于优先级的问题无法成功覆盖。通过 `:root:root` 可以显式地让你所写内容的优先级更高一些，从而确保主题变量的成功覆盖。
+
+当然如果你只是希望对局部的主题进行调整，你可以使用[`ConfigProvider`](/components/config-provider)组件对其进行包裹后查看当前组件的CSS变量进行修改，也可以直接在样式里面修改其全局变量或者该组件的变量。
+## 局部调整
+**使用CSS变量对其进行修改**
+```css
+.purple-theme {
+    --aunt-primary-color: #722ed1;
+}
+// or
+.purple-theme {
+    --aunt-button-background-primary-color: #722ed1;
+}
+```
+
+```jsx
+<div className='purple-theme'>
+  <Button type='primary'>Purple</Button>
+</div>
+```
+
+**使用 [`ConfigProvider`](/components/config-provider) 进行局部组件修改**
+
+```jsx
+<ConfigProvider theme={{
+    buttonBackgroundPrimaryColor: '#722ed1',
+}}>
+    <Button type='primary'>Purple</Button>
+</ConfigProvider>
+```
+
+可以得到这样的一个按钮：
+
+```jsx | preview
+/**
+ * inline: true
+ */
+
+import React from 'react'
+import { ConfigProvider, Button } from 'aunt'
+
+export default () => {
+  return (
+    <ConfigProvider theme={{
+        buttonBackgroundPrimaryColor: '#722ed1',
+    }}>
+        <Button type='primary'>Purple</Button>
+    </ConfigProvider>
+  )
+}
+```
+
+以下是 aunt 目前提供的全局性 CSS 变量：
+
+```css
+:root {
+  --aunt-prefix: @prefix;
+
+  --aunt-hd: @hd;
+
+  --aunt-brand-color: @brand-color;
+  // Color Palette
+  --aunt-black-color: @black;
+  --aunt-white-color: @white;
+
+  --aunt-gray-1: @gray-1;
+  --aunt-gray-2: @gray-2;
+  --aunt-gray-3: @gray-3;
+  --aunt-gray-4: @gray-4;
+  --aunt-gray-5: @gray-5;
+  --aunt-gray-6: @gray-6;
+  --aunt-gray-7: @gray-7;
+  --aunt-gray-8: @gray-8;
+  --aunt-red: @red;
+  --aunt-blue: @blue;
+  --aunt-orange: @orange;
+  --aunt-green: @green;
+
+  --aunt-arcoblue-1: @arcoblue-1;
+  --aunt-arcoblue-2: @arcoblue-2;
+  --aunt-arcoblue-3: @arcoblue-3;
+  --aunt-arcoblue-4: @arcoblue-4;
+  --aunt-arcoblue-5: @arcoblue-5;
+  --aunt-arcoblue-6: @arcoblue-6;
+  --aunt-arcoblue-7: @arcoblue-7;
+  --aunt-arcoblue-8: @arcoblue-8;
+  --aunt-arcoblue-9: @arcoblue-9;
+  --aunt-arcoblue-10: @arcoblue-10;
+
+  --aunt-orange-1: @orange-1;
+  --aunt-orange-2: @orange-2;
+  --aunt-orange-3: @orange-3;
+  --aunt-orange-4: @orange-4;
+  --aunt-orange-5: @orange-5;
+  --aunt-orange-6: @orange-6;
+  --aunt-orange-7: @orange-7;
+  --aunt-orange-8: @orange-8;
+  --aunt-orange-9: @orange-9;
+  --aunt-orange-10: @orange-10;
+
+  // Gradient Colors
+  --aunt-gradient-red: @gradient-red;
+  --aunt-gradient-orange: @gradient-orange;
+
+  // Component Colors
+  --aunt-primary-color: @primary-color;
+  --aunt-success-color: @success-color;
+  --aunt-danger-color: @danger-color;
+  --aunt-warning-color: @warning-color;
+  --aunt-text-color: @text-color;
+  --aunt-active-color: @active-color;
+  --aunt-active-opacity: @active-opacity;
+  --aunt-disabled-opacity: @disabled-opacity;
+  --aunt-background-color: @background-color;
+  --aunt-background-color-light: @background-color-light;
+  --aunt-text-link-color: @text-link-color;
+
+  // Padding
+  --aunt-padding-base: @padding-base;
+  --aunt-padding-xs: @padding-xs;
+  --aunt-padding-s: @padding-s;
+  --aunt-padding-sm: @padding-sm;
+  --aunt-padding-m: @padding-m;
+  --aunt-padding-md: @padding-md;
+  --aunt-padding-l: @padding-l;
+  --aunt-padding-lg: @padding-lg;
+  --aunt-padding-xl: @padding-xl;
+
+  // Font
+  --aunt-font-size-xs: @font-size-xs;
+  --aunt-font-size-sm: @font-size-sm;
+  --aunt-font-size-md: @font-size-md;
+  --aunt-font-size-lg: @font-size-lg;
+  --aunt-font-size-xl: @font-size-xl;
+  --aunt-font-size-xxl: @font-size-xxl;
+  --aunt-font-size-xxxl: @font-size-xxxl;
+
+  --aunt-font-weight-bold: @font-weight-bold;
+
+  --aunt-line-height-xs: @line-height-xs;
+  --aunt-line-height-sm: @line-height-sm;
+  --aunt-line-height-md: @line-height-md;
+  --aunt-line-height-lg: @line-height-lg;
+  --aunt-line-height-xl: @line-height-xl;
+  --aunt-line-height-xxl: @line-height-xxl;
+  --aunt-line-height-xxxl: @line-height-xxxl;
+
+  --aunt-base-font-family: @base-font-family;
+  --aunt-price-integer-font-family: @price-integer-font-family;
+
+  // Animation
+  --aunt-animation-duration-base: @animation-duration-base;
+  --aunt-animation-duration-fast: @animation-duration-fast;
+  --aunt-animation-duration-slow: @animation-duration-slow;
+  --aunt-animation-duration-slowest: @animation-duration-slowest;
+  --aunt-animation-timing-function-enter: @animation-timing-function-enter;
+  --aunt-animation-timing-function-leave: @animation-timing-function-leave;
+
+  // Border
+  --aunt-border-color: @border-color;
+  --aunt-border-width-base: @border-width-base;
+  --aunt-border-radius-sm: @border-radius-sm;
+  --aunt-border-radius-md: @border-radius-md;
+  --aunt-border-radius-lg: @border-radius-lg;
+  --aunt-border-radius-max: @border-radius-max;
+
+  // zIndex
+  --aunt-z-index-fixed: @z-index-fixed;
+  --aunt-z-index-full-screen: @z-index-full-screen;
+
+  // shadow
+  --aunt-shadow-special: @shadow-special; 
+  --aunt-shadow1-center: @shadow1-center;
+  --aunt-shadow2-center: @shadow2-center;
+  --aunt-shadow3-center: @shadow3-center;
+}
+```
+
+<Alert type="warning">
+每个组件都外放了属于这个组件的CSS变量，可以到组件文档页面最下方进行查看。
+</Alert>
+
+此外，每个组件也有自己对应的 CSS 全局变量，你可以在它们的文档页面中找到，具体请参阅 [CSS 变量](/guide/token) 章节。