style: 💄 Updated CSS files to fix text color and background color in go to tack page

Author: Yashasewi

src/components/ChallengesPanel.module.css

@@ -112,7 +112,7 @@
   height: var(--baseline-4x);
   border-bottom: var(--border-cyan);
   border-left: var(--border-cyan);
-  background-color: white;
+  background-color: var(--background-color);
   overflow-x: hidden;
   overflow-y: auto;
 

src/components/CodeExampleList.module.css

@@ -44,6 +44,7 @@
   flex-shrink: 0;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: var(--text-color);
 }
 
 .description {
@@ -52,6 +53,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: var(--space);
+  color: var(--text-color);
 }
 
 .icon {
@@ -73,13 +75,13 @@
     text-decoration: underline;
     text-transform: lowercase;
     white-space: nowrap;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
   & .linkIcon {
     font-family: var(--maru-emoji);
     font-size: var(--maru-emoji-normal);
     text-decoration: none;
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
 }
 
@@ -123,7 +125,7 @@
 @media (--reduced) {
   .red .example,
   .cyan .example {
-    background-color: white;
+    background-color: var(--background-color);
   }
 
   .description {

src/components/CreditList.module.css

@@ -8,7 +8,7 @@
   align-items: center;
   padding-left: var(--box-padding);
   border-left: var(--border);
-  color: var(--gray-dark);
+  color: var(--text-color);
 
   &:first-child {
     margin-top: -2px;
@@ -57,7 +57,7 @@
 @media (--reduced) {
   .red .credit,
   .cyan .credit {
-    background-color: white;
+    background-color: var(--background-color);
   }
 }
 

src/components/LinkList.module.css

@@ -9,7 +9,7 @@
   border-top: var(--border);
   border-bottom: var(--border);
   border-left: var(--border);
-  color: var(--gray-dark);
+  color: var(--text-color);
 }
 
 .icon,
@@ -36,7 +36,7 @@
   text-decoration: underline;
   white-space: nowrap;
   text-overflow: ellipsis;
-  color: var(--gray-dark);
+  color: var(--text-color);
   font-size: var(--maru-large);
 }
 
@@ -89,7 +89,7 @@
 
   .red .link,
   .cyan .link {
-    background-color: white;
+    background-color: var(--background-color);
   }
 }
 

src/components/NebulaVideoRow.module.css

@@ -1,8 +1,7 @@
 .root {
   height: var(--baseline);
   border-left: var(--border);
-  background: white;
-
+  background-color: var(--background-color);
   display: flex;
   align-items: center;
   padding: 0 6px;

src/components/PassengerShowcasePanel.module.css

@@ -12,7 +12,7 @@
   border-left: var(--border-purple);
   border-bottom: var(--border-purple);
   text-transform: uppercase;
-  color: var(--gray-dark);
+  color: var(--text-color);
   background-color: var(--purple-light);
 
   & * {
@@ -62,7 +62,7 @@
 }
 
 .title {
-  color: var(--gray-dark);
+  color: var(--text-color);
   text-transform: uppercase;
   border-bottom: var(--border-purple);
   border-left: var(--border-purple);
@@ -81,7 +81,7 @@
 
 .author {
   margin: 0;
-  color: var(--gray-dark);
+  color: var(--text-color);
   border-bottom: var(--border-purple);
   border-left: var(--border-purple);
   min-height: var(--baseline);

src/components/ShareButton.module.css

@@ -46,7 +46,7 @@ span.linkIcon {
   line-height: var(--baseline-1of2);
   cursor: auto;
   background-color: var(--gray-light);
-  color: var(--gray-dark);
+  color: var(--text-color);
 }
 
 .copiedNotificationLeft {

src/components/Tabs.module.css

@@ -29,7 +29,8 @@
   cursor: pointer;
   font-family: var(--maru-mono);
   text-transform: none;
-  color: var(--gray-dark);
+  /* color: var(--gray-dark); */
+  color: var(--text-color);
   user-select: none;
 }
 
@@ -73,7 +74,7 @@
   & .tab:hover,
   & .active {
     background-color: var(--red-light);
-    color: var(--gray-dark);
+    color: var(--text-color);
   }
 }
 
@@ -91,7 +92,8 @@
   & .tab:hover,
   & .active {
     background-color: var(--cyan-light);
-    color: var(--gray-dark);
+    /* color: var(--gray-dark); */
+    color: var(--text-color);
   }
 }
 
@@ -150,6 +152,7 @@
 
   .share {
     display: none;
+    background-color: var(--background-color);
   }
 }
 

src/components/TimestampTimeline.module.css

@@ -39,7 +39,7 @@
   flex-grow: 1;
   line-height: var(--baseline-1of4);
   text-align: left;
-  color: var(--gray-dark);
+  color: var(--text-color);
 }
 
 .message {

src/components/VideoCard.module.css

@@ -192,7 +192,7 @@
   max-height: var(--baseline-box-5x);
   overflow: hidden;
   text-overflow: ellipsis;
-  background-color: white;
+  background-color: var(--background-color);
 }
 
 .right {