fix(comp:anchor): style update and css variable support (#1379)

packages/components/anchor/docs/Index.zh.md

@@ -3,5 +3,6 @@ category: components
 type: 其他
 title: Anchor
 subtitle: 锚点
+theme: true
 ---
 

packages/components/anchor/docs/Theme.zh.md

@@ -1,18 +1,5 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@anchor-background-color` | `@background-color-component` | - | - |
-| `@anchor-wrapper-margin-left` | `-@spacing-xs` | - | - |
-| `@anchor-wrapper-padding-left` | `@spacing-xs` | - | - |
-| `@anchor-color` | `@text-color` | - | - |
-| `@anchor-border-width` | `@border-width-md` | - | - |
-| `@anchor-border-color` | `@border-color` | - | - |
-| `@anchor-ink-ball-width` | `2px` | `2px` | - |
-| `@anchor-ink-ball-height` | `16px` | `16px` | - |
-| `@anchor-ink-ball-radius` | `2px` | `2px` | - |
-| `@anchor-ink-ball-background-color` | `@color-primary` | - | - |
-| `@anchor-link-margin` | `@spacing-md 0 @spacing-md @spacing-lg` | `@spacing-md 0 @spacing-lg @spacing-lg` | - |
-| `@anchor-link-font-size` | `@font-size-md` | `@font-size-sm` | - |
-| `@anchor-link-line-height` | `1` | - | - |
-| `@anchor-ink-line-width` | `1px` | - | - |
-| `@anchor-link-active-color` | `@color-primary` | - | - |
-| `@anchor-link-hover-color` | `@color-primary` | - | - |
+| `@anchor-color-active` | `var(--ix-color-primary)` | - | - |
+| `@anchor-ink-ball-width` | `2px` | - | - |
+| `@anchor-ink-ball-height` | `16px` | - | - |

packages/components/anchor/style/index.less

@@ -2,16 +2,17 @@
 @import '../../style/mixins/ellipsis.less';
 
 .@{anchor-prefix} {
-  .reset-component();
-
   position: relative;
-  padding: @spacing-xs 0 @spacing-xs @anchor-border-width;
+  padding: 4px 0 4px @anchor-ink-ball-width;
 
   &-wrapper {
-    margin-left: @anchor-wrapper-margin-left;
-    padding-left: @anchor-wrapper-padding-left;
+    .reset-component-new();
+    .reset-font-size();
+    .reset-color();
+
+    margin-left: -4px;
+    padding-left: 4px;
     overflow: auto;
-    background-color: @anchor-background-color;
   }
 
   &-ink {
@@ -23,10 +24,10 @@
     &::before {
       position: relative;
       display: block;
-      width: @anchor-ink-line-width;
+      width: 1px;
       height: 100%;
       margin: 0 auto;
-      background-color: @anchor-border-color;
+      background-color: var(--ix-border-color);
       content: ' ';
     }
 
@@ -35,9 +36,9 @@
       display: none;
       width: @anchor-ink-ball-width;
       height: @anchor-ink-ball-height;
-      background-color: @anchor-ink-ball-background-color;
-      border-radius: @anchor-ink-ball-radius;
-      transition: top @transition-duration-base @ease-in-out;
+      border-radius: @anchor-ink-ball-width;
+      background-color: @anchor-color-active;
+      transition: top var(--ix-transition-duration-fast) var(--ix-ease-in-out);
 
       &-visible {
         display: inline-block;
@@ -57,25 +58,19 @@
   }
 
   &-link {
-    margin: @anchor-link-margin;
-    line-height: @anchor-link-line-height;
+    margin: 8px 0 8px 16px;
 
     &-title {
       .ellipsis();
 
       position: relative;
       display: block;
-      font-size: @anchor-link-font-size;
-      color: @anchor-color;
       text-decoration: none;
-      transition: @transition-all-base;
+      transition: color var(--ix-transition-duration-fast);
 
-      &:hover {
-        color: @anchor-link-hover-color;
-      }
-
+      &:hover,
       &-active {
-        color: @anchor-link-active-color;
+        color: @anchor-color-active;
       }
     }
   }

packages/components/anchor/style/themes/default.variable.less

@@ -1,18 +1,4 @@
-@anchor-background-color: @background-color-component;
-@anchor-wrapper-margin-left: -@spacing-xs;
-@anchor-wrapper-padding-left: @spacing-xs;
-@anchor-color: @text-color;
-@anchor-border-width: @border-width-md;
-@anchor-border-color: @border-color;
+@anchor-color-active: var(--ix-color-primary);
 
 @anchor-ink-ball-width: 2px;
 @anchor-ink-ball-height: 16px;
-@anchor-ink-ball-radius: 2px;
-@anchor-ink-ball-background-color: @color-primary;
-
-@anchor-link-margin: @spacing-md 0 @spacing-md @spacing-lg;
-@anchor-link-font-size: @font-size-md;
-@anchor-link-line-height: 1;
-@anchor-ink-line-width: 1px;
-@anchor-link-active-color: @color-primary;
-@anchor-link-hover-color: @color-primary;

packages/components/anchor/style/themes/seer.variable.less

@@ -1,8 +1 @@
 @import './default.variable.less';
-
-@anchor-ink-ball-width: 2px;
-@anchor-ink-ball-height: 16px;
-@anchor-ink-ball-radius: 2px;
-
-@anchor-link-font-size: @font-size-sm;
-@anchor-link-margin: @spacing-md 0 @spacing-lg @spacing-lg;