refactor: update utilities generator

Author: mrholek

scss/_utilities.scss

@@ -128,28 +128,33 @@ $utilities: map-merge(
     "border-color": (
       property: border-color,
       class: border,
-      values: map-merge($theme-colors, ("white": $white))
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true
     ),
     "border-top-color": (
       property: border-top-color,
       class: border-top,
-      values: map-merge($theme-colors, ("white": $white))
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true
     ),
     "border-end-color": (
       property: border-right-color,
       class: border-end,
       values: map-merge($theme-colors, ("white": $white)),
+      vars: true,
       rtl: true
     ),
     "border-bottom-color": (
       property: border-bottom-color,
       class: border-bottom,
-      values: map-merge($theme-colors, ("white": $white))
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true
     ),
     "border-start-color": (
       property: border-left-color,
       class: border-start,
       values: map-merge($theme-colors, ("white": $white)),
+      vars: true,
       rtl: true
     ),
     "border-width": (

scss/mixins/_utilities.scss

@@ -54,7 +54,7 @@
       .#{$property-class + $infix + $property-class-modifier} {
         @each $property in $properties {
           @if $generate-vars == true {
-            #{$property}: var(--#{$variable-prefix}#{$property-class + $infix + $property-class-modifier}, $value) if($enable-important-utilities, !important, null);
+            #{$property}: var(--#{$variable-prefix}#{$key}, $value) if($enable-important-utilities, !important, null);
           }
           @else {
             @if $generate-rtl == true {