[PM-9314] AnonLayout Logo and Storybook Doc updates (#9849)

* set logo color based on theme

* update to text-alt2

* hardcode marketing brand colors

* add comment about AnonLayout usage

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -5,11 +5,12 @@ import { firstValueFrom } from "rxjs";
 import { ClientType } from "@bitwarden/common/enums";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 
 import { IconModule, Icon } from "../../../../components/src/icon";
 import { SharedModule } from "../../../../components/src/shared";
 import { TypographyModule } from "../../../../components/src/typography";
-import { BitwardenLogo } from "../icons/bitwarden-logo.icon";
+import { BitwardenLogoPrimary, BitwardenLogoWhite } from "../icons/bitwarden-logo.icon";
 
 @Component({
   standalone: true,
@@ -23,18 +24,20 @@ export class AnonLayoutComponent {
   @Input() icon: Icon;
   @Input() showReadonlyHostname: boolean;
 
-  protected logo = BitwardenLogo;
+  protected logo: Icon;
 
   protected year = "2024";
   protected clientType: ClientType;
   protected hostname: string;
   protected version: string;
+  protected theme: string;
 
   protected showYearAndVersion = true;
 
   constructor(
     private environmentService: EnvironmentService,
     private platformUtilsService: PlatformUtilsService,
+    private themeStateService: ThemeStateService,
   ) {
     this.year = new Date().getFullYear().toString();
     this.clientType = this.platformUtilsService.getClientType();
@@ -44,5 +47,12 @@ export class AnonLayoutComponent {
   async ngOnInit() {
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
+    this.theme = await firstValueFrom(this.themeStateService.selectedTheme$);
+
+    if (this.theme === "dark") {
+      this.logo = BitwardenLogoWhite;
+    } else {
+      this.logo = BitwardenLogoPrimary;
+    }
   }
 }

libs/auth/src/angular/anon-layout/anon-layout.mdx

@@ -6,8 +6,11 @@ import * as stories from "./anon-layout.stories";
 
 # AnonLayout Component
 
-The Auth-owned AnonLayoutComponent is to be used for unauthenticated pages, where we don't know who
-the user is (this includes viewing a Send).
+The Auth-owned AnonLayoutComponent is to be used primarily for unauthenticated pages\*, where we
+don't know who the user is.
+
+\*There will be a few exceptions to this—that is, AnonLayout will also be used for the Unlock
+and View Send pages.
 
 ---
 

libs/auth/src/angular/anon-layout/anon-layout.stories.ts

@@ -1,10 +1,11 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
-import { BehaviorSubject } from "rxjs";
+import { BehaviorSubject, of } from "rxjs";
 
 import { ClientType } from "@bitwarden/common/enums";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 
 import { ButtonModule } from "../../../../components/src/button";
 import { I18nMockService } from "../../../../components/src/utils/i18n-mock.service";
@@ -46,6 +47,12 @@ export default {
             }).asObservable(),
           },
         },
+        {
+          provide: ThemeStateService,
+          useValue: {
+            selectedTheme$: of("light"),
+          },
+        },
       ],
     }),
   ],