Apply utilities in docs styles (#30866)

* docs(theming): apply utilities where possible

* Update docs-sidebar.html

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

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;

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; }

site/assets/scss/_content.scss

@@ -3,8 +3,6 @@
 //
 
 .bd-content {
-  order: 1;
-
   // Offset for the sticky header
   > [id] {
     @include media-breakpoint-up(md) {

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;
-    }
-  }
 }

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);
 }

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;
   }
 }

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;
     }
   }
 

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;
-}