refactor(graphs): graph components kebab case (#8966)

Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com>

ui/components/graphs/shared/alert-pill.tsx

@@ -17,13 +17,17 @@ export function AlertPill({
 }: AlertPillProps) {
   return (
     <div className="flex items-center gap-2">
-      <div className="bg-alert-pill-bg flex items-center gap-1 rounded-full px-2 py-1">
-        <AlertTriangle size={iconSize} className="text-alert-pill-text" />
+      <div
+        className="flex items-center gap-1 rounded-full px-2 py-1"
+        style={{ backgroundColor: "var(--chart-alert-bg)" }}
+      >
+        <AlertTriangle
+          size={iconSize}
+          style={{ color: "var(--chart-alert-text)" }}
+        />
         <span
-          className={cn(
-            `text-${textSize}`,
-            "text-alert-pill-text font-semibold",
-          )}
+          className={cn(`text-${textSize}`, "font-semibold")}
+          style={{ color: "var(--chart-alert-text)" }}
         >
           {value}
         </span>

ui/components/graphs/shared/chart-legend.tsx

@@ -9,14 +9,22 @@ interface ChartLegendProps {
 
 export function ChartLegend({ items }: ChartLegendProps) {
   return (
-    <div className="bg-card-border mt-4 inline-flex gap-[46px] rounded-full border-2 px-[19px] py-[9px]">
+    <div
+      className="mt-4 inline-flex gap-[46px] rounded-full border-2 px-[19px] py-[9px]"
+      style={{ borderColor: "var(--chart-border)" }}
+    >
       {items.map((item, index) => (
         <div key={`legend-${index}`} className="flex items-center gap-1">
           <div
             className="h-3 w-3 rounded"
             style={{ backgroundColor: item.color }}
           />
-          <span className="text-xs text-gray-300">{item.label}</span>
+          <span
+            className="text-xs"
+            style={{ color: "var(--chart-text-secondary)" }}
+          >
+            {item.label}
+          </span>
         </div>
       ))}
     </div>

ui/components/graphs/shared/chart-tooltip.tsx

@@ -3,6 +3,7 @@ import { Bell, VolumeX } from "lucide-react";
 import { cn } from "@/lib/utils";
 
 import { TooltipData } from "../types";
+import { CHART_COLORS } from "./constants";
 
 interface ChartTooltipProps {
   active?: boolean;
@@ -27,7 +28,13 @@ export function ChartTooltip({
   const color = payload[0].color || data.color;
 
   return (
-    <div className="min-w-[200px] rounded-lg border border-slate-700 bg-slate-800 p-3 shadow-lg">
+    <div
+      className="min-w-[200px] rounded-lg border p-3 shadow-lg"
+      style={{
+        borderColor: CHART_COLORS.tooltipBorder,
+        backgroundColor: CHART_COLORS.tooltipBackground,
+      }}
+    >
       <div className="flex items-center gap-2">
         {showColorIndicator && color && (
           <div
@@ -38,10 +45,15 @@ export function ChartTooltip({
             style={{ backgroundColor: color }}
           />
         )}
-        <p className="text-sm font-semibold text-white">{label || data.name}</p>
+        <p
+          className="text-sm font-semibold"
+          style={{ color: CHART_COLORS.textPrimary }}
+        >
+          {label || data.name}
+        </p>
       </div>
 
-      <p className="mt-1 text-xs text-white">
+      <p className="mt-1 text-xs" style={{ color: CHART_COLORS.textPrimary }}>
         {typeof data.value === "number"
           ? data.value.toLocaleString()
           : data.value}
@@ -50,8 +62,11 @@ export function ChartTooltip({
 
       {data.newFindings !== undefined && data.newFindings > 0 && (
         <div className="mt-1 flex items-center gap-2">
-          <Bell size={14} className="text-slate-400" />
-          <span className="text-xs text-slate-400">
+          <Bell size={14} style={{ color: "var(--chart-fail)" }} />
+          <span
+            className="text-xs"
+            style={{ color: CHART_COLORS.textSecondary }}
+          >
             {data.newFindings} New Findings
           </span>
         </div>
@@ -59,20 +74,33 @@ export function ChartTooltip({
 
       {data.new !== undefined && data.new > 0 && (
         <div className="mt-1 flex items-center gap-2">
-          <Bell size={14} className="text-slate-400" />
-          <span className="text-xs text-slate-400">{data.new} New</span>
+          <Bell size={14} style={{ color: "var(--chart-fail)" }} />
+          <span
+            className="text-xs"
+            style={{ color: CHART_COLORS.textSecondary }}
+          >
+            {data.new} New
+          </span>
         </div>
       )}
 
       {data.muted !== undefined && data.muted > 0 && (
         <div className="mt-1 flex items-center gap-2">
-          <VolumeX size={14} className="text-slate-400" />
-          <span className="text-xs text-slate-400">{data.muted} Muted</span>
+          <VolumeX size={14} style={{ color: CHART_COLORS.textSecondary }} />
+          <span
+            className="text-xs"
+            style={{ color: CHART_COLORS.textSecondary }}
+          >
+            {data.muted} Muted
+          </span>
         </div>
       )}
 
       {data.change !== undefined && (
-        <p className="mt-1 text-xs text-slate-400">
+        <p
+          className="mt-1 text-xs"
+          style={{ color: CHART_COLORS.textSecondary }}
+        >
           <span className="font-bold">
             {data.change > 0 ? "+" : ""}
             {data.change}%
@@ -97,8 +125,19 @@ export function MultiSeriesChartTooltip({
   }
 
   return (
-    <div className="min-w-[200px] rounded-lg border border-slate-700 bg-slate-800 p-3 shadow-lg">
-      <p className="mb-2 text-sm font-semibold text-white">{label}</p>
+    <div
+      className="min-w-[200px] rounded-lg border p-3 shadow-lg"
+      style={{
+        borderColor: CHART_COLORS.tooltipBorder,
+        backgroundColor: CHART_COLORS.tooltipBackground,
+      }}
+    >
+      <p
+        className="mb-2 text-sm font-semibold"
+        style={{ color: CHART_COLORS.textPrimary }}
+      >
+        {label}
+      </p>
 
       {payload.map((entry: any, index: number) => (
         <div key={index} className="flex items-center gap-2">
@@ -106,12 +145,20 @@ export function MultiSeriesChartTooltip({
             className="h-2 w-2 rounded-full"
             style={{ backgroundColor: entry.color }}
           />
-          <span className="text-xs text-white">{entry.name}:</span>
-          <span className="text-xs font-semibold text-white">
+          <span className="text-xs" style={{ color: CHART_COLORS.textPrimary }}>
+            {entry.name}:
+          </span>
+          <span
+            className="text-xs font-semibold"
+            style={{ color: CHART_COLORS.textPrimary }}
+          >
             {entry.value}
           </span>
           {entry.payload[`${entry.dataKey}_change`] && (
-            <span className="text-xs text-slate-400">
+            <span
+              className="text-xs"
+              style={{ color: CHART_COLORS.textSecondary }}
+            >
               ({entry.payload[`${entry.dataKey}_change`] > 0 ? "+" : ""}
               {entry.payload[`${entry.dataKey}_change`]}%)
             </span>

ui/components/graphs/shared/constants.ts

@@ -1,21 +1,33 @@
 export const SEVERITY_COLORS = {
-  Informational: "var(--color-info)",
-  Low: "var(--color-warning)",
-  Medium: "var(--color-warning-emphasis)",
-  High: "var(--color-danger)",
-  Critical: "var(--color-danger-emphasis)",
+  Informational: "var(--chart-info)",
+  Info: "var(--chart-info)",
+  Low: "var(--chart-warning)",
+  Medium: "var(--chart-warning-emphasis)",
+  High: "var(--chart-danger)",
+  Critical: "var(--chart-danger-emphasis)",
+} as const;
+
+export const PROVIDER_COLORS = {
+  AWS: "var(--chart-provider-aws)",
+  Azure: "var(--chart-provider-azure)",
+  Google: "var(--chart-provider-google)",
+} as const;
+
+export const STATUS_COLORS = {
+  Success: "var(--chart-success-color)",
+  Fail: "var(--chart-fail)",
 } as const;
 
 export const CHART_COLORS = {
-  tooltipBorder: "var(--color-slate-700)",
-  tooltipBackground: "var(--color-slate-800)",
-  textPrimary: "var(--color-white)",
-  textSecondary: "var(--color-slate-400)",
-  gridLine: "var(--color-slate-700)",
+  tooltipBorder: "var(--chart-border-emphasis)",
+  tooltipBackground: "var(--chart-background)",
+  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
-  alertPillBg: "var(--color-alert-pill-bg)",
-  alertPillText: "var(--color-alert-pill-text)",
-  defaultColor: "var(--color-slate-500)", // Default fallback color for charts
+  alertPillBg: "var(--chart-alert-bg)",
+  alertPillText: "var(--chart-alert-text)",
+  defaultColor: "#64748b", // slate-500
 } as const;
 
 export const CHART_DIMENSIONS = {