[OS Settings] Use semantic colors for network icons.

This CL updates the network icons in OS Settings to be displayed with
semantic colors. The way that the icons were being rendered previously
was with background() and opacity, which only allowed transparent blacks.

This CL updates the icons to use -webkit-image-mask which allows us to
render the icons as different colors.

TEST=Run OS Settings with --enable-features=SemanticColorDebugOverride.
The network icons will be magenta.

Bug: 1018654
Change-Id: I8990a7582cd2c40fdf11dc4da26aaa95cf91468d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3000643
Auto-Submit: calamity <calamity@chromium.org>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#899268}

ui/webui/resources/cr_components/chromeos/network/network_icon.html

@@ -19,8 +19,8 @@
 
       #icon {
         height: 20px;
-        opacity: .65;  /* Equivalent to #5a5a5a */
         width: 20px;
+        background: var(--cros-icon-color-primary)
       }
 
       /* Upper-left corner */
@@ -55,41 +55,41 @@
 
       /* Images */
       #icon.ethernet {
-        background: url(chrome://resources/cr_components/chromeos/network/ethernet.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/ethernet.svg);
       }
 
       #icon.vpn {
-        background: url(chrome://resources/cr_components/chromeos/network/vpn.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/vpn.svg);
       }
 
       /* Wi-Fi images */
       #icon.wifi-not-connected {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_0_with_x.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_0_with_x.svg);
       }
 
       #icon.wifi-no-network,
       #icon.wifi-0 {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_0.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_0.svg);
       }
 
       #icon.wifi-1 {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_1.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_1.svg);
       }
 
       #icon.wifi-2 {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_2.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_2.svg);
       }
 
       #icon.wifi-3 {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_3.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_3.svg);
       }
 
       #icon.wifi-4 {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_4.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_4.svg);
       }
 
       #icon.wifi-off {
-        background: url(chrome://resources/cr_components/chromeos/network/wifi_off.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_off.svg);
       }
 
       #icon.wifi-connecting {
@@ -100,54 +100,54 @@
 
       @keyframes wifi-levels {
         0% {
-          background: url(chrome://resources/cr_components/chromeos/network/wifi_0.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_0.svg);
         }
         25% {
-          background: url(chrome://resources/cr_components/chromeos/network/wifi_1.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_1.svg);
         }
         50% {
-          background: url(chrome://resources/cr_components/chromeos/network/wifi_2.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_2.svg);
         }
         75% {
-          background: url(chrome://resources/cr_components/chromeos/network/wifi_3.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_3.svg);
         }
         100% {
-          background: url(chrome://resources/cr_components/chromeos/network/wifi_4.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/wifi_4.svg);
         }
       }
 
       /* Cellular images */
       #icon.cellular-not-connected {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_0_with_x.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_0_with_x.svg);
       }
 
       #icon.cellular-no-network,
       #icon.cellular-0 {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_0.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_0.svg);
       }
 
       #icon.cellular-1 {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_1.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_1.svg);
       }
 
       #icon.cellular-2 {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_2.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_2.svg);
       }
 
       #icon.cellular-3 {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_3.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_3.svg);
       }
 
       #icon.cellular-4 {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_4.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_4.svg);
       }
 
       #icon.cellular-off {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_off.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_off.svg);
       }
 
       #icon.cellular-locked {
-        background: url(chrome://resources/cr_components/chromeos/network/cellular_locked.svg);
+        -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_locked.svg);
       }
 
       #icon.cellular-connecting {
@@ -158,19 +158,19 @@
 
       @keyframes cellular-levels {
         0% {
-          background: url(chrome://resources/cr_components/chromeos/network/cellular_0.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_0.svg);
         }
         25% {
-          background: url(chrome://resources/cr_components/chromeos/network/cellular_1.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_1.svg);
         }
         50% {
-          background: url(chrome://resources/cr_components/chromeos/network/cellular_2.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_2.svg);
         }
         75% {
-          background: url(chrome://resources/cr_components/chromeos/network/cellular_3.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_3.svg);
         }
         100% {
-          background: url(chrome://resources/cr_components/chromeos/network/cellular_4.svg);
+          -webkit-mask: url(chrome://resources/cr_components/chromeos/network/cellular_4.svg);
         }
       }
     </style>