jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(kon): add design tokens — radius scale, title size, button component classes

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-17 02:17:25 +00:00
parent b9178f8117
commit 8b34fed606
6 changed files with 33 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app.css
View File

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

16
src/lib/pages/DictationPage.svelte
View File

@@ -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}

10
src/lib/pages/FilesPage.svelte
View File

@@ -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}

4
src/lib/pages/HistoryPage.svelte
View File

@@ -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

8
src/lib/pages/ProfilesPage.svelte
View File

@@ -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>

4
src/lib/pages/TasksPage.svelte
View File

@@ -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'}"