Reduce theme colors to three (primary, secondary, accent)

Removes --white-color & --black-color

src/css/_base.scss

@@ -1,4 +1,3 @@
-@import "base/colors";
 @import "base/breakpoints";
 @import "base/icon";
 @import "base/select";
@@ -8,7 +7,7 @@ html {
   height: 100%;
   body {
     height: 100%;
-    color: var(--color-black);
+    color: var(--color-accent);
     margin: 0;
 
     .root {
@@ -37,10 +36,6 @@ html {
       overflow-y: auto;
     }
 
-    .border-black {
-      border: 1px $black solid;
-    }
-
     .font-cairo {
       font-family: "Cairo Regular";
     }
@@ -58,7 +53,7 @@ html {
     }
 
     .color-secondary {
-      color: var(--secondary-color);
+      color: var(--secondary-color) !important;
     }
 
     .color-accent {

src/css/base/_select.scss

@@ -22,18 +22,12 @@
     }
   }
 
-  .react-select.language-select {
-    li a {
-      border: 1px solid var(--black-color);
-    }
-  }
-
   .react-select.language-select {
     li a {
       background: var(--primary-color);
-      color: $white;
+      color: var(--secondary-color);
       &:active, &:visited, &:link {
-        color: var(--white-color);
+        color: var(--secondary-color);
       }
       &:hover {
         font-weight: bold;

src/css/main/SurahIndex.scss

@@ -5,7 +5,7 @@
 body .root .content.theme {
   ul.body.index {
     li, li a {
-      color: var(--black-color);
+      color: var(--accent-color);
       @media (max-width: $breakpoint-sm) {
         width: 100%;
       }
@@ -32,9 +32,9 @@ body .root .content.theme {
 
   footer {
     a {
-      color: var(--black-color);
+      color: var(--accent-color);
       &:active, &:link, &:visited {
-        color: var(--black-color);
+        color: var(--accent-color);
       }
       &:hover {
         font-weight: bold;
@@ -42,7 +42,7 @@ body .root .content.theme {
     }
 
     input {
-      color: var(--black-color);
+      color: var(--accent-color);
       border: 1px solid var(--primary-color);
       &:focus {
         outline-color: var(--primary-color);
@@ -74,12 +74,6 @@ body .root .content.theme {
  */
 body .root .content.theme.rtl {
   ul.body.index {
-    li a {
-      span:first-child {
-        border: 1px solid var(--black-color);
-      }
-    }
-
     li.surah {
       span.transliterated { display: none; }
     }

src/css/themes/blue.scss

@@ -4,8 +4,6 @@
 
 .root .content.theme.blue {
   --primary-color: #3383C3;
-  --secondary-color: #3383C3;
-  --accent-color: #3383C3;
-  --black-color: #444444;
-  --white-color: #FFF;
+  --secondary-color: #FFF;
+  --accent-color: #444;
 }

src/css/themes/green.scss

@@ -4,8 +4,6 @@
 
 .root .content.theme.green {
   --primary-color: #6d765b;
-  --secondary-color: #6C755A;
-  --accent-color: #FFF;
-  --white-color: #FFF;
-  --black-color: #444;
+  --secondary-color: #FFF;
+  --accent-color: #444;
 }

src/js/components/Head.tsx

@@ -24,7 +24,7 @@ export function Head({ locale, theme, setTheme, children }: Props) {
           <a
             data-testid="h1"
             href={`/${locale.name}/`}
-            className="flex rounded justify-center p-3 m-0 mb-4 w-full no-underline font-semibold text-2xl"
+            className="flex rounded justify-center p-3 m-0 mb-4 w-full no-underline font-semibold color-secondary text-2xl"
           >
             {children}
           </a>

src/js/components/SurahIndex/index.tsx

@@ -54,11 +54,11 @@ export function SurahIndex({ locale, surahs, t }: Props) {
               href={`/${locale.name}/${surah.urlName}/`}
             >
               {locale.direction === "ltr" ? (
-                <span className="background-secondary color-white ml-2 mr-3 font-extrabold w-10 text-center">
+                <span className="background-primary color-secondary ml-2 mr-3 font-extrabold w-10 text-center">
                   {formatNumber(locale, surah.id)}
                 </span>
               ) : (
-                <span className="flex items-center font-extrabold justify-center color-white background-secondary w-8 h-8 p-1 ml-5 rounded">
+                <span className="flex items-center font-extrabold justify-center color-secondary background-primary w-8 h-8 p-1 ml-5 rounded">
                   {formatNumber(locale, surah.id)}
                 </span>
               )}

src/js/components/SurahStream/Stream.tsx

@@ -43,7 +43,7 @@ export function Stream({
                 "mb-5": !isArabic,
               })}
             >
-              <span className="flex h-8 items-center">
+              <span className="flex h-8 items-center color-primary">
                 <AudioControl
                   hidden={!(isPaused || endOfStream)}
                   audio={new Audio()}
@@ -66,7 +66,7 @@ export function Stream({
                   {formatNumber(locale, surah.ayat.length)}
                 </span>
               </span>
-              <p className={classNames("m-0", { "text-2xl mt-2": isArabic })}>
+              <p className={classNames("m-0 color-accent", { "text-2xl mt-2": isArabic })}>
                 {ayah.body}
               </p>
             </li>