fix(link): smb theme change fix (#474)

opentiny · Sep 8, 2023 · 1d93f28 · 1d93f28
1 parent ee5e6f5
commit 1d93f28
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 94 deletions.
diff --git a/examples/sites/demos/app/link/custom-icon.vue b/examples/sites/demos/app/link/custom-icon.vue
@@ -1,5 +1,17 @@
 <template>
   <div>
+    <tiny-link>
+      <template #icon>
+        <icon-fillet-external-link class="tiny-svg-link"></icon-fillet-external-link>
+      </template>
+      链接按钮
+    </tiny-link>
+    <tiny-link disabled>
+      <template #icon>
+        <icon-fillet-external-link class="tiny-svg-size"></icon-fillet-external-link>
+      </template>
+      链接按钮
+    </tiny-link>
     <tiny-link :underline="false" :icon="IconEdit"> 编辑 </tiny-link>
     <tiny-link :underline="false" :icon="IconEdit" disabled> 禁用 </tiny-link>
     <tiny-link :underline="false"> 查看<icon-view class="tiny-svg-size"></icon-view> </tiny-link>
@@ -12,15 +24,16 @@
   </div>
 </template>
 
-<script lang="jsx">
+<script>
 import { Link } from '@opentiny/vue'
-import { IconEdit, IconView, IconDel } from '@opentiny/vue-icon'
+import { IconEdit, IconView, IconDel, IconFilletExternalLink } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinyLink: Link,
     IconView: IconView(),
-    IconDel: IconDel()
+    IconDel: IconDel(),
+    IconFilletExternalLink: IconFilletExternalLink()
   },
   data() {
     return {
@@ -34,4 +47,8 @@ export default {
 .tiny-link {
   margin-right: 8px;
 }
+.tiny-svg-link,
+.tiny-svg-link g {
+  fill: var(--ti-link-default-text-color);
+}
 </style>
diff --git a/packages/theme/src/link/aurora-theme.js b/packages/theme/src/link/aurora-theme.js
@@ -1,5 +1,6 @@
 export const tinyLinkAuroraTheme = {
   'ti-link-default-text-color': '#606266',
   'ti-link-default-hover-text-color': '#40a9ff',
-  'ti-link-has-svg-hover-text-color': '#40a9ff'
+  'ti-link-has-svg-hover-text-color': '#40a9ff',
+  'ti-link-primary-disabled-text-color': '#a0cfff'
 }
diff --git a/packages/theme/src/link/index.less b/packages/theme/src/link/index.less
@@ -52,61 +52,25 @@
   }
 
   &&--additional {
-    &:after {
-      content: '';
-      width: var(--ti-link-underline-width);
-      position: absolute;
-      left: 0;
-      right: 0;
-      height: 0;
-      bottom: 1px;
-      display: var(--ti-link-default-border-display);
-      border-bottom: 1px;
-      border-bottom-style: solid;
-      border-bottom-color: var(--ti-link-default-border-color);
-    }
 
     &:hover {
       color: var(--ti-link-default-hover-text-color);
       fill: var(--ti-link-default-hover-text-color);
-
-      g {
-        fill: var(--ti-link-default-hover-text-color);
-      }
-
-      &:after {
-        border-bottom-color: var(--ti-link-default-hover-border-color);
-      }
     }
 
     &.is-disabled {
       &:hover {
         color: var(--ti-link-default-disabled-text-color);
         fill: var(--ti-link-default-disabled-text-color);
-
-        g {
-          fill: var(--ti-link-default-disabled-text-color);
-        }
-      }
-
-      &:after {
-        border-bottom-color: var(--ti-link-default-disabled-text-color);
       }
     }
 
-    &:has(.@{svg-cls}):after {
-      display: none;
-    }
+
 
     &:has(.@{svg-cls}):hover {
       font-weight: var(--ti-link-icon-hover-text-weight);
       color: var(--ti-link-has-svg-hover-text-color);
       fill: var(--ti-link-has-svg-hover-text-color);
-
-      g {
-        fill: var(--ti-link-has-svg-hover-text-color);
-      }
-
     }
 
     &:has(.@{svg-cls}).is-disabled {
@@ -115,29 +79,29 @@
         color: var(--ti-link-default-disabled-text-color);
         fill: var(--ti-link-default-disabled-text-color);
       }
+    }
 
-      g {
-        fill: var(--ti-link-default-disabled-text-color);
-      }
+  }
+
+  &.is-underline:hover {
+    &:after {
+      content: '';
+      width: var(--ti-link-only-text-underline-width);
+      position: absolute;
+      left: 0;
+      height: 0;
+      bottom: 0;
+      display: block;
+      border-bottom: 1px solid var(--ti-link-border-color);
     }
 
-    &:has(.@{svg-cls}) {
-      g {
-        fill: var(--ti-link-default-disabled-text-color);
-      }
+    &:has(.@{svg-cls}):after {
+      width: var(--ti-link-has-icon-underline-width);
     }
-  }
 
-  &.is-underline:hover:after {
-    content: '';
-    width: var(--ti-link-underline-width);
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 0;
-    bottom: 0;
-    display: block;
-    border-bottom: 1px solid var(--ti-link-border-color);
+    &:has(>:first-child:not(.@{link-prefix-cls}__inner)):after {
+      left: calc(100% - var(--ti-link-has-icon-underline-width));
+    }
   }
 
   &.is-disabled {
@@ -150,24 +114,18 @@
       var(--ti-link-default-border-color),
       var(--ti-link-default-hover-text-color),
       var(--ti-link-default-disabled-text-color)
-    );
+      )
 
-    .@{svg-cls} {
-      g {
-        fill: var(--ti-link-default-text-color);
-      }
-    }
   }
 
