feat(P5): 暗色模式真正实现(令牌31/对比度全过/10页实测/DARK32/预算292KB/回归1003)

.design_library/aurora-admin/colors_and_type.css

@@ -1,10 +1,10 @@
-/* @light-only */
+/* @light-dark */
 /* Source: structured-spec */
 
 /* ============================================================
    Aurora Admin UI — Design Tokens
    Source: Aurora Admin UI 设计系统规范 (structured-spec)
-   Theme: light-only
+   Theme: light + dark (html.aa-dark, S2-P5)
    Prefix: au (source layer) + portable aliases (consumption layer)
    ============================================================ */
 
@@ -277,3 +277,71 @@
   outline: 2px solid var(--au-color-focus-ring);
   outline-offset: 2px;
 }
+
+/* ------------------------------------------------------------
+   Demo shell · 演示壳通用类（S2-P5 附带收敛）
+   26 个演示页用 .aa-page/.aa-h2/.aa-desc 作展示壳，但此前全仓无定义，
+   壳文字继承 body 黑色，暗色下黑字黑底。此处用令牌统一定义，
+   浅色/暗色随令牌自动切换，不触碰组件自身视觉。
+   ------------------------------------------------------------ */
+.aa-page {
+  background: var(--au-color-page-bg);
+  color: var(--au-color-text-body);
+}
+.aa-h2 {
+  color: var(--au-color-text-title);
+}
+.aa-desc {
+  color: var(--au-color-text-secondary);
+}
+
+/* ------------------------------------------------------------
+   Dark · 暗色令牌组（S2-P5）
+   生效条件：html.aa-dark。演示页通过 <link> 引用本文件，
+   故 79 个演示页随令牌自动反色（选型 A：站点暗色时演示页也反色）。
+   对比度（WCAG AA，卡片底 #1C1F26 / 页面底 #14161C，脚本实测）：
+   title #E8EAED 13.68/15.00 · body #C9CDD4 10.34/11.34 ·
+   secondary #9CA3AF 6.50/7.12 · placeholder #9CA3AF 6.50/7.12 ·
+   brand #6B8CFF 5.36/5.87 · success #4CAF50 5.93 ·
+   warning #E5A300 7.52 · error #F26D6D 5.64 · info #4C9AFF 5.79
+   （全部 ≥4.5:1；hover/active 为交互态非文本位）
+   ------------------------------------------------------------ */
+html.aa-dark {
+  /* 背景三层递进 */
+  --au-color-page-bg: #14161C;
+  --au-color-card-bg: #1C1F26;
+  --au-color-table-header-bg: #22262E;
+  --au-color-disabled-bg: #262A33;
+  --au-color-tag-green-bg: #16261A;
+  --au-color-tooltip-bg: #E8EAED;
+  /* 文字四层 */
+  --au-color-text-title: #E8EAED;
+  --au-color-text-body: #C9CDD4;
+  --au-color-text-secondary: #9CA3AF;
+  --au-color-text-tertiary: #B6BCC7;
+  --au-color-text-placeholder: #9CA3AF;
+  --au-color-text-inverse: #14161C;
+  --au-color-text-disabled: #6B7280;
+  /* 边框 */
+  --au-color-border: #2A2F38;
+  --au-color-border-strong: #363B45;
+  --au-color-icon-inactive: #9CA3AF;
+  /* 品牌色向白提亮（深底对比度不足，原 #2F54EB 卡片底仅 ~3.9:1） */
+  --au-color-brand: #6B8CFF;
+  --au-color-brand-hover: #84A0FF;
+  --au-color-brand-active: #5570D8;
+  --au-color-brand-bg: rgba(107, 140, 255, 0.18);
+  --au-color-secondary: #3FD4D4;
+  /* 语义色提亮 */
+  --au-color-success: #4CAF50;
+  --au-color-warning: #E5A300;
+  --au-color-error: #F26D6D;
+  --au-color-info: #4C9AFF;
+  /* 遮罩与阴影 */
+  --au-color-mask: rgba(0, 0, 0, 0.6);
+  --au-color-mask-strong: rgba(0, 0, 0, 0.75);
+  --au-color-focus-ring: rgba(107, 140, 255, 0.5);
+  --au-shadow-low: 0 1px 4px rgba(0, 0, 0, 0.5);
+  --au-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.55);
+  --au-shadow-high: 0 8px 24px rgba(0, 0, 0, 0.65);
+}