Merge branch 'simeonoff/indigo-theme' of https://github.com/IgniteUI/igniteui-angular into mpopov/fix-item-line-subtitle-contrast

Author: MPopov

projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss

@@ -314,62 +314,71 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-')
 }
 
 /// @alias bem-selector
+/// @see bem-selector
 @mixin bem($block, $e: null, $elem: null, $m: null, $mod: null, $mods: null) {
     #{bem-selector($block, $e: $e, $elem: $elem, $m: $m, $mod: $mod, $mods: $mods)} {
         @content;
     }
 }
 
 /// @alias bem-block
+/// @see bem-block
 @mixin block($block) {
     @include bem-block($block) {
         @content;
     }
 }
 
 /// @alias bem-elem
+/// @see bem-elem
 @mixin elem($elem, $m: null, $mod: null, $mods: null) {
     @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {
         @content;
     }
 }
 
 /// @alias bem-mod
+/// @see bem-mod
 @mixin mod($mod) {
     @include bem-mod($mod) {
         @content;
     }
 }
 
 /// @alias bem-mods
+/// @see bem-mods
 @mixin mods($mods...) {
     @include bem-mods($mods...) {
         @content;
     }
 }
 
 /// @alias bem-block
+/// @see bem-block
 @mixin b($block) {
     @include bem-block($block) {
         @content;
     }
 }
 
 /// @alias bem-elem
+/// @see bem-elem
 @mixin e($elem, $m: null, $mod: null, $mods: null) {
     @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {
         @content;
     }
 }
 
 /// @alias bem-mod
+/// @see bem-mod
 @mixin m($mod) {
     @include bem-mod($mod) {
         @content;
     }
 }
 
 /// @alias bem-mods
+/// @see bem-mods
 @mixin mx($mods...) {
     @include bem-mods($mods...) {
         @content;

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -143,7 +143,12 @@
     @return $rgba;
 }
 
+/// Converts a rgba color to a hexidecimal color.
+///
+/// An alias of hexrgba.
+/// @access public
 /// @alias hexrgba
+/// @see hexrgba
 @function to-opaque($rgba, $background: #fff) {
     @return hexrgba($rgba, $background);
 }
@@ -272,7 +277,7 @@
 }
 
 /// Extends a Map object with the properties of another Map object.
-/// @access private
+/// @access public
 /// @param {Map...} $maps - The source map to get extended.
 /// @returns {Map} - Returns the merged maps.
 @function extend($maps...) {

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1557,18 +1557,11 @@
     }
 
     %igx-grid__th--active {
-        @extend %grid-cell--active;
-
+        %grid-cell-header,
         %igx-grid__th--selected,
         %igx-grid__th--selectable {
             @extend %grid-cell--active
         }
-
-        %igx-grid__filtering-cell,
-        %grid-cell-header {
-            border-right: none;
-            border-bottom: none;
-        }
     }
 
     %igx-grid-summary--active {

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -158,6 +158,7 @@
 
     $drawer-icon-size: rem(24px);
     $drawer-item-margin: rem(8px);
+    $text-side-padding: rem(8px);
     $drawer-item-min-h: auto;
     $drawer-item-max-h: rem(48px);
     $drawer-item-min-w: rem(32px);
@@ -297,15 +298,15 @@
         color: --var($theme, 'item-text-color');
         max-height: $drawer-item-max-h;
         min-width: $drawer-item-min-w;
-        margin: $drawer-item-margin;
 
         @if $variant != 'indigo-design' {
+            // important is needed to override the typography margins
+            margin: $drawer-item-margin !important;
             padding: rem(12px) rem(8px);
         } @else {
-            padding: rem(4px) rem(4px);
-
             // important is needed to override the typography margins
             margin: rem(15px) $drawer-item-margin !important;
+            padding: rem(4px);
         }
 
         cursor: pointer;
@@ -319,7 +320,17 @@
         justify-content: flex-start;
 
         > igx-icon + span {
-            margin-#{$left}: rem(32px);
+            @if $variant == 'indigo-design' {
+                margin-#{$left}: calc(32px - #{$text-side-padding});
+            } @else {
+                margin-#{$left}: rem(32px);
+            }
+        }
+
+        span {
+            @if $variant == 'indigo-design' {
+                padding-#{$left}: $text-side-padding;
+            }
         }
 
         igx-icon {

projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss

@@ -7,6 +7,10 @@
 /// Returns a map containing all style properties related to the theming the watermark directive.
 /// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.
 /// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Number} $border-radius [null] - The border radius used for the link.
+/// @param {Color} $border-color [null] - The border color used for the  link.
+/// @param {Color} $link-background [null] - The background color used for the link.
+/// @param {Color} $color [null] - The color used for the link text.
 ///
 /// @requires $default-palette
 /// @requires $light-schema
@@ -15,10 +19,10 @@
 /// @requires text-contrast
 /// @requires round-borders
 ///
-/// @example scss Change the watermark background
-///   $my-watermark-theme: igx-watermark-theme($background: magenta);
+/// @example scss Change the watermark link background
+///   $my-watermark-theme: igx-watermark-theme($link-background: magenta);
 ///   // Pass the theme to the igx-watermark component mixin
-///   @include igx-watermark($my-checkbox-theme);
+///   @include igx-watermark($my-watermark-theme);
 @function igx-watermark-theme(
     $palette: $default-palette,
     $schema: $light-schema,
@@ -85,6 +89,7 @@
         font-size: rem(14px);
         padding: rem(2px) rem(4px);
         line-height: normal;
+        border-radius: --var($theme, 'border-radius');
         border: 1px solid --var($theme, 'border-color');
         color: --var($theme, 'color');
         z-index: 10002;
@@ -111,3 +116,4 @@
         }
     }
 }
