fix: incorrect info color for element plus, fixed #4532 (#4566)

packages/@core/base/design/src/design-tokens/dark/index.css

@@ -39,6 +39,11 @@
 
   /* Used for success actions such as <message> */
 
+  --info: 180, 1.54%, 12.75%;
+  --info-foreground: 220, 4%, 58%;
+
+  /* Used for success actions such as <message> */
+
   --success: 144 57% 58%;
   --success-foreground: 0 0% 98%;
 

packages/@core/base/design/src/design-tokens/default/index.css

@@ -38,6 +38,11 @@
 
   /* Used for success actions such as <message> */
 
+  --info: 240, 5%, 96%;
+  --info-foreground: 220, 4%, 58%;
+
+  /* Used for success actions such as <message> */
+
   --success: 144 57% 58%;
   --success-foreground: 0 0% 98%;
 

packages/effects/hooks/src/use-design-tokens.ts

@@ -216,7 +216,7 @@ export function useElementPlusDesignTokens() {
           : getCssVariableValue('--destructive-50'),
 
         '--el-color-info-light-8': border,
-        '--el-color-info-light-9': background,
+        '--el-color-info-light-9': getCssVariableValue('--info'), // getCssVariableValue('--secondary'),
 
         '--el-color-primary': getCssVariableValue('--primary-500'),
         '--el-color-primary-dark-2': getCssVariableValue('--primary'),
@@ -258,6 +258,12 @@ export function useElementPlusDesignTokens() {
         '--el-fill-color-blank': background,
         '--el-fill-color-light': getCssVariableValue('--accent'),
         '--el-fill-color-lighter': getCssVariableValue('--accent-lighter'),
+
+        // 解决ElLoading背景色问题
+        '--el-mask-color': isDark.value
+          ? 'rgba(0,0,0,.8)'
+          : 'rgba(255,255,255,.9)',
+
         '--el-text-color-primary': getCssVariableValue('--foreground'),
 
         '--el-text-color-regular': getCssVariableValue('--foreground'),