Scaffolding: update base elements font-size to match GCDS

Author: Garneauma

common/scaffolding/text-level-semantics.html

@@ -203,3 +203,7 @@ <h2>The <code>wbr</code> element</h2>
 	<pre><code>
 	www.simply&lt;wbr>orange&lt;wbr>juice.com
 	</code></pre>
+
+	<h2>The <code>blockquote</code> element</h2>
+	<blockquote>This is a quote</blockquote>
+	<pre><code>&lt;blockquote>This is a quote&lt;/blockquote></code></pre>

common/scaffolding/texte-niveau-semantique.html

@@ -203,4 +203,8 @@ <h2>The <code>wbr</code> element</h2>
 	<pre><code>
 	www.simply&lt;wbr>orange&lt;wbr>juice.com
 	</code></pre>
+
+	<h2>The <code>blockquote</code> element</h2>
+	<blockquote>This is a quote</blockquote>
+	<pre><code>&lt;blockquote>This is a quote&lt;/blockquote></code></pre>
 </div>

common/text-level-modifiers/_base.scss

@@ -8,3 +8,7 @@
 .fnt-hdng {
 	@include defaults-alternative-font-family();
 }
+
+.lead {
+	font-size: 1.2em;
+}

common/text-level-modifiers/text-level-modifiers-en.html

@@ -112,3 +112,7 @@ <h4><code>.text-uppercase</code></h4>
 <h4><code>.text-capitalize</code></h4>
 <p class="text-capitalize">capitalize text.</p>
 <pre><code>&lt;p <strong>class=&quot;text-capitalize&quot;</strong>&gt;capitalize text&lt;/p&gt;</code></pre>
+
+<h4><code>.lead</code></h4>
+<p class="lead">Enlarge text for leading text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cupiditate doloribus, accusantium dicta doloremque harum fugiat quidem perspiciatis? Mollitia, eligendi?</p>
+<pre><code>&lt;p class="lead">Enlarge text for leading text. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius cupiditate doloribus, accusantium dicta doloremque harum fugiat quidem perspiciatis? Mollitia, eligendi?&lt;/p></code></pre>

sites/_variables.scss

@@ -37,12 +37,12 @@ $padding-base-vertical: 10px;
 $padding-base-horizontal: 14px;
 
 /* Headings font-sizes */
-$font-size-h1: 1.9em; // expected 38px;
-$font-size-h2: 1.8em; // expected 36px;
-$font-size-h3: 1.2em; // expected 24px;
-$font-size-h4: 1.1em; // expected 22px;
-$font-size-h5: 1em; // expected 20px;
-$font-size-h6: .95em; // expected 19px;
+$font-size-h1: 2.5625rem; // expected 41px;
+$font-size-h2: 2.4375rem; // expected 39px;
+$font-size-h3: 1.8125rem; // expected 29px;
+$font-size-h4: 1.6875rem; // expected 27px;
+$font-size-h5: 1.5rem; // expected 24px;
+$font-size-h6: 1.375rem; // expected 22px;
 
 /* Small font-size */
 $small-size: 87%;

sites/baseline/_forms.scss

@@ -29,13 +29,14 @@ input[placeholder],
  * - Fieldflow is brought to speed with the visual update with a clearly defined temporary class .gc-font-2019, but the class can be tried out on other forms
  */
 :not(#wb-srch) form, .checkbox, .checkbox-inline, .radio, .radio-inline, form .btn:not(.btn-call-to-action) {
-	font-size: 16px;
-	line-height: 23px;
+	font-size: 1rem;
+	line-height: 1.4375;
 }
 form .btn:not(.btn-call-to-action), .form-control {
 	padding: 6px 12px;
 }
 legend {
+	font-size: 1.2em;
 	line-height: 1.65em;
 }
 

sites/baseline/_heading-screen-sm-max.scss

@@ -7,11 +7,37 @@
 // Heading font-sizes
 h1,
 .h1 {
-	font-size: 1.7em; // expected 34px;
-	margin-top: .75em; // expected ~26px;
+	font-size: 2.3125rem; // expected 37px;
+	line-height: 1.19;
+	margin-top: 1.265rem; // expected ~26px;
 }
 
 h2,
 .h2 {
-	font-size: 1.6em; // expected 342x;
+	font-size: 2.1875rem; // expected 35px;
+	line-height: 1.25;
+}
+
+h3,
+.h3 {
+	font-size: 1.625rem; // expected 26px;
+	line-height: 1.23;
+}
+
+h4,
+.h4 {
+	font-size: 1.375rem; // expected 22px;
+	line-height: 1.33;
+}
+
+h5,
+.h5 {
+	font-size: 1.25rem; // expected 20px;
+	line-height: 1.27;
+}
+
+h6,
+.h6 {
+	font-size: 1.125rem; // expected 18px;
+	line-height: 1.40;
 }

sites/baseline/_heading.scss

@@ -7,12 +7,6 @@
  *
  */
 
-h1 {
-	margin-bottom: .2em;
-	margin-top: 1em;
-	padding-bottom: .2em;
-}
-
 // Common heading style
 h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
 {
@@ -28,8 +22,25 @@ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
 	border: 0;
 }
 
-// Heading font-sizes
-h6,
-.h6 {
-	font-weight: 400;
+h1, .h1 {
+	line-height: 1.17;
+	margin-bottom: .2em;
+	margin-top: 1em;
+	padding-bottom: .2em;
+}
+
+h2, .h2 {
+	line-height: 1.23;
+}
+
+h3, .h3 {
+	line-height: 1.37;
+}
+
+h4, .h4, h5, .h5 {
+	line-height: 1.33;
+}
+
+h6, .h6 {
+	line-height: 1.45;
 }

sites/baseline/_scaffolding-screen-xs-max.scss

@@ -0,0 +1,13 @@
+/*
+ *
+ * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
+ * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ *
+ * @title: Scaffolding
+ *
+ */
+
+main {
+	font-size: 1.125rem;
+	line-height: 1.55;
+}

sites/baseline/_scaffolding.scss

@@ -17,13 +17,18 @@
 //
 html {
 	-webkit-font-smoothing: antialiased;
+	font-size: unset;
 	text-rendering: optimizeLegibility;
 }
 
+body {
+	font-size: unset;
+}
+
 // TODO: The font-size to be applied to the HTML element, not to the main element.
 main {
-	font-size: 20px;
-	line-height: 1.65em;
+	font-size: 1.25rem;
+	line-height: 1.6;
 
 	h1, h2, h3, h4, h5, h6, p {
 		@extend %gcweb-scaffolding-word-break-break-word;
@@ -103,3 +108,11 @@ a.figcaption {
 	}
 
 }
+
+output {
+	font-size: 1em;
+}
+
+blockquote {
+	font-size: 1em;
+}