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

agent: components — restyle Card, Toggle, SegmentedButton with brand tokens

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
jake
2026-03-21 10:44:49 +00:00
parent f1a9fe8383
commit 4bbe9a0a84
3 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Card.svelte
View File

@@ -2,6 +2,6 @@
let { children, classes = "" } = $props(); let { children, classes = "" } = $props();
</script> </script>
<div class="bg-bg-card border border-border rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}"> <div class="bg-bg-card border border-border-subtle rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}">
{@render children()} {@render children()}
</div> </div>

3
src/lib/components/SegmentedButton.svelte
View File

@@ -8,8 +8,9 @@
class="rounded-lg font-medium class="rounded-lg font-medium
{size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'} {size === 'small' ? 'px-2.5 py-1 text-[11px]' : 'px-3.5 py-[6px] text-[12px]'}
{value === option {value === option
? 'bg-accent text-white shadow-[0_1px_4px_rgba(232,168,124,0.3)]' ? 'bg-accent text-bg shadow-[0_1px_4px_rgba(232,168,124,0.3)]'
: 'text-text-secondary hover:text-text hover:bg-hover'}" : 'text-text-secondary hover:text-text hover:bg-hover'}"
style="transition-duration: var(--duration-ui)"
onclick={() => value = option} onclick={() => value = option}
> >
{option} {option}

8
src/lib/components/Toggle.svelte
View File

@@ -5,8 +5,9 @@
<div class="flex items-start gap-3 py-2.5"> <div class="flex items-start gap-3 py-2.5">
<button <button
class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0 class="relative mt-0.5 w-[38px] min-w-[38px] h-[22px] rounded-full flex-shrink-0
{checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-border'} {checked ? 'bg-accent shadow-[0_0_8px_rgba(232,168,124,0.25)]' : 'bg-bg-elevated'}
active:scale-95 transition-all duration-200" active:scale-95"
style="transition-duration: var(--duration-ui)"
onclick={() => checked = !checked} onclick={() => checked = !checked}
role="switch" role="switch"
aria-checked={checked} aria-checked={checked}
@@ -14,8 +15,9 @@
> >
<span <span
class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm class="absolute top-[3px] left-[3px] w-4 h-4 rounded-full bg-white shadow-sm
transition-transform duration-200 ease-[cubic-bezier(0.34,1.56,0.64,1)] ease-[cubic-bezier(0.34,1.56,0.64,1)]
{checked ? 'translate-x-[16px]' : 'translate-x-0'}" {checked ? 'translate-x-[16px]' : 'translate-x-0'}"
style="transition: transform var(--duration-ui) cubic-bezier(0.34, 1.56, 0.64, 1)"
></span> ></span>
</button> </button>
<div class="flex-1 min-w-0"> <div class="flex-1 min-w-0">