Files
manage/frontend/src/index.css
T
Developer 67ca0fc3bc feat(prometheus-direct-charting): slice 3 — remove grafana + config rewrite + changelog
Remove the entire Grafana surface: integrations/grafana.py, GrafanaWidgetSource
(+ _fetch_chart, now redundant since prometheus chart exists), GrafanaLinkWidget,
LinksTab, get_grafana_status endpoint, useGrafanaStatus hook, GrafanaStatus type,
fetchGrafanaStatus client fn, registry/nav/tab entries (FE+BE). Rewrite
config.yaml thin-dashboard rule to match reality (recharts is sanctioned for
Prometheus-backed series). CHANGELOG migration note added.

Backend: 293 pytest pass, ruff clean. Frontend: build+lint green (0 errors).
SC-115/116 grep-clean (only prometheus_range.py migration comments + Dashboard.test
shortcut fixture remain — both spec-allowed).
2026-07-08 22:35:06 +00:00

119 lines
3.3 KiB
CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import "tailwindcss";
@theme {
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--color-background: #fafafa;
--color-foreground: #0f172a;
--color-card: #ffffff;
--color-card-foreground: #0f172a;
--color-popover: #ffffff;
--color-popover-foreground: #0f172a;
--color-primary: #4f8cff;
--color-primary-foreground: #ffffff;
--color-secondary: #f1f5f9;
--color-secondary-foreground: #0f172a;
--color-muted: #f1f5f9;
--color-muted-foreground: #64748b;
--color-accent: #f1f5f9;
--color-accent-foreground: #0f172a;
--color-destructive: #ef4444;
--color-destructive-foreground: #ffffff;
--color-border: #e2e8f0;
--color-input: #e2e8f0;
--color-ring: #4f8cff;
/* Status semantic cues — single source of truth for Badges.
chart-1=info/brand, chart-2=success, chart-3=warning,
chart-4=destructive, chart-5=neutral-accent. */
--color-chart-1: #4f8cff;
--color-chart-2: #22c55e;
--color-chart-3: #f59e0b;
--color-chart-4: #ef4444;
--color-chart-5: #8b5cf6;
--radius: 0.625rem;
--color-sidebar-background: #fafafa;
--color-sidebar-foreground: #0f172a;
--color-sidebar-primary: #4f8cff;
--color-sidebar-primary-foreground: #ffffff;
--color-sidebar-accent: #f1f5f9;
--color-sidebar-accent-foreground: #0f172a;
--color-sidebar-border: #e2e8f0;
--color-sidebar-ring: #4f8cff;
}
.dark {
--color-background: #0f172a;
--color-foreground: #f8fafc;
--color-card: #1e293b;
--color-card-foreground: #f8fafc;
--color-popover: #1e293b;
--color-popover-foreground: #f8fafc;
--color-primary: #4f8cff;
--color-primary-foreground: #ffffff;
--color-secondary: #1e293b;
--color-secondary-foreground: #f8fafc;
--color-muted: #334155;
--color-muted-foreground: #94a3b8;
--color-accent: #334155;
--color-accent-foreground: #f8fafc;
--color-destructive: #ef4444;
--color-destructive-foreground: #ffffff;
--color-border: #334155;
--color-input: #334155;
--color-ring: #4f8cff;
/* Status semantic cues — single source of truth for Badges.
chart-1=info/brand, chart-2=success, chart-3=warning,
chart-4=destructive, chart-5=neutral-accent. */
--color-chart-1: #4f8cff;
--color-chart-2: #22c55e;
--color-chart-3: #f59e0b;
--color-chart-4: #ef4444;
--color-chart-5: #8b5cf6;
--color-sidebar-background: #0f172a;
--color-sidebar-foreground: #f8fafc;
--color-sidebar-primary: #4f8cff;
--color-sidebar-primary-foreground: #ffffff;
--color-sidebar-accent: #334155;
--color-sidebar-accent-foreground: #f8fafc;
--color-sidebar-border: #334155;
--color-sidebar-ring: #4f8cff;
}
@layer base {
body {
background-color: var(--color-background);
color: var(--color-foreground);
font-family: var(--font-sans);
}
}
html,
body,
#root {
margin: 0;
width: 100%;
min-height: 100%;
overflow-x: hidden;
}
* {
box-sizing: border-box;
}
/*
* Mobile touch-target utility (spec R6.1).
*
* Applies a 44x44px minimum hit area to interactive elements ONLY below the
* `md:` (768px) breakpoint, satisfying WCAG 2.5.5 / Apple HIG on touch devices.
* At md+ the class is inert so desktop sizing is not regressed. Pages sprinkle
* this on icon buttons, checkboxes, switches, and row taps. See OpenSpec
* change `mobile-responsive-parity`, design §`mobile-touch-target`.
*/
@media (max-width: 767px) {
.mobile-touch-target {
min-height: 44px;
min-width: 44px;
}
}