[PM-15892] [PM-12250]Remove nord and remnants from solarizedark (#13449)

* Remove nord and remnants from solarizedark

* Update window reload color

* Remove extension-refresh feature flag from clients (#13450)

Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

* Remove usage of nord and solarized themes within DarkImageDirective

---------

Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com>
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>

.github/renovate.json5

@@ -173,7 +173,6 @@
         "cross-env",
         "del",
         "lit",
-        "nord",
         "patch-package",
         "prettier",
         "prettier-plugin-tailwindcss",

apps/browser/src/_locales/en/messages.json

@@ -1166,10 +1166,6 @@
     "message": "Light",
     "description": "Light color"
   },
-  "solarizedDark": {
-    "message": "Solarized dark",
-    "description": "'Solarized' is a noun and the name of a color scheme. It should not be translated."
-  },
   "exportFrom": {
     "message": "Export from"
   },

apps/browser/src/autofill/content/components/constants/styles.ts

@@ -124,8 +124,6 @@ export const themes = {
 
   // For compatibility
   system: lightTheme,
-  nord: lightTheme,
-  solarizedDark: darkTheme,
 };
 
 export const spacing = {

apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts

@@ -277,32 +277,6 @@ describe("AutofillOverlayIframeService", () => {
             borderColor: "#4c525f",
           });
         });
-
-        it("updates the border to match the `nord` theme", () => {
-          const message = {
-            command: "initAutofillOverlayList",
-            theme: ThemeType.Nord,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
-            borderColor: "#2E3440",
-          });
-        });
-
-        it("updates the border to match the `solarizedDark` theme", () => {
-          const message = {
-            command: "initAutofillOverlayList",
-            theme: ThemeType.SolarizedDark,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(updateElementStylesSpy).toBeCalledWith(autofillOverlayIframeService["iframe"], {
-            borderColor: "#073642",
-          });
-        });
       });
 
       describe("updating the iframe's position", () => {

apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts

@@ -221,12 +221,6 @@ class AutofillOverlayIframeService implements AutofillOverlayIframeServiceInterf
     if (verifiedTheme === ThemeTypes.Dark) {
       borderColor = "#4c525f";
     }
-    if (theme === ThemeTypes.Nord) {
-      borderColor = "#2E3440";
-    }
-    if (theme === ThemeTypes.SolarizedDark) {
-      borderColor = "#073642";
-    }
     if (borderColor) {
       this.updateElementStyles(this.iframe, { borderColor });
     }

apps/browser/src/autofill/notification/bar.scss

@@ -334,19 +334,3 @@ button {
     }
   }
 }
-
-.theme_solarizedDark {
-  .notification-bar-redesign #content .inner-wrapper {
-    #select-folder {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjZWVlOGQ1JyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
-    }
-  }
-}
-
-.theme_nord {
-  .notification-bar-redesign #content .inner-wrapper {
-    #select-folder {
-      background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNicgaGVpZ2h0PScxNicgZmlsbD0nbm9uZSc+PHBhdGggc3Ryb2tlPScjRTVFOUYwJyBkPSdtNSA2IDMgMyAzLTMnLz48L3N2Zz4=");
-    }
-  }
-}

apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts

@@ -302,38 +302,6 @@ describe("AutofillInlineMenuIframeService", () => {
             },
           );
         });
