diff --git a/components/config-provider/demo/locale.vue b/components/config-provider/demo/locale.vue
index 33e856474..f62319df4 100644
--- a/components/config-provider/demo/locale.vue
+++ b/components/config-provider/demo/locale.vue
@@ -16,7 +16,7 @@ Components which need localization support are listed here, you can toggle the l
 </docs>
 
 <template>
-  <div class="change-locale">
+  <div style="margin-bottom: 16px">
     <span style="margin-right: 16px">Change locale of components:</span>
     <a-radio-group v-model:value="locale">
       <a-radio-button key="en" :value="enUS.locale">English</a-radio-button>
@@ -24,11 +24,13 @@ Components which need localization support are listed here, you can toggle the l
     </a-radio-group>
   </div>
   <a-config-provider :locale="locale === 'en' ? enUS : zhCN">
-    <div class="locale-components">
-      <div class="example">
-        <a-pagination :total="50" show-size-changer />
-      </div>
-      <div class="example">
+    <a-space
+      direction="vertical"
+      :size="[0, 16]"
+      :style="{ width: '100%', paddingTop: '16px', borderTop: `1px solid ${token.colorBorder}` }"
+    >
+      <a-pagination :total="50" show-size-changer />
+      <a-space wrap>
         <a-select show-search style="width: 200px">
           <a-select-option value="jack">jack</a-select-option>
           <a-select-option value="lucy">lucy</a-select-option>
@@ -36,33 +38,83 @@ Components which need localization support are listed here, you can toggle the l
         <a-date-picker />
         <a-time-picker />
         <a-range-picker style="width: 200px" />
-      </div>
-      <div class="example">
+      </a-space>
+      <a-space wrap>
         <a-button type="primary" @click="visible = true">Show Modal</a-button>
         <a-button @click="info">Show info</a-button>
         <a-button @click="confirm">Show confirm</a-button>
         <a-popconfirm title="Question?">
           <a href="#">Click to confirm</a>
         </a-popconfirm>
-      </div>
-      <div class="example">
-        <a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
-      </div>
-      <div class="site-config-provider-calendar-wrapper">
+      </a-space>
+      <a-transfer :data-source="[]" show-search :target-keys="[]" :render="item => item.title" />
+      <div
+        :style="{
+          width: '320px',
+          border: `1px solid ${token.colorBorder}`,
+          'border-radius': '8px',
+        }"
+      >
         <a-calendar :fullscreen="false" />
       </div>
-      <div class="example">
-        <a-table :data-source="[]" :columns="columns" />
-      </div>
+      <a-form
+        name="basic"
+        :model="formModel"
+        auto-complete="off"
+        :label-col="{ sm: { span: 4 } }"
+        :wrapper-col="{ span: 6 }"
+      >
+        <a-form-item label="UserName" name="username" :rules="[{ required: true }]">
+          <a-input v-model:value="formModel.username" :width="200" />
+        </a-form-item>
+        <a-form-item label="Age" name="age" :rules="[{ type: 'number', min: 0, max: 99 }]">
+          <a-input-number v-model:value="formModel.age" :width="200" />
+        </a-form-item>
+        <a-form-item :wrapper-col="{ offset: 2, span: 6 }">
+          <a-button type="primary" html-type="submit">submit</a-button>
+        </a-form-item>
+      </a-form>
+      <a-table :data-source="[]" :columns="columns" />
       <a-modal v-model:open="visible" title="Locale Modal">
         <p>Locale Modal</p>
       </a-modal>
-    </div>
+      <a-space wrap :size="80">
+        <a-qrcode
+          value="https://antdv.com"
+          status="expired"
+          @refresh="() => console.log('refresh')"
+        />
+        <a-image
+          :width="160"
+          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        />
+      </a-space>
+      <a-upload list-type="picture-card" :file-list="fileList" />
+      <a-divider orientation="left">Tour</a-divider>
+      <a-button type="primary" @click="() => (tourOpen = true)">Begin Tour</a-button>
+      <a-space>
+        <a-button ref="ref1">upload</a-button>
+        <a-button ref="ref2" type="primary">save</a-button>
+        <a-button ref="ref3">
+          <template #icon>
+            <ellipsis-outlined />
+          </template>
+        </a-button>
+      </a-space>
+      <a-tour
+        v-model:current="current"
+        :open="tourOpen"
+        :steps="steps"
+        @close="() => (tourOpen = false)"
+      ></a-tour>
+    </a-space>
   </a-config-provider>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from 'vue';
