From 2acd47b5ee251d1af729c44b8516a4cc0fa06d44 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Thu, 17 Feb 2022 15:31:52 +0800
Subject: [PATCH] style(Switch): adjust style

---
 .../vant/docs/markdown/changelog-v4.zh-CN.md  |  3 ++
 .../vant/src/address-edit/AddressEdit.tsx     |  1 -
 .../vant/src/config-provider/demo/index.vue   |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  1 -
 .../vant/src/contact-edit/ContactEdit.tsx     |  1 -
 .../test/__snapshots__/demo.spec.ts.snap      |  1 -
 packages/vant/src/dropdown-menu/README.md     |  4 +-
 .../vant/src/dropdown-menu/README.zh-CN.md    |  4 +-
 .../vant/src/dropdown-menu/demo/index.vue     |  4 +-
 packages/vant/src/form/README.md              |  2 +-
 packages/vant/src/form/README.zh-CN.md        |  2 +-
 packages/vant/src/form/demo/FieldType.vue     |  2 +-
 .../form/test/__snapshots__/demo.spec.ts.snap |  1 -
 packages/vant/src/skeleton/demo/index.vue     |  2 +-
 .../test/__snapshots__/demo.spec.ts.snap      |  1 -
 packages/vant/src/switch/README.md            | 17 +++----
 packages/vant/src/switch/README.zh-CN.md      | 49 +++++++++----------
 packages/vant/src/switch/demo/index.vue       |  4 +-
 packages/vant/src/switch/index.less           | 20 ++++----
 .../test/__snapshots__/demo.spec.ts.snap      |  3 +-
 20 files changed, 60 insertions(+), 64 deletions(-)

diff --git a/packages/vant/docs/markdown/changelog-v4.zh-CN.md b/packages/vant/docs/markdown/changelog-v4.zh-CN.md
index 5fb8114f3..2f06c297f 100644
--- a/packages/vant/docs/markdown/changelog-v4.zh-CN.md
+++ b/packages/vant/docs/markdown/changelog-v4.zh-CN.md
@@ -34,5 +34,8 @@
 - Card: 调整 `--van-card-price-color` 变量的默认值为 `--van-text-color`
 - Card: 调整 `--van-card-desc-color` 变量的默认值为 `--van-text-color-2`
 - Field: 调整 `--van-field-label-color` 变量的默认值为 `--van-text-color`
+- Switch: 移除 `--van-switch-border` 变量
+- Switch: 调整 `--van-switch-size` 变量的默认值为 `26px`
+- Switch: 调整 `--van-switch-background` 变量的默认值为 `rgba(120, 120, 128, 0.16)`
 - Tabbar: 调整 `--van-tabbar-item-text-color` 变量的默认值为 `--van-text-color`
 - GridItem: 调整 `--van-grid-item-text-color` 变量的默认值为 `--van-text-color`
