Mise en place de la police Montreal (#132)

Signed-off-by: Alexis Boulerice <[email protected]>

CHANGELOG.md

@@ -4,14 +4,21 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-## [5.5.1] - unreleased
+## [5.6.0] - 2024-12-03
+
+### Changed
+- Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal. La 2e fois est la bonne!
+
+
+## [5.5.1] - 2024-07-31
 
 ### Added
 - Styles - iconographie: Ajout des icônes clipboard-checklist, park, snow et trails.
 
 ### Changed
 - Styles - iconographie: Modification des icônes arrow-down, arrow-left, arrow-right, arrow-up, check, download, droplet, home, log-in, log-out, menu, upload et x.
 
+
 ## [5.5.0] - 2024-06-20
 
 ### Added

build.config.json

@@ -84,6 +84,14 @@
       ],
       "dest" : "public/glyphs/"
     },
+    "fonts": {
+      "base" : "source/fonts/",
+      "files": [
+        "source/fonts/**/*"
+      ],
+      "dest" : "public/fonts/",
+      "distribution"  : "dist/fonts/"
+    },
     "images": {
       "base" : "source/images/",
       "files": [

gulpfile.js

@@ -147,6 +147,17 @@ function glyphs() {
     .pipe(dest(config.glyphs.dest));
 }
 
+// Fonts: copy
+function fonts() {
+  return src(config.fonts.files)
+    .pipe(dest(config.fonts.dest));
+}
+// Fonts: Distribution
+function fontsDist() {
+  return src(config.fonts.files)
+    .pipe(dest(config.fonts.distribution))
+}
+
 // Task: Handle Patternlab Sass
 function plSass() {
   return src(config.patternlab.scss.files)
@@ -212,6 +223,7 @@ exports.default = series(
     photoswipe,
     scripts,
     glyphs,
+    fonts,
     baoVersion
   )
 )
@@ -230,6 +242,7 @@ exports.serve = series(
     vendorScripts,
     photoswipe,
     glyphs,
+    fonts,
     scripts,
     baoVersion
   ),

source/_patterns/00-styles/01-couleurs/01-contenu.mustache

@@ -12,31 +12,19 @@
       <div class="pl-swatch">
         <div class="pl-swatch-item pl-swatch-item-fw"><span class="pl-swatch-square pl-action"></span></div>
         <div class="pl-swatch-item" data-header="Couleur">Action</div>
-        <div class="pl-swatch-item" data-header="Variable">
-          <div class="pl-swatch-item-child-wrapper">
-            <div class="select-all">$action</div>
-          </div>
-        </div>
+        <div class="pl-swatch-item select-all" data-header="Variable">$action</div>
         <div class="pl-swatch-item select-all" data-header="Hex">#097d6c</div>
       </div>
       <div class="pl-swatch">
         <div class="pl-swatch-item pl-swatch-item-fw"><span class="pl-swatch-square pl-action-darker"></span></div>
         <div class="pl-swatch-item" data-header="Couleur">Action-darker</div>
-        <div class="pl-swatch-item" data-header="Variable">
-          <div class="pl-swatch-item-child-wrapper">
-            <div class="select-all">$action-darker</div>
-          </div>
-        </div>
+        <div class="pl-swatch-item select-all" data-header="Variable">$action-darker</div>
         <div class="pl-swatch-item select-all" data-header="Hex">#075b4F</div>
       </div>
       <div class="pl-swatch">
         <div class="pl-swatch-item pl-swatch-item-fw"><span class="pl-swatch-square pl-action-lighter"></span></div>
         <div class="pl-swatch-item" data-header="Couleur">Action-lighter</div>
-        <div class="pl-swatch-item" data-header="Variable">
-          <div class="pl-swatch-item-child-wrapper">
-            <div class="select-all">$action-lighter</div>
-          </div>
-        </div>
+        <div class="pl-swatch-item select-all" data-header="Variable">$action-lighter</div>
         <div class="pl-swatch-item select-all" data-header="Hex">#0cb097</div>
       </div>
     </div>

source/_patterns/00-styles/03-typography/00-fonts.md

@@ -1,8 +1,8 @@
 ---
-title: Fonts
+title: Police
 ---
 
-La police de caractère utilisé est [Open Sans](https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans) 
+La police de caractère utilisé est [Montreal]
 (Cette police est appelé dans le css)
 
-Nous utilisons **uniquement** les styles regular(400) et bold(700) 
+Nous utilisons **uniquement** les styles regular(400) et bold(700)

source/_patterns/00-styles/03-typography/00-fonts.mustache

@@ -1,10 +1,10 @@
 <table class="table table-condensed">
   <tr>
-    <td style="width:50%"><p class="regular">Open sans - Regular (400)</p></td>
+    <td style="width:50%"><p class="regular">Montreal - Regulier (400)</p></td>
     <td style="width:50%"><p class="regular">a b c d e f g h i j k l m n o p q r s t u v w x y z<br/>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p><br/></td>
   </tr>
   <tr>
-    <td><p class="bold">Open sans - Bold (700)</p></td>
+    <td><p class="bold">Montreal - Gras (700)</p></td>
     <td><p class="bold">a b c d e f g h i j k l m n o p q r s t u v w x y z<br/>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p><br/></td>
   </tr>
 </table>

source/_patterns/00-styles/03-typography/01-headings.md

@@ -1,6 +1,6 @@
 ---
-title: Headings
+title: Entete
 ---
-   
+
 Les classes <code>.h1</code> à <code>.h6</code> sont disponibles pour utiliser le style des titre sans le balisage.
-Les titres et les classes de titres sont responsives.
+Les titres et les classes de titres sont responsives.

source/_patterns/00-styles/03-typography/01-headings.mustache

@@ -2,33 +2,33 @@
   <ul class="pl-list-stacked-block plain">
     <li>
       <h1>H1. Montréal Heading</h1>
-      <span class="d-md-none">Open Sans Bold (700) - 32/40</span>
-      <span class="d-none d-md-block">Open Sans Bold (700) - 40/56</span>
+      <span class="d-md-none">Montreal Gras (700) - 32/40</span>
+      <span class="d-none d-md-block">Montreal Gras (700) - 40/56</span>
     </li>
     <li>
       <h2>H2. Montréal Heading</h2>
-      <span class="d-md-none">Open Sans Bold (700) - 24/32</span>
-      <span class="d-none d-md-block">Open Sans Bold (700) - 32/40</span>
+      <span class="d-md-none">Montreal Gras (700) - 24/32</span>
+      <span class="d-none d-md-block">Montreal Gras (700) - 32/40</span>
     </li>
     <li>
       <h3>H3. Montréal heading</h3>
-      <span class="d-md-none">Open Sans Bold (700) - 20/28</span>
-      <span class="d-none d-md-block">Open Sans Bold (700) - 24/32</span>
+      <span class="d-md-none">Montreal Gras (700) - 20/28</span>
+      <span class="d-none d-md-block">Montreal Gras (700) - 24/32</span>
     </li>
     <li>
       <h4>H4. Montréal heading</h4>
-      <span class="d-md-none">Open Sans Bold (700) - 16/24</span>
-      <span class="d-none d-md-block">Open Sans Bold (700) - 20/28</span>
+      <span class="d-md-none">Montreal Gras (700) - 16/24</span>
+      <span class="d-none d-md-block">Montreal Gras (700) - 20/28</span>
     </li>
     <li>
       <h5>H5. Montréal heading</h5>
-      <span class="d-md-none">Open Sans Bold (700) - 14/20</span>
-      <span class="d-none d-md-block">Open Sans Bold (700) - 16/24</span>
+      <span class="d-md-none">Montreal Gras (700) - 14/20</span>
+      <span class="d-none d-md-block">Montreal Gras (700) - 16/24</span>
     </li>
     <li>
       <h6>H6. Montréal heading</h6>
-      <span class="d-md-none">Open Sans Bold (700) - 12/16</span>
-      <span class="d-none d-md-block">Open Sans Bold (700) - 14/20</span>
+      <span class="d-md-none">Montreal Gras (700) - 12/16</span>
+      <span class="d-none d-md-block">Montreal Gras (700) - 14/20</span>
     </li>
   </ul>
-</div>
+</div>

source/bao-version.json

@@ -1,3 +1,3 @@
 {
-  "version": "5.5.0"
+  "version": "5.6.0"
 }

source/css/scss/_fonts.scss

@@ -0,0 +1,39 @@
+// Montreal regulier
+@font-face {
+  font-family: "Montreal";
+  src: url('../fonts/montreal/woff2/Montreal-Web-Regulier.woff2') format('woff2'),
+       url('../fonts/montreal/woff/Montreal-Web-Regulier.woff') format('woff'),
+       url('../fonts/montreal/ttf/Montreal-Web-Regulier.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+// Montreal italique
+@font-face {
+  font-family: "Montreal";
+  src: url('../fonts/montreal/woff2/Montreal-Web-Italique.woff2') format('woff2'),
+       url('../fonts/montreal/woff/Montreal-Web-Italique.woff') format('woff'),
+       url('../fonts/montreal/ttf/Montreal-Web-Italique.ttf') format('truetype');
+  font-weight: normal;
+  font-style: italic;
+}
+
+// Montreal gras
+@font-face {
+  font-family: "Montreal";
+  src: url('../fonts/montreal/woff2/Montreal-Web-Gras.woff2') format('woff2'),
+       url('../fonts/montreal/woff/Montreal-Web-Gras.woff') format('woff'),
+       url('../fonts/montreal/ttf/Montreal-Web-Gras.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+// Montreal gras italique
+@font-face {
+  font-family: "Montreal";
+  src: url('../fonts/montreal/woff2/Montreal-Web-GrasItalique.woff2') format('woff2'),
+       url('../fonts/montreal/woff/Montreal-Web-GrasItalique.woff') format('woff'),
+       url('../fonts/montreal/ttf/Montreal-Web-GrasItalique.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}

source/css/scss/_variables.scss

@@ -361,7 +361,7 @@ $backdrop-opacity:            .3;
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-base:            'Open Sans', Helvetica, Arial, sans-serif;
+$font-family-base:            'Montreal', Helvetica, Arial, sans-serif;
 
 $font-size-base:              1rem; // Assumes the browser default, typically `16px
 $font-size-lg:                $font-size-base * 1.25;   //20px

source/css/styles-header-footer-v4.scss

@@ -1,3 +1,4 @@
+@import "scss/fonts";
 @import "scss/functions";
 
 /*-- VARIABLES --*/

source/css/styles.scss

@@ -1,3 +1,4 @@
+@import "scss/fonts";
 @import "scss/functions";
 @import "bootstrap/scss/functions";