feat: finalize tool cards

packages/i18n/strings/en.json

@@ -37,7 +37,7 @@
     },
     "api": {
       "name": "API",
-      "action": "To the docs",
+      "action": "To docs",
       "slogan": "BlitzKit hosted API"
     }
   },

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

@@ -4,7 +4,7 @@ import "@fontsource-variable/roboto-flex";
 ---
 
 <style>
-  body {
+  :root {
     --space-0: 0.0625rem;
     --space-1: 0.125rem;
     --space-2: 0.25rem;
@@ -24,14 +24,10 @@ import "@fontsource-variable/roboto-flex";
     --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;
     --weight-regular: 400;
     --weight-medium: 500;
-    --weight-semibold: 600;
     --weight-bold: 700;
-    --weight-extra-bold: 800;
     --weight-black: 900;
 
     --outline-interactive: solid var(--space-1) var(--gray-5);
@@ -42,16 +38,5 @@ import "@fontsource-variable/roboto-flex";
       inset calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1)
         var(--gray-4);
     --shadow-focus: 0 0 var(--space-3) var(--accent-4);
-
-    background-color: var(--gray-1);
-    color: var(--gray-12);
-    font-family: var(--font-family-regular);
-
-    display: flex;
-    flex-direction: column;
-  }
-
-  body {
-    margin: 0;
   }
 </style>

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

@@ -1,2 +1,25 @@
 .button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: var(--max-size);
+  padding: var(--space-3) var(--space-4);
+
+  background-color: var(--accent-9);
+  border: none;
+
+  font-family: var(--font-family-regular);
+  font-size: var(--font-size-minor);
+  color: var(--gray-1);
+  font-weight: var(--weight-medium);
+
+  .svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  &[data-light-text="true"] {
+    color: var(--gray-12);
+  }
 }

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

@@ -5,8 +5,35 @@ import "./index.css";
 
 export interface ButtonProps extends ComponentProps<"button"> {
   color?: Color;
+  variant?: "solid";
 }
 
-export function Button({ className, ...props }: ButtonProps) {
-  return <button className={classNames("button", className)} {...props} />;
+const LIGHT_TEXT_COLORS = new Set<Color>([
+  "purple",
+  "gold",
+  "bronze",
+  "teal",
+  "grass",
+]);
+
+export function Button({
+  className,
+  color,
+  variant = "solid",
+  style,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={classNames("button", className)}
+      data-color={color}
+      data-variant={variant}
+      data-light-text={color ? LIGHT_TEXT_COLORS.has(color) : undefined}
+      style={{
+        backgroundColor: color ? `var(--${color}-9)` : undefined,
+        ...style,
+      }}
+      {...props}
+    />
+  );
 }

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

@@ -0,0 +1,12 @@
+<style>
+  .section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    padding: 0 var(--space-4);
+  }
+</style>
+
+<div class="section">
+  <slot />
+</div>

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

@@ -4,4 +4,24 @@
   &[data-size="minor"] {
     font-size: var(--font-size-minor);
   }
+
+  &[data-weight="light"] {
+    font-weight: var(--weight-light);
+  }
+
+  &[data-weight="regular"] {
+    font-weight: var(--weight-regular);
+  }
+
+  &[data-weight="medium"] {
+    font-weight: var(--weight-medium);
+  }
+
+  &[data-weight="bold"] {
+    font-weight: var(--weight-bold);
+  }
+
+  &[data-weight="black"] {
+    font-weight: var(--weight-black);
+  }
 }

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

@@ -5,6 +5,7 @@ import "./index.css";
 
 export interface TextProps extends ComponentProps<"span"> {
   color?: Color;
+  weight?: "light" | "regular" | "medium" | "bold" | "black";
   lowContrast?: boolean;
   size?: "regular" | "minor";
 }
