Bug 1964002: Create VPN icon that supports both dark and light theme r=emz

Differential Revision: https://phabricator.services.mozilla.com/D247548

browser/base/content/logos/vpn-dark.svg

@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="192" height="192" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M96 21.6c-7.953 0-14.4 6.447-14.4 14.4S88.047 50.4 96 50.4s14.4-6.447 14.4-14.4-6.447-14.4-14.4-14.4zM62.4 36C62.4 17.443 77.443 2.4 96 2.4c18.557 0 33.6 15.043 33.6 33.6 0 18.557-15.043 33.6-33.6 33.6a33.45 33.45 0 01-15.985-4.039L65.561 80.015A33.397 33.397 0 0168.21 86.4h55.582c4.131-13.88 16.988-24 32.209-24 18.557 0 33.6 15.043 33.6 33.6 0 18.557-15.043 33.6-33.6 33.6a33.452 33.452 0 01-15.985-4.039l-14.454 14.454A33.452 33.452 0 01129.6 156c0 18.557-15.043 33.6-33.6 33.6-18.557 0-33.6-15.043-33.6-33.6 0-18.557 15.043-33.6 33.6-33.6a33.452 33.452 0 0115.985 4.039l14.454-14.454a33.37 33.37 0 01-2.648-6.385H68.209c-4.131 13.879-16.988 24-32.209 24-18.557 0-33.6-15.043-33.6-33.6 0-18.557 15.043-33.6 33.6-33.6a33.45 33.45 0 0115.985 4.039l14.454-14.454A33.45 33.45 0 0162.4 36zm19.2 120c0-7.953 6.447-14.4 14.4-14.4s14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4-14.4-6.447-14.4-14.4zM36 81.6c-7.953 0-14.4 6.447-14.4 14.4s6.447 14.4 14.4 14.4 14.4-6.447 14.4-14.4S43.953 81.6 36 81.6zM141.6 96c0-7.953 6.447-14.4 14.4-14.4s14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4-14.4-6.447-14.4-14.4z" fill="#fff"/>
-</svg>

browser/base/content/logos/vpn-light.svg

@@ -1,6 +0,0 @@
-<!-- This Source Code Form is subject to the terms of the Mozilla Public
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
-<svg width="188" height="188" xmlns="http://www.w3.org/2000/svg">
-  <path d="M94 19.6c-7.953 0-14.4 6.447-14.4 14.4S86.047 48.4 94 48.4s14.4-6.447 14.4-14.4-6.447-14.4-14.4-14.4zM60.4 34C60.4 15.443 75.443.4 94 .4c18.557 0 33.6 15.043 33.6 33.6 0 18.557-15.043 33.6-33.6 33.6a33.45 33.45 0 01-15.985-4.039L63.561 78.015A33.397 33.397 0 0166.21 84.4h55.582c4.131-13.88 16.988-24 32.209-24 18.557 0 33.6 15.043 33.6 33.6 0 18.557-15.043 33.6-33.6 33.6a33.452 33.452 0 01-15.985-4.039l-14.454 14.454A33.452 33.452 0 01127.6 154c0 18.557-15.043 33.6-33.6 33.6-18.557 0-33.6-15.043-33.6-33.6 0-18.557 15.043-33.6 33.6-33.6a33.452 33.452 0 0115.985 4.039l14.454-14.454a33.37 33.37 0 01-2.648-6.385H66.209c-4.131 13.879-16.988 24-32.209 24C15.443 127.6.4 112.557.4 94 .4 75.443 15.443 60.4 34 60.4a33.45 33.45 0 0115.985 4.039l14.454-14.454A33.45 33.45 0 0160.4 34zm19.2 120c0-7.953 6.447-14.4 14.4-14.4s14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4-14.4-6.447-14.4-14.4zM34 79.6c-7.953 0-14.4 6.447-14.4 14.4s6.447 14.4 14.4 14.4 14.4-6.447 14.4-14.4S41.953 79.6 34 79.6zM139.6 94c0-7.953 6.447-14.4 14.4-14.4s14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4-14.4-6.447-14.4-14.4z" fill="#000" fill-rule="evenodd"/>
-</svg>

browser/base/content/logos/vpn.svg

