feat(typography): migration typo vers theme.json

CHANGELOG.md

@@ -1,3 +1,11 @@
+# 5.5.1
+
+- Typographie du socle dans les fragments `theme.json` (`fontSizes` fluid Gutenberg, `fontFamilies` + `fontFace`, `custom.lineHeight`)
+- Polices locales variable woff2 (latin) : Source Sans 3 / Fraunces à la place de Poppins / `@fontsource`
+- Mixins `heading` / `text` branchés sur les tokens SCSS générés (`$settings-font-size-*`, `$settings-font-family-*`, `$settings-custom-line-height-*`)
+- Suppression de l’échelle `--heading--*` / `--paragraph--*` dans `_variables-css.scss` sur ce socle
+- Les projets BFF antérieurs à `5.5.1` conservent leur pipeline typo SCSS ; ne pas migrer automatiquement
+
 # 5.5.0
 
 - Ajout du réglage `is_lcp` à `get_the_image()` (`fetchpriority` élevé, pas de lazy loading ; `decoding` en opt-in via les attributs)

README.md

@@ -160,6 +160,12 @@ Les fichiers de configuration se trouvent dans le dossier `config`.
 Vous trouverez le fichier de paramètres Webpack communs dans `webpack.common.js`. Pour le mode développement, éditez `webpack.dev.js` ; pour la production, `webpack.prod.js`.
 Les loaders sont dans `loaders.js` et les plugins Webpack dans `plugins.js`.
 
+### Typographie (`theme.json`)
+
+À partir de **BFF 5.5.1**, l’échelle typographique du socle (tailles fluid, familles, `fontFace`, line-heights) vit dans `src/theme-json/` (notamment `typography.json`). Le build régénère `theme.json` et `src/scss/01-abstract/_theme-json.scss` ; les mixins SCSS consomment les variables `$settings-*` générées.
+
+Ne pas éditer à la main les fichiers générés. Sur un projet issu d’un BFF antérieur à **5.5.1** qui garde encore la typo en SCSS / propriétés CSS custom, conserver ce pipeline — ne pas migrer vers les fragments typo uniquement parce que le socle upstream a changé.
+
 ## Comment utiliser BFF ?
 
 Après l’installation des dépendances, vous pouvez exécuter les commandes décrites ci-dessous.

config/webpack-theme-json-plugin.js

@@ -122,6 +122,31 @@ class WebpackThemeJsonPlugin {
 
 				return result
 			},
+			'settings-typography-fontSizes'(key, value) {
+				let result = ''
+
+				for (const fontSize of value) {
+					const cssSlug = toPresetCssSlug(fontSize.slug)
+					result += `${getVariableName(
+						'settings-font-size-' + fontSize.slug
+					)}: var(--wp--preset--font-size--${cssSlug});\n`
+				}
+
+				return result
+			},
+			'settings-typography-fontFamilies'(key, value) {
+				let result = ''
+				const families = []
+
+				for (const family of value) {
+					result += `${getVariableName('settings-font-family-' + family.slug)}: var(--wp--preset--font-family--${
+						family.slug
+					});\n`
+					families.push(`${formatMapKey(family.slug)}: ${getVariableName('settings-font-family-' + family.slug)}`)
+				}
+
+				return result + `$settings-font-families: (\n\t${families.join(',\n\t')}\n);\n`
+			},
 		}
 		// eslint-disable-next-line @wordpress/no-unused-vars-before-return
 		const taskNames = Object.keys(tasks)
@@ -141,6 +166,11 @@ class WebpackThemeJsonPlugin {
 			return `$${id.replace(/([A-Z])/g, '-$1').toLowerCase()}`
 		}
 
