feat(components): 新增css变量和scss变量

packages/components/src/css.variable.scss

@@ -0,0 +1,13 @@
+:root {
+  --t-redis: 10px;
+  --t-transition-duration: 0.3s;
+  --t-mask-bg-color: rgba(255, 255, 255, 0.38);
+  --t-text-color: black;
+  --t-text-reverse-color: white;
+  &.dark {
+
+    --t-mask-bg-color: rgba(0, 0, 0, 0.38);
+    --t-text-color: white;
+    --t-text-reverse-color: black;
+  }
+}

packages/components/src/index.ts

@@ -1,3 +1,4 @@
+import './css.variable.scss';
 export * from './transition';
 export * from './transition-group';
 export * from './loading';

packages/components/src/loading/Loading.module.scss

@@ -1,15 +1,17 @@
+@import '../scss.variable';
+
 .ref {
   position: relative;
 }
 
 :global {
-  .t-loading {
+  .#{$PREFIX}loading {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
-    color: white;
+    backdrop-filter: blur(2px);
     .loading-box {
       position: absolute;
       top: 50%;
@@ -38,7 +40,7 @@
       }
     }
   }
-  body > .t-loading {
+  body > .#{$PREFIX}loading {
     position: fixed;
   }
 
@@ -49,7 +51,7 @@
 
   .loading-enter-active,
   .loading-leave-active {
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity var(--t-transition-duration) ease-in-out;
   }
 
   @keyframes :global(loading-rotate) {

packages/components/src/loading/Loading.tsx

@@ -89,7 +89,8 @@ export const Loading: React.FC<LoadingOptions> = memo((props) => {
 
 Loading.defaultProps = {
   className: '',
-  background: 'rgba(0, 0, 0, 0.38)',
+  background: 'var(--t-mask-bg-color)',
+  color: 'var(--t-text-color)',
   mode: 'insert',
   zIndex: 100,
   text: 'loading...',

packages/components/src/scss.variable.scss

@@ -0,0 +1 @@
+$PREFIX: 't-'