Add base styling and Button component

src/app.css

@@ -0,0 +1,34 @@
+:root {
+	--background-color: #1b1b20;
+	--font-family: Verdana, Geneva, Tahoma, sans-serif;
+
+	--primary-color: #2e3042;
+	--primary-accent-color: #263447;
+
+	--secondary-color: #dfdfe9;
+	--secondary-accent-color: #adadbb;
+
+	--danger-color: #be3329;
+	--danger-accent-color: #ddaeb2;
+	--danger-active-color: #b69092;
+}
+
+ body {
+	background-color: var(--background-color);
+	font-family: Verdana, Geneva, Tahoma, sans-serif;
+	color: white;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+button {
+	border: none;
+	background-color: transparent;
+}
+
+
+
+
+
+

src/lib/components/Button.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { colors } from '$lib/theme';
+
+	type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'danger';
+
+	export let variant: ButtonType;
+
+	function getStyles(buttonType: ButtonType) {
+		switch (buttonType) {
+			case 'primary':
+				return {
+					backgroundColor: colors.primaryColor,
+					color: colors.secondaryColor,
+					activeColor: colors.primaryAccentColor
+				};
+			case 'secondary':
+				return {
+					backgroundColor: colors.secondaryColor,
+					color: colors.primaryColor,
+					activeColor: colors.secondaryAccentColor
+				};
+			case 'tertiary':
+				return {
+					backgroundColor: 'transparent',
+					color: colors.secondaryColor,
+					activeColor: colors.primaryAccentColor
+				};
+			case 'danger':
+				return {
+					backgroundColor: colors.dangerAccentColor,
+					color: colors.dangerColor,
+					activeColor: colors.dangerActivecolor
+				};
+		}
+	}
+
+	const { backgroundColor, color, activeColor } = getStyles(variant);
+</script>
+
+<button
+	style:--color={color}
+	style:--background-color={backgroundColor}
+	style:--active={activeColor}
+	on:click
+>
+	<slot />
+</button>
+
+<style>
+	button {
+		border-style: none;
+		border-radius: 6px;
+		padding: 2px 10px 2px 10px;
+		font-family: var(--font-family);
+		height: 40px;
+		max-height: 40px;
+		font-weight: bold;
+		color: var(--color);
+		border: 1px solid;
+		background-color: var(--background-color);
+	}
+
+	button:hover {
+		cursor: pointer;
+	}
+
+	button:active {
+		background-color: var(--active);
+	}
+</style>

src/lib/theme.ts

@@ -0,0 +1,13 @@
+export const colors = {
+	backgroundColor: '#1b1b20',
+
+	primaryColor: '#2e3042',
+	primaryAccentColor: '#263447',
+
+	secondaryColor: '#dfdfe9',
+	secondaryAccentColor: ' #adadbb',
+
+	dangerColor: '#be3329',
+	dangerAccentColor: '#ddaeb2',
+	dangerActivecolor: '#b69092'
+};