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.
1.8 KiB
1.8 KiB
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
SyncandAtlaslive in the page header, not the findings panel toolbar.- The page title is the only place green appears as identity. Anywhere else, green = success state.
- Every metric panel is a KB card. No more colored left-rails.
- Filter chips tint to the dimension being filtered (severity → amber, SLA → red, action → sky).