updating the theming on the web app side

AnselmMarie · Sep 16, 2024 · b0ac073 · b0ac073
1 parent 0a3cae2
commit b0ac073
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 97 deletions.
diff --git a/libs/features/src/lib/cart/cart.modal/cart.modal.module.css b/libs/features/src/lib/cart/cart.modal/cart.modal.module.css
@@ -6,7 +6,7 @@
 }
 
 .cartContent {
-  padding: 15px;
+  padding: var(--theme-spacing-15);
   height: calc(100% - 60px);
   overflow-x: scroll;
 }
@@ -17,7 +17,7 @@
 
 .cardContentRow {
   display: flex;
-  gap: 15px;
+  gap: var(--theme-spacing-15);
 }
 
 .image {
@@ -26,20 +26,20 @@
 }
 
 .sep {
-  background-color: #666;
+  background-color: var(--theme-netural-400);
   width: 100%;
   height: 1px;
-  margin-top: 25px;
-  margin-bottom: 25px;
+  margin-top: var(--theme-spacing-30);
+  margin-bottom: var(--theme-spacing-30);
 }
 
 .totalContent {
   height: 60px;
-  background-color: grey;
-  border-radius: 0 0 8px 8px;
+  background-color: var(--theme-netural-200);
+  border-radius: 0 0 var(--theme-radius-8) var(--theme-radius-8);
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: var(--theme-spacing-15);
 }
diff --git a/libs/features/src/lib/navigation/header/header.module.css b/libs/features/src/lib/navigation/header/header.module.css
@@ -19,8 +19,8 @@
   margin: 0 var(--theme-spacing-15);
   padding: var(--theme-spacing-10) var(--theme-spacing-15);
   align-items: center;
