From e5c3e52fa149aa806aaf70d51e9e7b5ac302dc7d Mon Sep 17 00:00:00 2001
From: huashen <2494946808@qq.com>
Date: Sat, 22 Aug 2026 13:34:13 +0800
Subject: [PATCH] fix(mobile): inherit shared Material theme

---
 mobile_panel.css            | 39 +++++++++++++------------------------
 tests/test_mobile_panel.mjs | 11 +++++++++++
 2 files changed, 24 insertions(+), 26 deletions(-)

diff --git a/mobile_panel.css b/mobile_panel.css
index b8aba5e..25fc778 100644
--- a/mobile_panel.css
+++ b/mobile_panel.css
@@ -1,30 +1,17 @@
 .emotion-mobile {
-  --emotion-current: #6ea2ed;
-  --emotion-current-ink: #102c56;
-  --emotion-positive: #4bc0b5;
-  --emotion-positive-ink: #0a342f;
-  --emotion-cautious: #e6b45d;
-  --emotion-cautious-ink: #513600;
-  --emotion-calm: #9db6dc;
-  --emotion-calm-ink: #1c334f;
+  --emotion-current: var(--ak-color-action-container);
+  --emotion-current-ink: var(--ak-color-on-action-container);
+  --emotion-positive: var(--ak-sys-color-success-container);
+  --emotion-positive-ink: var(--ak-sys-color-on-success-container);
+  --emotion-cautious: var(--ak-sys-color-warning-container);
+  --emotion-cautious-ink: var(--ak-sys-color-on-warning-container);
+  --emotion-calm: var(--ak-color-bg-surface-high);
+  --emotion-calm-ink: var(--ak-color-text-primary);
   color: var(--ak-color-text-primary);
   font-family: Roboto, "Noto Sans SC", system-ui, sans-serif;
   font-synthesis: none;
 }
 
-@supports (color: oklch(0 0 0)) {
-  .emotion-mobile {
-    --emotion-current: oklch(0.72 0.12 255);
-    --emotion-current-ink: oklch(0.27 0.065 255);
-    --emotion-positive: oklch(0.72 0.12 184);
-    --emotion-positive-ink: oklch(0.25 0.05 184);
-    --emotion-cautious: oklch(0.78 0.11 78);
-    --emotion-cautious-ink: oklch(0.34 0.075 78);
-    --emotion-calm: oklch(0.76 0.07 255);
-    --emotion-calm-ink: oklch(0.31 0.045 255);
-  }
-}
-
 .emotion-mobile-loading {
   padding: 28px 4px;
   color: var(--ak-color-text-secondary);
@@ -44,7 +31,7 @@
 
 .emotion-mobile-state {
   display: flex;
-  min-height: 156px;
+  min-height: 132px;
   flex-direction: column;
   justify-content: flex-end;
   border-radius: var(--m-shape-large-increased, 20px);
@@ -70,7 +57,7 @@
 }
 
 .emotion-mobile-state strong {
-  font-size: 2rem;
+  font-size: 1.75rem;
   font-weight: 650;
   letter-spacing: -0.035em;
   line-height: 1;
@@ -97,7 +84,7 @@
   border-radius: var(--m-shape-medium, 12px);
   padding: 14px;
   color: var(--ak-color-text-secondary);
-  background: var(--ak-color-bg-surface);
+  background: var(--ak-color-bg-surface-high);
 }
 
 .emotion-mobile-signals > .emotion-mobile-threshold--raise_send_bar {
@@ -111,8 +98,8 @@
 }
 
 .emotion-mobile-signals > .emotion-mobile-feedback {
-  color: var(--emotion-current-ink);
-  background: color-mix(in oklch, var(--emotion-current) 68%, var(--ak-color-bg-surface));
+  color: var(--ak-color-action-primary);
+  background: color-mix(in oklch, var(--ak-color-action-container) 44%, var(--ak-color-bg-surface-high));
 }
 
 .emotion-mobile-signals strong {
diff --git a/tests/test_mobile_panel.mjs b/tests/test_mobile_panel.mjs
index 342bab7..8aede76 100644
--- a/tests/test_mobile_panel.mjs
+++ b/tests/test_mobile_panel.mjs
@@ -3,6 +3,7 @@ import { readFile } from "node:fs/promises";
 import test from "node:test";
 
 const source = await readFile(new URL("../mobile_panel.js", import.meta.url), "utf8");
+const styles = await readFile(new URL("../mobile_panel.css", import.meta.url), "utf8");
 const panel = await import(`data:text/javascript;base64,${Buffer.from(source).toString("base64")}`);
 
 class FakeElement {
@@ -106,6 +107,16 @@ test("mobile panel is plugin-owned and keeps raw metrics behind disclosure", ()
   assert.doesNotMatch(source, /window\.AkashicDashboard/);
 });
 
+test("mobile panel inherits semantic colors from the shared Material theme", () => {
+  assert.match(styles, /var\(--ak-color-action-container\)/);
+  assert.match(styles, /var\(--ak-sys-color-success-container\)/);
+  assert.match(styles, /var\(--ak-sys-color-on-success-container\)/);
+  assert.match(styles, /var\(--ak-sys-color-warning-container\)/);
+  assert.match(styles, /var\(--ak-sys-color-on-warning-container\)/);
+  assert.doesNotMatch(styles, /#[0-9a-f]{3,8}\b/i);
+  assert.doesNotMatch(styles, /oklch\([^,)]*\)/);
+});
+
 test("dashboard keeps raw metrics inert until the user asks for them", async () => {
   globalThis.document = { createElement() { return new FakeElement(); } };
   const host = new DashboardHost();