Implement border-radius mixin across various SCSS files (#2612)

.changeset/grumpy-foxes-shake.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": patch
+---
+
+Implement `border-radius` mixin across various SCSS files

core/package.json

@@ -82,19 +82,19 @@
     "files": [
       {
         "path": "./dist/css/tabler.css",
-        "maxSize": "76 kB"
+        "maxSize": "77 kB"
       },
       {
         "path": "./dist/css/tabler.min.css",
-        "maxSize": "71 kB"
+        "maxSize": "72 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.css",
-        "maxSize": "76 kB"
+        "maxSize": "77 kB"
       },
       {
         "path": "./dist/css/tabler.rtl.min.css",
-        "maxSize": "71 kB"
+        "maxSize": "73 kB"
       },
       {
         "path": "./dist/css/tabler-flags.css",
@@ -106,7 +106,7 @@
       },
       {
         "path": "./dist/css/tabler-payments.css",
-        "maxSize": "2.2 kB"
+        "maxSize": "2.3 kB"
       },
       {
         "path": "./dist/css/tabler-payments.min.css",

core/scss/_bootstrap-override.scss

@@ -59,3 +59,20 @@
 @function opaque($background, $foreground) {
   @return color.mix(rgba($foreground, 1), $background, color.alpha($foreground) * 100%);
 }
+
+@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
+  @if $enable-rounded {
+    border-radius: valid-radius($radius);
+
+    @if $radius != 0 {
+      @supports (corner-shape: squircle) {
+        corner-shape: squircle;
+        border-radius: calc(#{$radius} * 2.5) !important;
+      }
+    }
+  }
+
+  @else if $fallback-border-radius !=false {
+    border-radius: $fallback-border-radius;
+  }
+}

core/scss/layout/_core.scss

@@ -60,7 +60,7 @@ body {
   .page {
     margin: 0 auto;
     max-width: var(--#{$prefix}theme-boxed-width);
-    border-radius: var(--#{$prefix}theme-boxed-border-radius);
+    @include border-radius(var(--#{$prefix}theme-boxed-border-radius));
     color: var(--#{$prefix}body-color);
 
     @include media-breakpoint-up(md) {

core/scss/layout/_navbar.scss

@@ -113,7 +113,7 @@ Navbar
       min-width: 2.5rem;
       min-height: 2.5rem;
       justify-content: center;
-      border-radius: var(--#{$prefix}border-radius);
+      @include border-radius(var(--#{$prefix}border-radius));
 
       .badge {
         position: absolute;
@@ -222,7 +222,7 @@ Navbar toggler
   height: 2px;
   width: 1.25em;
   background: currentColor;
-  border-radius: 10px;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   position: relative;
   @include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
 

core/scss/marketing/_browser.scss

@@ -2,7 +2,7 @@
 // Browser
 //
 .browser {
-  border-radius: var(--#{$prefix}border-radius-lg);
+  @include border-radius(var(--#{$prefix}border-radius-lg));
   box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
   background: var(--#{$prefix}bg-surface-secondary);
   overflow: hidden;
@@ -12,7 +12,7 @@
   padding: 0.25rem 1rem;
   background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
   border-bottom: 1px solid var(--#{$prefix}border-color);
-  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+  @include border-radius(calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0);
 }
 
 .browser-dots {
@@ -42,7 +42,7 @@
   min-width: 0.75rem;
   height: 0.75rem;
   background: var(--#{$prefix}border-color);
-  border-radius: 50%;
+  @include border-radius(var(--#{$prefix}border-radius-circle));
   border: 1px solid var(--#{$prefix}border-color-dark);
 }
 
@@ -55,7 +55,7 @@
   padding: 0.25rem;
   color: var(--#{$prefix}secondary);
   font-size: var(--#{$prefix}font-size-h5);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   line-height: 1;
   cursor: pointer;
   box-shadow:

core/scss/marketing/_hero.scss

@@ -44,7 +44,7 @@
 .hero-img {
   margin: 4rem auto;
   max-width: 65rem;
-  border-radius: $border-radius-lg;
+  @include border-radius($border-radius-lg);
   position: relative;
   z-index: 1;
   //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),

core/scss/marketing/_pricing.scss

@@ -22,18 +22,18 @@ $pricing-card-width: 22rem;
   position: relative;
   box-shadow: $box-shadow-card;
   text-align: center;
-  border-radius: $border-radius-lg;
+  @include border-radius($border-radius-lg);
 
   @include media-breakpoint-up(md) {
     margin: 1rem -1px;
     max-width: $pricing-card-width;
 
     &:first-child {
-      border-radius: $border-radius-lg 0 0 $border-radius-lg;
+      @include border-radius($border-radius-lg 0 0 $border-radius-lg);
     }
 
     &:last-child {
-      border-radius: 0 $border-radius-lg $border-radius-lg 0;
+      @include border-radius(0 $border-radius-lg $border-radius-lg 0);
     }
   }
 
@@ -47,7 +47,7 @@ $pricing-card-width: 22rem;
       margin-top: 0;
       margin-bottom: 0;
       box-shadow: $box-shadow-card;
-      border-radius: $border-radius-lg;
+      @include border-radius($border-radius-lg);
     }
   }
 }

core/scss/marketing/_shape.scss

@@ -3,9 +3,10 @@
 .shape {
   --#{$prefix}shape-size: #{$avatar-size};
   --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+  --#{$prefix}shape-border-radius: 35%;
   background-color: var(--#{$prefix}primary-lt);
   color: var(--#{$prefix}primary);
-  border-radius: 35%;
+  @include border-radius(var(--#{$prefix}shape-border-radius));
   display: inline-flex;
   align-items: center;
   justify-content: center;

core/scss/mixins/_mixins.scss

@@ -25,7 +25,7 @@
   }
 
   #{if(&, "&", "*")}::-webkit-scrollbar-thumb {
-    border-radius: 1rem;
+    @include border-radius(1rem);
     border: 5px solid transparent;
     box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2);
   }

core/scss/ui/_accordion.scss

@@ -165,7 +165,7 @@
 
   > .accordion-item {
     border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
-    border-radius: var(--#{$prefix}accordion-border-radius);
+    @include border-radius(var(--#{$prefix}accordion-border-radius));
   }
 }
 

core/scss/ui/_alerts.scss

@@ -16,7 +16,7 @@
   padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
   margin-bottom: var(--#{$prefix}alert-margin-bottom);
   background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
-  border-radius: var(--#{$prefix}alert-border-radius);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
   box-shadow: var(--#{$prefix}box-shadow);
   color: var(--#{$prefix}alert-color);

core/scss/ui/_avatars.scss

@@ -25,7 +25,7 @@
   vertical-align: bottom;
   user-select: none;
   background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
-  border-radius: var(--#{$prefix}avatar-border-radius);
+  @include border-radius(var(--#{$prefix}avatar-border-radius));
   box-shadow: var(--#{$prefix}avatar-box-shadow);
   transition:
     color $transition-time,
@@ -41,7 +41,7 @@
     position: absolute;
     inset-inline-end: 0;
     bottom: 0;
-    border-radius: $border-radius-pill;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
     box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
   }
 
@@ -56,11 +56,11 @@
 }
 
 .avatar-rounded {
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 }
 
 .avatar-square {
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 @each $avatar-size, $size in $avatar-sizes {
@@ -77,7 +77,7 @@
     }
 
     &.avatar-square {
-      --#{$prefix}avatar-border-radius: #{map.get($size, border-radius)};
+      @include border-radius(map.get($size, border-radius));
     }
   }
 }
@@ -159,6 +159,6 @@
   bottom: -2px;
   z-index: 1000;
   background: var(--#{$prefix}bg-surface);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   border: 1px solid var(--#{$prefix}border-color);
 }

core/scss/ui/_badges.scss

@@ -21,7 +21,7 @@
   overflow: hidden;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
-  border-radius: var(--#{$prefix}badge-border-radius);
+  @include border-radius(var(--#{$prefix}badge-border-radius));
   min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
   letter-spacing: 0.04em;
   vertical-align: bottom;
@@ -47,7 +47,7 @@
   min-width: 0;
   min-height: auto;
   padding: 0;
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   vertical-align: baseline;
 }
 
@@ -63,7 +63,7 @@
 // Pill badge
 //
 .badge-pill {
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 }
 
 //

core/scss/ui/_buttons.scss

@@ -25,6 +25,8 @@
   min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
   min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
 
+  @include border-radius(var(--#{$prefix}btn-border-radius));
+
   .icon {
     width: var(--#{$prefix}btn-icon-size);
     height: var(--#{$prefix}btn-icon-size);
@@ -173,7 +175,7 @@
 .btn-pill {
   padding-inline-end: 1.5em;
   padding-inline-start: 1.5em;
-  border-radius: 10rem;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 
   &[class*='btn-icon'] {
     padding: 0.375rem 15px;
@@ -245,7 +247,7 @@
     vertical-align: text-bottom;
     border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
     border-inline-end-color: transparent;
-    border-radius: $border-radius-pill;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
     color: var(--#{$prefix}btn-color);
     position: absolute;
     width: var(--#{$prefix}btn-icon-size);
@@ -262,7 +264,7 @@
 .btn-action {
   --#{$prefix}border-color: transparent;
   color: var(--#{$prefix}secondary);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   background: transparent;
   box-shadow: none;
 

core/scss/ui/_calendars.scss

@@ -2,7 +2,7 @@
   display: block;
   font-size: $font-size-sm;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 .calendar-nav {
@@ -53,7 +53,7 @@
     cursor: pointer;
     background: 0 0;
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
-    border-radius: $border-radius-pill;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
     outline: 0;
     @include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
 

core/scss/ui/_cards.scss

@@ -84,7 +84,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   width: calc(var(--#{$prefix}stamp-size) * 1);
   height: calc(var(--#{$prefix}stamp-size) * 1);
   position: relative;
@@ -173,7 +173,7 @@ Stacked card
     content: '';
     background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
-    border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
+    @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
   }
 }
 
@@ -194,7 +194,7 @@ Stacked card
 
   &:first-child,
   &:first-child:before {
-    border-radius: $border-radius $border-radius 0 0;
+    @include border-radius($border-radius $border-radius 0 0);
   }
 }
 
@@ -221,7 +221,7 @@ Stacked card
   background: transparent;
 
   &:first-child {
-    border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
+    @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
   }
 }
 
@@ -235,7 +235,7 @@ Stacked card
   flex: 1;
   margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
   padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
-  border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
+  @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
 }
 
 .card-header-pills {
@@ -281,7 +281,7 @@ Stacked card
   margin-top: auto;
 
   &:last-child {
-    border-radius: 0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius);
+    @include border-radius(0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius));
   }
 }
 
@@ -300,11 +300,11 @@ Stacked card
   height: 0.25rem;
 
   &:last-child {
-    border-radius: 0 0 2px 2px;
+    @include border-radius(0 0 2px 2px);
   }
 
   &:first-child {
-    border-radius: 2px 2px 0 0;
+    @include border-radius(2px 2px 0 0);
   }
 }
 
@@ -410,7 +410,7 @@ Card status
   inset-inline-end: 0;
   inset-inline-start: 0;
   height: $card-status-size;
-  border-radius: var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0;
+  @include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
 }
 
 .card-status-start {
@@ -419,7 +419,7 @@ Card status
   bottom: 0;
   width: $card-status-size;
   height: 100%;
-  border-radius: var(--#{$prefix}card-border-radius) 0 0 var(--#{$prefix}card-border-radius);
+  @include border-radius(var(--#{$prefix}card-border-radius) 0 0 var(--#{$prefix}card-border-radius));
 }
 
 .card-status-bottom {
@@ -428,7 +428,7 @@ Card status
   bottom: 0;
   width: 100%;
   height: $card-status-size;
-  border-radius: 0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius);
+  @include border-radius(0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius));
 }
 
 /**
@@ -633,7 +633,7 @@ Card list group
 
       .nav-link {
         border-bottom: $card-border-width var(--#{$prefix}border-style) $card-border-color;
-        border-radius: 0 0 $card-border-radius $card-border-radius;
+        @include border-radius(0 0 $card-border-radius $card-border-radius);
       }
 
       &:not(:first-child) .nav-link {

core/scss/ui/_carousel.scss

@@ -21,7 +21,7 @@
   [data-bs-target] {
     width: $carousel-indicator-dot-width;
     height: $carousel-indicator-dot-width;
-    border-radius: $border-radius-pill;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
     border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
     margin: 0;
   }
@@ -33,7 +33,7 @@
     height: auto;
     background: no-repeat center/cover;
     border: 0;
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
     box-shadow: $box-shadow;
     margin: 0 $carousel-indicator-spacer;
     opacity: $carousel-indicator-thumb-opacity;

core/scss/ui/_chat.scss

@@ -9,7 +9,7 @@
 
 .chat-bubble {
   background: var(--#{$prefix}bg-surface-secondary);
-  border-radius: var(--#{$prefix}border-radius-lg);
+  @include border-radius(var(--#{$prefix}border-radius-lg));
   padding: 1rem;
   position: relative;
 }

core/scss/ui/_close.scss

@@ -15,7 +15,7 @@
   mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
   background-color: var(--#{$prefix}btn-close-color);
   border: 0;
-  border-radius: var(--tblr-border-radius);
+  @include border-radius(var(--tblr-border-radius));
   opacity: var(--#{$prefix}btn-close-opacity);
   cursor: pointer;
   display: block;

core/scss/ui/_empty.scss

@@ -55,5 +55,5 @@
 
 .empty-bordered {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }

core/scss/ui/_flags.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+
 .flag {
   position: relative;
   display: inline-block;
@@ -8,7 +9,7 @@
   aspect-ratio: 1.33333;
   background: no-repeat center/cover;
   box-shadow: config.$flag-box-shadow;
-  border-radius: config.$flag-border-radius;
+  @include config.border-radius(config.$flag-border-radius);
   vertical-align: bottom;
 
   &.flag-country-np {
@@ -28,7 +29,7 @@
     width: map.get($size, size);
 
     @if map.has-key($size, border-radius) {
-      border-radius: map.get($size, border-radius);
+      @include config.border-radius(map.get($size, border-radius));
     }
   }
 }

core/scss/ui/_forms.scss

@@ -106,7 +106,7 @@ Form control
 }
 
 .form-control-rounded {
-  border-radius: 10rem;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 }
 
 .form-control-flush {
@@ -127,7 +127,7 @@ Form control
   margin-bottom: 1rem;
   background: var(--#{$prefix}bg-surface-secondary);
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 fieldset:empty {
@@ -151,7 +151,7 @@ Form help
   cursor: pointer;
   user-select: none;
   background: var(--#{$prefix}gray-100);
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   @include transition(background-color $transition-time, color $transition-time);
 
   &:hover,
@@ -166,7 +166,7 @@ Input group
  */
 .input-group {
   box-shadow: $input-box-shadow;
-  border-radius: $input-border-radius;
+  @include border-radius($input-border-radius);
 
   .form-control,
   .btn {
@@ -181,7 +181,7 @@ Input group
 .input-group-flat {
   &:focus-within {
     box-shadow: $input-focus-box-shadow;
-    border-radius: $input-border-radius;
+    @include border-radius($input-border-radius);
 
     .form-control,
     .input-group-text {

core/scss/ui/_legend.scss

@@ -7,6 +7,6 @@ Legend
   background: $legend-bg;
   width: var(--#{$prefix}legend-size);
   height: var(--#{$prefix}legend-size);
-  border-radius: $legend-border-radius;
+  @include border-radius($legend-border-radius);
   border: 1px solid var(--#{$prefix}border-color-translucent);
 }

core/scss/ui/_loaders.scss

@@ -18,7 +18,7 @@
     border-top-color: currentColor;
     border-inline-start-color: currentColor;
 
-    border-radius: $border-radius-pill;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
     animation: rotate-360 0.6s linear;
     animation-iteration-count: infinite;
   }

core/scss/ui/_markdown.scss

@@ -57,7 +57,7 @@ Prose (formerly markdown)
 
   > img,
   > p > img {
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
     border: 1px solid var(--#{$prefix}border-color);
   }
 

core/scss/ui/_modals.scss

@@ -31,7 +31,7 @@
   inset-inline-end: 0;
   height: $modal-status-size;
   background: var(--#{$prefix}secondary);
-  border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
+  @include border-radius($modal-content-border-radius $modal-content-border-radius 0 0);
 }
 
 .modal-header {

core/scss/ui/_pagination.scss

@@ -12,7 +12,7 @@
 
 .page-link {
   min-width: 2rem;
-  border-radius: var(--#{$prefix}pagination-border-radius);
+  @include border-radius(var(--#{$prefix}pagination-border-radius));
 }
 
 .page-item:not(.active) .page-link:hover {

core/scss/ui/_payments.scss

@@ -9,7 +9,7 @@
   vertical-align: bottom;
   font-style: normal;
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
-  border-radius: var(--#{config.$prefix}border-radius);
+  @include config.border-radius(var(--#{config.$prefix}border-radius));
 }
 
 @each $payment in config.$payment-providers {

core/scss/ui/_placeholder.scss

@@ -4,6 +4,6 @@
   }
 
   &:not(.avatar):not([class*='card-img-']) {
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
   }
 }

core/scss/ui/_progress.scss

@@ -137,7 +137,7 @@ Progress steps
   text-align: center;
   cursor: default;
   background-color: var(--tblr-border-color);
-  border-radius: var(--#{$prefix}border-radius-pill);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 
   @at-root a#{&} {
     cursor: pointer;

core/scss/ui/_ribbons.scss

@@ -16,7 +16,7 @@
   text-transform: uppercase;
   background: var(--#{$prefix}primary);
   border-color: var(--#{$prefix}primary);
-  border-radius: var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
+  @include border-radius(var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -61,7 +61,7 @@
   inset-inline-end: 0.75rem;
   width: 2rem;
   padding: 0.5rem 0;
-  border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
+  @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
 
   &:before {
     top: 0;
@@ -87,7 +87,7 @@
 .ribbon-start {
   inset-inline-end: auto;
   inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
-  border-radius: 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius);
+  @include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
 
   &:before {
     top: auto;
@@ -106,7 +106,7 @@
 
 .ribbon-bookmark {
   padding-inline-start: 0.25rem;
-  border-radius: 0 0 var(--#{$prefix}ribbon-border-radius) 0;
+  @include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
 
   &:after {
     position: absolute;
@@ -140,7 +140,7 @@
     padding-inline-end: 0;
     padding-bottom: 0.25rem;
     padding-inline-start: 0;
-    border-radius: 0 var(--#{$prefix}ribbon-border-radius) 0 0;
+    @include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
 
     &:after {
       top: 100%;

core/scss/ui/_segmented.scss

@@ -17,7 +17,7 @@
   padding: var(--#{$prefix}nav-padding);
   list-style: none;
   background: var(--#{$prefix}nav-bg);
-  border-radius: calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding));
+  @include border-radius(calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding)));
   box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
 
   .nav-link {
@@ -39,7 +39,7 @@
     transition:
       background-color $transition-time,
       color $transition-time;
-    border-radius: var(--#{$prefix}nav-radius);
+    @include border-radius(var(--#{$prefix}nav-radius));
     flex-grow: 1;
     justify-content: center;
 

core/scss/ui/_signature.scss

@@ -3,12 +3,12 @@
   --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
   border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
   padding: var(--#{$prefix}signature-padding);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 .signature-canvas {
   border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
-  border-radius: calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding));
+  @include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
   display: block;
   cursor: crosshair;
   width: 100%;

core/scss/ui/_status.scss

@@ -56,7 +56,7 @@
   font-size: $font-size-base;
   text-transform: none;
   letter-spacing: normal;
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   font-weight: var(--#{$prefix}font-weight-medium);
   line-height: 1;
   margin: 0;
@@ -94,7 +94,7 @@
   width: var(--#{$prefix}status-size);
   height: var(--#{$prefix}status-size);
   background: var(--#{$prefix}status-dot-color);
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
 }
 
 .status-dot-animated {
@@ -130,7 +130,7 @@
   margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
   width: var(--#{$prefix}status-circle-size);
   height: var(--#{$prefix}status-circle-size);
-  border-radius: $border-radius-pill;
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   background: var(--#{$prefix}status-color);
 
   &:nth-child(1) {

core/scss/ui/_steps.scss

@@ -73,7 +73,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: $border-radius-pill;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
     transform: translateX(-50%);
     color: var(--#{$prefix}white);
     width: var(--#{$prefix}steps-dot-size);

core/scss/ui/_tags.scss

@@ -4,7 +4,7 @@
   display: inline-flex;
   align-items: center;
   height: var(--#{$prefix}tag-height);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   padding: 0 0.5rem;
   background: var(--#{$prefix}bg-surface);
   box-shadow: var(--#{$prefix}shadow-input);

core/scss/ui/_timeline.scss

@@ -25,7 +25,7 @@
       bottom: calc(-1 * var(--#{$prefix}page-padding));
       width: var(--#{$prefix}border-width);
       background-color: var(--#{$prefix}border-color);
-      border-radius: var(--#{$prefix}border-radius);
+      @include border-radius(var(--#{$prefix}border-radius));
     }
   }
 }
@@ -39,7 +39,7 @@
   height: var(--#{$prefix}timeline-icon-size, $avatar-size);
   background: var(--#{$prefix}bg-surface-secondary);
   color: var(--#{$prefix}secondary);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   z-index: 5;
 }
 

core/scss/ui/_tracking.scss

@@ -22,7 +22,7 @@
 
 .tracking-block {
   flex: 1;
-  border-radius: var(--#{$prefix}tracking-block-border-radius);
+  @include border-radius(var(--#{$prefix}tracking-block-border-radius));
   height: var(--#{$prefix}tracking-height);
   min-width: 0.25rem;
   background: var(--#{$prefix}border-color);

core/scss/ui/_type.scss

@@ -121,7 +121,7 @@ pre {
   padding: $pre-padding;
   background: $pre-bg;
   color: $pre-color;
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   line-height: $line-height-base;
 
   @include scrollbar;
@@ -135,7 +135,7 @@ pre {
 code {
   background: var(--#{$prefix}code-bg);
   padding: 2px 4px;
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 abbr {
@@ -154,7 +154,7 @@ kbd,
   font-weight: $kbd-font-weight;
   line-height: 1;
   vertical-align: baseline;
-  border-radius: $kbd-border-radius;
+  @include border-radius($kbd-border-radius);
 }
 
 img {
@@ -194,7 +194,7 @@ a:hover:has(.icon) {
 }
 
 .link-hoverable {
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   transition: background-color 0.15s ease-in-out;
 
   &:hover {
@@ -217,7 +217,7 @@ Mentions
 .mention {
   display: inline-block;
   box-shadow: var(--#{$prefix}shadow-border);
-  border-radius: var(--#{$prefix}border-radius-pill);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   line-height: calc(16em / 12);
   font-size: calc(12em / 14);
   color: var(--#{$prefix}body-color);
@@ -241,7 +241,7 @@ Mentions
 .mention-color {
   width: calc(14em / 12);
   height: calc(14em / 12);
-  border-radius: var(--#{$prefix}border-radius-pill);
+  @include border-radius(var(--#{$prefix}border-radius-pill));
   margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
   display: inline-flex;
   background: no-repeat center center/cover;
@@ -304,7 +304,7 @@ $text-variants: (
       color: var(--#{$prefix}body-color);
       border: 1px solid var(--#{$prefix}border-color);
       background: var(--#{$prefix}bg-surface);
-      border-radius: var(--#{$prefix}border-radius);
+      @include border-radius(var(--#{$prefix}border-radius));
       line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
       font-size: var(--#{$prefix}font-size-h4);
       font-weight: var(--#{$prefix}font-weight-semibold);
@@ -319,7 +319,7 @@ $text-variants: (
 .callout {
   margin-bottom: 1.5rem;
   border: 1px solid var(--#{$prefix}primary-200);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   padding: 0.5rem 1rem;
   background: var(--#{$prefix}primary-lt);
 

core/scss/ui/forms/_form-colorinput.scss

@@ -21,7 +21,7 @@ Color Input
   height: 1.5rem;
   color: $white;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color-translucent;
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 
   &:before {

core/scss/ui/forms/_form-imagecheck.scss

@@ -20,7 +20,7 @@ Image check
   margin: 0;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-  border-radius: var(--#{$prefix}form-imagecheck-radius);
+  @include border-radius(var(--#{$prefix}form-imagecheck-radius));
 
   .form-imagecheck-input:focus ~ & {
     border-color: var(--#{$prefix}primary);
@@ -45,7 +45,7 @@ Image check
     user-select: none;
     background: $form-check-input-bg;
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    border-radius: $form-check-input-border-radius;
+    @include border-radius($form-check-input-border-radius);
     @include transition(opacity $transition-time);
 
     .form-imagecheck-input:checked ~ & {
@@ -58,7 +58,7 @@ Image check
     }
 
     .form-imagecheck-input[type='radio'] ~ & {
-      border-radius: $form-check-radio-border-radius;
+      @include border-radius($form-check-radio-border-radius);
     }
 
     .form-imagecheck-input[type='radio']:checked ~ & {

core/scss/ui/forms/_form-selectgroup.scss

@@ -43,7 +43,7 @@ Select group
   cursor: pointer;
   user-select: none;
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   box-shadow: $input-box-shadow;
   @include transition(border-color $transition-time, background $transition-time, color $transition-time);
 
@@ -65,11 +65,11 @@ Select group
   box-shadow: $form-check-input-box-shadow;
 
   .form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
-    border-radius: $form-check-input-border-radius;
+    @include border-radius($form-check-input-border-radius);
   }
 
   .form-selectgroup-input[type='radio'] + .form-selectgroup-label & {
-    border-radius: $form-check-radio-border-radius;
+    @include border-radius($form-check-radio-border-radius);
   }
 
   .form-selectgroup-input:checked + .form-selectgroup-label & {
@@ -149,6 +149,6 @@ Select group
   }
 
   .form-selectgroup-label {
-    border-radius: 50px;
+    @include border-radius(var(--#{$prefix}border-radius-pill));
   }
 }

core/scss/vendor/_coloris.scss

@@ -1,15 +1,15 @@
 .clr-picker {
   box-shadow: var(--#{$prefix}shadow-dropdown);
   background-color: var(--#{$prefix}bg-surface);
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 .clr-gradient {
-  border-radius: var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0;
+  @include border-radius(var(--#{$prefix}border-radius) var(--#{$prefix}border-radius) 0 0);
 }
 
 input.clr-color {
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   color: var(--#{$prefix}body-color);
   border-color: var(--#{$prefix}border-color);
   background: transparent;
@@ -21,7 +21,7 @@ input.clr-color {
 
 .clr-swatches {
   button {
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
     padding: 0 2px 4px 2px;
 
     &:focus {
@@ -31,13 +31,13 @@ input.clr-color {
 }
 
 .clr-preview {
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
   overflow: visible;
 
   button,
   &:before,
   &:after {
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
   }
 
   button {
@@ -55,7 +55,7 @@ input.clr-color {
     height: 1.5rem;
     inset-inline-start: 6px;
     inset-inline-end: auto;
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
 
     &:after {
       box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent);

core/scss/vendor/_dropzone.scss

@@ -17,7 +17,7 @@
     margin: 0.5rem;
 
     .dz-image {
-      border-radius: var(--#{$prefix}border-radius);
+      @include border-radius(var(--#{$prefix}border-radius));
     }
 
     .dz-success-mark {

core/scss/vendor/_litepicker.scss

@@ -25,7 +25,7 @@
 
   .container__main {
     border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
-    border-radius: var(--#{$prefix}border-radius);
+    @include border-radius(var(--#{$prefix}border-radius));
     box-shadow: none;
   }
 
@@ -62,7 +62,7 @@
     .container__months {
       box-shadow: none;
       background-color: var(--#{$prefix}bg-forms);
-      border-radius: calc(var(--#{$prefix}border-radius) - 1px);
+      @include border-radius(calc(var(--#{$prefix}border-radius) - 1px));
     }
   }
 }

core/scss/vendor/_nouislider.scss

@@ -2,7 +2,7 @@
   border: 0;
   box-shadow: none;
   background: none;
-  border-radius: 0;
+  @include border-radius(0);
   color: $form-range-thumb-bg;
 }
 
@@ -13,7 +13,7 @@
 
 .noUi-base {
   background: $form-range-track-bg;
-  border-radius: $form-range-track-border-radius;
+  @include border-radius($form-range-track-border-radius);
 }
 
 .noUi-handle {
@@ -21,7 +21,7 @@
   height: $form-range-thumb-height;
   border: $form-range-thumb-border;
   box-shadow: $form-range-thumb-box-shadow;
-  border-radius: $form-range-thumb-border-radius;
+  @include border-radius($form-range-thumb-border-radius);
   background: currentColor;
   outline: 0;
 

core/scss/vendor/_tom-select.scss

@@ -12,7 +12,7 @@ $input-border-width: 1px;
 }
 
 .focus .ts-control {
-  border-radius: var(--#{$prefix}border-radius);
+  @include border-radius(var(--#{$prefix}border-radius));
 }
 
 .ts-control {

core/scss/vendor/_wysiwyg.scss

@@ -1,6 +1,6 @@
 .tox-hugerte {
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
-  border-radius: $border-radius !important;
+  @include border-radius($border-radius);
   font-family: var(--#{$prefix}font-sans-serif) !important;
 }
 

preview/scss/_highlight.scss

@@ -10,7 +10,6 @@ pre.highlight,
   max-height: 30rem;
   margin: 1.5rem 0;
   overflow: auto;
-  border-radius: var(--#{$prefix}border-radius);
 }
 
 .highlight {