Consume more tokens from core arches

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');
         });

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")]
 

arches_references/src/arches_references/components/ControlledListsMain.vue

@@ -61,18 +61,21 @@ provide(systemLanguageKey, systemLanguage);
             <MainSplitter />
         </div>
     </div>
-    <Toast />
+    <Toast
+        :pt="{
+            summary: { fontSize: 'medium' },
+            detail: { fontSize: 'small' },
+            messageIcon: {
+                style: { marginTop: 'var(--p-toast-message-icon-margin-top)' },
+            },
+        }"
+    />
     <ConfirmDialog
         :draggable="false"
         :pt="{
-            root: {
-                style: {
-                    fontSize: 'small',
-                },
-            },
             header: {
                 style: {
-                    background: 'var(--p-navigation)',
+                    background: 'var(--p-navigation-header-color)',
                     color: 'white',
                     borderRadius: '1rem',
                     marginBottom: '1rem',
@@ -81,6 +84,7 @@ provide(systemLanguageKey, systemLanguage);
             title: {
                 style: {
                     fontWeight: 800,
+                    fontSize: 'small',
                 },
             },
         }"

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>
@@ -408,4 +405,8 @@ const focusInput = () => {
 :deep(.p-datatable-column-title) {
     font-size: small;
 }
+
+i {
+    font-size: var(--p-icon-size);
+}
 </style>

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>

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,15 +110,15 @@ const cancel = () => {
                 :aria-label="$gettext('Save edit')"
                 @click="save"
                 @keyup.enter="save"
-            />
+            ></i>
             <i
                 role="button"
                 tabindex="0"
                 class="fa fa-undo"
                 :aria-label="$gettext('Cancel edit')"
                 @click="cancel"
                 @keyup.enter="cancel"
-            />
+            ></i>
         </span>
     </div>
 </template>

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>
@@ -80,6 +80,5 @@ h3 {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
-    margin: 1rem;
 }
 </style>

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;

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;

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-header-color);
     color: white;
 }
 

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);

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',

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');