Big changes

frontend/src/components/ui/AppBrandMark.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+import brandLogo from "@/logo.png";
+
+const props = withDefaults(
+  defineProps<{
+    size?: "sm" | "md" | "lg" | "xl";
+  }>(),
+  {
+    size: "md",
+  },
+);
+
+const sizeClass = computed(() => {
+  if (props.size === "sm") {
+    return "h-5 w-5";
+  }
+  if (props.size === "lg") {
+    return "h-8 w-8";
+  }
+  if (props.size === "xl") {
+    return "h-12 w-12";
+  }
+  return "h-6 w-6";
+});
+
+const logoMaskStyle: Record<string, string> = {
+  "--brand-logo-mask": `url(${brandLogo})`,
+};
+</script>
+
+<template>
+  <span
+    :class="['brand-logo-mark', sizeClass]"
+    :style="logoMaskStyle"
+    aria-hidden="true"
+  />
+</template>
+
+<style scoped>
+.brand-logo-mark {
+  display: inline-block;
+  flex-shrink: 0;
+  background-color: rgb(var(--color-brand-700));
+  -webkit-mask-image: var(--brand-logo-mask);
+  mask-image: var(--brand-logo-mask);
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+</style>