feat: override the color variables in tailwind.css with antd's color …

…variables

src/app.tsx

@@ -115,6 +115,8 @@ export default function App() {
 			input={{ autoComplete: "off" }}
 			locale={getAntdLocale()}
 			theme={{
+				cssVar: true,
+				hashed: false,
 				algorithm:
 					isDark
 						? antdTheme.darkAlgorithm

src/components/antd-app/constants.ts

@@ -0,0 +1,124 @@
+// CSS 变量前缀
+export const prefix = "oo";
+// 基础色
+export const colors = [
+	"blue",
+	"purple",
+	"cyan",
+	"green",
+	"magenta",
+	"pink",
+	"red",
+	"orange",
+	"yellow",
+	"volcano",
+	"geekblue",
+	"gold",
+	"lime",
+];
+// 品牌色
+export const brandColors = [
+	"colorPrimary",
+	"colorPrimaryBg",
+	"colorPrimaryBgHover",
+	"colorPrimaryBorder",
+	"colorPrimaryBorderHover",
+	"colorPrimaryHover",
+	"colorPrimaryActive",
+	"colorPrimaryTextHover",
+	"colorPrimaryText",
+	"colorPrimaryTextActive",
+];
+// 成功色
+export const successColors = [
+	"colorSuccess",
+	"colorSuccessBg",
+	"colorSuccessBgHover",
+	"colorSuccessBorder",
+	"colorSuccessBorderHover",
+	"colorSuccessHover",
+	"colorSuccessActive",
+	"colorSuccessTextHover",
+	"colorSuccessText",
+	"colorSuccessTextActive",
+];
+// 警告色
+export const warningColors = [
+	"colorWarning",
+	"colorWarningBg",
+	"colorWarningBgHover",
+	"colorWarningBorder",
+	"colorWarningBorderHover",
+	"colorWarningHover",
+	"colorWarningActive",
+	"colorWarningTextHover",
+	"colorWarningText",
+	"colorWarningTextActive",
+];
+// 错误色
+export const errorColors = [
+	"colorError",
+	"colorErrorBg",
+	"colorErrorBgHover",
+	"colorErrorBorder",
+	"colorErrorBorderHover",
+	"colorErrorHover",
+	"colorErrorActive",
+	"colorErrorTextHover",
+	"colorErrorText",
+	"colorErrorTextActive",
+];
+// 信息色
+export const infoColors = [
+	"colorInfo",
+	"colorInfoBg",
+	"colorInfoBgHover",
+	"colorInfoBorder",
+	"colorInfoBorderHover",
+	"colorInfoHover",
+	"colorInfoActive",
+	"colorInfoTextHover",
+	"colorInfoText",
+	"colorInfoTextActive",
+];
+// 功能性色
+export const functionalColors = [
+	...successColors,
+	...warningColors,
+	...errorColors,
+	...infoColors,
+];
+// 中性色
+export const neutralColors = [
+	"colorText",
+	"colorTextSecondary",
+	"colorTextTertiary",
+	"colorTextQuaternary",
+	// 组件容器背景色
+	"colorBgContainer",
+	"colorBgElevated",
+	// 布局背景色
+	"colorBgLayout",
+
+	"colorBgSpotlight",
+	"colorBgMask",
+	// 边框色
+	"colorBorder",
+	"colorBorderSecondary",
+	// 填充色
+	"colorFill",
+	"colorFillSecondary",
+	"colorFillTertiary",
+	"colorFillQuaternary",
+];
+export const productLevelColorSystem = [
+	...brandColors,
+	...functionalColors,
+];
+export const colorPaletteNumbers = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+export const colorVariantsCount = 10;
+
+// ['blue', 'blue-1', 'blue-2', ……, 'blue-10', 'purple',……]
+export const colorPalettes = colors.flatMap(color =>
+	[color, ...Array.from({ length: colorVariantsCount }, (_, i) => `${color}-${i + 1}`)],
+);

src/components/antd-app/index.tsx

@@ -1,11 +1,25 @@
 import type { ReactNode } from "react";
+
 import { StaticAntd } from "#src/utils";
-import { App } from "antd";
+
+import { theme as antdTheme, App } from "antd";
+import { useEffect } from "react";
+
+import { setupAntdThemeTokensToHtml } from "./setup-antd-theme";
 
 export interface AntdAppProps {
 	children: ReactNode
 }
+
 export function AntdApp({ children }: AntdAppProps) {
+	const { token: antdTokens } = antdTheme.useToken();
+
+	useEffect(() => {
+		/* 打印查看支持的 token */
+		// console.log("antdTokens", antdTokens);
+		setupAntdThemeTokensToHtml(antdTokens);
+	}, [antdTokens]);
+
 	return (
 		<App className="h-full">
 			<StaticAntd />

src/components/antd-app/setup-antd-theme.ts

@@ -0,0 +1,54 @@
+import type { GlobalToken } from "antd";
+import { colorPalettes, neutralColors, prefix, productLevelColorSystem } from "./constants";
+
+/**
+ * 16 进制颜色值转 RGB 颜色值，因为 16 进制的颜色值在 tailwind 中不支持透明度，比如无法使用 bg-blue-500/20
+ * @see https://tailwindcss.com/docs/customizing-colors#using-css-variables
+ */
+function hexToRGB(hex: string) {
+	// 移除可能存在的 # 号
+	hex = hex.replace("#", "");
+
+	// 获取 R、G、B 的值
+	const r = Number.parseInt(hex.substring(0, 2), 16);
+	const g = Number.parseInt(hex.substring(2, 4), 16);
+	const b = Number.parseInt(hex.substring(4, 6), 16);
+
+	return `${r} ${g} ${b}`;
+}
+
+// 判断是否是 RGB 颜色值
+function isRGBColor(color: string) {
+	return color.trim().startsWith("rgb");
+}
+
+export function getCSSVariablesByTokens(tokens: GlobalToken) {
+	return Object.entries(tokens)
+		.reduce((acc, [key, value]): string => {
+			// 功能色系，不包含中性色系
+			if (productLevelColorSystem.includes(key)) {
+				const rgb = hexToRGB(value);
+				return `${acc}--${prefix}-${key}:${rgb};`;
+			}
+
+			// 中性色系
+			if (neutralColors.includes(key)) {
+				// 如果颜色值是 rgb 格式，则直接使用
+				const rgb = isRGBColor(value) ? value : `rgb(${hexToRGB(value)})`;
+				return `${acc}--${prefix}-${key}:${rgb};`;
+			}
+			// 色板
+			return colorPalettes.includes(key) ? `${acc}--${prefix}-${key}:${hexToRGB(value)};` : acc;
+		}, "");
+}
+
+/** Setup antd theme tokens to html */
+export function setupAntdThemeTokensToHtml(antdTokens: GlobalToken) {
+	const cssVariablesString = getCSSVariablesByTokens(antdTokens);
+
+	const styleId = "antd-theme-tokens";
+	const styleSheet = document.querySelector(`#${styleId}`) || document.createElement("style");
+	styleSheet.id = styleId;
+	styleSheet.textContent = `:root { ${cssVariablesString} }`;
+	document.head.appendChild(styleSheet);
+}

src/components/fullscreen-button/index.tsx

@@ -5,7 +5,7 @@ import { FullscreenExitOutlined, FullscreenOutlined } from "@ant-design/icons";
 
 import { useFullscreen } from "ahooks";
 
-interface FullscreenButtonProps extends Omit<ButtonProps, "target"> {
+export interface FullscreenButtonProps extends Omit<ButtonProps, "target"> {
 	target: HTMLElement | (() => Element) | RefObject<Element>
 	fullscreenIcon?: React.ReactNode
 	fullscreenExitIcon?: React.ReactNode

src/layout/container-layout/index.tsx

@@ -165,7 +165,7 @@ export default function ContainerLayout() {
 
 				<LayoutContent />
 
-				<LayoutFooter />
+				<LayoutFooter className="bg-colorBgContainer" />
 			</section>
 		</LayoutContext.Provider>
 	);

src/layout/layout-footer/index.tsx

@@ -1,7 +1,15 @@
-export default function LayoutFooter() {
+import { cn } from "#src/utils";
+
+interface LayoutFooterProps {
+	className?: string
+}
+export default function LayoutFooter({ className }: LayoutFooterProps) {
 	return (
 		<footer
-			className="h-10 flex-shrink-0 flex items-center justify-center text-xs md:text-sm dark:bg-black"
+			className={cn(
+				"h-10 flex-shrink-0 flex items-center justify-center text-xs md:text-sm",
+				className,
+			)}
 		>
 			Copyright &copy; 2023 Condor Hero All right reserved
 		</footer>

src/layout/layout-header/components/fullscreen-button.tsx

@@ -1,16 +1,11 @@
-import type { MutableRefObject } from "react";
+import type { FullscreenButtonProps } from "#src/components";
 
 import { FullscreenButton as FullscreenButtonComponent, FullscreenExitIcon, FullscreenIcon } from "#src/components";
 
-interface FullscreenProps {
-	target: HTMLElement | (() => Element) | MutableRefObject<Element>
-}
-
-export function FullscreenButton({ target }: FullscreenProps) {
+export function FullscreenButton({ target, ...restProps }: FullscreenButtonProps) {
 	return (
 		<FullscreenButtonComponent
-			size="large"
-			className="rounded-none"
+			{...restProps}
 			target={target}
 			fullscreenExitIcon={<FullscreenExitIcon />}
 			fullscreenIcon={<FullscreenIcon />}

src/layout/layout-header/components/language-button.tsx

@@ -1,16 +1,13 @@
 import type { LanguageType } from "#src/locales";
-import type { MenuProps } from "antd";
+import type { ButtonProps, MenuProps } from "antd";
+
+import { BasicButton } from "#src/components";
 import { useLanguage } from "#src/hooks";
-import { cn } from "#src/utils";
 
 import { TranslationOutlined } from "@ant-design/icons";
 import { Dropdown } from "antd";
 
-interface LanguageButtonProps {
-	className?: string
-}
-
-export function LanguageButton({ className }: LanguageButtonProps) {
+export function LanguageButton({ ...restProps }: ButtonProps) {
 	const { language, setLanguage } = useLanguage();
 
 	const items: MenuProps["items"] = [
@@ -40,9 +37,12 @@ export function LanguageButton({ className }: LanguageButtonProps) {
 			arrow={false}
 			placement="bottom"
 		>
-			<div role="menuitem" tabIndex={-1} className={cn("text-lg", className)}>
+			<BasicButton
+				type="text"
+				{...restProps}
+			>
 				<TranslationOutlined />
-			</div>
+			</BasicButton>
 		</Dropdown>
 	);
 }

src/layout/layout-header/components/theme-button.tsx

@@ -1,3 +1,5 @@
+import type { ButtonProps } from "antd";
+
 import { BasicButton } from "#src/components";
 import { usePreferences } from "#src/hooks";
 import { MoonIcon, SunIcon } from "#src/icons";
@@ -9,16 +11,16 @@ import { MoonIcon, SunIcon } from "#src/icons";
  * Theme Button Component
  * Allows users to toggle between light and dark themes of the website via a button
  */
-export function ThemeButton() {
+export function ThemeButton({ ...restProps }: ButtonProps) {
 	const { isLight, changeSiteTheme } = usePreferences();
 
 	return (
 		<BasicButton
 			type="text"
-			size="large"
-			className="transition-colors rounded-none"
+			{...restProps}
 			icon={isLight ? <MoonIcon /> : <SunIcon />}
-			onPointerDown={() => {
+			onPointerDown={(e) => {
+				restProps?.onPointerDown?.(e);
 				changeSiteTheme(isLight ? "dark" : "light");
 			}}
 		/>

src/layout/layout-header/components/user-menu.tsx

@@ -1,16 +1,18 @@
-import type { MenuProps } from "antd";
+import type { ButtonProps, MenuProps } from "antd";
+
+import { BasicButton } from "#src/components";
 import { UserCircleIcon } from "#src/icons";
 import { $t } from "#src/locales";
 import { useAuthStore, useUserStore } from "#src/store";
-import { isWindowsOs } from "#src/utils";
+import { cn, isWindowsOs } from "#src/utils";
 
 import { LogoutOutlined } from "@ant-design/icons";
 import { useKeyPress } from "ahooks";
 import { Avatar, Dropdown } from "antd";
 import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 
-export function UserMenu() {
+export function UserMenu({ ...restProps }: ButtonProps) {
 	const navigate = useNavigate();
 	const avatar = useUserStore(state => state.avatar);
 	const logout = useAuthStore(state => state.logout);
@@ -56,9 +58,13 @@ export function UserMenu() {
 			placement="bottomRight"
 			trigger={["click"]}
 		>
-			<div role="menuitem" tabIndex={-1}>
+			<BasicButton
+				type="text"
+				{...restProps}
+				className={cn(restProps.className, "rounded-full px-1")}
+			>
 				<Avatar src={avatar} />
-			</div>
+			</BasicButton>
 		</Dropdown>
 	);
 }