fix(site): update workspace timings to use theme colors (#15269)

Fix https://github.com/coder/coder/issues/15266

After fix:
<img width="1210" alt="Screenshot 2024-10-29 at 09 37 02"
src="https://github.com/user-attachments/assets/35ff0361-6323-4e26-b4f2-05da6f1651c6">
<img width="1200" alt="Screenshot 2024-10-29 at 09 36 49"
src="https://github.com/user-attachments/assets/c2e55364-9f21-4bd1-bda6-aedf106a9742">
<img width="1202" alt="Screenshot 2024-10-29 at 09 36 40"
src="https://github.com/user-attachments/assets/2d0222d9-cf25-4ef9-8d74-f426fbae7bec">

site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx

@@ -91,7 +91,7 @@ const styles = {
 			left: -8,
 		},
 	}),
-	clickable: {
+	clickable: (theme) => ({
 		cursor: "pointer",
 		// We need to make the bar width at least 34px to allow the "..." icons to be displayed.
 		// The calculation is border * 1 + side paddings * 2 + icon width (which is 18px)
@@ -99,7 +99,7 @@ const styles = {
 
 		"&:focus, &:hover, &:active": {
 			outline: "none",
-			borderColor: "#38BDF8",
+			borderColor: theme.roles.active.outline,
 		},
-	},
+	}),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/modules/workspaces/WorkspaceTiming/Chart/Blocks.tsx

@@ -52,16 +52,16 @@ const styles = {
 		gap: spaceBetweenBlocks,
 		alignItems: "center",
 	},
-	block: {
+	block: (theme) => ({
 		borderRadius: 4,
 		height: 18,
-		backgroundColor: "#082F49",
-		border: "1px solid #38BDF8",
+		backgroundColor: theme.roles.active.background,
+		border: `1px solid ${theme.roles.active.outline}`,
 		flexShrink: 0,
 		flex: 1,
-	},
-	more: {
-		color: "#38BDF8",
+	}),
+	more: (theme) => ({
+		color: theme.roles.active.outline,
 		lineHeight: 0,
 		flexShrink: 0,
 		flex: 1,
@@ -69,5 +69,5 @@ const styles = {
 		"& svg": {
 			fontSize: moreIconSize,
 		},
-	},
+	}),
 } satisfies Record<string, Interpolation<Theme>>;

site/src/modules/workspaces/WorkspaceTiming/ResourcesChart.tsx

@@ -32,33 +32,6 @@ import {
 } from "./Chart/utils";
 import type { StageCategory } from "./StagesChart";
 
-const legendsByAction: Record<string, ChartLegend> = {
-	"state refresh": {
-		label: "state refresh",
-	},
-	create: {
-		label: "create",
-		colors: {
-			fill: "#022C22",
-			stroke: "#BBF7D0",
-		},
-	},
-	delete: {
-		label: "delete",
-		colors: {
-			fill: "#422006",
-			stroke: "#FDBA74",
-		},
-	},
-	read: {
-		label: "read",
-		colors: {
-			fill: "#082F49",
-			stroke: "#38BDF8",
-		},
-	},
-};
-
 type ResourceTiming = {
 	name: string;
 	source: string;
@@ -86,6 +59,8 @@ export const ResourcesChart: FC<ResourcesChartProps> = ({
 	const visibleTimings = timings.filter(
 		(t) => !isCoderResource(t.name) && t.name.includes(filter),
 	);
+	const theme = useTheme();
+	const legendsByAction = getLegendsByAction(theme);
 	const visibleLegends = [...new Set(visibleTimings.map((t) => t.action))].map(
 		(a) => legendsByAction[a],
 	);
@@ -168,3 +143,32 @@ export const isCoderResource = (resource: string) => {
 		resource.startsWith("coder_")
 	);
 };
+
+function getLegendsByAction(theme: Theme): Record<string, ChartLegend> {
+	return {
+		"state refresh": {
+			label: "state refresh",
+		},
+		create: {
+			label: "create",
+			colors: {
+				fill: theme.roles.success.background,
+				stroke: theme.roles.success.outline,
+			},
+		},
+		delete: {
+			label: "delete",
+			colors: {
+				fill: theme.roles.warning.background,
+				stroke: theme.roles.warning.outline,
+			},
+		},
+		read: {
+			label: "read",
+			colors: {
+				fill: theme.roles.active.background,
+				stroke: theme.roles.active.outline,
+			},
+		},
+	};
+}

site/src/modules/workspaces/WorkspaceTiming/ScriptsChart.tsx

@@ -1,3 +1,4 @@
+import { type Theme, useTheme } from "@emotion/react";
 import { type FC, useState } from "react";
 import { Bar } from "./Chart/Bar";
 import {
@@ -28,30 +29,6 @@ import {
 } from "./Chart/utils";
 import type { StageCategory } from "./StagesChart";
 
-const legendsByStatus: Record<string, ChartLegend> = {
-	ok: {
-		label: "success",
-		colors: {
-			fill: "#022C22",
-			stroke: "#BBF7D0",
-		},
-	},
-	exit_failure: {
-		label: "failure",
-		colors: {
-			fill: "#450A0A",
-			stroke: "#F87171",
-		},
-	},
-	timeout: {
-		label: "timed out",
-		colors: {
-			fill: "#422006",
-			stroke: "#FDBA74",
-		},
-	},
-};
-
 type ScriptTiming = {
 	name: string;
 	status: string;
@@ -77,6 +54,8 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
 	const [ticks, scale] = makeTicks(totalTime);
 	const [filter, setFilter] = useState("");
 	const visibleTimings = timings.filter((t) => t.name.includes(filter));
+	const theme = useTheme();
+	const legendsByStatus = getLegendsByStatus(theme);
 	const visibleLegends = [...new Set(visibleTimings.map((t) => t.status))].map(
 		(s) => legendsByStatus[s],
 	);
@@ -151,3 +130,29 @@ export const ScriptsChart: FC<ScriptsChartProps> = ({
 		</Chart>
 	);
 };
+
+function getLegendsByStatus(theme: Theme): Record<string, ChartLegend> {
+	return {
+		ok: {
+			label: "success",
+			colors: {
+				fill: theme.roles.success.background,
+				stroke: theme.roles.success.outline,
+			},
+		},
+		exit_failure: {
+			label: "failure",
+			colors: {
+				fill: theme.roles.error.background,
+				stroke: theme.roles.error.outline,
+			},
+		},
+		timeout: {
+			label: "timed out",
+			colors: {
+				fill: theme.roles.warning.background,
+				stroke: theme.roles.warning.outline,
+			},
+		},
+	};
+}

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
+import { chromatic } from "testHelpers/chromatic";
 import { WorkspaceTimings } from "./WorkspaceTimings";
 import { WorkspaceTimingsResponse } from "./storybookData";
 
@@ -11,6 +12,9 @@ const meta: Meta<typeof WorkspaceTimings> = {
 		provisionerTimings: WorkspaceTimingsResponse.provisioner_timings,
 		agentScriptTimings: WorkspaceTimingsResponse.agent_script_timings,
 	},
+	parameters: {
+		chromatic,
+	},
 };
 
 export default meta;