style: introducing css vars with tailwind

manuartero · Oct 20, 2023 · c267716 · c267716
1 parent 36b35a7
commit c267716
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/src/components/deck.tsx b/src/components/deck.tsx
@@ -24,7 +24,7 @@ export function Deck({ className, playerDeck, player }: Props) {
       className={c(
         className,
         "flex flex-col justify-around p-4 pb-32 h-full",
-        "border-gray-700",
+        "border-[var(--light-grey)]",
         player === "Player 1" && "bg-gradient-to-r border-r-4",
         player === "Player 2" && "bg-gradient-to-l border-l-4",
         player !== "Player 1" &&

diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
@@ -15,7 +15,7 @@ export function Toolbar({ onDeckSettings, onCollection }: Props) {
   return (
     <nav
       id="Toolbar"
-      className="bg-gray-700 w-full flex items-end justify-end px-4"
+      className="bg-[var(--light-grey)] w-full flex items-end justify-end px-4"
     >
       <button
         className="px-8 py-4 rounded-md text-xl"

diff --git a/src/index.css b/src/index.css
@@ -28,6 +28,7 @@ body {
   --dark-blue: #090e0f;
   --medium-dark-blue: #0f191f;
   --white: #ffffff;
+  --light-grey: rgb(63, 72, 84); /* aprox. gray-600 */
 }
 
 .show-up-transition {