ben.carrasco/prowler
1
0
Fork 0
mirror of https://github.com/prowler-cloud/prowler.git synced 2026-07-17 01:21:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add light theme support for graph components

Browse Source
This commit is contained in:
Alan Buscaglia
2025-10-21 16:32:40 +02:00
parent 53497721f3
commit bbad5b79a6
2 changed files with 42 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/components/graphs/shared/constants.ts
+3 -3
View File
@@ -21,13 +21,13 @@ export const STATUS_COLORS = {
export const CHART_COLORS = {
tooltipBorder: "var(--chart-border-emphasis)",
tooltipBackground: "var(--chart-background)",
textPrimary: "#ffffff",
textPrimary: "var(--chart-text-primary)",
textSecondary: "var(--chart-text-secondary)",
gridLine: "var(--chart-border-emphasis)",
backgroundTrack: "rgba(51, 65, 85, 0.5)", // slate-700 with 50% opacity
backgroundTrack: "var(--chart-background-track)",
alertPillBg: "var(--chart-alert-bg)",
alertPillText: "var(--chart-alert-text)",
defaultColor: "#64748b", // slate-500
defaultColor: "var(--chart-text-secondary)",
} as const;
export const CHART_DIMENSIONS = {
ui/styles/globals.css
+39 -1
View File
@@ -2,7 +2,7 @@
@config "../tailwind.config.js";
@theme {
/* Chart Severity Colors */
/* Chart Severity Colors - Dark Theme */
--chart-info: #2e51b2;
--chart-warning: #fdd34f;
--chart-warning-emphasis: #ff7d19;
@@ -35,6 +35,25 @@
@layer base {
:root {
/* Light Theme Chart Colors */
--chart-info: #1e40af;
--chart-warning: #d97706;
--chart-warning-emphasis: #dc2626;
--chart-danger: #dc2626;
--chart-danger-emphasis: #991b1b;
--chart-success-color: #16a34a;
--chart-fail: #dc2626;
--chart-radar-primary: #9d174d;
--chart-text-primary: #1f2937;
--chart-text-secondary: #6b7280;
--chart-border: #d1d5db;
--chart-border-emphasis: #9ca3af;
--chart-background: #f9fafb;
--chart-background-track: rgba(229, 231, 235, 0.5);
--chart-alert-bg: #fecdd3;
--chart-alert-text: #be123c;
/* Chart HSL values */
--chart-success: 146 80% 35%;
--chart-fail: 339 90% 51%;
--chart-muted: 45 93% 47%;
@@ -49,6 +68,25 @@
}
.dark {
/* Dark Theme Chart Colors */
--chart-info: #2e51b2;
--chart-warning: #fdd34f;
--chart-warning-emphasis: #ff7d19;
--chart-danger: #ff3077;
--chart-danger-emphasis: #971348;
--chart-success-color: #86da26;
--chart-fail: #db2b49;
--chart-radar-primary: #b51c80;
--chart-text-primary: #ffffff;
--chart-text-secondary: #94a3b8;
--chart-border: #475569;
--chart-border-emphasis: #334155;
--chart-background: #1e293b;
--chart-background-track: rgba(51, 65, 85, 0.5);
--chart-alert-bg: #432232;
--chart-alert-text: #f54280;
/* Chart HSL values */
--chart-success: 146 80% 35%;
--chart-fail: 339 90% 51%;
--chart-muted: 45 93% 47%;