fix(Switch): fixed disabled style error in dark mode

Author: anlyyao

src/common/style/theme/_components.less

@@ -18,5 +18,7 @@
     --td-slider-dot-disabled-border-color: var(--td-gray-color-12);
 
     --td-picker-transparent-color: transparent;
+
+    --td-switch-dot-disabled-color: var(--td-font-white-2);
   }
 }

src/switch/README.en-US.md

@@ -30,7 +30,7 @@ Name | Default Value | Description
 -- | -- | --
 --td-switch-checked-color | @brand-color | - 
 --td-switch-checked-disabled-color | @brand-color-disabled | - 
---td-switch-dot-border-color | @bg-color-secondarycontainer | - 
+--td-switch-dot-disabled-color | @font-white-1 | - 
 --td-switch-dot-horizontal-margin | 6rpx | - 
 --td-switch-dot-large-size | 52rpx | - 
 --td-switch-dot-plain-horizontal-margin | 10rpx | - 
@@ -45,7 +45,7 @@ Name | Default Value | Description
 --td-switch-icon-size | 40rpx | - 
 --td-switch-icon-small-size | 32rpx | - 
 --td-switch-label-checked-color | @switch-checked-color | - 
---td-switch-label-color | @font-gray-4 | - 
+--td-switch-label-color | @bg-color-secondarycontainer-active | - 
 --td-switch-label-font-size | 28rpx | - 
 --td-switch-label-large-font-size | 32rpx | - 
 --td-switch-label-small-font-size | 24rpx | - 
@@ -56,6 +56,6 @@ Name | Default Value | Description
 --td-switch-small-height | 48rpx | - 
 --td-switch-small-radius | calc(@switch-small-height / 2) | - 
 --td-switch-small-width | 78rpx | - 
---td-switch-unchecked-color | @font-gray-4 | - 
+--td-switch-unchecked-color | @bg-color-secondarycontainer-active | - 
 --td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
---td-switch-width | 90rpx | -
+--td-switch-width | 90rpx | - 

src/switch/README.md

@@ -74,7 +74,7 @@ change | `(value: SwitchValue)` | 数据发生变化时触发
 -- | -- | --
 --td-switch-checked-color | @brand-color | - 
 --td-switch-checked-disabled-color | @brand-color-disabled | - 
---td-switch-dot-border-color | @bg-color-secondarycontainer | - 
+--td-switch-dot-disabled-color | @font-white-1 | - 
 --td-switch-dot-horizontal-margin | 6rpx | - 
 --td-switch-dot-large-size | 52rpx | - 
 --td-switch-dot-plain-horizontal-margin | 10rpx | - 
@@ -89,7 +89,7 @@ change | `(value: SwitchValue)` | 数据发生变化时触发
 --td-switch-icon-size | 40rpx | - 
 --td-switch-icon-small-size | 32rpx | - 
 --td-switch-label-checked-color | @switch-checked-color | - 
---td-switch-label-color | @font-gray-4 | - 
+--td-switch-label-color | @bg-color-secondarycontainer-active | - 
 --td-switch-label-font-size | 28rpx | - 
 --td-switch-label-large-font-size | 32rpx | - 
 --td-switch-label-small-font-size | 24rpx | - 
@@ -100,6 +100,6 @@ change | `(value: SwitchValue)` | 数据发生变化时触发
 --td-switch-small-height | 48rpx | - 
 --td-switch-small-radius | calc(@switch-small-height / 2) | - 
 --td-switch-small-width | 78rpx | - 
---td-switch-unchecked-color | @font-gray-4 | - 
+--td-switch-unchecked-color | @bg-color-secondarycontainer-active | - 
 --td-switch-unchecked-disabled-color | @bg-color-component-disabled | - 
---td-switch-width | 90rpx | -
+--td-switch-width | 90rpx | - 

src/switch/switch.less

@@ -4,6 +4,7 @@
 @switch-checked-disabled-color: var(--td-switch-checked-disabled-color, @brand-color-disabled);
 @switch-unchecked-color: var(--td-switch-unchecked-color, @bg-color-secondarycontainer-active);
 @switch-unchecked-disabled-color: var(--td-switch-unchecked-disabled-color, @bg-color-component-disabled);
+@switch-dot-disabled-color: var(--td-switch-dot-disabled-color, @font-white-1);
 
 @switch-width: var(--td-switch-width, 90rpx);
 @switch-height: var(--td-switch-height, 56rpx);
@@ -24,7 +25,6 @@
 @switch-dot-horizontal-margin: var(--td-switch-dot-horizontal-margin, 6rpx);
 @switch-dot-plain-horizontal-margin: var(--td-switch-dot-plain-horizontal-margin, 10rpx);
 @switch-dot-shadow: var(--td-switch-dot-shadow, @shadow-1);
-@switch-dot-border-color: var(--td-switch-dot-border-color, @gray-color-4);
 
 // large dot
 @switch-dot-large-size: var(--td-switch-dot-large-size, 52rpx);
@@ -153,19 +153,8 @@
     transform: translateY(-50%);
     box-shadow: @switch-dot-shadow;
 
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 200%;
-      height: 200%;
-      border: 1px solid @switch-dot-border-color;
-      border-radius: 50%;
-      transform: scale(0.5);
-      transform-origin: 0 0;
-      box-sizing: border-box;
+    &--disabled {
+      background-color: @switch-dot-disabled-color;
     }
 
     &--large {

src/switch/switch.wxml

@@ -12,7 +12,7 @@
     class="{{_.cls(classPrefix + '__body', [['checked', checked], ['disabled', disabled || loading], size])}} {{prefix}}-class-body"
   >
     <view
-      class="{{_.cls(classPrefix + '__dot', [['checked', checked], ['plain', label.length != 2 && icon.length != 2 && !loading], size])}} {{prefix}}-class-dot"
+      class="{{_.cls(classPrefix + '__dot', [['checked', checked], ['disabled', disabled], ['plain', label.length != 2 && icon.length != 2 && !loading], size])}} {{prefix}}-class-dot"
       aria-hidden="{{true}}"
     >
       <view