igniteui-theming 4.0.0 → 4.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "4.0.0",
+  "version": "4.0.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/_drop-down.scss

@@ -33,6 +33,8 @@ $dark-drop-down: extend($light-drop-down, $base-dark-drop-down);
 /// @prop {Map} selected-item-text-color [contrast-color: 'surface'] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color: 'surface'] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-text-color [contrast-color: 'surface'] - The drop-down selected item focus text color.
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color used for the drop-down items on focus state.
+/// @prop {Map} disabled-item-text-color [color: ('gray', 200)] - The drop-down disabled item text color.
 /// @requires $fluent-drop-down
 /// @requires $base-dark-drop-down
 $dark-fluent-drop-down: extend(
@@ -48,6 +50,18 @@ $dark-fluent-drop-down: extend(
         selected-focus-item-text-color: (
             contrast-color: 'surface',
         ),
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );
 
@@ -55,6 +69,7 @@ $dark-fluent-drop-down: extend(
 /// @type {Map}
 /// @prop {Map} item-text-color [contrast-color: 'surface'] - The drop-down text color.
 /// @prop {Map} hover-item-text-color [contrast-color: 'surface'] - The drop-down hover text color.
+/// @prop {Map} disabled-item-text-color [color: ('gray', 200)] - The drop-down disabled item text color.
 /// @requires $bootstrap-drop-down
 /// @requires $base-dark-drop-down
 $dark-bootstrap-drop-down: extend(
@@ -67,6 +82,12 @@ $dark-bootstrap-drop-down: extend(
         hover-item-text-color: (
             contrast-color: 'surface',
         ),
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -16,7 +16,7 @@
 /// @prop {Map} header-text-color [color: ('secondary', 500)] - The drop-down header text color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The drop-down text color.
 /// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
-/// @prop {Map} hover-item-background [color: ('gray', 100, .8)4] - The drop-down hover item background color.
+/// @prop {Map} hover-item-background [color: ('gray', 100, .8)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
 /// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
 /// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
@@ -26,7 +26,7 @@
 /// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
 /// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
 /// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
-/// @prop {Map} disabled-item-text-color [color: 'surface', text-contrast: (), rgba: .38] - The drop-down disabled item text color.
+/// @prop {Map} disabled-item-text-color [color: ('gray', 400)] - The drop-down disabled item text color.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
 /// @prop {Number} border-width [0] - The border width used for drop-down component.
 /// @prop {Map} border-color [color: ('gray', 300)] - The border color used for drop-down component.
@@ -162,12 +162,18 @@ $light-drop-down: extend(
 
 /// Generates a fluent drop-down schema.
 /// @type {Map}
-/// @prop {Map} selected-item-background [color: ('gray', 100)] - The drop-down selected item background color.
-/// @prop {Map} selected-item-text-color [contrast-color: ('gray', 100)] - The drop-down selected item text color.
+/// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
+/// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: 'surface'] - The drop-down focused item background color.
+/// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
+/// @prop {Map} selected-item-background [color: ('gray', 200)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('gray', 200)] - The drop-down selected item hover background color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-background [color: ('gray', 200)] - The drop-down selected item focus background color.
 /// @prop {Map} selected-focus-item-text-color [contrast-color: ('gray', 200)] - The drop-down selected item focus text color.
+/// @prop {Map} border-color [color: ('gray', 700)] - The border color used for the drop-down items on focus state.
+/// @prop {Map} disabled-item-text-color [color: ('gray', 500)] - The drop-down disabled item text color.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @requires {Map} $light-drop-down
@@ -176,22 +182,45 @@ $fluent-drop-down: extend(
     $light-drop-down,
     $fluent-elevation-drop-down,
     (
-        selected-item-background: (
+        hover-item-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        hover-item-background: (
             color: (
                 'gray',
                 100,
             ),
         ),
+        focused-item-background: (
+            color: (
+                'surface',
+            ),
+        ),
+        focused-item-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        selected-item-background: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
         selected-item-text-color: (
             contrast-color: (
                 'gray',
-                100,
+                200,
             ),
         ),
         selected-hover-item-background: (
             color: (
                 'gray',
-                100,
+                200,
             ),
         ),
         selected-hover-item-text-color: (
@@ -212,6 +241,18 @@ $fluent-drop-down: extend(
                 200,
             ),
         ),
+        border-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
         border-radius: (
             border-radius: (
                 rem(2px),
@@ -225,9 +266,8 @@ $fluent-drop-down: extend(
 /// Generates a bootstrap drop-down schema.
 /// @type {Map}
 /// @prop {Map} header-text-color [color: ('gray', 700)] - The drop-down header text color.
-/// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
-/// @prop {Map} focused-item-background [color: ('primary', 500)] - The drop-down focused item background color.
-/// @prop {Map} focused-item-text-color [contrast-color('primary', 600)] - The drop-down focused item text color.
+/// @prop {Map} hover-item-background [color: ('gray', 200)] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: ('gray', 200)] - The drop-down focused item background color.
 /// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Map} selected-item-text-color [contrast-color('primary', 600)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 600)] - The drop-down selected item hover background color.
@@ -251,19 +291,13 @@ $bootstrap-drop-down: extend(
         hover-item-background: (
             color: (
                 'gray',
-                100,
+                200,
             ),
         ),
         focused-item-background: (
             color: (
-                'primary',
-                500,
-            ),
-        ),
-        focused-item-text-color: (
-            contrast-color: (
-                'primary',
-                600,
+                'gray',
+                200,
             ),
         ),
         selected-item-background: (
@@ -315,15 +349,15 @@ $bootstrap-drop-down: extend(
 /// Generates an indigo drop-down schema.
 /// @type {Map}
 /// @prop {Map} header-text-color [color: ('primary', 500)] - The drop-down header text color.
-/// @prop {Color} item-text-color [color: ('gray', 700)] - The drop-down text color.
+/// @prop {Map} item-text-color [color: ('gray', 700)] - The drop-down text color.
 /// @prop {Map} hover-item-background [color: ('primary', 500, .15)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
 /// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
-/// @prop {Color} selected-item-text-color [#fff] - The drop-down selected item text color.
+/// @prop {Map} selected-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
-/// @prop {Color} selected-hover-item-text-color [#fff] - The drop-down selected item hover text color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item hover text color.
 /// @prop {Map} selected-focus-item-background [color: ('primary', 400)] - The drop-down selected item focus background color.
-/// @prop {Color} selected-focus-item-text-color [#fff] - The drop-down selected item focus text color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item focus text color.
 /// @prop {Number} elevation [3] - The elevation level, between 0-24, to be used for the badge shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
 /// @prop {List} item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the drop-down items.