WebUI Dark Mode: update cr-radio-button colors
Screenshots: https://imgur.com/a/wEShNS0
Spec: https://docs.google.com/presentation/d/1kJoBzf_HGYK-_FAJPAjD67TW8224dCPLA6dAhlDmysk/edit?ts=5c363f50#slide=id.g364d7f9db1_0_8
Bug: 883049
Change-Id: I675df4e74c8530de14a3b9dc662c61446a715f6d
Reviewed-on: https://chromium-review.googlesource.com/c/1427741
Commit-Queue: Dan Beam <dbeam@chromium.org>
Commit-Queue: Esmael El-Moslimany <aee@chromium.org>
Auto-Submit: Dan Beam <dbeam@chromium.org>
Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625014}
diff --git a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
index 4ff9b85..b344aa5 100644
--- a/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
+++ b/ui/webui/resources/cr_elements/cr_radio_button/cr_radio_button_style_css.html
@@ -8,10 +8,14 @@
<template>
<style>
:host {
+ --cr-radio-button-checked-color: var(--google-blue-600);
+ --cr-radio-button-checked-ripple-color:
+ rgba(var(--google-blue-600-rgb), .2);
--cr-radio-button-ink-size: 40px;
--cr-radio-button-size: 16px;
--cr-radio-button-unchecked-color: var(--google-grey-refresh-700);
- --cr-radio-button-checked-color: var(--google-blue-600);
+ --cr-radio-button-unchecked-ripple-color:
+ rgba(var(--google-grey-600-rgb), .15);
--ink-to-circle: calc((var(--cr-radio-button-ink-size) -
var(--cr-radio-button-size)) / 2);
@@ -21,6 +25,15 @@
outline: none;
}
+ :host-context([dark]) {
+ --cr-radio-button-checked-color: var(--google-blue-refresh-300);
+ --cr-radio-button-checked-ripple-color:
+ rgba(var(--google-blue-refresh-300-rgb), .4);
+ --cr-radio-button-unchecked-color: var(--google-grey-refresh-500);
+ --cr-radio-button-unchecked-ripple-color:
+ rgba(var(--google-grey-refresh-300-rgb), .4);
+ }
+
:host([disabled]) {
opacity: var(--cr-disabled-opacity);
/* Disable pointer events for this whole element, as outer on-tap gets
@@ -87,8 +100,8 @@
}
paper-ripple {
- --paper-ripple-opacity: 0.15;
- color: var(--google-grey-600);
+ --paper-ripple-opacity: 1; /* Opacity in each color's alpha. */
+ color: var(--cr-radio-button-unchecked-ripple-color);
height: var(--cr-radio-button-ink-size);
left: calc(-1 * var(--ink-to-circle));
pointer-events: none;
@@ -104,8 +117,7 @@
}
:host([checked]) paper-ripple {
- --paper-ripple-opacity: 0.2;
- color: var(--google-blue-600);
+ color: var(--cr-radio-button-checked-ripple-color);
}
</style>
</template>