tailwind-preset-antd 0.0.2 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/README.en-US.md +38 -39
  2. package/README.md +40 -41
  3. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/defineProperty.js +1 -1
  4. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/objectSpread2.js +1 -1
  5. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPrimitive.js +1 -1
  6. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPropertyKey.js +1 -1
  7. package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/typeof.js +1 -1
  8. package/dist/core/genCssVarByTokens.js +19 -2
  9. package/dist/plugin.d.ts +2 -2
  10. package/dist/plugin.js +4 -8
  11. package/dist/preset/tokens/borderRadius.d.ts +3 -1
  12. package/dist/preset/tokens/colorPalettes.d.ts +6 -2
  13. package/dist/preset/tokens/colorPalettes.js +6 -2
  14. package/dist/preset/tokens/fontSizes.d.ts +3 -1
  15. package/dist/preset/tokens/functionalColors.d.ts +3 -1
  16. package/dist/preset/tokens/margins.d.ts +3 -1
  17. package/dist/preset/tokens/semanticColors.d.ts +3 -1
  18. package/dist/preset.d.ts +1 -1
  19. package/dist/utils/type.d.ts +6 -0
  20. package/package.json +13 -7
package/README.en-US.md CHANGED
@@ -1,13 +1,10 @@
1
- A tailwindcss plugin based on antd Design Token.
1
+ Use antd design token like using tailwindcss.
2
2
 
3
- English | [简体中文](./README.zh-CN.md)
3
+ Provides common antd design token easier to use. Recommended to use antd v6 and tailwindcss v4, but also supports antd v5 and tailwindcss v3.
4
4
 
5
- # Project Introduction
6
-
7
- Version requirements:
5
+ [简体中文](./README.md) | English
8
6
 
9
- - antd >= 5
10
- - tailwindcss >= 3
7
+ # Project Introduction
11
8
 
12
9
  Before:
13
10
 
