feat(cms): Allow customizing animated SVG colors in Strapi, apply to 3x SVGs

This commit:
* Adds an 'illustrationsTheme' global property in Strapi to set colors used by our SVGs, with defaults if not supplied
* Applies the theme to email code, backup codes, and authentication code SVGs, everywhere used
* Adds Storybook documentation for each new image and theme property

closes FXA-13256

Author: LZoog

libs/shared/cms/src/__generated__/gql.ts

@@ -91,6 +91,16 @@ export const RelyingPartyResultFactory = (
       header: faker.color.rgb(),
       splitLayoutAltText: faker.string.sample(),
     },
+    illustrationsTheme: {
+      primary: faker.color.rgb(),
+      primaryAlt: faker.color.rgb(),
+      secondary: faker.color.rgb(),
+      accentBg: faker.color.rgb(),
+      accentFg: faker.color.rgb(),
+      cloudPrimary: faker.color.rgb(),
+      cloudShadow: faker.color.rgb(),
+      hideClouds: faker.datatype.boolean(),
+    },
     pageTitle: faker.string.sample(),
     headerLogoUrl: faker.internet.url(),
     headerLogoAltText: faker.string.sample(),

libs/shared/cms/src/__generated__/graphql.ts

@@ -34,6 +34,16 @@ export const relyingPartyQuery = graphql(`
           splitLayout
           splitLayoutAltText
         }
+        illustrationsTheme {
+          primary
+          primaryAlt
+          secondary
+          accentBg
+          accentFg
+          cloudPrimary
+          cloudShadow
+          hideClouds
+        }
         favicon
         headlineFontSize
         headlineTextColor

libs/shared/cms/src/lib/queries/relying-party/factories.ts

@@ -35,6 +35,7 @@ export interface Shared {
     splitLayout: string | null;
     splitLayoutAltText: string | null;
   };
+  illustrationsTheme: IllustrationsTheme | null;
   pageTitle: string | null;
   headerLogoUrl: string | null;
   headerLogoAltText: string | null;
@@ -45,6 +46,17 @@ export interface Shared {
   additionalAccessibilityInfo: string | null;
 }
 
+export interface IllustrationsTheme {
+  primary: string | null;
+  primaryAlt: string | null;
+  secondary: string | null;
+  accentBg: string | null;
+  accentFg: string | null;
+  cloudPrimary: string | null;
+  cloudShadow: string | null;
+  hideClouds: boolean | null;
+}
+
 export interface FeatureFlags {
   syncConfirmedPageHideCTA: boolean | null;
   syncHidePromoAfterLogin: boolean | null;

libs/shared/cms/src/lib/queries/relying-party/query.ts

@@ -237,16 +237,16 @@ export const App = ({
           if (isValidSession) {
             setIsSignedIntoFirefoxDesktop(
               !!userFromBrowser?.sessionToken &&
-              integration.isFirefoxDesktopClient()
+                integration.isFirefoxDesktopClient()
             );
             const cachedUser = getAccountByUid(userFromBrowser.uid);
             // Refresh the token without switching the "current" account.
             persistAccount(
               cachedUser
                 ? {
-                  ...cachedUser,
-                  sessionToken: userFromBrowser.sessionToken,
-                }
+                    ...cachedUser,
+                    sessionToken: userFromBrowser.sessionToken,
+                  }
                 : userFromBrowser
             );
             if (!currentAccount()?.uid) {
@@ -568,14 +568,20 @@ const AuthAndAccountSetupRoutes = ({
         path="/reset_password/*"
         {...{ flowQueryParams, serviceName }}
       />
-      <ConfirmResetPasswordContainer path="/confirm_reset_password/*" />
+      <ConfirmResetPasswordContainer
+        path="/confirm_reset_password/*"
+        {...{ integration }}
+      />
       <ResetPasswordRecoveryChoiceContainer path="/reset_password_totp_recovery_choice/*" />
       <ResetPasswordRecoveryPhoneContainer
         path="/reset_password_recovery_phone/*"
         {...{ integration }}
       />
       <ConfirmTotpResetPasswordContainer path="/confirm_totp_reset_password/*" />
-      <ConfirmBackupCodeResetPasswordContainer path="/confirm_backup_code_reset_password/*" />
+      <ConfirmBackupCodeResetPasswordContainer
+        path="/confirm_backup_code_reset_password/*"
+        {...{ integration }}
+      />
       <CompleteResetPasswordContainer
         path="/complete_reset_password/*"
         {...{ integration }}
@@ -626,11 +632,21 @@ const AuthAndAccountSetupRoutes = ({
       />
       <SigninPasswordlessCodeContainer
         path="/oauth/signin_passwordless_code/*"
-        {...{ integration, serviceName, flowQueryParams, setCurrentSplitLayout }}
+        {...{
+          integration,
+          serviceName,
+          flowQueryParams,
+          setCurrentSplitLayout,
+        }}
       />
       <SigninPasswordlessCodeContainer
         path="/signin_passwordless_code/*"
-        {...{ integration, serviceName, flowQueryParams, setCurrentSplitLayout }}
+        {...{
+          integration,
+          serviceName,
+          flowQueryParams,
+          setCurrentSplitLayout,
+        }}
       />
       <SigninContainer
         path="/oauth/signin/*"

libs/shared/cms/src/lib/queries/relying-party/types.ts

@@ -38,7 +38,7 @@ export const PreparedImage = (props: PreparedImageProps) => {
   return (
     <>
       {showAriaLabel ? (
-        <FtlMsg id={props.ariaLabelFtlId} attrs={{ "aria-label": true }}>
+        <FtlMsg id={props.ariaLabelFtlId} attrs={{ 'aria-label': true }}>
           <Image role="img" aria-label={props.ariaLabel} {...{ className }} />
         </FtlMsg>
       ) : (
@@ -53,7 +53,19 @@ export const PreparedImage = (props: PreparedImageProps) => {
   );
 };
 
+export interface IllustrationsTheme {
+  primary?: string;
+  primaryAlt?: string;
+  secondary?: string;
+  accentBg?: string;
+  accentFg?: string;
+  cloudPrimary?: string;
+  cloudShadow?: string;
+  hideClouds?: boolean;
+}
+
 export type ImageProps = {
   className?: string;
   ariaHidden?: boolean;
+  illustrationsTheme?: IllustrationsTheme;
 };