1 files changed, 40 insertions, 43 deletions
diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss
index b266d3e88..8e4c3838d 100644
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -2,54 +2,51 @@
 //
 // Custom buttons for the docs.
 
+// scss-docs-start btn-css-vars-example
 .btn-bd-primary {
-  font-weight: 600;
-  color: $white;
-  background-color: $bd-purple-bright;
-  border-color: $bd-purple-bright;
-
-  &:hover,
-  &:active {
-    color: $white;
-    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);
-  }
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet-bg);
+  --bs-btn-border-color: var(--bd-violet-bg);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
+  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
+  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
 }
-
-.btn-bd-download {
-  font-weight: 600;
-  color: $bd-download;
-  border-color: $bd-download;
-
-  &:hover,
-  &:active {
-    color: $bd-dark;
-    background-color: $bd-download;
-    border-color: $bd-download;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-download, .25);
-  }
+// scss-docs-end btn-css-vars-example
+
+.btn-bd-accent {
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bd-accent);
+  --bs-btn-border-color: var(--bd-accent);
+  --bs-btn-hover-color: var(--bd-dark);
+  --bs-btn-hover-bg: var(--bd-accent);
+  --bs-btn-hover-border-color: var(--bd-accent);
+  --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: var(--bs-btn-hover-bg);
+  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
 }
 
 .btn-bd-light {
-  color: $gray-600;
-  border-color: $gray-300;
+  --btn-custom-color: #{mix($bd-violet, $white, 75%)};
+
+  --bs-btn-color: var(--bs-gray-600);
+  --bs-btn-border-color: var(--bs-border-color);
+  --bs-btn-hover-color: var(--btn-custom-color);
+  --bs-btn-hover-border-color: var(--btn-custom-color);
+  --bs-btn-active-color: var(--btn-custom-color);
+  --bs-btn-active-bg: var(--bs-white);
+  --bs-btn-active-border-color: var(--btn-custom-color);
+  --bs-btn-focus-border-color: var(--btn-custom-color);
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+}
 
-  .show > &,
-  &:hover,
-  &:active {
-    color: $bd-purple-bright;
-    background-color: $white;
-    border-color: $bd-purple-bright;
-  }
+.bd-btn-lg {
+  --bs-btn-border-radius: .5rem;
 
-  &:focus {
-    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
-  }
+  padding: .8125rem 2rem;
 }