igniteui-theming 4.2.0 → 4.4.0

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

@@ -17,6 +17,8 @@
 /// @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-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-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-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.
@@ -54,6 +56,18 @@ $material-base-icon-button: (
             900,
         ),
     ),
+    focus-hover-background: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+    focus-hover-foreground: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
     active-background: (
         color: (
             'gray',
@@ -110,6 +124,7 @@ $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
@@ -117,6 +132,12 @@ $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,
     )
@@ -189,7 +210,7 @@ $material-outlined-icon-button: extend(
 /// @requires {Map} $material-flat-icon-button
 /// @requires {Map} $material-contained-icon-button
 /// @requires {Map} $material-outlined-icon-button
-$light-icon-button: (
+$material-icon-button: (
     flat: $material-flat-icon-button,
     contained: $material-contained-icon-button,
     outlined: $material-outlined-icon-button,
@@ -202,17 +223,19 @@ $light-icon-button: (
 /// @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} hover-background [color: ('gray', 200)] - The hover background color of the fluent icon button.
-/// @prop {Map} hover-foreground [color: ('primary', 500)] - The hover text color of the fluent icon button.
-/// @prop {Map} focus-background [color: ('gray', 200)] - The focus background color of the fluent icon button.
+/// @prop {Map} hover-foreground [color: ('primary', 600)] - The hover text color of the fluent icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the fluent icon button.
 /// @prop {Map} focus-foreground [color: ('primary', 500)] - The focus text color of the fluent 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 {Color} border-color [transparent] - The border 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} 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.
-/// @prop {Map} disabled-foreground [color: ('gray', 400)] - The disabled foreground color of the fluent icon button.
+/// @prop {Map} disabled-foreground [color: ('gray', 500)] - The disabled foreground color of the fluent icon button.
 /// @prop {Color} disabled-border-color [transparent] - The disabled border 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} border-radius [(rem(2px), 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.
 /// @prop {Number} default-size [2] - The default size used for the icon button.
 $fluent-base-icon-button: (
@@ -230,21 +253,28 @@ $fluent-base-icon-button: (
         ),
     ),
     hover-foreground: (
+        color: (
+            'primary',
+            600,
+        ),
+    ),
+    focus-background: transparent,
+    focus-foreground: (
         color: (
             'primary',
             500,
         ),
     ),
-    focus-background: (
+    focus-hover-background: (
         color: (
             'gray',
             200,
         ),
     ),
-    focus-foreground: (
+    focus-hover-foreground: (
         color: (
             'primary',
-            500,
+            600,
         ),
     ),
     active-background: (
@@ -263,7 +293,7 @@ $fluent-base-icon-button: (
     focus-border-color: (
         color: (
             'gray',
-            500,
+            700,
         ),
     ),
     disabled-background: (
@@ -275,13 +305,13 @@ $fluent-base-icon-button: (
     disabled-foreground: (
         color: (
             'gray',
-            400,
+            500,
         ),
     ),
     disabled-border-color: transparent,
     border-radius: (
         border-radius: (
-            rem(0),
+            rem(2px),
             rem(0),
             rem(20px),
         ),
@@ -312,8 +342,10 @@ $fluent-flat-icon-button: extend(
 /// @prop {Map} foreground [contrast-color: ('primary', 600)] - The idle text color of the fluent contained icon button.
 /// @prop {Map} hover-background [color: ('primary', 600)] - The hover background color of the fluent contained icon button.
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the fluent contained icon button.
-/// @prop {Map} focus-background [color: ('primary', 600)] - The focus background color of the fluent contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 500)] - The focus background color of the fluent contained icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus text color of the fluent contained 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', 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.
@@ -349,7 +381,7 @@ $fluent-contained-icon-button: extend(
         focus-background: (
             color: (
                 'primary',
-                600,
+                500,
             ),
         ),
         focus-foreground: (
@@ -358,6 +390,18 @@ $fluent-contained-icon-button: extend(
                 600,
             ),
         ),
+        focus-hover-background: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
+                'primary',
+                600,
+            ),
+        ),
         active-background: (
             color: (
                 'primary',
@@ -386,10 +430,11 @@ $fluent-contained-icon-button: extend(
 /// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of the fluent outlined icon button.
 /// @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', 700)] - The disabled 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.
 /// @requires {Map} $fluent-base-icon-button
 $fluent-outlined-icon-button: extend(
     $fluent-base-icon-button,
@@ -404,7 +449,7 @@ $fluent-outlined-icon-button: extend(
         border-color: (
             color: (
                 'gray',
-                700,
+                600,
             ),
         ),
         hover-foreground: (
@@ -420,6 +465,12 @@ $fluent-outlined-icon-button: extend(
                 900,
             ),
         ),
+        focus-hover-foreground: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         active-background: (
             color: (
                 'gray',
@@ -441,7 +492,7 @@ $fluent-outlined-icon-button: extend(
         disabled-border-color: (
             color: (
                 'gray',
-                700,
+                300,
             ),
         ),
     )
@@ -466,14 +517,16 @@ $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 {Map} focus-background [color: ('primary', 600)] - The focus background color of the bootstrap icon button.
+/// @prop {Color} focus-background [transparent] - The focus background color of the bootstrap 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 {Color} border-color [transparent] - The border color of the bootstrap icon button.
-/// @prop {Color} focus-border-color [transparent] - The focus border color of the bootstrap icon button.
+/// @prop {Map} focus-border-color [color:('primary', 200, 0.5)] - The focus border 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 {Map} disabled-foreground [color: ('primary', 200)] - The disabled foreground color of the bootstrap icon button.
 /// @prop {Color} disabled-border-color [transparent] - The disabled border 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.
@@ -498,13 +551,20 @@ $bootstrap-base-icon-button: (
             600,
         ),
     ),
-    focus-background: (
+    focus-background: transparent,
+    focus-foreground: (
+        contrast-color: (
+            'primary',
+            600,
+        ),
+    ),
+    focus-hover-background: (
         color: (
             'primary',
             600,
         ),
     ),
-    focus-foreground: (
+    focus-hover-foreground: (
         contrast-color: (
             'primary',
             600,
@@ -523,12 +583,18 @@ $bootstrap-base-icon-button: (
         ),
     ),
     border-color: transparent,
-    focus-border-color: transparent,
+    focus-border-color: (
+        color: (
+            'primary',
+            200,
+            0.5,
+        ),
+    ),
     disabled-background: transparent,
     disabled-foreground: (
         color: (
             'primary',
-            100,
+            200,
         ),
     ),
     disabled-border-color: transparent,
@@ -541,7 +607,7 @@ $bootstrap-base-icon-button: (
     ),
     size: (
         sizable: (
-            rem(31px),
+            rem(32px),
             rem(38px),
             rem(48px),
         ),
@@ -554,7 +620,9 @@ $bootstrap-base-icon-button: (
 /// @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} focus-foreground [color: ('primary', 600)] - The focus text 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.
 /// @requires {Map} $bootstrap-base-icon-button
@@ -569,16 +637,17 @@ $bootstrap-flat-icon-button: extend(
                 800,
             ),
         ),
-        focus-background: (
+        focus-foreground: (
             color: (
-                'gray',
-                100,
+                'primary',
+                500,
             ),
         ),
-        focus-foreground: (
+        focus-hover-background: transparent,
+        focus-hover-foreground: (
             color: (
                 'primary',
-                600,
+                800,
             ),
         ),
         active-background: (
@@ -600,9 +669,10 @@ $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} 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.
+/// @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
 $bootstrap-contained-icon-button: extend(
     $bootstrap-base-icon-button,
@@ -620,23 +690,22 @@ $bootstrap-contained-icon-button: extend(
                 600,
             ),
         ),
-        focus-border-color: (
+        focus-background: (
             color: (
                 'primary',
-                200,
-                0.5,
+                500,
             ),
         ),
         disabled-background: (
             color: (
                 'primary',
-                100,
+                50,
             ),
         ),
         disabled-foreground: (
             color: (
                 'primary',
-                300,
+                200,
             ),
         ),
     )
@@ -647,7 +716,7 @@ $bootstrap-contained-icon-button: extend(
 /// @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-foreground [contrast-color: ('primary', 500)] - 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-border-color [color: ('primary', 100)] - The disabled border color of the bootstrap outlined icon button.
 /// @requires {Map} $bootstrap-base-icon-button
@@ -668,22 +737,9 @@ $bootstrap-outlined-icon-button: extend(
             ),
         ),
         focus-foreground: (
-            contrast-color: (
-                'primary',
-                600,
-            ),
-        ),
-        focus-background: (
             color: (
                 'primary',
-                600,
-            ),
-        ),
-        focus-border-color: (
-            color: (
-                'primary',
-                200,
-                0.5,
+                500,
             ),
         ),
         disabled-border-color: (
@@ -716,6 +772,8 @@ $bootstrap-icon-button: (
 /// @prop {Map} hover-foreground [color: ('gray', 900)] - The hover text color of the indigo icon button.
 /// @prop {Color} focus-background [transparent] - The focus background color of the indigo icon button.
 /// @prop {Map} focus-foreground [color: ('gray', 900)] - The focus text color of the indigo 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: ('gray', 900)] - 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-foreground [color: ('gray', 900)] - The active text color of the indigo icon button.
 /// @prop {Color} border-color [transparent] - The border color of the indigo icon button.
@@ -748,6 +806,13 @@ $indigo-base-icon-button: (
             900,
         ),
     ),
+    focus-hover-background: transparent,
+    focus-hover-foreground: (
+        color: (
+            'gray',
+            900,
+        ),
+    ),
     active-background: transparent,
     active-foreground: (
         color: (
@@ -812,6 +877,8 @@ $indigo-flat-icon-button: extend(
 /// @prop {Map} hover-foreground [contrast-color: ('primary', 600)] - The hover text color of the indigo contained icon button.
 /// @prop {Map} focus-background [color: ('primary', 400)] - The focus background color of the indigo contained icon button.
 /// @prop {Map} focus-foreground [contrast-color: ('primary', 600)] - The focus background color of the indigo contained 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', 800)] - The foreground color on focus hovered state of the icon button.
 /// @prop {Map} active-background [color: ('primary', 400)] - The active background color of the indigo contained icon button.
 /// @prop {Map} active-foreground [contrast-color: ('primary', 600)] - The active 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.
@@ -857,6 +924,18 @@ $indigo-contained-icon-button: extend(
                 600,
             ),
         ),
+        focus-hover-background: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        focus-hover-foreground: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
         active-background: (
             color: (
                 'primary',

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

@@ -26,6 +26,11 @@ $light-icon: (
     default-size: 3,
 );
 
+/// Generates a material icon schema.
+/// @type {Map}
+/// @requires {Map} $light-icon
+$material-icon: $light-icon;
+
 /// Generates a fluent icon schema.
 /// @type {Map}
 /// @requires {Map} $light-icon

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

@@ -62,60 +62,60 @@
 /// Use in combination with light palettes.
 /// @type Map.
 $light-material-schema: (
-    action-strip: $light-action-strip,
-    avatar: $light-avatar,
-    badge: $light-badge,
-    banner: $light-banner,
-    bottom-nav: $light-bottom-nav,
-    button: $light-button,
-    button-group: $light-button-group,
-    calendar: $light-calendar,
-    card: $light-card,
-    carousel: $light-carousel,
-    checkbox: $light-checkbox,
-    chip: $light-chip,
-    column-actions: $light-column-actions,
-    combo: $light-combo,
-    date-range: $light-date-range-picker,
-    dialog: $light-dialog,
-    divider: $light-divider,
-    dockmanager: $light-dock-manager,
-    drop-down: $light-drop-down,
-    expansion-panel: $light-expansion-panel,
-    grid: $light-grid,
-    grid-filtering: $light-grid-filtering,
-    grid-summary: $light-grid-summary,
-    grid-toolbar: $light-grid-toolbar,
-    highlight: $light-highlight,
-    icon: $light-icon,
-    icon-button: $light-icon-button,
-    input-group: $light-input-group,
+    action-strip: $material-action-strip,
+    avatar: $material-avatar,
+    badge: $material-badge,
+    banner: $material-banner,
+    bottom-nav: $material-bottom-nav,
+    button: $material-button,
+    button-group: $material-button-group,
+    calendar: $material-calendar,
+    card: $material-card,
+    carousel: $material-carousel,
+    checkbox: $material-checkbox,
+    chip: $material-chip,
+    column-actions: $material-column-actions,
+    combo: $material-combo,
+    date-range: $material-date-range-picker,
+    dialog: $material-dialog,
+    divider: $material-divider,
+    dockmanager: $material-dock-manager,
+    drop-down: $material-drop-down,
+    expansion-panel: $material-expansion-panel,
+    grid: $material-grid,
+    grid-filtering: $material-grid-filtering,
+    grid-summary: $material-grid-summary,
+    grid-toolbar: $material-grid-toolbar,
+    highlight: $material-highlight,
+    icon: $material-icon,
+    icon-button: $material-icon-button,
+    input-group: $material-input-group,
     label: $material-label,
-    list: $light-list,
-    navbar: $light-navbar,
-    nav-drawer: $light-navdrawer,
-    overlay: $light-overlay,
-    paginator: $light-pagination,
-    pivot-data-selector: $light-pivot-data-selector,
-    linear-bar: $light-progress-linear,
-    circular-bar: $light-progress-circular,
-    query-builder: $light-query-builder,
-    radio: $light-radio,
-    rating: $light-rating,
-    ripple: $light-ripple,
-    scrollbar: $light-scrollbar,
-    select: $light-select,
-    slider: $light-slider,
-    snackbar: $light-snackbar,
-    splitter: $light-splitter,
-    stepper: $light-stepper,
-    switch: $light-switch,
-    tabs: $light-tabs,
-    time-picker: $light-time-picker,
-    toast: $light-toast,
-    tooltip: $light-tooltip,
-    tree: $light-tree,
-    watermark: $light-watermark,
+    list: $material-list,
+    navbar: $material-navbar,
+    nav-drawer: $material-navdrawer,
+    overlay: $material-overlay,
+    paginator: $material-pagination,
+    pivot-data-selector: $material-pivot-data-selector,
+    linear-bar: $material-progress-linear,
+    circular-bar: $material-progress-circular,
+    query-builder: $material-query-builder,
+    radio: $material-radio,
+    rating: $material-rating,
+    ripple: $material-ripple,
+    scrollbar: $material-scrollbar,
+    select: $material-select,
+    slider: $material-slider,
+    snackbar: $material-snackbar,
+    splitter: $material-splitter,
+    stepper: $material-stepper,
+    switch: $material-switch,
+    tabs: $material-tabs,
+    time-picker: $material-time-picker,
+    toast: $material-toast,
+    tooltip: $material-tooltip,
+    tree: $material-tree,
+    watermark: $material-watermark,
     _meta: (
         theme: 'material',
         variant: 'light',