-
-        it("updates the border to match the `nord` theme", () => {
-          const message = {
-            command: "initAutofillInlineMenuList",
-            theme: ThemeType.Nord,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(updateElementStylesSpy).toHaveBeenCalledWith(
-            autofillInlineMenuIframeService["iframe"],
-            {
-              borderColor: "#2E3440",
-            },
-          );
-        });
-
-        it("updates the border to match the `solarizedDark` theme", () => {
-          const message = {
-            command: "initAutofillInlineMenuList",
-            theme: ThemeType.SolarizedDark,
-          };
-
-          sendPortMessage(portSpy, message);
-
-          expect(updateElementStylesSpy).toHaveBeenCalledWith(
-            autofillInlineMenuIframeService["iframe"],
-            {
-              borderColor: "#073642",
-            },
-          );
-        });
       });
 
       describe("updating the iframe's position", () => {

apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts

@@ -250,12 +250,6 @@ export class AutofillInlineMenuIframeService implements AutofillInlineMenuIframe
     if (verifiedTheme === ThemeTypes.Dark) {
       borderColor = "#4c525f";
     }
-    if (theme === ThemeTypes.Nord) {
-      borderColor = "#2E3440";
-    }
-    if (theme === ThemeTypes.SolarizedDark) {
-      borderColor = "#073642";
-    }
     if (borderColor) {
       this.updateElementStyles(this.iframe, { borderColor });
     }

apps/browser/src/autofill/shared/styles/variables.scss

@@ -1,6 +1,4 @@
-@import "~nord/src/sass/nord.scss";
+$dark-icon-themes: "theme_dark";
-
-$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
 
 $font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-source-code-pro: "Source Code Pro", monospace;
@@ -34,14 +32,6 @@ $border-color: #ced4dc;
 $border-radius: 3px;
 $focus-outline-color: #1252a3;
 
-$solarizedDarkBase0: #839496;
-$solarizedDarkBase03: #002b36;
-$solarizedDarkBase02: #073642;
-$solarizedDarkBase01: #586e75;
-$solarizedDarkBase2: #eee8d5;
-$solarizedDarkCyan: #2aa198;
-$solarizedDarkGreen: #859900;
-
 $themes: (
   light: (
     textColor: $text-color-light,
@@ -79,41 +69,6 @@ $themes: (
     passwordSpecialColor: $password-special-color-dark,
     passwordNumberColor: $password-number-color-dark,
   ),
-  nord: (
-    textColor: $nord5,
-    mutedTextColor: $nord4,
-    backgroundColor: $nord1,
-    backgroundOffsetColor: darken($nord1, 2.75%),
-    buttonPrimaryColor: $nord8,
-    primaryColor: $nord9,
-    textContrast: $nord2,
-    inputBorderColor: $nord0,
-    inputBackgroundColor: $nord2,
-    borderColor: $nord0,
-    focusOutlineColor: lighten($focus-outline-color, 25%),
-    successColor: $success-color-dark,
-    passkeysAuthenticating: $nord4,
-    passwordSpecialColor: $nord12,
-    passwordNumberColor: $nord8,
-  ),
-  solarizedDark: (
-    textColor: $solarizedDarkBase2,
-    // Muted uses main text color to avoid contrast issues
-    mutedTextColor: $solarizedDarkBase2,
-    backgroundColor: $solarizedDarkBase03,
-    backgroundOffsetColor: darken($solarizedDarkBase03, 2.75%),
-    buttonPrimaryColor: $solarizedDarkCyan,
-    primaryColor: $solarizedDarkGreen,
-    textContrast: $solarizedDarkBase02,
-    inputBorderColor: rgba($solarizedDarkBase2, 0.2),
-    inputBackgroundColor: $solarizedDarkBase01,
-    borderColor: $solarizedDarkBase2,
-    focusOutlineColor: lighten($focus-outline-color, 15%),
-    successColor: $success-color-dark,
-    passkeysAuthenticating: $solarizedDarkBase2,
-    passwordSpecialColor: #b58900,
-    passwordNumberColor: $solarizedDarkCyan,
-  ),
 );
 
 @mixin themify($themes: $themes) {

apps/browser/src/background/main.background.ts

@@ -834,10 +834,7 @@ export default class MainBackground {
       this.configService,
     );
 
-    this.themeStateService = new DefaultThemeStateService(
+    this.themeStateService = new DefaultThemeStateService(this.globalStateProvider);
-      this.globalStateProvider,
-      this.configService,
-    );
 
     this.bulkEncryptService = new FallbackBulkEncryptService(this.encryptService);
 

apps/browser/src/popup/scss/environment.scss

@@ -40,8 +40,4 @@ html.browser_safari {
   &.theme_light app-root {
     border-color: #777777;
   }
-
-  &.theme_nord app-root {
-    border-color: #2e3440;
-  }
 }

apps/browser/src/popup/scss/variables.scss

@@ -1,6 +1,4 @@
-@import "~nord/src/sass/nord.scss";
+$dark-icon-themes: "theme_dark";
-
-$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
 
 $font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -47,24 +45,6 @@ $button-color-danger: darken($brand-danger, 10%);
 
 $code-color: #c01176;
 $code-color-dark: #f08dc7;
-$code-color-nord: #dbb1d5;
-
-$solarizedDarkBase03: #002b36;
-$solarizedDarkBase02: #073642;
-$solarizedDarkBase01: #586e75;
-$solarizedDarkBase00: #657b83;
-$solarizedDarkBase0: #839496;
-$solarizedDarkBase1: #93a1a1;
-$solarizedDarkBase2: #eee8d5;
-$solarizedDarkBase3: #fdf6e3;
-$solarizedDarkYellow: #b58900;
-$solarizedDarkOrange: #cb4b16;
-$solarizedDarkRed: #dc322f;
-$solarizedDarkMagenta: #d33682;
-$solarizedDarkViolet: #6c71c4;
-$solarizedDarkBlue: #268bd2;
-$solarizedDarkCyan: #2aa198;
-$solarizedDarkGreen: #859900;
 
 $themes: (
   light: (
@@ -194,131 +174,6 @@ $themes: (
       saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%),
     codeColor: $code-color-dark,
   ),
-  nord: (
-    textColor: $nord5,
-    hoverColorTransparent: rgba($text-color, 0.15),
-    borderColor: $nord0,
-    backgroundColor: $nord1,
-    borderColorAlt: $nord5,
-    backgroundColorAlt: $nord2,
-    scrollbarColor: $nord4,
-    scrollbarHoverColor: $nord6,
-    boxBackgroundColor: $nord2,
-    boxBackgroundHoverColor: $nord3,
-    boxBorderColor: $nord1,
-    tabBackgroundColor: $nord1,
-    tabBackgroundHoverColor: $nord2,
-    headerColor: $nord5,
-    headerBackgroundColor: $nord1,
-    headerBackgroundHoverColor: $nord2,
-    headerBorderColor: $nord0,
-    headerInputBackgroundColor: $nord6,
-    headerInputBackgroundFocusColor: $nord5,
-    headerInputColor: $nord2,
-    headerInputPlaceholderColor: $nord3,
-    listItemBackgroundHoverColor: $nord3,
-    disabledIconColor: $nord4,
-    disabledBoxOpacity: 0.5,
-    headingColor: $nord4,
-    labelColor: $nord4,
-    mutedColor: $nord4,
-    totpStrokeColor: $nord4,
-    boxRowButtonColor: $nord4,
-    boxRowButtonHoverColor: $nord6,
-    inputBorderColor: $nord0,
-    inputBackgroundColor: $nord2,
-    inputPlaceholderColor: lighten($nord3, 20%),
-    buttonBackgroundColor: $nord3,
-    buttonBorderColor: $nord0,
-    buttonColor: $nord5,
-    buttonPrimaryColor: $nord8,
-    buttonDangerColor: $nord11,
-    primaryColor: $nord9,
-    primaryAccentColor: $nord8,
-    dangerColor: $nord11,
-    successColor: $nord14,
-    infoColor: $nord9,
-    warningColor: $nord12,
-    logoSuffix: "white",
-    mfaLogoSuffix: "-w.png",
-    passwordNumberColor: $nord8,
-    passwordSpecialColor: $nord12,
-    passwordCountText: $nord5,
-    calloutBorderColor: $nord0,
-    calloutBackgroundColor: $nord2,
-    toastTextColor: #000000,
-    svgSuffix: "-dark.svg",
-    transparentColor: rgba(0, 0, 0, 0),
-    dateInputColorScheme: dark,
-    webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(94%) sepia(5%) saturate(454%)
-      hue-rotate(185deg) brightness(93%) contrast(96%),
-    // has no hover so use same color
-    webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(5%)
-      saturate(454%) hue-rotate(185deg) brightness(93%) contrast(96%),
-    codeColor: $code-color-nord,
-  ),
-  solarizedDark: (
-    textColor: $solarizedDarkBase2,
-    hoverColorTransparent: rgba($text-color, 0.15),
-    borderColor: $solarizedDarkBase03,
-    backgroundColor: $solarizedDarkBase03,
-    borderColorAlt: $solarizedDarkBase01,
-    backgroundColorAlt: $solarizedDarkBase02,
-    scrollbarColor: $solarizedDarkBase0,
-    scrollbarHoverColor: $solarizedDarkBase2,
-    boxBackgroundColor: $solarizedDarkBase02,
-    boxBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
-    boxBorderColor: $solarizedDarkBase02,
-    tabBackgroundColor: $solarizedDarkBase02,
-    tabBackgroundHoverColor: $solarizedDarkBase01,
-    headerColor: $solarizedDarkBase1,
-    headerBackgroundColor: $solarizedDarkBase02,
-    headerBackgroundHoverColor: $solarizedDarkBase01,
-    headerBorderColor: $solarizedDarkBase03,
-    headerInputBackgroundColor: darken($solarizedDarkBase0, 5%),
-    headerInputBackgroundFocusColor: $solarizedDarkBase1,
-    headerInputColor: $solarizedDarkBase02,
-    headerInputPlaceholderColor: lighten($solarizedDarkBase02, 5%),
-    listItemBackgroundHoverColor: lighten($solarizedDarkBase02, 5%),
-    disabledIconColor: $solarizedDarkBase0,
-    disabledBoxOpacity: 0.5,
-    headingColor: $solarizedDarkBase0,
-    labelColor: $solarizedDarkBase0,
-    mutedColor: $solarizedDarkBase0,
-    totpStrokeColor: $solarizedDarkBase0,
-    boxRowButtonColor: $solarizedDarkBase0,
-    boxRowButtonHoverColor: $solarizedDarkBase2,
-    inputBorderColor: $solarizedDarkBase03,
-    inputBackgroundColor: $solarizedDarkBase01,
-    inputPlaceholderColor: lighten($solarizedDarkBase00, 20%),
-    buttonBackgroundColor: $solarizedDarkBase00,
-    buttonBorderColor: $solarizedDarkBase03,
-    buttonColor: $solarizedDarkBase1,
-    buttonPrimaryColor: $solarizedDarkCyan,
-    buttonDangerColor: $solarizedDarkRed,
-    primaryColor: $solarizedDarkGreen,
-    primaryAccentColor: $solarizedDarkCyan,
-    dangerColor: $solarizedDarkRed,
-    successColor: $solarizedDarkGreen,
-    infoColor: $solarizedDarkGreen,
-    warningColor: $solarizedDarkYellow,
-    logoSuffix: "white",
-    mfaLogoSuffix: "-w.png",
-    passwordNumberColor: $solarizedDarkCyan,
-    passwordSpecialColor: $solarizedDarkYellow,
-    passwordCountText: $solarizedDarkBase2,
-    calloutBorderColor: $solarizedDarkBase03,
-    calloutBackgroundColor: $solarizedDarkBase01,
-    toastTextColor: #000000,
-    svgSuffix: "-solarized.svg",
-    transparentColor: rgba(0, 0, 0, 0),
-    dateInputColorScheme: dark,
-    webkitCalendarPickerFilter: brightness(0) saturate(100%) invert(61%) sepia(13%) saturate(289%)
-      hue-rotate(138deg) brightness(92%) contrast(90%),
-    webkitCalendarPickerHoverFilter: brightness(0) saturate(100%) invert(94%) sepia(10%)
-      saturate(462%) hue-rotate(345deg) brightness(103%) contrast(87%),
-    codeColor: $code-color-dark,
-  ),
 );
 
 @mixin themify($themes: $themes) {

apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts

@@ -47,7 +47,7 @@ describe("AppearanceV2Component", () => {
 
   const showFavicons$ = new BehaviorSubject<boolean>(true);
   const enableBadgeCounter$ = new BehaviorSubject<boolean>(true);
-  const selectedTheme$ = new BehaviorSubject<ThemeType>(ThemeType.Nord);
+  const selectedTheme$ = new BehaviorSubject<ThemeType>(ThemeType.Light);
   const enableRoutingAnimation$ = new BehaviorSubject<boolean>(true);
   const enableCompactMode$ = new BehaviorSubject<boolean>(false);
   const showQuickCopyActions$ = new BehaviorSubject<boolean>(false);
@@ -135,7 +135,7 @@ describe("AppearanceV2Component", () => {
       enableAnimations: true,
       enableFavicon: true,
       enableBadgeCounter: true,
-      theme: ThemeType.Nord,
+      theme: ThemeType.Light,
       enableCompactMode: false,
       showQuickCopyActions: false,
       width: "default",

apps/browser/src/vault/popup/settings/appearance-v2.component.ts

@@ -12,7 +12,7 @@ import { DomainSettingsService } from "@bitwarden/common/autofill/services/domai
 import { AnimationControlService } from "@bitwarden/common/platform/abstractions/animation-control.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
-import { ThemeType } from "@bitwarden/common/platform/enums";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { VaultSettingsService } from "@bitwarden/common/vault/abstractions/vault-settings/vault-settings.service";
 import {
@@ -60,7 +60,7 @@ export class AppearanceV2Component implements OnInit {
   appearanceForm = this.formBuilder.group({
     enableFavicon: false,
     enableBadgeCounter: true,
-    theme: ThemeType.System,
+    theme: ThemeTypes.System as Theme,
     enableAnimations: true,
     enableCompactMode: false,
     showQuickCopyActions: false,
@@ -72,7 +72,7 @@ export class AppearanceV2Component implements OnInit {
   formLoading = true;
 
   /** Available theme options */
-  themeOptions: { name: string; value: ThemeType }[];
+  themeOptions: { name: string; value: Theme }[];
 
   /** Available width options */
   protected readonly widthOptions: Option<PopupWidthOption>[] = [
@@ -93,9 +93,9 @@ export class AppearanceV2Component implements OnInit {
     private vaultSettingsService: VaultSettingsService,
   ) {
     this.themeOptions = [
-      { name: i18nService.t("systemDefault"), value: ThemeType.System },
+      { name: i18nService.t("systemDefault"), value: ThemeTypes.System },
-      { name: i18nService.t("light"), value: ThemeType.Light },
+      { name: i18nService.t("light"), value: ThemeTypes.Light },
-      { name: i18nService.t("dark"), value: ThemeType.Dark },
+      { name: i18nService.t("dark"), value: ThemeTypes.Dark },
     ];
   }
 
@@ -191,7 +191,7 @@ export class AppearanceV2Component implements OnInit {
     this.messagingService.send("bgUpdateContextMenu");
   }
 
-  async saveTheme(newTheme: ThemeType) {
+  async saveTheme(newTheme: Theme) {
     await this.themeStateService.setSelectedTheme(newTheme);
   }
 

apps/desktop/src/app/accounts/settings.component.ts

@@ -36,7 +36,7 @@ import { LogService } from "@bitwarden/common/platform/abstractions/log.service"
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { ThemeType } from "@bitwarden/common/platform/enums/theme-type.enum";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { UserId } from "@bitwarden/common/types/guid";
@@ -128,7 +128,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
     enableSshAgent: false,
     allowScreenshots: false,
     enableDuckDuckGoBrowserIntegration: false,
-    theme: [null as ThemeType | null],
+    theme: [null as Theme | null],
     locale: [null as string | null],
   });
 
@@ -198,10 +198,9 @@ export class SettingsComponent implements OnInit, OnDestroy {
     this.localeOptions = localeOptions;
 
     this.themeOptions = [
-      { name: this.i18nService.t("default"), value: ThemeType.System },
+      { name: this.i18nService.t("default"), value: ThemeTypes.System },
-      { name: this.i18nService.t("light"), value: ThemeType.Light },
+      { name: this.i18nService.t("light"), value: ThemeTypes.Light },
-      { name: this.i18nService.t("dark"), value: ThemeType.Dark },
+      { name: this.i18nService.t("dark"), value: ThemeTypes.Dark },
-      { name: "Nord", value: ThemeType.Nord },
     ];
 
     this.clearClipboardOptions = [

apps/desktop/src/app/services/desktop-theme.service.ts

@@ -1,25 +0,0 @@
-import { map } from "rxjs";
-
-import { ThemeType } from "@bitwarden/common/platform/enums";
-import { GlobalStateProvider } from "@bitwarden/common/platform/state";
-import {
-  THEME_SELECTION,
-  ThemeStateService,
-} from "@bitwarden/common/platform/theming/theme-state.service";
-
-export class DesktopThemeStateService implements ThemeStateService {
-  private readonly selectedThemeState = this.globalStateProvider.get(THEME_SELECTION);
-
-  selectedTheme$ = this.selectedThemeState.state$.pipe(map((theme) => theme ?? this.defaultTheme));
-
-  constructor(
-    private globalStateProvider: GlobalStateProvider,
-    private defaultTheme: ThemeType = ThemeType.System,
-  ) {}
-
-  async setSelectedTheme(theme: ThemeType): Promise<void> {
-    await this.selectedThemeState.update(() => theme, {
-      shouldUpdate: (currentTheme) => currentTheme !== theme,
-    });
-  }
-}

apps/desktop/src/app/services/services.module.ts

@@ -91,7 +91,6 @@ import { GlobalStateProvider, StateProvider } from "@bitwarden/common/platform/s
 // eslint-disable-next-line import/no-restricted-paths -- Implementation for memory storage
 import { MemoryStorageService as MemoryStorageServiceForStateProviders } from "@bitwarden/common/platform/state/storage/memory-storage.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
-import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { CipherService as CipherServiceAbstraction } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { DialogService, ToastService } from "@bitwarden/components";
 import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
@@ -135,7 +134,6 @@ import { SearchBarService } from "../layout/search/search-bar.service";
 
 import { DesktopFileDownloadService } from "./desktop-file-download.service";
 import { DesktopSetPasswordJitService } from "./desktop-set-password-jit.service";
-import { DesktopThemeStateService } from "./desktop-theme.service";
 import { InitService } from "./init.service";
 import { NativeMessagingManifestService } from "./native-messaging-manifest.service";
 import { RendererCryptoFunctionService } from "./renderer-crypto-function.service";
@@ -268,11 +266,6 @@ const safeProviders: SafeProvider[] = [
     useFactory: () => fromIpcSystemTheme(),
     deps: [],
   }),
-  safeProvider({
-    provide: ThemeStateService,
-    useClass: DesktopThemeStateService,
-    deps: [GlobalStateProvider],
-  }),
   safeProvider({
     provide: EncryptedMessageHandlerService,
     deps: [

apps/desktop/src/main/window.main.ts

@@ -9,6 +9,7 @@ import { firstValueFrom } from "rxjs";
 
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
+import { ThemeTypes, Theme } from "@bitwarden/common/platform/enums";
 import { processisolations } from "@bitwarden/desktop-napi";
 import { BiometricStateService } from "@bitwarden/key-management";
 
@@ -297,11 +298,15 @@ export class WindowMain {
   }
 
   // Retrieve the background color
-  // Resolves background color missmatch when starting the application.
+  // Resolves background color mismatch when starting the application.
   async getBackgroundColor(): Promise<string> {
     let theme = await this.storageService.get("global_theming_selection");
 
-    if (theme == null || theme === "system") {
+    if (
+      theme == null ||
+      !Object.values(ThemeTypes).includes(theme as Theme) ||
+      theme === "system"
+    ) {
       theme = nativeTheme.shouldUseDarkColors ? "dark" : "light";
     }
 
@@ -310,8 +315,6 @@ export class WindowMain {
         return "#ededed";
       case "dark":
         return "#15181e";
-      case "nord":
-        return "#3b4252";
     }
   }
 

apps/desktop/src/scss/variables.scss

@@ -1,6 +1,4 @@
-@import "~nord/src/sass/nord.scss";
+$dark-icon-themes: "theme_dark";
-
-$dark-icon-themes: "theme_dark", "theme_nord";
 
 $font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@@ -166,65 +164,6 @@ $themes: (
     hrColor: #bac0ce,
     codeColor: $code-color-dark,
   ),
-  nord: (
-    textColor: $nord5,
-    borderColor: $nord0,
-    backgroundColor: $nord2,
-    borderColorAlt: $nord5,
-    backgroundColorAlt: $nord1,
-    // Ensure the `window.main.ts` is updated with this value
-    backgroundColorAlt2: $nord1,
-    scrollbarColor: $nord4,
-    scrollbarHoverColor: $nord6,
-    boxBackgroundColor: $nord2,
-    boxBackgroundHoverColor: $nord3,
-    boxBorderColor: $nord1,
-    headerBackgroundColor: $nord2,
-    headerBorderColor: $nord0,
-    headerInputBackgroundColor: $nord6,
-    headerInputBackgroundFocusColor: $nord5,
-    headerInputColor: $nord2,
-    headerInputPlaceholderColor: $nord3,
-    listItemBackgroundColor: $nord2,
-    listItemBackgroundHoverColor: $nord3,
-    listItemBorderColor: $nord1,
-    disabledIconColor: $nord5,
-    headingColor: $nord4,
-    headingButtonColor: $nord5,
-    headingButtonHoverColor: $nord6,
-    labelColor: $nord4,
-    mutedColor: $nord4,
-    totpStrokeColor: $nord4,
-    boxRowButtonColor: $nord4,
-    boxRowButtonHoverColor: $nord6,
-    inputBorderColor: $nord0,
-    inputBackgroundColor: $nord2,
-    inputPlaceholderColor: lighten($nord3, 20%),
-    buttonBackgroundColor: $nord3,
-    buttonBorderColor: $nord0,
-    buttonColor: $nord5,
-    buttonPrimaryColor: $nord8,
-    buttonDangerColor: $nord11,
-    primaryColor: $nord9,
-    primaryAccentColor: $nord8,
-    dangerColor: $nord11,
-    successColor: $nord14,
-    infoColor: $nord9,
-    warningColor: $nord12,
-    logoSuffix: "white",
-    mfaLogoSuffix: "-w.png",
-    passwordNumberColor: $nord8,
-    passwordSpecialColor: $nord12,
-    passwordCountText: $nord5,
-    calloutBorderColor: $nord1,
-    calloutBackgroundColor: $nord2,
-    toastTextColor: #000000,
-    accountSwitcherBackgroundColor: $nord0,
-    accountSwitcherTextColor: $nord5,
-    svgSuffix: "-dark.svg",
-    hrColor: $nord4,
-    codeColor: $code-color-nord,
-  ),
 );
 
 @mixin themify($themes: $themes) {

apps/web/src/app/admin-console/organizations/shared/components/integrations/integration-card/integration-card.component.ts

@@ -61,11 +61,10 @@ export class IntegrationCardComponent implements AfterViewInit, OnDestroy {
         if (theme === ThemeType.System) {
           // When the user's preference is the system theme,
           // use the system theme to determine the image
-          const prefersDarkMode =
+          const prefersDarkMode = systemTheme === ThemeType.Dark;
-            systemTheme === ThemeType.Dark || systemTheme === ThemeType.SolarizedDark;
 
           this.imageEle.nativeElement.src = prefersDarkMode ? this.imageDarkMode : this.image;
-        } else if (theme === ThemeType.Dark || theme === ThemeType.SolarizedDark) {
+        } else if (theme === ThemeType.Dark) {
           // When the user's preference is dark mode, use the dark mode image
           this.imageEle.nativeElement.src = this.imageDarkMode;
         } else {

apps/web/src/app/core/core.module.ts

@@ -60,7 +60,6 @@ import {
   VaultTimeoutStringType,
 } from "@bitwarden/common/key-management/vault-timeout";
 import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service";
-import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service";
 import {
   EnvironmentService,
@@ -74,7 +73,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { SdkClientFactory } from "@bitwarden/common/platform/abstractions/sdk/sdk-client-factory";
 import { SdkLoadService } from "@bitwarden/common/platform/abstractions/sdk/sdk-load.service";
 import { AbstractStorageService } from "@bitwarden/common/platform/abstractions/storage.service";
-import { ThemeType } from "@bitwarden/common/platform/enums";
+import { ThemeTypes } from "@bitwarden/common/platform/enums";
 // eslint-disable-next-line no-restricted-imports -- Needed for DI
 import {
   UnsupportedWebPushConnectionService,
@@ -235,10 +234,10 @@ const safeProviders: SafeProvider[] = [
   }),
   safeProvider({
     provide: ThemeStateService,
-    useFactory: (globalStateProvider: GlobalStateProvider, configService: ConfigService) =>
+    useFactory: (globalStateProvider: GlobalStateProvider) =>
       // Web chooses to have Light as the default theme
-      new DefaultThemeStateService(globalStateProvider, configService, ThemeType.Light),
+      new DefaultThemeStateService(globalStateProvider, ThemeTypes.Light),
-    deps: [GlobalStateProvider, ConfigService],
+    deps: [GlobalStateProvider],
   }),
   safeProvider({
     provide: CLIENT_TYPE,

apps/web/src/app/settings/preferences.component.ts

@@ -17,7 +17,7 @@ import {
 } from "@bitwarden/common/key-management/vault-timeout";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { ThemeType } from "@bitwarden/common/platform/enums";
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-state.service";
 import { DialogService } from "@bitwarden/components";
@@ -47,7 +47,7 @@ export class PreferencesComponent implements OnInit, OnDestroy {
     vaultTimeout: [null as VaultTimeout | null],
     vaultTimeoutAction: [VaultTimeoutAction.Lock],
     enableFavicons: true,
-    theme: [ThemeType.Light],
+    theme: [ThemeTypes.Light as Theme],
     locale: [null as string | null],
   });
 
@@ -90,9 +90,9 @@ export class PreferencesComponent implements OnInit, OnDestroy {
     localeOptions.splice(0, 0, { name: i18nService.t("default"), value: null });
     this.localeOptions = localeOptions;
     this.themeOptions = [
-      { name: i18nService.t("themeLight"), value: ThemeType.Light },
+      { name: i18nService.t("themeLight"), value: ThemeTypes.Light },
-      { name: i18nService.t("themeDark"), value: ThemeType.Dark },
+      { name: i18nService.t("themeDark"), value: ThemeTypes.Dark },
-      { name: i18nService.t("themeSystem"), value: ThemeType.System },
+      { name: i18nService.t("themeSystem"), value: ThemeTypes.System },
     ];
   }
 

libs/angular/src/platform/services/theming/angular-theming.service.ts

@@ -59,8 +59,6 @@ export class AngularThemingService implements AbstractThemingService {
       document.documentElement.classList.remove(
         "theme_" + ThemeTypes.Light,
         "theme_" + ThemeTypes.Dark,
-        "theme_" + ThemeTypes.Nord,
-        "theme_" + ThemeTypes.SolarizedDark,
       );
       document.documentElement.classList.add("theme_" + theme);
     });

libs/angular/src/services/jslib-services.module.ts

@@ -408,7 +408,7 @@ const safeProviders: SafeProvider[] = [
   safeProvider({
     provide: ThemeStateService,
     useClass: DefaultThemeStateService,
-    deps: [GlobalStateProvider, ConfigService],
+    deps: [GlobalStateProvider],
   }),
   safeProvider({
     provide: AbstractThemingService,

libs/common/src/enums/feature-flag.enum.ts

@@ -27,7 +27,6 @@ export enum FeatureFlag {
   CriticalApps = "pm-14466-risk-insights-critical-application",
   EnableRiskInsightsNotifications = "enable-risk-insights-notifications",
 
-  ExtensionRefresh = "extension-refresh",
   PM4154_BulkEncryptionService = "PM-4154-bulk-encryption-service",
   VaultBulkManagementAction = "vault-bulk-management-action",
   UnauthenticatedExtensionUIRefresh = "unauth-ui-refresh",
@@ -83,7 +82,6 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.CriticalApps]: FALSE,
   [FeatureFlag.EnableRiskInsightsNotifications]: FALSE,
 
-  [FeatureFlag.ExtensionRefresh]: FALSE,
   [FeatureFlag.PM4154_BulkEncryptionService]: FALSE,
   [FeatureFlag.VaultBulkManagementAction]: FALSE,
   [FeatureFlag.UnauthenticatedExtensionUIRefresh]: FALSE,

libs/common/src/platform/enums/theme-type.enum.ts

@@ -5,16 +5,12 @@ export enum ThemeType {
   System = "system",
   Light = "light",
   Dark = "dark",
-  Nord = "nord",
-  SolarizedDark = "solarizedDark",
 }
 
 export const ThemeTypes = {
   System: "system",
   Light: "light",
   Dark: "dark",
-  Nord: "nord",
-  SolarizedDark: "solarizedDark",
 } as const;
 
 export type Theme = (typeof ThemeTypes)[keyof typeof ThemeTypes];

libs/common/src/platform/theming/theme-state.service.ts

@@ -1,43 +1,33 @@
-import { Observable, combineLatest, map } from "rxjs";
+import { Observable, map } from "rxjs";
 
-import { FeatureFlag } from "../../enums/feature-flag.enum";
+import { Theme, ThemeTypes } from "../enums";
-import { ConfigService } from "../abstractions/config/config.service";
-import { ThemeType } from "../enums";
 import { GlobalStateProvider, KeyDefinition, THEMING_DISK } from "../state";
 
 export abstract class ThemeStateService {
   /**
    * The users selected theme.
    */
-  abstract selectedTheme$: Observable<ThemeType>;
+  abstract selectedTheme$: Observable<Theme>;
 
   /**
    * A method for updating the current users configured theme.
    * @param theme The chosen user theme.
    */
-  abstract setSelectedTheme(theme: ThemeType): Promise<void>;
+  abstract setSelectedTheme(theme: Theme): Promise<void>;
 }
 
-export const THEME_SELECTION = new KeyDefinition<ThemeType>(THEMING_DISK, "selection", {
+export const THEME_SELECTION = new KeyDefinition<Theme>(THEMING_DISK, "selection", {
   deserializer: (s) => s,
 });
 
 export class DefaultThemeStateService implements ThemeStateService {
   private readonly selectedThemeState = this.globalStateProvider.get(THEME_SELECTION);
 
-  selectedTheme$ = combineLatest([
+  selectedTheme$ = this.selectedThemeState.state$.pipe(
-    this.selectedThemeState.state$,
+    map((theme) => {
-    this.configService.getFeatureFlag$(FeatureFlag.ExtensionRefresh),
+      // We used to support additional themes. Since these are no longer supported we return null to default to the system theme.
-  ]).pipe(
+      if (theme != null && !Object.values(ThemeTypes).includes(theme)) {
-    map(([theme, isExtensionRefresh]) => {
+        return null;
-      // The extension refresh should not allow for Nord or SolarizedDark
-      // Default the user to their system theme
-      if (
-        isExtensionRefresh &&
-        theme != null &&
-        [ThemeType.Nord, ThemeType.SolarizedDark].includes(theme)
-      ) {
-        return ThemeType.System;
       }
 
       return theme;
@@ -47,11 +37,10 @@ export class DefaultThemeStateService implements ThemeStateService {
 
   constructor(
     private globalStateProvider: GlobalStateProvider,
-    private configService: ConfigService,
+    private defaultTheme: Theme = ThemeTypes.System,
-    private defaultTheme: ThemeType = ThemeType.System,
   ) {}
 
-  async setSelectedTheme(theme: ThemeType): Promise<void> {
+  async setSelectedTheme(theme: Theme): Promise<void> {
     await this.selectedThemeState.update(() => theme, {
       shouldUpdate: (currentTheme) => currentTheme !== theme,
     });

libs/components/src/tw-theme.css

@@ -117,88 +117,6 @@
   --tw-ring-offset-color: #1f242e;
 }
 
-.theme_nord {
-  --color-transparent-hover: rgb(255 255 255 / 0.12);
-
-  --color-background: 67 76 94;
-  --color-background-alt: 59 66 82;
-  --color-background-alt2: 76 86 106;
-  --color-background-alt3: 76 86 106;
-  --color-background-alt4: 67 76 94;
-
-  --color-primary-300: 108 153 166;
-  --color-primary-600: 136 192 208;
-  --color-primary-700: 160 224 242;
-
-  --color-secondary-100: 76 86 106;
-  --color-secondary-300: 94 105 125;
-  --color-secondary-600: 216 222 233;
-  --color-secondary-700: 255 255 255;
-
-  --color-success-600: 163 190 140;
-  --color-success-700: 144 170 122;
-
-  --color-danger-600: 228 129 139;
-  --color-danger-700: 191 97 106;
-
-  --color-warning-600: 235 203 139;
-  --color-warning-700: 210 181 121;
-
-  --color-info-600: 129 161 193;
-  --color-info-700: 94 129 172;
-
-  --color-text-main: 229 233 240;
-  --color-text-muted: 216 222 233;
-  --color-text-contrast: 46 52 64;
-  --color-text-alt2: 255 255 255;
-  --color-text-code: 219 177 211;
-
-  --color-marketing-logo: 255 255 255;
-
-  --tw-ring-offset-color: #434c5e;
-}
-
-.theme_solarized {
-  --color-transparent-hover: rgb(255 255 255 / 0.12);
-
-  --color-background: 0 43 54;
-  --color-background-alt: 7 54 66;
-  --color-background-alt2: 31 72 87;
-  --color-background-alt3: 31 72 87;
-  --color-background-alt4: 0 43 54;
-
-  --color-primary-300: 42 161 152;
-  --color-primary-600: 133 153 0;
-  --color-primary-700: 192 203 123;
-
-  --color-secondary-100: 31 72 87;
-  --color-secondary-300: 101 123 131;
-  --color-secondary-600: 131 148 150;
-  --color-secondary-700: 238 232 213;
-
-  --color-success-600: 133 153 0;
-  --color-success-700: 192 203 123;
-
-  --color-danger-600: 220 50 47;
-  --color-danger-700: 223 135 134;
-
-  --color-warning-600: 181 137 0;
-  --color-warning-700: 220 189 92;
-
-  --color-info-600: 133 153 0;
-  --color-info-700: 192 203 123;
-
-  --color-text-main: 253 246 227;
-  --color-text-muted: 147 161 161;
-  --color-text-contrast: 0 0 0;
-  --color-text-alt2: 255 255 255;
-  --color-text-code: 240 141 199;
-
-  --color-marketing-logo: 255 255 255;
-
-  --tw-ring-offset-color: #002b36;
-}
-
 /**
  * tw-break-words does not work with table cells:
  * https://github.com/tailwindlabs/tailwindcss/issues/835

libs/vault/src/components/dark-image-source.directive.ts

@@ -54,8 +54,7 @@ export class DarkImageSourceDirective implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(([theme, systemTheme]) => {
         const appliedTheme = theme === "system" ? systemTheme : theme;
-        const isDark =
+        const isDark = appliedTheme === "dark";
-          appliedTheme === "dark" || appliedTheme === "nord" || appliedTheme === "solarizedDark";
         this.src = isDark ? this.darkImgSrc() : this.lightImgSrc;
       });
   }

package-lock.json

@@ -58,7 +58,6 @@
         "ngx-toastr": "19.0.0",
         "node-fetch": "2.6.12",
         "node-forge": "1.3.1",
-        "nord": "0.2.1",
         "oidc-client-ts": "2.4.1",
         "open": "8.4.2",
         "papaparse": "5.5.2",
@@ -28021,12 +28020,6 @@
         "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
-    "node_modules/nord": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/nord/-/nord-0.2.1.tgz",
-      "integrity": "sha512-/AD7JGJbcp1pB5XwYkJyivqdeXofUP5u2lkif6vLGLc+SsV9OCC0JFNpVwM5pqHuFqbyojRt6xILuidJOwwJDQ==",
-      "license": "(Apache-2.0 AND CC-BY-SA-4.0)"
-    },
     "node_modules/normalize-package-data": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-6.0.2.tgz",

package.json

@@ -188,7 +188,6 @@
     "ngx-toastr": "19.0.0",
     "node-fetch": "2.6.12",
     "node-forge": "1.3.1",
-    "nord": "0.2.1",
     "oidc-client-ts": "2.4.1",
     "open": "8.4.2",
     "papaparse": "5.5.2",