Merge pull request #138 from abhikumar63/63abhikumar

:broom: chore: Rename variables' name to make them kebab cased

public/static/colorschemes/catppuccin-mocha.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #1e1e2e;
-  --fg: #cdd6f4;
-  --1: #45475a;
-  --2: #f38ba8;
-  --3: #a6e3a1;
-  --4: #f9e2af;
-  --5: #89b4fa;
-  --6: #f5c2e7;
-  --7: #ffffff;
+  --background-color: #1e1e2e;
+  --foreground-color: #cdd6f4;
+  --color-one: #45475a;
+  --color-two: #f38ba8;
+  --color-three: #a6e3a1;
+  --color-four: #f9e2af;
+  --color-five: #89b4fa;
+  --color-six: #f5c2e7;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/dark-chocolate.css

@@ -1,11 +1,11 @@
 :root {
-    --bg: #000000;
-    --fg: #ffffff;
-    --1: #121212;
-    --2: #808080;
-    --3: #999999;
-    --4: #666666;
-    --5: #bfbfbf;
-    --6: #e0e0e0;
-    --7: #555555;
-  }
+  --background-color: #000000;
+  --foreground-color: #ffffff;
+  --color-one: #121212;
+  --color-two: #808080;
+  --color-three: #999999;
+  --color-four: #666666;
+  --color-five: #bfbfbf;
+  --color-six: #e0e0e0;
+  --color-seven: #555555;
+}

public/static/colorschemes/dracula.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #44475a;
-  --fg: #8be9fd;
-  --1: #ff5555;
-  --2: #50fa7b;
-  --3: #ffb86c;
-  --4: #bd93f9;
-  --5: #ff79c6;
-  --6: #94a3a5;
-  --7: #ffffff;
+  --background-color: #44475a;
+  --foreground-color: #8be9fd;
+  --color-one: #ff5555;
+  --color-two: #50fa7b;
+  --color-three: #ffb86c;
+  --color-four: #bd93f9;
+  --color-five: #ff79c6;
+  --color-six: #94a3a5;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/gruvbox-dark.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #282828;
-  --fg: #ebdbb2;
-  --1: #cc241d;
-  --2: #98971a;
-  --3: #d79921;
-  --4: #458588;
-  --5: #b16286;
-  --6: #689d6a;
-  --7: #ffffff;
+  --background-color: #282828;
+  --foreground-color: #ebdbb2;
+  --color-one: #cc241d;
+  --color-two: #98971a;
+  --color-three: #d79921;
+  --color-four: #458588;
+  --color-five: #b16286;
+  --color-six: #689d6a;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/monokai.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #403e41;
-  --fg: #fcfcfa;
-  --1: #ff6188;
-  --2: #a9dc76;
-  --3: #ffd866;
-  --4: #fc9867;
-  --5: #ab9df2;
-  --6: #78dce8;
-  --7: #ffffff;
+  --background-color: #403e41;
+  --foreground-color: #fcfcfa;
+  --color-one: #ff6188;
+  --color-two: #a9dc76;
+  --color-three: #ffd866;
+  --color-four: #fc9867;
+  --color-five: #ab9df2;
+  --color-six: #78dce8;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/nord.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #2e3440;
-  --fg: #d8dee9;
-  --1: #3b4252;
-  --2: #bf616a;
-  --3: #a3be8c;
-  --4: #ebcb8b;
-  --5: #81a1c1;
-  --6: #b48ead;
-  --7: #ffffff;
+  --background-color: #2e3440;
+  --foreground-color: #d8dee9;
+  --color-one: #3b4252;
+  --color-two: #bf616a;
+  --color-three: #a3be8c;
+  --color-four: #ebcb8b;
+  --color-five: #81a1c1;
+  --color-six: #b48ead;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/oceanic-next.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #1b2b34;
-  --fg: #d8dee9;
-  --1: #343d46;
-  --2: #ec5f67;
-  --3: #99c794;
-  --4: #fac863;
-  --5: #6699cc;
-  --6: #c594c5;
-  --7: #ffffff;
+  --background-color: #1b2b34;
+  --foreground-color: #d8dee9;
+  --color-one: #343d46;
+  --color-two: #ec5f67;
+  --color-three: #99c794;
+  --color-four: #fac863;
+  --color-five: #6699cc;
+  --color-six: #c594c5;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/one-dark.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #282c34;
-  --fg: #abb2bf;
-  --1: #3b4048;
-  --2: #a3be8c;
-  --3: #b48ead;
-  --4: #c8ccd4;
-  --5: #e06c75;
-  --6: #61afef;
-  --7: #be5046;
+  --background-color: #282c34;
+  --foreground-color: #abb2bf;
+  --color-one: #3b4048;
+  --color-two: #a3be8c;
+  --color-three: #b48ead;
+  --color-four: #c8ccd4;
+  --color-five: #e06c75;
+  --color-six: #61afef;
+  --color-seven: #be5046;
 }

