fix: element-plus styles (#4203)

closes #4201
vbenjs · Aug 20, 2024 · fecf551 · fecf551
1 parent 5962804
commit fecf551
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 26 deletions.
diff --git a/apps/web-ele/src/bootstrap.ts b/apps/web-ele/src/bootstrap.ts
@@ -3,6 +3,7 @@ import { createApp } from 'vue';
 import { registerAccessDirective } from '@vben/access';
 import { initStores } from '@vben/stores';
 import '@vben/styles';
+import '@vben/styles/ele';
 
 import { setupI18n } from '#/locales';
 

diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts
@@ -180,36 +180,49 @@ export function useElementPlusDesignTokens() {
         '--el-border-color-light': border,
         '--el-border-color-lighter': border,
         '--el-border-radius-base': getCssVariableValue('--radius', false),
-        '--el-color-danger': getCssVariableValue('--destructive'),
-        '--el-color-danger-light-3': getCssVariableValue('--destructive-600'),
-        '--el-color-danger-light-5': getCssVariableValue('--destructive-700'),
-        '--el-color-danger-light-7': getCssVariableValue('--destructive-800'),
-        '--el-color-error-light-8': border,
-        '--el-color-error-light-9': background,
+
+        '--el-color-danger': getCssVariableValue('--destructive-500'),
+        '--el-color-danger-dark-2': getCssVariableValue('--destructive'),
+        '--el-color-danger-light-3': getCssVariableValue('--destructive-400'),
+        '--el-color-danger-light-5': getCssVariableValue('--destructive-300'),
+        '--el-color-danger-light-7': getCssVariableValue('--destructive-200'),
+        '--el-color-danger-light-8': getCssVariableValue('--destructive-100'),
+        '--el-color-danger-light-9': getCssVariableValue('--destructive-50'),
+
+        '--el-color-error': getCssVariableValue('--destructive-500'),
+        '--el-color-error-dark-2': getCssVariableValue('--destructive'),
+        '--el-color-error-light-3': getCssVariableValue('--destructive-400'),
+        '--el-color-error-light-5': getCssVariableValue('--destructive-300'),
+        '--el-color-error-light-7': getCssVariableValue('--destructive-200'),
+        '--el-color-error-light-8': getCssVariableValue('--destructive-100'),
+        '--el-color-error-light-9': getCssVariableValue('--destructive-50'),
 
         '--el-color-info-light-8': border,
         '--el-color-info-light-9': background,
 
-        '--el-color-primary': getCssVariableValue('--primary'),
-        '--el-color-primary-light-3': getCssVariableValue('--primary-600'),
-
-        '--el-color-primary-light-5': getCssVariableValue('--primary-700'),
-        '--el-color-primary-light-7': getCssVariableValue('--primary-800'),
-        '--el-color-success': getCssVariableValue('--success'),
-        '--el-color-success-light-3': getCssVariableValue('--success-600'),
-
-        '--el-color-success-light-5': getCssVariableValue('--success-700'),
-        '--el-color-success-light-7': getCssVariableValue('--success-800'),
-
-        '--el-color-success-light-8': border,
-        '--el-color-success-light-9': background,
-        '--el-color-warning': getCssVariableValue('--warning'),
-        '--el-color-warning-light-3': getCssVariableValue('--warning-600'),
-
-        '--el-color-warning-light-5': getCssVariableValue('--warning-700'),
-        '--el-color-warning-light-7': getCssVariableValue('--warning-800'),
-        '--el-color-warning-light-8': border,
-        '--el-color-warning-light-9': background,
+        '--el-color-primary': getCssVariableValue('--primary-500'),
+        '--el-color-primary-dark-2': getCssVariableValue('--primary'),
+        '--el-color-primary-light-3': getCssVariableValue('--primary-400'),
+        '--el-color-primary-light-5': getCssVariableValue('--primary-300'),
+        '--el-color-primary-light-7': getCssVariableValue('--primary-200'),
+        '--el-color-primary-light-8': getCssVariableValue('--primary-100'),
+        '--el-color-primary-light-9': getCssVariableValue('--primary-50'),
+
+        '--el-color-success': getCssVariableValue('--success-500'),
+        '--el-color-success-dark-2': getCssVariableValue('--success'),
+        '--el-color-success-light-3': getCssVariableValue('--success-400'),
+        '--el-color-success-light-5': getCssVariableValue('--success-300'),
+        '--el-color-success-light-7': getCssVariableValue('--success-200'),
+        '--el-color-success-light-8': getCssVariableValue('--success-100'),
+        '--el-color-success-light-9': getCssVariableValue('--success-50'),
+
+        '--el-color-warning': getCssVariableValue('--warning-500'),
+        '--el-color-warning-dark-2': getCssVariableValue('--warning'),
+        '--el-color-warning-light-3': getCssVariableValue('--warning-400'),
+        '--el-color-warning-light-5': getCssVariableValue('--warning-300'),
+        '--el-color-warning-light-7': getCssVariableValue('--warning-200'),
+        '--el-color-warning-light-8': getCssVariableValue('--warning-100'),
+        '--el-color-warning-light-9': getCssVariableValue('--warning-50'),
 
         '--el-fill-color-blank': background,
         '--el-text-color-primary': getCssVariableValue('--foreground'),

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -18,6 +18,9 @@
     "./antd": {
       "default": "./src/antd/index.css"
     },
+    "./ele": {
+      "default": "./src/ele/index.css"
+    },
     "./global": {
       "default": "./src/global/index.scss"
     }

diff --git a/packages/styles/src/ele/index.css b/packages/styles/src/ele/index.css
@@ -0,0 +1,3 @@
+.el-card {
+  --el-card-border-radius: var(--radius) !important;
+}