igniteui-theming 6.2.0-beta.2 → 6.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.2.0-beta.2",
+  "version": "6.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/_button-group.scss

@@ -13,7 +13,7 @@
 /// @prop {Map} item-hover-border-color [color: ('gray', 100)] - The hover border color between button group items.
 /// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
 /// @prop {Map} item-hover-background [color: ('gray', 100), .8] - The hover background color for button group items.
-/// @prop {Map} item-focused-background [color: ('gray', 100), .8] - The focused background color for button group items.
+/// @prop {Map} item-focused-background [color: ('gray', 700), .3] - The focused background color for button group items.
 /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for a selected item in the button group.
 /// @prop {Map} item-selected-hover-background [color: ('gray', 300, .8)] - The hover background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 300)] - The border color for button group selected items.
@@ -53,8 +53,8 @@ $base-dark-button-group: (
     item-focused-background: (
         color: (
             'gray',
-            100,
-            0.8,
+            700,
+            0.3,
         ),
     ),
 
@@ -104,9 +104,31 @@ $base-dark-button-group: (
 
 /// Generates a dark material button-group schema based on a mix of $light-button-group and $base-dark-button-group
 /// @type {Map}
+/// @prop {Map} item-focused-hover-background [color: ('gray', 500, .3)] - The focused & hover background color for button group items.
+/// @prop {Map} item-selected-focus-hover-background [color: ('gray', 400, .8)] - The background color for a selected item in focused & hover state in the button group.
 /// @requires $material-button-group
 /// @requires $base-dark-button-group
-$dark-material-button-group: extend($material-button-group, $base-dark-button-group);
+$dark-material-button-group: extend(
+    $material-button-group,
+    $base-dark-button-group,
+    (
+        item-focused-hover-background: (
+            color: (
+                'gray',
+                500,
+                0.3,
+            ),
+        ),
+
+        item-selected-focus-hover-background: (
+            color: (
+                'gray',
+                400,
+                0.8,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
 /// @type {Map}
@@ -116,8 +138,9 @@ $dark-material-button-group: extend($material-button-group, $base-dark-button-gr
 /// @prop {Map} item-hover-background [color: ('gray', 50)] - The background color for button group items on hover.
 /// @prop {Map} item-focused-background [color: ('gray', 100)] - The focused background color for button group items.
 /// @prop {Map} item-selected-background [color: ('gray', 200)] - The background color for button group selected items.
-/// @prop {Map} item-selected-hover-background [color: ('gray', 300)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-border-color [color: ('gray', 400)] - The border color for button group selected items.
+/// @prop {Map} item-selected-focus-background [color: ('gray', 300)] - The background color for a selected item in focus state in the button group.
+/// @prop {Map} item-selected-hover-background [color: ('gray', 400, .3)] - The background color for a selected item in hover or focus state in the button group.
 /// @prop {Map} item-selected-hover-border-color [color: ('gray', 400)] - The border color for a selected item in hover state in the button group.
 /// @prop {Map} item-disabled-border: [color: ('gray', 400)] - The border color for button group disabled items.
 /// @prop {Map} disabled-text-color [color: ('gray', 300)]- The text/icon color for a disabled item in the button group.
@@ -172,17 +195,25 @@ $dark-fluent-button-group: extend(
             ),
         ),
 
-        item-selected-hover-background: (
+        item-selected-border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        item-selected-focus-background: (
             color: (
                 'gray',
                 300,
             ),
         ),
 
-        item-selected-border-color: (
+        item-selected-hover-background: (
             color: (
                 'gray',
                 400,
+                0.3,
             ),
         ),
 
@@ -246,6 +277,7 @@ $dark-bootstrap-button-group: $bootstrap-button-group;
 /// @prop {Map} item-hover-text-color [contrast-color: ('gray', 50)] - The hover text color for button group items.
 /// @prop {Map} item-hover-icon-color [contrast-color: ('gray', 50)] - The hover icon color for button group items.
 /// @prop {Map} item-hover-border-color [color: ('gray', 200)] - The hover border color between button group items.
+/// @prop {Map} item-focused-border-color [color: ('gray', 100)] - The focused border color for an item from the button group.
 /// @prop {Map} item-focused-text-color [contrast-color: ('gray', 50, .8)] - The focused text color for button group items.
 /// @prop {Map} item-focused-background [contrast-color: ('gray', 50, .05)] - The focused background color for button group items.
 /// @prop {Color} disabled-background-color [transparent] - The background color for a disabled item in the button group.
@@ -325,6 +357,13 @@ $dark-indigo-button-group: extend(
             ),
         ),
 
+        item-focused-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
         item-focused-text-color: (
             contrast-color: (
                 'gray',

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

@@ -88,7 +88,9 @@ $dark-material-button: (
 /// @type {Map}
 /// @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-background [color: ('gray', 100)] - The background color of a contained button when focused with click and keyboard.
 /// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the button.
+/// @prop {Map} active-background [color: ('gray', 100)] - The active background color of a contained 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.
 /// @prop {Map} disabled-icon-color [color: ('gray', 200)] - The disabled icon color of the button.
@@ -105,12 +107,24 @@ $fluent-base-button-dark: (
             50,
         ),
     ),
+    focus-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
     focus-hover-background: (
         color: (
             'gray',
             50,
         ),
     ),
+    active-background: (
+        color: (
+            'gray',
+            100,
+        ),
+    ),
     disabled-background: (
         color: (
             'gray',
@@ -143,11 +157,10 @@ $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} focus-border-color [color: ('gray', 400)] - The focus border color of a contained button.
+/// @prop {Map} active-border-color [color: ('gray', 400)] - The active 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
@@ -155,32 +168,25 @@ $fluent-outlined-button-dark: extend(
     $fluent-outlined-button,
     $fluent-base-button-dark,
     (
-        focus-border-color: (
+        border-color: (
             color: (
                 'gray',
                 400,
             ),
         ),
-        active-background: (
+        hover-border-color: (
             color: (
                 'gray',
-                100,
-                0.8,
-            ),
-        ),
-        active-foreground: (
-            contrast-color: (
-                'gray',
-                100,
+                400,
             ),
         ),
-        border-color: (
+        focus-border-color: (
             color: (
                 'gray',
                 400,
             ),
         ),
-        hover-border-color: (
+        active-border-color: (
             color: (
                 'gray',
                 400,
@@ -203,13 +209,13 @@ $fluent-outlined-button-dark: extend(
 /// @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 [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 [contrast-color: ('primary', 500)] - The focus text color of a contained button.
+/// @prop {Map} focus-background [color: ('primary', 100)] - The background color of a contained button when focused with click and keyboard.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The text color of a contained button when focused with click and keyboard.
 /// @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-background [color: ('primary', 100)] - The active background 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
@@ -256,7 +262,7 @@ $fluent-contained-button-dark: extend(
         focus-background: (
             color: (
                 'primary',
-                300,
+                100,
             ),
         ),
         focus-foreground: (
@@ -298,7 +304,7 @@ $fluent-contained-button-dark: extend(
         active-background: (
             color: (
                 'primary',
-                200,
+                100,
             ),
         ),
         active-foreground: (
@@ -319,13 +325,13 @@ $fluent-contained-button-dark: extend(
 /// @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-background [color: ('primary', 100)] - The background color of a contained button when focused with click and keyboard.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The text color of a contained button when focused with click and keyboard.
 /// @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-background [color: ('primary', 100)] - 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
@@ -372,7 +378,7 @@ $fluent-fab-button-dark: extend(
         focus-background: (
             color: (
                 'primary',
-                300,
+                100,
             ),
         ),
         focus-foreground: (
@@ -414,7 +420,7 @@ $fluent-fab-button-dark: extend(
         active-background: (
             color: (
                 'primary',
-                200,
+                100,
             ),
         ),
         active-foreground: (
@@ -453,14 +459,14 @@ $dark-bootstrap-button: (
 );
 
 /// @type {Map}
-/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of a flat button.
+/// @prop {Map} foreground [contrast-color: ('primary', 500)] - The idle text color of the button.
 /// @prop {Map} icon-color [contrast-color: ('primary', 500, 0.8)] - The idle icon color of the button.
 /// @prop {Map} icon-color-hover [contrast-color: ('primary', 500)] - The hover icon color of the button.
-/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of a flat button.
-/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The focus text color of a flat button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 500)] - The hover text color of the button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 500)] - The text color of the button when focused with click and keyboard.
 /// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 500)] - The text color on focus hovered state of the button.
-/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of a flat button.
-/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of a flat button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 500)] - The active text color of the button.
+/// @prop {Map} focus-visible-foreground [contrast-color: ('primary', 500)] - The focus-visible text color of the button.
 /// @prop {Map} disabled-foreground [contrast-color: ('primary', 500, 0.20)] - The disabled foreground color of the button.
 /// @prop {Map} disabled-icon-color [contrast-color: ('primary', 500, 0.30)] - The disabled icon color of the button.
 $indigo-base-button-dark: (
@@ -530,9 +536,11 @@ $indigo-base-button-dark: (
 );
 
 /// @type {Map}
-/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.10)] - The hover background color of a flat button.
-/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.10] - The background color on focus hovered state of the button.
-/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.20)] - The shadow color of a flat button.
+/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.1)] - The hover background color of a flat button.
+/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1] - The background color on focus hovered state of a flat button.
+/// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of a flat button when focused with click and keyboard.
+/// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of a flat button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of a flat button.
 /// @requires {Map} $indigo-flat-button
 /// @requires {Map} $indigo-base-button-dark
 $indigo-flat-button-dark: extend(
@@ -553,6 +561,20 @@ $indigo-flat-button-dark: extend(
                 0.1,
             ),
         ),
+        focus-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
+        active-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
         shadow-color: (
             contrast-color: (
                 'primary',
@@ -564,15 +586,17 @@ $indigo-flat-button-dark: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} border-color [contrast-color: ('primary', 500, 0.60)] - The border color of an outlined button.
-/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.10)] - The hover background color of a flat button.
-/// @prop {Map} hover-border-color [contrast-color: ('primary', 500, 0.80)] - The hover border color of a outlined button.
-/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.10] - The background color on focus hovered state of the button.
-/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.60)] - The focus border color of a outlined button.
-/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 500, 0.60)] - The focus-visible border color of a outlined button.
-/// @prop {Map} active-border-color [contrast-color: ('primary', 500, 0.80))] - The active border color of a outlined button.
-/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.20)] - The shadow color of a flat button.
-/// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.20)] - The disabled focused border color of an outlined button.
+/// @prop {Map} border-color [contrast-color: ('primary', 500, 0.6)] - The border color of an outlined button.
+/// @prop {Map} hover-background [contrast-color: ('primary', 500, 0.1)] - The hover background color of an outlined button.
+/// @prop {Map} hover-border-color [contrast-color: ('primary', 500, 0.8)] - The hover border color of an outlined button.
+/// @prop {Map} focus-hover-background [contrast-color: ('primary', 500, 0.1)] - The background color on focus hovered state of an outlined button.
+/// @prop {Map} focus-background [contrast-color: ('primary', 500, 0.1)] - The background color of an outlined button when focused with click and keyboard.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 500, 0.6)] - The focus border color of an outlined button.
+/// @prop {Map} focus-visible-border-color [contrast-color: ('primary', 500, 0.6)] - The focus-visible border color of an outlined button.
+/// @prop {Map} active-background [contrast-color: ('primary', 500, 0.1)] - The active background color of an outlined button.
+/// @prop {Map} active-border-color [contrast-color: ('primary', 500, 0.8)] - The active border color of an outlined button.
+/// @prop {Map} shadow-color [contrast-color: ('primary', 500, 0.2)] - The shadow color of an outlined button.
+/// @prop {Map} disabled-border-color [contrast-color: ('primary', 500, 0.2)] - The disabled focused border color of an outlined button.
 /// @requires {Map} $indigo-outlined-button
 /// @requires {Map} $indigo-base-button-dark
 $indigo-outlined-button-dark: extend(
@@ -607,6 +631,13 @@ $indigo-outlined-button-dark: extend(
                 0.1,
             ),
         ),
+        focus-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
         focus-border-color: (
             contrast-color: (
                 'primary',
@@ -621,6 +652,13 @@ $indigo-outlined-button-dark: extend(
                 0.6,
             ),
         ),
+        active-background: (
+            contrast-color: (
+                'primary',
+                500,
+                0.1,
+            ),
+        ),
         active-border-color: (
             contrast-color: (
                 'primary',

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

@@ -330,6 +330,7 @@ $indigo-base-icon-button-dark: (
 
 /// 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(
@@ -343,6 +344,13 @@ $indigo-flat-icon-button-dark: extend(
                 0.8,
             ),
         ),
+        shadow-color: (
+            contrast-color: (
+                'primary',
+                500,
+                0.2,
+            ),
+        ),
     )
 );
 
@@ -350,6 +358,7 @@ $indigo-flat-icon-button-dark: extend(
 /// @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,
@@ -369,6 +378,13 @@ $indigo-outlined-icon-button-dark: extend(
                 0.2,
             ),
         ),
+        shadow-color: (
+            contrast-color: (
+                'primary',
+                500,
+                0.2,
+            ),
+        ),
     )
 );