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-sidebar: #13120f;
--color-nav-active: #201e1a; --color-nav-active: #201e1a;
--color-hover: #1e1c18; --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 === */ /* === Light theme overrides === */
html.light { html.light {
--color-bg: #faf8f5; --color-bg: #faf8f5;

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

@@ -560,14 +560,14 @@
{#if templates.length > 0} {#if templates.length > 0}
<div class="relative"> <div class="relative">
<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={() => { showTemplateMenu = !showTemplateMenu; showExportMenu = false; }} onclick={() => { showTemplateMenu = !showTemplateMenu; showExportMenu = false; }}
>Template</button> >Template</button>
{#if showTemplateMenu} {#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]"> <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} {#each templates as template}
<button <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' : ''}" {activeTemplate === template.name ? 'text-accent' : ''}"
onclick={() => applyTemplate(template)} onclick={() => applyTemplate(template)}
>{template.name}</button> >{template.name}</button>
@@ -577,35 +577,35 @@
</div> </div>
{/if} {/if}
<button <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} onclick={manualExtractTasks}
disabled={aiProcessing || !transcript.trim()} disabled={aiProcessing || !transcript.trim()}
>{aiProcessing ? "Extracting..." : "Extract Tasks"}</button> >{aiProcessing ? "Extracting..." : "Extract Tasks"}</button>
<span class="w-px h-4 bg-border-subtle flex-shrink-0"></span> <span class="w-px h-4 bg-border-subtle flex-shrink-0"></span>
<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
{!transcript.trim() ? 'opacity-40 cursor-default' : ''}" {!transcript.trim() ? 'opacity-40 cursor-default' : ''}"
onclick={saveTypedText} onclick={saveTypedText}
disabled={!transcript.trim()} disabled={!transcript.trim()}
>Save</button> >Save</button>
<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} onclick={copyAll}
>Copy</button> >Copy</button>
<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} onclick={clearTranscript}
>Clear</button> >Clear</button>
<div class="relative flex-shrink-0"> <div class="relative flex-shrink-0">
<button <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; }} onclick={() => { showExportMenu = !showExportMenu; showTemplateMenu = false; }}
>Export</button> >Export</button>
{#if showExportMenu} {#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]"> <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]} {#each [["txt", "Plain Text"], ["md", "Markdown"], ["csv", "CSV"], ["html", "HTML"], ["srt", "SRT Subtitles"], ["vtt", "WebVTT"]] as [fmt, label]}
<button <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)} onclick={() => handleExport(fmt)}
>{label}</button> >{label}</button>
{/each} {/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"> <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
<!-- Title --> <!-- 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 --> <!-- Drop zone -->
<div class="px-7 pb-3"> <div class="px-7 pb-3">
@@ -168,7 +168,7 @@
<!-- Browse buttons + progress --> <!-- Browse buttons + progress -->
<div class="flex items-center gap-2 px-7 pb-3"> <div class="flex items-center gap-2 px-7 pb-3">
<button <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" shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97] transition-all duration-150"
onclick={handleBrowse} onclick={handleBrowse}
disabled={transcribing} disabled={transcribing}
@@ -220,17 +220,17 @@
<!-- Bottom actions --> <!-- Bottom actions -->
<div class="flex gap-0.5 px-7 pb-4"> <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"> <div class="relative">
<button <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} onclick={() => showExportMenu = !showExportMenu}
>Export</button> >Export</button>
{#if showExportMenu} {#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]"> <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]} {#each [["txt", "Plain Text"], ["md", "Markdown"], ["srt", "SRT Subtitles"], ["vtt", "WebVTT"]] as [fmt, label]}
<button <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)} onclick={() => handleExport(fmt)}
>{label}</button> >{label}</button>
{/each} {/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"> <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
<!-- Header --> <!-- Header -->
<div class="flex items-center gap-4 px-7 pt-6 pb-4"> <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> <span class="text-[11px] text-text-tertiary mt-1">{history.length} saved</span>
<div class="flex-1"></div> <div class="flex-1"></div>
{#if history.length > 0} {#if history.length > 0}
<button <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} onclick={clearAll}
> >
Clear All 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"> <div class="flex flex-col h-full overflow-y-auto animate-fade-in">
<!-- Header --> <!-- Header -->
<div class="flex items-center gap-4 px-7 pt-6 pb-2"> <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"} {tab === "Profiles" ? "Profiles" : "Templates"}
</h2> </h2>
<div class="flex-1"></div> <div class="flex-1"></div>
<button <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" shadow-[0_2px_8px_rgba(232,168,124,0.2)] active:scale-[0.97] transition-all duration-150"
onclick={() => showNewDialog = true} onclick={() => showNewDialog = true}
> >
@@ -158,7 +158,7 @@
</span> </span>
<div class="flex-1"></div> <div class="flex-1"></div>
<button <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)} onclick={() => deleteProfile(i)}
>Delete</button> >Delete</button>
</div> </div>
@@ -216,7 +216,7 @@
</span> </span>
<div class="flex-1"></div> <div class="flex-1"></div>
<button <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)} onclick={() => deleteTemplate(i)}
>Delete</button> >Delete</button>
</div> </div>

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

@@ -178,7 +178,7 @@
</div> </div>
<div class="flex-1"></div> <div class="flex-1"></div>
<button <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} onclick={popOutTasks}
aria-label="Pop out task window" aria-label="Pop out task window"
> >
@@ -234,7 +234,7 @@
<div class="flex items-center gap-1 px-7 pb-3"> <div class="flex items-center gap-1 px-7 pb-3">
{#each buckets as bucket} {#each buckets as bucket}
<button <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 {activeBucket === bucket.id
? 'bg-nav-active text-text font-medium' ? 'bg-nav-active text-text font-medium'
: 'text-text-secondary hover:bg-hover hover:text-text'}" : 'text-text-secondary hover:bg-hover hover:text-text'}"