feat: more accents

packages/website-ue/astro.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
 
   vite: {
     server: { allowedHosts: [] },
+
     esbuild: {
       minifyIdentifiers: true,
       minifySyntax: false,
@@ -67,7 +68,7 @@ export default defineConfig({
               (strings) => strings.website.tools[stringId].name
             ),
             url: `/${tool.id}`,
-            icon: `public/assets/images/tools/${tool.id}.webp`,
+            icon: `public/assets/tools/${tool.id}.webp`,
           };
         }),
 

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

@@ -1,5 +1,6 @@
 ---
 import "@fontsource-variable/roboto-flex/wdth.css";
+import { TextField } from "./TextField";
 ---
 
 <style is:global>
@@ -15,6 +16,9 @@ import "@fontsource-variable/roboto-flex/wdth.css";
       display: flex;
       align-items: center;
       justify-content: center;
+      flex-direction: column;
+      gap: var(--space-7);
+
       background: linear-gradient(var(--gray-a11), var(--gray-1));
       padding: var(--space-9);
 
@@ -35,5 +39,7 @@ import "@fontsource-variable/roboto-flex/wdth.css";
 <div class="home-hero">
   <div class="wrapper">
     <h1>BlitzKit 2.0</h1>
+
+    <TextField placeholder="Search..." className="search" type="search" />
   </div>
 </div>

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

@@ -0,0 +1,8 @@
+input {
+  min-width: 0;
+  background-color: var(--gray-1);
+  border: solid 1px var(--gray-4);
+  color: var(--gray-12);
+  padding: var(--space-3) var(--space-4);
+  border-radius: var(--space-3);
+}

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

@@ -0,0 +1,6 @@
+import type { ComponentProps } from "react";
+import "./index.css";
+
+export function TextField(props: ComponentProps<"input">) {
+  return <input {...props} />;
+}

packages/website-ue/src/layouts/BaseLayout.astro

@@ -1,15 +1,52 @@
 ---
 import "@fontsource-variable/inter";
+import type { Color } from "../pages/styles/colors/[accent].css";
+
+interface Props {
+  accent: Color;
+}
+
+const { accent } = Astro.props;
+
+const accentVariables = {
+  "accent-1": `var(--${accent}-1)`,
+  "accent-2": `var(--${accent}-2)`,
+  "accent-3": `var(--${accent}-3)`,
+  "accent-4": `var(--${accent}-4)`,
+  "accent-5": `var(--${accent}-5)`,
+  "accent-6": `var(--${accent}-6)`,
+  "accent-7": `var(--${accent}-7)`,
+  "accent-8": `var(--${accent}-8)`,
+  "accent-9": `var(--${accent}-9)`,
+  "accent-10": `var(--${accent}-10)`,
+  "accent-11": `var(--${accent}-11)`,
+  "accent-12": `var(--${accent}-12)`,
+};
 ---
 
 <html>
   <head>
     <meta charset="utf-8" />
 
-    <style is:global>
+    <style is:global define:vars={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);
@@ -61,9 +98,14 @@ import "@fontsource-variable/inter";
       h3,
       h4,
       h5,
-      h6 {
+      h6,
+      p {
         margin: 0;
       }
+
+      a {
+        color: var(--accent-11);
+      }
     </style>
   </head>
 

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

@@ -1,4 +1,5 @@
 ---
+import "@radix-ui/colors/amber-dark.css";
 import {
   createProgram,
   displayPartsToString,
@@ -43,7 +44,7 @@ for (const fullPath in globbed) {
 paths.sort((a, b) => a.path.localeCompare(b.path));
 ---
 
-<BaseLayout>
+<BaseLayout accent="amber">
   <h1>api</h1>
 
   {

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

@@ -1,14 +1,15 @@
 ---
-import HomeHero from "../components/HomeHero.astro";
+import "@radix-ui/colors/amber-dark.css";
+import packageJson from "../../../../package.json";
 import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
-<BaseLayout>
-  <HomeHero />
+<BaseLayout accent="amber">
+  <!-- <HomeHero /> -->
 
-  <!-- <h1>blitzkit {packageJson.version}</h1>
+  <h1>blitzkit {packageJson.version}</h1>
 
   <p><a href="/tanks">/tanks</a></p>
 
-  <p><a href="/api">/api</a></p> -->
+  <p><a href="/api">/api</a></p>
 </BaseLayout>

packages/website-ue/src/pages/styles/colors/[accent].css.ts

@@ -0,0 +1,35 @@
+import * as colors from "@radix-ui/colors";
+import type { APIContext, GetStaticPaths } from "astro";
+
+const ignoreEndings = ["A", "P3", "Dark", "DarkA", "DarkP3"] as const;
+
+const filtered = Object.keys(colors).filter(
+  (name) =>
+    !ignoreEndings.some((ending) => name.endsWith(ending)) &&
+    name !== "__esModule"
+);
+
+export const getStaticPaths = (() => {
+  return filtered.map((accent) => ({
+    params: { accent },
+  }));
+}) satisfies GetStaticPaths;
+
+export type Color = Exclude<
+  keyof typeof colors,
+  `${string}${(typeof ignoreEndings)[number]}` | "__esModule"
+>;
+
+export async function GET({ params }: APIContext<{}, { accent: Color }>) {
+  const palette = colors[`${params.accent}Dark`];
+  let content = ":root{";
+
+  for (const key in palette) {
+    const dashedKey = key.replace(/([a-zA-Z])(\d+)/, "$1-$2");
+    content += `--${dashedKey}:${palette[key as keyof typeof palette]};`;
+  }
+
+  content += "}";
+
+  return new Response(content);
+}

packages/website-ue/src/pages/tanks/[slug]/index.astro

@@ -1,4 +1,5 @@
 ---
+import "@radix-ui/colors/violet-dark.css";
 import type { GetStaticPaths } from "astro";
 import { api } from "../../../core/api/dynamic";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
@@ -16,6 +17,6 @@ export const getStaticPaths = (async () => {
 const { id } = Astro.props;
 ---
 
-<BaseLayout>
+<BaseLayout accent="violet">
   <Page {id} client:load />
 </BaseLayout>

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

@@ -1,11 +1,12 @@
 ---
+import "@radix-ui/colors/violet-dark.css";
 import { api } from "../../core/api/dynamic";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
 const tanksList = await api.tanks();
 ---
 
-<BaseLayout>
+<BaseLayout accent="violet">
   <h1>tanks</h1>
 
   {

packages/website/astro.config.ts

@@ -12,7 +12,7 @@ import { tools } from "./src/constants/tools";
 
 const POSSIBLE_TARGETS = ["app", "web"];
 
-const target = process.env.PUBLIC_TARGET ;
+const target = process.env.PUBLIC_TARGET;
 
 if (!target || !POSSIBLE_TARGETS.includes(target)) {
   throw new Error("Invalid target");