Update protocol to v18.0.0 (#13146)

* Update to protocol v18.0.0 and remove get-theme refrences
mozilla · Aug 4, 2023 · 68ac7cc · 68ac7cc
1 parent 8c8b597
commit 68ac7cc
Show file tree

Hide file tree

Showing 35 changed files with 227 additions and 91 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/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/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/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';
-
-@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
+@import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @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,9 +2,6 @@
 // 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';
-
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import 'includes/base';

diff --git a/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss b/media/css/firefox/whatsnew/whatsnew-115-eu-vpn.scss
@@ -2,9 +2,6 @@
 // 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';
-
 @import '~@mozilla-protocol/core/protocol/css/components/notification-bar';
 @import '~@mozilla-protocol/core/protocol/css/includes/lib';
 @import 'includes/base';

diff --git a/media/css/firefox/whatsnew/whatsnew-account.scss b/media/css/firefox/whatsnew/whatsnew-account.scss
@@ -31,7 +31,11 @@ $image-path: '/media/protocol/img';
 
 .wnp-main-title {
     @include text-title-md;
-    color: get-theme('title-text-color');
+    color: $title-text-color;
+
+    @supports (--css: variables) {
+        color: var(--title-text-color);
+    }
 }
 
 .wnp-main-tagline {
@@ -68,12 +72,20 @@ $image-path: '/media/protocol/img';
         color: $color-white;
 
         h2.thank-you {
-            color: get-theme('title-text-color-inverse');
+            color: $title-text-color-inverse;
+
+            @supports (--css: variables) {
+                color: var(--title-text-color-inverse);
+            }
         }
     }
 
     .wnp-main-title {
-        color: get-theme('title-text-color-inverse');
+        color: $title-text-color-inverse;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color-inverse);
+        }
 
         strong {
             color: $color-violet-20;

diff --git a/media/css/firefox/whatsnew/whatsnew-nightly.scss b/media/css/firefox/whatsnew/whatsnew-nightly.scss
@@ -38,11 +38,15 @@ body {
 
 .mzp-c-emphasis-box {
     @include border-box;
-    color: get-theme('body-text-color');
+    color: $body-text-color;
     margin: 0 auto $layout-sm;
     max-width: $content-md - ($layout-md * 2);
     padding: $spacing-xl;
 
+    @supports (--css: variables) {
+        color: var(--body-text-color);
+    }
+
     a:link,
     a:visited {
         color: $color-ink-80;
@@ -59,7 +63,11 @@ body {
 
     .c-emphasis-box-title {
         @include text-title-sm;
-        color: get-theme('title-text-color');
+        color: $title-text-color;
         text-align: center;
+
+        @supports (--css: variables) {
+            color: var(--title-text-color);
+        }
     }
 }