From ab9e722caa9872378c9078e5b6c610eaa4aeed9e Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Mon, 27 Apr 2026 18:52:53 -0400 Subject: [PATCH] refactor(status-page): consolidate font stacks and pill recipes Second /simplify pass picked up: - pillHardware in refined and modern hardcoded blue hex codes (#60a5fa, #1d4ed8, #2563eb) while bold and editorial already used the green token system. Switch refined and modern to tokens.up / tokens.upSoft so all four themes are consistent and the public status page no longer leaks blue - pill and pillHardware in refined and modern duplicated the shared 6 typography fields (fontSize, textTransform, letterSpacing, padding, borderRadius, fontWeight). Extract a pillBase constant per theme and spread, leaving only the colour deltas on each - The 4 themes each defined their own font-stack constants. Consolidate them in themes/shared/fontStacks.ts (SANS_STACK, BOLD_SANS_STACK, SERIF_STACK, EDITORIAL_SECONDARY_SANS_STACK, MONO_STACK) and import. Drops 6 duplicated literal stacks - modern dark-mode card hover used the light-mode shadow as a fallback. Add darkShadowHover and pick it up via cardHoverShadow when isDark - refined and editorial styles factories silence their unused isDark parameter with `void isDark` instead of an underscore prefix; bold and modern still use it actively --- .../StatusPage/Status/themes/bold/styles.ts | 8 ++-- .../Status/themes/editorial/styles.ts | 32 ++++++++------- .../StatusPage/Status/themes/modern/styles.ts | 39 +++++++++--------- .../Status/themes/refined/styles.ts | 40 +++++++++---------- .../Status/themes/shared/fontStacks.ts | 11 +++++ 5 files changed, 68 insertions(+), 62 deletions(-) create mode 100644 client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index 39c9864a8..ac2eac9c0 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -1,6 +1,7 @@ import type { SxProps, Theme } from "@mui/material/styles"; import type { StatusPageThemeTokens } from "../tokens"; import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus"; +import { BOLD_SANS_STACK, MONO_STACK } from "../shared/fontStacks"; export type BoldHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type BoldBarKind = "up" | "down" | "empty"; @@ -45,9 +46,6 @@ export interface BoldStyles { footer: SxProps; } -const sansFontStack = - 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif'; - export const boldStyles = ( tokens: StatusPageThemeTokens, isDark: boolean @@ -92,7 +90,7 @@ export const boldStyles = ( width: "100%", mx: "auto", p: "56px 24px 96px", - fontFamily: sansFontStack, + fontFamily: BOLD_SANS_STACK, fontSize: 14, lineHeight: 1.55, color: tokens.text, @@ -266,7 +264,7 @@ export const boldStyles = ( monitorUrl: { fontSize: 12, color: tokens.textMuted, - fontFamily: "ui-monospace, Menlo, monospace", + fontFamily: MONO_STACK, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index eea8a88ff..233852875 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -1,6 +1,11 @@ import type { SxProps, Theme } from "@mui/material/styles"; import type { StatusPageThemeTokens } from "../tokens"; import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus"; +import { + EDITORIAL_SECONDARY_SANS_STACK, + MONO_STACK, + SERIF_STACK, +} from "../shared/fontStacks"; export type EditorialHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type EditorialBarKind = "up" | "down" | "empty"; @@ -45,9 +50,6 @@ export interface EditorialStyles { footer: SxProps; } -const serifStack = 'Georgia, "Iowan Old Style", "Palatino Linotype", serif'; -const sansStack = '-apple-system, "Helvetica Neue", Arial, sans-serif'; - export const editorialStyles = ( tokens: StatusPageThemeTokens, isDark: boolean @@ -80,7 +82,7 @@ export const editorialStyles = ( width: "100%", mx: "auto", p: "64px 24px 96px", - fontFamily: serifStack, + fontFamily: SERIF_STACK, fontSize: 15, lineHeight: 1.6, color: tokens.text, @@ -104,7 +106,7 @@ export const editorialStyles = ( letterSpacing: "0.3em", fontWeight: 700, color: tokens.textMuted, - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, }, brandTitle: { mt: "6px", @@ -124,7 +126,7 @@ export const editorialStyles = ( letterSpacing: "-0.01em", lineHeight: 1.35, color: tokens.text, - fontFamily: serifStack, + fontFamily: SERIF_STACK, }, statusDot: (tone) => ({ display: "inline-block", @@ -136,7 +138,7 @@ export const editorialStyles = ( verticalAlign: "middle", }), dateline: { - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, fontSize: 11, textTransform: "uppercase", letterSpacing: "0.12em", @@ -149,7 +151,7 @@ export const editorialStyles = ( display: "flex", justifyContent: "flex-end", mb: "20px", - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, }, chartSwitch: { display: "inline-flex", @@ -201,7 +203,7 @@ export const editorialStyles = ( whiteSpace: "nowrap", }, monitorMeta: { - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, fontSize: 12, color: tokens.textMuted, mt: "6px", @@ -223,7 +225,7 @@ export const editorialStyles = ( color: tokens.up, }, monitorUrl: { - fontFamily: "ui-monospace, Menlo, monospace", + fontFamily: MONO_STACK, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", @@ -232,7 +234,7 @@ export const editorialStyles = ( }, badge: (tone) => ({ - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, fontSize: 10, fontWeight: 700, padding: "4px 10px", @@ -271,7 +273,7 @@ export const editorialStyles = ( height: `${heightPct}%`, }), chartStats: { - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, fontSize: 11, color: tokens.textMuted, fontVariantNumeric: "tabular-nums", @@ -284,7 +286,7 @@ export const editorialStyles = ( gridTemplateColumns: { xs: "1fr", md: "repeat(3, 1fr)" }, gap: "24px", mt: "20px", - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, }, infraEmpty: { mt: "20px", color: tokens.textMuted, fontSize: 13 }, gauge: {}, @@ -301,7 +303,7 @@ export const editorialStyles = ( letterSpacing: "-0.02em", mt: "4px", fontVariantNumeric: "tabular-nums", - fontFamily: serifStack, + fontFamily: SERIF_STACK, color: tokens.text, }, gaugeBar: { height: 2, background: tokens.border, mt: "10px" }, @@ -326,7 +328,7 @@ export const editorialStyles = ( mt: "56px", textTransform: "uppercase", letterSpacing: "0.2em", - fontFamily: sansStack, + fontFamily: EDITORIAL_SECONDARY_SANS_STACK, "& a": { color: tokens.text, textDecoration: "none", diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index e9fe9e0d3..ad7356451 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -2,6 +2,7 @@ import type { SxProps, Theme } from "@mui/material/styles"; import { keyframes } from "@mui/system"; import type { StatusPageThemeTokens } from "../tokens"; import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus"; +import { MONO_STACK, SANS_STACK } from "../shared/fontStacks"; export type ModernHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type ModernBarKind = "up" | "down" | "empty"; @@ -48,14 +49,21 @@ export interface ModernStyles { footer: SxProps; } -const sansFontStack = - '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif'; - const lightShadow = "0 2px 4px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.06)"; const darkShadow = "0 2px 6px rgba(0, 0, 0, 0.5), 0 20px 40px rgba(0, 0, 0, 0.4)"; const lightShadowHover = "0 4px 8px rgba(16, 24, 40, 0.05), 0 16px 40px rgba(16, 24, 40, 0.08)"; +const darkShadowHover = "0 4px 10px rgba(0, 0, 0, 0.55), 0 24px 48px rgba(0, 0, 0, 0.45)"; + +const pillBase = { + fontSize: 10, + textTransform: "uppercase" as const, + letterSpacing: "0.08em", + padding: "3px 9px", + borderRadius: "999px", + fontWeight: 600, +}; const pulseKeyframes = keyframes` 0% { transform: scale(1); opacity: 0.5; } @@ -71,6 +79,7 @@ export const modernStyles = ( isDark: boolean ): ModernStyles => { const cardShadow = isDark ? darkShadow : lightShadow; + const cardHoverShadow = isDark ? darkShadowHover : lightShadowHover; const heatCellBg: Record = { fast: `linear-gradient(180deg, ${tokens.up}, ${tokens.upStrong})`, @@ -99,7 +108,7 @@ export const modernStyles = ( width: "100%", mx: "auto", p: "56px 20px 80px", - fontFamily: sansFontStack, + fontFamily: SANS_STACK, fontSize: 14, lineHeight: 1.5, color: tokens.text, @@ -237,7 +246,7 @@ export const modernStyles = ( "&:nth-of-type(4)": { animationDelay: "0.2s" }, "&:nth-of-type(5)": { animationDelay: "0.25s" }, "&:nth-of-type(n+6)": { animationDelay: "0.3s" }, - "&:hover": { transform: "translateY(-2px)", boxShadow: lightShadowHover }, + "&:hover": { transform: "translateY(-2px)", boxShadow: cardHoverShadow }, "@media (prefers-reduced-motion: reduce)": { animation: "none", opacity: 1, @@ -269,29 +278,19 @@ export const modernStyles = ( flexWrap: "wrap", }, pill: { - fontSize: 10, - textTransform: "uppercase", - letterSpacing: "0.08em", + ...pillBase, color: tokens.textMuted, background: tokens.bg, - padding: "3px 9px", - borderRadius: "999px", - fontWeight: 600, }, pillHardware: { - fontSize: 10, - textTransform: "uppercase", - letterSpacing: "0.08em", - padding: "3px 9px", - borderRadius: "999px", - fontWeight: 600, - color: isDark ? "#60a5fa" : "#2563eb", - background: isDark ? "rgba(96, 165, 250, 0.15)" : "rgba(37, 99, 235, 0.1)", + ...pillBase, + color: tokens.up, + background: tokens.upSoft, }, monitorUrl: { fontSize: 12, color: tokens.textMuted, - fontFamily: "ui-monospace, Menlo, monospace", + fontFamily: MONO_STACK, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts index 0789efd87..34d82a171 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts @@ -1,6 +1,7 @@ import type { SxProps, Theme } from "@mui/material/styles"; import type { StatusPageThemeTokens } from "../tokens"; import { type OverallTone, toneColor, toneSoft } from "../shared/overallStatus"; +import { MONO_STACK, SANS_STACK } from "../shared/fontStacks"; export type RefinedHeatCell = "fast" | "med" | "slow" | "down" | "empty"; export type RefinedBarKind = "up" | "down" | "empty"; @@ -48,17 +49,24 @@ export interface RefinedStyles { footer: SxProps; } -const sansFontStack = - '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif'; - const cardShadow = "0 1px 2px rgba(10, 16, 32, 0.06), 0 6px 18px rgba(10, 16, 32, 0.08)"; const cardShadowHover = "0 2px 4px rgba(16, 24, 40, 0.06), 0 10px 24px rgba(16, 24, 40, 0.06)"; +const pillBase = { + fontSize: 10, + textTransform: "uppercase" as const, + letterSpacing: "0.08em", + padding: "2px 8px", + borderRadius: "999px", + fontWeight: 600, +}; + export const refinedStyles = ( tokens: StatusPageThemeTokens, isDark: boolean ): RefinedStyles => { + void isDark; const heatCellBg: Record = { fast: tokens.up, med: `color-mix(in srgb, ${tokens.up} 60%, #ffffff 40%)`, @@ -86,7 +94,7 @@ export const refinedStyles = ( width: "100%", mx: "auto", p: "48px 20px 80px", - fontFamily: sansFontStack, + fontFamily: SANS_STACK, fontSize: 14, lineHeight: 1.5, color: tokens.text, @@ -222,32 +230,20 @@ export const refinedStyles = ( flexWrap: "wrap", }, pill: { - fontSize: 10, - textTransform: "uppercase", - letterSpacing: "0.08em", + ...pillBase, color: tokens.textMuted, border: `1px solid ${tokens.border}`, - padding: "2px 8px", - borderRadius: "999px", - fontWeight: 600, }, pillHardware: { - fontSize: 10, - textTransform: "uppercase", - letterSpacing: "0.08em", - padding: "2px 8px", - borderRadius: "999px", - fontWeight: 600, - color: isDark ? "#60a5fa" : "#1d4ed8", - border: `1px solid ${ - isDark ? "rgba(96, 165, 250, 0.3)" : "rgba(29, 78, 216, 0.3)" - }`, - background: isDark ? "rgba(96, 165, 250, 0.1)" : "rgba(29, 78, 216, 0.06)", + ...pillBase, + color: tokens.up, + border: `1px solid ${tokens.border}`, + background: tokens.upSoft, }, monitorUrl: { fontSize: 12, color: tokens.textMuted, - fontFamily: "ui-monospace, Menlo, monospace", + fontFamily: MONO_STACK, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", diff --git a/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts b/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts new file mode 100644 index 000000000..2ad63fd07 --- /dev/null +++ b/client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts @@ -0,0 +1,11 @@ +export const SANS_STACK = + '-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif'; + +export const BOLD_SANS_STACK = `ui-sans-serif, ${SANS_STACK}`; + +export const SERIF_STACK = 'Georgia, "Iowan Old Style", "Palatino Linotype", serif'; + +export const EDITORIAL_SECONDARY_SANS_STACK = + '-apple-system, "Helvetica Neue", Arial, sans-serif'; + +export const MONO_STACK = "ui-monospace, Menlo, monospace";