From bbb0683ab6aed27519a549d112df4c3d6e332521 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Fri, 6 Feb 2026 11:10:41 +0800 Subject: [PATCH 1/2] fix(button): add theme-aware preset color hover/active tokens (#56872) * fix(button): add theme-aware preset color hover/active tokens Add ${colorKey}Hover and ${colorKey}Active tokens that swap values based on dark/light mode for improved contrast and user experience. Co-Authored-By: Claude Opus 4.5 * fix: add preset color hover/active tokens for consistent button interaction - Add xxxHover and xxxActive tokens for preset colors in genColorMapToken - Override these tokens in dark mode to swap hover/active values - Update ButtonToken type to include PresetColorHoverActiveMap - Update button variant styles to use new hover/active tokens - Fix #56656: button hover/active state inconsistency in dark mode * test: add @csstools to compileModules Co-Authored-By: Claude Opus 4.5 * test: support .mjs files in Jest configuration - Updated .jest.js transform pattern to include .mjs files - Simplified .jest.node.js transform patterns - Added jest-mjs-transformer.js for babel-jest mjs handling Co-Authored-By: Claude Opus 4.5 * test: remove unused jest-mjs-transformer.js - Removed jest-mjs-transformer.js as it's no longer used - .mjs files are now handled by the updated transform patterns in Jest configs * test: add .mjs support to .jest.image.js - Updated .jest.image.js transform pattern to include .mjs files - fixes image test failures due to ES module parsing errors --------- Co-authored-by: Claude Opus 4.5 --- .jest.image.js | 4 +--- .jest.js | 3 ++- .jest.node.js | 4 +--- components/button/style/token.ts | 12 ++++++++++-- components/button/style/variant.ts | 4 ++-- components/theme/themes/dark/index.ts | 16 ++++++++++++++++ .../theme/themes/shared/genColorMapToken.ts | 13 +++++++++++++ 7 files changed, 45 insertions(+), 11 deletions(-) diff --git a/.jest.image.js b/.jest.image.js index 78191c45d4..8038d666d8 100644 --- a/.jest.image.js +++ b/.jest.image.js @@ -1,13 +1,11 @@ const { moduleNameMapper, transformIgnorePatterns } = require('./.jest'); -// jest config for image snapshots module.exports = { setupFiles: ['./tests/setup.ts'], moduleFileExtensions: ['ts', 'tsx', 'js', 'md'], moduleNameMapper, transform: { - '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', - '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', + '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, diff --git a/.jest.js b/.jest.js index 3a431c0f34..20a17166c0 100644 --- a/.jest.js +++ b/.jest.js @@ -11,6 +11,7 @@ const compileModules = [ 'parse5', '@exodus', 'jsdom', + '@csstools', ]; // cnpm use `_` as prefix @@ -62,7 +63,7 @@ module.exports = { ], transform: { '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', - '\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', + '\\.(m?)js(m)?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, diff --git a/.jest.node.js b/.jest.node.js index e4631d406e..aad21544be 100644 --- a/.jest.node.js +++ b/.jest.node.js @@ -1,14 +1,12 @@ const { moduleNameMapper, transformIgnorePatterns } = require('./.jest'); -// jest config for server render environment module.exports = { setupFiles: ['./tests/setup.ts'], setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'], moduleFileExtensions: ['ts', 'tsx', 'js', 'md'], moduleNameMapper, transform: { - '\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', - '\\.js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', + '^.+\\.(ts|tsx|js|mjs)$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor', '\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor', '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor', }, diff --git a/components/button/style/token.ts b/components/button/style/token.ts index dedb914ee9..e12a92e204 100644 --- a/components/button/style/token.ts +++ b/components/button/style/token.ts @@ -4,9 +4,9 @@ import { unit } from '@ant-design/cssinjs'; import { AggregationColor } from '../../color-picker/color'; import { isBright } from '../../color-picker/components/ColorPresets'; +import { PresetColors } from '../../theme/interface'; import type { FullToken, GenStyleFn, GetDefaultToken, PresetColorKey } from '../../theme/internal'; import { getLineHeight, mergeToken } from '../../theme/internal'; -import { PresetColors } from '../../theme/interface'; import getAlphaColor from '../../theme/util/getAlphaColor'; /** Component only token. Which will handle additional calculation of alias token */ @@ -247,6 +247,10 @@ type ShadowColorMap = { [Key in `${PresetColorKey}ShadowColor`]: string; }; +type PresetColorHoverActiveMap = { + [Key in `${PresetColorKey}Hover` | `${PresetColorKey}Active`]: string; +}; + type GroupToken = { /** * @desc 按钮组边框颜色 @@ -257,7 +261,11 @@ type GroupToken = { groupBorderColor: string; }; -export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap, GroupToken { +export interface ButtonToken + extends FullToken<'Button'>, + ShadowColorMap, + PresetColorHoverActiveMap, + GroupToken { /** * @desc 按钮横向内边距 * @descEN Horizontal padding of button diff --git a/components/button/style/variant.ts b/components/button/style/variant.ts index ecfc8c9225..edb6cbb68c 100644 --- a/components/button/style/variant.ts +++ b/components/button/style/variant.ts @@ -268,10 +268,10 @@ const genVariantStyle: GenerateStyle = (token) => { PresetColors.map((colorKey) => { const darkColor = token[`${colorKey}6`]; const lightColor = token[`${colorKey}1`]; - const hoverColor = token[`${colorKey}5`]; + const hoverColor = token[`${colorKey}Hover`]; const lightHoverColor = token[`${colorKey}2`]; const lightActiveColor = token[`${colorKey}3`]; - const activeColor = token[`${colorKey}7`]; + const activeColor = token[`${colorKey}Active`]; const shadowColor = token[`${colorKey}ShadowColor`]; diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts index 746905a318..56d8441bcb 100644 --- a/components/theme/themes/dark/index.ts +++ b/components/theme/themes/dark/index.ts @@ -2,6 +2,7 @@ import { generate } from '@ant-design/colors'; import type { DerivativeFunc } from '@ant-design/cssinjs'; import type { MapToken, PresetColorType, SeedToken } from '../../interface'; +import { PresetColors } from '../../interface/presetColors'; import defaultAlgorithm from '../default'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; @@ -29,6 +30,19 @@ const derivative: DerivativeFunc = (token, mapToken) => { generateNeutralColorPalettes, }); + const presetColorHoverActiveTokens = PresetColors.reduce>( + (prev, colorKey) => { + const colorBase = token[colorKey as keyof PresetColorType]; + if (colorBase) { + const colorPalette = generateColorPalettes(colorBase); + prev[`${colorKey}Hover`] = colorPalette[7]; + prev[`${colorKey}Active`] = colorPalette[5]; + } + return prev; + }, + {}, + ); + return { ...mergedMapToken, @@ -38,6 +52,8 @@ const derivative: DerivativeFunc = (token, mapToken) => { // Colors ...colorMapToken, + ...presetColorHoverActiveTokens, + // Customize selected item background color // https://github.com/ant-design/ant-design/issues/30524#issuecomment-871961867 colorPrimaryBg: colorMapToken.colorPrimaryBorder, diff --git a/components/theme/themes/shared/genColorMapToken.ts b/components/theme/themes/shared/genColorMapToken.ts index bfc96efb3a..aef704624e 100644 --- a/components/theme/themes/shared/genColorMapToken.ts +++ b/components/theme/themes/shared/genColorMapToken.ts @@ -1,6 +1,7 @@ import { FastColor } from '@ant-design/fast-color'; import type { ColorMapToken, SeedToken } from '../../interface'; +import { PresetColors } from '../../interface/presetColors'; import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap'; interface PaletteGenerators { @@ -37,6 +38,16 @@ export default function genColorMapToken( .mix(new FastColor(errorColors[3]), 50) .toHexString(); + const presetColorTokens: Record = {}; + PresetColors.forEach((colorKey) => { + const colorBase = seed[colorKey]; + if (colorBase) { + const colorPalette = generateColorPalettes(colorBase); + presetColorTokens[`${colorKey}Hover`] = colorPalette[5]; + presetColorTokens[`${colorKey}Active`] = colorPalette[7]; + } + }); + return { ...neutralColors, @@ -101,6 +112,8 @@ export default function genColorMapToken( colorLink: linkColors[6], colorLinkActive: linkColors[7], + ...presetColorTokens, + colorBgMask: new FastColor('#000').setA(0.45).toRgbString(), colorWhite: '#fff', }; From 8a16c49f5cbd6de39b71a2f6239cb0d6b08d54f5 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 6 Feb 2026 13:36:50 +0800 Subject: [PATCH 2/2] chore: upgrade deps (#56877) Co-authored-by: afc163 <507615+afc163@users.noreply.github.com> Co-authored-by: thinkasany <480968828@qq.com> --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c3739cb56d..ba86dedf44 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "@rc-component/checkbox": "~1.0.1", "@rc-component/collapse": "~1.2.0", "@rc-component/color-picker": "~3.0.3", - "@rc-component/dialog": "~1.8.2", + "@rc-component/dialog": "~1.8.3", "@rc-component/drawer": "~1.4.1", "@rc-component/dropdown": "~1.0.2", "@rc-component/form": "~1.6.2", @@ -151,7 +151,7 @@ "@rc-component/tree-select": "~1.6.0", "@rc-component/trigger": "^3.9.0", "@rc-component/upload": "~1.1.0", - "@rc-component/util": "^1.8.1", + "@rc-component/util": "^1.8.2", "clsx": "^2.1.1", "dayjs": "^1.11.11", "scroll-into-view-if-needed": "^3.1.0",