@sdata/web-vue 1.5.0 → 1.7.0

package/es/style/theme/global.scss

@@ -0,0 +1,390 @@
+@use 'sass:string';
+@use '@style/color/colors.scss' as *;
+
+$sd-theme-tag: ':where(body, [sd-theme])'; // css 变量定义的选择器
+
+$sd-vars-prefix: ''; // css 变量的前缀
+
+$sd-cssvars-prefix: '-';
+
+@if $sd-vars-prefix != '' {
+  $sd-cssvars-prefix: '--#{$sd-vars-prefix}';
+}
+
+/******** borderSize *******/
+
+$border-none: 0;
+$border-1: 1px;
+$border-2: 2px;
+$border-3: 3px;
+$border-4: 4px;
+$border-5: 5px;
+
+/******** borderStyle *******/
+
+$border-solid: solid;
+$border-dashed: dashed;
+$border-dotted: dotted;
+
+/******** radius *******/
+
+$border-radius-none: 0;
+$border-radius-small: 2px;
+$border-radius-medium: 4px;
+$border-radius-large: 8px;
+$border-radius-circle: 50%;
+
+/******** shadow distance *******/
+
+$shadow-distance-none: 0;
+$shadow-distance-1: 1px;
+$shadow-distance-2: 2px;
+$shadow-distance-3: 3px;
+$shadow-distance-4: 4px;
+
+/******** size *******/
+
+$size-none: 0;
+$size-1: 4px;
+$size-2: 8px;
+$size-3: 12px;
+$size-4: 16px;
+$size-5: 20px;
+$size-6: 24px;
+$size-7: 28px;
+$size-8: 32px;
+$size-9: 36px;
+$size-10: 40px;
+$size-11: 44px;
+$size-12: 48px;
+$size-13: 52px;
+$size-14: 56px;
+$size-15: 60px;
+$size-16: 64px;
+$size-17: 68px;
+$size-18: 72px;
+$size-19: 76px;
+$size-20: 80px;
+$size-21: 84px;
+$size-22: 88px;
+$size-23: 92px;
+$size-24: 96px;
+$size-25: 100px;
+$size-26: 104px;
+$size-27: 108px;
+$size-28: 112px;
+$size-29: 116px;
+$size-30: 120px;
+$size-31: 124px;
+$size-32: 128px;
+$size-33: 132px;
+$size-34: 136px;
+$size-35: 140px;
+$size-36: 144px;
+$size-37: 148px;
+$size-38: 152px;
+$size-39: 156px;
+$size-40: 160px;
+$size-41: 164px;
+$size-42: 168px;
+$size-43: 172px;
+$size-44: 176px;
+$size-45: 180px;
+$size-46: 184px;
+$size-47: 188px;
+$size-48: 192px;
+$size-49: 196px;
+$size-50: 200px;
+
+$size-mini: $size-6;
+$size-small: $size-7;
+$size-default: $size-8;
+$size-large: $size-9;
+
+/******** spacing *******/
+
+$spacing-none: 0;
+$spacing-1: 2px;
+$spacing-2: 4px;
+$spacing-3: 6px;
+$spacing-4: 8px;
+$spacing-5: 10px;
+$spacing-6: 12px;
+$spacing-7: 16px;
+$spacing-8: 20px;
+$spacing-9: 24px;
+$spacing-10: 32px;
+$spacing-11: 36px;
+$spacing-12: 40px;
+$spacing-13: 48px;
+$spacing-14: 56px;
+$spacing-15: 60px;
+$spacing-16: 64px;
+$spacing-17: 72px;
+$spacing-18: 80px;
+$spacing-19: 84px;
+$spacing-20: 96px;
+$spacing-21: 100px;
+$spacing-22: 120px;
+
+$color-transparent: transparent;
+
+/******** shadow *******/
+
+$shadow-none: none;
+$shadow-special: 0 0 1px rgb(0 0 0 / 30%);
+$shadow1-center: 0 0 5px rgb(0 0 0 / 10%);
+$shadow1-up: 0 -2px 5px rgb(0 0 0 / 10%);
+$shadow1-down: 0 2px 5px rgb(0 0 0 / 10%);
+$shadow1-left: -2px 0 5px rgb(0 0 0 / 10%);
+$shadow1-right: 2px 0 5px rgb(0 0 0 / 10%);
+$shadow1-left-up: -2px -2px 5px rgb(0 0 0 / 10%);
+$shadow1-left-down: -2px 2px 5px rgb(0 0 0 / 10%);
+$shadow1-right-up: 2px -2px 5px rgb(0 0 0 / 10%);
+$shadow1-right-down: 2px 2px 5px rgb(0 0 0 / 10%);
+$shadow2-center: 0 0 10px rgb(0 0 0 / 10%);
+$shadow2-up: 0 -4px 10px rgb(0 0 0 / 10%);
+$shadow2-down: 0 4px 10px rgb(0 0 0 / 10%);
+$shadow2-left: -4px 0 10px rgb(0 0 0 / 10%);
+$shadow2-right: 4px 0 10px rgb(0 0 0 / 10%);
+$shadow2-left-up: -4px -4px 10px rgb(0 0 0 / 10%);
+$shadow2-left-down: -4px 4px 10px rgb(0 0 0 / 10%);
+$shadow2-right-up: 4px -4px 10px rgb(0 0 0 / 10%);
+$shadow2-right-down: 4px 4px 10px rgb(0 0 0 / 10%);
+$shadow3-center: 0 0 20px rgb(0 0 0 / 10%);
+$shadow3-up: 0 -8px 20px rgb(0 0 0 / 10%);
+$shadow3-down: 0 8px 20px rgb(0 0 0 / 10%);
+$shadow3-left: -8px 0 20px rgb(0 0 0 / 10%);
+$shadow3-right: 8px 0 20px rgb(0 0 0 / 10%);
+$shadow3-left-up: -8px -8px 20px rgb(0 0 0 / 10%);
+$shadow3-left-down: -8px 8px 20px rgb(0 0 0 / 10%);
+$shadow3-right-up: 8px -8px 20px rgb(0 0 0 / 10%);
+$shadow3-right-down: 8px 8px 20px rgb(0 0 0 / 10%);
+
+/******** opacity *******/
+
+$opacity-none: 0;
+$opacity-1: 10%;
+$opacity-2: 20%;
+$opacity-3: 30%;
+$opacity-4: 40%;
+$opacity-5: 50%;
+$opacity-6: 60%;
+$opacity-7: 70%;
+$opacity-8: 80%;
+$opacity-9: 90%;
+$opacity-10: 100%;
+
+/******** fontSize *******/
+
+$font-size-display-3: 56px;
+$font-size-display-2: 48px;
+$font-size-display-1: 36px;
+$font-size-title-3: 24px;
+$font-size-title-2: 20px;
+$font-size-title-1: 16px;
+$font-size-body-3: 14px;
+$font-size-body-2: 13px;
+$font-size-body-1: 12px;
+$font-size-caption: 12px;
+
+/******** fontWeight ********/
+$font-weight-100: 100;
+$font-weight-200: 200;
+$font-weight-300: 300;
+$font-weight-400: 400;
+$font-weight-500: 500;
+$font-weight-600: 600;
+$font-weight-700: 700;
+$font-weight-800: 800;
+$font-weight-900: 900;
+
+/******** Primary *******/
+
+$color-primary-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-1')));
+$color-primary-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-2')));
+$color-primary-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-3')));
+$color-primary-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-4')));
+$color-primary-5: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-5')));
+$color-primary-6: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-6')));
+$color-primary-7: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-7')));
+$color-primary-8: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-8')));
+$color-primary-9: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-9')));
+$color-primary-10: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-10')));
+
+/******** success *******/
+
+$color-success-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-1')));
+$color-success-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-2')));
+$color-success-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-3')));
+$color-success-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-4')));
+$color-success-5: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-5')));
+$color-success-6: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-6')));
+$color-success-7: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-7')));
+$color-success-8: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-8')));
+$color-success-9: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-9')));
+$color-success-10: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-10')));
+
+/******** warning *******/
+
+$color-warning-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-1')));
+$color-warning-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-2')));
+$color-warning-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-3')));
+$color-warning-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-4')));
+$color-warning-5: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-5')));
+$color-warning-6: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-6')));
+$color-warning-7: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-7')));
+$color-warning-8: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-8')));
+$color-warning-9: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-9')));
+$color-warning-10: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-10')));
+
+/******** danger *******/
+
+$color-danger-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-1')));
+$color-danger-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-2')));
+$color-danger-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-3')));
+$color-danger-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-4')));
+$color-danger-5: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-5')));
+$color-danger-6: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-6')));
+$color-danger-7: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-7')));
+$color-danger-8: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-8')));
+$color-danger-9: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-9')));
+$color-danger-10: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-10')));
+
+/******** link *******/
+
+$color-link-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-1')));
+$color-link-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-2')));
+$color-link-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-3')));
+$color-link-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-4')));
+$color-link-5: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-5')));
+$color-link-6: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-6')));
+$color-link-7: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-7')));
+$color-link-8: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-8')));
+$color-link-9: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-9')));
+$color-link-10: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-10')));
+
+/******** radius *******/
+
+$radius-none: var(string.unquote('#{$sd-cssvars-prefix}-border-radius-none'));
+$radius-small: var(string.unquote('#{$sd-cssvars-prefix}-border-radius-small'));
+$radius-medium: var(string.unquote('#{$sd-cssvars-prefix}-border-radius-medium'));
+$radius-large: var(string.unquote('#{$sd-cssvars-prefix}-border-radius-large'));
+$radius-circle: var(string.unquote('#{$sd-cssvars-prefix}-border-radius-circle'));
+
+// Other
+$color-white: #fff;
+$dark-color-white: rgb(255 255 255 / 90%); // 在亮色模式下所有白色文字对应。对应 $color-white;
+
+$color-black: #000;
+$dark-color-black: #000;
+
+$mask-bg-opacity: $opacity-6;
+$mask-color-bg: rgba($gray-10, $mask-bg-opacity);
+
+$dark-mask-color-bg: rgba($dark-gray-1, $mask-bg-opacity);
+
+// 暗黑主题的导航组件背景色，需要在主题商店可配置
+$color-menu-dark-bg: #232324;
+$color-menu-light-bg: #fff;
+$color-spin-layer-bg: rgb(255 255 255 / 60%);
+$color-menu-dark-hover: rgb(255 255 255 / 4%);
+$color-tooltip-bg: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-10')));
+
+// component
+$dark-color-tooltip-bg: #373739;
+$dark-color-spin-layer-bg: rgb(51 51 51 / 60%);
+$dark-color-menu-dark-hover: var(string.unquote('#{$sd-cssvars-prefix}-color-fill-2'));
+
+// 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-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
+$color-text-3: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-neutral-6')
+); // Secondary information
+$color-text-4: var(
+  string.unquote('#{$sd-cssvars-prefix}-color-neutral-4')
+); // Secondary information
+$color-fill-1: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-1'));
+$color-fill-2: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-2'));
+$color-fill-3: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-3'));
+$color-fill-4: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-4'));
+$color-border-1: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-2'));
+$color-border-2: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-3'));
+$color-border-3: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-4'));
+$color-border-4: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-6'));
+$color-primary-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-1')));
+$color-primary-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-2')));
+$color-primary-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-3')));
+$color-primary-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-4')));
+$color-secondary: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-2'));
+$color-secondary-hover: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-3'));
+$color-secondary-active: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-4'));
+$color-secondary-disabled: var(string.unquote('#{$sd-cssvars-prefix}-color-neutral-1'));
+$color-danger-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-1')));
+$color-danger-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-2')));
+$color-danger-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-3')));
+$color-danger-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-4')));
+$color-success-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-1')));
+$color-success-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-2')));
+$color-success-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-3')));
+$color-success-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-4')));
+$color-warning-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-1')));
+$color-warning-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-2')));
+$color-warning-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-3')));
+$color-warning-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-4')));
+$color-link-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-1')));
+$color-link-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-2')));
+$color-link-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-3')));
+$color-link-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-4')));
+
+$dark-color-border: #333335;
+$dark-color-bg-1: #17171a; // The overall background is @dark-gray-1
+$dark-color-bg-2: #232324; // Primary container background ("white")
+$dark-color-bg-3: #2a2a2b; // Secondary container background
+$dark-color-bg-4: #313132; // Three-level container background
+$dark-color-bg-5: #373739; // Drop-down box, Tooltips background
+$dark-color-bg-white: #f6f6f6; // In bright color mode radio, switch white background
+$dark-color-text-1: rgb(255 255 255 / 90%);
+$dark-color-text-2: rgb(255 255 255 / 70%);
+$dark-color-text-3: rgb(255 255 255 / 50%);
+$dark-color-text-4: rgb(255 255 255 / 30%);
+$dark-color-fill-1: rgb(255 255 255 / 4%);
+$dark-color-fill-2: rgb(255 255 255 / 8%);
+$dark-color-fill-3: rgb(255 255 255 / 12%);
+$dark-color-fill-4: rgb(255 255 255 / 16%);
+$dark-color-primary-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-6')), 0.2);
+$dark-color-primary-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-6')), 0.35);
+$dark-color-primary-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-6')), 0.5);
+$dark-color-primary-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-primary-6')), 0.65);
+$dark-color-secondary: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-9')), 0.08);
+$dark-color-secondary-hover: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-8')), 0.16);
+$dark-color-secondary-active: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-7')), 0.24);
+$dark-color-secondary-disabled: rgb(var(string.unquote('#{$sd-cssvars-prefix}-gray-9')), 0.08);
+$dark-color-danger-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-6')), 0.2);
+$dark-color-danger-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-6')), 0.35);
+$dark-color-danger-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-6')), 0.5);
+$dark-color-danger-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-danger-6')), 0.65);
+$dark-color-success-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-6')), 0.2);
+$dark-color-success-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-6')), 0.35);
+$dark-color-success-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-6')), 0.5);
+$dark-color-success-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-success-6')), 0.65);
+$dark-color-warning-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-6')), 0.2);
+$dark-color-warning-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-6')), 0.35);
+$dark-color-warning-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-6')), 0.5);
+$dark-color-warning-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-warning-6')), 0.65);
+$dark-color-link-light-1: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-6')), 0.2);
+$dark-color-link-light-2: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-6')), 0.35);
+$dark-color-link-light-3: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-6')), 0.5);
+$dark-color-link-light-4: rgb(var(string.unquote('#{$sd-cssvars-prefix}-link-6')), 0.65);
+
+// vue overwrite token
+$size-medium: $size-default;