-import { Modal } from 'ant-design-vue';
+import { Modal, theme } from 'ant-design-vue';
+import type { TourProps, UploadFile } from 'ant-design-vue';
+import { EllipsisOutlined } from '@ant-design/icons-vue';
 import enUS from 'ant-design-vue/es/locale/en_US';
 import zhCN from 'ant-design-vue/es/locale/zh_CN';
 import dayjs from 'dayjs';
@@ -104,33 +156,55 @@ const confirm = () => {
     content: 'some info',
   });
 };
+
+const formModel = ref({
+  username: '',
+  age: '100',
+});
+
+const { token } = theme.useToken();
+
+const fileList: UploadFile[] = [
+  {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-2',
+    percent: 50,
+    name: 'image.png',
+    status: 'uploading',
+    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+  },
+  {
+    uid: '-3',
+    name: 'image.png',
+    status: 'error',
+  },
+];
+
+const ref1 = ref(null);
+const ref2 = ref(null);
+const ref3 = ref(null);
+const current = ref(0);
+const tourOpen = ref(false);
+const steps: TourProps['steps'] = [
+  {
+    title: 'Upload File',
+    description: 'Put your files here.',
+    target: () => ref1.value && ref1.value.$el,
+  },
+  {
+    title: 'Save',
+    description: 'Save your changes.',
+    target: () => ref2.value && ref2.value.$el,
+  },
+  {
+    title: 'Other Actions',
+    description: 'Click to see other actions.',
+    target: () => ref3.value && ref3.value.$el,
+  },
+];
 </script>
