From cc6f73ca046f513402746b63264e4dc1ba8e726d Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 6 Mar 2026 19:15:51 -0500
Subject: [PATCH] style(journals): standardize Skeleton v4 preset-* classes
 across all journal components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace all Skeleton v2 variant-* classes with v4 preset-* equivalents
  - variant-filled-* → preset-filled-*
  - variant-soft-* / variant-ghost-* → preset-tonal-*
  - variant-outline-* → preset-outlined-*
  - variant-form-material removed from inputs/selects/textareas
  - input-bordered removed

- Fix dark mode: journal entry content hover (dark:hover:bg-blue-950)
- Fix dark mode: journal obj view section/description bg and text colors
- Fix modal headers: add dismissable=false + explicit X close button (all 3 journals modals)
- Fix DaisyUI wrappers removed from modal_journal_entry_append
- app.css: add global select padding-inline to fix text-against-border issue
---
 src/app.css                                   |   4 +
 src/routes/journals/+page.svelte              |  16 +--
 .../ae_comp__journal_entry_editor.svelte      |   6 +-
 .../ae_comp__journal_entry_header.svelte      |  16 +--
 .../ae_comp__journal_entry_metadata.svelte    |   2 +-
 .../ae_comp__journal_entry_obj_file_li.svelte |   6 +-
 .../ae_comp__journal_entry_obj_id_view.svelte |   2 +-
 .../ae_comp__journal_entry_obj_li.svelte      |   4 +-
 .../ae_comp__journal_entry_obj_qry.svelte     |  19 +--
 .../ae_comp__journal_entry_quick_add.svelte   |  12 +-
 .../ae_comp__journal_obj_id_edit.svelte       |  72 +++++-----
 .../ae_comp__journal_obj_id_view.svelte       |   9 +-
 .../journals/ae_comp__journal_obj_li.svelte   |   6 +-
 .../ae_comp__modal_journal_config.svelte      |  38 +++---
 ...ae_comp__modal_journal_entry_append.svelte | 125 ++++++++----------
 ...ae_comp__modal_journal_entry_config.svelte |  54 ++++----
 .../ae_comp__modal_journal_export.svelte      |   4 +-
 .../journals/ae_comp__obj_core_props.svelte   |   8 +-
 18 files changed, 201 insertions(+), 202 deletions(-)

diff --git a/src/app.css b/src/app.css
index 1c9e6109..52d6132b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -120,6 +120,10 @@
         background-color: hsl(var(--background));
         color: hsl(var(--foreground));
     }
+    /* Tailwind preflight strips native select padding — restore it globally */
+    select {
+        padding-inline: 0.5rem;
+    }
 }
 
 /* There are no more Tailwind layers. */
diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index 8f790ab9..29af33b3 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -141,7 +141,7 @@
         >
             <button
                 type="button"
-                class="btn variant-filled-secondary shadow-lg hover:scale-105 transition-transform"
+                class="btn preset-tonal-secondary shadow-lg hover:scale-105 transition-transform"
                 onclick={() =>
                     ($journals_sess.show__modal_new__journal_obj = true)}
             >
@@ -151,7 +151,7 @@
 
             <button
                 type="button"
-                class="btn variant-filled-surface border border-surface-500/30 shadow-lg hover:scale-105 transition-transform"
+                class="btn preset-tonal-surface shadow-lg hover:scale-105 transition-transform"
                 onclick={() => (show_import_modal = true)}
             >
                 <FileUp size="1.2em" class="mr-2" />
@@ -160,7 +160,7 @@
 
             <button
                 type="button"
-                class="btn variant-soft-surface shadow-lg hover:scale-105 transition-transform"
+                class="btn preset-tonal-surface shadow-lg hover:scale-105 transition-transform"
                 onclick={() =>
                     ($journals_sess.show__modal__journals_config = true)}
             >
@@ -193,7 +193,7 @@
                 </p>
                 <button
                     type="button"
-                    class="btn variant-filled-primary"
+                    class="btn preset-filled-primary"
                     onclick={() =>
                         ($journals_sess.show__modal_new__journal_obj = true)}
                 >
@@ -223,7 +223,7 @@
                     type="text"
                     placeholder="e.g. My Daily Logs"
                     bind:value={$journals_sess.journal.new_journal_name}
-                    class="input variant-filled-surface rounded-lg"
+                    class="input"
                 />
             </div>
             <div class="space-y-1">
@@ -235,20 +235,20 @@
                     type="text"
                     placeholder="e.g. diary, log, notebook"
                     bind:value={$journals_sess.journal.new_journal_type_code}
-                    class="input variant-filled-surface rounded-lg"
+                    class="input"
                 />
             </div>
             <div class="flex justify-end gap-2 pt-4">
                 <button
                     type="button"
-                    class="btn variant-soft-surface"
+                    class="btn preset-tonal-surface"
                     onclick={() =>
                         ($journals_sess.show__modal_new__journal_obj = false)}
                     >Cancel</button
                 >
                 <button
                     type="button"
-                    class="btn variant-filled-primary font-bold"
+                    class="btn preset-filled-primary font-bold"
                     onclick={create_journal}>Create Journal</button
                 >
             </div>
diff --git a/src/routes/journals/ae_comp__journal_entry_editor.svelte b/src/routes/journals/ae_comp__journal_entry_editor.svelte
index 5e7dc7a2..adce809b 100644
--- a/src/routes/journals/ae_comp__journal_entry_editor.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_editor.svelte
@@ -81,7 +81,7 @@
                         </p>
                         <button
                             type="button"
-                            class="btn btn-sm variant-filled-error font-bold"
+                            class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
                             onclick={on_force_reset}
                         >
                             <RefreshCcw size="1.1em" class="mr-2" /> Force Reset to
