Implement the new look of radio and checkbox and enable bifurcation

This CL implements the new look of radio (accent color),
checkbox (accent color and indeterminate state), range (accent color)
and also addresses several underlying issues:

1. The drawing code is not ready for dark theme. This is addressed by
introducing a new set of color ids in NativeThemeAura and using GetControlColor
instead of color constants to draw controls. This way when the colors for
dark theme are designed, we can just add new colors to GetControlColor
and the drawing codes in NativeThemeAura can be left untouched.

2. Downstream needs a way to implement bifurcation of styles and limit
the merge conflicts. This can also be achieved by redirecting logics
in NativeThemeAura ::GetControlColor and define new colors in the new code path.

3. Too many duplicated color constants. This is addressed by consolidating
24 constants into 11 color ids. Ex (kCheckboxAndRadioBorderHoveredColor,
kInputBorderHoveredColor, and kButtonBorderHoveredColor are mapped to
kHoveredBorder)

4. The expected files for high contrast tests are prone to have conflicts.
This is because upstream and downstream use different colors for disabled
UI so every time upstream file is updated, downstream would need to
re-baseline. This is addressed by providing default HC color for web tests
mode, which also make the test results more readable.


Bug: 1001546,1001553,1001554,986850
Change-Id: Icd6c4a0b96dd974b6500ba4365d22435d9e30f82
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1792578
Commit-Queue: Alex Keng <shihken@microsoft.com>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Cr-Commit-Position: refs/heads/master@{#697463}

third_party/blink/renderer/core/html/resources/controls_refresh.css

@@ -13,21 +13,14 @@ select,
 select:-internal-list-box,
 textarea {
   background-color: #ffffff;
-  border-color: #cecece;
-}
-
-input:hover,
-select:hover,
-select:-internal-list-box:hover,
-textarea:hover {
-  border-color: #9d9d9d;
+  border-color: #767676;
 }
 
 input:disabled,
 select:disabled,
 textarea:disabled {
-  background-color: #ffffff;
-  border-color: #c5c5c5;
+  background-color: rgba(239, 239, 239, 0.3);
+  border-color: rgba(118, 118, 118, 0.3);
 }
 
 input[type="button" i],
@@ -37,7 +30,7 @@ input[type="color" i],
 input[type="file" i]::-webkit-file-upload-button,
 button {
   background-color: #efefef;
-  border-color: #cecece;
+  border-color: #767676;
 }
 
 input[type="button" i]:disabled,
@@ -46,7 +39,9 @@ input[type="reset" i]:disabled,
 input[type="color" i]:disabled,
 input[type="file" i]:disabled::-webkit-file-upload-button,
 button:disabled {
-  border-color: #c5c5c5;
+  background-color: rgba(239, 239, 239, 0.3);
+  border-color: rgba(118, 118, 118, 0.3);
+  color: rgba(16, 16, 16, 0.3);
 }
 
 input[type="password" i]::-internal-reveal {

third_party/blink/web_tests/fast/forms/controls-new-ui/checkbox/checkbox-appearance-basic.html

@@ -32,6 +32,9 @@
 <!-- indeterminate -->
 <input type="checkbox" id="indeterminateCheckbox">
 <input type="checkbox" id="indeterminateDisabledCheckbox" disabled> <br>
+<input type="checkbox" id="indeterminateCheckbox24px" style="width: 24px; height: 24px;">
+<input type="checkbox" id="indeterminateCheckboxZoom4" style="zoom: 4;">
+<input type="checkbox" id="indeterminateDisabledCheckboxZoom" style="zoom: 4;" disabled> <br>
 
 <!-- zoom -->
 <input type="checkbox" style="zoom: 1.5;">
@@ -40,9 +43,24 @@
 
 <div style="background-color: white">
   <input type="checkbox" disabled>
-  <input type="checkbox" disabled checked> <br>
+  <input type="checkbox" id="indeterminateDisabledWhiteBG" disabled>
+  <input type="checkbox" disabled checked>
+  <input type="checkbox" checked>
+  <input type="checkbox" id="hoverTarget" /> <br>
+  <input type="checkbox" id="indeterminateWhiteBG">
+  <input type="checkbox" checked style="zoom: 4;">
+  <input type="checkbox" checked style="zoom: 4;" disabled>
+  <input type="checkbox" id="indeterminateCheckboxZoom4WhiteBG" style="zoom: 4;" disabled>
+</div>
+<div style="background-color: black">
+  <input type="checkbox" disabled>
+  <input type="checkbox" id="indeterminateDisabledBlackBG" disabled>
+  <input type="checkbox" disabled checked>
   <input type="checkbox" checked> <br>
-  <input type="checkbox" id="hoverTarget"/>
+  <input type="checkbox" id="indeterminateBlackBG">
+  <input type="checkbox" checked style="zoom: 4;">
+  <input type="checkbox" checked style="zoom: 4;" disabled>
+  <input type="checkbox" id="indeterminateCheckboxZoom4BlackBG" style="zoom: 4;" disabled>
 </div>
 
 <script>
@@ -53,6 +71,15 @@ if (window.testRunner)
 runAfterLayoutAndPaint(function() {
   indeterminateCheckbox.indeterminate = true;
   indeterminateDisabledCheckbox.indeterminate = true;
+  indeterminateCheckbox24px.indeterminate = true;
+  indeterminateCheckboxZoom4.indeterminate = true;
+  indeterminateDisabledCheckboxZoom.indeterminate = true;
+  indeterminateDisabledWhiteBG.indeterminate = true;
+  indeterminateDisabledBlackBG.indeterminate = true;
+  indeterminateWhiteBG.indeterminate = true;
+  indeterminateBlackBG.indeterminate = true;
+  indeterminateCheckboxZoom4WhiteBG.indeterminate = true;
+  indeterminateCheckboxZoom4BlackBG.indeterminate = true;
 
   var target = document.getElementById('hoverTarget');
   hoverOverElement(target);