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

refactor(ui): refine glass surfaces

Browse Source
This commit is contained in:
jiang
2026-07-15 11:41:51 +08:00
parent 2b768c2c06
commit 8978f2d167
11 changed files with 271 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DESIGN.md
+44 -22
View File
@@ -91,13 +91,13 @@ Recommended canvas colors:
| `canvas-map` | `#eaf1f8` | Fallback map background |
| `canvas-map-grid` | `rgba(37, 99, 235, 0.06)` | Subtle engineering grid |
| `canvas-page` | `#f8fafc` | Non-map support pages |
| `canvas-panel` | `rgba(255, 255, 255, 0.94)` | Default information-bearing floating panel |
| `canvas-panel` | Named glass material | Use the material level for the component category |
| `canvas-panel-strong` | `rgba(255, 255, 255, 0.98)` | Dense text or form surface |
| `canvas-panel-soft` | `rgba(255, 255, 255, 0.84)` | Low-density spatial overlay without critical text |
| `surface-overlay` | `rgba(255, 255, 255, 0.90-0.94)` | Floating menu or compact panel shell |
| `surface-readable` | `rgba(255, 255, 255, 0.94)` | Readable rows, menu headers, property panels and content blocks |
| `surface-map-control` | `rgba(255, 255, 255, 0.92)` | Always-visible and persistent map instruments: toolbar, zoom, scaleline, Agent shell, scheduled-condition shell |
| `surface-tool-panel` | `rgba(255, 255, 255, 0.90)` | Toolbar function panel outer shell |
| `surface-overlay` | `glass-menu` | Floating menu or compact choice shell |
| `surface-readable` | `glass-readable` | Right-side details, compact results and summaries |
| `surface-map-control` | `glass-control` | Always-visible toolbar, zoom and compact task shells |
| `surface-tool-panel` | `glass-panel` | Toolbar panels, expanded conditions and Agent shell |
### Color System
@@ -223,13 +223,13 @@ Transparency is a material system, not a collection of arbitrary opacity utiliti
| Token | Background | Blur | Shadow | Intended use |
|---|---|---:|---|---|
| `glass-air` | `rgba(255, 255, 255, 0.84)` | `16px` | `0 10px 30px rgba(15, 23, 42, 0.10)` | Sparse map labels, scale line and low-density overlays without critical text |
| `glass-navigation` | `rgba(255, 255, 255, 0.90)` | `24px` | `0 8px 28px rgba(15, 23, 42, 0.10)` | Top bar and other broad, low-density navigation surfaces |
| `glass-panel` | `rgba(255, 255, 255, 0.90)` | `20px` | `0 24px 70px rgba(30, 64, 115, 0.18)` | Layer, base-map, measure, drawing and other temporary tool panels |
| `glass-readable` | `rgba(255, 255, 255, 0.94)` | `20px` | `0 24px 70px rgba(30, 64, 115, 0.20)` | Feature side panels, SCADA details, menus, compact results and information surfaces |
| `glass-control` | `rgba(255, 255, 255, 0.92)` | `16px` | `0 14px 34px rgba(15, 23, 42, 0.18)` | Persistent map instruments, Agent shell and scheduled-condition shell |
| `glass-menu` | `rgba(255, 255, 255, 0.94)` | `20px` | `0 18px 48px rgba(15, 23, 42, 0.16)` | Dropdown menus, notices, command palettes and transient choices |
| `glass-focus` | `rgba(255, 255, 255, 0.94)` | `24px` | `0 30px 90px rgba(15, 23, 42, 0.26)` | Centered feature popovers, SCADA popovers and focused confirmations |
| `glass-air` | `rgba(255, 255, 255, 0.68)` | `16px` | `0 10px 30px rgba(15, 23, 42, 0.10)` | Scale line, coordinates and lightweight map hints |
| `glass-navigation` | `rgba(255, 255, 255, 0.80)` | `24px` | `0 8px 28px rgba(15, 23, 42, 0.10)` | Top bar and broad low-density navigation surfaces |
| `glass-panel` | `rgba(255, 255, 255, 0.84)` | `20px` | `0 24px 70px rgba(30, 64, 115, 0.18)` | Tool panels, expanded conditions and Agent shell |
| `glass-control` | `rgba(255, 255, 255, 0.90)` | `16px` | `0 14px 34px rgba(15, 23, 42, 0.18)` | Zoom, persistent toolbars and compact task shells |
| `glass-readable` | `rgba(255, 255, 255, 0.90)` | `20px` | `0 24px 70px rgba(30, 64, 115, 0.20)` | Right-side details, compact results and summaries |
| `glass-focus` | `rgba(255, 255, 255, 0.94)` | `24px` | Tailwind `shadow-2xl shadow-blue-950/20` | Normal and SCADA property popovers only |
| `glass-menu` | `rgba(255, 255, 255, 0.92)` | `20px` | `0 18px 48px rgba(15, 23, 42, 0.16)` | Dropdown menus and notices |
| `surface-solid` | `rgba(255, 255, 255, 0.98)` | `0` | `0 20px 60px rgba(15, 23, 42, 0.18)` | Forms, reports, long text, destructive confirmations and accessibility fallback |
| `scrim-soft` | `rgba(15, 23, 42, 0.20)` | `0` | none | Non-destructive drawers and contextual focus |
| `scrim-focus` | `rgba(15, 23, 42, 0.48)` | `0` | none | Modal decisions, destructive or irreversible actions |
@@ -258,15 +258,38 @@ Colored glass communicates operational meaning. It must not be used as decoratio
Text on colored glass must use a darker shade of the same hue. Do not place neutral gray text on a colored surface.
#### Canonical Focus Glass
Normal and SCADA property popovers are the readability benchmark. Their outer shell must use this exact Tailwind combination:
```text
bg-white/[0.94] backdrop-blur-xl
shadow-2xl shadow-blue-950/20
ring-1 ring-white/80
```
Do not add `saturate()`, gradients, acrylic effects, heavier custom focus shadows, or full-width white surfaces beneath the header and body. Attribute rows use low-opacity dividers. Device-type headers use only a small `bg-*-50/70` tint.
#### Layering And Performance
- Use at most one `backdrop-filter` in the same visual region. Inner cards never blur again.
- Do not place full-height `white/90+` child panels inside a glass shell.
- Large surfaces gain hierarchy by lowering white coverage, not by increasing blur.
- Reports, forms, long text, multi-column tables and dangerous confirmations use `surface-solid`.
- Browsers without backdrop-filter fall back to 96% white.
- `prefers-reduced-transparency` disables blur and uses `surface-solid`.
- Coarse pointers retain transparency. Use a solid surface only behind an explicit performance-degradation condition.
#### Component Material Mapping
| Component category | Material token | Notes |
|---|---|---|
| Workbench top bar | `glass-navigation` | Preserve map context across the full width; active items use a semantic colored glass token |
| Zoom, scale line and compact toolbar | `glass-control` | Persistent controls need stable definition over every basemap and use `glass-edge` rather than an opaque border |
| Scale line, coordinates and lightweight hints | `glass-air` | Sparse overlays should preserve the strongest perception of the scattered map |
| Zoom and compact toolbar | `glass-control` | Persistent controls need stable definition over every basemap and use `glass-edge` rather than an opaque border |
| Layer, base-map, measure and drawing panels | `glass-panel` | Use one translucent outer shell; repeated controls inside should be flat or lightly tinted |
| Agent command shell | `glass-control` | Conversation content may use `surface-solid` only for long generated text or form controls |
| Scheduled-condition task shell | `glass-control` | Remove stacked white layers; use dividers and state tint to create hierarchy |
| Agent command shell | `glass-panel` | Conversation content may use `surface-solid` only for long generated text or form controls |
| Scheduled-condition task shell | `glass-control` collapsed, `glass-panel` expanded | Remove stacked full-height white layers; use dividers and state tint to create hierarchy |
| Feature and SCADA property popovers | `glass-focus` | Reuse the proven high-readability shell and distinguish focus through blur and elevation rather than a whiter background |
| Feature insight side panel | `glass-readable` | Dense values remain on the shared glass surface; avoid card-per-field nesting |
| Dropdown menus and notices | `glass-menu` | More opaque because the surface is temporary and action-dense |
@@ -276,15 +299,14 @@ Text on colored glass must use a darker shade of the same hue. Do not place neut
#### Composition Rules
- Use at most two translucent layers over the map at the same location. Three stacked white-alpha surfaces become visually opaque and waste GPU work.
- Use at most one backdrop-filter layer over the map at the same location. Inner translucent tints must not apply blur.
- A glass shell should usually contain flat sections separated by `glass-divider`. Do not place an opaque white card around every row.
- Long text, editable fields, tables with many columns and destructive confirmations use `surface-solid` even when their parent shell is translucent.
- Readable content must never be less opaque than its surrounding shell.
- When map detail beneath the panel is too noisy, move one step toward `surface-solid`. Do not keep increasing blur.
- When map detail beneath the panel is too noisy, move the outer shell one material level toward `surface-solid`. Do not keep increasing blur or add an opaque full-height child.
- Use colored glass only for status, selection, device type or Agent inference. Neutral structure remains white glass.
- Semantic colored glass must sit inside a `glass-readable`, `glass-control`, `glass-menu`, or `glass-focus` neutral base. Do not place a 70-82% colored surface directly over the map.
- High-readability glass is the global default for information-bearing UI. Any surface containing operational text must be at least 90% opaque; properties, results, menus and multi-line content use 94%.
- Acrylic-style saturation and edge highlights are limited to broad navigation and transient outer shells. Do not add texture, tint or refractive treatment to property tables, forms, reports or long text.
- Opacity follows component area and information density. Operational text may live on an 84% panel shell when local long-form content uses `surface-solid`; only property focus popovers use 94% glass.
- Do not apply acrylic-style saturation, texture or refractive treatment to any material level.
- Prefer layered `box-shadow` or an inset ring for glass edges. A solid high-contrast border breaks the depth illusion.
- Hover feedback may change highlight and edge opacity. Do not animate `backdrop-filter` or background blur.
@@ -296,8 +318,8 @@ Text on colored glass must use a darker shade of the same hue. Do not place neut
- Under `prefers-reduced-transparency: reduce`, replace every glass material with `surface-solid` and remove `backdrop-filter`.
- When `backdrop-filter` is unsupported, use `rgba(255, 255, 255, 0.96)` with the same shadow and radius.
- On low-power or touch-first devices, prefer `glass-readable` or `surface-solid` over a larger blur radius.
- On coarse-pointer devices, remove backdrop blur and use a 0.96-0.98 white surface while preserving semantic state colors.
- Low-power fallback must be activated by an explicit performance-degradation condition, not inferred from touch or coarse pointer input.
- Coarse-pointer devices keep the same transparency hierarchy by default.
- Never apply backdrop blur separately to every list row. Blur belongs to the shared outer surface.
- Maintain WCAG AA contrast for all body text and controls against the composited result, not only against the declared RGBA value.