u

code/base-project/base-vue/packages/ao-design/src/_styles/_variables.scss

@@ -13,30 +13,48 @@ $default-color-hover: var(--ao-default-color-hover); // hover态
 $default-color-focus: var(--ao-default-color-focus); // focus态，包括鼠标和键盘
 $default-color-active: var(--ao-default-color-active); // 点击态
 $default-color-disabled: var(--ao-default-color-disabled); // 禁用态
+$default-color-light: var(--ao-default-color-light);
+$default-color-light-active: var(--ao-default-color-light-active);
 
 // 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
 $primary-color-hover: var(--ao-primary-color-hover); // hover态
 $primary-color-focus: var(--ao-primary-color-focus); // focus态，包括鼠标和键盘
 $primary-color-active: var(--ao-primary-color-active); // 点击态
 $primary-color-disabled: var(--ao-primary-color-disabled); // 禁用态
+$primary-color-light: var(--ao-primary-color-light);
+$primary-color-light-active: var(--ao-primary-color-light-active);
 
 // 警告色扩展
 $warning-color-hover: var(--ao-warning-color-hover);
 $warning-color-focus: var(--ao-warning-color-focus);
 $warning-color-active: var(--ao-warning-color-active);
 $warning-color-disabled: var(--ao-warning-color-disabled);
+$warning-color-light: var(--ao-warning-color-light);
+$warning-color-light-active: var(--ao-warning-color-light-active);
 
 // 失败/错误色扩展
 $danger-color-hover: var(--ao-danger-color-hover);
 $danger-color-focus: var(--ao-danger-color-focus);
 $danger-color-active: var(--ao-danger-color-active);
 $danger-color-disabled: var(--ao-danger-color-disabled);
+$danger-color-light: var(--ao-danger-color-light);
+$danger-color-light-active: var(--ao-danger-color-light-active);
 
 // 成功色扩展
 $success-color-hover: var(--ao-success-color-hover);
 $success-color-focus: var(--ao-success-color-focus);
 $success-color-active: var(--ao-success-color-active);
 $success-color-disabled: var(--ao-success-color-disabled);
+$success-color-light: var(--ao-success-color-light);
+$success-color-light-active: var(--ao-success-color-light-active);
+
+// 状态背景色
+$status-base-bg-color: var(--ao-status-base-bg-color);
+$status-anti-bg-color: var(--ao-status-anti-bg-color);
+$status-info-bg-color: var(--ao-status-info-bg-color);
+$status-success-bg-color: var(--ao-status-success-bg-color);
+$status-warning-bg-color: var(--ao-status-warning-bg-color);
+$status-danger-bg-color: var(--ao-status-danger-bg-color);
 
 // 文本颜色
 $text-color-base: var(--ao-text-color-base); // 色彩-文字-主要

code/base-project/base-vue/packages/ao-design/src/_styles/theme/_dark.scss

@@ -9,26 +9,43 @@
   --ao-default-color-focus: #505050;
   --ao-default-color-active: #5c5c5c;
   --ao-default-color-disabled: #2c2c2c;
+  --ao-default-color-light: #f3f3f3;
+  --ao-default-color-light-active: #ddd;
 
   --ao-primary-color-hover: #2667d4;
   --ao-primary-color-focus: #173463;
   --ao-primary-color-active: #699ef5;
   --ao-primary-color-disabled: #143975;
+  --ao-primary-color-light: #1b2f51;
+  --ao-primary-color-light-active: #173463;
 
   --ao-warning-color-hover: #a75d2b;
   --ao-warning-color-focus: #582f21;
   --ao-warning-color-active: #dc7633;
   --ao-warning-color-disabled: #733c23;
+  --ao-warning-color-light: #4f2a1d;
+  --ao-warning-color-light-active: #582f21;
 
   --ao-danger-color-hover: #a03f46;
   --ao-danger-color-focus: #5e2a2d;
   --ao-danger-color-active: #de6670;
   --ao-danger-color-disabled: #703439;
+  --ao-danger-color-light: #472324;
+  --ao-danger-color-light-active: #5e2a2d;
 
   --ao-success-color-hover: #0d7a55;
   --ao-success-color-focus: #1a4230;
   --ao-success-color-active: #43af8a;
   --ao-success-color-disabled: #17533d;
