igniteui-theming 3.4.0-beta.1 → 4.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "3.4.0-beta.1",
+  "version": "4.0.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.scss

@@ -65,45 +65,9 @@ $material-flat-button-dark: extend(
     )
 );
 
-/// @type {Map}
-/// @prop {Map} hover-background [color: ('gray', 100, .5)] - The hover background color of an icon button.
-/// @prop {Map} focus-background [color: ('gray', 200, .8)] - The focus background color of a icon button.
-/// @prop {Map} focus-visible-background [color: ('gray', 200, .8)] - The focus-visible background color of a icon button.
-/// @prop {Color} disabled-background [transparent] - The disabled background color a icon button.
+/// @requires {Map} $material-contained-button
 /// @requires {Map} $material-base-button-dark
-/// @requires {Map} $material-icon-button
-$material-icon-button-dark: extend(
-    $material-icon-button,
-    $material-base-button-dark,
-    (
-        hover-background: (
-            color: (
-                'gray',
-                100,
-                0.5,
-            ),
-        ),
-        focus-background: (
-            color: (
-                'gray',
-                200,
-                0.8,
-            ),
-        ),
-        focus-visible-background: (
-            color: (
-                'gray',
-                200,
-                0.8,
-            ),
-        ),
-        disabled-background: transparent,
-    )
-);
-
-/// @requires {Map} $material-raised-button
-/// @requires {Map} $material-base-button-dark
-$material-raised-button-dark: extend($material-raised-button, $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
@@ -132,15 +96,13 @@ $material-outlined-button-dark: extend(
 /// @type {Map}
 /// @requires {Map} $material-flat-button-dark
 /// @requires {Map} $material-outlined-button
-/// @requires {Map} $material-raised-button
+/// @requires {Map} $material-contained-button
 /// @requires {Map} $material-fab-button
-/// @requires {Map} $material-icon-button-dark
 $dark-button: (
     flat: $material-flat-button-dark,
     outlined: $material-outlined-button-dark,
-    raised: $material-raised-button-dark,
+    contained: $material-contained-button-dark,
     fab: $material-fab-button-dark,
-    icon: $material-icon-button-dark,
 );
 
 /// @type {Map}
@@ -175,25 +137,25 @@ $fluent-flat-button-dark: extend(
 );
 
 /// @type {Map}
-/// @prop {Map} background [color: ('primary', 300)] - The background color of an raised button.
-/// @prop {Map} foreground [color: ('surface', 500] - The idle text color of a raised button.
-/// @prop {Map} border-color [color: ('primary', 300)] - The border color of a raised button.
-/// @prop {Map} hover-border-color [color: ('primary', 200)] - The hover border color of a raised button.
-/// @prop {Map} focus-border-color [color: ('primary', 300)] - The focus border color of a raised button.
-/// @prop {Map} focus-visible-border-color [color: ('primary', 200)] - The focus-visible border color of a raised button.
-/// @prop {Map} active-border-color [color: ('primary', 200)] - The active border color of a raised button.
-/// @prop {Map} hover-background [color: ('primary', 200)] - The hover background of a raised button.
-/// @prop {Map} hover-foreground [color: ('surface', 500] - The hover text color of a raised button.
-/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of a raised button.
-/// @prop {Map} focus-foreground [color: ('surface', 500] - The focus text color of a raised button.
-/// @prop {Map} focus-visible-background [color: ('primary', 200)] - The focus-visible background color of a raised button.
-/// @prop {Map} focus-visible-foreground [color: ('surface', 500] - The focus-visible text color of a raised button.
-/// @prop {Map} active-background [color: ('primary', 200)] - The active background color of a raised button.
-/// @prop {Map} active-foreground [color: ('surface', 500] - The active text color of a raised button.
-/// @requires {Map} $fluent-raised-button
+/// @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} 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} 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} 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.
+/// @requires {Map} $fluent-contained-button
 /// @requires {Map} $fluent-base-button-dark
-$fluent-raised-button-dark: extend(
-    $fluent-raised-button,
+$fluent-contained-button-dark: extend(
+    $fluent-contained-button,
     $fluent-base-button-dark,
     (
         background: (
@@ -291,38 +253,7 @@ $fluent-raised-button-dark: extend(
 
 /// @requires {Map} $fluent-fab-button
 /// @requires {Map} $fluent-base-button-dark
-$fluent-fab-button-dark: extend($fluent-fab-button, $fluent-base-button-dark, $fluent-raised-button-dark);
-
-/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of an icon button.
-/// @prop {Map} active-background [color: ('gray', 100, .8)] - The active background color of an icon button.
-/// @prop {Map} disabled-border-color [color: ('gray', 50)] - The disabled focused border color of an icon button.
-/// @requires {Map} $fluent-icon-button
-/// @requires {Map} $fluent-base-button-dark
-$fluent-icon-button-dark: extend(
-    $fluent-icon-button,
-    $fluent-base-button-dark,
-    (
-        hover-background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-        active-background: (
-            color: (
-                'gray',
-                100,
-                0.8,
-            ),
-        ),
-        disabled-border-color: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-    )
-);
+$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.
@@ -366,15 +297,13 @@ $fluent-outlined-button-dark: extend(
 /// @type {Map}
 /// @requires {Map} $fluent-flat-button-dark
 /// @requires {Map} $fluent-outlined-button
-/// @requires {Map} $fluent-raised-button
+/// @requires {Map} $fluent-contained-button
 /// @requires {Map} $fluent-fab-button
-/// @requires {Map} $fluent-icon-button
 $dark-fluent-button: (
     flat: $fluent-flat-button-dark,
     outlined: $fluent-outlined-button-dark,
-    raised: $fluent-raised-button-dark,
+    contained: $fluent-contained-button-dark,
     fab: $fluent-fab-button-dark,
-    icon: $fluent-icon-button-dark,
 );
 
 /// @type {Map}
@@ -407,15 +336,13 @@ $bootstrap-flat-button-dark: extend($bootstrap-base-button-dark, $bootstrap-flat
 /// @type {Map}
 /// @requires {Map} $bootstrap-flat-button
 /// @requires {Map} $bootstrap-outlined-button
-/// @requires {Map} $bootstrap-raised-button
+/// @requires {Map} $bootstrap-contained-button
 /// @requires {Map} $bootstrap-fab-button
-/// @requires {Map} $bootstrap-icon-button
 $dark-bootstrap-button: (
     flat: $bootstrap-flat-button-dark,
     outlined: $bootstrap-outlined-button-dark,
-    raised: $bootstrap-raised-button,
+    contained: $bootstrap-contained-button,
     fab: $bootstrap-fab-button,
-    icon: $bootstrap-icon-button,
 );
 
 /// @type {Map}
@@ -459,14 +386,14 @@ $indigo-flat-button-dark: extend(
 );
 
 /// @type {Map}
-/// @prop {Color} foreground [color: ('gray', 900)] - The idle text color of a raised button.
-/// @prop {Color} hover-foreground [color: ('gray', 900)] - The hover text color of a raised button.
-/// @prop {Color} focus-foreground [color: ('gray', 900)] - The focus text color of a raised button.
-/// @prop {Color} focus-visible-foreground [color: ('gray', 900)] - The focus-visible text color of a raised button.
+/// @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 {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-raised-button
-$indigo-raised-button-dark: extend(
-    $indigo-raised-button,
+/// @requires {Map} $indigo-contained-button
+$indigo-contained-button-dark: extend(
+    $indigo-contained-button,
     $indigo-base-button-dark,
     (
         foreground: (
@@ -530,18 +457,6 @@ $indigo-outlined-button-dark: extend(
     )
 );
 
-/// @type {Map}
-/// @prop {Color} disabled-background [transparent] - The disabled background color an outlined button.
-/// @requires {Map} $indigo-base-button-dark
-/// @requires {Map} $indigo-icon-button
-$indigo-icon-button-dark: extend(
-    $indigo-icon-button,
-    $indigo-base-button-dark,
-    (
-        disabled-background: transparent,
-    )
-);
-
 /// @type {Map}
 /// @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.
@@ -584,13 +499,11 @@ $indigo-fab-button-dark: extend(
 /// @type {Map}
 /// @requires {Map} $indigo-flat-button
 /// @requires {Map} $indigo-outlined-button
-/// @requires {Map} $indigo-raised-button
+/// @requires {Map} $indigo-contained-button
 /// @requires {Map} $indigo-fab-button
-/// @requires {Map} $indigo-icon-button
 $dark-indigo-button: (
     flat: $indigo-flat-button-dark,
     outlined: $indigo-outlined-button-dark,
-    raised: $indigo-raised-button-dark,
+    contained: $indigo-contained-button-dark,
     fab: $indigo-fab-button-dark,
-    icon: $indigo-icon-button-dark,
 );

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

@@ -9,49 +9,6 @@
 
 /// Generates a dark calendar schema.
 /// @type {Map}
-/// @prop {Map} week-number-background [color: ('gray', 100, .3)] - The background color of the week number column.
-/// @prop {Map} date-hover-background [color: ('gray', 100)] - The hover date background color.
-/// @prop {Map} month-hover-background [color: ('gray', 100, .5)] - The month hover text color.
-/// @prop {Map} date-selected-hover-foreground [contrast-color: ('gray', 100)] - The hover text color for the selected date.
-/// @prop {Map} date-selected-focus-foreground [contrast-color: ('gray', 100)] - The focus text color for the selected date.
-$dark-base-calendar: (
-    week-number-background: (
-        color: (
-            'gray',
-            100,
-            0.3,
-        ),
-    ),
-
-    date-hover-background: (
-        color: (
-            'gray',
-            100,
-        ),
-    ),
-
-    month-hover-background: (
-        color: (
-            'gray',
-            100,
-            0.5,
-        ),
-    ),
-
-    date-selected-hover-foreground: (
-        contrast-color: (
-            'gray',
-            100,
-        ),
-    ),
-
-    date-selected-focus-foreground: (
-        contrast-color: (
-            'gray',
-            100,
-        ),
-    ),
-);
 
 /// Generates a dark calendar schema.
 /// @type {Map}
@@ -62,7 +19,6 @@ $dark-base-calendar: (
 /// @requires $dark-base-calendar
 $dark-calendar: extend(
     $light-calendar,
-    $dark-base-calendar,
     (
         date-disabled-text-color: (
             color: (
@@ -90,7 +46,7 @@ $dark-calendar: extend(
 /// Generates a dark fluent calendar schema.
 /// @type {Map}
 /// @requires $fluent-calendar
-$dark-fluent-calendar: extend($fluent-calendar, $dark-base-calendar);
+$dark-fluent-calendar: extend($fluent-calendar);
 
 /// Generates a dark bootstrap calendar schema.
 /// @type {Map}
@@ -109,7 +65,6 @@ $dark-fluent-calendar: extend($fluent-calendar, $dark-base-calendar);
 /// @requires $dark-base-calendar
 $dark-bootstrap-calendar: extend(
     $bootstrap-calendar,
-    $dark-base-calendar,
     (
         content-background: (
             color: (
@@ -205,7 +160,6 @@ $dark-bootstrap-calendar: extend(
 /// @requires $dark-base-calendar
 $dark-indigo-calendar: extend(
     $indigo-calendar,
-    $dark-base-calendar,
     (
         content-text-color: (
             contrast-color: (

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

@@ -45,7 +45,9 @@ $fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
 /// @prop {Map} background [color: ('primary', 300)] - The background color of the fluent dark contained icon button.
 /// @prop {Map} foreground [color: ('surface', 500)] - The idle text color of the fluent dark contained icon button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background color of the fluent dark contained icon button.
-/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of the fluent dark contained icon button.
+/// @prop {Map} hover-foreground [color: ('surface', 500)] - The hover text color of the fluent dark contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 200)] - The focus background color of the fluent dark contained icon button.
+/// @prop {Map} focus-foreground [color: ('surface', 500)] - The focus text color of the fluent dark contained icon button.
 /// @prop {Map} active-background [color: ('primary', 200)] - The active background color of the fluent dark contained icon button.
 /// @prop {Map} active-foreground [color: ('surface', 500)] - The active text color of the fluent dark contained icon button.
 /// @prop {Map} focus-border-color [color: ('surface', 500)] - The focus border color of the fluent dark contained icon button.
@@ -71,10 +73,22 @@ $fluent-contained-icon-button-dark: extend(
                 200,
             ),
         ),
+        hover-foreground: (
+            color: (
+                'surface',
+                500,
+            ),
+        ),
         focus-background: (
             color: (
                 'primary',
-                300,
+                200,
+            ),
+        ),
+        focus-foreground: (
+            color: (
+                'surface',
+                500,
             ),
         ),
         active-background: (

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

@@ -30,6 +30,7 @@
 @use './grid-toolbar' as *;
 @use './highlight' as *;
 @use './icon' as *;
+@use './icon-button' as *;
 @use './input-group' as *;
 @use './label' as *;
 @use './list' as *;
@@ -87,6 +88,7 @@ $dark-material-schema: (
     grid-toolbar: $dark-grid-toolbar,
     highlight: $dark-highlight,
     icon: $dark-icon,
+    icon-button: $dark-icon-button,
     input-group: $dark-input-group,
     label: $dark-material-label,
     list: $dark-list,
@@ -150,6 +152,7 @@ $dark-fluent-schema: (
     grid-toolbar: $dark-fluent-grid-toolbar,
     highlight: $dark-fluent-highlight,
     icon: $dark-fluent-icon,
+    icon-button: $dark-fluent-icon-button,
     input-group: $dark-fluent-input-group,
     label: $dark-fluent-label,
     list: $dark-fluent-list,
@@ -213,6 +216,7 @@ $dark-bootstrap-schema: (
     grid-toolbar: $dark-bootstrap-grid-toolbar,
     highlight: $dark-bootstrap-highlight,
     icon: $dark-bootstrap-icon,
+    icon-button: $dark-bootstrap-icon-button,
     input-group: $dark-bootstrap-input-group,
     label: $dark-bootstrap-label,
     list: $dark-bootstrap-list,
@@ -276,6 +280,7 @@ $dark-indigo-schema: (
     grid-toolbar: $dark-indigo-grid-toolbar,
     highlight: $dark-indigo-highlight,
     icon: $dark-indigo-icon,
+    icon-button: $dark-indigo-icon-button,
     input-group: $dark-indigo-input-group,
     label: $dark-indigo-label,
     list: $dark-indigo-list,

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

@@ -15,6 +15,7 @@
 /// @prop {Map} background-active [color: ('gray', 100)] - The background color used for the active tree node.
 /// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
 /// @prop {Map} hover-color [color: ('gray', 50, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('gray', 50, .1)] - The background color used for the selected tree node on hover.
 $base-dark-tree: (
     background-active: (
         color: (
@@ -35,13 +36,32 @@ $base-dark-tree: (
             0.1,
         ),
     ),
+    hover-selected-color: (
+        color: (
+            'gray',
+            50,
+            0.1,
+        ),
+    ),
 );
 
 /// Generates a dark tree schema.
 /// @type {Map}
 /// @requires $light-tree
 /// @requires $base-dark-tree
-$dark-tree: extend($light-tree, $base-dark-tree);
+$dark-tree: extend(
+    $light-tree,
+    $base-dark-tree,
+    (
+        hover-color: (
+            color: (
+                'gray',
+                200,
+                0.5,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent tree schema.
 /// @type {Map}

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

@@ -21,7 +21,7 @@ $flat-elevation-button: (
 /// @prop {Number} hover-elevation [4] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} focus-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
 /// @prop {Number} active-elevation [8] - The elevation level, between 0-24, to be used for the focus state.
-$material-raised-elevation: (
+$material-contained-elevation: (
     resting-elevation: 2,
     hover-elevation: 4,
     focus-elevation: 8,
@@ -40,18 +40,6 @@ $material-fab-elevation: (
     active-elevation: 12,
 );
 
-/// @type Map
-/// @prop {Number} resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state.
-/// @prop {Number} hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state.
-/// @prop {Number} focus-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
-/// @prop {Number} active-elevation [0] - The elevation level, between 0-24, to be used for the focus state.
-$material-ib-elevation: (
-    resting-elevation: 0,
-    hover-elevation: 0,
-    focus-elevation: 0,
-    active-elevation: 0,
-);
-
 /// @type Map
 /// @see $flat-elevation-button
 /// @requires $flat-elevation-button