From d498ba7e9a0822c75b0e5170d24a7533d20e45c3 Mon Sep 17 00:00:00 2001
From: Zachery Ng <zachery.ng@gmail.com>
Date: Mon, 19 Feb 2024 20:05:29 +0800
Subject: [PATCH] feat: focus ring class

---
 packages/frontend/src/index.css               |  6 ++++++
 .../frontend/src/pages/components/index.tsx   | 20 +++++++++++++++----
 packages/frontend/tailwind.config.js          |  9 ++++++++-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index b5c61c9..5f6197b 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer utilities {
+  .focus-ring {
+    @apply focus-visible:ring-[3px] focus-visible:ring-snowball-200 focus-visible:ring-offset-1 focus-visible:ring-offset-snowball-500 focus-visible:outline-none;
+  }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index 9a7a851..9ba7575 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -18,10 +18,22 @@ const Page = () => {
           <h1 className="text-2xl font-bold">Component A</h1>
 
           <div className="flex flex-row gap-10 items-center justify-center">
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
-            <div className="h-20 w-40 bg-red-400 rounded-md" />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
+            <div
+              tabIndex={0}
+              className="h-20 w-40 bg-red-400 rounded-md focus-ring"
+            />
           </div>
 
           <div className="flex flex-row gap-10 items-center justify-center">
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 70266ee..c3d8590 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -8,7 +8,14 @@ export default withMT({
     '../../node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        snowball: {
+          200: '#DDEEFD',
+          500: '#47A4FA',
+        },
+      },
+    },
   },
   plugins: [],
 });