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

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

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

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

.app-box__no-padding {
  padding: 0;
}

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

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