public/static/colorschemes/solarized-dark.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #002b36;
-  --fg: #839496;
-  --1: #073642;
-  --2: #dc322f;
-  --3: #859900;
-  --4: #b58900;
-  --5: #268bd2;
-  --6: #d33682;
-  --7: #ffffff;
+  --background-color: #002b36;
+  --foreground-color: #839496;
+  --color-one: #073642;
+  --color-two: #dc322f;
+  --color-three: #859900;
+  --color-four: #b58900;
+  --color-five: #268bd2;
+  --color-six: #d33682;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/solarized-light.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #fdf6e3;
-  --fg: #657b83;
-  --1: #073642;
-  --2: #dc322f;
-  --3: #859900;
-  --4: #b58900;
-  --5: #268bd2;
-  --6: #d33682;
-  --7: #ffffff;
+  --background-color: #fdf6e3;
+  --foreground-color: #657b83;
+  --color-one: #073642;
+  --color-two: #dc322f;
+  --color-three: #859900;
+  --color-four: #b58900;
+  --color-five: #268bd2;
+  --color-six: #d33682;
+  --color-seven: #ffffff;
 }

public/static/colorschemes/tokyo-night.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #1a1b26;
-  --fg: #c0caf5;
-  --1: #32364a;
-  --2: #a9b1d6;
-  --3: #5a5bb8;
-  --4: #6b7089;
-  --5: #e2afff;
-  --6: #a9a1e1;
-  --7: #988bc7;
+  --background-color: #1a1b26;
+  --foreground-color: #c0caf5;
+  --color-one: #32364a;
+  --color-two: #a9b1d6;
+  --color-three: #5a5bb8;
+  --color-four: #6b7089;
+  --color-five: #e2afff;
+  --color-six: #a9a1e1;
+  --color-seven: #988bc7;
 }

public/static/colorschemes/tomorrow-night.css

@@ -1,11 +1,11 @@
 :root {
-  --bg: #1d1f21;
-  --fg: #c5c8c6;
-  --1: #cc6666;
-  --2: #b5bd68;
-  --3: #f0c674;
-  --4: #81a2be;
-  --5: #b294bb;
-  --6: #8abeb7;
-  --7: #ffffff;
+  --background-color: #1d1f21;
+  --foreground-color: #c5c8c6;
+  --color-one: #cc6666;
+  --color-two: #b5bd68;
+  --color-three: #f0c674;
+  --color-four: #81a2be;
+  --color-five: #b294bb;
+  --color-six: #8abeb7;
+  --color-seven: #ffffff;
 }

public/static/themes/simple.css

@@ -16,7 +16,7 @@ body {
   justify-content: space-between;
   align-items: center;
   height: 100vh;
-  background: var(--1);
+  background: var(--color-one);
 }
 
 /* styles for the index page */
