OrgTJWater/next-tjwater-frontend
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refine gem-blue acrylic palette and focus borders

Browse Source 
Derive the gem-blue palette with OKLCH tonal and complementary-color
rules while preserving acrylic opacity, blur and surface hierarchy.

Darker focus tokens exposed stacked field rings, fallback outlines and
persistent basemap selection rings. Keep fallback focus styles in the
base layer and use one themed field boundary or inset card stroke.
Preserve keyboard focus, invalid states and native input semantics.

Add browser regression coverage for pointer and keyboard focus, all
basemap presentations, narrow layouts and rendered contrast.

Validation in an isolated checkout: pnpm lint, pnpm typecheck,
pnpm test (393 tests), focused browser suites and pnpm build.
This commit is contained in:
jiang
2026-10-09 10:57:06 +08:00
parent d2d705ed4c
commit 617ba4d87c
69 changed files with 1239 additions and 765 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/workbench/components/map-dev-panel.tsx
+11 -11
View File
@@ -234,10 +234,10 @@ export function MapDevPanel({
className="acrylic-panel pointer-events-auto absolute right-3 top-[4.5rem] z-40 hidden max-h-[calc(100dvh-5.5rem)] w-[400px] flex-col overflow-hidden rounded-2xl border lg:flex"
data-testid="map-dev-panel"
>
<div className="flex h-12 shrink-0 items-center justify-between border-b border-slate-200/70 px-4">
<div className="flex h-12 shrink-0 items-center justify-between border-b border-[var(--surface-divider)]/70 px-4">
<div>
<h2 className="text-sm font-semibold text-slate-950">地图能力 Dev Panel</h2>
<p className="text-[11px] text-slate-500">仅本次页面会话生效</p>
<p className="text-[11px] text-[var(--ink-muted)]">仅本次页面会话生效</p>
</div>
<Button
size="icon"
@@ -519,11 +519,11 @@ export function MapDevPanel({
) : null}
</>
)}
<div className="space-y-2.5 rounded-xl bg-slate-100/75 p-3 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.18)]">
<div className="space-y-2.5 rounded-xl bg-[var(--surface-control)]/75 p-3 shadow-[inset_0_0_0_1px_rgba(148,163,184,0.18)]">
<div className="flex items-start justify-between gap-3">
<div>
<h4 className="text-[11px] font-semibold text-slate-800">整层标注</h4>
<p className="mt-0.5 text-[10px] leading-4 text-slate-500">
<p className="mt-0.5 text-[10px] leading-4 text-[var(--ink-muted)]">
作用于当前图层所有可见 Feature，自动避让重叠。
</p>
</div>
@@ -623,7 +623,7 @@ export function MapDevPanel({
</PanelSection>
</div>
<div className="shrink-0 border-t border-slate-200/70 p-3">
<div className="shrink-0 border-t border-[var(--surface-divider)]/70 p-3">
<Button
type="button"
onClick={() => commands.resetAll()}
@@ -648,10 +648,10 @@ function PanelSection({
children: React.ReactNode;
}) {
return (
<section className="space-y-2.5 border-b border-slate-200/70 px-1 pb-4 last:border-b-0 last:pb-1">
<section className="space-y-2.5 border-b border-[var(--surface-divider)]/70 px-1 pb-4 last:border-b-0 last:pb-1">
<div>
<h3 className="text-xs font-semibold text-slate-900">{title}</h3>
<p className="mt-0.5 text-[11px] leading-4 text-slate-500">{description}</p>
<p className="mt-0.5 text-[11px] leading-4 text-[var(--ink-muted)]">{description}</p>
</div>
{children}
</section>
@@ -677,7 +677,7 @@ function ToggleField({
onChange: (checked: boolean) => void;
}) {
return (
<label className="flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-white/80 px-2.5 text-[11px] font-medium text-slate-700 shadow-[inset_0_0_0_1px_rgba(203,213,225,0.9)]">
<label className="flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-[var(--surface-reading)]/80 px-2.5 text-[11px] font-medium text-slate-700 shadow-[inset_0_0_0_1px_rgba(203,213,225,0.9)]">
<Checkbox
checked={checked}
onChange={(event) => onChange(event.target.checked)}
@@ -699,7 +699,7 @@ function ColorField({
}) {
return (
<Field label={label}>
<div className="flex h-9 items-center gap-2 rounded-lg border border-slate-200 bg-white/80 px-2">
<div className="flex h-9 items-center gap-2 rounded-lg border border-[var(--surface-divider)] bg-[var(--surface-reading)]/80 px-2">
<input
type="color"
value={value}
@@ -737,7 +737,7 @@ function RangeField({
step={step}
value={value}
onChange={(event) => onChange(Number(event.target.value))}
className="h-6 w-full accent-blue-600"
className="h-6 w-full accent-[var(--action-blue)]"
/>
</Field>
);
@@ -755,4 +755,4 @@ function StatusText({ children }: { children: React.ReactNode }) {
}
const inputClassName =
"h-10 w-full rounded-lg border border-slate-200 bg-white/80 px-2.5 text-xs text-slate-800 outline-hidden transition focus:border-blue-400 focus:ring-2 focus:ring-blue-500/15";
"h-10 w-full rounded-lg border border-[var(--surface-divider)] bg-[var(--surface-reading)]/80 px-2.5 text-xs text-slate-800 transition-colors";