-  border-radius: 100px;
-  background: grey;
+  border-radius: var(--theme-radius-pill);
+  background: var(--theme-netural-200);
 }
 
 .navTitle {

diff --git a/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.css b/libs/features/src/lib/navigation/nav.mobile/nav.mobile.module.css
@@ -11,7 +11,7 @@
   justify-content: space-between;
   flex: 1;
   flex-direction: column;
-  margin: 0 15px 15px;
+  margin: 0 var(--theme-spacing-15) var(--theme-spacing-15);
 }
 
 .switchWrapper {

diff --git a/.../features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css b/.../features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css
@@ -4,7 +4,7 @@
   justify-items: center;
   width: 100%;
   align-items: center;
-  margin-bottom: 5px;
+  margin-bottom: var(--theme-spacing-5);
 }
 
 .atkLine {
@@ -14,8 +14,8 @@
 .atkCircle {
   height: 17px;
   width: 17px;
-  border-radius: 100px;
-  margin-right: 5px;
+  border-radius: var(--theme-radius-circle);
+  margin-right: var(--theme-spacing-5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -30,14 +30,14 @@
     margin-left: -15px;
   }
 
-  .atkWrapper {
+  /* .atkWrapper {
     display: flex;
     height: 17px;
     justify-items: center;
     width: 100%;
     align-items: center;
-    margin-bottom: 5px;
-  }
+    margin-bottom: var(--theme-spacing-5);
+  } */
 
   .atkLine {
     height: 100%;
@@ -49,15 +49,15 @@
     margin-left: -10px;
   }
 
-  .atkCircle {
+  /* .atkCircle {
     height: 17px;
     width: 17px;
-    border-radius: 100px;
-    margin-right: 5px;
+    border-radius: var(--theme-radius-circle);
+    margin-right: var(--theme-spacing-5);
     display: flex;
     justify-content: center;
     align-items: center;
-  }
+  } */
 
   .atkText {
     font-size: 10px;

diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css
@@ -3,16 +3,16 @@
   height: 154px;
   display: flex;
   padding: 5px;
-  border-radius: 10px;
+  border-radius: var(--theme-radius-8);
   flex-direction: row;
   position: relative;
 }
 
 .imgCardWrapper {
   max-width: 115px;
   background: red;
-  border-radius: 10px;
-  padding: 5px;
+  border-radius: var(--theme-radius-8);
+  padding: var(--theme-spacing-5);
   display: flex;
   justify-content: space-between;
   flex-direction: column;
@@ -31,7 +31,7 @@
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  padding: 2px 10px;
+  padding: var(--theme-spacing-2) var(--theme-spacing-5);
 }
 
 .cardSubHeadlineWrapper {
@@ -47,37 +47,10 @@
   font-size: 18px;
 }
 
-.atkWrapper {
-  display: flex;
-  height: 17px;
-  justify-items: center;
-  width: 100%;
-  align-items: center;
-  margin-bottom: 5px;
-}
-
-.atkLine {
-  display: none;
-}
-
-.atkCircle {
-  height: 17px;
-  width: 17px;
-  border-radius: 100px;
-  margin-right: 5px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.atkText {
-  font-size: 13px;
-}
-
 .btnWrapper {
   width: 100%;
   display: flex;
-  gap: 15px;
+  gap: var(--theme-spacing-15);
 }
 
 .btn {
@@ -91,8 +64,8 @@
     height: 367px;
     display: flex;
     justify-content: space-between;
-    padding: 10px;
-    border-radius: 10px;
+    padding: var(--theme-spacing-10);
+    border-radius: var(--theme-radius-8);
     flex-direction: column;
     position: relative;
   }
@@ -129,8 +102,8 @@
   .contentCardWrapper {
     height: 150px;
     align-items: end;
-    border-radius: 10px;
-    padding: 15px;
+    border-radius: var(--theme-radius-8);
+    padding: var(--theme-spacing-15);
     z-index: 1;
     display: flex;
     flex-direction: column;
@@ -142,40 +115,9 @@
     width: 100%;
   }
 
-  .atkWrapper {
-    display: flex;
-    height: 17px;
-    justify-items: center;
-    width: 100%;
-    align-items: center;
-    margin-left: -15px;
-    margin-bottom: 5px;
-  }
-
-  .atkLine {
-    height: 100%;
-    width: 30px;
-    display: block;
-  }
-
-  .atkCircle {
-    height: 17px;
-    width: 17px;
-    border-radius: 100px;
-    margin-left: -10px;
-    margin-right: 5px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .atkText {
-    font-size: 10px;
-  }
-
   .btnWrapper {
     display: flex;
-    gap: 15px;
+    gap: var(--theme-spacing-15);
   }
 
   .btn {

diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css
@@ -28,7 +28,7 @@
 
 .contentContainer {
   height: calc(100% - 500px);
-  border-radius: 0 0 8px 8px;
+  border-radius: 0 0 var(--theme-spacing-5) var(--theme-spacing-5);
   position: relative;
 }
 

diff --git a/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css b/libs/features/src/lib/pokemon/pokemon.list/pokemon.list.module.css
@@ -1,7 +1,7 @@
 .cardListWrapper {
   display: flex;
   align-content: space-between;
-  gap: 25px;
+  gap: var(--theme-spacing-30);
   flex-wrap: wrap;
   justify-content: center;
 }
diff --git a/libs/ui/src/lib-base/styles/css/global.css b/libs/ui/src/lib-base/styles/css/global.css
@@ -6,6 +6,8 @@ html[data-theme='dark'] {
   --theme-netural-200: var(--theme-netural-200-dark);
   --theme-netural-400: var(--theme-netural-400-dark);
   --theme-netural-600: var(--theme-netural-600-dark);
+
+  /* --theme-netural-900: var(--theme-netural-100); */
   --theme-blue-100: var(--theme-blue-100-dark);
   --theme-blue-600: var(--theme-blue-600-dark);
   --theme-green-200: var(--theme-green-200-dark);
@@ -16,8 +18,11 @@ html[data-theme='dark'] {
 
 body {
   background-color: var(--theme-blue-100);
+  color: var(--theme-netural-900);
 }
 
 * {
-  transition: background-color 0.5s;
+  transition:
+    background-color 0.5s,
+    color 0.5s;
 }
diff --git a/libs/ui/src/lib-base/ui/button/button.module.css b/libs/ui/src/lib-base/ui/button/button.module.css
@@ -8,11 +8,11 @@
 }
 
 .buttonPrimary {
-  background: blue;
-  color: white;
+  background: var(--theme-blue-600);
+  color: var(--theme-netural-100);
 }
 
 .buttonSecondary {
-  background: white;
-  color: blue;
+  background: var(--theme-netural-100);
+  color: var(--theme-blue-600);
 }
diff --git a/libs/ui/src/lib-base/ui/modal/modal.module.css b/libs/ui/src/lib-base/ui/modal/modal.module.css
@@ -13,7 +13,7 @@
 .modal {
   width: 100%;
   height: 100%;
-  background: white;
+  background: var(--theme-netural-100);
   position: relative;
 }