npm - @syncfusion/blazor-themes - Versions diffs - 31.2.4 → 31.2.10 - Mend

@syncfusion/blazor-themes 31.2.4 → 31.2.10

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 (261) hide show

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;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent2-dark.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;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent2-highcontrast-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;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent2-highcontrast.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;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent2-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;
+  }
 }

package/SCSS-Themes/buttons/radio-button/fluent2.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;
+  }
 }

package/SCSS-Themes/buttons/radio-button/highcontrast-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: $error-bg;
 @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/highcontrast.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: $error-bg;
 @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/material-dark-lite.scss CHANGED Viewed

@@ -72,6 +72,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: $error-bg;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -452,6 +453,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/material-dark.scss CHANGED Viewed

@@ -72,6 +72,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: $error-bg;
 @mixin fluent-focus-border {
   @if $skin-name == 'FluentUI' {
@@ -452,6 +453,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/material-lite.scss CHANGED Viewed

@@ -72,6 +72,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' {
@@ -452,6 +453,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/material.scss CHANGED Viewed

@@ -72,6 +72,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' {
@@ -452,6 +453,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/material3-dark-lite.scss CHANGED Viewed

@@ -70,6 +70,7 @@ $radio-btn-ripple-bgcolor: rgba($content-text-color, .08) !default;
 $radio-btn-focus-check-bg-color: rgba($primary) !default;
 $radio-btn-focus-check-border-color: rgba($primary) !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;
+  }
 }

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

@@ -70,6 +70,7 @@ $radio-btn-ripple-bgcolor: rgba($content-text-color, .08) !default;
 $radio-btn-focus-check-bg-color: rgba($primary) !default;
 $radio-btn-focus-check-border-color: rgba($primary) !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;
+  }
 }