@element-plus/nightly 0.0.20220512 → 0.0.20220515

package/theme-chalk/src/button.scss

@@ -40,7 +40,7 @@ $button-icon-span-gap: map.merge(
   vertical-align: middle;
   -webkit-appearance: none;
 
-  &:not(.is-text) {
+  &:not(.is-text, .is-link) {
     background-color: getCssVar('button', 'bg-color');
     border: getCssVar('border');
     border-color: getCssVar('button', 'border-color');
@@ -191,6 +191,46 @@ $button-icon-span-gap: map.merge(
     }
   }
 
+  @include when(link) {
+    border-color: transparent;
+    // color: getCssVar('color', 'primary');
+    background: transparent;
+    padding-left: 0;
+    padding-right: 0;
+
+    &:hover {
+      color: getCssVar('button', 'hover', 'link-text-color');
+    }
+
+    @include when(disabled) {
+      color: getCssVar('button', 'disabled', 'text-color');
+      background-color: transparent !important;
+      border-color: transparent !important;
+    }
+
+    &:not(.is-disabled) {
+      &:hover,
+      &:focus {
+        // color: getCssVar('color', 'primary', 'light-3');
+        border-color: transparent;
+        background-color: transparent;
+      }
+
+      &:active {
+        // color: getCssVar('color', 'primary', 'dark-2');
+        border-color: transparent;
+        background-color: transparent;
+      }
+    }
+  }
+
+  @include e(link) {
+    @include m(expand) {
+      letter-spacing: 0.3em;
+      margin-right: -0.3em;
+    }
+  }
+
   @each $type in (primary, success, warning, danger, info) {
     @include m($type) {
       @include button-variant($type);

package/theme-chalk/src/mixins/_button.scss

@@ -83,6 +83,11 @@
         'color',
         'white',
       ),
+      'link-text-color': (
+        'color',
+        $type,
+        'light-5',
+      ),
       'bg-color': (
         'color',
         $type,
@@ -131,7 +136,8 @@
   }
 
   &.is-plain,
-  &.is-text {
+  &.is-text,
+  &.is-link {
     @include button-plain($type);
   }
 }

package/theme-chalk/src/tabs.scss

@@ -121,6 +121,11 @@
       outline: none;
     }
 
+    &:focus-visible {
+      box-shadow: 0 0 2px 2px getCssVar('color-primary') inset;
+      border-radius: 3px;
+    }
+
     & .is-icon-close {
       border-radius: 50%;
       text-align: center;