@sdata/web-vue 1.6.0 → 1.7.0

package/es/input-tag/style/index.scss

@@ -0,0 +1,42 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/input-tag/style/input-tag.scss' as *;
+
+$input-tag-prefix-cls: string.unquote('#{theme.$prefix}-input-tag');
+
+.#{$input-tag-prefix-cls} {
+  @include input-tag-style($input-tag-prefix-cls);
+}
+
+.input-tag-zoom-enter-from {
+  transform: scale(0.5, 0.5);
+  opacity: 0;
+}
+
+.input-tag-zoom-enter-to {
+  transform: scale(1, 1);
+  opacity: 1;
+}
+
+.input-tag-zoom-enter-active {
+  transition: all theme.$transition-duration-3 theme.$transition-timing-function-standard;
+}
+
+.input-tag-zoom-leave-from {
+  transform: scale(1, 1);
+  opacity: 1;
+}
+
+.input-tag-zoom-leave-to {
+  transform: scale(0.5, 0.5);
+  opacity: 0;
+}
+
+.input-tag-zoom-leave-active {
+  position: absolute;
+  transition: all theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+}
+
+.input-tag-zoom-move {
+  transition: all theme.$transition-duration-3 theme.$transition-timing-function-overshoot;
+}

package/es/input-tag/style/input-tag.scss

