@sdata/web-vue 1.18.0 → 2.1.0

package/es/steps/style/index.css

@@ -44,48 +44,48 @@
   font-size: 16px;
   line-height: 26px;
   text-align: center;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-steps-item-wait .sd-steps-icon {
-  color: var(--color-text-2);
-  background-color: var(--color-fill-2);
+  color: var(--sd-color-text-2);
+  background-color: var(--sd-color-fill-2);
   border: 1px solid transparent;
 }
 .sd-steps-item-process .sd-steps-icon {
-  color: var(--color-white);
-  background-color: rgb(var(--primary-6));
+  color: var(--sd-color-white);
+  background-color: rgb(var(--sd-primary-6));
   border: 1px solid transparent;
 }
 .sd-steps-item-finish .sd-steps-icon {
-  color: rgb(var(--primary-6));
-  background-color: var(--color-primary-light-1);
+  color: rgb(var(--sd-primary-6));
+  background-color: var(--sd-color-primary-light-1);
   border: 1px solid transparent;
 }
 .sd-steps-item-error .sd-steps-icon {
-  color: var(--color-white);
-  background-color: rgb(var(--danger-6));
+  color: var(--sd-color-white);
+  background-color: rgb(var(--sd-danger-6));
   border: 1px solid transparent;
 }
 .sd-steps-item-title {
   position: relative;
   display: inline-block;
   padding-right: 12px;
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
   font-size: 16px;
   line-height: 28px;
   white-space: nowrap;
 }
 .sd-steps-item-wait .sd-steps-item-title {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-steps-item-process .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-item-finish .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-item-error .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-item-content {
   display: inline-block;
@@ -93,21 +93,21 @@
 .sd-steps-item-description {
   max-width: 140px;
   margin-top: 2px;
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
   font-size: 12px;
   white-space: normal;
 }
 .sd-steps-item-wait .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-item-process .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-item-finish .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-item-error .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-label-horizontal .sd-steps-item:not(:last-child) .sd-steps-item-title::after {
   position: absolute;
@@ -117,17 +117,17 @@
   box-sizing: border-box;
   width: 5000px;
   height: 1px;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
   content: "";
 }
 .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-process .sd-steps-item-title::after {
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
 }
 .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-finish .sd-steps-item-title::after {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-label-horizontal .sd-steps-item.sd-steps-item-next-error .sd-steps-item-title::after {
-  background-color: rgb(var(--danger-6));
+  background-color: rgb(var(--sd-danger-6));
 }
 .sd-steps-item:not(:last-child) .sd-steps-item-tail {
   position: absolute;
@@ -140,7 +140,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
   content: "";
 }
 .sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
@@ -156,7 +156,7 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
   content: "";
 }
 .sd-steps-size-small.sd-steps-vertical .sd-steps-item:not(:last-child) .sd-steps-item-tail {
@@ -164,10 +164,10 @@
   padding: 30px 0 6px;
 }
 .sd-steps-item:not(:last-child).sd-steps-item-finish .sd-steps-item-tail::after {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-item:not(:last-child).sd-steps-item-next-error .sd-steps-item-tail::after {
-  background-color: rgb(var(--danger-6));
+  background-color: rgb(var(--sd-danger-6));
 }
 .sd-steps-size-small:not(.sd-steps-vertical) .sd-steps-item:not(:last-child) .sd-steps-item-tail {
   top: 11.5px;
@@ -234,27 +234,27 @@
   width: 8px;
   height: 8px;
   vertical-align: top;
-  border-radius: var(--border-radius-circle);
+  border-radius: var(--sd-border-radius-circle);
 }
 .sd-steps-mode-dot .sd-steps-item-active .sd-steps-item-node {
   width: 10px;
   height: 10px;
 }
 .sd-steps-mode-dot .sd-steps-item-wait .sd-steps-item-node {
-  background-color: var(--color-fill-4);
-  border-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
+  border-color: var(--sd-color-fill-4);
 }
 .sd-steps-mode-dot .sd-steps-item-process .sd-steps-item-node {
-  background-color: rgb(var(--primary-6));
-  border-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
+  border-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-dot .sd-steps-item-finish .sd-steps-item-node {
-  background-color: rgb(var(--primary-6));
-  border-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
+  border-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-dot .sd-steps-item-error .sd-steps-item-node {
-  background-color: rgb(var(--danger-6));
-  border-color: rgb(var(--danger-6));
+  background-color: rgb(var(--sd-danger-6));
+  border-color: rgb(var(--sd-danger-6));
 }
 .sd-steps-mode-dot.sd-steps-horizontal .sd-steps-item-node {
   margin-left: 66px;
@@ -273,16 +273,16 @@
   font-size: 16px;
 }
 .sd-steps-mode-dot .sd-steps-item-wait .sd-steps-item-title {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-steps-mode-dot .sd-steps-item-process .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-mode-dot .sd-steps-item-finish .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-mode-dot .sd-steps-item-error .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-mode-dot .sd-steps-item-description {
   margin-top: 4px;
@@ -290,16 +290,16 @@
   white-space: normal;
 }
 .sd-steps-mode-dot .sd-steps-item-wait .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-mode-dot .sd-steps-item-process .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-mode-dot .sd-steps-item-finish .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-mode-dot .sd-steps-item-error .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-mode-dot .sd-steps-item:not(:last-child) .sd-steps-item-tail {
   position: absolute;
@@ -308,16 +308,16 @@
   box-sizing: border-box;
   width: 100%;
   height: 1px;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
 }
 .sd-steps-mode-dot .sd-steps-item:not(:last-child).sd-steps-item-process .sd-steps-item-tail {
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
 }
 .sd-steps-mode-dot .sd-steps-item:not(:last-child).sd-steps-item-finish .sd-steps-item-tail {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-dot .sd-steps-item:not(:last-child).sd-steps-item-next-error .sd-steps-item-tail {
-  background-color: rgb(var(--danger-6));
+  background-color: rgb(var(--sd-danger-6));
 }
 .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item-node {
   margin-right: 16px;
@@ -347,17 +347,17 @@
   display: block;
   width: 100%;
   height: 100%;
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
   content: "";
 }
 .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-process .sd-steps-item-tail::after {
-  background-color: var(--color-neutral-3);
+  background-color: var(--sd-color-neutral-3);
 }
 .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-finish .sd-steps-item-tail::after {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item:not(:last-child).sd-steps-item-next-error .sd-steps-item-tail::after {
-  background-color: rgb(var(--danger-6));
+  background-color: rgb(var(--sd-danger-6));
 }
 .sd-steps-mode-dot.sd-steps-vertical .sd-steps-item .sd-steps-item-node {
   margin-top: 8px;
@@ -380,16 +380,16 @@
   margin-right: 4px;
 }
 .sd-steps-mode-arrow .sd-steps-item-wait {
-  background-color: var(--color-fill-1);
+  background-color: var(--sd-color-fill-1);
 }
 .sd-steps-mode-arrow .sd-steps-item-process {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-arrow .sd-steps-item-finish {
-  background-color: var(--color-primary-light-1);
+  background-color: var(--sd-color-primary-light-1);
 }
 .sd-steps-mode-arrow .sd-steps-item-error {
-  background-color: rgb(var(--danger-6));
+  background-color: rgb(var(--sd-danger-6));
 }
 .sd-steps-mode-arrow .sd-steps-item-content {
   display: inline-block;
@@ -411,16 +411,16 @@
   display: none !important;
 }
 .sd-steps-mode-arrow .sd-steps-item-wait .sd-steps-item-title {
-  color: var(--color-text-2);
+  color: var(--sd-color-text-2);
 }
 .sd-steps-mode-arrow .sd-steps-item-process .sd-steps-item-title {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-steps-mode-arrow .sd-steps-item-finish .sd-steps-item-title {
-  color: var(--color-text-1);
+  color: var(--sd-color-text-1);
 }
 .sd-steps-mode-arrow .sd-steps-item-error .sd-steps-item-title {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-steps-mode-arrow .sd-steps-item-active .sd-steps-item-title {
   font-weight: 500;
@@ -432,16 +432,16 @@
   white-space: nowrap;
 }
 .sd-steps-mode-arrow .sd-steps-item-wait .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-mode-arrow .sd-steps-item-process .sd-steps-item-description {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-steps-mode-arrow .sd-steps-item-finish .sd-steps-item-description {
-  color: var(--color-text-3);
+  color: var(--sd-color-text-3);
 }
 .sd-steps-mode-arrow .sd-steps-item-error .sd-steps-item-description {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:first-child)::before {
   position: absolute;
@@ -453,7 +453,7 @@
   height: 0;
   border-top: 36px solid transparent;
   border-bottom: 36px solid transparent;
-  border-left: 36px solid var(--color-bg-2);
+  border-left: 36px solid var(--sd-color-bg-2);
   content: "";
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child)::after {
@@ -470,16 +470,16 @@
   content: "";
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child).sd-steps-item-wait::after {
-  border-left: 36px solid var(--color-fill-1);
+  border-left: 36px solid var(--sd-color-fill-1);
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child).sd-steps-item-process::after {
-  border-left: 36px solid rgb(var(--primary-6));
+  border-left: 36px solid rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child).sd-steps-item-error::after {
-  border-left: 36px solid rgb(var(--danger-6));
+  border-left: 36px solid rgb(var(--sd-danger-6));
 }
 .sd-steps-mode-arrow .sd-steps-item:not(:last-child).sd-steps-item-finish::after {
-  border-left: 36px solid var(--color-primary-light-1);
+  border-left: 36px solid var(--sd-color-primary-light-1);
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item {
   height: 40px;
@@ -493,13 +493,13 @@
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:not(:first-child)::before {
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
-  border-left: 20px solid var(--color-bg-2);
+  border-left: 20px solid var(--sd-color-bg-2);
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:not(:last-child)::after {
   right: -20px;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
-  border-left: 20px solid var(--color-fill-1);
+  border-left: 20px solid var(--sd-color-fill-1);
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:first-child .sd-steps-item-content {
   padding-left: 20px;
@@ -508,16 +508,16 @@
   padding-left: 40px;
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item-error:not(:last-child)::after {
-  border-left: 20px solid rgb(var(--danger-6));
+  border-left: 20px solid rgb(var(--sd-danger-6));
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:not(:last-child).sd-steps-item-wait::after {
-  border-left: 20px solid var(--color-fill-1);
+  border-left: 20px solid var(--sd-color-fill-1);
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:not(:last-child).sd-steps-item-process::after {
-  border-left: 20px solid rgb(var(--primary-6));
+  border-left: 20px solid rgb(var(--sd-primary-6));
 }
 .sd-steps-mode-arrow.sd-steps-size-small .sd-steps-item:not(:last-child).sd-steps-item-finish::after {
-  border-left: 20px solid var(--color-primary-light-1);
+  border-left: 20px solid var(--sd-color-primary-light-1);
 }
 
 .sd-steps-mode-navigation.sd-steps-label-horizontal .sd-steps-item:not(:last-child) .sd-steps-item-title::after {
@@ -544,7 +544,7 @@
   left: 0;
   display: block;
   height: 2px;
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
   content: "";
 }
 .sd-steps-mode-navigation .sd-steps-item-active:last-child::after {
@@ -557,8 +557,8 @@
   display: inline-block;
   width: 6px;
   height: 6px;
-  background-color: var(--color-bg-2);
-  border: 2px solid var(--color-text-4);
+  background-color: var(--sd-color-bg-2);
+  border: 2px solid var(--sd-color-text-4);
   border-bottom: none;
   border-left: none;
   transform: rotate(45deg);
@@ -577,7 +577,7 @@
 }
 .sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active, .sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-title,
 .sd-steps-changeable .sd-steps-item:not(.sd-steps-item-active, .sd-steps-item-disabled):hover .sd-steps-item-content .sd-steps-item-description {
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 
 .sd-steps-line-less .sd-steps-item-title::after {

package/es/style/color/colors.scss

@@ -1,5 +1,5 @@
 @use 'sass:string';
-$sd-vars-prefix: string.unquote('');
+$sd-vars-prefix: string.unquote('sd');
 $sd-cssvars-prefix: string.unquote('-');
 
 @if $sd-vars-prefix != string.unquote('') {

package/es/style/theme/global.scss

@@ -3,11 +3,11 @@
 
 $sd-theme-tag: ':where(body, [sd-theme])'; // css 变量定义的选择器
 
-$sd-vars-prefix: ''; // css 变量的前缀
+$sd-vars-prefix: 'sd'; // css 变量的前缀
 
-$sd-cssvars-prefix: '-';
+$sd-cssvars-prefix: '--sd';
 
-@if $sd-vars-prefix != '' {
+@if $sd-vars-prefix != 'sd' {
   $sd-cssvars-prefix: '--#{$sd-vars-prefix}';
 }
 
@@ -299,11 +299,11 @@ $dark-color-menu-dark-hover: var(string.unquote('#{$sd-cssvars-prefix}-color-fil
 // variables
 $color-border: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-3')));
 $color-bg-popup: var(string.unquote('#{$sd-cssvars-prefix}-color-bg-5'));
-$color-bg-1: #fff;
-$color-bg-2: #fff;
-$color-bg-3: #fff;
-$color-bg-4: #fff;
-$color-bg-5: #fff;
+$color-bg-1: $gray-1; // Overall page background
+$color-bg-2: #fff; // Primary container background
+$color-bg-3: $gray-1; // Secondary container background
+$color-bg-4: $gray-2; // Three-level container background
+$color-bg-5: #fff; // Popup, dropdown background
 $color-bg-white: #fff;
 $color-text-1: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-10')); // Title, body
 $color-text-2: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-8')); // Statement

package/es/style/theme/index.scss

@@ -7,20 +7,12 @@
 @use '@style/theme/global.scss' as *;
 @use '@style/theme/component.scss' as *;
 
-colors.$sd-vars-prefix: string.unquote('');
-colors.$sd-cssvars-prefix: string.unquote('-');
-
-@if colors.$sd-vars-prefix != string.unquote('') {
-  colors.$sd-cssvars-prefix: string.unquote('--#{colors.$sd-vars-prefix}');
-}
+colors.$sd-vars-prefix: string.unquote('sd');
+colors.$sd-cssvars-prefix: string.unquote('--sd');
 
 $sd-theme-tag: ':where(body, [sd-theme])';
-$sd-vars-prefix: string.unquote('');
-$sd-cssvars-prefix: string.unquote('-');
-
-@if $sd-vars-prefix != string.unquote('') {
-  $sd-cssvars-prefix: string.unquote('--#{$sd-vars-prefix}');
-}
+$sd-vars-prefix: string.unquote('sd');
+$sd-cssvars-prefix: string.unquote('--sd');
 
 $prefix: sd;
 

package/es/style/theme/z-index.js

@@ -1,6 +1,5 @@
 var Z_INDEX_POPUP = 1e3;
-Z_INDEX_POPUP + 1;
-var Z_INDEX_MESSAGE = Z_INDEX_POPUP + 3;
+var Z_INDEX_MESSAGE = 1003;
 var POPUP_STACK_BASE_Z_INDEX = Z_INDEX_POPUP;
 var MESSAGE_STACK_BASE_Z_INDEX = Z_INDEX_MESSAGE - 1;
 //#endregion

package/es/switch/style/index.css

@@ -48,7 +48,7 @@
   overflow: hidden;
   line-height: 24px;
   vertical-align: middle;
-  background-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
   border: none;
   border-radius: 12px;
   outline: none;
@@ -64,30 +64,30 @@
   justify-content: center;
   width: 16px;
   height: 16px;
-  color: var(--color-neutral-3);
+  color: var(--sd-color-neutral-3);
   font-size: 12px;
-  background-color: var(--color-bg-white);
+  background-color: var(--sd-color-bg-white);
   border-radius: 50%;
   transition: all 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-switch-checked {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-switch-checked .sd-switch-handle {
   left: calc(100% - 16px - 4px);
-  color: rgb(var(--primary-6));
+  color: rgb(var(--sd-primary-6));
 }
 .sd-switch[disabled] .sd-switch-handle {
-  color: var(--color-fill-2);
+  color: var(--sd-color-fill-2);
 }
 .sd-switch[disabled].sd-switch-checked .sd-switch-handle {
-  color: var(--color-primary-light-3);
+  color: var(--sd-color-primary-light-3);
 }
 .sd-switch[disabled] .sd-switch-handle {
-  color: var(--color-fill-2);
+  color: var(--sd-color-fill-2);
 }
 .sd-switch[disabled].sd-switch-checked .sd-switch-handle {
-  color: var(--color-primary-light-3);
+  color: var(--sd-color-primary-light-3);
 }
 .sd-switch-text-holder {
   margin: 0 8px 0 26px;
@@ -98,7 +98,7 @@
   position: absolute;
   top: 0;
   left: 26px;
-  color: var(--color-white);
+  color: var(--sd-color-white);
   font-size: 12px;
 }
 .sd-switch-checked .sd-switch-text-holder {
@@ -106,38 +106,38 @@
 }
 .sd-switch-checked .sd-switch-text {
   left: 8px;
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-switch[disabled] {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
   cursor: not-allowed;
 }
 .sd-switch[disabled] .sd-switch-text {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-switch[disabled].sd-switch-checked {
-  background-color: var(--color-primary-light-3);
+  background-color: var(--sd-color-primary-light-3);
 }
 .sd-switch[disabled].sd-switch-checked .sd-switch-text {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-switch-loading {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-switch-loading .sd-switch-handle {
-  color: var(--color-neutral-3);
+  color: var(--sd-color-neutral-3);
 }
 .sd-switch-loading .sd-switch-text {
-  color: var(--color-white);
+  color: var(--sd-color-white);
 }
 .sd-switch-loading.sd-switch-checked {
-  background-color: var(--color-primary-light-3);
+  background-color: var(--sd-color-primary-light-3);
 }
 .sd-switch-loading.sd-switch-checked .sd-switch-handle {
-  color: var(--color-primary-light-3);
+  color: var(--sd-color-primary-light-3);
 }
 .sd-switch-loading.sd-switch-checked .sd-switch-text {
-  color: var(--color-primary-light-1);
+  color: var(--sd-color-primary-light-1);
 }
 .sd-switch-small {
   min-width: 28px;
@@ -166,7 +166,7 @@
 
 .sd-switch-type-round {
   min-width: 40px;
-  border-radius: var(--border-radius-small);
+  border-radius: var(--sd-border-radius-small);
 }
 .sd-switch-type-round .sd-switch-handle {
   border-radius: 2px;
@@ -190,7 +190,7 @@
   display: block;
   width: 100%;
   height: 6px;
-  background-color: var(--color-fill-4);
+  background-color: var(--sd-color-fill-4);
   border-radius: 3px;
   transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
   content: "";
@@ -200,15 +200,15 @@
   left: 0;
   width: 20px;
   height: 20px;
-  background-color: var(--color-bg-white);
+  background-color: var(--sd-color-bg-white);
   border-radius: 10px;
-  box-shadow: 0 1px 3px var(--color-neutral-6);
+  box-shadow: 0 1px 3px var(--sd-color-neutral-6);
 }
 .sd-switch-type-line.sd-switch-checked {
   background-color: transparent;
 }
 .sd-switch-type-line.sd-switch-checked::after {
-  background-color: rgb(var(--primary-6));
+  background-color: rgb(var(--sd-primary-6));
 }
 .sd-switch-type-line.sd-switch-custom-color {
   --custom-color: $switch-color-bg_off;
@@ -227,25 +227,25 @@
   cursor: not-allowed;
 }
 .sd-switch-type-line[disabled]::after {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-switch-type-line[disabled].sd-switch-checked {
   background-color: transparent;
 }
 .sd-switch-type-line[disabled].sd-switch-checked::after {
-  background-color: var(--color-primary-light-3);
+  background-color: var(--sd-color-primary-light-3);
 }
 .sd-switch-type-line.sd-switch-loading {
   background-color: transparent;
 }
 .sd-switch-type-line.sd-switch-loading::after {
-  background-color: var(--color-fill-2);
+  background-color: var(--sd-color-fill-2);
 }
 .sd-switch-type-line.sd-switch-loading.sd-switch-checked {
   background-color: transparent;
 }
 .sd-switch-type-line.sd-switch-loading.sd-switch-checked::after {
-  background-color: var(--color-primary-light-3);
+  background-color: var(--sd-color-primary-light-3);
 }
 .sd-switch-type-line.sd-switch-small {
   min-width: 28px;

package/es/switch/switch.js

@@ -17,6 +17,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 		onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args))
 	}, [createElementVNode("span", { class: normalizeClass(`${_ctx.prefixCls}-handle`) }, [createElementVNode("span", { class: normalizeClass(`${_ctx.prefixCls}-handle-icon`) }, [_ctx.computedLoading ? (openBlock(), createBlock(_component_icon_loading, { key: 0 })) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [_ctx.computedCheck ? renderSlot(_ctx.$slots, "checked-icon", { key: 0 }) : renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 })], 64))], 2)], 2), _ctx.type !== "line" && _ctx.size !== "small" && (_ctx.$slots.checked || _ctx.checkedText || _ctx.$slots.unchecked || _ctx.uncheckedText) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createElementVNode("span", { class: normalizeClass(`${_ctx.prefixCls}-text-holder`) }, [_ctx.computedCheck ? renderSlot(_ctx.$slots, "checked", { key: 0 }, () => [createTextVNode(toDisplayString(_ctx.checkedText), 1)]) : renderSlot(_ctx.$slots, "unchecked", { key: 1 }, () => [createTextVNode(toDisplayString(_ctx.uncheckedText), 1)])], 2), createElementVNode("span", { class: normalizeClass(`${_ctx.prefixCls}-text`) }, [_ctx.computedCheck ? renderSlot(_ctx.$slots, "checked", { key: 0 }, () => [createTextVNode(toDisplayString(_ctx.checkedText), 1)]) : renderSlot(_ctx.$slots, "unchecked", { key: 1 }, () => [createTextVNode(toDisplayString(_ctx.uncheckedText), 1)])], 2)], 64)) : createCommentVNode("", true)], 46, _hoisted_1);
 }
-var switch_default = /* @__PURE__ */ _plugin_vue_export_helper_default(switch_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
+var switch_default = /*#__PURE__*/ _plugin_vue_export_helper_default(switch_vue_vue_type_script_lang_default, [["render", _sfc_render]]);
 //#endregion
 export { switch_default as default };

package/es/switch/switch.vue_vue_type_script_lang.js

@@ -1,7 +1,7 @@
 import { useFormItem } from "../_hooks/use-form-item.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isFunction, isNull, isUndefined } from "../_utils/is.js";
-import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.130.0/helpers/asyncToGenerator.js";
+import { _asyncToGenerator } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/asyncToGenerator.js";
 import IconLoading from "../icon/icon-loading/index.js";
 import { useSize } from "../_hooks/use-size.js";
 import { computed, defineComponent, getCurrentInstance, ref, toRefs, watch } from "vue";