corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1945700 - Add a boolean background property to dismiss buttons that enables contrasting colours r=omc-reviewers,aminomancer

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D237640
This commit is contained in:
Emily McMinn
2025-02-28 23:12:17 +00:00
parent bea3043c03
commit c4129a5ba8
8 changed files with 216 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
browser/components/asrouter/content-src/styles/_feature-callout-theme.scss
View File

@@ -33,6 +33,9 @@
--fc-link-color-hover: var(--fc-link-color-hover-light, #0250BB);
--fc-link-color-active: var(--fc-link-color-active-light, #053E94);
--fc-icon-success-color: var(--fc-icon-success-color-light, #2AC3A2);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-light, #FFF);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-light, color-mix(in srgb, currentColor 14%, #FFF));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-light, color-mix(in srgb, currentColor 14%, #FFF));
}
@mixin dark-theme {
@@ -62,6 +65,10 @@
--fc-link-color-hover: var(--fc-link-color-hover-dark, #80EBFF);
--fc-link-color-active: var(--fc-link-color-hover-active, #AAF2FF);
--fc-icon-success-color: var(--fc-icon-success-color-dark, #54FFBD);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-dark, rgb(66, 65, 77));
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-dark, color-mix(in srgb, currentColor 14%, rgb(66, 65, 77)));
}
@mixin hcm-theme {
@@ -92,4 +99,7 @@
--fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
--fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
--fc-icon-success-color: var(--fc-icon-success-color-hcm, LinkText);
--fc-dismiss-button-bg: var(--fc-dismiss-button-bg-hcm, -moz-dialog);
--fc-dismiss-button-bg-hover: var(--fc-dismiss-button-bg-hover-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
--fc-dismiss-button-bg-active: var(--fc-dismiss-button-bg-active-hcm, color-mix(in srgb, currentColor 14%, -moz-dialog));
}

24
browser/components/asrouter/content-src/styles/_feature-callout.scss
View File

@@ -24,6 +24,18 @@
@include dark-theme;
}
@at-root :root[lwt-popup='light'] #{&}:not(.simulateContent) {
color-scheme: light;
@include light-theme;
}
@at-root :root[lwt-popup='dark'] #{&}:not(.simulateContent) {
color-scheme: dark;
@include dark-theme;
}
@media (prefers-contrast) {
@include hcm-theme;
}
@@ -366,6 +378,18 @@
min-height: 24px;
min-width: 24px;
}
&.with-background {
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px, var(--fc-dismiss-button-bg);
&:hover {
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px, var(--fc-dismiss-button-bg-hover);
&:active {
background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px, var(--fc-dismiss-button-bg-active);
}
}
}
}
}