feat(fluent theme): Initial implementation

CHANGELOG.md

@@ -102,6 +102,28 @@ All notable changes for each version of this project will be documented in this
 ## 8.1.0
 
 ### New Features
+
+##### New theme
+Ignite UI for angular now have a new theme that mimics the Microsoft Fluent design as much as possible.  
+In order to use the theme you have to use one of the following mixins:  
+  `igx-fluent-theme` and `igx-fluent-dark-theme`  
+
+We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.  
+
+This is an example of how you can use the new theme.
+
+```scss
+// Light version
+.fluent-word-theme {
+    @include igx-fluent-theme($fluent-word-palette);
+}
+
+// Dark version
+.fluent-excel-dark-theme {
+    @include igx-fluent-dark-theme($fluent-excel-palette);
+}
+```
+
 - `IgxBottomNav` now supports an `igx-tab` declaration mode. When in this mode, panels declarations are not accepted and tab items' content is not rendered.
     - You can use this mode to apply directives on the tab items - for example to achieve routing navigation.
     - You are allowed to customize tab items with labels, icons and even templates.

projects/igniteui-angular/src/lib/combo/combo-item.component.html

@@ -1,4 +1,4 @@
 <ng-container *ngIf="!isHeader">
     <igx-checkbox [checked]="selected" disableRipple="true" [disableTransitions]="disableTransitions" [tabindex]="-1" (click)="disableCheck($event)" class="igx-combo__checkbox"></igx-checkbox>
 </ng-container>
-<ng-content></ng-content>
+<ng-content></ng-content>

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

@@ -111,22 +111,24 @@
     @return #fff;
 }
 
-/// Retrieves a contrast text color for a given color from a color palette.
+/// Converts a rgba color to a hexidecimal color.
 /// @access public
