npm - @syncfusion/blazor-themes - Versions diffs - 31.2.3 → 31.2.5 - Mend

@syncfusion/blazor-themes 31.2.3 → 31.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (311) hide show

package/SCSS-Themes/bootstrap5.3.scss CHANGED Viewed

@@ -3855,6 +3855,7 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
+$border-type: solid !default;
 $ddl-input-border: 1px $border-light !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
@@ -3892,6 +3893,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
@@ -4000,6 +4002,11 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;
@@ -42341,6 +42348,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -42721,6 +42729,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
@@ -60832,9 +60843,6 @@ $treeview-item-active-check-color: $primary !default;
       }
       .e-list-url {
-        @if ($skin-name != 'Material3' and $skin-name != 'tailwind3') {
-          padding: 0;
-        }
         width: 100%;
       }
@@ -88670,6 +88678,13 @@ $grid-checkmark-color: $primary-text-color !default;
       overflow: hidden;
       overflow-x: scroll;
     }
+    &.e-mac-safari .virtualtable {
+      .e-leftfreeze,
+      .e-rightfreeze {
+        transform: translateZ(0);
+      }
+    }
     .e-columnchooser::before {
       line-height: $grid-columnchooser-toolbar-icon-line-height;
@@ -90036,7 +90051,9 @@ $grid-checkmark-color: $primary-text-color !default;
       }
       .e-cc-searchdiv.e-input-focus {
-        border-color: $grid-columnchooser-search-border-fcolor;
+        @if $grid-skin != 'fluent2' {
+          border-color: $grid-columnchooser-search-border-fcolor;
+        }
       }
     }
   }

package/SCSS-Themes/bootstrap5.scss CHANGED Viewed

@@ -2757,6 +2757,7 @@ $acrdn-item-exp-not-selected-hdr-focus-border-color: initial !default;
 $ddl-input-font-size: $text-sm !default;
 $ddl-zero-value: 0 !default;
+$border-type: solid !default;
 $ddl-input-border: 1px $border-light !default;
 $ddl-input-font-family: inherit !default;
 $ddl-input-margin-bottom: 4px !default;
@@ -2793,6 +2794,7 @@ $ddl-filter-background-color: $content-bg-color !default;
 $ddl-filter-bg: $content-bg-color !default;
 $ddl-list-icon-color: $icon-color !default;
 $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
+$input-border: $ddl-zero-value $border-type !default;
 @include export-module('dropdownlist-bootstrap5') {
   #{&}.e-popup.e-ddl {
@@ -2901,6 +2903,11 @@ $ddl-filter-box-shadow: 0 1.5px 5px -2px $ddl-filter-box-shadow-color !default;
     }
   }
+  .e-ddl.e-lib.e-input-group:not(.e-float-input) .e-dropdownlist:not(.e-input) {
+    width: 100%;
+    border: $input-border;
+  }
   .e-popup.e-wide-popup.e-ddl-device.e-popup-close {
     display: block;
     visibility: hidden;
@@ -41236,6 +41243,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -41616,6 +41624,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }
@@ -59726,9 +59737,6 @@ $treeview-item-active-check-color: $primary !default;
       }
       .e-list-url {
-        @if ($skin-name != 'Material3' and $skin-name != 'tailwind3') {
-          padding: 0;
-        }
         width: 100%;
       }
@@ -87534,6 +87542,13 @@ $grid-checkmark-color: $primary-text-color !default;
       overflow: hidden;
       overflow-x: scroll;
     }
+    &.e-mac-safari .virtualtable {
+      .e-leftfreeze,
+      .e-rightfreeze {
+        transform: translateZ(0);
+      }
+    }
     .e-columnchooser::before {
       line-height: $grid-columnchooser-toolbar-icon-line-height;
@@ -88900,7 +88915,9 @@ $grid-checkmark-color: $primary-text-color !default;
       }
       .e-cc-searchdiv.e-input-focus {
-        border-color: $grid-columnchooser-search-border-fcolor;
+        @if $grid-skin != 'fluent2' {
+          border-color: $grid-columnchooser-search-border-fcolor;
+        }
       }
     }
   }

