Refresh: update brand fonts globally [fix #15088] (#15144)

mozilla · Sep 17, 2024 · 425f92b · 425f92b
1 parent 2702fb9
commit 425f92b
Show file tree

Hide file tree

Showing 55 changed files with 322 additions and 125 deletions.
diff --git a/bedrock/base/templates/base-protocol-mozilla.html b/bedrock/base/templates/base-protocol-mozilla.html
@@ -9,7 +9,11 @@
 {% block body_class %}mzp-t-mozilla{% endblock %}
 
 {% block site_css %}
-  {{ css_bundle('protocol-mozilla') }}
+  {% if switch('m24-global-styles') %}
+    {{ css_bundle('protocol-mozilla-2024') }}
+  {% else %}
+    {{ css_bundle('protocol-mozilla') }}
+  {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}

diff --git a/bedrock/base/templates/base-protocol.html b/bedrock/base/templates/base-protocol.html
@@ -72,7 +72,11 @@
     <!--[if !IE]><!-->
     {# Global styles, hidden from IE9 and lower #}
     {% block site_css %}
-      {{ css_bundle('protocol-firefox') }}
+      {% if switch('m24-global-styles') %}
+        {{ css_bundle('protocol-mozilla-2024') }}
+      {% else %}
+        {{ css_bundle('protocol-firefox') }}
+      {% endif %}
       {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
         {{ css_bundle('m24-navigation-and-footer') }}
       {% endif %}

diff --git a/bedrock/base/templates/includes/protocol/footer/footer-refresh.html b/bedrock/base/templates/includes/protocol/footer/footer-refresh.html
@@ -71,7 +71,7 @@ <h2 class="moz24-footer-label" data-testid="footer-heading-resources">
               {{ ftl('footer-refresh-resources') }}
             </h2>
             <ul class="moz24-footer-primary-list" data-testid="footer-list-resources">
-              <li><a href="https://www.mozilla.org/advertising/" data-link-type="footer" data-link-text="Advertise with Mozilla">{{ ftl('footer-refresh-advertise') }}</a></li>
+              <li><a href="{{ url('mozorg.advertising') }}" data-link-type="footer" data-link-text="Advertise with Mozilla">{{ ftl('footer-refresh-advertise') }}</a></li>
               <li><a href="https://mozilla.design/?{{ utm_params }}&utm_content=resources" data-link-type="footer" data-link-text="Brand Standards">{{ ftl('footer-refresh-brand-standards') }}</a></li>
               <li><a href="/firefox/{{ latest_firefox_version }}/releasenotes/" data-link-type="footer" data-link-text="Firefox Release Notes">{{ ftl('footer-refresh-firefox-release-notes') }}</a></li>
             </ul>

diff --git a/bedrock/firefox/templates/firefox/new/basic/base.html b/bedrock/firefox/templates/firefox/new/basic/base.html
@@ -31,7 +31,11 @@
 
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
-  {{ css_bundle('protocol-firefox') }}
+  {% if switch('m24-global-styles') %}
+    {{ css_bundle('protocol-mozilla-2024') }}
+  {% else %}
+    {{ css_bundle('protocol-firefox') }}
+  {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}

diff --git a/bedrock/firefox/templates/firefox/new/desktop/base.html b/bedrock/firefox/templates/firefox/new/desktop/base.html
@@ -31,7 +31,11 @@
 
 {# All stylesheets are loaded in extrahead to serve legacy IE basic styles #}
 {% block extrahead %}
-  {{ css_bundle('protocol-firefox') }}
+  {% if switch('m24-global-styles') %}
+    {{ css_bundle('protocol-mozilla-2024') }}
+  {% else %}
+    {{ css_bundle('protocol-firefox') }}
+  {% endif %}
   {% if switch('m24-navigation-and-footer') and LANG.startswith('en-') %}
     {{ css_bundle('m24-navigation-and-footer') }}
   {% endif %}

diff --git a/bedrock/mozorg/views.py b/bedrock/mozorg/views.py
@@ -137,7 +137,7 @@ class HomeView(L10nTemplateView):
     def get_template_names(self):
         experience = self.request.GET.get("xv", None)
 
-        if switch("m24-home") and self.request.locale.startswith("en"):
+        if switch("m24-home") and self.request.locale.startswith("en") and experience != "legacy":
             return [self.m24_template_name]
         elif ftl_file_is_active("mozorg/home-new") and experience != "legacy":
             return [self.template_name]

diff --git a/bedrock/newsletter/templates/newsletter/security-privacy-news.html b/bedrock/newsletter/templates/newsletter/security-privacy-news.html
@@ -4,7 +4,7 @@
  file, You can obtain one at https://mozilla.org/MPL/2.0/.
 #}
 
-{% extends 'base-protocol.html' %}
+{% extends 'base-protocol-mozilla.html' %}
 
 {% block page_title %}{{ ftl('newsletters-subscribe-to-the-newsletter') }}{% endblock page_title %}
 

diff --git a/media/css/careers/components/diversity.scss b/media/css/careers/components/diversity.scss
@@ -10,8 +10,8 @@ $image-path: '/media/protocol/img';
 
 .c-careers-diversity-numbers {
     .mzp-c-picto-heading {
-        @include font-base;
         margin-bottom: $spacing-md;
+        font-family: var(--body-font-family);
         font-weight: 400;
     }
 }
@@ -87,8 +87,8 @@ $image-path: '/media/protocol/img';
 
                 p {
                     @include text-body-sm;
-                    @include font-base;
                     color: $color-dark-gray-20;
+                    font-family: var(--body-font-family);
                     font-weight: 700;
                     margin-bottom: 0;
                 }

diff --git a/media/css/careers/components/locations.scss b/media/css/careers/components/locations.scss
@@ -18,7 +18,6 @@
 
         a,
         span {
-            @include font-mozilla;
             @include text-body-xl;
             font-weight: bold;
         }

diff --git a/media/css/careers/components/position.scss b/media/css/careers/components/position.scss
@@ -40,7 +40,7 @@
     margin-bottom: $spacing-lg;
 
     .mzp-c-menu-list-title {
-        @include font-base;
+        font-family: var(--body-font-family);
     }
 
     ul {

diff --git a/media/css/careers/components/testimonials.scss b/media/css/careers/components/testimonials.scss
@@ -87,9 +87,9 @@ $image-path: '/media/protocol/img';
             }
 
             q {
-                @include font-mozilla;
                 @include font-size(28px);
                 color: $color-black;
+                font-family: var(--title-font-family);
                 font-weight: bold;
                 margin-bottom: $spacing-md;
                 position: relative;
@@ -210,8 +210,9 @@ $image-path: '/media/protocol/img';
 
         blockquote {
             @include text-title-2xs;
-            font-weight: 400;
             border: 0;
+            color: $color-black;
+            font-weight: 400;
 
             .c-careers-testimonial-quote {
                 position: relative;
@@ -261,8 +262,8 @@ $image-path: '/media/protocol/img';
 
     p {
         @include text-body-sm;
-        @include font-base;
         color: $color-dark-gray-20;
+        font-family: var(--body-font-family);
         font-weight: 700;
         margin-bottom: 0;
     }

diff --git a/media/css/firefox/challenge-the-default/_compare-table.scss b/media/css/firefox/challenge-the-default/_compare-table.scss
@@ -16,14 +16,12 @@
 
 
         h2 {
-            @include font-firefox;
             @include font-size(40px);
             font-weight: 800;
             margin-bottom: $spacing-lg;
         }
 
         p {
-            @include font-firefox;
             color: $color-marketing-gray-70;
             font-weight: 600;
         }
@@ -72,7 +70,6 @@
         }
 
         th {
-            @include font-firefox;
             max-width: 150px;
             border: 2.5px solid $color-black;
             font-size: 14px;

diff --git a/media/css/firefox/challenge-the-default/_hero.scss b/media/css/firefox/challenge-the-default/_hero.scss
@@ -41,7 +41,6 @@ $campaign-red: #ff6a75;
 }
 
 .c-ctd-hero {
-    @include font-firefox;
     background: $campaign-red;
     padding: 6px 24px 24px;
     width: 100%;
@@ -214,7 +213,6 @@ $campaign-red: #ff6a75;
         }
 
         h1 {
-            @include font-firefox;
             @include font-size(36px);
             color: $color-black;
             font-weight: 800;

diff --git a/media/css/firefox/challenge-the-default/index.scss b/media/css/firefox/challenge-the-default/index.scss
@@ -257,15 +257,13 @@ html:not(.is-firefox) {
     background-color: $color-white;
 
     h2 {
-        @include font-firefox;
         @include font-size(40px);
         font-weight: 800;
         margin-bottom: $spacing-lg;
         hyphens: auto;
     }
 
     p {
-        @include font-firefox;
         color: $color-marketing-gray-70;
         font-weight: 600;
     }
@@ -359,7 +357,6 @@ html:not(.is-firefox) {
         }
 
         p {
-            @include font-firefox;
             color: $color-marketing-gray-70;
             font-weight: 600;
             margin-top: $spacing-xl;
@@ -422,7 +419,6 @@ html:not(.is-firefox) {
     }
 
     p {
-        @include font-firefox;
         @include font-size(20px);
         font-weight: 600;
         max-width: 475px;

diff --git a/media/css/firefox/family/components/_hero.scss b/media/css/firefox/family/components/_hero.scss
@@ -40,7 +40,6 @@ $image-path: '/media/protocol/img';
 
     .c-blurb {
         @include text-body-lg;
-        @include font-firefox;
 
         --shadow-offset: #{$border-radius-md};
         @include f3.card-shadow;

diff --git a/media/css/firefox/new/desktop/download.scss b/media/css/firefox/new/desktop/download.scss
@@ -913,7 +913,6 @@ button.mzp-c-cta-link {
 
     thead {
         th {
-            @include font-firefox;
             @include text-title-xs;
             border-bottom: 3px solid $color-marketing-gray-20;
             font-weight: bold;

diff --git a/media/css/firefox/nothing-personal/_browser.scss b/media/css/firefox/nothing-personal/_browser.scss
@@ -126,10 +126,6 @@
         margin-bottom: $layout-lg;
 
         .c-browser-window-top {
-            h2 {
-                @include text-title-2xl;
-            }
-
             &::after {
                 height: 95px;
                 bottom: 6px;

diff --git a/media/css/firefox/nothing-personal/styles.scss b/media/css/firefox/nothing-personal/styles.scss
@@ -86,7 +86,6 @@ $mq-tad-smaller-sm: 455px;
 }
 
 .c-sign-off {
-    @include font-firefox;
     @include text-title-xs;
     margin: $layout-lg 0;
 

diff --git a/media/css/firefox/releasenotes.scss b/media/css/firefox/releasenotes.scss
@@ -172,8 +172,8 @@ $image-path: '/media/protocol/img';
 }
 
 .c-release-version {
-    @include font-base;
     @include text-title-xl;
+    font-family: var(--body-font-family);
     display: block;
 }
 
@@ -184,20 +184,20 @@ $image-path: '/media/protocol/img';
 
 .mzp-l-content {
     .c-release-product {
-        @include font-base;
         @include text-title-2xs;
+        font-family: var(--body-font-family);
         display: block;
     }
 
     .c-release-date {
-        @include font-base;
         @include text-title-2xs;
+        font-family: var(--body-font-family);
     }
 
     .c-release-first-title,
     .c-release-draft-title {
-        @include font-base;
         @include text-title-2xs;
+        font-family: var(--body-font-family);
         font-weight: bold;
 
         // pushes the text down after the big release-version text
@@ -310,6 +310,11 @@ $image-path: '/media/protocol/img';
 }
 
 // icons
+.c-release-notes .mzp-l-sidebar {
+    display: flex;
+    align-items: flex-start;
+}
+
 .sidebar-icon {
     float: left;
     margin-right: $spacing-sm;

diff --git a/media/css/firefox/switch.scss b/media/css/firefox/switch.scss
@@ -105,7 +105,7 @@ $image-path: '/media/protocol/img';
 
 .c-share-title {
     @include text-body-lg;
-    @include font-firefox;
+    font-family: var(--body-font-family);
 }
 
 .c-share {

diff --git a/media/css/foundation/annual-report-2019-2020.scss b/media/css/foundation/annual-report-2019-2020.scss
@@ -118,9 +118,8 @@ $image-path: '/media/protocol/img';
 // Content sections
 .c-intro-section {
     p {
-        @include font-mozilla;
         @include text-title-sm;
-        font-style: italic;
+        font-family: var(--title-font-family);
         margin-bottom: 0;
     }
 }
@@ -333,8 +332,8 @@ $image-path: '/media/protocol/img';
     }
 
     li {
-        @include font-mozilla;
         @include text-title-sm;
+        font-family: var(--title-font-family);
         margin-left: $spacing-md;
         margin-bottom: $spacing-lg;
         padding-left: $spacing-sm;
@@ -537,8 +536,8 @@ $image-path: '/media/protocol/img';
     }
 
     span {
-        @include font-mozilla;
         @include text-title-xs;
+        font-family: var(--title-font-family);
         font-weight: bold;
         display: block;
         margin-bottom: $spacing-md;
@@ -587,8 +586,8 @@ $image-path: '/media/protocol/img';
     margin-bottom: $spacing-2xl;
 
     .highlight {
-        @include font-mozilla;
         @include text-title-xs;
+        font-family: var(--title-font-family);
         font-weight: bold;
     }
 

diff --git a/media/css/foundation/annual-report-2021.scss b/media/css/foundation/annual-report-2021.scss
@@ -56,7 +56,6 @@ main {
     text-align: center;
 
     h1 {
-        @include font-base;
         @include text-title-xl;
         color: $color-white;
         font-weight: normal;
@@ -277,8 +276,8 @@ main {
     }
 
     span {
-        @include font-mozilla;
         @include text-title-xs;
+        font-family: var(--title-font-family);
         display: block;
         font-weight: bold;
         margin-bottom: $spacing-md;

diff --git a/media/css/foundation/annual-report.scss b/media/css/foundation/annual-report.scss
@@ -187,9 +187,8 @@ $image-path: '/media/protocol/img';
 
 .c-intro-section {
     p {
-        @include font-mozilla;
         @include text-title-sm;
-        font-style: italic;
+        font-family: var(--title-font-family);
         margin-bottom: 0;
     }
 }