feat: start of strings

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

@@ -27,21 +27,6 @@ const accentVariables = {
   @import "@radix-ui/colors/mauve-dark.css";
   @import "@radix-ui/colors/mauve-alpha.css";
 
-  :root {
-    --accent-1: var(--amber-1);
-    --accent-2: var(--amber-2);
-    --accent-3: var(--amber-3);
-    --accent-4: var(--amber-4);
-    --accent-5: var(--amber-5);
-    --accent-6: var(--amber-6);
-    --accent-7: var(--amber-7);
-    --accent-8: var(--amber-8);
-    --accent-9: var(--amber-9);
-    --accent-10: var(--amber-10);
-    --accent-11: var(--amber-11);
-    --accent-12: var(--amber-12);
-  }
-
   body {
     --gray-1: var(--mauve-1);
     --gray-2: var(--mauve-2);
@@ -56,28 +41,28 @@ const accentVariables = {
     --gray-11: var(--mauve-11);
     --gray-12: var(--mauve-12);
 
-    --gray-a1: var(--mauve-a1);
+    --space-0: 0.0625rem;
-    --gray-a2: var(--mauve-a2);
+    --space-1: 0.125rem;
-    --gray-a3: var(--mauve-a3);
+    --space-2: 0.25rem;
-    --gray-a4: var(--mauve-a4);
+    --space-3: 0.5rem;
-    --gray-a5: var(--mauve-a5);
-    --gray-a6: var(--mauve-a6);
-    --gray-a7: var(--mauve-a7);
-    --gray-a8: var(--mauve-a8);
-    --gray-a9: var(--mauve-a9);
-    --gray-a10: var(--mauve-a10);
-    --gray-a11: var(--mauve-a11);
-    --gray-a12: var(--mauve-a12);
-
-    --space-1: 0.25rem;
-    --space-2: 0.5rem;
-    --space-3: 0.75rem;
     --space-4: 1rem;
-    --space-5: 1.5rem;
+    --space-5: 2rem;
-    --space-6: 2rem;
+    --space-6: 4rem;
-    --space-7: 2.5rem;
+    --space-7: 8rem;
-    --space-8: 3rem;
+    --space-8: 16rem;
-    --space-9: 4rem;
+    --space-9: 32rem;
+
+    --weight-thin: 100;
+    --weight-extra-light: 200;
+    --weight-light: 300;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-semibold: 600;
+    --weight-bold: 700;
+    --weight-extra-bold: 800;
+    --weight-black: 900;
+
+    --font-size-regular: 1rem;
 
     background-color: var(--gray-1);
     color: var(--gray-12);

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

@@ -1,16 +1,19 @@
 ---
-import "@fontsource-variable/roboto-flex/wdth.css";
 import { TextField } from "./TextField";
 ---
 
-<style is:global>
+<style>
-  @import "@radix-ui/colors/violet-dark.css";
-  @import "@radix-ui/colors/plum-dark.css";
-
   .home-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .wallpaper {
+      width: 100%;
       background-image: url(/assets/home-hero.webp);
       background-size: cover;
       background-position: top;
+      height: 13rem;
 
       .wrapper {
         display: flex;
@@ -19,27 +22,23 @@ import { TextField } from "./TextField";
         flex-direction: column;
         gap: var(--space-7);
 
-      background: linear-gradient(var(--gray-a11), var(--gray-1));
+        width: 100%;
-      padding: var(--space-9);
+        height: 100%;
 
-      h1 {
+        background: linear-gradient(transparent, var(--gray-1));
-        font-weight: 900;
+      }
-        font-size: 3rem;
     }
 
-      @media (max-width: 40rem) {
+    input {
-        h1 {
+      width: 100%;
-          font-size: 2rem;
-        }
-      }
     }
   }
 </style>
 
 <div class="home-hero">
-  <div class="wrapper">
+  <div class="wallpaper">
-    <h1>BlitzKit 2.0</h1>
+    <div class="wrapper"></div>
+  </div>
 
-    <TextField placeholder="Search..." className="search" type="search" />
+  <TextField placeholder="asdasdasd" />
-  </div>
 </div>

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

@@ -1,8 +1,15 @@
 input {
   min-width: 0;
-  background-color: var(--gray-1);
+  max-width: var(--space-9);
-  border: solid 1px var(--gray-4);
+
+  border-radius: 9999px;
+
+  background-color: var(--gray-3);
+  border: solid 1px var(--gray-6);
   color: var(--gray-12);
   padding: var(--space-3) var(--space-4);
-  border-radius: var(--space-3);
+  margin: 0 var(--space-4);
+
+  font-weight: var(--weight-medium);
+  font-size: var(--font-size-regular);
 }

packages/website-ue/src/pages/index.astro

@@ -1,12 +1,13 @@
 ---
 import "@radix-ui/colors/amber-dark.css";
 import packageJson from "../../../../package.json";
+import HomeHero from "../components/HomeHero.astro";
 import { tools } from "../core/tools/tools";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout accent="amber">
-  <!-- <HomeHero /> -->
+  <HomeHero />
 
   <h1>blitzkit {packageJson.version}</h1>