feat: implement new design system variables across new components and add skeletons (#9193)

ui/components/graphs/shared/constants.ts

@@ -1,10 +1,9 @@
 export const SEVERITY_COLORS = {
-  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)",
+  Informational: "var(--bg-data-info)",
+  Low: "var(--bg-data-low)",
+  Medium: "var(--bg-data-medium)",
+  High: "var(--bg-data-high)",
+  Critical: "var(--bg-data-critical)",
 } as const;
 
 export const PROVIDER_COLORS = {