CIAB: Add configurable font styles for partner branding

Extends the partner branding system to support custom font styles on login/signup pages. Partners can now specify a fontStyle in their config to override the default heading font.

Author: valterlorran

client/layout/logged-out.jsx

@@ -30,6 +30,7 @@ import {
 	isAndroidOAuth2Client,
 	isIosOAuth2Client,
 } from 'calypso/lib/oauth2-clients';
+import { usePartnerBranding } from 'calypso/lib/partner-branding';
 import { createAccountUrl } from 'calypso/lib/paths';
 import isReaderTagEmbedPage from 'calypso/lib/reader/is-reader-tag-embed-page';
 import { getOnboardingUrl as getPatternLibraryOnboardingUrl } from 'calypso/my-sites/patterns/paths';
@@ -90,6 +91,7 @@ const LayoutLoggedOut = ( {
 	const isLoggedIn = useSelector( isUserLoggedIn );
 	const currentRoute = useSelector( getCurrentRoute );
 	const loggedInAction = useSelector( getLastActionRequiresLogin );
+	const { ciabConfig } = usePartnerBranding();
 
 	const stepContainerV2Context = useMemo( () => {
 		// Detect CIAB dashboard for Woo branding.
@@ -166,6 +168,7 @@ const LayoutLoggedOut = ( {
 		'is-wpcom-magic-login': isWpcomMagicLogin,
 		'is-woo-passwordless': isWoo,
 		'is-blaze-pro': isBlazePro,
+		'is-ciab-font-system': ciabConfig?.fontStyle === 'system',
 		'two-factor-auth-enabled': twoFactorEnabled,
 		'is-woo-com-oauth': isWooOAuth2Client( oauth2Client ),
 		woo: isWoo,

client/lib/partner-branding.tsx

@@ -33,6 +33,8 @@ export interface CiabPartnerConfig {
 	compactLogo?: LogoConfig;
 	/** SSO providers to show (in order). Others will be hidden. */
 	ssoProviders: string[];
+	/** Font style identifier for login/signup headings */
+	fontStyle?: 'system';
 }
 
 /**
@@ -61,6 +63,7 @@ export const CIAB_PARTNERS: Record< string, CiabPartnerConfig > = {
 			height: 24,
 		},
 		ssoProviders: [ 'paypal', 'google', 'apple', 'magic-login' ],
+		fontStyle: 'system',
 	},
 };
 

client/login/wp-login/style.scss

@@ -56,6 +56,14 @@ body.is-section-login {
 		}
 	}
 	/* End: Jetpack Cloud font styles for login page */
+
+	/* Start: CIAB partner branding font styles for login page */
+	&.is-ciab-font-system {
+		.wp-login__one-login-layout-heading-text {
+			font-family: $default-font;
+		}
+	}
+	/* End: CIAB partner branding font styles for login page */
 }
 
 .wp-login__main {

packages/typography/styles/variables.scss

@@ -14,6 +14,12 @@ $sans-rtl: Tahoma, $sans;
 $serif: "Noto Serif", Georgia, "Times New Roman", Times, serif;
 $brand-serif: "Recoleta", $serif;
 
+// CSS custom properties for font families (used for partner branding)
+:root {
+	--font-family-system: #{$sans};
+	--font-family-brand-serif: #{$brand-serif};
+}
+
 // ======================================================================
 // Rem function
 //