From 2aa33578c276322455c8abce327fbb4b4674dacb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 25 Mar 2022 17:54:57 +0800 Subject: [PATCH] refactor: Align with token (#34713) * chore: Divider full token * chore: typography with tokn * chore: select with token * chore: tree with token * chore: select style * chore: select style * chore: clean up --- components/_util/theme/interface.ts | 7 ++ components/_util/theme/util/alias.ts | 23 ++--- components/_util/theme/util/index.tsx | 3 +- components/_util/theme/util/roundedArrow.tsx | 12 +-- components/cascader/style/index.tsx | 2 +- components/checkbox/style/index.tsx | 2 +- components/divider/style/index.tsx | 86 +++++++++-------- components/input/style/index.tsx | 6 +- components/popover/index.tsx | 5 +- components/popover/style/index.tsx | 22 ++--- components/select/style/dropdown.tsx | 2 +- components/select/style/index.tsx | 13 +-- components/select/style/multiple.tsx | 1 - components/tree/style/index.tsx | 2 +- components/typography/style/index.tsx | 57 +++++++----- components/typography/style/mixins.tsx | 97 ++++++++++---------- 16 files changed, 170 insertions(+), 170 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index 633175a11b..e17233285e 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -1,5 +1,7 @@ import * as React from 'react'; import type { ComponentToken as ButtonComponentToken } from '../../button/style'; +import type { ComponentToken as DividerComponentToken } from '../../divider/style'; +import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; export const PresetColors = [ 'blue', @@ -32,6 +34,8 @@ export interface OverrideToken { // Customize component button?: ButtonComponentToken; + divider?: DividerComponentToken; + typography?: TypographyComponentToken; } /** Final token which contains the components level override */ @@ -196,6 +200,9 @@ export interface AliasToken extends Omit { fontSizeHeading4: number; fontSizeHeading5: number; + /** For heading like h1, h2, h3 or option selected item */ + fontWeightStrong: number; + // LineHeight lineHeight: number; lineHeightLG: number; diff --git a/components/_util/theme/util/alias.ts b/components/_util/theme/util/alias.ts index 3f072aafdc..6ef0c37559 100644 --- a/components/_util/theme/util/alias.ts +++ b/components/_util/theme/util/alias.ts @@ -79,8 +79,9 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken controlLineType: 'solid', controlRadius: mergedToken.radiusBase, colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(), - colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), + colorSplit: 'rgba(0, 0, 0, 0.06)', controlItemBgActive: primaryColors[0], + fontWeightStrong: 600, // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 // FIXME: Handle this when derivative is ready @@ -97,21 +98,21 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken linkHoverDecoration: 'none', linkFocusDecoration: 'none', - controlPaddingHorizontal: 16, - controlPaddingHorizontalSM: 12, + controlPaddingHorizontal: 12, + controlPaddingHorizontalSM: 8, padding: 16, margin: 16, - paddingXXS: 2, - paddingXS: 4, - paddingSM: 8, - paddingLG: 32, + paddingXXS: 4, + paddingXS: 8, + paddingSM: 12, + paddingLG: 24, - marginXXS: 2, - marginXS: 4, - marginSM: 8, - marginLG: 32, + marginXXS: 4, + marginXS: 8, + marginSM: 12, + marginLG: 24, boxShadow: ` 0 3px 6px -4px rgba(0, 0, 0, 0.12), diff --git a/components/_util/theme/util/index.tsx b/components/_util/theme/util/index.tsx index a08467980b..374d3421c4 100644 --- a/components/_util/theme/util/index.tsx +++ b/components/_util/theme/util/index.tsx @@ -17,7 +17,8 @@ export const resetComponent = (token: DerivativeToken): CSSObject => ({ }); export const resetIcon = (): CSSObject => ({ - display: 'inline-block', + display: 'inline-flex', + alignItems: 'center', color: 'inherit', fontStyle: 'normal', lineHeight: 0, diff --git a/components/_util/theme/util/roundedArrow.tsx b/components/_util/theme/util/roundedArrow.tsx index bfb98656aa..4777876665 100644 --- a/components/_util/theme/util/roundedArrow.tsx +++ b/components/_util/theme/util/roundedArrow.tsx @@ -2,11 +2,7 @@ import { CSSObject } from '@ant-design/cssinjs'; import seedToken from '../themes/default'; -export const roundedArrow = ( - width: number, - outerRadius: number, - bgColor: string, -): CSSObject => { +export const roundedArrow = (width: number, outerRadius: number, bgColor: string): CSSObject => { const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2)); const { radiusBase } = seedToken; @@ -33,9 +29,11 @@ export const roundedArrow = ( insetInlineStart: -width, width: width * 3, height: width * 3, - background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil(-width + 1)}px ${Math.ceil(-width + 1)}px`, + background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil( + -width + 1, + )}px ${Math.ceil(-width + 1)}px`, content: '""', clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`, }, }; -} +}; diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index 40ad4a3e3c..fabb095743 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -123,7 +123,7 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { [`&-active:not(${cascaderMenuItemCls}-disabled)`]: { [`&, &:hover`]: { - fontWeight: 600, // FIXME: hardcode + fontWeight: token.fontWeightStrong, backgroundColor: token.controlItemBgActive, }, }, diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx index de843d1be3..b39d451e45 100644 --- a/components/checkbox/style/index.tsx +++ b/components/checkbox/style/index.tsx @@ -184,7 +184,7 @@ export const genCheckboxStyle: GenerateStyle = (token, hashId) => '&:after': { opacity: 1, transform: 'rotate(45deg) scale(1) translate(-50%,-50%)', - transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} 0.1s`, + transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} ${token.motionDurationFast}`, }, }, diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx index a289a17288..e7a1f61759 100644 --- a/components/divider/style/index.tsx +++ b/components/divider/style/index.tsx @@ -9,14 +9,14 @@ import { GenerateStyle, } from '../../_util/theme'; -interface DividerToken extends DerivativeToken { +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + sizePaddingEdgeHorizontal: number; +} + +interface DividerToken extends DerivativeToken, ComponentToken { dividerCls: string; - dividerBorderColor: string; - - dividerBorderWidth: number; - - dividerNotDefaultTextPadding: number; dividerVerticalGutterMargin: number; dividerHorizontalWithTextGutterMargin: number; dividerHorizontalGutterMargin: number; @@ -24,12 +24,12 @@ interface DividerToken extends DerivativeToken { // ============================== Shared ============================== const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - const { dividerCls } = token; + const { dividerCls, sizePaddingEdgeHorizontal, colorSplit, controlLineWidth } = token; return { [dividerCls]: { ...resetComponent(token), - borderBlockStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, + borderBlockStart: `${controlLineWidth}px solid ${colorSplit}`, // vertical '&-vertical': { @@ -40,7 +40,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => margin: `0 ${token.dividerVerticalGutterMargin}px`, verticalAlign: 'middle', borderTop: 0, - borderInlineStart: `${token.dividerBorderWidth}px solid ${token.dividerBorderColor}`, + borderInlineStart: `${controlLineWidth}px solid ${colorSplit}`, }, '&-horizontal': { @@ -59,13 +59,13 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => fontSize: token.fontSizeLG, whiteSpace: 'nowrap', textAlign: 'center', - borderBlockStart: `0 ${token.dividerBorderColor}`, + borderBlockStart: `0 ${colorSplit}`, '&::before, &::after': { position: 'relative', top: '50%', width: '50%', - borderBlockStart: `${token.dividerBorderWidth}px solid transparent`, + borderBlockStart: `${controlLineWidth}px solid transparent`, // Chrome not accept `inherit` in `border-top` borderBlockStartColor: 'inherit', borderBlockEnd: 0, @@ -105,10 +105,10 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => '&-dashed': { background: 'none', - borderColor: token.dividerBorderColor, + borderColor: colorSplit, borderStyle: 'dashed', borderWidth: 0, - borderBlockStart: `${token.dividerBorderWidth}px`, + borderBlockStart: `${controlLineWidth}px`, }, '&-horizontal&-with-text&-dashed': { @@ -118,7 +118,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => }, '&-vertical&-dashed': { - borderWidth: `0 0 0 ${token.dividerBorderWidth}px`, + borderWidth: `0 0 0 ${controlLineWidth}px`, }, '&-plain&-with-text': { @@ -136,8 +136,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => width: '100%', }, - '.ant-divider-inner-text': { - paddingInlineStart: `${token.dividerNotDefaultTextPadding}px`, + [`${dividerCls}-inner-text`]: { + paddingInlineStart: sizePaddingEdgeHorizontal, }, }, @@ -150,8 +150,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => width: 0, }, - '.ant-divider-inner-text': { - paddingInlineEnd: `${token.dividerNotDefaultTextPadding}px`, + [`${dividerCls}-inner-text`]: { + paddingInlineEnd: sizePaddingEdgeHorizontal, }, }, }, @@ -161,35 +161,31 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => // ============================== Export ============================== export default function useStyle(prefixCls: string): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - // FIXME - const dividerBorderColor = 'rgba(0, 0, 0, 6%)'; - - const dividerBorderWidth = token.controlLineWidth; - - const dividerNotDefaultTextPadding = 0; - const dividerVerticalGutterMargin = token.marginXS; - const dividerHorizontalWithTextGutterMargin = token.margin; - const dividerHorizontalGutterMargin = token.marginLG; - - const dividerToken: DividerToken = { - ...token, - - dividerCls: `.${prefixCls}`, - - dividerBorderColor, - - dividerBorderWidth, - - dividerNotDefaultTextPadding, - dividerVerticalGutterMargin, - dividerHorizontalWithTextGutterMargin, - dividerHorizontalGutterMargin, - }; return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genSharedDividerStyle(dividerToken), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { divider } = token; + + const dividerVerticalGutterMargin = token.marginSM; + const dividerHorizontalWithTextGutterMargin = token.margin; + const dividerHorizontalGutterMargin = token.marginLG; + + const dividerToken: DividerToken = { + ...token, + + dividerCls: `.${prefixCls}`, + + sizePaddingEdgeHorizontal: 0, + + dividerVerticalGutterMargin, + dividerHorizontalWithTextGutterMargin, + dividerHorizontalGutterMargin, + + ...divider, + }; + + return [genSharedDividerStyle(dividerToken)]; + }), hashId, ]; } diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index d502e655ca..c1780baa07 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -75,7 +75,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => { }; const genInputSmallStyle = (token: InputToken): CSSObject => ({ - padding: `${token.inputPaddingVerticalSM}px ${token.paddingXS - 1}px`, + padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`, }); export const genStatusStyle = (token: InputToken): CSSObject => { @@ -809,7 +809,7 @@ export const initInputToken = ( ...token, prefixCls, iconPrefixCls, - inputAffixMargin: token.marginXXS, + inputAffixMargin: token.marginXS, inputPaddingVertical: Math.max( Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - token.controlLineWidth, @@ -823,7 +823,7 @@ export const initInputToken = ( token.controlLineWidth, 0, ), - inputPaddingHorizontal: token.paddingSM - token.controlLineWidth, + inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth, inputBorderHoverColor: token.colorPrimaryHover, inputBorderActiveColor: token.colorPrimaryHover, }); diff --git a/components/popover/index.tsx b/components/popover/index.tsx index 1db57e6348..be7839ba18 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -31,10 +31,7 @@ const Popover = React.forwardRef( const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls); const rootPrefixCls = getPrefixCls(); - const overlayCls = classNames( - overlayClassName, - hashId, - ); + const overlayCls = classNames(overlayClassName, hashId); return wrapSSR( = token => { const { popoverCls, @@ -126,7 +125,7 @@ const genBaseStyle: GenerateStyle = token => { [`> .${iconPrefixCls}`]: { position: 'absolute', // FIXME - top: 4 + ((lineHeight * fontSize - fontSize) / 2), + top: 4 + (lineHeight * fontSize - fontSize) / 2, color: colorWarning, fontSize, }, @@ -142,7 +141,7 @@ const genBaseStyle: GenerateStyle = token => { marginBottom: marginXS, textAlign: 'end', - 'button': { + button: { marginInlineStart: marginSM, }, }, @@ -172,9 +171,8 @@ const genBaseStyle: GenerateStyle = token => { ...roundedArrow(popoverArrowWidth, 5, popoverBg), }, }, - }, - } + }; }; const genPlacementStyle: GenerateStyle = token => { @@ -235,7 +233,7 @@ const genPlacementStyle: GenerateStyle = token => { }, [`&-placement-top ${popoverCls}-arrow`]: { - insetInlineStart : '50%', + insetInlineStart: '50%', transform: 'translateX(-50%)', }, @@ -328,7 +326,7 @@ const genPlacementStyle: GenerateStyle = token => { bottom: popoverArrowOffsetVertical, }, }, - } + }; }; // FIXME: special preset colors @@ -353,11 +351,9 @@ const genColorStyle: GenerateStyle = token => { }, {} as CSSObject); }; -export const genPopoverStyle: GenerateStyle = (token: PopoverToken): CSSInterpolation => [ - genBaseStyle(token), - genPlacementStyle(token), - genColorStyle(token), -]; +export const genPopoverStyle: GenerateStyle = ( + token: PopoverToken, +): CSSInterpolation => [genBaseStyle(token), genPlacementStyle(token), genColorStyle(token)]; export default function useStyle( prefixCls: string, diff --git a/components/select/style/dropdown.tsx b/components/select/style/dropdown.tsx index 302ccf6f97..f3a950b132 100644 --- a/components/select/style/dropdown.tsx +++ b/components/select/style/dropdown.tsx @@ -123,7 +123,7 @@ const genSingleStyle: GenerateStyle = (token, hashId) => { [`&-selected:not(${selectItemCls}-option-disabled)`]: { color: token.colorText, - fontWeight: 600, // FIXME: Need design token? + fontWeight: token.fontWeightStrong, backgroundColor: token.controlItemBgActive, [`${selectItemCls}-option-state`]: { diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 31b788bdc9..8fa3c6fbf9 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -96,7 +96,6 @@ const genStatusStyle = ( [`${selectCls}-focused& ${selectCls}-selector`]: { borderColor: borderHoverColor, - // FIXME: missing variable of `@input-outline-offset` boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`, borderInlineEndWidth: `${token.controlLineWidth}px !important`, outline: 0, @@ -179,7 +178,6 @@ const genBaseStyle: GenerateStyle = token => { top: '50%', insetInlineStart: 'auto', insetInlineEnd: inputPaddingHorizontalBase, - width: token.fontSizeSM, height: token.fontSizeSM, marginTop: -token.fontSizeSM / 2, color: token.colorTextDisabled, @@ -236,8 +234,10 @@ const genBaseStyle: GenerateStyle = token => { '&:hover': { color: token.colorTextSecondary, }, + }, - [`${selectCls}:hover &`]: { + '&:hover': { + [`${selectCls}-clear`]: { opacity: 1, }, }, @@ -246,12 +246,7 @@ const genBaseStyle: GenerateStyle = token => { // ========================= Feedback ========================== [`${selectCls}-has-feedback`]: { [`${selectCls}-clear`]: { - insetInlineEnd: token.padding * 2, - }, - - // FIXME: what's this? @MadCcc - [`${selectCls}-selection-selected-value`]: { - paddingInlineEnd: 42, + insetInlineEnd: inputPaddingHorizontalBase + token.fontSize + token.paddingXXS, }, [`${selectCls}-feedback-icon`]: { diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index 071412f976..d4a5ff8795 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -148,7 +148,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { display: 'inline-flex', position: 'relative', maxWidth: '100%', - // FIXME: no sure this style marginInlineStart: token.inputPaddingHorizontalBase - selectItemDist, [` diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx index b2a1c96926..7a236c39a1 100644 --- a/components/tree/style/index.tsx +++ b/components/tree/style/index.tsx @@ -26,7 +26,7 @@ const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', { const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({ [`.${prefixCls}-switcher-icon`]: { display: 'inline-block', - fontSize: 10, // FIXME: missing token + fontSize: 10, verticalAlign: 'baseline', svg: { diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx index a4f1ed2fbd..bdfe2a0e0e 100644 --- a/components/typography/style/index.tsx +++ b/components/typography/style/index.tsx @@ -1,6 +1,6 @@ // deps-lint-skip-all import { useStyleRegister, useToken } from '../../_util/theme'; -import type { UseComponentStyleResult, GenerateStyle } from '../../_util/theme'; +import type { UseComponentStyleResult, GenerateStyle, AliasToken } from '../../_util/theme'; import { operationUnit } from '../../_util/theme/util/operationUnit'; import { getTitleStyles, @@ -10,12 +10,22 @@ import { getCopiableStyles, getEllipsisStyles, } from './mixins'; -import type { TypographyToken } from './mixins'; + +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + sizeMarginHeadingVerticalStart: number | string; + sizeMarginHeadingVerticalEnd: number | string; +} + +export interface TypographyToken extends AliasToken, ComponentToken { + typographyCls: string; +} const genTypographyStyle: GenerateStyle = token => { - const { prefixCls, titleMarginTop } = token.typography; + const { typographyCls, sizeMarginHeadingVerticalStart } = token; + return { - [`.${prefixCls}`]: { + [typographyCls]: { color: token.colorText, overflowWrap: 'break-word', '&&-secondary': { @@ -59,7 +69,7 @@ const genTypographyStyle: GenerateStyle = token => { & + h4&, & + h5& `]: { - marginTop: titleMarginTop, + marginTop: sizeMarginHeadingVerticalStart, }, [` @@ -79,7 +89,7 @@ const genTypographyStyle: GenerateStyle = token => { + h4, + h5 `]: { - marginTop: titleMarginTop, + marginTop: sizeMarginHeadingVerticalStart, }, }, @@ -89,9 +99,9 @@ const genTypographyStyle: GenerateStyle = token => { // Operation [` - .${prefixCls}-expand, - .${prefixCls}-edit, - .${prefixCls}-copy + ${typographyCls}-expand, + ${typographyCls}-edit, + ${typographyCls}-copy `]: { ...operationUnit(token), marginInlineStart: token.marginXXS, @@ -114,20 +124,23 @@ const genTypographyStyle: GenerateStyle = token => { export default function useStyle(prefixCls: string): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - const typographyToken: TypographyToken = { - ...token, - typography: { - prefixCls, - titleMarginTop: '1.2em', - titleMarginBottom: '0.5em', - titleFontWeight: 600, - }, - }; - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genTypographyStyle(typographyToken), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { typography } = token; + + const typographyToken: TypographyToken = { + ...token, + + typographyCls: `.${prefixCls}`, + + sizeMarginHeadingVerticalStart: '1.2em', + sizeMarginHeadingVerticalEnd: '0.5em', + + ...typography, + }; + + return [genTypographyStyle(typographyToken)]; + }), hashId, ]; } diff --git a/components/typography/style/mixins.tsx b/components/typography/style/mixins.tsx index 73c16129b9..dc401f06a3 100644 --- a/components/typography/style/mixins.tsx +++ b/components/typography/style/mixins.tsx @@ -9,37 +9,28 @@ */ import { gold } from '@ant-design/colors'; import type { CSSObject } from '@ant-design/cssinjs'; -import type { DerivativeToken, GenerateStyle } from '../../_util/theme'; +import type { GenerateStyle } from '../../_util/theme'; import { operationUnit } from '../../_util/theme/util/operationUnit'; import { initInputToken } from '../../input/style'; - -export interface TypographyToken extends DerivativeToken { - typography: { - prefixCls: string; - titleMarginTop: string; - titleMarginBottom: string; - titleFontWeight: number; - }; -} +import type { TypographyToken } from '.'; // eslint-disable-next-line import/prefer-default-export -const getTitleStyle = ({ - fontSize, - lineHeight, - color, - typographyToken, -}: { - fontSize: number; - lineHeight: number; - color: string; - typographyToken: TypographyToken['typography']; -}) => ({ - marginBottom: typographyToken.titleMarginBottom, - color, - fontWeight: typographyToken.titleFontWeight, - fontSize, - lineHeight, -}); +const getTitleStyle = ( + fontSize: number, + lineHeight: number, + color: string, + token: TypographyToken, +) => { + const { sizeMarginHeadingVerticalEnd, fontWeightStrong } = token; + + return { + marginBottom: sizeMarginHeadingVerticalEnd, + color, + fontWeight: fontWeightStrong, + fontSize, + lineHeight, + }; +}; // eslint-disable-next-line import/prefer-default-export export const getTitleStyles: GenerateStyle = token => { @@ -54,39 +45,43 @@ export const getTitleStyles: GenerateStyle = token = div&-h${headingLevel} > textarea, h${headingLevel} ` - ] = getTitleStyle({ - fontSize: token[`fontSizeHeading${headingLevel}`], - lineHeight: token[`lineHeightHeading${headingLevel}`], - color: token.colorTextHeading, - typographyToken: token.typography, - }); + ] = getTitleStyle( + token[`fontSizeHeading${headingLevel}`], + token[`lineHeightHeading${headingLevel}`], + token.colorTextHeading, + token, + ); }); return styles; }; -export const getLinkStyles: GenerateStyle = token => ({ - 'a&, a': { - ...operationUnit(token), - textDecoration: token.linkDecoration, +export const getLinkStyles: GenerateStyle = token => { + const { typographyCls } = token; - '&:active, &:hover': { - textDecoration: token.linkHoverDecoration, - }, - - [`&[disabled], &.${token.typography.prefixCls}-disabled`]: { - color: token.colorTextDisabled, - cursor: 'not-allowed', + return { + 'a&, a': { + ...operationUnit(token), + textDecoration: token.linkDecoration, '&:active, &:hover': { - color: '@disabled-color', + textDecoration: token.linkHoverDecoration, }, - '&:active': { - pointerEvents: 'none', + [`&[disabled], &${typographyCls}-disabled`]: { + color: token.colorTextDisabled, + cursor: 'not-allowed', + + '&:active, &:hover': { + color: token.colorTextDisabled, + }, + + '&:active': { + pointerEvents: 'none', + }, }, }, - }, -}); + }; +}; export const getResetStyles = (): CSSObject => ({ code: { @@ -188,6 +183,8 @@ export const getResetStyles = (): CSSObject => ({ }); export const getEditableStyles: GenerateStyle = token => { + const { typographyCls } = token; + const inputToken = initInputToken(token, '', ''); const inputShift = inputToken.inputPaddingVertical + 1; return { @@ -200,7 +197,7 @@ export const getEditableStyles: GenerateStyle = toke marginBottom: `calc(1em - ${inputShift}px)`, }, - [`.${token.typography.prefixCls}-edit-content-confirm`]: { + [`${typographyCls}-edit-content-confirm`]: { position: 'absolute', insetInlineEnd: token.marginXS + 2, insetBlockEnd: token.marginXS,