From 03da45537da6c2fd8fe6b8bc96e142fd6ee5a29a Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Wed, 10 Apr 2024 16:18:01 +0530
Subject: [PATCH] chore: add proton theme [skip e2e]

---
 .../Domain/Feature/NativeFeatureIdentifier.ts |  1 +
 packages/features/src/Domain/Lists/Themes.ts  | 15 +++++-
 .../src/Domain/Permission/PermissionName.ts   |  1 +
 .../com.standardnotes.theme-proton/index.css  | 48 +++++++++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/src/components/assets/com.standardnotes.theme-proton/index.css

diff --git a/packages/features/src/Domain/Feature/NativeFeatureIdentifier.ts b/packages/features/src/Domain/Feature/NativeFeatureIdentifier.ts
index e2d1c313c..3877399a5 100644
--- a/packages/features/src/Domain/Feature/NativeFeatureIdentifier.ts
+++ b/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',
diff --git a/packages/features/src/Domain/Lists/Themes.ts b/packages/features/src/Domain/Lists/Themes.ts
index cd80db474..e1110196f 100644
--- a/packages/features/src/Domain/Lists/Themes.ts
+++ b/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]
 }
diff --git a/packages/features/src/Domain/Permission/PermissionName.ts b/packages/features/src/Domain/Permission/PermissionName.ts
index 5edf54b1e..5945c133c 100644
--- a/packages/features/src/Domain/Permission/PermissionName.ts
+++ b/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',
 }
diff --git a/packages/web/src/components/assets/com.standardnotes.theme-proton/index.css b/packages/web/src/components/assets/com.standardnotes.theme-proton/index.css
new file mode 100644
index 000000000..c1a8e4e14
--- /dev/null
+++ b/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);
+}