tailwind-preset-antd 0.0.1 → 0.0.2

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/defineProperty.js

@@ -0,0 +1,12 @@
+import { toPropertyKey } from "./toPropertyKey.js";
+//#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+//#endregion
+export { _defineProperty };

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/objectSpread2.js

@@ -0,0 +1,25 @@
+import { _defineProperty } from "./defineProperty.js";
+//#region \0@oxc-project+runtime@0.127.0/helpers/objectSpread2.js
+function ownKeys(e, r) {
+	var t = Object.keys(e);
+	if (Object.getOwnPropertySymbols) {
+		var o = Object.getOwnPropertySymbols(e);
+		r && (o = o.filter(function(r) {
+			return Object.getOwnPropertyDescriptor(e, r).enumerable;
+		})), t.push.apply(t, o);
+	}
+	return t;
+}
+function _objectSpread2(e) {
+	for (var r = 1; r < arguments.length; r++) {
+		var t = null != arguments[r] ? arguments[r] : {};
+		r % 2 ? ownKeys(Object(t), !0).forEach(function(r) {
+			_defineProperty(e, r, t[r]);
+		}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r) {
+			Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+		});
+	}
+	return e;
+}
+//#endregion
+export { _objectSpread2 };

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/toPrimitive.js

@@ -0,0 +1,14 @@
+import { _typeof } from "./typeof.js";
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+//#endregion
+export { toPrimitive };

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/toPropertyKey.js

@@ -0,0 +1,9 @@
+import { _typeof } from "./typeof.js";
+import { toPrimitive } from "./toPrimitive.js";
+//#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+//#endregion
+export { toPropertyKey };

package/dist/_virtual/_@oxc-project_runtime@0.127.0/helpers/typeof.js

@@ -0,0 +1,11 @@
+//#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+//#endregion
+export { _typeof };

package/dist/components.d.ts

@@ -0,0 +1,7 @@
+//#region src/components.d.ts
+interface AntdTokenCssVarProps {
+  cssVarPrefix?: string;
+}
+declare function AntdTokenCssVar(props: AntdTokenCssVarProps): null;
+//#endregion
+export { AntdTokenCssVar as default };

package/dist/components.js

@@ -0,0 +1,23 @@
+import { genCSSVarByTokens } from "./core/genCssVarByTokens.js";
+import { theme } from "antd";
+import { useInsertionEffect } from "react";
+//#region src/components.tsx
+const styleId = "antd-token-inject";
+function AntdTokenCssVar(props) {
+	const { cssVarPrefix } = props;
+	const { token } = theme.useToken();
+	useInsertionEffect(() => {
+		const cssVar = genCSSVarByTokens(token, cssVarPrefix);
+		const style = document.querySelector(`#${styleId}`) || document.createElement("style");
+		style.id = styleId;
+		style.setAttribute("plugin-name", "tailwind-preset-antd");
+		style.textContent = `:root{${cssVar}}`;
+		document.head.appendChild(style);
+		return () => {
+			document.head.removeChild(style);
+		};
+	}, [token, cssVarPrefix]);
+	return null;
+}
+//#endregion
+export { AntdTokenCssVar as default };

package/dist/core/genCssVarByTokens.js

@@ -0,0 +1,31 @@
+import { hexToRgb, isRGBColor } from "../utils/index.js";
+import { functionalColors } from "../preset/tokens/functionalColors.js";
+import { colorPalettes } from "../preset/tokens/colorPalettes.js";
+import { semanticColors } from "../preset/tokens/semanticColors.js";
+import { margins } from "../preset/tokens/margins.js";
+import { fontSizes } from "../preset/tokens/fontSizes.js";
+import { borderRadius } from "../preset/tokens/borderRadius.js";
+//#region src/core/genCssVarByTokens.ts
+function genCSSVarByTokens(tokens, cssVarPrefix = "a") {
+	let colorsVariables = "";
+	for (const [key, value] of Object.entries(tokens)) {
+		if (colorPalettes.includes(key)) colorsVariables += `--${cssVarPrefix}-${key}:${hexToRgb(value)};`;
+		if (functionalColors.includes(key)) {
+			const rgb = hexToRgb(value);
+			colorsVariables += `--${cssVarPrefix}-${key}:${rgb};`;
+			continue;
+		}
+		if (semanticColors.includes(key)) {
+			const rgb = isRGBColor(value) ? value : `rgb(${hexToRgb(value)})`;
+			colorsVariables += `--${cssVarPrefix}-${key}:${rgb};`;
+			continue;
+		}
+		if (fontSizes.includes(key) || margins.includes(key) || borderRadius.includes(key)) {
+			colorsVariables += `--${cssVarPrefix}-${key}:${value}px;`;
+			continue;
+		}
+	}
+	return colorsVariables;
+}
+//#endregion
+export { genCSSVarByTokens };

