docs: add demo token inspection

.dumi/theme/builtins/DemoWrapper/index.tsx

@@ -1,7 +1,14 @@
 import React, { useContext, useState } from 'react';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
 import { Tooltip } from 'antd';
-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 DemoContext from '../../slots/DemoContext';
 
@@ -9,6 +16,7 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
   const { showDebug, setShowDebug } = useContext(DemoContext);
 
   const [expandAll, setExpandAll] = useState(false);
+  const [showToken, setShowToken] = useState(process.env.NODE_ENV === 'development');
 
   const expandTriggerClass = classNames('code-box-expand-trigger', {
     'code-box-expand-trigger-active': expandAll,
@@ -22,6 +30,10 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
     setExpandAll(!expandAll);
   };
 
+  const handleTokenToggle = () => {
+    setShowToken(!showToken);
+  };
+
   const demos = React.useMemo(
     () =>
       items.reduce((acc, item) => {
@@ -42,10 +54,11 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
              * @see https://github.com/ant-design/ant-design/pull/40130#issuecomment-1380208762
              */
             originDebug: debug,
+            showToken,
           },
         });
       }, [] as typeof items),
-    [expandAll, showDebug],
+    [expandAll, showDebug, showToken],
   );
 
   return (
@@ -73,9 +86,22 @@ const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
             <BugOutlined className={expandTriggerClass} onClick={handleVisibleToggle} />
           )}
         </Tooltip>
+        <Tooltip
+          title={
+            <FormattedMessage
+              id={`app.component.examples.${showToken ? 'hideToken' : 'showToken'}`}
+            />
+          }
+        >
+          {showToken ? (
+            <ExperimentFilled className={expandTriggerClass} onClick={handleTokenToggle} />
+          ) : (
+            <ExperimentOutlined className={expandTriggerClass} onClick={handleTokenToggle} />
+          )}
+        </Tooltip>
       </span>
       {/* FIXME: find a new way instead of `key` to trigger re-render */}
-      <DumiDemoGrid items={demos} key={`${expandAll}${showDebug}`} />
+      <DumiDemoGrid items={demos} key={`${expandAll}${showDebug}${showToken}`} />
     </div>
   );
 };

.dumi/theme/builtins/Previewer/CodePreviewer.tsx

@@ -6,7 +6,7 @@ import {
 } from '@ant-design/icons';
 import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
-import { Alert, Badge, Space, Tooltip } from 'antd';
+import { Alert, Badge, ConfigProvider, Divider, Space, Tag, Tooltip } from 'antd';
 import classNames from 'classnames';
 import { FormattedMessage, useSiteData } from 'dumi';
 import toReactElement from 'jsonml-to-react-element';
@@ -28,6 +28,7 @@ import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
 import { ping } from '../../utils';
 import type { AntdPreviewerProps } from '.';
+import useSiteToken from '../../../hooks/useSiteToken';
 
 const { ErrorBoundary } = Alert;
 
@@ -105,10 +106,13 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
     filename,
     version,
     clientOnly,
+    tokens,
+    showToken,
   } = props;
 
   const { pkg } = useSiteData();
   const location = useLocation();
+  const { token } = useSiteToken();
 
   const entryCode = asset.dependencies['index.tsx'].value;
   const showRiddleButton = useShowRiddleButton();
@@ -129,6 +133,8 @@ const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
 
   const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
 
+  const hasToken = !!tokens?.split(',').length;
+
   const highlightedCodes = {
     jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'),
     tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'),
@@ -384,11 +390,42 @@ createRoot(document.getElementById('container')).render(<Demo />);
     backgroundColor: background === 'grey' ? backgroundGrey : undefined,
   };
 
+  const [activeToken, setActiveToken] = useState<string>();
+  const onMouseEnterToken = (target: string) => {
+    setActiveToken(target);
+  };
+
+  const onMouseLeaveToken = () => {
+    setActiveToken(undefined);
+  };
+
   const codeBox: React.ReactNode = (
     <section className={codeBoxClass} id={asset.id}>
       <section className="code-box-demo" style={codeBoxDemoStyle}>
         <ErrorBoundary>
-          <React.StrictMode>{liveDemo.current}</React.StrictMode>
+          <React.StrictMode>
+            <ConfigProvider theme={activeToken && { token: { [activeToken]: token.colorWarning } }}>
+              {liveDemo.current}
+            </ConfigProvider>
+            {showToken && hasToken && (
+              <>
+                <Divider />
+                <div style={{ color: token.colorTextDescription, marginBottom: 12 }}>
+                  Hover token to see what changed.
+                </div>
+                {tokens?.split(',').map((item) => (
+                  <Tag
+                    style={{ cursor: 'default' }}
+                    key={item}
+                    onMouseEnter={() => onMouseEnterToken(item.trim())}
+                    onMouseLeave={onMouseLeaveToken}
+                  >
+                    {item.trim()}
+                  </Tag>
+                ))}
+              </>
+            )}
+          </React.StrictMode>
         </ErrorBoundary>
         {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
       </section>

.dumi/theme/builtins/Previewer/index.tsx

@@ -7,6 +7,8 @@ import DesignPreviewer from './DesignPreviewer';
 
 export interface AntdPreviewerProps extends IPreviewerProps {
   originDebug?: IPreviewerProps['debug'];
+  tokens?: string;
+  showToken?: boolean;
 }
 
 const Previewer: FC<AntdPreviewerProps> = ({ ...props }) => {

.dumi/theme/locales/en-US.json

@@ -20,6 +20,8 @@
   "app.component.examples.collapse": "Collapse all code",
   "app.component.examples.visible": "Expand debug examples",
   "app.component.examples.hide": "Collapse debug examples",
+  "app.component.examples.showToken": "Show demo tokens",
+  "app.component.examples.hideToken": "hide demo tokens",
   "app.component.examples.openDemoNotReact18": "Open Demo with React < 18",
   "app.component.examples.openDemoWithReact18": "Open Demo with React 18",
   "app.demo.debug": "Debug only, won't display at online",

.dumi/theme/locales/zh-CN.json

@@ -20,6 +20,8 @@
   "app.component.examples.collapse": "收起全部代码",
   "app.component.examples.visible": "显示调试专用演示",
   "app.component.examples.hide": "隐藏调试专用演示",
+  "app.component.examples.showToken": "显示演示相关 token",
+  "app.component.examples.hideToken": "隐藏演示相关 token",
   "app.component.examples.openDemoNotReact18": "使用 React 18 以下版本打开 Demo",
   "app.component.examples.openDemoWithReact18": "使用 React 18 打开 Demo",
   "app.demo.debug": "此演示仅供调试，线上不会展示",

components/button/demo/basic.tsx

@@ -1,3 +1,6 @@
+/**
+tokens: colorText, colorPrimary
+ */
 import React from 'react';
 import { Button, Space } from 'antd';