igniteui-theming 4.2.0 → 4.4.0

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

@@ -10,29 +10,24 @@
 ////
 
 /// @type {Map}
-/// @prop {Map} disabled-background [color: ('gray', 100, .3)] - The disabled background color of the button.
-/// @prop {Color} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
-/// @requires {Map} $material-base-button
+/// @prop {Map} disabled-background [color: ('gray', 100)] - The disabled background color of the button.
+/// @prop {Color} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the button.
 $material-base-button-dark: (
     disabled-background: (
         color: (
             'gray',
             100,
-            0.3,
         ),
     ),
     disabled-foreground: (
         color: (
             'gray',
-            200,
+            500,
         ),
     ),
 );
 
 /// @type {Map}
-/// @prop {Map} hover-background [color: ('secondary', 500, .12)] - The hover background color of a flat button.
-/// @prop {Map} focus-background [color: ('secondary', 400, .24)] - The focus background color of a flat button.
-/// @prop {Map} focus-visible-background [color: ('secondary', 400, .24)] - The focus-visible background color of a flat button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color a flat button.
 /// @requires {Map} $material-base-button-dark
 /// @requires {Map} $material-flat-button
@@ -40,42 +35,13 @@ $material-flat-button-dark: extend(
     $material-flat-button,
     $material-base-button-dark,
     (
-        hover-background: (
-            color: (
-                'secondary',
-                500,
-                0.12,
-            ),
-        ),
-        focus-background: (
-            color: (
-                'secondary',
-                400,
-                0.24,
-            ),
-        ),
-        focus-visible-background: (
-            color: (
-                'secondary',
-                400,
-                0.24,
-            ),
-        ),
         disabled-background: transparent,
     )
 );
 
-/// @requires {Map} $material-contained-button
-/// @requires {Map} $material-base-button-dark
-$material-contained-button-dark: extend($material-contained-button, $material-base-button-dark);
-
-/// @requires {Map} $material-fab-button
-/// @requires {Map} $material-base-button-dark
-$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);
-
 /// @requires {Map} $material-outlined-button
 /// @requires {Map} $material-base-button-dark
-/// @prop {Map} disabled-border-color [color: ('gray', 100, .3)] - The disabled focused border color of an outlined button.
+/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled focused border color of an outlined button.
 /// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
 $material-outlined-button-dark: extend(
     $material-outlined-button,
@@ -84,21 +50,28 @@ $material-outlined-button-dark: extend(
         disabled-border-color: (
             color: (
                 'gray',
-                100,
-                0.3,
+                300,
             ),
         ),
         disabled-background: transparent,
     )
 );
 
+/// @requires {Map} $material-contained-button
+/// @requires {Map} $material-base-button-dark
+$material-contained-button-dark: extend($material-contained-button, $material-base-button-dark);
+
+/// @requires {Map} $material-fab-button
+/// @requires {Map} $material-base-button-dark
+$material-fab-button-dark: extend($material-fab-button, $material-base-button-dark);
+
 /// Generates a dark material button schema.
 /// @type {Map}
 /// @requires {Map} $material-flat-button-dark
