feat(settings): put Vijay's dark mode behind feature flag

Because:

* we want to put dark mode on stage

This Commit:

* Rebases Vijay's dark mode branch onto latest main and put it behind the feature flag.
* enables theme selection in storybook

Closes: FXA-13026 FXA-13027

Co-authored-by: Vijay Budhram <[email protected]>

Author: MagentaManifold

libs/shared/assets/src/styles/flows.css

@@ -6,7 +6,7 @@
  * applied after content-server no longer needs it */
 
 .card {
-  @apply relative text-center w-full mobileLandscape:w-120 mobileLandscape:bg-white rounded-xl px-8 pb-10 pt-33 mobileLandscape:pt-20 mobileLandscape:shadow-card-grey-drop;
+  @apply relative text-center w-full mobileLandscape:w-120 mobileLandscape:bg-white mobileLandscape:dark:bg-grey-700 rounded-xl px-8 pb-10 pt-33 mobileLandscape:pt-20 mobileLandscape:shadow-card-grey-drop;
 
   /* HACK until content-server no longer needs .card, otherwise component classes take precedence */
   &.card-xl {

packages/fxa-content-server/app/scripts/head/startup-styles.js

@@ -54,6 +54,7 @@ StartupStyles.prototype = {
     this.addPasswordRevealerStyles();
     this.addFxiOSSyncStyles();
     this.addGetUserMediaStyles();
+    this.addDarkModeStyles();
   },
 
   addJSStyle: function () {
@@ -90,6 +91,32 @@ StartupStyles.prototype = {
       this._addClass('no-getusermedia');
     }
   },
+
+  addDarkModeStyles: function () {
+    // fxa-settings handles the `theme_preference` localStorage key
+    let themePreference = null;
+    try {
+      themePreference = JSON.parse(
+        this.window.localStorage.getItem('__fxa_storage.theme_preference')
+      );
+    } catch (e) {
+      // localStorage may be disabled; treat as light
+    }
+
+    let prefersDark = false;
+    if (themePreference === 'dark') {
+      prefersDark = true;
+    } else if (themePreference === 'system') {
+      prefersDark = !!(
+        this.window.matchMedia &&
+        this.window.matchMedia('(prefers-color-scheme: dark)').matches
+      );
+    }
+
+    if (prefersDark) {
+      this._addClass('dark');
+    }
+  },
 };
 
 export default StartupStyles;

packages/fxa-content-server/app/scripts/templates/pair/index.mustache

@@ -3,14 +3,14 @@
   <header class="relative">
     {{#showSuccessMessage}}
       <div id="fxa-connected-heading"
-          class="w-full text-md font-bold p-3 mb-5 rounded bg-green-500 text-gray-900 flex items-center justify-center before:content-icon-circle-check-outline before:flex">
+          class="w-full text-md font-bold p-3 mb-5 rounded bg-green-500 text-grey-900 dark:text-grey-900 flex items-center justify-center before:content-icon-circle-check-outline before:flex">
         <span class="ps-3 align-middle">{{#t}}Signed in successfully!{{/t}}</span>
       </div>
     {{/showSuccessMessage}}
 
     {{#needsMobileConfirmed}}
     <div class="relative flex items-center">
-      <button id="back-btn" class="me-4 tablet:me-0 p-2 inline-block tablet:absolute tablet:-start-20 -top-1.5 rounded hover:bg-grey-50 active:bg-grey-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" aria-label="{{#t}}Back{{/t}}" title="{{#t}}Back{{/t}}">
+      <button id="back-btn" class="me-4 tablet:me-0 p-2 inline-block tablet:absolute tablet:-start-20 -top-1.5 rounded hover:bg-grey-50 dark:hover:bg-grey-600 active:bg-grey-100 dark:active:bg-grey-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500" aria-label="{{#t}}Back{{/t}}" title="{{#t}}Back{{/t}}">
         <svg height="20" viewBox="0 0 16 14" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-grey-400 {{tabletBackArrowColor}} w-6 h-auto rtl:transform rtl:-scale-x-100"><path d="m15 5.99998h-11.58597l4.293-4.293c.37897-.39238.37355-1.016085-.01218-1.401818-.38573-.3857343-1.00944-.3911541-1.40182-.012182l-5.999999 6c-.3903823.3905-.3903823 1.0235 0 1.414l5.999999 6.00002c.39238.379 1.01609.3735 1.40182-.0122s.39115-1.0094.01218-1.4018l-4.293-4.29302h11.58597c.5523 0 1-.44772 1-1s-.4477-1-1-1z"/></svg>
       </button>
         <h1 class="text-grey-400 mb-0 tablet:mb-5 text-base inline-block align-top tablet:mt-0" id="cad-header">{{#t}}Connect another device{{/t}}</h1>

packages/fxa-content-server/app/scripts/templates/pair/unsupported.mustache

@@ -13,7 +13,7 @@
       the same meaning. If the header text changes later, consider adding an aria-label/role=img. -->
       <div class="bg-no-ff-desktop bg-contain bg-center bg-no-repeat h-44"></div>
       <h2 id="pair-unsupported-header" class="card-header focus:outline-none mt-5" tabindex="-1">{{#t}}Oops! It looks like you’re not using Firefox.{{/t}}</h2>
-      <div class="flex bg-orange-50 px-4 py-3 mt-6 rounded-lg mb-4">
+      <div class="flex bg-orange-50 dark:bg-orange-900/30 px-4 py-3 mt-6 rounded-lg mb-4">
         <div class="bg-icon-warning bg-contain bg-center bg-no-repeat w-6" aria-label="{{#t}}Attention:{{/t}}" role="img"></div>
         <p class="ps-3">{{#t}}Switch to Firefox and open this page to connect another device.{{/t}}</p>
       </div>
@@ -30,7 +30,7 @@
       {{/isSystemCameraUrl}}
       {{^isSystemCameraUrl}}
         {{^isFirefox}}
-          <div class="flex bg-orange-50 px-4 py-3 rounded-lg mb-8">
+          <div class="flex bg-orange-50 dark:bg-orange-900/30 px-4 py-3 rounded-lg mb-8">
             <div class="bg-icon-warning bg-contain bg-center bg-no-repeat w-10" aria-label="{{#t}}Attention:{{/t}}" role="img"></div>
             <p class="ps-3 text-sm">{{#t}}Oops! It looks like you’re not using Firefox.{{/t}} <a href="{{{ escapedMobileDownloadLink }}}" target="_blank" class="link-blue" data-glean-id="cad_redirect_mobile_download">{{#t}}Download Firefox now{{/t}}</a></p>
           </div>

packages/fxa-content-server/app/styles/tailwind.css

@@ -18,5 +18,5 @@
 @import './tailwind/tooltips';
 
 body {
-  @apply min-h-screen mobileLandscape:pt-12 text-black flex flex-col justify-center;
+  @apply min-h-screen mobileLandscape:pt-12 text-black dark:text-grey-10 bg-grey-10 dark:bg-grey-900 flex flex-col justify-center;
 }

packages/fxa-content-server/app/styles/tailwind/state.css

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 .info {
-  @apply flex gap-2 items-center mb-5 p-3 rounded bg-grey-50 text-black;
+  @apply flex gap-2 items-center mb-5 p-3 rounded bg-grey-50 dark:bg-grey-700 text-black dark:text-grey-100;
 }
 
 .info-text {
@@ -16,7 +16,7 @@
 }
 
 .success {
-  @apply text-xs text-grey-900 bg-green-500 font-bold p-3 my-3 hidden rounded;
+  @apply text-xs text-grey-900 dark:text-grey-900 bg-green-500 font-bold p-3 my-3 hidden rounded;
 
   /* REACT NOTE: probably don't need this nesting, add class in JSX instead */
   a {

packages/fxa-content-server/app/tests/spec/head/startup-styles.js

@@ -125,6 +125,53 @@ describe('head/startup-styles', function () {
     });
   });
 
+  describe('addDarkModeStyles', function () {
+    const THEME_KEY = '__fxa_storage.theme_preference';
+
+    it('adds `dark` when theme_preference is "dark"', function () {
+      windowMock.localStorage.setItem(THEME_KEY, JSON.stringify('dark'));
+      startupStyles.addDarkModeStyles();
+      assert.isTrue(/\bdark\b/.test(startupStyles.getClassName()));
+    });
+
+    it('does not add `dark` when theme_preference is "light"', function () {
+      windowMock.localStorage.setItem(THEME_KEY, JSON.stringify('light'));
+      startupStyles.addDarkModeStyles();
+      assert.isFalse(/\bdark\b/.test(startupStyles.getClassName()));
+    });
+
+    it('adds `dark` when theme_preference is "system" and OS prefers dark', function () {
+      windowMock.localStorage.setItem(THEME_KEY, JSON.stringify('system'));
+      windowMock.matchMedia = function () {
+        return { matches: true };
+      };
+      startupStyles.addDarkModeStyles();
+      assert.isTrue(/\bdark\b/.test(startupStyles.getClassName()));
+    });
+
+    it('does not add `dark` when theme_preference is "system" and OS prefers light', function () {
+      windowMock.localStorage.setItem(THEME_KEY, JSON.stringify('system'));
+      windowMock.matchMedia = function () {
+        return { matches: false };
+      };
+      startupStyles.addDarkModeStyles();
+      assert.isFalse(/\bdark\b/.test(startupStyles.getClassName()));
+    });
+
+    it('defaults to light (no `dark` class) when theme_preference is not set', function () {
+      startupStyles.addDarkModeStyles();
+      assert.isFalse(/\bdark\b/.test(startupStyles.getClassName()));
+    });
+
+    it('defaults to light when localStorage is unavailable', function () {
+      sinon
+        .stub(windowMock.localStorage, 'getItem')
+        .throws(new Error('unavailable'));
+      startupStyles.addDarkModeStyles();
+      assert.isFalse(/\bdark\b/.test(startupStyles.getClassName()));
+    });
+  });
+
   describe('initialize', function () {
     it('runs all the tests', function () {
       startupStyles.initialize();

packages/fxa-react/components/Footer/index.tsx

@@ -9,15 +9,21 @@ import mozLogo from '@fxa/shared/assets/images/moz-logo-bw-rgb.svg';
 
 export const Footer = ({
   showLocaleToggle = false,
-  localeToggleComponent
+  localeToggleComponent,
+  showDarkModeToggle = false,
+  darkModeToggleComponent,
 }: {
   showLocaleToggle?: boolean;
-  localeToggleComponent?: React.ComponentType<{ placement?: 'footer' | 'header' }>;
+  localeToggleComponent?: React.ComponentType<{
+    placement?: 'footer' | 'header';
+  }>;
+  showDarkModeToggle?: boolean;
+  darkModeToggleComponent?: React.ComponentType;
 }) => {
   const { l10n } = useLocalization();
   return (
     <footer
-      className="py-4 mt-16 mx-4 flex-wrap mobileLandscape:flex-nowrap mobileLandscape:mx-8 mobileLandscape:pb-6 flex border-t border-grey-100 text-grey-400"
+      className="py-4 mt-16 mx-4 flex-wrap mobileLandscape:flex-nowrap mobileLandscape:mx-8 mobileLandscape:pb-6 flex border-t border-grey-100 dark:border-grey-600 text-grey-400 dark:text-grey-300"
       data-testid="footer"
     >
       <LinkExternal
@@ -62,6 +68,11 @@ export const Footer = ({
           {React.createElement(localeToggleComponent, { placement: 'footer' })}
         </div>
       )}
+      {showDarkModeToggle && darkModeToggleComponent && (
+        <div className="w-full mobileLandscape:w-auto flex items-center mt-3 mobileLandscape:mt-0 mobileLandscape:ml-10">
+          {React.createElement(darkModeToggleComponent)}
+        </div>
+      )}
     </footer>
   );
 };

packages/fxa-react/components/Header/index.tsx

@@ -19,7 +19,7 @@ export const Header = (props: HeaderProps) => {
       // top-[env(safe-area-inset-top)] keeps the sticky header below the notch/status bar on scroll
       className={
         props.className ||
-        'sticky top-[env(safe-area-inset-top)] bg-grey-10 z-10'
+        'sticky top-[env(safe-area-inset-top)] bg-grey-10 dark:bg-grey-900 z-10'
       }
       style={props.styles}
     >

packages/fxa-react/components/LoadingSpinner/index.tsx

@@ -60,7 +60,7 @@ export const LoadingSpinner = ({
       className={classNames(
         className,
         fullScreen &&
-          'bg-grey-20 flex items-center flex-col justify-center h-screen select-none'
+          'bg-grey-20 dark:bg-grey-900 flex items-center flex-col justify-center h-screen select-none'
       )}
       data-testid="loading-spinner"
     >