Merge pull request #7617 from IgniteUI/simeonoff/indigo-theme

feat(themes): add initial indigo theme

Author: simeonoff

.sassdocrc

@@ -9,14 +9,16 @@
     "theme": "./node_modules/igniteui-sassdoc-theme/sassdoc/",
     "autofill": ["throws", "content"],
     "groups": {
+        "global-themes": "Global Themes",
+        "component-themes": "Component Themes",
         "undefined": "general"
     },
     "no-update-notifier": false,
     "verbose": false,
     "strict": false,
     "display": {
         "alias": true,
-        "access": ["public", "private"]
+        "access": ["public"]
     },
     "privatePrefix": true,
     "resolvedValue": true

CHANGELOG.md

@@ -24,6 +24,27 @@ All notable changes for each version of this project will be documented in this
 - `igxDatePicker`
     -  Added new property - `editorTabIndex`, that allows setting tabindex for the default editor.
 
+### New Theme
+Ignite UI for Angular now has a new theme based on our own design system.
+You can use one of the following mixins to include a dark or light indigo theme:
+`igx-indigo-light-theme` and `igx-indigo-dark-theme`
+
+We also added two new palettes that go with the new theme, `$light-indigo-palette` and `$dark-indigo-palette`.
+
+The following example shows how you can use the Indigo theme:
+
+```scss
+// Light version
+.indigo-theme {
+    @include igx-indigo-light-theme($light-indigo-palette);
+}
+
+// Dark version
+.indigo-dark-theme {
+    @include igx-indigo-dark-theme($dark-indigo-palette);
+}
+```
+
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Introduced `showSummaryOnCollapse` grid property which allows you to control whether the summary row stays visible when the groupBy / parent row is collapsed.
@@ -500,7 +521,7 @@ Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design
 Depending on your use case you can 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`.
+We also added two new palettes that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
 
 Next example shows how you can use the Fluent theme.
 

projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss

@@ -150,3 +150,16 @@
 
     @return $result;
 }
+
+/// Default elevations.
+/// @type Map
+/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
+/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
+/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
+/// @requires igx-elevations
+$elevations: igx-elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+

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,23 +143,51 @@
     @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);
+}
+
 /// Returns a contrast color for a passed color.
 /// @access public
 /// @group Palettes
-/// @param {Color} $color - The color used to return a contrast color for.
+/// @param {Color} $background - The background color used to return a contrast/forground color for.
+/// @param {Color} $foreground - The foreground color used in case it has enough contrast against the provided background.
+/// @param {String} $contrast - The contrast level according to WCAG 2.0 standards.
 /// @returns {Color} - Returns either white or black depending on the luminance of the input color.
-@function text-contrast($color) {
-    @if type-of($color) == 'color' {
-        $lightContrast: contrast($color, white);
-        $darkContrast: contrast($color, black);
+/// @link https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
+@function text-contrast($background, $foreground: white, $contrast: 'AAA') {
+    @if type-of($foreground) == 'color' and type-of($background) == 'color' {
+        $level: map-get((
+            'A': 3,
+            'AA': 4.5,
+            'AAA': 7
+        ), $contrast);
+
+        @if $level == null {
+            @error "$contrast must be 'A', 'AA', or 'AAA'";
+        }
 
-        @if ($lightContrast > $darkContrast) {
-            @return white;
+        @if contrast($background, $foreground) >= $level {
+            @return $foreground;
         } @else {
-            @return black;
+            $lightContrast: contrast($background, white);
+            $darkContrast: contrast($background, black);
+
+            @if ($lightContrast > $darkContrast) {
+                @return white;
+            } @else {
+                @return black;
+            }
         }
+    } @else {
+        @error 'Expected color for $background/$foreground but got #{$background}/#{$foreground}';
     }
-    @return $color;
 }
 
 /// Retrieves a contrast text color for a given color from a color palette.
@@ -171,7 +199,7 @@
 /// @requires igx-color
 /// @requires text-contrast
 /// @requires hexrgba
-/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found.
+/// @returns {Color} [#fff] - Returns white if no palette, color and/or variant matches found.
 @function igx-contrast-color($palette, $color, $variant: 500) {
     $_color: igx-color($palette, $color, $variant);
     @if $_color {
@@ -249,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...) {
@@ -311,6 +339,7 @@
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
 /// @param {Color} $grays [#000 | $igx-foreground-color] - The color used for generating the grays palette.
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
+/// @param {String} $variant ['material'] - The palette variant that gets generated. Possible values are: 'material', 'fluent', 'bootstrap', and 'indigo-design'.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
 @function igx-palette(
@@ -321,10 +350,17 @@
     $warn: #fbb13c,
     $error: #ff134a,
     $grays: #000,
-    $surface: #fff
+    $surface: #fff,
+    $variant: 'material'
 ) {
     $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);
+
+    $shades: map-get((
+        'material': (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87),
+        'fluent': (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87),
+        'bootstrap': (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87),
+        'indigo-design': (50: .02, 100: .03, 200: .06, 300: .15, 400: .21, 500: .4, 600: .52, 700: .64, 800: .77, 900: .9),
+    ), $variant);
 
     $primary-palette: generate-palette($primary, $saturations);
     $secondary-palette: generate-palette($secondary, $saturations);
@@ -420,6 +456,8 @@
         @if function-exists($fn) {
             @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') {
                 $result: call(get-function($fn), $extra, $args...);
+            } @else if ($fn == 'hexrgba' or $fn == 'to-opaque') and type-of($args) == 'map' {
+                $result: call(get-function($fn), $result, resolve-value($ctx: $args, $extra: $extra));
             } @else if $result != null {
                 $result: call(get-function($fn), $result, $args...);
             } @else {

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -77,6 +77,8 @@
         compact: 0 rem(12px)
     );
 
+    $variant: map-get($theme, variant);
+
     $left: if-ltr(left, right);
     $right: if-ltr(right, left);
 
@@ -109,14 +111,14 @@
         }
     }
 
-    %igx-action-strip--cosy{
-        padding: map-get($padding, 'cosy');
+    %igx-action-strip--cosy {
         @extend %action-icons-density;
+        padding: map-get($padding, 'cosy');
     }
 
-    %igx-action-strip--compact{
-        padding: map-get($padding, 'compact');
+    %igx-action-strip--compact {
         @extend %action-icons-density;
+        padding: map-get($padding, 'compact');
     }
 
     %igx-action-strip__editing-actions,
@@ -144,6 +146,12 @@
         igx-icon {
             color: --var($theme, 'color');
         }
+
+        [igxButton='icon'] {
+            @if $variant == 'indigo-design' {
+                border-radius: --var($theme, 'actions-border-radius');
+            }
+        }
     }
 
     %igx-action-strip__pining-actions {

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -94,18 +94,21 @@
         material: null,
         fluent: null,
         bootstrap: 0 0 0 rem(3px) --var($theme, 'icon-background'),
+        indigo-design: null,
     ), $variant);
 
     $box-shadow-initials: map-get((
         material: null,
         fluent: null,
         bootstrap: 0 0 0 rem(3px) --var($theme, 'initials-background'),
+        indigo-design: null,
     ), $variant);
 
     $box-shadow-image: map-get((
         material: null,
         fluent: null,
         bootstrap: 0 0 0 rem(3px) --var($theme, 'image-background'),
+        indigo-design: null,
     ), $variant);
 
     %_igx-avatar-outline {