TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(status-page): consolidate font stacks and pill recipes

Browse Source 
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
This commit is contained in:
gorkem-bwl committed 2026-04-27 18:52:53 -04:00
1 parent 4f8f2f1422
commit ab9e722caa
5 files changed
+68 -62
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Pages/StatusPage/Status/themes/bold/styles.ts
+3 -5
View File
@@ -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<Theme>;
}
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",
client/src/Pages/StatusPage/Status/themes/editorial/styles.ts
+17 -15
View File
@@ -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<Theme>;
}
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",
client/src/Pages/StatusPage/Status/themes/modern/styles.ts
+19 -20
View File
@@ -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<Theme>;
}
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<ModernHeatCell, string> = {
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",
client/src/Pages/StatusPage/Status/themes/refined/styles.ts
+18 -22
View File
@@ -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<Theme>;
}
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<RefinedHeatCell, string> = {
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",
client/src/Pages/StatusPage/Status/themes/shared/fontStacks.ts
+11
View File
@@ -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";