fix(tailwind): extract pseudo bg colors

masonmcelvain · Dec 2, 2023 · 96dab4c · 96dab4c
1 parent e0fb636
commit 96dab4c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
@@ -32,7 +32,7 @@ export function Card({ linkData, isInEditMode, onClick }: CardProps) {
 
    const dragPseudo = isDragEventInProgress
       ? ""
-      : "hover:bg-white/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-white/[.16] dark:hover:bg-[#EDF2F7]/10 dark:active:bg-[#E2E8F0]/[.16]";
+      : "hover:bg-chakra-hover focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-chakra-active dark:hover:bg-chakra-hover-dark dark:active:bg-chakra-active-dark";
    const dragTruncate = isDragEventInProgress
       ? ""
       : "group-hover:overflow-visible group-hover:whitespace-normal";

diff --git a/src/components/Cell.tsx b/src/components/Cell.tsx
@@ -143,7 +143,7 @@ export default function Cell({
             <div className="absolute left-0 top-0 z-10 flex flex-col items-center justify-center space-y-0.5">
                <button
                   aria-label="Edit this link"
-                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-white/10 focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-white/20"
+                  className="relative inline-flex h-6 min-w-[1.5rem] select-none appearance-none items-center justify-center whitespace-nowrap rounded-md bg-transparent align-middle text-xs font-semibold leading-tight outline outline-2 outline-offset-2 outline-transparent transition duration-200 hover:bg-chakra-hover focus-visible:outline-none focus-visible:ring focus-visible:ring-chakra-focus active:bg-chakra-active dark:hover:bg-chakra-hover-dark dark:active:bg-chakra-active-dark"
                   onClick={() => openUpdateLinkModal(index)}
                >
                   <Edit2 size={16} />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -3,6 +3,12 @@ module.exports = {
    content: ["./src/**/*{.html,.ts,.tsx}"],
    theme: {
       extend: {
+         backgroundColor: {
+            "chakra-active": "rgb(255,255,255,.16)",
+            "chakra-active-dark": "rgb(237,242,247,.16)",
+            "chakra-hover": "rgb(255,255,255,.1)",
+            "chakra-hover-dark": "rgb(237,242,247,.1)",
+         },
          ringColor: {
             "chakra-focus": "rgba(66,153,225,0.6)",
          },