npm - @syncfusion/blazor-themes - Versions diffs - 24.1.43 → 24.1.45 - Mend

@syncfusion/blazor-themes 24.1.43 → 24.1.45

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

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

@@ -2736,12 +2736,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2792,12 +2802,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2855,12 +2875,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2918,12 +2946,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2981,12 +3017,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3044,12 +3088,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

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

@@ -2736,12 +2736,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2792,12 +2802,22 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2855,12 +2875,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2918,12 +2946,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2981,12 +3017,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3044,12 +3088,20 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

package/SCSS-Themes/buttons/button/highcontrast.scss CHANGED Viewed

@@ -2682,12 +2682,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2738,12 +2748,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2801,12 +2821,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2864,12 +2892,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2927,12 +2963,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2990,12 +3034,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

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

@@ -2724,12 +2724,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2780,12 +2790,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2843,12 +2863,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2906,12 +2934,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2969,12 +3005,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -3032,12 +3076,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;

package/SCSS-Themes/buttons/button/material.scss CHANGED Viewed

@@ -2661,12 +2661,22 @@ $btn-focus-box-shadow: none !default;
           @if $skin-name == 'FluentUI' {
             outline: none !important; /* stylelint-disable-line declaration-no-important */
           }
+          @if $skin-name == 'bootstrap5' {
+            background: $btn-outline-active-bgcolor;
+            color: $btn-outline-active-color;
+          }
         }
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
             background: $btn-outline-bgcolor;
           }
+          @if $skin-name == 'bootstrap5' {
+            box-shadow: $btn-focus-box-shadow;
+          }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
             box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2717,12 +2727,22 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-outline-primary-focus-bgcolor;
+              color: $btn-outline-active-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-primary-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2780,12 +2800,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-success-bgcolor;
+              color: $btn-success-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-success-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2843,12 +2871,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-info-bgcolor;
+              color: $btn-info-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-info-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2906,12 +2942,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-warning-bgcolor;
+              color: $btn-warning-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-warning-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;
@@ -2969,12 +3013,20 @@ $btn-focus-box-shadow: none !default;
             @if $skin-name == 'FluentUI' {
               outline: none !important; /* stylelint-disable-line declaration-no-important */
             }
+            @if $skin-name == 'bootstrap5' {
+              background: $btn-danger-bgcolor;
+              color: $btn-danger-color;
+            }
           }
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
               background: $btn-outline-bgcolor;
             }
+            @if $skin-name == 'bootstrap5' {
+              box-shadow: $btn-danger-focus-box-shadow;
+            }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
               box-shadow: $btn-keyboard-focus-box-shadow;