mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add styles

Browse Source
This commit is contained in:
Kwaroran
2025-05-17 01:42:08 +09:00
parent 634de807ad
commit 0733554e4d
8 changed files with 1099 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/lib/UI/NewGUI/Button.svelte Normal file
View File

@@ -0,0 +1,59 @@
<script lang="ts">
import type { Snippet } from "svelte";
let {size='md',color, children}: {size?: 'xs'|'sm'|'md'|'lg'|'xl', color?:'primary'|'secondary'|'danger', children?:Snippet} = $props();
</script>
<!--
We can define button color using template literals,
but since tailwind doesn't support dynamic class names,
we need to use a workaround.
--->
{#if color == 'primary'}
{#if size == 'xs'}
<button type="button" class={`rounded-sm bg-primary-600 px-2 py-1 text-xs font-semibold text-neutral-0 shadow-xs hover:bg-primary-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600`}>
{@render children?.()}
</button>
{:else if size == 'sm'}
<button type="button" class={`rounded bg-primary-600 px-2 py-1 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600`}>
{@render children?.()}
</button>
{:else if size == 'md'}
<button type="button" class={`rounded-md bg-primary-600 px-2.5 py-1.5 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600`}>
{@render children?.()}
</button>
{:else if size == 'lg'}
<button type="button" class={`rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600`}>
{@render children?.()}
</button>
{:else if size == 'xl'}
<button type="button" class={`rounded-md bg-primary-600 px-3.5 py-2.5 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600`}>
{@render children?.()}
</button>
{/if}
{:else if color == 'danger'}
{#if size == 'xs'}
<button type="button" class={`rounded-sm bg-danger-600 px-2 py-1 text-xs font-semibold text-neutral-0 shadow-xs hover:bg-danger-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600`}>
{@render children?.()}
</button>
{:else if size == 'sm'}
<button type="button" class={`rounded bg-danger-600 px-2 py-1 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-danger-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600`}>
{@render children?.()}
</button>
{:else if size == 'md'}
<button type="button" class={`rounded-md bg-danger-600 px-2.5 py-1.5 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-danger-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600`}>
{@render children?.()}
</button>
{:else if size == 'lg'}
<button type="button" class={`rounded-md bg-danger-600 px-3 py-2 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-danger-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600`}>
{@render children?.()}
</button>
{:else if size == 'xl'}
<button type="button" class={`rounded-md bg-danger-600 px-3.5 py-2.5 text-sm font-semibold text-neutral-50 shadow-sm hover:bg-danger-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-danger-600`}>
{@render children?.()}
</button>
{/if}
{/if}