Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the toggle-button css after the changes in m-c (bug 1940085) #19295

Merged
merged 1 commit into from
Jan 6, 2025
Merged

Update the toggle-button css after the changes in m-c (bug 1940085) #19295

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 98 additions & 96 deletions web/toggle_button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.toggle-button {
--button-background-color: #f0f0f4;
--button-background-color-hover: #e0e0e6;
--button-background-color-active: #cfcfd8;
--button-background-color: color-mix(in srgb, currentColor 7%, transparent);
--button-background-color-hover: color-mix(
in srgb,
currentColor 14%,
transparent
);
--button-background-color-active: color-mix(
in srgb,
currentColor 21%,
transparent
);
--color-accent-primary: #0060df;
--color-accent-primary-hover: #0250bb;
--color-accent-primary-active: #054096;
Expand All @@ -15,24 +23,18 @@
--size-item-small: 16px;
--size-item-large: 32px;
--color-canvas: white;
--background-color-canvas: var(--color-canvas);
--border-color-interactive: #8f8f9d;
--border-color-interactive-hover: var(--border-color-interactive);
--border-color-interactive-active: var(--border-color-interactive);

@media (prefers-color-scheme: dark) {
--button-background-color: color-mix(in srgb, currentColor 7%, transparent);
--button-background-color-hover: color-mix(
in srgb,
currentColor 14%,
transparent
);
--button-background-color-active: color-mix(
in srgb,
currentColor 21%,
transparent
);
--color-accent-primary: #0df;
--color-accent-primary-hover: #80ebff;
--color-accent-primary-active: #aaf2ff;
--border-interactive-color: #bfbfc9;
--color-canvas: #1c1b22;
--border-color-interactive: #f9f9fa;
}

@media (forced-colors: active) {
Expand All @@ -44,31 +46,35 @@
--border-interactive-color-hover: SelectedItem;
--border-interactive-color-active: SelectedItem;
--border-interactive-color-disabled: GrayText;
--border-color-interactive: ButtonText;
--border-color-interactive-hover: SelectedItem;
--border-color-interactive-active: ButtonText;
--color-canvas: ButtonText;
--background-color-canvas: Canvas;
}
}

/*
/*
calixteman marked this conversation as resolved.
Show resolved Hide resolved
The original file is located at:
https://hg.mozilla.org/mozilla-central/file/aded201f11ec90b8e11c59d1e399960785771fbd/toolkit/content/widgets/moz-toggle/moz-toggle.css
https://hg.mozilla.org/mozilla-central/file/168f6caa3b160c12413f9e9ad9df1db49c6b4cdf/toolkit/content/widgets/moz-toggle/moz-toggle.css

The original file is licensed under the Mozilla Public License, v. 2.0.
This file is a modified version of the original file.

In order to have a better reading of the code, the .toggle-button selector
has been removed from the original file and we put everything under a single
.toggle-button selector.

TODO: check from times to times if the original file has been updated (and
The pseudo-selector :host has been replaced by .toggle-button.

TODO: check from times to times if the original file has been updated (and
in such a case don't forget to change the revision in the above link).
*/
*/

.toggle-button {
--toggle-background-color: var(--button-background-color);
--toggle-background-color-hover: var(--button-background-color-hover);
--toggle-background-color-active: var(--button-background-color-active);
--toggle-background-color-pressed: var(--color-accent-primary);
--toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
--toggle-background-color-pressed-active: var(--color-accent-primary-active);
--toggle-border-color: var(--border-interactive-color);
--toggle-border-color: var(--border-color-interactive);
--toggle-border-color-hover: var(--toggle-border-color);
--toggle-border-color-active: var(--toggle-border-color);
--toggle-border-radius: var(--border-radius-circle);
Expand All @@ -78,7 +84,7 @@
--toggle-dot-background-color: var(--toggle-border-color);
--toggle-dot-background-color-hover: var(--toggle-dot-background-color);
--toggle-dot-background-color-active: var(--toggle-dot-background-color);
--toggle-dot-background-color-on-pressed: var(--color-canvas);
--toggle-dot-background-color-on-pressed: var(--background-color-canvas);
--toggle-dot-margin: 1px;
--toggle-dot-height: calc(
var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 *
Expand All @@ -88,48 +94,32 @@
--toggle-dot-transform-x: calc(
var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width)
);
--input-width: var(--toggle-width);

appearance: none;
padding: 0;
margin: 0;
border: var(--toggle-border-width) solid var(--toggle-border-color);
height: var(--toggle-height);
width: var(--toggle-width);
border-radius: var(--toggle-border-radius);
background: var(--toggle-background-color);
background-color: var(--toggle-background-color);
box-sizing: border-box;
flex-shrink: 0;

&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}

&:enabled:hover {
background: var(--toggle-background-color-hover);
background-color: var(--toggle-background-color-hover);
border-color: var(--toggle-border-color);
}

