Refactor CSS variables

ekaterinburgdev · Sep 17, 2023 · dfb422f · dfb422f
1 parent 8c49947
commit dfb422f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 38 deletions.
diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
@@ -24,7 +24,7 @@
 }
 
 .Card_Public {
-    background-color: var(--cards-public-bgr);
+    background-color: var(--cards-public-bg);
     color: var(--cards-public-text);
 }
 
@@ -33,12 +33,12 @@
 }
 
 .Card_Public:hover {
-    background-color: var(--cards-public-bgr-hover);
+    background-color: var(--cards-public-bg-hover);
     color: white;
 }
 
 .Card_Pedestrian {
-    background-color: var(--cards-pedestrian-bgr);
+    background-color: var(--cards-pedestrian-bg);
     color: var(--cards-pedestrian-text);
 }
 
@@ -47,26 +47,26 @@
 }
 
 .Card_Pedestrian:hover {
-    background-color: var(--cards-pedestrian-bgr-hover);
+    background-color: var(--cards-pedestrian-bg-hover);
     color: white;
 }
 
 .Card_Car {
-    background-color: var(--cards-automobile-bgr);
-    color: var(--cards-automobile-text);
+    background-color: var(--cards-car-bg);
+    color: var(--cards-car-text);
 }
 
 .Card_Car .CardTitle {
     text-decoration-color: rgba(92, 17, 10, .15);
 }
 
 .Card_Car:hover {
-    background-color: var(--cards-automobile-bgr-hover);
+    background-color: var(--cards-car-bg-hover);
     color: white;
 }
 
 .Card_Other {
-    background-color: var(--cards-other-bgr);
+    background-color: var(--cards-other-bg);
     color: var(--cards-other-text);
 }
 
@@ -75,7 +75,7 @@
 }
 
 .Card_Other:hover {
-    background-color: var(--cards-other-bgr-hover);
+    background-color: var(--cards-other-bg-hover);
     color: white;
 }
 

diff --git a/client/styles/colors.css b/client/styles/colors.css
@@ -7,41 +7,23 @@
     --functional: #55647D;
     --functional-tram: #9BAAC3;
 
-    --divider: rgba(0, 0, 0, 0.12);
-
     --bus: #00B400;
     --bus-translucent: #6DC76D;
     --tram: #FF640F;
     --tram-translucent: #ED9F74;
     --troll: #00B4FF;
     --troll-translucent: #80D9FF;
 
-    --cards-other-bgr: #F8F9FC;
-    --cards-other-bgr-hover: #00B4FF;
-    --cards-other-text: #0C1B27;
-
-    --cards-pedestrian-bgr: #FAF4EF;
-    --cards-pedestrian-bgr-hover: #FF640F;
+    --cards-pedestrian-bg: #FAF4EF;
+    --cards-pedestrian-bg-hover: #FF640F;
     --cards-pedestrian-text: #4C3F00;
-
-    --cards-public-bgr: #F5FBF5;
-    --cards-public-bgr-hover: #00B400;
-    --cards-public-text: rgb(4, 72, 21);
-
-    --cards-automobile-bgr: #FEF6F6;
-    --cards-automobile-bgr-hover: #E63223;
-    --cards-automobile-text: #5C110A;
+    --cards-public-bg: #F5FBF5;
+    --cards-public-bg-hover: #00B400;
+    --cards-public-text: #044815;
+    --cards-car-bg: #FEF6F6;
+    --cards-car-bg-hover: #E63223;
+    --cards-car-text: #5C110A;
+    --cards-other-bg: #F8F9FC;
+    --cards-other-bg-hover: #00B4FF;
+    --cards-other-text: #0C1B27;
 }
-
-/* TODO: dark theme */
-/* @media (prefers-color-scheme: dark) {
-    :root {
-        --background-primary: black;
-        --text-primary: white;
-        --background-secondary: black;
-        --text-secondary: white;
-        --functional: #f2f2f2;
-
-        --divider: #2a2b3c;
-    }
-} */