Bug 1789728 - Implement "Supernova" icons in Import and Export. r=aleca

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

--HG--
extra : histedit_source : 999044866d030340b78020201e8b6cd6da6ebffb

mail/themes/shared/jar.inc.mn

@@ -625,11 +625,13 @@
   skin/classic/messenger/icons/new/touch/chat.svg             (../shared/mail/icons/new/touch/chat.svg)
   skin/classic/messenger/icons/new/touch/collapse.svg         (../shared/mail/icons/new/touch/collapse.svg)
   skin/classic/messenger/icons/new/touch/dictionary.svg       (../shared/mail/icons/new/touch/dictionary.svg)
+  skin/classic/messenger/icons/new/touch/export.svg           (../shared/mail/icons/new/touch/export.svg)
   skin/classic/messenger/icons/new/touch/extension-update-available.svg (../shared/mail/icons/new/touch/extension-update-available.svg)
   skin/classic/messenger/icons/new/touch/extension-update-recent.svg (../shared/mail/icons/new/touch/extension-update-recent.svg)
   skin/classic/messenger/icons/new/touch/extension.svg        (../shared/mail/icons/new/touch/extension.svg)
   skin/classic/messenger/icons/new/touch/features.svg         (../shared/mail/icons/new/touch/features.svg)
   skin/classic/messenger/icons/new/touch/globe.svg            (../shared/mail/icons/new/touch/globe.svg)
+  skin/classic/messenger/icons/new/touch/import.svg           (../shared/mail/icons/new/touch/import.svg)
   skin/classic/messenger/icons/new/touch/language.svg         (../shared/mail/icons/new/touch/language.svg)
   skin/classic/messenger/icons/new/touch/lock.svg             (../shared/mail/icons/new/touch/lock.svg)
   skin/classic/messenger/icons/new/touch/mail.svg             (../shared/mail/icons/new/touch/mail.svg)

mail/themes/shared/mail/aboutImport.css

@@ -153,20 +153,28 @@ dd {
 
 .tabPane h1::before {
   content: "";
-  background-image: url("chrome://messenger/skin/icons/spaces.svg");
   background-repeat: no-repeat;
   background-position: bottom center;
   display: inline-block;
-  width: 1em;
-  height: 1em;
-  fill: currentColor;
-  -moz-context-properties: fill;
+  width: 24px;
+  height: 24px;
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
   color: var(--primary);
   margin-inline-end: var(--title-icon-margin);
   position: absolute;
   inset-inline-start: calc(-1 * (var(--main-title-size) + var(--title-icon-margin)));
 }
 
+#tabPane-start.tabPane h1::before {
+  background-image: var(--icon-import-lg);
+}
+
+#tabPane-export.tabPane h1::before {
+  background-image: var(--icon-export-lg);
+}
+
 .source-list {
   padding: 1em 0;
 }
@@ -263,10 +271,10 @@ calendar-item-summary {
 }
 
 .summary-items {
-  list-style-image: url("chrome://global/skin/icons/check.svg");
+  list-style-image: var(--icon-check);
   list-style-position: inside;
-  -moz-context-properties: fill;
-  fill: var(--color-green-60);
+  -moz-context-properties: stroke;
+  stroke: var(--color-green-60);
   line-height: 1.8;
 }
 
