From 9c6756e991008ef201ef77713930719432bb2362 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=90=9D=E5=8D=9C?= <dev@saasshop.local>
Date: Mon, 16 Mar 2026 02:24:09 +0800
Subject: [PATCH] chore(admin-ui): tokenise popover shadow and surface tint

---
 public/css/admin-components.css               |  6 ++--
 public/css/admin-theme.css                    |  4 +++
 ...ePopoverShadowAndSurfaceTintTokensTest.php | 35 +++++++++++++++++++
 ...ePopoverShadowAndSurfaceTintTokensTest.php | 32 +++++++++++++++++
 4 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 tests/Feature/AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest.php
 create mode 100644 tests/Feature/AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest.php

diff --git a/public/css/admin-components.css b/public/css/admin-components.css
index be0bca9..c61851e 100644
--- a/public/css/admin-components.css
+++ b/public/css/admin-components.css
@@ -24,7 +24,7 @@
     border-radius:var(--adm-radius, 12px);
     padding:12px 12px;
     color:var(--adm-text, #0f172a);
-    box-shadow:0 12px 30px rgba(15, 23, 42, .12);
+    box-shadow:var(--adm-shadow-popover, 0 12px 30px rgba(15, 23, 42, .12));
     display:flex;
     align-items:flex-start;
     justify-content:space-between;
@@ -250,7 +250,7 @@
 .list-card-table .table-empty{
     padding:24px 12px;
     text-align:center;
-    background:rgba(15, 23, 42, .02);
+    background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
 }
 
 /* 可复用：PageHeader（参考 Ant Design Pro：标题区 + 描述 + 右侧操作区） */
@@ -549,7 +549,7 @@
     border:1px solid var(--adm-border-color, #e5e7eb);
     border-radius:var(--adm-radius, 12px);
     padding:10px;
-    box-shadow:0 12px 30px rgba(15, 23, 42, .12);
+    box-shadow:var(--adm-shadow-popover, 0 12px 30px rgba(15, 23, 42, .12));
     z-index:100;
 }
 
diff --git a/public/css/admin-theme.css b/public/css/admin-theme.css
index 438df18..e75a232 100644
--- a/public/css/admin-theme.css
+++ b/public/css/admin-theme.css
@@ -33,6 +33,10 @@
     --adm-radius-sm: 10px;
     --adm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
     --adm-shadow-header: 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 10px rgba(15, 23, 42, 0.06);
+    --adm-shadow-popover: 0 12px 30px rgba(15, 23, 42, .12);
+
+    /* 中性色衍生（用于空态背景等） */
+    --adm-surface-tint: rgba(15, 23, 42, .02);
 
     /* 表单 */
     --adm-input-bg: #ffffff;
diff --git a/tests/Feature/AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest.php b/tests/Feature/AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest.php
new file mode 100644
index 0000000..c46d49f
--- /dev/null
+++ b/tests/Feature/AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class AdminComponentsCssShouldUsePopoverShadowAndSurfaceTintTokensTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function loginAsPlatformAdmin(): void
+    {
+        $this->seed();
+
+        $this->post('/admin/login', [
+            'email' => 'platform.admin@demo.local',
+            'password' => 'Platform@123456',
+        ])->assertRedirect('/admin');
+    }
+
+    public function test_admin_components_css_should_use_popover_shadow_and_surface_tint_tokens(): void
+    {
+        $this->loginAsPlatformAdmin();
+
+        $css = file_get_contents(public_path('css/admin-components.css'));
+        $this->assertIsString($css);
+
+        // popover/toast/dropdown 的阴影应走 token。
+        $this->assertStringContainsString('var(--adm-shadow-popover', $css);
+
+        // 列表空态背景应走 surface token。
+        $this->assertStringContainsString('var(--adm-surface-tint', $css);
+    }
+}
diff --git a/tests/Feature/AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest.php b/tests/Feature/AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest.php
new file mode 100644
index 0000000..b5380dc
--- /dev/null
+++ b/tests/Feature/AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace Tests\Feature;
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use Tests\TestCase;
+
+class AdminThemeCssShouldDefinePopoverShadowAndSurfaceTintTokensTest extends TestCase
+{
+    use RefreshDatabase;
+
+    protected function loginAsPlatformAdmin(): void
+    {
+        $this->seed();
+
+        $this->post('/admin/login', [
+            'email' => 'platform.admin@demo.local',
+            'password' => 'Platform@123456',
+        ])->assertRedirect('/admin');
+    }
+
+    public function test_admin_theme_css_should_define_popover_shadow_and_surface_tint_tokens(): void
+    {
+        $this->loginAsPlatformAdmin();
+
+        $css = file_get_contents(public_path('css/admin-theme.css'));
+        $this->assertIsString($css);
+
+        $this->assertStringContainsString('--adm-shadow-popover', $css);
+        $this->assertStringContainsString('--adm-surface-tint', $css);
+    }
+}