INIT

src/components/Button.vue

@@ -0,0 +1,71 @@
+<template>
+<button class="Button" :class="[color, display]">
+  <slot />
+</button>
+</template>
+
+<script setup lang="ts">
+type Props = {
+  color ?: 'success' | 'error' | 'neutral' | 'inherit'
+  display ?: 'elevated' | 'text' | 'icon'
+}
+
+const { color = 'success', display = 'elevated' } = defineProps<Props>()
+</script>
+
+<style scoped>
+.Button {
+  all: unset;
+  --btn-clr: var(--clr-black);
+  --btn-clr-contrast: var(--clr-white);
+  --btn-text: var(--clr-black);
+  --btn-bg: var(--clr-white);
+
+  font-family: 'Roboto Condensed', sans-serif;
+  cursor: pointer;
+  padding: var(--padding-xs) var(--padding-default);
+  border-radius: var(--radius-default);
+  font-weight: 400;
+
+  color: var(--btn-text);
+  background-color: var(--btn-bg);
+
+  &.success {
+    --btn-clr: var(--clr-success);
+    --btn-clr-contrast: var(--clr-success-contrast);
+  }
+
+  &.error {
+    --btn-clr: var(--clr-error);
+    --btn-clr-contrast: var(--clr-error-contrast);
+  }
+
+  &.neutral {
+    --btn-clr: var(--clr-neutral);
+    --btn-clr-contrast: var(--clr-neutral-contrast);
+  }
+
+  &.inherit {
+    --btn-clr: inherit;
+    --btn-clr-contrast: inherit;
+  }
+
+  &.elevated {
+    --btn-bg: var(--btn-clr);
+    --btn-text: var(--btn-clr-contrast);
+    box-shadow: var(--box-shadow-z2);
+  }
+
+  &.text {
+    --btn-bg: transparent;
+    --btn-text: var(--btn-clr);
+  }
+
+  &.icon {
+    --btn-bg: transparent;
+    --btn-text: var(--btn-clr);
+    padding: var(--padding-xs);
+    border-radius: 50%;
+  }
+}
+</style>