feat: switch support cssvar (#7940)

Author: shifeng1993

components/switch/demo/basic.vue

@@ -19,7 +19,8 @@ The most basic usage.
 <template>
   <a-switch v-model:checked="checked" />
 </template>
+
 <script lang="ts" setup>
 import { ref } from 'vue';
-const checked = ref<boolean>(false);
+const checked = ref<boolean>(true);
 </script>

components/switch/demo/size.vue

@@ -27,6 +27,6 @@ title:
 import { reactive } from 'vue';
 const state = reactive({
   checked1: true,
-  checked2: false,
+  checked2: true,
 });
 </script>

components/switch/demo/text.vue

@@ -18,7 +18,7 @@ With text and icon.
 
 <template>
   <a-space direction="vertical">
-    <a-switch v-model:checked="state.checked1" checked-children="开" un-checked-children="关" />
+    <a-switch v-model:checked="state.checked1" checked-children="开启" un-checked-children="关闭" />
     <a-switch v-model:checked="state.checked2" checked-children="1" un-checked-children="0" />
     <a-switch v-model:checked="state.checked3">
       <template #checkedChildren><check-outlined /></template>
@@ -32,6 +32,6 @@ import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';
 const state = reactive({
   checked1: true,
   checked2: false,
-  checked3: false,
+  checked3: true,
 });
 </script>

components/switch/style/index.ts

@@ -10,22 +10,22 @@ export interface ComponentToken {
    *  @desc 开关高度
    *  @descEN Height of Switch
    */
-  trackHeight: number;
+  trackHeight: number | string;
   /**
    * @desc 小号开关高度
    * @descEN Height of small Switch
    */
-  trackHeightSM: number;
+  trackHeightSM: number | string;
   /**
    * @desc 开关最小宽度
    * @descEN Minimum width of Switch
    */
-  trackMinWidth: number;
+  trackMinWidth: number | string;
   /**
    * @desc 小号开关最小宽度
    * @descEN Minimum width of small Switch
    */
-  trackMinWidthSM: number;
+  trackMinWidthSM: number | string;
   /**
    * @desc 开关内边距
    * @descEN Padding of Switch
@@ -108,6 +108,11 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
         [`${componentCls}-inner`]: {
           paddingInlineStart: innerMaxMarginSM,
           paddingInlineEnd: innerMinMarginSM,
+
+          [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
+            minHeight: trackHeightSM,
+          },
+
           [`${switchInnerCls}-checked`]: {
             marginInlineStart: `calc(-100% + ${trackPaddingCalc} - ${innerMaxMarginCalc})`,
             marginInlineEnd: `calc(100% - ${trackPaddingCalc} + ${innerMaxMarginCalc})`,
@@ -268,6 +273,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = token => {
           fontSize: token.fontSizeSM,
           transition: `margin-inline-start ${token.switchDuration} ease-in-out, margin-inline-end ${token.switchDuration} ease-in-out`,
           pointerEvents: 'none',
+          minHeight: trackHeight,
         },
 
         [`${switchInnerCls}-checked`]: {
@@ -327,7 +333,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
       boxSizing: 'border-box',
       minWidth: trackMinWidth,
       height: trackHeight,
-      lineHeight: `${unit(trackHeight)}`,
+      lineHeight: unit(trackHeight),
       verticalAlign: 'middle',
       background: token.colorTextQuaternary,
       border: '0',
@@ -365,7 +371,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
         direction: 'rtl',
       },
     },
-  } as CSSObject;
+  };
 };
 
 // ============================== Export ==============================