bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 07:43:35 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Oscar Hinton
2025-03-10 15:33:55 +01:00
committed by GitHub
parent ef72f513b1
commit a569dd9ad6
31 changed files with 50 additions and 543 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/angular/src/platform/services/theming/angular-theming.service.ts
View File

@@ -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);
});

2
libs/angular/src/services/jslib-services.module.ts
View File

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

2
libs/common/src/enums/feature-flag.enum.ts
View File

@@ -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,

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

@@ -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];

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

@@ -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<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([
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<void> {
async setSelectedTheme(theme: Theme): Promise<void> {
await this.selectedThemeState.update(() => theme, {
shouldUpdate: (currentTheme) => currentTheme !== theme,
});

82
libs/components/src/tw-theme.css
View File

@@ -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

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

@@ -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;
});
}