From 6de1fa0878cef0bb2a972ebf1f771977d5b3c078 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 20 Jun 2023 09:05:26 -0700
Subject: [PATCH] Large and outlined buttons (#69)

---
 docs/components/button.md      | 12 ++++++++++++
 lib/assets/styles/classes.scss | 17 +++++++++++++++++
 lib/components/base/Button.vue | 12 ++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/docs/components/button.md b/docs/components/button.md
index 8e3a12c5..5fdd5581 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -9,6 +9,12 @@
 <Button color="danger">Danger</Button>
 <Button><CheckIcon /> With Icon</Button>
 <Button iconOnly><XIcon /></Button>
+<Button large>Large button</Button>
+<Button color="primary" large>Discover mods</Button>
+<Button color="danger" large outline>Be warned</Button>
+<Button large outline>Sign up</Button>
+<Button><HeartIcon /> Follow project</Button>
+<Button outline color="danger"><TrashIcon /> Delete project</Button>
 </DemoContainer>
 
 ```vue
@@ -20,4 +26,10 @@
 <Button color="danger">Danger</Button>
 <Button><CheckIcon /> With Icon</Button>
 <Button iconOnly><XIcon /></Button>
+<Button large>Large button</Button>
+<Button color="primary" large>Discover mods</Button>
+<Button color="danger" large outline>Be warned</Button>
+<Button large outline>Sign up</Button>
+<Button><HeartIcon /> Follow project</Button>
+<Button outline color="danger"><TrashIcon /> Delete project</Button>
 ```
diff --git a/lib/assets/styles/classes.scss b/lib/assets/styles/classes.scss
index c9f07fc4..025c4459 100644
--- a/lib/assets/styles/classes.scss
+++ b/lib/assets/styles/classes.scss
@@ -304,6 +304,18 @@ a,
   --background-color: var(--color-button-bg);
   --shadow: var(--shadow-inset-sm), 0 0 0 0 transparent;
 
+  &.btn-outline {
+    --background-color: var(--color-contrast);
+    --text-color: var(--color-raised-bg);
+    box-sizing: border-box;
+
+    background-color: transparent;
+    border: 2px solid var(--background-color);
+    color: var(--background-color);
+
+    padding-block: calc(var(--gap-sm) - 2px);
+  }
+
   &.btn-raised {
     --shadow: var(--shadow-inset-sm), var(--shadow-raised);
     --background-color: var(--color-raised-bg);
@@ -328,6 +340,11 @@ a,
     --background-color: var(--color-orange);
   }
 
+  &.btn-large {
+    font-weight: 700;
+    min-height: 2.5rem;
+  }
+
   box-sizing: border-box;
 
   color: var(--text-color);
diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue
index 51b9b794..8bddc301 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -24,6 +24,14 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  large: {
+    type: Boolean,
+    default: false,
+  },
+  outline: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const accentedButton = computed(() => ['danger', 'primary'].includes(props.color))
@@ -35,11 +43,13 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
     class="btn"
     :class="{
       'icon-only': props.iconOnly,
+      'btn-large': props.large,
       'btn-raised': color === 'raised',
       'btn-danger': color === 'danger',
       'btn-primary': color === 'primary',
       'btn-secondary': color === 'secondary',
       'btn-highlight': color === 'highlight',
+      'btn-outline': props.outline,
       'color-accent-contrast': accentedButton,
     }"
     :to="link"
@@ -54,11 +64,13 @@ const accentedButton = computed(() => ['danger', 'primary'].includes(props.color
     class="btn"
     :class="{
       'icon-only': props.iconOnly,
+      'btn-large': props.large,
       'btn-raised': color === 'raised',
       'btn-danger': color === 'danger',
       'btn-primary': color === 'primary',
       'btn-secondary': color === 'secondary',
       'btn-highlight': color === 'highlight',
+      'btn-outline': props.outline,
       'color-accent-contrast': accentedButton,
     }"
     @click="action"