+
   &&--primary {
     .link-type(
       var(--ti-link-primary-text-color),
       var(--ti-link-primary-border-color),
       var(--ti-link-primary-hover-text-color),
       var(--ti-link-primary-disabled-text-color)
-    );
-
-    display: var(--ti-link-display);
+      )
   }
 
   &&--danger {
@@ -176,9 +134,7 @@
       var(--ti-link-danger-border-color),
       var(--ti-link-danger-hover-text-color),
       var(--ti-link-danger-disabled-text-color)
-    );
-
-    display: var(--ti-link-display);
+      )
   }
 
   &&--success {
@@ -187,9 +143,7 @@
       var(--ti-link-success-border-color),
       var(--ti-link-success-hover-text-color),
       var(--ti-link-success-disabled-text-color)
-    );
-
-    display: var(--ti-link-display);
+      )
   }
 
   &&--warning {
@@ -198,9 +152,7 @@
       var(--ti-link-warning-border-color),
       var(--ti-link-warning-hover-text-color),
       var(--ti-link-warning-disabled-text-color)
-    );
-
-    display: var(--ti-link-display);
+      )
   }
 
   &&--info {
@@ -209,8 +161,6 @@
       var(--ti-link-info-border-color),
       var(--ti-link-info-hover-text-color),
       var(--ti-link-info-disabled-text-color)
-    );
-
-    display: var(--ti-link-display);
+      )
   }
 }
diff --git a/packages/theme/src/link/smb-theme.js b/packages/theme/src/link/smb-theme.js
@@ -1,15 +1,20 @@
 export const tinyLinkSmbTheme = {
-  'ti-link-display': 'none',
   'ti-link-svg-width': '16px',
   'ti-link-svg-height': '16px',
   'ti-link-svg-margin-right': '4px',
   'ti-link-font-weight': 'var(--ti-common-font-weight-4)',
-  'ti-link-default-border-display': 'none',
   'ti-link-default-hover-border-color': '#595959',
   'ti-link-default-hover-text-color': 'var(--ti-common-color-text-highlight)',
   'ti-link-default-text-color': 'var(--ti-common-color-text-highlight)',
   'ti-link-default-disabled-text-color': '#C2C2C2',
   'ti-link-icon-hover-text-weight': 'var(--ti-common-font-weight-4)',
   'ti-link-default-border-color': '#1476FF',
-  'ti-link-underline-width': 'calc(100% - 20px)'
+  'ti-link-has-icon-underline-width': 'calc(100% - 20px)',
+  'ti-link-has-svg-hover-text-color': '#1476FF',
+  'ti-link-danger-hover-text-color': 'var(--ti-common-color-danger-hover)',
+  'ti-link-primary-disabled-text-color': 'var(--ti-common-color-primary-disabled-text)',
+  'ti-link-danger-disabled-text-color': 'var(--ti-common-color-danger-disabled-text)',
+  'ti-link-success-disabled-text-color': 'var(--ti-common-color-success-disabled-text)',
+  'ti-link-warning-disabled-text-color': 'var(--ti-common-color-warning-disabled-text)',
+  'ti-link-info-disabled-text-color': 'var(--ti-common-color-info-disabled-text)'
 }
diff --git a/packages/theme/src/link/vars.less b/packages/theme/src/link/vars.less
@@ -17,8 +17,10 @@
   --ti-link-font-weight: var(--ti-common-font-weight-5);
   // 链接下划线色(hide)
   --ti-link-border-color: var(--ti-common-color-line-active);
-  // 链接下划线宽度(hide)
-  --ti-link-underline-width: 100%;
+  // 链接有图标时下划线宽度(hide)
+  --ti-link-has-icon-underline-width: 100%;
+  // 链接只有文字时下划线宽度(hide)
+  --ti-link-only-text-underline-width: 100%;
   // 链接是否显示
   --ti-link-display: inline;
   // 链接图标宽度
@@ -31,8 +33,6 @@
   // 链接图标悬浮字重
   --ti-link-icon-hover-text-weight: var(--ti-common-font-weight-5);
 
-  // 链接下划线是否显示，默认不显示
-  --ti-link-default-border-display: none;
   // 默认链接文本色
   --ti-link-default-text-color: var(--ti-common-color-info-text);
   // 默认链接悬浮下划线色
@@ -91,5 +91,5 @@
   --ti-link-info-disabled-text-color: var(--ti-common-color-info-disabled);
 
   // 带有图标的链接悬浮文本色
-  --ti-link-has-svg-hover-text-color: var(--ti-link-default-text-color);
+  --ti-link-has-svg-hover-text-color: var(--ti-common-color-text-link);
 }
diff --git a/packages/theme/src/mixins/link.less b/packages/theme/src/mixins/link.less
@@ -14,18 +14,18 @@
   color: @color;
   fill: @color;
 
-  &.is-underline:hover:after,
-  &:after {
-    border-color: @border-color;
+  &.is-underline:hover {
+    &:after {
+      border-color: @border-color;
+    }
   }
 
   &:hover {
-    color: @hover-color;
-    fill: @hover-color;
     text-decoration: none;
   }
 
-  &.is-disabled {
+  &.is-disabled,
+  &.is-disabled:hover {
     color: @disabled-color;
     fill: @disabled-color;
   }