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

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

@@ -1,6 +1,6 @@
 ---
 category: components
-type: 其他
+type: 导航
 title: Anchor
 subtitle: 锚点
 theme: true

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

@@ -3,6 +3,6 @@ category: components
 type: 数据展示
 title: Avatar
 subtitle: 头像
-order: 0
+theme: true
 ---
 

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

@@ -1,12 +1,9 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@avatar-size-sm` | `@height-sm` | - | - |
-| `@avatar-size-md` | `@height-md` | - | - |
-| `@avatar-size-lg` | `@height-lg` | - | - |
-| `@avatar-font-size-sm` | `@font-size-lg` | - | - |
-| `@avatar-font-size-md` | `@font-size-xl` | - | - |
-| `@avatar-font-size-lg` | `@font-size-2xl` | - | - |
-| `@avatar-color` | `@color-white` | - | - |
-| `@avatar-background-color` | `@color-grey` | `@color-graphite-l20` | - |
-| `@avatar-border-radius-circle` | `@border-radius-full` | - | - |
-| `@avatar-border-radius-square` | `@border-radius-sm` | - | - |
+| `@avatar-size-sm` | `var(--ix-height-sm)` | - | - |
+| `@avatar-size-md` | `var(--ix-height-md)` | - | - |
+| `@avatar-size-lg` | `var(--ix-height-lg)` | - | - |
+| `@avatar-color` | `var(--ix-text-color-inverse)` | - | - |
+| `@avatar-background-color` | `var(--ix-background-color-deep)` | - | - |
+| `@avatar-border-radius-circle` | `50%` | - | - |
+| `@avatar-border-radius-square` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |

packages/components/avatar/style/index.less

@@ -1,16 +1,15 @@
 @import '../../style/mixins/reset.less';
 
 .@{avatar-prefix} {
-  .reset-component();
+  .reset-component-new();
+  .reset-color(@avatar-color, @avatar-background-color);
 
   position: relative;
   display: inline-block;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   overflow: hidden;
-  color: @avatar-color;
-  background-color: @avatar-background-color;
 
   &-circle {
     border-radius: @avatar-border-radius-circle;
@@ -25,15 +24,15 @@
   }
 
   &-lg {
-    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
+    .avatar-size(@avatar-size-lg);
   }
 
   &-md {
-    .avatar-size(@avatar-size-md, @avatar-font-size-md);
+    .avatar-size(@avatar-size-md);
   }
 
   &-sm {
-    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
+    .avatar-size(@avatar-size-sm);
   }
 
   &-text {
@@ -50,12 +49,12 @@
   }
 }
 
-.avatar-size(@size, @font-size) {
+.avatar-size(@size) {
   width: @size;
   height: @size;
   line-height: @size;
 
-  &.@{avatar-prefix}-icon {
-    font-size: @font-size;
+  .@{icon-prefix} {
+    font-size: calc(@size / 2);
   }
 }

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

@@ -1,10 +1,7 @@
-@avatar-size-sm: @height-sm;
-@avatar-size-md: @height-md;
-@avatar-size-lg: @height-lg;
-@avatar-font-size-sm: @font-size-lg;
-@avatar-font-size-md: @font-size-xl;
-@avatar-font-size-lg: @font-size-2xl;
-@avatar-color: @color-white;
-@avatar-background-color: @color-grey;
-@avatar-border-radius-circle: @border-radius-full;
-@avatar-border-radius-square: @border-radius-sm;
+@avatar-size-sm: var(--ix-height-sm);
+@avatar-size-md: var(--ix-height-md);
+@avatar-size-lg: var(--ix-height-lg);
+@avatar-color: var(--ix-text-color-inverse);
+@avatar-background-color: var(--ix-background-color-deep);
+@avatar-border-radius-circle: 50%;
+@avatar-border-radius-square: var(--ix-border-radius-md);

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

@@ -1,3 +1,3 @@
 @import './default.variable.less';
 
-@avatar-background-color: @color-graphite-l20;
+@avatar-border-radius-square: var(--ix-border-radius-sm);