[Nearby] Use color variables on discovery and confirmation pages

E.g. var(--google-gray-refresh-700). The values on all of the pages
outside of settings had hard-coded colors.

Change-Id: Idefc2c9746f13f02521712a2e7740eaaca97b62f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2523662
Commit-Queue: Curt Clemens <cclem@google.com>
Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825682}

chrome/browser/resources/nearby_share/nearby_confirmation_page.html

@@ -4,12 +4,12 @@
   }
 
   #addContactsLabel {
-    color: rgb(32, 33, 36);
+    color: var(--google-grey-900);
     line-height: 138%;
   }
 
   #addContactsLabelSecondary {
-    color: rgb(95, 99, 104);
+    color: var(--google-grey-refresh-700);
     line-height: 138%;
   }
 
@@ -66,18 +66,18 @@
   }
 
   #errorTitle {
-    color: rgb(217, 49, 37);
+    color: var(--google-red-600);
     font-weight: bold;
     margin: 3px 0;
   }
 
   #errorDescription {
-    color: rgb(95, 99, 104);
+    color: var(--google-grey-refresh-700);
     line-height: 13px;
   }
 
   #errorIcon {
-    fill: rgb(217, 49, 37);
+    fill: var(--google-red-600);
     flex-shrink: 0;
     height: 20px;
     margin-inline-end: 12px;

chrome/browser/resources/nearby_share/nearby_discovery_page.html

@@ -6,8 +6,8 @@
   }
 
   #centerContent {
-    background: radial-gradient(160% 50% at 0 100%, rgba(138, 180, 248, 0.25),
-        rgba(255, 255, 255, 0));
+    background: radial-gradient(160% 50% at 0 100%,
+        rgba(var(--google-blue-refresh-300-rgb), 0.25), rgba(255, 255, 255, 0));
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -31,7 +31,7 @@
 
   #help {
     align-items: flex-start;
-    color: rgb(95, 99, 104);
+    color: var(--google-grey-refresh-700);
     display: flex;
     flex-direction: row;
     font-size: 9px;
@@ -46,7 +46,7 @@
   }
 
   #helpText a {
-    color: rgb(26, 115, 232);
+    color: var(--google-blue-600);
     text-decoration: none;
   }
 

chrome/browser/resources/nearby_share/nearby_preview.html

@@ -7,7 +7,7 @@
   }
 
   #title {
-    color: rgb(32, 33, 36);
+    color: var(--google-grey-900);
     font-size: 13px;
     height: 60px;
     letter-spacing: 0.2px;

chrome/browser/resources/nearby_share/nearby_progress.html

@@ -28,7 +28,7 @@
   #spinner {
     animation: 1.4s ease-in-out infinite both spinner-animation;
     fill: none;
-    stroke: rgb(26, 115, 232);
+    stroke: var(--google-blue-600);
     stroke-dasharray: 283;
     stroke-linecap: round;
     stroke-width: 2px;