Add token-based CSS theming #11262 (#11319)

* Add dark mode selector #11322
archesproject · Oct 7, 2024 · a8e9783 · a8e9783
1 parent 621842c
commit a8e9783
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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)