chore: creating a colors.css file to manage reusable styles (#1243)

* Issue-1215 made a colors.css file and made all the variables name into that file * Issue-1215 changed the color duplicacy , removed excessive comments --------- Co-authored-by: Jessica Wilkins <[email protected]>
freeCodeCamp · Dec 4, 2024 · cdc1fba · cdc1fba
1 parent 1c866c7
commit cdc1fba
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 44 deletions.
diff --git a/src/stylesheets/App.css b/src/stylesheets/App.css
@@ -1,31 +1,34 @@
-/*Basic CSS reset*/
+@import "./colors.css";
 
+/* Basic CSS reset */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
+
+/* General styles */
+
 fieldset {
   border: none;
 }
-/*General styles*/
 
 html {
   overflow-x: hidden;
 }
 
 body {
   font-family: "Lato", sans-serif;
-  background-color: #0a0a23;
-  color: #ffffff;
+  background-color: var(--bg-primary);
+  color: var(--text-primary);
 }
 
 a {
-  color: #f1be32;
+  color: var(--text-link);
 }
 
 a:hover {
-  color: #acd157;
+  color: var(--text-link-hover);
 }
 
 .fcc-logo {
@@ -35,7 +38,6 @@ a:hover {
   display: block;
 }
 
-/* Common shared styles */
 .select-quiz-styles,
 .quiz-div,
 .results-div {
@@ -45,7 +47,7 @@ a:hover {
   align-items: center;
 }
 
-/*Quiz styles*/
+/* Quiz styles */
 .quiz-heading,
 .results-heading {
   font-family: "Roboto Mono", monospace;
@@ -65,7 +67,7 @@ a:hover {
   font-size: 1.2rem;
   margin: 10px 0;
   padding: 10px;
-  background-color: #ffffff;
+  background-color: var(--text-primary);
   border-radius: 15px;
   border: none;
   cursor: pointer;
@@ -75,17 +77,18 @@ a:hover {
 
 .select-btns:hover,
 .answers-btns:hover {
-  box-shadow: -1px -1px 15px rgb(245 242 247 / 70%);
+  box-shadow: -1px -1px 15px var(--effect-shadow);
 }
+
 .answers-btns--selected {
-  background-color: #f1be32;
+  background-color: var(--bg-answer-selected);
 }
 
 .quiz-btn,
 .results-btn,
 .modal-btn {
-  background-color: #acd157;
-  border: 3px solid #acd157;
+  background-color: var(--bg-button);
+  border: 3px solid var(--border-primary);
   font-size: 1.2rem;
   padding: 5px;
 }
@@ -126,20 +129,20 @@ hr {
 
 .submit-btn {
   font-weight: bold;
-  color: #ffffff;
+  color: var(--text-primary);
   background-color: transparent;
   opacity: 0.5;
-  border: 2px solid #ffffff;
+  border: 2px solid var(--text-primary);
 }
 
-/*Results styles*/
+/* Results styles */
 .results-text {
   font-size: 1.3rem;
   margin-top: 20px;
 }
 
 .results-rpg-link {
-  color: #f1be32;
+  color: var(--text-link);
 }
 
 @media screen and (max-width: 460px) {

diff --git a/src/stylesheets/Button.css b/src/stylesheets/Button.css
@@ -1,33 +1,34 @@
-:root {
-  --gray-00: #fff;
-}
+@import "./colors.css";
 
 .btn-default {
   width: 100px;
   margin: 10px;
-  font-family: Roboto Mono, monospace;
+  font-family: "Roboto Mono", monospace;
   font-size: 18px;
-  color: #0a0a23;
-  background-color: #feac32;
-  background-image: linear-gradient(#fecc4c, #ffac33);
-  border-color: #feac32;
+  color: var(--bg-primary);
+  background-color: var(--bg-gradient-end);
+  background-image: linear-gradient(
+    var(--bg-gradient-start),
+    var(--bg-gradient-end)
+  );
+  border-color: var(--bg-gradient-end);
   border-width: 3px;
 }
 
 .transparent-btn {
   height: 32px;
-  font-family: lato, sans-serif;
+  font-family: "Lato", sans-serif;
   font-size: 18px;
   background: transparent;
-  color: var(--gray-00, #fff);
-  border: 1px solid var(--gray-00, #fff);
+  color: var(--gray-00, var(--text-primary));
+  border: 1px solid var(--gray-00, var(--border-transparent));
   cursor: pointer;
 }
 
 .transparent-btn:hover {
   font-weight: bold;
-  background-color: var(--gray-00, #fff);
-  color: #0a0a23;
+  background-color: var(--gray-00, var(--bg-transparent-hover));
+  color: var(--bg-primary);
 }
 
 .large-btn {

diff --git a/src/stylesheets/ButtonLink.css b/src/stylesheets/ButtonLink.css
@@ -1,8 +1,5 @@
-:root {
-  --border-dark-color: #aa8144;
-  --border-light-color: #f5aa3a;
-  --text-color: #0a0a23;
-}
+@import "./colors.css";
+
 .btn-default.btn--link {
   /*i named it btn--link because bootstrap has already btn-link class*/
   display: flex;
@@ -15,11 +12,11 @@
   border-right-color: var(--border-dark-color);
 }
 .btn--link:hover {
-  color: var(--text-color);
+  color: var(--bg-primary);
 }
 .btn--link:active,
 .btn--link:focus {
-  color: var(--text-color);
+  color: var(--bg-primary);
   border-bottom-color: var(--border-light-color);
   border-right-color: var(--border-light-color);
   border-top-color: var(--border-dark-color);

diff --git a/src/stylesheets/HeroSection.css b/src/stylesheets/HeroSection.css
@@ -1,3 +1,5 @@
+@import "./colors.css";
+
 .hero-container,
 .hero-content {
   display: flex;
@@ -28,8 +30,8 @@
   text-align: center;
   letter-spacing: 1px;
   line-height: 1.5em;
-  background-color: #0a0a23f2;
-  box-shadow: inset -5px -6px #0a0a232e;
+  background-color: var(--bg-primary-transparent);
+  box-shadow: inset -5px -6px var(--box-shadow-inset);
 }
 
 .question-count {

diff --git a/src/stylesheets/HomepageRow.css b/src/stylesheets/HomepageRow.css
@@ -1,3 +1,5 @@
+@import "./colors.css";
+
 p {
   font-size: 1.2rem;
 }
@@ -18,7 +20,7 @@ p {
   justify-content: center;
   padding-top: 20px;
   padding-bottom: 20px;
-  background-color: #0a0a23;
+  background-color: var(--bg-primary);
 }
 
 .content-text-container {

diff --git a/src/stylesheets/Modal.css b/src/stylesheets/Modal.css
@@ -1,5 +1,7 @@
+@import "./colors.css";
+
 .modal-link {
-  color: #002ead;
+  color: var(--text-deep-blue);
   font-size: 1.238rem;
 }
 
@@ -36,14 +38,14 @@
   border-top-right-radius: 10px;
   height: auto;
   display: block;
-  border-bottom: 1px solid #dee2e6;
+  border-bottom: 1px solid var(--border-light-gray);
 }
 
 .modal-footer {
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
   display: flex;
-  border-top: 1px solid #dee2e6;
+  border-top: 1px solid var(--border-light-gray);
   justify-content: flex-end;
 }
 

diff --git a/src/stylesheets/Navbar.css b/src/stylesheets/Navbar.css
@@ -1,10 +1,12 @@
+@import "./colors.css";
+
 header {
   height: 55px;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px;
-  background-color: #0a0a23;
+  background-color: var(--bg-primary);
 }
 
 .homepage-navbar {

diff --git a/src/stylesheets/colors.css b/src/stylesheets/colors.css
@@ -0,0 +1,22 @@
+:root {
+  --white: #ffffff;
+  --bg-primary: #0a0a23;
+  --bg-primary-transparent: #0a0a23f2;
+  --bg-button: #acd157;
+  --bg-transparent-hover: var(--white);
+  --bg-gradient-start: #fecc4c;
+  --bg-gradient-end: #ffac33;
+  --bg-answer-selected: #f1be32;
+  --box-shadow-inset: #0a0a232e;
+  --text-primary: var(--white);
+  --text-link: #f1be32;
+  --text-link-hover: #acd157;
+  --text-deep-blue: #002ead;
+  --border-primary: #acd157;
+  --border-transparent: var(--white);
+  --border-dark-color: #aa8144;
+  --border-light-color: #f5aa3a;
+  --border-light-gray: #dee2e6;
+  --effect-shadow: rgba(245, 242, 247, 0.7);
+  --gray-00: var(--white);
+}