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

Differential Revision: https://phabricator.services.mozilla.com/D237640

browser/components/aboutwelcome/content-src/aboutwelcome.scss

@@ -2086,6 +2086,18 @@ html {
       left: 0;
       right: auto;
     }
+
+    &.with-background {
+      background-color: var(--in-content-page-background);
+
+      &:hover {
+        background-color: var(--button-background-color-hover);
+      }
+
+      &:active {
+        background-color: var(--button-background-color-active);
+      }
+    }
   }
 
   @keyframes fadein {

browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx

@@ -307,11 +307,11 @@ export class ProtonScreen extends React.PureComponent {
   }
 
   renderDismissButton() {
-    const { size, marginBlock, marginInline, label } =
+    const { size, marginBlock, marginInline, label, background } =
       this.props.content.dismiss_button;
     return (
       <button
-        className="dismiss-button"
+        className={`dismiss-button ${background ? "with-background" : ""}`}
         onClick={this.props.handleAction}
         value="dismiss_button"
         data-l10n-id={label?.string_id || "spotlight-dialog-close-button"}

browser/components/aboutwelcome/content/aboutwelcome.bundle.js

@@ -1137,10 +1137,11 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       size,
       marginBlock,
       marginInline,
-      label
+      label,
+      background
     } = this.props.content.dismiss_button;
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
-      className: "dismiss-button",
+      className: `dismiss-button ${background ? "with-background" : ""}`,
       onClick: this.props.handleAction,
       value: "dismiss_button",
       "data-l10n-id": label?.string_id || "spotlight-dialog-close-button",

browser/components/aboutwelcome/content/aboutwelcome.css

@@ -30,6 +30,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));
   position: absolute;
   z-index: 2147483647;
   outline: none;
@@ -76,8 +79,78 @@
     --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)));
   }
 }
