igniteui-theming 8.0.0 → 8.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "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

@@ -16,8 +16,60 @@ $material-flat-icon-button-dark: extend($material-flat-icon-button);
 
 /// Generates a dark material contained icon button schema.
 /// @type {Map}
+/// @prop {Map} background [color: ('gray', 900, .24)] - The background color of the material contained icon button.
+/// @prop {Map} hover-background [color: ('gray', 900, .32)] - The hover background color of the material contained icon button.
+/// @prop {Map} focus-background [color: ('gray', 900, .4)] - The focus background color of the material contained icon button.
+/// @prop {Map} focus-hover-background [color: ('gray', 900, .44)] - The background color on focus hovered state of the material contained icon button.
+/// @prop {Map} active-background [color: ('gray', 900, .5)] - The active background color of the material contained icon button.
+/// @prop {Map} disabled-background [color: ('gray', 900, .16)] - The disabled background color of the material contained icon button.
 /// @requires {Map} $material-contained-icon-button
-$material-contained-icon-button-dark: extend($material-contained-icon-button);
+$material-contained-icon-button-dark: extend(
+    $material-contained-icon-button,
+    (
+        background: (
+            color: (
+                'gray',
+                900,
+                0.24,
+            ),
+        ),
+        hover-background: (
+            color: (
+                'gray',
+                900,
+                0.32,
+            ),
+        ),
+        focus-background: (
+            color: (
+                'gray',
+                900,
+                0.4,
+            ),
+        ),
+        focus-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.44,
+            ),
+        ),
+        active-background: (
+            color: (
+                'gray',
+                900,
+                0.5,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'gray',
+                900,
+                0.16,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark material outlined icon button schema.
 /// @type {Map}
@@ -38,6 +90,8 @@ $dark-material-icon-button: (
 /// @type {Map}
 /// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of the fluent icon button.
 /// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the fluent dark icon button.
+/// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the icon button.
+/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of the fluent icon button.
 /// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the icon button.
 /// @prop {Map} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the icon button.
 $fluent-base-icon-button-dark: (
@@ -53,6 +107,18 @@ $fluent-base-icon-button-dark: (
             400,
         ),
     ),
+    focus-hover-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+    active-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
     disabled-background: (
         color: (
             'gray',
@@ -69,37 +135,45 @@ $fluent-base-icon-button-dark: (
 
 /// Generates a dark fluent flat icon button schema.
 /// @type {Map}
-/// @prop {Map} hover-foreground [color: ('primary', 400)] - The hover text color of the fluent icon button.
-/// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the icon button.
-/// @prop {Map} focus-hover-foreground [color: ('primary', 400)] - The foreground color on focus hovered state of the icon button.
+/// @prop {Map} foreground [color: ('primary', 300)] - The idle text color of the fluent icon button.
+/// @prop {Map} hover-foreground [color: ('primary', 200)] - The hover text color of the fluent icon button.
+/// @prop {Map} focus-foreground [color: ('primary', 300)] - The focus text color of the fluent icon button.
+/// @prop {Map} focus-hover-foreground [color: ('primary', 200)] - The foreground color on focus hovered state of the icon button.
+/// @prop {Map} active-foreground [color: ('primary', 100)] - The active text color of the fluent icon button.
 /// @requires {Map} $fluent-flat-icon-button
 /// @requires {Map} $fluent-base-icon-button-dark
 $fluent-flat-icon-button-dark: extend(
     $fluent-flat-icon-button,
     $fluent-base-icon-button-dark,
     (
-        hover-background: (
+        foreground: (
             color: (
-                'gray',
-                50,
+                'primary',
+                300,
             ),
         ),
         hover-foreground: (
             color: (
                 'primary',
-                400,
+                200,
             ),
         ),
-        focus-hover-background: (
+        focus-foreground: (
             color: (
-                'gray',
-                50,
+                'primary',
+                300,
             ),
         ),
         focus-hover-foreground: (
             color: (
                 'primary',
-                400,
+                200,
+            ),
+        ),
+        active-foreground: (
+            color: (
+                'primary',
+                100,
             ),
         ),
     )
@@ -115,7 +189,7 @@ $fluent-flat-icon-button-dark: extend(
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of the fluent dark contained icon button.
 /// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The foreground color on focus hovered state of the icon button.
-/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of the fluent dark contained icon button.
+/// @prop {Map} active-background [color: ('primary', 100)] - The active background color of the fluent dark contained icon button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of the fluent dark contained icon button.
 /// @prop {Map} focus-border-color [contrast-color: ('primary', 300)] - The focus border color of the fluent dark contained icon button.
 /// @requires {Map} $fluent-contained-icon-button
@@ -175,7 +249,7 @@ $fluent-contained-icon-button-dark: extend(
         active-background: (
             color: (
                 'primary',
-                200,
+                100,
             ),
         ),
         active-foreground: (
@@ -257,14 +331,16 @@ $dark-bootstrap-icon-button: (
 
 /// Generates a dark base indigo icon button schema.
 /// @prop {Map} foreground [contrast-color: ('primary', 500, .8)] - The idle text color of the indigo icon button.
-/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.10)] - The hover background color of the indigo icon button.
+/// @prop {Map} hover-background [contrast-color: ('primary', 500, .1)] - The hover background color of the indigo icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the indigo icon button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of the indigo icon button.
-/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.10)] - The background color on focus hovered state of the icon button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500, .8)] - The focus text color of the indigo icon button.
+/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, .1)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The foreground color on focus hovered state of the icon button.
 /// @prop {Map} focus-border-color [contrast-color: ('primary', 500, .2)] - The focus border color of the indigo icon button.
+/// @prop {Map} active-background [contrast-color: ('primary', 500, .1)] - The active background color of the indigo icon button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of the indigo icon button.
 /// @prop {Map} disabled-foreground [contrast-color: ('gray', 50, .2)] - The disabled foreground color of the indigo icon button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of the indigo icon button.
 /// @type {Map}
 $indigo-base-icon-button-dark: (
     foreground: (
@@ -274,6 +350,13 @@ $indigo-base-icon-button-dark: (
             0.8,
         ),
     ),
+    hover-background: (
+        contrast-color: (
+            'primary',
+            500,
+            0.1,
+        ),
+    ),
     hover-foreground: (
         contrast-color: (
             'primary',
@@ -284,39 +367,40 @@ $indigo-base-icon-button-dark: (
         contrast-color: (
             'primary',
             500,
+            0.8,
         ),
     ),
-    focus-hover-foreground: (
+    focus-hover-background: (
         contrast-color: (
             'primary',
             500,
+            0.1,
         ),
     ),
-    focus-border-color: (
+    focus-hover-foreground: (
         contrast-color: (
             'primary',
             500,
-            0.2,
         ),
     ),
-    active-foreground: (
+    focus-border-color: (
         contrast-color: (
             'primary',
             500,
+            0.2,
         ),
     ),
-    hover-background: (
+    active-background: (
         contrast-color: (
             'primary',
             500,
             0.1,
         ),
     ),
-    focus-hover-background: (
+    active-foreground: (
         contrast-color: (
             'primary',
             500,
-            0.1,
         ),
     ),
     disabled-foreground: (
@@ -326,39 +410,24 @@ $indigo-base-icon-button-dark: (
             0.2,
         ),
     ),
+    shadow-color: (
+        contrast-color: (
+            'primary',
+            500,
+            0.2,
+        ),
+    ),
 );
 
 /// Generates a dark indigo flat icon button schema.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of the indigo icon button.
-/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of a flat button.
 /// @type {Map}
 /// @requires {Map} $indigo-flat-icon-button
-$indigo-flat-icon-button-dark: extend(
-    $indigo-flat-icon-button,
-    $indigo-base-icon-button-dark,
-    (
-        focus-foreground: (
-            contrast-color: (
-                'primary',
-                500,
-                0.8,
-            ),
-        ),
-        shadow-color: (
-            contrast-color: (
-                'primary',
-                500,
-                0.2,
-            ),
-        ),
-    )
-);
+$indigo-flat-icon-button-dark: extend($indigo-flat-icon-button, $indigo-base-icon-button-dark);
 
 /// Generates a dark indigo outlined icon button schema.
 /// @type {Map}
 /// @prop {Map} border-color [contrast-color: ('primary', 500, 0.6)] - The border color of the indigo outlined icon button.
 /// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.2)] - The disabled border color of the indigo outlined icon button.
-/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of the indigo outlined icon button.
 /// @requires {Map} $indigo-outlined-icon-button
 $indigo-outlined-icon-button-dark: extend(
     $indigo-outlined-icon-button,
@@ -378,13 +447,6 @@ $indigo-outlined-icon-button-dark: extend(
                 0.2,
             ),
         ),
-        shadow-color: (
-            contrast-color: (
-                'primary',
-                500,
-                0.2,
-            ),
-        ),
     )
 );
 
@@ -393,6 +455,7 @@ $indigo-outlined-icon-button-dark: extend(
 /// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of the indigo icon button.
 /// @prop {Map} focus-hover-background [color: ('primary', 400)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-border-color [contrast-color: ('primary', 400, .5)] - The focus border color of the indigo icon button.
+/// @prop {Map} active-background [color: ('primary', 400)] - The active background color of the indigo contained icon button.
 /// @requires {Map} $indigo-contained-icon-button
 $indigo-contained-icon-button-dark: extend(
     $indigo-contained-icon-button,
@@ -417,6 +480,12 @@ $indigo-contained-icon-button-dark: extend(
                 0.5,
             ),
         ),
+        active-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
     )
 );
 

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

@@ -14,19 +14,19 @@
 /// @prop {Color} shadow-color [transparent] - The shadow color of the material icon button.
 /// @prop {Color} background [transparent] - The background color of the material icon button.
 /// @prop {Map} foreground [color: ('gray', 900)] - The idle text color of the material icon button.
-/// @prop {Color} hover-background [transparent] - The hover background color of the material icon button.
+/// @prop {Map} hover-background [color: ('gray', 500, .08)] - The hover background color of the material icon button.
 /// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover 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-background [color: ('gray', 500, .16)] - The focus background color of the material icon button.
 /// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the material icon button.
-/// @prop {Map} focus-hover-background [color: ('gray', 200)] - The background color on focus hovered state of the icon button.
+/// @prop {Map} focus-hover-background [color: ('gray', 500, .24)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The foreground color on focus hovered state of the icon button.
-/// @prop {Map} active-background [color: ('gray', 200)] - The active background color of the material icon button.
+/// @prop {Map} active-background [color: ('gray', 500, .32)] - The active background color of the material icon button.
 /// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of the material icon button.
 /// @prop {Color} border-color [transparent] - The border 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} focus-border-color [transparent] - The focus border color of the material icon button.
+/// @prop {Color} disabled-background [transparent] - The disabled background color of the material icon button.
 /// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the material icon button.
-/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color of the material icon button.
+/// @prop {Color} disabled-border-color [transparent] - The disabled border 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.
 /// @prop {Number} default-size [3] - The default size used for the icon button.
@@ -39,7 +39,13 @@ $material-base-icon-button: (
             900,
         ),
     ),
-    hover-background: transparent,
+    hover-background: (
+        color: (
+            'gray',
+            500,
+            0.08,
+        ),
+    ),
     hover-foreground: (
         color: (
             'gray',
@@ -49,7 +55,8 @@ $material-base-icon-button: (
     focus-background: (
         color: (
             'gray',
-            200,
+            500,
+            0.16,
         ),
     ),
     focus-foreground: (
@@ -61,7 +68,8 @@ $material-base-icon-button: (
     focus-hover-background: (
         color: (
             'gray',
-            200,
+            500,
+            0.24,
         ),
     ),
     focus-hover-foreground: (
@@ -73,7 +81,8 @@ $material-base-icon-button: (
     active-background: (
         color: (
             'gray',
-            200,
+            500,
+            0.32,
         ),
     ),
     active-foreground: (
@@ -83,30 +92,15 @@ $material-base-icon-button: (
         ),
     ),
     border-color: transparent,
-    focus-border-color: (
-        color: (
-            'gray',
-            400,
-        ),
-    ),
-    disabled-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
+    focus-border-color: transparent,
+    disabled-background: transparent,
     disabled-foreground: (
         color: (
             'gray',
             500,
         ),
     ),
-    disabled-border-color: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
+    disabled-border-color: transparent,
     border-radius: (
         border-radius: (
             rem(20px),
@@ -126,31 +120,22 @@ $material-base-icon-button: (
 
 /// Generates a material flat icon button schema.
 /// @type {Map}
-/// @prop {Map} hover-background [color: ('gray', 100)] - The hover background color of the material icon button.
-/// @prop {Color} disabled-background [transparent] - The disabled background color the material flat icon button.
-/// @prop {Color} disabled-border-color [transparent] - The disabled border color of the material flat icon button.
 /// @requires {Map} $material-base-icon-button
 $material-flat-icon-button: extend(
     $material-base-icon-button,
     (
         selector: '[igxIconButton="flat"], .igx-icon-button--flat',
-        hover-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        disabled-background: transparent,
-        disabled-border-color: 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} hover-background [color: ('gray', 200)] - The hover 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.
-/// @prop {Map} active-background [color: ('gray', 300)] - The active background color of the material contained icon button.
+/// @prop {Map} background [color: ('gray', 900, .08)] - The background color of the material contained icon button.
+/// @prop {Map} hover-background [color: ('gray', 900, .12)] - The hover background color of the material contained icon button.
+/// @prop {Map} focus-background [color: ('gray', 900, .16)] - The focus background color of the material contained icon button.
+/// @prop {Map} focus-hover-background [color: ('gray', 900, .20)] - The background color on focus hovered state of the material contained icon button.
+/// @prop {Map} active-background [color: ('gray', 900, .24)] - The active background color of the material contained icon button.
+/// @prop {Map} disabled-background [color: ('gray', 900, .04)] - The disabled background color of the material contained icon button.
 /// @requires {Map} $material-base-icon-button
 $material-contained-icon-button: extend(
     $material-base-icon-button,
@@ -159,25 +144,43 @@ $material-contained-icon-button: extend(
         background: (
             color: (
                 'gray',
-                200,
+                900,
+                0.08,
             ),
         ),
         hover-background: (
             color: (
                 'gray',
-                200,
+                900,
+                0.12,
             ),
         ),
         focus-background: (
             color: (
                 'gray',
-                300,
+                900,
+                0.16,
+            ),
+        ),
+        focus-hover-background: (
+            color: (
+                'gray',
+                900,
+                0.2,
             ),
         ),
         active-background: (
             color: (
                 'gray',
-                300,
+                900,
+                0.24,
+            ),
+        ),
+        disabled-background: (
+            color: (
+                'gray',
+                900,
+                0.04,
             ),
         ),
     )
@@ -186,7 +189,8 @@ $material-contained-icon-button: extend(
 /// 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.
+/// @prop {Map} focus-border-color [color: ('gray', 300)] - The focus border color of the material outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('gray', 300)] - 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,
@@ -198,10 +202,16 @@ $material-outlined-icon-button: extend(
                 300,
             ),
         ),
+        focus-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         disabled-border-color: (
             color: (
                 'gray',
-                100,
+                300,
             ),
         ),
     )
@@ -232,7 +242,7 @@ $material-icon-button: (
 /// @prop {Map} focus-hover-background [color: ('gray', 200)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
 /// @prop {Map} active-background [color: ('gray', 300)] - The active background color of the fluent icon button.
-/// @prop {Map} active-foreground [color: ('primary', 500)] - The active text color of the fluent icon button.
+/// @prop {Map} active-foreground [color: ('primary', 800)] - The active text color of the fluent icon button.
 /// @prop {Color} border-color [transparent] - The border color of the fluent icon button.
 /// @prop {Map} focus-border-color [color: ('gray', 700)] - 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.
@@ -290,7 +300,7 @@ $fluent-base-icon-button: (
     active-foreground: (
         color: (
             'primary',
-            500,
+            800,
         ),
     ),
     border-color: transparent,
@@ -435,7 +445,6 @@ $fluent-contained-icon-button: extend(
 /// @prop {Color} focus-background [transparent] - The focus background color of the fluent outlined icon button.
 /// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the fluent outlined icon button.
 /// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The foreground color on focus hovered state of the icon button.
-/// @prop {Map} active-background [color: ('gray', 200)] - The active background color of the fluent outlined icon button.
 /// @prop {Map} active-foreground [color: ('gray', 900)] - The active text color of the fluent outlined icon button.
 /// @prop {Map} focus-border-color [color: ('gray', 700)] - The focus border color of the fluent outlined icon button.
 /// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color of the fluent outlined icon button.
@@ -475,12 +484,6 @@ $fluent-outlined-icon-button: extend(
                 900,
             ),
         ),
-        active-background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
         active-foreground: (
             color: (
                 'gray',
@@ -522,12 +525,12 @@ $fluent-icon-button: (
 /// @prop {Map} foreground [color: ('primary', 500)] - The idle text color of the bootstrap icon button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of the bootstrap icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the bootstrap icon button.
-/// @prop {Color} focus-background [transparent] - The focus background color of the bootstrap icon button.
+/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the bootstrap flat icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of the bootstrap icon button.
 /// @prop {Map} focus-hover-background [color: ('primary', 600)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
-/// @prop {Map} active-background [color: ('primary', 600)] - The active background color of the bootstrap icon button.
-/// @prop {Map} active-foreground [contrast-color: ('primary', 600)] - The active text color of the bootstrap icon button.
+/// @prop {Map} active-background [color: ('primary', 800)] - The active background color of the bootstrap icon button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 800)] - The active text color of the bootstrap icon button.
 /// @prop {Color} border-color [transparent] - The border color of the bootstrap icon button.
 /// @prop {Map} focus-border-color [transparent] - The focus border color of the bootstrap icon button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color of the bootstrap icon button.
@@ -563,7 +566,12 @@ $bootstrap-base-icon-button: (
             600,
         ),
     ),
-    focus-background: transparent,
+    focus-background: (
+        color: (
+            'primary',
+            500,
+        ),
+    ),
     focus-foreground: (
         contrast-color: (
             'primary',
@@ -585,13 +593,13 @@ $bootstrap-base-icon-button: (
     active-background: (
         color: (
             'primary',
-            600,
+            800,
         ),
     ),
     active-foreground: (
         contrast-color: (
             'primary',
-            600,
+            800,
         ),
     ),
     border-color: transparent,
@@ -624,13 +632,13 @@ $bootstrap-base-icon-button: (
 /// Generates a bootstrap flat icon button schema.
 /// @type {Map}
 /// @prop {Color} hover-background [transparent] - The hover background color of the bootstrap flat icon button.
-/// @prop {Map} hover-foreground [color: ('primary', 800)] - The hover text color of the bootstrap flat icon button.
-/// @prop {Map} focus-background [color: ('gray', 100)] - The focus background color of the bootstrap flat icon button.
+/// @prop {Map} hover-foreground [color: ('primary', 600)] - The hover text color of the bootstrap flat icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the bootstrap flat icon button.
 /// @prop {Map} focus-foreground [color: ('primary', 500)] - The focus text color of the bootstrap flat icon button.
 /// @prop {Color} focus-hover-background [transparent] - The background color on focus hovered state of the icon button.
-/// @prop {Map} focus-hover-foreground [color: ('primary', 800)] - The foreground color on focus hovered state of the icon button.
-/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of the bootstrap flat icon button.
-/// @prop {Map} active-foreground [color: ('primary', 600)] - The active text color of the bootstrap flat icon button.
+/// @prop {Map} focus-hover-foreground [color: ('primary', 600)] - The foreground color on focus hovered state of the icon button.
+/// @prop {Color} active-background [transparent] - The active background color of the bootstrap flat icon button.
+/// @prop {Map} active-foreground [color: ('primary', 800)] - The active text color of the bootstrap flat icon button.
 /// @requires {Map} $bootstrap-base-icon-button
 $bootstrap-flat-icon-button: extend(
     $bootstrap-base-icon-button,
@@ -640,9 +648,10 @@ $bootstrap-flat-icon-button: extend(
         hover-foreground: (
             color: (
                 'primary',
-                800,
+                600,
             ),
         ),
+        focus-background: transparent,
         focus-foreground: (
             color: (
                 'primary',
@@ -653,19 +662,14 @@ $bootstrap-flat-icon-button: extend(
         focus-hover-foreground: (
             color: (
                 'primary',
-                800,
-            ),
-        ),
-        active-background: (
-            color: (
-                'gray',
-                100,
+                600,
             ),
         ),
+        active-background: transparent,
         active-foreground: (
             color: (
                 'primary',
-                600,
+                800,
             ),
         ),
     )
@@ -675,7 +679,6 @@ $bootstrap-flat-icon-button: extend(
 /// @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', 500)] - The focus background color of the bootstrap flat icon button.
 /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the bootstrap contained icon button.
 /// @prop {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the bootstrap contained icon button.
 /// @requires {Map} $bootstrap-base-icon-button
@@ -695,12 +698,6 @@ $bootstrap-contained-icon-button: extend(
                 600,
             ),
         ),
-        focus-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         disabled-background: (
             color: (
                 'primary',
@@ -719,11 +716,9 @@ $bootstrap-contained-icon-button: extend(
 /// 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', 500)] - The focus text color of the bootstrap outlined icon button.
-/// @prop {Map} focus-border-color [color: ('primary', 500)] - The focus border 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.
+/// @prop {Map} focus-border-color [color: ('primary', 800)] - The focus border color of the bootstrap outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('primary', 50)] - 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,
@@ -741,22 +736,16 @@ $bootstrap-outlined-icon-button: extend(
                 600,
             ),
         ),
-        focus-foreground: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         focus-border-color: (
             color: (
                 'primary',
-                500,
+                800,
             ),
         ),
         disabled-border-color: (
             color: (
                 'primary',
-                100,
+                50,
             ),
         ),
     )
@@ -786,7 +775,7 @@ $bootstrap-icon-button: (
 /// @prop {Map} focus-foreground [color: ('gray', 600)] - The focus text color of the indigo icon button.
 /// @prop {Map} focus-hover-background [color: ('gray', 900, 0.5)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [color: ('gray', 700)] - The foreground color on focus hovered state of the icon button.
-/// @prop {Color} active-background [transparent] - The active background color of the indigo icon button.
+/// @prop {Map} active-background [color: ('gray', 900, 0.5)] - The active background color of the indigo icon button.
 /// @prop {Map} active-foreground [color: ('gray', 700)] - The active text color of the indigo icon button.
 /// @prop {Color} border-color [transparent] - The border color of the indigo icon button.
 /// @prop {Map} focus-border-color [color: ('gray', 900, 0.15)] - The focus border color of the indigo icon button.
@@ -844,7 +833,13 @@ $indigo-base-icon-button: (
             700,
         ),
     ),
-    active-background: transparent,
+    active-background: (
+        color: (
+            'gray',
+            900,
+            0.05,
+        ),
+    ),
     active-foreground: (
         color: (
             'gray',
@@ -928,7 +923,7 @@ $indigo-outlined-icon-button: extend(
 /// @prop {Map} hover-background [color: ('primary', 400)] - The hover background color of the indigo contained icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the indigo contained icon button.
 /// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the indigo contained icon button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus background color of the indigo contained icon button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500, .8)] - The focus background color of the indigo contained icon button.
 /// @prop {Map} focus-border-color [color: ('primary', 400, .5)] - The focus border color of the indigo icon button.
 /// @prop {Map} focus-hover-background [color: ('primary', 400)] - The background color on focus hovered state of the icon button.
 /// @prop {Map} focus-hover-foreground [color: ('primary', 500)] - The foreground color on focus hovered state of the icon button.
@@ -983,6 +978,7 @@ $indigo-contained-icon-button: extend(
             contrast-color: (
                 'primary',
                 500,
+                0.8,
             ),
         ),
         focus-border-color: (