diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e8801b0..8c2a3062 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/README.md b/README.md index 1ae9a2db..f0dc9a48 100644 --- a/README.md +++ b/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. diff --git a/config/webpack-theme-json-plugin.js b/config/webpack-theme-json-plugin.js index 11f0dc72..fc2ceade 100644 --- a/config/webpack-theme-json-plugin.js +++ b/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)) diff --git a/package-lock.json b/package-lock.json index 14a46459..5a30be04 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,16 +1,14 @@ { "name": "beapi-frontend-framework", - "version": "5.5.0", + "version": "5.5.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "beapi-frontend-framework", - "version": "5.5.0", + "version": "5.5.1", "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" @@ -2118,21 +2116,6 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, - "node_modules/@fontsource-utils/scss": { - "version": "0.2.4", - "resolved": "https://registry.npmjs.org/@fontsource-utils/scss/-/scss-0.2.4.tgz", - "integrity": "sha512-QmfdOQG4jE/LNM7N/i2OGz0MJhizdUkIVwCxT3d1IiFPH1Up9QTS6rtVvnaoYF7CQTnDq5inwNzAhu+tR+rSCQ==", - "license": "MIT" - }, - "node_modules/@fontsource/poppins": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.3.0.tgz", - "integrity": "sha512-cms1nM7U6SN8epIV1WMVOV8VsA645aSm3wHfzIQnkk188U341ThbJGSl2Sv54V29gnDbT2arMPfLzvVIIVCceQ==", - "license": "OFL-1.1", - "funding": { - "url": "https://github.com/sponsors/ayuhito" - } - }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "dev": true, diff --git a/package.json b/package.json index 1f7f73ac..f8e2058d 100644 --- a/package.json +++ b/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", diff --git a/src/fonts/fraunces/fraunces-latin-wght-normal.woff2 b/src/fonts/fraunces/fraunces-latin-wght-normal.woff2 new file mode 100644 index 00000000..32e1ccc8 Binary files /dev/null and b/src/fonts/fraunces/fraunces-latin-wght-normal.woff2 differ diff --git a/src/fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2 b/src/fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2 new file mode 100644 index 00000000..2622b133 Binary files /dev/null and b/src/fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2 differ diff --git a/src/scss/01-abstract/_variables.scss b/src/scss/01-abstract/_variables.scss index ab30e916..a73ad58d 100644 --- a/src/scss/01-abstract/_variables.scss +++ b/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; diff --git a/src/scss/02-tools/_m-heading.scss b/src/scss/02-tools/_m-heading.scss index 5249155a..d327b8a5 100644 --- a/src/scss/02-tools/_m-heading.scss +++ b/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; } } diff --git a/src/scss/02-tools/_m-text.scss b/src/scss/02-tools/_m-text.scss index 845fbd12..40d019fd 100644 --- a/src/scss/02-tools/_m-text.scss +++ b/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; } } diff --git a/src/scss/03-base/_fonts.scss b/src/scss/03-base/_fonts.scss index 7195c487..99bb8c1b 100644 --- a/src/scss/03-base/_fonts.scss +++ b/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%; +} diff --git a/src/scss/03-base/_variables-css.scss b/src/scss/03-base/_variables-css.scss index 7661591d..1b4c1cb9 100644 --- a/src/scss/03-base/_variables-css.scss +++ b/src/scss/03-base/_variables-css.scss @@ -1,6 +1,5 @@ @use "sass:map"; @use "../01-abstract/variables" as *; -@use "../02-tools/f-fluid-size" as *; @use "../02-tools/m-breakpoint" as *; @use "../02-tools/m-reduced-motion" as *; @@ -10,40 +9,6 @@ */ --breakpoint-mobile-to-desktop-nav: #{map.get($breakpoints, mobile-to-desktop-nav)}; // Used by JavaScript - /* - * Heading - */ - // Font size - --heading--font-size-h1: #{fluid-size(45px, 56px)}; - --heading--font-size-h2: #{fluid-size(32px, 48px)}; - --heading--font-size-h3: #{fluid-size(24px, 36px)}; - --heading--font-size-h4: #{fluid-size(20px, 32px)}; - --heading--font-size-h5: #{fluid-size(18px, 24px)}; - --heading--font-size-h6: #{fluid-size(16px, 18px)}; - - // Line height - --heading--line-height-h1: 1.25; - --heading--line-height-h2: 1.25; - --heading--line-height-h3: 1.25; - --heading--line-height-h4: 1.25; - --heading--line-height-h5: 1.25; - --heading--line-height-h6: 1.25; - - /* - * paragraph - */ - // Font size - --paragraph--font-size-huge: #{fluid-size(28px, 32px)}; - --paragraph--font-size-large: #{fluid-size(20px, 24px)}; - --paragraph--font-size-small: #{fluid-size(12px, 14px)}; - --paragraph--font-size-default: #{fluid-size(14px, 16px)}; - - // line height - --paragraph--line-height-huge: 1.4; - --paragraph--line-height-large: 1.4; - --paragraph--line-height-small: 1.4; - --paragraph--line-height-default: 1.4; - /* * Admin bar */ diff --git a/src/scss/06-blocks/_gutenberg.scss b/src/scss/06-blocks/_gutenberg.scss index f298bd30..40c9c082 100644 --- a/src/scss/06-blocks/_gutenberg.scss +++ b/src/scss/06-blocks/_gutenberg.scss @@ -1,4 +1,5 @@ @use "../01-abstract/variables" as *; +@use "../01-abstract/theme-json" as *; @use "../02-tools/f-context-selector" as *; @use "../02-tools/f-get-gutter-width" as *; @use "../02-tools/m-align" as *; @@ -34,10 +35,10 @@ .has-drop-cap:not(:focus)::first-letter { float: left; margin: .1em .1em 0 0; - font-family: var($font-family-primary); - font-size: calc(1.2 * var(--heading--font-size-h1)); + font-family: $font-family-secondary; + font-size: calc(1.2 * #{$settings-font-size-h1}); font-style: normal; - font-weight: var(--heading--font-weight); + font-weight: 400; line-height: .66; text-transform: uppercase; } diff --git a/src/scss/06-blocks/core/_heading.scss b/src/scss/06-blocks/core/_heading.scss index d5cdeef5..af3e149d 100644 --- a/src/scss/06-blocks/core/_heading.scss +++ b/src/scss/06-blocks/core/_heading.scss @@ -5,6 +5,8 @@ * * See https://github.com/BeAPI/beapi-frontend-framework/pull/247 for used heading style variation (depend of projects) * + * Font size presets (has-h-*-font-size): handled by core global styles from theme.json only. + * * examples : * $headings: ( * "1": (), @@ -47,9 +49,4 @@ $headings: ( .is-style-h#{$i} { @include heading(h#{$i}); } - - .has-h-#{$i}-font-size { - font-size: var(--heading--font-size-h#{$i}); - line-height: var(--heading--line-height-h#{$i}); - } } diff --git a/src/scss/06-blocks/core/_list.scss b/src/scss/06-blocks/core/_list.scss index e056c54f..31d5847f 100644 --- a/src/scss/06-blocks/core/_list.scss +++ b/src/scss/06-blocks/core/_list.scss @@ -35,8 +35,8 @@ ul:where(.wp-block-list), ol:where(.wp-block-list) { &:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) { - font-size: var(--paragraph--font-size-default, $font-size-base); - line-height: var(--paragraph--line-height-default, $line-height-base); + font-size: $font-size-base; + line-height: $line-height-base; ul, ol { diff --git a/src/scss/06-blocks/core/_paragraph.scss b/src/scss/06-blocks/core/_paragraph.scss index 33791b49..f079ddcc 100644 --- a/src/scss/06-blocks/core/_paragraph.scss +++ b/src/scss/06-blocks/core/_paragraph.scss @@ -1,5 +1,12 @@ @use "../../02-tools/m-text" as *; +/** + * Paragraph + * + * Block styles (is-style-*): full paragraph typography via @include text. + * Font size presets (has-*-font-size): core global styles from theme.json only. + */ + $paragraphs: "default", "small", "large", "huge"; p { diff --git a/src/theme-json/typography.json b/src/theme-json/typography.json index d9f5fe51..3fd5efe2 100644 --- a/src/theme-json/typography.json +++ b/src/theme-json/typography.json @@ -2,7 +2,136 @@ "version": 3, "settings": { "typography": { - "fontSizes": [], + "fluid": { + "minViewportWidth": "480px", + "maxViewportWidth": "1440px" + }, + "fontSizes": [ + { + "name": "H1 (45–56px)", + "slug": "h1", + "size": "56px", + "fluid": { + "min": "45px", + "max": "56px" + } + }, + { + "name": "H2 (32–48px)", + "slug": "h2", + "size": "48px", + "fluid": { + "min": "32px", + "max": "48px" + } + }, + { + "name": "H3 (24–36px)", + "slug": "h3", + "size": "36px", + "fluid": { + "min": "24px", + "max": "36px" + } + }, + { + "name": "H4 (20–32px)", + "slug": "h4", + "size": "32px", + "fluid": { + "min": "20px", + "max": "32px" + } + }, + { + "name": "H5 (18–24px)", + "slug": "h5", + "size": "24px", + "fluid": { + "min": "18px", + "max": "24px" + } + }, + { + "name": "H6 (16–18px)", + "slug": "h6", + "size": "18px", + "fluid": { + "min": "16px", + "max": "18px" + } + }, + { + "name": "Huge (28–32px)", + "slug": "huge", + "size": "32px", + "fluid": { + "min": "28px", + "max": "32px" + } + }, + { + "name": "Large (20–24px)", + "slug": "large", + "size": "24px", + "fluid": { + "min": "20px", + "max": "24px" + } + }, + { + "name": "Small (12–14px)", + "slug": "small", + "size": "14px", + "fluid": { + "min": "12px", + "max": "14px" + } + }, + { + "name": "Default (14–16px)", + "slug": "default", + "size": "16px", + "fluid": { + "min": "14px", + "max": "16px" + } + } + ], + "fontFamilies": [ + { + "name": "Secondary (Fraunces)", + "slug": "secondary", + "fontFamily": "\"Fraunces\", Fraunces-fallback, serif", + "fontFace": [ + { + "fontFamily": "Fraunces", + "fontWeight": "100 900", + "fontStyle": "normal", + "fontDisplay": "swap", + "src": [ + "file:./src/fonts/fraunces/fraunces-latin-wght-normal.woff2" + ] + } + ] + }, + { + "name": "Primary (Source Sans 3)", + "slug": "primary", + "fontFamily": "\"Source Sans 3\", SourceSans3-fallback, sans-serif", + "fontFace": [ + { + "fontFamily": "Source Sans 3", + "fontWeight": "200 900", + "fontStyle": "normal", + "fontDisplay": "swap", + "src": [ + "file:./src/fonts/source-sans-3/source-sans-3-latin-wght-normal.woff2" + ] + } + ] + } + ], "defaultFontSizes": false, "customFontSize": false, "dropCap": false, @@ -11,8 +140,18 @@ "lineHeight": false, "letterSpacing": false, "textDecoration": false, - "textTransform": false, - "fluid": true + "textTransform": false + }, + "custom": { + "lineHeight": { + "h1": "1.1", + "h2": "1.15", + "h3": "1.2", + "h4": "1.25", + "h5": "1.3", + "h6": "1.35", + "default": "1.4" + } } } -} \ No newline at end of file +}