igniteui-theming 1.4.2 → 1.4.3-beta.1

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

@@ -0,0 +1,1173 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+@use '../elevation/button' as *;
+
+/* stylelint-disable max-line-length */
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type {Map}
+/// @prop {Color} shadow-color [transparent] - The shadow color of the button.
+/// @prop {Color} border-color [transparent] - The outline color of the button.
+/// @prop {Color} hover-border-color [transparent] - The hover border color of the button.
+/// @prop {Color} focus-border-color [transparent] - The focus border color of the button.
+/// @prop {Color} focus-visible-border-color [transparent] - The focus-visible border color of the button.
+/// @prop {Color} active-border-color [transparent] - The active border color of the button.
+/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the button.
+/// @prop {Map} disabled-background [color: ('gray', 300)] - The disabled background color of the button.
+/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
+$material-base-button: (
+    shadow-color: transparent,
+    border-color: transparent,
+    hover-border-color: transparent,
+    focus-border-color: transparent,
+    focus-visible-border-color: transparent,
+    active-border-color: transparent,
+    disabled-border-color: transparent,
+    disabled-background: (
+        color: ('gray', 300)
+    ),
+    disabled-foreground: (
+        color: ('gray', 500)
+    ),
+);
+
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of a flat button.
+/// @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-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-foreground [color: ('secondary', 500)] - The focus text 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-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.
+/// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
+/// @prop {Number} border-radius [4px] - The border radius used for flat button.
+/// @requires {Map} $material-base-button
+/// @requires {Map} $flat-elevation-button
+$material-flat-button: extend(
+    $material-base-button,
+    $flat-elevation-button,
+    (
+        selector: '[igxButton="flat"], .igx-button--flat',
+        background: transparent,
+        foreground: (
+            color: ('secondary', 500)
+        ),
+        hover-background: (
+            color: ('secondary', 500, .05),
+        ),
+        hover-foreground: (
+            color: ('secondary', 500)
+        ),
+        focus-background: (
+            color: ('secondary', 400, .12),
+        ),
+        focus-foreground: (
+            color: ('secondary', 500)
+        ),
+        focus-visible-background: (
+            color: ('secondary', 400, .12),
+        ),
+        focus-visible-foreground: (
+            color: ('secondary', 500)
+        ),
+        active-background: (
+            color: ('secondary', 400, .12),
+        ),
+        active-foreground: (
+            color: ('secondary', 500)
+        ),
+        disabled-background: transparent,
+        border-radius: rem(4px)
+    )
+);
+
+/// @type {Map}
+/// @prop {Map} border-color [color: ('secondary', 500)] - The outline color of an outlined button.
+/// @prop {Map} hover-border-color [color: ('secondary', 500)] - The hover border color of an outlined button.
+/// @prop {Map} focus-border-color [color: ('secondary', 500)] - The focus border color of an outlined button.
+/// @prop {Map} focus-visible-border-color [color: ('secondary', 500)] - The focus-visible border color of an outlined button.
+/// @prop {Map} active-border-color [color: ('secondary', 500)] - The active border color of an outlined button.
+/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
+/// @requires {Map} $material-flat-button
+$material-outlined-button: extend(
+    $material-flat-button,
+    (
+        selector: '[igxButton="outlined"], .igx-button--outlined',
+        border-color: (
+            color: ('secondary', 500)
+        ),
+        hover-border-color: (
+            color: ('secondary', 500)
+        ),
+        focus-border-color: (
+            color: ('secondary', 500)
+        ),
+        focus-visible-border-color: (
+            color: ('secondary', 500)
+        ),
+        active-border-color: (
+            color: ('secondary', 500)
+        ),
+        disabled-border-color: (
+            color: ('gray', 300)
+        ),
+    )
+);
+
+/// @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 {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 {Number} border-radius [4px] - The border radius used for raised button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $material-base-button
+/// @requires {Map} $material-raised-elevation
+$material-raised-button: extend(
+    $material-base-button,
+    $material-raised-elevation,
+    (
+        selector: '[igxButton="raised"], .igx-button--raised',
+        background: (
+            color: ('secondary', 500)
+        ),
+        foreground: (
+            contrast-color: ('secondary', 500)
+        ),
+        hover-background: (
+            color: ('secondary', 300)
+        ),
+        hover-foreground: (
+            contrast-color: ('secondary', 300)
+        ),
+        focus-background: (
+            color: ('secondary', 300)
+        ),
+        focus-foreground: (
+            contrast-color: ('secondary', 300)
+        ),
+        focus-visible-background: (
+            color: ('secondary', 300)
+        ),
+        focus-visible-foreground: (
+            contrast-color: ('secondary', 300)
+        ),
+        active-background: (
+            color: ('secondary', 300)
+        ),
+        active-foreground: (
+            contrast-color: ('secondary', 300)
+        ),
+        border-radius: rem(4px)
+    )
+);
+
+/// @type {Map}
+/// @prop {Number} resting-elevation [6] - The elevation level, between 0-24, to be used for the resting state.
+/// @prop {Number} hover-elevation [12] - The elevation level, between 0-24, to be used for the hover state.
+/// @prop {Number} focus-elevation [12] - The elevation level, between 0-24, to be used for the focus state.
+/// @prop {Number} border-radius [28px] - The border radius used for the floating button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $material-raised-button
+/// @requires {Map} $material-fab-elevation
+$material-fab-button: extend(
+    $material-raised-button,
+    $material-fab-elevation,
+    (
+        selector: '[igxButton="fab"], .igx-button--fab',
+        border-radius: rem(28px)
+    )
+);
+
+/// @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 {Number} border-radius [20px] - The border radius used for the floating button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @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: rem(20px),
+    )
+);
+
+/// 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-fab-button
+/// @requires {Map} $material-icon-button
+$light-button: (
+    flat: $material-flat-button,
+    outlined: $material-outlined-button,
+    raised: $material-raised-button,
+    fab: $material-fab-button,
+    icon: $material-icon-button,
+);
+
+/// @type {Map}
+/// @requires {Map} $material-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.
+$fluent-base-button: extend(
+    $material-base-button,
+    $flat-elevation-button,
+    (
+        disabled-background: (
+            color: ('gray', 200)
+        ),
+        disabled-foreground: (
+            color: ('gray', 400)
+        ),
+    )
+);
+
+/// @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} 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 {Number} border-radius [0] - The border radius used for flat button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $material-flat-button
+/// @requires {Map} $fluent-base-button
+$fluent-flat-button: extend(
+    $material-flat-button,
+    $fluent-base-button,
+    (
+        foreground: (
+            color: ('gray', 900)
+        ),
+        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', 900)
+        ),
+        disabled-background: transparent,
+        border-radius: rem(0)
+    )
+);
+
+/// @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} 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 {Number} border-radius [2px] - The border radius used for outlined button.
+/// @requires {Map} $material-outlined-button
+/// @requires {Map} $fluent-base-button
+$fluent-outlined-button: extend(
+    $material-outlined-button,
+    $fluent-base-button,
+    (
+        border-color: (
+            color: ('gray', 800)
+        ),
+        hover-border-color: (
+            color: ('gray', 800)
+        ),
+        focus-border-color: (
+            color: ('gray', 800)
+        ),
+        focus-visible-border-color: (
+            color: ('gray', 800)
+        ),
+        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', 300)
+        ),
+        active-foreground: (
+            contrast-color: ('gray', 300)
+        ),
+        disabled-background: (
+            color: ('gray', 200)
+        ),
+        disabled-foreground: (
+            color: ('gray', 400, .5)
+        ),
+        border-radius: rem(2px)
+    )
+);
+
+/// @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 {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 {Number} border-radius [2px] - The border radius used for raised button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $material-raised-button
+/// @requires {Map} $fluent-base-button
+$fluent-raised-button: extend(
+    $material-raised-button,
+    $fluent-base-button,
+    (
+        border-color: (
+            color: ('primary', 500)
+        ),
+        hover-border-color: (
+            color: ('primary', 600)
+        ),
+        focus-border-color: (
+            color: ('primary', 600)
+        ),
+        focus-visible-border-color: (
+            color: ('primary', 600)
+        ),
+        active-border-color: (
+            color: ('primary', 800)
+        ),
+        background: (
+            color: ('primary', 500)
+        ),
+        foreground: (
+            contrast-color: ('primary', 900)
+        ),
+        hover-background: (
+            color: ('primary', 600)
+        ),
+        hover-foreground: (
+            contrast-color: ('primary', 900)
+        ),
+        focus-background: (
+            color: ('primary', 600)
+        ),
+        focus-foreground: (
+            contrast-color: ('primary', 900)
+        ),
+        focus-visible-background: (
+            color: ('primary', 600)
+        ),
+        focus-visible-foreground: (
+            contrast-color: ('primary', 900)
+        ),
+        active-background: (
+            color: ('primary', 800)
+        ),
+        active-foreground: (
+            contrast-color: ('primary', 900)
+        ),
+        border-radius: rem(2px)
+    )
+);
+
+/// @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 {Number} border-radius [14px] - The border radius used for fab button.
+/// @requires {Map} $fluent-base-button
+/// @requires {Map} $fluent-raised-button
+$fluent-fab-button: extend(
+    $fluent-base-button,
+    $fluent-raised-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: rem(14px)
+    )
+);
+
+/// @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 {Number} border-radius [0] - The border radius used for icon button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @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: rem(0)
+    )
+);
+
+/// 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-fab-button
+/// @requires {Map} $fluent-icon-button
+$fluent-button: (
+    flat: $fluent-flat-button,
+    outlined: $fluent-outlined-button,
+    raised: $fluent-raised-button,
+    fab: $fluent-fab-button,
+    icon: $fluent-icon-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.
+/// @requires {Map} $material-base-button
+/// @requires {Map} $flat-elevation-button
+$bootstrap-base-button: extend(
+    $material-base-button,
+    $flat-elevation-button,
+    (
+        disabled-foreground: (
+            color: ('primary', 200)
+        ),
+        disabled-background: (
+            color: ('primary', 50)
+        ),
+    )
+);
+
+/// @type {Map}
+/// @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 {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.
+/// @prop {Number} border-radius [4px] - The border radius used for flat button.
+/// @requires {Map} $material-flat-button
+/// @requires {Map} $bootstrap-base-button
+$bootstrap-flat-button: extend(
+    $material-flat-button,
+    $bootstrap-base-button,
+    (
+        foreground: (
+            color: ('primary', 500)
+        ),
+        hover-background: transparent,
+        hover-foreground: (
+            color: ('primary', 800)
+        ),
+        focus-background: transparent,
+        focus-foreground: (
+            color: ('primary', 600)
+        ),
+        focus-visible-background: transparent,
+        focus-visible-foreground: (
+            color: ('primary', 600)
+        ),
+        active-background: transparent,
+        active-foreground: (
+            color: ('primary', 600)
+        ),
+        disabled-background: transparent,
+        shadow-color: (
+            color: ('primary', 200, .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 {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 {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} 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-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.
+/// @prop {Number} border-radius [4px] - The border radius used for outlined button.
+/// @requires {Map} $material-outlined-button
+/// @requires {Map} $bootstrap-base-button
+$bootstrap-outlined-button: extend(
+    $material-outlined-button,
+    $bootstrap-base-button,
+    (
+        foreground: (
+            color: ('primary', 500)
+        ),
+        hover-background: (
+            color: ('primary', 500)
+        ),
+        hover-foreground: (
+            contrast-color: ('primary', 600)
+        ),
+        focus-background: transparent,
+        focus-foreground: (
+            color: ('primary', 500)
+        ),
+        focus-visible-background: transparent,
+        focus-visible-foreground: (
+            color: ('primary', 500)
+        ),
+        active-background: (
+            color: ('primary', 700)
+        ),
+        active-foreground: (
+            contrast-color: ('primary', 700)
+        ),
+        border-color: (
+            color: ('primary', 500)
+        ),
+        hover-border-color: (
+            color: ('primary', 500)
+        ),
+        focus-border-color: (
+            color: ('primary', 500)
+        ),
+        focus-visible-border-color: (
+            color: ('primary', 500)
+        ),
+        active-border-color: (
+            color: ('primary', 500)
+        ),
+        disabled-border-color: (
+            color: ('primary', 50)
+        ),
+        shadow-color: (
+            color: ('primary', 200, .5)
+        ),
+        disabled-background: transparent,
+    )
+);
+
+/// @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.
+/// @prop {Number} border-radius [4px] - The border radius used for outlined button. Can be a fraction between 0 and 1, pixels, or percent.
+/// @requires {Map} $material-raised-button
+/// @requires {Map} $bootstrap-base-button
+$bootstrap-raised-button: extend(
+    $material-raised-button,
+    $bootstrap-base-button,
+    (
+        background: (
+            color: ('primary', 500)
+        ),
+        foreground: (
+            contrast-color: ('primary', 600)
+        ),
+        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)
+        ),
+        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 {Number} border-radius [15px] - The border radius used for outlined button.
+/// @requires {Map} $material-fab-button
+/// @requires {Map} $bootstrap-base-button
+/// @requires {Map} $bootstrap-raised-button
+$bootstrap-fab-button: extend(
+    $material-fab-button,
+    $bootstrap-base-button,
+    $bootstrap-raised-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: rem(15px)
+    )
+);
+
+/// @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 {Number} border-radius [4px] - The border radius used for outlined 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: rem(4px)
+    )
+);
+
+/// 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-fab-button
+/// @requires {Map} $bootstrap-icon-button
+$bootstrap-button: (
+    flat: $bootstrap-flat-button,
+    outlined: $bootstrap-outlined-button,
+    raised: $bootstrap-raised-button,
+    fab: $bootstrap-fab-button,
+    icon: $bootstrap-icon-button,
+);
+
+/// @type {Map}
+/// @requires {Map} $material-base-button
+/// @requires {Map} $flat-elevation-button
+$indigo-base-button: extend($material-base-button, $flat-elevation-button);
+
+/// @type {Map}
+/// @prop {Map} foreground [color: ('gray', 700)] - 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: ('gray', 900)] - The hover text color of a flat 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 {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.
+/// @prop {Map} shadow-color [color: ('gray', 300)] - The shadow color of a flat button.
+/// @prop {Number} border-radius [20px] - The border radius used for flat button.
+/// @requires {Map} $material-flat-button
+/// @requires {Map} $indigo-base-button
+$indigo-flat-button: extend(
+    $material-flat-button,
+    $indigo-base-button,
+    (
+        foreground: (
+            color: ('gray', 700),
+        ),
+        hover-background: transparent,
+        hover-foreground: (
+            color: ('gray', 900),
+        ),
+        focus-background: transparent,
+        focus-foreground: (
+            color: ('gray', 900),
+        ),
+        active-background: transparent,
+        active-foreground: (
+            color: ('gray', 700),
+        ),
+        focus-visible-background: transparent,
+        focus-visible-foreground: (
+            color: ('gray', 900),
+        ),
+        shadow-color: (
+            color: ('gray', 300),
+        ),
+        disabled-background: transparent,
+        border-radius: rem(20px)
+    )
+);
+
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of a outlined button.
+/// @prop {Map} foreground [color: ('gray', 700)] - The idle text color of a outlined button.
+/// @prop {Map} hover-background [color: ('gray', 100)] - The hover background color of a outlined button.
+/// @prop {Map} hover-foreground [ color: ('gray', 900)] - The hover text color of a outlined button.
+/// @prop {Color} focus-background [transparent] - The focus background color of a outlined button.
+/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of a outlined button.
+/// @prop {Color} focus-visible-background [transparent] - The focus-visible background color of a outlined button.
+/// @prop {Map} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a outlined button.
+/// @prop {Map} border-color [color: 'gray'] - The border color of an outlined button.
+/// @prop {Map} hover-border-color [color: 'gray'] - The hover border color of a outlined button.
+/// @prop {Map} focus-border-color [color: 'gray'] - The focus border color of a outlined button.
+/// @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 flat button.
+/// @prop {Color} active-foreground [color: ('gray', 900)] - The active text color of a flat 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 {Number} border-radius [20px] - The border radius used for flat button.
+/// @requires {Map} $material-outlined-button
+/// @requires {Map} $indigo-base-button
+$indigo-outlined-button: extend(
+    $material-outlined-button,
+    $indigo-base-button,
+    (
+        background: transparent,
+        foreground: (
+            color: ('gray', 700),
+        ),
+        hover-background: (
+            color: ('gray', 100)
+        ),
+        hover-foreground: (
+            color: ('gray', 900),
+        ),
+        focus-background: transparent,
+        focus-foreground: (
+            color: ('gray', 900),
+        ),
+        focus-visible-background: transparent,
+        focus-visible-foreground: (
+            color: ('gray', 900),
+        ),
+        border-color: (
+            color: 'gray',
+        ),
+        hover-border-color: (
+            color: 'gray',
+        ),
+        focus-border-color: (
+            color: 'gray',
+        ),
+        focus-visible-border-color: (
+            color: 'gray',
+        ),
+        active-border-color: (
+            color: 'gray',
+        ),
+        active-background: transparent,
+        active-foreground: (
+            color: ('gray', 900),
+        ),
+        shadow-color: (
+            color: ('gray', 300),
+        ),
+        disabled-background: transparent,
+        border-radius: rem(20px)
+    )
+);
+
+/// @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 {Number} border-radius [20px] - The border radius used for flat button.
+/// @requires {Map} $material-raised-button
+/// @requires {Map} $indigo-base-button
+$indigo-raised-button: extend(
+    $material-raised-button,
+    $indigo-base-button,
+    (
+        foreground: (
+            color: ('gray', 50)
+        ),
+        hover-background: (
+            color: ('secondary', 400),
+        ),
+        hover-foreground: (
+            color: ('gray', 50)
+        ),
+        focus-background: (
+            color: ('secondary', 400),
+        ),
+        focus-foreground: (
+            color: ('gray', 50)
+        ),
+        focus-visible-background: (
+            color: ('secondary', 400),
+        ),
+        focus-visible-foreground: (
+            color: ('gray', 50)
+        ),
+        active-foreground: (
+            color: ('gray', 50)
+        ),
+        shadow-color: (
+            color: ('secondary', 200),
+        ),
+        border-radius: rem(20px)
+    )
+);
+
+/// @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 {Number} border-radius [28px] - The border radius used for flat button.
+/// @requires {Map} $material-fab-button
+/// @requires {Map} $indigo-base-button
+/// @requires {Map} $indigo-raised-button
+$indigo-fab-button: extend(
+    $material-fab-button,
+    $indigo-base-button,
+    $indigo-raised-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: rem(28px)
+    )
+);
+
+/// @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 {Number} border-radius [20px] - The border radius used for flat button.
+/// @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)
+        ),
+    )
+);
+
+/// 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-fab-button
+/// @requires {Map} $indigo-icon-button
+$indigo-button: (
+    flat: $indigo-flat-button,
+    outlined: $indigo-outlined-button,
+    raised: $indigo-raised-button,
+    fab: $indigo-fab-button,
+    icon: $indigo-icon-button,
+);