From f688d09d13920089e8589ef4ad8c74489d8d7268 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            | 30 +++++++++---------------------
 tests/test_mobile_panel.mjs | 11 +++++++++++
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/mobile_panel.css b/mobile_panel.css
index 1e91a2b..96b220a 100644
--- a/mobile_panel.css
+++ b/mobile_panel.css
@@ -1,28 +1,16 @@
 .proactive-feedback {
-  --feedback-follow: #39b9b1;
-  --feedback-follow-ink: #082f2c;
-  --feedback-quote: #bd8add;
-  --feedback-quote-ink: #321640;
-  --feedback-confidence: #7aa7ef;
-  --feedback-confidence-ink: #102d58;
-  --feedback-uncertain-ink: #6d4d00;
+  --feedback-follow: var(--ak-sys-color-success-container);
+  --feedback-follow-ink: var(--ak-sys-color-on-success-container);
+  --feedback-quote: var(--ak-sys-color-trace-container);
+  --feedback-quote-ink: var(--ak-sys-color-on-trace-container);
+  --feedback-confidence: var(--ak-color-action-container);
+  --feedback-confidence-ink: var(--ak-color-on-action-container);
+  --feedback-uncertain-ink: var(--ak-sys-color-warning);
   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)) {
-  .proactive-feedback {
-    --feedback-follow: oklch(0.72 0.125 184);
-    --feedback-follow-ink: oklch(0.24 0.045 184);
-    --feedback-quote: oklch(0.72 0.13 310);
-    --feedback-quote-ink: oklch(0.27 0.065 310);
-    --feedback-confidence: oklch(0.72 0.12 255);
-    --feedback-confidence-ink: oklch(0.27 0.065 255);
-    --feedback-uncertain-ink: oklch(0.43 0.09 78);
-  }
-}
-
 .proactive-feedback-loading {
   padding: 28px 4px;
   color: var(--ak-color-text-secondary);
@@ -43,7 +31,7 @@
 
 .proactive-feedback-rate {
   display: flex;
-  min-height: 156px;
+  min-height: 132px;
   flex-direction: column;
   justify-content: flex-end;
   border-radius: var(--m-shape-large-increased, 20px);
@@ -53,7 +41,7 @@
 }
 
 .proactive-feedback-rate strong {
-  font-size: 2.75rem;
+  font-size: 2.25rem;
   font-weight: 650;
   letter-spacing: -0.045em;
   line-height: 0.95;
diff --git a/tests/test_mobile_panel.mjs b/tests/test_mobile_panel.mjs
index 2fbec34..724e29d 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 {
@@ -118,6 +119,16 @@ test("mobile panel keeps content in plugin-owned module", () => {
   assert.doesNotMatch(source, /window\.AkashicDashboard/);
 });
 
+test("mobile panel inherits semantic colors from the shared Material theme", () => {
+  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-trace-container\)/);
+  assert.match(styles, /var\(--ak-sys-color-on-trace-container\)/);
+  assert.match(styles, /var\(--ak-color-action-container\)/);
+  assert.doesNotMatch(styles, /#[0-9a-f]{3,8}\b/i);
+  assert.doesNotMatch(styles, /oklch\([^,)]*\)/);
+});
+
 test("feedback row expands its relation and keeps aria state in sync", () => {
   globalThis.document = {
     createElement(tagName) { return new FakeElement(tagName); },