[Chrome Colors] Fix color tile sizing when selected.

https://screenshot.googleplex.com/R2K3Ps4khBi.png

Bug: 990952
Change-Id: I1a5277a73a5a4e7c710529f66f1260dc900fae61
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1737162
Commit-Queue: Gayane Petrosyan <gayane@chromium.org>
Reviewed-by: Kristi Park <kristipark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#684377}

chrome/browser/resources/local_ntp/local_ntp.css

@@ -1569,7 +1569,6 @@ input:checked + .toggle .highlight {
 
 #colors-menu {
   --check-mark-size: 20px;
-  --check-mark-top: 2px;
   --custom-color-border: rgb(var(--GG300-rgb));
   --custom-color-dark: rgb(var(--GG100-rgb));
   --custom-color-light: white;
@@ -1591,12 +1590,12 @@ input:checked + .toggle .highlight {
 }
 
 #colors-menu .bg-sel-tile-bg.selected {
-  border: 4px solid rgba(var(--GB600-rgb), 0.4);
+  box-shadow: 0 0 0 4px rgba(var(--GB600-rgb), .4);
 }
 
 @media (prefers-color-scheme: dark) {
   #colors-menu .bg-sel-tile-bg.selected {
-    border: 4px solid rgb(var(--GB200-rgb));
+    box-shadow: 0 0 0 4px rgba(var(--GB600-rgb), .4);
   }
 }
 
@@ -1607,7 +1606,7 @@ input:checked + .toggle .highlight {
 #colors-menu .bg-sel-tile .selected-circle {
   height: calc(var(--check-mark-size) - 2px);
   right: 0;
-  top: calc(var(--check-mark-top) + 1px);
+  top: 1px;
   width: calc(var(--check-mark-size) - 2px);
 }
 
@@ -1620,7 +1619,7 @@ html[dir=rtl] #colors-menu .bg-sel-tile .selected-circle {
   background-size: var(--check-mark-size) var(--check-mark-size);
   height: var(--check-mark-size);
   right: 0;
-  top: var(--check-mark-top);
+  top: 0;
   width: var(--check-mark-size);
 }