Bug 1844215 - Add styling for cta link and multiselect to feature cal…

…lout for use in newtab survey r=aminomancer,desktop-theme-reviewers,dao Differential Revision: https://phabricator.services.mozilla.com/D184400
dothq · Jul 27, 2023 · 98580b3 · 98580b3
1 parent 28072fd
commit 98580b3
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 2 deletions.
diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.css b/browser/components/newtab/aboutwelcome/content/aboutwelcome.css
@@ -16,11 +16,16 @@
   --fc-button-color-active: var(--fc-button-color-active-light, #15141A);
   --fc-button-border-active: var(--fc-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);
+  color-scheme: light;
   position: absolute;
   transition: opacity 0.5s ease;
   z-index: 2147483645;
   outline: none;
   color: var(--fc-color);
+  accent-color: var(--fc-accent-color);
 }
 @media (prefers-color-scheme: dark) {
   .onboardingContainer.featureCallout {
@@ -37,6 +42,9 @@
     --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
     --fc-button-color-active: var(--fc-button-color-active-dark, #FBFBFE);
     --fc-button-border-active: var(--fc-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);
   }
 }
 @media (prefers-contrast) {
@@ -55,6 +63,9 @@
     --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
     --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
     --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+    --fc-link-color: var(--fc-link-color-hcm, LinkText);
+    --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+    --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
   }
 }
 @media (-moz-content-prefers-color-scheme: light) {
@@ -73,6 +84,10 @@
     --fc-button-color-active: var(--fc-button-color-active-light, #15141A);
     --fc-button-border-active: var(--fc-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);
+    color-scheme: light;
   }
 }
 @media (-moz-content-prefers-color-scheme: dark) {
@@ -90,6 +105,10 @@
     --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
     --fc-button-color-active: var(--fc-button-color-active-dark, #FBFBFE);
     --fc-button-border-active: var(--fc-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);
+    color-scheme: dark;
   }
 }
 @media (prefers-contrast) {
@@ -108,6 +127,9 @@
     --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
     --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
     --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+    --fc-link-color: var(--fc-link-color-hcm, LinkText);
+    --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+    --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
   }
 }
 .onboardingContainer.featureCallout.hidden {
@@ -153,6 +175,33 @@
 .onboardingContainer.featureCallout .screen[pos=callout] .welcome-text h2 {
   margin-block: 10px;
 }
+.onboardingContainer.featureCallout .screen[pos=callout] .multi-select-container {
+  margin-inline: 30px;
+  padding: 1em 0 0;
+  font-size: 0.8em;
+  color: inherit;
+}
+.onboardingContainer.featureCallout .screen[pos=callout] .multi-select-container input[type=radio] {
+  margin-inline-end: 0.5em;
+  min-width: auto;
+}
+.onboardingContainer.featureCallout .screen[pos=callout] .cta-link {
+  background: none;
+  text-decoration: underline;
+  cursor: pointer;
+  border: none;
+  padding: 0;
+  color: var(--fc-link-color);
+  float: inline-start;
+  margin-inline: 30px 10px;
+  margin-block: 8px;
+}
+.onboardingContainer.featureCallout .screen[pos=callout] .cta-link:hover {
+  color: var(--fc-link-color-hover);
+}
+.onboardingContainer.featureCallout .screen[pos=callout] .cta-link:active {
+  color: var(--fc-link-color-active);
+}
 .onboardingContainer.featureCallout .screen[pos=callout] .section-secondary {
   display: none;
 }

diff --git a/browser/components/newtab/content-src/styles/_feature-callout-theme.scss b/browser/components/newtab/content-src/styles/_feature-callout-theme.scss
@@ -20,6 +20,9 @@
   --fc-button-color-active: var(--fc-button-color-active-light, #15141A);
   --fc-button-border-active: var(--fc-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);
 }
 
 @mixin dark-theme {
@@ -36,6 +39,9 @@
   --fc-button-background-active: var(--fc-button-background-active-dark, #5B5B66);
   --fc-button-color-active: var(--fc-button-color-active-dark, #FBFBFE);
   --fc-button-border-active: var(--fc-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);
 }
 
 @mixin hcm-theme {
@@ -53,4 +59,7 @@
   --fc-button-color-active: var(--fc-button-color-active-hcm, ButtonFace);
   --fc-button-border-active: var(--fc-button-border-active-hcm, ButtonText);
   --fc-step-color: var(--fc-accent-color-hcm, LinkText);
+  --fc-link-color: var(--fc-link-color-hcm, LinkText);
+  --fc-link-color-hover: var(--fc-link-color-hover-hcm, LinkText);
+  --fc-link-color-active: var(--fc-link-color-active-hcm, ActiveText);
 }
diff --git a/browser/components/newtab/content-src/styles/_feature-callout.scss b/browser/components/newtab/content-src/styles/_feature-callout.scss
@@ -11,11 +11,13 @@ $max-z-index: 2147483647;
   // FeatureCallout.sys.mjs for the color values
   @include light-theme;
 
+  color-scheme: light;
   position: absolute;
   transition: opacity 0.5s ease;
   z-index: $max-z-index - 2;
   outline: none;
   color: var(--fc-color);
+  accent-color: var(--fc-accent-color);
 
   @media (prefers-color-scheme: dark) {
     @include dark-theme;
@@ -31,10 +33,14 @@ $max-z-index: 2147483647;
   &.simulateContent {
     @media (-moz-content-prefers-color-scheme: light) {
       @include light-theme;
+
+      color-scheme: light;
     }
 
     @media (-moz-content-prefers-color-scheme: dark) {
       @include dark-theme;
+
+      color-scheme: dark;
     }
 
     @media (prefers-contrast) {
@@ -101,6 +107,38 @@ $max-z-index: 2147483647;
         }
       }
 
+      .multi-select-container {
+        margin-inline: 30px;
+        padding: 1em 0 0;
+        font-size: 0.8em;
+        color: inherit;
+
+        input[type='radio'] {
+          margin-inline-end: 0.5em;
+          min-width: auto;
+        }
+      }
+
+      .cta-link {
+        background: none;
+        text-decoration: underline;
+        cursor: pointer;
+        border: none;
+        padding: 0;
+        color: var(--fc-link-color);
+        float: inline-start;
+        margin-inline: 30px 10px;
+        margin-block: 8px;
+
+        &:hover {
+          color: var(--fc-link-color-hover);
+        }
+
+        &:active {
+          color: var(--fc-link-color-active);
+        }
+      }
+
       // Secondary section is not included in callouts
       .section-secondary {
         display: none;

diff --git a/browser/modules/FeatureCallout.sys.mjs b/browser/modules/FeatureCallout.sys.mjs
@@ -1489,6 +1489,9 @@ export class FeatureCallout {
     "button-background-active",
     "button-color-active",
     "button-border-active",
+    "link-color",
+    "link-color-hover",
+    "link-color-active",
   ];
 
   /** @type {Object<String, FeatureCalloutTheme>} */
@@ -1514,6 +1517,10 @@ export class FeatureCallout {
         "button-color-active":
           "var(--newtab-text-primary-color, var(--in-content-page-color))",
         "button-border-active": "transparent",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
       },
       dark: {
         border:
@@ -1554,6 +1561,10 @@ export class FeatureCallout {
         "button-background-active": "rgb(221, 222, 223)",
         "button-color-active": "rgb(12, 12, 13)",
         "button-border-active": "transparent",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
       },
       dark: {
         background: "#1C1B22",
@@ -1588,7 +1599,7 @@ export class FeatureCallout {
         color: "var(--newtab-text-primary-color, WindowText)",
         border:
           "color-mix(in srgb, var(--newtab-background-color-secondary, #FFF) 80%, #000)",
-        "accent-color": "SelectedItem",
+        "accent-color": "#0061e0",
         "button-background": "color-mix(in srgb, transparent 93%, #000)",
         "button-color": "var(--newtab-text-primary-color, WindowText)",
         "button-border": "transparent",
@@ -1598,20 +1609,29 @@ export class FeatureCallout {
         "button-background-active": "color-mix(in srgb, transparent 80%, #000)",
         "button-color-active": "var(--newtab-text-primary-color, WindowText)",
         "button-border-active": "transparent",
+        "link-color": "rgb(0, 97, 224)",
+        "link-color-hover": "rgb(0, 97, 224)",
+        "link-color-active": "color-mix(in srgb, rgb(0, 97, 224) 80%, #000)",
+        "link-color-visited": "rgb(0, 97, 224)",
       },
       dark: {
+        "accent-color": "rgb(0, 221, 255)",
         background: "var(--newtab-background-color-secondary, #42414D)",
         border:
           "color-mix(in srgb, var(--newtab-background-color-secondary, #42414D) 80%, #FFF)",
         "button-background": "color-mix(in srgb, transparent 80%, #000)",
         "button-background-hover": "color-mix(in srgb, transparent 65%, #000)",
         "button-background-active": "color-mix(in srgb, transparent 55%, #000)",
+        "link-color": "rgb(0, 221, 255)",
+        "link-color-hover": "rgb(0,221,255)",
+        "link-color-active": "color-mix(in srgb, rgb(0, 221, 255) 60%, #FFF)",
+        "link-color-visited": "rgb(0, 221, 255)",
       },
       hcm: {
         background: "-moz-dialog",
         color: "-moz-dialogtext",
         border: "-moz-dialogtext",
-        "accent-color": "LinkText",
+        "accent-color": "SelectedItem",
         "button-background": "ButtonFace",
         "button-color": "ButtonText",
         "button-border": "ButtonText",
@@ -1621,6 +1641,10 @@ export class FeatureCallout {
         "button-background-active": "ButtonText",
         "button-color-active": "ButtonFace",
         "button-border-active": "ButtonText",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
       },
     },
     // These colors are intended to inherit the user's theme properties from the
@@ -1642,6 +1666,10 @@ export class FeatureCallout {
         "button-background-active": "var(--button-active-bgcolor)",
         "button-color-active": "var(--arrowpanel-color)",
         "button-border-active": "transparent",
+        "link-color": "LinkText",
+        "link-color-hover": "LinkText",
+        "link-color-active": "ActiveText",
+        "link-color-visited": "VisitedText",
       },
     },
   };