diff --git a/src/assets/styles/bmc/helpers/_colors.scss b/src/assets/styles/bmc/helpers/_colors.scss
index cffe39d..648ede7 100644
--- a/src/assets/styles/bmc/helpers/_colors.scss
+++ b/src/assets/styles/bmc/helpers/_colors.scss
@@ -34,5 +34,17 @@
 $success: $green;
 $warning: $yellow;
 
+// Bootstrap 5 requires $theme-colors map
+$theme-colors: (
+  "danger": $danger,
+  "dark": $dark,
+  "info": $info,
+  "light": $light,
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "warning": $warning
+);
+
 $loading-color: $primary;
 $navbar-color: $dark;
diff --git a/src/assets/styles/bmc/helpers/_functions.scss b/src/assets/styles/bmc/helpers/_functions.scss
index 57956c9..0d89cc4 100644
--- a/src/assets/styles/bmc/helpers/_functions.scss
+++ b/src/assets/styles/bmc/helpers/_functions.scss
@@ -1,9 +1,32 @@
+@use "sass:math";
+
 // This function is usually used to get a lighter
 // theme variant color to use as a background color
 @function theme-color-light($variant) {
-  @return theme-color-level($variant, -11.3);
+  @return shift-color(map-get($theme-colors, $variant), -90.4%);
 }
 
 @function theme-color-dark($variant) {
-  @return theme-color-level($variant, 2);
+  @return shift-color(map-get($theme-colors, $variant), 16%);
+}
+
+// Bootstrap 5 no longer provides theme-color(); define a compatible helper
+@function theme-color($variant) {
+  @return map-get($theme-colors, $variant);
+}
+
+// Bootstrap 4 compatibility: theme-color-level() function
+// Positive levels darken (mix with black), negative levels lighten (mix with white)
+// Each level is 8% change, matching Bootstrap 4 behavior
+@function theme-color-level($variant, $level: 0) {
+  $color: map-get($theme-colors, $variant);
+  $weight: $level * 8%;
+  
+  @if $level > 0 {
+    @return shade-color($color, $weight);
+  } @else if $level < 0 {
+    @return tint-color($color, math.abs($weight));
+  } @else {
+    @return $color;
+  }
 }
\ No newline at end of file