Theme: Refactoring theme colors variables (#23513)

* Theme: Typography updates

* Updated

* Updated snapshot

* Renamed colors to palette

* Introduce colors namespace

* Massive theme color move

* Removing color selection logic with more abstract concepts

* Updates

* Minor sidemenu change

public/sass/components/_dashboard_settings.scss

@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
   z-index: $zindex-sidemenu;
-  background: $body-bg;
+  background: $dashboard-bg;
   display: flex;
   flex-direction: column;
 }

public/sass/components/_navbar.scss

@@ -45,7 +45,6 @@
   white-space: nowrap;
   display: block;
   margin: 0;
-  color: $headings-color;
   font-size: $font-size-lg;
   min-height: $navbarHeight;
   line-height: $navbarHeight;
@@ -74,7 +73,6 @@
 }
 
 .navbar-page-btn__folder {
-  color: $text-color-weak;
   display: none;
   padding-right: 8px;
 

public/sass/components/_search.scss

@@ -1,14 +1,3 @@
-.search-backdrop {
-  position: fixed;
-  right: 0;
-  left: 0;
-  bottom: 0;
-  top: 0;
-  z-index: $zindex-modal-backdrop;
-  background-color: $black;
-  @include opacity(60);
-}
-
 .search-container {
   left: 0;
   top: 0;
@@ -16,7 +5,7 @@
   bottom: 0;
   z-index: ($zindex-modal-backdrop + 10);
   position: fixed;
-  background: $body-bg;
+  background: $dashboard-bg;
 }
 
 // Search
@@ -94,6 +83,9 @@
   position: relative;
   flex-grow: 10;
   margin-bottom: $space-md;
+  background: $panel-bg;
+  border: $panel-border;
+  border-radius: 3px;
 
   // Fix for search scroller in mobile view
   height: unset;
@@ -191,10 +183,6 @@
   padding: 0 10px;
 }
 
-.search-item__body-title {
-  color: $list-item-link-color;
-}
-
 .search-item__body-folder-title {
   color: $text-color-weak;
   font-size: $font-size-xs;

public/sass/components/_sidemenu.scss

@@ -84,7 +84,7 @@ $mobile-menu-breakpoint: md;
 }
 
 .sidemenu-link {
-  color: $link-color;
+  color: $side-menu-link-color !important;
   line-height: 42px;
   padding: 0px 10px 0px 10px;
   display: block;
@@ -116,9 +116,7 @@ $mobile-menu-breakpoint: md;
   width: 35px;
   height: 35px;
   display: inline-block;
-  color: $side-menu-link-color;
   position: relative;
-  opacity: 0.7;
 
   img {
     position: relative;
@@ -130,18 +128,16 @@ $mobile-menu-breakpoint: md;
   white-space: nowrap;
   background-color: $side-menu-item-hover-bg;
   font-size: 17px;
-  color: #ebedf2;
+  color: $side-menu-link-color;
 }
 
 .side-menu-header-link {
-  // Removes left-brand-border-gradient from link
-  color: #ebedf2 !important;
+  color: $side-menu-link-color !important;
   border: none !important;
   padding: 0 !important;
 }
 
 .dropdown-menu--sidemenu > li > .side-menu-header-link:hover {
-  // Makes sure it looks good on light theme
   color: #fff !important;
   background-color: $side-menu-item-hover-bg !important;
 }