From 052cc1a5a4668d7cb17fb273a022aa5b820d1faa Mon Sep 17 00:00:00 2001
From: Sam Nystrom <sam@samnystrom.dev>
Date: Wed, 13 Mar 2024 05:03:22 +0000
Subject: refactor: move styles into separate components

---
 src/components/Button.css | 54 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/Button.css

(limited to 'src/components/Button.css')

diff --git a/src/components/Button.css b/src/components/Button.css
new file mode 100644
index 0000000..210d131
--- /dev/null
+++ b/src/components/Button.css
@@ -0,0 +1,54 @@
+@scope (.__Button) {
+	:scope {
+		width: 100%;
+		min-width: fit-content;
+		height: 3rem;
+		padding: 0 1rem;
+
+		/* Necessary for <a> */
+		display: flex;
+		align-items: center;
+
+		font-size: 1rem;
+		text-align: start;
+		text-decoration: none;
+
+		cursor: pointer;
+
+		border: 1px solid var(--button-border, var(--button-base));
+		background-color: var(--button-base);
+		color: var(--button-text);
+
+		&:hover {
+			background-color: var(--button-hover);
+			color: var(--button-hover-text, var(--button-text));
+		}
+
+		&:focus {
+			outline: 2px solid var(--primary);
+			border-color: var(--base);
+			background-color: var(--button-focus, var(--button-base));
+			color: var(--button-focus-text, var(--button-text));
+		}
+
+		&.primary {
+			--button-base: var(--primary);
+			--button-text: var(--text);
+			--button-hover: color-mix(in srgb, var(--text) 10%, var(--button-base));
+		}
+		&.outline {
+			--button-base: transparent;
+			--button-text: var(--primary);
+			--button-border: var(--primary);
+			--button-hover: var(--primary);
+			--button-hover-text: var(--text);
+			--button-focus: var(--button-hover);
+			--button-focus-text: var(--button-hover-text);
+		}
+		&.ghost {
+			--button-base: transprent;
+			--button-text: var(--text);
+			--button-hover: var(--surface);
+		}
+	}
+}
\ No newline at end of file
-- 
cgit v1.2.3