37 lines
1.8 KiB
Markdown
37 lines
1.8 KiB
Markdown
|
# Reporting UI Kit
|
||
|
|
|
||
|
|
The visual vocabulary used by `/reporting` after the Knowledge Base alignment pass.
|
||
|
|
|
||
|
|
## Files
|
||
|
|
- `index.html` — entry point. Loads the kit docs page.
|
||
|
|
- `ReportPrimitives.jsx` — `PageHeader`, `RptButton`, `KbCard`, `PillTab`, `FilterChip`, `StatusBanner`, `ToolbarLabel`, `SeverityDot`, `SlaPill`, `WorkflowBadge`, `DonutSample`, `RptIcon`.
|
||
|
|
- `ReportingPage.jsx` — full-page reference assembly (`ReportingPage`).
|
||
|
|
- `KitDocs.jsx` — browseable docs (Overview · Tokens · Components · Assemblies · Reference).
|
||
|
|
|
||
|
|
## Color roles
|
||
|
|
- **Sky `#0EA5E9`** — surface accent (panel borders, tab pill active, donut highlight, table header text, neutral secondary buttons).
|
||
|
|
- **Green `#10B981`** — page identity only: title glow + the lone primary action (Sync).
|
||
|
|
- **Amber `#F59E0B`** — filter active, anomaly callout, At-Risk SLA.
|
||
|
|
- **Red `#EF4444`** — error / Critical / Overdue.
|
||
|
|
|
||
|
|
## Card chrome (one chrome, every panel)
|
||
|
|
```
|
||
|
|
background: linear-gradient(135deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.98) 100%)
|
||
|
|
border: 1.5px solid rgba(14,165,233,0.12) /* 0.35 on hover */
|
||
|
|
radius: 8px
|
||
|
|
label: mono · 11 / 600 · 0.1em · uppercase · slate-disabled
|
||
|
|
divider: 1px solid rgba(255,255,255,0.04) under the label
|
||
|
|
```
|
||
|
|
|
||
|
|
## Button hierarchy
|
||
|
|
- `primary` (green tinted-fill) — **only** Sync uses this.
|
||
|
|
- `neutral` (sky outlined transparent) — Atlas, Prev/Next, refresh.
|
||
|
|
- `subtle` (sky tinted-fill) — Export, Queue, Columns, Rows.
|
||
|
|
- `danger` (red tinted-fill) — destructive only.
|
||
|
|
|
||
|
|
## Page-level rules
|
||
|
|
1. `Sync` and `Atlas` live in the **page header**, not the findings panel toolbar.
|
||
|
|
2. The page title is the only place green appears as identity. Anywhere else, green = success state.
|
||
|
|
3. Every metric panel is a KB card. No more colored left-rails.
|
||
|
|
4. Filter chips tint to the dimension being filtered (severity → amber, SLA → red, action → sky).
|