refactor: improve color usage consistency (#8042)

Author: Katari-8055

src/components/Badge/Badge.scss

@@ -1,7 +1,9 @@
+@use "../../styles/partials/functions" as *;
+
 .badge {
   background-color: #1d78c1;
   padding: 0 4px;
-  color: #fff;
+  color: getColor(white);
   position: relative;
   top: -4px;
   font-size: 14px;

src/components/CodeBlockWithCopy/CodeBlockWithCopy.scss

@@ -1,3 +1,5 @@
+@use "../../styles/partials/functions" as *;
+
 .code-block-wrapper {
   position: relative;
   margin-bottom: 1.5rem;
@@ -25,7 +27,7 @@
   /* visible on hover */
   opacity: 0;
 
-  background-color: #175d96;
+  background-color: getColor(denim);
   color: #e2e8f0;
 
   transition:

src/components/Dropdown/Dropdown.scss

@@ -5,7 +5,7 @@
 
   button {
     cursor: pointer;
-    color: #fff;
+    color: getColor(white);
     border: none;
     background-color: transparent;
     margin: 0;
@@ -48,13 +48,13 @@
   ul li {
     padding: 0.25em 0.5em;
     list-style: none;
-    color: #fff;
+    color: getColor(white);
     transition: all 250ms;
 
     a:link,
     a:visited,
     a:hover {
-      color: #fff;
+      color: getColor(white);
     }
 
     &:hover {

src/components/Markdown/Markdown.scss

@@ -215,7 +215,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     }
 
     &.preview {
-      background-color: #f2f2f2;
+      background-color: getColor(concrete);
       color: #716b53;
       border-left-color: #1e72b3;
     }
@@ -308,7 +308,7 @@ $topHeightMobileWithBanner: $bannerHeight + $topHeightMobile;
     border-right: none;
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid getColor(concrete);
     text-align: left;
     &::before {
       content: attr(data-th);

src/components/OfflineBanner/OfflineBanner.scss

@@ -1,14 +1,16 @@
+@use "../../styles/partials/functions" as *;
+
 .offline-banner {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px 20px;
-  background-color: #2b3a42;
-  color: #fff;
+  background-color: getColor(elephant);
+  color: getColor(white);
   font-size: 14px;
   font-weight: 500;
   text-align: center;
-  border-bottom: 1px solid #465e69;
+  border-bottom: 1px solid getColor(fiord);
 
   &__content {
     display: flex;
@@ -20,7 +22,7 @@
     flex-shrink: 0;
     width: 16px;
     height: 16px;
-    fill: #8dd6f9;
+    fill: getColor(malibu);
   }
 
   &__text {

src/components/Page/Page.scss

@@ -33,7 +33,7 @@
       line-height: 1.2;
 
       a {
-        color: #2b3a42;
+        color: getColor(elephant);
         text-decoration: none;
 
         &:hover {
@@ -43,7 +43,7 @@
     }
 
     .blog-post-date {
-      color: #666;
+      color: getColor(dove-grey);
       font-size: 1.2rem;
       font-weight: 600;
       margin-top: 0.25rem;
@@ -52,7 +52,7 @@
     }
 
     p {
-      color: #535353;
+      color: getColor(emperor);
       line-height: 1.4;
       margin-bottom: 1rem;
     }
@@ -78,7 +78,7 @@
         color: getColor(dusty-blue) !important;
 
         &:hover {
-          color: #8dd6f9 !important;
+          color: getColor(malibu) !important;
         }
       }
 
@@ -87,11 +87,11 @@
       }
 
       p {
-        color: #dedede;
+        color: getColor(alto);
       }
 
       .read-more {
-        color: #8dd6f9;
+        color: getColor(malibu);
       }
     }
   }

src/components/ScrollToTop/ScrollToTop.scss

@@ -1,3 +1,5 @@
+@use "../../styles/partials/functions" as *;
+
 // Scroll to Top Button Styles
 .scroll-to-top {
   position: fixed;
@@ -19,8 +21,8 @@
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
-    background-color: #2b3a42;
-    color: #fff;
+    background-color: getColor(elephant);
+    color: getColor(white);
     border: 5px solid #1c78c0;
     cursor: pointer;
     transition: all 0.3s ease-in-out;
@@ -33,7 +35,7 @@
       transform: translateY(-2px);
 
       .scroll-to-top__icon {
-        color: #ffffff;
+        color: getColor(white);
       }
     }
 
@@ -44,7 +46,7 @@
     // Dark mode support
     @media (prefers-color-scheme: dark) {
       background-color: #f5f5f5;
-      color: #2b3a42;
+      color: getColor(elephant);
       border-color: #1c78c0;
 
       &:hover {

src/components/Sidebar/Sidebar.scss

@@ -48,8 +48,8 @@
 }
 
 .sidebar__docs-version {
-  color: #535353;
-  border-top: 1px solid #f2f2f2;
+  color: getColor(emperor);
+  border-top: 1px solid getColor(concrete);
   margin-top: 12px;
   padding-top: 12px;
   font-size: 15px;

src/components/SidebarItem/SidebarItem.scss

@@ -28,7 +28,7 @@
     @include control-overflow;
     &.active {
       font-weight: 600;
-      color: #333;
+      color: getColor(mine-shaft);
     }
   }
 

src/components/Site/Site.scss

@@ -1,8 +1,10 @@
+@use "../../styles/partials/functions" as *;
+
 .site {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
-  background: #ffffff;
+  background: getColor(white);
 
   &__header {
     z-index: 100;