@@ -0,0 +1,18 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="192" height="192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  @media (prefers-color-scheme: light) {
+    path {
+      fill: #000;
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    path {
+      fill: #fff;
+    }
+  }
+</style>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96 21.6c-7.953 0-14.4 6.447-14.4 14.4S88.047 50.4 96 50.4s14.4-6.447 14.4-14.4-6.447-14.4-14.4-14.4zM62.4 36C62.4 17.443 77.443 2.4 96 2.4c18.557 0 33.6 15.043 33.6 33.6 0 18.557-15.043 33.6-33.6 33.6a33.45 33.45 0 01-15.985-4.039L65.561 80.015A33.397 33.397 0 0168.21 86.4h55.582c4.131-13.88 16.988-24 32.209-24 18.557 0 33.6 15.043 33.6 33.6 0 18.557-15.043 33.6-33.6 33.6a33.452 33.452 0 01-15.985-4.039l-14.454 14.454A33.452 33.452 0 01129.6 156c0 18.557-15.043 33.6-33.6 33.6-18.557 0-33.6-15.043-33.6-33.6 0-18.557 15.043-33.6 33.6-33.6a33.452 33.452 0 0115.985 4.039l14.454-14.454a33.37 33.37 0 01-2.648-6.385H68.209c-4.131 13.879-16.988 24-32.209 24-18.557 0-33.6-15.043-33.6-33.6 0-18.557 15.043-33.6 33.6-33.6a33.45 33.45 0 0115.985 4.039l14.454-14.454A33.45 33.45 0 0162.4 36zm19.2 120c0-7.953 6.447-14.4 14.4-14.4s14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4-14.4-6.447-14.4-14.4zM36 81.6c-7.953 0-14.4 6.447-14.4 14.4s6.447 14.4 14.4 14.4 14.4-6.447 14.4-14.4S43.953 81.6 36 81.6zM141.6 96c0-7.953 6.447-14.4 14.4-14.4s14.4 6.447 14.4 14.4-6.447 14.4-14.4 14.4-14.4-6.447-14.4-14.4z" />
+</svg>

browser/base/jar.mn

@@ -24,8 +24,7 @@ browser.jar:
         content/browser/logos/send.svg                (content/logos/send.svg)
         content/browser/logos/tracking-protection-dark-theme.svg (content/logos/tracking-protection-dark-theme.svg)
         content/browser/logos/tracking-protection.svg (content/logos/tracking-protection.svg)
-        content/browser/logos/vpn-dark.svg            (content/logos/vpn-dark.svg)
+        content/browser/logos/vpn.svg                 (content/logos/vpn.svg)
-        content/browser/logos/vpn-light.svg           (content/logos/vpn-light.svg)
         content/browser/logos/vpn-promo-logo.svg      (content/logos/vpn-promo-logo.svg)
         content/browser/aboutRobots-icon.png          (content/aboutRobots-icon.png)
         content/browser/aboutFrameCrashed.html        (content/aboutFrameCrashed.html)

browser/components/protections/content/protections.css

@@ -149,8 +149,6 @@ h2 {
 #manage-protections,
 .etp-card .icon.dark,
 .proxy-card .icon.dark,
-.vpn-card .icon.dark,
-.vpn-banner .icon.dark,
 a.hidden,
 .loading .card-body,
 .lockwise-card.hidden,
@@ -212,16 +210,12 @@ a.hidden,
   }
 
   .etp-card .icon.dark,
-  .proxy-card .icon.dark,
+  .proxy-card .icon.dark {
-  .vpn-card .icon.dark,
-  .vpn-banner .icon.dark {
     display: block;
   }
 
   .etp-card .icon.light,
-  .proxy-card .icon.light,
+  .proxy-card .icon.light {
-  .vpn-card .icon.light,
-  .vpn-banner .icon.light {
     display: none;
   }
 }

browser/components/protections/content/protections.html

@@ -29,14 +29,7 @@
   <body>
     <div class="new-banner vpn-banner hidden">
       <div class="banner-wrapper">
-        <img
+        <img class="icon" src="chrome://browser/content/logos/vpn.svg" />
-          class="icon light"
-          src="chrome://browser/content/logos/vpn-light.svg"
-        />
-        <img
-          class="icon dark"
-          src="chrome://browser/content/logos/vpn-dark.svg"
-        />
         <div class="wrapper">
           <div>
             <h3 class="banner-title" data-l10n-id="vpn-banner-header"></h3>
@@ -549,14 +542,7 @@
 
       <section class="card card-no-hover vpn-card hidden">
         <div class="card-header">
-          <img
+          <img class="icon" src="chrome://browser/content/logos/vpn.svg" />
-            class="icon light"
-            src="chrome://browser/content/logos/vpn-light.svg"
-          />
-          <img
-            class="icon dark"
-            src="chrome://browser/content/logos/vpn-dark.svg"
-          />
           <div class="wrapper">
             <div>
               <div class="title-wrapper">