refactor(theme): [loading] refactor loading theme vars (#2277)

opentiny · Oct 17, 2024 · 78ce3ad · 78ce3ad
1 parent b8b2729
commit 78ce3ad
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 45 deletions.
diff --git a/packages/theme/src/loading/index.less b/packages/theme/src/loading/index.less
@@ -16,12 +16,12 @@
 @loading-prefix-cls: ~'@{css-prefix}loading';
 
 .@{loading-prefix-cls} {
-  .component-css-vars-loading();
+  .inject-Loading-vars();
 
   &__mask {
     position: absolute;
     z-index: 2000;
-    background-color: var(--ti-loading-mask-bg-color);
+    background-color: var(--tv-Loading-mask-bg-color);
     margin: 0;
     top: 0;
     right: 0;
@@ -37,22 +37,22 @@
 
         &-small {
           svg {
-            height: var(--ti-loading-fullscreen-small-height);
-            width: var(--ti-loading-fullscreen-small-width);
+            height: var(--tv-Loading-fullscreen-small-height);
+            width: var(--tv-Loading-fullscreen-small-width);
           }
         }
 
         &-medium {
           svg {
-            height: var(--ti-loading-fullscreen-medium-height);
-            width: var(--ti-loading-fullscreen-medium-width);
+            height: var(--tv-Loading-fullscreen-medium-height);
+            width: var(--tv-Loading-fullscreen-medium-width);
           }
         }
 
         &-large {
           svg {
-            height: var(--ti-loading-fullscreen-large-height);
-            width: var(--ti-loading-fullscreen-large-width);
+            height: var(--tv-Loading-fullscreen-large-height);
+            width: var(--tv-Loading-fullscreen-large-width);
           }
         }
       }
@@ -67,37 +67,37 @@
     position: absolute;
 
     .@{loading-prefix-cls}__text {
-      color: var(--ti-loading-text-color);
-      margin: var(--ti-loading-text-margin-vertical) var(--ti-loading-text-margin-horizontal);
-      font-size: var(--ti-loading-text-font-size);
+      color: var(--tv-Loading-text-color);
+      margin: var(--tv-Loading-text-margin-y) var(--tv-Loading-text-margin-x);
+      font-size: var(--tv-Loading-text-font-size);
     }
 
     &-small {
       svg,
       img {
-        height: var(--ti-loading-spinner-small-height);
-        width: var(--ti-loading-spinner-small-width);
+        height: var(--tv-Loading-spinner-small-height);
+        width: var(--tv-Loading-spinner-small-width);
       }
     }
 
     &-medium {
       svg,
       img {
-        height: var(--ti-loading-spinner-medium-height);
-        width: var(--ti-loading-spinner-medium-width);
+        height: var(--tv-Loading-spinner-medium-height);
+        width: var(--tv-Loading-spinner-medium-width);
       }
     }
 
     &-large {
       svg,
       img {
-        height: var(--ti-loading-spinner-large-height);
-        width: var(--ti-loading-spinner-large-width);
+        height: var(--tv-Loading-spinner-large-height);
+        width: var(--tv-Loading-spinner-large-width);
       }
     }
 
     svg {
-      fill: var(--ti-loading-icon-color);
+      fill: var(--tv-Loading-icon-color);
     }
   }
 
@@ -114,9 +114,3 @@
     opacity: 0;
   }
 }
-
-.@{css-prefix-iconfont}-loading {
-  font-size: var(--ti-common-font-size-1);
-  line-height: 1;
-  vertical-align: text-top;
-}
diff --git a/packages/theme/src/loading/vars.less b/packages/theme/src/loading/vars.less
@@ -10,43 +10,45 @@
 *
 */
 
-.component-css-vars-loading() {
+.inject-Loading-vars() {
   // 加载图标色
-  --ti-loading-icon-color: var(--ti-common-color-icon-active, #191919);
+  --tv-Loading-icon-color: var(--tv-color-icon-active);
   // 加载文本色
-  --ti-loading-text-color: var(--ti-common-color-text-secondary, #595959);
+  --tv-Loading-text-color: var(--tv-color-text-secondary);
   // 加载背景色
-  --ti-loading-mask-bg-color: #f5f5f5;
+  --tv-Loading-mask-bg-color: var(--tv-color-bg);
   // 加载文本字号
-  --ti-loading-text-font-size: var(--ti-common-font-size-2, 16px);
-  // 加载图标自定义加载图标顶部外边距
-  --ti-loading-spinner-margin-top: calc(var(--ti-common-space-0, 0px) - 21px);
+  --tv-Loading-text-font-size: var(--tv-font-size-lg);
   // 加载图标文本垂直方向外边距
-  --ti-loading-text-margin-vertical: var(--ti-common-space-4x, 16px);
+  --tv-Loading-text-margin-y: var(--tv-space-xl);
   // 加载图标文本水平方向外边距
-  --ti-loading-text-margin-horizontal: var(--ti-common-space-0, 0px);
+  --tv-Loading-text-margin-x: 0;
+
   // 全屏加载图标small尺寸时的宽度
-  --ti-loading-fullscreen-small-width: 16px;
+  --tv-Loading-fullscreen-small-width: var(--tv-icon-size);
   // 全屏加载图标medium尺寸时的宽度
-  --ti-loading-fullscreen-medium-width: 24px;
+  --tv-Loading-fullscreen-medium-width: var(--tv-size-height-xs);
   // 全屏加载图标large尺寸时的宽度
-  --ti-loading-fullscreen-large-width: 32px;
+  --tv-Loading-fullscreen-large-width: var(--tv-size-height-md);
+
   // 全屏加载图标small尺寸时的高度
-  --ti-loading-fullscreen-small-height: 16px;
+  --tv-Loading-fullscreen-small-height: var(--tv-icon-size);
   // 全屏加载图标medium尺寸时的高度
-  --ti-loading-fullscreen-medium-height: 24px;
+  --tv-Loading-fullscreen-medium-height: var(--tv-size-height-xs);
   // 全屏加载图标large尺寸时的高度
-  --ti-loading-fullscreen-large-height: 32px;
+  --tv-Loading-fullscreen-large-height: var(--tv-size-height-md);
+
   // 默认加载图标small尺寸时的高度
-  --ti-loading-spinner-small-height: 16px;
+  --tv-Loading-spinner-small-height: var(--tv-icon-size);
   // 默认加载图标medium尺寸时的高度
-  --ti-loading-spinner-medium-height: 24px;
+  --tv-Loading-spinner-medium-height: var(--tv-size-height-xs);
   // 默认加载图标large尺寸时的高度
-  --ti-loading-spinner-large-height: 32px;
+  --tv-Loading-spinner-large-height: var(--tv-size-height-md);
+
   // 默认加载图标small尺寸时的宽度
-  --ti-loading-spinner-small-width: 16px;
+  --tv-Loading-spinner-small-width: var(--tv-icon-size);
   // 默认加载图标medium尺寸时的宽度
-  --ti-loading-spinner-medium-width: 24px;
+  --tv-Loading-spinner-medium-width: var(--tv-size-height-xs);
   // 默认加载图标large尺寸时的宽度
-  --ti-loading-spinner-large-width: 32px;
+  --tv-Loading-spinner-large-width: var(--tv-size-height-md);
 }