npm - @nutui/nutui-react-taro - Versions diffs - 4.0.0-beta.2 → 4.0.0-beta.4 - Mend

@nutui/nutui-react-taro 4.0.0-beta.2 → 4.0.0-beta.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (503) hide show

package/dist/es/packages/swiper/style/style.harmony.css CHANGED Viewed

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-indicator {
   display: flex;
   width: auto;
@@ -20,59 +16,87 @@ page {
   align-items: center;
 }
 .nut-indicator-fixed-width {
-  width: 21px;
+  width: var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-dot, .nut-indicator-line {
   display: inline-block;
   vertical-align: middle;
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: 50%;
-  background-color: var(--nutui-color-border-disabled, #c2c4cc);
+  background-color: var(--nutui-indicator-dot-inactive-color, var(--nutui-color-background-component, #f0f2f7));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  box-sizing: border-box;
   margin-left: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
-  opacity: 0.4;
 }
 .nut-indicator-dot-0, .nut-indicator-line-0 {
   margin-left: 0px;
 }
 .nut-indicator-dot-active, .nut-indicator-line-active {
-  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
-  opacity: 1;
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-indicator-fixed-width .nut-indicator-dot {
-  width: 12px;
+  width: var(--nutui-indicator-dual-screen-inactive-width, calc(16px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-fixed-width .nut-indicator-dot-active {
-  width: 6px;
+  width: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width {
   justify-content: flex-start;
-  height: 21px;
+  height: var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1)));
   width: auto;
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot {
-  width: 3px;
-  height: 12px;
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dual-screen-inactive-width, calc(16px * var(--nut-scale-f, 1)));
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
 }
 .nut-indicator-vertical.nut-indicator-fixed-width .nut-indicator-dot-active {
-  height: 6px;
-}
-.nut-indicator-vertical.nut-indicator-fixed-width.nut-indicator-fixed-width.nut-indicator-white .nut-indicator-dot-active {
-  height: 6px;
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-line {
-  width: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1)));
   margin: 0;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
   background-color: transparent;
+  border: none;
 }
 .nut-indicator-line-active {
+  position: relative;
+  z-index: 1;
   transition: transform 0.3s ease-in-out;
   background: var(--nutui-indicator-color, var(--nutui-color-primary, #ff0f23));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
+  transform: translateX(calc(var(--nutui-indicator-current, 0) / (var(--nutui-indicator-total, 2) - 1) * (var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1))) - var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1))))));
+}
+.nut-indicator-outside {
+  margin-top: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  margin-bottom: var(--nutui-indicator-placement-safe-gap, calc(12px * var(--nut-scale-f, 1)));
+  justify-content: center;
+}
+.nut-indicator-inside-top-right {
+  position: absolute;
+  top: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  right: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-indicator-inside-bottom-center {
+  position: absolute;
+  bottom: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  left: 50%;
+  transform: translateX(-50%);
+}
+.nut-indicator-inside-bottom-left {
+  position: absolute;
+  bottom: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+  left: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-track {
@@ -86,32 +110,30 @@ page {
   height: 100%;
   box-sizing: border-box;
   border-radius: var(--nutui-indicator-border-radius, var(--nutui-radius-xxs, calc(2px * var(--nut-scale-f, 1))));
-  background-color: var(--nutui-color-border-disabled, #c2c4cc);
-  opacity: 0.4;
+  background-color: var(--nutui-indicator-dot-inactive-color, var(--nutui-color-background-component, #f0f2f7));
+  border: var(--nutui-indicator-dot-border, calc(0.33px * var(--nut-scale-f, 1)) solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-indicator-white .nut-indicator-dot, .nut-indicator-white .nut-indicator-line {
   position: relative;
-  /* #ifndef dynamic*/
-  box-sizing: content-box;
-  /* #endif */
-  background: rgba(255, 255, 255, 0.4);
-  opacity: 1;
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 0.4;
 }
 .nut-indicator-white .nut-indicator-line {
   opacity: 0;
 }
 .nut-indicator-white .nut-indicator-line-active {
   opacity: 1;
-  background: rgb(255, 255, 255);
+  background: var(--nutui-color-primary-text, #ffffff);
 }
 .nut-indicator-white .nut-indicator-dot-active {
-  background: rgb(255, 255, 255);
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 1;
 }
 .nut-indicator-track.nut-indicator-white:after {
-  border: 1px solid rgba(0, 0, 0, 0.06);
-  background: rgba(255, 255, 255, 0.4);
+  background: var(--nutui-color-primary-text, #ffffff);
+  opacity: 0.4;
 }
 .nut-indicator-vertical {
@@ -128,12 +150,15 @@ page {
   margin-top: 0px;
 }
 .nut-indicator-vertical .nut-indicator-dot-active {
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-dot-active-size, calc(8px * var(--nut-scale-f, 1)));
 }
 .nut-indicator-vertical.nut-indicator-track .nut-indicator-line {
-  width: var(--nutui-indicator-dot-size, calc(3px * var(--nut-scale-f, 1)));
-  height: var(--nutui-indicator-dot-active-size, calc(6px * var(--nut-scale-f, 1)));
+  width: var(--nutui-indicator-dot-size, calc(4px * var(--nut-scale-f, 1)));
+  height: var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1)));
+}
+.nut-indicator-vertical.nut-indicator-track .nut-indicator-line-active {
+  transform: translateY(calc(var(--nutui-indicator-current, 0) / (var(--nutui-indicator-total, 2) - 1) * (var(--nutui-indicator-track-width, calc(24px * var(--nut-scale-f, 1))) - var(--nutui-indicator-slider-width, calc(8px * var(--nut-scale-f, 1))))));
 }
 [dir=rtl] .nut-indicator-dot-0,
@@ -141,6 +166,16 @@ page {
   margin-right: var(--nutui-indicator-dot-margin, var(--nutui-spacing-xxs, calc(4px * var(--nut-scale-f, 1))));
   margin-left: 0px;
 }
+[dir=rtl] .nut-indicator-inside-top-right,
+.nut-rtl .nut-indicator-inside-top-right {
+  right: auto;
+  left: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
+[dir=rtl] .nut-indicator-inside-bottom-left,
+.nut-rtl .nut-indicator-inside-bottom-left {
+  left: auto;
+  right: var(--nutui-indicator-placement-gap, calc(8px * var(--nut-scale-f, 1)));
+}
 .nut-swiper {
   width: 100%;

package/dist/es/packages/swiperitem/style/style.css CHANGED Viewed

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-swiper-item {
   height: 100%;
 }

package/dist/es/packages/swiperitem/style/style.harmony.css CHANGED Viewed

@@ -8,10 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-swiper-item {
   height: 100%;
 }

package/dist/es/packages/switch/style/style.css CHANGED Viewed

@@ -8,11 +8,13 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-switch {
+  --nut-switch-height: var(--nutui-switch-height, calc(24px * var(--nut-scale-f, 1)));
+  --nut-switch-inside-width: var(--nutui-switch-inside-width, calc(32px * var(--nut-scale-f, 1)));
+  --nut-switch-border-width: var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1)));
+  --nut-switch-label-margin-offset: calc(
+    var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
+  );
   cursor: pointer;
   position: relative;
   /* #ifdef dynamic*/
@@ -23,9 +25,8 @@ page {
   /* #endif */
   flex-direction: row;
   align-items: center;
-  min-width: var(--nutui-switch-width, calc(46px * var(--nut-scale-f, 1)));
-  height: var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1)));
-  line-height: var(--nutui-switch-line-height, calc(28px * var(--nut-scale-f, 1)));
+  min-width: var(--nutui-switch-width, calc(56px * var(--nut-scale-f, 1)));
+  height: var(--nutui-switch-height, calc(24px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-switch-border-radius, calc(50px * var(--nut-scale-f, 1)));
   background-size: 100% 100%;
@@ -41,39 +42,39 @@ page {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2);
-  width: calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2);
-  border-radius: var(--nutui-switch-inside-border-radius, 50%);
-  background: #ffffff;
+  height: var(--nutui-switch-inside-height, calc(20px * var(--nut-scale-f, 1)));
+  width: var(--nutui-switch-inside-width, calc(32px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-switch-inside-border-radius, calc(50px * var(--nut-scale-f, 1)));
+  background: var(--nutui-color-primary-text, #ffffff);
   transition: left 0.3s linear;
-  box-shadow: var(--nutui-switch-inside-box-shadow, 0px calc(2px * var(--nut-scale-f, 1)) calc(6px * var(--nut-scale-f, 1)) 0px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--nutui-switch-inside-box-shadow, 0px calc(4px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)) 0px rgba(0, 0, 0, 0.12));
 }
 .nut-switch-button-open {
-  left: calc(100% - var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) + var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))));
+  left: calc(100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width));
 }
 .nut-switch-button-open-rtl {
-  left: var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1)));
+  left: var(--nut-switch-border-width);
 }
 .nut-switch-button-close {
-  left: var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1)));
+  left: var(--nut-switch-border-width);
 }
 .nut-switch-button-close-rtl {
-  left: calc(100% - var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) + var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))));
-}
-.nut-switch-button .nut-icon {
-  width: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
-  height: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
-  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
+  left: calc(100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-switch-close-line {
-  width: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
+  width: calc((var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5);
   height: calc(2px * var(--nut-scale-f, 1));
-  background: var(--nutui-switch-inactive-line-background-color, #ffffff);
+  background: var(--nutui-switch-inactive-line-background-color, var(--nutui-color-primary-text, #ffffff));
   border-radius: calc(2px * var(--nut-scale-f, 1));
 }
+.nut-switch .nut-icon {
+  width: calc(var(--nut-switch-height) * 0.5);
+  height: calc(var(--nut-switch-height) * 0.5);
+  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
+}
 .nut-switch-label {
   /* #ifdef dynamic*/
   display: flex;
@@ -84,33 +85,33 @@ page {
   align-items: center;
   height: 100%;
   white-space: nowrap;
-  color: var(--nutui-switch-label-text-color, #ffffff);
-  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-switch-label .nut-icon {
-  color: var(--nutui-switch-label-text-color, #ffffff);
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-switch-label-open {
-  margin: 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1)) 0 calc(7px * var(--nut-scale-f, 1));
+  margin: 0 var(--nut-switch-label-margin-offset) 0 calc(7px * var(--nut-scale-f, 1));
 }
 .nut-switch-label-open-rtl {
-  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1));
+  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 var(--nut-switch-label-margin-offset);
 }
 .nut-switch-label-close {
-  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1));
+  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 var(--nut-switch-label-margin-offset);
 }
 .nut-switch-label-close-rtl {
-  margin: 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1)) 0 calc(7px * var(--nut-scale-f, 1));
+  margin: 0 var(--nut-switch-label-margin-offset) 0 calc(7px * var(--nut-scale-f, 1));
 }
 .nut-switch-label-close-disabled {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-switch-label-close-disabled .nut-icon {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-switch-disabled {
   background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
 .nut-switch-disabled-close {
-  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background-component));
 }

package/dist/es/packages/switch/style/style.harmony.css CHANGED Viewed

@@ -8,11 +8,13 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
-/* #ifdef harmony */
-/* #endif */
-/* #ifndef harmony */
-/* #endif */
 .nut-switch {
+  --nut-switch-height: var(--nutui-switch-height, calc(24px * var(--nut-scale-f, 1)));
+  --nut-switch-inside-width: var(--nutui-switch-inside-width, calc(32px * var(--nut-scale-f, 1)));
+  --nut-switch-border-width: var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1)));
+  --nut-switch-label-margin-offset: calc(
+    var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
+  );
   cursor: pointer;
   position: relative;
   /* #ifdef dynamic*/
@@ -23,9 +25,8 @@ page {
   /* #endif */
   flex-direction: row;
   align-items: center;
-  min-width: var(--nutui-switch-width, calc(46px * var(--nut-scale-f, 1)));
-  height: var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1)));
-  line-height: var(--nutui-switch-line-height, calc(28px * var(--nut-scale-f, 1)));
+  min-width: var(--nutui-switch-width, calc(56px * var(--nut-scale-f, 1)));
+  height: var(--nutui-switch-height, calc(24px * var(--nut-scale-f, 1)));
   background-color: var(--nutui-switch-active-background-color, var(--nutui-color-primary, #ff0f23));
   border-radius: var(--nutui-switch-border-radius, calc(50px * var(--nut-scale-f, 1)));
   background-size: 100% 100%;
@@ -41,39 +42,39 @@ page {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  height: calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2);
-  width: calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2);
-  border-radius: var(--nutui-switch-inside-border-radius, 50%);
-  background: #ffffff;
+  height: var(--nutui-switch-inside-height, calc(20px * var(--nut-scale-f, 1)));
+  width: var(--nutui-switch-inside-width, calc(32px * var(--nut-scale-f, 1)));
+  border-radius: var(--nutui-switch-inside-border-radius, calc(50px * var(--nut-scale-f, 1)));
+  background: var(--nutui-color-primary-text, #ffffff);
   transition: left 0.3s linear;
-  box-shadow: var(--nutui-switch-inside-box-shadow, 0px calc(2px * var(--nut-scale-f, 1)) calc(6px * var(--nut-scale-f, 1)) 0px rgba(0, 0, 0, 0.1));
+  box-shadow: var(--nutui-switch-inside-box-shadow, 0px calc(4px * var(--nut-scale-f, 1)) calc(8px * var(--nut-scale-f, 1)) 0px rgba(0, 0, 0, 0.12));
 }
 .nut-switch-button-open {
-  left: calc(100% - var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) + var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))));
+  left: calc(100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width));
 }
 .nut-switch-button-open-rtl {
-  left: var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1)));
+  left: var(--nut-switch-border-width);
 }
 .nut-switch-button-close {
-  left: var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1)));
+  left: var(--nut-switch-border-width);
 }
 .nut-switch-button-close-rtl {
-  left: calc(100% - var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) + var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))));
-}
-.nut-switch-button .nut-icon {
-  width: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
-  height: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
-  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
+  left: calc(100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width));
 }
 .nut-switch-close {
-  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #c2c4cc));
+  background-color: var(--nutui-switch-inactive-background-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-switch-close-line {
-  width: calc((var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) * 2) / 2);
+  width: calc((var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5);
   height: calc(2px * var(--nut-scale-f, 1));
-  background: var(--nutui-switch-inactive-line-background-color, #ffffff);
+  background: var(--nutui-switch-inactive-line-background-color, var(--nutui-color-primary-text, #ffffff));
   border-radius: calc(2px * var(--nut-scale-f, 1));
 }
+.nut-switch .nut-icon {
+  width: calc(var(--nut-switch-height) * 0.5);
+  height: calc(var(--nut-switch-height) * 0.5);
+  color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
+}
 .nut-switch-label {
   /* #ifdef dynamic*/
   display: flex;
@@ -84,33 +85,33 @@ page {
   align-items: center;
   height: 100%;
   white-space: nowrap;
-  color: var(--nutui-switch-label-text-color, #ffffff);
-  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-s, calc(12px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
+  font-size: var(--nutui-switch-label-font-size, var(--nutui-font-size-xs, calc(11px * var(--nut-scale-font, var(--nut-scale-f, 1)))));
 }
 .nut-switch-label .nut-icon {
-  color: var(--nutui-switch-label-text-color, #ffffff);
+  color: var(--nutui-switch-label-text-color, var(--nutui-color-primary-text, #ffffff));
 }
 .nut-switch-label-open {
-  margin: 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1)) 0 calc(7px * var(--nut-scale-f, 1));
+  margin: 0 var(--nut-switch-label-margin-offset) 0 calc(7px * var(--nut-scale-f, 1));
 }
 .nut-switch-label-open-rtl {
-  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1));
+  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 var(--nut-switch-label-margin-offset);
 }
 .nut-switch-label-close {
-  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1));
+  margin: 0 calc(7px * var(--nut-scale-f, 1)) 0 var(--nut-switch-label-margin-offset);
 }
 .nut-switch-label-close-rtl {
-  margin: 0 calc(var(--nutui-switch-height, calc(28px * var(--nut-scale-f, 1))) - var(--nutui-switch-border-width, calc(2px * var(--nut-scale-f, 1))) + 3px * var(--nut-scale-f, 1)) 0 calc(7px * var(--nut-scale-f, 1));
+  margin: 0 var(--nut-switch-label-margin-offset) 0 calc(7px * var(--nut-scale-f, 1));
 }
 .nut-switch-label-close-disabled {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-switch-label-close-disabled .nut-icon {
-  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #c2c4cc));
+  color: var(--nutui-switch-inactive-disabled-label-text-color, var(--nutui-color-text-disabled, #b4b8bf));
 }
 .nut-switch-disabled {
   background-color: var(--nutui-switch-active-disabled-background-color, var(--nutui-color-primary-disabled-special, #ff91a5));
 }
 .nut-switch-disabled-close {
-  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background, #f2f3f5));
+  background-color: var(--nutui-switch-inactive-disabled-background-color, var(--nutui-color-background-component));
 }

package/dist/es/packages/switch/style/switch.scss CHANGED Viewed

@@ -1,4 +1,11 @@
 .nut-switch {
+  --nut-switch-height: #{$switch-height};
+  --nut-switch-inside-width: #{$switch-inside-width};
+  --nut-switch-border-width: #{$switch-border-width};
+  --nut-switch-label-margin-offset: calc(
+    var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
+  );
   cursor: pointer;
   position: relative;
   /* #ifdef dynamic*/
@@ -11,13 +18,12 @@
   align-items: center;
   min-width: $switch-width;
   height: $switch-height;
-  line-height: $switch-line-height;
   background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
   background-position: center center;
-  flex: 0 0 auto; // 防止被压缩
+  flex: 0 0 auto;
   &-button {
     position: absolute;
@@ -27,41 +33,48 @@
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: calc($switch-height - $switch-border-width * 2);
-    width: calc($switch-height - $switch-border-width * 2);
+    height: $switch-inside-height;
+    width: $switch-inside-width;
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
     transition: left 0.3s linear;
     box-shadow: $switch-inside-box-shadow;
     &-open {
-      left: calc(100% - $switch-height + $switch-border-width);
+      left: calc(
+        100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
+      );
       &-rtl {
-        left: $switch-border-width;
+        left: var(--nut-switch-border-width);
       }
     }
     &-close {
-      left: $switch-border-width;
+      left: var(--nut-switch-border-width);
       &-rtl {
-        left: calc(100% - $switch-height + $switch-border-width);
+        left: calc(
+          100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
+        );
       }
     }
-    .nut-icon {
-      width: calc(($switch-height - $switch-border-width * 2) / 2);
-      height: calc(($switch-height - $switch-border-width * 2) / 2);
-      color: $switch-active-disabled-background-color;
-    }
   }
   &-close {
     background-color: $switch-inactive-background-color;
     &-line {
-      width: calc(($switch-height - $switch-border-width * 2) / 2);
+      width: calc(
+        (var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5
+      );
       height: scale-px(2px);
       background: $switch-inactive-line-background-color;
       border-radius: scale-px(2px);
     }
   }
+  .nut-icon {
+    width: calc(var(--nut-switch-height) * 0.5);
+    height: calc(var(--nut-switch-height) * 0.5);
+    color: $switch-active-disabled-background-color;
+  }
   &-label {
     /* #ifdef dynamic*/
     display: flex;
@@ -78,16 +91,16 @@
       color: $switch-label-text-color;
     }
     &-open {
-      margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0 scale-px(7px);
+      margin: 0 var(--nut-switch-label-margin-offset) 0 scale-px(7px);
       &-rtl {
-        margin: 0 scale-px(7px) 0 calc($switch-height - $switch-border-width + scale-px(3px));
+        margin: 0 scale-px(7px) 0 var(--nut-switch-label-margin-offset);
       }
     }
     &-close {
-      margin: 0 scale-px(7px) 0 calc($switch-height - $switch-border-width + scale-px(3px));
+      margin: 0 scale-px(7px) 0 var(--nut-switch-label-margin-offset);
       &-rtl {
-        margin: 0 calc($switch-height - $switch-border-width + scale-px(3px)) 0 scale-px(7px);
+        margin: 0 var(--nut-switch-label-margin-offset) 0 scale-px(7px);
       }
     }