-<style scoped>
-.site-config-provider-calendar-wrapper {
-  width: 319px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-.locale-components {
-  border-top: 1px solid #d9d9d9;
-  padding-top: 16px;
-}
-
-.example {
-  margin: 16px 0;
-}
-
-.example > * {
-  margin-right: 8px;
-}
-
-.change-locale {
-  margin-bottom: 16px;
-}
-[data-theme='dark'] .locale-components {
-  border-top: 1px solid #303030;
-}
-[data-theme='dark'] .site-config-provider-calendar-wrapper {
-  border: 1px solid #303030;
-}
-</style>
diff --git a/components/config-provider/demo/theme.vue b/components/config-provider/demo/theme.vue
index 99f795712..da33ab06e 100644
--- a/components/config-provider/demo/theme.vue
+++ b/components/config-provider/demo/theme.vue
@@ -3,569 +3,56 @@
 order: 5
 version: 3.0
 title:
-  zh-CN: 全局样式
-  en-US: Global Theme
+  zh-CN: 主题
+  en-US: Theme
 ---
 
 ## zh-CN
 
-通过 css variable 修改全局主题色（你可以切换到组件页面查看更详细的样式展示）。自动生成的变量可能会根据设计调整，请勿直接依赖。详细配置请[点击查看](/docs/vue/customize-theme-variable)。
+通过 theme 修改主题。
 
 ## en-US
 
-Modify global theme color by css variable. Css variable depends on the design, it may adjust so please do not directly use it. You can go to other components page for more detail style. [Check this](/docs/vue/customize-theme-variable) to view detail.
+Modify theme by `theme` prop.
 
 </docs>
 
 <template>
-  <a-row :gutter="16" :wrap="false">
-    <a-col flex="none">
-      <a-space direction="vertical" align="center">
-        <!-- Primary Color -->
+  <a-config-provider
+    :theme="{ token: { colorPrimary: data.colorPrimary, borderRadius: `${data.borderRadius}px` } }"
+  >
+    <a-form :model="data" name="theme" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+      <a-form-item name="colorPrimary" label="Primary Color">
         <input
           type="color"
-          :value="colorState.primaryColor"
-          @input="e => onColorChange('primaryColor', e)"
+          :value="data.colorPrimary"
+          @input="e => (data.colorPrimary = e.target.value)"
         />
-
-        <span style="color: var(--ant-primary-color)">var(`--ant-primary-color`)</span>
-
-        <!-- Error Color -->
-        <input
-          type="color"
-          :value="colorState.errorColor"
-          @input="e => onColorChange('errorColor', e)"
-        />
-
-        <span style="color: var(--ant-error-color)">var(`--ant-error-color`)</span>
-
-        <!-- Warning Color -->
-        <input
-          type="color"
-          :value="colorState.warningColor"
-          @input="e => onColorChange('warningColor', e)"
-        />
-
-        <span style="color: var(--ant-warning-color)">var(`--ant-warning-color`)</span>
-
-        <!-- Success Color -->
-        <input
-          type="color"
-          :value="colorState.successColor"
-          @input="e => onColorChange('successColor', e)"
-        />
-
-        <span style="color: var(--ant-success-color)">var(`--ant-success-color`)</span>
-
-        <!-- Info Color -->
-        <input
-          type="color"
-          :value="colorState.infoColor"
-          @input="e => onColorChange('infoColor', e)"
-        />
-        <span style="color: var(--ant-info-color)">var(`--ant-info-color`)</span>
-      </a-space>
-    </a-col>
-
-    <a-col flex="auto">
-      <a-space direction="vertical" style="width: 100%" :size="0">
-        <template #split><a-divider /></template>
-        <!-- Primary Button -->
-        <SplitSpace>
-          <a-button type="primary">Primary</a-button>
-          <a-button>Default</a-button>
-          <a-button type="dashed">Dashed</a-button>
-          <a-button type="text">Text</a-button>
-          <a-button type="link">Link</a-button>
-        </SplitSpace>
-
-        <!-- Danger Button -->
-        <SplitSpace>
-          <a-button danger type="primary">Primary</a-button>
-          <a-button danger>Default</a-button>
-          <a-button danger type="dashed">Dashed</a-button>
-          <a-button danger type="text">Text</a-button>
-          <a-button danger type="link">Link</a-button>
-        </SplitSpace>
-
-        <!-- Ghost Button -->
-        <SplitSpace style="background: rgb(190, 200, 200)">
-          <a-button type="primary" ghost>Primary</a-button>
-          <a-button ghost>Default</a-button>
-          <a-button type="dashed" ghost>Dashed</a-button>
-          <a-button type="primary" ghost danger>Primary</a-button>
-          <a-button ghost danger>Default</a-button>
-          <a-button type="dashed" ghost danger>Dashed</a-button>
-        </SplitSpace>
-
-        <!-- Typography -->
-        <SplitSpace>
-          <a-typography-text type="success">Text (success)</a-typography-text>
-          <a-typography-text type="warning">Text(warning)</a-typography-text>
-          <a-typography-text type="danger">Text(danger)</a-typography-text>
-          <a-typography-link href="https://ant.design" target="_blank">Link</a-typography-link>
-          <a-typography-text copyable>Text</a-typography-text>
-
-          <!-- Dropdown -->
-          <a-dropdown>
-            <template #overlay>
-              <a-menu>
-                <a-menu-item>1st menu item</a-menu-item>
-                <a-menu-item danger>a danger item</a-menu-item>
-              </a-menu>
-            </template>
-            <a class="ant-dropdown-link" @click.prevent>
-              Hover me
-              <DownOutlined />
-            </a>
-          </a-dropdown>
-
-          <!-- Spin -->
-          <a-spin />
-        </SplitSpace>
-
-        <!-- Menu - horizontal -->
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-menu v-model:selectedKeys="selectedKeys" mode="horizontal">
-              <a-menu-item key="mail">
-                Mail
-                <template #icon>
-                  <MailOutlined />
-                </template>
-              </a-menu-item>
-              <a-sub-menu key="SubMenu" title="Submenu">
-                <template #icon><SettingOutlined /></template>
-                <a-menu-item-group title="Item 1">
-                  <a-menu-item key="setting:1">Option 1</a-menu-item>
-                  <a-menu-item key="setting:2">Option 2</a-menu-item>
-                </a-menu-item-group>
-              </a-sub-menu>
-            </a-menu>
-          </a-col>
-          <a-col :span="12">
-            <a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" theme="dark">
-              <a-menu-item key="mail">
-                <template #icon><SettingOutlined /></template>
-                Mail
-              </a-menu-item>
-              <a-sub-menu key="SubMenu" title="Submenu">
-                <template #icon><SettingOutlined /></template>
-                <a-menu-item-group title="Item 1">
-                  <a-menu-item key="setting:1">Option 1</a-menu-item>
-                  <a-menu-item key="setting:2">Option 2</a-menu-item>
-                </a-menu-item-group>
-              </a-sub-menu>
-            </a-menu>
-          </a-col>
-        </a-row>
-
-        <!-- Menu - vertical -->
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-menu v-model:selectedKeys="selectedKeys" mode="inline">
-              <a-menu-item key="mail">
-                <template #icon><MailOutlined /></template>
-                Mail
-              </a-menu-item>
-              <a-sub-menu key="SubMenu" title="Submenu">
-                <template #icon><SettingOutlined /></template>
-                <a-menu-item-group title="Item 1">
-                  <a-menu-item key="setting:1">Option 1</a-menu-item>
-                  <a-menu-item key="setting:2">Option 2</a-menu-item>
-                </a-menu-item-group>
-              </a-sub-menu>
-            </a-menu>
-          </a-col>
-          <a-col :span="12">
-            <a-menu v-model:selectedKeys="selectedKeys" mode="vertical" theme="dark">
-              <a-menu-item key="mail">
-                <template #icon><MailOutlined /></template>
-                Mail
-              </a-menu-item>
-              <a-sub-menu key="SubMenu" title="Submenu">
-                <template #icon><SettingOutlined /></template>
-                <a-menu-item-group title="Item 1">
-                  <a-menu-item key="setting:1">Option 1</a-menu-item>
-                  <a-menu-item key="setting:2">Option 2</a-menu-item>
-                </a-menu-item-group>
-              </a-sub-menu>
-            </a-menu>
-          </a-col>
-        </a-row>
-
-        <!-- Pagination -->
-        <a-pagination show-quick-jumper :default-current="2" :total="500" />
-
-        <!-- Steps -->
-        <a-steps :current="1" :percent="60" :items="stepsItems"></a-steps>
-
-        <!-- Steps - dot -->
-        <a-steps :current="2" status="error" progress-dot :items="stepsItems2"></a-steps>
-
-        <!-- Form - Input -->
-        <a-form>
-          <SplitSpace>
-            <a-form-item>
-              <a-input v-bind="inputProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="success">
-              <a-input v-bind="inputProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="warning">
-              <a-input v-bind="inputProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="error">
-              <a-input v-bind="inputProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="validating">
-              <a-input v-bind="inputProps" />
-            </a-form-item>
-          </SplitSpace>
-        </a-form>
-
-        <!-- Form - Select -->
-        <a-form>
-          <SplitSpace>
-            <a-form-item>
-              <a-select v-bind="selectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="success">
-              <a-select v-bind="selectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="warning">
-              <a-select v-bind="selectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="error">
-              <a-select v-bind="selectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="validating">
-              <a-select v-bind="selectProps" />
-            </a-form-item>
-          </SplitSpace>
-        </a-form>
-
-        <!-- Form - TreeSelect -->
-        <a-form>
-          <SplitSpace>
-            <a-form-item>
-              <a-tree-select v-bind="treeSelectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="success">
-              <a-tree-select v-bind="treeSelectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="warning">
-              <a-tree-select v-bind="treeSelectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="error">
-              <a-tree-select v-bind="treeSelectProps" />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="validating">
-              <a-tree-select v-bind="treeSelectProps" />
-            </a-form-item>
-          </SplitSpace>
-        </a-form>
-
-        <!-- Form - InputNumber -->
-        <a-form>
-          <SplitSpace>
-            <a-form-item>
-              <a-input-number />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="success">
-              <a-input-number />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="warning">
-              <a-input-number />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="error">
-              <a-input-number />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="validating">
-              <a-input-number />
-            </a-form-item>
-          </SplitSpace>
-        </a-form>
-
-        <!-- Form - DatePicker -->
-        <a-form>
-          <SplitSpace>
-            <a-form-item>
-              <a-date-picker />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="success">
-              <a-date-picker />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="warning">
-              <a-date-picker />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="error">
-              <a-date-picker />
-            </a-form-item>
-            <a-form-item has-feedback validate-status="validating">
-              <a-date-picker />
-            </a-form-item>
-          </SplitSpace>
-        </a-form>
-
-        <SplitSpace>
-          <a-checkbox>Checkbox</a-checkbox>
-
-          <a-radio-group default-value="bamboo">
-            <a-radio value="bamboo">Bamboo</a-radio>
-            <a-radio value="light">Light</a-radio>
-            <a-radio value="little">Little</a-radio>
-          </a-radio-group>
-
-          <a-mentions placeholder="Mention by @">
-            <a-mentions-option value="afc163">afc163</a-mentions-option>
-            <a-mentions-option value="zombieJ">zombieJ</a-mentions-option>
-            <a-mentions-option value="yesmeck">yesmeck</a-mentions-option>
-          </a-mentions>
-
-          <a-slider :default-value="30" style="width: 100px" />
-
-          <a-switch default-checked />
-        </SplitSpace>
-
-        <SplitSpace>
-          <a-range-picker />
-          <a-time-range-picker />
-        </SplitSpace>
-
-        <a-row :gutter="16">
-          <a-col :span="8">
-            <!-- Card -->
-            <a-card style="width: 100%" :tab-list="carTabListNoTitle">
-              <template #tabBarExtraContent>
-                <a href="#">More</a>
-              </template>
-            </a-card>
-          </a-col>
-          <a-col :span="8">
-            <!-- Table -->
-            <a-table
-              size="small"
-              bordered
-              :row-selection="{}"
-              :columns="[
-                {
-                  title: 'Key',
-                  dataIndex: 'key',
-                  filters: [
-                    {
-                      text: 'Little',
-                      value: 'little',
-                    },
-                  ],
-                  sorter: (a, b) => a.key.length - b.key.length,
-                },
-              ]"
-              :data-source="[
-                {
-                  key: 'Bamboo',
-                },
-                {
-                  key: 'Light',
-                },
-                {
-                  key: 'Little',
-                },
-              ]"
-            />
-          </a-col>
-          <a-col :span="8">
-            <!-- Table -->
-            <a-tabs default-active-key="1">
-              <a-tab-pane key="1" tab="Tab 1">Content of Tab Pane 1</a-tab-pane>
-              <a-tab-pane key="2" tab="Tab 2">Content of Tab Pane 2</a-tab-pane>
-              <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
-            </a-tabs>
-          </a-col>
-        </a-row>
-
-        <SplitSpace>
-          <a-tag color="success">success</a-tag>
-          <a-tag color="processing">processing</a-tag>
-          <a-tag color="error">error</a-tag>
-          <a-tag color="warning">warning</a-tag>
-          <a-tag color="default">default</a-tag>
-          <a-checkable-tag checked>CheckableTag</a-checkable-tag>
-        </SplitSpace>
-
-        <a-row :gutter="16">
-          <a-col :span="16">
-            <a-timeline mode="alternate">
-              <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
-              <a-timeline-item color="gray">
-                Solve initial network problems 2015-09-01
-              </a-timeline-item>
-              <a-timeline-item>
-                <template #dot>
-                  <ClockCircleOutlined style="font-size: 16px" />
-                </template>
-                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
-                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
-                veritatis et quasi architecto beatae vitae dicta sunt explicabo.
-              </a-timeline-item>
-            </a-timeline>
-          </a-col>
-
-          <a-col :span="8">
-            <a-tree :tree-data="treeData" :height="200" default-expand-all checkable />
-          </a-col>
-        </a-row>
-
-        <!-- Alert -->
-        <a-row :gutter="16">
-          <a-col :span="6">
-            <a-alert show-icon message="Success Text" type="success" />
-          </a-col>
-          <a-col :span="6">
-            <a-alert show-icon message="Info Text" type="info" />
-          </a-col>
-          <a-col :span="6">
-            <a-alert show-icon message="Warning Text" type="warning" />
-          </a-col>
-          <a-col :span="6">
-            <a-alert show-icon message="Error Text" type="error" />
-          </a-col>
-        </a-row>
-
-        <!-- Progress -->
-        <a-row :gutter="16">
-          <a-col flex="auto">
-            <a-progress :percent="30" />
-            <a-progress :percent="70" status="exception" />
-            <a-progress :percent="100" />
-          </a-col>
-          <a-col flex="none">
-            <a-progress type="circle" :percent="75" />
-            <a-progress type="circle" :percent="70" status="exception" />
-            <a-progress type="circle" :percent="100" />
-          </a-col>
-        </a-row>
-
-        <a-transfer :data-source="transferData" :target-keys="['18']" :selected-keys="['3']">
-          <template #render="item">{{ item.title }}</template>
-        </a-transfer>
-      </a-space>
-    </a-col>
-  </a-row>
+      </a-form-item>
+      <a-form-item name="borderRadius" label="Border Radius">
+        <a-input v-model:value="data.borderRadius" />
+      </a-form-item>
+      <a-form-item name="submit" :wrapper-col="{ offset: 4, span: 20 }">
+        <a-button type="primary">submit</a-button>
+      </a-form-item>
+    </a-form>
+  </a-config-provider>
 </template>
 <script lang="ts" setup>