package/SCSS-Themes/buttons/radio-button/bds-dark-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bds-dark.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bds-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bds.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap-dark-lite.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline-offset: 0 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap-dark.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline-offset: 0 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap-lite.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-bigger-small-ripple-size: 36px !default;
 $radio-btn-focus-ripple-bgcolor: #000 !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline-offset: 0 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-bigger-small-ripple-size: 36px !default;
 $radio-btn-focus-ripple-bgcolor: #000 !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline-offset: 0 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap4-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline-offset: 0 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap4.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-focus-outline-offset: 0 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline-offset: 0 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5-dark-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5-dark.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5.3-dark-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5.3-dark.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5.3-lite.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5.3.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/bootstrap5.scss CHANGED Viewed

@@ -71,6 +71,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -451,6 +452,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fabric-dark-lite.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-focus-outline: $neutral-secondary-alt 1px solid !default;
 $radio-btn-focus-outline-offset: 2px !default;
 $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
 $radio-btn-ripple-bgcolor:  rgba(0, 0, 0, .3) !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-ripple-bgcolor:  rgba(0, 0, 0, .3) !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fabric-dark.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-focus-outline: $neutral-secondary-alt 1px solid !default;
 $radio-btn-focus-outline-offset: 2px !default;
 $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
 $radio-btn-ripple-bgcolor:  rgba(0, 0, 0, .3) !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-ripple-bgcolor:  rgba(0, 0, 0, .3) !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fabric-lite.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-bigger-ripple-position: -11px !default;
 $radio-btn-bigger-small-ripple-size: 36px !default;
 $radio-btn-focus-ripple-bgcolor: #000 !default;
 $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fabric.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-bigger-ripple-position: -11px !default;
 $radio-btn-bigger-small-ripple-size: 36px !default;
 $radio-btn-focus-ripple-bgcolor: #000 !default;
 $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
+$radio-btn-border-error-color: $msg-danger-border-color-alt1;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-checked-ripple-bgcolor: #ff4081 !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent-dark-lite.scss CHANGED Viewed

@@ -77,6 +77,8 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-uncheck-background-color: $icon-color !default;
 $radio-btn-uncheck-color: $icon-color !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
     border: 1px solid transparent;
@@ -456,6 +458,9 @@ $radio-btn-uncheck-color: $icon-color !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent-dark.scss CHANGED Viewed

@@ -77,6 +77,8 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-uncheck-background-color: $icon-color !default;
 $radio-btn-uncheck-color: $icon-color !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
     border: 1px solid transparent;
@@ -456,6 +458,9 @@ $radio-btn-uncheck-color: $icon-color !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent-lite.scss CHANGED Viewed

@@ -77,6 +77,8 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-uncheck-background-color: $icon-color !default;
 $radio-btn-uncheck-color: $icon-color !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
     border: 1px solid transparent;
@@ -456,6 +458,9 @@ $radio-btn-uncheck-color: $icon-color !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent.scss CHANGED Viewed

@@ -77,6 +77,8 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
 $radio-btn-uncheck-background-color: $icon-color !default;
 $radio-btn-uncheck-color: $icon-color !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
     border: 1px solid transparent;
@@ -456,6 +458,9 @@ $radio-btn-uncheck-color: $icon-color !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent2-dark-lite.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-ripple-bgcolor: transparent !default;
 $radio-btn-focus-check-bg-color: $radio-btn-hover-check-bg-color !default;
 $radio-btn-focus-check-border-color: $radio-btn-hover-check-border-color !default;
 $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
+$radio-btn-border-error-color: $border-error;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -450,6 +451,9 @@ $radio-btn-focus-outline: $radio-btn-background-color 0 solid !default;
       }
     }
   }
+  .e-radio-wrapper.e-error .e-radio + label::before {
+    border-color: $radio-btn-border-error-color;
+  }
 }