@@ -0,0 +1,306 @@
+@use '@style/mixins/icon-hover.scss' as icon-hover;
+@use '@style/theme/index.scss' as theme;
+@use '@components/tag/style/token.scss';
+@use 'sass:math';
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@style/mixins/index.scss' as *;
+@use '@components/input/style/token.scss' as *;
+@use '@components/input/style/input.scss' as *;
+@use '@components/tag/style/index.scss' as *;
+@use '@components/input-tag/style/token.scss' as *;
+
+$less-vars: (
+  'input-color-addon-border': $input-color-addon-border,
+  'input-color-addon-border_default': $input-color-addon-border_default,
+  'input-color-bg': $input-color-bg,
+  'input-color-bg_disabled': $input-color-bg_disabled,
+  'input-color-bg_error': $input-color-bg_error,
+  'input-color-bg_error_focus': $input-color-bg_error_focus,
+  'input-color-bg_error_hover': $input-color-bg_error_hover,
+  'input-color-bg_focus': $input-color-bg_focus,
+  'input-color-bg_hover': $input-color-bg_hover,
+  'input-color-border': $input-color-border,
+  'input-color-border_disabled': $input-color-border_disabled,
+  'input-color-border_error': $input-color-border_error,
+  'input-color-border_error_focus': $input-color-border_error_focus,
+  'input-color-border_error_hover': $input-color-border_error_hover,
+  'input-color-border_focus': $input-color-border_focus,
+  'input-color-border_hover': $input-color-border_hover,
+  'input-color-icon-clear-bg_hover': $input-color-icon-clear-bg_hover,
+  'input-color-shadow_error_focus': $input-color-shadow_error_focus,
+  'input-color-shadow_focus': $input-color-shadow_focus,
+  'input-color-text': $input-color-text,
+  'input-color-text_disabled': $input-color-text_disabled,
+  'input-feedback-icon-color_error': $input-feedback-icon-color_error,
+  'input-feedback-icon-color_success': $input-feedback-icon-color_success,
+  'input-feedback-icon-color_validating': $input-feedback-icon-color_validating,
+  'input-feedback-icon-color_warning': $input-feedback-icon-color_warning,
+  'input-group-border-radius_compact': $input-group-border-radius_compact,
+  'input-padding-horizontal': $input-padding-horizontal,
+  'input-size-shadow_error_focus': $input-size-shadow_error_focus,
+  'input-size-shadow_focus': $input-size-shadow_focus,
+  'input-tag-border-width': $input-tag-border-width,
+  'input-tag-color-bg_default': $input-tag-color-bg_default,
+  'input-tag-color-bg_default_focus': $input-tag-color-bg_default_focus,
+  'input-tag-color-bg_default_hover': $input-tag-color-bg_default_hover,
+  'input-tag-color-bg_disabled': $input-tag-color-bg_disabled,
+  'input-tag-color-bg_disabled_hover': $input-tag-color-bg_disabled_hover,
+  'input-tag-color-bg_error': $input-tag-color-bg_error,
+  'input-tag-color-bg_error_focus': $input-tag-color-bg_error_focus,
+  'input-tag-color-bg_error_hover': $input-tag-color-bg_error_hover,
+  'input-tag-color-border_default': $input-tag-color-border_default,
+  'input-tag-color-border_default_focus': $input-tag-color-border_default_focus,
+  'input-tag-color-border_default_hover': $input-tag-color-border_default_hover,
+  'input-tag-color-border_disabled': $input-tag-color-border_disabled,
+  'input-tag-color-border_disabled_focus': $input-tag-color-border_disabled_focus,
+  'input-tag-color-border_disabled_hover': $input-tag-color-border_disabled_hover,
+  'input-tag-color-border_error': $input-tag-color-border_error,
+  'input-tag-color-border_error_focus': $input-tag-color-border_error_focus,
+  'input-tag-color-border_error_hover': $input-tag-color-border_error_hover,
+  'input-tag-color-icon-clear-bg_hover': $input-tag-color-icon-clear-bg_hover,
+  'input-tag-color-shadow_default_focus': $input-tag-color-shadow_default_focus,
+  'input-tag-color-shadow_error_focus': $input-tag-color-shadow_error_focus,
+  'input-tag-color-text_default': $input-tag-color-text_default,
+  'input-tag-color-text_disabled': $input-tag-color-text_disabled,
+  'input-tag-color-text_error': $input-tag-color-text_error,
+  'input-tag-padding-horizontal': $input-tag-padding-horizontal,
+  'input-tag-size-default-font-size': $input-tag-size-default-font-size,
+  'input-tag-size-default-height': $input-tag-size-default-height,
+  'input-tag-size-default-tag-height': $input-tag-size-default-tag-height,
+  'input-tag-size-icon-clear': $input-tag-size-icon-clear,
+  'input-tag-size-icon-clear_hover': $input-tag-size-icon-clear_hover,
+  'input-tag-size-large-font-size': $input-tag-size-large-font-size,
+  'input-tag-size-large-height': $input-tag-size-large-height,
+  'input-tag-size-large-tag-height': $input-tag-size-large-tag-height,
+  'input-tag-size-medium-font-size': $input-tag-size-medium-font-size,
+  'input-tag-size-medium-height': $input-tag-size-medium-height,
+  'input-tag-size-medium-tag-height': $input-tag-size-medium-tag-height,
+  'input-tag-size-mini-font-size': $input-tag-size-mini-font-size,
+  'input-tag-size-mini-height': $input-tag-size-mini-height,
+  'input-tag-size-mini-tag-height': $input-tag-size-mini-tag-height,
+  'input-tag-size-small-font-size': $input-tag-size-small-font-size,
+  'input-tag-size-small-height': $input-tag-size-small-height,
+  'input-tag-size-small-tag-height': $input-tag-size-small-tag-height,
+  'input-tag-size-shadow_default_focus': $input-tag-size-shadow_default_focus,
+  'input-tag-size-shadow_error_focus': $input-tag-size-shadow_error_focus,
+  'input-tag-tag-color-bg': $input-tag-tag-color-bg,
+  'input-tag-tag-color-bg_disabled': $input-tag-tag-color-bg_disabled,
+  'input-tag-tag-color-bg_focus': $input-tag-tag-color-bg_focus,
+  'input-tag-tag-color-border': $input-tag-tag-color-border,
+  'input-tag-tag-color-border_disabled': $input-tag-tag-color-border_disabled,
+  'input-tag-tag-color-border_focus': $input-tag-tag-color-border_focus,
+  'input-tag-tag-font-size': $input-tag-tag-font-size,
+  'input-tag-tag-margin-right': $input-tag-tag-margin-right,
+  'input-tag-tag-margin-vertical': $input-tag-tag-margin-vertical,
+  'input-tag-tag-remove-icon-color-bg': $input-tag-tag-remove-icon-color-bg,
+  'input-tag-tag-remove-icon-color-bg_focus': $input-tag-tag-remove-icon-color-bg_focus,
+  'prefix': theme.$prefix,
+  'tag-blue-color-bg': token.$tag-blue-color-bg,
+  'tag-blue-color-bg_hover': token.$tag-blue-color-bg_hover,
+  'tag-blue-color-border': token.$tag-blue-color-border,
+  'tag-blue-color-border_hover': token.$tag-blue-color-border_hover,
+  'tag-blue-color-icon-bg_hover': token.$tag-blue-color-icon-bg_hover,
+  'tag-color-bg-not-checked_hover': token.$tag-color-bg-not-checked_hover,
+  'tag-custom-color-icon-bg_hover': token.$tag-custom-color-icon-bg_hover,
+  'tag-custom-color-text': token.$tag-custom-color-text,
+  'tag-cyan-color-bg': token.$tag-cyan-color-bg,
+  'tag-cyan-color-bg_hover': token.$tag-cyan-color-bg_hover,
+  'tag-cyan-color-border': token.$tag-cyan-color-border,
+  'tag-cyan-color-border_hover': token.$tag-cyan-color-border_hover,
+  'tag-cyan-color-icon-bg_hover': token.$tag-cyan-color-icon-bg_hover,
+  'tag-default-color-bg': token.$tag-default-color-bg,
+  'tag-default-color-bg_hover': token.$tag-default-color-bg_hover,
+  'tag-default-color-border': token.$tag-default-color-border,
+  'tag-default-color-border_hover': token.$tag-default-color-border_hover,
+  'tag-gold-color-bg': token.$tag-gold-color-bg,
+  'tag-gold-color-bg_hover': token.$tag-gold-color-bg_hover,
+  'tag-gold-color-border': token.$tag-gold-color-border,
+  'tag-gold-color-border_hover': token.$tag-gold-color-border_hover,
+  'tag-gold-color-icon-bg_hover': token.$tag-gold-color-icon-bg_hover,
+  'tag-gray-color-bg': token.$tag-gray-color-bg,
+  'tag-gray-color-bg_hover': token.$tag-gray-color-bg_hover,
+  'tag-gray-color-border': token.$tag-gray-color-border,
+  'tag-gray-color-border_hover': token.$tag-gray-color-border_hover,
+  'tag-gray-color-icon-bg_hover': token.$tag-gray-color-icon-bg_hover,
+  'tag-green-color-bg': token.$tag-green-color-bg,
+  'tag-green-color-bg_hover': token.$tag-green-color-bg_hover,
+  'tag-green-color-border': token.$tag-green-color-border,
+  'tag-green-color-border_hover': token.$tag-green-color-border_hover,
+  'tag-green-color-icon-bg_hover': token.$tag-green-color-icon-bg_hover,
+  'tag-lime-color-bg': token.$tag-lime-color-bg,
+  'tag-lime-color-bg_hover': token.$tag-lime-color-bg_hover,
+  'tag-lime-color-border': token.$tag-lime-color-border,
+  'tag-lime-color-border_hover': token.$tag-lime-color-border_hover,
+  'tag-lime-color-icon-bg_hover': token.$tag-lime-color-icon-bg_hover,
+  'tag-magenta-color-bg': token.$tag-magenta-color-bg,
+  'tag-magenta-color-bg_hover': token.$tag-magenta-color-bg_hover,
+  'tag-magenta-color-border': token.$tag-magenta-color-border,
+  'tag-magenta-color-border_hover': token.$tag-magenta-color-border_hover,
+  'tag-magenta-color-icon-bg_hover': token.$tag-magenta-color-icon-bg_hover,
+  'tag-orange-color-bg': token.$tag-orange-color-bg,
+  'tag-orange-color-bg_hover': token.$tag-orange-color-bg_hover,
+  'tag-orange-color-border': token.$tag-orange-color-border,
+  'tag-orange-color-border_hover': token.$tag-orange-color-border_hover,
+  'tag-orange-color-icon-bg_hover': token.$tag-orange-color-icon-bg_hover,
+  'tag-orangered-color-bg': token.$tag-orangered-color-bg,
+  'tag-orangered-color-bg_hover': token.$tag-orangered-color-bg_hover,
+  'tag-orangered-color-border': token.$tag-orangered-color-border,
+  'tag-orangered-color-border_hover': token.$tag-orangered-color-border_hover,
+  'tag-orangered-color-icon-bg_hover': token.$tag-orangered-color-icon-bg_hover,
+  'tag-pinkpurple-color-bg': token.$tag-pinkpurple-color-bg,
+  'tag-pinkpurple-color-bg_hover': token.$tag-pinkpurple-color-bg_hover,
+  'tag-pinkpurple-color-border': token.$tag-pinkpurple-color-border,
+  'tag-pinkpurple-color-border_hover': token.$tag-pinkpurple-color-border_hover,
+  'tag-pinkpurple-color-icon-bg_hover': token.$tag-pinkpurple-color-icon-bg_hover,
+  'tag-prefix-cls': $tag-prefix-cls,
+  'tag-purple-color-bg': token.$tag-purple-color-bg,
+  'tag-purple-color-bg_hover': token.$tag-purple-color-bg_hover,
+  'tag-purple-color-border': token.$tag-purple-color-border,
+  'tag-purple-color-border_hover': token.$tag-purple-color-border_hover,
+  'tag-purple-color-icon-bg_hover': token.$tag-purple-color-icon-bg_hover,
+  'tag-red-color-bg': token.$tag-red-color-bg,
+  'tag-red-color-bg_hover': token.$tag-red-color-bg_hover,
+  'tag-red-color-border': token.$tag-red-color-border,
+  'tag-red-color-border_hover': token.$tag-red-color-border_hover,
+  'tag-red-color-icon-bg_hover': token.$tag-red-color-icon-bg_hover,
+  'tag-sdblue-color-bg': token.$tag-sdblue-color-bg,
+  'tag-sdblue-color-bg_hover': token.$tag-sdblue-color-bg_hover,
+  'tag-sdblue-color-border': token.$tag-sdblue-color-border,
+  'tag-sdblue-color-border_hover': token.$tag-sdblue-color-border_hover,
+  'tag-sdblue-color-icon-bg_hover': token.$tag-sdblue-color-icon-bg_hover,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($less-vars, $name, $fallback);
+}
+
+@mixin input-tag-size($cls, $size) {
+  $font-size-token: string.unquote('input-tag-size-#{$size}-font-size');
+  $height-token: string.unquote('input-tag-size-#{$size}-height');
+  $tag-height-token: string.unquote('input-tag-size-#{$size}-tag-height');
+  $vertical-padding: math.div(less-var($height-token), 2) - math.div(
+      less-var($tag-height-token),
+      2
+    ) -
+    $input-tag-border-width - math.div($input-tag-tag-margin-vertical, 2);
+  $vertical-margin: math.div($input-tag-tag-margin-vertical, 2);
+
+  &.#{$cls}-size-#{$size} {
+    font-size: less-var($font-size-token);
+
+    .#{$cls}-inner {
+      padding-top: $vertical-padding;
+      padding-bottom: $vertical-padding;
+    }
+
+    .#{$cls}-tag,
+    .#{$cls}-input {
+      margin-top: $vertical-margin;
+      margin-bottom: $vertical-margin;
+      line-height: less-var($tag-height-token) - 2;
+      vertical-align: middle;
+    }
+
+    .#{$cls}-tag,
+    .#{$cls}-input {
+      height: auto;
+      min-height: less-var($tag-height-token);
+    }
+  }
+}
+
+@mixin input-tag-style($cls) {
+  @include input-wrapper-style($cls);
+
+  &.#{$cls}-has-tag {
+    padding-right: $input-tag-padding-horizontal;
+    padding-left: $input-tag-padding-horizontal;
+  }
+
+  &.#{$cls}-has-prefix {
+    padding-left: $input-padding-horizontal;
+  }
+
+  &.#{$cls}-has-suffix {
+    padding-right: $input-padding-horizontal;
+  }
+
+  .#{$cls}-inner {
+    flex: 1;
+    overflow: hidden;
+    line-height: 0;
+
+    &.#{$cls}-nowrap {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .#{$cls}-tag {
+      display: inline-flex;
+      align-items: center;
+      margin-right: $input-tag-tag-margin-right;
+      color: $input-tag-color-text_default;
+      font-size: $input-tag-tag-font-size;
+      white-space: pre-wrap;
+      word-break: break-word;
+      background-color: $input-tag-tag-color-bg;
+      border-color: $input-tag-tag-color-border;
+
+      .#{theme.$prefix}-icon-hover:hover::before {
+        background-color: $input-tag-tag-remove-icon-color-bg;
+      }
+
+      &.#{theme.$prefix}-tag-custom-color {
+        color: token.$tag-custom-color-text;
+
+        @include icon-hover.icon-hover-bg($tag-prefix-cls, token.$tag-custom-color-icon-bg_hover);
+      }
+    }
+
+    .#{$cls}-input {
+      @include input-style();
+
+      box-sizing: border-box;
+    }
+  }
+
+  .#{$cls}-mirror {
+    position: absolute;
+    top: 0;
+    left: 0;
+    white-space: pre;
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  &.#{$cls}-focus {
+    .#{$cls}-tag {
+      background-color: $input-tag-tag-color-bg_focus;
+      border-color: $input-tag-tag-color-border_focus;
+
+      .#{theme.$prefix}-icon-hover:hover::before {
+        background-color: $input-tag-tag-remove-icon-color-bg_focus;
+      }
+    }
+  }
+
+  &.#{$cls}-disabled {
+    .#{$cls}-tag {
+      color: $input-tag-color-text_disabled;
+      background-color: $input-tag-tag-color-bg_disabled;
+      border-color: $input-tag-tag-color-border_disabled;
+    }
+  }
+
+  &.#{$cls}-readonly,
+  &.#{$cls}-disabled-input {
+    cursor: default;
+  }
+
+  @include input-tag-size($cls, mini);
+  @include input-tag-size($cls, medium);
+  @include input-tag-size($cls, small);
+  @include input-tag-size($cls, large);
+}