+

projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

@@ -72,6 +72,7 @@ $default-dark-palette: igx-palette(
 /// @access public
 /// @group palettes
 /// @alias default-palette
+/// @see $default-palette
 $light-palette: $default-palette;
 
 /// Same as $light-palette but with modified grays and surface colors.

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_action-strip.scss

@@ -2,13 +2,15 @@
 
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
 /// Generates a dark action-strip schema.
 /// @type {Map}
 /// @property {Map} actions-background [igx-color: ('grays', 200), hexrgba: #000, rgba: .8]- actions container background.
+/// @requires {function} extend
+/// @requires $_light-action-strip
 /// @see $default-palette
 $_dark-action-strip: extend(
     $_light-action-strip,

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_avatar.scss

@@ -1,7 +1,7 @@
 @import '../light/avatar';
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_badge.scss

@@ -2,31 +2,31 @@
 
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
 /// Generates a dark badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-badge
 /// @see $default-palette
 $_dark-badge: extend($_light-badge);
 
 /// Generates a dark fluent badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-badge
 $_dark-fluent-badge: extend($_fluent-badge);
 
 /// Generates a dark bootstrap badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_bootstrap-badge
 $_dark-bootstrap-badge: extend($_bootstrap-badge);
 
 /// Generates a dark indigo badge schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-badge
 $_dark-indigo-badge: extend($_indigo-badge);

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss

@@ -1,26 +1,27 @@
 @import '../light/banner';
 ////
 /// @group schemas
-/// @access private
+/// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
 ////
 
 /// Generates a dark banner schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_light-banner
 /// @see $default-palette
 $_dark-banner: extend($_light-banner);
 
 /// Generates a dark fluent banner schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_fluent-banner
 $_dark-fluent-banner: extend($_fluent-banner);
 
 /// Generates a dark bootstrap banner schema.
 /// @type {Map}
-/// @requires extend
+/// @property {Map} banner-background [#333]- The background color used banner background.
+/// @requires {function} extend
 /// @requires $_bootstrap-banner
 $_dark-bootstrap-banner: extend(
     $_bootstrap-banner,
@@ -31,6 +32,6 @@ $_dark-bootstrap-banner: extend(
 
 /// Generates a dark indigo banner schema.
 /// @type {Map}
-/// @requires extend
+/// @requires {function} extend
 /// @requires $_indigo-banner
 $_dark-indigo-banner: extend($_indigo-banner);