@@ -31,28 +28,25 @@ function App() {
31
28
 
32
29
  ## Basic Usage
33
30
 
34
- ### tailwindcss v3
31
+ ### tailwindcss v4
35
32
 
36
- 1. Register tailwind plugin
33
+ Use plugin in your css
37
34
 
38
- ```js
39
- // tailwind.config.ts
40
- import type { Config } from "tailwindcss/types/config";
41
- import antdThemePreset from "tailwind-preset-antd/plugin";
42
-
43
- const config: Config = {
44
- // ...
45
- // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
46
- plugins: [antdThemePreset],
47
- };
35
+ ```css
36
+ @plugin "tailwind-preset-antd/plugin";
48
37
 
49
- export default config;
38
+ /* or
39
+ @plugin "tailwind-preset-antd/plugin" {
40
+ twPrefix: "ant";
41
+ cssVarPrefix: "abcd";
42
+ }
43
+ */
50
44
  ```
51
45
 
52
- 2. Register global css variables based on antd token
46
+ Inject css variables component in any component
53
47
 
54
- ```jsx
55
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
48
+ ```tsx
49
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
56
50
 
57
51
  export default function App() {
58
52
  return (
@@ -63,25 +57,28 @@ export default function App() {
63
57
  }
64
58
  ```
65
59
 
66
- If you use the `tailwind-merge` plugin, you need to add `fontSizes` to its configuration. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
60
+ ### tailwindcss v3
67
61
 
68
- ### tailwindcss v4
62
+ Use plugin in your `tailwind.config.ts`
69
63
 
70
- See [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
64
+ ```ts
65
+ // tailwind.config.ts
66
+ import type { Config } from "tailwindcss/types/config";
67
+ import tailwindPresetAntd from "tailwind-preset-antd/plugin";
71
68
 
72
- ```css
73
- @plugin "tailwind-preset-antd/plugin";
69
+ const config: Config = {
70
+ // ...
71
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
72
+ plugins: [tailwindPresetAntd],
73
+ };
74
74
 
75
- /* or
76
- @plugin "tailwind-preset-antd/plugin" {
77
- twPrefix: "ant";
78
- cssVarPrefix: "abcd";
79
- }
80
- */
75
+ export default config;
81
76
  ```
82
77
 
83
- ```jsx
84
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
78
+ Inject css variables component in any component
79
+
80
+ ```tsx
81
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
85
82
 
86
83
  export default function App() {
87
84
  return (
@@ -92,14 +89,16 @@ export default function App() {
92
89
  }
93
90
  ```
94
91
 
92
+ If you use the `tailwind-merge` plugin, additional configuration is required. See [Using with tailwind-merge](#using-with-tailwind-merge) for details
93
+
95
94
  ## Configuration Options
96
95
 
97
96
  - `twPrefix`: tw class name prefix, default is `''`
98
- - `cssVarPrefix`: Generated css var variable prefix, default is `'a'`
97
+ - `cssVarPrefix`: Generated css var variable prefix, default is `'a'` (you must also set `AntdTokenCssVar`'s `cssVarPrefix`)
99
98
 
100
99
  For example: when `twPrefix` is `ant` and `cssVarPrefix` is `abcd`, the generated css var variable and style are as follows:
101
100
 
102
- ```jsx
101
+ ```tsx
103
102
  /**
104
103
  * :root{
105
104
  * --abcd-colorPrimary: 47 84 235;
@@ -109,7 +108,7 @@ function App() {
109
108
  return <div className="bg-ant-colorPrimary"></div>;
110
109
  }
111
110
 
112
- // Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
111
+ // Generated css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
113
112
  ```
114
113
 
115
114
  ### Using with tailwind-merge
package/README.md CHANGED
@@ -1,13 +1,10 @@
1
- 基于 Antd Design Token 的 tailwindcss 插件。
1
+ 像使用 tailwindcss 一样使用 antd design token。
2
2
 
3
- [English](./README.md) | 简体中文
3
+ 提供常用 antd design token 更易于使用。推荐使用 antd v6 和 tailwindcss v4，但同样支持 antd v5 和 tailwindcss v3。
4
4
 
5
- # 项目介绍
6
-
7
- 版本要求：
5
+ [English](./README.en-US.md) | 简体中文
8
6
 
9
- - antd >= 5
10
- - tailwindcss >= 3
7
+ # 项目介绍
11
8
 
12
9
  以前：
13
10
 
@@ -15,9 +12,9 @@
15
12
  import { theme } from "antd";
16
13
 
17
14
  function App() {
18
- const { cssVar } = theme.useToken(); // antd v6
15
+ const { token } = theme.useToken();
19
16
 
20
- return <div style={{ backgroundColor: cssVar.colorPrimary }}></div>;
17
+ return <div style={{ backgroundColor: token.colorPrimary }}></div>;
21
18
  }
22
19
  ```
23
20
 
@@ -31,28 +28,25 @@ function App() {
31
28
 
32
29
  ## 基础使用
33
30
 
34
- ### tailwindcss v3
31
+ ### tailwindcss v4
35
32
 
36
- 1. 注册 tailwind 插件
33
+ 在你的 css 中使用插件
37
34
 
38
- ```js
39
- // tailwind.config.ts
40
- import type { Config } from "tailwindcss/types/config";
41
- import antdThemePreset from "tailwind-preset-antd/plugin";
42
-
43
- const config: Config = {
44
- // ...
45
- // or custom plugins config: [antdThemePreset({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
46
- plugins: [antdThemePreset],
47
- };
35
+ ```css
36
+ @plugin "tailwind-preset-antd/plugin";
48
37
 
49
- export default config;
38
+ /* or
39
+ @plugin "tailwind-preset-antd/plugin" {
40
+ twPrefix: "ant";
41
+ cssVarPrefix: "abcd";
42
+ }
43
+ */
50
44
  ```
51
45
 
52
- 2. 注册基于 antd token 的全局 css 变量
46
+ 在你的任意组件中注入 css 变量的组件
53
47
 
54
- ```jsx
55
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
48
+ ```tsx
49
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
56
50
 
57
51
  export default function App() {
58
52
  return (
@@ -63,25 +57,28 @@ export default function App() {
63
57
  }
64
58
  ```
65
59
 
66
- 如果使用了 `tailwind-merge` 插件，则需要将 `fontSizes` 添加至其配置中，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
60
+ ### tailwindcss v3
67
61
 
68
- ### tailwindcss v4
62
+ 在你的 `tailwind.config.ts` 中使用插件
69
63
 
70
- 查看 [How can I pass parameters to a TailwindCSS plugin in a CSS-first configuration?](https://github.com/tailwindlabs/tailwindcss/discussions/15997)
64
+ ```js
65
+ // tailwind.config.ts
66
+ import type { Config } from "tailwindcss/types/config";
67
+ import tailwindPresetAntd from "tailwind-preset-antd/plugin";
71
68
 
72
- ```css
73
- @plugin "tailwind-preset-antd/plugin";
69
+ const config: Config = {
70
+ // ...
71
+ // or custom plugins config: [tailwindPresetAntd({ twPrefix: 'ant', cssVarPrefix: 'abcd' })],
72
+ plugins: [tailwindPresetAntd],
73
+ };
74
74
 
75
- /* or
76
- @plugin "tailwind-preset-antd/plugin" {
77
- twPrefix: "ant";
78
- cssVarPrefix: "abcd";
79
- }
80
- */
75
+ export default config;
81
76
  ```
82
77
 
83
- ```jsx
84
- import { AntdTokenCssVar } from "tailwind-preset-antd/components";
78
+ 在你的任意组件中注入 css 变量的组件
79
+
80
+ ```tsx
81
+ import AntdTokenCssVar from "tailwind-preset-antd/components";
85
82
 
86
83
  export default function App() {
87
84
  return (
@@ -92,14 +89,16 @@ export default function App() {
92
89
  }
93
90
  ```
94
91
 
92
+ 如果使用了 `tailwind-merge` 插件，则需要进行额外配置，具体使用见 [与 tailwind-merge 配合使用](#与-tailwind-merge-配合使用)
93
+
95
94
  ## 配置项
96
95
 
97
96
  - `twPrefix`: tw 类名前缀，默认为 `''`
98
- - `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`
97
+ - `cssVarPrefix`: 生成的 css var 变量前缀，默认为 `'a'`（你必须同时设置 `AntdTokenCssVar` 的 `cssVarPrefix`）
99
98
 
100
99
  例如：当 twPrefix 为 `ant` 时，`cssVarPrefix` 为 `abcd` 时，生成的 css var 变量及样式如下：
101
100
 
102
- ```jsx
101
+ ```tsx
103
102
  /**
104
103
  * :root{
105
104
  * --abcd-colorPrimary: 47 84 235;
@@ -109,7 +108,7 @@ function App() {
109
108
  return <div className="bg-ant-colorPrimary"></div>;
110
109
  }
111
110
 
112
- // 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--a-colorPrimary)); }
111
+ // 生成的 css: .bg-ant-colorPrimary { background-color: rgb(var(--abcd-colorPrimary)); }
113
112
  ```
114
113
 
115
114
  ### 与 tailwind-merge 配合使用
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/defineProperty.js RENAMED
@@ -1,5 +1,5 @@
1
1
  import { toPropertyKey } from "./toPropertyKey.js";
2
- //#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
2
+ //#region \0@oxc-project+runtime@0.129.0/helpers/defineProperty.js
3
3
  function _defineProperty(e, r, t) {
4
4
  return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
5
5
  value: t,
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/objectSpread2.js RENAMED
@@ -1,5 +1,5 @@
1
1
  import { _defineProperty } from "./defineProperty.js";
2
- //#region \0@oxc-project+runtime@0.127.0/helpers/objectSpread2.js
2
+ //#region \0@oxc-project+runtime@0.129.0/helpers/objectSpread2.js
3
3
  function ownKeys(e, r) {
4
4
  var t = Object.keys(e);
5
5
  if (Object.getOwnPropertySymbols) {
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPrimitive.js RENAMED
@@ -1,5 +1,5 @@
1
1
  import { _typeof } from "./typeof.js";
2
- //#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
2
+ //#region \0@oxc-project+runtime@0.129.0/helpers/toPrimitive.js
3
3
  function toPrimitive(t, r) {
4
4
  if ("object" != _typeof(t) || !t) return t;
5
5
  var e = t[Symbol.toPrimitive];
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/toPropertyKey.js RENAMED
@@ -1,6 +1,6 @@
1
1
  import { _typeof } from "./typeof.js";
2
2
  import { toPrimitive } from "./toPrimitive.js";
3
- //#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
3
+ //#region \0@oxc-project+runtime@0.129.0/helpers/toPropertyKey.js
4
4
  function toPropertyKey(t) {
5
5
  var i = toPrimitive(t, "string");
6
6
  return "symbol" == _typeof(i) ? i : i + "";
package/dist/_virtual/{_@oxc-project_runtime@0.127.0 → _@oxc-project_runtime@0.129.0}/helpers/typeof.js RENAMED
@@ -1,4 +1,4 @@
1
- //#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
1
+ //#region \0@oxc-project+runtime@0.129.0/helpers/typeof.js
2
2
  function _typeof(o) {
3
3
  "@babel/helpers - typeof";
4
4
  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
package/dist/core/genCssVarByTokens.js CHANGED
@@ -8,8 +8,25 @@ import { borderRadius } from "../preset/tokens/borderRadius.js";
8
8
  //#region src/core/genCssVarByTokens.ts
9
9
  function genCSSVarByTokens(tokens, cssVarPrefix = "a") {
10
10
  let colorsVariables = "";
11
- for (const [key, value] of Object.entries(tokens)) {
12
- if (colorPalettes.includes(key)) colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
11
+ const presetTokens = [
12
+ ...colorPalettes,
13
+ ...functionalColors,
14
+ ...semanticColors,
15
+ ...margins,
16
+ ...borderRadius,
17
+ ...fontSizes
18
+ ];
19
+ for (let i = 0; i < presetTokens.length; i++) {
20
+ const key = presetTokens[i];
21
+ const value = tokens[key];
22
+ if (value === void 0 && process.env.NODE_ENV !== "production") {
23
+ console.warn(`[tailwind-preset-antd]: ${key} is not defined in antd design token`);
24
+ continue;
25
+ }
26
+ if (colorPalettes.includes(key)) {
27
+ colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
28
+ continue;
29
+ }
13
30
  if (functionalColors.includes(key)) {
14
31
  const rgb = hexToRgb(value);
15
32
  colorsVariables += `--${cssVarPrefix}-${key}:${rgb};`;
package/dist/plugin.d.ts CHANGED
@@ -18,9 +18,9 @@ interface PluginWithOptions<T> {
18
18
  __isOptionsFunction: true;
19
19
  }
20
20
  /**
21
- * @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
21
+ * @description Based on Antd Design Token to customize TailwindCSS styles, related extensions include `color`, `borderRadius`, `fontSize`, and `margin(gap)`.
22
22
  * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
23
- * @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
23
+ * @see https://ant.design/docs/react/customize-theme-cn#maptoken
24
24
  * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
25
25
  */
26
26
  declare const twAntdPresetPlugin: PluginWithOptions<PluginOptions>;
package/dist/plugin.js CHANGED
@@ -1,20 +1,16 @@
1
1
  import { createBorderRadius, createColorPalettes, createFontSize, createSpacing } from "./core/genTailwindTheme.js";
2
- import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.127.0/helpers/objectSpread2.js";
2
+ import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.129.0/helpers/objectSpread2.js";
3
3
  import plugin from "tailwindcss/plugin";
4
4
  //#region src/plugin.ts
5
5
  /**
6
- * @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
6
+ * @description Based on Antd Design Token to customize TailwindCSS styles, related extensions include `color`, `borderRadius`, `fontSize`, and `margin(gap)`.
7
7
  * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
8
- * @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
8
+ * @see https://ant.design/docs/react/customize-theme-cn#maptoken
9
9
  * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
10
10
  */
11
11
  const twAntdPresetPlugin = plugin.withOptions(() => () => {}, (options = {}) => {
12
12
  const { cssVarPrefix = "a", twPrefix = "" } = options;
13
- return { theme: {
14
- /**
15
- * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
16
- */
17
- extend: {
13
+ return { theme: { extend: {
18
14
  colors: _objectSpread2(_objectSpread2({}, createColorPalettes(cssVarPrefix, twPrefix)), {}, {
19
15
  white: "rgb(255 255 255)",
20
16
  black: "rgb(0 0 0)",
package/dist/preset/tokens/borderRadius.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/borderRadius.d.ts
2
- declare const borderRadius: string[];
4
+ declare const borderRadius: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { borderRadius };
package/dist/preset/tokens/colorPalettes.d.ts CHANGED
@@ -1,7 +1,11 @@
1
+ import { PresetColorKey } from "antd/es/theme/internal.js";
2
+ import { ColorPalettes, LegacyColorPalettes } from "antd/es/theme/interface/index.js";
3
+
1
4
  //#region src/preset/tokens/colorPalettes.d.ts
5
+ type PresetColorPalettes = ColorPalettes & PresetColorKey & LegacyColorPalettes;
2
6
  /**
3
- * `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
7
+ * `['red', 'red1', 'red2', ……, 'red10', 'magenta',……]`
4
8
  */
5
- declare const colorPalettes: string[];
9
+ declare const colorPalettes: PresetColorPalettes[];
6
10
  //#endregion
7
11
  export { colorPalettes };
package/dist/preset/tokens/colorPalettes.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
2
+ * `['red', 'red1', 'red2', ……, 'red10', 'magenta',……]`
3
3
  */
4
4
  const colorPalettes = [
5
5
  "red",
@@ -14,6 +14,10 @@ const colorPalettes = [
14
14
  "geekblue",
15
15
  "purple",
16
16
  "magenta"
17
- ].flatMap((color) => [color, ...Array.from({ length: 10 }, (_, i) => `${color}-${i + 1}`)]);
17
+ ].flatMap((color) => [
18
+ color,
19
+ ...Array.from({ length: 10 }, (_, i) => `${color}${i + 1}`),
20
+ ...Array.from({ length: 10 }, (_, i) => `${color}-${i + 1}`)
21
+ ]);
18
22
  //#endregion
19
23
  export { colorPalettes };
package/dist/preset/tokens/fontSizes.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/fontSizes.d.ts
2
- declare const fontSizes: string[];
4
+ declare const fontSizes: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { fontSizes };
package/dist/preset/tokens/functionalColors.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/functionalColors.d.ts
2
- declare const functionalColors: string[];
4
+ declare const functionalColors: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { functionalColors };
package/dist/preset/tokens/margins.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/margins.d.ts
2
- declare const margins: string[];
4
+ declare const margins: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { margins };
package/dist/preset/tokens/semanticColors.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import { AliasTokenKey } from "../../utils/type.js";
2
+
1
3
  //#region src/preset/tokens/semanticColors.d.ts
2
- declare const semanticColors: string[];
4
+ declare const semanticColors: AliasTokenKey[];
3
5
  //#endregion
4
6
  export { semanticColors };
package/dist/preset.d.ts CHANGED
@@ -6,6 +6,6 @@ import { fontSizes } from "./preset/tokens/fontSizes.js";
6
6
  import { borderRadius } from "./preset/tokens/borderRadius.js";
7
7
 
8
8
  //#region src/preset/index.d.ts
9
- declare const colorPresets: string[];
9
+ declare const colorPresets: ("blue" | "purple" | "cyan" | "green" | "magenta" | "pink" | "red" | "orange" | "yellow" | "volcano" | "geekblue" | "lime" | "gold" | "blue1" | "blue2" | "blue3" | "blue4" | "blue5" | "blue6" | "blue7" | "blue8" | "blue9" | "blue10" | "purple1" | "purple2" | "purple3" | "purple4" | "purple5" | "purple6" | "purple7" | "purple8" | "purple9" | "purple10" | "cyan1" | "cyan2" | "cyan3" | "cyan4" | "cyan5" | "cyan6" | "cyan7" | "cyan8" | "cyan9" | "cyan10" | "green1" | "green2" | "green3" | "green4" | "green5" | "green6" | "green7" | "green8" | "green9" | "green10" | "magenta1" | "magenta2" | "magenta3" | "magenta4" | "magenta5" | "magenta6" | "magenta7" | "magenta8" | "magenta9" | "magenta10" | "pink1" | "pink2" | "pink3" | "pink4" | "pink5" | "pink6" | "pink7" | "pink8" | "pink9" | "pink10" | "red1" | "red2" | "red3" | "red4" | "red5" | "red6" | "red7" | "red8" | "red9" | "red10" | "orange1" | "orange2" | "orange3" | "orange4" | "orange5" | "orange6" | "orange7" | "orange8" | "orange9" | "orange10" | "yellow1" | "yellow2" | "yellow3" | "yellow4" | "yellow5" | "yellow6" | "yellow7" | "yellow8" | "yellow9" | "yellow10" | "volcano1" | "volcano2" | "volcano3" | "volcano4" | "volcano5" | "volcano6" | "volcano7" | "volcano8" | "volcano9" | "volcano10" | "geekblue1" | "geekblue2" | "geekblue3" | "geekblue4" | "geekblue5" | "geekblue6" | "geekblue7" | "geekblue8" | "geekblue9" | "geekblue10" | "lime1" | "lime2" | "lime3" | "lime4" | "lime5" | "lime6" | "lime7" | "lime8" | "lime9" | "lime10" | "gold1" | "gold2" | "gold3" | "gold4" | "gold5" | "gold6" | "gold7" | "gold8" | "gold9" | "gold10" | "blue-1" | "blue-2" | "blue-3" | "blue-4" | "blue-5" | "blue-6" | "blue-7" | "blue-8" | "blue-9" | "blue-10" | "purple-1" | "purple-2" | "purple-3" | "purple-4" | "purple-5" | "purple-6" | "purple-7" | "purple-8" | "purple-9" | "purple-10" | "cyan-1" | "cyan-2" | "cyan-3" | "cyan-4" | "cyan-5" | "cyan-6" | "cyan-7" | "cyan-8" | "cyan-9" | "cyan-10" | "green-1" | "green-2" | "green-3" | "green-4" | "green-5" | "green-6" | "green-7" | "green-8" | "green-9" | "green-10" | "magenta-1" | "magenta-2" | "magenta-3" | "magenta-4" | "magenta-5" | "magenta-6" | "magenta-7" | "magenta-8" | "magenta-9" | "magenta-10" | "pink-1" | "pink-2" | "pink-3" | "pink-4" | "pink-5" | "pink-6" | "pink-7" | "pink-8" | "pink-9" | "pink-10" | "red-1" | "red-2" | "red-3" | "red-4" | "red-5" | "red-6" | "red-7" | "red-8" | "red-9" | "red-10" | "orange-1" | "orange-2" | "orange-3" | "orange-4" | "orange-5" | "orange-6" | "orange-7" | "orange-8" | "orange-9" | "orange-10" | "yellow-1" | "yellow-2" | "yellow-3" | "yellow-4" | "yellow-5" | "yellow-6" | "yellow-7" | "yellow-8" | "yellow-9" | "yellow-10" | "volcano-1" | "volcano-2" | "volcano-3" | "volcano-4" | "volcano-5" | "volcano-6" | "volcano-7" | "volcano-8" | "volcano-9" | "volcano-10" | "geekblue-1" | "geekblue-2" | "geekblue-3" | "geekblue-4" | "geekblue-5" | "geekblue-6" | "geekblue-7" | "geekblue-8" | "geekblue-9" | "geekblue-10" | "lime-1" | "lime-2" | "lime-3" | "lime-4" | "lime-5" | "lime-6" | "lime-7" | "lime-8" | "lime-9" | "lime-10" | "gold-1" | "gold-2" | "gold-3" | "gold-4" | "gold-5" | "gold-6" | "gold-7" | "gold-8" | "gold-9" | "gold-10" | "colorFillContentHover" | "colorFillAlter" | "colorFillContent" | "colorBgContainerDisabled" | "colorBgTextHover" | "colorBgTextActive" | "colorBorderBg" | "colorSplit" | "colorTextPlaceholder" | "colorTextDisabled" | "colorTextHeading" | "colorTextLabel" | "colorTextDescription" | "colorTextLightSolid" | "colorIcon" | "colorIconHover" | "colorHighlight" | "controlOutline" | "colorWarningOutline" | "colorErrorOutline" | "fontSizeIcon" | "fontWeightStrong" | "controlOutlineWidth" | "controlItemBgHover" | "controlItemBgActive" | "controlItemBgActiveHover" | "controlInteractiveSize" | "controlItemBgActiveDisabled" | "lineWidthFocus" | "paddingXXS" | "paddingXS" | "paddingSM" | "padding" | "paddingMD" | "paddingLG" | "paddingXL" | "paddingContentHorizontalLG" | "paddingContentHorizontal" | "paddingContentHorizontalSM" | "paddingContentVerticalLG" | "paddingContentVertical" | "paddingContentVerticalSM" | "marginXXS" | "marginXS" | "marginSM" | "margin" | "marginMD" | "marginLG" | "marginXL" | "marginXXL" | "opacityLoading" | "boxShadow" | "boxShadowSecondary" | "boxShadowTertiary" | "linkDecoration" | "linkHoverDecoration" | "linkFocusDecoration" | "controlPaddingHorizontal" | "controlPaddingHorizontalSM" | "screenXS" | "screenXSMin" | "screenXSMax" | "screenSM" | "screenSMMin" | "screenSMMax" | "screenMD" | "screenMDMin" | "screenMDMax" | "screenLG" | "screenLGMin" | "screenLGMax" | "screenXL" | "screenXLMin" | "screenXLMax" | "screenXXL" | "screenXXLMin" | "screenXXLMax" | "screenXXXL" | "screenXXXLMin" | "controlTmpOutline" | "colorPrimary" | "colorSuccess" | "colorWarning" | "colorError" | "colorInfo" | "colorTextBase" | "colorBgBase" | "colorLink" | "fontFamily" | "fontFamilyCode" | "fontSize" | "lineWidth" | "lineType" | "borderRadius" | "sizeUnit" | "sizeStep" | "sizePopupArrow" | "controlHeight" | "zIndexBase" | "zIndexPopupBase" | "opacityImage" | "motionUnit" | "motionBase" | "motionEaseOutCirc" | "motionEaseInOutCirc" | "motionEaseInOut" | "motionEaseOutBack" | "motionEaseInBack" | "motionEaseInQuint" | "motionEaseOutQuint" | "motionEaseOut" | "wireframe" | "motion" | "colorWhite" | "colorBgMask" | "colorText" | "colorTextSecondary" | "colorTextTertiary" | "colorTextQuaternary" | "colorBorder" | "colorBorderSecondary" | "colorBorderDisabled" | "colorFill" | "colorFillSecondary" | "colorFillTertiary" | "colorFillQuaternary" | "colorBgLayout" | "colorBgContainer" | "colorBgElevated" | "colorBgSpotlight" | "colorBgBlur" | "colorBgSolid" | "colorBgSolidActive" | "colorBgSolidHover" | "colorPrimaryBg" | "colorPrimaryBgHover" | "colorPrimaryBorder" | "colorPrimaryBorderHover" | "colorPrimaryHover" | "colorPrimaryActive" | "colorPrimaryTextHover" | "colorPrimaryText" | "colorPrimaryTextActive" | "colorSuccessBg" | "colorSuccessBgHover" | "colorSuccessBorder" | "colorSuccessBorderHover" | "colorSuccessHover" | "colorSuccessActive" | "colorSuccessTextHover" | "colorSuccessText" | "colorSuccessTextActive" | "colorWarningBg" | "colorWarningBgHover" | "colorWarningBorder" | "colorWarningBorderHover" | "colorWarningHover" | "colorWarningActive" | "colorWarningTextHover" | "colorWarningText" | "colorWarningTextActive" | "colorErrorBg" | "colorErrorBgHover" | "colorErrorBgFilledHover" | "colorErrorBgActive" | "colorErrorBorder" | "colorErrorBorderHover" | "colorErrorHover" | "colorErrorActive" | "colorErrorTextHover" | "colorErrorText" | "colorErrorTextActive" | "colorInfoBg" | "colorInfoBgHover" | "colorInfoBorder" | "colorInfoBorderHover" | "colorInfoHover" | "colorInfoActive" | "colorInfoTextHover" | "colorInfoText" | "colorInfoTextActive" | "colorLinkHover" | "colorLinkActive" | "sizeXXL" | "sizeXL" | "sizeLG" | "sizeMD" | "sizeMS" | "size" | "sizeSM" | "sizeXS" | "sizeXXS" | "controlHeightXS" | "controlHeightSM" | "controlHeightLG" | "lineWidthBold" | "borderRadiusXS" | "borderRadiusSM" | "borderRadiusLG" | "borderRadiusOuter" | "fontSizeSM" | "fontSizeLG" | "fontSizeXL" | "fontSizeHeading1" | "fontSizeHeading2" | "fontSizeHeading3" | "fontSizeHeading4" | "fontSizeHeading5" | "lineHeight" | "lineHeightLG" | "lineHeightSM" | "lineHeightHeading1" | "lineHeightHeading2" | "lineHeightHeading3" | "lineHeightHeading4" | "lineHeightHeading5" | "motionDurationFast" | "motionDurationMid" | "motionDurationSlow")[];
10
10
  //#endregion
11
11
  export { borderRadius, colorPalettes, colorPresets, fontSizes, functionalColors, margins, semanticColors };
package/dist/utils/type.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { AliasToken } from "antd/es/theme/internal.js";
2
+
3
+ //#region src/utils/type.d.ts
4
+ type AliasTokenKey = keyof AliasToken;
5
+ //#endregion
6
+ export { AliasTokenKey };
package/package.json CHANGED
@@ -1,8 +1,12 @@
1
1
  {
2
2
  "name": "tailwind-preset-antd",
3
- "version": "0.0.2",
4
- "description": "Use Tailwind CSS with Ant Design tokens",
5
- "homepage": "https://github.com/json-q/tailwind-preset-antd",
3
+ "version": "0.1.0",
4
+ "description": "Use antd design token like using tailwindcss",
5
+ "keywords": [
6
+ "antd",
7
+ "tailwindcss"
8
+ ],
9
+ "homepage": "https://json-q.github.io/tailwind-preset-antd/",
6
10
  "license": "MIT",
7
11
  "author": "json-q",
8
12
  "repository": {
@@ -32,6 +36,7 @@
32
36
  "coverage": "vitest --coverage",
33
37
  "release": "bumpp",
34
38
  "prepublishOnly": "pnpm run build",
39
+ "lint:package": "publint",
35
40
  "typecheck": "tsc --noEmit",
36
41
  "lint": "oxlint",
37
42
  "lint:fix": "oxlint --fix",
@@ -45,21 +50,22 @@
45
50
  "@tailwindcss/vite": "^4.2.4",
46
51
  "@testing-library/jest-dom": "^6.9.1",
47
52
  "@testing-library/react": "^16.3.2",
48
- "@types/node": "^25.6.0",
53
+ "@types/node": "^25.6.2",
49
54
  "@types/react": "^19.2.14",
50
55
  "@types/react-dom": "^19.2.3",
51
56
  "@vitejs/plugin-react": "^6.0.1",
52
57
  "@vitest/coverage-v8": "4.1.5",
53
- "bumpp": "^11.0.1",
58
+ "bumpp": "^11.1.0",
54
59
  "jsdom": "^29.1.1",
55
60
  "oxfmt": "^0.48.0",
56
61
  "oxlint": "^1.63.0",
57
62
  "postcss": "^8.5.14",
63
+ "publint": "^0.3.19",
58
64
  "react-dom": "^19.2.6",
59
65
  "tailwindcss": "^4.2.4",
60
- "tsdown": "^0.21.10",
66
+ "tsdown": "^0.22.0",
61
67
  "typescript": "^6.0.3",
62
- "vite": "^8.0.10",
68
+ "vite": "^8.0.11",
63
69
  "vitest": "^4.1.5"
64
70
  },
65
71
  "peerDependencies": {