igniteui-theming 4.3.0 → 4.4.0

package/sass/themes/schemas/components/light/_button.scss

@@ -98,11 +98,7 @@ $light-outlined-button: extend(
 
 /// @type {Map}
 /// @prop {Map} background [color: ('secondary', 500)] - The background color of an contained button.
-/// @prop {Map} hover-background [color: ('secondary', 300)] - The hover background of a contained button.
-/// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a contained button.
-/// @prop {Map} focus-visible-background [color: ('secondary', 300)] - The focus-visible background color of a contained button.
 /// @prop {Map} active-background [color: ('secondary', 300)] - The active background color of a contained button.
-/// @prop {Map} active-foreground [contrast-color: ('secondary', 300)] - The active text color of a contained button.
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
@@ -177,10 +173,13 @@ $material-base-button: $light-base-button;
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('secondary', 500)] - The idle text color of a flat button.
-/// @prop {Map} hover-background [color: ('secondary', 500, .05)] - The hover background color of a flat button.
+/// @prop {Map} hover-background [color: ('secondary', 500, .08)] - The hover background color of a flat button.
 /// @prop {Map} hover-foreground [color: ('secondary', 500)] - The hover text color of a flat button.
-/// @prop {Map} focus-background [color: ('secondary', 400, .12)] - The focus background color of a flat button.
-/// @prop {Map} focus-visible-background ['secondary', 400, .12)] - The focus-visible background color of a flat button.
+/// @prop {Map} focus-background [color: ('secondary', 400, .16)] - The focus background color of a flat button.
+/// @prop {Map} focus-foreground [color: ('secondary', 500)] - The focus text color of a flat button.
+/// @prop {Map} focus-hover-background [color: ('secondary', 400, .24)] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [color: ('secondary', 500)] - The text color on focus hovered state of the button.
+/// @prop {Map} focus-visible-background ['secondary', 400, .24)] - The focus-visible background color of a flat button.
 /// @prop {Map} focus-visible-foreground ['secondary', 500)] - The focus-visible text color of a flat button.
 /// @prop {Map} active-background [color: ('secondary', 400, .12)] - The active background color of a flat button.
 /// @prop {Map} active-foreground [color: ('secondary', 500)] - The active text color of a flat button.
