gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-25 10:33:21 +03:00
Code Issues Packages Projects Releases Wiki Activity

add purple button

Browse Source
This commit is contained in:
Nikita Galaiko 2023-04-21 08:35:20 +02:00
parent 59c7df620b
commit 6e1c827ecf
2 changed files with 90 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
src/lib/components/Button/Button.stories.svelte
View File

@ -125,6 +125,42 @@
</div>
</Story>
<Story name="Purple Button">
<div class="flex gap-2">
{#each widths as width}
{#each heights as height}
<div class="flex flex-col gap-2">
{#each [true, false] as filled}
{#each [true, false] as outlined}
{#each content as [icon, label]}
<div class="flex gap-2">
{#each [false, true] as loading}
{#each [false, true] as disabled}
<Button
role="purple"
{filled}
{disabled}
{outlined}
{height}
{width}
{icon}
{loading}
on:click={() => alert('Clicked!')}
>
{label}
</Button>
{/each}
{/each}
</div>
{/each}
{/each}
{/each}
</div>
{/each}
{/each}
</div>
</Story>
<Story name="Basic Link">
<div class="flex gap-2">
{#each widths as width}
@ -235,3 +271,40 @@
{/each}
</div>
</Story>
<Story name="Puple Link">
<div class="flex gap-2">
{#each widths as width}
{#each heights as height}
<div class="flex flex-col gap-2">
{#each [true, false] as filled}
{#each [true, false] as outlined}
{#each content as [icon, label]}
<div class="flex gap-2">
{#each [false, true] as loading}
{#each [false, true] as disabled}
<Button
href="https://gitbutler.com"
target="_blank"
role="purple"
{filled}
{disabled}
{outlined}
{height}
{width}
{icon}
{loading}
>
{label}
</Button>
{/each}
{/each}
</div>
{/each}
{/each}
{/each}
</div>
{/each}
{/each}
</div>
</Story>

18
src/lib/components/Button/Button.svelte
View File

@ -4,7 +4,7 @@
export let target: string | undefined = undefined;
export let rel: string | undefined = undefined;
export let role: 'basic' | 'primary' | 'destructive' = 'basic';
export let role: 'basic' | 'primary' | 'destructive' | 'purple' = 'basic';
export let filled = true;
export let outlined = false;
export let disabled = false;
@ -148,6 +148,22 @@
@apply bg-[#C91C1C];
}
.purple {
@apply text-[#5852A0];
}
.purple.outlined {
@apply border-[#524C93];
}
.purple.outlined:hover {
@apply bg-[#524C93]/20;
}
.purple.filled {
@apply bg-[#5852A0];
}
.purple.filled:hover {
@apply bg-[#423E7A];
}
.disabled {
@apply pointer-events-none text-zinc-500;
}