package/es/input-tag/style/token.scss

@@ -0,0 +1,97 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+/**********************************************
+ * size: mini / small / default / large
+ **********************************************/
+$input-tag-size-mini-height: global.$size-mini;
+$input-tag-size-small-height: global.$size-small;
+$input-tag-size-default-height: global.$size-default;
+$input-tag-size-large-height: global.$size-large;
+
+$input-tag-size-mini-tag-height: global.$size-5;
+$input-tag-size-small-tag-height: global.$size-5;
+$input-tag-size-default-tag-height: global.$size-6;
+$input-tag-size-large-tag-height: global.$size-7;
+
+$input-tag-size-mini-font-size: global.$font-size-body-1;
+$input-tag-size-small-font-size: global.$font-size-body-3;
+$input-tag-size-default-font-size: global.$font-size-body-3;
+$input-tag-size-large-font-size: global.$font-size-body-3;
+
+/****************************************************
+ * status: default / error / disabled _ (hover / focus)
+ ****************************************************/
+// text color
+$input-tag-color-text_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$input-tag-color-text_error: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$input-tag-color-text_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-4'));
+
+// icon color
+$input-tag-color-placeholder: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+$input-tag-color-icon-clear: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$input-tag-color-icon-clear-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-4')
+);
+
+// border color with focus & hover
+$input-tag-color-border_default: global.$color-transparent;
+$input-tag-color-border_default_hover: global.$color-transparent;
+$input-tag-color-border_default_focus: global.$color-primary-6;
+$input-tag-color-border_error: global.$color-transparent;
+$input-tag-color-border_error_hover: global.$color-transparent;
+$input-tag-color-border_error_focus: global.$color-danger-6;
+$input-tag-color-border_disabled: global.$color-transparent;
+$input-tag-color-border_disabled_hover: $input-tag-color-border_disabled;
+$input-tag-color-border_disabled_focus: $input-tag-color-border_disabled;
+
+// bg color with focus & hover
+$input-tag-color-bg_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-tag-color-bg_default_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$input-tag-color-bg_default_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$input-tag-color-bg_error: global.$color-danger-1;
+$input-tag-color-bg_error_hover: global.$color-danger-2;
+$input-tag-color-bg_error_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$input-tag-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-tag-color-bg_disabled_hover: $input-tag-color-bg_disabled;
+
+$input-tag-color-shadow_default_focus: global.$color-primary-2;
+$input-tag-color-shadow_error_focus: global.$color-danger-2;
+$input-tag-size-shadow_error_focus: global.$shadow-distance-none;
+$input-tag-size-shadow_default_focus: global.$shadow-distance-none;
+
+// input box
+$input-tag-tag-margin-right: global.$spacing-2;
+$input-tag-tag-margin-vertical: global.$spacing-1;
+$input-tag-padding-horizontal: global.$spacing-2;
+$input-tag-border-radius: global.$radius-small;
+$input-tag-border-width: global.$border-1;
+$input-tag-size-icon-clear: global.$size-3;
+$input-tag-size-icon-clear_hover: global.$size-5;
+
+// tags
+$input-tag-tag-font-size: global.$font-size-body-1;
+$input-tag-tag-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
+$input-tag-tag-color-bg_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-tag-tag-color-bg_disabled: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-tag-tag-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
+$input-tag-tag-color-border_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+$input-tag-tag-color-border_focus: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+$input-tag-tag-remove-icon-color-bg: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2')
+);
+$input-tag-tag-remove-icon-color-bg_focus: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3')
+);
+
+// vue overwrite token
+$input-tag-size-medium-height: $input-tag-size-default-height;
+$input-tag-size-medium-tag-height: $input-tag-size-default-tag-height;
+$input-tag-size-medium-font-size: $input-tag-size-default-font-size;

