[N/A] Dynamic Fluid Font Sizes (#193)

* [N/A] Dynamic fluid font sizes

* [N/A] Added a comment

Author: bd-viget

wp-content/themes/wp-starter/src/styles/tailwind/inc/font-calculations.css

@@ -0,0 +1,17 @@
+:root {
+	/* Viewport breakpoints (pulled from font-sizes config) */
+	--fluid-bp-min: var(--cfg-fluid-bp-min);
+	--fluid-bp-max: var(--cfg-fluid-bp-max);
+
+	/* Linear interpolation factor between 0–1 */
+	/* Using clamp to ensure t stays between 0 and 1 */
+	--fluid-t: clamp(0, calc((100vw - (var(--fluid-bp-min) * 1px)) / ((var(--fluid-bp-max) - var(--fluid-bp-min)) * 1px)), 1);
+
+	/* Computed fluid tokens */
+	--fluid-text-sm: clamp(var(--fs-sm-min), calc(var(--fs-sm-min) + (var(--fs-sm-max) - var(--fs-sm-min)) * var(--fluid-t)), var(--fs-sm-max));
+	--fluid-text-base: clamp(var(--fs-base-min), calc(var(--fs-base-min) + (var(--fs-base-max) - var(--fs-base-min)) * var(--fluid-t)), var(--fs-base-max));
+	--fluid-text-md: clamp(var(--fs-md-min), calc(var(--fs-md-min) + (var(--fs-md-max) - var(--fs-md-min)) * var(--fluid-t)), var(--fs-md-max));
+	--fluid-text-lg: clamp(var(--fs-lg-min), calc(var(--fs-lg-min) + (var(--fs-lg-max) - var(--fs-lg-min)) * var(--fluid-t)), var(--fs-lg-max));
+	--fluid-text-xl: clamp(var(--fs-xl-min), calc(var(--fs-xl-min) + (var(--fs-xl-max) - var(--fs-xl-min)) * var(--fluid-t)), var(--fs-xl-max));
+	--fluid-text-2xl: clamp(var(--fs-2xl-min), calc(var(--fs-2xl-min) + (var(--fs-2xl-max) - var(--fs-2xl-min)) * var(--fluid-t)), var(--fs-2xl-max));
+}

wp-content/themes/wp-starter/src/styles/tailwind/inc/font-families.css

@@ -0,0 +1,4 @@
+:root {
+	--cfg-font-body: var(--wp--preset--font-family--body);
+	--cfg-font-heading: var(--wp--preset--font-family--heading);
+}

wp-content/themes/wp-starter/src/styles/tailwind/inc/font-sizes.css

@@ -0,0 +1,46 @@
+:root {
+	/* ===========================================================
+		VIEWPORT BREAKPOINTS
+	=========================================================== */
+	/* Unitless numbers for math */
+	--cfg-fluid-bp-min: 375; /* smallest viewport in px */
+
+	/* Fallback to 1200px if WP var isn't set */
+	--cfg-fluid-bp-max: calc(var(--wp--style--global--content-size,1200px)/1px);
+
+	/* ===========================================================
+		STRICT FONT SIZES
+		These font sizes should also be mirrored in
+		theme-json/settings/typography.js#fontSizes.
+	=========================================================== */
+	--cfg-text-zero: 0;
+	--cfg-text-2xs: 0.5rem; /* 8px */
+	--cfg-text-xs: 0.625rem; /* 10px */
+
+	/* ===========================================================
+		FLUID FONT SIZE RANGES
+	=========================================================== */
+	/* sm: 12px / 14px */
+	--fs-sm-min: 0.75rem;
+	--fs-sm-max: 0.875rem;
+
+	/* base: 15px / 16px */
+	--fs-base-min: 0.9375rem;
+	--fs-base-max: 1rem;
+
+	/* md: 18px / 24px */
+	--fs-md-min: 1.125rem;
+	--fs-md-max: 1.5rem;
+
+	/* lg: 24px / 32px */
+	--fs-lg-min: 1.5rem;
+	--fs-lg-max: 2rem;
+
+	/* xl: 32px / 48px */
+	--fs-xl-min: 2rem;
+	--fs-xl-max: 3rem;
+
+	/* 2xl: 48px / 64px */
+	--fs-2xl-min: 3rem;
+	--fs-2xl-max: 4rem;
+}

wp-content/themes/wp-starter/src/styles/tailwind/typography.css

@@ -1,17 +1,22 @@
+@import './inc/font-families.css';
+@import './inc/font-sizes.css';
+@import './inc/font-calculations.css';
+
 @theme {
 	/* Font Families */
-	--font-sans: var(--wp--preset--font-family--body);
-	--font-body: var(--wp--preset--font-family--body);
-	--font-heading: var(--wp--preset--font-family--heading);
+	--font-sans: var(--cfg-font-body);
+	--font-body: var(--cfg-font-body);
+	--font-heading: var(--cfg-font-heading);
 
-	/* Fluid Font Sizes */
-	--text-zero: 0;
-	--text-2xs: 0.5rem; /* 8px */
-	--text-xs: 0.625rem; /* 10px */
-	--text-sm: clamp(0.75rem, 2vw + 0.1rem, 0.875rem); /* 12px / 14px */
-	--text-base: clamp(0.9375rem, 2vw + 0.1rem, 1rem); /* 15px / 16px */
-	--text-md: clamp(1.125rem, 3vw + 0.1rem, 1.5rem); /* 18px / 24px */
-	--text-lg: clamp(1.5rem, 3vw + 0.5rem, 2rem); /* 24px / 32px */
-	--text-xl: clamp(2rem, 3vw + 1rem, 3rem); /* 32px / 48px */
-	--text-2xl: clamp(3rem, 3vw + 2rem, 4rem); /* 48px / 64px */
+	/* Font Sizes */
+	--text-zero: var(--cfg-text-zero);
+	--text-2xs: var(--cfg-text-2xs);
+	--text-xs: var(--cfg-text-xs);
+	--text-sm: var(--fluid-text-sm);
+	--text-base: var(--fluid-text-base);
+	--text-md: var(--fluid-text-md);
+	--text-lg: var(--fluid-text-lg);
+	--text-xl: var(--fluid-text-xl);
+	--text-2xl: var(--fluid-text-2xl);
+	--text-huge: var(--fluid-text-huge);
 }