1 files changed, 17 insertions, 18 deletions
diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss
index aff91f18b..c3e5629a8 100644
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -3,39 +3,38 @@
 //
 
 .bd-callout {
+  --#{$prefix}link-color-rgb: var(--bd-callout-link);
+  --#{$prefix}code-color: var(--bd-callout-code-color);
+
   padding: 1.25rem;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border: 1px solid $gray-200;
-  border-left-width: .25rem;
-  @include border-radius();
+  color: var(--bd-callout-color, inherit);
+  background-color: var(--bd-callout-bg, var(--bs-gray-100));
+  border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300));
 
   h4 {
     margin-bottom: .25rem;
   }
 
-  p:last-child {
+  > :last-child {
     margin-bottom: 0;
   }
 
-  code {
-    @include border-radius();
-  }
-
   + .bd-callout {
     margin-top: -.25rem;
   }
-}
-
-// Variations
-.bd-callout-info {
-  border-left-color: $bd-info;
-}
 
-.bd-callout-warning {
-  border-left-color: $bd-warning;
+  .highlight {
+    background-color: rgba($black, .05);
+  }
 }
 
-.bd-callout-danger {
-  border-left-color: $bd-danger;
+// Variations
+@each $variant in $bd-callout-variants {
+  .bd-callout-#{$variant} {
+    --bd-callout-color: var(--bs-#{$variant}-text-emphasis);
+    --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
+    --bd-callout-border: var(--bs-#{$variant}-border-subtle);
+  }
 }