package/es/style/theme/index.scss

@@ -0,0 +1,66 @@
+@use '@style/color/colors.scss';
+@use 'sass:string';
+
+@forward '@style/theme/global.scss';
+@forward '@style/theme/component.scss';
+
+@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}');
+}
+
+$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}');
+}
+
+$prefix: sd;
+
+$font-family:
+  inter, '-apple-system', blinkmacsystemfont, 'PingFang SC', 'Hiragino Sans GB', 'noto sans',
+  'Microsoft YaHei', 'Helvetica Neue', helvetica, arial, sans-serif;
+
+$code-family: consolas, menlo;
+
+// global font size
+$font-size-body: 14px;
+$font-size: $font-size-body;
+
+$transition-duration-1: 0.1s;
+$transition-duration-2: 0.2s;
+$transition-duration-3: 0.3s;
+$transition-duration-4: 0.4s;
+$transition-duration-5: 0.5s;
+$transition-duration-loading: 1s;
+
+// 线性
+$transition-timing-function-linear: cubic-bezier(0, 0, 1, 1);
+// 标准
+$transition-timing-function-standard: cubic-bezier(0.34, 0.69, 0.1, 1);
+// 过冲
+$transition-timing-function-overshoot: cubic-bezier(0.3, 1.3, 0.3, 1);
+// 减速
+$transition-timing-function-decelerate: cubic-bezier(0.4, 0.8, 0.74, 1);
+// 加速
+$transition-timing-function-accelerate: cubic-bezier(0.26, 0, 0.6, 0.2);
+
+$z-index-popup-base: 1000;
+$z-index-affix: $z-index-popup-base - 1; // 999
+$z-index-popup: $z-index-popup-base; // 1000
+$z-index-drawer: $z-index-popup-base + 1; // 1001
+$z-index-modal: $z-index-drawer; // 1001
+$z-index-message: $z-index-popup-base + 3; // 1003
+$z-index-notification: $z-index-popup-base + 3; // 1003
+$z-index-image-preview: $z-index-modal; // 1001
+
+$line-height-base: 1.5715;
+
+$popup-box-shadow-base: $shadow1-down;

