feat: some more styles

bun.lock

@@ -4,6 +4,7 @@
     "": {
       "name": "blitzkit",
       "dependencies": {
+        "@fontsource-variable/jetbrains-mono": "^5.2.8",
         "@prisma/client": "^6.18.0",
         "prisma": "^6.18.0",
         "typescript": "^5.9.3",
@@ -545,6 +546,8 @@
 
     "@floating-ui/utils": ["@floating-ui/[email protected]", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
+    "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/[email protected]", "", {}, "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q=="],
+
     "@fontsource-variable/roboto-flex": ["@fontsource-variable/[email protected]", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="],
 
     "@fontsource-variable/roboto-mono": ["@fontsource-variable/[email protected]", "", {}, "sha512-6M2U3wGIUxYNKRrUoKls8BRRIPDA57T8J0agqwyDkiEHrLEEAqptsxcUl3eTm6tnRNEn6yEm4pCefvtnujebDA=="],

package.json

@@ -43,6 +43,7 @@
     "packages/*"
   ],
   "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
     "@prisma/client": "^6.18.0",
     "prisma": "^6.18.0",
     "typescript": "^5.9.3"

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

@@ -1,12 +1,9 @@
 ---
+import "@fontsource-variable/jetbrains-mono";
 import "@fontsource-variable/roboto-flex";
-import "@fontsource-variable/roboto-mono";
 ---
 
-<style is:global>
-  @import "@radix-ui/colors/mauve-dark.css";
-  @import "@radix-ui/colors/mauve-alpha.css";
-
+<style>
   body {
     --space-0: 0.0625rem;
     --space-1: 0.125rem;
@@ -19,6 +16,13 @@ import "@fontsource-variable/roboto-mono";
     --space-8: 16rem;
     --space-9: 32rem;
 
+    --max-size: max(100vw, 100vh);
+
+    --font-size-regular: var(--space-4);
+
+    --font-family-regular: "Roboto Flex Variable", sans-serif;
+    --font-family-mono: "JetBrains Mono Variable", monospace;
+
     --weight-thin: 100;
     --weight-extra-light: 200;
     --weight-light: 300;
@@ -29,10 +33,6 @@ import "@fontsource-variable/roboto-mono";
     --weight-extra-bold: 800;
     --weight-black: 900;
 
-    --font-size-regular: var(--space-4);
-
-    --max-size: max(100vw, 100vh);
-
     --outline-interactive: solid var(--space-1) var(--gray-5);
     --outline-focus: var(--space-1) solid var(--accent-6);
 
@@ -44,7 +44,7 @@ import "@fontsource-variable/roboto-mono";
 
     background-color: var(--gray-1);
     color: var(--gray-12);
-    font-family: "Roboto Flex";
+    font-family: var(--font-family-regular);
 
     display: flex;
     flex-direction: column;

packages/website-ue/src/components/Code/index.css

@@ -1,4 +1,3 @@
 .code {
-  font-family: "Roboto Mono";
-  color: red;
+  font-family: var(--font-family-mono);
 }

packages/website-ue/src/components/Code/index.tsx

@@ -1,8 +1,9 @@
 import type { ComponentProps } from "react";
+import { classNames } from "../../core/react/classNames";
 import "./index.css";
 
 export interface CodeProps extends ComponentProps<"code"> {}
 
-export function Code({ className }: CodeProps) {
-  return <code className={className?????} {...props} />;
+export function Code({ className, ...props }: CodeProps) {
+  return <code className={classNames("code", className)} {...props} />;
 }

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

@@ -61,7 +61,11 @@ const strings = { home: { search: "test" } };
           position: absolute;
           top: 0;
           right: 0;
-          transform: translateX(100%);
+          transform: translate(100%, 0);
+          padding-left: var(--space-2);
+
+          font-weight: var(--weight-bold);
+          letter-spacing: -0.15em;
         }
       }
     }

packages/website-ue/src/components/TextField/index.css

@@ -30,6 +30,7 @@
 
   input {
     min-width: 0;
+    flex: 1;
 
     background: none;
     border: none;

packages/website-ue/src/core/react/classNames.ts

@@ -0,0 +1,3 @@
+export function classNames(...classes: (string | undefined)[]) {
+  return classes.filter(Boolean).join(" ");
+}