&:enabled:active {
background: var(--toggle-background-color-active);
&:enabled:hover:active {
background-color: var(--toggle-background-color-active);
border-color: var(--toggle-border-color);
}

&[aria-pressed="true"] {
background: var(--toggle-background-color-pressed);
border-color: transparent;
}

&[aria-pressed="true"]:enabled:hover {
background: var(--toggle-background-color-pressed-hover);
border-color: transparent;
}

&[aria-pressed="true"]:enabled:active {
background: var(--toggle-background-color-pressed-active);
border-color: transparent;
}

&::before {
display: block;
content: "";
Expand All @@ -140,83 +130,95 @@
border-radius: var(--toggle-border-radius);
translate: 0;
}
}

.toggle-button[aria-pressed="true"] {
background-color: var(--toggle-background-color-pressed);
border-color: transparent;

&:enabled:hover {
background-color: var(--toggle-background-color-pressed-hover);
border-color: transparent;
}

&:enabled:hover:active {
background-color: var(--toggle-background-color-pressed-active);
border-color: transparent;
}

&[aria-pressed="true"]::before {
&::before {
translate: var(--toggle-dot-transform-x);
background-color: var(--toggle-dot-background-color-on-pressed);
}

&[aria-pressed="true"]:enabled:hover::before,
&[aria-pressed="true"]:enabled:active::before {
&:enabled:hover::before,
&:enabled:hover:active::before {
background-color: var(--toggle-dot-background-color-on-pressed);
}

/*#if MOZCENTRAL*/
/*&[aria-pressed="true"]:-moz-locale-dir(rtl)::before,*/
/*#endif*/
&[aria-pressed="true"]:dir(rtl)::before {
&:-moz-locale-dir(rtl)::before,
&:dir(rtl)::before {
translate: calc(-1 * var(--toggle-dot-transform-x));
}
}

@media (prefers-reduced-motion: no-preference) {
&::before {
transition: translate 100ms;
}
@media (prefers-reduced-motion: no-preference) {
.toggle-button::before {
transition: translate 100ms;
}
}

@media (prefers-contrast) {
&:enabled:hover {
border-color: var(--toggle-border-color-hover);
}
@media (prefers-contrast) {
.toggle-button:enabled:hover {
border-color: var(--toggle-border-color-hover);
}

&:enabled:active {
border-color: var(--toggle-border-color-active);
}
.toggle-button:enabled:hover:active {
border-color: var(--toggle-border-color-active);
}

&[aria-pressed="true"]:enabled {
border-color: var(--toggle-border-color);
position: relative;
}
.toggle-button[aria-pressed="true"]:enabled {
border-color: var(--toggle-border-color);
position: relative;

&[aria-pressed="true"]:enabled:hover,
&[aria-pressed="true"]:enabled:hover:active {
&:hover {
border-color: var(--toggle-border-color-hover);
}

&[aria-pressed="true"]:enabled:active {
background-color: var(--toggle-dot-background-color-active);
border-color: var(--toggle-dot-background-color-hover);
&:active {
background-color: var(--toggle-dot-background-color-active);
border-color: var(--toggle-dot-background-color-hover);
}
}
}

&:hover::before,
&:active::before {
background-color: var(--toggle-dot-background-color-hover);
}
.toggle-button:enabled:hover::before,
.toggle-button:enabled:hover:active::before {
background-color: var(--toggle-dot-background-color-hover);
}
}

@media (forced-colors) {
@media (forced-colors) {
.toggle-button {
--toggle-dot-background-color: var(--color-accent-primary);
--toggle-dot-background-color-hover: var(--color-accent-primary-hover);
--toggle-dot-background-color-active: var(--color-accent-primary-active);
--toggle-dot-background-color-on-pressed: var(--button-background-color);
--toggle-background-color-disabled: var(--button-background-color-disabled);
--toggle-border-color-hover: var(--border-interactive-color-hover);
--toggle-border-color-active: var(--border-interactive-color-active);
--toggle-border-color-disabled: var(--border-interactive-color-disabled);

&[aria-pressed="true"]:enabled::after {
border: 1px solid var(--button-background-color);
content: "";
position: absolute;
height: var(--toggle-height);
width: var(--toggle-width);
display: block;
border-radius: var(--toggle-border-radius);
inset: -2px;
}
--toggle-border-color-hover: var(--border-color-interactive-hover);
--toggle-border-color-active: var(--border-color-interactive-active);
}

&[aria-pressed="true"]:enabled:active::after {
border-color: var(--toggle-border-color-active);
}
.toggle-button[aria-pressed="true"]:enabled::after {
border: 1px solid var(--button-background-color);
content: "";
position: absolute;
height: var(--toggle-height);
width: var(--toggle-width);
display: block;
border-radius: var(--toggle-border-radius);
inset: -2px;
}

.toggle-button[aria-pressed="true"]:enabled:hover:active::after {
border-color: var(--toggle-border-color-active);
}
}
Loading