fix! modify tailwind compatible colours for dark mode

TheBigSasha · Sep 1, 2023 · c9b1d7d · c9b1d7d
1 parent cd1b060
commit c9b1d7d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 49 deletions.
diff --git a/src/lib/components/organisms/navmenu/navmenu.module.scss b/src/lib/components/organisms/navmenu/navmenu.module.scss
@@ -179,7 +179,7 @@
   @extend .nav_menu_item;
   & a {
     text-decoration: none;
-    color: var(--gray-100);
+    color: var(--gray-700);
     font-size: var(--font-size-lg);
     padding: var(--space-md);
   }
@@ -191,11 +191,11 @@
   @extend .nav_menu_item;
   font-variant-caps: all-petite-caps;
   padding: 0;
-  color: var(--gray-400);
+  color: var(--gray-500);
   font-family: var(--font-sans);
   font-weight: var(--font-weight-bold);
   letter-spacing: var(--tracking-condensed);
-  border-bottom: 1px solid var(--gray-600);
+  border-bottom: 1px solid var(--gray-200);
 }
 
 .nav_menu_list {
@@ -230,9 +230,9 @@
     font-size: 22px;
     height: 0.1em;
     transition: all 0.3s ease-out;
-    color: var(--gray-100);
+    color: var(--gray-600);
     line-height: 1px;
-    fill: var(--gray-100);
+    fill: var(--gray-600);
     stroke: none;
   }
   & > .nav_check_rect {
@@ -284,7 +284,7 @@
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-bold);
     font-family: var(--font-sans);
-    color: var(--gray-300);
+    color: var(--gray-700);
     font-variant-caps: all-petite-caps;
     margin: 0;
     text-decoration: none;
@@ -294,7 +294,7 @@
     & > .nav_link_icon {
       width: 1rem;
       height: 1rem;
-      fill: var(--gray-100);
+      fill: var(--gray-800);
       stroke: none;
       transition: all 0.3s ease-out;
     }

diff --git a/src/lib/styles/variables/defaultvariables.scss b/src/lib/styles/variables/defaultvariables.scss
@@ -34,25 +34,29 @@
   --padding: 1rem;
   --space-md: 1rem;
 
-  @media (prefers-color-scheme: dark) {
-    --primary-color: #ff0084;
-    --secondary-color: #21f7ec;
-    --text-color: #ffffff;
-    --background-color: rgba(0, 0, 0, 0.89);
-    --second-background-color: #{rgba(lighten(#120012, 10%), 0.1)};
-    --disabled-color: hsla(0, 100%, 77%, 0.04);
-    --card-background-color: rgba(12, 2, 32, 0.89);
-    --tpcard-background-color: rgba(23, 20, 29, 0.084);
-    --navmenu-background-color: rgba(26, 10, 10, 0.746);
-    --background-3d-color: rgb(0, 0, 0);
-    --info-color: #21f7ec;
-    --success-color: #00ff00;
-    --warning-color: #ffcc00;
-    --error-color: #ff0000;
-    --hover-color-navmenu: #0099ff29;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+  --primary-color: #ff0084;
+  --secondary-color: #21f7ec;
+  --text-color: #ffffff;
+  --background-color: rgba(0, 0, 0, 0.89);
+  --second-background-color: #{rgba(lighten(#120012, 10%), 0.1)};
+  --disabled-color: hsla(0, 100%, 77%, 0.04);
+  --card-background-color: rgba(12, 2, 32, 0.89);
+  --tpcard-background-color: rgba(23, 20, 29, 0.084);
+  --navmenu-background-color: rgba(26, 10, 10, 0.746);
+  --background-3d-color: rgb(0, 0, 0);
+  --info-color: #21f7ec;
+  --success-color: #00ff00;
+  --warning-color: #ffcc00;
+  --error-color: #ff0000;
+  --hover-color-navmenu: #0099ff29;
   }
 }
 
+
 html {
   background-color: white;
   @media (prefers-color-scheme: dark) {

diff --git a/src/lib/styles/variables/tailwind-compatible.scss b/src/lib/styles/variables/tailwind-compatible.scss
@@ -25,32 +25,32 @@ $gray_levels_light: (
 );
 
 @each $level, $color in $gray_levels_dark {
-  @media (prefers-color-scheme: dark) {
+  .bg-gray-#{$level} {
+    background-color: map-get($gray_levels_dark, $level);
+  }
+  .text-gray-#{$level} {
+    color: map-get($gray_levels_dark, $level);
+  }
+  .border-gray-#{$level} {
+    border-color: map-get($gray_levels_dark, $level);
+  }
+  :root {
+    --gray-#{$level}: #{map-get($gray_levels_dark, $level)};
+  }
+  @media (prefers-color-scheme: light) {
     .bg-gray-#{$level} {
-      background-color: map-get($gray_levels_dark, $level);
+      background-color: map-get($gray_levels_light, $level);
     }
     .text-gray-#{$level} {
-      color: map-get($gray_levels_dark, $level);
+      color: map-get($gray_levels_light, $level);
     }
     .border-gray-#{$level} {
-      border-color: map-get($gray_levels_dark, $level);
+      border-color: map-get($gray_levels_light, $level);
     }
     :root {
-      --gray-#{$level}: #{map-get($gray_levels_dark, $level)};
+      --gray-#{$level}: #{map-get($gray_levels_light, $level)};
     }
   }
-  .bg-gray-#{$level} {
-    background-color: map-get($gray_levels_light, $level);
-  }
-  .text-gray-#{$level} {
-    color: map-get($gray_levels_light, $level);
-  }
-  .border-gray-#{$level} {
-    border-color: map-get($gray_levels_light, $level);
-  }
-  :root {
-    --gray-#{$level}: #{map-get($gray_levels_light, $level)};
-  }
 }
 
 $text-sizes: (
@@ -165,14 +165,18 @@ $font-weights: (
 );
 
 @each $size, $value in $font-weights {
-  .font-#{'' + $size} {
+  .font-#{$size} {
     font-weight: $value;
   }
   :root {
-    --font-#{"" + $size}: #{$value};
+    --font-#{$size}: #{$value};
   }
 }
 
+.height-320 {
+  height: 320px;
+}
+
 $spaces: (
   0: 0,
   1: 0.25rem,
@@ -204,12 +208,6 @@ $spaces: (
   72: 18rem,
   80: 20rem,
   96: 24rem,
-  xs: 0.25rem,
-  sm: 0.5rem,
-  md: 1rem,
-  lg: 1.5rem,
-  xl: 2rem,
-  '2xl': 3rem,
 );
 
 @each $size, $value in $spaces {
@@ -260,7 +258,7 @@ $spaces: (
     margin-bottom: $value;
   }
   :root {
-    --space-#{"" + $size}: #{$value};
+    --space-#{$size}: #{$value};
   }
 }