igniteui-theming 3.2.2 → 3.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "3.2.2",
+  "version": "3.3.0-beta.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_icon-button.scss

@@ -0,0 +1,132 @@
+@use '../../../../utils/map' as *;
+@use '../light/icon-button' as *;
+
+/* stylelint-disable max-line-length */
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Generates a dark material flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-icon-button
+$material-flat-icon-button-dark: extend($material-flat-icon-button);
+
+/// Generates a dark material contained icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-contained-icon-button
+$material-contained-icon-button-dark: extend($material-contained-icon-button);
+
+/// Generates a dark material outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-outlined-icon-button
+$material-outlined-icon-button-dark: extend($material-outlined-icon-button);
+
+/// Generates a dark material icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-icon-button-dark
+/// @requires {Map} $material-outlined-icon-button-dark
+/// @requires {Map} $material-contained-icon-button-dark
+$dark-icon-button: (
+    flat: $material-flat-icon-button-dark,
+    outlined: $material-outlined-icon-button-dark,
+    contained: $material-contained-icon-button-dark,
+);
+
+/// Generates a dark fluent flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-icon-button
+$fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
+
+/// Generates a dark fluent contained icon button schema.
+/// @type {Map}
+/// @prop {Map} foreground [color: ('surface', 500)] - The idle text color of the fluent dark contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 300)] - The hover/focus background color of the fluent dark contained icon button.
+/// @requires {Map} $fluent-contained-icon-button
+$fluent-contained-icon-button-dark: extend(
+    $fluent-contained-icon-button,
+    (
+        foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a dark fluent outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-outlined-icon-button
+$fluent-outlined-icon-button-dark: extend($fluent-outlined-icon-button);
+
+/// Generates a dark fluent icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-icon-button-dark
+/// @requires {Map} $fluent-outlined-icon-button-dark
+/// @requires {Map} $fluent-contained-icon-button-dark
+$dark-fluent-icon-button: (
+    flat: $fluent-flat-icon-button-dark,
+    outlined: $fluent-outlined-icon-button-dark,
+    contained: $fluent-contained-icon-button-dark,
+);
+
+/// Generates a dark bootstrap flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-icon-button
+$bootstrap-flat-icon-button-dark: extend($bootstrap-flat-icon-button);
+
+/// Generates a dark bootstrap contained icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-contained-icon-button
+$bootstrap-contained-icon-button-dark: extend($bootstrap-contained-icon-button);
+
+/// Generates a dark bootstrap outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-outlined-icon-button
+$bootstrap-outlined-icon-button-dark: extend($bootstrap-outlined-icon-button);
+
+/// Generates a dark bootstrap icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-icon-button-dark
+/// @requires {Map} $bootstrap-outlined-icon-button-dark
+/// @requires {Map} $bootstrap-contained-icon-button-dark
+$dark-bootstrap-icon-button: (
+    flat: $bootstrap-flat-icon-button-dark,
+    outlined: $bootstrap-outlined-icon-button-dark,
+    contained: $bootstrap-contained-icon-button-dark,
+);
+
+/// Generates a dark indigo flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-icon-button
+$indigo-flat-icon-button-dark: extend($indigo-flat-icon-button);
+
+/// Generates a dark indigo contained icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-contained-icon-button
+$indigo-contained-icon-button-dark: extend($indigo-contained-icon-button);
+
+/// Generates a dark indigo outlined icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-outlined-icon-button
+$indigo-outlined-icon-button-dark: extend($indigo-outlined-icon-button);
+
+/// Generates a dark indigo icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-icon-button-dark
+/// @requires {Map} $indigo-outlined-icon-button-dark
+/// @requires {Map} $indigo-contained-icon-button-dark
+$dark-indigo-icon-button: (
+    flat: $indigo-flat-icon-button-dark,
+    outlined: $indigo-outlined-icon-button-dark,
+    contained: $indigo-contained-icon-button-dark,
+);

package/sass/themes/schemas/components/light/_icon-button.scss

@@ -0,0 +1,664 @@
+@use '../../../../utils/map' as *;
+@use '../../../../typography/functions' as *;
+
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// Material Schemas
+
+/// Generates a base material icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the material icon button.
+/// @prop {Color} border-color [transparent] - The border color of the material icon button.
+/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the material icon button.
+/// @prop {Map} focus-background [color: ('gray', 200)] - The focus background color of the material icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the material icon button.
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the material icon button.
+/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the material icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the material icon button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
+/// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
+$material-base-icon-button: (
+    background: transparent,
+    border-color: transparent,
+    foreground: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
+    focus-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    focus-border-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    disabled-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    disabled-border-color: transparent,
+    disabled-foreground: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(24px),
+            rem(30px),
+            rem(36px),
+        ),
+    ),
+);
+
+/// Generates a material flat icon button schema.
+/// @type {Map}
+/// @prop {Color} disabled-background [transparent] - The disabled background color the material flat icon button.
+/// @requires {Map} $material-base-icon-button
+$material-flat-icon-button: extend(
+    $material-base-icon-button,
+    (
+        disabled-background: transparent,
+    )
+);
+
+/// Generates a material contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('gray', 200)] - The background color of the material contained icon button.
+/// @prop {Map} focus-background [color: ('gray', 300)] - The focus background color of the material contained icon button.
+/// @requires {Map} $material-base-icon-button
+$material-contained-icon-button: extend(
+    $material-base-icon-button,
+    (
+        background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a material outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 300)] - The border color of the material outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color of the material outlined icon button.
+/// @requires {Map} $material-base-icon-button
+$material-outlined-icon-button: extend(
+    $material-base-icon-button,
+    (
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a light material icon button schema.
+/// @type {Map}
+/// @requires {Map} $material-flat-icon-button
+/// @requires {Map} $material-contained-icon-button
+/// @requires {Map} $material-outlined-icon-button
+$light-icon-button: (
+    flat: $material-flat-icon-button,
+    contained: $material-contained-icon-button,
+    outlined: $material-outlined-icon-button,
+);
+
+/// Fluent Schemas
+
+/// Generates a fluent base icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the fluent icon button.
+/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the fluent icon button.
+/// @prop {Map} focus-background [color: ('gray', 200)] - The hover/focus background color of the fluent icon button.
+/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of the fluent icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 500)] - The focus border color of the fluent icon button.
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the fluent icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the fluent icon button.
+/// @prop {List} border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the fluent flat icon button.
+/// @prop {List} size [(rem(24px), rem(32px), rem(38px))] - The size used for the fluent icon button.
+$fluent-base-icon-button: (
+    background: transparent,
+    foreground: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+    focus-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    active-background: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    focus-border-color: (
+        color: (
+            'gray',
+            500,
+        ),
+    ),
+    disabled-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    disabled-foreground: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(0),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(24px),
+            rem(32px),
+            rem(38px),
+        ),
+    ),
+);
+
+/// Generates a fluent flat icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-base-icon-button
+$fluent-flat-icon-button: extend($fluent-base-icon-button);
+
+/// Generates a fluent contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The background color of the fluent contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the fluent contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The hover/focus background color of the fluent contained icon button.
+/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of the fluent contained icon button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 800)] - The active text color of the fluent contained icon button.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 600)] - The focus border color of the fluent contained icon button.
+/// @requires {Map} $fluent-base-icon-button
+$fluent-contained-icon-button: extend(
+    $fluent-base-icon-button,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        active-background: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        active-foreground: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
+        focus-border-color: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a fluent outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the fluent outlined icon button.
+/// @prop {Map} border-color [color: ('gray', 700)] - The border color of the fluent outlined icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the fluent outlined icon button.
+/// @prop {Map} active-background [color: ('gray', 200)] - The hover/active background color of the fluent outlined icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 900)] - The focus border color of the fluent outlined icon button.
+/// @requires {Map} $fluent-base-icon-button
+$fluent-outlined-icon-button: extend(
+    $fluent-base-icon-button,
+    (
+        foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        focus-background: transparent,
+        active-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates a light fluent icon button schema.
+/// @type {Map}
+/// @requires {Map} $fluent-flat-icon-button
+/// @requires {Map} $fluent-contained-icon-button
+/// @requires {Map} $fluent-outlined-icon-button
+$fluent-icon-button: (
+    flat: $fluent-flat-icon-button,
+    contained: $fluent-contained-icon-button,
+    outlined: $fluent-outlined-icon-button,
+);
+
+/// Bootstrap Schemas
+
+/// Generates a base bootstrap icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the bootstrap icon button.
+/// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the bootstrap icon button.
+/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of the bootstrap icon button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color of the bootstrap icon button.
+/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the bootstrap icon button.
+/// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the bootstrap icon button.
+/// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the bootstrap icon button.
+$bootstrap-base-icon-button: (
+    background: transparent,
+    foreground: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
+    focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
+    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 bootstrap flat icon button schema.
+/// @type {Map}
+/// @prop {Map} hover-foreground [color: ('primary', 800)] - The hover text color of the bootstrap icon button.
+/// @prop {Map} focus-foreground [color: ('primary', 600)] - The focus text color of the bootstrap icon button.
+/// @requires {Map} $bootstrap-base-icon-button
+$bootstrap-flat-icon-button: extend(
+    $bootstrap-base-icon-button,
+    (
+        hover-foreground: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The background color of the bootstrap contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the bootstrap contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the bootstrap contained icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the bootstrap contained icon button.
+/// @prop {Map} disabled-background [color: ('primary', 100)] - The disabled background color of the bootstrap contained icon button.
+/// @prop {Map} disabled-foreground [color: ('primary', 300)] - The disabled foreground color of the bootstrap contained icon button.
+/// @requires {Map} $bootstrap-base-icon-button
+$bootstrap-contained-icon-button: extend(
+    $bootstrap-base-icon-button,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+                0.5,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        disabled-foreground: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a bootstrap outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('primary', 500)] - The border color of the bootstrap outlined icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the bootstrap outlined icon button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the bootstrap outlined icon button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of the bootstrap outlined icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the bootstrap outlined icon button.
+/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the bootstrap outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('primary', 100)] - The disabled border color of the bootstrap outlined icon button.
+/// @requires {Map} $bootstrap-base-icon-button
+$bootstrap-outlined-icon-button: extend(
+    $bootstrap-base-icon-button,
+    (
+        border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+                0.5,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+        disabled-foreground: (
+            color: (
+                'primary',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates a light bootstrap icon button schema.
+/// @type {Map}
+/// @requires {Map} $bootstrap-flat-icon-button
+/// @requires {Map} $bootstrap-contained-icon-button
+/// @requires {Map} $bootstrap-outlined-icon-button
+$bootstrap-icon-button: (
+    flat: $bootstrap-flat-icon-button,
+    contained: $bootstrap-contained-icon-button,
+    outlined: $bootstrap-outlined-icon-button,
+);
+
+/// Indigo Schemas
+
+/// Generates a base indigo icon button schema.
+/// @type {Map}
+/// @prop {Color} background [transparent] - The background color of the indigo icon button.
+/// @prop {Map} foreground [color: ('gray', 700)] - The idle text color of the indigo icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the indigo icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 300)] - The focus border color of the indigo icon button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color of the indigo icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the indigo icon button.
+/// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the indigo icon button.
+/// @prop {List} size [(rem(28px), rem(32px), rem(36px))] - The size used for the indigo icon button.
+$indigo-base-icon-button: (
+    background: transparent,
+    foreground: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
+    focus-background: transparent,
+    focus-border-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+    disabled-background: transparent,
+    disabled-foreground: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    border-radius: (
+        border-radius: (
+            rem(20px),
+            rem(0),
+            rem(20px),
+        ),
+    ),
+    size: (
+        sizable: (
+            rem(28px),
+            rem(32px),
+            rem(36px),
+        ),
+    ),
+);
+
+/// Generates an indigo flat icon button schema.
+/// @type {Map}
+/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the indigo flat icon button.
+/// @requires {Map} $indigo-base-icon-button
+$indigo-flat-icon-button: extend(
+    $indigo-base-icon-button,
+    (
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo contained icon button schema.
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 500)] - The background color of the indigo contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the indigo contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the indigo contained icon button.
+/// @prop {Map} focus-border-color [color: ('primary', 200, .5)] - The focus border color of the indigo contained icon button.
+/// @prop {Map} disabled-background [color: ('primary', 100)] - The disabled background color of the indigo contained icon button.
+/// @requires {Map} $indigo-base-icon-button
+$indigo-contained-icon-button: extend(
+    $indigo-base-icon-button,
+    (
+        background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
+/// Generates an indigo outlined icon button schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 500)] - The border color of the indigo outlined icon button.
+/// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the indigo outlined icon button.
+/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of the indigo outlined icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 300)] - The focus border color of the indigo outlined icon button.
+/// @requires {Map} $indigo-base-icon-button
+$indigo-outlined-icon-button: extend(
+    $indigo-base-icon-button,
+    (
+        border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        focus-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
+
+/// Generates a light indigo icon button schema.
+/// @type {Map}
+/// @requires {Map} $indigo-flat-icon-button
+/// @requires {Map} $indigo-contained-icon-button
+/// @requires {Map} $indigo-outlined-icon-button
+$indigo-icon-button: (
+    flat: $indigo-flat-icon-button,
+    contained: $indigo-contained-icon-button,
+    outlined: $indigo-outlined-icon-button,
+);