Commit 1cade8c3 authored by Christopher Lam's avatar Christopher Lam Committed by Commit Bot

[cr-toggle] Consolidate ripple opacity into ripple color.

This CL removes --cr-toggle-ripple-opacity in favor of specifying opacity
in --cr-toggle-ripple-color-checked and --cr-toggle-ripple-color-unchecked.
This makes ripple color easier to reason about and allows a clearer
point of ripple color override.

Bug: 10292245
Change-Id: I9d80c13d0805494cfbc33a58ca002bad5955f16b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1940003
Commit-Queue: calamity <calamity@chromium.org>
Reviewed-by: default avatarDan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721908}
parent 7cd6bc8b
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
cr-toolbar cr-toggle { cr-toolbar cr-toggle {
--cr-toggle-checked-bar-color: var(--google-grey-refresh-100); --cr-toggle-checked-bar-color: var(--google-grey-refresh-100);
--cr-toggle-checked-button-color: white; --cr-toggle-checked-button-color: white;
--cr-toggle-checked-ink-color: white; --cr-toggle-checked-ripple-color: rgba(255, 255, 255, .2);
--cr-toggle-unchecked-bar-color: var(--google-grey-600); --cr-toggle-unchecked-bar-color: var(--google-grey-600);
--cr-toggle-unchecked-ink-color: white; --cr-toggle-unchecked-ripple-color: rgba(255, 255, 255, .15);
} }
} }
......
...@@ -25,12 +25,11 @@ To get Chrome OS System Colors, an element must: ...@@ -25,12 +25,11 @@ To get Chrome OS System Colors, an element must:
:host-context([cros]) cr-toggle { :host-context([cros]) cr-toggle {
--cr-toggle-checked-bar-color: var(--cros-toggle-color); --cr-toggle-checked-bar-color: var(--cros-toggle-color);
--cr-toggle-checked-button-color: var(--cros-toggle-color); --cr-toggle-checked-button-color: var(--cros-toggle-color);
--cr-toggle-checked-ink-color: var(--cros-toggle-ripple-color); --cr-toggle-checked-ripple-color: var(--cros-toggle-ripple-color);
--cr-toggle-ripple-opacity: 1; /* Opacity in each color's alpha. */
--cr-toggle-unchecked-bar-color: var(--cros-toggle-bg-color-inactive); --cr-toggle-unchecked-bar-color: var(--cros-toggle-bg-color-inactive);
--cr-toggle-unchecked-button-color: --cr-toggle-unchecked-button-color:
var(--cros-toggle-button-color-inactive); var(--cros-toggle-button-color-inactive);
--cr-toggle-unchecked-ink-color: --cr-toggle-unchecked-ripple-color:
var(--cros-toggle-ripple-color-inactive); var(--cros-toggle-ripple-color-inactive);
} }
</style> </style>
......
...@@ -9,11 +9,12 @@ ...@@ -9,11 +9,12 @@
:host { :host {
--cr-toggle-checked-bar-color: var(--google-blue-600); --cr-toggle-checked-bar-color: var(--google-blue-600);
--cr-toggle-checked-button-color: var(--google-blue-600); --cr-toggle-checked-button-color: var(--google-blue-600);
--cr-toggle-checked-ink-color: var(--google-blue-600); --cr-toggle-checked-ripple-color:
--cr-toggle-ripple-opacity: .15; rgba(var(--google-blue-600-rgb), .2);
--cr-toggle-unchecked-bar-color: var(--google-grey-400); --cr-toggle-unchecked-bar-color: var(--google-grey-400);
--cr-toggle-unchecked-button-color: white; --cr-toggle-unchecked-button-color: white;
--cr-toggle-unchecked-ink-color: var(--google-grey-600); --cr-toggle-unchecked-ripple-color:
rgba(var(--google-grey-600-rgb), .15);
cursor: pointer; cursor: pointer;
display: block; display: block;
min-width: 34px; min-width: 34px;
...@@ -26,22 +27,24 @@ ...@@ -26,22 +27,24 @@
:host { :host {
--cr-toggle-checked-bar-color: var(--google-blue-refresh-300); --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
--cr-toggle-checked-button-color: var(--google-blue-refresh-300); --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
--cr-toggle-checked-ink-color: var(--google-blue-refresh-300); --cr-toggle-checked-ripple-color:
--cr-toggle-ripple-opacity: .4; rgba(var(--google-blue-refresh-300-rgb), .4);
--cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500); --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
--cr-toggle-unchecked-button-color: var(--google-grey-refresh-300); --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
--cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300); --cr-toggle-unchecked-ripple-color:
rgba(var(--google-grey-refresh-300-rgb), .4);
} }
} }
/* Keep the prefers-color-scheme and [dark] rules the same. */ /* Keep the prefers-color-scheme and [dark] rules the same. */
:host([dark]) { :host([dark]) {
--cr-toggle-checked-bar-color: var(--google-blue-refresh-300); --cr-toggle-checked-bar-color: var(--google-blue-refresh-300);
--cr-toggle-checked-button-color: var(--google-blue-refresh-300); --cr-toggle-checked-button-color: var(--google-blue-refresh-300);
--cr-toggle-checked-ink-color: var(--google-blue-refresh-300); --cr-toggle-checked-ripple-color:
--cr-toggle-ripple-opacity: .4; rgba(var(--google-blue-refresh-300-rgb), .4);
--cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500); --cr-toggle-unchecked-bar-color: var(--google-grey-refresh-500);
--cr-toggle-unchecked-button-color: var(--google-grey-refresh-300); --cr-toggle-unchecked-button-color: var(--google-grey-refresh-300);
--cr-toggle-unchecked-ink-color: var(--google-grey-refresh-300); --cr-toggle-unchecked-ripple-color:
rgba(var(--google-grey-refresh-300-rgb), .4);
} }
:host([disabled]) { :host([disabled]) {
...@@ -70,7 +73,7 @@ ...@@ -70,7 +73,7 @@
#knob { #knob {
background-color: var(--cr-toggle-unchecked-button-color); background-color: var(--cr-toggle-unchecked-button-color);
border-radius: 50%; border-radius: 50%;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .4);
display: block; display: block;
height: 16px; height: 16px;
position: relative; position: relative;
...@@ -89,8 +92,8 @@ ...@@ -89,8 +92,8 @@
} }
paper-ripple { paper-ripple {
--paper-ripple-opacity: var(--cr-toggle-ripple-opacity); --paper-ripple-opacity: 1;
color: var(--cr-toggle-unchecked-ink-color); color: var(--cr-toggle-unchecked-ripple-color);
height: 40px; height: 40px;
left: -12px; left: -12px;
pointer-events: none; pointer-events: none;
...@@ -99,19 +102,13 @@ ...@@ -99,19 +102,13 @@
width: 40px; width: 40px;
} }
:host-context([dir=rtl]) paper-ripple {
left: auto;
right: -12px;
}
:host([checked]) paper-ripple { :host([checked]) paper-ripple {
color: var(--cr-toggle-checked-ink-color); color: var(--cr-toggle-checked-ripple-color);
} }
@media (prefers-color-scheme: light) { :host-context([dir=rtl]) paper-ripple {
:host([checked]) { left: auto;
--cr-toggle-ripple-opacity: 0.2; right: -12px;
}
} }
</style> </style>
<span id="bar"></span> <span id="bar"></span>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment