Apply utilities in docs styles (#30866)

* docs(theming): apply utilities where possible

* Update docs-sidebar.html

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

8 files changed, 2 insertions, 42 deletions

diff --git a/site/assets/scss/_brand.scss b/site/assets/scss/_brand.scss
index be6aa91ffb..1585e4f7a2 100644
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -14,7 +14,6 @@
 
 // Individual items
 .bd-brand-item {
-  width: 100%;
   padding: 4rem 1rem;
 
   + .bd-brand-item {
@@ -35,7 +34,6 @@
 //
 
 .color-swatches {
-  display: flex;
   margin: 0 -5px;
 
   // Docs colors
@@ -56,9 +54,6 @@
 .color-swatch {
   width: 4rem;
   height: 4rem;
-  margin-right: .25rem;
-  margin-left: .25rem;
-  @include border-radius();
 
   @include media-breakpoint-up(md) {
     width: 6rem;
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 751ce3c763..a71a8973b8 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -152,5 +152,5 @@
 .bd-gray-800 { color: color-contrast($gray-800); background-color: $gray-800; }
 .bd-gray-900 { color: color-contrast($gray-900); background-color: $gray-900; }
 
-.bd-white { color: color-yiq($white); background-color: $white; }
-.bd-black { color: color-yiq($black); background-color: $black; }
+.bd-white { color: color-contrast($white); background-color: $white; }
+.bd-black { color: color-contrast($black); background-color: $black; }
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index 4ba926c907..4e744895fd 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -3,8 +3,6 @@
 //
 
 .bd-content {
-  order: 1;
-
   // Offset for the sticky header
   > [id] {
     @include media-breakpoint-up(md) {
diff --git a/site/assets/scss/_footer.scss b/site/assets/scss/_footer.scss
index 0d9bf454a3..48ad349de0 100644
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -15,21 +15,4 @@
       color: $link-color;
     }
   }
-
-  p {
-    margin-bottom: 0;
-  }
-}
-
-.bd-footer-links {
-  padding-left: 0;
-  margin-bottom: 1rem;
-
-  li {
-    display: inline-block;
-
-    + li {
-      margin-left: 1rem;
-    }
-  }
 }
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index f70b4b837c..e524f271af 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -28,8 +28,6 @@
 .home-icon {
   width: 6rem;
   height: 6rem;
-  padding: 1.5rem;
-  color: $white;
   @include border-radius(25%);
   box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
 }
diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss
index c8e1a2d309..54d0c425c7 100644
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -5,10 +5,8 @@
   @include media-breakpoint-down(md) {
     .navbar-nav-scroll {
       width: 100%;
-      margin-top: .25rem;
 
       .navbar-nav {
-        padding: .5rem 0;
         margin: -.5rem 0;
         overflow-x: auto;
         white-space: nowrap;
@@ -34,9 +32,7 @@
   }
 
   .navbar-nav-svg {
-    display: inline-block;
     width: 1rem;
     height: 1rem;
-    vertical-align: text-top;
   }
 }
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 4e9e0846c2..be871354d0 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -15,13 +15,10 @@
   }
 
   a {
-    display: inline-flex;
-    align-items: center;
     padding: .1875rem .5rem;
     margin-top: .125rem;
     color: rgba($black, .65);
     text-decoration: if($link-decoration == none, null, none);
-    @include border-radius(.25rem);
 
     &:hover,
     &:focus {
@@ -57,7 +54,6 @@
     // Adjust font size and font weights in submenu
     + ul {
       @include font-size(.875rem);
-      font-weight: 400;
     }
   }
 
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
index fac919e22f..e3ce8ba14c 100644
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -26,8 +26,6 @@
 }
 
 .bd-search {
-  position: relative; // To contain the Algolia search
-
   @include media-breakpoint-down(sm) {
     width: 100%;
   }
@@ -37,7 +35,3 @@
     box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
   }
 }
-
-.bd-search-docs-toggle {
-  color: $gray-900;
-}