package/es/layout/index.d.ts

@@ -149,8 +149,8 @@ declare const Layout: {
     }>, {
         width: number;
         hideTrigger: boolean;
-        collapsed: boolean;
         theme: "dark" | "light";
+        collapsed: boolean;
         defaultCollapsed: boolean;
         collapsible: boolean;
         collapsedWidth: number;

package/es/layout/sider.vue.d.ts

@@ -93,8 +93,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
 }>, {
     width: number;
     hideTrigger: boolean;
-    collapsed: boolean;
     theme: "dark" | "light";
+    collapsed: boolean;
     defaultCollapsed: boolean;
     collapsible: boolean;
     collapsedWidth: number;

package/es/layout/style/index.css

@@ -79,10 +79,11 @@
   flex: 0 0 auto;
   margin: 0;
 }
+
 .sd-layout-has-sider {
   flex-direction: row;
 }
 .sd-layout-has-sider > .sd-layout,
 .sd-layout-has-sider > .sd-layout-content {
   overflow-x: hidden;
-}
+}

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

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

package/es/layout/style/index.js

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

package/es/layout/style/{index.less → index.scss}

@@ -1,8 +1,10 @@
-@import url('./token.less');
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use '@components/layout/style/token.scss' as *;
 
-@layout-prefix-cls: ~'@{prefix}-layout';
+$layout-prefix-cls: string.unquote('#{theme.$prefix}-layout');
 