diff --git a/packages/vant/src/address-edit/AddressEdit.tsx b/packages/vant/src/address-edit/AddressEdit.tsx
index e85a8ead2..c6865e02b 100644
--- a/packages/vant/src/address-edit/AddressEdit.tsx
+++ b/packages/vant/src/address-edit/AddressEdit.tsx
@@ -227,7 +227,6 @@ export default defineComponent({
           'right-icon': () => (
             <Switch
               v-model={data.isDefault}
-              size="24"
               onChange={(event) => emit('changeDefault', event)}
             />
           ),
diff --git a/packages/vant/src/config-provider/demo/index.vue b/packages/vant/src/config-provider/demo/index.vue
index 0ff7ab8bc..789796512 100644
--- a/packages/vant/src/config-provider/demo/index.vue
+++ b/packages/vant/src/config-provider/demo/index.vue
@@ -53,7 +53,7 @@ const themeVars = {
     <demo-block :title="t('darkMode')">
       <van-cell center :title="t('switchDarkMode')">
         <template #right-icon>
-          <van-switch v-model="darkMode" size="24" />
+          <van-switch v-model="darkMode" />
         </template>
       </van-cell>
     </demo-block>
diff --git a/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
index a27aef20c..8d176546d 100644
--- a/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/config-provider/test/__snapshots__/demo.spec.ts.snap
@@ -11,7 +11,6 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="switch"
            class="van-switch"
-           style="font-size: 24px;"
            tabindex="0"
            aria-checked="false"
       >
diff --git a/packages/vant/src/contact-edit/ContactEdit.tsx b/packages/vant/src/contact-edit/ContactEdit.tsx
index 0ddd5f4bf..9fc46e635 100644
--- a/packages/vant/src/contact-edit/ContactEdit.tsx
+++ b/packages/vant/src/contact-edit/ContactEdit.tsx
@@ -92,7 +92,6 @@ export default defineComponent({
     const renderSwitch = () => (
       <Switch
         v-model={contact.isDefault}
-        size={24}
         onChange={(checked: boolean) => emit('changeDefault', checked)}
       />
     );
diff --git a/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
index eefb5dfc0..bf57ea5ee 100644
--- a/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/contact-edit/test/__snapshots__/demo.spec.ts.snap
@@ -51,7 +51,6 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="switch"
            class="van-switch"
-           style="font-size: 24px;"
            tabindex="0"
            aria-checked="false"
       >
diff --git a/packages/vant/src/dropdown-menu/README.md b/packages/vant/src/dropdown-menu/README.md
index 3729e12bb..07ae738ce 100644
--- a/packages/vant/src/dropdown-menu/README.md
+++ b/packages/vant/src/dropdown-menu/README.md
@@ -64,12 +64,12 @@ export default {
   <van-dropdown-item title="Title" ref="item">
     <van-cell center title="Title">
       <template #right-icon>
-        <van-switch v-model="switch1" size="24" />
+        <van-switch v-model="switch1" />
       </template>
     </van-cell>
     <van-cell center title="Title">
       <template #right-icon>
-        <van-switch v-model="switch2" size="24" />
+        <van-switch v-model="switch2" />
       </template>
     </van-cell>
     <div style="padding: 5px 16px;">
diff --git a/packages/vant/src/dropdown-menu/README.zh-CN.md b/packages/vant/src/dropdown-menu/README.zh-CN.md
index bb8abf819..ce4dcddac 100644
--- a/packages/vant/src/dropdown-menu/README.zh-CN.md
+++ b/packages/vant/src/dropdown-menu/README.zh-CN.md
@@ -66,12 +66,12 @@ export default {
   <van-dropdown-item title="筛选" ref="item">
     <van-cell center title="包邮">
       <template #right-icon>
-        <van-switch v-model="switch1" size="24" />
+        <van-switch v-model="switch1" />
       </template>
     </van-cell>
     <van-cell center title="团购">
       <template #right-icon>
-        <van-switch v-model="switch2" size="24" />
+        <van-switch v-model="switch2" />
       </template>
     </van-cell>
     <div style="padding: 5px 16px;">
diff --git a/packages/vant/src/dropdown-menu/demo/index.vue b/packages/vant/src/dropdown-menu/demo/index.vue
index 01d75b774..19a8feeea 100644
--- a/packages/vant/src/dropdown-menu/demo/index.vue
+++ b/packages/vant/src/dropdown-menu/demo/index.vue
@@ -78,12 +78,12 @@ const onConfirm = () => {
       <van-dropdown-item :title="t('itemTitle')" ref="item">
         <van-cell center :title="t('switchTitle1')">
           <template #right-icon>
-            <van-switch v-model="switch1" size="24" />
+            <van-switch v-model="switch1" />
           </template>
         </van-cell>
         <van-cell center :title="t('switchTitle2')">
           <template #right-icon>
-            <van-switch v-model="switch2" size="24" />
+            <van-switch v-model="switch2" />
           </template>
         </van-cell>
         <div style="padding: 5px 16px">
diff --git a/packages/vant/src/form/README.md b/packages/vant/src/form/README.md
index 0a95b374c..761adc69e 100644
--- a/packages/vant/src/form/README.md
+++ b/packages/vant/src/form/README.md
@@ -157,7 +157,7 @@ export default {
 ```html
 <van-field name="switch" label="Switch">
   <template #input>
-    <van-switch v-model="checked" size="20" />
+    <van-switch v-model="checked" />
   </template>
 </van-field>
 ```
diff --git a/packages/vant/src/form/README.zh-CN.md b/packages/vant/src/form/README.zh-CN.md
index 8a99171d8..e672fb254 100644
--- a/packages/vant/src/form/README.zh-CN.md
+++ b/packages/vant/src/form/README.zh-CN.md
@@ -169,7 +169,7 @@ export default {
 ```html
 <van-field name="switch" label="开关">
   <template #input>
-    <van-switch v-model="checked" size="20" />
+    <van-switch v-model="checked" />
   </template>
 </van-field>
 ```
diff --git a/packages/vant/src/form/demo/FieldType.vue b/packages/vant/src/form/demo/FieldType.vue
index 4eac7c9fd..15b73aded 100644
--- a/packages/vant/src/form/demo/FieldType.vue
+++ b/packages/vant/src/form/demo/FieldType.vue
@@ -70,7 +70,7 @@ const onSubmit = (values: Record<string, string>) => {
       <van-cell-group inset>
         <van-field name="switch" :label="t('switch')">
           <template #input>
-            <van-switch v-model="switchChecked" size="20" />
+            <van-switch v-model="switchChecked" />
           </template>
         </van-field>
 
diff --git a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
index 90197c019..e26f82f6c 100644
--- a/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/form/test/__snapshots__/demo.spec.ts.snap
@@ -171,7 +171,6 @@ exports[`should render demo and match snapshot 1`] = `
             <div class="van-field__control van-field__control--custom">
               <div role="switch"
                    class="van-switch"
-                   style="font-size: 20px;"
                    tabindex="0"
                    aria-checked="false"
               >
diff --git a/packages/vant/src/skeleton/demo/index.vue b/packages/vant/src/skeleton/demo/index.vue
index 36bd3a64c..807b3c92f 100644
--- a/packages/vant/src/skeleton/demo/index.vue
+++ b/packages/vant/src/skeleton/demo/index.vue
@@ -32,7 +32,7 @@ const show = ref(false);
   </demo-block>
 
   <demo-block :title="t('showChildren')">
-    <van-switch v-model="show" size="24px" />
+    <van-switch v-model="show" />
     <van-skeleton title avatar :row="3" :loading="!show">
       <div class="demo-preview">
         <img src="https://img.yzcdn.cn/vant/logo.png" />
diff --git a/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
index 801a39883..95b77c8da 100644
--- a/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/skeleton/test/__snapshots__/demo.spec.ts.snap
@@ -46,7 +46,6 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="switch"
        class="van-switch"
-       style="font-size: 24px;"
        tabindex="0"
        aria-checked="false"
   >
diff --git a/packages/vant/src/switch/README.md b/packages/vant/src/switch/README.md
index 1463ca85d..3bbd1b5bc 100644
--- a/packages/vant/src/switch/README.md
+++ b/packages/vant/src/switch/README.md
@@ -50,7 +50,7 @@ export default {
 ### Custom Size
 
 ```html
-<van-switch v-model="checked" size="24px" />
+<van-switch v-model="checked" size="22px" />
 ```
 
 ### Custom Color
@@ -94,7 +94,7 @@ export default {
 ```html
 <van-cell center title="Title">
   <template #right-icon>
-    <van-switch v-model="checked" size="24" />
+    <van-switch v-model="checked" />
   </template>
 </van-cell>
 ```
@@ -108,9 +108,9 @@ export default {
 | v-model | Check status of Switch | _ActiveValue \| InactiveValue_ | `false` |
 | loading | Whether to show loading icon | _boolean_ | `false` |
 | disabled | Whether to disable switch | _boolean_ | `false` |
-| size | Size of switch | _number \| string_ | `30px` |
+| size | Size of switch button | _number \| string_ | `26px` |
 | active-color | Background color when active | _string_ | `#1989fa` |
-| inactive-color | Background color when inactive | _string_ | `white` |
+| inactive-color | Background color when inactive | _string_ | `rgba(120, 120, 128, 0.16)` |
 | active-value | Value when active | _any_ | `true` |
 | inactive-value | Value when inactive | _any_ | `false` |
 
@@ -137,14 +137,13 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Default Value | Description |
 | --- | --- | --- |
-| --van-switch-size | _30px_ | - |
-| --van-switch-width | _2em_ | - |
-| --van-switch-height | _1em_ | - |
+| --van-switch-size | _26px_ | - |
+| --van-switch-width | _calc(2em + 4px)_ | - |
+| --van-switch-height | _calc(1em + 4px)_ | - |
 | --van-switch-node-size | _1em_ | - |
 | --van-switch-node-background | _var(--van-white)_ | - |
 | --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
-| --van-switch-background | _var(--van-background-2)_ | - |
+| --van-switch-background | _rgba(120, 120, 128, 0.16)_ | - |
 | --van-switch-on-background | _var(--van-primary-color)_ | - |
 | --van-switch-duration | _var(--van-duration-base)_ | - |
 | --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
-| --van-switch-border | _var(--van-border-width) solid rgba(0, 0, 0, 0.1)_ | - |
diff --git a/packages/vant/src/switch/README.zh-CN.md b/packages/vant/src/switch/README.zh-CN.md
index db58f4f7a..5297d27a8 100644
--- a/packages/vant/src/switch/README.zh-CN.md
+++ b/packages/vant/src/switch/README.zh-CN.md
@@ -58,7 +58,7 @@ export default {
 通过 `size` 属性自定义开关的大小。
 
 ```html
-<van-switch v-model="checked" size="24px" />
+<van-switch v-model="checked" size="22px" />
 ```
 
 ### 自定义颜色
@@ -106,7 +106,7 @@ export default {
 ```html
 <van-cell center title="标题">
   <template #right-icon>
-    <van-switch v-model="checked" size="24" />
+    <van-switch v-model="checked" />
   </template>
 </van-cell>
 ```
@@ -115,16 +115,16 @@ export default {
 
 ### Props
 
-| 参数           | 说明                     | 类型               | 默认值    |
-| -------------- | ------------------------ | ------------------ | --------- |
-| v-model        | 开关选中状态             | _any_              | `false`   |
-| loading        | 是否为加载状态           | _boolean_          | `false`   |
-| disabled       | 是否为禁用状态           | _boolean_          | `false`   |
-| size           | 开关尺寸，默认单位为`px` | _number \| string_ | `30px`    |
-| active-color   | 打开时的背景色           | _string_           | `#1989fa` |
-| inactive-color | 关闭时的背景色           | _string_           | `white`   |
-| active-value   | 打开时对应的值           | _any_              | `true`    |
-| inactive-value | 关闭时对应的值           | _any_              | `false`   |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model | 开关选中状态 | _any_ | `false` |
+| loading | 是否为加载状态 | _boolean_ | `false` |
+| disabled | 是否为禁用状态 | _boolean_ | `false` |
+| size | 开关按钮的尺寸，默认单位为 `px` | _number \| string_ | `26px` |
+| active-color | 打开时的背景色 | _string_ | `#1989fa` |
+| inactive-color | 关闭时的背景色 | _string_ | `rgba(120, 120, 128, 0.16)` |
+| active-value | 打开时对应的值 | _any_ | `true` |
+| inactive-value | 关闭时对应的值 | _any_ | `false` |
 
 ### Events
 
@@ -147,16 +147,15 @@ import type { SwitchProps } from 'vant';
 
 组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
 
-| 名称 | 默认值 | 描述 |
-| --- | --- | --- |
-| --van-switch-size | _30px_ | - |
-| --van-switch-width | _2em_ | - |
-| --van-switch-height | _1em_ | - |
-| --van-switch-node-size | _1em_ | - |
-| --van-switch-node-background | _var(--van-white)_ | - |
-| --van-switch-node-shadow | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | - |
-| --van-switch-background | _var(--van-background-2)_ | - |
-| --van-switch-on-background | _var(--van-primary-color)_ | - |
-| --van-switch-duration | _var(--van-duration-base)_ | - |
-| --van-switch-disabled-opacity | _var(--van-disabled-opacity)_ | - |
-| --van-switch-border | _var(--van-border-width) solid rgba(0, 0, 0, 0.1)_ | - |
+| 名称                          | 默认值                            | 描述 |
+| ----------------------------- | --------------------------------- | ---- |
+| --van-switch-size             | _26px_                            | -    |
+| --van-switch-width            | _calc(2em + 4px)_                 | -    |
+| --van-switch-height           | _calc(1em + 4px)_                 | -    |
+| --van-switch-node-size        | _1em_                             | -    |
+| --van-switch-node-background  | _var(--van-white)_                | -    |
+| --van-switch-node-shadow      | _0 3px 1px 0 rgba(0, 0, 0, 0.05)_ | -    |
+| --van-switch-background       | _rgba(120, 120, 128, 0.16)_       | -    |
+| --van-switch-on-background    | _var(--van-primary-color)_        | -    |
+| --van-switch-duration         | _var(--van-duration-base)_        | -    |
+| --van-switch-disabled-opacity | _var(--van-disabled-opacity)_     | -    |
diff --git a/packages/vant/src/switch/demo/index.vue b/packages/vant/src/switch/demo/index.vue
index 0e379f41e..a28312c6e 100644
--- a/packages/vant/src/switch/demo/index.vue
+++ b/packages/vant/src/switch/demo/index.vue
@@ -56,7 +56,7 @@ const onUpdateValue = (checked: boolean) => {
   </demo-block>
 
   <demo-block :title="t('customSize')">
-    <van-switch v-model="checked2" size="24px" />
+    <van-switch v-model="checked2" size="22px" />
   </demo-block>
 
   <demo-block :title="t('customColor')">
@@ -74,7 +74,7 @@ const onUpdateValue = (checked: boolean) => {
   <demo-block :title="t('withCell')">
     <van-cell center :title="t('title')">
       <template #right-icon>
-        <van-switch v-model="checked5" size="24" />
+        <van-switch v-model="checked5" />
       </template>
     </van-cell>
   </demo-block>
diff --git a/packages/vant/src/switch/index.less b/packages/vant/src/switch/index.less
index e02fe940a..6b20e9813 100644
--- a/packages/vant/src/switch/index.less
+++ b/packages/vant/src/switch/index.less
@@ -1,15 +1,18 @@
 body {
-  --van-switch-size: 30px;
-  --van-switch-width: 2em;
-  --van-switch-height: 1em;
+  --van-switch-size: 26px;
+  --van-switch-width: calc(2em + 4px);
+  --van-switch-height: calc(1em + 4px);
   --van-switch-node-size: 1em;
   --van-switch-node-background: var(--van-white);
   --van-switch-node-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.05);
-  --van-switch-background: var(--van-background-3);
+  --van-switch-background: rgba(120, 120, 128, 0.16);
   --van-switch-on-background: var(--van-primary-color);
   --van-switch-duration: var(--van-duration-base);
   --van-switch-disabled-opacity: var(--van-disabled-opacity);
-  --van-switch-border: var(--van-border-width) solid rgba(0, 0, 0, 0.1);
+}
+
+.van-theme-dark {
+  --van-switch-background: rgba(120, 120, 128, 0.32);
 }
 
 .van-switch {
@@ -20,15 +23,14 @@ body {
   height: var(--van-switch-height);
   font-size: var(--van-switch-size);
   background: var(--van-switch-background);
-  border: var(--van-switch-border);
   border-radius: var(--van-switch-node-size);
   cursor: pointer;
   transition: background-color var(--van-switch-duration);
 
   &__node {
     position: absolute;
-    top: 0;
-    left: 0;
+    top: 2px;
+    left: 2px;
     width: var(--van-switch-node-size);
     height: var(--van-switch-node-size);
     // https://github.com/youzan/vant/issues/9839
@@ -53,7 +55,7 @@ body {
 
     .van-switch__node {
       transform: translateX(
-        calc(var(--van-switch-width) - var(--van-switch-node-size))
+        calc(var(--van-switch-width) - var(--van-switch-node-size) - 4px)
       );
     }
 
diff --git a/packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap
index 2dd9df6da..080687ae1 100644
--- a/packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/switch/test/__snapshots__/demo.spec.ts.snap
@@ -47,7 +47,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div role="switch"
        class="van-switch van-switch--on"
-       style="font-size: 24px;"
+       style="font-size: 22px;"
        tabindex="0"
        aria-checked="true"
   >
@@ -85,7 +85,6 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
     <div role="switch"
          class="van-switch van-switch--on"
-         style="font-size: 24px;"
          tabindex="0"
          aria-checked="true"
     >