CR2023: Update cr-radio-button styles.

This also renames kColorButtonForegroundChecked/Unchecked to kColorRadioButtonForegroundChecked/Unchecked. Bug: 1414477 Change-Id: I3d3fb95b50386489b902c269b5e0903aca570a3a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4290227 Reviewed-by: Scott Violet <sky@chromium.org> Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org> Commit-Queue: Cole Horvitz <colehorvitz@chromium.org> Cr-Commit-Position: refs/heads/main@{#1110711}
qweri0p · Feb 28, 2023 · 98f6174 · 98f6174
1 parent 6d331b8
commit 98f6174
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 14 deletions.
diff --git a/chrome/browser/resources/webui_gallery/demos/cr_radio_demo.html b/chrome/browser/resources/webui_gallery/demos/cr_radio_demo.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html $i18n{chromeRefresh2023Attribute}>
   <head>
     <meta charset="utf-8">
     <title>cr-radio demo</title>
@@ -16,9 +16,16 @@ <h1>cr-radio-group and cr-radio-button</h1>
             <cr-radio-button name="option3" label="Option 3">
               <div>With slotted content</div>
             </cr-radio-button>
+            <cr-radio-button name="option4" label="Option 4" disabled>
+              <div>Disabled</div>
+            </cr-radio-button>
           </cr-radio-group>
 
           Selected option: [[selectedOption_]]
+          <cr-radio-group selected="option5">
+            <cr-radio-button name="option5" label="Disabled selected"
+                disabled></cr-radio-button>
+          </cr-radio-group>
         </div>
       </template>
     </dom-bind>

diff --git a/ui/color/color_id.h b/ui/color/color_id.h
@@ -222,11 +222,9 @@
   E_CPONLY(kColorButtonBorder) \
   E_CPONLY(kColorButtonBorderDisabled) \
   E_CPONLY(kColorButtonForeground) \
-  E_CPONLY(kColorButtonForegroundChecked) \
   E_CPONLY(kColorButtonForegroundDisabled) \
   E_CPONLY(kColorButtonForegroundProminent) \
   E_CPONLY(kColorButtonForegroundTonal) \
-  E_CPONLY(kColorButtonForegroundUnchecked) \
   E_CPONLY(kColorMultitaskFeedbackButtonLabelBackground) \
   E_CPONLY(kColorMultitaskFeedbackButtonLabelForeground) \
   E_CPONLY(kColorMultitaskMenuNudgePulse) \
@@ -310,6 +308,9 @@
   E_CPONLY(kColorOverlayScrollbarStrokeHoveredLight) \
   E_CPONLY(kColorProgressBar) \
   E_CPONLY(kColorProgressBarPaused) \
+  E_CPONLY(kColorRadioButtonForegroundUnchecked) \
+  E_CPONLY(kColorRadioButtonForegroundDisabled) \
+  E_CPONLY(kColorRadioButtonForegroundChecked) \
   E_CPONLY(kColorScrollbarArrowBackgroundHovered) \
   E_CPONLY(kColorScrollbarArrowBackgroundPressed) \
   E_CPONLY(kColorScrollbarArrowForeground) \

diff --git a/ui/color/material_ui_color_mixer.cc b/ui/color/material_ui_color_mixer.cc
@@ -36,10 +36,8 @@ void AddMaterialUiColorMixer(ColorProvider* provider,
   mixer[kColorButtonBorder] = {kColorSysOutline};
   mixer[kColorButtonBorderDisabled] = {kColorSysStateDisabled};
   mixer[kColorButtonForeground] = {kColorSysOnSurfacePrimary};
-  mixer[kColorButtonForegroundChecked] = {kColorButtonForeground};
   mixer[kColorButtonForegroundDisabled] = {kColorSysStateDisabled};
   mixer[kColorButtonForegroundProminent] = {kColorSysOnPrimary};
-  mixer[kColorButtonForegroundUnchecked] = {kColorSysOnSurfaceVariant};
   mixer[kColorCheckboxBackgroundDisabled] = {kColorSysStateDisabledContainer};
   mixer[kColorCheckboxForegroundChecked] = {kColorSysOnSurfacePrimary};
   mixer[kColorCheckboxForegroundDisabled] = {kColorSysStateDisabled};
@@ -52,6 +50,10 @@ void AddMaterialUiColorMixer(ColorProvider* provider,
   mixer[kColorFrameActive] = {kColorSysHeader};
   mixer[kColorFrameActiveUnthemed] = {kColorSysHeader};
   mixer[kColorFrameInactive] = {kColorSysHeaderInactive};
+  mixer[kColorRadioButtonForegroundChecked] = {kColorSysOnSurfacePrimary};
+  mixer[kColorRadioButtonForegroundDisabled] = {
+      kColorSysStateDisabledContainer};
+  mixer[kColorRadioButtonForegroundUnchecked] = {kColorSysOutline};
   mixer[kColorSliderThumb] = {kColorSysPrimary};
   mixer[kColorSliderThumbMinimal] = {kColorSysSecondary};
   mixer[kColorSliderTrack] = {kColorSysOnPrimary};

diff --git a/ui/color/ui_color_mixer.cc b/ui/color/ui_color_mixer.cc
@@ -55,12 +55,10 @@ void AddUiColorMixer(ColorProvider* provider,
   mixer[kColorButtonForeground] =
       PickGoogleColor(kColorAccent, kColorButtonBackground,
                       color_utils::kMinimumReadableContrastRatio);
-  mixer[kColorButtonForegroundChecked] = {kColorButtonForeground};
   mixer[kColorButtonForegroundDisabled] = {kColorDisabledForeground};
   mixer[kColorButtonForegroundProminent] =
       GetColorWithMaxContrast(kColorButtonBackgroundProminent);
   mixer[kColorButtonForegroundTonal] = {kColorSysOnPrimaryContainer};
-  mixer[kColorButtonForegroundUnchecked] = {kColorSecondaryForeground};
   mixer[kColorCheckboxForegroundUnchecked] = {kColorSecondaryForeground};
   mixer[kColorCheckboxForegroundChecked] = {kColorButtonForeground};
   mixer[kColorMultitaskFeedbackButtonLabelBackground] = {
@@ -179,6 +177,8 @@ void AddUiColorMixer(ColorProvider* provider,
   mixer[kColorProgressBar] =
       PickGoogleColor(kColorAccent, kColorDialogBackground,
                       color_utils::kMinimumVisibleContrastRatio);
+  mixer[kColorRadioButtonForegroundChecked] = {kColorButtonForeground};
+  mixer[kColorRadioButtonForegroundUnchecked] = {kColorSecondaryForeground};
   mixer[kColorScrollbarArrowBackgroundHovered] = {
       dark_mode ? SkColorSetRGB(0x4F, 0x4F, 0x4F)
                 : SkColorSetRGB(0xD2, 0xD2, 0xD2)};

diff --git a/ui/color/win/native_color_mixers_win.cc b/ui/color/win/native_color_mixers_win.cc
@@ -145,7 +145,7 @@ void AddNativeUiColorMixer(ColorProvider* provider,
   if (key.contrast_mode == ColorProviderManager::ContrastMode::kNormal)
     return;
 
-  mixer[kColorButtonForegroundChecked] = {
+  mixer[kColorRadioButtonForegroundChecked] = {
       key.color_mode == ColorProviderManager::ColorMode::kDark
           ? gfx::kGoogleBlue100
           : gfx::kGoogleBlue900};

diff --git a/ui/gtk/gtk_color_mixers.cc b/ui/gtk/gtk_color_mixers.cc
@@ -86,11 +86,9 @@ void AddGtkNativeColorMixer(ui::ColorProvider* provider,
   mixer[ui::kColorButtonBorder] = {button_border};
   mixer[ui::kColorButtonBorderDisabled] = {button_bg_disabled};
   mixer[ui::kColorButtonForeground] = {GetFgColor("button.text-button label")};
-  mixer[ui::kColorButtonForegroundChecked] = {ui::kColorAccent};
   mixer[ui::kColorButtonForegroundDisabled] = {
       GetFgColor("button.text-button:disabled label")};
   mixer[ui::kColorButtonForegroundProminent] = {accent};
-  mixer[ui::kColorButtonForegroundUnchecked] = {ui::kColorButtonForeground};
   mixer[ui::kColorDialogForeground] = {ui::kColorPrimaryForeground};
   mixer[ui::kColorDropdownBackground] = {GetBgColor(base::StrCat(
       {"combobox window.background.popup ", "menu(gtk-combobox-popup-menu) ",
@@ -140,6 +138,9 @@ void AddGtkNativeColorMixer(ui::ColorProvider* provider,
   mixer[ui::kColorOverlayScrollbarStroke] = {GetBgColor("scrollbar trough")};
   mixer[ui::kColorOverlayScrollbarStrokeHovered] = {
       GetBgColor("scrollbar trough:hover")};
+  mixer[ui::kColorRadioButtonForegroundChecked] = {ui::kColorAccent};
+  mixer[ui::kColorRadioButtonForegroundUnchecked] = {
+      ui::kColorButtonForeground};
   mixer[ui::kColorSliderThumb] = {GetBgColor("scale highlight")};
   mixer[ui::kColorSliderThumbMinimal] = {
       GetBgColor("scale:disabled highlight")};

diff --git a/ui/views/controls/menu/menu_item_view.cc b/ui/views/controls/menu/menu_item_view.cc
@@ -1514,8 +1514,8 @@ void MenuItemView::UpdateSelectionBasedState(bool paint_as_selected) {
     const gfx::VectorIcon& radio_icon =
         toggled ? kMenuRadioSelectedIcon : kMenuRadioEmptyIcon;
     const SkColor radio_icon_color = GetColorProvider()->GetColor(
-        toggled ? ui::kColorButtonForegroundChecked
-                : ui::kColorButtonForegroundUnchecked);
+        toggled ? ui::kColorRadioButtonForegroundChecked
+                : ui::kColorRadioButtonForegroundUnchecked);
     radio_check_image_view_->SetImage(ui::ImageModel::FromVectorIcon(
         radio_icon, radio_icon_color, kMenuCheckSize));
   }

diff --git a/ui/views/examples/colors_example.cc b/ui/views/examples/colors_example.cc
@@ -76,7 +76,8 @@ void CreateAllColorsView(ScrollView* scroll_view) {
   InsertColorRow(container, COLOR_LABEL_ARGS(kColorFocusableBorderUnfocused));
   InsertColorRow(container, COLOR_LABEL_ARGS(kColorButtonForeground));
   InsertColorRow(container, COLOR_LABEL_ARGS(kColorButtonForegroundDisabled));
-  InsertColorRow(container, COLOR_LABEL_ARGS(kColorButtonForegroundUnchecked));
+  InsertColorRow(container,
+                 COLOR_LABEL_ARGS(kColorRadioButtonForegroundUnchecked));
   InsertColorRow(container, COLOR_LABEL_ARGS(kColorButtonBackgroundProminent));
   InsertColorRow(container,
                  COLOR_LABEL_ARGS(kColorButtonBackgroundProminentFocused));

diff --git a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.html b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button.html
@@ -11,6 +11,7 @@
         on-keydown="onInputKeydown_">
       <div class="disc-border"></div>
       <div class="disc"></div>
+      <div id="overlay"></div>
     </div>
 
     <div id="labelWrapper">

diff --git a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_mixin.ts b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_mixin.ts
@@ -86,7 +86,9 @@ export const CrRadioButtonMixin = dedupingMixin(
         override connectedCallback() {
           super.connectedCallback();
           this.addEventListener('blur', this.hideRipple_.bind(this));
-          this.addEventListener('focus', this.onFocus_.bind(this));
+          if (!document.documentElement.hasAttribute('chrome-refresh-2023')) {
+            this.addEventListener('focus', this.onFocus_.bind(this));
+          }
           this.addEventListener('up', this.hideRipple_.bind(this));
         }
 

diff --git a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style.css b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style.css
@@ -39,6 +39,20 @@
         }
       }
 
+      :host-context([chrome-refresh-2023]):host {
+        --cr-radio-button-ink-size: 32px;
+        --cr-radio-button-checked-color:
+            var(--color-radio-button-foreground-checked,
+                var(--cr-fallback-color-primary));
+        --cr-radio-button-checked-ripple-color:
+            var(--cr-active-background-color);
+        --cr-radio-button-unchecked-color:
+            var(--color-radio-button-foreground-unchecked,
+                var(--cr-fallback-color-outline));
+        --cr-radio-button-unchecked-ripple-color:
+            var(--cr-active-background-color);
+      }
+
       @media (forced-colors: active) {
         :host {
           --cr-radio-button-checked-color: SelectedItem;
@@ -52,6 +66,15 @@
         pointer-events: none;
       }
 
+      :host-context([chrome-refresh-2023]):host([disabled]) {
+        opacity: 1;
+        --cr-radio-button-checked-color: var(--color-radio-foreground-disabled,
+            rgba(var(--cr-fallback-color-on-surface-rgb), .12));
+        --cr-radio-button-unchecked-color:
+            var(--color-radio-foreground-disabled,
+                rgba(var(--cr-fallback-color-on-surface-rgb), .12));
+      }
+
       :host(:not([disabled])) {
         cursor: pointer;
       }
@@ -61,6 +84,10 @@
         margin-inline-start: var(--cr-radio-button-label-spacing, 20px);
       }
 
+      :host-context([chrome-refresh-2023]):host([disabled]) #labelWrapper {
+        opacity: var(--cr-disabled-opacity);
+      }
+
       #label {
         color: inherit;
       }
@@ -118,6 +145,29 @@
         transform: scale(0.5);
       }
 
+      :host-context([chrome-refresh-2023]) #overlay {
+        border-radius: 50%;
+        box-sizing: border-box;
+        display: none;
+        height: var(--cr-radio-button-ink-size);
+        left: 50%;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: var(--cr-radio-button-ink-size);
+      }
+
+      :host-context([chrome-refresh-2023]) #button:hover #overlay {
+        background-color: var(--cr-hover-background-color);
+        display: block;
+      }
+
+      :host-context([chrome-refresh-2023]) #button:focus-visible #overlay {
+        border: 2px solid var(--cr-focus-outline-color);
+        display: block;
+      }
+
       paper-ripple {
         --paper-ripple-opacity: 1;  /* Opacity in each color's alpha. */
         color: var(--cr-radio-button-unchecked-ripple-color);