package/dist/core/genTailwindTheme.js

@@ -0,0 +1,46 @@
+import { functionalColors } from "../preset/tokens/functionalColors.js";
+import { colorPalettes } from "../preset/tokens/colorPalettes.js";
+import { semanticColors } from "../preset/tokens/semanticColors.js";
+import { margins } from "../preset/tokens/margins.js";
+import { fontSizes } from "../preset/tokens/fontSizes.js";
+import { borderRadius } from "../preset/tokens/borderRadius.js";
+//#region src/core/genTailwindTheme.ts
+function genTwPrefixKey(key, prefix) {
+	return prefix ? `${prefix}-${key}` : key;
+}
+function createColorPalettes(cssVarPrefix = "a", twPrefix) {
+	const colorPaletteVar = {};
+	colorPalettes.forEach((color) => {
+		colorPaletteVar[genTwPrefixKey(color, twPrefix)] = `rgb(var(--${cssVarPrefix}-${color}))`;
+	});
+	functionalColors.forEach((key) => {
+		colorPaletteVar[genTwPrefixKey(key, twPrefix)] = `rgb(var(--${cssVarPrefix}-${key}))`;
+	});
+	semanticColors.forEach((key) => {
+		colorPaletteVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return colorPaletteVar;
+}
+function createFontSize(cssVarPrefix = "a", twPrefix) {
+	const fontSizeVar = {};
+	fontSizes.forEach((key) => {
+		fontSizeVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return fontSizeVar;
+}
+function createSpacing(cssVarPrefix = "a", twPrefix) {
+	const spacingVar = {};
+	margins.forEach((key) => {
+		spacingVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return spacingVar;
+}
+function createBorderRadius(cssVarPrefix = "a", twPrefix) {
+	const radiusVar = {};
+	borderRadius.forEach((key) => {
+		radiusVar[genTwPrefixKey(key, twPrefix)] = `var(--${cssVarPrefix}-${key})`;
+	});
+	return radiusVar;
+}
+//#endregion
+export { createBorderRadius, createColorPalettes, createFontSize, createSpacing };

package/dist/plugin.d.ts

@@ -0,0 +1,28 @@
+//#region src/plugin.d.ts
+interface PluginOptions {
+  /**
+   * @description tw class prefix
+   * @default '''
+   */
+  twPrefix?: string;
+  /**
+   * @description css variables prefix
+   * @default 'a'
+   */
+  cssVarPrefix?: string;
+}
+interface PluginWithOptions<T> {
+  (options?: T): {
+    handler: (api: any) => void;
+  };
+  __isOptionsFunction: true;
+}
+/**
+ * @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
+ * @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
+ * @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
+ * @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
+ */
+declare const twAntdPresetPlugin: PluginWithOptions<PluginOptions>;
+//#endregion
+export { twAntdPresetPlugin as default };

package/dist/plugin.js

@@ -0,0 +1,32 @@
+import { createBorderRadius, createColorPalettes, createFontSize, createSpacing } from "./core/genTailwindTheme.js";
+import { _objectSpread2 } from "./_virtual/_@oxc-project_runtime@0.127.0/helpers/objectSpread2.js";
+import plugin from "tailwindcss/plugin";
+//#region src/plugin.ts
+/**
+* @description 使用 Ant Design 的 Design Token 扩展 Tailwind CSS 类名，相关扩展有 color radius fontSize padding
+* @example `bg-colorPrimary` --> `backgroundColor: token.colorPrimary`;
+* @see https://ant-design.antgroup.com/docs/react/customize-theme-cn#seedtoken
+* @see https://github.com/tailwindlabs/tailwindcss/discussions/13292#discussioncomment-14256365
+*/
+const twAntdPresetPlugin = plugin.withOptions(() => () => {}, (options = {}) => {
+	const { cssVarPrefix = "a", twPrefix = "" } = options;
+	return { theme: { 
+	/**
+	* @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+	*/
+extend: {
+		colors: _objectSpread2(_objectSpread2({}, createColorPalettes(cssVarPrefix, twPrefix)), {}, {
+			white: "rgb(255 255 255)",
+			black: "rgb(0 0 0)",
+			current: "currentColor",
+			inherit: "inherit",
+			transparent: "transparent"
+		}),
+		fontSize: _objectSpread2({}, createFontSize(cssVarPrefix, twPrefix)),
+		radius: _objectSpread2({}, createBorderRadius(cssVarPrefix, twPrefix)),
+		borderRadius: _objectSpread2({}, createBorderRadius(cssVarPrefix, twPrefix)),
+		spacing: _objectSpread2({}, createSpacing(cssVarPrefix, twPrefix))
+	} } };
+});
+//#endregion
+export { twAntdPresetPlugin as default };

package/dist/preset/tokens/borderRadius.d.ts

@@ -0,0 +1,4 @@
+//#region src/preset/tokens/borderRadius.d.ts
+declare const borderRadius: string[];
+//#endregion
+export { borderRadius };

package/dist/preset/tokens/borderRadius.js

@@ -0,0 +1,9 @@
+//#region src/preset/tokens/borderRadius.ts
+const borderRadius = [
+	"borderRadiusXS",
+	"borderRadiusSM",
+	"borderRadius",
+	"borderRadiusLG"
+];
+//#endregion
+export { borderRadius };

package/dist/preset/tokens/colorPalettes.d.ts

@@ -0,0 +1,7 @@
+//#region src/preset/tokens/colorPalettes.d.ts
+/**
+ * `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
+ */
+declare const colorPalettes: string[];
+//#endregion
+export { colorPalettes };

package/dist/preset/tokens/colorPalettes.js

@@ -0,0 +1,19 @@
+/**
+* `['red', 'red-1', 'red-2', ……, 'red-10', 'magenta',……]`
+*/
+const colorPalettes = [
+	"red",
+	"volcano",
+	"orange",
+	"lime",
+	"gold",
+	"yellow",
+	"green",
+	"cyan",
+	"blue",
+	"geekblue",
+	"purple",
+	"magenta"
+].flatMap((color) => [color, ...Array.from({ length: 10 }, (_, i) => `${color}-${i + 1}`)]);
+//#endregion
+export { colorPalettes };

package/dist/preset/tokens/fontSizes.d.ts

@@ -0,0 +1,4 @@
+//#region src/preset/tokens/fontSizes.d.ts
+declare const fontSizes: string[];
+//#endregion
+export { fontSizes };

package/dist/preset/tokens/fontSizes.js

@@ -0,0 +1,9 @@
+//#region src/preset/tokens/fontSizes.ts
+const fontSizes = [
+	"fontSizeSM",
+	"fontSize",
+	"fontSizeLG",
+	"fontSizeXL"
+];
+//#endregion
+export { fontSizes };

package/dist/preset/tokens/functionalColors.d.ts

@@ -0,0 +1,4 @@
+//#region src/preset/tokens/functionalColors.d.ts
+declare const functionalColors: string[];
+//#endregion
+export { functionalColors };

package/dist/preset/tokens/functionalColors.js

@@ -0,0 +1,70 @@
+//#region src/preset/tokens/functionalColors.ts
+const brandColors = [
+	"colorPrimary",
+	"colorPrimaryBg",
+	"colorPrimaryBgHover",
+	"colorPrimaryBorder",
+	"colorPrimaryBorderHover",
+	"colorPrimaryHover",
+	"colorPrimaryActive",
+	"colorPrimaryTextHover",
+	"colorPrimaryText",
+	"colorPrimaryTextActive"
+];
+const successColors = [
+	"colorSuccess",
+	"colorSuccessBg",
+	"colorSuccessBgHover",
+	"colorSuccessBorder",
+	"colorSuccessBorderHover",
+	"colorSuccessHover",
+	"colorSuccessActive",
+	"colorSuccessTextHover",
+	"colorSuccessText",
+	"colorSuccessTextActive"
+];
+const warningColors = [
+	"colorWarning",
+	"colorWarningBg",
+	"colorWarningBgHover",
+	"colorWarningBorder",
+	"colorWarningBorderHover",
+	"colorWarningHover",
+	"colorWarningActive",
+	"colorWarningTextHover",
+	"colorWarningText",
+	"colorWarningTextActive"
+];
+const errorColors = [
+	"colorError",
+	"colorErrorBg",
+	"colorErrorBgHover",
+	"colorErrorBorder",
+	"colorErrorBorderHover",
+	"colorErrorHover",
+	"colorErrorActive",
+	"colorErrorTextHover",
+	"colorErrorText",
+	"colorErrorTextActive"
+];
+const infoColors = [
+	"colorInfo",
+	"colorInfoBg",
+	"colorInfoBgHover",
+	"colorInfoBorder",
+	"colorInfoBorderHover",
+	"colorInfoHover",
+	"colorInfoActive",
+	"colorInfoTextHover",
+	"colorInfoText",
+	"colorInfoTextActive"
+];
+const functionalColors = [
+	...brandColors,
+	...successColors,
+	...warningColors,
+	...errorColors,
+	...infoColors
+];
+//#endregion
+export { functionalColors };

package/dist/preset/tokens/margins.d.ts

@@ -0,0 +1,4 @@
+//#region src/preset/tokens/margins.d.ts
+declare const margins: string[];
+//#endregion
+export { margins };

package/dist/preset/tokens/margins.js

@@ -0,0 +1,13 @@
+//#region src/preset/tokens/margins.ts
+const margins = [
+	"marginXXS",
+	"marginXS",
+	"marginSM",
+	"margin",
+	"marginMD",
+	"marginLG",
+	"marginXL",
+	"marginXXL"
+];
+//#endregion
+export { margins };

package/dist/preset/tokens/semanticColors.d.ts

@@ -0,0 +1,4 @@
+//#region src/preset/tokens/semanticColors.d.ts
+declare const semanticColors: string[];
+//#endregion
+export { semanticColors };

package/dist/preset/tokens/semanticColors.js

@@ -0,0 +1,26 @@
+//#region src/preset/tokens/semanticColors.ts
+const semanticColors = [
+	"colorText",
+	"colorTextSecondary",
+	"colorTextTertiary",
+	"colorTextQuaternary",
+	"colorTextDescription",
+	"colorTextDisabled",
+	"colorTextHeading",
+	"colorTextLabel",
+	"colorTextLightSolid",
+	"colorTextPlaceholder",
+	"colorBgContainer",
+	"colorBgElevated",
+	"colorBgLayout",
+	"colorBgSpotlight",
+	"colorBgMask",
+	"colorBorder",
+	"colorBorderSecondary",
+	"colorFill",
+	"colorFillSecondary",
+	"colorFillTertiary",
+	"colorFillQuaternary"
+];
+//#endregion
+export { semanticColors };

package/dist/preset.d.ts

@@ -0,0 +1,11 @@
+import { functionalColors } from "./preset/tokens/functionalColors.js";
+import { colorPalettes } from "./preset/tokens/colorPalettes.js";
+import { semanticColors } from "./preset/tokens/semanticColors.js";
+import { margins } from "./preset/tokens/margins.js";
+import { fontSizes } from "./preset/tokens/fontSizes.js";
+import { borderRadius } from "./preset/tokens/borderRadius.js";
+
+//#region src/preset/index.d.ts
+declare const colorPresets: string[];
+//#endregion
+export { borderRadius, colorPalettes, colorPresets, fontSizes, functionalColors, margins, semanticColors };

package/dist/preset.js

@@ -0,0 +1,14 @@
+import { functionalColors } from "./preset/tokens/functionalColors.js";
+import { colorPalettes } from "./preset/tokens/colorPalettes.js";
+import { semanticColors } from "./preset/tokens/semanticColors.js";
+import { margins } from "./preset/tokens/margins.js";
+import { fontSizes } from "./preset/tokens/fontSizes.js";
+import { borderRadius } from "./preset/tokens/borderRadius.js";
+//#region src/preset/index.ts
+const colorPresets = [
+	...colorPalettes,
+	...functionalColors,
+	...semanticColors
+];
+//#endregion
+export { borderRadius, colorPalettes, colorPresets, fontSizes, functionalColors, margins, semanticColors };

package/dist/utils/index.js

@@ -0,0 +1,11 @@
+import hexRgb from "hex-rgb";
+//#region src/utils/index.ts
+function isRGBColor(color) {
+	return color.trim().startsWith("rgb");
+}
+function hexToRgb(hex) {
+	const { red, green, blue } = hexRgb(hex);
+	return `${red}, ${green}, ${blue}`;
+}
+//#endregion
+export { hexToRgb, isRGBColor };

package/package.json

@@ -1,8 +1,19 @@
 {
   "name": "tailwind-preset-antd",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Use Tailwind CSS with Ant Design tokens",
+  "homepage": "https://github.com/json-q/tailwind-preset-antd",
+  "license": "MIT",
+  "author": "json-q",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/json-q/tailwind-preset-antd.git"
+  },
+  "files": [
+    "dist"
+  ],
   "type": "module",
+  "sideEffects": false,
   "exports": {
     "./components": "./dist/components.js",
     "./plugin": "./dist/plugin.js",

package/.github/workflows/gh-pages.yml

@@ -1,49 +0,0 @@
-name: github pages
-
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          version: 10
-
-        # pnpm cache
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-
-      - name: Setup pnpm cache
-        uses: actions/cache@v4
-        with:
-          path: ${{ env.STORE_PATH }}
-          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          restore-keys: |
-            ${{ runner.os }}-pnpm-store-
-
-      - name: Install workspace dependencies
-        run: pnpm install
-
-      - name: Build Docs
-        run: pnpm build:play
-
-      - name: Deploy to GitHub Pages
-        uses: peaceiris/actions-gh-pages@v4
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./playground/docs-dist

package/.vscode/settings.json

@@ -1,25 +0,0 @@
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.oxc": "explicit"
-  },
-  "[json]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[jsonc]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[markdown]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[typescript]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[typescriptreact]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  },
-  "[yaml]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
-  }
-}

package/oxfmt.config.ts

@@ -1,22 +0,0 @@
-import { defineConfig } from "oxfmt";
-
-export default defineConfig({
-  useTabs: false,
-  tabWidth: 2,
-  printWidth: 100,
-  arrowParens: "always",
-  bracketSameLine: false,
-  bracketSpacing: true,
-  endOfLine: "lf",
-  jsxSingleQuote: false,
-  quoteProps: "as-needed",
-  semi: true,
-  singleQuote: false,
-  sortPackageJson: true,
-  trailingComma: "es5",
-  sortTailwindcss: {
-    functions: ["clsx", "cn"],
-    preserveWhitespace: true,
-  },
-  ignorePatterns: ["**/node_modules/**", "**/dist/**", "**/pnpm-lock.yaml"],
-});

package/oxlint.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from "oxlint";
-
-export default defineConfig({
-  plugins: ["eslint", "typescript", "unicorn", "oxc", "node"],
-  ignorePatterns: ["**/node_modules/**", "**/dist/**", "**/pnpm-lock.yaml"],
-});

package/playground/index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>tailwind-preset-antd</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
-  </body>
-</html>