From 1398ab672122d460cd5d74c63626b63acd69a2d6 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Wed, 29 Apr 2026 11:12:35 -0700
Subject: [PATCH] remove dead code

---
 .../Components/HeaderStatusPageControls.tsx   |   1 -
 .../StatusPage/Status/themes/BrowserFrame.tsx |  26 ++-
 .../Status/themes/StatusPageThemeProvider.tsx |  11 +-
 .../Status/themes/theme-overrides.css         | 156 ------------------
 .../Pages/StatusPage/Status/themes/tokens.ts  |  19 ---
 5 files changed, 12 insertions(+), 201 deletions(-)
 delete mode 100644 client/src/Pages/StatusPage/Status/themes/theme-overrides.css

diff --git a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
index 1371fa722..2cc2395bb 100644
--- a/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/HeaderStatusPageControls.tsx
@@ -37,7 +37,6 @@ export const HeaderStatusPageControls = ({
 			>
 				<Typography
 					variant="h1"
-					className="sp-heading"
 					overflow="hidden"
 					textOverflow="ellipsis"
 					sx={{
diff --git a/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx b/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx
index 55e62c440..b893aa85c 100644
--- a/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/BrowserFrame.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
+import { useStatusPageTheme } from "./StatusPageThemeProvider";
 
 interface Props {
 	url: string;
@@ -8,7 +8,7 @@ interface Props {
 }
 
 export const BrowserFrame = ({ url, children }: Props) => {
-	const theme = useTheme();
+	const { tokens } = useStatusPageTheme();
 
 	return (
 		<Box
@@ -19,9 +19,9 @@ export const BrowserFrame = ({ url, children }: Props) => {
 				flexDirection: "column",
 				borderRadius: "12px",
 				overflow: "hidden",
-				border: "1px solid var(--sp-border, " + theme.palette.divider + ")",
-				background: "var(--sp-surface, " + theme.palette.background.paper + ")",
-				color: "var(--sp-text, " + theme.palette.text.primary + ")",
+				border: `1px solid ${tokens.border}`,
+				background: tokens.surface,
+				color: tokens.text,
 			}}
 		>
 			<Box
@@ -30,11 +30,8 @@ export const BrowserFrame = ({ url, children }: Props) => {
 					alignItems: "center",
 					gap: 1.25,
 					padding: "10px 14px",
-					background:
-						"var(--sp-bg, " +
-						(theme.palette.mode === "dark" ? "#1a1a1a" : "#f1f2f4") +
-						")",
-					borderBottom: "1px solid var(--sp-border, " + theme.palette.divider + ")",
+					background: tokens.bg,
+					borderBottom: `1px solid ${tokens.border}`,
 				}}
 			>
 				<Box sx={{ display: "flex", gap: 0.75 }}>
@@ -54,14 +51,11 @@ export const BrowserFrame = ({ url, children }: Props) => {
 						padding: "4px 12px",
 						marginLeft: 2,
 						borderRadius: "6px",
-						background:
-							"var(--sp-surface, " +
-							(theme.palette.mode === "dark" ? "#2a2a2a" : "#ffffff") +
-							")",
-						border: "1px solid var(--sp-border, " + theme.palette.divider + ")",
+						background: tokens.surface,
+						border: `1px solid ${tokens.border}`,
 						fontFamily: "ui-monospace, Menlo, monospace",
 						fontSize: 12,
-						color: "var(--sp-text-muted, " + theme.palette.text.secondary + ")",
+						color: tokens.textMuted,
 						overflow: "hidden",
 						textOverflow: "ellipsis",
 						whiteSpace: "nowrap",
diff --git a/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx b/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx
index 416ee3293..2b10b0d9a 100644
--- a/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx
+++ b/client/src/Pages/StatusPage/Status/themes/StatusPageThemeProvider.tsx
@@ -13,8 +13,7 @@ import {
 	type StatusPageTheme,
 	type StatusPageThemeMode,
 } from "@/Types/StatusPage";
-import { themeTokens, toCssVars, type StatusPageThemeTokens } from "./tokens";
-import "./theme-overrides.css";
+import { themeTokens, type StatusPageThemeTokens } from "./tokens";
 
 type ResolvedMode = "light" | "dark";
 
@@ -107,8 +106,6 @@ export const StatusPageThemeProvider = ({
 		resolvedThemeMode === "auto" ? systemMode : resolvedThemeMode;
 	const tokens = themeTokens[resolvedTheme][resolvedMode];
 
-	const style = useMemo(() => toCssVars(tokens) as React.CSSProperties, [tokens]);
-
 	const value = useMemo(
 		() => ({ theme: resolvedTheme, mode: resolvedMode, tokens }),
 		[resolvedTheme, resolvedMode, tokens]
@@ -117,14 +114,10 @@ export const StatusPageThemeProvider = ({
 	return (
 		<StatusPageThemeContext.Provider value={value}>
 			<div
-				data-status-theme={resolvedTheme}
-				data-status-mode={resolvedMode}
-				data-status-transparent={transparent ? "" : undefined}
 				style={
 					transparent
-						? (style as React.CSSProperties)
+						? undefined
 						: {
-								...style,
 								background: tokens.bg,
 								minHeight: "100vh",
 							}
diff --git a/client/src/Pages/StatusPage/Status/themes/theme-overrides.css b/client/src/Pages/StatusPage/Status/themes/theme-overrides.css
deleted file mode 100644
index b66257d18..000000000
--- a/client/src/Pages/StatusPage/Status/themes/theme-overrides.css
+++ /dev/null
@@ -1,156 +0,0 @@
-/*
- * Scoped styling for the public status page themes.
- * Every selector is prefixed with [data-status-theme="..."] so these styles
- * only apply inside the StatusPageThemeProvider subtree.
- *
- * Colour tokens come from CSS custom properties set by the provider
- * (see tokens.ts → toCssVars). This file adds structural and surface rules
- * that a plain token swap can't express.
- */
-
-/* --- shared: push tokens onto MUI surfaces inside the themed tree --- */
-[data-status-theme] {
-	color: var(--sp-text);
-}
-
-[data-status-theme] .sp-card,
-[data-status-theme] .MuiBox-root.sp-card {
-	background-color: var(--sp-surface) !important;
-	border-color: var(--sp-border) !important;
-	border-radius: var(--sp-radius) !important;
-	color: var(--sp-text);
-}
-
-[data-status-theme] .sp-heading {
-	color: var(--sp-text);
-}
-
-[data-status-theme] .sp-badge {
-	background-color: var(--sp-up-soft) !important;
-	color: var(--sp-up) !important;
-	border-radius: 999px;
-	padding: 2px 10px;
-	font-weight: 600;
-	letter-spacing: 0.04em;
-}
-
-/* Status bar / hero */
-[data-status-theme] .sp-hero {
-	border-radius: var(--sp-radius);
-}
-
-/* --- refined: soft shadow, small accent on card --- */
-[data-status-theme="refined"] .sp-card {
-	box-shadow:
-		0 1px 2px rgba(10, 16, 32, 0.06),
-		0 6px 18px rgba(10, 16, 32, 0.08) !important;
-}
-[data-status-theme="refined"] .sp-hero-title {
-	font-weight: 600;
-	letter-spacing: -0.01em;
-}
-
-/* --- modern: stronger shadow, larger radius, pulse dot + staggered fade --- */
-[data-status-theme="modern"] .sp-card {
-	box-shadow:
-		0 2px 4px rgba(16, 24, 40, 0.04),
-		0 12px 32px rgba(16, 24, 40, 0.06) !important;
-	border-radius: 16px !important;
-	opacity: 0;
-	transform: translateY(8px);
-	animation: sp-card-fadein 0.5s forwards;
-}
-[data-status-theme="modern"] .sp-card:nth-of-type(1) {
-	animation-delay: 0.05s;
-}
-[data-status-theme="modern"] .sp-card:nth-of-type(2) {
-	animation-delay: 0.1s;
-}
-[data-status-theme="modern"] .sp-card:nth-of-type(3) {
-	animation-delay: 0.15s;
-}
-[data-status-theme="modern"] .sp-card:nth-of-type(4) {
-	animation-delay: 0.2s;
-}
-[data-status-theme="modern"] .sp-card:nth-of-type(5) {
-	animation-delay: 0.25s;
-}
-[data-status-theme="modern"] .sp-card:nth-of-type(n + 6) {
-	animation-delay: 0.3s;
-}
-@keyframes sp-card-fadein {
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-[data-status-theme="modern"] .sp-hero-title {
-	font-size: 22px;
-	font-weight: 700;
-	letter-spacing: -0.02em;
-}
-
-/* --- bold: large type, conic-gradient hero accent when no logo --- */
-[data-status-theme="bold"] .sp-hero {
-	background:
-		linear-gradient(135deg, var(--sp-up-soft), transparent 60%), var(--sp-surface) !important;
-	border: 1px solid var(--sp-border) !important;
-}
-[data-status-theme="bold"] .sp-hero-title {
-	font-size: 32px;
-	font-weight: 800;
-	letter-spacing: -0.02em;
-	line-height: 1.1;
-	color: var(--sp-text) !important;
-}
-[data-status-theme="bold"] .sp-card {
-	border-radius: 18px !important;
-	border: 1px solid var(--sp-border) !important;
-}
-
-/* --- editorial: serif headings, hairline dividers instead of cards --- */
-[data-status-theme="editorial"] .sp-heading {
-	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
-	letter-spacing: -0.01em;
-}
-[data-status-theme="editorial"] .sp-card {
-	background-color: transparent !important;
-	border: 0 !important;
-	border-bottom: 1px solid var(--sp-border) !important;
-	border-radius: 0 !important;
-	box-shadow: none !important;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-}
-[data-status-theme="editorial"] .sp-card:last-of-type {
-	border-bottom: 0 !important;
-}
-[data-status-theme="editorial"] .sp-hero {
-	background: transparent !important;
-	color: var(--sp-text) !important;
-	border-bottom: 2px solid var(--sp-text) !important;
-	border-radius: 0 !important;
-	box-shadow: none !important;
-}
-[data-status-theme="editorial"] .sp-hero-title {
-	font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
-	font-weight: 700;
-}
-[data-status-theme="editorial"] .sp-badge {
-	background-color: transparent !important;
-	color: var(--sp-text-muted) !important;
-	border: 1px solid var(--sp-border) !important;
-	border-radius: 0 !important;
-	text-transform: uppercase;
-	font-size: 10px;
-	letter-spacing: 0.12em;
-}
-
-/* Reduce motion */
-@media (prefers-reduced-motion: reduce) {
-	[data-status-theme] .sp-card {
-		animation: none;
-		opacity: 1;
-		transform: none;
-	}
-}
diff --git a/client/src/Pages/StatusPage/Status/themes/tokens.ts b/client/src/Pages/StatusPage/Status/themes/tokens.ts
index 8b0517836..f84b6f100 100644
--- a/client/src/Pages/StatusPage/Status/themes/tokens.ts
+++ b/client/src/Pages/StatusPage/Status/themes/tokens.ts
@@ -197,22 +197,3 @@ export const themeTokens: Record<StatusPageTheme, ThemeVariants> = {
 	bold,
 	editorial,
 };
-
-export const toCssVars = (tokens: StatusPageThemeTokens): Record<string, string> => ({
-	"--sp-bg": tokens.bg,
-	"--sp-surface": tokens.surface,
-	"--sp-border": tokens.border,
-	"--sp-text": tokens.text,
-	"--sp-text-muted": tokens.textMuted,
-	"--sp-up": tokens.up,
-	"--sp-up-strong": tokens.upStrong,
-	"--sp-up-soft": tokens.upSoft,
-	"--sp-degraded": tokens.degraded,
-	"--sp-degraded-soft": tokens.degradedSoft,
-	"--sp-down": tokens.down,
-	"--sp-down-soft": tokens.downSoft,
-	"--sp-warn": tokens.warn,
-	"--sp-warn-soft": tokens.warnSoft,
-	"--sp-radius": tokens.radius,
-	...(tokens.chartBarRadius ? { "--sp-chart-bar-radius": tokens.chartBarRadius } : {}),
-});