From d437f9fad97f7f53e5c35f5e83956c8e6ca2b9d4 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: Tue, 29 Mar 2022 15:57:39 +0800 Subject: [PATCH] refactor: More token used on component (#34766) * chore: add fontSizeIcon * chore: cascader * chore: slider token * chore: slider token * chore: move to outline * chore: input style * chore: input align * chore: slider full * chore: align inputNumber * chore: input token * chore: input-number token * chore: mention token * fix: ts def --- components/_util/theme/interface.ts | 21 +- components/_util/theme/themes/default.ts | 2 +- components/_util/theme/util/alias.ts | 6 +- components/alert/style/index.tsx | 6 +- components/button/demo/debug-token.md | 4 +- components/button/style/index.tsx | 6 +- components/cascader/style/index.tsx | 45 ++- components/divider/style/index.tsx | 4 +- components/input-number/style/index.tsx | 445 ++++++++++++----------- components/input/style/index.tsx | 73 ++-- components/mentions/style/index.tsx | 49 ++- components/popover/style/index.tsx | 3 +- components/select/style/index.tsx | 88 ++--- components/select/style/multiple.tsx | 2 +- components/slider/style/index.tsx | 126 ++++--- components/typography/style/index.tsx | 4 +- 16 files changed, 487 insertions(+), 397 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index e17233285e..b7ef559209 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -1,6 +1,11 @@ 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 CascaderComponentToken } from '../../cascader/style'; +import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style'; +import type { ComponentToken as MentionsComponentToken } from '../../mentions/style'; +import type { ComponentToken as SelectComponentToken } from '../../select/style'; +import type { ComponentToken as SliderComponentToken } from '../../slider/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; export const PresetColors = [ @@ -33,9 +38,14 @@ export interface OverrideToken { derivative?: Partial; // Customize component - button?: ButtonComponentToken; - divider?: DividerComponentToken; - typography?: TypographyComponentToken; + Button?: ButtonComponentToken; + Cascader?: CascaderComponentToken; + Divider?: DividerComponentToken; + InputNumber?: InputNumberComponentToken; + Mentions?: MentionsComponentToken; + Select?: SelectComponentToken; + Slider?: SliderComponentToken; + Typography?: TypographyComponentToken; } /** Final token which contains the components level override */ @@ -91,7 +101,6 @@ export interface SeedToken extends PresetColorType { // zIndex /** Base zIndex of component like BackTop, Affix which can be cover by large popup */ zIndexBase: number; - zIndexPopover: number; /** Base popup component zIndex */ zIndexPopup: number; } @@ -134,6 +143,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes { colorTextBelow3: string; colorBg2: string; + colorBg3: string; colorBgBelow: string; colorBgBelow2: string; @@ -193,6 +203,8 @@ export interface AliasToken extends Omit { fontSize: number; fontSizeLG: number; fontSizeXL: number; + /** Operation icon in Select, Cascader, etc. icon fontSize. Normal is same as fontSizeSM */ + fontSizeIcon: number; fontSizeHeading1: number; fontSizeHeading2: number; @@ -240,6 +252,7 @@ export interface AliasToken extends Omit { colorLinkActive: string; colorBgContainer: string; + colorBgContainerSecondary: string; colorBgComponent: string; colorBgComponentSecondary: string; colorBgComponentDisabled: string; diff --git a/components/_util/theme/themes/default.ts b/components/_util/theme/themes/default.ts index 320eee5a0f..54493250b2 100644 --- a/components/_util/theme/themes/default.ts +++ b/components/_util/theme/themes/default.ts @@ -101,6 +101,7 @@ export function derivative(token: SeedToken): DerivativeToken { // color colorBg2, + colorBg3: '#e1e1e1', colorBgBelow, colorBgBelow2, @@ -194,7 +195,6 @@ const seedToken: SeedToken = { // zIndex zIndexBase: 0, - zIndexPopover: 1030, zIndexPopup: 1000, }; diff --git a/components/_util/theme/util/alias.ts b/components/_util/theme/util/alias.ts index 6ef0c37559..8908067d5c 100644 --- a/components/_util/theme/util/alias.ts +++ b/components/_util/theme/util/alias.ts @@ -27,6 +27,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken const warningColors = generate(mergedToken.colorWarning); const errorColors = generate(mergedToken.colorError); + const fontSizeSM = fontSizes[0]; + // Generate alias token const aliasToken: AliasToken = { ...mergedToken, @@ -38,6 +40,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken colorTextHeading: mergedToken.colorText, colorBgContainer: mergedToken.colorBgBelow2, + colorBgContainerSecondary: mergedToken.colorBg3, colorBgComponent: mergedToken.colorBg, colorBgComponentSecondary: mergedToken.colorBg2, colorBgComponentDisabled: mergedToken.colorBgBelow2, @@ -50,7 +53,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken colorActionHover: mergedToken.colorText, // Font - fontSizeSM: fontSizes[0], + fontSizeSM, fontSize: fontSizes[1], fontSizeLG: fontSizes[2], fontSizeXL: fontSizes[3], @@ -59,6 +62,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken fontSizeHeading3: fontSizes[4], fontSizeHeading4: fontSizes[3], fontSizeHeading5: fontSizes[2], + fontSizeIcon: fontSizeSM, lineHeight: lineHeights[1], lineHeightLG: lineHeights[2], diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 35eb4e797b..336503af32 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -196,7 +196,7 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS iconPrefixCls, motionDurationSlow: duration, marginXS, - fontSizeSM, + fontSizeIcon, alertCloseColor, alertCloseHoverColor, } = token; @@ -211,8 +211,8 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS marginInlineStart: marginXS, padding: 0, overflow: 'hidden', - fontSize: fontSizeSM, - lineHeight: `${fontSizeSM}px`, + fontSize: fontSizeIcon, + lineHeight: `${fontSizeIcon}px`, backgroundColor: 'transparent', border: 'none', outline: 'none', diff --git a/components/button/demo/debug-token.md b/components/button/demo/debug-token.md index 66b80902c2..de9f056f03 100644 --- a/components/button/demo/debug-token.md +++ b/components/button/demo/debug-token.md @@ -13,7 +13,7 @@ ReactDOM.render( .${iconPrefixCls}`]: { + [`&:not(${iconOnlyCls}) ${btnCls}-loading-icon:not(:only-child) > .${iconPrefixCls}`]: { marginInlineEnd: token.marginXS, }, }, @@ -388,7 +388,7 @@ export default function useStyle( return [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const { colorText, button = {} } = token; + const { colorText, Button = {} } = token; const textColor = new TinyColor(colorText); const buttonToken: ButtonToken = { @@ -406,7 +406,7 @@ export default function useStyle( btnCls: `.${prefixCls}`, // Override by developer - ...button, + ...Button, }; return [ diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index fabb095743..f19f7d481f 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -17,7 +17,13 @@ import { } from '../../_util/theme'; import { getStyle as getCheckboxStyle } from '../../checkbox/style'; -interface CascaderToken extends DerivativeToken { +export interface ComponentToken { + controlWidth: number; + controlItemWidth: number; + dropdownHeight: number; +} + +interface CascaderToken extends DerivativeToken, ComponentToken { prefixCls: string; cascaderCls: string; } @@ -27,7 +33,7 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { const { prefixCls, cascaderCls } = token; const cascaderMenuItemCls = `${cascaderCls}-menu-item`; const iconCls = ` - ${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon, + &${cascaderMenuItemCls}-expand ${cascaderMenuItemCls}-expand-icon, ${cascaderMenuItemCls}-loading-icon `; @@ -41,7 +47,7 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { // ===================================================== { [cascaderCls]: { - width: 184, // FIXME: hardcode in v4 + width: token.controlWidth, }, }, @@ -83,8 +89,8 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { // >>> Menu '&-menu': { - minWidth: 111, // FIXME: hardcode in v4 - height: 180, // FIXME: hardcode in v4 + minWidth: token.controlItemWidth, + height: token.dropdownHeight, margin: `-${token.paddingXS}px 0`, padding: `${token.paddingXS}px 0`, overflow: 'auto', @@ -135,7 +141,7 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { [iconCls]: { marginInlineStart: token.paddingXXS, color: token.colorTextSecondary, - fontSize: 10, // FIXME: hardcode in v4 + fontSize: token.fontSizeIcon, }, '&-keyword': { @@ -162,16 +168,25 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { export default function useStyle(prefixCls: string): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - const cascaderToken: CascaderToken = { - ...token, - prefixCls, - cascaderCls: `.${prefixCls}`, - }; - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genBaseStyle(cascaderToken, hashId), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { Cascader = {} } = token; + + const cascaderToken: CascaderToken = { + ...token, + prefixCls, + cascaderCls: `.${prefixCls}`, + + controlWidth: 184, + controlItemWidth: 111, + dropdownHeight: 180, + + // Override + ...Cascader, + }; + + return [genBaseStyle(cascaderToken, hashId)]; + }), hashId, ]; } diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx index e7a1f61759..c64d96e93c 100644 --- a/components/divider/style/index.tsx +++ b/components/divider/style/index.tsx @@ -164,7 +164,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { return [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const { divider } = token; + const { Divider } = token; const dividerVerticalGutterMargin = token.marginSM; const dividerHorizontalWithTextGutterMargin = token.margin; @@ -181,7 +181,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { dividerHorizontalWithTextGutterMargin, dividerHorizontalGutterMargin, - ...divider, + ...Divider, }; return [genSharedDividerStyle(dividerToken)]; diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index 44dbbe3629..b6a785edd0 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -19,276 +19,271 @@ import { InputToken, } from '../../input/style'; -interface InputNumberToken extends InputToken { +export interface ComponentToken { + controlWidth: number; + handleWidth: number; + handleFontSize: number; +} + +interface InputNumberToken extends InputToken, ComponentToken { inputNumberCls: string; - inputNumberHandlerActiveBgColor: string; } const genInputNumberStyles: GenerateStyle = (token: InputNumberToken) => { const { inputNumberCls, - controlLineWidth: borderWidth, - controlLineType: borderStyle, - colorBorder: borderColor, - controlRadius: borderRadius, + controlLineWidth, + controlLineType, + colorBorder, + controlRadius, fontSizeLG, controlHeightLG, controlHeightSM, colorError, - paddingXS, - colorTextSecondary: textColorSecondary, - motionDurationFast: durationFast, - inputNumberHandlerActiveBgColor, + inputPaddingHorizontalSM, + colorTextSecondary, + motionDurationFast, colorPrimary, - marginXXS, controlHeight, inputPaddingHorizontal, - motionDurationSlow: duration, - colorBgComponent: componentBackground, - motionDurationMid: durationMid, - colorTextDisabled: textColorDisabled, + motionDurationSlow, + colorBgComponent, + motionDurationMid, + colorTextDisabled, + controlWidth, } = token; - return { - [inputNumberCls]: { - ...resetComponent(token), - ...genBasicInputStyle(token), - ...genStatusStyle(token), - - display: 'inline-block', - width: 90, // FIXME: magic number - margin: 0, - padding: 0, - border: `${borderWidth}px ${borderStyle} ${borderColor}`, - borderRadius, - - '&-rtl': { - direction: 'rtl', - - [`${inputNumberCls}-input`]: { - direction: 'rtl', - }, - }, - - [`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: { - opacity: 1, - }, - - '&-lg': { - padding: 0, - fontSize: fontSizeLG, - - [`input${inputNumberCls}-input`]: { - height: controlHeightLG - 2 * borderWidth, - }, - }, - - '&-sm': { - padding: 0, - - [`input${inputNumberCls}-input`]: { - height: controlHeightSM - 2 * borderWidth, - padding: `0 ${paddingXS - borderWidth}px`, - }, - }, - - '&:hover': { - ...genHoverStyle(token), - }, - - '&-focused': { - ...genActiveStyle(token), - }, - - '&-disabled': { - ...genDisabledStyle(token), - [`${inputNumberCls}-input`]: { - cursor: 'not-allowed', - }, - [`${inputNumberCls}-handler-wrap`]: { - display: 'none', - }, - }, - - '&-readonly': { - [`${inputNumberCls}-handler-wrap`]: { - display: 'none', - }, - }, - - '&-borderless': { - boxShadow: 'none', - }, - - // ===================== Out Of Range ===================== - '&-out-of-range': { - input: { - color: colorError, - }, - }, - - // Style for input-group: input with label, with button or dropdown... - '&-group': { - ...resetComponent(token), - ...genInputGroupStyle(token), - - '&-wrapper': { - display: 'inline-block', - textAlign: 'start', - verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403 - - [`${inputNumberCls}-affix-wrapper`]: { - width: '100%', - }, - }, - }, - + return [ + { [inputNumberCls]: { - '&-handler': { - position: 'relative', - display: 'block', - width: '100%', - height: '50%', - overflow: 'hidden', - color: textColorSecondary, - fontWeight: 'bold', - lineHeight: 0, - textAlign: 'center', - borderInlineStart: `${borderWidth}px ${borderStyle} ${borderColor}`, - transition: `all ${durationFast} linear`, + ...resetComponent(token), + ...genBasicInputStyle(token), + ...genStatusStyle(token), - '&:active': { - background: inputNumberHandlerActiveBgColor, - }, + display: 'inline-block', + width: controlWidth, + margin: 0, + padding: 0, + border: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, + borderRadius: controlRadius, - '&:hover &-up-inner, &:hover &-down-inner': { - color: colorPrimary, + '&-rtl': { + direction: 'rtl', + + [`${inputNumberCls}-input`]: { + direction: 'rtl', }, }, - '&-handler-up-inner, &-handler-down-inner': { - ...resetIcon(), + '&-lg': { + padding: 0, + fontSize: fontSizeLG, - position: 'absolute', - insetInlineEnd: marginXXS, - width: controlHeightSM / 2, - height: controlHeightSM / 2, - color: textColorSecondary, - lineHeight: controlHeightSM / 2, - transition: `all ${durationFast} linear`, - userSelect: 'none', + [`input${inputNumberCls}-input`]: { + height: controlHeightLG - 2 * controlLineWidth, + }, }, - '&-input': { - width: '100%', - height: controlHeight - 2 * borderWidth, - padding: `0 ${inputPaddingHorizontal - borderWidth}px`, - textAlign: 'start', - backgroundColor: 'transparent', - border: 0, - borderRadius, - outline: 0, - transition: `all ${duration} linear`, - appearance: 'textfield', // FIXME: important - ...genPlaceholderStyle(), + '&-sm': { + padding: 0, - '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': - { - margin: 0, - /* stylelint-disable-next-line property-no-vendor-prefix */ - webkitAppearance: 'none', - appearance: 'none', + [`input${inputNumberCls}-input`]: { + height: controlHeightSM - 2 * controlLineWidth, + padding: `0 ${inputPaddingHorizontalSM}px`, + }, + }, + + '&:hover': { + ...genHoverStyle(token), + }, + + '&-focused': { + ...genActiveStyle(token), + }, + + '&-disabled': { + ...genDisabledStyle(token), + [`${inputNumberCls}-input`]: { + cursor: 'not-allowed', + }, + }, + + // ===================== Out Of Range ===================== + '&-out-of-range': { + input: { + color: colorError, + }, + }, + + // Style for input-group: input with label, with button or dropdown... + '&-group': { + ...resetComponent(token), + ...genInputGroupStyle(token), + + '&-wrapper': { + display: 'inline-block', + textAlign: 'start', + verticalAlign: 'top', // https://github.com/ant-design/ant-design/issues/6403 + + [`${inputNumberCls}-affix-wrapper`]: { + width: '100%', }, + }, }, - '&-handler-wrap': { + [inputNumberCls]: { + '&-input': { + width: '100%', + height: controlHeight - 2 * controlLineWidth, + padding: `0 ${inputPaddingHorizontal}px`, + textAlign: 'start', + backgroundColor: 'transparent', + border: 0, + borderRadius: controlRadius, + outline: 0, + transition: `all ${motionDurationSlow} linear`, + appearance: 'textfield', + ...genPlaceholderStyle(token.colorPlaceholder), + + '&[type="number"]::-webkit-inner-spin-button, &[type="number"]::-webkit-outer-spin-button': + { + margin: 0, + /* stylelint-disable-next-line property-no-vendor-prefix */ + webkitAppearance: 'none', + appearance: 'none', + }, + }, + }, + }, + }, + + // Handler + { + [inputNumberCls]: { + [`&:hover ${inputNumberCls}-handler-wrap, &-focused ${inputNumberCls}-handler-wrap`]: { + opacity: 1, + }, + + [`${inputNumberCls}-handler-wrap`]: { position: 'absolute', insetBlockStart: 0, insetInlineEnd: 0, - width: 22, // FIXME: magic number + width: token.handleWidth, height: '100%', - background: componentBackground, + background: colorBgComponent, borderStartStartRadius: 0, - borderStartEndRadius: borderRadius, - borderEndEndRadius: borderRadius, + borderStartEndRadius: controlRadius, + borderEndEndRadius: controlRadius, borderEndStartRadius: 0, opacity: 0, - transition: `opacity ${durationMid} linear ${durationFast}`, + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + transition: `opacity ${motionDurationMid} linear ${motionDurationFast}`, // Fix input number inside Menu makes icon too large // We arise the selector priority by nest selector here // https://github.com/ant-design/ant-design/issues/14367 [`${inputNumberCls}-handler`]: { - [`${inputNumberCls}-handler-up-inner, - ${inputNumberCls}-handler-down-inner`]: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - minWidth: 'auto', - marinInlineEnd: 0, - fontSize: 7, // FIXME: magic + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flex: 'auto', + height: '40%', + + [` + ${inputNumberCls}-handler-up-inner, + ${inputNumberCls}-handler-down-inner + `]: { + marginInlineEnd: 0, + fontSize: token.handleFontSize, + }, + }, + }, + + [`${inputNumberCls}-handler`]: { + height: '50%', + overflow: 'hidden', + color: colorTextSecondary, + fontWeight: 'bold', + lineHeight: 0, + textAlign: 'center', + cursor: 'pointer', + borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, + transition: `all ${motionDurationFast} linear`, + '&:active': { + background: token.colorBgComponentSecondary, + }, + + // Hover + '&:hover': { + height: `60%`, + + [` + ${inputNumberCls}-handler-up-inner, + ${inputNumberCls}-handler-down-inner + `]: { + color: colorPrimary, }, }, - [`${inputNumberCls}-borderless &`]: { - borderInlineStartWidth: 0, - }, + '&-up-inner, &-down-inner': { + ...resetIcon(), - [`&:hover ${inputNumberCls}-handler`]: { - height: '40%', + color: colorTextSecondary, + transition: `all ${motionDurationFast} linear`, + userSelect: 'none', }, }, - '&-handler-up': { - borderStartEndRadius: borderRadius, - cursor: 'pointer', + [`${inputNumberCls}-handler-up`]: { + borderStartEndRadius: controlRadius, + }, - '&-inner': { - top: '50%', - marginTop: -5, // FIXME: magic - textAlign: 'center', - }, + [`${inputNumberCls}-handler-down`]: { + borderBlockStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, + borderEndEndRadius: controlRadius, + }, - '&:hover': { - height: '60% !important', + // Disabled + '&-disabled, &-readonly': { + [`${inputNumberCls}-handler-wrap`]: { + display: 'none', }, }, - '&-handler-down': { - top: 0, - borderBlockStart: `${borderWidth}px ${borderStyle} ${borderColor}`, - borderEndEndRadius: borderRadius, - cursor: 'pointer', - - '&-inner': { - top: '50%', - textAlign: 'center', - transform: 'translateY(-50%)', - }, - - '&:hover': { - height: '60% !important', - }, - - [`${inputNumberCls}-borderless &`]: { - borderBlockStartWidth: 0, - }, - }, - '&-handler-up-disabled, &-handler-down-disabled': { + [` + ${inputNumberCls}-handler-up-disabled, + ${inputNumberCls}-handler-down-disabled + `]: { cursor: 'not-allowed', }, - [`&-handler-up-disabled:hover &-handler-up-inner, - &-handler-down-disabled:hover &-handler-down-inner`]: { - color: textColorDisabled, + [` + ${inputNumberCls}-handler-up-disabled:hover &-handler-up-inner, + ${inputNumberCls}-handler-down-disabled:hover &-handler-down-inner + `]: { + color: colorTextDisabled, }, }, }, - }; + + // Border-less + { + [`${inputNumberCls}-borderless`]: { + borderColor: 'transparent', + boxShadow: 'none', + + [`${inputNumberCls}-handler-down`]: { + borderBlockStartWidth: 0, + }, + }, + }, + ]; }; const genAffixWrapperStyles: GenerateStyle = (token: InputNumberToken) => { - const { inputNumberCls, inputPaddingHorizontal, inputAffixMargin } = token; + const { inputNumberCls, inputPaddingHorizontal, inputAffixPadding, controlWidth } = token; return { [`${inputNumberCls}-affix-wrapper`]: { @@ -297,7 +292,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb // or number handler will cover form status position: 'relative', display: 'inline-flex', - width: 90, // FIXME: magic + width: controlWidth, padding: 0, paddingInlineStart: inputPaddingHorizontal, @@ -349,7 +344,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }, '&-prefix': { - marginInlineEnd: inputAffixMargin, + marginInlineEnd: inputAffixPadding, }, '&-suffix': { @@ -359,7 +354,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb zIndex: 1, height: '100%', marginInlineEnd: inputPaddingHorizontal, - marginInlineStart: inputAffixMargin, + marginInlineStart: inputAffixPadding, }, }, }, @@ -373,17 +368,23 @@ export default function useStyle( ): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - const inputNumberToken: InputNumberToken = { - ...initInputToken(token, prefixCls, iconPrefixCls), - inputNumberCls: `.${prefixCls}`, - inputNumberHandlerActiveBgColor: '#f4f4f4', // FIXME: magic number - }; - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genInputNumberStyles(inputNumberToken), - genAffixWrapperStyles(inputNumberToken), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { InputNumber, controlLineWidth, controlHeightSM, fontSize } = token; + + const inputNumberToken: InputNumberToken = { + ...initInputToken(token, prefixCls, iconPrefixCls), + inputNumberCls: `.${prefixCls}`, + + controlWidth: 90, + handleWidth: controlHeightSM - controlLineWidth * 2, + handleFontSize: fontSize / 2, + + ...InputNumber, + }; + + return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)]; + }), hashId, ]; } diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index caed3c4687..a725f4d6e0 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -1,6 +1,5 @@ // deps-lint-skip-all import { CSSObject } from '@ant-design/cssinjs'; -import { TinyColor } from '@ctrl/tinycolor'; import { clearFix, DerivativeToken, @@ -14,19 +13,17 @@ import { export interface InputToken extends DerivativeToken { prefixCls: string; iconPrefixCls: string; - inputAffixMargin: number; + inputAffixPadding: number; inputPaddingVertical: number; inputPaddingVerticalLG: number; inputPaddingVerticalSM: number; inputPaddingHorizontal: number; + inputPaddingHorizontalSM: number; inputBorderHoverColor: string; inputBorderActiveColor: string; } -// FIXME: magic color string -export const genPlaceholderStyle = ( - color: string = new TinyColor({ h: 0, s: 0, v: '75%' }).toHexString(), -): CSSObject => ({ +export const genPlaceholderStyle = (color: string): CSSObject => ({ // Firefox '&::-moz-placeholder': { opacity: 1, @@ -137,7 +134,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ borderColor: token.colorBorder, borderRadius: token.controlRadius, transition: `all ${token.motionDurationSlow}`, - ...genPlaceholderStyle(), + ...genPlaceholderStyle(token.colorPlaceholder), '&:hover': { ...genHoverStyle(token), @@ -236,7 +233,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { [`.${prefixCls}-group`]: { [`&-addon, &-wrap`]: { display: 'table-cell', - width: 1, // FIXME: magic number + width: 1, whiteSpace: 'nowrap', verticalAlign: 'middle', @@ -465,7 +462,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { }, [`.${prefixCls}-group-wrapper + .${prefixCls}-group-wrapper`]: { - marginInlineStart: -1, // FIXME: magic number + marginInlineStart: -token.controlLineWidth, [`.${prefixCls}-affix-wrapper`]: { borderRadius: 0, }, @@ -490,7 +487,11 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { }; const genInputStyle: GenerateStyle = (token: InputToken) => { - const { prefixCls } = token; + const { prefixCls, controlHeightSM, controlLineWidth } = token; + + const FIXED_CHROME_COLOR_HEIGHT = 16; + const colorSmallPadding = + (controlHeightSM - controlLineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2; return { [`.${prefixCls}`]: { @@ -505,9 +506,9 @@ const genInputStyle: GenerateStyle = (token: InputToken) => { height: token.controlHeightLG, }, [`&.${prefixCls}-sm`]: { - height: token.controlHeightSM, - paddingTop: 3, // FIXME: magic number - paddingBottom: 3, // FIXME: magic number + height: controlHeightSM, + paddingTop: colorSmallPadding, + paddingBottom: colorSmallPadding, }, }, }, @@ -521,8 +522,8 @@ const genAllowClearStyle = (token: InputToken): CSSObject => { [`.${prefixCls}-clear-icon`]: { margin: 0, color: token.colorTextDisabled, - fontSize: token.fontSizeSM, - verticalAlign: -1, // FIXME: magic number + fontSize: token.fontSizeIcon, + verticalAlign: -1, // https://github.com/ant-design/ant-design/pull/18151 // https://codesandbox.io/s/wizardly-sun-u10br cursor: 'pointer', @@ -541,7 +542,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => { }, '&-has-suffix': { - margin: `0 ${token.inputAffixMargin}px`, + margin: `0 ${token.inputAffixPadding}px`, }, }, @@ -564,7 +565,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { const { prefixCls, iconPrefixCls, - inputAffixMargin, + inputAffixPadding, colorTextSecondary, motionDurationSlow, colorAction, @@ -617,7 +618,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { alignItems: 'center', '> *:not(:last-child)': { - marginInlineEnd: 8, // FIXME: magic number + marginInlineEnd: token.paddingXS, }, }, @@ -626,15 +627,15 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { }, '&-show-count-has-suffix': { - marginInlineEnd: token.marginXXS, + marginInlineEnd: token.paddingXXS, }, '&-prefix': { - marginInlineEnd: inputAffixMargin, + marginInlineEnd: inputAffixPadding, }, '&-suffix': { - marginInlineStart: inputAffixMargin, + marginInlineStart: inputAffixPadding, }, }, @@ -783,7 +784,7 @@ export const initInputToken = ( ...token, prefixCls, iconPrefixCls, - inputAffixMargin: token.marginXS, + inputAffixPadding: token.paddingXXS, inputPaddingVertical: Math.max( Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - token.controlLineWidth, @@ -798,6 +799,7 @@ export const initInputToken = ( 0, ), inputPaddingHorizontal: token.controlPaddingHorizontal - token.controlLineWidth, + inputPaddingHorizontalSM: token.controlPaddingHorizontalSM - token.controlLineWidth, inputBorderHoverColor: token.colorPrimaryHover, inputBorderActiveColor: token.colorPrimaryHover, }); @@ -808,6 +810,8 @@ const genTextAreaStyle: GenerateStyle = token => { return { [textareaPrefixCls]: { + position: 'relative', + [`${textareaPrefixCls}-suffix`]: { position: 'absolute', top: 0, @@ -837,12 +841,15 @@ const genTextAreaStyle: GenerateStyle = token => { }, '&::after': { - textAlign: 'end', + position: 'absolute', + bottom: 0, + insetInlineEnd: 0, color: token.colorTextSecondary, whiteSpace: 'nowrap', content: 'attr(data-count)', pointerEvents: 'none', display: 'block', + transform: 'translateY(100%)', }, [`&${textareaPrefixCls}-in-form-item`]: { @@ -862,16 +869,18 @@ export default function useStyle( ): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - const inputToken: InputToken = initInputToken(token, prefixCls, iconPrefixCls); - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genInputStyle(inputToken), - genTextAreaStyle(inputToken), - genAffixStyle(inputToken), - genGroupStyle(inputToken), - genSearchInputStyle(inputToken), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const inputToken: InputToken = initInputToken(token, prefixCls, iconPrefixCls); + + return [ + genInputStyle(inputToken), + genTextAreaStyle(inputToken), + genAffixStyle(inputToken), + genGroupStyle(inputToken), + genSearchInputStyle(inputToken), + ]; + }), hashId, ]; } diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx index 495c7e0104..e06b1a1a9a 100644 --- a/components/mentions/style/index.tsx +++ b/components/mentions/style/index.tsx @@ -15,7 +15,13 @@ import { InputToken, } from '../../input/style'; -interface MentionsToken extends InputToken { +export interface ComponentToken { + zIndexDropdown: number; + dropdownHeight: number; + controlItemWidth: number; +} + +interface MentionsToken extends InputToken, ComponentToken { mentionsCls: string; } @@ -37,6 +43,10 @@ const genMentionsStyle: GenerateStyle = token => { boxShadow, } = token; + const itemPaddingVertical = Math.round( + (token.controlHeight - token.fontSize * token.lineHeight) / 2, + ); + return { [`${mentionsCls}`]: { ...resetComponent(token), @@ -103,7 +113,7 @@ const genMentionsStyle: GenerateStyle = token => { border: 'none', outline: 'none', resize: 'none', - ...genPlaceholderStyle(), + ...genPlaceholderStyle(token.colorPlaceholder), }, [`${mentionsCls}-measure`]: { @@ -130,7 +140,7 @@ const genMentionsStyle: GenerateStyle = token => { position: 'absolute', top: -9999, insetInlineStart: -9999, - zIndex: 1050, // FIXME: magic + zIndex: token.zIndexDropdown, boxSizing: 'border-box', fontSize, fontVariant: 'initial', @@ -144,7 +154,7 @@ const genMentionsStyle: GenerateStyle = token => { }, [`${mentionsCls}-dropdown-menu`]: { - maxHeight: 250, // FIXME: magic + maxHeight: token.dropdownHeight, marginBottom: 0, paddingInlineStart: 0, // Override default ul/ol overflow: 'auto', @@ -154,8 +164,8 @@ const genMentionsStyle: GenerateStyle = token => { '&-item': { position: 'relative', display: 'block', - minWidth: 100, // FIXME: magic - padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic + minWidth: token.controlItemWidth, + padding: `${itemPaddingVertical}px ${controlPaddingHorizontal}px`, overflow: 'hidden', color: colorText, fontWeight: 'normal', @@ -196,7 +206,7 @@ const genMentionsStyle: GenerateStyle = token => { '&-selected': { color: colorText, - fontWeight: 600, // FIXME: Need design token? + fontWeight: token.fontWeightStrong, backgroundColor: controlItemBgHover, }, @@ -217,15 +227,24 @@ export default function useStyle( ): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - const mentionsToken: MentionsToken = { - ...initInputToken(token, prefixCls, iconPrefixCls), - mentionsCls: `.${prefixCls}`, - }; - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genMentionsStyle(mentionsToken), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { zIndexPopup, Mentions } = token; + + const mentionsToken: MentionsToken = { + ...initInputToken(token, prefixCls, iconPrefixCls), + + mentionsCls: `.${prefixCls}`, + + dropdownHeight: 250, + controlItemWidth: 100, + zIndexDropdown: zIndexPopup + 50, + + ...Mentions, + }; + + return [genMentionsStyle(mentionsToken)]; + }), hashId, ]; } diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 27428b00e9..5d1abf7ba5 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -59,7 +59,6 @@ const genBaseStyle: GenerateStyle = token => { lineHeight, radiusBase: borderRadius, paddingSM, - zIndexPopover, } = token; return { @@ -68,7 +67,7 @@ const genBaseStyle: GenerateStyle = token => { position: 'absolute', top: 0, insetInlineStart: 0, - zIndex: zIndexPopover, + zIndex: 1030, // FIXME: hardcode fontWeight: 'normal', whiteSpace: 'normal', textAlign: 'start', diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index bc64ca2d09..606f9c052e 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -5,7 +5,7 @@ import '../../empty/style'; // deps-lint-skip-all -import { CSSObject, CSSInterpolation } from '@ant-design/cssinjs'; +import { CSSObject } from '@ant-design/cssinjs'; import { DerivativeToken, useStyleRegister, @@ -19,14 +19,17 @@ import genSingleStyle from './single'; import genMultipleStyle from './multiple'; import genDropdownStyle from './dropdown'; -export type SelectToken = DerivativeToken & { +export interface ComponentToken { + zIndexDropdown: number; +} + +export interface SelectToken extends DerivativeToken, ComponentToken { rootPrefixCls: string; antCls: string; selectCls: string; iconPrefixCls: string; inputPaddingHorizontalBase: number; - zIndexDropdown: number; -}; +} // ============================= Selector ============================= const genSelectorStyle: GenerateStyle = token => { @@ -178,10 +181,10 @@ const genBaseStyle: GenerateStyle = token => { top: '50%', insetInlineStart: 'auto', insetInlineEnd: inputPaddingHorizontalBase, - height: token.fontSizeSM, - marginTop: -token.fontSizeSM / 2, + height: token.fontSizeIcon, + marginTop: -token.fontSizeIcon / 2, color: token.colorTextDisabled, - fontSize: token.fontSizeSM, + fontSize: token.fontSizeIcon, lineHeight: 1, textAlign: 'center', pointerEvents: 'none', @@ -218,11 +221,11 @@ const genBaseStyle: GenerateStyle = token => { insetInlineEnd: inputPaddingHorizontalBase, zIndex: 1, display: 'inline-block', - width: token.fontSizeSM, - height: token.fontSizeSM, - marginTop: -token.fontSizeSM / 2, + width: token.fontSizeIcon, + height: token.fontSizeIcon, + marginTop: -token.fontSizeIcon / 2, color: token.colorTextDisabled, - fontSize: token.fontSizeSM, + fontSize: token.fontSizeIcon, fontStyle: 'normal', lineHeight: 1, textAlign: 'center', @@ -259,27 +262,8 @@ const genBaseStyle: GenerateStyle = token => { }; // ============================== Styles ============================== -const genSelectStyle = ( - rootPrefixCls: string, - prefixCls: string, - iconPrefixCls: string, - token: DerivativeToken, - hashId: string, -): CSSInterpolation => { - const antCls = `.${rootPrefixCls}`; - const selectCls = `.${prefixCls}`; - - const inputPaddingHorizontalBase = token.controlPaddingHorizontal - 1; - - const selectToken: SelectToken = { - ...token, - rootPrefixCls, - antCls, - selectCls, - iconPrefixCls, - inputPaddingHorizontalBase, - zIndexDropdown: token.zIndexPopup + 50, - }; +const genSelectStyle: GenerateStyle = (token, hashId) => { + const { selectCls } = token; return [ { @@ -302,16 +286,16 @@ const genSelectStyle = ( // == LTR == // ===================================================== // Base - genBaseStyle(selectToken), + genBaseStyle(token), // Single - genSingleStyle(selectToken), + genSingleStyle(token), // Multiple - genMultipleStyle(selectToken), + genMultipleStyle(token), // Dropdown - genDropdownStyle(selectToken, hashId), + genDropdownStyle(token, hashId), // ===================================================== // == RTL == @@ -326,14 +310,14 @@ const genSelectStyle = ( // == Status == // ===================================================== genStatusStyle(selectCls, { - ...selectToken, + ...token, borderHoverColor: token.colorPrimaryHover, outlineColor: token.colorPrimaryOutline, }), genStatusStyle( `${selectCls}-status-error`, { - ...selectToken, + ...token, borderHoverColor: token.colorErrorHover, outlineColor: token.colorErrorOutline, }, @@ -342,7 +326,7 @@ const genSelectStyle = ( genStatusStyle( `${selectCls}-status-warning`, { - ...selectToken, + ...token, borderHoverColor: token.colorWarningHover, outlineColor: token.colorWarningOutline, }, @@ -360,9 +344,29 @@ export default function useStyle( const [theme, token, hashId] = useToken(); return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genSelectStyle(rootPrefixCls, prefixCls, iconPrefixCls, token, hashId), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { zIndexPopup, Select } = token; + + const antCls = `.${rootPrefixCls}`; + const selectCls = `.${prefixCls}`; + + const inputPaddingHorizontalBase = token.controlPaddingHorizontal - 1; + + const selectToken: SelectToken = { + ...token, + + rootPrefixCls, + antCls, + selectCls, + iconPrefixCls, + inputPaddingHorizontalBase, + zIndexDropdown: zIndexPopup + 50, + + ...Select, + }; + + return [genSelectStyle(selectToken, hashId)]; + }), hashId, ]; } diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index d4a5ff8795..5eb206dc13 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -78,7 +78,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { &${selectCls}-show-arrow ${selectCls}-selector, &${selectCls}-allow-clear ${selectCls}-selector `]: { - paddingInlineEnd: token.fontSizeSM + token.controlPaddingHorizontal, + paddingInlineEnd: token.fontSizeIcon + token.controlPaddingHorizontal, }, // ======================== Selections ======================== diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index 0220cb5aa1..93f340d6cc 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -7,7 +7,6 @@ // deps-lint-skip-all import * as React from 'react'; import { CSSObject } from '@ant-design/cssinjs'; -import { TinyColor } from '@ctrl/tinycolor'; import { DerivativeToken, useStyleRegister, @@ -17,32 +16,46 @@ import { resetComponent, } from '../../_util/theme'; -interface SliderToken extends DerivativeToken { - sliderCls: string; - handleSize: number; - sliderSize: number; +// Direction naming standard: +// Horizontal base: +// -0------------- +// vertical: part (水平时，垂直方向命名为 part) +// horizontal: full (水平时，水平方向命名为 full) + +export interface ComponentToken { + controlSize: number; railSize: number; + handleSize: number; + lineHandleWidth: number; dotSize: number; } +interface SliderToken extends DerivativeToken, ComponentToken { + sliderCls: string; + marginFull: number; + marginPart: number; + marginPartWithMark: number; +} + // =============================== Base =============================== const genBaseStyle: GenerateStyle = token => { - const { sliderCls, sliderSize, dotSize } = token; - - const FIXED_RAIL_HOVER_COLOR = '#e1e1e1'; + const { sliderCls, controlSize, dotSize, marginFull, marginPart, colorBgContainerSecondary } = + token; return { [sliderCls]: { ...resetComponent(token), position: 'relative', - height: sliderSize, - margin: '10px 6px', // FIXME: hard code in v4 + height: controlSize, + margin: `${marginPart}px ${marginFull}px`, padding: 0, cursor: 'pointer', touchAction: 'none', - // .vertical(); + [`&-vertical`]: { + margin: `${marginFull}px ${marginPart}px`, + }, [`${sliderCls}-rail`]: { position: 'absolute', @@ -63,7 +76,7 @@ const genBaseStyle: GenerateStyle = token => { width: token.handleSize, height: token.handleSize, backgroundColor: token.colorBgComponent, - border: `2px solid ${token.colorPrimarySecondary}`, + border: `${token.lineHandleWidth}px solid ${token.colorPrimarySecondary}`, borderRadius: '50%', boxShadow: 'none', cursor: 'pointer', @@ -84,13 +97,10 @@ const genBaseStyle: GenerateStyle = token => { }, '&:focus-visible': { - // FIXME: This is a inline color calculation - boxShadow: `0 0 0 5px ${new TinyColor(token.colorPrimaryHover) - .setAlpha(0.2) - .toRgbString()}`, + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimarySecondary}`, }, - // FIXME: Seems useless? + // Seems useless? // &.@{ant-prefix}-tooltip-open { // border-color: @slider-handle-color-tooltip-open; // } @@ -98,18 +108,18 @@ const genBaseStyle: GenerateStyle = token => { '&:hover': { [`${sliderCls}-rail`]: { - backgroundColor: FIXED_RAIL_HOVER_COLOR, // FIXME: Not match color + backgroundColor: colorBgContainerSecondary, }, [`${sliderCls}-track`]: { - backgroundColor: token.colorPrimaryHover, // FIXME: origin primary-4 + backgroundColor: token.colorPrimaryHover, }, [`${sliderCls}-dot`]: { - borderColor: FIXED_RAIL_HOVER_COLOR, + borderColor: colorBgContainerSecondary, }, - // FIXME: We use below style instead + // We use below style instead // ${sliderCls}-handle:not(.@{ant-prefix}-tooltip-open) { // border-color: @slider-handle-color-hover; // } @@ -152,7 +162,7 @@ const genBaseStyle: GenerateStyle = token => { width: dotSize, height: dotSize, backgroundColor: token.colorBgComponent, - border: `2px solid ${token.colorSplit}`, // FIXME: hardcode in v4 + border: `${token.lineHandleWidth}px solid ${token.colorSplit}`, borderRadius: '50%', cursor: 'pointer', transition: `border-color ${token.motionDurationSlow}`, @@ -196,28 +206,29 @@ const genBaseStyle: GenerateStyle = token => { // ============================ Horizontal ============================ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject => { - const { sliderCls, railSize, sliderSize, handleSize, dotSize } = token; + const { sliderCls, railSize, controlSize, handleSize, dotSize } = token; const railPadding: keyof React.CSSProperties = horizontal ? 'paddingBlock' : 'paddingInline'; - const stretch: keyof React.CSSProperties = horizontal ? 'width' : 'height'; - const contain: keyof React.CSSProperties = horizontal ? 'height' : 'width'; + const full: keyof React.CSSProperties = horizontal ? 'width' : 'height'; + const part: keyof React.CSSProperties = horizontal ? 'height' : 'width'; const handlePos: keyof React.CSSProperties = horizontal ? 'insetBlockStart' : 'insetInlineStart'; const markInset: keyof React.CSSProperties = horizontal ? 'top' : 'insetInlineStart'; return { [railPadding]: railSize, + [part]: controlSize, [`${sliderCls}-rail`]: { - [stretch]: '100%', - [contain]: railSize, + [full]: '100%', + [part]: railSize, }, [`${sliderCls}-track`]: { - [contain]: railSize, + [part]: railSize, }, [`${sliderCls}-handle`]: { - [handlePos]: (sliderSize - handleSize) / 2, + [handlePos]: (controlSize - handleSize) / 2, }, [`${sliderCls}-mark`]: { @@ -225,7 +236,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject = insetInlineStart: 0, top: 0, [markInset]: handleSize, - [stretch]: '100%', + [full]: '100%', }, [`${sliderCls}-step`]: { @@ -233,8 +244,8 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject = insetInlineStart: 0, top: 0, [markInset]: railSize, - [stretch]: '100%', - [contain]: railSize, + [full]: '100%', + [part]: railSize, }, [`${sliderCls}-dot`]: { @@ -245,14 +256,14 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject = }; // ============================ Horizontal ============================ const genHorizontalStyle: GenerateStyle = token => { - const { sliderCls } = token; + const { sliderCls, marginPartWithMark } = token; return { [`${sliderCls}-horizontal`]: { ...genDirectionStyle(token, true), [`&${sliderCls}-with-marks`]: { - marginBottom: 28, // FIXME: hard code in v4 + marginBottom: marginPartWithMark, }, }, }; @@ -274,23 +285,38 @@ const genVerticalStyle: GenerateStyle = token => { export default function useStyle(prefixCls: string): UseComponentStyleResult { const [theme, token, hashId] = useToken(); - const sliderSize = 12; // FIXME: hard code in v4 - - const sliderToken: SliderToken = { - ...token, - sliderCls: `.${prefixCls}`, - handleSize: 14, // FIXME: hard code in v4 - sliderSize, - railSize: sliderSize / 3, - dotSize: 8, - }; - return [ - useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [ - genBaseStyle(sliderToken, hashId), - genHorizontalStyle(sliderToken), - genVerticalStyle(sliderToken), - ]), + useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { + const { controlHeightSM, controlHeightLG, controlHeight, lineWidth, Slider } = token; + + // Handle line width is always width-er 1px + const increaseHandleWidth = 1; + const controlSize = controlHeightSM / 2; + const lineHandleWidth = lineWidth + increaseHandleWidth; + + const sliderToken: SliderToken = { + ...token, + sliderCls: `.${prefixCls}`, + + controlSize, + railSize: controlSize / 3, + handleSize: controlSize + lineHandleWidth, + dotSize: (controlSize / 3) * 2, + lineHandleWidth, + + marginPart: (controlHeight - controlSize) / 2, + marginFull: controlSize / 2, + marginPartWithMark: controlHeightLG - controlSize, + + ...Slider, + }; + + return [ + genBaseStyle(sliderToken, hashId), + genHorizontalStyle(sliderToken), + genVerticalStyle(sliderToken), + ]; + }), hashId, ]; } diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx index bdfe2a0e0e..597bce44d5 100644 --- a/components/typography/style/index.tsx +++ b/components/typography/style/index.tsx @@ -126,7 +126,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { return [ useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => { - const { typography } = token; + const { Typography } = token; const typographyToken: TypographyToken = { ...token, @@ -136,7 +136,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { sizeMarginHeadingVerticalStart: '1.2em', sizeMarginHeadingVerticalEnd: '0.5em', - ...typography, + ...Typography, }; return [genTypographyStyle(typographyToken)];