@modern-js/module-tools-docs 2.32.0 → 2.32.2-alpha.1

package/docs/zh/guide/advance/theme-config.mdx

@@ -1,74 +0,0 @@
----
-sidebar_position: 6
----
-
-# 主题配置
-
-模块工程通过 [`designSystem`](/api/config/design-system) API，提供了配置主题的能力。
-
-## 动机和原理
-
-主题配置有些类似组件库中的定制主题功能，主要用于样式开发中使用。我们可以通过 `designSystem` 配置在不同的样式开发环境下使用由它生成的 `designToken`。
-
-所谓 `designToken` 在不同的样式开发环境下对应不同的东西：
-
-- tailwindcss: 以 `designSystem` 作为 tailwindcss 的 `theme` 配置。因此可以使用：
-  - tailwindcss 支持的 HTML 类名。
-  - 在 css/less/sass 下通过 `@apply` 自定义指令使用与 tailwindcss 支持的 HTML 类名同名的字符串。
-- css/less/scss: 通过 `designSystem` 生成全局的样式变量。
-
-`designSystem` API 的数据结构借鉴了 `tailwindcss` 配置对象中的 [theme API](https://tailwindcss.com/docs/theme)，因此存在默认的一套 `designToken`。关于默认值，可以查看 [`designSystem` API](/api/config/design-system)。
-
-:::info
-目前暂时还未支持 css/less/sass 全局变量。
-:::
-
-## 使用示例
-
-### tailwindcss
-
-在使用 tailwindcss 的时候，可以通过 `designSystem` 来设置它的 [`theme`](https://v2.tailwindcss.com/docs/theme#extending-the-default-theme) 配置。
-
-例如在下面的配置中扩展了原有的颜色配置:
-
-```ts title="modern.config.ts"
-export default {
-  designSystem: {
-    extend: {
-      colors: {
-        primary: '#1677ff',
-      },
-    },
-  },
-};
-```
-
-我们可以在代码中有两种使用 tailwindcss 的方式。
-
-#### HTML 类名
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-primary"></div>;
-};
-```
-
-#### `@apply` 指令
-
-关于 [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply)。
-
-```tsx title="./src/index.tsx"
-import './index.css';
-
-export default () => {
-  return <div className="btn-primary"></div>;
-};
-```
-
-```css title="./src/index.css"
-.btn-primary {
-  @apply bg-primary;
-}
-```