milestone 23 s3: convert features/dashboard/DiskCard.tsx to stylex

web/src/features/dashboard/DiskCard.tsx

@@ -1,33 +1,95 @@
+import * as stylex from "@stylexjs/stylex";
 import { formatBytes } from "@/lib/format";
 import type { Health } from "@/lib/types";
+import { styles as shared } from "@/ui/styles";
+import { colors } from "@/ui/tokens.stylex";
 
-const STATE_CLASSES: Record<Health["disk"]["state"], string> = {
-	ok: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-300",
-	warn: "bg-amber-100 text-amber-800 dark:bg-amber-950 dark:text-amber-300",
-	critical: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
-};
+const DARK = "@media (prefers-color-scheme: dark)";
+
+const styles = stylex.create({
+	card: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		borderColor: colors.border,
+		backgroundColor: colors.surfaceRaised,
+		paddingInline: "1rem",
+		paddingBlock: "0.75rem",
+	},
+	heading: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+		fontWeight: 600,
+	},
+	badge: {
+		borderRadius: "0.25rem",
+		paddingInline: "0.5rem",
+		paddingBlock: "0.125rem",
+		fontSize: "0.75rem",
+		lineHeight: "1rem",
+		fontWeight: 500,
+	},
+	/**
+	 * The badge fills are their own three-step scale, not the `danger`/`warn`
+	 * banner tokens: they read as a tinted chip against a raised card, where a
+	 * banner fill would be too heavy.
+	 */
+	ok: {
+		backgroundColor: { default: "oklch(95% 0.052 163.051)", [DARK]: "oklch(26.2% 0.051 172.552)" },
+		color: { default: "oklch(43.2% 0.095 166.913)", [DARK]: "oklch(84.5% 0.143 164.978)" },
+	},
+	warn: {
+		backgroundColor: { default: "oklch(96.2% 0.059 95.617)", [DARK]: "oklch(27.9% 0.077 45.635)" },
+		color: { default: "oklch(47.3% 0.137 46.201)", [DARK]: "oklch(87.9% 0.169 91.605)" },
+	},
+	critical: {
+		backgroundColor: { default: "oklch(93.6% 0.032 17.717)", [DARK]: "oklch(25.8% 0.092 26.042)" },
+		color: { default: "oklch(44.4% 0.177 26.899)", [DARK]: "oklch(80.8% 0.114 19.571)" },
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+		marginTop: "0.75rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	row: {
+		display: "flex",
+		justifyContent: "space-between",
+	},
+	term: {
+		color: colors.textMuted,
+	},
+});
+
+function stateStyle(state: Health["disk"]["state"]) {
+	if (state === "critical") return styles.critical;
+	return state === "warn" ? styles.warn : styles.ok;
+}
 
 export default function DiskCard({ disk }: { disk: Health["disk"] }) {
 	return (
-		<section className="rounded border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
-			<h2 className="flex items-center justify-between text-sm font-semibold">
+		<section {...stylex.props(styles.card)}>
+			<h2 {...stylex.props(styles.heading)}>
 				Disk
-				<span className={`rounded px-2 py-0.5 text-xs font-medium ${STATE_CLASSES[disk.state]}`}>
-					{disk.state}
-				</span>
+				<span {...stylex.props(styles.badge, stateStyle(disk.state))}>{disk.state}</span>
 			</h2>
-			<dl className="mt-3 space-y-2 text-sm">
-				<div className="flex justify-between">
-					<dt className="text-zinc-500">Free</dt>
-					<dd className="tabular-nums">{formatBytes(disk.free_bytes)}</dd>
+			<dl {...stylex.props(styles.list)}>
+				<div {...stylex.props(styles.row)}>
+					<dt {...stylex.props(styles.term)}>Free</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.free_bytes)}</dd>
 				</div>
-				<div className="flex justify-between">
-					<dt className="text-zinc-500">Database</dt>
-					<dd className="tabular-nums">{formatBytes(disk.db_bytes)}</dd>
+				<div {...stylex.props(styles.row)}>
+					<dt {...stylex.props(styles.term)}>Database</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.db_bytes)}</dd>
 				</div>
-				<div className="flex justify-between">
-					<dt className="text-zinc-500">Logs</dt>
-					<dd className="tabular-nums">{formatBytes(disk.log_bytes)}</dd>
+				<div {...stylex.props(styles.row)}>
+					<dt {...stylex.props(styles.term)}>Logs</dt>
+					<dd {...stylex.props(shared.tabularNums)}>{formatBytes(disk.log_bytes)}</dd>
 				</div>
 			</dl>
 		</section>