Merge branch 'master' into mpopov/fix-scrollbar-gap

Author: rkaraivanov

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

@@ -31,6 +31,18 @@
     @return ($pixels / $context) * 1rem;
 }
 
+/// Relative value(em/rem) to pixel.
+/// @access public
+/// @param {number|string} $num - The relative value to be converted.
+/// @param {number|string} $context [$browser-context] - The base context to convert against.
+@function px($num, $context: $browser-context) {
+    @if type-of $num == 'number' {
+        @return ($num / ($num * 0 + 1)) * 16px;
+    }
+
+    @return $num;
+}
+
 /// Calculates the luminance for a given color.
 /// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests.
 ///
@@ -276,12 +288,12 @@
 /// @param {Color} $color - The base color used to generate the palette.
 /// @param {Map} $shades - A map of variations as keys and opacities as values.
 /// Based on the Material color system.
-/// @returns {Map} - A map consisting of 10 grayscale color variations and 10
+/// @returns {Map} - A map consisting of 10 color variations and 10
 /// text contrast colors for each variation.
 @function grayscale-palette($color, $shades) {
     $result: ();
     @each $saturation, $opacity in $shades {
-        $shade: rgba(grayscale($color), $opacity);
+        $shade: rgba($color, $opacity);
         $result: map-merge($result, ($saturation: $shade));
     }
     @return $result;
@@ -297,7 +309,7 @@
 /// @param {Color} $success [#4eb862] - The success color used throughout the application.
 /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application.
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
-/// @param {Color} $grays [#000 | $igx-foreground-color] - The color used for generating the grayscale palette.
+/// @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.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
@@ -403,17 +415,19 @@
 ///
 @function resolve-value($ctx, $extra: null) {
     $result: null;
+
     @each $fn, $args in $ctx {
         @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 $result != null {
-                $result: call(get-function($fn), $result, $args...)
+                $result: call(get-function($fn), $result, $args...);
             } @else {
-                $result: call(get-function($fn), $args...)
+                $result: call(get-function($fn), $args);
             }
         }
     }
+
     @return $result;
 }
 
@@ -423,6 +437,21 @@
     @return hsl(random(360), 100%, 50%);
 }
 
+@function igx-generate-series-colors($palette) {
+    @return (
+        igx-color($palette, 'primary'),
+        igx-color($palette, 'secondary'),
+        rgb(249, 98, 50),
+        rgb(60, 189, 201),
+        rgb(220, 63, 118),
+        rgb(255, 152, 0),
+        rgb(78, 98, 207),
+        rgb(84, 194, 90),
+        rgb(121, 85, 72),
+        rgb(154, 154, 154)
+    );
+}
+
 /// Applies an `igx-palette` to a given theme schema.
 /// @access private
 /// @param {Map} $schema - A theme schema.
@@ -448,6 +477,12 @@
         } @else {
             $result: extend($result, (#{$key}: $value));
         }
+
+        @if $value == 'series' {
+            $result: extend($result, (
+                #{$key}: #{igx-generate-series-colors($palette)}
+            ));
+        }
     }
     @return $result;
 }
@@ -567,3 +602,47 @@
 @function if-rtl($if, $else: null) {
     @return if-ltr($else, $if);
 }
+
+@function expand-shorthand($list) {
+    $len: length($list);
+
+    $margins: (
+        'margin-top': null,
+        'margin-right': null,
+        'margin-bottom': null,
+        'margin-left': null,
+    );
+
+    @for $i from 1 through 4 {
+        $n: $i % $len;
+        $n: if($n != 0, $n, $len);
+
+        @if $len == 3 and $i == 4 {
+            $n: 2;
+        }
+
+        $key: nth(map-keys($margins), $i);
+        $value: nth($list, $n);
+
+        $margins: map-merge($margins, ($key: $value));
+    }
+
+    @return $margins;
+}
+
+@function map-keys-prefix($map, $prefix, $separator: '-') {
+    $keys: map-keys($map);
+    $len: length($keys);
+    $result: ();
+
+    @for $i from 1 through $len {
+        $key: nth($keys, $i);
+
+        $result: map-merge($result, (
+            '#{$prefix}#{$separator}#{$key}': map-get($map, $key))
+        );
+    }
+
+    @return $result;
+}
+

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

@@ -238,12 +238,14 @@
 ///   :root {
 ///     @include css-vars-from-theme($my-theme);
 ///   }
-@mixin css-vars-from-theme($theme) {
-    $prefix: map-get($theme, 'name');
-
+@mixin css-vars-from-theme($theme, $prefix: null) {
     @each $key, $value in $theme {
         @if $key != 'name' and $key != 'palette' and type-of($value) != 'map' {
-            --#{$prefix}-#{$key}: #{$value};
+            @if $prefix {
+                --#{$prefix}-#{$key}: #{$value};
+            } @else {
+                --#{$key}: #{$value};
+            }
         }
     }
 }
@@ -269,9 +271,10 @@
 /// @requires {mixin} css-vars-from-theme
 @mixin igx-css-vars($theme) {
     $scope: if(is-root(), ':root', '&');
+    $prefix: map-get($theme, 'name');
 
     #{$scope} {
-        @include css-vars-from-theme($theme);
+        @include css-vars-from-theme($theme, $prefix);
     }
 }