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.
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
import { buttonInteractionVariants } from "@/shared/ui/button-interaction";
|
|
|
|
export const MAP_MAJOR_PANEL_RADIUS_CLASS_NAME = "rounded-2xl";
|
|
|
|
export const MAP_CONTROL_RADIUS_CLASS_NAME = "rounded-xl";
|
|
|
|
export const MAP_READABLE_RADIUS_CLASS_NAME = MAP_CONTROL_RADIUS_CLASS_NAME;
|
|
|
|
export const MAP_COMPACT_RADIUS_CLASS_NAME = MAP_CONTROL_RADIUS_CLASS_NAME;
|
|
|
|
export const MAP_ICON_CELL_RADIUS_CLASS_NAME = "rounded-lg";
|
|
|
|
export const MAP_SELECTION_CARD_FOCUS_CLASS_NAME =
|
|
"outline-hidden focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-[var(--action-focus-ring)] focus-visible:-outline-offset-1";
|
|
|
|
export const MAP_CONTROL_SURFACE_CLASS_NAME =
|
|
"acrylic-control border";
|
|
|
|
export const MAP_TOOL_PANEL_SURFACE_CLASS_NAME =
|
|
"acrylic-panel border";
|
|
|
|
export const MAP_FOCUS_SURFACE_CLASS_NAME =
|
|
"acrylic-panel border";
|
|
|
|
export const MAP_READABLE_SURFACE_CLASS_NAME =
|
|
"surface-well border";
|
|
|
|
export const MAP_READABLE_SURFACE_STRONG_CLASS_NAME =
|
|
"surface-control border";
|
|
|
|
export const MAP_CONTROL_HOVER_CLASS_NAME =
|
|
buttonInteractionVariants({ tone: "neutral" });
|