CR2023: Fix checkbox ripple centering in focus state.

In the previous implementation, the calculations for the ripple position
were thrown off by the removal of the border. This CL changes the
ripple's offset to be a percentage value and applies a transform to
ensure that it is always centered relative to its container. This
applies the same logic currently being used for the checkbox's hover
layer.

This change also fixes the styling of GM3 checkboxes in print
preview.

Bug: 1400863
Change-Id: Iefd12173329320a00e6dd77b259f83b5cdf547f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4347920
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Cole Horvitz <colehorvitz@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1118980}

chrome/browser/resources/print_preview/ui/print_preview_shared.css

@@ -30,6 +30,9 @@ select.md-select {
 
 .checkbox cr-checkbox {
   min-height: var(--print-preview-row-height);
+}
+
+:host-context(html:not([chrome-refresh-2023])) .checkbox cr-checkbox {
   --cr-checkbox-ripple-size: var(--print-preview-row-height);
 }
 

ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html

@@ -47,6 +47,7 @@
             var(--cr-fallback-color-outline));
         --cr-checkbox-ripple-checked-color: var(--cr-active-background-color);
         --cr-checkbox-ripple-unchecked-color: var(--cr-active-background-color);
+        --cr-checkbox-ripple-offset: 50%;
         --cr-checkbox-ripple-opacity: 1;
       }
 
@@ -170,6 +171,10 @@
         right: var(--cr-checkbox-ripple-offset);
       }
 
+      :host-context([chrome-refresh-2023]) paper-ripple {
+        transform: translate(-50%, -50%);
+      }
+
       #label-container {
         color: var(--cr-checkbox-label-color, var(--cr-primary-text-color));
         padding-inline-start: var(--cr-checkbox-label-padding-start, 20px);