[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>
2025-12-20 02:03:39 +00:00 · 2025-03-10 15:33:55 +01:00
parent ef72f513b1
commit a569dd9ad6
31 changed files with 50 additions and 543 deletions
--- a/apps/browser/src/_locales/en/messages.json
+++ b/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"
  },
--- a/apps/browser/src/autofill/content/components/constants/styles.ts
+++ b/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 = {
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.spec.ts
+++ b/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", () => {
--- a/apps/browser/src/autofill/deprecated/overlay/iframe-content/autofill-overlay-iframe.service.deprecated.ts
+++ b/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 });
    }
--- a/apps/browser/src/autofill/notification/bar.scss
+++ b/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=");
-    }
-  }
-}
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.spec.ts
+++ b/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", () => {
--- a/apps/browser/src/autofill/overlay/inline-menu/iframe-content/autofill-inline-menu-iframe.service.ts
+++ b/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 });
    }
--- a/apps/browser/src/autofill/shared/styles/variables.scss
+++ b/apps/browser/src/autofill/shared/styles/variables.scss
@@ -1,6 +1,4 @@
-@import "~nord/src/sass/nord.scss";
-
-$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
+$dark-icon-themes: "theme_dark";

 $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) {
--- a/apps/browser/src/background/main.background.ts
+++ b/apps/browser/src/background/main.background.ts
@@ -834,10 +834,7 @@ export default class MainBackground {
      this.configService,
    );

-    this.themeStateService = new DefaultThemeStateService(
-      this.globalStateProvider,
-      this.configService,
-    );
+    this.themeStateService = new DefaultThemeStateService(this.globalStateProvider);

    this.bulkEncryptService = new FallbackBulkEncryptService(this.encryptService);

--- a/apps/browser/src/popup/scss/environment.scss
+++ b/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;
-  }
 }
--- a/apps/browser/src/popup/scss/variables.scss
+++ b/apps/browser/src/popup/scss/variables.scss
@@ -1,6 +1,4 @@
-@import "~nord/src/sass/nord.scss";
-
-$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";
+$dark-icon-themes: "theme_dark";

 $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) {
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts
+++ b/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",
--- a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts
+++ b/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("light"), value: ThemeType.Light },
-      { name: i18nService.t("dark"), value: ThemeType.Dark },
+      { name: i18nService.t("systemDefault"), value: ThemeTypes.System },
+      { name: i18nService.t("light"), value: ThemeTypes.Light },
+      { 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);
  }