diff --git a/.github/renovate.json5 b/.github/renovate.json5 index b898ffc862..bde87563dd 100644 --- a/.github/renovate.json5 +++ b/.github/renovate.json5 @@ -173,7 +173,6 @@ "cross-env", "del", "lit", - "nord", "patch-package", "prettier", "prettier-plugin-tailwindcss", diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index 1679fcfcf3..67b770230c 100644 --- 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" }, diff --git a/apps/browser/src/autofill/content/components/constants/styles.ts b/apps/browser/src/autofill/content/components/constants/styles.ts index cd6054e90b..cdf8f1ead5 100644 --- 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 = { diff --git 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 index 67f7ed6688..e79cba7176 100644 --- 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", () => { diff --git 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 index 402c384b8b..e0df9eb60b 100644 --- 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 }); } diff --git a/apps/browser/src/autofill/notification/bar.scss b/apps/browser/src/autofill/notification/bar.scss index cd995a115f..2f1a7f1d31 100644 --- 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="); - } - } -} diff --git 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 index 7d7b48f83c..9f2947c2e9 100644 --- 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", () => { diff --git 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 index 72bf631f50..9a9821f643 100644 --- 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 }); } diff --git a/apps/browser/src/autofill/shared/styles/variables.scss b/apps/browser/src/autofill/shared/styles/variables.scss index 12d55ad8be..ae6a060798 100644 --- 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) { diff --git a/apps/browser/src/background/main.background.ts b/apps/browser/src/background/main.background.ts index 89244f52ec..cd65220936 100644 --- 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); diff --git a/apps/browser/src/popup/scss/environment.scss b/apps/browser/src/popup/scss/environment.scss index 042bcd1b45..cd8f6379e2 100644 --- 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; - } } diff --git a/apps/browser/src/popup/scss/variables.scss b/apps/browser/src/popup/scss/variables.scss index cfd61cd6a2..b78f06f2f3 100644 --- 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) { diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.spec.ts index 7d67a9458b..30715ebaed 100644 --- 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(true); const enableBadgeCounter$ = new BehaviorSubject(true); - const selectedTheme$ = new BehaviorSubject(ThemeType.Nord); + const selectedTheme$ = new BehaviorSubject(ThemeType.Light); const enableRoutingAnimation$ = new BehaviorSubject(true); const enableCompactMode$ = new BehaviorSubject(false); const showQuickCopyActions$ = new BehaviorSubject(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", diff --git a/apps/browser/src/vault/popup/settings/appearance-v2.component.ts b/apps/browser/src/vault/popup/settings/appearance-v2.component.ts index d6fca96c08..1462a2d7ab 100644 --- 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[] = [ @@ -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); } diff --git a/apps/desktop/src/app/accounts/settings.component.ts b/apps/desktop/src/app/accounts/settings.component.ts index d478796b75..abb31fb0c0 100644 --- a/apps/desktop/src/app/accounts/settings.component.ts +++ b/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("light"), value: ThemeType.Light }, - { name: this.i18nService.t("dark"), value: ThemeType.Dark }, - { name: "Nord", value: ThemeType.Nord }, + { name: this.i18nService.t("default"), value: ThemeTypes.System }, + { name: this.i18nService.t("light"), value: ThemeTypes.Light }, + { name: this.i18nService.t("dark"), value: ThemeTypes.Dark }, ]; this.clearClipboardOptions = [ diff --git a/apps/desktop/src/app/services/desktop-theme.service.ts b/apps/desktop/src/app/services/desktop-theme.service.ts deleted file mode 100644 index 321aff677d..0000000000 --- a/apps/desktop/src/app/services/desktop-theme.service.ts +++ /dev/null @@ -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 { - await this.selectedThemeState.update(() => theme, { - shouldUpdate: (currentTheme) => currentTheme !== theme, - }); - } -} diff --git a/apps/desktop/src/app/services/services.module.ts b/apps/desktop/src/app/services/services.module.ts index 23a207c8cb..edd07097b5 100644 --- a/apps/desktop/src/app/services/services.module.ts +++ b/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: [ diff --git a/apps/desktop/src/main/window.main.ts b/apps/desktop/src/main/window.main.ts index 069d1aae32..17f74b78d4 100644 --- a/apps/desktop/src/main/window.main.ts +++ b/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 { 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"; } } diff --git a/apps/desktop/src/scss/variables.scss b/apps/desktop/src/scss/variables.scss index 23a4644d3d..b8978e284e 100644 --- a/apps/desktop/src/scss/variables.scss +++ b/apps/desktop/src/scss/variables.scss @@ -1,6 +1,4 @@ -@import "~nord/src/sass/nord.scss"; - -$dark-icon-themes: "theme_dark", "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; @@ -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) { diff --git a/apps/web/src/app/admin-console/organizations/shared/components/integrations/integration-card/integration-card.component.ts b/apps/web/src/app/admin-console/organizations/shared/components/integrations/integration-card/integration-card.component.ts index 681b93413e..3943ceb22e 100644 --- a/apps/web/src/app/admin-console/organizations/shared/components/integrations/integration-card/integration-card.component.ts +++ b/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 = - systemTheme === ThemeType.Dark || systemTheme === ThemeType.SolarizedDark; + const prefersDarkMode = systemTheme === ThemeType.Dark; 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 { diff --git a/apps/web/src/app/core/core.module.ts b/apps/web/src/app/core/core.module.ts index 7ba10ed919..2cb1a4ee92 100644 --- a/apps/web/src/app/core/core.module.ts +++ b/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), - deps: [GlobalStateProvider, ConfigService], + new DefaultThemeStateService(globalStateProvider, ThemeTypes.Light), + deps: [GlobalStateProvider], }), safeProvider({ provide: CLIENT_TYPE, diff --git a/apps/web/src/app/settings/preferences.component.ts b/apps/web/src/app/settings/preferences.component.ts index 2b3dba3f4b..a90f1d18af 100644 --- a/apps/web/src/app/settings/preferences.component.ts +++ b/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("themeDark"), value: ThemeType.Dark }, - { name: i18nService.t("themeSystem"), value: ThemeType.System }, + { name: i18nService.t("themeLight"), value: ThemeTypes.Light }, + { name: i18nService.t("themeDark"), value: ThemeTypes.Dark }, + { name: i18nService.t("themeSystem"), value: ThemeTypes.System }, ]; } diff --git a/libs/angular/src/platform/services/theming/angular-theming.service.ts b/libs/angular/src/platform/services/theming/angular-theming.service.ts index 2073abdcd1..8f1d863844 100644 --- a/libs/angular/src/platform/services/theming/angular-theming.service.ts +++ b/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); }); diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts index 4d53e1e0be..9ee49a3068 100644 --- a/libs/angular/src/services/jslib-services.module.ts +++ b/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, diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts index 5bbbf6784d..c96c168c71 100644 --- a/libs/common/src/enums/feature-flag.enum.ts +++ b/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, diff --git a/libs/common/src/platform/enums/theme-type.enum.ts b/libs/common/src/platform/enums/theme-type.enum.ts index 5e1a0c21c3..d1767c4990 100644 --- a/libs/common/src/platform/enums/theme-type.enum.ts +++ b/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]; diff --git a/libs/common/src/platform/theming/theme-state.service.ts b/libs/common/src/platform/theming/theme-state.service.ts index df2c96c49d..a02400b5b3 100644 --- a/libs/common/src/platform/theming/theme-state.service.ts +++ b/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 { ConfigService } from "../abstractions/config/config.service"; -import { ThemeType } from "../enums"; +import { Theme, ThemeTypes } from "../enums"; import { GlobalStateProvider, KeyDefinition, THEMING_DISK } from "../state"; export abstract class ThemeStateService { /** * The users selected theme. */ - abstract selectedTheme$: Observable; + abstract selectedTheme$: Observable; /** * A method for updating the current users configured theme. * @param theme The chosen user theme. */ - abstract setSelectedTheme(theme: ThemeType): Promise; + abstract setSelectedTheme(theme: Theme): Promise; } -export const THEME_SELECTION = new KeyDefinition(THEMING_DISK, "selection", { +export const THEME_SELECTION = new KeyDefinition(THEMING_DISK, "selection", { deserializer: (s) => s, }); export class DefaultThemeStateService implements ThemeStateService { private readonly selectedThemeState = this.globalStateProvider.get(THEME_SELECTION); - selectedTheme$ = combineLatest([ - this.selectedThemeState.state$, - this.configService.getFeatureFlag$(FeatureFlag.ExtensionRefresh), - ]).pipe( - map(([theme, isExtensionRefresh]) => { - // 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; + selectedTheme$ = this.selectedThemeState.state$.pipe( + map((theme) => { + // We used to support additional themes. Since these are no longer supported we return null to default to the system theme. + if (theme != null && !Object.values(ThemeTypes).includes(theme)) { + return null; } return theme; @@ -47,11 +37,10 @@ export class DefaultThemeStateService implements ThemeStateService { constructor( private globalStateProvider: GlobalStateProvider, - private configService: ConfigService, - private defaultTheme: ThemeType = ThemeType.System, + private defaultTheme: Theme = ThemeTypes.System, ) {} - async setSelectedTheme(theme: ThemeType): Promise { + async setSelectedTheme(theme: Theme): Promise { await this.selectedThemeState.update(() => theme, { shouldUpdate: (currentTheme) => currentTheme !== theme, }); diff --git a/libs/components/src/tw-theme.css b/libs/components/src/tw-theme.css index 7d11366029..3bc7cd3d81 100644 --- a/libs/components/src/tw-theme.css +++ b/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 diff --git a/libs/vault/src/components/dark-image-source.directive.ts b/libs/vault/src/components/dark-image-source.directive.ts index 6f3e03ef91..9867f26436 100644 --- a/libs/vault/src/components/dark-image-source.directive.ts +++ b/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 = - appliedTheme === "dark" || appliedTheme === "nord" || appliedTheme === "solarizedDark"; + const isDark = appliedTheme === "dark"; this.src = isDark ? this.darkImgSrc() : this.lightImgSrc; }); } diff --git a/package-lock.json b/package-lock.json index 40534596e4..7cb1d50947 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index cb941238fc..a421d87b5d 100644 --- a/package.json +++ b/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",