From 8b34fed6064633080dc8a007f4683c5ee39ffaf3 Mon Sep 17 00:00:00 2001
From: jake <jakeadriansames@gmail.com>
Date: Tue, 17 Mar 2026 02:17:25 +0000
Subject: [PATCH] =?UTF-8?q?refactor(kon):=20add=20design=20tokens=20?=
 =?UTF-8?q?=E2=80=94=20radius=20scale,=20title=20size,=20button=20componen?=
 =?UTF-8?q?t=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app.css                        | 12 ++++++++++++
 src/lib/pages/DictationPage.svelte | 16 ++++++++--------
 src/lib/pages/FilesPage.svelte     | 10 +++++-----
 src/lib/pages/HistoryPage.svelte   |  4 ++--
 src/lib/pages/ProfilesPage.svelte  |  8 ++++----
 src/lib/pages/TasksPage.svelte     |  4 ++--
 6 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/src/app.css b/src/app.css
index 16cf2bc..3f078e1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -31,8 +31,20 @@
   --color-sidebar: #13120f;
   --color-nav-active: #201e1a;
   --color-hover: #1e1c18;
+
+  /* === Layout Tokens === */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --title-size: 26px;
 }
 
+/* === Button Component Classes === */
+.btn-sm { @apply px-2.5 py-1 text-[11px]; }
+.btn-md { @apply px-3 py-1.5 text-[12px]; }
+.btn-lg { @apply px-4 py-2 text-[13px]; }
+
 /* === Light theme overrides === */
 html.light {
   --color-bg: #faf8f5;
diff --git a/src/lib/pages/DictationPage.svelte b/src/lib/pages/DictationPage.svelte
index 1497fc4..110ea9e 100644
--- a/src/lib/pages/DictationPage.svelte
+++ b/src/lib/pages/DictationPage.svelte
@@ -560,14 +560,14 @@
         {#if templates.length > 0}
           <div class="relative">
             <button
-              class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
+              class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
               onclick={() => { showTemplateMenu = !showTemplateMenu; showExportMenu = false; }}
             >Template</button>
             {#if showTemplateMenu}
               <div class="absolute right-0 top-full mt-1 bg-bg-card border border-border rounded-lg shadow-lg py-1 z-10 animate-fade-in min-w-[160px]">
                 {#each templates as template}
                   <button
-                    class="w-full text-left px-3 py-1.5 text-[12px] text-text-secondary hover:bg-hover hover:text-text
+                    class="w-full text-left btn-md text-text-secondary hover:bg-hover hover:text-text
                       {activeTemplate === template.name ? 'text-accent' : ''}"
                     onclick={() => applyTemplate(template)}
                   >{template.name}</button>
@@ -577,35 +577,35 @@
           </div>
         {/if}
         <button
-          class="px-3 py-1.5 rounded-lg text-[12px] flex-shrink-0 whitespace-nowrap {aiProcessing ? 'text-warning' : 'text-accent hover:bg-accent/10 hover:text-accent font-medium'}"
+          class="btn-md rounded-lg flex-shrink-0 whitespace-nowrap {aiProcessing ? 'text-warning' : 'text-accent hover:bg-accent/10 hover:text-accent font-medium'}"
           onclick={manualExtractTasks}
           disabled={aiProcessing || !transcript.trim()}
         >{aiProcessing ? "Extracting..." : "Extract Tasks"}</button>
         <span class="w-px h-4 bg-border-subtle flex-shrink-0"></span>
         <button
-          class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap
+          class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap
             {!transcript.trim() ? 'opacity-40 cursor-default' : ''}"
           onclick={saveTypedText}
           disabled={!transcript.trim()}
         >Save</button>
         <button
-          class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
+          class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
           onclick={copyAll}
         >Copy</button>
         <button
-          class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
+          class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text flex-shrink-0 whitespace-nowrap"
           onclick={clearTranscript}
         >Clear</button>
         <div class="relative flex-shrink-0">
           <button
-            class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text whitespace-nowrap"
+            class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text whitespace-nowrap"
             onclick={() => { showExportMenu = !showExportMenu; showTemplateMenu = false; }}
           >Export</button>
           {#if showExportMenu}
             <div class="absolute right-0 top-full mt-1 bg-bg-card border border-border rounded-lg shadow-lg py-1 z-10 animate-fade-in min-w-[120px]">
               {#each [["txt", "Plain Text"], ["md", "Markdown"], ["csv", "CSV"], ["html", "HTML"], ["srt", "SRT Subtitles"], ["vtt", "WebVTT"]] as [fmt, label]}
                 <button
-                  class="w-full text-left px-3 py-1.5 text-[12px] text-text-secondary hover:bg-hover hover:text-text"
+                  class="w-full text-left btn-md text-text-secondary hover:bg-hover hover:text-text"
                   onclick={() => handleExport(fmt)}
                 >{label}</button>
               {/each}
diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index 8881a65..922a9b2 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -137,7 +137,7 @@
 
 <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
   <!-- Title -->
-  <h2 class="font-display text-[24px] italic text-text px-7 pt-6 pb-4">File Transcription</h2>
+  <h2 class="font-display text-[26px] italic text-text px-7 pt-6 pb-4">File Transcription</h2>
 
   <!-- Drop zone -->
   <div class="px-7 pb-3">
@@ -168,7 +168,7 @@
   <!-- Browse buttons + progress -->
   <div class="flex items-center gap-2 px-7 pb-3">
     <button
-      class="px-4 py-2 rounded-lg text-[13px] font-medium text-white bg-accent hover:bg-accent-hover
+      class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
              shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97] transition-all duration-150"
       onclick={handleBrowse}
       disabled={transcribing}
@@ -220,17 +220,17 @@
 
   <!-- Bottom actions -->
   <div class="flex gap-0.5 px-7 pb-4">
-    <button class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text" onclick={copyAll}>Copy</button>
+    <button class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text" onclick={copyAll}>Copy</button>
     <div class="relative">
       <button
-        class="px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text"
+        class="btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text"
         onclick={() => showExportMenu = !showExportMenu}
       >Export</button>
       {#if showExportMenu}
         <div class="absolute left-0 bottom-full mb-1 bg-bg-card border border-border rounded-lg shadow-lg py-1 z-10 animate-fade-in min-w-[120px]">
           {#each [["txt", "Plain Text"], ["md", "Markdown"], ["srt", "SRT Subtitles"], ["vtt", "WebVTT"]] as [fmt, label]}
             <button
-              class="w-full text-left px-3 py-1.5 text-[12px] text-text-secondary hover:bg-hover hover:text-text"
+              class="w-full text-left btn-md text-text-secondary hover:bg-hover hover:text-text"
               onclick={() => handleExport(fmt)}
             >{label}</button>
           {/each}
diff --git a/src/lib/pages/HistoryPage.svelte b/src/lib/pages/HistoryPage.svelte
index 35c0b68..5ee93b5 100644
--- a/src/lib/pages/HistoryPage.svelte
+++ b/src/lib/pages/HistoryPage.svelte
@@ -142,12 +142,12 @@
 <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
   <!-- Header -->
   <div class="flex items-center gap-4 px-7 pt-6 pb-4">
-    <h2 class="font-display text-[24px] italic text-text">History</h2>
+    <h2 class="font-display text-[26px] italic text-text">History</h2>
     <span class="text-[11px] text-text-tertiary mt-1">{history.length} saved</span>
     <div class="flex-1"></div>
     {#if history.length > 0}
       <button
-        class="px-3 py-1.5 rounded-lg text-[12px] text-text-tertiary hover:text-danger hover:bg-hover"
+        class="btn-md rounded-lg text-text-tertiary hover:text-danger hover:bg-hover"
         onclick={clearAll}
       >
         Clear All
diff --git a/src/lib/pages/ProfilesPage.svelte b/src/lib/pages/ProfilesPage.svelte
index 5961d44..fd7872f 100644
--- a/src/lib/pages/ProfilesPage.svelte
+++ b/src/lib/pages/ProfilesPage.svelte
@@ -65,12 +65,12 @@
 <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
   <!-- Header -->
   <div class="flex items-center gap-4 px-7 pt-6 pb-2">
-    <h2 class="font-display text-[24px] italic text-text">
+    <h2 class="font-display text-[26px] italic text-text">
       {tab === "Profiles" ? "Profiles" : "Templates"}
     </h2>
     <div class="flex-1"></div>
     <button
-      class="px-4 py-2 rounded-lg text-[13px] font-medium text-white bg-accent hover:bg-accent-hover
+      class="btn-lg rounded-lg font-medium text-white bg-accent hover:bg-accent-hover
              shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97] transition-all duration-150"
       onclick={() => showNewDialog = true}
     >
@@ -158,7 +158,7 @@
                 </span>
                 <div class="flex-1"></div>
                 <button
-                  class="px-2.5 py-1 rounded-md text-[11px] text-text-tertiary hover:text-danger hover:bg-hover"
+                  class="btn-sm rounded-md text-text-tertiary hover:text-danger hover:bg-hover"
                   onclick={() => deleteProfile(i)}
                 >Delete</button>
               </div>
@@ -216,7 +216,7 @@
                 </span>
                 <div class="flex-1"></div>
                 <button
-                  class="px-2.5 py-1 rounded-md text-[11px] text-text-tertiary hover:text-danger hover:bg-hover"
+                  class="btn-sm rounded-md text-text-tertiary hover:text-danger hover:bg-hover"
                   onclick={() => deleteTemplate(i)}
                 >Delete</button>
               </div>
diff --git a/src/lib/pages/TasksPage.svelte b/src/lib/pages/TasksPage.svelte
index 3bb7cb6..ec6a69f 100644
--- a/src/lib/pages/TasksPage.svelte
+++ b/src/lib/pages/TasksPage.svelte
@@ -178,7 +178,7 @@
     </div>
     <div class="flex-1"></div>
     <button
-      class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[12px] text-text-secondary hover:bg-hover hover:text-text"
+      class="flex items-center gap-1.5 btn-md rounded-lg text-text-secondary hover:bg-hover hover:text-text"
       onclick={popOutTasks}
       aria-label="Pop out task window"
     >
@@ -234,7 +234,7 @@
   <div class="flex items-center gap-1 px-7 pb-3">
     {#each buckets as bucket}
       <button
-        class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[12px] transition-colors
+        class="flex items-center gap-1.5 btn-md rounded-lg transition-colors
           {activeBucket === bucket.id
             ? 'bg-nav-active text-text font-medium'
             : 'text-text-secondary hover:bg-hover hover:text-text'}"