+		// Match WordPress preset CSS custom property segments (e.g. h1 -> h-1).
+		function toPresetCssSlug(slug) {
+			return String(slug).replace(/([a-zA-Z])(\d)/g, '$1-$2')
+		}
+
 		// Quote map keys so slugs like black/white are strings, not Sass color literals.
 		function formatMapKey(slug) {
 			return JSON.stringify(String(slug))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "beapi-frontend-framework",
-  "version": "5.5.0",
+  "version": "5.5.1",
   "author": "Be API",
   "repository": {
     "type": "git",
@@ -16,8 +16,6 @@
   },
   "license": "GPL-2.0",
   "dependencies": {
-    "@fontsource-utils/scss": "^0.2.4",
-    "@fontsource/poppins": "^5.3.0",
     "lazysizes": "^5.3.2",
     "oneloop.js": "^5.3.1",
     "swiper": "^14.3.0"
@@ -27,8 +25,8 @@
     "@wordpress/browserslist-config": "^6.53.0",
     "@wordpress/dependency-extraction-webpack-plugin": "^6.53.0",
     "@wordpress/dom-ready": "^3.58.0",
-    "@wordpress/i18n": "^4.58.0",
     "@wordpress/hooks": "^3.58.0",
+    "@wordpress/i18n": "^4.58.0",
     "@wordpress/stylelint-config": "^24.2.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^7.1.4",

src/scss/01-abstract/_variables.scss

@@ -71,17 +71,18 @@ $base-border-radius: 3px;
 // ----
 // Font Family
 // ----
-$font-family-primary: "Poppins", "Poppins-fallback", sans-serif;
+$font-family-primary: $settings-font-family-primary;
+$font-family-secondary: $settings-font-family-secondary;
 
 // ----
 // Font Size
 // ----
-$font-size-base: var(--paragraph--font-size-default);
-$font-size-sm: var(--paragraph--font-size-small);
-$font-size-lg: var(--paragraph--font-size-large);
-$font-size-xl: var(--paragraph--font-size-huge);
+$font-size-base: $settings-font-size-default;
+$font-size-sm: $settings-font-size-small;
+$font-size-lg: $settings-font-size-large;
+$font-size-xl: $settings-font-size-huge;
 
 // ----
 // Line Height
 // ----
-$line-height-base: var(--paragraph--line-height-default);
+$line-height-base: $settings-custom-line-height-default;

src/scss/02-tools/_m-heading.scss

@@ -1,4 +1,5 @@
 @use "../01-abstract/variables" as *;
+@use "../01-abstract/theme-json" as *;
 
 /**
  * Heading - Used in src/scss/06-blocks/core/_heading.scss
@@ -20,8 +21,8 @@
  *
  *      mixin :
  *      @if $name == h3 {
- *          font-size: var(--heading--font-size-h3);
- *          line-height: var(--heading--line-height-h3);
+ *          font-size: $settings-font-size-h3;
+ *          line-height: $settings-custom-line-height-h3;
  *
  *          @if $style == uppercase {
  *              text-transform: uppercase;
@@ -44,36 +45,41 @@
  */
 
 @mixin heading($name: h1, $style: default) {
-	font-family: $font-family-primary;
-	font-weight: 400;
+	font-family: $font-family-secondary;
 
 	@if $name == h1 {
-		font-size: var(--heading--font-size-h1);
-		line-height: var(--heading--line-height-h1);
+		font-size: $settings-font-size-h1;
+		font-weight: 500;
+		line-height: $settings-custom-line-height-h1;
 	}
 
 	@if $name == h2 {
-		font-size: var(--heading--font-size-h2);
-		line-height: var(--heading--line-height-h2);
+		font-size: $settings-font-size-h2;
+		font-weight: 500;
+		line-height: $settings-custom-line-height-h2;
 	}
 
 	@if $name == h3 {
-		font-size: var(--heading--font-size-h3);
-		line-height: var(--heading--line-height-h3);
+		font-size: $settings-font-size-h3;
+		font-weight: 500;
+		line-height: $settings-custom-line-height-h3;
 	}
 
 	@if $name == h4 {
-		font-size: var(--heading--font-size-h4);
-		line-height: var(--heading--line-height-h4);
+		font-size: $settings-font-size-h4;
+		font-weight: 500;
+		line-height: $settings-custom-line-height-h4;
 	}
 
 	@if $name == h5 {
-		font-size: var(--heading--font-size-h5);
-		line-height: var(--heading--line-height-h5);
+		font-size: $settings-font-size-h5;
+		font-weight: 500;
+		line-height: $settings-custom-line-height-h5;
 	}
 
 	@if $name == h6 {
-		font-size: var(--heading--font-size-h6);
-		line-height: var(--heading--line-height-h6);
+		font-size: $settings-font-size-h6;
+		font-weight: 500;
+		line-height: $settings-custom-line-height-h6;
 	}
 }

src/scss/02-tools/_m-text.scss

@@ -1,3 +1,6 @@
+@use "../01-abstract/variables" as *;
+@use "../01-abstract/theme-json" as *;
+
 /**
  * Text - Used in src/scss/06-blocks/core/_paragraph.scss and src/scss/03-base/_text.scss
  *
@@ -15,26 +18,26 @@
 
 @mixin text($name: default) {
 	@if $name == default {
-		font-size: var(--paragraph--font-size-default);
+		font-size: $settings-font-size-default;
 		font-weight: 400;
-		line-height: var(--paragraph--line-height-default);
+		line-height: $settings-custom-line-height-default;
 	}
 
 	@if $name == small {
-		font-size: var(--paragraph--font-size-small);
+		font-size: $settings-font-size-small;
 		font-weight: 400;
-		line-height: var(--paragraph--line-height-small);
+		line-height: $settings-custom-line-height-default;
 	}
 
 	@if $name == large {
-		font-size: var(--paragraph--font-size-large);
+		font-size: $settings-font-size-large;
 		font-weight: 400;
-		line-height: var(--paragraph--line-height-large);
+		line-height: $settings-custom-line-height-default;
 	}
 
 	@if $name == huge {
-		font-size: var(--paragraph--font-size-huge);
+		font-size: $settings-font-size-huge;
 		font-weight: 400;
-		line-height: var(--paragraph--line-height-huge);
+		line-height: $settings-custom-line-height-default;
 	}
 }

src/scss/03-base/_fonts.scss

@@ -1,62 +1,24 @@
 /**
- * Fontsource
+ * Web fonts
  *
- * Fonts list : https://fontsource.org/
- * Documentation : https://fontsource.org/docs/getting-started/faces-mixin
+ * Primary @font-face rules are declared in theme.json (fontFamilies.fontFace, variable woff2).
+ * Metric fallbacks for CLS cannot live in theme.json (size-adjust / ascent-override).
  *
- * Examples :
+ * Project fonts: edit src/theme-json/typography.json (fontFace). Edge cases: @mixin declare-font-face in 02-tools.
  *
- *      1 - Install the font and the utilities by the command :
- *          yarn add @fontsource-utils/scss
- *
- *          // For Classic font
- *          yarn add @fontsource/myFont
- *
- *          // For Variable font
- *          yarn add @fontsource-variable/myFont
- *
- *      2 - Declare font-face :
- *          // For Classic font
- *          @use "@fontsource-utils/scss/src/mixins" as fontsource;
- *          @use "@fontsource/myFont/scss/mixins" as MyFont;
- *          @include fontsource.faces($metadata: MyFont.$metadata, $weights: (400, 700));
- *          ...
- *
- *          // For Variable font
- *          @use "@fontsource-utils/scss/src/mixins" as fontsource;
- *          @use "@fontsource-variable/myFont/scss/mixins" as MyFont;
- *          @include fontsource.faces($metadata: MyFont.$metadata, $axes: wght);
- *          ...
+ * @see https://www.industrialempathy.com/perfect-ish-font-fallback/
  */
 
-@use "@fontsource-utils/scss/src/mixins" as fontsource;
-@use "@fontsource/poppins/scss/mixins" as Poppins;
-
-@include fontsource.faces($metadata: Poppins.$metadata, $weights: (300, 400, 500, 700), $styles: normal);
-@include fontsource.faces($metadata: Poppins.$metadata, $weights: (300, 400, 500, 700), $styles: italic);
-
-// Fallbacks for DM Sans  to improve cls
-// https://deploy-preview-15--upbeat-shirley-608546.netlify.app/perfect-ish-font-fallback/?font=Poppins
 @font-face {
-	font-family: Poppins-fallback;
+	font-family: "SourceSans3-fallback";
 	src: local("Arial");
-	size-adjust: 112.5%;
-	ascent-override: 109%;
+	size-adjust: 100%;
+	ascent-override: 105%;
 }
 
-/**
- * Custom font here
- *
- * Examples :
- *
- *      // For Classic font
- *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-regular", 400);
- *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-regular-italic", 400, italic);
- *      @include declare-font-face("My classic font", "../fonts/gmy-classic-font-bold", 700);
- *      ...
- *
- *      // For Variable font
- *      @include declare-font-face("My variable font", "../fonts/my-variable-font", 100 950, normal, normal, "woff2-variations");
- *      ...
- *
- */
+@font-face {
+	font-family: Fraunces-fallback;
+	src: local("Georgia");
+	size-adjust: 100%;
+	ascent-override: 95%;
+}