u

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

@@ -99,6 +99,9 @@ $bg-color-container-select: var(--ao-bg-color-container-select);
 $bg-color-component: var(--ao-bg-color-component);
 $border-color-component: var(--ao-border-color-component); // 组件边框（Input、Select、Card 等容器的外部边框）
 
+$bg-color-secondarycomponent: var(--ao-bg-color-secondarycomponent);
+$bg-color-secondarycomponent-hover: var(--ao-bg-color-secondarycomponent-hover);
+
 // shadow
 // 基础/下层 投影 hover 使用的组件包括：表格 /
 $shadow-surface: var(--ao-shadow-surface);
@@ -106,6 +109,8 @@ $shadow-surface: var(--ao-shadow-surface);
 $shadow-popup: var(--ao-shadow-popup);
 // 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
 $shadow-overlay: var(--ao-shadow-overlay);
+// switch 投影
+$shadow-switch: var(--ao-shadow-switch);
 
 // 内投影
 $shadow-inset-top: var(--ao-shadow-inset-top);

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

@@ -76,6 +76,8 @@
 
   --ao-bg-color-component: #393939;
   --ao-border-color-component: #5e5e5e;
+  --ao-bg-color-secondarycomponent: #4b4b4b;
+  --ao-bg-color-secondarycomponent-hover: #5e5e5e;
 
   // shadow阴影
   // 基础/下层 投影 hover 使用的组件包括：表格 /
@@ -84,6 +86,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: inset 0 0 0 1px hsla(0, 0%, 100%, 0.1), 0 4px 14px rgba(0, 0, 0, 0.25);
+  // 开关投影
+  --ao-shadow-switch: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
   // 内投影
   --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

@@ -77,15 +77,18 @@
 
   --ao-bg-color-component: #e8e8e8;
   --ao-border-color-component: #ddd;
+  --ao-bg-color-secondarycomponent: #ddd;
+  --ao-bg-color-secondarycomponent-hover: #c6c6c6;
 
   // shadow阴影
   // 基础/下层 投影 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 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-switch: 0 1px 10px rgba(0, 0, 0, 0.05), 0 4px 5px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
   --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;