chore(admin-ui): tokenise popover shadow and surface tint
This commit is contained in:
@@ -24,7 +24,7 @@
|
|||||||
border-radius:var(--adm-radius, 12px);
|
border-radius:var(--adm-radius, 12px);
|
||||||
padding:12px 12px;
|
padding:12px 12px;
|
||||||
color:var(--adm-text, #0f172a);
|
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;
|
display:flex;
|
||||||
align-items:flex-start;
|
align-items:flex-start;
|
||||||
justify-content:space-between;
|
justify-content:space-between;
|
||||||
@@ -250,7 +250,7 @@
|
|||||||
.list-card-table .table-empty{
|
.list-card-table .table-empty{
|
||||||
padding:24px 12px;
|
padding:24px 12px;
|
||||||
text-align:center;
|
text-align:center;
|
||||||
background:rgba(15, 23, 42, .02);
|
background:var(--adm-surface-tint, rgba(15, 23, 42, .02));
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 可复用:PageHeader(参考 Ant Design Pro:标题区 + 描述 + 右侧操作区) */
|
/* 可复用:PageHeader(参考 Ant Design Pro:标题区 + 描述 + 右侧操作区) */
|
||||||
@@ -549,7 +549,7 @@
|
|||||||
border:1px solid var(--adm-border-color, #e5e7eb);
|
border:1px solid var(--adm-border-color, #e5e7eb);
|
||||||
border-radius:var(--adm-radius, 12px);
|
border-radius:var(--adm-radius, 12px);
|
||||||
padding:10px;
|
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;
|
z-index:100;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -33,6 +33,10 @@
|
|||||||
--adm-radius-sm: 10px;
|
--adm-radius-sm: 10px;
|
||||||
--adm-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
|
--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-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;
|
--adm-input-bg: #ffffff;
|
||||||
|
|||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user