+  --ao-success-color-light: #193a2a;
+  --ao-success-color-light-active: #1a4230;
+
+  --ao-status-base-bg-color: #242424;
+  --ao-status-anti-bg-color: #c6cacd; // 反色，用于tooltip默认背景色
+  --ao-status-info-bg-color: #233448;
+  --ao-status-success-bg-color: #253929;
+  --ao-status-warning-bg-color: #453522;
+  --ao-status-danger-bg-color: #442927;
 
   --ao-text-color-base: rgba(255, 255, 255, 90%); /* 主要文字 */
   --ao-text-color-secondary: rgba(255, 255, 255, 55%); /* 次要文字 / 辅助信息 */
@@ -60,10 +77,9 @@
   // 基础/下层 投影 hover 使用的组件包括：表格 /
   --ao-shadow-surface: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
   // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --ao-shadow-popup: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
+  --ao-shadow-popup: 0 0 4px rgba(0, 0, 0, 0.04), 0 0 8px rgba(0, 0, 0, 0.03);
   // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --ao-shadow-overlay: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
-
+  --ao-shadow-overlay: inset 0 0 0 1px hsla(0, 0%, 100%, 0.1), 0 4px 14px rgba(0, 0, 0, 0.25);
   // 内投影
   --ao-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
   --ao-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;

code/base-project/base-vue/packages/ao-design/src/_styles/theme/_light.scss

@@ -10,26 +10,43 @@
   --ao-default-color-focus: #cfcfcf;
   --ao-default-color-active: #ababab;
   --ao-default-color-disabled: #eeeeee;
+  --ao-default-color-light: #f3f3f3;
+  --ao-default-color-light-active: #ddd;
 
   --ao-primary-color-hover: #366ef4;
   --ao-primary-color-focus: #d9e1ff;
   --ao-primary-color-active: #003cab;
   --ao-primary-color-disabled: #b5c7ff;
+  --ao-primary-color-light: #f2f3ff;
+  --ao-primary-color-light-active: #d9e1ff;
 
   --ao-warning-color-hover: #fa9550;
   --ao-warning-color-focus: #ffd9c2;
   --ao-warning-color-active: #be5a00;
   --ao-warning-color-disabled: #ffb98c;
+  --ao-warning-color-light: #fff1e9;
+  --ao-warning-color-light-active: #ffd9c2;
 
   --ao-danger-color-hover: #f6685d;
   --ao-danger-color-focus: #ffd8d2;
   --ao-danger-color-active: #ad352f;
   --ao-danger-color-disabled: #ffb9b0;
+  --ao-danger-color-light: #fff0ed;
+  --ao-danger-color-light-active: #ffd8d2;
 
   --ao-success-color-hover: #56c08d;
   --ao-success-color-focus: #c6f3d7;
   --ao-success-color-active: #008858;
   --ao-success-color-disabled: #92dab2;
+  --ao-success-color-light: #e3f9e9;
+  --ao-success-color-light-active: #c6f3d7;
+
+  --ao-status-base-bg-color: #fff;
+  --ao-status-anti-bg-color: #41464c; // 反色，用于tooltip默认背景色
+  --ao-status-info-bg-color: #f2f3ff;
+  --ao-status-success-bg-color: #ecf7ec;
+  --ao-status-warning-bg-color: #fff8ea;
+  --ao-status-danger-bg-color: #fef2ed;
 
   --ao-text-color-base: rgba(0, 0, 0, 90%); /* 主要文字 */
   --ao-text-color-secondary: rgba(0, 0, 0, 60%); /* 次要文字 / 辅助信息 */
@@ -61,13 +78,10 @@
   // 基础/下层 投影 hover 使用的组件包括：表格 /
   --ao-shadow-surface: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
   // 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
-  --ao-shadow-popup:
-    0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
-  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
-  --ao-shadow-overlay:
-    0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
+  --ao-shadow-popup: 0 0 4px rgba(0, 0, 0, 0.04), 0 0 8px rgba(0, 0, 0, 0.03);
 
-  // 内投影 
+  // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
+  --ao-shadow-overlay: 0 0 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.1);
   --ao-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
   --ao-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
   --ao-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;