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);
}
}
}
}
}

56
browser/components/asrouter/modules/FeatureCallout.sys.mjs
View File

@@ -1955,6 +1955,9 @@ export class FeatureCallout {
"link-color-hover",
"link-color-active",
"icon-success-color",
"dismiss-button-bg",
"dismiss-button-bg-hover",
"dismiss-button-bg-active",
];
/** @type {Object<String, FeatureCalloutTheme>} */
@@ -2002,6 +2005,12 @@ export class FeatureCallout {
"link-color-hover": "LinkText",
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"dismiss-button-bg":
"var(--newtab-background-color, var(--in-content-page-background)) linear-gradient(var(--newtab-background-color-secondary), var(--newtab-background-color-secondary))",
"dismiss-button-bg-hover":
"var(--newtab-background-color, var(--in-content-page-background)) linear-gradient(color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary)), color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary)))",
"dismiss-button-bg-active":
"var(--newtab-background-color, var(--in-content-page-background)) linear-gradient(color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary)), color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary)))",
},
dark: {
border:
@@ -2024,6 +2033,11 @@ export class FeatureCallout {
"button-background-active": "ButtonText",
"button-color-active": "ButtonFace",
"button-border-active": "ButtonText",
"dismiss-button-bg": "-moz-dialog",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, -moz-dialog)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, -moz-dialog)",
},
},
// PDF.js colors are from toolkit/components/pdfjs/content/web/viewer.css
@@ -2047,6 +2061,10 @@ export class FeatureCallout {
"link-color-hover": "LinkText",
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"dismiss-button-bg": "#FFF",
"dismiss-button-bg-hover": "color-mix(in srgb, currentColor 14%, #FFF)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, #FFF)",
},
dark: {
background: "#1C1B22",
@@ -2058,6 +2076,11 @@ export class FeatureCallout {
"button-color-hover": "#F9F9FA",
"button-background-active": "rgb(102, 102, 103)",
"button-color-active": "#F9F9FA",
"dismiss-button-bg": "#1C1B22",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, #1C1B22)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, #1C1B22)",
},
hcm: {
background: "-moz-dialog",
@@ -2073,6 +2096,11 @@ export class FeatureCallout {
"button-background-active": "Highlight",
"button-color-active": "CanvasText",
"button-border-active": "Highlight",
"dismiss-button-bg": "-moz-dialog",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, -moz-dialog)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, -moz-dialog)",
},
},
newtab: {
@@ -2098,6 +2126,12 @@ export class FeatureCallout {
"link-color-active": "color-mix(in srgb, rgb(0, 97, 224) 80%, #000)",
"link-color-visited": "rgb(0, 97, 224)",
"icon-success-color": "#2AC3A2",
"dismiss-button-bg":
"var(--newtab-background-color, #F9F9FB) linear-gradient(var(--newtab-background-color-secondary, #FFF), var(--newtab-background-color-secondary, #FFF))",
"dismiss-button-bg-hover":
"var(--newtab-background-color, #F9F9FB) linear-gradient(color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #FFF)), color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #FFF)))",
"dismiss-button-bg-active":
"var(--newtab-background-color, #F9F9FB) linear-gradient(color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #FFF)), color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #FFF)))",
},
dark: {
"accent-color": "rgb(0, 221, 255)",
@@ -2113,6 +2147,12 @@ export class FeatureCallout {
"link-color-active": "color-mix(in srgb, rgb(0, 221, 255) 60%, #FFF)",
"link-color-visited": "rgb(0, 221, 255)",
"icon-success-color": "#54FFBD",
"dismiss-button-bg":
"var(--newtab-background-color, #2B2A33) linear-gradient(var(--newtab-background-color-secondary, #42414D), var(--newtab-background-color-secondary, #42414D))",
"dismiss-button-bg-hover":
"var(--newtab-background-color, #2B2A33) linear-gradient(color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #42414D)), color-mix(in srgb, currentColor 14%, var(--newtab-background-color-secondary, #42414D)))",
"dismiss-button-bg-active":
"var(--newtab-background-color, #2B2A33) linear-gradient(color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #42414D), color-mix(in srgb, currentColor 21%, var(--newtab-background-color-secondary, #42414D)))",
},
hcm: {
background: "-moz-dialog",
@@ -2132,6 +2172,11 @@ export class FeatureCallout {
"link-color-hover": "LinkText",
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"dismiss-button-bg": "-moz-dialog",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, -moz-dialog)",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, -moz-dialog)",
},
},
// These colors are intended to inherit the user's theme properties from the
@@ -2173,9 +2218,20 @@ export class FeatureCallout {
"link-color-active": "ActiveText",
"link-color-visited": "VisitedText",
"icon-success-color": "var(--attention-dot-color)",
"dismiss-button-bg":
"Menu linear-gradient(var(--arrowpanel-background), var(--arrowpanel-background))",
"dismiss-button-bg-hover":
"Menu linear-gradient(color-mix(in srgb, currentColor 14%, var(--arrowpanel-background)))",
"dismiss-button-bg-active":
"Menu linear-gradient(color-mix(in srgb, currentColor 21%, var(--arrowpanel-background)))",
},
hcm: {
background: "var(--arrowpanel-background)",
"dismiss-button-bg": "var(--arrowpanel-background)",
"dismiss-button-bg-hover":
"color-mix(in srgb, currentColor 14%, var(--arrowpanel-background))",
"dismiss-button-bg-active":
"color-mix(in srgb, currentColor 21%, var(--arrowpanel-background))",
},
},
};

3
browser/components/asrouter/modules/FeatureCalloutMessages.sys.mjs
View File

@@ -285,6 +285,9 @@ const MESSAGES = () => {
skip_in_tests:
"not tested in automation and might pop up unexpectedly during review checker tests",
},
// Appears the first time a user uses the "save and close" action on a tab group,
// anchored to the alltabs-button. Will only show if at least an hour has passed
// since the CREATE_TAB_GROUP callout showed.
{
id: "SAVE_TAB_GROUP_ONBOARDING_CALLOUT",
template: "feature_callout",