Rewrite custom docs buttons

- Use CSS variables wherever possible
- Rename purple-bright to violet for brevity, add CSS vars versions
- Rename download to accent

site/assets/scss/_algolia.scss

@@ -24,7 +24,7 @@
 .algolia-docsearch-suggestion--category-header {
   padding: .125rem 1rem;
   font-weight: 600;
-  color: $bd-purple-bright;
+  color: $bd-violet;
 
   :not(.algolia-docsearch-suggestion__main) > & {
     display: none;

site/assets/scss/_brand.scss

@@ -4,11 +4,11 @@
 
 // Logo series wrapper
 .bd-brand-logos {
-  color: $bd-purple-bright;
+  color: $bd-violet;
 
   .inverse {
     color: $white;
-    background-color: $bd-purple-bright;
+    background-color: $bd-violet;
   }
 }
 

site/assets/scss/_buttons.scss

@@ -4,54 +4,32 @@
 
 // scss-docs-start btn-css-vars-example
 .btn-bd-primary {
-  font-weight: 600;
+  --bs-btn-font-weight: 600;
-  color: $white;
+  --bs-btn-color: var(--bs-white);
-  background-color: $bd-purple-bright;
+  --bs-btn-bg: var(--bd-violet);
-  border-color: $bd-purple-bright;
+  --bs-btn-border-color: var(--bd-violet);
-
+  --bs-btn-hover-color: var(--bs-white);
-  &:hover,
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)};
-  &:active {
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)};
-    color: $white;
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    background-color: shade-color($bd-purple-bright, 20%);
-    border-color: shade-color($bd-purple-bright, 20%);
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
 }
 // scss-docs-end btn-css-vars-example
 
-.btn-bd-download {
+.btn-bd-accent {
-  font-weight: 600;
+  --bs-btn-font-weight: 600;
-  color: $bd-download;
+  --bs-btn-color: var(--bd-accent);
-  border-color: $bd-download;
+  --bs-btn-border-color: var(--bd-accent);
-
+  --bs-btn-hover-color: var(--bd-dark);
-  &:hover,
+  --bs-btn-hover-bg: var(--bd-accent);
-  &:active {
+  --bs-btn-hover-border-color: var(--bd-accent);
-    color: $bd-dark;
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
-    background-color: $bd-download;
-    border-color: $bd-download;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-download, .25);
-  }
 }
 
 .btn-bd-light {
-  color: $gray-600;
+  --bs-btn-color: var(--bs-gray-600);
-  border-color: $gray-300;
+  --bs-btn-border-color: var(--bs-gray-300);
-
+  --bs-btn-active-color: var(--bd-violet);
-  .show > &,
+  --bs-btn-active-bg: var(--bs-white);
-  &:hover,
+  --bs-btn-active-border-color: var(--bd-violet);
-  &:active {
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
-    color: $bd-purple-bright;
-    background-color: $white;
-    border-color: $bd-purple-bright;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
 }

site/assets/scss/_content.scss

@@ -73,9 +73,9 @@
 }
 
 .bd-text-purple-bright {
-  color: $bd-purple-bright;
+  color: $bd-violet;
 }
 
 .bd-bg-purple-bright {
-  background-color: $bd-purple-bright;
+  background-color: $bd-violet;
 }

site/assets/scss/_navbar.scss

@@ -3,7 +3,7 @@
   --bs-gutter-y: $bd-gutter-x;
 
   padding: .75rem 0;
-  background-color: $bd-purple-bright;
+  background-color: $bd-violet;
 
   .navbar-toggler {
     padding: 0;
@@ -34,7 +34,7 @@
   }
 
   .offcanvas {
-    background-color: $bd-purple-bright;
+    background-color: $bd-violet;
     border-left: 0;
 
     @include media-breakpoint-down(md) {

site/assets/scss/_sidebar.scss

@@ -40,7 +40,7 @@
     &:focus {
       color: rgba($black, .85);
       text-decoration: if($link-hover-decoration == underline, none, null);
-      background-color: rgba($bd-purple-bright, .1);
+      background-color: rgba($bd-violet, .1);
     }
   }
 
@@ -55,11 +55,11 @@
     &:hover,
     &:focus {
       color: rgba($black, .85);
-      background-color: rgba($bd-purple-bright, .1);
+      background-color: rgba($bd-violet, .1);
     }
 
     &:focus {
-      box-shadow: 0 0 0 1px rgba($bd-purple-bright, .7);
+      box-shadow: 0 0 0 1px rgba($bd-violet, .7);
     }
 
     // Add chevron if there's a submenu

site/assets/scss/_subnav.scss

@@ -55,8 +55,8 @@
     padding-right: 3.75rem;
 
     &:focus {
-      border-color: $bd-purple-bright;
+      border-color: $bd-violet;
-      box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+      box-shadow: 0 0 0 3px rgba($bd-violet, .25);
     }
   }
 }
@@ -66,11 +66,11 @@
 
   &:hover,
   &:focus {
-    color: $bd-purple-bright;
+    color: $bd-violet;
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+    box-shadow: 0 0 0 3px rgba($bd-violet, .25);
   }
 
   .bi-collapse { display: none; }

site/assets/scss/_variables.scss

@@ -2,14 +2,21 @@
 
 // Local docs variables
 $bd-purple:        #563d7c;
-$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
+$bd-violet:        lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list
 $bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list
-$bd-dark:          #2a2730;
+$bd-accent:       #ffe484;
-$bd-download:      #ffe484;
+$bd-info:         #5bc0de;
-$bd-info:          #5bc0de;
+$bd-warning:      #f0ad4e;
-$bd-warning:       #f0ad4e;
+$bd-danger:       #d9534f;
-$bd-danger:        #d9534f;
 $dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
 $sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
 
 $bd-gutter-x: 1.25rem;
+
+:root {
+  --bd-purple: #{$bd-purple};
+  --bd-violet: #{$bd-violet};
+  --bd-accent: #{$bd-accent};
+  --bd-violet-rgb: #{to-rgb($bd-violet)};
+  --bd-accent-rgb: #{to-rgb($bd-accent)};
+}

site/layouts/partials/docs-navbar.html

@@ -68,7 +68,7 @@
 
         <hr class="d-md-none text-white-50">
 
-        <a class="btn btn-bd-download d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
+        <a class="btn btn-bd-accent d-lg-inline-block my-2 my-md-0 ms-md-3" href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Download</a>
       </div>
     </div>
   </nav>