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

@syncfusion/blazor-themes 23.2.7 → 24.1.43

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

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

@@ -1657,7 +1657,7 @@ $btn-focus-box-shadow: none !default;
       &:focus-visible { // only for keybord
         @if $skin-name == 'FluentUI' {
-          background: $btn-bgcolor;
+          background: $btn-focus-bgcolor;
         }
         @if $skin-name == 'Material3' {
           background: $btn-active-bgcolor;
@@ -1737,7 +1737,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-bgcolor;
+            background: $btn-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
@@ -1789,7 +1789,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-primary-bgcolor;
+              background: $btn-primary-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
@@ -1815,7 +1815,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-success-bgcolor;
+              background: $btn-success-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
@@ -1841,7 +1841,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-info-bgcolor;
+              background: $btn-info-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
@@ -1867,7 +1867,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-warning-bgcolor;
+              background: $btn-warning-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
@@ -1893,7 +1893,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-danger-bgcolor;
+              background: $btn-danger-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
@@ -1937,7 +1937,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-primary-bgcolor;
+            background: $btn-primary-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-primary-active-bgcolor;
@@ -2006,7 +2006,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-success-bgcolor;
+            background: $btn-success-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-success-active-bgcolor;
@@ -2063,7 +2063,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-info-bgcolor;
+            background: $btn-info-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-info-active-bgcolor;
@@ -2120,7 +2120,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-warning-bgcolor;
+            background: $btn-warning-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-warning-active-bgcolor;
@@ -2177,7 +2177,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-danger-bgcolor;
+            background: $btn-danger-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-danger-active-bgcolor;

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

@@ -1734,7 +1734,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
       &:focus-visible { // only for keybord
         @if $skin-name == 'FluentUI' {
-          background: $btn-bgcolor;
+          background: $btn-focus-bgcolor;
         }
         @if $skin-name == 'Material3' {
           background: $btn-active-bgcolor;
@@ -1814,7 +1814,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-bgcolor;
+            background: $btn-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
@@ -1866,7 +1866,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-primary-bgcolor;
+              background: $btn-primary-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
@@ -1892,7 +1892,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-success-bgcolor;
+              background: $btn-success-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
@@ -1918,7 +1918,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-info-bgcolor;
+              background: $btn-info-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
@@ -1944,7 +1944,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-warning-bgcolor;
+              background: $btn-warning-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
@@ -1970,7 +1970,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-danger-bgcolor;
+              background: $btn-danger-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
@@ -2014,7 +2014,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-primary-bgcolor;
+            background: $btn-primary-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-primary-active-bgcolor;
@@ -2083,7 +2083,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-success-bgcolor;
+            background: $btn-success-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-success-active-bgcolor;
@@ -2140,7 +2140,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-info-bgcolor;
+            background: $btn-info-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-info-active-bgcolor;
@@ -2197,7 +2197,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-warning-bgcolor;
+            background: $btn-warning-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-warning-active-bgcolor;
@@ -2254,7 +2254,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-danger-bgcolor;
+            background: $btn-danger-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-danger-active-bgcolor;

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

@@ -1734,7 +1734,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
       &:focus-visible { // only for keybord
         @if $skin-name == 'FluentUI' {
-          background: $btn-bgcolor;
+          background: $btn-focus-bgcolor;
         }
         @if $skin-name == 'Material3' {
           background: $btn-active-bgcolor;
@@ -1814,7 +1814,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-bgcolor;
+            background: $btn-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
@@ -1866,7 +1866,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-primary-bgcolor;
+              background: $btn-primary-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
@@ -1892,7 +1892,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-success-bgcolor;
+              background: $btn-success-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
@@ -1918,7 +1918,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-info-bgcolor;
+              background: $btn-info-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
@@ -1944,7 +1944,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-warning-bgcolor;
+              background: $btn-warning-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
@@ -1970,7 +1970,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-danger-bgcolor;
+              background: $btn-danger-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
@@ -2014,7 +2014,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-primary-bgcolor;
+            background: $btn-primary-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-primary-active-bgcolor;
@@ -2083,7 +2083,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-success-bgcolor;
+            background: $btn-success-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-success-active-bgcolor;
@@ -2140,7 +2140,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-info-bgcolor;
+            background: $btn-info-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-info-active-bgcolor;
@@ -2197,7 +2197,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-warning-bgcolor;
+            background: $btn-warning-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-warning-active-bgcolor;
@@ -2254,7 +2254,7 @@ $btn-warning-focus-box-shadow: $shadow-none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-danger-bgcolor;
+            background: $btn-danger-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-danger-active-bgcolor;

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

@@ -1680,7 +1680,7 @@ $btn-focus-box-shadow: none !default;
       &:focus-visible { // only for keybord
         @if $skin-name == 'FluentUI' {
-          background: $btn-bgcolor;
+          background: $btn-focus-bgcolor;
         }
         @if $skin-name == 'Material3' {
           background: $btn-active-bgcolor;
@@ -1760,7 +1760,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-bgcolor;
+            background: $btn-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
@@ -1812,7 +1812,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-primary-bgcolor;
+              background: $btn-primary-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
@@ -1838,7 +1838,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-success-bgcolor;
+              background: $btn-success-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
@@ -1864,7 +1864,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-info-bgcolor;
+              background: $btn-info-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
@@ -1890,7 +1890,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-warning-bgcolor;
+              background: $btn-warning-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
@@ -1916,7 +1916,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-danger-bgcolor;
+              background: $btn-danger-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
@@ -1960,7 +1960,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-primary-bgcolor;
+            background: $btn-primary-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-primary-active-bgcolor;
@@ -2029,7 +2029,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-success-bgcolor;
+            background: $btn-success-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-success-active-bgcolor;
@@ -2086,7 +2086,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-info-bgcolor;
+            background: $btn-info-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-info-active-bgcolor;
@@ -2143,7 +2143,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-warning-bgcolor;
+            background: $btn-warning-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-warning-active-bgcolor;
@@ -2200,7 +2200,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-danger-bgcolor;
+            background: $btn-danger-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-danger-active-bgcolor;

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

@@ -1722,7 +1722,7 @@ $btn-focus-box-shadow: none !default;
       &:focus-visible { // only for keybord
         @if $skin-name == 'FluentUI' {
-          background: $btn-bgcolor;
+          background: $btn-focus-bgcolor;
         }
         @if $skin-name == 'Material3' {
           background: $btn-active-bgcolor;
@@ -1802,7 +1802,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-bgcolor;
+            background: $btn-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
@@ -1854,7 +1854,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-primary-bgcolor;
+              background: $btn-primary-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
@@ -1880,7 +1880,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-success-bgcolor;
+              background: $btn-success-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
@@ -1906,7 +1906,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-info-bgcolor;
+              background: $btn-info-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
@@ -1932,7 +1932,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-warning-bgcolor;
+              background: $btn-warning-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
@@ -1958,7 +1958,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-danger-bgcolor;
+              background: $btn-danger-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
@@ -2002,7 +2002,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-primary-bgcolor;
+            background: $btn-primary-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-primary-active-bgcolor;
@@ -2071,7 +2071,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-success-bgcolor;
+            background: $btn-success-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-success-active-bgcolor;
@@ -2128,7 +2128,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-info-bgcolor;
+            background: $btn-info-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-info-active-bgcolor;
@@ -2185,7 +2185,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-warning-bgcolor;
+            background: $btn-warning-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-warning-active-bgcolor;
@@ -2242,7 +2242,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-danger-bgcolor;
+            background: $btn-danger-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-danger-active-bgcolor;

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

@@ -1659,7 +1659,7 @@ $btn-focus-box-shadow: none !default;
       &:focus-visible { // only for keybord
         @if $skin-name == 'FluentUI' {
-          background: $btn-bgcolor;
+          background: $btn-focus-bgcolor;
         }
         @if $skin-name == 'Material3' {
           background: $btn-active-bgcolor;
@@ -1739,7 +1739,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-bgcolor;
+            background: $btn-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-active-bgcolor;
@@ -1791,7 +1791,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-primary-bgcolor;
+              background: $btn-primary-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-primary-active-bgcolor;
@@ -1817,7 +1817,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-success-bgcolor;
+              background: $btn-success-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-success-active-bgcolor;
@@ -1843,7 +1843,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-info-bgcolor;
+              background: $btn-info-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-info-active-bgcolor;
@@ -1869,7 +1869,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-warning-bgcolor;
+              background: $btn-warning-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-warning-active-bgcolor;
@@ -1895,7 +1895,7 @@ $btn-focus-box-shadow: none !default;
           &:focus-visible { // only for keybord
             @if $skin-name == 'FluentUI' {
-              background: $btn-danger-bgcolor;
+              background: $btn-danger-focus-bgcolor;
             }
             @if $skin-name == 'Material3' {
               background: $btn-danger-active-bgcolor;
@@ -1939,7 +1939,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-primary-bgcolor;
+            background: $btn-primary-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-primary-active-bgcolor;
@@ -2008,7 +2008,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-success-bgcolor;
+            background: $btn-success-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-success-active-bgcolor;
@@ -2065,7 +2065,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-info-bgcolor;
+            background: $btn-info-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-info-active-bgcolor;
@@ -2122,7 +2122,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-warning-bgcolor;
+            background: $btn-warning-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-warning-active-bgcolor;
@@ -2179,7 +2179,7 @@ $btn-focus-box-shadow: none !default;
         &:focus-visible { // only for keybord
           @if $skin-name == 'FluentUI' {
-            background: $btn-danger-bgcolor;
+            background: $btn-danger-focus-bgcolor;
           }
           @if $skin-name == 'Material3' {
             background: $btn-danger-active-bgcolor;