Add cards

docs/.vitepress/config.ts

@@ -16,6 +16,7 @@ export default defineConfig({
 			    { text: "Button", link: "/components/button/" },
 			    { text: "Pill", link: "/components/pill/" },
 			    { text: "Loader", link: "/components/loader/" },
+			    { text: "Card", link: "/components/card/" },
         ]
       }
 		]

docs/components/card/index.md

+
+<script setup lang="ts">
+import { FwCard } from '~/components'
+
+const alert = (message: string) => window.alert(message)
+</script>
+
+# Card
+## Basic card
+```html
+<fw-card title="For music lovers">
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+```
+<fw-card title="For music lovers">
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+
+## Interactive card
+```html
+<fw-card 
+  title="Frequently Asked Questions" 
+  @click="alert('hello')"
+>
+  You have a question about Funkwhale? Get a quick answer!
+</fw-card>
+```
+<fw-card 
+  title="Frequently Asked Questions" 
+  @click="alert('hello')"
+>
+  You have a question about Funkwhale? Get a quick answer!
+</fw-card>
+
+## Category card
+```html
+<fw-card 
+  category 
+  title="Example Translations" 
+  @click="alert('hello')"
+/>
+```
+<fw-card 
+  category 
+  title="Example Translations" 
+  @click="alert('hello')"
+/>
+
+## Card with an image
+```html
+<fw-card 
+  title="For music lovers"
+  image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
+>
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+```
+<fw-card 
+  title="For music lovers"
+  image="https://images.unsplash.com/photo-1524650359799-842906ca1c06?ixlib=rb-1.2.1&dl=te-nguyen-Wt7XT1R6sjU-unsplash.jpg&w=640&q=80&fm=jpg&crop=entropy&cs=tinysrgb"
+>
+  Access your personnal music collection from anywhere. Beeing focused on the promotion of Free licensed content, Funkwhale sports advanced sharing features.
+</fw-card>
+
+
+## Card with a button
+```html
+<fw-card 
+  title="Join an existing pod"
+  button-title="Find a pod"
+  @click="alert('hello')"
+>
+  The easiest way to start using Funkwhale is to register an account on one of the many available pods.
+</fw-card>
+
+```
+<fw-card 
+  title="Join an existing pod"
+  button-title="Find a pod"
+  @click="alert('hello')"
+>
+  The easiest way to start using Funkwhale is to register an account on one of the many available pods.
+</fw-card>

src/components/card/Card.vue

+<script setup lang="ts">
+import { FwButton } from '~/components'
+
+interface Props {
+  title: string
+  buttonTitle?: string
+  image?: string
+  onClick?: (event: Event) => void
+  category?: boolean
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+	<div
+    @click="(event) => !buttonTitle ? onClick?.(event) : undefined"
+    class="funkwhale card"
+    :class="{ 'has-image': !!image, 'is-link': !!onClick, 'is-category': category, 'is-cta': !!buttonTitle }"
+  >
+    <img
+      v-if="image"
+      :src="image"
+      class="card-image"
+    />
+    <div class="card-title">{{ title }}</div>
+    <div
+      v-if="$slots.default"
+      class="card-content"
+    >
+      <slot />
+    </div>
+    <div
+      v-if="buttonTitle"
+      class="card-button"
+    >
+      <fw-button outline secondary @click="onClick">{{ buttonTitle }}</fw-button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import './style.scss'
+</style>

src/components/card/style.scss

+.funkwhale {
+  &.card {
+    border-radius: var(--fw-border-radius);
+    color: var(--fw-text-color);
+    width: 320px;
+    box-shadow: 0 3px 12px 2px rgb(0 0 0 / 20%);
+    padding: 24px;
+    font-size: 1rem;
+
+    &.is-link {
+      cursor: pointer;
+    }
+
+    > img.card-image {
+      border-radius: var(--fw-border-radius);
+      object-fit: cover;
+      height: 160px;
+      width: 160px;
+      margin: 4px auto;
+
+      + .card-title {
+        text-align: center;
+        padding: 22px 0 0;
+      }
+    }
+
+    > .card-title {
+      line-height: 1.3em;
+      font-size: 1.125em;
+      font-weight: bold;
+
+      + .card-content {
+        padding-top: 16px;
+      }
+    }
+
+    &.is-category {
+      > .card-title {
+        font-size: 1.75em;
+      }
+    }
+
+    &.has-image {
+      > .card-content {
+        text-align: center;
+      }
+    }
+
+    > .card-button {
+      padding-top: 30px;
+
+      > .funkwhale.button {
+        width: 100%;
+        font-size: 1em;
+      }
+    }
+
+    &.is-cta {
+      > .card-content,
+      > .card-title {
+        text-align: left !important;
+      }
+    }
+  }
+}

src/components/index.ts

 export { default as FwButton } from './button/Button.vue'
 export { default as FwLoader } from './loader/Loader.vue'
 export { default as FwPill } from './pill/Pill.vue'
+
+export { default as FwAudioCard } from './card/audio/Card.vue'
+export { default as FwRadioCard } from './card/radio/Card.vue'
+export { default as FwCard } from './card/Card.vue'

src/styles/colors.scss

@@ -69,6 +69,10 @@ html.dark {
     --fw-bg-color: var(--fw-grey-200);
     --fw-text-color: var(--fw-grey-800);
 
+    html:not(.dark) & {
+      --fw-bg-color: var(--fw-grey-600);
+    }
+
     &.input {
       &[disabled] {
         --fw-bg-color: var(--fw-grey-100) !important;
@@ -77,11 +81,18 @@ html.dark {
       &.is-hovered,
       &:hover {
         --fw-bg-color: var(--fw-grey-300);
+
+        html:not(.dark) & {
+          --fw-bg-color: var(--fw-grey-700);
+        }
       }
 
       &.is-active,
       &:active {
         --fw-bg-color: var(--fw-grey-400);
+        html:not(.dark) & {
+          --fw-text-color: var(--fw-grey-300);
+        }
       }
     }
   }