diff --git a/.dumi/hooks/useSiteToken.ts b/.dumi/hooks/useSiteToken.ts deleted file mode 100644 index 425114ea96..0000000000 --- a/.dumi/hooks/useSiteToken.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { theme } from 'antd'; -import { useContext } from 'react'; -import { ConfigContext } from 'antd/es/config-provider'; - -const { useToken } = theme; - -const useSiteToken = () => { - const result = useToken(); - const { getPrefixCls, iconPrefixCls } = useContext(ConfigContext); - const rootPrefixCls = getPrefixCls(); - const { token } = result; - const siteMarkdownCodeBg = token.colorFillTertiary; - - return { - ...result, - token: { - ...token, - headerHeight: 64, - menuItemBorder: 2, - mobileMaxWidth: 767.99, - siteMarkdownCodeBg, - antCls: `.${rootPrefixCls}`, - iconCls: `.${iconPrefixCls}`, - /** 56 */ - marginFarXS: (token.marginXXL / 6) * 7, - /** 80 */ - marginFarSM: (token.marginXXL / 3) * 5, - /** 96 */ - marginFar: token.marginXXL * 2, - codeFamily: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`, - }, - }; -}; - -export default useSiteToken; diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx index 781a09da45..e6734f1abb 100644 --- a/.dumi/pages/index/components/Banner.tsx +++ b/.dumi/pages/index/components/Banner.tsx @@ -1,9 +1,9 @@ -import { css } from '@emotion/react'; +import { createStyles, css, useTheme } from 'antd-style'; import { Button, Space, Typography } from 'antd'; import { Link, useLocation } from 'dumi'; import * as React from 'react'; +import classNames from 'classnames'; import useLocale from '../../../hooks/useLocale'; -import useSiteToken from '../../../hooks/useSiteToken'; import SiteContext from '../../../theme/slots/SiteContext'; import * as utils from '../../../theme/utils'; import { GroupMask } from './Group'; @@ -23,10 +23,8 @@ const locales = { }; const useStyle = () => { - const { token } = useSiteToken(); const { isMobile } = React.useContext(SiteContext); - - return { + return createStyles(({ token }) => ({ titleBase: css` h1& { font-family: AliPuHui, ${token.fontFamily}; @@ -48,7 +46,7 @@ const useStyle = () => { font-size: 68px; } `, - }; + }))(); }; export interface BannerProps { @@ -58,8 +56,8 @@ export interface BannerProps { export default function Banner({ children }: BannerProps) { const [locale] = useLocale(locales); const { pathname, search } = useLocation(); - const { token } = useSiteToken(); - const styles = useStyle(); + const token = useTheme(); + const { styles } = useStyle(); const { isMobile } = React.useContext(SiteContext); const isZhCN = utils.isZhCN(pathname); @@ -146,7 +144,7 @@ export default function Banner({ children }: BannerProps) { alt="bg" /> - + Ant Design 5.0 { - const { token } = useSiteToken(); - const { carousel } = useCarouselStyle(); +const useStyle = createStyles(({ token }) => { + const { carousel } = getCarouselStyle(); return { itemBase: css` @@ -47,17 +45,17 @@ const useStyle = () => { `, carousel, }; -}; +}); interface RecommendItemProps { extra: Extra; index: number; icons: Icon[]; - itemCss: SerializedStyles; + className?: string; } -const RecommendItem = ({ extra, index, icons, itemCss }: RecommendItemProps) => { - const style = useStyle(); - const { token } = useSiteToken(); +const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) => { + const token = useTheme(); + const { styles } = useStyle(); if (!extra) { return ; @@ -69,7 +67,7 @@ const RecommendItem = ({ extra, index, icons, itemCss }: RecommendItemProps) => key={extra?.title} href={extra.href} target="_blank" - css={[style.itemBase, itemCss]} + className={classNames(styles.itemBase, className)} rel="noreferrer" > {extra?.title} @@ -90,33 +88,33 @@ export interface BannerRecommendsProps { } export default function BannerRecommends({ extras = [], icons = [] }: BannerRecommendsProps) { - const styles = useStyle(); + const { styles } = useStyle(); const { isMobile } = React.useContext(SiteContext); const first3 = extras.length === 0 ? Array(3).fill(null) : extras.slice(0, 3); return (
{isMobile ? ( - + {first3.map((extra, index) => (
))} ) : ( -
+
{first3.map((extra, index) => ( ))} diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index 9dbea90ab6..5026bb15ce 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -14,11 +14,11 @@ import { } from 'antd'; import dayjs from 'dayjs'; import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons'; -import { css } from '@emotion/react'; -import useSiteToken from '../../../hooks/useSiteToken'; +import { createStyles, css, useTheme } from 'antd-style'; +import classNames from 'classnames'; import useLocale from '../../../hooks/useLocale'; import SiteContext from '../../../theme/slots/SiteContext'; -import { useCarouselStyle } from './util'; +import { getCarouselStyle } from './util'; const SAMPLE_CONTENT_EN = 'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.'; @@ -55,9 +55,8 @@ const locales = { }, }; -const useStyle = () => { - const { token } = useSiteToken(); - const { carousel } = useCarouselStyle(); +const useStyle = createStyles(({ token }) => { + const { carousel } = getCarouselStyle(); return { card: css` @@ -89,7 +88,7 @@ const useStyle = () => { `, carousel, }; -}; +}); interface ComponentItemProps { title: React.ReactNode; @@ -99,8 +98,8 @@ interface ComponentItemProps { } export default function ComponentsList() { - const { token } = useSiteToken(); - const styles = useStyle(); + const token = useTheme(); + const { styles } = useStyle(); const [locale] = useLocale(locales); const { isMobile } = useContext(SiteContext); @@ -239,10 +238,10 @@ export default function ComponentsList() { const tagText = type === 'new' ? locale.new : locale.update; return ( -
+
{/* Decorator */}
- + {COMPONENTS.map(({ title, node, type }, index) => ( ))} diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx index 9e044bd531..6e19c0ddfd 100644 --- a/.dumi/pages/index/components/DesignFramework.tsx +++ b/.dumi/pages/index/components/DesignFramework.tsx @@ -1,9 +1,8 @@ import { Col, Row, Typography } from 'antd'; import React, { useContext } from 'react'; -import { css } from '@emotion/react'; +import { createStyles, useTheme } from 'antd-style'; import { Link, useLocation } from 'dumi'; import useLocale from '../../../hooks/useLocale'; -import useSiteToken from '../../../hooks/useSiteToken'; import * as utils from '../../../theme/utils'; import SiteContext from '../../../theme/slots/SiteContext'; @@ -61,11 +60,8 @@ const locales = { }, }; -const useStyle = () => { - const { token } = useSiteToken(); - - return { - card: css` +const useStyle = createStyles(({ token, css }) => ({ + card: css` padding: ${token.paddingSM}px; border-radius: ${token.borderRadius * 2}px; background: #fff; @@ -79,7 +75,7 @@ const useStyle = () => { } `, - cardMini: css` + cardMini: css` display: block; border-radius: ${token.borderRadius * 2}px; padding: ${token.paddingMD}px ${token.paddingLG}px; @@ -90,13 +86,12 @@ const useStyle = () => { height: 48px; } `, - }; -}; +})); export default function DesignFramework() { const [locale] = useLocale(locales); - const { token } = useSiteToken(); - const style = useStyle(); + const token = useTheme(); + const { styles } = useStyle(); const { pathname, search } = useLocation(); const isZhCN = utils.isZhCN(pathname); const { isMobile } = useContext(SiteContext); @@ -129,7 +124,7 @@ export default function DesignFramework() { return ( -
+
{title} - + {title} { - const { token } = useSiteToken(); - - return { - card: css` +const useStyle = createStyles(({ token }) => ({ + card: css` height: 300px; background-size: 100% 100%; background-position: center; @@ -70,16 +66,15 @@ const useStyle = () => { } } `, - }; -}; +})); export interface RecommendsProps { recommendations?: Recommendation[]; } export default function Recommends({ recommendations = [] }: RecommendsProps) { - const { token } = useSiteToken(); - const style = useStyle(); + const token = useTheme(); + const { styles } = useStyle(); return ( @@ -89,7 +84,7 @@ export default function Recommends({ recommendations = [] }: RecommendsProps) { return ( {data ? ( -
+
{data?.title} {data.description} diff --git a/.dumi/pages/index/components/Theme/BackgroundImage.tsx b/.dumi/pages/index/components/Theme/BackgroundImage.tsx index 8881ec72e9..41349532a1 100644 --- a/.dumi/pages/index/components/Theme/BackgroundImage.tsx +++ b/.dumi/pages/index/components/Theme/BackgroundImage.tsx @@ -1,6 +1,5 @@ -import { css } from '@emotion/react'; +import { createStyles, css } from 'antd-style'; import React, { useMemo } from 'react'; -import useSiteToken from '../../../../hooks/useSiteToken'; import { COLOR_IMAGES, getClosetColor } from './colorUtil'; export interface BackgroundImageProps { @@ -8,10 +7,8 @@ export interface BackgroundImageProps { isLight?: boolean; } -const useStyle = () => { - const { token } = useSiteToken(); - return { - image: css` +const useStyle = createStyles(({ token }) => ({ + image: css` transition: all ${token.motionDurationSlow}; position: absolute; left: 0; @@ -21,19 +18,18 @@ const useStyle = () => { object-fit: cover; object-position: right top; `, - }; -}; +})); const BackgroundImage: React.FC = ({ colorPrimary, isLight }) => { const activeColor = useMemo(() => getClosetColor(colorPrimary), [colorPrimary]); - const { image } = useStyle(); + const { styles } = useStyle(); return ( <> {COLOR_IMAGES.filter(({ url }) => url).map(({ color, url }) => ( { - const { token } = useSiteToken(); - - return { - color: css` +const useStyle = createStyles(({ token, css }) => ({ + color: css` width: ${token.controlHeightLG / 2}px; height: ${token.controlHeightLG / 2}px; border-radius: 100%; @@ -30,12 +27,11 @@ const useStyle = () => { } `, - colorActive: css` + colorActive: css` box-shadow: 0 0 0 1px ${token.colorBgContainer}, 0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary}; `, - }; -}; +})); const DebouncedColorPicker: FC = ({ value: color, onChange, children }) => { const [value, setValue] = useState(color); @@ -73,7 +69,7 @@ export interface RadiusPickerProps { } export default function ThemeColorPicker({ value, onChange }: RadiusPickerProps) { - const style = useStyle(); + const { styles } = useStyle(); const matchColors = React.useMemo(() => { const valueStr = generateColor(value).toRgbString(); @@ -117,7 +113,7 @@ export default function ThemeColorPicker({ value, onChange }: RadiusPickerProps) // eslint-disable-next-line jsx-a11y/label-has-associated-control