@modern-js/module-tools-docs 2.32.0 → 2.32.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @modern-js/module-tools-docs
 
+## 2.32.1
+
+### Patch Changes
+
+- @modern-js/doc-plugin-auto-sidebar@2.32.1
+- @modern-js/doc-tools@2.32.1
+
 ## 2.32.0
 
 ### Minor Changes

package/docs/en/api/config/build-config.mdx

@@ -1110,10 +1110,14 @@ When the value is of type `object`, it is merged with the default configuration
 
 When the value is of type `Function`, the object returned by the function is merged with the default configuration via `Object.assign`.
 
-The `theme` property is not allowed, otherwise the build will fail, using [`designSystem`](/api/config/design-system) as the `Tailwind CSS Theme` configuration.
-
 The rest of the usage is the same as Tailwind CSS: [Quick Portal](https://tailwindcss.com/docs/configuration).
 
+### Notes
+
+Please note that if you are using the [designSystem](/api/config/design-system) configuration option simultaneously, the `theme` configuration of Tailwind CSS will be overridden by the value of `designSystem`.
+
+The usage of other configurations follows the same approach as the official usage of Tailwind CSS. Please refer to [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration) for more details.
+
 ## target
 
 `target` is used to set the target environment for the generated JavaScript code. It enables Module Tools to transform JavaScript syntax that is not recognized by the target environment into older versions of JavaScript syntax that are compatible with these environments.

package/docs/en/api/config/design-system.md

@@ -647,7 +647,7 @@ const designSystem = {
 ```
 
 :::tip
-More about [TailwindCSS configuration](https://tailwindcss.com/docs/configuration#theme)
+More about [Tailwind CSS configuration](https://tailwindcss.com/docs/configuration#theme)
 :::
 
 </details>

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

@@ -1,35 +1,21 @@
----
-sidebar_position: 7
----
-
 # Theme Configuration
 
-The module project provides the ability to configure themes through the [`designSystem`](/en/api/config/design-system) API.
-
-## Motivation and rationale
-
-Theme configuration is somewhat similar to the custom theme functionality in the component library and is mainly used in style development. We can use the `designToken` generated by the `designSystem` configuration in different style development environments.
-
-The so-called `designToken` corresponds to different things in different style development environments.
+Module Tools provides the ability to configure the Tailwind CSS theme through the `designSystem` option.
 
-- tailwindcss: use `designSystem` as the `theme` configuration for tailwindcss. So you can use.
-  - The name of the HTML class supported by tailwindcss.
-  - `@apply` custom directive under css/less/sass to use a string with the same name as the HTML class name supported by tailwindcss.
-- css/less/scss: Generate global style variables via `designSystem`.
+## Motivation and Principles
 
-The data structure of the `designSystem` API is borrowed from the [theme API](https://tailwindcss.com/docs/theme) in the `tailwindcss` configuration object, so a default set of `designToken` exists. For the default values, see the [`designSystem` API](/api/config/design-system).
+Theme configuration is similar to custom theme functionality in component libraries and is primarily used for styling. When using `designSystem`, it serves as the `theme` configuration for Tailwind CSS. Therefore, you can use:
 
-:::info
-The css/less/sass global variables are not supported yet.
-:::
+- CSS class names supported by Tailwind CSS.
+- Strings with the same name as the CSS class names supported by Tailwind CSS, using the `@apply` custom directive in CSS/Less/Sass.
 
-## Usage examples
+For the default value of `designSystem`, refer to the [`designSystem` API](/api/config/design-system).
 
-### tailwindcss
+## Usage Example
 
-When using tailwindcss, its [`theme`](https://v2.tailwindcss.com/docs/theme#extending-the-default-theme) configuration can be set via `designSystem`.
+When using Tailwind CSS, you can use `designSystem` to configure its [`theme`](https://tailwindcss.com/docs/theme).
 
-For example, the following configuration extends the original color configuration:
+For example, the following configuration extends the existing color configuration:
 
 ```ts title="modern.config.ts"
 export default {
@@ -43,9 +29,9 @@ export default {
 };
 ```
 
-We can have two ways of using tailwindcss in our code.
+In the code, there are two ways to use Tailwind CSS.
 
-#### HTML Class
+#### CSS Class Names
 
 ```tsx title="./src/index.tsx"
 import 'tailwindcss/utilities.css';
@@ -55,11 +41,9 @@ export default () => {
 };
 ```
 
-#### `@apply` Directives
+#### `@apply` Directive
 
-:::info
-About [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply)。
-:::
+Regarding [`@apply`](https://tailwindcss.com/docs/functions-and-directives#apply).
 
 ```tsx title="./src/index.tsx"
 import './index.css';

package/docs/zh/api/config/build-config.mdx

@@ -1110,10 +1110,14 @@ const tailwind = {
 
 值为 `Function` 类型时，函数返回的对象与默认配置通过 `Object.assign` 合并。
 
-不允许出现 `theme` 属性，否则会构建失败, 使用 [`designSystem`](/api/config/design-system) 作为 `Tailwind CSS Theme` 配置。
-
 其他的使用方式和 Tailwind CSS 一致: [快速传送门](https://tailwindcss.com/docs/configuration)。
 
+### 注意事项
+
+注意，如果你同时使用了 [designSystem](/api/config/design-system) 配置项，那么 Tailwind CSS 的 `theme` 配置将会被 `designSystem` 的值所覆盖。
+
+其他配置的使用方式与 Tailwind CSS 官方用法一致，请参考 [tailwindcss - Configuration](https://tailwindcss.com/docs/configuration)。
+
 ## target
 
 `target` 用于为生成的 JavaScript 代码设置目标环境。它让 Module Tools 将目标环境无法识别的 JavaScript 语法转换为在这些环境中可用的低版本 JavaScript 语法。

package/docs/zh/api/config/design-system.md

@@ -647,7 +647,7 @@ const designSystem = {
 ```
 
 :::tip
-更多关于[TailwindCSS 配置](https://tailwindcss.com/docs/configuration#theme)
+更多关于[Tailwind CSS 配置](https://tailwindcss.com/docs/configuration#theme)
 :::
 
 </details>

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

@@ -4,30 +4,20 @@ sidebar_position: 6
 
 # 主题配置
 
-模块工程通过 [`designSystem`](/api/config/design-system) API，提供了配置主题的能力。
+Module Tools 通过 [`designSystem`](/api/config/design-system) 选项，提供了配置 Tailwind CSS 主题的能力。
 
 ## 动机和原理
 
-主题配置有些类似组件库中的定制主题功能，主要用于样式开发中使用。我们可以通过 `designSystem` 配置在不同的样式开发环境下使用由它生成的 `designToken`。
+主题配置有些类似组件库中的定制主题功能，主要用于开发样式。当你使用 `designSystem` 时，它会作为 Tailwind CSS 的 `theme` 配置。因此你可以使用：
 
-所谓 `designToken` 在不同的样式开发环境下对应不同的东西：
+- Tailwind CSS 支持的 CSS 类名。
+- 在 CSS/Less/Sass 下通过 `@apply` 自定义指令使用与 Tailwind CSS 支持的 CSS 类名同名的字符串。
 
-- 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 全局变量。
-:::
+关于 `designSystem` 的默认值，可以查看 [`designSystem` API](/api/config/design-system)。
 
 ## 使用示例
 
-### tailwindcss
-
-在使用 tailwindcss 的时候，可以通过 `designSystem` 来设置它的 [`theme`](https://v2.tailwindcss.com/docs/theme#extending-the-default-theme) 配置。
+在使用 Tailwind CSS 的时候，可以通过 `designSystem` 来设置它的 [`theme`](https://tailwindcss.com/docs/theme) 配置。
 
 例如在下面的配置中扩展了原有的颜色配置:
 
@@ -43,9 +33,9 @@ export default {
 };
 ```
 
-我们可以在代码中有两种使用 tailwindcss 的方式。
+在代码中，我们可以有两种使用 Tailwind CSS 的方式。
 
-#### HTML 类名
+#### CSS 类名
 
 ```tsx title="./src/index.tsx"
 import 'tailwindcss/utilities.css';

package/package.json

@@ -9,13 +9,13 @@
     "directory": "packages/document/module-doc"
   },
   "license": "MIT",
-  "version": "2.32.0",
+  "version": "2.32.1",
   "main": "index.js",
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.32.0",
-    "@modern-js/doc-tools": "2.32.0"
+    "@modern-js/doc-tools": "2.32.1",
+    "@modern-js/doc-plugin-auto-sidebar": "2.32.1"
   },
   "scripts": {
     "dev": "modern dev",