Bug 1879805 - Use appropriate system colors for windows buttons. r=desktop-theme-reviewers,Itiel

So that they work properly in HCM.

Differential Revision: https://phabricator.services.mozilla.com/D209969
This commit is contained in:
Emilio Cobos Álvarez 2024-05-14 18:34:20 +00:00
parent 854a7b1930
commit 0a16d43093
2 changed files with 33 additions and 49 deletions

View File

@ -18,15 +18,35 @@ button {
text-shadow: none;
border: 1px solid ThreeDLightShadow;
padding: 2px 3px;
/* TODO: In Windows 11 perhaps we want some border-radius */
}
button:where(:hover) {
background-color: -moz-ButtonHoverFace;
}
&:where(:hover) {
background-color: -moz-buttonhoverface;
color: -moz-buttonhovertext;
}
button:where(:hover:active) {
background-color: -moz-ButtonActiveFace;
&:where(:hover:active) {
background-color: -moz-buttonactiveface;
color: -moz-buttonactivetext;
}
&:focus-visible {
outline: var(--default-focusring);
outline-offset: calc(-1 * var(--default-focusring-width) - 2px);
@media (prefers-color-scheme: dark) {
outline: 1px auto;
outline-offset: initial;
}
}
&:where([disabled="true"]) {
color: GrayText;
background-color: ButtonFace;
}
&.plain {
margin: 0 !important;
padding: 0 !important;
}
}
.button-text {
@ -34,41 +54,6 @@ button:where(:hover:active) {
text-align: center;
}
/* .......... focused state .......... */
button:focus-visible {
outline: var(--default-focusring);
outline-offset: calc(-1 * var(--default-focusring-width) - 2px);
}
@media (prefers-color-scheme: dark) {
button:focus-visible {
outline: 1px auto;
outline-offset: initial;
}
}
/* .......... default/hover/focused state .......... */
@media (prefers-contrast) {
/* This is for high-contrast black and white themes on Windows 8 and later,
where the native appearance renders a different background (which
appears to be equivalent to the Highlight color) if the button is in the
default, hovered or focused state. However, if these states overlap with
the active, disabled, open or checked state, the appearance reverts back
to the default background. */
button:where([default="true"],:hover,:focus):where(:not(:active,[disabled="true"],[open="true"],[checked="true"])) {
color: HighlightText;
}
}
/* .......... disabled state .......... */
button:where([disabled="true"]) {
color: GrayText;
background-color: ButtonFace;
}
/* ::::: menu buttons ::::: */
.button-menu-dropmarker {
@ -77,10 +62,3 @@ button:where([disabled="true"]) {
-moz-context-properties: fill;
fill: currentColor;
}
/* ::::: plain buttons ::::: */
button.plain {
margin: 0 !important;
padding: 0 !important;
}

View File

@ -103,6 +103,9 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme,
auto IsHighlightColor = [&] {
switch (aID) {
case ColorID::MozButtonhoverface:
case ColorID::MozButtonactivetext:
return nsUXThemeData::IsHighContrastOn();
case ColorID::MozMenuhover:
return !UseNonNativeMenuColors(aScheme);
case ColorID::Highlight:
@ -120,6 +123,9 @@ nsresult nsLookAndFeel::NativeGetColor(ColorID aID, ColorScheme aScheme,
auto IsHighlightTextColor = [&] {
switch (aID) {
case ColorID::MozButtonhovertext:
case ColorID::MozButtonactiveface:
return nsUXThemeData::IsHighContrastOn();
case ColorID::MozMenubarhovertext:
if (UseNonNativeMenuColors(aScheme)) {
return false;