@@ -322,8 +330,9 @@ a.center-button {
 .icon {
   object-fit: contain;
   vertical-align: middle;
-  fill: currentColor;
-  -moz-context-properties: fill;
+  -moz-context-properties: fill, stroke;
+  fill: color-mix(in srgb, currentColor 20%, transparent);
+  stroke: currentColor;
 }
 
 .icon.info {
@@ -335,16 +344,16 @@ a.center-button {
 }
 
 .back {
-  background-image: url("chrome://messenger/skin/icons/move-left.svg");
+  background-image: var(--icon-nav-left);
   background-repeat: no-repeat;
   background-position: 0.5em center;
-  -moz-context-properties: fill;
-  fill: currentColor;
+  -moz-context-properties: stroke;
+  stroke: currentColor;
   padding-inline-start: 1em;
 }
 
 .back:dir(rtl) {
-  background-image: url("chrome://messenger/skin/icons/move-right.svg");
+  background-image: var(--icon-nav-right);
   background-position-x: right 0.5em;
 }
 

mail/themes/shared/mail/icons.css

@@ -125,6 +125,9 @@
   --icon-user-list: url("chrome://messenger/skin/icons/new/compact/user-list.svg");
   --icon-warning: url("chrome://messenger/skin/icons/new/compact/warning.svg");
 
+  --icon-import-lg : url("chrome://messenger/skin/icons/new/touch/import.svg");
+  --icon-export-lg : url("chrome://messenger/skin/icons/new/touch/export.svg");
+
   --icon-calendar-empty: url("chrome://messenger/skin/icons/new/calendar-empty.svg");
   --icon-circle-small: url("chrome://messenger/skin/icons/new/circle-sm.svg");
   --icon-loading: url("chrome://messenger/skin/icons/new/loading.svg");

mail/themes/shared/mail/icons/new/touch/export.svg

@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+  <path d="M17.5 5.5V16c0 1.385-1.115 2.5-2.5 2.5H6.5v.5c0 1.385 1.115 2.5 2.5 2.5h9c1.385 0 2.5-1.115 2.5-2.5V8c0-1.385-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+  <path d="M6 2C4.347 2 3 3.346 3 5v11c0 1.653 1.347 3 3 3 0 1.653 1.347 3 3 3h9c1.653 0 3-1.347 3-3V8c0-1.654-1.347-3-3-3 0-1.654-1.347-3-3-3H6zm0 1h9c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H6c-1.117 0-2-.884-2-2V5c0-1.117.883-2 2-2zm4.5 2a.522.522 0 0 0-.035.006.495.495 0 0 0-.283.115.476.476 0 0 0-.036.025l-3 3a.5.5 0 0 0 .708.708L10 6.707V12.5a.5.5 0 0 0 1 0V6.707l2.146 2.147a.499.499 0 1 0 .708-.708l-3-3a.467.467 0 0 0-.036-.025.515.515 0 0 0-.132-.08.494.494 0 0 0-.15-.035A.522.522 0 0 0 10.5 5zM18 6c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H9c-1.117 0-2-.884-2-2h8c1.653 0 3-1.347 3-3V6zM6.5 13a.5.5 0 0 0-.5.5v.5c0 1.099.9 2 2 2h5c1.1 0 2-.901 2-2v-.5a.5.5 0 0 0-1 0v.5c0 .562-.437 1-1 1H8c-.563 0-1-.438-1-1v-.5a.5.5 0 0 0-.5-.5z" fill="context-stroke"/>
+</svg>

mail/themes/shared/mail/icons/new/touch/import.svg

@@ -0,0 +1,7 @@
+<!-- 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 xmlns="http://www.w3.org/2000/svg" fill-opacity="context-fill-opacity" viewBox="0 0 24 24" height="24" width="24">
+  <path d="M17.5 5.5V16c0 1.385-1.115 2.5-2.5 2.5H6.5v.5c0 1.385 1.115 2.5 2.5 2.5h9c1.385 0 2.5-1.115 2.5-2.5V8c0-1.385-1.115-2.5-2.5-2.5Z" fill="context-fill"/>
+  <path d="M6 2C4.347 2 3 3.346 3 5v11c0 1.653 1.347 3 3 3 0 1.653 1.347 3 3 3h9c1.653 0 3-1.347 3-3V8c0-1.654-1.347-3-3-3 0-1.654-1.347-3-3-3Zm0 1h9c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H6c-1.117 0-2-.884-2-2V5c0-1.117.883-2 2-2Zm4.5 2a.5.5 0 0 0-.5.5v5.793L7.854 9.146A.5.5 0 0 0 7.5 9a.5.5 0 0 0-.354.146.5.5 0 0 0 0 .707l3 3a.5.5 0 0 0 .036.026.5.5 0 0 0 .058.04.5.5 0 0 0 .074.04.5.5 0 0 0 .065.021.5.5 0 0 0 .086.014.5.5 0 0 0 .035.006.5.5 0 0 0 .035-.006.5.5 0 0 0 .086-.014.5.5 0 0 0 .065-.021.5.5 0 0 0 .074-.04.5.5 0 0 0 .058-.04.5.5 0 0 0 .036-.026l3-3a.5.5 0 0 0 0-.707.5.5 0 0 0-.708 0L11 11.293V5.5a.5.5 0 0 0-.5-.5ZM18 6c1.117 0 2 .883 2 2v11c0 1.116-.883 2-2 2H9c-1.117 0-2-.884-2-2h8c1.653 0 3-1.347 3-3zM6.5 13a.5.5 0 0 0-.5.5v.5c0 1.099.9 2 2 2h5c1.1 0 2-.901 2-2v-.5a.5.5 0 0 0-.5-.5.5.5 0 0 0-.5.5v.5c0 .562-.437 1-1 1H8c-.563 0-1-.438-1-1v-.5a.5.5 0 0 0-.5-.5Z" fill="context-stroke"/>
+</svg>

mailnews/import/content/aboutImport.xhtml

@@ -161,7 +161,7 @@
         </dl>
         <h2 data-l10n-id="items-pane-title2" class="light-heading"></h2>
         <p>
-          <img src="chrome://messenger/skin/icons/info.svg"
+          <img src="chrome://messenger/skin/icons/new/compact/info.svg"
                class="info icon"
                alt=""/>
           <span data-l10n-id="items-pane-override"></span>
@@ -185,7 +185,7 @@
           </label>
         </div>
         <p class="center">
-          <img src="chrome://global/skin/icons/warning.svg"
+          <img src="chrome://messenger/skin/icons/new/compact/warning.svg"
                class="icon warn"
                alt=""/>
           <span data-l10n-id="summary-pane-warning"></span>
@@ -221,7 +221,7 @@
                 class="progressFinish no-restart center-button btn-link"
                 onclick="restart()"></button>
         <p class="restart-only center">
-          <img src="chrome://global/skin/icons/warning.svg"
+          <img src="chrome://messenger/skin/icons/new/compact/warning.svg"
                class="icon warn"
                alt=""/>
           <span data-l10n-id="summary-pane-warning"></span>
@@ -328,7 +328,7 @@
                 class="progressFinish no-restart center-button btn-link"
                 onclick="restart()"></button>
         <p class="restart-only center">
-          <img src="chrome://global/skin/icons/warning.svg"
+          <img src="chrome://messenger/skin/icons/new/compact/warning.svg"
                class="icon warn"
                alt=""/>
           <span data-l10n-id="summary-pane-warning"></span>
@@ -413,7 +413,7 @@
                 class="progressFinish no-restart center-button btn-link"
                 onclick="restart()"></button>
         <p class="restart-only center">
-          <img src="chrome://global/skin/icons/warning.svg"
+          <img src="chrome://messenger/skin/icons/new/compact/warning.svg"
                class="icon warn"
                alt=""/>
           <span data-l10n-id="summary-pane-warning"></span>
@@ -436,7 +436,7 @@
         <h1 data-l10n-id="export-profile"></h1>
         <h2 data-l10n-id="export-profile-title"></h2>
         <p class="description">
-          <img src="chrome://messenger/skin/icons/info.svg"
+          <img src="chrome://messenger/skin/icons/new/compact/info.svg"
                class="info icon"
                alt=""/>
           <span data-l10n-id="export-profile-description"></span>