-import { h, reactive, ref } from 'vue';
-import { ConfigProvider, Space, Divider } from 'ant-design-vue';
-import type { TreeSelectProps } from 'ant-design-vue';
-import {
-  DownOutlined,
-  MailOutlined,
-  SettingOutlined,
-  ClockCircleOutlined,
-} from '@ant-design/icons-vue';
+import { ref } from 'vue';
+import { theme } from 'ant-design-vue';
 
-const SplitSpace = (props, { slots }) =>
-  h(Space, { size: 4, ...props }, { ...slots, split: () => h(Divider, { type: 'vertical' }) });
-
-const inputProps = {
-  style: { width: '128px' },
+const defaultData = {
+  borderRadius: 6,
+  colorPrimary: '#1677ff',
 };
-
-const selectProps = {
-  ...inputProps,
-  options: [
-    { value: 'light', label: 'Light' },
-    { value: 'bamboo', label: 'Bamboo' },
-    { value: 'little', label: 'Little' },
-  ],
-};
-
-const treeData = [
-  {
-    value: 'little',
-    key: 'little',
-    label: 'Little',
-    title: 'Little',
-    children: [
-      { value: 'light', key: 'light', label: 'Light', title: 'Light' },
-      { value: 'bamboo', key: 'bamboo', label: 'Bamboo', title: 'Bamboo' },
-    ],
-  },
-];
-
-const treeSelectProps: TreeSelectProps = {
-  ...inputProps,
-  treeCheckable: true,
-  maxTagCount: 'responsive',
-  treeData,
-};
-
-const carTabListNoTitle = [
-  {
-    key: 'article',
-    tab: 'article',
-  },
-  {
-    key: 'app',
-    tab: 'app',
-  },
-  {
-    key: 'project',
-    tab: 'project',
-  },
-];
-
-const transferData = [];
-
-for (let i = 0; i < 20; i++) {
-  transferData.push({
-    key: i.toString(),
-    title: `content${i + 1}`,
-    description: `description of content${i + 1}`,
-  });
-}
-
-const colorState = reactive({
-  primaryColor: '#1890ff',
-  errorColor: '#ff4d4f',
-  warningColor: '#faad14',
-  successColor: '#52c41a',
-  infoColor: '#1890ff',
-});
-
-const onColorChange = (type: string, e: any) => {
-  Object.assign(colorState, { [type]: e.target.value });
-  ConfigProvider.config({
-    theme: colorState,
-  });
-};
-const selectedKeys = ref(['mail']);
-const stepsItems = [
-  {
-    title: 'Finished',
-    description: 'This is a description.',
-  },
-  {
-    title: 'In Progress',
-    description: 'This is a description.',
-  },
-  {
-    title: 'Waiting',
-    description: 'This is a description.',
-  },
-];
-const stepsItems2 = [
-  {
-    title: 'Finished',
-    description: 'You can hover on the dot.',
-  },
-  {
-    title: 'In Progress',
-    description: 'You can hover on the dot.',
-  },
-  {
-    title: 'Waiting',
-    description: 'You can hover on the dot.',
-  },
-];
+const data = ref(defaultData);
+const { token } = theme.useToken();
 </script>
+
+<style scoped>
+input[type='color'] {
+  border: 1px solid v-bind('token.colorBorder');
+  background-color: v-bind('token.colorBgBase');
+}
+</style>
diff --git a/components/theme/interface/seeds.ts b/components/theme/interface/seeds.ts
index 22b07d81a..176cb5e26 100644
--- a/components/theme/interface/seeds.ts
+++ b/components/theme/interface/seeds.ts
@@ -4,6 +4,8 @@ import type { PresetColorType } from './presetColors';
 // ======================================================================
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 
+type BorderRadiusType = number | `${number}px` | `${number}%`;
+
 export interface SeedToken extends PresetColorType {
   //  ----------   Color   ---------- //
 
@@ -106,7 +108,7 @@ export interface SeedToken extends PresetColorType {
    * @descEN Border radius of base components
    * @desc 基础组件的圆角大小，例如按钮、输入框、卡片等
    */
-  borderRadius: number;
+  borderRadius: BorderRadiusType;
 
   //  ----------   Size   ---------- //