feat(ui): add decorative style primitives

src/lib/ui/components/CornerBracketFrame.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  let {
+    density = "regular",
+    size = "md",
+    tone = "neutral",
+  }: {
+    density?: "regular" | "tight";
+    size?: "sm" | "md" | "lg";
+    tone?: "neutral" | "accent" | "danger";
+  } = $props();
+</script>
+
+<div
+  class="corner-bracket-frame"
+  data-density={density}
+  data-size={size}
+  data-tone={tone}
+  aria-hidden="true"
+>
+  <span data-corner="top-left"></span>
+  <span data-corner="top-right"></span>
+  <span data-corner="bottom-left"></span>
+  <span data-corner="bottom-right"></span>
+</div>
+
+<style>
+  .corner-bracket-frame {
+    --corner-color: var(--ui-color-line-strong);
+    --corner-offset: 0.5rem;
+    --corner-size: 1.45rem;
+    position: relative;
+    min-height: 5rem;
+    border: 1px solid transparent;
+    background:
+      linear-gradient(90deg, color-mix(in srgb, var(--corner-color), transparent 78%) 1px, transparent 1px),
+      linear-gradient(color-mix(in srgb, var(--corner-color), transparent 84%) 1px, transparent 1px),
+      rgba(2, 3, 2, 0.64);
+    background-size: 2rem 2rem, 2rem 2rem, auto;
+  }
+
+  span {
+    position: absolute;
+    width: var(--corner-size);
+    height: var(--corner-size);
+    border-color: var(--corner-color);
+  }
+
+  [data-corner="top-left"] {
+    top: var(--corner-offset);
+    left: var(--corner-offset);
+    border-top: 1px solid;
+    border-left: 1px solid;
+  }
+
+  [data-corner="top-right"] {
+    top: var(--corner-offset);
+    right: var(--corner-offset);
+    border-top: 1px solid;
+    border-right: 1px solid;
+  }
+
+  [data-corner="bottom-left"] {
+    bottom: var(--corner-offset);
+    left: var(--corner-offset);
+    border-bottom: 1px solid;
+    border-left: 1px solid;
+  }
+
+  [data-corner="bottom-right"] {
+    right: var(--corner-offset);
+    bottom: var(--corner-offset);
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+  }
+
+  .corner-bracket-frame[data-density="tight"] {
+    --corner-offset: 0.28rem;
+  }
+
+  .corner-bracket-frame[data-size="sm"] {
+    --corner-size: 0.95rem;
+    min-height: 3rem;
+  }
+
+  .corner-bracket-frame[data-size="lg"] {
+    --corner-size: 2.25rem;
+    min-height: 8rem;
+  }
+
+  .corner-bracket-frame[data-tone="accent"] {
+    --corner-color: var(--ui-color-accent);
+  }
+
+  .corner-bracket-frame[data-tone="danger"] {
+    --corner-color: var(--ui-color-danger);
+  }
+</style>