From 6e1c827ecfa94189b362ea89ae2b15d0781ee6bf Mon Sep 17 00:00:00 2001
From: Nikita Galaiko <nikita@galaiko.rocks>
Date: Fri, 21 Apr 2023 08:35:20 +0200
Subject: [PATCH] add purple button

---
 .../components/Button/Button.stories.svelte   | 73 +++++++++++++++++++
 src/lib/components/Button/Button.svelte       | 18 ++++-
 2 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Button/Button.stories.svelte b/src/lib/components/Button/Button.stories.svelte
index cf697983c..822b7412e 100644
--- a/src/lib/components/Button/Button.stories.svelte
+++ b/src/lib/components/Button/Button.stories.svelte
@@ -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>
diff --git a/src/lib/components/Button/Button.svelte b/src/lib/components/Button/Button.svelte
index a73cffd78..18c387a8a 100644
--- a/src/lib/components/Button/Button.svelte
+++ b/src/lib/components/Button/Button.svelte
@@ -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;
 	}