From 7aa03b7245a648d51897bec887481b6a030d4afc Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Tue, 10 Sep 2024 15:15:27 -0400
Subject: [PATCH 1/6] Consume more tokens from core arches

---
 .../components/ControlledListsMain.vue        |  8 ++---
 .../components/editor/ImageMetadata.vue       |  9 ++---
 .../components/editor/ItemHeader.vue          |  2 +-
 .../components/editor/ItemType.vue            |  4 +--
 .../components/editor/ItemURI.vue             |  2 +-
 .../components/editor/ListCharacteristic.vue  |  6 ++--
 .../components/editor/ListCharacteristics.vue | 35 +++++++++----------
 .../components/editor/ValueEditor.vue         |  9 ++---
 .../components/misc/ControlledListSplash.vue  |  2 +-
 .../components/misc/ListHeader.vue            |  2 +-
 .../components/tree/AddDeleteControls.vue     |  4 +--
 .../components/tree/TreeRow.vue               |  2 +-
 12 files changed, 41 insertions(+), 44 deletions(-)

diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index fb7ccc4..406890e 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -65,14 +65,9 @@ provide(systemLanguageKey, systemLanguage);
     <ConfirmDialog
         :draggable="false"
         :pt="{
-            root: {
-                style: {
-                    fontSize: 'small',
-                },
-            },
             header: {
                 style: {
-                    background: 'var(--p-navigation)',
+                    background: 'var(--p-navigation-color)',
                     color: 'white',
                     borderRadius: '1rem',
                     marginBottom: '1rem',
@@ -81,6 +76,7 @@ provide(systemLanguageKey, systemLanguage);
             title: {
                 style: {
                     fontWeight: 800,
+                    fontSize: 'small',
                 },
             },
         }"
diff --git a/arches_references/src/arches_references/components/editor/ImageMetadata.vue b/arches_references/src/arches_references/components/editor/ImageMetadata.vue
index 83496e8..b56181e 100644
--- a/arches_references/src/arches_references/components/editor/ImageMetadata.vue
+++ b/arches_references/src/arches_references/components/editor/ImageMetadata.vue
@@ -335,21 +335,18 @@ const focusInput = () => {
                     <i
                         class="fa fa-pencil"
                         aria-hidden="true"
-                        style="font-size: small"
                     ></i>
                 </template>
                 <template #roweditorsaveicon>
                     <i
                         class="fa fa-check"
                         aria-hidden="true"
-                        style="font-size: small"
                     ></i>
                 </template>
                 <template #roweditorcancelicon>
                     <i
                         class="fa fa-undo"
                         aria-hidden="true"
-                        style="font-size: small"
                     ></i>
                 </template>
             </Column>
@@ -370,7 +367,7 @@ const focusInput = () => {
             </Column>
         </DataTable>
     </div>
-    <div style="display: flex; gap: 1rem">
+    <div style="display: flex; gap: var(--p-content-gap)">
         <AddMetadata
             :image
             :labeled-choices
@@ -408,4 +405,8 @@ const focusInput = () => {
 :deep(.p-datatable-column-title) {
     font-size: small;
 }
+
+i {
+    font-size: var(--p-icon-size);
+}
 </style>
diff --git a/arches_references/src/arches_references/components/editor/ItemHeader.vue b/arches_references/src/arches_references/components/editor/ItemHeader.vue
index df5819a..46e5d74 100644
--- a/arches_references/src/arches_references/components/editor/ItemHeader.vue
+++ b/arches_references/src/arches_references/components/editor/ItemHeader.vue
@@ -53,7 +53,7 @@ const iconLabel = (item: ControlledListItem) => {
 .item-header {
     display: inline-flex;
     align-items: center;
-    gap: 1rem;
+    gap: var(--p-content-gap);
     margin: 1rem 1rem 0rem 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid;
diff --git a/arches_references/src/arches_references/components/editor/ItemType.vue b/arches_references/src/arches_references/components/editor/ItemType.vue
index 3cb44e7..bcd3387 100644
--- a/arches_references/src/arches_references/components/editor/ItemType.vue
+++ b/arches_references/src/arches_references/components/editor/ItemType.vue
@@ -58,14 +58,14 @@ const issuePatchItem = async () => {
     margin: 1rem 1rem 3rem 1rem;
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: var(--p-content-gap);
     width: 100%;
     font-size: small;
 }
 
 .guide-switch {
     display: inline-flex;
-    gap: 1rem;
+    gap: var(--p-content-gap);
     align-items: center;
 }
 
diff --git a/arches_references/src/arches_references/components/editor/ItemURI.vue b/arches_references/src/arches_references/components/editor/ItemURI.vue
index d6d4125..e2e61a1 100644
--- a/arches_references/src/arches_references/components/editor/ItemURI.vue
+++ b/arches_references/src/arches_references/components/editor/ItemURI.vue
@@ -162,7 +162,7 @@ input {
 }
 
 .edit-controls i {
-    font-size: small;
+    font-size: var(--p-icon-size);
     padding: 0.5rem;
 }
 </style>
diff --git a/arches_references/src/arches_references/components/editor/ListCharacteristic.vue b/arches_references/src/arches_references/components/editor/ListCharacteristic.vue
index 8ed4641..b34430e 100644
--- a/arches_references/src/arches_references/components/editor/ListCharacteristic.vue
+++ b/arches_references/src/arches_references/components/editor/ListCharacteristic.vue
@@ -97,7 +97,7 @@ const cancel = () => {
                 :aria-label="$gettext('Edit')"
                 @click="editing = true"
                 @keyup.enter="editing = true"
-            />
+            ></i>
         </span>
         <span
             v-if="props.editable && editing"
@@ -110,7 +110,7 @@ const cancel = () => {
                 :aria-label="$gettext('Save edit')"
                 @click="save"
                 @keyup.enter="save"
-            />
+            ></i>
             <i
                 role="button"
                 tabindex="0"
@@ -118,7 +118,7 @@ const cancel = () => {
                 :aria-label="$gettext('Cancel edit')"
                 @click="cancel"
                 @keyup.enter="cancel"
-            />
+            ></i>
         </span>
     </div>
 </template>
diff --git a/arches_references/src/arches_references/components/editor/ListCharacteristics.vue b/arches_references/src/arches_references/components/editor/ListCharacteristics.vue
index 5df1a71..7f92174 100644
--- a/arches_references/src/arches_references/components/editor/ListCharacteristics.vue
+++ b/arches_references/src/arches_references/components/editor/ListCharacteristics.vue
@@ -36,21 +36,21 @@ const { $gettext } = useGettext();
                 :label="$gettext('Dynamic')"
                 :style="{ width: '4rem' }"
             />
-            <h4 class="nodes-heading">
-                {{ $gettext("List used by these nodes") }}
-            </h4>
-            <div class="nodes">
-                <div
-                    v-for="node in list.nodes"
-                    :key="node.id"
-                >
-                    <ReferenceNodeLink :node />
-                </div>
-                <div
-                    v-if="list.nodes.length === 0"
-                    :style="{ fontSize: 'small' }"
-                >
-                    {{ $gettext("None") }}
+            <div class="nodes-heading">
+                <h4>{{ $gettext("List used by these nodes") }}</h4>
+                <div class="nodes">
+                    <div
+                        v-for="node in list.nodes"
+                        :key="node.id"
+                    >
+                        <ReferenceNodeLink :node />
+                    </div>
+                    <div
+                        v-if="list.nodes.length === 0"
+                        :style="{ fontSize: 'small' }"
+                    >
+                        {{ $gettext("None") }}
+                    </div>
                 </div>
             </div>
         </div>
@@ -61,7 +61,7 @@ const { $gettext } = useGettext();
 .controlled-list-header {
     display: inline-flex;
     align-items: center;
-    gap: 1rem;
+    gap: var(--p-content-gap);
     margin: 1rem 1rem 0rem 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid;
@@ -79,7 +79,6 @@ h3 {
 .nodes {
     display: flex;
     flex-wrap: wrap;
-    gap: 1rem;
-    margin: 1rem;
+    gap: var(--p-content-gap);
 }
 </style>
diff --git a/arches_references/src/arches_references/components/editor/ValueEditor.vue b/arches_references/src/arches_references/components/editor/ValueEditor.vue
index 8278897..0748c17 100644
--- a/arches_references/src/arches_references/components/editor/ValueEditor.vue
+++ b/arches_references/src/arches_references/components/editor/ValueEditor.vue
@@ -361,21 +361,18 @@ const focusInput = () => {
                     <i
                         class="fa fa-pencil"
                         aria-hidden="true"
-                        style="font-size: small"
                     ></i>
                 </template>
                 <template #roweditorsaveicon>
                     <i
                         class="fa fa-check"
                         aria-hidden="true"
-                        style="font-size: small"
                     ></i>
                 </template>
                 <template #roweditorcancelicon>
                     <i
                         class="fa fa-undo"
                         aria-hidden="true"
-                        style="font-size: small"
                     ></i>
                 </template>
             </Column>
@@ -391,7 +388,7 @@ const focusInput = () => {
                         :aria-label="$gettext('Delete')"
                         @click="issueDeleteValue(slotProps.data)"
                         @keyup.enter="issueDeleteValue(slotProps.data)"
-                    />
+                    ></i>
                 </template>
             </Column>
         </DataTable>
@@ -412,6 +409,10 @@ h4 {
     margin-top: 0;
 }
 
+i {
+    font-size: var(--p-icon-size);
+}
+
 p {
     font-weight: normal;
     margin-top: 0;
diff --git a/arches_references/src/arches_references/components/misc/ControlledListSplash.vue b/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
index 7328a5a..e7da693 100644
--- a/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
+++ b/arches_references/src/arches_references/components/misc/ControlledListSplash.vue
@@ -39,7 +39,7 @@ const { $gettext } = useGettext();
     border: 1px solid #ddd;
     padding: 4rem 3rem;
     background: #f6f6f6;
-    border-radius: 0.5rem;
+    border-radius: var(--p-content-border-radius);
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/arches_references/src/arches_references/components/misc/ListHeader.vue b/arches_references/src/arches_references/components/misc/ListHeader.vue
index 89b9c93..6e7e60b 100644
--- a/arches_references/src/arches_references/components/misc/ListHeader.vue
+++ b/arches_references/src/arches_references/components/misc/ListHeader.vue
@@ -65,7 +65,7 @@ const heading = computed(() => {
 .header {
     display: flex;
     align-items: center;
-    background: var(--p-navigation);
+    background: var(--p-navigation-color);
     color: white;
 }
 
diff --git a/arches_references/src/arches_references/components/tree/AddDeleteControls.vue b/arches_references/src/arches_references/components/tree/AddDeleteControls.vue
index b3b7cc4..5640586 100644
--- a/arches_references/src/arches_references/components/tree/AddDeleteControls.vue
+++ b/arches_references/src/arches_references/components/tree/AddDeleteControls.vue
@@ -204,12 +204,12 @@ const confirmDelete = () => {
         acceptProps: {
             label: $gettext("Delete"),
             severity: shouldUseContrast() ? CONTRAST : DANGER,
-            outlined: true,
+            style: { fontSize: "small" },
         },
         rejectProps: {
             label: $gettext("Cancel"),
             severity: shouldUseContrast() ? CONTRAST : SECONDARY,
-            outlined: true,
+            style: { fontSize: "small" },
         },
         accept: async () => {
             await deleteSelected().then(fetchListsAndPopulateTree);
diff --git a/arches_references/src/arches_references/components/tree/TreeRow.vue b/arches_references/src/arches_references/components/tree/TreeRow.vue
index 77611da..47b06ba 100644
--- a/arches_references/src/arches_references/components/tree/TreeRow.vue
+++ b/arches_references/src/arches_references/components/tree/TreeRow.vue
@@ -355,7 +355,7 @@ const acceptNewListShortcutEntry = async () => {
 <style scoped>
 .actions {
     display: inline-flex;
-    gap: 1rem;
+    gap: var(--p-content-gap);
     margin-left: 1rem;
     width: 100%;
     justify-content: space-between;

From 8762b694f129bf6404f6a882f5bc58fcf280cc6e Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Tue, 10 Sep 2024 15:19:11 -0400
Subject: [PATCH 2/6] Remove silenced system check

This check was demoted to warning under debug,
so no harm in resolving this TODO now.
---
 arches_references/settings.py | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/arches_references/settings.py b/arches_references/settings.py
index ad1719d..cce505b 100644
--- a/arches_references/settings.py
+++ b/arches_references/settings.py
@@ -420,9 +420,6 @@
 # override this to permenantly display/hide the language switcher
 SHOW_LANGUAGE_SWITCH = len(LANGUAGES) > 1
 
-# TODO: remove when finalizing release
-SILENCED_SYSTEM_CHECKS += ["arches.E002"]
-
 # Location for test data fixtures
 FIXTURE_DIRS = [os.path.join(APP_ROOT, "..", "tests", "fixtures", "data")]
 

From 13809e6a08d56f839f29eba914dfe68afe3e1960 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Thu, 12 Sep 2024 12:42:41 -0400
Subject: [PATCH 3/6] Consume custom toast styling from core

---
 .../arches_references/components/ControlledListsMain.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index 406890e..de934c3 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -61,7 +61,13 @@ provide(systemLanguageKey, systemLanguage);
             <MainSplitter />
         </div>
     </div>
-    <Toast />
+    <Toast
+        :pt="{
+            messageIcon: {
+                style: { marginTop: 'var(--p-toast-message-icon-margin-top)' },
+            },
+        }"
+    />
     <ConfirmDialog
         :draggable="false"
         :pt="{

From 20e2574e7d9c801fff881134d9bed66438bc5f68 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Thu, 12 Sep 2024 15:48:44 -0400
Subject: [PATCH 4/6] Fix mis-aligned search icon

---
 .../src/arches_references/components/tree/ListTree.vue      | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/arches_references/src/arches_references/components/tree/ListTree.vue b/arches_references/src/arches_references/components/tree/ListTree.vue
index 5e95788..4a60ca7 100644
--- a/arches_references/src/arches_references/components/tree/ListTree.vue
+++ b/arches_references/src/arches_references/components/tree/ListTree.vue
@@ -275,7 +275,11 @@ const ptNodeContent = ({ instance }: TreePassThroughMethodOptions) => {
                     style: { width: '100%', fontSize: 'small' },
                 },
             },
-            filterIcon: { style: { display: 'flex' } },
+            pcFilterIconContainer: {
+                root: {
+                    style: { top: '25%' },
+                },
+            },
             wrapper: {
                 style: {
                     overflowY: 'auto',

From c005fff7f44a92f0cf4a0e52c873346d08cf9c4c Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Mon, 7 Oct 2024 16:18:47 -0400
Subject: [PATCH 5/6] Un-tokenize some styles

---
 .../plugins/controlled-list-manager.js        | 26 ++++++++++++++++++-
 .../components/ControlledListsMain.vue        |  4 ++-
 .../components/editor/ImageMetadata.vue       |  2 +-
 .../components/editor/ItemHeader.vue          |  2 +-
 .../components/editor/ItemType.vue            |  4 +--
 .../components/editor/ListCharacteristics.vue |  4 +--
 .../components/misc/ListHeader.vue            |  2 +-
 .../components/tree/TreeRow.vue               |  2 +-
 8 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/arches_references/media/js/views/components/plugins/controlled-list-manager.js b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
index 3823d50..d440fc2 100644
--- a/arches_references/media/js/views/components/plugins/controlled-list-manager.js
+++ b/arches_references/media/js/views/components/plugins/controlled-list-manager.js
@@ -1,5 +1,7 @@
 import ko from 'knockout';
 
+import { definePreset } from '@primevue/themes';
+import { ArchesPreset, DEFAULT_THEME } from '@/arches/themes/default.ts';
 import { routes } from '@/arches_references/routes.ts';
 import ControlledListManager from '@/arches_references/plugins/ControlledListManager.vue';
 import createVueApplication from 'utils/create-vue-application';
@@ -12,9 +14,31 @@ const router = createRouter({
   routes,
 });
 
+const ControlledListsPreset = definePreset(ArchesPreset, {
+    semantic: {
+        iconSize: 'small',
+    },
+    components: {
+        button: {
+            root: {
+                label: {
+                    fontWeight: 600,
+                },
+            },
+        },
+    },
+});
+
+const ControlledListsTheme = {
+    theme: {
+        ...DEFAULT_THEME,
+        preset: ControlledListsPreset,
+    },
+};
+
 ko.components.register('controlled-list-manager', {
     viewModel: function() {
-        createVueApplication(ControlledListManager).then((vueApp) => {
+        createVueApplication(ControlledListManager, ControlledListsTheme).then((vueApp) => {
             vueApp.use(router);
             vueApp.mount('#controlled-list-manager-mounting-point');
         });
diff --git a/arches_references/src/arches_references/components/ControlledListsMain.vue b/arches_references/src/arches_references/components/ControlledListsMain.vue
index de934c3..5a3b2c0 100644
--- a/arches_references/src/arches_references/components/ControlledListsMain.vue
+++ b/arches_references/src/arches_references/components/ControlledListsMain.vue
@@ -63,6 +63,8 @@ provide(systemLanguageKey, systemLanguage);
     </div>
     <Toast
         :pt="{
+            summary: { fontSize: 'medium' },
+            detail: { fontSize: 'small' },
             messageIcon: {
                 style: { marginTop: 'var(--p-toast-message-icon-margin-top)' },
             },
@@ -73,7 +75,7 @@ provide(systemLanguageKey, systemLanguage);
         :pt="{
             header: {
                 style: {
-                    background: 'var(--p-navigation-color)',
+                    background: 'var(--p-navigation-header-color)',
                     color: 'white',
                     borderRadius: '1rem',
                     marginBottom: '1rem',
diff --git a/arches_references/src/arches_references/components/editor/ImageMetadata.vue b/arches_references/src/arches_references/components/editor/ImageMetadata.vue
index b56181e..3029082 100644
--- a/arches_references/src/arches_references/components/editor/ImageMetadata.vue
+++ b/arches_references/src/arches_references/components/editor/ImageMetadata.vue
@@ -367,7 +367,7 @@ const focusInput = () => {
             </Column>
         </DataTable>
     </div>
-    <div style="display: flex; gap: var(--p-content-gap)">
+    <div style="display: flex; gap: 1rem">
         <AddMetadata
             :image
             :labeled-choices
diff --git a/arches_references/src/arches_references/components/editor/ItemHeader.vue b/arches_references/src/arches_references/components/editor/ItemHeader.vue
index 46e5d74..df5819a 100644
--- a/arches_references/src/arches_references/components/editor/ItemHeader.vue
+++ b/arches_references/src/arches_references/components/editor/ItemHeader.vue
@@ -53,7 +53,7 @@ const iconLabel = (item: ControlledListItem) => {
 .item-header {
     display: inline-flex;
     align-items: center;
-    gap: var(--p-content-gap);
+    gap: 1rem;
     margin: 1rem 1rem 0rem 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid;
diff --git a/arches_references/src/arches_references/components/editor/ItemType.vue b/arches_references/src/arches_references/components/editor/ItemType.vue
index bcd3387..3cb44e7 100644
--- a/arches_references/src/arches_references/components/editor/ItemType.vue
+++ b/arches_references/src/arches_references/components/editor/ItemType.vue
@@ -58,14 +58,14 @@ const issuePatchItem = async () => {
     margin: 1rem 1rem 3rem 1rem;
     display: flex;
     flex-direction: column;
-    gap: var(--p-content-gap);
+    gap: 1rem;
     width: 100%;
     font-size: small;
 }
 
 .guide-switch {
     display: inline-flex;
-    gap: var(--p-content-gap);
+    gap: 1rem;
     align-items: center;
 }
 
diff --git a/arches_references/src/arches_references/components/editor/ListCharacteristics.vue b/arches_references/src/arches_references/components/editor/ListCharacteristics.vue
index 7f92174..084e332 100644
--- a/arches_references/src/arches_references/components/editor/ListCharacteristics.vue
+++ b/arches_references/src/arches_references/components/editor/ListCharacteristics.vue
@@ -61,7 +61,7 @@ const { $gettext } = useGettext();
 .controlled-list-header {
     display: inline-flex;
     align-items: center;
-    gap: var(--p-content-gap);
+    gap: 1rem;
     margin: 1rem 1rem 0rem 1rem;
     padding-bottom: 1rem;
     border-bottom: 1px solid;
@@ -79,6 +79,6 @@ h3 {
 .nodes {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--p-content-gap);
+    gap: 1rem;
 }
 </style>
diff --git a/arches_references/src/arches_references/components/misc/ListHeader.vue b/arches_references/src/arches_references/components/misc/ListHeader.vue
index 6e7e60b..0f6f3a9 100644
--- a/arches_references/src/arches_references/components/misc/ListHeader.vue
+++ b/arches_references/src/arches_references/components/misc/ListHeader.vue
@@ -65,7 +65,7 @@ const heading = computed(() => {
 .header {
     display: flex;
     align-items: center;
-    background: var(--p-navigation-color);
+    background: var(--p-navigation-header-color);
     color: white;
 }
 
diff --git a/arches_references/src/arches_references/components/tree/TreeRow.vue b/arches_references/src/arches_references/components/tree/TreeRow.vue
index 47b06ba..77611da 100644
--- a/arches_references/src/arches_references/components/tree/TreeRow.vue
+++ b/arches_references/src/arches_references/components/tree/TreeRow.vue
@@ -355,7 +355,7 @@ const acceptNewListShortcutEntry = async () => {
 <style scoped>
 .actions {
     display: inline-flex;
-    gap: var(--p-content-gap);
+    gap: 1rem;
     margin-left: 1rem;
     width: 100%;
     justify-content: space-between;

From d8a26e2a6df819e97d850d1392ba224daeae2a48 Mon Sep 17 00:00:00 2001
From: Jacob Walls <jwalls@fargeo.com>
Date: Wed, 30 Oct 2024 10:43:47 -0400
Subject: [PATCH 6/6] Ignore constants.ts from coverage

---
 vitest.config.mts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/vitest.config.mts b/vitest.config.mts
index 8b73ef8..29e8872 100644
--- a/vitest.config.mts
+++ b/vitest.config.mts
@@ -17,6 +17,7 @@ function generateConfig(): Promise<UserConfigExport> {
             '**/themes/**',
             '**/.{idea,git,cache,output,temp}/**',
             '**/{karma,rollup,webpack,vite,vitest,jest,ava,babel,nyc,cypress,tsup,build}.config.*',
+            'arches_references/constants.ts',
         ];
 
         const rawData = fs.readFileSync(path.join(__dirname, '.frontend-configuration-settings.json'), 'utf-8');