feat(AvatarGroup): add mixin file

Tencent · Sep 10, 2024 · 99dba03 · 99dba03
1 parent 3504ad8
commit 99dba03
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 24 deletions.
diff --git a/style/mobile/_variables.less b/style/mobile/_variables.less
@@ -89,8 +89,9 @@
 @font-size-s: var(--td-font-size-s, 12px); // 字号-二级字号
 @font-size-base: var(--td-font-size-base, 14px); // 字号-三级字号
 @font-size-m: var(--td-font-size-m, 16px); // 字号-二级字号
-@font-size-l: var(--td-font-size-l, 20px); // 字号-四级字号
-@font-size-xl: var(--td-font-size-xl, 36px); // 字号-五级字号
+@font-size-l: var(--td-font-size-l, 18px); // 字号-四级字号
+@font-size-xl: var(--td-font-size-xl, 20px); // 字号-五级字号
+@font-size-xxl: var(--td-font-size-xxl, 36px);
 
 @font-family: var(--td-font-family, PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
 @font-family-medium: var(--td-font-family-medium, PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体

diff --git a/style/mobile/components/avatar/v2/_index.less b/style/mobile/components/avatar/v2/_index.less
@@ -2,6 +2,8 @@
 
 @import "./_var.less";
 
+@import "./_mixin.less";
+
 .@{prefix}-avatar {
   display: flex;
   align-items: center;
@@ -99,9 +101,15 @@
 // 头像组
 .@{prefix}-avatar-group {
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
 
-  &-offset-left {
+  &-offset-left,
+  &-offset-right {
+    & .@{prefix}-avatar__wrapper {
+      padding: @avatar-group-line-spacing 0;
+    }
+
     &-small {
       --td-avatar-margin-left: @avatar-group-offset-small; // ‘small’尺寸组合头像偏移间距
     }
@@ -115,18 +123,14 @@
     }
   }
 
-  &-offset-right {
-    &-small {
-      --td-avatar-margin-left: @avatar-group-offset-small;
-    }
-
-    &-medium {
-      --td-avatar-margin-left: @avatar-group-offset-medium;
-    }
+  &__collapse--slot,
+  &__collapse--default {
+    z-index: 0;
+    font-weight: 600;
+  }
 
-    &-large {
-      --td-avatar-margin-left: @avatar-group-offset-large;
-    }
+  &-offset-left {
+    .generate-z-index(@avatar-group-init-zIndex);
   }
 
   &__collapse--slot {

diff --git a/style/mobile/components/avatar/v2/_mixin.less b/style/mobile/components/avatar/v2/_mixin.less
@@ -0,0 +1,9 @@
+.generate-z-index(@n, @i: 1) when (@i =< @n) {
+  & .@{prefix}-avatar__wrapper:nth-child(@{i}) {
+    z-index: calc(
+      var(--td-avatar-group-init-z-index, @avatar-group-init-zIndex) - @i
+    );
+  }
+
+  .generate-z-index(@n, (@i + 1));
+}
diff --git a/style/mobile/components/avatar/v2/_var.less b/style/mobile/components/avatar/v2/_var.less
@@ -4,24 +4,27 @@
 @avatar-medium-width: var(--td-avatar-medium-width, 48px);
 @avatar-large-width: var(--td-avatar-large-width, 64px);
 
-@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-s);
-@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-base);
-@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, 16px);
+@avatar-text-small-font-size: var(--td-avatar-text-small-font-size, @font-size-base);
+@avatar-text-medium-font-size: var(--td-avatar-text-medium-font-size, @font-size-m);
+@avatar-text-large-font-size: var(--td-avatar-text-large-font-size, @font-size-xl);
 
 @avatar-icon-small-font-size: var(--td-avatar-icon-small-font-size, 20px);
 @avatar-icon-medium-font-size: var(--td-avatar-icon-medium-font-size, 24px);
 @avatar-icon-large-font-size: var(--td-avatar-icon-large-font-size, 32px);
 
-@avatar-border-width-small: var(--td-avatar-border-width-small, 2px);
-@avatar-border-width-medium: var(--td-avatar-border-width-medium, 3px);
-@avatar-border-width-large: var(--td-avatar-border-width-large, 4px);
+@avatar-border-width-small: var(--td-avatar-border-width-small, 1px);
+@avatar-border-width-medium: var(--td-avatar-border-width-medium, 2px);
+@avatar-border-width-large: var(--td-avatar-border-width-large, 3px);
 @avatar-border-color: var(--td-avatar-border-color, @bg-color-container);
 @avatar-circle-border-radius: var(--td-avatar-circle-border-radius, @radius-circle);
 @avatar-round-border-radius: var(--td-avatar-round-border-radius, @radius-default);
 
 @avatar-margin-left: var(--td-avatar-margin-left, 0);
 
 //组合头像偏移量
-@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -4px);
-@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -6px);
+@avatar-group-offset-small: var(--td-avatar-group-margin-left-small, -8px);
+@avatar-group-offset-medium: var(--td-avatar-group-margin-left-medium, -8px);
 @avatar-group-offset-large: var(--td-avatar-group-margin-left-large, -8px);
+@avatar-group-line-spacing: var(--td-avatar-group-line-spacing, 2px);
+
+@avatar-group-init-zIndex: 50;
diff --git a/style/mobile/components/result/v2/_var.less b/style/mobile/components/result/v2/_var.less
@@ -1,6 +1,6 @@
 @result-icon-font-size: 80px;
 
-@result-title-font-size: var(--td-result-title-font-size, @font-size-l);
+@result-title-font-size: var(--td-result-title-font-size, @font-size-xl);
 @result-title-line-height: var(--td-result-title-line-height, 28px);
 @result-title-color: var(--td-result-title-color, @text-color-primary);
 

diff --git a/style/mobile/components/swipe-cell/v2/_index.less b/style/mobile/components/swipe-cell/v2/_index.less
@@ -34,7 +34,7 @@
   }
 
   &__icon {
-    font-size: @font-size-l;
+    font-size: @font-size-xl;
   }
 
   &__icon + &__text:not(:empty) {

diff --git a/style/mobile/theme/_font.less b/style/mobile/theme/_font.less
@@ -0,0 +1,37 @@
+:root {
+  // 字体family token
+  --td-font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  --td-font-family-medium: PingFang SC, Microsoft YaHei, Arial Medium;
+
+  // 字体大小 token
+  --td-font-size-link-small: 12px;
+  --td-font-size-link-medium: 14px;
+  --td-font-size-link-large: 16px;
+  --td-font-size-mark-extra-small: 10px;
+  --td-font-size-mark-small: 12px;
+  --td-font-size-mark-medium: 14px;
+  --td-font-size-mark-large: 16px;
+  --td-font-size-body-extra-small: 10px;
+  --td-font-size-body-small: 12px;
+  --td-font-size-body-medium: 14px;
+  --td-font-size-body-large: 16px;
+  --td-font-size-title-small: 14px;
+  --td-font-size-title-medium: 16px;
+  --td-font-size-title-large: 18px;
+  --td-font-size-title-extra-large: 20px;
+  --td-font-size-headline-small: 24px;
+  --td-font-size-headline-medium: 28px;
+  --td-font-size-headline-large: 36px;
+  --td-font-size-display-medium: 48px;
+  --td-font-size-display-large: 64px;
+
+  // 关联旧 font-size token
+  --td-font-size: 10px;
+  --td-font-size-xs: var(--td-font-size-body-extra-small);
+  --td-font-size-s: var(--td-font-size-body-small);
+  --td-font-size-base: var(--td-font-size-title-small);
+  --td-font-size-m: var(--td-font-size-title-medium);
+  --td-font-size-l: var(--td-font-size-title-large);
+  --td-font-size-xl: var(--td-font-size-title-extra-large);
+  --td-font-size-xxl: var(--td-font-size-headline-large);
+}
diff --git a/style/mobile/theme/_index.less b/style/mobile/theme/_index.less
@@ -1 +1,3 @@
 @import "./_dark.less";
+
+@import "./_font.less";