jws-frontend/src/components/app/AppBox.vue

<script lang="ts" setup>
defineProps<{ dark?: boolean; bordered?: boolean; shadowed?: boolean }>();
</script>

<template>
  <div
    class="app-box"
    :class="{
      dark,
      'app-box__bordered': bordered,
      'app-box__shadowed': shadowed,
    }"
  >
    <slot />
  </div>
</template>

<style scoped>
.app-box {
  overflow: hidden;
  background-color: var(--surface-1);
  border-radius: var(--radius-2);
  padding: var(--size-4);
}

.app-box__shadowed {
  box-shadow: var(--shadow-3);
}

.app-box__bordered {
  border: 1px solid var(--border-color);
}
</style>