Use CSS variable for border-radius in utilities

diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index dce01399723db8bc881cdfee32f2cbf45cbe7148..e4ecdda04f47fbf554a18632d69ca6ce16ec6823 100644 (file)
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -1,4 +1,5 @@
 @use "../config" as *;
+// @use "../variables" as *;
 
 // stylelint-disable property-disallowed-list
 // Single side border-radius
@@ -17,7 +18,7 @@
 }
 
 // scss-docs-start border-radius-mixins
-@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
+@mixin border-radius($radius: var(--#{$prefix}border-radius), $fallback-border-radius: false) {
   @if $enable-rounded {
     border-radius: valid-radius($radius);
   }
@@ -26,53 +27,53 @@
   }
 }
 
-@mixin border-top-radius($radius: $border-radius) {
+@mixin border-top-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-end-radius($radius: $border-radius) {
+@mixin border-end-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-radius($radius: $border-radius) {
+@mixin border-bottom-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-start-radius($radius: $border-radius) {
+@mixin border-start-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
     border-bottom-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-start-radius($radius: $border-radius) {
+@mixin border-top-start-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-top-left-radius: valid-radius($radius);
   }
 }
 
-@mixin border-top-end-radius($radius: $border-radius) {
+@mixin border-top-end-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-top-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-end-radius($radius: $border-radius) {
+@mixin border-bottom-end-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-bottom-right-radius: valid-radius($radius);
   }
 }
 
-@mixin border-bottom-start-radius($radius: $border-radius) {
+@mixin border-bottom-start-radius($radius: var(--#{$prefix}border-radius)) {
   @if $enable-rounded {
     border-bottom-left-radius: valid-radius($radius);
   }