Un-tokenize some styles

archesproject · Oct 7, 2024 · 4afd684 · 4afd684
1 parent 1815944
commit 4afd684
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 12 deletions.
diff --git a/arches_lingo/media/js/views/root.js b/arches_lingo/media/js/views/root.js
@@ -1,5 +1,7 @@
 import createVueApplication from 'arches/arches/app/media/js/utils/create-vue-application';
+import { ArchesPreset, DEFAULT_THEME } from '@/arches/themes/default.ts';
 
+import { definePreset } from '@primevue/themes';
 import { createRouter, createWebHistory } from 'vue-router';
 
 import LingoApp from '@/arches_lingo/App.vue';
@@ -10,7 +12,26 @@ const router = createRouter({
     routes,
 });
 
-createVueApplication(LingoApp).then(vueApp => {
+const LingoPreset = definePreset(ArchesPreset, {
+    components: {
+        button: {
+            root: {
+                label: {
+                    fontWeight: 600,
+                },
+            },
+        },
+    },
+});
+
+const LingoTheme = {
+    theme: {
+        ...DEFAULT_THEME,
+        preset: LingoPreset,
+    },
+};
+
+createVueApplication(LingoApp, LingoTheme).then(vueApp => {
     vueApp.use(router);
     vueApp.mount('#lingo-mounting-point');
 });
diff --git a/arches_lingo/src/arches_lingo/App.vue b/arches_lingo/src/arches_lingo/App.vue
@@ -71,6 +71,8 @@ router.beforeEach(async (to, _from, next) => {
     </main>
     <Toast
         :pt="{
+            summary: { fontSize: 'medium' },
+            detail: { fontSize: 'small' },
             messageIcon: {
                 style: { marginTop: 'var(--p-toast-messageicon-margintop)' },
             },
@@ -80,7 +82,7 @@ router.beforeEach(async (to, _from, next) => {
 
 <style scoped>
 main {
-    font-family: var(--p-font-family);
+    font-family: system-ui, sans-serif;
     height: 100vh;
     width: 100vw;
     display: flex;

diff --git a/arches_lingo/src/arches_lingo/components/header/PageHeader.vue b/arches_lingo/src/arches_lingo/components/header/PageHeader.vue
@@ -25,7 +25,10 @@ const items = ref([
 </script>
 
 <template>
-    <Menubar :model="items">
+    <Menubar
+        :model="items"
+        style="border-radius: 0"
+    >
         <template #start>
             <RouterLink
                 :to="{ name: routeNames.root }"
@@ -50,13 +53,7 @@ const items = ref([
             </RouterLink>
         </template>
         <template #end>
-            <div
-                style="
-                    display: flex;
-                    align-items: center;
-                    gap: var(--p-content-gap);
-                "
-            >
+            <div style="display: flex; align-items: center; gap: 1rem">
                 <DarkModeToggle />
                 <UserInteraction />
             </div>

diff --git a/arches_lingo/src/arches_lingo/components/login/LoginForm.vue b/arches_lingo/src/arches_lingo/components/login/LoginForm.vue
@@ -65,7 +65,7 @@ const submit = async () => {
 form {
     display: flex;
     flex-direction: column;
-    gap: var(--p-content-gap);
+    gap: 1rem;
     width: 30%;
 }
 

diff --git a/arches_lingo/src/arches_lingo/components/user/UserInteraction.vue b/arches_lingo/src/arches_lingo/components/user/UserInteraction.vue
@@ -52,7 +52,7 @@ const greeting = computed(() => {
 </script>
 
 <template>
-    <div style="display: flex; align-items: center; gap: var(--p-content-gap)">
+    <div style="display: flex; align-items: center; gap: 1rem">
         <span v-if="user">{{ greeting }}</span>
         <Button
             :label="$gettext('Sign out')"