@@ -46,7 +46,7 @@ body {
   outline: none;
   border: none;
   box-shadow: rgba(0, 0, 0, 1);
-  background: var(--fg);
+  background: var(--foreground-color);
 }
 
 .search_bar button {
@@ -59,8 +59,8 @@ body {
   outline: none;
   border: none;
   gap: 0;
-  background: var(--bg);
-  color: var(--3);
+  background: var(--background-color);
+  color: var(--color-three);
   font-weight: 600;
   letter-spacing: 0.1rem;
 }
@@ -73,7 +73,7 @@ body {
 /* styles for the footer and header */
 
 header {
-  background: var(--bg);
+  background: var(--background-color);
   width: 100%;
   display: flex;
   justify-content: right;
@@ -96,7 +96,7 @@ footer ul li a,
 header ul li a:visited,
 footer ul li a:visited {
   text-decoration: none;
-  color: var(--2);
+  color: var(--color-two);
   text-transform: capitalize;
   letter-spacing: 0.1rem;
 }
@@ -107,12 +107,12 @@ header ul li a {
 
 header ul li a:hover,
 footer ul li a:hover {
-  color: var(--5);
+  color: var(--color-five);
 }
 
 footer div span {
   font-size: 1.5rem;
-  color: var(--4);
+  color: var(--color-four);
 }
 
 footer div {
@@ -121,7 +121,7 @@ footer div {
 }
 
 footer {
-  background: var(--bg);
+  background: var(--background-color);
   width: 100%;
   padding: 1rem;
   display: flex;
@@ -158,28 +158,28 @@ footer {
 
 .results_aggregated .result h1 a {
   font-size: 1.5rem;
-  color: var(--2);
+  color: var(--color-two);
   text-decoration: none;
   letter-spacing: 0.1rem;
 }
 
 .results_aggregated .result h1 a:hover {
-  color: var(--5);
+  color: var(--color-five);
 }
 
 .results_aggregated .result h1 a:visited {
-  color: var(--bg);
+  color: var(--background-color);
 }
 
 .results_aggregated .result small {
-  color: var(--3);
+  color: var(--color-three);
   font-size: 1.1rem;
   word-wrap: break-word;
   line-break: anywhere;
 }
 
 .results_aggregated .result p {
-  color: var(--fg);
+  color: var(--foreground-color);
   font-size: 1.2rem;
   margin-top: 0.3rem;
   word-wrap: break-word;
@@ -190,7 +190,7 @@ footer {
   text-align: right;
   font-size: 1.2rem;
   padding: 1rem;
-  color: var(--5);
+  color: var(--color-five);
 }
 
 /* Styles for the 404 page  */
@@ -233,12 +233,12 @@ footer {
 
 .error_content p a,
 .error_content p a:visited {
-  color: var(--2);
+  color: var(--color-two);
   text-decoration: none;
 }
 
 .error_content p a:hover {
-  color: var(--5);
+  color: var(--color-five);
 }
 
 .page_navigation {
@@ -249,8 +249,8 @@ footer {
 }
 
 .page_navigation button {
-  background: var(--bg);
-  color: var(--fg);
+  background: var(--background-color);
+  color: var(--foreground-color);
   padding: 1rem;
   border-radius: 0.5rem;
   outline: none;
@@ -265,12 +265,12 @@ footer {
 
 .about-container article {
   font-size: 1.5rem;
-  color: var(--fg);
+  color: var(--foreground-color);
   padding-bottom: 10px;
 }
 
 .about-container article h1 {
-  color: var(--2);
+  color: var(--color-two);
   font-size: 2.8rem;
 }
 
@@ -279,17 +279,17 @@ footer {
 }
 
 .about-container a {
-  color: var(--3);
+  color: var(--color-three);
 }
 
 .about-container article h2 {
-  color: var(--3);
+  color: var(--color-three);
   font-size: 1.8rem;
   padding-bottom: 10px;
 }
 
 .about-container p {
-  color: var(--fg);
+  color: var(--foreground-color);
   font-size: 1.6rem;
   padding-bottom: 10px;
 }
@@ -310,12 +310,12 @@ footer {
 }
 
 .settings h1 {
-  color: var(--2);
+  color: var(--color-two);
   font-size: 2.5rem;
 }
 
 .settings hr {
-  border-color: var(--3);
+  border-color: var(--color-three);
   margin: 0.3rem 0 1rem 0;
 }
 
@@ -331,7 +331,7 @@ footer {
   border-radius: 5px;
   font-weight: bold;
   margin-bottom: 0.5rem;
-  color: var(--fg);
+  color: var(--foreground-color);
   text-transform: capitalize;
   gap: 1.5rem;
 }
@@ -342,12 +342,12 @@ footer {
 }
 
 .settings_container .sidebar .btn.active {
-  background-color: var(--2);
+  background-color: var(--color-two);
 }
 
 .settings_container .main_container {
   width: 70%;
-  border-left: 1.5px solid var(--3);
+  border-left: 1.5px solid var(--color-three);
   padding-left: 3rem;
 }
 
@@ -365,8 +365,8 @@ footer {
   margin-top: 1rem;
   padding: 1rem 2rem;
   font-size: 1.5rem;
-  background: var(--3);
-  color: var(--bg);
+  background: var(--color-three);
+  color: var(--background-color);
   border-radius: 0.5rem;
   border: 2px solid transparent;
   font-weight: bold;
@@ -383,13 +383,13 @@ footer {
 
 .settings_container .main_container .message {
   font-size: 1.5rem;
-  color: var(--fg);
+  color: var(--foreground-color);
 }
 
 .settings_container .tab h3 {
   font-size: 2rem;
   font-weight: bold;
-  color: var(--4);
+  color: var(--color-four);
   margin-top: 1.5rem;
   text-transform: capitalize;
 }
@@ -397,14 +397,14 @@ footer {
 .settings_container .tab .description {
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
-  color: var(--fg);
+  color: var(--foreground-color);
 }
 
 .settings_container .user_interface select {
   margin: 0.7rem 0;
   width: 20rem;
-  background-color: var(--bg);
-  color: var(--fg);
+  background-color: var(--background-color);
+  color: var(--foreground-color);
   padding: 1rem 2rem;
   border-radius: 0.5rem;
   outline: none;
@@ -413,7 +413,7 @@ footer {
 }
 
 .settings_container .user_interface option:hover {
-  background-color: var(--1);
+  background-color: var(--color-one);
 }
 
 .settings_container .engines .engine_selection {
@@ -425,7 +425,7 @@ footer {
 }
 
 .settings_container .engines .toggle_btn {
-  color: var(--fg);
+  color: var(--foreground-color);
   font-size: 1.5rem;
   display: flex;
   gap: 0.5rem;
@@ -464,7 +464,7 @@ footer {
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--bg);
+  background-color: var(--background-color);
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
@@ -476,17 +476,17 @@ footer {
   width: 2.6rem;
   left: 0.4rem;
   bottom: 0.4rem;
-  background-color: var(--fg);
+  background-color: var(--foreground-color);
   -webkit-transition: 0.4s;
   transition: 0.4s;
 }
 
 input:checked + .slider {
-  background-color: var(--3);
+  background-color: var(--color-three);
 }
 
 input:focus + .slider {
-  box-shadow: 0 0 1px var(--3);
+  box-shadow: 0 0 1px var(--color-three);
 }
 
 input:checked + .slider:before {