From a8e97834ff8e6e9658e8e82d1bc7c8871258cc3d Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Mon, 7 Oct 2024 17:37:42 -0400
Subject: [PATCH] Add token-based CSS theming #11262 (#11319)

* Add dark mode selector #11322
---
 .../media/js/utils/create-vue-application.js  | 14 +----
 arches/app/src/arches/themes/default.ts       | 57 +++++++++++++++++++
 releases/8.0.0.md                             |  1 +
 3 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 arches/app/src/arches/themes/default.ts

diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js
index d5dc97e9ef9..2f1620adc48 100644
--- a/arches/app/media/js/utils/create-vue-application.js
+++ b/arches/app/media/js/utils/create-vue-application.js
@@ -7,23 +7,11 @@ import StyleClass from 'primevue/styleclass';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
 
-import Aura from '@primevue/themes/aura';
-
 import { createApp } from 'vue';
 import { createGettext } from "vue3-gettext";
 
 import arches from 'arches';
-
-const DEFAULT_THEME = {
-    theme: {
-        preset: Aura,
-        options: {
-            prefix: 'p',
-            darkModeSelector: 'system',
-            cssLayer: false
-        }
-    }
-};
+import { DEFAULT_THEME } from "@/arches/themes/default.ts";
 
 export default async function createVueApplication(vueComponent, themeConfiguration) {
     /**
diff --git a/arches/app/src/arches/themes/default.ts b/arches/app/src/arches/themes/default.ts
new file mode 100644
index 00000000000..2cffe997b5d
--- /dev/null
+++ b/arches/app/src/arches/themes/default.ts
@@ -0,0 +1,57 @@
+import { definePreset, palette } from "@primevue/themes";
+import Aura from "@primevue/themes/aura";
+
+const archesColors = Object.freeze({
+    blue: "#579ddb",
+    green: "#3acaa1",
+    red: "#f75d3f",
+});
+
+export const ArchesPreset = definePreset(Aura, {
+    primitive: {
+        arches: {
+            ...archesColors,
+            legacy: {
+                sidebar: "#2d3c4b",
+            },
+        },
+        blue: palette(archesColors.blue),
+        green: palette(archesColors.green),
+        red: palette(archesColors.red),
+    },
+    semantic: {
+        // PrimeVue token override
+        primary: palette(archesColors.blue),
+        // PrimeVue token override
+        navigation: {
+            list: {
+                padding: "0",
+            },
+            item: {
+                padding: "1rem",
+            },
+            // custom tokens
+            header: {
+                color: "{arches.legacy.sidebar}",
+            },
+        },
+    },
+    components: {
+        splitter: {
+            handle: {
+                background: "{surface.500}",
+            },
+        },
+    },
+});
+
+export const DEFAULT_THEME = {
+    theme: {
+        preset: ArchesPreset,
+        options: {
+            prefix: "p",
+            darkModeSelector: ".arches-dark",
+            cssLayer: false,
+        },
+    },
+};
diff --git a/releases/8.0.0.md b/releases/8.0.0.md
index 2464eb3dc6a..2a63bb5d2ab 100644
--- a/releases/8.0.0.md
+++ b/releases/8.0.0.md
@@ -4,6 +4,7 @@ Arches 8.0.0 Release Notes
 ### Major enhancements
 - 9613 Adds editable_future_graphs and the ability to update Graphs without unpublishing.
 - 11042 Adds `ResourceInstanceLifecycle`s and `ResourceInstanceLifecycleState`s
+- Add token-based CSS theming [#11262](https://github.com/archesproject/arches/issues/11262)
 
 ### Performance improvements
 - Improve indexing and bulk deletion performance [#11382](https://github.com/archesproject/arches/issues/11382)