Update to use Protocol v18.0.0 (#13529)

mozilla · Aug 16, 2023 · a1a5a0a · a1a5a0a
1 parent 4e57392
commit a1a5a0a
Show file tree

Hide file tree

Showing 39 changed files with 290 additions and 111 deletions.
diff --git a/bedrock/products/templates/products/relay/includes/waitlist-base.html b/bedrock/products/templates/products/relay/includes/waitlist-base.html
@@ -11,7 +11,7 @@
 {% endblock %}
 
 {% block sub_navigation %}
-{% include 'products/relay/includes/subnav.html' %}
+  {% include 'products/relay/includes/subnav.html' %}
 {% endblock %}
 
 {% set product_name = product_name|default(ftl('waitlist-premium-name')) %}

diff --git a/media/css/careers/styles.scss b/media/css/careers/styles.scss
@@ -2,8 +2,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img');
 @use './components/hero-text.scss';
 @use './components/hero-video.scss';
 @use './components/home.scss';
@@ -14,12 +13,11 @@ $image-path: '/media/protocol/img';
 @use './components/position.scss';
 @use './components/footer.scss';
 
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/components/modal';
-@import '~@mozilla-protocol/core/protocol/css/components/video';
-@import '~@mozilla-protocol/core/protocol/css/components/call-out';
-@import '~@mozilla-protocol/core/protocol/css/templates/card-layout';
-@import '../protocol/components/custom-menu-list';
+@use '~@mozilla-protocol/core/protocol/css/components/modal';
+@use '~@mozilla-protocol/core/protocol/css/components/video';
+@use '~@mozilla-protocol/core/protocol/css/components/call-out';
+@use '~@mozilla-protocol/core/protocol/css/templates/card-layout';
+@use '../protocol/components/custom-menu-list';
 
 .c-careers {
     .c-careers-section-title {

diff --git a/media/css/firefox/all/all-unified.scss b/media/css/firefox/all/all-unified.scss
@@ -8,7 +8,7 @@ $font-path: '/media/protocol/fonts';
 $image-path: '/media/protocol/img';
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/forms';
 @import '~@mozilla-protocol/core/protocol/css/templates/main-with-sidebar';
 @import '~@mozilla-protocol/core/protocol/css/components/modal';
 @import '~@mozilla-protocol/core/protocol/css/components/sidebar-menu';

diff --git a/media/css/firefox/browsers/best-browser.scss b/media/css/firefox/browsers/best-browser.scss
@@ -13,11 +13,15 @@ $image-path: '/media/protocol/img';
 .seo-hero {
     background: $color-purple-90 url('/media/img/firefox/browsers/best-browser/hero-pattern.png') 55% 60% no-repeat;
     @include background-size(2500px);
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
     text-align: center;
     min-height: 520px;
     margin-bottom: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
+
     .hero-content {
         padding-top: $layout-xl;
         padding-bottom: $layout-xl;
@@ -30,9 +34,13 @@ $image-path: '/media/protocol/img';
         h1 {
             @include font-base;
             @include text-title-lg;
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
             margin: 0 auto $spacing-2xl;
             max-width: 580px;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
 
         p {

diff --git a/media/css/firefox/browsers/windows-64-bit.scss b/media/css/firefox/browsers/windows-64-bit.scss
@@ -11,11 +11,15 @@ $image-path: '/media/protocol/img';
 
 .c-hero {
     background: $color-purple-90;
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
     text-align: center;
     min-height: 500px;
     margin-bottom: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
+
     .hero-content {
         padding-top: $layout-xl;
 
@@ -26,9 +30,13 @@ $image-path: '/media/protocol/img';
 
         h1 {
             @include text-title-lg;
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
             margin: 0 auto $spacing-2xl;
 
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
+
             @media #{$mq-lg} {
                 width: 400px;
             }

diff --git a/media/css/firefox/challenge-the-default/index.scss b/media/css/firefox/challenge-the-default/index.scss
@@ -11,7 +11,7 @@ $font-path: '/media/protocol/fonts';
 @import "./compare-table";
 
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
-@import '~@mozilla-protocol/core/protocol/css/includes/forms/lib';
+@import '~@mozilla-protocol/core/protocol/css/includes/forms';
 @import '~@mozilla-protocol/core/protocol/css/components/modal';
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/includes/mixins/details';

diff --git a/media/css/firefox/family/components/_dad-jokes-banner.scss b/media/css/firefox/family/components/_dad-jokes-banner.scss
@@ -3,6 +3,7 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 @use '../utils' as f3;
+@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
 
 .no-js .c-dad-jokes-banner {

diff --git a/media/css/firefox/family/styles.scss b/media/css/firefox/family/styles.scss
@@ -2,6 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with($image-path: '/media/protocol/img');
+
 @use './components/agreement';
 @use './components/blurb';
 @use './components/browser';

diff --git a/media/css/firefox/features/safebrowser.scss b/media/css/firefox/features/safebrowser.scss
@@ -11,11 +11,15 @@ $image-path: '/media/protocol/img';
 
 .c-hero {
     background: $color-purple-90;
-    color: get-theme('body-text-color-inverse');
+    color: $body-text-color-inverse;
     text-align: center;
     min-height: 520px;
     margin-bottom: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color-inverse);
+    }
+
     .hero-content {
         padding-top: $layout-xl;
         padding-bottom: $layout-xl;
@@ -28,9 +32,13 @@ $image-path: '/media/protocol/img';
         h1 {
             @include font-base;
             @include text-title-lg;
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
             margin: 0 auto $spacing-2xl;
             max-width: 580px;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
 
         p {

diff --git a/media/css/firefox/firstrun/nightly.scss b/media/css/firefox/firstrun/nightly.scss
@@ -31,11 +31,15 @@ main {
 
 .contribute-title {
     @include text-title-xs;
-    color: get-theme('title-text-color-inverse');
+    color: $title-text-color-inverse;
     font-weight: normal;
     margin: $spacing-lg auto;
     max-width: 580px;
     text-align: center;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color-inverse);
+    }
 }
 
 .contribute-list {

diff --git a/media/css/firefox/welcome10.scss b/media/css/firefox/welcome10.scss
@@ -31,19 +31,27 @@ $image-path: '/media/protocol/img';
 
 .c-pre-title {
     @include text-title-2xs;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     font-weight: bold;
     margin: 0 auto $spacing-xl;
     max-width: 750px;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     max-width: 750px;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }

diff --git a/media/css/firefox/welcome11.scss b/media/css/firefox/welcome11.scss
@@ -31,10 +31,14 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
@@ -89,12 +93,20 @@ $image-path: '/media/protocol/img';
 
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-image {

diff --git a/media/css/firefox/welcome12.scss b/media/css/firefox/welcome12.scss
@@ -31,10 +31,14 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
@@ -100,12 +104,20 @@ $image-path: '/media/protocol/img';
 
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-image {

diff --git a/media/css/firefox/welcome13.scss b/media/css/firefox/welcome13.scss
@@ -31,10 +31,14 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
     margin-left: auto;
     margin-right: auto;
 
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
+
     strong {
         color: $color-violet-50;
     }
@@ -100,12 +104,20 @@ $image-path: '/media/protocol/img';
 
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
     }
 
     .c-main-image {

diff --git a/media/css/firefox/welcome15.scss b/media/css/firefox/welcome15.scss
@@ -32,7 +32,11 @@ $image-path: '/media/protocol/img';
 
 .c-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .c-main-tagline {
@@ -80,12 +84,20 @@ $image-path: '/media/protocol/img';
 @media (prefers-color-scheme: dark) {
     #outer-wrapper {
         background: $color-dark-gray-60;
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
     }
 
     .c-main-title,
     .mzp-c-picto-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
     }
 
     .c-main-logo {

diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-ctd.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img', $font-path: '/media/protocol/fonts');
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import '~@mozilla-protocol/core/protocol/css/templates/multi-column';
 @import 'includes/base';
 @import 'includes/dark-mode';

diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-mobile.scss
@@ -2,11 +2,8 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-$font-path: '/media/protocol/fonts';
-$image-path: '/media/protocol/img';
-
+@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($image-path: '/media/protocol/img');
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
-@import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import 'includes/base';
 @import 'includes/dark-mode';