feat: some more styles

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(" ");
+}