Add token-based CSS theming #11262

archesproject · Aug 13, 2024 · f7fd65e · f7fd65e
1 parent eec0666
commit f7fd65e
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/arches/app/media/js/utils/create-vue-application.js b/arches/app/media/js/utils/create-vue-application.js
@@ -7,16 +7,60 @@ import StyleClass from 'primevue/styleclass';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
 
-import Aura from '@primevue/themes/aura';
-
+import { definePreset } from '@primevue/themes';
 import { createApp } from 'vue';
 import { createGettext } from "vue3-gettext";
+import Aura from '@primevue/themes/aura';
 
 import arches from 'arches';
 
+export const ArchesPreset = definePreset(Aura, {
+    primitive: {
+        sky: {
+            950: '#2d3c4b',  // matches arches 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}',
+        },
+    },
+    components: {
+        button: {
+            root: {
+                label: {
+                    fontWeight: 600,
+                },
+            },
+        },
+        datatable: {
+            column: {
+                title: {
+                    fontWeight: 600,
+                },
+            },
+        },
+        splitter: {
+            handle: {
+                background: '{surface.500}',
+            },
+        },
+    },
+});
+
 const DEFAULT_THEME = {
     theme: {
-        preset: Aura,
+        preset: ArchesPreset,
         options: {
             prefix: 'p',
             darkModeSelector: 'system',

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