feat: some navbar

packages/website-ue/src/components/BaseStyles.astro

@@ -43,5 +43,7 @@ import "@fontsource-variable/roboto-flex";
         var(--space-1) var(--white-a3),
       inset calc(var(--space-1) * sin(45deg) * -1)
         calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
+
+    --blur-glass: blur(4rem);
   }
 </style>

packages/website-ue/src/components/ColorAlias.astro

@@ -1,12 +1,13 @@
 ---
-import type { Color } from "../pages/styles/colors/[accent].css";
+import type { Color } from "../core/ui/color";
 
 interface Props {
   color: Color;
   alias: string;
+  alpha?: boolean;
 }
 
-const { color, alias } = Astro.props;
+const { color, alias, alpha } = Astro.props;
 
 let styles = "";
 
@@ -14,7 +15,7 @@ styles += ":root{";
 
 for (let i = 0; i < 12; i++) {
   const n = i + 1;
-  styles += `--${alias}-${n}:var(--${color}-${n});`;
+  styles += `--${alias}-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
 }
 
 styles += "}";

packages/website-ue/src/components/Navbar.astro

@@ -0,0 +1,56 @@
+---
+import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+---
+
+<style>
+  .navbar {
+    position: sticky;
+    top: 0;
+    width: 100%;
+    margin-bottom: calc(var(--space-5) * -1);
+
+    display: flex;
+    justify-content: space-between;
+
+    z-index: 1;
+    backdrop-filter: var(--blur-glass);
+    background-color: var(--black-a11);
+
+    .side {
+      display: flex;
+
+      .action {
+        width: calc(var(--space-5) + var(--space-4));
+        height: calc(var(--space-5) + var(--space-4));
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+          width: 1.25em;
+          height: 1.25em;
+        }
+      }
+    }
+  }
+</style>
+
+<div class="navbar">
+  <div class="side">
+    <div class="action">
+      <BlitzKitIcon className="icon" />
+    </div>
+  </div>
+
+  <div class="side">
+    <div class="action">
+      <MagnifyingGlassIcon className="icon" />
+    </div>
+
+    <div class="action">
+      <HamburgerMenuIcon className="icon" />
+    </div>
+  </div>
+</div>