mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 22:36:31 +08:00
refactor: merge preset colors (#39742)
* style: remove redundant code * feat(style): add preset colour style generation method (cherry picked from commit 1266e42ba27accb48a6544e3eddaa4a94daef00c) * feat: uniform preset colour generation css selector method (cherry picked from commit 5af87e8d5ffcfd23e755946167f200c0565f8222) * chore: merge preset colors (cherry picked from commit 05040dfb703f60a3ea1715326748c508acbf41a6) * chore: update (cherry picked from commit 241b40a1361469487a6a3e8f1ad07a25d250463d) * chore: remove Badge preset inverse colors * chore: remove fix 删除的这部分其实一个 Bug,但是为了给 PR 减负(尽可能单一, 后面新开一个 PR 来修复这个问题 * suggestions accepted Update components/style/presetColor.tsx Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
parent
67e958fdd6
commit
7f189d56e5
@ -1,3 +1,9 @@
|
|||||||
|
import type { PresetColorKey } from '../theme/interface';
|
||||||
|
import { PresetColors } from '../theme/interface';
|
||||||
|
|
||||||
|
type InverseColor = `${PresetColorKey}-inverse`;
|
||||||
|
const inverseColors = PresetColors.map<InverseColor>((color) => `${color}-inverse`);
|
||||||
|
|
||||||
export const PresetStatusColorTypes = [
|
export const PresetStatusColorTypes = [
|
||||||
'success',
|
'success',
|
||||||
'processing',
|
'processing',
|
||||||
@ -6,22 +12,23 @@ export const PresetStatusColorTypes = [
|
|||||||
'warning',
|
'warning',
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
export const PresetColorTypes = [
|
export type PresetColorType = PresetColorKey | InverseColor;
|
||||||
'pink',
|
|
||||||
'red',
|
|
||||||
'yellow',
|
|
||||||
'orange',
|
|
||||||
'cyan',
|
|
||||||
'green',
|
|
||||||
'blue',
|
|
||||||
'purple',
|
|
||||||
'geekblue',
|
|
||||||
'magenta',
|
|
||||||
'volcano',
|
|
||||||
'gold',
|
|
||||||
'lime',
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
export type PresetColorType = typeof PresetColorTypes[number];
|
|
||||||
|
|
||||||
export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
|
export type PresetStatusColorType = typeof PresetStatusColorTypes[number];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* determine if the color keyword belongs to the `Ant Design` {@link PresetColors}.
|
||||||
|
* @param color color to be judged
|
||||||
|
* @param includeInverse whether to include reversed colors
|
||||||
|
*/
|
||||||
|
export function isPresetColor(color?: any, includeInverse = true) {
|
||||||
|
if (includeInverse) {
|
||||||
|
return [...inverseColors, ...PresetColors].includes(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
return PresetColors.includes(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function isPresetStatusColor(color?: any): color is PresetStatusColorType {
|
||||||
|
return PresetStatusColorTypes.includes(color);
|
||||||
|
}
|
||||||
|
@ -4,7 +4,7 @@ import { ConfigContext } from '../config-provider';
|
|||||||
import type { PresetColorType } from '../_util/colors';
|
import type { PresetColorType } from '../_util/colors';
|
||||||
import type { LiteralUnion } from '../_util/type';
|
import type { LiteralUnion } from '../_util/type';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
import { isPresetColor } from './utils';
|
import { isPresetColor } from '../_util/colors';
|
||||||
|
|
||||||
type RibbonPlacement = 'start' | 'end';
|
type RibbonPlacement = 'start' | 'end';
|
||||||
|
|
||||||
@ -29,7 +29,7 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
|
|||||||
}) {
|
}) {
|
||||||
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
const { getPrefixCls, direction } = React.useContext(ConfigContext);
|
||||||
const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
|
const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
|
||||||
const colorInPreset = isPresetColor(color);
|
const colorInPreset = isPresetColor(color, false);
|
||||||
const ribbonCls = classNames(
|
const ribbonCls = classNames(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
`${prefixCls}-placement-${placement}`,
|
`${prefixCls}-placement-${placement}`,
|
||||||
|
@ -3,13 +3,14 @@ import CSSMotion from 'rc-motion';
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useMemo, useRef } from 'react';
|
import { useMemo, useRef } from 'react';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
|
import type { PresetStatusColorType } from '../_util/colors';
|
||||||
import { cloneElement } from '../_util/reactNode';
|
import { cloneElement } from '../_util/reactNode';
|
||||||
import type { LiteralUnion } from '../_util/type';
|
import type { LiteralUnion } from '../_util/type';
|
||||||
import Ribbon from './Ribbon';
|
import Ribbon from './Ribbon';
|
||||||
import ScrollNumber from './ScrollNumber';
|
import ScrollNumber from './ScrollNumber';
|
||||||
import useStyle from './style';
|
import useStyle from './style';
|
||||||
import { isPresetColor } from './utils';
|
import { isPresetColor } from '../_util/colors';
|
||||||
|
import type { PresetColorKey } from '../theme/internal';
|
||||||
|
|
||||||
export type { ScrollNumberProps } from './ScrollNumber';
|
export type { ScrollNumberProps } from './ScrollNumber';
|
||||||
|
|
||||||
@ -30,7 +31,7 @@ export interface BadgeProps {
|
|||||||
scrollNumberPrefixCls?: string;
|
scrollNumberPrefixCls?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
status?: PresetStatusColorType;
|
status?: PresetStatusColorType;
|
||||||
color?: LiteralUnion<PresetColorType>;
|
color?: LiteralUnion<PresetColorKey>;
|
||||||
text?: React.ReactNode;
|
text?: React.ReactNode;
|
||||||
size?: 'default' | 'small';
|
size?: 'default' | 'small';
|
||||||
offset?: [number | string, number | string];
|
offset?: [number | string, number | string];
|
||||||
@ -144,15 +145,18 @@ const Badge: CompoundedComponent = ({
|
|||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
// InternalColor
|
||||||
|
const isInternalColor = isPresetColor(color, false);
|
||||||
|
|
||||||
// Shared styles
|
// Shared styles
|
||||||
const statusCls = classNames({
|
const statusCls = classNames({
|
||||||
[`${prefixCls}-status-dot`]: hasStatus,
|
[`${prefixCls}-status-dot`]: hasStatus,
|
||||||
[`${prefixCls}-status-${status}`]: !!status,
|
[`${prefixCls}-status-${status}`]: !!status,
|
||||||
[`${prefixCls}-status-${color}`]: isPresetColor(color),
|
[`${prefixCls}-status-${color}`]: isInternalColor,
|
||||||
});
|
});
|
||||||
|
|
||||||
const statusStyle: React.CSSProperties = {};
|
const statusStyle: React.CSSProperties = {};
|
||||||
if (color && !isPresetColor(color)) {
|
if (color && !isInternalColor) {
|
||||||
statusStyle.color = color;
|
statusStyle.color = color;
|
||||||
statusStyle.background = color;
|
statusStyle.background = color;
|
||||||
}
|
}
|
||||||
@ -207,11 +211,11 @@ const Badge: CompoundedComponent = ({
|
|||||||
[`${prefixCls}-multiple-words`]:
|
[`${prefixCls}-multiple-words`]:
|
||||||
!isDot && displayCount && displayCount.toString().length > 1,
|
!isDot && displayCount && displayCount.toString().length > 1,
|
||||||
[`${prefixCls}-status-${status}`]: !!status,
|
[`${prefixCls}-status-${status}`]: !!status,
|
||||||
[`${prefixCls}-status-${color}`]: isPresetColor(color),
|
[`${prefixCls}-status-${color}`]: isInternalColor,
|
||||||
});
|
});
|
||||||
|
|
||||||
let scrollNumberStyle: React.CSSProperties = { ...mergedStyle };
|
let scrollNumberStyle: React.CSSProperties = { ...mergedStyle };
|
||||||
if (color && !isPresetColor(color)) {
|
if (color && !isInternalColor) {
|
||||||
scrollNumberStyle = scrollNumberStyle || {};
|
scrollNumberStyle = scrollNumberStyle || {};
|
||||||
scrollNumberStyle.background = color;
|
scrollNumberStyle.background = color;
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import type { CSSObject } from '@ant-design/cssinjs';
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
import { Keyframes } from '@ant-design/cssinjs';
|
import { Keyframes } from '@ant-design/cssinjs';
|
||||||
import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/internal';
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||||
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||||
import { resetComponent } from '../../style';
|
import { genPresetColor, resetComponent } from '../../style';
|
||||||
|
|
||||||
interface BadgeToken extends FullToken<'Badge'> {
|
interface BadgeToken extends FullToken<'Badge'> {
|
||||||
badgeFontHeight: number;
|
badgeFontHeight: number;
|
||||||
@ -73,28 +73,18 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
|
|||||||
const ribbonPrefixCls = `${antCls}-ribbon`;
|
const ribbonPrefixCls = `${antCls}-ribbon`;
|
||||||
const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
|
const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
|
||||||
|
|
||||||
const statusPreset = PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
const statusPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
|
||||||
const darkColor = token[`${colorKey}-6`];
|
|
||||||
return {
|
|
||||||
...prev,
|
|
||||||
[`${componentCls}-status-${colorKey}`]: {
|
[`${componentCls}-status-${colorKey}`]: {
|
||||||
background: darkColor,
|
background: darkColor,
|
||||||
},
|
},
|
||||||
};
|
}));
|
||||||
}, {} as CSSObject);
|
|
||||||
const statusRibbonPreset = PresetColors.reduce(
|
const statusRibbonPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
|
||||||
(prev: CSSObject, colorKey: keyof PresetColorType) => {
|
|
||||||
const darkColor = token[`${colorKey}-6`];
|
|
||||||
return {
|
|
||||||
...prev,
|
|
||||||
[`&${ribbonPrefixCls}-color-${colorKey}`]: {
|
[`&${ribbonPrefixCls}-color-${colorKey}`]: {
|
||||||
background: darkColor,
|
background: darkColor,
|
||||||
color: darkColor,
|
color: darkColor,
|
||||||
},
|
},
|
||||||
};
|
}));
|
||||||
},
|
|
||||||
{} as CSSObject,
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
[componentCls]: {
|
[componentCls]: {
|
||||||
|
@ -1,6 +0,0 @@
|
|||||||
import { PresetColorTypes } from '../_util/colors';
|
|
||||||
|
|
||||||
// eslint-disable-next-line import/prefer-default-export
|
|
||||||
export function isPresetColor(color?: string): boolean {
|
|
||||||
return PresetColorTypes.includes(color as any);
|
|
||||||
}
|
|
@ -4,6 +4,7 @@ import type { DerivativeToken } from '../theme/internal';
|
|||||||
|
|
||||||
export { operationUnit } from './operationUnit';
|
export { operationUnit } from './operationUnit';
|
||||||
export { roundedArrow } from './roundedArrow';
|
export { roundedArrow } from './roundedArrow';
|
||||||
|
export { genPresetColor } from './presetColor';
|
||||||
|
|
||||||
export const textEllipsis: CSSObject = {
|
export const textEllipsis: CSSObject = {
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
|
35
components/style/presetColor.tsx
Normal file
35
components/style/presetColor.tsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
/* eslint-disable import/prefer-default-export */
|
||||||
|
import type { CSSObject } from '@ant-design/cssinjs';
|
||||||
|
import type { AliasToken, PresetColorKey } from '../theme/internal';
|
||||||
|
import { PresetColors } from '../theme/internal';
|
||||||
|
import type { TokenWithCommonCls } from '../theme/util/genComponentStyleHook';
|
||||||
|
|
||||||
|
interface CalcColor {
|
||||||
|
/** token[`${colorKey}-1`] */
|
||||||
|
lightColor: string;
|
||||||
|
/** token[`${colorKey}-3`] */
|
||||||
|
lightBorderColor: string;
|
||||||
|
/** token[`${colorKey}-6`] */
|
||||||
|
darkColor: string;
|
||||||
|
/** token[`${colorKey}-7`] */
|
||||||
|
textColor: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
type GenCSS = (colorKey: PresetColorKey, calcColor: CalcColor) => CSSObject;
|
||||||
|
|
||||||
|
export function genPresetColor<Token extends TokenWithCommonCls<AliasToken>>(
|
||||||
|
token: Token,
|
||||||
|
genCss: GenCSS,
|
||||||
|
): CSSObject {
|
||||||
|
return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => {
|
||||||
|
const lightColor = token[`${colorKey}-1`];
|
||||||
|
const lightBorderColor = token[`${colorKey}-3`];
|
||||||
|
const darkColor = token[`${colorKey}-6`];
|
||||||
|
const textColor = token[`${colorKey}-7`];
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
...genCss(colorKey, { lightColor, lightBorderColor, darkColor, textColor }),
|
||||||
|
};
|
||||||
|
}, {} as CSSObject);
|
||||||
|
}
|
@ -3,7 +3,7 @@ import classNames from 'classnames';
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { ConfigContext } from '../config-provider';
|
import { ConfigContext } from '../config-provider';
|
||||||
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
|
import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
|
||||||
import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
|
import { isPresetColor, isPresetStatusColor } from '../_util/colors';
|
||||||
import Wave from '../_util/wave';
|
import Wave from '../_util/wave';
|
||||||
import warning from '../_util/warning';
|
import warning from '../_util/warning';
|
||||||
import CheckableTag from './CheckableTag';
|
import CheckableTag from './CheckableTag';
|
||||||
@ -25,9 +25,6 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|||||||
icon?: React.ReactNode;
|
icon?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
|
||||||
const PresetStatusColorRegex = new RegExp(`^(${PresetStatusColorTypes.join('|')})$`);
|
|
||||||
|
|
||||||
export interface TagType
|
export interface TagType
|
||||||
extends React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>> {
|
extends React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>> {
|
||||||
CheckableTag: typeof CheckableTag;
|
CheckableTag: typeof CheckableTag;
|
||||||
@ -66,19 +63,13 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
|
|||||||
}
|
}
|
||||||
}, [props.visible]);
|
}, [props.visible]);
|
||||||
|
|
||||||
const isPresetColor = (): boolean => {
|
const isInternalColor = isPresetColor(color) || isPresetStatusColor(color);
|
||||||
if (!color) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
return PresetColorRegex.test(color) || PresetStatusColorRegex.test(color);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tagStyle = {
|
const tagStyle = {
|
||||||
backgroundColor: color && !isPresetColor() ? color : undefined,
|
backgroundColor: color && !isInternalColor ? color : undefined,
|
||||||
...style,
|
...style,
|
||||||
};
|
};
|
||||||
|
|
||||||
const presetColor = isPresetColor();
|
|
||||||
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
const prefixCls = getPrefixCls('tag', customizePrefixCls);
|
||||||
// Style
|
// Style
|
||||||
const [wrapSSR, hashId] = useStyle(prefixCls);
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
||||||
@ -86,8 +77,8 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
|
|||||||
const tagClassName = classNames(
|
const tagClassName = classNames(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
{
|
{
|
||||||
[`${prefixCls}-${color}`]: presetColor,
|
[`${prefixCls}-${color}`]: isInternalColor,
|
||||||
[`${prefixCls}-has-color`]: color && !presetColor,
|
[`${prefixCls}-has-color`]: color && !isInternalColor,
|
||||||
[`${prefixCls}-hidden`]: !visible,
|
[`${prefixCls}-hidden`]: !visible,
|
||||||
[`${prefixCls}-rtl`]: direction === 'rtl',
|
[`${prefixCls}-rtl`]: direction === 'rtl',
|
||||||
},
|
},
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
|
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||||
import type React from 'react';
|
import type React from 'react';
|
||||||
import type { FullToken, PresetColorType } from '../../theme/internal';
|
import type { FullToken } from '../../theme/internal';
|
||||||
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||||
import capitalize from '../../_util/capitalize';
|
import capitalize from '../../_util/capitalize';
|
||||||
import { resetComponent } from '../../style';
|
import { genPresetColor, resetComponent } from '../../style';
|
||||||
|
|
||||||
export interface ComponentToken {}
|
export interface ComponentToken {}
|
||||||
|
|
||||||
@ -35,27 +35,21 @@ const genTagStatusStyle = (
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
// FIXME: special preset colors
|
const genPresetStyle = (token: TagToken) =>
|
||||||
const genTagColorStyle = (token: TagToken): CSSInterpolation =>
|
genPresetColor(token, (colorKey, { textColor, lightBorderColor, lightColor, darkColor }) => ({
|
||||||
PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
|
|
||||||
const lightColor = token[`${colorKey}-1`];
|
|
||||||
const lightBorderColor = token[`${colorKey}-3`];
|
|
||||||
const darkColor = token[`${colorKey}-6`];
|
|
||||||
const textColor = token[`${colorKey}-7`];
|
|
||||||
return {
|
|
||||||
...prev,
|
|
||||||
[`${token.componentCls}-${colorKey}`]: {
|
[`${token.componentCls}-${colorKey}`]: {
|
||||||
color: textColor,
|
color: textColor,
|
||||||
background: lightColor,
|
background: lightColor,
|
||||||
borderColor: lightBorderColor,
|
borderColor: lightBorderColor,
|
||||||
},
|
|
||||||
[`${token.componentCls}-${colorKey}-inverse`]: {
|
// Inverse color
|
||||||
|
'&-inverse': {
|
||||||
color: token.colorTextLightSolid,
|
color: token.colorTextLightSolid,
|
||||||
background: darkColor,
|
background: darkColor,
|
||||||
borderColor: darkColor,
|
borderColor: darkColor,
|
||||||
},
|
},
|
||||||
};
|
},
|
||||||
}, {} as CSSObject);
|
}));
|
||||||
|
|
||||||
const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||||
const { paddingXXS, lineWidth, tagPaddingHorizontal } = token;
|
const { paddingXXS, lineWidth, tagPaddingHorizontal } = token;
|
||||||
@ -168,7 +162,7 @@ export default genComponentStyleHook('Tag', (token) => {
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
genBaseStyle(tagToken),
|
genBaseStyle(tagToken),
|
||||||
genTagColorStyle(tagToken),
|
genPresetStyle(tagToken),
|
||||||
genTagStatusStyle(tagToken, 'success', 'Success'),
|
genTagStatusStyle(tagToken, 'success', 'Success'),
|
||||||
genTagStatusStyle(tagToken, 'processing', 'Info'),
|
genTagStatusStyle(tagToken, 'processing', 'Info'),
|
||||||
genTagStatusStyle(tagToken, 'error', 'Error'),
|
genTagStatusStyle(tagToken, 'error', 'Error'),
|
||||||
|
@ -9,7 +9,7 @@ export type OverrideToken = {
|
|||||||
export type GlobalToken = AliasToken & ComponentTokenMap;
|
export type GlobalToken = AliasToken & ComponentTokenMap;
|
||||||
|
|
||||||
export { PresetColors } from './presetColors';
|
export { PresetColors } from './presetColors';
|
||||||
export type { PresetColorType, ColorPalettes } from './presetColors';
|
export type { PresetColorType, ColorPalettes, PresetColorKey } from './presetColors';
|
||||||
export type { SeedToken } from './seeds';
|
export type { SeedToken } from './seeds';
|
||||||
export type {
|
export type {
|
||||||
MapToken,
|
MapToken,
|
||||||
|
@ -14,7 +14,7 @@ export const PresetColors = [
|
|||||||
'gold',
|
'gold',
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
type PresetColorKey = typeof PresetColors[number];
|
export type PresetColorKey = typeof PresetColors[number];
|
||||||
|
|
||||||
export type PresetColorType = Record<PresetColorKey, string>;
|
export type PresetColorType = Record<PresetColorKey, string>;
|
||||||
|
|
||||||
|
@ -8,6 +8,7 @@ import type {
|
|||||||
MapToken,
|
MapToken,
|
||||||
OverrideToken,
|
OverrideToken,
|
||||||
PresetColorType,
|
PresetColorType,
|
||||||
|
PresetColorKey,
|
||||||
SeedToken,
|
SeedToken,
|
||||||
} from './interface';
|
} from './interface';
|
||||||
import { PresetColors } from './interface';
|
import { PresetColors } from './interface';
|
||||||
@ -35,6 +36,7 @@ export type {
|
|||||||
SeedToken,
|
SeedToken,
|
||||||
AliasToken,
|
AliasToken,
|
||||||
PresetColorType,
|
PresetColorType,
|
||||||
|
PresetColorKey,
|
||||||
// FIXME: Remove this type
|
// FIXME: Remove this type
|
||||||
AliasToken as DerivativeToken,
|
AliasToken as DerivativeToken,
|
||||||
FullToken,
|
FullToken,
|
||||||
|
@ -1,13 +1,7 @@
|
|||||||
import type { CSSObject } from '@ant-design/cssinjs';
|
|
||||||
import { initZoomMotion } from '../../style/motion';
|
import { initZoomMotion } from '../../style/motion';
|
||||||
import type {
|
import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
|
||||||
FullToken,
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||||
GenerateStyle,
|
import { genPresetColor, resetComponent } from '../../style';
|
||||||
PresetColorType,
|
|
||||||
UseComponentStyleResult,
|
|
||||||
} from '../../theme/internal';
|
|
||||||
import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme/internal';
|
|
||||||
import { resetComponent } from '../../style';
|
|
||||||
import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
|
import getArrowStyle, { MAX_VERTICAL_CONTENT_RADIUS } from '../../style/placementArrow';
|
||||||
|
|
||||||
export interface ComponentToken {
|
export interface ComponentToken {
|
||||||
@ -24,23 +18,6 @@ interface TooltipToken extends FullToken<'Tooltip'> {
|
|||||||
tooltipRadiusOuter: number;
|
tooltipRadiusOuter: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
const generatorTooltipPresetColor: GenerateStyle<TooltipToken, CSSObject> = (token) => {
|
|
||||||
const { componentCls } = token;
|
|
||||||
|
|
||||||
return PresetColors.reduce((previousValue: any, currentValue: keyof PresetColorType) => {
|
|
||||||
const lightColor = token[`${currentValue}-6`];
|
|
||||||
previousValue[`&${componentCls}-${currentValue}`] = {
|
|
||||||
[`${componentCls}-inner`]: {
|
|
||||||
backgroundColor: lightColor,
|
|
||||||
},
|
|
||||||
[`${componentCls}-arrow`]: {
|
|
||||||
'--antd-arrow-background-color': lightColor,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
return previousValue;
|
|
||||||
}, {});
|
|
||||||
};
|
|
||||||
|
|
||||||
const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
|
const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
|
||||||
const {
|
const {
|
||||||
componentCls, // ant-tooltip
|
componentCls, // ant-tooltip
|
||||||
@ -105,7 +82,16 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// generator for preset color
|
// generator for preset color
|
||||||
...generatorTooltipPresetColor(token),
|
...genPresetColor(token, (colorKey, { darkColor }) => ({
|
||||||
|
[`&${componentCls}-${colorKey}`]: {
|
||||||
|
[`${componentCls}-inner`]: {
|
||||||
|
backgroundColor: darkColor,
|
||||||
|
},
|
||||||
|
[`${componentCls}-arrow`]: {
|
||||||
|
'--antd-arrow-background-color': darkColor,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})),
|
||||||
|
|
||||||
// RTL
|
// RTL
|
||||||
'&-rtl': {
|
'&-rtl': {
|
||||||
|
@ -2,19 +2,19 @@
|
|||||||
|
|
||||||
import type * as React from 'react';
|
import type * as React from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { PresetColorTypes } from '../_util/colors';
|
import { isPresetColor } from '../_util/colors';
|
||||||
|
|
||||||
const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
|
|
||||||
|
|
||||||
export function parseColor(prefixCls: string, color?: string) {
|
export function parseColor(prefixCls: string, color?: string) {
|
||||||
|
const isInternalColor = isPresetColor(color);
|
||||||
|
|
||||||
const className = classNames({
|
const className = classNames({
|
||||||
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color),
|
[`${prefixCls}-${color}`]: color && isInternalColor,
|
||||||
});
|
});
|
||||||
|
|
||||||
const overlayStyle: React.CSSProperties = {};
|
const overlayStyle: React.CSSProperties = {};
|
||||||
const arrowStyle: React.CSSProperties = {};
|
const arrowStyle: React.CSSProperties = {};
|
||||||
|
|
||||||
if (color && !PresetColorRegex.test(color)) {
|
if (color && !isInternalColor) {
|
||||||
overlayStyle.background = color;
|
overlayStyle.background = color;
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
arrowStyle['--antd-arrow-background-color'] = color;
|
arrowStyle['--antd-arrow-background-color'] = color;
|
||||||
|
Loading…
Reference in New Issue
Block a user