-/// @requires {Map} $material-outlined-button
-/// @requires {Map} $material-contained-button
-/// @requires {Map} $material-fab-button
-$dark-button: (
+/// @requires {Map} $material-outlined-button-dark
+/// @requires {Map} $material-contained-button-dark
+/// @requires {Map} $material-fab-button-dark
+$dark-material-button: (
     flat: $material-flat-button-dark,
     outlined: $material-outlined-button-dark,
     contained: $material-contained-button-dark,
@@ -106,10 +79,30 @@ $dark-button: (
 );
 
 /// @type {Map}
-/// @requires {Map} $material-base-button
-/// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
-/// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
+/// @prop {Map} focus-visible-border-color [color: ('gray', 400)] - The focus-visible border color of a contained button.
+/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background of a contained button.
+/// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the button.
+/// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the button.
+/// @prop {Map} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
 $fluent-base-button-dark: (
+    focus-visible-border-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    hover-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+    focus-hover-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
     disabled-background: (
         color: (
             'gray',
@@ -119,7 +112,7 @@ $fluent-base-button-dark: (
     disabled-foreground: (
         color: (
             'gray',
-            100,
+            200,
         ),
     ),
 );
@@ -136,22 +129,72 @@ $fluent-flat-button-dark: extend(
     )
 );
 
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of a contained button.
+/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an outlined button.
+/// @prop {Map} active-foreground [contrast-color: ('gray' 100)] - The active text color of an outlined button.
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color of an outlined button.
+/// @prop {Map} hover-border-color [color: ('gray', 400)] - The hover border color of an outlined button.
+/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled focused border color of an outlined button.
+/// @requires {Map} $fluent-outlined-button
+/// @requires {Map} $fluent-base-button-dark
+$fluent-outlined-button-dark: extend(
+    $fluent-outlined-button,
+    $fluent-base-button-dark,
+    (
+        focus-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        active-background: (
+            color: (
+                'gray',
+                100,
+                0.8,
+            ),
+        ),
+        active-foreground: (
+            contrast-color: (
+                'gray',
+                100,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        hover-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
+
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 300)] - The background color of an contained button.
-/// @prop {Map} foreground [color: ('surface', 500] - The idle text color of a contained button.
-/// @prop {Map} border-color [color: ('primary', 300)] - The border color of a contained button.
-/// @prop {Map} hover-border-color [color: ('primary', 200)] - The hover border color of a contained button.
-/// @prop {Map} focus-border-color [color: ('primary', 300)] - The focus border color of a contained button.
-/// @prop {Map} focus-visible-border-color [color: ('primary', 200)] - The focus-visible border color of a contained button.
-/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a contained button.
+/// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of a contained button.
+/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
-/// @prop {Map} hover-foreground [color: ('surface', 500] - The hover text color of a contained button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of a contained button.
 /// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a contained button.
-/// @prop {Map} focus-foreground [color: ('surface', 500] - The focus text color of a contained button.
-/// @prop {Map} focus-visible-background [color: ('primary', 200)] - The focus-visible background color of a contained button.
-/// @prop {Map} focus-visible-foreground [color: ('surface', 500] - The focus-visible text color of a contained button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of a contained button.
+/// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The text color on focus hovered state of the button.
+/// @prop {Map} focus-visible-background [color: ('primary', 300)] - The focus-visible background color of a contained button.
+/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of a contained button.
 /// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a contained button.
-/// @prop {Map} active-foreground [color: ('surface', 500] - The active text color of a contained button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of a contained button.
 /// @requires {Map} $fluent-contained-button
 /// @requires {Map} $fluent-base-button-dark
 $fluent-contained-button-dark: extend(
@@ -165,13 +208,7 @@ $fluent-contained-button-dark: extend(
             ),
         ),
         foreground: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-        border-color: (
-            color: (
+            contrast-color: (
                 'primary',
                 300,
             ),
@@ -183,15 +220,9 @@ $fluent-contained-button-dark: extend(
             ),
         ),
         hover-foreground: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-        hover-border-color: (
-            color: (
+            contrast-color: (
                 'primary',
-                200,
+                300,
             ),
         ),
         focus-background: (
@@ -201,13 +232,19 @@ $fluent-contained-button-dark: extend(
             ),
         ),
         focus-foreground: (
-            color: (
-                'surface',
-                500,
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
-        focus-border-color: (
+        focus-hover-background: (
             color: (
+                'primary',
+                200,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
                 'primary',
                 300,
             ),
@@ -215,19 +252,19 @@ $fluent-contained-button-dark: extend(
         focus-visible-background: (
             color: (
                 'primary',
-                200,
+                300,
             ),
         ),
         focus-visible-foreground: (
-            color: (
-                'surface',
-                500,
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
         focus-visible-border-color: (
-            color: (
+            contrast-color: (
                 'primary',
-                200,
+                300,
             ),
         ),
         active-background: (
@@ -237,57 +274,111 @@ $fluent-contained-button-dark: extend(
             ),
         ),
         active-foreground: (
-            color: (
-                'surface',
-                500,
-            ),
-        ),
-        active-border-color: (
-            color: (
+            contrast-color: (
                 'primary',
-                200,
+                300,
             ),
         ),
     )
 );
 
+/// @type {Map}
+/// @prop {Map} background [color: ('primary', 300)] - The background color of an contained button.
+/// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of a contained button.
+/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 300)] - The focus-visible border color of a contained button.
+/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a contained button.
+/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a contained button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 300)] - The hover text color of a contained button.
+/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a contained button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of a contained button.
+/// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the button.
+/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The text color on focus hovered state of the button.
+/// @prop {Map} focus-visible-background [color: ('primary', 300)] - The focus-visible background color of a contained button.
+/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 300)] - The focus-visible text color of a contained button.
+/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a contained button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of a contained button.
 /// @requires {Map} $fluent-fab-button
 /// @requires {Map} $fluent-base-button-dark
-$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark, $fluent-contained-button-dark);
-
-/// @prop {Map} hover-foreground [color: ('gray', 50)] - TThe hover text color of an outlined button.
-/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an outlined button.
-/// @prop {Map} active-foreground [contrast-color: ('gray' 100)] - The active text color of an outlined button.
-/// @prop {Map} border-color [color: ('gray', 100)] - The border color of an outlined button.
-/// @requires {Map} $fluent-outlined-button
-/// @requires {Map} $fluent-base-button-dark
-$fluent-outlined-button-dark: extend(
-    $fluent-outlined-button,
+$fluent-fab-button-dark: extend(
+    $fluent-fab-button,
     $fluent-base-button-dark,
     (
+        background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        foreground: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
         hover-background: (
             color: (
-                'gray',
-                50,
+                'primary',
+                200,
             ),
         ),
-        active-background: (
+        hover-foreground: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-background: (
             color: (
-                'gray',
-                100,
-                0.8,
+                'primary',
+                300,
             ),
         ),
-        active-foreground: (
+        focus-foreground: (
             contrast-color: (
-                'gray',
-                100,
+                'primary',
+                300,
             ),
         ),
-        border-color: (
+        focus-hover-background: (
             color: (
-                'gray',
-                100,
+                'primary',
+                200,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-visible-background: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-visible-foreground: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-visible-border-color: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        active-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+        active-foreground: (
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
     )
@@ -296,9 +387,9 @@ $fluent-outlined-button-dark: extend(
 /// Generates a dark fluent button schema.
 /// @type {Map}
 /// @requires {Map} $fluent-flat-button-dark
-/// @requires {Map} $fluent-outlined-button
-/// @requires {Map} $fluent-contained-button
-/// @requires {Map} $fluent-fab-button
+/// @requires {Map} $fluent-outlined-button-dark
+/// @requires {Map} $fluent-contained-button-dark
+/// @requires {Map} $fluent-fab-button-dark
 $dark-fluent-button: (
     flat: $fluent-flat-button-dark,
     outlined: $fluent-outlined-button-dark,
@@ -306,32 +397,6 @@ $dark-fluent-button: (
     fab: $fluent-fab-button-dark,
 );
 
-/// @type {Map}
-/// @requires {Map} $bootstrap-base-button
-$bootstrap-base-button-dark: $bootstrap-base-button;
-
-/// @type {Map}
-/// @prop {Map} disabled-border-color [color: ('primary', 900)] - The disabled border color of the button.
-/// @requires {Map} $bootstrap-base-button-dark
-/// @requires {Map} $bootstrap-outlined-button
-$bootstrap-outlined-button-dark: extend(
-    $bootstrap-base-button-dark,
-    $bootstrap-outlined-button,
-    (
-        disabled-border-color: (
-            color: (
-                'primary',
-                900,
-            ),
-        ),
-    )
-);
-
-/// @type {Map}
-/// @requires {Map} $bootstrap-base-button-dark
-/// @requires {Map} $bootstrap-flat-button
-$bootstrap-flat-button-dark: extend($bootstrap-base-button-dark, $bootstrap-flat-button);
-
 /// Generates a dark bootstrap button schema.
 /// @type {Map}
 /// @requires {Map} $bootstrap-flat-button
@@ -339,8 +404,8 @@ $bootstrap-flat-button-dark: extend($bootstrap-base-button-dark, $bootstrap-flat
 /// @requires {Map} $bootstrap-contained-button
 /// @requires {Map} $bootstrap-fab-button
 $dark-bootstrap-button: (
-    flat: $bootstrap-flat-button-dark,
-    outlined: $bootstrap-outlined-button-dark,
+    flat: $bootstrap-flat-button,
+    outlined: $bootstrap-outlined-button,
     contained: $bootstrap-contained-button,
     fab: $bootstrap-fab-button,
 );
@@ -348,7 +413,6 @@ $dark-bootstrap-button: (
 /// @type {Map}
 /// @prop {Color} disabled-foreground [color: ('gray', 300)] - The disabled foreground color of the button.
 /// @prop {Color} disabled-background [color: ('gray', 200, .1)] - The disabled background color of the button.
-/// @requires {Map} $indigo-base-button
 $indigo-base-button-dark: (
     disabled-foreground: (
         color: (
@@ -389,6 +453,7 @@ $indigo-flat-button-dark: extend(
 /// @prop {Color} foreground [color: ('gray', 900)] - The idle text color of a contained button.
 /// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a contained button.
 /// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a contained button.
+/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The text color on focus hovered state of the button.
 /// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a contained button.
 /// @requires {Map} $indigo-base-button-dark
 /// @requires {Map} $indigo-contained-button
@@ -414,6 +479,12 @@ $indigo-contained-button-dark: extend(
                 900,
             ),
         ),
+        focus-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         focus-visible-foreground: (
             color: (
                 'gray',
@@ -461,6 +532,7 @@ $indigo-outlined-button-dark: extend(
 /// @prop {Color} foreground [color: ('gray', 900) - The idle text color of a fab button.
 /// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a fab button.
 /// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a fab button.
+/// @prop {Map} focus-hover-foreground [color: ('gray', 900)] - The text color on focus hovered state of the button.
 /// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a fab button.
 /// @requires {Map} $indigo-base-button-dark
 /// @requires {Map} $indigo-fab-button
@@ -486,6 +558,12 @@ $indigo-fab-button-dark: extend(
                 900,
             ),
         ),
+        focus-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         focus-visible-foreground: (
             color: (
                 'gray',

package/sass/themes/schemas/components/dark/_calendar.scss

@@ -7,14 +7,14 @@
 /// @access public
 ////
 
-/// Generates a dark calendar schema.
+/// Generates a dark material calendar schema.
 /// @type {Map}
 /// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
 /// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected date.
 /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 500)] - The focus text color for the selected date.
-/// @requires $light-calendar
-$dark-calendar: extend(
-    $light-calendar,
+/// @requires $material-calendar
+$dark-material-calendar: extend(
+    $material-calendar,
     (
         date-disabled-text-color: (
             color: (

package/sass/themes/schemas/components/dark/_card.scss

@@ -7,12 +7,12 @@
 /// @access public
 ////
 
-/// Generates a dark card schema.
+/// Generates a dark material card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 400, .38)] - The outline color of an outlined type card.
-/// @requires $light-card
-$dark-card: extend(
-    $light-card,
+/// @requires $material-card
+$dark-material-card: extend(
+    $material-card,
     (
         outline-color: (
             color: (

package/sass/themes/schemas/components/dark/_carousel.scss

@@ -54,11 +54,11 @@ $base-dark-carousel: extend(
     )
 );
 
-/// Generates a dark carousel schema based on a mix of $light-carousel and $base-dark-carousel
+/// Generates a dark material carousel schema based on a mix of $material-carousel and $base-dark-carousel
 /// @type {Map}
-/// @requires $light-carousel
+/// @requires $material-carousel
 /// @requires $base-dark-carousel
-$dark-carousel: $base-dark-carousel;
+$dark-material-carousel: extend($material-carousel, $base-dark-carousel);
 
 /// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel
 /// @type {Map}

package/sass/themes/schemas/components/dark/_checkbox.scss

@@ -8,10 +8,10 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// Generates a dark checkbox schema.
+/// Generates a dark material checkbox schema.
 /// @type {Map}
-/// @requires $light-checkbox
-$dark-checkbox: $light-checkbox;
+/// @requires $material-checkbox
+$dark-material-checkbox: $material-checkbox;
 
 /// Generates a dark fluent checkbox schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_chip.scss

@@ -7,22 +7,22 @@
 /// @access public
 ////
 
-/// Generates a dark chip schema based on a mix of $light-chip and $base-dark-chip.
+/// Generates a dark material chip schema.
 /// @type {Map}
-/// @requires $light-chip
-$dark-chip: $light-chip;
+/// @requires $material-chip
+$dark-material-chip: $material-chip;
 
-/// Generates a dark fluent chip schema based on a mix of $fluent-chip and $base-dark-chip.
+/// Generates a dark fluent chip schema.
 /// @type {Map}
 /// @requires $fluent-chip
 $dark-fluent-chip: $fluent-chip;
 
-/// Generates a dark bootstrap chip schema based on a mix of $bootstrap-chip and $ase-dark-chip.
+/// Generates a dark bootstrap chip schema.
 /// @type {Map}
 /// @requires $bootstrap-chip
 $dark-bootstrap-chip: $bootstrap-chip;
 
-/// Generates a dark indigo chip schema based on a mix of $indigo-chip and $base-dark-chip.
+/// Generates a dark indigo chip schema.
 /// @type {Map}
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} hover-text-color [color: ('gray', 700)] - The chip text hover color.