fix: color definitions (#140)

freeCodeCamp · Nov 23, 2024 · a627373 · a627373
1 parent 28a2d8e
commit a627373
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 13 deletions.
diff --git a/common/color_definitions.scss b/common/color_definitions.scss
@@ -29,9 +29,8 @@ $--gray05: mix($header_background, $header_primary, 7%);
 $--gray00: mix($header_background, $header_primary, 0%);
 
 :root {
-  --primary: #{$primary};
-  --secondary: #{$secondary};
-  --tertiary: #{tertiary};
+  --primary-low: #{$primary-low}; 
+  --primary-very-low: #{$primary-very-low}; 
   --fcc-primary-color: #{mix($primary, $secondary, 100%)}; 
   --fcc-secondary-color: #{mix($primary, $secondary, 93%)}; 
   --fcc-tertiary-color: #{mix($primary, $secondary, 87%)}; 
@@ -44,18 +43,21 @@ $--gray00: mix($header_background, $header_primary, 0%);
   --fcc-highlight-color: #{$tertiary};
   --secondary-header-background: #{mix($header_primary, $header_background, 93%)};
 
-  --gray90: #{mix($header_background, $header_primary, 100%)};
+  --gray90: #{$--gray90};
   --gray85: #{mix($header_background, $header_primary, 93%)}; 
   --gray75: #{mix($header_background, $header_primary, 80%)};
   --gray65: #{mix($header_background, $header_primary, 67%)};
   --gray45: #{mix($header_background, $header_primary, 50%)}; 
+  --gray10: #{$--gray10};
   --gray05: #{mix($header_background, $header_primary, 7%)};
-  --gray00: #{mix($header_background, $header_primary, 0%)};
+  --gray00: #{$--gray00};
 
 
   --fcc-d-hover: rgba(var(--primary), 0.08);
   --dark-blue: #002ead;
   --blue-50: #198eee;
   --header_primary: #fff;
   --header_background: #0a0a23;
+  --fcc-highlight-mid: #{$fcc-highlight-mid};
+  --fcc-highlight-background: #{$fcc-highlight-background}; 
 }
diff --git a/common/common.scss b/common/common.scss
@@ -369,7 +369,7 @@ a.curriculum-nav {
 a.curriculum-nav:hover,
 a.curriculum-nav:focus {
   color: var(--gray90);
-  background: var(--gray00);
+  background-color: var(--secondary);
 }
 
 .navigation-container {
@@ -532,11 +532,11 @@ html.whos-online-ring.desktop-view body.user-page-online .primary img.avatar {
 
 //main page grid ----------------------------
 td.poster-names a {
-  color: dark-light-choose($primary-medium, $secondary-medium);
+  color: dark-light-choose(var(--primary-medium), var(--secondary-medium));
 }
 
 #whos-online {
-  color: dark-light-choose($primary-medium, $secondary-medium) !important;
+  color: dark-light-choose(var(--primary-medium), var(--secondary-medium)) !important;
 }
 
 //buttons ----------------------------
@@ -627,7 +627,7 @@ div.select-kit-header {
 #reply-control .btn-mini-toggle:hover,
 #reply-control .btn-mini-toggle:focus {
   .d-icon {
-    color: $secondary;
+    color: var(--secondary);
   }
 }
 
@@ -674,7 +674,7 @@ div.select-kit-header {
   clear: both;
   margin-bottom: 5px;
   .combo-box .combo-box-header {
-    background: $secondary;
+    background: var(--secondary);
     color: var(--primary);
     border: 3px solid var(--primary);
     padding: 6px 12px;
@@ -716,7 +716,7 @@ div.select-kit-header {
 .latest-topic-list-item.visited,
 .category-topic-link.visited {
   a.title:not(.badge-notification) {
-    color: var(--primary)-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -730,12 +730,12 @@ div.select-kit-header {
 
   .anon & {
     a.title:visited:not(.badge-notification) {
-      color: var(--primary)-medium;
+      color: var(--primary-medium);
     }
   }
 
   a.title.visited:not(.badge-notification) {
-    color: var(--primary)-medium;
+    color: var(--primary-medium);
   }
 }