diff --git a/packages/design/src/button/style/index.ts b/packages/design/src/button/style/index.ts index 33c66e502..428a10a4b 100644 --- a/packages/design/src/button/style/index.ts +++ b/packages/design/src/button/style/index.ts @@ -23,7 +23,7 @@ export const genButtonStyle: GenerateStyle = (token: ButtonToken) = export default (prefixCls: string) => { const useStyle = genComponentStyleHook('Button', token => { - return [genButtonStyle(token)]; + return [genButtonStyle(token as ButtonToken)]; }); return useStyle(prefixCls); }; diff --git a/packages/design/src/card/style/index.ts b/packages/design/src/card/style/index.ts index f952f45cf..9e3e0674e 100644 --- a/packages/design/src/card/style/index.ts +++ b/packages/design/src/card/style/index.ts @@ -31,7 +31,7 @@ export const genCardStyle: GenerateStyle = (token: CardToken): CSSObj ...token, componentCls: tabsComponentCls, prefixCls: tabsPrefixCls, - }), + } as CardToken), }, }; }; diff --git a/packages/design/src/descriptions/style/index.ts b/packages/design/src/descriptions/style/index.ts index 51a6b733d..c4fcc8795 100644 --- a/packages/design/src/descriptions/style/index.ts +++ b/packages/design/src/descriptions/style/index.ts @@ -36,7 +36,7 @@ export default (prefixCls: string, typographyPrefixCls: string) => { ...token, typographyPrefixCls, typographyComponentCls: `.${typographyPrefixCls}`, - }), + } as DescriptionsToken), ]; }); return useStyle(prefixCls); diff --git a/packages/design/src/modal/__tests__/__snapshots__/progress.test.tsx.snap b/packages/design/src/modal/__tests__/__snapshots__/progress.test.tsx.snap index a0bd4f748..e8ef145b2 100644 --- a/packages/design/src/modal/__tests__/__snapshots__/progress.test.tsx.snap +++ b/packages/design/src/modal/__tests__/__snapshots__/progress.test.tsx.snap @@ -192,36 +192,36 @@ exports[`Modal.Progress render with progress.percent 1`] = ` = (token: TableToken): CSS export default (prefixCls: string) => { const useStyle = genComponentStyleHook('Table', token => { - return [genTableStyle(token)]; + return [genTableStyle(token as TableToken)]; }); return useStyle(prefixCls); }; diff --git a/packages/ui/src/BasicLayout/style/index.ts b/packages/ui/src/BasicLayout/style/index.ts index d021a902f..f8d8048da 100644 --- a/packages/ui/src/BasicLayout/style/index.ts +++ b/packages/ui/src/BasicLayout/style/index.ts @@ -23,7 +23,7 @@ export const genBasicLayoutStyle: GenerateStyle = ( export default (prefixCls: string) => { const useStyle = genComponentStyleHook('BasicLayout', token => { - return [genBasicLayoutStyle(token)]; + return [genBasicLayoutStyle(token as BasicLayoutToken)]; }); return useStyle(prefixCls); }; diff --git a/packages/ui/src/PageContainer/style/index.ts b/packages/ui/src/PageContainer/style/index.ts index 336b8349f..4140831b5 100644 --- a/packages/ui/src/PageContainer/style/index.ts +++ b/packages/ui/src/PageContainer/style/index.ts @@ -100,7 +100,7 @@ export const genPageContainerStyle: GenerateStyle = ( export default (prefixCls: string) => { const useStyle = genComponentStyleHook('PageContainer', token => { - return [genPageContainerStyle(token)]; + return [genPageContainerStyle(token as PageContainerToken)]; }); return useStyle(prefixCls); }; diff --git a/packages/ui/src/TagSelect/style/index.ts b/packages/ui/src/TagSelect/style/index.ts index 08f8b3764..7efde8fb5 100644 --- a/packages/ui/src/TagSelect/style/index.ts +++ b/packages/ui/src/TagSelect/style/index.ts @@ -1,135 +1,143 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { FullToken, GenerateStyle } from 'antd/lib/theme/internal'; -import {genComponentStyleHook} from '../../_util/genComponentStyleHook'; +import { genComponentStyleHook } from '../../_util/genComponentStyleHook'; export type TagSelectToken = FullToken; const genSizeStyle = (height: number, fontSize: number): CSSObject => { - return { - paddingTop: `${height}px`, - paddingBottom: `${height}px`, - fontSize - }; + return { + paddingTop: `${height}px`, + paddingBottom: `${height}px`, + fontSize, + }; }; -const genColoredStyle = (borderColor: string, backgroundColor: string, color: string): CSSObject => { - return { - borderColor, - backgroundColor, - color - }; -} +const genColoredStyle = ( + borderColor: string, + backgroundColor: string, + color: string +): CSSObject => { + return { + borderColor, + backgroundColor, + color, + }; +}; const genMultipleStyle = (color: string, token: TagSelectToken): CSSObject => { - return { - position: 'absolute', - top: '1px', - right: '1px', - borderTop: `12px solid ${color}`, - borderLeft: `12px solid transparent`, - borderTopRightRadius: token.borderRadiusSM - } -} + return { + position: 'absolute', + top: '1px', + right: '1px', + borderTop: `12px solid ${color}`, + borderLeft: `12px solid transparent`, + borderTopRightRadius: token.borderRadiusSM, + }; +}; const genImgCoverStyle = (width: string, height: string): CSSObject => { - return { - width, - height - }; -} + return { + width, + height, + }; +}; -export const genTagSelectStyle: GenerateStyle = (token: TagSelectToken): CSSObject => { - const { - componentCls, - } = token; +export const genTagSelectStyle: GenerateStyle = ( + token: TagSelectToken +): CSSObject => { + const { componentCls } = token; - return { - [`${componentCls}-title`]: { - fontSize: token.fontSize, - color: token.colorText, - margin: `${token.marginXXS}px 0` - }, - [`${componentCls}-wrapper`]: { - position: 'relative', - display: 'inline-block', - fontSize: token.fontSize, - color: token.colorTextLabel, - background: token.colorWhite, - border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, - borderRadius: token.borderRadius, - marginRight: token.marginXS, - padding: `${token.paddingXXS}px ${token.paddingContentHorizontal}px`, - cursor: 'pointer', - [`${componentCls}-input`]: { - width: 0, - height: 0, - opacity: 0, - pointerEvents: 'none' - }, - '&:last-child': { - margin: 0 - }, - [`&:has(${componentCls}-cover)`]: { - padding: 0, - ...genImgCoverStyle('76px', '40px') - } - }, - [`${componentCls}-cover`]: { - display: 'inline-block', - width: '100%', - height: '100%', - img: { - height: 'calc(100% - 2px)', - width: 'calc(100% - 2px)', - borderRadius: token.borderRadius, - marginLeft: '1px', - marginTop: '1px' - } - }, - [`${componentCls}-large${componentCls}-img`]: { - ...genImgCoverStyle('228px', '120px'), - marginRight: '16px' - }, - [`${componentCls}-small${componentCls}-img`]: genImgCoverStyle('76px', '32px'), - [`${componentCls}-large`]: genSizeStyle(token.paddingContentVerticalSM, token.fontSize), - [`${componentCls}-small`]: genSizeStyle(0, token.fontSize), - [`${componentCls}-wrapper:not(${componentCls}-disabled):hover`]: { - color: token.colorPrimaryTextHover + return { + [`${componentCls}-title`]: { + fontSize: token.fontSize, + color: token.colorText, + margin: `${token.marginXXS}px 0`, + }, + [`${componentCls}-wrapper`]: { + position: 'relative', + display: 'inline-block', + fontSize: token.fontSize, + color: token.colorTextLabel, + background: token.colorWhite, + border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, + borderRadius: token.borderRadius, + marginRight: token.marginXS, + padding: `${token.paddingXXS}px ${token.paddingContentHorizontal}px`, + cursor: 'pointer', + [`${componentCls}-input`]: { + width: 0, + height: 0, + opacity: 0, + pointerEvents: 'none', + }, + '&:last-child': { + margin: 0, + }, + [`&:has(${componentCls}-cover)`]: { + padding: 0, + ...genImgCoverStyle('76px', '40px'), + }, + }, + [`${componentCls}-cover`]: { + display: 'inline-block', + width: '100%', + height: '100%', + img: { + height: 'calc(100% - 2px)', + width: 'calc(100% - 2px)', + borderRadius: token.borderRadius, + marginLeft: '1px', + marginTop: '1px', + }, + }, + [`${componentCls}-large${componentCls}-img`]: { + ...genImgCoverStyle('228px', '120px'), + marginRight: '16px', + }, + [`${componentCls}-small${componentCls}-img`]: genImgCoverStyle('76px', '32px'), + [`${componentCls}-large`]: genSizeStyle(token.paddingContentVerticalSM, token.fontSize), + [`${componentCls}-small`]: genSizeStyle(0, token.fontSize), + [`${componentCls}-wrapper:not(${componentCls}-disabled):hover`]: { + color: token.colorPrimaryTextHover, + }, + [`${componentCls}-checked`]: genColoredStyle( + token.blue, + token.colorPrimaryBg, + token.colorPrimaryText + ), + [`${componentCls}-wrapper${componentCls}-checked:not(${componentCls}-disabled):focus-within`]: { + boxShadow: `0 1px 3px 0px #000`, + borderColor: `${token.colorPrimary}`, + }, + [`${componentCls}-checked:not(${componentCls}-disabled)`]: { + '&:hover': { + ...genColoredStyle(token.colorInfoBorder, '#EBF1FF', token.colorInfoTextHover), + [`${componentCls}-inner`]: { + borderTopColor: `${token.colorPrimaryTextHover} !important`, }, - [`${componentCls}-checked`]: genColoredStyle(token.blue, token.colorPrimaryBg, token.colorPrimaryText), - [`${componentCls}-wrapper${componentCls}-checked:not(${componentCls}-disabled):focus-within`]: { - boxShadow: `0 1px 3px 0px #000`, - borderColor: `${token.colorPrimary}` - }, - [`${componentCls}-checked:not(${componentCls}-disabled)`]: { - '&:hover': { - ...genColoredStyle(token.colorInfoBorder, '#EBF1FF', token.colorInfoTextHover), - [`${componentCls}-inner`]: { - borderTopColor: `${token.colorPrimaryTextHover} !important` - } - } - }, - [`${componentCls}-disabled:not(${componentCls}-checked)`]: { - ...genColoredStyle(token.colorBorder, '#F6F8FE', '#CDD5E3'), - cursor: 'not-allowed' - }, - [`${componentCls}-disabled${componentCls}-checked`]: { - cursor: 'not-allowed', - ...genColoredStyle(token.colorBorder, '#E2E8F3', token.colorTextTertiary) - }, - [`${componentCls}-checked${componentCls}-disabled.multiple`]: { - [`${componentCls}-inner`]: genMultipleStyle('#CDD5E3', token) - }, - [`${componentCls}-checked:not(${componentCls}-disabled).multiple`]: { - [`${componentCls}-inner`]: genMultipleStyle(token.colorPrimary, token) - } - } -} + }, + }, + [`${componentCls}-disabled:not(${componentCls}-checked)`]: { + ...genColoredStyle(token.colorBorder, '#F6F8FE', '#CDD5E3'), + cursor: 'not-allowed', + }, + [`${componentCls}-disabled${componentCls}-checked`]: { + cursor: 'not-allowed', + ...genColoredStyle(token.colorBorder, '#E2E8F3', token.colorTextTertiary), + }, + [`${componentCls}-checked${componentCls}-disabled.multiple`]: { + [`${componentCls}-inner`]: genMultipleStyle('#CDD5E3', token), + }, + [`${componentCls}-checked:not(${componentCls}-disabled).multiple`]: { + [`${componentCls}-inner`]: genMultipleStyle(token.colorPrimary, token), + }, + }; +}; export default (prefixCls: string) => { - const useStyle = genComponentStyleHook('TagSelect', token => { - return [genTagSelectStyle(token)]; - }); + const useStyle = genComponentStyleHook('TagSelect', token => { + return [genTagSelectStyle(token as TagSelectToken)]; + }); - return useStyle(prefixCls); -} \ No newline at end of file + return useStyle(prefixCls); +};