package/es/style/theme/legacy-less-var.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+
+@function get($vars, $name, $fallback: null) {
+  $value: map.get($vars, $name);
+
+  @if $value == null {
+    @if $fallback != null {
+      @return $fallback;
+    }
+
+    @error "Unknown Less variable: #{$name}";
+  }
+
+  @return $value;
+}

package/es/style/theme.scss

@@ -0,0 +1 @@
+@forward '@style/theme/index.scss';

package/es/switch/style/index.css

@@ -18,21 +18,27 @@
 .switch-slide-text-enter-from {
   left: -100% !important;
 }
+
 .switch-slide-text-enter-to {
   left: 8px !important;
 }
+
 .switch-slide-text-enter-active {
   transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .switch-slide-text-leave-from {
   left: 100% !important;
 }
+
 .switch-slide-text-leave-to {
   left: 26px !important;
 }
+
 .switch-slide-text-leave-active {
   transition: left 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
+
 .sd-switch {
   position: relative;
   box-sizing: border-box;
@@ -157,6 +163,7 @@
 .sd-switch-small.sd-switch-checked .sd-switch-handle {
   left: calc(100% - 12px - 2px);
 }
+
 .sd-switch-type-round {
   min-width: 40px;
   border-radius: var(--border-radius-small);
@@ -173,6 +180,7 @@
 .sd-switch-type-round.sd-switch-small .sd-switch-handle {
   border-radius: 1px;
 }
+
 .sd-switch-type-line {
   min-width: 36px;
   overflow: unset;
@@ -185,7 +193,7 @@
   background-color: var(--color-fill-4);
   border-radius: 3px;
   transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
-  content: '';
+  content: "";
 }
 .sd-switch-type-line .sd-switch-handle {
   top: 2px;
@@ -203,13 +211,13 @@
   background-color: rgb(var(--primary-6));
 }
 .sd-switch-type-line.sd-switch-custom-color {
-  --custom-color: var(--color-fill-4);
+  --custom-color: $switch-color-bg_off;
 }
 .sd-switch-type-line.sd-switch-custom-color::after {
   background-color: var(--custom-color);
 }
 .sd-switch-type-line.sd-switch-custom-color.sd-switch-checked {
-  --custom-color: rgb(var(--primary-6));
+  --custom-color: $switch-color-bg_on;
 }
 .sd-switch-type-line.sd-switch-checked .sd-switch-handle {
   left: calc(100% - 20px);
@@ -258,4 +266,4 @@
 }
 .sd-switch-type-line.sd-switch-small.sd-switch-checked .sd-switch-handle {
   left: calc(100% - 16px - 0px);
-}
+}

package/es/switch/style/index.d.ts

@@ -1,2 +1,2 @@
-import '../../style/index.less';
-import './index.less';
+import '../../style/index.scss';
+import './index.scss';

package/es/switch/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";