Remplacement de Open Sans par la police Montreal (#121)

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

CHANGELOG.md

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## Added
 - Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette.
 
+## Changed
+- Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal.
+
 ## Fixed
 - Components - Toasts: Ajustement fonction fermeture et styles boutons.
 

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,18 @@ 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 +224,7 @@ exports.default = series(
     photoswipe,
     scripts,
     glyphs,
+    fonts,
     baoVersion
   )
 )
@@ -230,6 +243,7 @@ exports.serve = series(
     vendorScripts,
     photoswipe,
     glyphs,
+    fonts,
     scripts,
     baoVersion
   ),
@@ -244,7 +258,8 @@ exports.distribute = series(
   parallel(
     jsDist,
     images,
-    cssDist
+    cssDist,
+    fontsDist
   ),
   sassCopy
 )

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 slect-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 slect-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-typographie/00-police.md

@@ -0,0 +1,8 @@
+---
+title: Police
+---
+
+La police de caractère utilisé est [Montreal] (https://montreal.app.feedtype.ca/)
+(Utilisation sous licence exclusive)
+
+Nous utilisons **uniquement** les styles Regulier(400), Gras(700) et la variante italique.

source/_patterns/00-styles/03-typography/00-fonts.mustache → source/_patterns/00-styles/03-typographie/00-police.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 → source/_patterns/00-styles/03-typographie/01-titres.md

@@ -1,6 +1,6 @@
 ---
-title: Headings
+title: Titres
 ---
-   
+
 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-typographie/01-titres.mustache

@@ -0,0 +1,34 @@
+<div>
+  <ul class="pl-list-stacked-block plain">
+    <li>
+      <h1>H1. Montréal Heading</h1>
+      <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">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">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">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">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">Montreal - Gras (700) - 12/16</span>
+      <span class="d-none d-md-block">Montreal - Gras (700) - 14/20</span>
+    </li>
+  </ul>
+</div>

source/_patterns/00-styles/03-typography/03-lead.md → source/_patterns/00-styles/03-typographie/03-lead.md

@@ -1,5 +1,5 @@
 ---
-title: Lead text
+title: Amorce
 ---
 
-Exemple d'un texte d'amorce. Pour l'utiliser il suffit d'ajouter la classe <code>.lead</code> sur votre paragraphe ou sur un <code>div</code> qui contient du contenu html.
+Exemple d'un texte d'amorce. Pour l'utiliser il suffit d'ajouter la classe <code>.lead</code> sur votre paragraphe ou sur un <code>div</code> qui contient du contenu html.

source/_patterns/00-styles/03-typographie/04-paragraph.md

@@ -0,0 +1,5 @@
+---
+title: Paragraphe
+---
+
+Exemple d'un simple paragraphe de base.

source/_patterns/00-styles/03-typographie/08-list-unordered.md

@@ -0,0 +1,5 @@
+---
+title: Liste non ordonnee
+---
+
+Exemple d'une liste non ordonnée de base (<code>ul</code>).

source/_patterns/00-styles/03-typographie/09-list-ordered.md

@@ -0,0 +1,5 @@
+---
+title: Liste ordonnee
+---
+
+Exemple d'une liste ordonnée de base (<code>ol</code>).

source/_patterns/00-styles/03-typography/10-list-inline.md → source/_patterns/00-styles/03-typographie/10-list-inline.md

@@ -1,8 +1,8 @@
 ---
-title: List Inline
+title: Liste Inline
 ---
 Exemple d'une liste non ordonnée inline
 
-## Utilisation 
+## Utilisation
 
-Pour utiliser une liste non ordonnée en position inline, il faut inclure la classe <code>.list-inline</code> sur le <code>&lt;ul&gt;</code> ainsi que la classe <code>.list-inline-item</code> sur chacun de ses <code>&lt;li&gt;</code>.
+Pour utiliser une liste non ordonnée en position inline, il faut inclure la classe <code>.list-inline</code> sur le <code>&lt;ul&gt;</code> ainsi que la classe <code>.list-inline-item</code> sur chacun de ses <code>&lt;li&gt;</code>.

source/_patterns/00-styles/03-typography/12-definition-list.md → source/_patterns/00-styles/03-typographie/12-definition-list.md

@@ -1,5 +1,5 @@
 ---
-title: Definition lists
+title: Liste de definition
 ---
 
-Liste de définitions de base. Disponible en version small en ajoutant <code>.dl-sm</code>.
+Liste de définitions de base. Disponible en version small en ajoutant <code>.dl-sm</code>.

source/_patterns/00-styles/03-typography/20-link.md → source/_patterns/00-styles/03-typographie/20-link.md

@@ -1,7 +1,7 @@
 ---
-title: Link
+title: Hyperliens
 ---
 
 Lien par défault.
 
-Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)
+Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)

source/_patterns/00-styles/03-typographie/21-links-list-element.md

@@ -0,0 +1,7 @@
+---
+title: Hyperliens Liste
+---
+
+Hyperlien de type liste.
+
+Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)

source/_patterns/00-styles/03-typography/24-links-utilities.md → source/_patterns/00-styles/03-typographie/24-links-utilities.md

@@ -1,5 +1,5 @@
 ---
-title: Links utilities
+title: Utilitaires hyperliens
 ---
 
 ## Utilisation
@@ -10,4 +10,4 @@ Par exemple: <code>.text-danger</code>
 ## Différence avec [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)
 
 * Les classes des couleurs de dialogues sont uniquement disponibles en version foncé.
-* Le <code>.text-secondary</code> n'est pas activés.
+* Le <code>.text-secondary</code> n'est pas activés.

source/_patterns/00-styles/03-typography/30-text-utilities.md → source/_patterns/00-styles/03-typographie/30-text-utilities.md

@@ -1,5 +1,5 @@
 ---
-title: Text utilities
+title: Utilitaires texte
 ---
 
 ## Utilisation
@@ -10,4 +10,4 @@ Par exemple: <code>.text-danger</code>
 ## Différence avec [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)
 
 * Les classes des couleurs de dialogues sont uniquement disponibles en version foncé.
-* Le <code>.text-secondary</code> n'est pas activés.
+* Le <code>.text-secondary</code> n'est pas activés.

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/_type.scss

@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
-
 // Font-smoothing normalisation for mac os
 body {
   -webkit-font-smoothing: antialiased;