Large and outlined buttons (#69)

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>
 ```

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);

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"