css vars for color pallete

prrockzed · Dec 19, 2024 · f202030 · f202030
1 parent e72bab9
commit f202030
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/src/App.css b/src/App.css
@@ -2,6 +2,6 @@
   display: grid;
   place-content: center;
   height: 100vh;
-  background-color: black;
+  background-color: var(--app-background-color);
 }
 
diff --git a/src/components/ChessWrapper/ChessWrapper.css b/src/components/ChessWrapper/ChessWrapper.css
@@ -74,7 +74,7 @@ div#left-panel {
   }
 
   .game-display > .currentPlayerDisplay {
-    color: whitesmoke;
+    color: var(--secondary-text-color);
     padding: 2px 10px;
     border-radius: calc(1rem + 2px);
   }

diff --git a/src/components/Chessboard/Chessboard.css b/src/components/Chessboard/Chessboard.css
@@ -4,7 +4,7 @@
   grid-template-rows: repeat(14, var(--tile-size));
   width: calc(var(--tile-size) * 14);
   height: calc(var(--tile-size) * 14);
-  background-color: black;
+  background-color: var(--app-background-color);
 }
 
 .modal {
@@ -60,20 +60,20 @@
 
 .modal > .modal-body > .checkmate-body .team {
   font-size: 20px;
-  color: white;
+  color: var(--secondary-text-color);
 }
 
 .modal > .modal-body > .checkmate-body td:nth-child(2) {
   width: 100%;
 }
 
 .modal > .modal-body > .checkmate-body > button {
-  background-color: #779556;
+  background-color: var(--button-background-color);
   border: none;
   border-radius: 8px;
   padding: 16px;
   font-size: 28px;
-  color: white;
+  color: var(--secondary-text-color);
 }
 
 .modal > .modal-body > .checkmate-body > button:hover {

diff --git a/src/index.css b/src/index.css
@@ -6,6 +6,16 @@
   --chess-piece-size: calc(var(--tile-size) * 0.85);
   --tile-highlight-size: calc(var(--tile-size) * 0.25);
   --tile-highlight-chess-piece-size: calc(var(--tile-size) * 0.9);
+
+  /* color palette */
+  --dark-tile-color: #ababab;
+  --light-tile-color: #dcdcdc;
+  --useless-tile-color: black;
+  --checked-tile-gradient: radial-gradient(circle, red 20%, white 80%);
+  --primary-text-color: black;
+  --secondary-text-color: white;
+  --app-background-color: black;
+  --button-background-color: #779556;
 }
 
 body {