diff --git a/scss/_functions.scss b/scss/_functions.scss
index 30539b39302425c03b31d5898a95b5b4a5b40abe..68a23f46e0ff39946872302ab73a4987866c09ce 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -41,13 +41,65 @@
 @function rgba-css-var($identifier, $target) {
   @if $identifier == "body" and $target == "bg" {
     @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
-  } @if $identifier == "body" and $target == "text" {
+  } @if $identifier == "body" and $target == "text" { // Missing @else here in the original code
     @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
   } @else {
     @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
   }
 }
 
+/* *
+   * First solution start
+   *
+   * Just need to uncomment below code when testing the first solution and comment the basic `rgba-css-var` function above
+   * */
+
+// @function rgba-css-var($identifier, $target) {
+//   @if $identifier == "body" and $target == "bg" {
+//     @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+//   } @if $identifier == "body" and $target == "text" {
+//     @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+//   } @else {
+//     @return rgba(var(--#{$variable-prefix}#{$target}-#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+//   }
+// }
+
+
+/* *
+   * Second solution start
+   *
+   * Just need to uncomment below code when testing the second solution and comment the basic `rgba-css-var` function above
+   * */
+
+// @function rgba-css-var($identifier, $target, $value: null) {
+//   @if $identifier == "body" and $target == "bg" {
+//     @return rgba(var(--#{$variable-prefix}#{$identifier}-bg-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+//   } @else if $identifier == "body" and $target == "text" {
+//     @return rgba(var(--#{$variable-prefix}#{$identifier}-color-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+//   } @else if $value != null {
+//     @return rgba(to-rgb($value), var(--#{$variable-prefix}#{$target}-opacity));
+//   } @else {
+//     @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+//   }
+// }
+
+/* *
+   * Solutions proposal end
+   * */
+
+@function rgba-css-var-with-value($identifier, $target, $value: null) {
+  @if ($identifier == "body" or $identifier == "white") and $target == "bg" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @else if ($identifier == "body" or $identifier == "white") and $target == "text" {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+    // Example of using $value for border colors redefinitions
+  } @else if ($identifier == "body" or $identifier == "white") and $target == "border" {
+    @return rgba(var(--#{$variable-prefix}#{$value}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  } @else {
+    @return rgba(var(--#{$variable-prefix}#{$identifier}-rgb), var(--#{$variable-prefix}#{$target}-opacity));
+  }
+}
+
 @function map-loop($map, $func, $args...) {
   $_map: ();
 
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 2770a67615c7445dbdb1008deeffb2ae64d25096..0b5982c610a898d921c3b6ad7d443034cc55b530 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -19,7 +19,7 @@ $utilities-colors: $theme-colors-rgb !default;
 $utilities-text: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
+    "black": to-rgb($black), // .bg-black doesn't exist so we could remove it
     "white": to-rgb($white),
     "body": to-rgb($body-color)
   )
@@ -31,22 +31,57 @@ $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text")
 $utilities-bg: map-merge(
   $utilities-colors,
   (
-    "black": to-rgb($black),
-    "white": to-rgb($white),
-    "body": to-rgb($body-bg)
+    "black": to-rgb($black), // .bg-black doesn't exist so we could remove it
+    "white": to-rgb($warning),
+    "body": null,
   )
 ) !default;
 $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg") !default;
+
+/* *
+   * Second solution start
+   *
+   * Just need to uncomment below code when testing the second solution and comment the code above
+   * */
+
+// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
+
+// $utilities-colors: $theme-colors !default;
+
+// $utilities-text: map-merge(
+//   $utilities-colors,
+//   (
+//     "black": $black,
+//     "white": $white,
+//     "body": $body-color
+//   )
+// ) !default;
+// $utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text", "$value") !default;
+
+// $utilities-bg: map-merge(
+//   $utilities-colors,
+//   (
+//     "black": $success,
+//     "white": $primary,
+//     "body": null,
+//   )
+// ) !default;
+// $utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, "$key", "bg", "$value") !default;
+
+/* *
+   * Solutions proposal end
+   * */
 // scss-docs-end utilities-bg-colors
 
 // scss-docs-start utilities-border-colors
 $utilities-border: map-merge(
   $utilities-colors,
   (
-    "white": to-rgb($white)
+    "white": "warning",
+    "body": "danger"
   )
 ) !default;
-$utilities-border-colors: map-loop($utilities-border, rgba-css-var, "$key", "border") !default;
+$utilities-border-colors: map-loop($utilities-border, rgba-css-var-with-value, "$key", "border", "$value") !default;
 // scss-docs-end utilities-border-colors
 
 $negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
diff --git a/scss/_root.scss b/scss/_root.scss
index ab0584e68a35949f81f8e2024448ca4cf1122048..e7230d8da7f3c2db26ec284f7340b1b81636adf9 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -58,4 +58,26 @@
   --#{$variable-prefix}border-radius: #{$border-radius};
   // scss-docs-end root-border-var
   // stylelint-enable custom-property-empty-line-before
+
+  /* *
+     * First solution start
+     *
+     * Just need to uncomment below code when testing the first solution
+     * */
+
+  // @each $color, $value in $utilities-text {
+  //   --#{$variable-prefix}text-#{$color}-rgb: #{$value};
+  // }
+
+  // @each $color, $value in $utilities-bg {
+  //   --#{$variable-prefix}bg-#{$color}-rgb: #{$value};
+  // }
+
+  // @each $color, $value in $utilities-border {
+  //   --#{$variable-prefix}border-#{$color}-rgb: #{$value};
+  // }
+
+  /* *
+     * Solutions proposal end
+     * */
 }