chore: add proton theme [skip e2e]

packages/features/src/Domain/Feature/NativeFeatureIdentifier.ts

@@ -28,6 +28,7 @@ export class NativeFeatureIdentifier extends ValueObject<NativeFeatureIdentifier
     MidnightTheme: 'org.standardnotes.theme-midnight',
     SolarizedDarkTheme: 'org.standardnotes.theme-solarized-dark',
     TitaniumTheme: 'org.standardnotes.theme-titanium',
+    ProtonTheme: 'com.standardnotes.theme-proton',
 
     PlainEditor: 'com.standardnotes.plain-text',
     SuperEditor: 'com.standardnotes.super-editor',

packages/features/src/Domain/Lists/Themes.ts

@@ -97,5 +97,18 @@ export function themes(): ThemeFeatureDescription[] {
     no_mobile: true,
   })
 
-  return [midnight, futura, solarizedDark, autobiography, dark, titanium, dynamic]
+  const proton: ThemeFeatureDescription = FillThemeComponentDefaults({
+    availableInRoles: [RoleName.NAMES.PlusUser, RoleName.NAMES.ProUser],
+    name: 'Proton',
+    identifier: NativeFeatureIdentifier.TYPES.ProtonTheme,
+    permission_name: PermissionName.ProtonTheme,
+    dock_icon: {
+      type: 'circle',
+      background_color: '#16141c',
+      foreground_color: '#ffffff',
+      border_color: '#4a4658',
+    },
+  })
+
+  return [midnight, futura, solarizedDark, autobiography, dark, proton, titanium, dynamic]
 }

packages/features/src/Domain/Permission/PermissionName.ts

@@ -40,4 +40,5 @@ export enum PermissionName {
   Clipper = 'app:clipper',
   Vaults = 'app:vaults',
   SharedVaults = 'server:shared-vaults',
+  ProtonTheme = 'theme:proton',
 }

packages/web/src/components/assets/com.standardnotes.theme-proton/index.css

@@ -0,0 +1,48 @@
+:root {
+  --background-norm: #16141c;
+  --background-weak: #292733;
+  --background-strong: #3f3b4c;
+  --text-norm: #ffffff;
+  --text-weak: #a7a4b5;
+  --border-norm: #4a4658;
+  --border-weak: #343140;
+  --primary: #8a6eff;
+  --interaction-norm: #6d4aff;
+
+  --sn-stylekit-background-color: var(--background-norm);
+  --sn-stylekit-foreground-color: var(--text-norm);
+  --sn-stylekit-border-color: var(--border-weak);
+  --sn-stylekit-contrast-background-color: var(--background-weak);
+  --sn-stylekit-contrast-foreground-color: var(--text-norm);
+  --sn-stylekit-secondary-background-color: var(--background-weak);
+  --sn-stylekit-secondary-foreground-color: var(--text-norm);
+  --sn-stylekit-info-color: var(--interaction-norm);
+  --sn-stylekit-info-backdrop-color: #6e4aff0f;
+  --sn-stylekit-passive-color-0: var(--text-weak);
+  --sn-stylekit-passive-color-3: var(--background-strong);
+  --sn-stylekit-passive-color-4: #3f3b4c;
+  --sn-stylekit-passive-color-5: var(--background-weak);
+
+  --navigation-item-selected-background-color: var(--background-strong);
+
+  --sn-stylekit-paragraph-text-color: var(--text-weak);
+}
+
+a,
+.Lexical__link,
+.Lexical__textCode {
+  color: var(--primary);
+}
+
+.Collapsible__container,
+.Lexical__tableCellHeader {
+  border-color: var(--border-norm);
+}
+
+.Lexical__quote {
+  color: var(--text-weak);
+}
+
+#blocks-editor hr.selected {
+  outline-color: var(--primary);
+}