@@ -113,7 +113,7 @@
                 type="button"
                 onclick={on_save}
                 disabled={!has_changed}
-                class="btn btn-sm md:btn-md lg:btn-lg fixed top-72 right-6 min-w-32 variant-filled-success shadow-xl z-20 transition-all"
+                class="btn btn-sm md:btn-md lg:btn-lg fixed top-72 right-6 min-w-32 preset-filled-success shadow-xl z-20 transition-all"
                 class:hidden={!has_changed}
             >
                 <Save size="1.2em" class="mr-2" /> Save
@@ -124,7 +124,7 @@
                 type="button"
                 onclick={on_save}
                 disabled={!has_changed}
-                class="btn variant-filled-warning w-full max-w-96 mt-4"
+                class="btn preset-tonal-warning hover:preset-filled-warning-500 w-full max-w-96 mt-4"
                 class:invisible={!has_changed}
             >
                 <Save size="1.2em" class="mr-2" /> Save Changes
diff --git a/src/routes/journals/ae_comp__journal_entry_header.svelte b/src/routes/journals/ae_comp__journal_entry_header.svelte
index 9137a0e1..d8170e91 100644
--- a/src/routes/journals/ae_comp__journal_entry_header.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_header.svelte
@@ -73,7 +73,7 @@
     <div class="flex items-center gap-3 w-full md:w-auto">
         <a
             href="/journals/{journal.journal_id}"
-            class="btn-icon btn-icon-sm variant-soft-surface"
+            class="btn-icon btn-icon-sm preset-tonal-surface"
             title="Back to Journal"
         >
             <ChevronLeft size="1.2em" />
@@ -86,8 +86,8 @@
                 class="btn-icon btn-icon-sm transition-all {has_changed &&
                 $journals_loc.entry.edit_kv[entry.journal_entry_id] ===
                     'current'
-                    ? 'variant-filled-success'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-success'
+                    : 'preset-tonal-surface'}"
             >
                 {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
                     {#if has_changed}<Save size="1.2em" />{:else}<Eye
@@ -102,7 +102,7 @@
                 <input
                     type="text"
                     bind:value={tmp_entry_obj.name}
-                    class="input input-sm variant-form-material font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
+                    class="input input-sm font-bold text-lg grow md:min-w-[300px] border-none bg-transparent focus:ring-0"
                     placeholder="Entry Title..."
                     onchange={on_save}
                 />
@@ -155,8 +155,8 @@
             <button
                 type="button"
                 class="btn-icon btn-icon-sm transition-all {is_decrypted
-                    ? 'variant-filled-success shadow-lg shadow-success-500/20'
-                    : 'variant-soft-warning'}"
+                    ? 'preset-filled-success shadow-lg shadow-success-500/20'
+                    : 'preset-tonal-warning'}"
                 onclick={on_decrypt}
                 title={is_decrypted ? 'Lock Content' : 'Decrypt Content'}
             >
@@ -171,7 +171,7 @@
         <!-- Unified Config Button -->
         <button
             type="button"
-            class="btn btn-sm variant-soft-primary font-bold"
+            class="btn btn-sm preset-tonal-primary font-bold"
             onclick={on_show_config}
         >
             <Settings size="1.1em" class="mr-2" /> Config