@@ -14,13 +15,16 @@ export function Text({
   lowContrast,
   className,
   size = "regular",
+  weight,
+  style,
   ...props
 }: TextProps) {
   return (
     <span
       className={classNames("text", className)}
-      style={{ color: `var(--${color}-${lowContrast ? 11 : 12})` }}
+      style={{ color: `var(--${color}-${lowContrast ? 11 : 12})`, ...style }}
       data-size={size}
+      data-weight={weight}
       {...props}
     />
   );

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

@@ -1,6 +1,7 @@
 .text-field {
   display: flex;
   align-items: center;
+  box-sizing: border-box;
 
   gap: var(--space-3);
   margin: 0 var(--space-4);

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

@@ -1,4 +1,10 @@
-import type { ComponentProps, ReactNode } from "react";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
 import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
@@ -6,14 +12,20 @@ export interface TextFieldProps extends ComponentProps<"input"> {
   children?: ReactNode;
 }
 
-export function TextField({ children, className, ...props }: TextFieldProps) {
-  return (
-    <div
-      className={classNames("text-field", className)}
-      data-has-icon={children !== undefined}
-    >
-      {children}
-      <input {...props} />
-    </div>
-  );
-}
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  ({ children, className, ...props }, ref) => {
+    const input = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => input.current!, []);
+
+    return (
+      <div
+        className={classNames("text-field", className)}
+        data-has-icon={children !== undefined}
+      >
+        {children}
+        <input ref={input} {...props} />
+      </div>
+    );
+  }
+);

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

@@ -65,7 +65,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 
   <div class="info">
     <div class="readable">
-      <Text>{toolStrings.name}</Text>
+      <Text weight="medium">{toolStrings.name}</Text>
       <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
     </div>
 

packages/website-ue/src/core/tools/tools.ts

@@ -25,12 +25,12 @@ export const tools: Record<string, Tool> = {
 
   backgrounds: {
     id: "backgrounds",
-    button: "amber",
+    button: "gold",
   },
 
   api: {
     id: "api",
     disabled: true,
-    button: "bronze",
+    button: "lime",
   },
 };

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

@@ -4,7 +4,7 @@ import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";
 import ColorScale from "../components/ColorScale.astro";
 import Navbar from "../components/Navbar.astro";
-import type { Color } from "../pages/styles/colors/[accent].css";
+import type { Color } from "../core/ui/color";
 
 interface Props {
   accent: Color;
@@ -23,6 +23,21 @@ const { accent, noNavbar } = Astro.props;
     <ColorAlias color="mauve" alias="gray" />
     <ColorAlias color={accent} alias="accent" />
     <BaseStyles />
+
+    <style>
+      body {
+        margin: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-4);
+
+        background-color: var(--gray-1);
+        color: var(--gray-12);
+        font-family: var(--font-family-regular);
+      }
+    </style>
+
+    <slot name="head" />
   </head>
 
   <body class="dark">

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

@@ -2,7 +2,9 @@
 import locales from "@blitzkit/i18n/locales.json";
 import "@radix-ui/colors/amber-dark.css";
 import type { GetStaticPaths } from "astro";
+import ColorScale from "../../components/ColorScale.astro";
 import HomeHero from "../../components/HomeHero.astro";
+import Section from "../../components/Section.astro";
 import ToolCard from "../../components/ToolCard.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";
@@ -19,17 +21,14 @@ export const getStaticPaths = (() => {
 const { locale } = Astro.props;
 ---
 
-<style>
-  .cards {
-    display: flex;
-    flex-direction: column;
-  }
-</style>
-
 <BaseLayout accent="amber">
+  <ColorScale color="purple" slot="head" />
+  <ColorScale color="gold" slot="head" />
+  <ColorScale color="lime" slot="head" />
+
   <HomeHero {locale} />
 
-  <div class="cards">
+  <Section class="cards">
     {Object.values(tools).map((tool) => <ToolCard {locale} {tool} />)}
-  </div>
+  </Section>
 </BaseLayout>