Fix bracket deadline text color, standardize approach

app/components/match-page/MatchBanner.module.css

@@ -30,11 +30,7 @@
 			rgba(0, 0, 0, 0.6)
 		),
 		var(--stage-img);
-	color: var(--color-text);
-
-	:global(html.light) & {
-		color: var(--color-text-inverse);
-	}
+	color: var(--color-text-on-dark);
 }
 
 .info {

app/features/calendar/components/Tags.module.css

@@ -29,7 +29,7 @@
 }
 
 .tag {
-	color: var(--color-text-inverse);
+	color: var(--color-text-on-light);
 }
 
 .overflowTag {
@@ -37,20 +37,12 @@
 	color: var(--color-text-high);
 }
 
-:global(html.light) .tag {
-	color: var(--color-text);
-}
-
 .tagDeleteButton {
 	margin-left: auto;
 
 	& > svg {
 		width: 0.85rem !important;
-		color: var(--color-text-inverse);
+		color: var(--color-text-on-light);
 		margin-inline: var(--s-1) 0 !important;
 	}
 }
-
-:global(html.light) .tagDeleteButton > svg {
-	color: var(--color-text);
-}

app/features/plus-voting/routes/plus.voting.module.css

@@ -38,7 +38,7 @@
 	justify-content: center;
 	border-radius: var(--radius-box);
 	background-color: var(--color-success-high);
-	color: var(--color-text);
+	color: var(--color-text-inverse);
 	font-size: var(--font-sm);
 	font-weight: var(--weight-semi);
 	gap: var(--s-2);

app/features/tier-list-maker/components/TierRow.module.css

@@ -26,17 +26,13 @@
 }
 
 .tierName {
-	color: var(--color-text-inverse);
+	color: var(--color-text-on-light);
 	line-height: 1.2;
 	max-width: 90px;
 	overflow-wrap: break-word;
 	word-wrap: break-word;
 }
 
-:global(html.light) .tierName {
-	color: var(--color-text);
-}
-
 .popupContent {
 	display: flex;
 	flex-direction: column;

app/features/tournament-bracket/components/Bracket/Match.module.css

@@ -65,10 +65,12 @@
 
 .matchTimerWarning {
 	background-color: var(--color-warning);
+	color: var(--color-text-on-light);
 }
 
 .matchTimerError {
 	background-color: var(--color-error);
+	color: var(--color-text-on-status);
 }
 
 .match {

app/features/tournament-bracket/components/Bracket/RoundHeader.module.css

@@ -16,3 +16,15 @@
 	color: var(--color-text-high);
 	font-weight: var(--weight-semi);
 }
+
+.roundTimer {
+	color: var(--color-text);
+}
+
+.roundTimerWarning {
+	color: var(--color-warning-high);
+}
+
+.roundTimerError {
+	color: var(--color-error-high);
+}

app/features/tournament-bracket/components/Bracket/RoundHeader.tsx

@@ -131,14 +131,16 @@ function RoundTimer({
 
 	const displayText = elapsedMinutes >= 60 ? "1h+" : `${elapsedMinutes}m`;
 
-	const statusColor =
-		worstStatus === "error"
-			? "var(--color-error)"
-			: worstStatus === "warning"
-				? "var(--color-warning)"
-				: "var(--color-text)";
-
-	return <div style={{ color: statusColor }}>{displayText}</div>;
+	return (
+		<div
+			className={clsx(styles.roundTimer, {
+				[styles.roundTimerWarning]: worstStatus === "warning",
+				[styles.roundTimerError]: worstStatus === "error",
+			})}
+		>
+			{displayText}
+		</div>
+	);
 }
 
 function useLeagueRoundStartDate(bracketIdx: number, roundId: number) {

app/styles/vars.css

@@ -184,6 +184,8 @@ html,
 	--color-text: var(--color-base-0);
 	--color-text-high: var(--color-base-3);
 	--color-text-inverse: var(--color-base-7);
+	--color-text-on-light: oklch(17% var(--_base-c-7) var(--_base-h));
+	--color-text-on-dark: oklch(100% var(--_base-c-0) var(--_base-h));
 
 	--color-bg: var(--color-base-7);
 	--color-bg-high: var(--color-base-6);