Initial commit

src/components/ui/Button.tsx

@@ -0,0 +1,65 @@
+import styled, { css } from "styled-components";
+
+interface Props {
+    readonly contrast?: boolean;
+    readonly error?: boolean;
+};
+
+export const Button = styled.button<Props>`
+	z-index: 1;
+	padding: 8px;
+	font-size: 16px;
+	text-align: center;
+
+	transition: 0.2s ease opacity;
+	transition: 0.2s ease background-color;
+
+	background: var(--primary-background);
+    color: var(--foreground);
+
+	border-radius: 6px;
+	cursor: pointer;
+    border: none;
+
+	&:hover {
+		background: var(--secondary-header);
+	}
+
+    &:disabled {
+        background: var(--primary-background);
+    }
+
+    &:active {
+        background: var(--secondary-background);
+    }
+
+    ${props => props.contrast && css`
+        padding: 4px 8px;
+        background: var(--secondary-header);
+
+        &:hover {
+            background: var(--primary-header);
+        }
+
+        &:disabled {
+            background: var(--secondary-header);
+        }
+
+        &:active {
+            background: var(--secondary-background);
+        }
+    `}
+
+    ${props => props.error && css`
+        color: white;
+        background: var(--error);
+
+        &:hover {
+            filter: brightness(1.2)
+        }
+
+        &:disabled {
+            background: var(--error);
+        }
+    `}
+`;