[NTP] Save common dark mode CSS as consts

Use var for dark mode dialog background color and drop shadow.

Change-Id: I31a4821966456d13b1d433b5999d182e1781922e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1692331
Commit-Queue: Kristi Park <kristipark@chromium.org>
Reviewed-by: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675877}

chrome/browser/resources/local_ntp/custom_links_edit.css

@@ -26,9 +26,8 @@ body {
 
 @media (prefers-color-scheme: dark) {
   #edit-link-dialog {
-    background-color: rgb(41, 42, 45);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
-        0 4px 8px 3px rgba(0, 0, 0, .15);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
+    box-shadow: var(--dark-mode-shadow);
   }
 }
 

chrome/browser/resources/local_ntp/customize.css

@@ -49,7 +49,7 @@
 
 @media (prefers-color-scheme: dark) {
   #edit-bg.ep-enhanced {
-    background-color: rgb(41, 42, 45);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
   }
 }
 
@@ -142,9 +142,8 @@ html[dir=rtl] #edit-bg {
 
 @media (prefers-color-scheme: dark) {
   #edit-bg-dialog {
-    background-color: rgb(41, 42, 45);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
-        0 4px 8px 3px rgba(0, 0, 0, .15);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
+    box-shadow: var(--dark-mode-shadow);
   }
 }
 
@@ -298,10 +297,9 @@ html[dir=rtl] .bg-option-img {
 
 @media (prefers-color-scheme: dark) {
   #bg-sel-menu {
-    background-color: rgb(41, 42, 45);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
-        0 4px 8px 3px rgba(0, 0, 0, .15);
-    }
+    background-color: rgb(var(--dark-mode-dialog-rgb));
+    box-shadow: var(--dark-mode-shadow);
+  }
 }
 
 /* The width is decided by the longest text length plus 16px margin on the

chrome/browser/resources/local_ntp/doodles.css

@@ -242,9 +242,8 @@ body.alternate-logo #logo-non-white {
 
 @media (prefers-color-scheme: dark) {
   #ddlsd {
-    background-color: rgb(41, 42, 45);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3),
-        0 4px 8px 3px rgba(0, 0, 0, 0.15);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
+    box-shadow: var(--dark-mode-shadow);
   }
 
   #ddlsd::backdrop {

chrome/browser/resources/local_ntp/local_ntp.css

@@ -817,9 +817,8 @@ html[dir=rtl] #error-notice.has-link #error-notice-msg {
 
 @media (prefers-color-scheme: dark) {
   #customization-menu {
-    background-color: rgb(41, 42, 45);
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
-        0 4px 8px 3px rgba(0, 0, 0, .15);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
+    box-shadow: var(--dark-mode-shadow);
     color: rgb(var(--GG200-rgb));
   }
 }
@@ -1243,7 +1242,7 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
 
 @media (prefers-color-scheme: dark) {
   #backgrounds-default-icon {
-    background-color: rgb(41, 42, 45);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
     border-color: rgb(var(--GG700-rgb));
   }
 
@@ -1351,7 +1350,7 @@ html[dir=rtl] #customization-menu .bg-sel-tile .selected-check {
 
 @media (prefers-color-scheme: dark) {
   .sh-option-mini {
-    background-color: rgb(41, 42, 45);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
     border-color: rgb(var(--GG700-rgb));
   }
 }
@@ -1369,8 +1368,7 @@ html[dir=rtl] .sh-option-mini {
 @media (prefers-color-scheme: dark) {
   .selected .sh-option-mini {
     border-color: transparent;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
-        0 4px 8px 3px rgba(0, 0, 0, .15);
+    box-shadow: var(--dark-mode-shadow);
   }
 }
 
@@ -1542,7 +1540,7 @@ html[dir=rtl] .sh-option-image .selected-check {
 
 @media (prefers-color-scheme: dark) {
   .switch {
-    background-color: rgb(41, 42, 45);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
   }
 }
 

chrome/browser/resources/local_ntp/local_ntp_common.css

@@ -6,6 +6,7 @@ html {
   /* Material Design colors. Keep in sync with ui/gfx/color_palette.h. */
 
   --dark-mode-bg-rgb: 50, 54, 57;
+  --dark-mode-dialog-rgb: 41, 42, 45;
 
   /* Google Grey */
   --GG050-rgb: 248, 249, 250;
@@ -47,6 +48,9 @@ html {
   --GR500-dark-rgb: 230, 106, 94;
   --GR600-dark-rgb: 211, 59, 48;
   --GR800-dark-rgb: 180, 27, 26;
+
+  --dark-mode-shadow: 0 1px 3px 0 rgba(0, 0, 0, .3),
+      0 4px 8px 3px rgba(0, 0, 0, .15);
 }
 
 body * {

chrome/browser/resources/local_ntp/voice.css

@@ -57,7 +57,7 @@
 
 @media (prefers-color-scheme: dark) {
   .overlay-dialog::backdrop {
-    background-color: rgb(41, 42, 45);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
   }
 }
 
@@ -75,7 +75,7 @@
 @media (prefers-color-scheme: dark) {
   .overlay,
   .overlay-hidden {
-    background-color: rgb(41, 42, 45);
+    background-color: rgb(var(--dark-mode-dialog-rgb));
   }
 }