Apply the new Source Sans 3 typeface

- Consolidate font sizes, font-family and line-height - Blocks included: * Links: Contextual navigation links, footer links, breadcrumbs * Forms: Inputs, small paragraphs, checkbox label * Comments Block: Inputs, short paragraphs, checkbox label and replies * Card text description * Footer copyright text * Meta information: Author's name, date and article's read time * Author Block * Cookies box
greenpeace · May 29, 2023 · f6317d2 · f6317d2
1 parent 694df2f
commit f6317d2
Show file tree

Hide file tree

Showing 12 changed files with 188 additions and 33 deletions.
diff --git a/assets/src/scss/layout/_breadcrumbs.scss b/assets/src/scss/layout/_breadcrumbs.scss
@@ -1,7 +1,9 @@
 .top-page-tags {
-  font-size: 16px;
+  _-- {
+    font-family: var(--headings--font-family);
+    font-size: 16px;
+  }
   margin-bottom: $sp-1;
-  font-family: var(--headings--font-family);
 
   .tag-wrap {
     display: inline;

diff --git a/assets/src/scss/layout/_cookies-settings.scss b/assets/src/scss/layout/_cookies-settings.scss
@@ -2,8 +2,10 @@
   position: relative;
 
   p {
-    font-size: 12px;
-    line-height: 1.5;
+    _-- {
+      font-size: 12px;
+      line-height: 1.5;
+    }
   }
 
   @include medium-and-up {
@@ -12,7 +14,9 @@
 
   @include large-and-up {
     p {
-      font-size: 14px;
+      _-- {
+        font-size: 14px;
+      }
     }
   }
 }

diff --git a/assets/src/scss/layout/_cookies.scss b/assets/src/scss/layout/_cookies.scss
@@ -1,5 +1,7 @@
 .cookie-notice {
-  font-family: var(--headings--font-family);
+  _-- {
+    font-family: var(--headings--font-family);
+  }
   z-index: 100;
   position: fixed;
   width: 100vw;

diff --git a/assets/src/scss/layout/_footer.scss b/assets/src/scss/layout/_footer.scss
@@ -61,7 +61,9 @@
   }
 
   li {
-    font-size: $font-size-sm;
+    _-- {
+      font-size: $font-size-sm;
+    }
 
     &:not(:last-child) {
       margin-bottom: 24px;
@@ -98,8 +100,10 @@
   }
 
   span {
-    font-size: $font-size-xxxs;
-    line-height: 1.4;
+    _-- {
+      font-size: $font-size-xxxs;
+      line-height: 1.4;
+    }
     word-break: keep-all;
     width: auto;
     margin-bottom: 12px;

diff --git a/assets/src/scss/layout/_forms.scss b/assets/src/scss/layout/_forms.scss
@@ -17,10 +17,12 @@
 
     & ~ .custom-control-description,
     & ~ label {
+      --label-- {
+        font-family: var(--headings--font-family);
+        font-size: $font-size-xxxs;
+      }
       position: relative;
       cursor: pointer;
-      font-family: var(--headings--font-family);
-      font-size: $font-size-xxxs;
       line-height: 1rem;
       display: inline-block;
       padding-inline-start: 36px;
@@ -148,8 +150,10 @@
 .gfield input:not([type="file"]),
 .gfield textarea,
 .ginput_container_multiselect select {
+  --form-elements-- {
+    font-family: var(--headings--font-family);
+  }
   border-radius: 4px;
-  font-family: var(--headings--font-family);
   background-color: $white;
   border: 1px solid $grey-20;
   color: var(--body--color);
@@ -212,15 +216,17 @@ textarea.form-control {
     position: relative;
 
     label {
+      --animated-label-- {
+        font-size: 11px;
+        font-family: var(--headings--font-family);
+        font-weight: 500;
+      }
       pointer-events: none;
       position: absolute;
       left: 0;
       top: 16px;
-      font-weight: 500;
       color: $grey-40;
       padding-inline-start: 16px;
-      font-size: 11px;
-      font-family: var(--headings--font-family);
       opacity: 0;
       transition: all .3s ease;
       margin-bottom: 0;
@@ -254,17 +260,19 @@ select {
   }
 
   ~ .invalid-feedback {
+    --invalid-feedback-- {
+      font-family: var(--headings--font-family);
+      font-size: 12px;
+      font-weight: 500;
+    }
     background: $dark-orange;
     color: white;
     border-radius: 4px;
-    font-size: 12px;
-    font-weight: 500;
     padding: 6px 12px;
     width: fit-content;
     position: relative;
     pointer-events: none;
     margin-top: 6px;
-    font-family: var(--headings--font-family);
 
     &:after {
       bottom: 100%;

diff --git a/assets/src/scss/layout/_gravity-forms.scss b/assets/src/scss/layout/_gravity-forms.scss
@@ -5,7 +5,9 @@
 @import "../base/typography";
 
 .gform_wrapper {
-  font-family: var(--headings--font-family);
+  _-- {
+    font-family: var(--headings--font-family);
+  }
 
   &.gform_validation_error .gform_validation_errors {
     color: $dark-orange;
@@ -97,11 +99,13 @@
     }
 
     .validation_message.gfield_validation_message {
+      --gfield-validation-message-- {
+        font-size: $font-size-xxxs;
+        font-weight: 500;
+      }
       background: $dark-orange;
       color: $white;
       border-radius: 4px;
-      font-size: $font-size-xxxs;
-      font-weight: 500;
       border-color: $dark-orange;
       padding: $sp-1 $sp-2;
       width: fit-content;
@@ -130,7 +134,9 @@
 }
 
 .ui-datepicker {
-  font-family: var(--headings--font-family);
+  _-- {
+    font-family: var(--headings--font-family);
+  }
 }
 
 .gform_p4_confirmation {

diff --git a/assets/src/scss/new-identity/_fonts.scss b/assets/src/scss/new-identity/_fonts.scss
@@ -0,0 +1,15 @@
+$bucket: "https://www.greenpeace.org/static/planet4-assets/";
+
+$fonts: (
+  #{$font-family-source-sans-3},
+  #{$font-family-source-sans-3-bold},
+  #{$font-family-source-sans-3-semibold},
+);
+
+@each $font in $fonts {
+  @font-face {
+    font-family: #{$font};
+    font-display: swap;
+    src: url(#{$bucket} + #{$font} + ".woff2") format("woff2");
+  }
+}
diff --git a/assets/src/scss/new-identity/style.scss b/assets/src/scss/new-identity/style.scss
@@ -1,6 +1,7 @@
 @import "../base/tokens";
 @import "../base/variables";
 @import "../base/mixins";
+@import "./fonts";
 
 @mixin shared-link-styles {
   --link--height: 26px;
@@ -24,6 +25,7 @@
 }
 
 :root {
+  // Colors
   --body--color: var(--grey-900);
   --site-footer--background: var(--p4-dark-green-800);
   --countries-list--background: var(--p4-dark-green-900);
@@ -118,11 +120,45 @@
   --search-activefilter-tag--border-radius: 4px;
   --search-results-alternative-label--color: var(--white);
   --search-results-alternative-label--background: var(--blue-green-800);
-  --search-results-alternative-label--font-weight: normal;
   --search-results-alternative-label--border-radius: 4px;
-
-  // TODO: Review these fallback variables after we'll merge the new identity colors
   --comments-block--comment-respond--background: var(--color-background-comments_block);
+
+  // Typography
+  --animated-label--font-family: var(--font-family-paragraph-secondary-regular);
+  --animated-label--font-weight: var(--font-weight-regular);
+  --animated-label--font-size: var(--font-size-xs--font-family-source-sans-3);
+  --author-block-info-name--font-size: var(--font-size-m--font-family-source-sans-3);
+  --author-block-info-name--font-weight: var(--font-weight-semibold);
+  --boxout--boxout-excerpt--medium-and-up--font-size: var(--font-size-s--font-family-source-sans-3);
+  --boxout--boxout-excerpt--medium-and-up--line-height: var(--line-height-s--font-family-source-sans-3);
+  --cookie-notice--font-family: var(--font-family-paragraph-secondary-regular);
+  --cookies-settings--p--font-size: var(--font-size-xs--font-family-source-sans-3);
+  --cookies-settings--p--large-and-up--font-size: var(--font-size-xs--font-family-source-sans-3);
+  --cookies-settings--p--line-height: var(--line-height-xs--font-family-source-sans-3);
+  --cover-card-excerpt--font-family: var(--font-family-paragraph-secondary-regular);
+  --cover-card-excerpt--font-size: var(--font-size-s--font-family-source-sans-3);
+  --cover-card-excerpt--line-height: var(--line-height-s--font-family-source-sans-3);
+  --footer-menu--li--font-size: var(--font-size-m--font-family-source-sans-3);
+  --form-elements--font-family: var(--font-family-paragraph-secondary-regular);
+  --gdpr-comments-compliance--gdpr-comments-label--font-size: var(--font-size-m--font-family-source-sans-3);
+  --gform_wrapper--font-family: var(--font-family-paragraph-secondary-regular);
+  --gfield-validation-message--font-size: var(--font-size-xs--font-family-source-sans-3);
+  --gfield-validation-message--font-weight: var(--font-weight-semibold);
+  --label--font-family: var(--font-family-paragraph-secondary-regular);
+  --label--font-size: var(--font-size-m--font-family-source-sans-3);
+  --search-results-alternative-label--font-weight: var(--font-weight-regular);
+  --single-comment--font-family: var(--font-family-paragraph-secondary-regular);
+  --single-post-meta--font-family: var(--font-family-source-sans-3-semi-bold);
+  --single-post-meta--font-size: var(--font-size-s--font-family-source-sans-3);
+  --single-post-meta--line-height: var(--line-height-m--font-family-source-sans-3);
+  --single-post-author--font-weight: var(--font-weight-semibold);
+  --site-footer--font-family: var(--font-family-paragraph-secondary-regular);
+  --site-footer--copyright--span--font-size: var(--font-size-xs--font-family-source-sans-3);
+  --site-footer--copyright--span--line-height: var(--line-height-xs--font-family-source-sans-3);
+  --top-page-tags--font-family: var(--font-family-paragraph-secondary-semibold);
+  --top-page-tags--font-size: var(--font-size-m--font-family-source-sans-3);
+  --top-navigation--font-family: var(--font-family-paragraph-secondary-regular);
+  --ui-datepicker--font-family: var(--font-family-paragraph-secondary-regular);
 }
 
 #nav-mobile-menu {
@@ -189,6 +225,19 @@ table.spreadsheet-table.is-color-gp-green {
   }
 }
 
+.cookies-settings-header h4 {
+  font-family: var(--font-family-paragraph-secondary-regular);
+}
+
+// Comments block
+.single-comment-meta {
+  font-family: var(--headings--font-family);
+}
+
+#gdpr-comments-compliance #gdpr-comments-label {
+  line-height: var(--line-height-m--font-family-source-sans-3);
+}
+
 // Standalone links
 .standalone-link,
 .comment-reply-link,
@@ -265,3 +314,58 @@ $palette: (
     color: var(--gp-green-800);
   }
 }
+
+// Gravity Forms
+.gfield .gchoice {
+  font-family: var(--font-family-paragraph-secondary-regular);
+}
+
+.gform_description {
+  font-family: var(--font-family-paragraph-secondary-regular);
+}
+
+// Overridden from /plugins/gravityforms/assets/css/dist/theme.min.css
+.gform_wrapper.gravity-theme input[type]:not(input[type="submit"]),
+.gform_wrapper.gravity-theme textarea,
+.gform_wrapper.gravity-theme select {
+  font-size: var(--font-size-m--font-family-source-sans-3) !important;
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-m--font-family-source-sans-3);
+}
+
+// Take action boxout
+.boxout .boxout-excerpt {
+  font-family: var(--font-family-paragraph-secondary-regular);
+}
+
+// Author block
+.author-block-info-name {
+  font-family: var(--font-family-paragraph-secondary-semibold);
+}
+
+.author-block-info div[itemprop="description"],
+.author-block-description-button {
+  font-family: var(--font-family-paragraph-secondary-regular);
+  font-size: var(--font-size-m--font-family-source-sans-3);
+  font-weight: var(--font-weight-regular);
+}
+
+// Footer
+.footer-menu li {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-m--font-family-source-sans-3);
+
+  a {
+    font-family: var(--font-family-paragraph-secondary-semibold);
+  }
+}
+
+// Post page
+.single-post-author {
+  font-family: var(--font-family-paragraph-secondary-semibold);
+}
+
+.top-page-tags {
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-m--font-family-source-sans-3);
+}
diff --git a/assets/src/scss/pages/post/_author-block.scss b/assets/src/scss/pages/post/_author-block.scss
@@ -50,8 +50,10 @@
 }
 
 .author-block-info-name {
-  font-size: 1.0625rem;
-  font-weight: bold;
+  _-- {
+    font-size: 1.0625rem;
+    font-weight: bold;
+  }
   margin: 16px 0;
   text-align: center;
 }

diff --git a/assets/src/scss/pages/post/_comments-block.scss b/assets/src/scss/pages/post/_comments-block.scss
@@ -7,8 +7,10 @@
 @include comment-level;
 
 .single-comment {
+  _-- {
+    font-family: var(--headings--font-family);
+  }
   padding-bottom: 24px;
-  font-family: var(--headings--font-family);
 
   &:not(:first-of-type) {
     border-top: 1px solid transparentize($grey-20, 0.5);

diff --git a/assets/src/scss/pages/post/_comments-form.scss b/assets/src/scss/pages/post/_comments-form.scss
@@ -49,8 +49,10 @@
   }
 
   #gdpr-comments-label {
+    _-- {
+      font-size: 14px;
+    }
     display: inline-block;
-    font-size: 14px;
   }
 }