igniteui-theming 6.3.0 → 6.4.0-beta.2

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

@@ -12,18 +12,16 @@
 /// Generates a light checkbox schema.
 /// @type {Map}
 /// @prop {Map} tick-color [color: ('gray', 50)] - The checked mark color.
-/// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
 /// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
-/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
+/// @prop {Map} label-color-hover [color: ('gray', 900)]- The text color used for the label text on hover.
+/// @prop {Color} empty-fill-color [transparent] - The unchecked fill color.
 /// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
-/// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
 /// @prop {Color} focus-outline-color-focused [transparent] - The focus outlined color for focused state.
 /// @prop {Color} focus-outline-color-error [transparent] - The focus outlined color for focused invalid state.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
 /// @prop {Map} disabled-indeterminate-color [color: ('secondary', 100)] - The disabled border and fill colors in indeterminate state.
 /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
 /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
-/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 $light-checkbox: (
@@ -33,31 +31,25 @@ $light-checkbox: (
             50,
         ),
     ),
-    tick-color-hover: (
-        color: (
-            'gray',
-            50,
-        ),
-    ),
     label-color: (
         color: (
             'gray',
             900,
         ),
     ),
-    empty-color: (
+    label-color-hover: (
         color: (
             'gray',
-            500,
+            900,
         ),
     ),
+    empty-fill-color: transparent,
     fill-color: (
         color: (
             'primary',
             500,
         ),
     ),
-    focus-outline-color: transparent,
     focus-outline-color-focused: transparent,
     focus-outline-color-error: transparent,
     disabled-color: (
@@ -84,12 +76,6 @@ $light-checkbox: (
             500,
         ),
     ),
-    error-color-hover: (
-        color: (
-            'error',
-            500,
-        ),
-    ),
     border-radius: (
         border-radius: (
             rem(2px),
@@ -109,8 +95,12 @@ $light-checkbox: (
 /// Generates a material checkbox schema.
 /// @type {Map}
 /// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
+/// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
+/// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
 /// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
+/// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
 /// @requires {Map} $light-checkbox
 $material-checkbox: extend(
     $light-checkbox,
@@ -122,6 +112,20 @@ $material-checkbox: extend(
             ),
         ),
 
+        empty-color-hover: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        tick-color-hover: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
         fill-color: (
             color: (
                 'secondary',
@@ -135,6 +139,15 @@ $material-checkbox: extend(
                 500,
             ),
         ),
+
+        focus-outline-color: transparent,
+
+        error-color-hover: (
+            color: (
+                'error',
+                500,
+            ),
+        ),
     )
 );
 
@@ -142,10 +155,10 @@ $material-checkbox: extend(
 /// @type {Map}
 /// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
-/// @prop {Map} fill-color-hover [color: ('primary', 900)] - The checked border and fill colors on hover.
-/// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
-/// @prop {Map} error-color-hover [color: ('error', 900)] - The border and fill colors in invalid state on hover.
-/// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
+/// @prop {Map} empty-color-hover [color: ('gray', 900)] - The unchecked border color on hover.
+/// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and fill colors on hover.
+/// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
+/// @prop {Map} error-color-hover [color: ('error', 700)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius-ripple [(rem(2px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $fluent-checkbox: extend(
@@ -160,7 +173,7 @@ $fluent-checkbox: extend(
         focus-outline-color: (
             color: (
                 'gray',
-                800,
+                700,
             ),
         ),
         empty-color: (
@@ -169,23 +182,22 @@ $fluent-checkbox: extend(
                 900,
             ),
         ),
+        empty-color-hover: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         fill-color-hover: (
             color: (
                 'primary',
-                900,
+                800,
             ),
         ),
         error-color-hover: (
             color: (
                 'error',
-                900,
-            ),
-        ),
-        border-radius: (
-            border-radius: (
-                rem(2px),
-                rem(0),
-                rem(10px),
+                700,
             ),
         ),
         border-radius-ripple: (
@@ -200,45 +212,89 @@ $fluent-checkbox: extend(
 
 /// Generates a bootstrap checkbox schema.
 /// @type {Map}
-/// @prop {Map} fill-color-hover [color: ('primary', 500)] - The checked border and fill colors on hover.
-/// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and fill colors.
-/// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
-/// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
-/// @prop {Map} error-color-hover [color: ('error', 100)] - The focus outlined color in invalid state.
+/// @prop {Map} tick-color [contrast-color: ('primary', 900)] - The checked mark color.
+/// @prop {Map} tick-color-hover [contrast-color: ('primary', 900)] - The checked mark color on hover.
+/// @prop {Map} empty-color [color: ('gray', 400)] - The unchecked border color.
+/// @prop {Map} empty-color-hover [color: ('gray', 500)] - The unchecked border color on hover.
+/// @prop {Map} empty-fill-color [contrast-color: ('gray', 900)] - The unchecked fill color.
+/// @prop {Map} fill-color-hover [color: ('primary', 600)] - The checked border and fill colors on hover.
+/// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border color.
+/// @prop {Map} disabled-indeterminate-color [color: ('primary', 200)] - The disabled border and fill colors.
+/// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outlined color.
+/// @prop {Map} focus-outline-color-error [color: ('error', 200, 0.5)] - The focus outlined color for focused invalid state.
+/// @prop {Map} error-color-hover [color: ('error', 600)] - The focus outlined color in invalid state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(4px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
 /// @requires {Map} $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
     (
+        tick-color: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        tick-color-hover: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        empty-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        empty-color-hover: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        empty-fill-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         focus-outline-color: (
             color: (
                 'primary',
                 200,
+                0.5,
+            ),
+        ),
+        focus-outline-color-error: (
+            color: (
+                'error',
+                200,
+                0.5,
             ),
         ),
         fill-color-hover: (
             color: (
                 'primary',
-                500,
+                600,
             ),
         ),
         disabled-color: (
             color: (
-                'primary',
-                200,
+                'gray',
+                300,
             ),
         ),
-        disabled-color-label: (
+        disabled-indeterminate-color: (
             color: (
-                'gray',
-                400,
+                'primary',
+                200,
             ),
         ),
         error-color-hover: (
             color: (
                 'error',
-                100,
+                600,
             ),
         ),
         border-radius: (
@@ -263,8 +319,6 @@ $bootstrap-checkbox: extend(
 /// @prop {Color} tick-color [contrast-color: ('primary', 500)] - The checked mark color.
 /// @prop {Color} tick-color-hover [contrast-color: ('primary', 500)] - The checked mark color on hover.
 /// @prop {Map} label-color [color: ('gray', 800)]- The text color used for the label text.
-/// @prop {Map} label-color-hover [color: ('gray', 900)]- The text color used for the label text on hover.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 400)] - The checked border and fill colors on hover.
 /// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} empty-color-hover [color: ('gray', 600)] - The unchecked border color on hover.
@@ -287,12 +341,6 @@ $indigo-checkbox: extend(
                 800,
             ),
         ),
-        label-color-hover: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         focus-outline-color: (
             color: (
                 'gray',

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

@@ -11,19 +11,8 @@
 /// Generates a base light navdrawer schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The navigation drawer background color.
-/// @prop {Map} border-color [color: ('gray', 900, .14)] - The navigation drawer right border color.
-/// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
-/// @prop {Map} item-text-color [color: ('gray', 700)] - The item's idle text color.
-/// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
-/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
-/// @prop {Map} item-active-background [color: ('primary', 500, .12)] - The item's active background color.
-/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
-/// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
-/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
-/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
 /// @prop {Map} elevation [16] - The elevation level, between 0-24, to be used for the drawer.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(36px))] - The border radius used for the navdrawer component.
-/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items.
 /// @requires {Map} $default-elevation-navdrawer
 $light-navdrawer: extend(
     $default-elevation-navdrawer,
@@ -31,120 +20,270 @@ $light-navdrawer: extend(
         background: (
             color: 'surface',
         ),
+        border-radius: (
+            border-radius: (
+                rem(0),
+                rem(0),
+                rem(36px),
+            ),
+        ),
+    )
+);
 
-        border-color: (
+/// Generates a material navdrawer schema.
+/// @type {Map}
+/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items
+/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
+/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
+/// @prop {Map} item-hover-background [color: ('gray', 200)] - The item's hover background color.
+/// @prop {Map} item-text-color [color: ('gray', 900)] - The item's idle text color.
+/// @prop {Map} item-active-background [color: ('primary', 500, .12)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The item's icon active color.
+/// @prop {Map} item-active-text-color [color: ('primary', 500)] - The item's active text color.
+/// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
+/// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
+/// @prop {Map} item-header-text-color [color: ('gray', 700)] - The header's idle text color.
+/// @requires {Map} $light-navdrawer
+$material-navdrawer: extend(
+    $light-navdrawer,
+    (
+        item-border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
+        item-hover-icon-color: (
             color: (
                 'gray',
                 900,
-                0.14,
             ),
         ),
-
-        item-header-text-color: (
+        item-hover-text-color: (
             color: (
                 'gray',
-                800,
+                900,
             ),
         ),
-
-        item-text-color: (
+        item-hover-background: (
             color: (
                 'gray',
-                700,
+                200,
             ),
         ),
-
-        item-icon-color: (
+        item-text-color: (
             color: (
                 'gray',
-                700,
+                900,
             ),
         ),
-
-        item-active-text-color: (
+        item-active-background: (
             color: (
                 'primary',
                 500,
+                0.12,
             ),
         ),
-
-        item-active-background: (
+        item-active-icon-color: (
             color: (
                 'primary',
                 500,
-                0.12,
             ),
         ),
-
-        item-hover-background: (
+        item-active-text-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        border-color: (
             color: (
                 'gray',
-                200,
-                0.8,
+                300,
+            ),
+        ),
+        item-icon-color: (
+            color: (
+                'gray',
+                700,
             ),
         ),
+        item-header-text-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+    )
+);
 
+/// Generates a fluent navdrawer schema.
+/// @type {Map}
+/// @prop {Number} item-border-radius [0] - The border radius used for the navdrawer items.
+/// @prop {Map} item-hover-icon-color [color: ('primary', 600)] - The item's hover icon color.
+/// @prop {Map} item-hover-text-color [color: ('gray', 800)] - The item's hover text color.
+/// @prop {Map} item-hover-background [color: ('gray', 100)] - The item's hover background color.
+/// @prop {Map} item-text-color [color: ('gray', 800)] - The item's idle text color.
+/// @prop {Map} item-active-background [color: ('gray', 200)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [color: ('primary', 700)] - The item's icon active color.
+/// @prop {Map} item-active-text-color [color: ('gray', 900)] - The item's active text color.
+/// @prop {Map} border-color [color: ('gray', 200)] - The navigation drawer right border color.
+/// @prop {Map} item-icon-color [ color: ('primary', 500)] - The item's icon color.
+/// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
+/// @requires {Map} $light-navdrawer
+$fluent-navdrawer: extend(
+    $light-navdrawer,
+    (
+        item-border-radius: 0,
+        item-hover-icon-color: (
+            color: (
+                'primary',
+                600,
+            ),
+        ),
         item-hover-text-color: (
             color: (
                 'gray',
-                900,
+                800,
+            ),
+        ),
+        item-hover-background: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+        item-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        item-active-background: (
+            color: (
+                'gray',
+                200,
             ),
         ),
-
         item-active-icon-color: (
             color: (
                 'primary',
-                500,
+                700,
             ),
         ),
-
-        item-hover-icon-color: (
+        item-active-text-color: (
             color: (
                 'gray',
                 900,
             ),
         ),
-
-        border-radius: (
-            border-radius: (
-                rem(0),
-                rem(0),
-                rem(36px),
+        border-color: (
+            color: (
+                'gray',
+                200,
             ),
         ),
-        item-border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(24px),
+        item-icon-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        item-header-text-color: (
+            color: (
+                'gray',
+                800,
             ),
         ),
     )
 );
 
-/// Generates a material navdrawer schema.
-/// @type {Map}
-/// @requires {Map} $light-navdrawer
-$material-navdrawer: $light-navdrawer;
-
-/// Generates a fluent navdrawer schema.
-/// @type {Map}
-/// @requires {Map} $light-navdrawer
-$fluent-navdrawer: $light-navdrawer;
-
 /// Generates a bootstrap navdrawer schema.
 /// @type {Map}
+/// @prop {List} item-border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for the navdrawer items
+/// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The item's hover icon color.
+/// @prop {Map} item-hover-text-color [color: ('gray', 900)] - The item's hover text color.
+/// @prop {Map} item-hover-background [color: ('gray', 200, .8)] - The item's hover background color.
+/// @prop {Map} item-text-color [color: ('gray', 900)] - The item's idle text color.
+/// @prop {Map} item-active-background [color: ('primary', 500)] - The item's active background color.
+/// @prop {Map} item-active-icon-color [contrast-color: ('primary', 900)] - The item's icon active color.
+/// @prop {Map} item-active-text-color [contrast-color: ('primary', 900)] - The item's active text color.
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
+/// @prop {Map} item-icon-color [ color: ('gray', 900)] - The item's icon color.
+/// @prop {Map} item-header-text-color [color: ('gray', 900)] - The header's idle text color.
 /// @requires {Map} $light-navdrawer
 $bootstrap-navdrawer: extend(
     $light-navdrawer,
     (
+        item-border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
+        item-hover-icon-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-hover-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-hover-background: (
+            color: (
+                'gray',
+                200,
+                0.8,
+            ),
+        ),
+        item-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-active-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        item-active-icon-color: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+        item-active-text-color: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
         border-color: (
             color: (
                 'gray',
                 300,
             ),
         ),
+        item-icon-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        item-header-text-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
     )
 );
 
@@ -163,10 +302,8 @@ $bootstrap-navdrawer: extend(
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
 /// @requires {Map} $light-navdrawer
-/// @requires {Map} $indigo-elevation-navdrawer
 $indigo-navdrawer: extend(
     $light-navdrawer,
-    $indigo-elevation-navdrawer,
     (
         border-color: (
             color: (