diff --git a/.dumi/hooks/useThemeAnimation.ts b/.dumi/hooks/useThemeAnimation.ts index 34b72e7809..9e0f421633 100644 --- a/.dumi/hooks/useThemeAnimation.ts +++ b/.dumi/hooks/useThemeAnimation.ts @@ -68,6 +68,7 @@ const useThemeAnimation = () => { if (!(event && typeof document.startViewTransition === 'function')) { return; } + const time = Date.now(); const x = event.clientX; const y = event.clientY; const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); @@ -98,6 +99,7 @@ const useThemeAnimation = () => { root.classList.add(isDark ? 'light' : 'dark'); }) .ready.then(() => { + console.log(`Theme transition finished in ${Date.now() - time}ms`); const clipPath = [ `circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`, diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index e528a1ad39..12e479e90f 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.dumi/pages/index/components/Theme/index.tsx @@ -403,7 +403,6 @@ export default function Theme() { ...themeToken, colorPrimary: colorPrimaryValue, }, - hashed: true, algorithm: algorithmFn, components: { Layout: isLight diff --git a/.dumi/theme/builtins/DemoWrapper/index.tsx b/.dumi/theme/builtins/DemoWrapper/index.tsx index 6cceeb3c51..e68222b764 100644 --- a/.dumi/theme/builtins/DemoWrapper/index.tsx +++ b/.dumi/theme/builtins/DemoWrapper/index.tsx @@ -1,15 +1,36 @@ import React, { useContext } from 'react'; import { DumiDemoGrid, FormattedMessage } from 'dumi'; -import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons'; +import { + BugFilled, + BugOutlined, + CodeFilled, + CodeOutlined, + ExperimentFilled, + ExperimentOutlined, +} from '@ant-design/icons'; import classNames from 'classnames'; -import { Tooltip } from 'antd'; +import { ConfigProvider, Tooltip } from 'antd'; import DemoContext from '../../slots/DemoContext'; import useLayoutState from '../../../hooks/useLayoutState'; +import useLocale from '../../../hooks/useLocale'; + +const locales = { + cn: { + enableCssVar: '启用 CSS 变量', + disableCssVar: '禁用 CSS 变量', + }, + en: { + enableCssVar: 'Enable CSS Var', + disableCssVar: 'Disable CSS Var', + }, +}; const DemoWrapper: typeof DumiDemoGrid = ({ items }) => { const { showDebug, setShowDebug } = useContext(DemoContext); + const [locale] = useLocale(locales); const [expandAll, setExpandAll] = useLayoutState(false); + const [enableCssVar, setEnableCssVar] = useLayoutState(true); const expandTriggerClass = classNames('code-box-expand-trigger', { 'code-box-expand-trigger-active': expandAll, @@ -23,29 +44,36 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => { setExpandAll(!expandAll); }; + const handleCssVarToggle = () => { + setEnableCssVar((v) => !v); + }; + const demos = React.useMemo( () => - items.reduce((acc, item) => { - const { previewerProps } = item; - const { debug } = previewerProps; + items.reduce( + (acc, item) => { + const { previewerProps } = item; + const { debug } = previewerProps; - if (debug && !showDebug) return acc; + if (debug && !showDebug) return acc; - return acc.concat({ - ...item, - previewerProps: { - ...previewerProps, - expand: expandAll, - // always override debug property, because dumi will hide debug demo in production - debug: false, - /** - * antd extra marker for the original debug - * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762 - */ - originDebug: debug, - }, - }); - }, [] as typeof items), + return acc.concat({ + ...item, + previewerProps: { + ...previewerProps, + expand: expandAll, + // always override debug property, because dumi will hide debug demo in production + debug: false, + /** + * antd extra marker for the original debug + * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762 + */ + originDebug: debug, + }, + }); + }, + [] as typeof items, + ), [expandAll, showDebug], ); @@ -74,8 +102,17 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => { )} + + {enableCssVar ? ( + + ) : ( + + )} + - + + + ); }; diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 84607c9aaa..b9c0ec0896 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -5,7 +5,7 @@ import stackblitzSdk from '@stackblitz/sdk'; import { Alert, Badge, Space, Tooltip } from 'antd'; import { createStyles, css } from 'antd-style'; import classNames from 'classnames'; -import { FormattedMessage, useSiteData, LiveContext } from 'dumi'; +import { FormattedMessage, LiveContext, useSiteData } from 'dumi'; import LZString from 'lz-string'; import type { AntdPreviewerProps } from './Previewer'; diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 9a93813a2c..ebb7db7b79 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -4,7 +4,7 @@ import { createCache, extractStyle, legacyNotSelectorLinter, - logicalPropertiesLinter, + NaNLinter, parentSelectorLinter, StyleProvider, } from '@ant-design/cssinjs'; @@ -45,7 +45,7 @@ const getAlgorithm = (themes: ThemeName[] = []) => } return null; }) - .filter((item) => item) as typeof antdTheme.darkAlgorithm[]; + .filter((item) => item) as (typeof antdTheme.darkAlgorithm)[]; const GlobalLayout: React.FC = () => { const outlet = useOutlet(); @@ -168,7 +168,7 @@ const GlobalLayout: React.FC = () => { { token: { motion: !theme.includes('motion-off'), }, + cssVar: true, + hashed: false, }} > {content} diff --git a/.dumi/theme/plugin.ts b/.dumi/theme/plugin.ts index 90a1490d0a..b6744cc65d 100644 --- a/.dumi/theme/plugin.ts +++ b/.dumi/theme/plugin.ts @@ -166,7 +166,7 @@ const RoutesPlugin = (api: IApi) => { }); // Insert antd style to head - const matchRegex = /