jws-frontend/src/components/AddButton.vue

<script setup lang="ts">
defineProps<{
  label?: string;
}>();
</script>

<template>
  <div class="column items-center box" :class="{ dark: $q.dark.isActive }">
    <div class="row">
      <q-btn
        unelevated
        @click="$emit('trigger')"
        size="lg"
        class="color-btn"
        icon="mdi-plus"
        round
      />
    </div>
    <div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
  </div>
</template>

<style scoped>
.box {
  --_btn-add-color: var(--cyan-6-hsl);

  .color-btn {
    color: hsl(var(--_btn-add-color));
    background: hsla(var(--_btn-add-color) / 0.1) !important;
  }

  .color-text {
    color: var(--cyan-6);
  }

  &.dark {
    --_btn-add-color: var(--cyan-5-hsl);
  }
}
</style>