feat: 调整官网主题部分样式

ant-design · Nov 8, 2024 · cbb625b · cbb625b
2 parents bc882b5 + 590f4a1
commit cbb625b
Show file tree

Hide file tree

Showing 19 changed files with 112 additions and 58 deletions.
diff --git a/src/Grid/variable.less b/src/Grid/variable.less
@@ -1,18 +1,19 @@
+@import (reference) '../style/variables.less';
 @import (reference) '../style/themes/index.less';
 @import (reference) '../style/mixins/hairline.less';
 
 @gridPrefix: ant-grid;
 
 @icon-size: 56 * @rpx;
 
-@title-color: @COLOR_TEXT_PRIMARY;
+@title-color: var(--color-text-primary, @COLOR_TEXT_PRIMARY);
 
 @description-size: 24 * @rpx;
 
-@description-color: @COLOR_TEXT_ASSIST;
+@description-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
 
 @vertical-space: 40 * @rpx;
 
 @columnsscroll-width: 130 * @rpx;
 
-@border-color: @COLOR_BORDER;
+@border-color: var(--color-border, @COLOR_BORDER);
diff --git a/src/GuideTour/index.less b/src/GuideTour/index.less
@@ -12,11 +12,11 @@
     .ant-button:nth-of-type(1) {
       color: @guide-tour-text-color;
       background-color: transparent;
-      box-shadow: inset 0 0 0 @border-width-standard @COLOR_BORDER_DEFAULT;
+      box-shadow: inset 0 0 0 @border-width-standard @guide-tour-border-color;
     }
     .ant-button:nth-of-type(2) {
-      color: @COLOR_TEXT_PRIMARY_DEFAULT;
-      background-color: @COLOR_WHITE_DEFAULT;
+      color: @guide-tour-btn-color;
+      background-color: @guide-tour-text-color;
       box-shadow: none;
     }
     .ant-button {

diff --git a/src/GuideTour/variable.less b/src/GuideTour/variable.less
@@ -1,3 +1,4 @@
+@import (reference) '../style/variables.less';
 @import (reference) '../style/themes/index.less';
 
 @guideTourPrefix: ant-guide-tour;
@@ -9,17 +10,17 @@
 // 层级-3
 @guide-tour-z-index-3: 10001;
 // 主要文字颜色
-@guide-tour-text-color: @COLOR_WHITE_DEFAULT;
+@guide-tour-text-color: var(--color-white, @COLOR_WHITE);
 // 关闭按钮颜色
-@guide-tour-clear-color: @COLOR_TEXT_ASSIST_DEFAULT;
+@guide-tour-clear-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
 // 按钮距离底部
 @guide-tour-button-bottom: calc(100 * @rpx + env(safe-area-inset-bottom));
 // 按钮高度
 @guide-tour-button-height:52 * @rpx;
 // 步骤条点的长宽
 @guide-tour-dot-size: 6 * @rpx;
 // 步骤条点的颜色
-@guide-tour-dot-color: @COLOR_TEXT_ASSIST_DEFAULT;
+@guide-tour-dot-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
 // 激活步骤条点的长度
 @guide-tour-dot-active-width:26 * @rpx;
 // 步骤条点的弧度
@@ -28,3 +29,7 @@
 @guide-tour-dot-bottom: calc(
   @guide-tour-button-bottom + 40 * @rpx + @guide-tour-button-height
 );
+
+@guide-tour-border-color: var(--color-border, @COLOR_BORDER);
+
+@guide-tour-btn-color: var(--color-text-primary, @COLOR_TEXT_PRIMARY);
diff --git a/src/ImageUpload/index.less b/src/ImageUpload/index.less
@@ -5,7 +5,7 @@
 .@{imageUploadPrefix} {
   display: flex;
   flex-wrap: wrap;
-  background: @COLOR_CARD;
+  background: @image-upload-background-color;
 
   &-show {
     position: relative;
@@ -36,7 +36,7 @@
     width: 160 * @rpx;
     height: 160 * @rpx;
     margin: @image-upload-add-image-container-margin;
-    background-color: @COLOR_GREY_CARD;
+    background-color: @image-upload-wrapper-background;
     border-radius: @corner-radius-md;
   }
   &-add-image-icon {
@@ -48,7 +48,7 @@
     height: 160 * @rpx;
     margin: @image-upload-common-margin;
     border-radius: @corner-radius-md;
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: @image-upload-cover-background;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -62,7 +62,7 @@
       }
 
       &-text {
-        color: @COLOR_WHITE;
+        color: @image-upload-text-color;
         font-size: 24 * @rpx;
         margin-top: 8 * @rpx;
       }
@@ -73,11 +73,11 @@
 
       &-icon {
         font-size: 48rpx;
-        color: @COLOR_WHITE;
+        color: @image-upload-text-color;
       }
 
       &-text {
-        color: @COLOR_WHITE;
+        color: @image-upload-text-color;
         font-size: 24rpx;
         margin-top: 8rpx;
       }

diff --git a/src/ImageUpload/variable.less b/src/ImageUpload/variable.less
@@ -1,3 +1,4 @@
+@import (reference) '../style/variables.less';
 @import (reference) '../style/themes/index.less';
 
 @image-upload-size-base: 4 * @rpx;
@@ -16,3 +17,11 @@
 @image-upload-close-tip-height: @image-upload-size-base * 10;
 
 @image-upload-close-tip-url: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*_Az1QavR4OsAAAAAAAAAAAAAARQnAQ';
+
+@image-upload-background-color: var(--color-card, @COLOR_CARD);
+@image-upload-wrapper-background: var(--color-grey-card, @COLOR_GREY_CARD);
+@image-upload-cover-background: var(
+  --image-upload-cover-background,
+  rgba(0, 0, 0, 0.4)
+);
+@image-upload-text-color: var(--color-white, @COLOR_WHITE);
diff --git a/src/IndexBar/index.less b/src/IndexBar/index.less
@@ -1,4 +1,4 @@
-@import (reference) '../style/themes/index.less';
+@import (reference) './variable.less';
 
 .ant-indexbar-side {
   z-index: 9;
@@ -23,7 +23,7 @@
     &-default {
       font-size: 22 * @rpx;
       font-weight: bold;
-      color: @COLOR_TEXT_ASSIST;
+      color: @index-bar-assist--color;
       display: flex;
       align-items: center;
       justify-content: center;
@@ -38,15 +38,15 @@
       border-radius: 94 * @rpx;
       line-height: 94 * @rpx;
       text-align: center;
-      background: @COLOR_TEXT_WEAK;
-      color: @COLOR_WHITE;
+      background: @index-bar-tip-background-color;
+      color: @index-bar-text-color;
       font-size: 50 * @rpx;
     }
   }
   &-active {
     border-radius: 16 * @rpx;
-    background-color: @COLOR_BRAND1;
-    color: @COLOR_WHITE;
+    background-color: @index-bar-active-color;
+    color: @index-bar-text-color;
   }
   &-scroll {
     width: 100%;

diff --git a/src/IndexBar/variable.less b/src/IndexBar/variable.less
@@ -0,0 +1,7 @@
+@import (reference) '../style/variables.less';
+@import (reference) '../style/themes/index.less';
+
+@index-bar-tip-background-color: var(--color-text-weak, @COLOR_TEXT_WEAK);
+@index-bar-text-color: var(--color-white, @COLOR_WHITE);
+@index-bar-assist--color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
+@index-bar-active-color: var(--color-brand1, @COLOR_BRAND1);
diff --git a/src/Input/Textarea/index.less b/src/Input/Textarea/index.less
@@ -4,7 +4,7 @@
 .@{inputItemPrefix} {
   display: flex;
   align-items: center;
-  background: @COLOR_CARD;
+  background: @input-background-color;
   &-disabled {
     opacity: 0.4;
   }
@@ -22,7 +22,7 @@
     font-size: 34 * @rpx;
     text-align: left;
     color: @input-item-color;
-    background: @COLOR_CARD;
+    background: @input-background-color;
     &-clear {
       padding-right: 34 * @rpx;
     }
@@ -39,7 +39,7 @@
     border-radius: 16 * @rpx;
     margin-left: 8 * @rpx;
     &-icon {
-      color: @COLOR_TEXT_WEAK;
+      color: @input-item-placeholder-color;
       font-size: 34 * @rpx;
     }
   }

diff --git a/src/Input/index.less b/src/Input/index.less
@@ -4,7 +4,7 @@
 .@{inputItemPrefix} {
   display: flex;
   align-items: center;
-  background: @COLOR_CARD;
+  background: @input-background-color;
   &-disabled {
     opacity: 0.4;
   }
@@ -16,15 +16,15 @@
     overflow: hidden;
   }
   &-prefix {
-    color: @COLOR_TEXT_WEAK;
+    color: @input-item-placeholder-color;
     font-size: 34 * @rpx;
     margin: 0 8 * @rpx 0 8 * @rpx;
     &:empty {
       display: none;
     }
   }
   &-suffix {
-    color: @COLOR_TEXT_WEAK;
+    color: @input-item-placeholder-color;
     font-size: 34 * @rpx;
     margin: 0 8 * @rpx 0 8 * @rpx;
     &:empty {
@@ -38,7 +38,7 @@
     font-size: 34 * @rpx;
     text-align: left;
     color: @input-item-color;
-    background: @COLOR_CARD;
+    background: @input-background-color;
   }
 
   &-clear {
@@ -47,7 +47,7 @@
     align-items: center;
     border-radius: 16 * @rpx;
     &-icon {
-      color: @COLOR_TEXT_WEAK;
+      color: @input-item-placeholder-color;
       font-size: 34 * @rpx;
       padding: 8 * @rpx 0 8 * @rpx 16 * @rpx;
     }

diff --git a/src/Input/variable.less b/src/Input/variable.less
@@ -1,10 +1,12 @@
+@import (reference) '../style/variables.less';
 @import (reference) '../style/themes/index.less';
 
 // input 字体颜色
-@input-item-color: @COLOR_TEXT_PRIMARY;
+@input-item-color: var(--color-text-primary, @COLOR_TEXT_PRIMARY);
 // input 字体大小
 @input-item-size: @font-size-content;
 // input placeholder 颜色
-@input-item-placeholder-color: @COLOR_TEXT_WEAK;
+@input-item-placeholder-color: var(--color-text-weak, @COLOR_TEXT_WEAK);
 // input 清除 颜色
-@input-item-clear-color: @COLOR_TEXT_ASSIST;
+@input-item-clear-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
+@input-background-color: var(--color-card, @COLOR_CARD);
diff --git a/src/List/ListItem/index.less b/src/List/ListItem/index.less
@@ -6,10 +6,10 @@
 .@{listItemPrefix} {
   align-items: center;
   background-color: @list-background-color;
-  color: @COLOR_TEXT_PRIMARY;
+  color: @list-content-color;
   line-height: 1.4;
   &-hover {
-    background-color: @COLOR_BORDER;
+    background-color: @list-item-border-color;
   }
 
   &-line {
@@ -28,7 +28,7 @@
 
   &-image {
     border-radius: 50vh;
-    &-large-icon{
+    &-large-icon {
       font-size: @list-item-image-large-size;
     }
     &-large-image {
@@ -58,7 +58,7 @@
       padding: 24 * @rpx 0;
       &-small-text {
         font-size: 24 * @rpx;
-        line-height:  33 * @rpx;
+        line-height: 33 * @rpx;
       }
       &-normal-text {
         font-size: 28 * @rpx;
@@ -72,12 +72,12 @@
     }
     &-title {
       &-container {
-        color: @COLOR_TEXT_ASSIST;
+        color: @list-extra-brief-color;
       }
     }
     &-brief {
       &-container {
-        color: @COLOR_TEXT_ASSIST;
+        color: @list-extra-brief-color;
       }
     }
   }
@@ -100,13 +100,13 @@
       flex-direction: row-reverse;
       font-size: 28 * @rpx;
       line-height: 40 * @rpx;
-      color: @COLOR_TEXT_ASSIST;
+      color: @list-extra-brief-color;
     }
   }
 
   &-arrow {
     margin-left: 8 * @rpx;
-    color: @COLOR_TEXT_WEAK;
+    color: @list-item-text-color;
     display: flex;
     align-items: center;
     .ant-icon {
@@ -119,7 +119,7 @@
 
   .line {
     height: 1 * @rpx;
-    background-color: @COLOR_BORDER;
+    background-color: @list-item-border-color;
     width: calc(100% - 24 * @rpx);
     position: absolute;
     right: 0;

diff --git a/src/List/variable.less b/src/List/variable.less
@@ -1,27 +1,28 @@
+@import (reference) '../style/variables.less';
 @import (reference) '../style/themes/index.less';
 
 // header 颜色
-@list-header-color: @COLOR_TEXT_ASSIST;
+@list-header-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
 // header 字体大小
 @list-header-size: 28 * @rpx;
 // footer 颜色
-@list-footer-color: @COLOR_TEXT_ASSIST;
+@list-footer-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
 // footer 字体大小
 @list-footer-size: 28 * @rpx;
 // 圆角
 @list-radius: 24 * @rpx;
 // 背景
-@list-background-color: @COLOR_CARD;
+@list-background-color: var(--color-card, @COLOR_CARD);
 // 主要文字大小
 @list-content-size: @font-size-list;
 // 额外文字大小
 @list-extra-size: 32 * @rpx;
 // 第二行文字大小
 @list-brief-size: 26 * @rpx;
 // 主要文字颜色
-@list-content-color: @COLOR_TEXT_PRIMARY;
+@list-content-color: var(--color-text-primary, @COLOR_TEXT_PRIMARY);
 // 辅助文字颜色
-@list-extra-brief-color: @COLOR_TEXT_ASSIST;
+@list-extra-brief-color: var(--color-text-assist, @COLOR_TEXT_ASSIST);
 // 图片尺寸
 @list-icon-size: 52 * @rpx;
 // 多行，图片尺寸
@@ -30,4 +31,8 @@
 // 图片和icon的大小
 @list-item-image-normal-size: 56 * @rpx;
 // 图片和icon的大小
-@list-item-image-large-size: 80 * @rpx;
+@list-item-image-large-size: 80 * @rpx;
+
+@list-item-border-color: var(--color-border, @COLOR_BORDER);
+
+@list-item-text-color: var(--color-text-weak, @COLOR_TEXT_WEAK);