fix: resolve heading sizing (#21914)

This pull-request addresses heading sizing inline with Figma. This means
that our headings are all uniformly `font-weight` and `font-size`.
Furthermore, we've dropped the `font-size` of the descriptions below the
headings.

### Comparison

| Old | New |
| --- | --- |
| <img width="474" height="290" alt="OLD_HEADING_PAGE"
src="https://github.com/user-attachments/assets/d6f2ca0e-d1ea-45a2-ad8f-634ecf10c722"
/> | <img width="474" height="290" alt="NEW_HEADING_PAGE"
src="https://github.com/user-attachments/assets/3a44963e-1808-4ad6-9b13-601c4ef11510"
/> |

This one is harder to see, but its mild spacing resolution 🙂 

<img width="474" height="290" alt="COMPARISON_HEADING_SETTING"
src="https://github.com/user-attachments/assets/ed387f97-90b3-4a6b-92ab-63f0b7f3eb39"
/>

site/src/components/PageHeader/PageHeader.tsx

@@ -1,5 +1,5 @@
 import type { FC, PropsWithChildren, ReactNode } from "react";
-import { Stack } from "../Stack/Stack";
+import { cn } from "utils/cn";
 
 interface PageHeaderProps {
 	actions?: ReactNode;
@@ -14,36 +14,18 @@ export const PageHeader: FC<PageHeaderProps> = ({
 }) => {
 	return (
 		<header
-			className={className}
-			css={(theme) => ({
-				display: "flex",
-				alignItems: "center",
-				paddingTop: 48,
-				paddingBottom: 48,
-				gap: 32,
-
-				[theme.breakpoints.down("md")]: {
-					flexDirection: "column",
-					alignItems: "flex-start",
-				},
-			})}
+			className={cn(
+				"flex items-start flex-col md:flex-row md:items-center",
+				"py-12 gap-8",
+				className,
+			)}
 			data-testid="header"
 		>
-			<hgroup>{children}</hgroup>
+			<hgroup className="flex flex-col gap-2">{children}</hgroup>
 			{actions && (
-				<Stack
-					direction="row"
-					css={(theme) => ({
-						marginLeft: "auto",
-
-						[theme.breakpoints.down("md")]: {
-							marginLeft: "initial",
-							width: "100%",
-						},
-					})}
-				>
+				<div className="flex ml-[initial] md:ml-auto w-full md:w-auto">
 					{actions}
-				</Stack>
+				</div>
 			)}
 		</header>
 	);
@@ -51,16 +33,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
 
 export const PageHeaderTitle: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<h1
-			css={{
-				fontSize: 24,
-				fontWeight: 400,
-				margin: 0,
-				display: "flex",
-				alignItems: "center",
-				lineHeight: "140%",
-			}}
-		>
+		<h1 className="text-3xl font-semibold m-0 flex items-center leading-snug">
 			{children}
 		</h1>
 	);
@@ -73,20 +46,9 @@ interface PageHeaderSubtitleProps {
 
 export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 	children,
-	condensed,
 }) => {
 	return (
-		<h2
-			css={(theme) => ({
-				fontSize: 16,
-				color: theme.palette.text.secondary,
-				fontWeight: 400,
-				display: "block",
-				margin: 0,
-				marginTop: condensed ? 4 : 8,
-				lineHeight: "140%",
-			})}
-		>
+		<h2 className="text-sm text-content-secondary font-normal block m-0 leading-snug">
 			{children}
 		</h2>
 	);
@@ -94,15 +56,7 @@ export const PageHeaderSubtitle: FC<PageHeaderSubtitleProps> = ({
 
 export const PageHeaderCaption: FC<PropsWithChildren> = ({ children }) => {
 	return (
-		<span
-			css={(theme) => ({
-				fontSize: 12,
-				color: theme.palette.text.secondary,
-				fontWeight: 600,
-				textTransform: "uppercase",
-				letterSpacing: "0.1em",
-			})}
-		>
+		<span className="text-sm text-content-secondary font-medium uppercase tracking-widest">
 			{children}
 		</span>
 	);

site/src/components/SettingsHeader/SettingsHeader.tsx

@@ -24,7 +24,9 @@ export const SettingsHeader: FC<SettingsHeaderProps> = ({
 			 * we have a predictable max width for the header + description by
 			 * default.
 			 */}
-			<div className={cn("text-sm max-w-prose", className)}>{children}</div>
+			<div className={cn("text-sm max-w-prose flex flex-col gap-2", className)}>
+				{children}
+			</div>
 			{actions}
 		</hgroup>
 	);
@@ -48,7 +50,7 @@ export const SettingsHeaderDocsLink: FC<SettingsHeaderDocsLinkProps> = ({
 	);
 };
 
-const titleVariants = cva("m-0 pb-1 flex items-center gap-2 leading-tight", {
+const titleVariants = cva("m-0 flex items-center gap-2 leading-tight", {
 	variants: {
 		hierarchy: {
 			primary: "text-3xl font-bold",
@@ -100,7 +102,12 @@ export const SettingsHeaderDescription: FC<SettingsHeaderDescriptionProps> = ({
 	className,
 }) => {
 	return (
-		<p className={cn("m-0 text-content-secondary leading-relaxed", className)}>
+		<p
+			className={cn(
+				"m-0 text-content-secondary font-medium leading-normal",
+				className,
+			)}
+		>
 			{children}
 		</p>
 	);