From a90f5556982eb2698b7bfaf720f2cd76b4c41225 Mon Sep 17 00:00:00 2001
From: madkarmaa <madkarma99@gmail.com>
Date: Sat, 12 Apr 2025 09:06:08 +0200
Subject: [PATCH] feat: add styles for `<Button />`

---
 src/app.css                            | 23 +++++++++
 src/lib/components/atoms/Button.svelte | 64 ++++++++++++++++++++++++--
 2 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index 0a86835..77c3554 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,6 +2,29 @@
 
 :root {
     --font-family: 'Manrope', sans-serif;
+    --text-one: hsl(206, 100%, 94%);
+    --surface-one: hsl(206, 100%, 94%);
+    --primary: hsl(206, 100%, 81%);
+    --secondary: hsl(208, 75%, 82%);
+    --tertiary: hsla(205, 91%, 69%, 0.15);
+    --background-one: hsl(252, 10%, 11%);
+    --surface-two: hsl(252, 10%, 11%);
+    --surface-three: hsl(210, 14%, 17%);
+    --surface-four: hsl(212, 19%, 19%);
+    --text-two: hsl(212, 19%, 19%);
+    --border: hsl(221, 17%, 26%);
+    --surface-five: hsl(221, 17%, 26%);
+    --text-three: hsl(226, 48%, 18%);
+    --text-four: hsl(208, 30%, 75%);
+    --surface-six: hsl(208, 30%, 75%);
+    --surface-seven: hsl(230, 9%, 13%);
+    --surface-eight: hsl(240, 9%, 13.5%);
+    --surface-nine: hsl(230, 9.5%, 17.5%);
+    --red-one: hsl(333, 84%, 62%);
+
+    --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --drop-shadow-one: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
+        0px 2px 4px -1px rgba(0, 0, 0, 0.2);
 }
 
 * {
diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte
index d666850..85ab78d 100644
--- a/src/lib/components/atoms/Button.svelte
+++ b/src/lib/components/atoms/Button.svelte
@@ -16,8 +16,8 @@
 	type ButtonProps = Prettify<
 		BaseProps & {
 			onclick: () => void;
-			href: never;
-			target: never;
+			href?: never;
+			target?: never;
 		}
 	>;
 
@@ -25,7 +25,7 @@
 		BaseProps & {
 			href: string;
 			target?: `${SpecialTargetValues}` | SpecialTargetValues;
-			onclick: never;
+			onclick?: never;
 		}
 	>;
 
@@ -46,17 +46,71 @@
 </script>
 
 {#if href}
-	<a {href} {target} class:type aria-label={label}>
+	<a {href} {target} class={`button-${type}`} aria-label={label}>
 		{#if Icon}
 			<Icon size={iconSize} color={iconColor} />
 		{/if}
 		{@render children?.()}
 	</a>
 {:else}
-	<button {onclick} class:type aria-label={label}>
+	<button {onclick} class={`button-${type}`} aria-label={label}>
 		{#if Icon}
 			<Icon size={iconSize} color={iconColor} />
 		{/if}
 		{@render children?.()}
 	</button>
 {/if}
+
+<style>
+	button {
+		border: none;
+		background-color: transparent;
+		padding: 0;
+		margin: 0;
+	}
+
+	a,
+	button {
+		min-width: max-content;
+		font-size: 0.95rem;
+		text-decoration: none;
+		color: var(--text-one);
+		font-weight: 600;
+		border: none;
+		border-radius: 100px;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		gap: 0.5rem;
+		cursor: pointer;
+		transition:
+			transform 0.4s var(--bezier-one),
+			filter 0.4s var(--bezier-one);
+		user-select: none;
+	}
+
+	.button-filled {
+		background-color: var(--primary);
+		color: var(--text-three);
+	}
+	.button-tonal {
+		background-color: var(--surface-four);
+	}
+
+	.button-filled,
+	.button-tonal {
+		padding: 16px 24px;
+	}
+
+	.button-text {
+		background-color: transparent;
+		color: var(--primary);
+		font-weight: 500;
+		letter-spacing: 0.01rem;
+	}
+
+	button:hover,
+	a:hover {
+		filter: brightness(85%);
+	}
+</style>