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

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

@@ -1,76 +0,0 @@
----
-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.
-
-- 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`.
-
-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).
-
-:::info
-The css/less/sass global variables are not supported yet.
-:::
-
-## Usage examples
-
-### tailwindcss
-
-When using tailwindcss, its [`theme`](https://v2.tailwindcss.com/docs/theme#extending-the-default-theme) configuration can be set via `designSystem`.
-
-For example, the following configuration extends the original color configuration:
-
-```ts title="modern.config.ts"
-export default {
-  designSystem: {
-    extend: {
-      colors: {
-        primary: '#1677ff',
-      },
-    },
-  },
-};
-```
-
-We can have two ways of using tailwindcss in our code.
-
-#### HTML Class
-
-```tsx title="./src/index.tsx"
-import 'tailwindcss/utilities.css';
-
-export default () => {
-  return <div className="bg-primary"></div>;
-};
-```
-
-#### `@apply` Directives
-
-:::info
-About [`@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;
-}
-```