@@ -181,7 +181,7 @@
         {#if has_changed && save_status !== 'saving'}
             <button
                 type="button"
-                class="btn btn-sm variant-filled-primary shadow-lg"
+                class="btn btn-sm preset-filled-primary"
                 onclick={on_save}
             >
                 <Save size="1.1em" class="mr-2" /> Save
diff --git a/src/routes/journals/ae_comp__journal_entry_metadata.svelte b/src/routes/journals/ae_comp__journal_entry_metadata.svelte
index 53fc19e5..b24eacc3 100644
--- a/src/routes/journals/ae_comp__journal_entry_metadata.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_metadata.svelte
@@ -40,7 +40,7 @@
         </div>
 
         {#if entry.journal_entry_type}
-            <span class="badge variant-soft-surface">
+            <span class="badge preset-tonal-surface">
                 Type: {entry.journal_entry_type}
             </span>
         {/if}
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_file_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_file_li.svelte
index aef1324b..adb3d571 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_file_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_file_li.svelte
@@ -206,7 +206,7 @@
             <Paperclip size="1.1em" />
             Attachments
             {#if unified_file_li.length}
-                <span class="badge variant-soft-surface text-xs"
+                <span class="badge preset-tonal-surface text-xs"
                     >{unified_file_li.length}</span
                 >
             {/if}
@@ -215,7 +215,7 @@
         {#if $ae_loc.edit_mode}
             <button
                 type="button"
-                class="btn btn-sm variant-soft-warning font-semibold"
+                class="btn btn-sm preset-tonal-warning font-semibold"
                 onclick={() => {
                     $ae_sess.files.add_to_use_files_method =
                         $ae_sess.files.add_to_use_files_method === 'upload'
@@ -258,7 +258,7 @@
                         {#if $ae_loc.edit_mode}
                             <button
                                 type="button"
-                                class="btn btn-sm variant-soft-error"
+                                class="btn btn-sm preset-tonal-error"
                                 onclick={() => handle_remove_file(file_id)}
                                 title="Remove attachment"
                             >
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
index b3091091..740c10c8 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
@@ -450,7 +450,7 @@
                 </div>
                 <button
                     type="button"
-                    class="btn btn-sm variant-filled-error shadow-lg font-bold"
+                    class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
                     onclick={() => (decryption_error = null)}
                 >
                     <CircleX size="1.2em" class="mr-2" /> Dismiss
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
index 4583ad69..d353bde3 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
@@ -536,7 +536,7 @@
                                 class:bg-green-100={$journals_loc.entry
                                     .qry__category_code ==
                                     journals_journal_entry_obj.category_code}
-                                class="btn btn-sm variant-outline-secondary hover:preset-filled-secondary-500 transition py-1 px-2"
+                                class="btn btn-sm preset-outlined-secondary hover:preset-filled-secondary-500 transition py-1 px-2"
                                 title={`Filter by category: ${journals_journal_entry_obj.category_code}`}
                             >
                                 <Shapes class="mx-1 inline-block" />
@@ -603,7 +603,7 @@ Journal ID: ${journals_journal_entry_obj?.journal_id}
                     duration-1000 hover:duration-200 active:duration-200
                     ease-in-out
                     active:z-10
-                    hover:bg-blue-100 hover:border-blue-500 dark:hover:border-blue-500
+                    hover:bg-blue-100 dark:hover:bg-blue-950 hover:border-blue-500 dark:hover:border-blue-500
                     overflow-scroll
                     {$journals_slct.journal_obj.cfg_json.entry_li_max_height
                             ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height}`
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_qry.svelte b/src/routes/journals/ae_comp__journal_entry_obj_qry.svelte
index a1d285e6..5be052eb 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_qry.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_qry.svelte
@@ -110,7 +110,7 @@
                 title={`Search for Entries in "${$lq__journal_obj?.name}. Press Enter to search.`}
                 autocomplete="off"
                 class="
-                    input input-sm input-bordered
+                    input input-sm
                     w-44 md:w-52
                     text-sm
                     "
@@ -120,7 +120,7 @@
 
             <button
                 type="submit"
-                class="btn btn-sm preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 transition"
+                class="btn btn-sm preset-filled-primary transition"
                 title="Perform detailed search"
             >
                 <Library size="1.25em" />
@@ -138,9 +138,8 @@
                 }}
                 class="
                     btn btn-sm
-                    preset-tonal-tertiary
-                    preset-outlined-tertiary-100-900
-                    hover:preset-filled-tertiary-100-900
+                    preset-tonal-surface
+                    hover:preset-filled-surface-500
                     transition-all
                     "
                 title="Clear search query text"
@@ -158,13 +157,7 @@
     <span class="flex flex-row items-center gap-2">
         <span class="text-sm text-gray-500 hidden md:inline"> Category: </span>
         <select
-            class="
-                btn btn-sm
-                preset-tonal-tertiary
-                preset-outlined-tertiary-100-900
-                hover:preset-filled-tertiary-100-900
-                transition-all
-                "
+            class="select select-sm"
             bind:value={$journals_loc.entry.qry__category_code}
             onchange={(event) => {
                 handle_search_trigger();
@@ -183,7 +176,7 @@
         class="flex flex-row flex-wrap items-center gap-2 border-l border-surface-300-700 pl-2"
     >
         <!-- Global Search hidden until backend supports person_id in entries 2026-01-27 -->
-        <!-- 
+        <!--
         <label
             class="flex items-center gap-1 cursor-pointer"
             title="When enabled, searches all journals for this person. When disabled, only searches the current journal."
diff --git a/src/routes/journals/ae_comp__journal_entry_quick_add.svelte b/src/routes/journals/ae_comp__journal_entry_quick_add.svelte
index ae1ea60a..3f443c9c 100644
--- a/src/routes/journals/ae_comp__journal_entry_quick_add.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_quick_add.svelte
@@ -90,7 +90,7 @@
     }
 </script>
 
-<div class="card p-4 space-y-4 variant-filled-surface {className}">
+<div class="card p-4 space-y-4 preset-tonal-surface {className}">
     <header
         class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2"
     >
@@ -102,7 +102,7 @@
         {#if journals_li && journals_li.length > 0}
             <div class="w-full sm:w-auto">
                 <select
-                    class="select select-sm variant-filled-surface border-surface-500/30 font-bold"
+                    class="select select-sm font-bold"
                     value={target_journal_id}
                     onchange={handle_journal_change}
                 >
@@ -115,12 +115,12 @@
                 </select>
             </div>
         {:else if !target_journal_id}
-            <span class="badge variant-filled-error">No Journal Selected</span>
+            <span class="badge preset-tonal-error">No Journal Selected</span>
         {/if}
     </header>
 
     <textarea
-        class="textarea variant-filled-surface border-surface-500/20"
+        class="textarea"
         rows="3"
         bind:value={note_content}
         {placeholder}
@@ -137,7 +137,7 @@
         <div class="flex justify-end space-x-2 grow sm:grow-0">
             <button
                 type="button"
-                class="btn btn-sm variant-ghost-surface"
+                class="btn btn-sm preset-tonal-surface"
                 onclick={() => (note_content = '')}
                 disabled={is_submitting || note_content.length === 0}
             >
@@ -145,7 +145,7 @@
             </button>
             <button
                 type="button"
-                class="btn btn-sm variant-filled-primary font-bold shadow-md"
+                class="btn btn-sm preset-filled-primary font-bold"
                 onclick={handle_submit}
                 disabled={is_submitting ||
                     !target_journal_id ||
diff --git a/src/routes/journals/ae_comp__journal_obj_id_edit.svelte b/src/routes/journals/ae_comp__journal_obj_id_edit.svelte
index 6cc8cd0f..029dc5cd 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_edit.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_edit.svelte
@@ -173,6 +173,7 @@
 <Modal
     bind:open={show}
     autoclose={false}
+    dismissable={false}
     placement="top-center"
     size="xl"
     class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -180,10 +181,13 @@
     footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
 >
     {#snippet header()}
-        <h3 class="flex items-center gap-2 text-lg font-bold">
+        <h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
             <Settings class="text-primary-500" />
             <span>Journal Config: {$lq__journal_obj?.name ?? '--'}</span>
         </h3>
+        <button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
+            <X size="1.1em" />
+        </button>
     {/snippet}
 
     <div class="space-y-6 py-2 h-[75vh] overflow-y-auto px-4">
@@ -194,8 +198,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'actions'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'actions')}
             >
                 <Zap size="1.1em" class="mr-1" /> Quick Actions
@@ -203,8 +207,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'general'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'general')}
             >
                 <Layout size="1.1em" class="mr-1" /> General
@@ -212,8 +216,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'security'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'security')}
             >
                 <ShieldCheck size="1.1em" class="mr-1" /> Status & Security
@@ -221,8 +225,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'ui'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'ui')}
             >
                 <Palette size="1.1em" class="mr-1" /> UI/Visuals
@@ -230,8 +234,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'json'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'json')}
             >
                 <CodeXml size="1.1em" class="mr-1" /> JSON