-.@{layout-prefix-cls} {
+.#{$layout-prefix-cls} {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -15,8 +17,8 @@
     width: auto;
     margin: 0;
     padding: 0;
-    background: @layout-sider-background;
-    transition: width @transition-duration-2 @transition-timing-function-standard;
+    background: $layout-sider-background;
+    transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
     &-children {
       height: 100%;
@@ -47,7 +49,7 @@
 
     &-has-trigger {
       box-sizing: border-box;
-      padding-bottom: @layout-trigger-height;
+      padding-bottom: $layout-trigger-height;
     }
 
     &-trigger {
@@ -57,22 +59,22 @@
       justify-content: center;
       box-sizing: border-box;
       width: 100%;
-      height: @layout-trigger-height;
-      color: var(~'@{sd-cssvars-prefix}-color-white');
-      background: @layout-trigger-dark-color;
+      height: $layout-trigger-height;
+      color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-white'));
+      background: $layout-trigger-dark-color;
       cursor: pointer;
-      transition: width @transition-duration-2 @transition-timing-function-standard;
+      transition: width theme.$transition-duration-2 theme.$transition-timing-function-standard;
 
       &-light {
-        color: @layout-font-color;
-        background: @layout-sider-background-light;
-        border-top: 1px solid @layout-trigger-light-color-border;
+        color: $layout-font-color;
+        background: $layout-sider-background-light;
+        border-top: 1px solid $layout-trigger-light-color-border;
       }
     }
   }
 
   &-sider-light {
-    background: @layout-sider-background-light;
+    background: $layout-sider-background-light;
     box-shadow: 0 2px 5px 0 rgb(0 0 0 / 8%);
   }
 
@@ -92,11 +94,11 @@
   }
 }
 
