igniteui-theming 3.3.2 → 4.0.0-beta.1

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

@@ -194,27 +194,27 @@ $material-outlined-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} background [color: ('secondary', 500)] - The background color of an raised button.
-/// @prop {Map} foreground [contrast-color: ('secondary', 500)] - The idle text color of a raised button.
-/// @prop {Map} hover-background [color: ('secondary', 300)] - The hover background of a raised button.
-/// @prop {Map} hover-foreground [contrast-color: ('secondary', 300)] - The hover text color of a raised button.
-/// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a raised button.
-/// @prop {Map} focus-foreground [contrast-color: ('secondary', 300)] - The focus text color of a raised button.
-/// @prop {Map} focus-visible-background [color: ('secondary', 300)] - The focus-visible background color of a raised button.
-/// @prop {Map} focus-visible-foreground [contrast-color: ('secondary', 300)] - The focus-visible text color of a raised button.
-/// @prop {Map} active-background [color: ('secondary', 300)] - The active background color of a raised button.
-/// @prop {Map} active-foreground [contrast-color: ('secondary', 300)] - The active text color of a raised button.
+/// @prop {Map} background [color: ('secondary', 500)] - The background color of an contained button.
+/// @prop {Map} foreground [contrast-color: ('secondary', 500)] - The idle text color of a contained button.
+/// @prop {Map} hover-background [color: ('secondary', 300)] - The hover background of a contained button.
+/// @prop {Map} hover-foreground [contrast-color: ('secondary', 300)] - The hover text color of a contained button.
+/// @prop {Map} focus-background [color: ('secondary', 300)] - The focus background color of a contained 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-visible-foreground [contrast-color: ('secondary', 300)] - The focus-visible text 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.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for raised button.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for contained button.
 /// @requires {Map} $material-base-button
