igniteui-theming 8.0.0-beta.2 → 8.0.0-beta.4

package/package.json

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

@@ -19,34 +19,8 @@ $dark-fluent-banner: $fluent-banner;
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [color: ('surface')] - The color used for the banner background.
-/// @prop {Map} banner-message-color [color: ('gray', 600)] - The color used for the banner label.
-/// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
 /// @requires $bootstrap-banner
-$dark-bootstrap-banner: extend(
-    $bootstrap-banner,
-    (
-        banner-background: (
-            color: (
-                'surface',
-            ),
-        ),
-
-        banner-message-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-
-        banner-illustration-color: (
-            color: (
-                'gray',
-                600,
-            ),
-        ),
-    )
-);
+$dark-bootstrap-banner: $bootstrap-banner;
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}

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

@@ -90,7 +90,7 @@ $dark-bootstrap-list: extend(
 /// Generates a dark indigo list schema.
 /// @type {Map}
 /// @prop {Map} header-text-color [contrast-color: ('gray', 50, .6)] - The list header text color.
-/// @prop {Map} item-background-hover [color: ('primary', 500, .5)] - The list item hover background.
+/// @prop {Map} item-background-hover [color: ('primary', 400, .3)] - The list item hover background.
 /// @prop {Map} item-background-active [color: ('primary')] - The active list item background color.
 /// @prop {Map} item-text-color [contrast-color: ('gray', 50, .9)] - The list item text color.
 /// @prop {Map} item-text-color-hover [contrast-color: ('gray', 50)] - The list item text color.
@@ -119,8 +119,8 @@ $dark-indigo-list: extend(
         item-background-hover: (
             color: (
                 'primary',
-                500,
-                0.5,
+                400,
+                0.3,
             ),
         ),
 

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

@@ -11,52 +11,92 @@
 /// @type {Map}
 /// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
 /// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
-/// @prop {Map} banner-border-color [color: ('gray', 400)] - The color used for the banner border.
-/// @prop {Map} banner-illustration-color [contrast-color: 'surface'] - The color used for the banner illustration.
+/// @prop {Number} border-radius [0] - The border radius of the banner
 $light-banner: (
     banner-background: (
         color: 'surface',
     ),
 
-    banner-message-color: (
-        contrast-color: 'surface',
-    ),
-
-    banner-border-color: (
-        color: (
-            'gray',
-            400,
-        ),
-    ),
-
-    banner-illustration-color: (
-        contrast-color: 'surface',
-    ),
+    border-radius: 0,
 );
 
 /// Generates a material banner schema.
 /// @type {Map}
+/// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
+/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @requires {Map} $light-banner
-$material-banner: $light-banner;
+$material-banner: extend(
+    $light-banner,
+    (
+        banner-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        banner-message-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        banner-illustration-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
 
 /// Generates a fluent banner schema.
 /// @type {Map}
+/// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
+/// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
+/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @requires {Map} $light-banner
-$fluent-banner: $light-banner;
+$fluent-banner: extend(
+    $light-banner,
+    (
+        banner-border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        banner-message-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        banner-illustration-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+    )
+);
 
 /// Generates a bootstrap banner schema.
 /// @type {Map}
-/// @prop {Map} banner-background [contrast-color: ('gray', 900)] - The color used for the banner background.
 /// @prop {Map} banner-message-color [color: ('gray', 800)] - The color used for the banner label.
+/// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @prop {Map} banner-illustration-color [color: ('gray', 800)] - The color used for the banner illustration.
 /// @requires {Map} $light-banner
 $bootstrap-banner: extend(
     $light-banner,
     (
-        banner-background: (
-            contrast-color: (
+        banner-border-color: (
+            color: (
                 'gray',
-                900,
+                300,
             ),
         ),
 
@@ -82,6 +122,7 @@ $bootstrap-banner: extend(
 /// @prop {Map} banner-message-color [color: ('gray', 700)] - The color used for the banner label.
 /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
 /// @prop {Map} banner-illustration-color [color: ('gray', 600)] - The color used for the banner illustration.
+/// @prop {Number} border-radius [rem(6px)] - The border radius of the banner
 $indigo-banner: (
     banner-background: (
         color: (
@@ -110,4 +151,6 @@ $indigo-banner: (
             600,
         ),
     ),
+
+    border-radius: rem(6px),
 );

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

@@ -216,22 +216,22 @@ $bootstrap-list: extend(
 /// @type {Map}
 /// @prop {Color} background [transparent] - The list background color.
 /// @prop {Color} header-background [transparent] - The list header background color.
-/// @prop {Map} header-text-color [color: ('grays', 600)] - The list header text color.
+/// @prop {Map} header-text-color [color: ('gray', 600)] - The list header text color.
 /// @prop {Color} item-background [transparent] - The list item background color.
 /// @prop {Map} item-background-hover [color: ('primary', 300, .3)] - The list item hover background.
 /// @prop {Map} item-background-active [ color: ('primary', 300, .3)] - The active list item background color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The list item text color.
-/// @prop {Map} item-text-color-hover [color: ('gray', 800)] - The list item text color.
+/// @prop {Map} item-text-color-hover [color: ('gray', 900)] - The list item text color.
 /// @prop {Map} item-text-color-active [color: ('gray', 800)] - The active list item text color.
 /// @prop {Map} item-subtitle-color [color: ('gray', 600)] - The list item subtitle color.
-/// @prop {Map} item-subtitle-color-hover [color: ('gray', 600)] - The list item subtitle hover color.
-/// @prop {Map} item-subtitle-color-active [color: ('gray', 600)] - The list item subtitle active color.
+/// @prop {Map} item-subtitle-color-hover [color: ('gray', 700)] - The list item subtitle hover color.
+/// @prop {Map} item-subtitle-color-active [color: ('gray', 700)] - The list item subtitle active color.
 /// @prop {Map} item-action-color [color: ('gray', 600)] - The list item action color.
-/// @prop {Map} item-action-color-hover [color: ('gray', 600)] - The list item action hover color.
-/// @prop {Map} item-action-color-active [color: ('gray', 600)] - The list item action active color.
+/// @prop {Map} item-action-color-hover [color: ('gray', 700)] - The list item action hover color.
+/// @prop {Map} item-action-color-active [color: ('gray', 700)] - The list item action active color.
 /// @prop {Map} item-thumbnail-color [color: ('gray', 600)] - The list item thumbnail color.
 /// @prop {Map} item-thumbnail-color-hover [color: ('gray', 600)] - The list item thumbnail hover color.
-/// @prop {Map} item-thumbnail-color-active [color: ('gray', 600)] - The list item thumbnail active color.
+/// @prop {Map} item-thumbnail-color-active [color: ('gray', 700)] - The list item thumbnail active color.
 /// @prop {Number} item-border-radius [0] - The border radius used for list item.
 /// @requires {Map} $light-list
 $indigo-list: extend(
@@ -243,7 +243,7 @@ $indigo-list: extend(
 
         header-text-color: (
             color: (
-                'grays',
+                'gray',
                 600,
             ),
         ),
@@ -283,7 +283,7 @@ $indigo-list: extend(
         item-text-color-active: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
 
@@ -297,14 +297,14 @@ $indigo-list: extend(
         item-action-color-hover: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
         item-action-color-active: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
@@ -318,14 +318,14 @@ $indigo-list: extend(
         item-subtitle-color-hover: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
         item-subtitle-color-active: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),
 
@@ -346,7 +346,7 @@ $indigo-list: extend(
         item-thumbnail-color-active: (
             color: (
                 'gray',
-                600,
+                700,
             ),
         ),