@@ -243,7 +247,7 @@
                 <section class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <button
                         type="button"
-                        class="btn variant-soft-secondary w-full py-4 text-lg font-bold"
+                        class="btn preset-tonal-secondary w-full py-4 text-lg font-bold"
                         onclick={() => {
                             show = false;
                             on_new_entry?.();
@@ -253,7 +257,7 @@
                     </button>
                     <button
                         type="button"
-                        class="btn variant-soft-surface w-full py-4"
+                        class="btn preset-tonal-surface w-full py-4"
                         onclick={() => {
                             show = false;
                             on_show_export?.();
@@ -263,7 +267,7 @@
                     </button>
                     <button
                         type="button"
-                        class="btn variant-soft-surface w-full py-4"
+                        class="btn preset-tonal-surface w-full py-4"
                         onclick={() => {
                             show = false;
                             on_show_import?.();
@@ -284,7 +288,7 @@
                         <input
                             type="text"
                             bind:value={tmp__journal_obj.name}
-                            class="input variant-form-material"
+                            class="input"
                             placeholder="e.g. Personal Log"
                         />
                     </label>
@@ -294,7 +298,7 @@
                         >
                         <textarea
                             bind:value={tmp__journal_obj.description}
-                            class="textarea variant-form-material h-32"
+                            class="textarea h-32"
                             placeholder="Describe the purpose of this journal..."
                         ></textarea>
                     </label>
@@ -305,7 +309,7 @@
                             >
                             <select
                                 bind:value={tmp__journal_obj.type_code}
-                                class="select variant-form-material"
+                                class="select"
                             >
                                 {#each $journals_loc.journal.type_code_li as type (type.code)}
                                     <option value={type.code}
@@ -321,7 +325,7 @@
                             <input
                                 type="text"
                                 bind:value={tmp__journal_obj.group}
-                                class="input variant-form-material"
+                                class="input"
                                 placeholder="Standard"
                             />
                         </label>
@@ -355,7 +359,7 @@
                                 />
                                 <button
                                     type="button"
-                                    class="btn-icon btn-icon-sm variant-soft-error"
+                                    class="btn-icon btn-icon-sm preset-tonal-error"
                                     onclick={() => {
                                         tmp__journal_obj.cfg_json.category_li.splice(
                                             i,
@@ -369,7 +373,7 @@
                         {/each}
                         <button
                             type="button"
-                            class="btn btn-sm variant-soft-primary w-full mt-2"
+                            class="btn btn-sm preset-tonal-primary w-full mt-2"
                             onclick={() => {
                                 if (!tmp__journal_obj.cfg_json.category_li)
                                     tmp__journal_obj.cfg_json.category_li = [];
@@ -456,7 +460,7 @@
                             <div class="flex items-center gap-2">
                                 <button
                                     type="button"
-                                    class="btn-icon btn-icon-sm variant-soft-surface"
+                                    class="btn-icon btn-icon-sm preset-tonal-surface"
                                     onclick={() => {
                                         tmp__journal_obj.sort =
                                             (tmp__journal_obj.sort ?? 0) - 1;
@@ -469,7 +473,7 @@
                                 >
                                 <button
                                     type="button"
-                                    class="btn-icon btn-icon-sm variant-soft-surface"
+                                    class="btn-icon btn-icon-sm preset-tonal-surface"
                                     onclick={() => {
                                         tmp__journal_obj.sort =
                                             (tmp__journal_obj.sort ?? 0) + 1;
@@ -501,7 +505,7 @@
                                 <input
                                     type="password"
                                     bind:value={tmp__journal_obj.passcode}
-                                    class="input variant-form-material grow"
+                                    class="input grow"
                                     placeholder="Module-level passcode"
                                 />
                                 <Fingerprint class="opacity-30" />
@@ -518,7 +522,7 @@
                                     bind:value={
                                         tmp__journal_obj.private_passcode
                                     }
-                                    class="input variant-form-material grow"
+                                    class="input grow"
                                     placeholder="User-level secret"
                                 />
                                 <ShieldCheck class="opacity-30" />
@@ -537,7 +541,7 @@
                 <section class="pt-8">
                     <button
                         type="button"
-                        class="btn btn-sm variant-filled-error w-full shadow-lg"
+                        class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 w-full shadow-lg"
                         onclick={delete_journal}
                     >
                         <Trash2 size="1.1em" class="mr-2" /> Delete Entire Journal
@@ -564,7 +568,7 @@
                                 bind:value={
                                     tmp__journal_obj.cfg_json.pref_viewer
                                 }
-                                class="select variant-form-material"
+                                class="select"
                             >
                                 <option value="rendered"
                                     >Rendered HTML (Default)</option
@@ -583,7 +587,7 @@
                                 bind:value={
                                     tmp__journal_obj.cfg_json.pref_editor
                                 }
-                                class="select variant-form-material"
+                                class="select"
                             >
                                 <option value="textarea"
                                     >Standard Textarea</option
@@ -601,7 +605,7 @@
                                 bind:value={
                                     tmp__journal_obj.cfg_json.color_scheme
                                 }
-                                class="select variant-form-material"
+                                class="select"
                             >
                                 <option value="">Default (Slate)</option>
                                 <option value="blue">Deep Blue</option>
@@ -619,7 +623,7 @@
                                 bind:value={
                                     tmp__journal_obj.cfg_json.entry_add_text
                                 }
-                                class="select variant-form-material"
+                                class="select"
                             >
                                 <option value="append"
                                     >Append to End (Default)</option
@@ -826,7 +830,7 @@
                                 bind:value={
                                     tmp__journal_obj.cfg_json.expand_li_content
                                 }
-                                class="select select-sm variant-form-material"
+                                class="select"
                             >
                                 <option value="click">Click to Expand</option>
                                 <option value="hover">Hover to Expand</option>
@@ -842,7 +846,7 @@
                                         tmp__journal_obj.cfg_json
                                             .entry_li_max_height
                                     }
-                                    class="select select-sm variant-form-material"
+                                    class="select select-sm"
                                 >
                                     <option value="">Default</option>
                                     <option value="max-h-16">Small (16)</option>
@@ -861,7 +865,7 @@
                                         tmp__journal_obj.cfg_json
                                             .entry_li_click_max_height
                                     }
-                                    class="select select-sm variant-form-material"
+                                    class="select select-sm"
                                 >
                                     <option value="">Default</option>
                                     <option value="active:max-h-64"
@@ -895,14 +899,14 @@
         <div class="flex gap-4">
             <button
                 type="button"
-                class="btn variant-ghost-surface font-bold min-w-[100px]"
+                class="btn preset-tonal-surface font-bold min-w-[100px]"
                 onclick={() => (show = false)}
             >
                 <X size="1.2em" class="mr-2" /> Cancel
             </button>
             <button
                 type="button"
-                class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
+                class="btn preset-filled-primary font-bold min-w-[120px]"
                 onclick={() => handle_update_journal(true)}
             >
                 <Check size="1.2em" class="mr-2" /> Save Changes
diff --git a/src/routes/journals/ae_comp__journal_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
index f9b48911..1e802152 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
@@ -177,7 +177,8 @@
     rounded-lg p-2 m-2 w-full
     flex flex-col flex-wrap items-center justify-center
     bg-{$lq__journal_obj?.cfg_json.color_scheme}-100
-    text-gray-900 dark:text-gray-900
+    dark:bg-gray-800
+    text-gray-900 dark:text-gray-100
     "
     bind:clientHeight={$ae_loc.iframe_height_modal_body}
 >
@@ -215,7 +216,7 @@
                 type="button"
                 onclick={() =>
                     ($journals_sess.show__modal_edit__journal_obj = true)}
-                class="btn variant-filled-secondary py-1 px-3 shadow-md"
+                class="btn preset-tonal-secondary py-1 px-3 shadow-md"
                 title="Journal Config & Actions"
             >
                 <Settings size="1.2em" class="mr-2" />
@@ -230,7 +231,7 @@
                         type="text"
                         bind:value={typed_journal_passcode}
                         placeholder="Passcode"
-                        class="input input-sm variant-form-material w-32"
+                        class="input input-sm w-32"
                     />
                 </div>
             {/if}
@@ -247,7 +248,7 @@
             w-full max-w-(--breakpoint-sm) md:max-w-(--breakpoint-md)
             font-mono
             text-gray-900
-            dark:bg-blue-900/40 dark:text-gray-100
+            dark:bg-gray-700 dark:text-gray-100
             shadow-md rounded-lg
             text-sm font-normal text-wrap word-break
 
diff --git a/src/routes/journals/ae_comp__journal_obj_li.svelte b/src/routes/journals/ae_comp__journal_obj_li.svelte
index 3e479a4d..090437a9 100644
--- a/src/routes/journals/ae_comp__journal_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_li.svelte
@@ -111,7 +111,7 @@
                 >
                     <a
                         href="/journals/{journal?.journal_id}"
-                        class="btn variant-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
+                        class="btn preset-filled-primary w-full font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all"
                     >
                         <BookOpenText size="1.2em" class="mr-2" />
                         <span>Open Journal</span>
@@ -138,13 +138,13 @@
                     <div class="absolute -top-2 -right-2 flex gap-1">
                         {#if journal.hide}
                             <span
-                                class="badge-icon variant-filled-surface shadow-sm"
+                                class="badge-icon preset-tonal-surface shadow-sm"
                                 title="Hidden">🚫</span
                             >
                         {/if}
                         {#if !journal.enable}
                             <span
-                                class="badge-icon variant-filled-warning shadow-sm"
+                                class="badge-icon preset-tonal-warning shadow-sm"
                                 title="Disabled">⚠️</span
                             >
                         {/if}
diff --git a/src/routes/journals/ae_comp__modal_journal_config.svelte b/src/routes/journals/ae_comp__modal_journal_config.svelte
index 43aedeab..71eef3b8 100644
--- a/src/routes/journals/ae_comp__modal_journal_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_config.svelte
@@ -63,6 +63,7 @@
 <Modal
     bind:open={show}
     autoclose={false}
+    dismissable={false}
     placement="top-center"
     size="xl"
     class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -70,10 +71,13 @@
     footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
 >
     {#snippet header()}
-        <h3 class="flex items-center gap-2 text-lg font-bold">
+        <h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
             <Wrench class="text-primary-500" />
             <span>&AElig; Journals Module Config</span>
         </h3>
+        <button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
+            <X size="1.1em" />
+        </button>
     {/snippet}
 
     <div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
@@ -84,8 +88,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'form'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'form')}
             >
                 <Settings size="1.1em" class="mr-1" /> Config
@@ -93,8 +97,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'local_json'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'local_json')}
             >
                 <Database size="1.1em" class="mr-1" /> Local JSON
@@ -102,8 +106,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'session_json'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'session_json')}
             >
                 <CodeXml size="1.1em" class="mr-1" /> Session JSON
@@ -127,7 +131,7 @@
                             >
                             <select
                                 bind:value={tmp_config.datetime_format}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value="datetime_12_short"
                                     >MMM D, YY hh:mm A</option
@@ -155,7 +159,7 @@
                             >
                             <select
                                 bind:value={tmp_config.time_format}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value="time_12_short"
                                     >12-hour short (3:30 PM)</option
@@ -235,7 +239,7 @@
                             >
                             <select
                                 bind:value={tmp_config.journal.qry__enabled}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value="enabled">Enabled Only</option>
                                 <option value="not_enabled"
@@ -252,7 +256,7 @@
                             >
                             <select
                                 bind:value={tmp_config.journal.qry__hidden}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value="not_hidden">Visible Only</option>
                                 <option value="hidden">Hidden Only</option>
@@ -267,7 +271,7 @@
                             >
                             <select
                                 bind:value={tmp_config.journal.qry__limit}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value={10}>10</option>
                                 <option value={20}>20</option>
@@ -296,7 +300,7 @@
                             >
                             <select
                                 bind:value={tmp_config.entry.qry__enabled}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value="enabled">Enabled Only</option>
                                 <option value="not_enabled"
@@ -313,7 +317,7 @@
                             >
                             <select
                                 bind:value={tmp_config.entry.qry__hidden}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value="not_hidden">Visible Only</option>
                                 <option value="hidden">Hidden Only</option>
@@ -328,7 +332,7 @@
                             >
                             <select
                                 bind:value={tmp_config.entry.qry__limit}
-                                class="select select-sm variant-form-material"
+                                class="select select-sm"
                             >
                                 <option value={10}>10</option>
                                 <option value={20}>20</option>
@@ -398,14 +402,14 @@
         <div class="flex gap-4">
             <button
                 type="button"
-                class="btn variant-ghost-surface font-bold min-w-[100px]"
+                class="btn preset-tonal-surface font-bold min-w-[100px]"
                 onclick={() => (show = false)}
             >
                 <X size="1.2em" class="mr-2" /> Cancel
             </button>
             <button
                 type="button"
-                class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
+                class="btn preset-filled-primary font-bold shadow-lg min-w-[120px]"
                 onclick={handle_save}
             >
                 <Check size="1.2em" class="mr-2" /> Save Changes
diff --git a/src/routes/journals/ae_comp__modal_journal_entry_append.svelte b/src/routes/journals/ae_comp__modal_journal_entry_append.svelte
index 6eaa67d0..e52fbeca 100644
--- a/src/routes/journals/ae_comp__modal_journal_entry_append.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_entry_append.svelte
@@ -147,78 +147,67 @@
     size="xl"
     class="top-center bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col gap-1 mx-auto w-full"
 >
-    <div class="modal">
-        <div class="modal-box">
-            <div class="flex flex-col gap-1">
-                <!-- Checkbox Options -->
-                <div>
-                    <input
-                        type="checkbox"
-                        id="append_timestamp_header"
-                        bind:checked={add_timestamp_header}
-                        class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
-                    />
-                    <label
-                        for="append_timestamp_header"
-                        class="p-2 inline-block"
-                    >
-                        Use timestamp as Markdown header
-                    </label>
-
-                    <input
-                        type="checkbox"
-                        id="append_timestamp_header_w_day_of_week"
-                        bind:checked={add_timestamp_header_w_day_of_week}
-                        class="p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500 inline-block"
-                    />
-                    <label
-                        for="append_timestamp_header_w_day_of_week"
-                        class="p-2 inline-block"
-                    >
-                        Include day of week
-                    </label>
-                </div>
-
-                <!-- Text Header Input -->
+    <div class="flex flex-col gap-3">
+        <!-- Checkbox Options -->
+        <div class="flex flex-wrap gap-4">
+            <label class="flex items-center gap-2">
                 <input
-                    type="text"
-                    placeholder="Markdown header for content (Optional)"
-                    bind:value={add_text_header}
-                    class="grow min-h-12 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
+                    type="checkbox"
+                    id="append_timestamp_header"
+                    bind:checked={add_timestamp_header}
+                    class="checkbox"
                 />
+                <span>Use timestamp as Markdown header</span>
+            </label>
 
-                <!-- Main Content Area -->
-                <textarea
-                    bind:value={add_text}
-                    class="grow min-h-48 h-full w-full p-2 bg-slate-100 text-gray-900 dark:bg-slate-900 dark:text-gray-100 shadow-lg rounded-lg border border-gray-200 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-500"
-                    placeholder="Content to {mode === 'auto'
-                        ? journal_config?.entry_add_text
-                        : mode}..."
-                >
-                </textarea>
-            </div>
+            <label class="flex items-center gap-2">
+                <input
+                    type="checkbox"
+                    id="append_timestamp_header_w_day_of_week"
+                    bind:checked={add_timestamp_header_w_day_of_week}
+                    class="checkbox"
+                />
+                <span>Include day of week</span>
+            </label>
+        </div>
 
-            <div class="modal-action flex justify-end gap-2 mt-4">
-                <button
-                    type="button"
-                    disabled={!has_changes}
-                    onclick={handle_save}
-                    class="btn btn-sm md:btn-md lg:btn-lg min-w-32 hover:variant-outline-success hover:preset-filled-success-500"
-                    class:preset-filled-primary-500={has_changes}
-                    class:preset-filled-surface-500={!has_changes}
-                >
-                    <Check class="mr-1" />
-                    Update
-                </button>
-                <button
-                    type="button"
-                    onclick={on_close}
-                    class="btn preset-tonal-surface border border-surface-500 hover:preset-filled-surface-500 transition"
-                >
-                    <X class="mr-1" />
-                    Cancel
-                </button>
-            </div>
+        <!-- Text Header Input -->
+        <input
+            type="text"
+            placeholder="Markdown header for content (Optional)"
+            bind:value={add_text_header}
+            class="input"
+        />
+
+        <!-- Main Content Area -->
+        <textarea
+            bind:value={add_text}
+            class="textarea min-h-48"
+            placeholder="Content to {mode === 'auto'
+                ? journal_config?.entry_add_text
+                : mode}..."
+        >
+        </textarea>
+
+        <div class="flex justify-end gap-2 mt-2">
+            <button
+                type="button"
+                disabled={!has_changes}
+                onclick={handle_save}
+                class="btn preset-filled-primary"
+                class:opacity-50={!has_changes}
+            >
+                <Check class="mr-1" />
+                Update
+            </button>
+            <button
+                type="button"
+                onclick={on_close}
+                class="btn preset-tonal-surface"
+            >
+                <X class="mr-1" />
+                Cancel
+            </button>
         </div>
     </div>
 </Modal>
diff --git a/src/routes/journals/ae_comp__modal_journal_entry_config.svelte b/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
index b9822dab..c39468d8 100644
--- a/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_entry_config.svelte
@@ -109,6 +109,7 @@
 <Modal
     bind:open={show}
     autoclose={false}
+    dismissable={false}
     placement="top-center"
     size="lg"
     class="relative flex flex-col mx-auto w-full bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 border border-orange-300 dark:border-orange-700 rounded-lg shadow-xl"
@@ -116,10 +117,13 @@
     footerClass="flex flex-row gap-2 items-center justify-center w-full bg-orange-100 dark:bg-orange-900 p-4 rounded-b-lg border-t border-orange-200 dark:border-orange-800"
 >
     {#snippet header()}
-        <h3 class="flex items-center gap-2 text-lg font-bold">
+        <h3 class="flex-1 flex items-center gap-2 text-lg font-bold">
             <Settings class="text-primary-500" />
             <span>Entry Config: {tmp_entry_obj.name || '--'}</span>
         </h3>
+        <button type="button" class="btn-icon btn-icon-sm preset-tonal-surface ml-2" onclick={() => (show = false)}>
+            <X size="1.1em" />
+        </button>
     {/snippet}
 
     <div class="space-y-6 py-2 h-[60vh] overflow-y-auto px-4">
@@ -130,8 +134,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'actions'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'actions')}
             >
                 <Zap size="1.1em" class="mr-1" /> Quick Actions
@@ -139,8 +143,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'meta'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'meta')}
             >
                 <Shapes size="1.1em" class="mr-1" /> Metadata
@@ -148,8 +152,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'security'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'security')}
             >
                 <ShieldCheck size="1.1em" class="mr-1" /> Status & Security
@@ -157,8 +161,8 @@
             <button
                 type="button"
                 class="btn btn-sm transition-all {tab === 'json'
-                    ? 'variant-filled-primary'
-                    : 'variant-soft-surface'}"
+                    ? 'preset-filled-primary'
+                    : 'preset-tonal-surface'}"
                 onclick={() => (tab = 'json')}
             >
                 <CodeXml size="1.1em" class="mr-1" /> JSON
@@ -170,7 +174,7 @@
                 <section class="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <button
                         type="button"
-                        class="btn variant-soft-secondary w-full"
+                        class="btn preset-tonal-secondary w-full"
                         onclick={() => {
                             show = false;
                             on_prepend?.();
@@ -180,7 +184,7 @@
                     </button>
                     <button
                         type="button"
-                        class="btn variant-soft-secondary w-full"
+                        class="btn preset-tonal-secondary w-full"
                         onclick={() => {
                             show = false;
                             on_append?.();
@@ -190,7 +194,7 @@
                     </button>
                     <button
                         type="button"
-                        class="btn variant-soft-surface w-full"
+                        class="btn preset-tonal-surface w-full"
                         onclick={() => {
                             show = false;
                             on_show_export?.();
@@ -200,7 +204,7 @@
                     </button>
                     <button
                         type="button"
-                        class="btn variant-soft-surface w-full"
+                        class="btn preset-tonal-surface w-full"
                         onclick={() => {
                             /* Clone logic here */ alert(
                                 'Clone not yet implemented in modal'
@@ -221,8 +225,8 @@
                                 type="button"
                                 class="btn btn-sm {tmp_entry_obj.category_code ===
                                 cat.code
-                                    ? 'variant-filled-primary'
-                                    : 'variant-soft-primary'}"
+                                    ? 'preset-filled-primary'
+                                    : 'preset-tonal-primary'}"
                                 onclick={() => {
                                     tmp_entry_obj.category_code = cat.code;
                                     handle_update_entry();
@@ -240,7 +244,7 @@
                 <label class="label">
                     <span class="text-sm font-bold opacity-70">Category</span>
                     <select
-                        class="select variant-form-material"
+                        class="select"
                         bind:value={tmp_entry_obj.category_code}
                         onchange={() => {
                             handle_update_entry();
@@ -263,7 +267,7 @@
                         <input
                             type="text"
                             bind:value={tmp_entry_obj.tags}
-                            class="input variant-form-material grow"
+                            class="input grow"
                             placeholder="meeting, urgent, ideas"
                             onchange={() => {
                                 handle_update_entry();
@@ -287,7 +291,7 @@
                                 handle_update_entry();
                                 on_save();
                             }}
-                            class="input variant-form-material"
+                            class="input"
                         />
                     </label>
                     <label class="label">
@@ -297,7 +301,7 @@
                         <div class="flex items-center gap-2">
                             <button
                                 type="button"
-                                class="btn-icon btn-icon-sm variant-soft-surface"
+                                class="btn-icon btn-icon-sm preset-tonal-surface"
                                 onclick={() => {
                                     tmp_entry_obj.sort =
                                         (tmp_entry_obj.sort ?? 0) - 1;
@@ -310,7 +314,7 @@
                             >
                             <button
                                 type="button"
-                                class="btn-icon btn-icon-sm variant-soft-surface"
+                                class="btn-icon btn-icon-sm preset-tonal-surface"
                                 onclick={() => {
                                     tmp_entry_obj.sort =
                                         (tmp_entry_obj.sort ?? 0) + 1;
@@ -402,7 +406,7 @@
                             <div class="flex items-center gap-2">
                                 <button
                                     type="button"
-                                    class="btn-icon btn-icon-sm variant-soft-surface"
+                                    class="btn-icon btn-icon-sm preset-tonal-surface"
                                     onclick={() => {
                                         tmp_entry_obj.sort =
                                             (tmp_entry_obj.sort ?? 0) - 1;
@@ -416,7 +420,7 @@
                                 >
                                 <button
                                     type="button"
-                                    class="btn-icon btn-icon-sm variant-soft-surface"
+                                    class="btn-icon btn-icon-sm preset-tonal-surface"
                                     onclick={() => {
                                         tmp_entry_obj.sort =
                                             (tmp_entry_obj.sort ?? 0) + 1;
@@ -466,7 +470,7 @@
                             </p>
                             <button
                                 type="button"
-                                class="btn btn-sm variant-filled-error w-full font-bold"
+                                class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 w-full font-bold"
                                 onclick={() => {
                                     show = false;
                                     on_force_reset?.();
@@ -481,7 +485,7 @@
                 <section class="pt-12">
                     <button
                         type="button"
-                        class="btn btn-sm variant-soft-error w-full"
+                        class="btn btn-sm preset-tonal-error w-full"
                         onclick={() => {
                             alert('Delete logic handled in parent component');
                         }}
@@ -505,7 +509,7 @@
     {#snippet footer()}
         <button
             type="button"
-            class="btn variant-filled-primary font-bold shadow-lg min-w-[120px]"
+            class="btn preset-filled-primary font-bold min-w-[120px]"
             onclick={() => (show = false)}
         >
             <Check size="1.2em" class="mr-2" />
diff --git a/src/routes/journals/ae_comp__modal_journal_export.svelte b/src/routes/journals/ae_comp__modal_journal_export.svelte
index 0dd1ce65..a0937979 100644
--- a/src/routes/journals/ae_comp__modal_journal_export.svelte
+++ b/src/routes/journals/ae_comp__modal_journal_export.svelte
@@ -145,7 +145,7 @@
                 {#each templates as template (template.id)}
                     <button
                         type="button"
-                        class="btn variant-ringed-surface flex flex-col gap-1 p-2 h-24 items-center justify-center border-2 text-center {selected_template_id ===
+                        class="btn preset-outlined-surface flex flex-col gap-1 p-2 h-24 items-center justify-center border-2 text-center {selected_template_id ===
                         template.id
                             ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
                             : 'opacity-60'}"
@@ -201,7 +201,7 @@
             <div class="flex gap-2">
                 <button
                     type="button"
-                    class="btn variant-soft-primary"
+                    class="btn preset-tonal-primary"
                     onclick={handle_copy}
                 >
                     <Copy class="mr-2" size="1.2em" /> Copy to Clipboard
diff --git a/src/routes/journals/ae_comp__obj_core_props.svelte b/src/routes/journals/ae_comp__obj_core_props.svelte
index ac765bce..14c25922 100644
--- a/src/routes/journals/ae_comp__obj_core_props.svelte
+++ b/src/routes/journals/ae_comp__obj_core_props.svelte
@@ -135,7 +135,7 @@
                 obj_sort = obj_sort ? obj_sort + 1 : 1;
                 // update_journal_entry();
             }}
-            class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
+            class="btn-icon btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
             title="Increment sort order of this journal entry"
         >
             <Plus strokeWidth="2.5" color="blue" />
@@ -154,7 +154,7 @@
                 obj_sort = obj_sort ? obj_sort - 1 : 0;
                 // update_journal_entry();
             }}
-            class="btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
+            class="btn-icon btn-icon-sm preset-tonal-tertiary transition hover:preset-filled-tertiary-500"
             title="Decrement sort order of this journal entry"
         >
             <Minus strokeWidth="2.5" color="blue" />
@@ -199,7 +199,7 @@
                     // update_journal_entry();
                 }}
                 class:hidden={!$ae_loc.edit_mode}
-                class="btn btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition *:hover:inline"
+                class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
                 title="Clear the archive on datetime for this journal entry"
             >
                 <X strokeWidth="2.5" color="red" />
@@ -220,7 +220,7 @@
                     // update_journal_entry();
                 }}
                 class:hidden={!$ae_loc.edit_mode}
-                class="btn btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition *:hover:inline"
+                class="btn-icon btn-icon-sm preset-tonal-warning hover:preset-filled-warning-500 transition"
                 title="Set the archive on datetime for this journal entry"
             >
                 <Clock strokeWidth="2.5" color="blue" />