WebUI: cr-link-row rename --icon-color and set default value

Bug: 1006424
Change-Id: Ie4f79a8f9f8549da86e6ff803351fbf108d6e26d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1817328Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Esmael Elmoslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#698713}

chrome/browser/resources/settings/chromeos/os_people_page/os_people_page.html

@@ -55,12 +55,12 @@
       }
 
       #sync-status.no-error {
-        --icon-color: var(--google-green-refresh-700);
+        --cr-link-row-start-icon-color: var(--google-green-refresh-700);
       }
 
       @media (prefers-color-scheme: dark) {
         #sync-status.no-error {
-          --icon-color: var(--google-green-refresh-300);
+          --cr-link-row-start-icon-color: var(--google-green-refresh-300);
         }
       }
 
@@ -71,12 +71,12 @@
       }
 
       #sync-status[actionable].auth-error {
-        --icon-color: var(--google-blue-500);
+        --cr-link-row-start-icon-color: var(--google-blue-500);
       }
 
       @media (prefers-color-scheme: dark) {
         #sync-status[actionable].auth-error {
-          --icon-color: var(--google-blue-refresh-300);
+          --cr-link-row-start-icon-color: var(--google-blue-refresh-300);
         }
       }
 
@@ -90,7 +90,7 @@
       }
 
       #sync-status[actionable].sync-error {
-        --icon-color: var(--settings-error-color);
+        --cr-link-row-start-icon-color: var(--settings-error-color);
         --cr-secondary-text: {
           color: var(--settings-error-color);
         }

chrome/browser/resources/settings/people_page/people_page.html

@@ -67,12 +67,12 @@
       }
 
       #sync-status.no-error {
-        --icon-color: var(--google-green-refresh-700);
+        --cr-link-row-start-icon-color: var(--google-green-refresh-700);
       }
 
       @media (prefers-color-scheme: dark) {
         #sync-status.no-error {
-          --icon-color: var(--google-green-refresh-300);
+          --cr-link-row-start-icon-color: var(--google-green-refresh-300);
         }
       }
 
@@ -83,12 +83,12 @@
       }
 
       #sync-status[actionable].auth-error {
-        --icon-color: var(--google-blue-500);
+        --cr-link-row-start-icon-color: var(--google-blue-500);
       }
 
       @media (prefers-color-scheme: dark) {
         #sync-status[actionable].auth-error {
-          --icon-color: var(--google-blue-refresh-300);
+          --cr-link-row-start-icon-color: var(--google-blue-refresh-300);
         }
       }
 
@@ -102,7 +102,7 @@
       }
 
       #sync-status[actionable].sync-error {
-        --icon-color: var(--settings-error-color);
+        --cr-link-row-start-icon-color: var(--settings-error-color);
         --cr-secondary-text: {
           color: var(--settings-error-color);
         }

ui/webui/resources/cr_elements/cr_link_row/cr_link_row.html

@@ -36,11 +36,19 @@
       }
 
       #startIcon {
+        --iron-icon-fill-color: var(--cr-link-row-start-icon-color,
+            var(--google-grey-refresh-700));
         display: flex;
         flex-shrink: 0;
         padding-inline-end: var(--cr-icon-button-margin-start);
         width: var(--cr-link-row-icon-width, var(--cr-icon-size));
-        --iron-icon-fill-color: var(--icon-color);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        #startIcon {
+          --iron-icon-fill-color: var(--cr-link-row-start-icon-color,
+              var(--google-grey-refresh-500));
+        }
       }
 
       #labelWrapper {