Reland "[OS Settings] Use semantic colors for network icons."

This is a reland of 91bf035

A fallback color has been added for WebUIs that do not use the
generated stylesheet,

Original change's description:
> [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}

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

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, rgba(0, 0, 0, 0.65));
       }
 
       /* Upper-left corner */
@@ -70,41 +70,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 {
@@ -115,54 +115,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 {
@@ -173,19 +173,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>