+:root[lwt-popup=light] #feature-callout:not(.simulateContent) {
+  color-scheme: light;
+  --fc-background: var(--fc-background-light, #FFF);
+  --fc-color: var(--fc-color-light, rgb(21, 20, 26));
+  --fc-border: var(--fc-border-light, #CFCFD8);
+  --fc-accent-color: var(--fc-accent-color-light, rgb(0, 97, 224));
+  --fc-button-background: var(--fc-button-background-light, #F0F0F4);
+  --fc-button-color: var(--fc-button-color-light, rgb(21, 20, 26));
+  --fc-button-border: var(--fc-button-border-light, transparent);
+  --fc-button-background-hover: var(--fc-button-background-hover-light, #E0E0E6);
+  --fc-button-color-hover: var(--fc-button-color-hover-light, rgb(21, 20, 26));
+  --fc-button-border-hover: var(--fc-button-border-hover-light, transparent);
+  --fc-button-background-active: var(--fc-button-background-active-light, #CFCFD8);
+  --fc-button-color-active: var(--fc-button-color-active-light, rgb(21, 20, 26));
+  --fc-button-border-active: var(--fc-button-border-active-light, transparent);
+  --fc-primary-button-background: var(--fc-primary-button-background-light, #0061E0);
+  --fc-primary-button-color: var(--fc-primary-button-color-light, rgb(251,251,254));
+  --fc-primary-button-border: var(--fc-primary-button-border-light, transparent);
+  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-light, #0250BB);
+  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-light, rgb(251,251,254));
+  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-light, transparent);
+  --fc-primary-button-background-active: var(--fc-primary-button-background-active-light, #053E94);
+  --fc-primary-button-color-active: var(--fc-primary-button-color-active-light, rgb(251,251,254));
+  --fc-primary-button-border-active: var(--fc-primary-button-border-active-light, transparent);
+  --fc-step-color: color-mix(in srgb, currentColor 50%, transparent);
+  --fc-link-color: var(--fc-link-color-light, #0061E0);
+  --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));
+}
+
+:root[lwt-popup=dark] #feature-callout:not(.simulateContent) {
+  color-scheme: dark;
+  --fc-background: var(--fc-background-dark, rgb(43, 42, 51));
+  --fc-color: var(--fc-color-dark, rgb(251, 251, 254));
+  --fc-border: var(--fc-border-dark, #3A3944);
+  --fc-accent-color: var(--fc-accent-color-dark, rgb(0, 221, 255));
+  --fc-button-background: var(--fc-button-background-dark, #2B2A33);
+  --fc-button-color: var(--fc-button-color-dark, rgb(251, 251, 254));
+  --fc-button-border: var(--fc-button-border-dark, transparent);
+  --fc-button-background-hover: var(--fc-button-background-hover-dark, #52525E);
+  --fc-button-color-hover: var(--fc-button-color-hover-dark, rgb(251, 251, 254));
+  --fc-button-border-hover: var(--fc-button-border-hover-dark, transparent);
+  --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
+  --fc-button-color-active: var(--fc-button-color-active-dark, rgb(251, 251, 254));
+  --fc-button-border-active: var(--fc-button-border-active-dark, transparent);
+  --fc-primary-button-background: var(--fc-primary-button-background-dark, rgb(0,221,255));
+  --fc-primary-button-color: var(--fc-primary-button-color-dark, rgb(43,42,51));
+  --fc-primary-button-border: var(--fc-primary-button-border-dark, transparent);
+  --fc-primary-button-background-hover: var(--fc-primary-button-background-hover-dark, rgb(128,235,255));
+  --fc-primary-button-color-hover: var(--fc-primary-button-color-hover-dark, rgb(43,42,51));
+  --fc-primary-button-border-hover: var(--fc-primary-button-border-hover-dark, transparent);
+  --fc-primary-button-background-active: var(--fc-primary-button-background-active-dark, rgb(170,242,255));
+  --fc-primary-button-color-active: var(--fc-primary-button-color-active-dark, rgb(43,42,51));
+  --fc-primary-button-border-active: var(--fc-primary-button-border-active-dark, transparent);
+  --fc-link-color: var(--fc-link-color-dark, #00DDFF);
+  --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)));
+}
+
 @media (prefers-contrast) {
   #feature-callout {
     --fc-background: var(--fc-background-hcm, -moz-dialog);
@@ -107,6 +180,9 @@
     --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));
   }
 }
 #feature-callout.simulateContent {
@@ -141,6 +217,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));
   }
 }
 @media (-moz-content-prefers-color-scheme: dark) {
@@ -171,6 +250,9 @@
     --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)));
   }
 }
 :root[lwt-newtab-brighttext] #feature-callout.simulateContent.lwtNewtab {
@@ -201,6 +283,9 @@
   --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)));
 }
 
 @media (prefers-contrast) {
@@ -232,6 +317,9 @@
     --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));
   }
 }
 panel#feature-callout {
@@ -446,6 +534,15 @@ div#feature-callout.hidden {
   min-height: 24px;
   min-width: 24px;
 }
+#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background {
+  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg);
+}
+#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover {
+  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-hover);
+}
+#feature-callout .screen[pos=callout] .section-main .dismiss-button.with-background:hover:active {
+  background: url("chrome://global/skin/icons/close.svg") no-repeat center/16px, var(--fc-dismiss-button-bg-active);
+}
 #feature-callout .screen[pos=callout] .action-buttons {
   display: flex;
   flex-flow: row nowrap;
@@ -3043,6 +3140,15 @@ html {
   left: 0;
   right: auto;
 }
+.onboardingContainer .dismiss-button.with-background {
+  background-color: var(--in-content-page-background);
+}
+.onboardingContainer .dismiss-button.with-background:hover {
+  background-color: var(--button-background-color-hover);
+}
+.onboardingContainer .dismiss-button.with-background:active {
+  background-color: var(--button-background-color-active);
+}
 @keyframes fadein {
   from {
     opacity: 0;

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

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

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

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

browser/components/asrouter/modules/FeatureCallout.sys.mjs

@@ -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))",
       },
     },
   };

browser/components/asrouter/modules/FeatureCalloutMessages.sys.mjs

@@ -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",