docs: improve try it out style

.changeset/fluffy-dingos-guess.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: use colorPrimaryTextHover for ConnectModal text hover style

.changeset/wicked-buttons-cover.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: ConnectModal get more btn link color design token bug

docs/global.d.ts

@@ -0,0 +1 @@
+declare module '*.less';

docs/guide/ant-design-web3.md

@@ -20,7 +20,7 @@ You can use Ant Design Web3 in any of the following ways:
 
 Here are examples of using Ant Design Web3 through `@ant-design/web3-wagmi`:
 
-<code src="./demos/guide.tsx"></code>
+<code compact src="./demos/guide.tsx"></code>
 
 If you want to further try how to use Ant Design Web3 in your own project, or want to create a project based on Ant Design Web3 from 0, you can continue reading [Quick Start](quick-start.md), wish you a pleasant surfing in Web3! 🌊🌊🌊
 

docs/guide/ant-design-web3.zh-CN.md

@@ -20,7 +20,7 @@ Ant Design Web3 是一个基于 [Ant Design](https://ant.design/index-cn) 的 We
 
 下面是通过 `@ant-design/web3-wagmi` 的方式使用 Ant Design Web3 的例子：
 
-<code src="./demos/guide.tsx"></code>
+<code compact src="./demos/guide.tsx"></code>
 
 如果你想要进一步尝试如何在自己的项目中使用 Ant Design Web3，或者想要从 0 创建一个基于 Ant Design Web3 的项目，你可以继续阅读[快速开始](quick-start.zh-CN.md)，祝你在 Web3 冲浪愉快！🌊🌊🌊
 

docs/guide/demos/guide.module.less

@@ -0,0 +1,31 @@
+.connectorContainer {
+  padding: 48px 0;
+  display: flex;
+  justify-content: center;
+}
+
+.configContainer {
+  background-color: #fcfcfc;
+  border-top: 1px solid #e4e9ec;
+  padding: 0 24px 16px 24px;
+
+  .groupTitle {
+    font-size: 16px;
+    margin-top: 16px;
+    margin-bottom: 12px;
+  }
+}
+
+.themeLabel {
+  width: 33px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 6px 0 0 9px;
+  border-radius: 4px;
+
+  div {
+    width: 24px;
+    height: 18px;
+    border-radius: 4px;
+  }
+}

docs/guide/demos/guide.tsx

@@ -8,12 +8,16 @@ import {
   WagmiWeb3ConfigProvider,
   WalletConnect,
 } from '@ant-design/web3-wagmi';
-import { Checkbox, ConfigProvider, Divider, Radio, Select, Space } from 'antd';
+import { TinyColor } from '@ctrl/tinycolor';
+import { Col, ConfigProvider, Radio, Row, Select, Slider, Space, Switch } from 'antd';
 import { createConfig, http } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { walletConnect } from 'wagmi/connectors';
 
-import { customToken } from './tokens';
+import styles from './guide.module.less';
+import { themeList, type ThemeSetting, type ThemeValue } from './tokens';
+
+const defaultRadius = 8;
 
 const config = createConfig({
   chains: [mainnet],
@@ -28,10 +32,37 @@ const config = createConfig({
   ],
 });
 
+const ThemeLabel: React.FC<{ theme: ThemeSetting }> = ({ theme }) => {
+  return (
+    <Space
+      style={{
+        paddingTop: 6,
+      }}
+    >
+      <div
+        className={styles.themeLabel}
+        style={{
+          backgroundColor: new TinyColor(theme.color).lighten(30).toString(),
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: theme.color,
+          }}
+        />
+      </div>
+      {theme.name}
+    </Space>
+  );
+};
+
 const App: React.FC = () => {
   const [mode, setMode] = React.useState<ConnectModalProps['mode']>('simple');
   const [quickConnect, setQuickConnect] = React.useState<boolean>(false);
-  const [theme, setTheme] = React.useState<'default' | 'custom'>('default');
+  const [theme, setTheme] = React.useState<ThemeValue>('default');
+  const [radius, setRadius] = React.useState<number>(defaultRadius);
+  const currentTheme = themeList.find((t) => t.value === theme);
+
   return (
     <WagmiWeb3ConfigProvider
       eip6963={{
@@ -48,43 +79,92 @@ const App: React.FC = () => {
       ]}
       config={config}
     >
-      <Space direction="vertical">
-        <Radio.Group
-          onChange={(e) => {
-            setMode(e.target.value);
-          }}
-          value={mode}
-        >
-          <Radio value="simple">simple mode</Radio>
-          <Radio value="auto">auto mode</Radio>
-        </Radio.Group>
-        <Checkbox
-          checked={quickConnect}
-          onChange={(e) => {
-            setQuickConnect(e.target.checked);
-          }}
-        >
-          Quick Connect
-        </Checkbox>
-        <Select
-          value={theme}
-          onChange={(v) => setTheme(v)}
-          options={[
-            { value: 'default', label: 'Default Theme' },
-            { value: 'custom', label: 'Custom Theme' },
-          ]}
-        />
-      </Space>
-      <Divider />
-      <ConfigProvider theme={theme === 'custom' ? customToken : undefined}>
-        <Connector
-          modalProps={{
-            mode,
-          }}
-        >
-          <ConnectButton quickConnect={quickConnect} />
-        </Connector>
+      <ConfigProvider
+        theme={{
+          ...currentTheme?.token,
+          token: {
+            ...currentTheme?.token.token,
+            borderRadius: radius,
+          },
+        }}
+      >
+        <div className={styles.connectorContainer}>
+          <Connector
+            modalProps={{
+              mode,
+            }}
+          >
+            <ConnectButton
+              type="primary"
+              style={{
+                width: 'auto',
+              }}
+              size="large"
+              quickConnect={quickConnect}
+            />
+          </Connector>
+        </div>
       </ConfigProvider>
+      <div className={styles.configContainer}>
+        <Row>
+          <Col xs={24} sm={12}>
+            <div className={styles.groupTitle}>Basic</div>
+            <Space direction="vertical">
+              <Radio.Group
+                onChange={(e) => {
+                  setMode(e.target.value);
+                }}
+                value={mode}
+              >
+                <Radio value="simple">simple mode</Radio>
+                <Radio value="auto">auto mode</Radio>
+              </Radio.Group>
+              <Space>
+                <Switch
+                  checked={quickConnect}
+                  onChange={(checked) => {
+                    setQuickConnect(checked);
+                  }}
+                />
+                Quick Connect
+              </Space>
+            </Space>
+          </Col>
+          <Col xs={24} sm={12}>
+            <div className={styles.groupTitle}>Theme</div>
+            <Space direction="vertical">
+              <Select
+                style={{
+                  width: 300,
+                }}
+                size="large"
+                value={theme}
+                onChange={(v) => {
+                  setTheme(v);
+                  const selectedTheme = themeList.find((t) => t.value === v);
+                  setRadius(selectedTheme?.token.token?.borderRadius || defaultRadius);
+                }}
+                options={themeList.map((item) => {
+                  return { value: item.value, label: <ThemeLabel theme={item} /> };
+                })}
+              />
+              <Space>
+                Border Radius:
+                <Slider
+                  value={radius}
+                  style={{
+                    width: 190,
+                  }}
+                  defaultValue={defaultRadius}
+                  min={0}
+                  max={16}
+                  onChange={setRadius}
+                />
+              </Space>
+            </Space>
+          </Col>
+        </Row>
+      </div>
     </WagmiWeb3ConfigProvider>
   );
 };

docs/guide/demos/tokens.ts

@@ -1,7 +1,12 @@
+import { TinyColor } from '@ctrl/tinycolor';
 import type { ThemeConfig } from 'antd';
+import { theme } from 'antd';
+
+export type ThemeValue = 'default' | 'violet' | 'dark' | 'green' | 'pink';
 
 export const customToken: ThemeConfig = {
   token: {
+    borderRadius: 16,
     wireframe: false,
     padding: 24,
     paddingSM: 16,
@@ -12,15 +17,11 @@ export const customToken: ThemeConfig = {
     fontSizeHeading5: 20,
     fontSizeHeading2: 36,
     fontSizeXL: 24,
-    borderRadius: 6,
     colorPrimary: '#8442ff',
     colorInfo: '#8442ff',
   },
   components: {
     Button: {
-      borderRadius: 16,
-      borderRadiusLG: 24,
-      borderRadiusSM: 8,
       controlHeight: 44,
       marginXS: 8,
       paddingContentHorizontal: 24,
@@ -36,7 +37,6 @@ export const customToken: ThemeConfig = {
       paddingContentHorizontalLG: 24,
       fontSizeLG: 20,
       padding: 16,
-      borderRadiusLG: 10,
       paddingContentVertical: 24,
       paddingXS: 8,
       paddingSM: 12,
@@ -55,8 +55,76 @@ export const customToken: ThemeConfig = {
       paddingLG: 24,
       paddingMD: 20,
       paddingXS: 12,
-      borderRadiusLG: 24,
-      borderRadiusSM: 10,
     },
   },
 };
+
+export type ThemeSetting = {
+  color: string;
+  value: ThemeValue;
+  name: string;
+  token: ThemeConfig;
+};
+
+// 部分参考 antd 官网的主题 https://github.com/ant-design/ant-design/blob/master/.dumi/pages/index/components/Theme/index.tsx#L305
+export const themeList: ThemeSetting[] = [
+  {
+    color: '#1677FF',
+    value: 'default',
+    name: 'Default',
+    token: {
+      token: {},
+    },
+  },
+  {
+    color: '#000',
+    value: 'dark',
+    name: 'Dark',
+    token: {
+      token: {
+        borderRadius: 2,
+        colorPrimary: '#000',
+        colorPrimaryTextHover: 'rgba(255, 255, 255, 0.8)',
+        colorLink: 'rgba(255, 255, 255, 0.75)',
+        colorText: 'rgba(255, 255, 255, 0.75)',
+      },
+      components: {
+        Button: {
+          defaultHoverColor: 'rgba(255, 255, 255, 0.8)',
+          defaultHoverBorderColor: 'rgba(255, 255, 255, 0.8)',
+        },
+      },
+      algorithm: theme.darkAlgorithm,
+    },
+  },
+  {
+    value: 'green',
+    name: 'Forest green',
+    color: '#00B96B',
+    token: {
+      token: {
+        colorPrimary: '#00B96B',
+        borderRadius: 4,
+        colorLink: '#00B96B',
+      },
+    },
+  },
+  {
+    value: 'pink',
+    name: 'Blossom',
+    color: '#ED4192',
+    token: {
+      token: {
+        colorPrimary: '#ED4192',
+        borderRadius: 16,
+        colorLink: '#ED4192',
+      },
+    },
+  },
+  {
+    color: '#8343FF',
+    value: 'violet',
+    name: 'Violet',
+    token: customToken,
+  },
+];

package.json

@@ -54,6 +54,7 @@
     "@biomejs/biome": "^1.6.4",
     "@changesets/changelog-git": "^0.2.0",
     "@changesets/cli": "^2.27.7",
+    "@ctrl/tinycolor": "^4.1.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.2.1",
     "@testing-library/react": "^16.0.0",
     "@types/lodash": "^4.17.6",