Focus ring

components/Page.tsx

@@ -9,12 +9,18 @@ export function Page(props: JSX.HTMLAttributes<HTMLDivElement>) {
     <div class="relative min-h-screen flex flex-col">
       <header class="flex justify-start items-center">
         <nav class={`flex w-full drop-shadow-md ${HEADER_CLASSES}`}>
-          <a href="/" class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}>
+          <a
+            tabIndex={10}
+            href="/"
+            class={`${NAV_ITEM_CLASSES} text-black dark:text-white`}
+          >
             <h1 class="text-2xl">LyricScreen</h1>
           </a>
-          <a href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
+          <a tabIndex={11} href="/note" class={NAV_ITEM_CLASSES}>Notes</a>
-          <a href="/register" class={NAV_ITEM_CLASSES}>Register</a>
+          <a tabIndex={12} href="/register" class={NAV_ITEM_CLASSES}>
-          <a href="/login" class={NAV_ITEM_CLASSES}>Login</a>
+            Register
+          </a>
+          <a tabIndex={13} href="/login" class={NAV_ITEM_CLASSES}>Login</a>
         </nav>
       </header>
       <main class="p-2">

fresh.gen.ts

@@ -2,26 +2,26 @@
 // This file SHOULD be checked into source version control.
 // This file is automatically updated during development when running `dev.ts`.
 
-import config from "@/deno.json" assert { type: "json" };
+import config from "./deno.json" assert { type: "json" };
-import * as $0 from "@/routes/[name].tsx";
+import * as $0 from "./routes/[name].tsx";
-import * as $1 from "@/routes/_404.tsx";
+import * as $1 from "./routes/_404.tsx";
-import * as $2 from "@/routes/_500.tsx";
+import * as $2 from "./routes/_500.tsx";
-import * as $3 from "@/routes/_middleware.ts";
+import * as $3 from "./routes/_middleware.ts";
-import * as $4 from "@/routes/about.tsx";
+import * as $4 from "./routes/about.tsx";
-import * as $5 from "@/routes/api/joke.ts";
+import * as $5 from "./routes/api/joke.ts";
-import * as $6 from "@/routes/api/random-uuid.ts";
+import * as $6 from "./routes/api/random-uuid.ts";
-import * as $7 from "@/routes/countdown.tsx";
+import * as $7 from "./routes/countdown.tsx";
-import * as $8 from "@/routes/github/[username].tsx";
+import * as $8 from "./routes/github/[username].tsx";
-import * as $9 from "@/routes/index.tsx";
+import * as $9 from "./routes/index.tsx";
-import * as $10 from "@/routes/login.tsx";
+import * as $10 from "./routes/login.tsx";
-import * as $11 from "@/routes/note.tsx";
+import * as $11 from "./routes/note.tsx";
-import * as $12 from "@/routes/note/[id].tsx";
+import * as $12 from "./routes/note/[id].tsx";
-import * as $13 from "@/routes/note/create.tsx";
+import * as $13 from "./routes/note/create.tsx";
-import * as $14 from "@/routes/register.tsx";
+import * as $14 from "./routes/register.tsx";
-import * as $15 from "@/routes/route-config-example.tsx";
+import * as $15 from "./routes/route-config-example.tsx";
-import * as $16 from "@/routes/search.tsx";
+import * as $16 from "./routes/search.tsx";
-import * as $$0 from "@/islands/Countdown.tsx";
+import * as $$0 from "./islands/Countdown.tsx";
-import * as $$1 from "@/islands/Counter.tsx";
+import * as $$1 from "./islands/Counter.tsx";
 
 const manifest = {
   routes: {

routes/login.tsx

@@ -3,6 +3,9 @@ import { Page } from "../components/Page.tsx";
 export default function Login() {
   return (
     <Page>
+      <h1 class="text-4xl mb-4 outline-white">
+        Log in to your account
+      </h1>
       <form class="flex flex-col max-w-lg" method="post">
         <label for="username">Username</label>
         <input type="text" name="username" />

routes/register.tsx

@@ -68,6 +68,7 @@ function RegistrationForm(props?: RegistrationError | null) {
   console.log(props);
   return (
     <Page>
+      <h1 class="text-4xl mb-4">Register your account</h1>
       {props != null &&
         (
           <p class="text-red-500">

twind.config.ts

@@ -2,23 +2,36 @@ import { Options } from "$fresh/plugins/twind.ts";
 import { apply } from "twind";
 import { css } from "twind/css";
 
-const button = apply(
+const focusRing = apply`focus:outline-main`;
-  "bg-blue(400 500(hover:& focus:&) dark:(600 700(hover:& focus:&))) px-4 py-2 rounded cursor-pointer ring(focus:& current)",
-);
 
-const input = apply(
+const button = apply`${focusRing}
-  "rounded bg-gray(200 300(hover:& focus:&) dark:(800 700(hover:& focus:&))) px-4 py-2 ring(focus:& current)",
+  bg-blue(400 500(hover:& focus:&) dark:(600 700(hover:& focus:&))) px-4 py-2 rounded cursor-pointer
-);
+`;
+
+const input = apply`
+  ${focusRing} rounded bg-gray(200 300(hover:& focus:&) dark:(800 700(hover:& focus:&))) px-4 py-2`;
 
 export default {
   selfURL: import.meta.url,
+
+  theme: {
+    outline: {
+      main: ["2px solid currentColor", "1px"],
+    },
+    extend: {
+      spacing: {
+        128: "32rem",
+        144: "36rem",
+      },
+    },
+  },
   preflight: (preflight) =>
     css(preflight, {
-      body: apply("bg-white text-black dark:(bg-gray-900 text-white)"),
+      "body,html": apply("bg-white text-black dark:(bg-gray-900 text-white)"),
+      "::-moz-focus-inner": { border: 0 },
       "body input, body textarea": input,
       "body button, body input[type=submit]": button,
-      "body a": apply(
+      "body a":
-        "text-blue(600 700(hover:&) dark:(400 300(hover:&))",
+        apply`rounded ${focusRing} text-blue(600 700(hover:&) dark:(400 300(hover:&))`,
-      ),
     }),
 } as Options;