-/// @requires {Map} $material-raised-elevation
-$material-raised-button: extend(
+/// @requires {Map} $material-contained-elevation
+$material-contained-button: extend(
     $material-base-button,
-    $material-raised-elevation,
+    $material-contained-elevation,
     (
-        selector: '[igxButton="raised"], .igx-button--raised',
+        selector: '[igxButton="contained"], .igx-button--contained',
         background: (
             color: (
                 'secondary',
@@ -291,10 +291,10 @@ $material-raised-button: extend(
 /// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {List} border-radius [(rem(28px), rem(12px), rem(28px))] - The border radius used for floating button.
 /// @prop {List} size [(rem(32px), rem(40px), rem(48px))] - The size used for floating button.
-/// @requires {Map} $material-raised-button
+/// @requires {Map} $material-contained-button
 /// @requires {Map} $material-fab-elevation
 $material-fab-button: extend(
-    $material-raised-button,
+    $material-contained-button,
     $material-fab-elevation,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
@@ -315,131 +315,17 @@ $material-fab-button: extend(
     )
 );
 
-/// @type {Map}
-/// @prop {Color} background [transparent] - The background color of the an icon button.
-/// @prop {Map} foreground [color: ('gray', 900)] - The icon color of an icon button.
-/// @prop {Map} hover-background [color: ('gray', 100)] - The hover background color of an icon button.
-/// @prop {Color} hover-foreground [transparent] - The hover icon color of an icon button.
-/// @prop {Map} focus-background [color: ('gray', 200] - The focus background color an icon button.
-/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus icon color of an icon button.
-/// @prop {Map} focus-visible-background [color: ('gray', 200] - The focus-visible background color an icon button.
-/// @prop {Map} focus-visible-foreground [color: ('gray', 900)] - The focus-visible icon color of an icon button.
-/// @prop {Map} active-background [color: ('gray', 200] - The active background color an icon button.
-/// @prop {Map} active-foreground [color: ('gray', 900)] - The active icon color of an icon button.
-/// @prop {Color} disabled-background [transparent] - The disabled background color an icon button.
-/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the button.
-/// @prop {Map} focus-visible-border-color [color: ('gray', 400)] - The focus-visible border color of the button.
-/// @prop {Map} active-border-color [color: ('gray', 400)] - The active border color of the button.
-/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for floating button.
-/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for icon button.
-/// @prop {Number} default-size [2] - The default size used for the icon button component.
-/// @requires {Map} $material-base-button
-/// @requires {Map} $material-ib-elevation
-$material-icon-button: extend(
-    $material-base-button,
-    $material-ib-elevation,
-    (
-        selector: '[igxButton="icon"], .igx-button--icon',
-        background: transparent,
-        foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        hover-background: transparent,
-        hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-        focus-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-visible-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-        focus-visible-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        active-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-        active-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        disabled-background: transparent,
-        active-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        focus-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        focus-visible-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        border-radius: (
-            border-radius: (
-                rem(20px),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        size: (
-            sizable: (
-                rem(24px),
-                rem(30px),
-                rem(36px),
-            ),
-        ),
-        default-size: 2,
-    )
-);
-
 /// Generates a light material button schema.
 /// @type {Map}
 /// @requires {Map} $material-flat-button
 /// @requires {Map} $material-outlined-button
-/// @requires {Map} $material-raised-button
+/// @requires {Map} $material-contained-button
 /// @requires {Map} $material-fab-button
-/// @requires {Map} $material-icon-button
 $light-button: (
     flat: $material-flat-button,
     outlined: $material-outlined-button,
-    raised: $material-raised-button,
+    contained: $material-contained-button,
     fab: $material-fab-button,
-    icon: $material-icon-button,
 );
 
 /// @type {Map}
@@ -665,29 +551,29 @@ $fluent-outlined-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} border-color [contrast-color: ('gray', 900)] - The border color of a raised button.
-/// @prop {Map} hover-border-color [contrast-color: ('gray', 900)] - The hover border color of a raised button.
-/// @prop {Map} focus-border-color [contrast-color: ('gray', 900)] - The focus border color of a raised button.
-/// @prop {Map} focus-visible-border-color [contrast-color: ('gray', 900)] - The focus-visible border color of a raised button.
-/// @prop {Map} active-border-color [contrast-color: ('gray', 900)] - The active border color of a raised button.
-/// @prop {Map} background [color: ('primary', 500)] - The background color of an raised button.
-/// @prop {Map} foreground [contrast-color: ('primary', 900] - The idle text color of a raised button.
-/// @prop {Map} hover-background [color: ('primary', 600)] - The hover background of a raised button.
-/// @prop {Map} hover-foreground [contrast-color: ('primary', 900)] - The hover text color of a raised button.
-/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of a raised button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 900)] - The focus text color of a raised button.
-/// @prop {Map} focus-visible-background [color: ('primary', 600)] - The focus-visible background color of a raised button.
-/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 900)] - The focus-visible text color of a raised button.
-/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of a raised button.
-/// @prop {Map} active-foreground [contrast-color: ('primary', 900)] - The active text color of a raised button.
+/// @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} 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} 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-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-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.
 /// @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(2px), rem(0), rem(20px))] - The border radius used for raised button.
-/// @requires {Map} $material-raised-button
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for contained button.
+/// @requires {Map} $material-contained-button
 /// @requires {Map} $fluent-base-button
-$fluent-raised-button: extend(
-    $material-raised-button,
+$fluent-contained-button: extend(
+    $material-contained-button,
     $fluent-base-button,
     (
         border-color: (
@@ -801,10 +687,10 @@ $fluent-raised-button: extend(
 /// @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.
 /// @requires {Map} $fluent-base-button
-/// @requires {Map} $fluent-raised-button
+/// @requires {Map} $fluent-contained-button
 $fluent-fab-button: extend(
     $fluent-base-button,
-    $fluent-raised-button,
+    $fluent-contained-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
         border-color: (
@@ -847,124 +733,17 @@ $fluent-fab-button: extend(
     )
 );
 
-/// @type {Map}
-/// @prop {Color} border-color [transparent] - The border color of an icon button.
-/// @prop {Map} hover-border-color [color: ('gray', 500)] - The hover border color of an icon button.
-/// @prop {Map} focus-border-color [color: ('gray', 500)] - The focus border color of an icon button.
-/// @prop {Map} focus-visible-border-color [color: ('gray', 500)] - The focus-visible border color of an icon button.
-/// @prop {Map} active-border-color [color: ('gray', 500)] - The active border color of an icon button.
-/// @prop {Map} hover-background [color: ('gray', 200)] - The hover background color of an icon button.
-/// @prop {Map} hover-foreground [contrast-color: ('primary')] - The hover text color of a an icon button.
-/// @prop {Color} focus-background [transparent] - The focus icon color of an icon button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary')] - The focus text color of an icon button.
-/// @prop {Color} focus-visible-background [transparent] - The focus-visible icon color of an icon button.
-/// @prop {Map} focus-visible-foreground [contrast-color: ('primary')] - The focus-visible text color of an icon button.
-/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of an icon button.
-/// @prop {Map} active-foreground [contrast-color: ('primary')] - The active text color of an icon button.
-/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of an icon button.
-/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of an icon button.
-/// @prop {Map} disabled-border-color [color: ('gray', 100), lighten: 35%] - The disabled focused border color of an icon button.
-/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for icon button.
-/// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the icon button.
-/// @requires {Map} $material-icon-button
-/// @requires {Map} $fluent-base-button
-$fluent-icon-button: extend(
-    $material-icon-button,
-    $fluent-base-button,
-    (
-        foreground: (
-            color: (
-                'primary',
-            ),
-        ),
-        focus-visible-border-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-        hover-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-        hover-foreground: (
-            color: (
-                'primary',
-            ),
-        ),
-        focus-background: transparent,
-        focus-foreground: (
-            color: (
-                'primary',
-            ),
-        ),
-        focus-visible-background: transparent,
-        focus-visible-foreground: (
-            color: (
-                'primary',
-            ),
-        ),
-        active-background: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        active-foreground: (
-            color: (
-                'primary',
-            ),
-        ),
-        disabled-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        disabled-foreground: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        disabled-border-color: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        border-radius: (
-            border-radius: (
-                rem(0),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        size: (
-            sizable: (
-                rem(24px),
-                rem(32px),
-                rem(38px),
-            ),
-        ),
-    )
-);
-
 /// Generates a light fluent button schema.
 /// @type {Map}
 /// @requires {Map} $fluent-flat-button
 /// @requires {Map} $fluent-outlined-button
-/// @requires {Map} $fluent-raised-button
+/// @requires {Map} $fluent-contained-button
 /// @requires {Map} $fluent-fab-button
-/// @requires {Map} $fluent-icon-button
 $fluent-button: (
     flat: $fluent-flat-button,
     outlined: $fluent-outlined-button,
-    raised: $fluent-raised-button,
+    contained: $fluent-contained-button,
     fab: $fluent-fab-button,
-    icon: $fluent-icon-button,
 );
 
 /// @type {Map}
@@ -1179,21 +958,21 @@ $bootstrap-outlined-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} background [color: ('primary', 500)] - The background color of a raised button.
-/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of a raised button.
-/// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of an raised button.
-/// @prop {Color} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of an raised button.
-/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of an raised button.
-/// @prop {Color} focus-visible-foreground [contrast-color: ('primary', 600)] - The focus-visible text color of an raised button.
-/// @prop {Map} focus-visible-background [color: ('primary', 600)] - The focus-visible background color of an raised button.
-/// @prop {Color} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of an raised button.
-/// @prop {Map} active-background [color: ('primary', 700)] - The active background color of an raised button.
-/// @prop {Map} active-foreground [contrast-color: ('primary', 700)] - The active text color of an raised button.
-/// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a raised button.
-/// @requires {Map} $material-raised-button
+/// @prop {Map} background [color: ('primary', 500)] - The background color of a contained button.
+/// @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 {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} $material-contained-button
 /// @requires {Map} $bootstrap-base-button
-$bootstrap-raised-button: extend(
-    $material-raised-button,
+$bootstrap-contained-button: extend(
+    $material-contained-button,
     $bootstrap-base-button,
     (
         background: (
@@ -1278,11 +1057,11 @@ $bootstrap-raised-button: extend(
 /// @prop {List} border-radius [(rem(15px), rem(12px), rem(28px))] - The border radius used for outlined button.
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $bootstrap-base-button
-/// @requires {Map} $bootstrap-raised-button
+/// @requires {Map} $bootstrap-contained-button
 $bootstrap-fab-button: extend(
     $material-fab-button,
     $bootstrap-base-button,
-    $bootstrap-raised-button,
+    $bootstrap-contained-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
         background: (
@@ -1349,114 +1128,17 @@ $bootstrap-fab-button: extend(
     )
 );
 
-/// @type {Map}
-/// @prop {Color} background [transparent] - The background color of a fab button.
-/// @prop {Color} foreground [color: ('primary', 500)] - The background color of a fab button.
-/// @prop {Color} hover-background [transparent] - The hover background color of an icon button.
-/// @prop {Map} hover-foreground [color: ('primary', 600)] - The hover text color of an icon button.
-/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of an icon button.
-/// @prop {Map} focus-foreground [color: ('primary', 600)] - The focus text color of an icon button.
-/// @prop {Map} focus-visible-background [color: ('gray', 100)] - The focus-visible background color of an icon button.
-/// @prop {Map} focus-visible-foreground [color: ('primary', 600)] - The focus-visible text color of an icon button.
-/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of an icon button.
-/// @prop {Map} active-foreground [color: ('primary', 600)] - The active text color of an icon button.
-/// @prop {Color} disabled-background [transparent] - The disabled background color of an outlined button.
-/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
-/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for outlined button.
-/// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the icon button.
-/// @requires {Map} $material-icon-button
-/// @requires {Map} $bootstrap-base-button
-$bootstrap-icon-button: extend(
-    $bootstrap-base-button,
-    (
-        selector: '[igxButton="icon"], .igx-button--icon',
-        background: transparent,
-        foreground: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        hover-background: transparent,
-        hover-foreground: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        focus-foreground: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-visible-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        focus-visible-foreground: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        active-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        active-foreground: (
-            color: (
-                'primary',
-                600,
-            ),
-        ),
-        disabled-background: transparent,
-        disabled-foreground: (
-            color: (
-                'primary',
-                100,
-            ),
-        ),
-        border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        size: (
-            sizable: (
-                rem(31px),
-                rem(38px),
-                rem(48px),
-            ),
-        ),
-    )
-);
-
 /// Generates a light bootstrap button schema.
 /// @type {Map}
 /// @requires {Map} $bootstrap-flat-button
 /// @requires {Map} $bootstrap-outlined-button
-/// @requires {Map} $bootstrap-raised-button
+/// @requires {Map} $bootstrap-contained-button
 /// @requires {Map} $bootstrap-fab-button
-/// @requires {Map} $bootstrap-icon-button
 $bootstrap-button: (
     flat: $bootstrap-flat-button,
     outlined: $bootstrap-outlined-button,
-    raised: $bootstrap-raised-button,
+    contained: $bootstrap-contained-button,
     fab: $bootstrap-fab-button,
-    icon: $bootstrap-icon-button,
 );
 
 /// @type {Map}
@@ -1648,21 +1330,21 @@ $indigo-outlined-button: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} foreground [color: ('gray', 50)] - The idle text color of a raised button.
-/// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of a raised button.
-/// @prop {Map} hover-foreground [ color: ('gray', 50)] - The hover text color of a raised button.
-/// @prop {Map} focus-background [color: ('primary', 400)] - The focus background color of a raised button.
-/// @prop {Map} focus-foreground [ color: ('gray', 50)] - The focus text color of a raised button.
-/// @prop {Map} focus-visible-background [color: ('primary', 400)] - The focus-visible background color of a raised button.
-/// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a raised button.
-/// @prop {Map} active-background [color: ('gray', 50)] - The active background color of a raised button.
-/// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a raised button.
-/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the raised button.
-/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the raised button.
-/// @requires {Map} $material-raised-button
+/// @prop {Map} foreground [color: ('gray', 50)] - The idle text color of a contained button.
+/// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of a contained button.
+/// @prop {Map} hover-foreground [ color: ('gray', 50)] - The hover text color of a contained button.
+/// @prop {Map} focus-background [color: ('primary', 400)] - The focus background color of a contained button.
+/// @prop {Map} focus-foreground [ color: ('gray', 50)] - The focus text color of a contained button.
+/// @prop {Map} focus-visible-background [color: ('primary', 400)] - The focus-visible background color of a contained button.
+/// @prop {Map} focus-visible-foreground [ color: ('gray', 50)] - The focus-visible text color of a contained button.
+/// @prop {Map} active-background [color: ('gray', 50)] - The active background color of a contained button.
+/// @prop {Map} shadow-color [color: ('primary', 200)] - The shadow color of a contained button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the contained button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the contained button.
+/// @requires {Map} $material-contained-button
 /// @requires {Map} $indigo-base-button
-$indigo-raised-button: extend(
-    $material-raised-button,
+$indigo-contained-button: extend(
+    $material-contained-button,
     $indigo-base-button,
     (
         foreground: (
@@ -1745,11 +1427,11 @@ $indigo-raised-button: extend(
 /// @prop {List} size [(rem(36px), rem(42px), rem(48px))] - The size used for the fab button.
 /// @requires {Map} $material-fab-button
 /// @requires {Map} $indigo-base-button
-/// @requires {Map} $indigo-raised-button
+/// @requires {Map} $indigo-contained-button
 $indigo-fab-button: extend(
     $material-fab-button,
     $indigo-base-button,
-    $indigo-raised-button,
+    $indigo-contained-button,
     (
         selector: '[igxButton="fab"], .igx-button--fab',
         foreground: (
@@ -1793,100 +1475,15 @@ $indigo-fab-button: extend(
     )
 );
 
-/// @type {Map}
-/// @prop {Map} foreground [ color: ('gray', 700)] - The idle text color of a fab button.
-/// @prop {Color} hover-background [transparent] - The hover background color of a icon button.
-/// @prop {Map} hover-foreground [ color: ('gray', 900)] - The hover text color of a raised button.
-/// @prop {Color} focus-background [transparent] - The focus background color of a icon button.
-/// @prop {Map} focus-foreground [ color: ('gray', 900)] - The focus text color of a fab button.
-/// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of a icon button.
-/// @prop {Map} focus-visible-foreground [ color: ('gray', 900)] - The focus-visible text color of a fab button.
-/// @prop {Color} active-background [transparent] - The active background color of a flat button.
-/// @prop {Color} active-foreground [color: ('gray', 900)] - The active text color of a flat button.
-/// @prop {Color} disabled-background [transparent] - The disabled background color of a outlined button.
-/// @prop {Map} focus-border-color [color: ('gray' 300)] - The focus border color of the button.
-/// @prop {Map} focus-visible-border-color [color: ('gray' 300)] - The focus-visible border color of the button.
-/// @prop {Map} active-border-color [color: ('gray' 300)] - The active border color of the button.
-/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the icon button.
-/// @prop {Number} default-size [2] - The default size used for the icon button component.
-/// @requires {Map} $material-icon-button
-/// @requires {Map} $indigo-base-button
-$indigo-icon-button: extend(
-    $material-icon-button,
-    $indigo-base-button,
-    (
-        foreground: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
-        hover-background: transparent,
-        hover-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-background: transparent,
-        focus-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        focus-visible-background: transparent,
-        focus-visible-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        active-background: transparent,
-        active-foreground: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        disabled-background: transparent,
-        focus-border-color: (
-            color: (
-                'gray' 300,
-            ),
-        ),
-        focus-visible-border-color: (
-            color: (
-                'gray' 300,
-            ),
-        ),
-        active-border-color: (
-            color: (
-                'gray' 300,
-            ),
-        ),
-        size: (
-            sizable: (
-                rem(28px),
-                rem(32px),
-                rem(36px),
-            ),
-        ),
-        default-size: 2,
-    )
-);
-
 /// Generates a light indigo button schema.
 /// @type {Map}
 /// @requires {Map} $indigo-flat-button
 /// @requires {Map} $indigo-outlined-button
-/// @requires {Map} $indigo-raised-button
+/// @requires {Map} $indigo-contained-button
 /// @requires {Map} $indigo-fab-button
-/// @requires {Map} $indigo-icon-button
 $indigo-button: (
     flat: $indigo-flat-button,
     outlined: $indigo-outlined-button,
-    raised: $indigo-raised-button,
+    contained: $indigo-contained-button,
     fab: $indigo-fab-button,
-    icon: $indigo-icon-button,
 );