Add token-based CSS theming #11262

arches/app/media/css/arches.scss

@@ -40,6 +40,15 @@ img {
     image-orientation: from-image;
 }
 
+.css-reset * {
+    all: revert-layer;
+    font-family: 'Open Sans';
+}
+
+.css-reset .fa {
+    font-family: fontAwesome;
+}
+
 [class^="col-"]:not(.pad-no) {
     padding-left: 0px;
     padding-right: 0px;

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) {
     /**

arches/app/src/arches/themes/default.ts

@@ -0,0 +1,63 @@
+import { definePreset } from "@primevue/themes";
+import Aura from "@primevue/themes/aura";
+
+export const ArchesPreset = definePreset(Aura, {
+    primitive: {
+        arches: {
+            blue: {
+                400: "#54abd9", // legacy paginator button color
+                500: "#579ddb", // legacy light button color
+                600: "#2986b8", // legacy sidebar highlight
+                950: "#2d3c4b", // legacy sidebar
+            },
+        },
+    },
+    semantic: {
+        primary: {
+            50: "{sky.50}",
+            100: "{sky.100}",
+            200: "{sky.200}",
+            300: "{sky.300}",
+            400: "{sky.400}",
+            500: "{sky.500}",
+            600: "{sky.600}",
+            700: "{sky.700}",
+            800: "{sky.800}",
+            900: "{sky.900}",
+            950: "{sky.950}",
+        },
+        navigation: "{arches.blue.950}",
+    },
+    components: {
+        button: {
+            root: {
+                label: {
+                    fontWeight: 600,
+                },
+            },
+        },
+        datatable: {
+            column: {
+                title: {
+                    fontWeight: 600,
+                },
+            },
+        },
+        splitter: {
+            handle: {
+                background: "{surface.500}",
+            },
+        },
+    },
+});
+
+export const DEFAULT_THEME = {
+    theme: {
+        preset: ArchesPreset,
+        options: {
+            prefix: "p",
+            darkModeSelector: "system",
+            cssLayer: true,
+        },
+    },
+};

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)
 
 ### Additional highlights