u

code/g3soft-libs/packages/tokens/src/scss/theme.scss

@@ -66,6 +66,29 @@ $dark-primary: #e5e5e5;
 
   /* ---------- 阴影 ---------- */
   #{fn.css-var('shadow')}: 0 2px 8px rgba(0, 0, 0, 0.15);
+  /* 浮层阴影：下拉 / 气泡 / 日期面板等 */
+  #{fn.css-var('shadow-popup')}: 0 6px 16px rgba(0, 0, 0, 0.12);
+
+  /* ---------- 交互填充（hover 底 / 轨道底 / 次级面）---------- */
+  #{fn.css-var('fill')}: rgba(0, 0, 0, 0.04);
+  #{fn.css-var('fill-hover')}: rgba(0, 0, 0, 0.08);
+
+  /* ---------- 主色淡底（选中 / hover 高亮），跟随主色换肤 ----------
+     color-mix() 的颜色参数必须是 var(...)：只写变量名（--g3-color-primary）
+     会让整个函数解析失败，变量值为空 → 用到它的地方全都「没有背景色」 */
+  #{fn.css-var('color-primary-soft')}: color-mix(
+    in srgb,
+    var(#{fn.css-var('color-primary')}) 12%,
+    transparent
+  );
+
+  /* ---------- 遮罩 ---------- */
+  #{fn.css-var('mask-bg')}: rgba(0, 0, 0, 0.45);
+
+  /* ---------- 行高与动效档位 ---------- */
+  #{fn.css-var('line-height')}: 1.5;
+  #{fn.css-var('duration-fast')}: 0.1s;
+  #{fn.css-var('duration-slow')}: 0.3s;
 }
 
 // 暗色主题：只覆盖变量值，不改变量名。
@@ -87,4 +110,16 @@ html[data-#{config.$namespace}-theme='dark'] {
   #{fn.css-var('border-color')}: #424242;
 
   #{fn.css-var('shadow')}: 0 2px 8px rgba(0, 0, 0, 0.45);
+  #{fn.css-var('shadow-popup')}: 0 6px 16px rgba(0, 0, 0, 0.5);
+
+  #{fn.css-var('fill')}: rgba(255, 255, 255, 0.06);
+  #{fn.css-var('fill-hover')}: rgba(255, 255, 255, 0.12);
+
+  #{fn.css-var('color-primary-soft')}: color-mix(
+    in srgb,
+    var(#{fn.css-var('color-primary')}) 20%,
+    transparent
+  );
+
+  #{fn.css-var('mask-bg')}: rgba(0, 0, 0, 0.6);
 }