mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-06 07:56:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

fix: Button shadow color should be transparent (#52701)

Browse Source
This commit is contained in:
afc163 2025-02-10 11:21:10 +08:00 committed by GitHub
parent 9bc0ceb2d8
commit 51a213873c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 24 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/button/style/index.ts
View File

@ -309,13 +309,11 @@ const genPresetColorStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => {
const lightHoverColor = token[`${colorKey}2`];
const lightBorderColor = token[`${colorKey}3`];
const activeColor = token[`${colorKey}7`];
const boxShadow = `0 ${unit(token.controlOutlineWidth)} 0 ${token[`${colorKey}1`]}`;
return {
...prev,
[`&${componentCls}-color-${colorKey}`]: {
color: darkColor,
boxShadow,
boxShadow: token[`${colorKey}ShadowColor`],
...genSolidButtonStyle(
token,

25
components/button/style/token.ts
View File

@ -1,9 +1,13 @@
import type { CSSProperties } from 'react';
import type { CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import { AggregationColor } from '../../color-picker/color';
import { isBright } from '../../color-picker/components/ColorPresets';
import type { FullToken, GenStyleFn, GetDefaultToken } from '../../theme/internal';
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 */
export interface ComponentToken {
@ -218,7 +222,15 @@ export interface ComponentToken {
contentLineHeightSM: number;
}
export interface ButtonToken extends FullToken<'Button'> {
type ShadowColorMap = {
/**
* @desc 预设按钮的阴影色
* @descEN Shadow colors of preset button
*/
[Key in `${PresetColorKey}ShadowColor`]: string;
};
export interface ButtonToken extends FullToken<'Button'>, ShadowColorMap {
/**
* @desc 按钮横向内边距
* @descEN Horizontal padding of button
@ -261,7 +273,16 @@ export const prepareComponentToken: GetDefaultToken<'Button'> = (token) => {
? '#000'
: '#fff';
const shadowColorTokens = PresetColors.reduce<CSSObject>(
(prev: CSSObject, colorKey: PresetColorKey) => ({
...prev,
[`${colorKey}ShadowColor`]: `0 ${unit(token.controlOutlineWidth)} 0 ${getAlphaColor(token[`${colorKey}1`], token.colorBgContainer)}`,
}),
{},
);
return {
...shadowColorTokens,
fontWeight: 400,
defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,