CR2023: Add updated checkbox styles.

This adds styles for unchecked, checked, disabled, hovered, focus, and pressed states. Bug: 1400863 Change-Id: I4e1875f809508d3f8c54ed00d68037ba09b1174f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4221930 Reviewed-by: John Lee <johntlee@chromium.org> Commit-Queue: Cole Horvitz <colehorvitz@chromium.org> Cr-Commit-Position: refs/heads/main@{#1103603}
chromium · Feb 10, 2023 · 40620a9 · 40620a9
1 parent 109fa48
commit 40620a9
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 3 deletions.
diff --git a/chrome/browser/resources/webui_gallery/demos/cr_checkbox_demo.html b/chrome/browser/resources/webui_gallery/demos/cr_checkbox_demo.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html $i18n{chromeRefresh2023Attribute}>
   <head>
     <meta charset="utf-8">
     <title>cr-checkbox demo</title>

diff --git a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.html
@@ -39,12 +39,31 @@
         }
       }
 
+      :host-context([chrome-refresh-2023]):host {
+        --cr-checkbox-ripple-size: 32px;
+        --cr-checkbox-checked-box-color: var(--color-button-foreground-checked,
+            var(--cr-fallback-color-primary));
+        --cr-checkbox-unchecked-box-color: var(--color-button-foreground-unchecked,
+            var(--cr-fallback-color-on-surface-variant));
+        --cr-checkbox-ripple-checked-color: var(--cr-active-background-color);
+        --cr-checkbox-ripple-unchecked-color: var(--cr-active-background-color);
+        --cr-checkbox-ripple-opacity: 1;
+      }
+
       :host([disabled]) {
         cursor: initial;
         opacity: var(--cr-disabled-opacity);
         pointer-events: none;
       }
 
+      :host-context([chrome-refresh-2023]):host([disabled]) {
+        opacity: 1;
+        --cr-checkbox-checked-box-color: var(--color-button-foreground-disabled,
+            rgba(var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity)));
+        --cr-checkbox-unchecked-box-color: var(--color-button-foreground-disabled,
+            rgba(var(--cr-fallback-color-on-surface-rgb), var(--cr-disabled-opacity)));
+      }
+
       #checkbox {
         background: none;
         border: var(--cr-checkbox-border-size) solid
@@ -63,13 +82,39 @@
         width: var(--cr-checkbox-size);
       }
 
+      :host-context([chrome-refresh-2023]):host([disabled][checked]) #checkbox {
+        border-color: transparent;
+      }
+
+      :host-context([chrome-refresh-2023]) #hover-layer {
+        display: none;
+      }
+
+      :host-context([chrome-refresh-2023]) #checkbox:hover #hover-layer {
+        background-color: var(--cr-hover-background-color);
+        border-radius: 50%;
+        display: block;
+        height: 32px;
+        left: 50%;
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 32px;
+      }
+
       @media (forced-colors: active) {
         /* paper-ripple is not showing in Windows HCM. Use outline instead. */
         :host(:focus) #checkbox {
           outline: var(--cr-focus-outline-hcm);
         }
       }
 
+      :host-context([chrome-refresh-2023]) #checkbox:focus-visible {
+        border: 2px solid var(--cr-focus-outline-color);
+      }
+
       #checkmark {
         border-color: var(--cr-checkbox-mark-color);
         border-style: solid;
@@ -86,6 +131,16 @@
         transform-origin: 50% 14%;
       }
 
+      :host-context([chrome-refresh-2023]) #checkmark {
+        height: 7.19px;
+        transform-origin: 85% 92%;
+        width: 3.55px;
+      }
+
+      :host-context([chrome-refresh-2023]):host-context([dir='rtl']) #checkmark {
+        transform-origin: 30% 14%;
+      }
+
       :host([checked]) #checkbox {
         background: var(--cr-checkbox-checked-box-background-color,
             var(--cr-checkbox-checked-box-color));
@@ -98,6 +153,12 @@
         transition: transform 140ms ease-out;
       }
 
+      :host-context([chrome-refresh-2023]):host([checked]) #checkbox:focus-visible {
+        background-clip: padding-box;
+        border-color: transparent;
+        outline: 2px solid var(--cr-focus-outline-color);
+      }
+
       paper-ripple {
         --paper-ripple-opacity: var(--cr-checkbox-ripple-opacity,
             var(--cr-checkbox-unchecked-ripple-opacity));
@@ -144,6 +205,7 @@
         aria-checked="false" aria-labelledby="label-container"
         aria-describedby="ariaDescription">
       <span id="checkmark"></span>
+      <div id="hover-layer"></div>
     </div>
     <div id="label-container" aria-hidden="true" part="label-container">
       <slot></slot>

diff --git a/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.ts b/ui/webui/resources/cr_elements/cr_checkbox/cr_checkbox.ts
@@ -87,10 +87,15 @@ export class CrCheckboxElement extends CrCheckboxElementBase {
   override ready() {
     super.ready();
     this.removeAttribute('unresolved');
-    this.addEventListener('blur', this.hideRipple_.bind(this));
     this.addEventListener('click', this.onClick_.bind(this));
-    this.addEventListener('focus', this.showRipple_.bind(this));
     this.addEventListener('pointerup', this.hideRipple_.bind(this));
+    if (document.documentElement.hasAttribute('chrome-refresh-2023')) {
+      this.addEventListener('pointerdown', this.showRipple_.bind(this));
+      this.addEventListener('pointerleave', this.hideRipple_.bind(this));
+    } else {
+      this.addEventListener('blur', this.hideRipple_.bind(this));
+      this.addEventListener('focus', this.showRipple_.bind(this));
+    }
   }
 
   override focus() {