-/// @group Palettes
-/// @param {Map} $palette - The source palette map.
-/// @param {string} $color - The target color from the color palette.
-/// @param {number|variant} $variant - The target color shade from the color palette.
-/// @requires igx-color
-/// @requires text-contrast
-/// @requires hexrgba
-/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found.
-@function igx-contrast-color($palette, $color, $variant: 500) {
-    $_color: igx-color($palette, $color, $variant);
-    @if $_color {
-        @return text-contrast(hexrgba($_color));
+/// @requires {function} to-string
+/// @param {Color} $rgba - The rgba color to convert.
+/// @param {Color} $background - The background color to convert against.
+/// @return {Color} - The hexidecimal representation of the rgba value.
+@function hexrgba($rgba, $background: #fff) {
+    @if type-of($rgba) == color {
+        $red: red($rgba);
+        $green: green($rgba);
+        $blue: blue($rgba);
+        $a: alpha($rgba);
+        $r: floor($a * $red + (1 - $a) * red($background));
+        $g: floor($a * $green + (1 - $a) * green($background));
+        $b: floor($a * $blue + (1 - $a) * blue($background));
+        @return rgb($r, $g, $b);
     }
-    @return #fff;
+    @return $rgba;
 }
 
 /// Returns a contrast color for a passed color.
@@ -138,7 +140,7 @@
     @if type-of($color) == 'color' {
         $lightContrast: contrast($color, white);
         $darkContrast: contrast($color, black);
-
+        
         @if ($lightContrast > $darkContrast) {
             @return white;
         } @else {
@@ -148,6 +150,24 @@
     @return $color;
 }
 
+/// Retrieves a contrast text color for a given color from a color palette.
+/// @access public
+/// @group Palettes
+/// @param {Map} $palette - The source palette map.
+/// @param {string} $color - The target color from the color palette.
+/// @param {number|variant} $variant - The target color shade from the color palette.
+/// @requires igx-color
+/// @requires text-contrast
+/// @requires hexrgba
+/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found.
+@function igx-contrast-color($palette, $color, $variant: 500) {
+    $_color: igx-color($palette, $color, $variant);
+    @if $_color {
+        @return text-contrast(hexrgba($_color));
+    }
+    @return #fff;
+}
+
 /// Test if `$value` is a valid direction.
 /// @access private
 /// @param {*} $value - The value to test.
@@ -198,54 +218,34 @@
     @return $sign + $result;
 }
 
-/// Converts a rgba color to a hexidecimal color.
-/// @access public
-/// @requires {function} to-string
-/// @param {Color} $rgba - The rgba color to convert.
-/// @param {Color} $background - The background color to convert against.
-/// @return {Color} - The hexidecimal representation of the rgba value.
-@function hexrgba($rgba, $background: #fff) {
-    @if type-of($rgba) == color {
-        $red: red($rgba);
-        $green: green($rgba);
-        $blue: blue($rgba);
-        $a: alpha($rgba);
-        $r: floor($a * $red + (1 - $a) * red($background));
-        $g: floor($a * $green + (1 - $a) * green($background));
-        $b: floor($a * $blue + (1 - $a) * blue($background));
-        @return rgb($r, $g, $b);
-    }
-    @return $rgba;
-}
-
-/// Extends a Map object with the properties of another Map object.
-/// @access private
-/// @param {Map...} $maps - The source map to get extended.
-/// @returns {Map} - Returns the merged maps.
-@function extend($maps...) {
-    $result: ();
-
-    @each $map in $maps {
-        $result: map-merge($result, map-clean($map));
-    }
-
-    @return $result;
-}
-
 /// Removes all null key-value pairs from the map
 /// @access private
 /// @param {Map} $map - The target map to be cleaned.
 /// @returns {Map} - Returns a clean map.
 @function map-clean($map) {
     $result: ();
-
+    
     @each $key, $value in $map {
         @if($value) != null {
             $result: map-merge($result, (
                 #{$key}: $value
             ));
         }
     }
+
+    @return $result;
+}
+
+/// Extends a Map object with the properties of another Map object.
+/// @access private
+/// @param {Map...} $maps - The source map to get extended.
+/// @returns {Map} - Returns the merged maps.
+@function extend($maps...) {
+    $result: ();
+
+    @each $map in $maps {
+        $result: map-merge($result, map-clean($map));
+    }
 
     @return $result;
 }
@@ -309,7 +309,7 @@
     $warn: #fbb13c,
     $error: #ff134a,
     $grays: #000,
-    $surface: #fff,
+    $surface: #fff
 ) {
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
     $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87);

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

@@ -3,6 +3,29 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
+/// Help debug sass maps.
+/// @access privet
+/// @example scss - Sample usage
+///   input[type="checkbox"] {
+///     @include hide-default();
+///   }
+
+//@mixin debug-map($map) {
+//    @at-root {
+//        @debug-map {
+//            __toString__: inspect($map);
+//            __length__: length($map);
+//            __keys__: map-keys($map);
+//
+//            __properties__ {
+//                @each $key, $value in $map {
+//                    #{$key}: inspect($value);
+//                }
+//            }
+//        }
+//    }
+//}
+
 /// Hides the element from the DOM.
 /// @access public
 /// @example scss - Sample usage

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -142,12 +142,10 @@
 ) {
     $message: map-get($categories, 'message');
 
-    @include igx-scope('.igx-typography') {
-        %igx-banner__text {
-            @include igx-type-style($type-scale, $message) {
-                margin-top: 0;
-                margin-bottom: 0;
-            }
+    %igx-banner__text {
+        @include igx-type-style($type-scale, $message) {
+            margin-top: 0;
+            margin-bottom: 0;
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -35,7 +35,7 @@
     $background: null,
     $idle-item-color: null,
     $active-item-color: null,
-    $shadow: null,
+    $shadow: null
 ) {
     $name: 'igx-bottom-nav';
     $bottom-nav-schema: map-get($schema, $name);
@@ -75,8 +75,6 @@
 @mixin igx-bottom-nav($theme) {
     @include igx-root-css-vars($theme);
 
-    // @debug $theme;
-
     $menu-height: 56px;
     $item-min-width: 80px;
     $item-max-width: 168px;
@@ -193,11 +191,9 @@
 @mixin igx-bottom-nav-typography($type-scale, $categories: (label: 'caption')) {
     $label: map-get($categories, 'label');
 
-    @include igx-scope('.igx-typography') {
-        %igx-tab-label {
-            @include igx-type-style($type-scale, $label) {
-                margin: 0
-            }
+    %igx-tab-label {
+        @include igx-type-style($type-scale, $label) {
+            margin: 0
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -67,7 +67,7 @@
     $item-selected-text-color: null,
     $item-selected-background: null,
     $item-selected-border-color: null,
-    $item-selected-hover-background: null,
+    $item-selected-hover-background: null
 ) {
     $name: 'igx-button-group';
     $button-group-schema: map-get($schema, $name);
@@ -149,19 +149,17 @@
     $group-item-min-width: 24px;
     $group-item-border-thickness: 1px;
     $group-items-margin: rem(10px, 16px);
+    $transition: all 140ms $ease-in-out-quad;
 
     %igx-group-display {
         display: flex;
         box-shadow: --var($theme, 'shadow');
-        transition: all 140ms $ease-in-out-quad;
+        transition: $transition;
         border-radius: --var($theme, 'border-radius')
     }
 
     %igx-group-item {
-        &%igx-button--flat {
-            border-radius: 0;
-        }
-
+        @include ellipsis();
         border: $group-item-border-thickness solid --var($theme, 'item-border-color');
         color: --var($theme, 'item-text-color');
         background: --var($theme, 'item-background');
@@ -175,13 +173,19 @@
         user-select: none;
         position: relative;
         z-index: 0;
-        @include ellipsis();
+        transition: $transition;
 
-        &:not(:nth-child(0)) {
-            margin-left: -1px;
+        &%igx-button--flat {
+            border-radius: 0;
         }
 
+        %igx-icon-display {
+            color: currentColor;
+        }
 
+        &:not(:nth-child(0)) {
+            margin-left: -1px;
+        }
 
         &:first-of-type {
             border-radius: --var($theme, 'border-radius') 0 0 --var($theme, 'border-radius');
@@ -199,6 +203,10 @@
 
         &:hover,
         &:focus {
+            %igx-icon-display {
+                color: currentColor;
+            }
+
             color: --var($theme, 'item-hover-text-color');
             background: --var($theme, 'item-hover-background');
             z-index: 1;