feat: addGuide

ant-design · Nov 7, 2024 · 5f099b3 · 5f099b3
1 parent 2150a3d
commit 5f099b3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 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);