Added WIP Menu

src/styles/mixins/decorators.css

@@ -0,0 +1,49 @@
+@define-mixin decorator-bb {
+  padding: var(--bb-spacing, 0);
+  border: var(--bb-border, var(--size-1) solid var(--color-primary));
+  border-top-left-radius: var(--bb-radius-tl, var(--size-1));
+  border-top-right-radius: var(--bb-radius-tr, 0);
+  border-bottom-right-radius: var(--bb-radius-br, 0);
+  border-bottom-left-radius: var(--bb-radius-bl, 0);
+
+  color: var(--bb-fg, var(--color-text-primary));
+
+  background-color: var(--bb-bg, var(--color-primary));
+
+  corner-shape: var(--bb-shapes, bevel);
+}
+
+@define-mixin decorator-torn {
+    position: relative;
+    transform: rotate(1.5deg);
+
+    display: block;
+
+    padding: 0.4em 0.8em;
+    border-radius: 0.3em 0.6em 0.4em 0.5em / 0.5em 0.4em 0.6em 0.3em;
+
+    color: var(--torn-fg);
+
+    background: var(--torn-bg);
+    clip-path: polygon(
+        8px 0%,
+        12px 8%,
+        6px 18%,
+        14px 32%,
+        4px 45%,
+        12px 58%,
+        7px 72%,
+        15px 85%,
+        8px 100%,
+        calc(100% - 8px) 100%,
+        calc(100% - 15px) 85%,
+        calc(100% - 7px) 72%,
+        calc(100% - 12px) 58%,
+        calc(100% - 4px) 45%,
+        calc(100% - 14px) 32%,
+        calc(100% - 6px) 18%,
+        calc(100% - 12px) 8%,
+        calc(100% - 8px) 0%
+    );
+    box-shadow: 2px 2px 4px rgb(0 0 0 / 30%);
+}