From 4a8218f82683e7c678704f9b887121e99814614e Mon Sep 17 00:00:00 2001
From: Netfan <netfan@foxmail.com>
Date: Sat, 5 Oct 2024 10:16:11 +0800
Subject: [PATCH] fix: incorrect info color for element plus, fixed #4532

---
 .../@core/base/design/src/design-tokens/dark/index.css    | 5 +++++
 .../@core/base/design/src/design-tokens/default/index.css | 5 +++++
 packages/effects/hooks/src/use-design-tokens.ts           | 8 +++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/@core/base/design/src/design-tokens/dark/index.css b/packages/@core/base/design/src/design-tokens/dark/index.css
index 5f244442f97..07776f5bc7c 100644
--- a/packages/@core/base/design/src/design-tokens/dark/index.css
+++ b/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%;
 
diff --git a/packages/@core/base/design/src/design-tokens/default/index.css b/packages/@core/base/design/src/design-tokens/default/index.css
index aa41d23efe4..b999e1298f8 100644
--- a/packages/@core/base/design/src/design-tokens/default/index.css
+++ b/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%;
 
diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts
index 4f786302a1a..0b4e0988afd 100644
--- a/packages/effects/hooks/src/use-design-tokens.ts
+++ b/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'),