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

web/src/features/dashboard/HealthBanners.tsx

@@ -1,13 +1,38 @@
+import * as stylex from "@stylexjs/stylex";
 import { formatBytes } from "@/lib/format";
 import type { Health } from "@/lib/types";
+import { colors } from "@/ui/tokens.stylex";
+
+const styles = stylex.create({
+	stack: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "0.5rem",
+	},
+	banner: {
+		borderRadius: "0.25rem",
+		borderWidth: 1,
+		borderStyle: "solid",
+		paddingInline: "1rem",
+		paddingBlock: "0.5rem",
+		fontSize: "0.875rem",
+		lineHeight: "1.25rem",
+	},
+	warn: {
+		borderColor: colors.warnBorder,
+		backgroundColor: colors.warnSurface,
+		color: colors.warnText,
+	},
+	critical: {
+		borderColor: colors.dangerBorder,
+		backgroundColor: colors.dangerSurface,
+		color: colors.dangerText,
+	},
+});
 
 function Banner({ tone, children }: { tone: "warn" | "critical"; children: React.ReactNode }) {
-	const classes =
-		tone === "critical"
-			? "border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-200"
-			: "border-amber-300 bg-amber-50 text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-200";
 	return (
-		<p role="alert" className={`rounded border px-4 py-2 text-sm ${classes}`}>
+		<p role="alert" {...stylex.props(styles.banner, tone === "critical" ? styles.critical : styles.warn)}>
 			{children}
 		</p>
 	);
@@ -39,5 +64,5 @@ export default function HealthBanners({ health }: { health: Health }) {
 		);
 	}
 	if (banners.length === 0) return null;
-	return <div className="space-y-2">{banners}</div>;
+	return <div {...stylex.props(styles.stack)}>{banners}</div>;
 }

web/src/ui/tokens.stylex.ts

@@ -31,6 +31,15 @@ export const colors = stylex.defineVars({
 	primaryText: { default: "#fff", [DARK]: "#fff" },
 	/** Primary as foreground: lightened in dark so it clears the ground. */
 	primaryOnSurface: { default: "oklch(54.6% 0.245 262.881)", [DARK]: "oklch(70.7% 0.165 254.624)" },
+	/**
+	 * Warnings: a degraded condition the operator can still act on, as against
+	 * `danger`, which is a failure or a destructive action. The amber ramp.
+	 */
+	warnSurface: { default: "oklch(98.7% 0.022 95.277)", [DARK]: "oklch(27.9% 0.077 45.635)" },
+	warnBorder: { default: "oklch(87.9% 0.169 91.605)", [DARK]: "oklch(47.3% 0.137 46.201)" },
+	/** A control's outline inside a warning banner, which the banner border would swallow. */
+	warnBorderStrong: { default: "oklch(82.8% 0.189 84.429)", [DARK]: "oklch(55.5% 0.163 48.998)" },
+	warnText: { default: "oklch(41.4% 0.112 45.904)", [DARK]: "oklch(96.2% 0.059 95.617)" },
 	danger: { default: "oklch(57.7% 0.245 27.325)", [DARK]: "oklch(70.4% 0.191 22.216)" },
 	dangerSurface: { default: "oklch(97.1% 0.013 17.38)", [DARK]: "oklch(25.8% 0.092 26.042)" },
 	dangerBorder: { default: "oklch(80.8% 0.114 19.571)", [DARK]: "oklch(44.4% 0.177 26.899)" },