@@ -201,7 +200,7 @@ $material-flat-button: extend(
             color: (
                 'secondary',
                 500,
-                0.05,
+                0.08,
             ),
         ),
         hover-foreground: (
@@ -214,14 +213,27 @@ $material-flat-button: extend(
             color: (
                 'secondary',
                 400,
-                0.12,
+                0.16,
             ),
         ),
         focus-visible-background: (
             color: (
                 'secondary',
                 400,
-                0.12,
+                0.16,
+            ),
+        ),
+        focus-hover-background: (
+            color: (
+                'secondary',
+                400,
+                0.24,
+            ),
+        ),
+        focus-hover-foreground: (
+            color: (
+                'secondary',
+                500,
             ),
         ),
         focus-visible-foreground: (
@@ -295,9 +307,16 @@ $material-outlined-button: extend(
 
 /// @type {Map}
 /// @prop {Map} foreground [contrast-color: ('secondary', 500)] - The idle text color of a contained button.
-/// @prop {Map} hover-foreground [contrast-color: ('secondary', 300)] - The hover text color of a contained button.
+/// @prop {Map} hover-background [color: ('secondary', 400)] - The hover background color of a flat button.
+/// @prop {Map} hover-foreground [contrast-color: ('secondary', 400)] - The hover text color of a contained button.
+/// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a flat button.
 /// @prop {Map} focus-foreground [contrast-color: ('secondary', 300)] - The focus text color of a contained button.
+/// @prop {Map} focus-visible-background [color: ('secondary', 300)] - The focus-visible background color of a contained button.
+/// @prop {Map} focus-hover-background [color: ('secondary', 400)] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [contrast-color: ('secondary', 400)] - The text color on focus hovered state of the button.
 /// @prop {Map} focus-visible-foreground [contrast-color: ('secondary', 300)] - The focus-visible text color of a contained button.
+/// @prop {Map} active-foreground [contrast-color: ('secondary', 300)] - The active text color of a contained button.
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
 /// @requires {Map} $light-contained-button
 /// @requires {Map} $material-base-button
 $material-contained-button: extend(
@@ -313,13 +332,13 @@ $material-contained-button: extend(
         hover-background: (
             color: (
                 'secondary',
-                300,
+                400,
             ),
         ),
         hover-foreground: (
             contrast-color: (
                 'secondary',
-                300,
+                400,
             ),
         ),
         focus-background: (
@@ -334,6 +353,18 @@ $material-contained-button: extend(
                 300,
             ),
         ),
+        focus-hover-background: (
+            color: (
+                'secondary',
+                400,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
+                'secondary',
+                400,
+            ),
+        ),
         focus-visible-background: (
             color: (
                 'secondary',
@@ -352,10 +383,17 @@ $material-contained-button: extend(
                 300,
             ),
         ),
+        disabled-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
     )
 );
 
 /// @type {Map}
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
 /// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for floating button.
 /// @requires {Map} $light-fab-button
 /// @requires {Map} $material-base-button
@@ -365,6 +403,12 @@ $material-fab-button: extend(
     $light-fab-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
+        disabled-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         border-radius: (
             border-radius: (
                 rem(28px),
@@ -391,24 +435,84 @@ $material-button: (
 /// @type {Map}
 /// @requires {Map} $light-base-button
 /// @requires {Map} $flat-elevation-button
-/// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled background color of the button.
-/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the button.
+/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the button.
+/// @prop {Map} focus-visible-border-color [color: ('gray', 700)] - The focus-visible border color of the button.
+/// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of the button.
+/// @prop {Color} focus-background [transparent] - The focus text color of the button.
+/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the button.
+/// @prop {Map} focus-hover-background [color: ('gray', 200)] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The focus-hover text color of the button.
+/// @prop {Color} focus-visible-background [transparent] - The focus-visible text color of the button.
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
+/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for outlined button.
 /// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the button.
 /// @prop {Number} default-size [2] - The default size used for the button component.
 $fluent-base-button: extend(
     $light-base-button,
     $flat-elevation-button,
     (
-        disabled-background: (
+        foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-visible-border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-background: transparent,
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
+        focus-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-visible-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-visible-background: transparent,
+        disabled-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
         disabled-foreground: (
             color: (
                 'gray',
-                400,
+                500,
+            ),
+        ),
+        border-radius: (
+            border-radius: (
+                rem(2px),
+                rem(0),
+                rem(20px),
             ),
         ),
         size: (
@@ -423,50 +527,24 @@ $fluent-base-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} focus-visible-border-color [color: ('gray', 800)] - The focus-visible border color of a flat button.
-/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of a flat button.
-/// @prop {Color} hover-background [transparent] - The hover background color of a flat button.
-/// @prop {Color} focus-background [transparent] - The focus background color of a flat button.
-/// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of a flat button.
-/// @prop {Color} focus-visible-foreground [color: ('gray', 800)] - The focus-visible text color of a flat button.
-/// @prop {Map} hover-foreground [color: ('primary', 500)] - The hover text color of a flat button.
+/// @prop {Map} hover-background [color: ('gray', 200)] - The hover background color of a flat button.
+/// @prop {Color} active-background [transparent] - The active background color of a contained button.
 /// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
-/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for flat button.
+/// @requires {Map} $material-flat-button
 /// @requires {Map} $light-flat-button
 /// @requires {Map} $fluent-base-button
 $fluent-flat-button: extend(
     $light-flat-button,
     $fluent-base-button,
     (
-        foreground: (
+        hover-background: (
             color: (
                 'gray',
-                900,
+                200,
             ),
         ),
-        hover-background: transparent,
-        focus-background: transparent,
-        focus-visible-background: transparent,
         active-background: transparent,
-        focus-visible-border-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
-        hover-foreground: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        focus-visible-foreground: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
         active-foreground: (
             color: (
                 'gray',
@@ -474,34 +552,18 @@ $fluent-flat-button: extend(
             ),
         ),
         disabled-background: transparent,
-        border-radius: (
-            border-radius: (
-                rem(0),
-                rem(0),
-                rem(20px),
-            ),
-        ),
     )
 );
 
 /// @type {Map}
-/// @prop {Map} border-color [color: ('gray', 800)] - The border color of an outlined button.
-/// @prop {Map} hover-border-color [color: ('gray', 800)] - The hover border color of an outlined button.
-/// @prop {Map} focus-border-color [color: ('gray', 800)] - The focus border color of an outlined button.
-/// @prop {Map} focus-visible-border-color [color: ('gray', 800)] - The focus-visible border color of an outlined button.
+/// @prop {Map} border-color [color: ('gray', 600)] - The border color of an outlined button.
+/// @prop {Map} hover-border-color [color: ('gray', 600)] - The hover border color of an outlined button.
+/// @prop {Map} focus-border-color [color: ('gray', 600)] - The focus border color of the button.
 /// @prop {Map} active-border-color [color: ('gray', 800)] - The active border color of an outlined button.
-/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of an outlined button.
-/// @prop {Map} hover-background [color: ('gray', 100)] - The hover background color of an outlined button.
-/// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of an outlined button.
-/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of an outlined button.
-/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of an outlined button.
-/// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of an outlined button.
-/// @prop {Map} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of an outlined button.
-/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of an outlined button.
-/// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of an outlined button.
-/// @prop {Map} disabled-background [color: ('gray', 200)] - The disabled background color of an outlined button.
-/// @prop {Map} disabled-foreground [color: ('gray', 400, .5)] - The disabled foreground color of an outlined button.
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for outlined button.
+/// @prop {Map} hover-background [color: ('gray', 200)] - The hover background color of an outlined button.
+/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of an outlined button.
+/// @prop {Map} active-foreground [contrast-color: ('gray', 300)] - The active text color of an outlined button.
+/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
 /// @requires {Map} $light-outlined-button
 /// @requires {Map} $fluent-base-button
 $fluent-outlined-button: extend(
@@ -511,70 +573,35 @@ $fluent-outlined-button: extend(
         border-color: (
             color: (
                 'gray',
-                800,
+                600,
             ),
         ),
         hover-border-color: (
             color: (
                 'gray',
-                800,
+                600,
             ),
         ),
+
         focus-border-color: (
             color: (
                 'gray',
-                800,
-            ),
-        ),
-        focus-visible-border-color: (
-            color: (
-                'gray',
-                800,
+                600,
             ),
         ),
+
         active-border-color: (
             color: (
                 'gray',
                 800,
             ),
         ),
-        foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         hover-background: (
             color: (
                 'gray',
                 200,
             ),
         ),
-        hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        focus-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-visible-background: transparent,
-        focus-visible-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         active-background: (
             color: (
                 'gray',
@@ -587,17 +614,10 @@ $fluent-outlined-button: extend(
                 300,
             ),
         ),
-        disabled-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-        disabled-foreground: (
+        disabled-border-color: (
             color: (
                 'gray',
-                400,
-                0.5,
+                300,
             ),
         ),
         border-radius: (
@@ -611,18 +631,16 @@ $fluent-outlined-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color of a contained button.
-/// @prop {Map} hover-border-color [contrast-color: ('gray', 900)] - The hover border color of a contained button.
-/// @prop {Map} focus-border-color [contrast-color: ('gray', 900)] - The focus border color of a contained button.
-/// @prop {Map} focus-visible-border-color [contrast-color: ('gray', 900)] - The focus-visible border color of a contained button.
-/// @prop {Map} active-border-color [contrast-color: ('gray', 900)] - The active border color of a contained button.
+/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 900)] - The focus-visible border color of a contained button.
 /// @prop {Map} background [color: ('primary', 500)] - The background color of an contained button.
-/// @prop {Map} foreground [contrast-color: ('primary', 900] - The idle text color of a contained button.
+/// @prop {Map} foreground [contrast-color: ('primary', 900)] - The idle text color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background of a contained button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 900)] - The hover text color of a contained button.
-/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of a contained button.
+/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of a contained button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 900)] - The focus text color of a contained button.
-/// @prop {Map} focus-visible-background [color: ('primary', 600)] - The focus-visible background color of a contained button.
+/// @prop {Map} focus-hover-background [color: ('primary', 600)] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 900)] - The text color on focus hovered state of the button.
+/// @prop {Map} focus-visible-background [color: ('primary', 500)] - The focus-visible background color of a contained button.
 /// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 900)] - The focus-visible text color of a contained button.
 /// @prop {Map} active-background [color: ('primary', 800)] - The active background color of a contained button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 900)] - The active text color of a contained button.
@@ -636,34 +654,11 @@ $fluent-contained-button: extend(
     $light-contained-button,
     $fluent-base-button,
     (
-        border-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        hover-border-color: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-border-color: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
+        selector: '[igxButton="contained"], .igx-button--contained',
         focus-visible-border-color: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        active-border-color: (
-            color: (
+            contrast-color: (
                 'primary',
-                800,
+                900,
             ),
         ),
         background: (
@@ -693,7 +688,7 @@ $fluent-contained-button: extend(
         focus-background: (
             color: (
                 'primary',
-                600,
+                500,
             ),
         ),
         focus-foreground: (
@@ -702,12 +697,24 @@ $fluent-contained-button: extend(
                 900,
             ),
         ),
-        focus-visible-background: (
+        focus-hover-background: (
             color: (
                 'primary',
                 600,
             ),
         ),
+        focus-hover-foreground: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        focus-visible-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         focus-visible-foreground: (
             contrast-color: (
                 'primary',
@@ -737,15 +744,11 @@ $fluent-contained-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} border-color [contrast: ('gray', 900)] - The border color of a fab button.
-/// @prop {Map} hover-border-color [contrast-color: ('gray', 900)] - The hover border color of a fab button.
-/// @prop {Map} focus-border-color [contrast-color: ('gray', 900)] - The focus border color of a fab button.
-/// @prop {Map} focus-visible-border-color [contrast-color: ('gray', 900)] - The focus-visible border color of a fab button.
-/// @prop {Map} active-border-color [contrast-color: ('gray', 900)] - The active border color of a fab button.
 /// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {List} border-radius [(rem(14px), rem(12px), rem(28px))] - The border radius used for fab button.
+/// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for the button.
 /// @requires {Map} $fluent-base-button
 /// @requires {Map} $fluent-contained-button
 $fluent-fab-button: extend(
@@ -753,36 +756,6 @@ $fluent-fab-button: extend(
     $fluent-contained-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
-        border-color: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-        hover-border-color: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-border-color: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-visible-border-color: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
-        active-border-color: (
-            contrast-color: (
-                'gray',
-                900,
-            ),
-        ),
         border-radius: (
             border-radius: (
                 rem(14px),
@@ -790,6 +763,13 @@ $fluent-fab-button: extend(
                 rem(28px),
             ),
         ),
+        size: (
+            sizable: (
+                rem(32px),
+                rem(40px),
+                rem(48px),
+            ),
+        ),
     )
 );
 
@@ -809,6 +789,7 @@ $fluent-button: (
 /// @type {Map}
 /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the button.
+/// @prop {Map} shadow-color [color: ('primary', 200, .5)] - The shadow color of an outlined button.
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the button.
 /// @prop {Number} default-size [2] - The default size used for the button component.
 /// @requires {Map} $light-base-button
@@ -829,9 +810,16 @@ $bootstrap-base-button: extend(
                 50,
             ),
         ),
+        shadow-color: (
+            color: (
+                'primary',
+                200,
+                0.5,
+            ),
+        ),
         size: (
             sizable: (
-                rem(31px),
+                rem(32px),
                 rem(38px),
                 rem(48px),
             ),
@@ -844,11 +832,13 @@ $bootstrap-base-button: extend(
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of a flat button.
 /// @prop {Color} hover-background [transparent] - The hover background color of a flat button.
 /// @prop {Map} hover-foreground [color: ('primary', 800)] - The hover text color of a flat button.
-/// @prop {Map} focus-background [transparent] - The focus background color of a flat button.
-/// @prop {Map} focus-foreground [color: ('primary', 600)] - The focus text color of a flat button.
-/// @prop {Map} focus-visible-background [transparent] - The focus-visible background color of a flat button.
-/// @prop {Map} focus-visible-foreground [color: ('primary', 600)] - The focus-visible text color of a flat button.
-/// @prop {Map} active-background [transparent] - The active background color of a flat button.
+/// @prop {Color} focus-background [transparent] - The focus background color of a flat button.
+/// @prop {Map} focus-foreground [color: ('primary', 500)] - The focus text color of a flat button.
+/// @prop {Color} focus-hover-background [transparent] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [color: ('primary', 800)] - The text color on focus hovered s
+/// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of a flat button.
+/// @prop {Map} focus-visible-foreground [color: ('primary', 500)] - The focus-visible text color of a flat button.
+/// @prop {Color} active-background [transparent] - The active background color of a flat button.
 /// @prop {Map} active-foreground [color: ('primary', 600)] - The active background color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
 /// @requires {Map} $light-flat-button
@@ -874,14 +864,21 @@ $bootstrap-flat-button: extend(
         focus-foreground: (
             color: (
                 'primary',
-                600,
+                500,
+            ),
+        ),
+        focus-hover-background: transparent,
+        focus-hover-foreground: (
+            color: (
+                'primary',
+                800,
             ),
         ),
         focus-visible-background: transparent,
         focus-visible-foreground: (
             color: (
                 'primary',
-                600,
+                500,
             ),
         ),
         active-background: transparent,
@@ -892,34 +889,26 @@ $bootstrap-flat-button: extend(
             ),
         ),
         disabled-background: transparent,
-        shadow-color: (
-            color: (
-                'primary',
-                200,
-                0.5,
-            ),
-        ),
     )
 );
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of an outlined button.
 /// @prop {Map} hover-background [color: ('primary', 500)] - The hover background color of an outlined button.
-/// @prop {Color} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of an outlined button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of an outlined button.
 /// @prop {Color} focus-background [transparent] - The focus background color of an outlined button.
-/// @prop {Color} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of an outlined button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of an outlined button.
 /// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of an outlined button.
-/// @prop {Color} focus-visible-foreground [color: ('primary', 500)] - The focus-visible text color of an outlined button.
+/// @prop {Map} focus-visible-foreground [color: ('primary', 500)] - The focus-visible text color of an outlined button.
 /// @prop {Map} active-background [color: ('primary', 700)] - The active background color of an outlined button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of an outlined button.
 /// @prop {Map} border-color [color: ('primary', 500)] - The border color of an outlined button.
 /// @prop {Map} hover-border-color [color: ('primary', 500)] - The hover border color of an outlined button.
-/// @prop {Map} focus-border-color [color: ('primary', 500)] - The focus border color of an outlined button.
+/// @prop {Map} focus-border-color [color: ('primary', 500, 0.5)] - The focus border color of an outlined button.
 /// @prop {Map} focus-visible-border-color [color: ('primary', 500)] - The focus-visible border color of an outlined button.
 /// @prop {Map} active-border-color [color: ('primary', 500)] - The active border color of an outlined button.
 /// @prop {Map} disabled-border-color [color: ('primary', 50), lighten: 35%] - The disabled focused border color of an outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of an outlined button.
-/// @prop {Map} shadow-color [color: ('primary', 200, .5)] - The shadow color of an outlined button.
 /// @requires {Map} $light-outlined-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-outlined-button: extend(
@@ -951,6 +940,18 @@ $bootstrap-outlined-button: extend(
                 500,
             ),
         ),
+        focus-hover-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
         focus-visible-background: transparent,
         focus-visible-foreground: (
             color: (
@@ -1006,13 +1007,6 @@ $bootstrap-outlined-button: extend(
                 50,
             ),
         ),
-        shadow-color: (
-            color: (
-                'primary',
-                200,
-                0.5,
-            ),
-        ),
         disabled-background: transparent,
     )
 );
@@ -1022,13 +1016,12 @@ $bootstrap-outlined-button: extend(
 /// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an contained button.
 /// @prop {Color} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of an contained button.
-/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an contained button.
+/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of an contained button.
 /// @prop {Color} focus-visible-foreground [contrast-color: ('primary', 600)] - The focus-visible text color of an contained button.
 /// @prop {Map} focus-visible-background [color: ('primary', 600)] - The focus-visible background color of an contained button.
 /// @prop {Color} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of an contained button.
 /// @prop {Map} active-background [color: ('primary', 700)] - The active background color of an contained button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of an contained button.
-/// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a contained button.
 /// @requires {Map} $light-contained-button
 /// @requires {Map} $bootstrap-base-button
 $bootstrap-contained-button: extend(
@@ -1061,6 +1054,18 @@ $bootstrap-contained-button: extend(
         ),
         focus-background: (
             color: (
+                'primary',
+                500,
+            ),
+        ),
+        focus-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
                 'primary',
                 600,
             ),
@@ -1074,7 +1079,7 @@ $bootstrap-contained-button: extend(
         focus-visible-background: (
             color: (
                 'primary',
-                600,
+                500,
             ),
         ),
         focus-visible-foreground: (
@@ -1095,25 +1100,10 @@ $bootstrap-contained-button: extend(
                 700,
             ),
         ),
-        shadow-color: (
-            color: (
-                'primary',
-                200,
-            ),
-        ),
     )
 );
 
 /// @type {Map}
-/// @prop {Map} background [color: ('primary', 500)] - The background color of a fab button.
-/// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of a fab button.
-/// @prop {Color} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of a fab button.
-/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of a fab button.
-/// @prop {Color} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of a fab button.
-/// @prop {Map} focus-visible-background [color: ('primary', 600)] - The focus-visible background color of a fab button.
-/// @prop {Color} focus-visible-foreground [contrast-color: ('primary', 600)] - The focus-visible text color of a fab button.
-/// @prop {Map} active-background [color: ('primary', 700)] - The active background color of a fab button.
-/// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of a fab button.
 /// @prop {List} border-radius [(rem(15px), rem(12px), rem(28px))] - The border radius used for outlined button.
 /// @requires {Map} $light-fab-button
 /// @requires {Map} $bootstrap-base-button
@@ -1124,60 +1114,6 @@ $bootstrap-fab-button: extend(
     $bootstrap-contained-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
-        background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        hover-background: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        hover-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-background: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-visible-background: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-visible-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
-        active-background: (
-            color: (
-                'primary',
-                700,
-            ),
-        ),
-        active-foreground: (
-            contrast-color: (
-                'primary',
-                700,
-            ),
-        ),
         border-radius: (
             border-radius: (
                 rem(15px),
@@ -1202,9 +1138,23 @@ $bootstrap-button: (
 );
 
 /// @type {Map}
-/// @requires {Map} $light-base-button
+/// @prop {Color} focus-hover-background [transparent] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The text color on focus hovered state of the button.
+/// @requires {Map} $material-base-button
 /// @requires {Map} $flat-elevation-button
-$indigo-base-button: extend($light-base-button, $flat-elevation-button);
+$indigo-base-button: extend(
+    $material-base-button,
+    $flat-elevation-button,
+    (
+        focus-hover-background: transparent,
+        focus-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
 
 /// @type {Map}
 /// @prop {Map} foreground [color: ('gray', 700)] - The idle text color of a flat button.
@@ -1213,7 +1163,7 @@ $indigo-base-button: extend($light-base-button, $flat-elevation-button);
 /// @prop {Color} focus-background [transparent] - The focus background color of a flat button.
 /// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of a flat button.
 /// @prop {Color} active-background [transparent] - The active background color of a flat button.
-/// @prop {Color} active-foreground [color: ('gray', 700)] - The active text color of a flat button.
+/// @prop {Map} active-foreground [color: ('gray', 700)] - The active text color of a flat button.
 /// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of a flat button.
 /// @prop {Map} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a flat button.
@@ -1299,7 +1249,7 @@ $indigo-flat-button: extend(
 /// @prop {Map} focus-visible-border-color [color: 'gray'] - The focus-visible border color of a outlined button.
 /// @prop {Map} active-border-color [color: 'gray'] - The active border color of a outlined button.
 /// @prop {Color} active-background [transparent] - The active background color of a outlined button.
-/// @prop {Color} active-foreground [color: ('gray', 900)] - The active text color of a outlined button.
+/// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of a outlined button.
 /// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of a outlined button.
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the outlined button.
@@ -1437,6 +1387,18 @@ $indigo-contained-button: extend(
                 50,
             ),
         ),
+        focus-hover-background: (
+            color: (
+                'secondary',
+                400,
+            ),
+        ),
+        focus-hover-foreground: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
         focus-visible-background: (
             color: (
                 'secondary',
@@ -1479,10 +1441,6 @@ $indigo-contained-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} foreground [ color: ('gray', 50)] - The idle text color of a fab button.
-/// @prop {Map} hover-foreground [ color: ('gray', 50)] - The hover text color of a fab button.
-/// @prop {Map} focus-foreground [ color: ('gray', 50)] - The focus text color of a fab button.
-/// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a fab button.
 /// @prop {List} border-radius [(rem(36px), rem(42px), rem(48px))] - The border radius used for fab button.
 /// @prop {List} size [(rem(36px), rem(42px), rem(48px))] - The size used for the fab button.
 /// @requires {Map} $light-fab-button
@@ -1494,30 +1452,7 @@ $indigo-fab-button: extend(
     $indigo-contained-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
-        foreground: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-        hover-foreground: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-        focus-foreground: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-        focus-visible-foreground: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
+
         border-radius: (
             border-radius: (
                 rem(28px),