diff --git a/.dumi/theme/builtins/IconSearch/Category.tsx b/.dumi/theme/builtins/IconSearch/Category.tsx index 51162c45c2..92113e1a58 100644 --- a/.dumi/theme/builtins/IconSearch/Category.tsx +++ b/.dumi/theme/builtins/IconSearch/Category.tsx @@ -1,9 +1,52 @@ import * as React from 'react'; -import { useIntl } from 'dumi'; import { App } from 'antd'; +import { createStyles } from 'antd-style'; +import { useIntl } from 'dumi'; + import CopyableIcon from './CopyableIcon'; -import type { ThemeType } from './index'; import type { CategoriesKeys } from './fields'; +import type { ThemeType } from './IconSearch'; + +const useStyle = createStyles(({ token, css }) => ({ + anticonsList: css` + margin: ${token.marginSM}px 0; + overflow: hidden; + direction: ltr; + list-style: none; + li { + position: relative; + float: left; + width: 16.66%; + height: 100px; + margin: ${token.marginXXS}px 0; + padding: ${token.paddingSM}px 0 0; + overflow: hidden; + color: #555; + text-align: center; + list-style: none; + background-color: inherit; + border-radius: ${token.borderRadiusSM}px; + cursor: pointer; + transition: all ${token.motionDurationSlow} ease-in-out; + .rtl & { + margin: ${token.marginXXS}px 0; + padding: ${token.paddingSM}px 0 0; + } + ${token.iconCls} { + margin: ${token.marginSM}px 0 ${token.marginXS}px; + font-size: 36px; + transition: transform ${token.motionDurationSlow} ease-in-out; + will-change: transform; + } + } + `, + copiedCode: css` + padding: 2px 4px; + font-size: ${token.fontSizeSM}px; + background-color: ${token.colorBgLayout}; + border-radius: ${token.borderRadiusXS}px; + `, +})); interface CategoryProps { title: CategoriesKeys; @@ -15,13 +58,14 @@ interface CategoryProps { const Category: React.FC = (props) => { const { message } = App.useApp(); const { icons, title, newIcons, theme } = props; + const { styles } = useStyle(); const intl = useIntl(); const [justCopied, setJustCopied] = React.useState(null); const copyId = React.useRef | null>(null); const onCopied = React.useCallback((type: string, text: string) => { message.success( - {text} copied 🎉 + {text} copied 🎉 , ); setJustCopied(type); @@ -40,7 +84,7 @@ const Category: React.FC = (props) => { return (

{intl.formatMessage({ id: `app.docs.components.icon.category.${title}` })}

-
    +
      {icons.map((name) => ( { + const { antCls, iconCls } = token; + return { + item: css` + &:hover { + color: #fff; + background-color: ${token.colorPrimary}; + ${iconCls} { + transform: scale(1.3); + } + ${antCls}-badge { + color: #fff; + } + } + &.TwoTone:hover { + background-color: #8ecafe; + } + &.copied:hover { + color: rgba(255, 255, 255, 0.2); + } + &::after { + content: 'Copied!'; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + color: #fff; + line-height: 110px; + text-align: center; + background-color: #1677ff; + opacity: 0; + transition: all ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28); + } + &.copied::after { + opacity: 1; + } + `, + anticonCls: css` + display: block; + font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + white-space: nowrap; + text-align: center; + transform: scale(0.8); + ${antCls}-badge { + transition: color ${token.motionDurationSlow} ease-in-out; + } + `, + }; +}); export interface CopyableIconProps { name: string; isNew: boolean; theme: ThemeType; justCopied: string | null; - onCopied: (type: string, text: string) => any; + onCopied: (type: string, text: string) => void; } -const CopyableIcon: React.FC = ({ - name, - isNew, - justCopied, - onCopied, - theme, -}) => { - const className = classNames({ - copied: justCopied === name, - [theme]: !!theme, - }); +const CopyableIcon: React.FC = (props) => { + const { name, isNew, justCopied, theme, onCopied } = props; + const { styles } = useStyle(); const onCopy = (text: string, result: boolean) => { if (result) { onCopied(name, text); @@ -37,9 +80,9 @@ const CopyableIcon: React.FC = ({ }; return ( `} onCopy={onCopy}> -
    • +
    • {React.createElement(allIcons[name])} - + {name}
      • diff --git a/.dumi/theme/common/BrowserFrame.tsx b/.dumi/theme/common/BrowserFrame.tsx index 9399eda47d..ab7313fa6c 100644 --- a/.dumi/theme/common/BrowserFrame.tsx +++ b/.dumi/theme/common/BrowserFrame.tsx @@ -1,7 +1,47 @@ import React from 'react'; +import { createStyles } from 'antd-style'; -const BrowserFrame: React.FC = ({ children }) => ( -
      {children}
      -); +const useStyle = createStyles(({ token, css }) => ({ + browserMockup: css` + position: relative; + border-top: 2em solid rgba(230, 230, 230, 0.7); + border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0; + box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28); + &::before { + position: absolute; + top: -1.25em; + left: 1em; + display: block; + width: 0.5em; + height: 0.5em; + background-color: #f44; + border-radius: 50%; + box-shadow: + 0 0 0 2px #f44, + 1.5em 0 0 2px #9b3, + 3em 0 0 2px #fb5; + content: ''; + } + &::after { + content: ''; + display: block; + position: absolute; + top: -1.6em; + left: 5.5em; + width: calc(100% - 6em); + height: 1.2em; + background-color: #fff; + border-radius: ${token.borderRadiusSM}px; + } + & > * { + display: block; + } + `, +})); + +const BrowserFrame: React.FC = ({ children }) => { + const { styles } = useStyle(); + return
      {children}
      ; +}; export default BrowserFrame; diff --git a/.dumi/theme/common/Color/ColorStyle.tsx b/.dumi/theme/common/Color/ColorStyle.tsx index 9d5b8b0945..d37cfdfdab 100644 --- a/.dumi/theme/common/Color/ColorStyle.tsx +++ b/.dumi/theme/common/Color/ColorStyle.tsx @@ -130,17 +130,17 @@ ${makeGrayPalette(index + 1)} .main-color { ${makePalette('blue')} ${makePalette('purple')} - ${makePalette('cyan')} - ${makePalette('green')} - ${makePalette('magenta')} - ${makePalette('red')} - ${makePalette('volcano')} - ${makePalette('orange')} - ${makePalette('gold')} - ${makePalette('yellow')} - ${makePalette('lime')} - ${makePalette('geekblue')} - ${makeGrayPalette()} + ${makePalette('cyan')} + ${makePalette('green')} + ${makePalette('magenta')} + ${makePalette('red')} + ${makePalette('volcano')} + ${makePalette('orange')} + ${makePalette('gold')} + ${makePalette('yellow')} + ${makePalette('lime')} + ${makePalette('geekblue')} + ${makeGrayPalette()} text-align: left; diff --git a/.dumi/theme/common/GlobalStyles.tsx b/.dumi/theme/common/GlobalStyles.tsx index f2da6d90a6..97b293321d 100644 --- a/.dumi/theme/common/GlobalStyles.tsx +++ b/.dumi/theme/common/GlobalStyles.tsx @@ -2,13 +2,10 @@ import React from 'react'; import ColorStyle from './Color/ColorStyle'; import { - BrowserMockup, Common, Demo, HeadingAnchor, Highlight, - Icon, - IconPickSearcher, Markdown, NProgress, PreviewImage, @@ -25,9 +22,6 @@ const GlobalStyles: React.FC = () => ( - - - diff --git a/.dumi/theme/common/styles/BrowserMockup.tsx b/.dumi/theme/common/styles/BrowserMockup.tsx deleted file mode 100644 index 55c16a994b..0000000000 --- a/.dumi/theme/common/styles/BrowserMockup.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import React from 'react'; -import { css, Global } from '@emotion/react'; -import { useTheme } from 'antd-style'; - -export default () => { - const token = useTheme(); - return ( - * { - display: block; - } - `} - /> - ); -}; diff --git a/.dumi/theme/common/styles/Icon.tsx b/.dumi/theme/common/styles/Icon.tsx deleted file mode 100644 index 4aa4b5e342..0000000000 --- a/.dumi/theme/common/styles/Icon.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React from 'react'; -import { css, Global } from '@emotion/react'; -import { useTheme } from 'antd-style'; - -export default () => { - const token = useTheme(); - - const { antCls, iconCls } = token; - - return ( - - ); -}; diff --git a/.dumi/theme/common/styles/IconPickSearcher.tsx b/.dumi/theme/common/styles/IconPickSearcher.tsx deleted file mode 100644 index 63f64fa6ea..0000000000 --- a/.dumi/theme/common/styles/IconPickSearcher.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { css, Global } from '@emotion/react'; -import { useTheme } from 'antd-style'; - -export default () => { - const token = useTheme(); - - const { iconCls } = token; - - return ( - img { - max-width: 50px; - max-height: 50px; - } - } - - .icon-pic-search-result { - min-height: 50px; - padding: 0 10px; - - > .result-tip { - padding: 10px 0; - color: ${token.colorTextSecondary}; - } - - > table { - width: 100%; - - .col-icon { - width: 80px; - padding: 10px 0; - - > ${iconCls} { - font-size: ${token.fontSizeHeading2}px; - :hover { - color: ${token.colorLinkHover}; - } - } - } - } - } - `} - /> - ); -}; diff --git a/.dumi/theme/common/styles/NProgress.tsx b/.dumi/theme/common/styles/NProgress.tsx index 096108a8af..04ebc61524 100644 --- a/.dumi/theme/common/styles/NProgress.tsx +++ b/.dumi/theme/common/styles/NProgress.tsx @@ -1,5 +1,5 @@ -import { css, Global } from '@emotion/react'; import React from 'react'; +import { css, Global } from '@emotion/react'; import { useTheme } from 'antd-style'; export default () => { @@ -13,7 +13,9 @@ export default () => { } .peg { - box-shadow: 0 0 10px ${token.colorPrimary}, 0 0 5px ${token.colorPrimary}; + box-shadow: + 0 0 10px ${token.colorPrimary}, + 0 0 5px ${token.colorPrimary}; } .spinner-icon { diff --git a/.dumi/theme/common/styles/index.ts b/.dumi/theme/common/styles/index.ts index 0c51e86d1b..7344580fc1 100644 --- a/.dumi/theme/common/styles/index.ts +++ b/.dumi/theme/common/styles/index.ts @@ -4,9 +4,6 @@ export { default as Common } from './Common'; export { default as Markdown } from './Markdown'; export { default as Highlight } from './Highlight'; export { default as Demo } from './Demo'; -export { default as Icon } from './Icon'; -export { default as IconPickSearcher } from './IconPickSearcher'; -export { default as BrowserMockup } from './BrowserMockup'; export { default as Responsive } from './Responsive'; export { default as NProgress } from './NProgress'; export { default as PreviewImage } from './PreviewImage';