27192dd69f
Frontend redesign in progress: updated styles, layout, and components across all pages to align with new design system. Includes Jira API compliance specs, property tests, and load test script.
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).
|