-.@{layout-prefix-cls}-has-sider {
+.#{$layout-prefix-cls}-has-sider {
   flex-direction: row;
 
-  > .@{layout-prefix-cls},
-  > .@{layout-prefix-cls}-content {
+  > .#{$layout-prefix-cls},
+  > .#{$layout-prefix-cls}-content {
     overflow-x: hidden;
   }
 }

package/es/layout/style/token.scss

@@ -0,0 +1,21 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$layout-trigger-height: 48px;
+
+// Layout Theme Dark(Default)
+$layout-sider-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-menu-dark-bg'));
+$layout-font-color-dark: var(string.unquote('#{global.$sd-cssvars-prefix}-color-white'));
+$layout-font-color: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+$layout-trigger-dark-color: rgb(255 255 255 / 20%);
+
+// Layout Theme Light
+$layout-sider-background-light: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-menu-light-bg')
+);
+$layout-trigger-light-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-5'));

package/es/link/style/index.css

@@ -43,8 +43,7 @@
   padding: 0;
   background-color: unset;
 }
-.sd-link.sd-link-hoverless:active,
-.sd-link.sd-link-hoverless:hover {
+.sd-link.sd-link-hoverless:active, .sd-link.sd-link-hoverless:hover {
   background-color: unset;
 }
 .sd-link.sd-link-disabled {
@@ -106,4 +105,4 @@
   margin-right: 6px;
   font-size: 12px;
   vertical-align: middle;
-}
+}

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

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

package/es/link/style/index.js

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