feat(themes): add theme schemas

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

@@ -72,6 +72,8 @@
         @return lighten(desaturate($color, 12.9), 9.1);
     } @else if ($saturation == 400) {
         @return lighten(desaturate($color, 6.6), 4.1);
+    } @else if ($saturation == 500) {
+        @return $color;
     } @else if ($saturation == 600) {
         @return darken(saturate($color, 12.4), 5.1);
     } @else if ($saturation == 700) {
@@ -230,41 +232,50 @@
 /// @access private
 /// @group Palettes
 /// @requires {function} gen-color
+/// @requires {function} text-contrast
+/// @requires {function} extend
 /// @param {Color} $color - The base color used to generate the palette.
-/// @returns {Map} - A map consisting of 26 color variations.
-@function generate-palette($color) {
-    @return (
-        50: gen-color($color, 50),
-        100: gen-color($color, 100),
-        200: gen-color($color, 200),
-        300: gen-color($color, 300),
-        400: gen-color($color, 400),
-        500: $color,
-        600: gen-color($color, 600),
-        700: gen-color($color, 700),
-        800: gen-color($color, 800),
-        900: gen-color($color, 900),
-        A100: gen-color($color, 'A100'),
-        A200: gen-color($color, 'A200'),
-        A400: gen-color($color, 'A400'),
-        A700: gen-color($color, 'A700'),
-        contrast: (
-            50: text-contrast(gen-color($color, 50)),
-            100: text-contrast(gen-color($color, 100)),
-            200: text-contrast(gen-color($color, 200)),
-            300: text-contrast(gen-color($color, 300)),
-            400: text-contrast(gen-color($color, 400)),
-            500: text-contrast($color),
-            600: text-contrast(gen-color($color, 600)),
-            700: text-contrast(gen-color($color, 700)),
-            800: text-contrast(gen-color($color, 800)),
-            900: text-contrast(gen-color($color, 900)),
-            A100: text-contrast(gen-color($color, 'A100')),
-            A200: text-contrast(gen-color($color, 'A200')),
-            A400: text-contrast(gen-color($color, 'A400')),
-            A700: text-contrast(gen-color($color, 'A700')),
-        )
-    );
+/// @param {List} $saturations - The saturation list of color variants.
+//// Based on the Material color system.
+/// @returns {Map} - A map consisting of 14 color variations and 14
+/// text contrast colors for each variation.
+@function generate-palette($color, $saturations) {
+    $shades: ();
+    $contrasts: ();
+
+    @each $saturation in $saturations {
+        $shade: gen-color($color, $saturation);
+        $contrast: text-contrast($shade);
+
+        $shades: map-merge($shades, ($saturation: $shade));
+        $contrasts: map-merge($contrasts, ($saturation: $contrast));
+    }
+    @return extend($shades, (contrast: $contrasts));
+}
+
+/// Generates grayscale color palette from a color.
+/// @access private
+/// @group Palettes
+/// @requires {function} text-contrast
+/// @requires {function} extend
+/// @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
+/// text contrast colors for each variation.
+@function grayscale-palette($color, $shades) {
+    $colors: ();
+    $contrasts: ();
+
+    @each $saturation, $opacity in $shades {
+        $shade: rgba(grayscale($color), $opacity);
+        $contrast: text-contrast(hexrgba($shade));
+
+        $colors: map-merge($colors, ($saturation: $shade));
+        $contrasts: map-merge($contrasts, ($saturation: $contrast));
+    }
+
+    @return extend($colors, (contrast: $contrasts));
 }
 
 /// Generates a color palette.
@@ -277,6 +288,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] - The color used for generating the grayscale palette.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
 @function igx-palette(
@@ -285,10 +297,15 @@
     $info: #1377d5,
     $success: #4eb862,
     $warn: #fbb13c,
-    $error: #ff134a
+    $error: #ff134a,
+    $grays: #000
 ) {
-    $primary-palette: generate-palette($primary);
-    $secondary-palette: generate-palette($secondary);
+    $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);
+
+    $primary-palette: generate-palette($primary, $saturations);
+    $secondary-palette: generate-palette($secondary, $saturations);
+    $grayscale-palette: grayscale-palette($grays, $shades);
 
     // @debug 'Primary Colors Palette: #{$primary-palette}';
     // @debug 'secondary Colors Palette: #{$secondary-palette}';
@@ -297,34 +314,11 @@
     @return (
         primary: $primary-palette,
         secondary: $secondary-palette,
+        grays: $grayscale-palette,
         info: (500: $info),
         success: (500: $success),
         warn: (500: $warn),
-        error: (500: $error),
-        grays: (
-            50: rgba(0, 0, 0, .02),
-            100: rgba(0, 0, 0, .04),
-            200: rgba(0, 0, 0, .08),
-            300: rgba(0, 0, 0, .12),
-            400: rgba(0, 0, 0, .26),
-            500: rgba(0, 0, 0, .38),
-            600: rgba(0, 0, 0, .54),
-            700: rgba(0, 0, 0, .62),
-            800: rgba(0, 0, 0, .74),
-            900: rgba(0, 0, 0, .87),
-            contrast: (
-                50: text-contrast(hexrgba(rgba(0, 0, 0, .02))),
-                100: text-contrast(hexrgba(rgba(0, 0, 0, .04))),
-                200: text-contrast(hexrgba(rgba(0, 0, 0, .08))),
-                300: text-contrast(hexrgba(rgba(0, 0, 0, .12))),
-                400: text-contrast(hexrgba(rgba(0, 0, 0, .26))),
-                500: text-contrast(hexrgba(rgba(0, 0, 0, .38))),
-                600: text-contrast(hexrgba(rgba(0, 0, 0, .54))),
-                700: text-contrast(hexrgba(rgba(0, 0, 0, .62))),
-                800: text-contrast(hexrgba(rgba(0, 0, 0, .74))),
-                900: text-contrast(hexrgba(rgba(0, 0, 0, .87))),
-            )
-        )
+        error: (500: $error)
     );
 }
 
@@ -379,9 +373,9 @@
 }
 
 /// Splits a string into a list by a given separator.
+/// @access private
 /// @param {string} $string - The string to split.
 /// @param {string} $separator - The string separator to split the string by.
-///
 @function str-split($string, $separator) {
     $split-arr: ();
     $index : str-index($string, $separator);
@@ -395,7 +389,7 @@
     @return $split-arr;
 }
 
-/// @ignore
+// @ignore
 @function get-theme($themes, $theme)  {
     @if type-of($themes) == 'map' and map-has-key($themes, $theme) {
         @return map-get($themes, $theme);
@@ -407,3 +401,83 @@
         @return call((#{$theme}-theme));
     }
 }
+
+/// Returns a value for a given instruction map, where the
+/// keys of the map are the names of the functions to be called,
+/// and the value for a given key is the arguments the function
+/// should be called with.
+/// The instruction set is executed left-to-right. The output of
+/// the first instruction is then passed as input to the next, and so on.
+/// @access private
+/// @param {Map} $ctx - The instruction map to be used.
+/// @param {List | Map} $extra [null] - Additional arguments to be passed during function calls.
+/// Will only be applied for `igx-color` and `igx-contrast-color` functions.
+/// @example scss Resolve `igx-color` and apply 80% opacity
+/// $instructions: (
+///   igx-color: ('primary', 500),
+///   rgba: .2
+/// );
+/// // $some-palette is a palette we pass as extra arguments
+/// $resolved-color: resolve-value($instructions, $some-palette);
+///
+@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...)
+            } @else {
+                $result: call(get-function($fn), $args...)
+            }
+        }
+    }
+    @return $result;
+}
+
+/// Applies an `igx-palette` to a given theme schema.
+/// @access private
+/// @param {Map} $schema - A theme schema.
+/// @param {Map} $palette - An igx-palette map.
+/// @requires {function} resolve-value
+/// @example scss Apply an `igx-palette` to theme schema
+///   $custom-palette: igx-palette($primary: red, $secondary: blue);
+///   $custom-schema: (
+///     my-color: (
+///        igx-color: ('primary', 800),
+///        rgba: .5
+///     ),
+///     roundness: 5px
+///   );
+///   $theme: apply-palette($custom-schema, $custom-palette); // A map with palette values resolved.
+/// @returns {Map} - A map with the resolved palette values.
+@function apply-palette($schema, $palette) {
+    $result: ();
+    @each $key, $value in $schema {
+        @if type-of($value) == 'map' {
+            $result: extend($result, (#{$key}: resolve-value($value, $palette)));
+        } @else {
+            $result: extend($result, (#{$key}: $value));
+        }
+    }
+    @return $result;
+}
+
+/// Returns true if the scope where it's called
+/// is the root of the document.
+/// @access private
+/// @example scss Check if the current scope is root
+///   @mixin smart-mixin() {
+///     $scope: if(is-root(), ':root', '&');
+///
+///     #{$scope} {
+///       /* style rules here */
+///     }
+///   }
+///
+@function is-root {
+    @each $selector in & {
+        @return if($selector == null, true, false);
+    }
+}

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

@@ -222,28 +222,27 @@
 /// Ensures the operation is done only once.
 /// @access private
 /// @param {map} $theme - The component theme to get the
-/// @example scss Convert theme colors to css variables.
 /// @requires {mixin} css-vars-from-theme
 @mixin igx-root-css-vars($theme) {
     $name: map-get($theme, 'name');
 
     @if map-get($themes, $name) == null {
         $id: unique-id();
         $themes: map-merge($themes, (#{$name}: $id)) !global;
-
-        :root {
-            @include css-vars-from-theme($theme);
-        }
+        @include igx-css-vars($theme);
     }
 }
 
-/// Add theme colors scoped to a specific element
+/// Add theme colors to a scope.
 /// @access public
 /// @param {map} $theme - The component theme to get the
-/// @example scss Convert theme colors to css variables.
 /// @requires {mixin} css-vars-from-theme
 @mixin igx-css-vars($theme) {
-    @include css-vars-from-theme($theme);
+    $scope: if(is-root(), ':root', '&');
+
+    #{$scope} {
+        @include css-vars-from-theme($theme);
+    }
 }
 
 /// Scopes CSS rules to a predefined top-level parent selector.

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

@@ -23,25 +23,14 @@
 ///   @include igx-avatar($my-avatar-theme);
 @function igx-avatar-theme(
     $palette: $default-palette,
-    $preset: null,
+    $schema: $light-schema,
     $icon-background: null,
     $icon-color: null,
     $initials-background: null,
     $initials-color: null,
     $image-background: null
 ) {
-    $default-theme: (
-        name: 'igx-avatar',
-        icon-background: igx-color($palette, 'grays', 400),
-        icon-color: igx-color($palette, 'grays', 800),
-        initials-background: igx-color($palette, 'grays', 400),
-        initials-color: igx-color($palette, 'grays', 800),
-        image-background: transparent
-    );
-
-    @if $preset {
-        $default-theme: map-get($preset, map-get($default-theme, 'name'));
-    }
+    $theme: apply-palette(map-get($schema, 'igx-avatar'), $palette);
 
     @if not($icon-color) and $icon-background {
         $icon-color: text-contrast($icon-background);
@@ -51,13 +40,13 @@
         $initials-color: text-contrast($initials-background);
     }
 
-    @return extend($default-theme, (
+    @return extend($theme, (
         palette: $palette,
         icon-background: $icon-background,
         icon-color: $icon-color,
         initials-background: $initials-background,
         initials-color: $initials-color,
-        image-background: $image-background,
+        image-background: $image-background
     ));
 }
 

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -32,7 +32,7 @@
 ///   @include igx-css-vars($my-badge-theme);
 @function igx-badge-theme(
     $palette: $default-palette,
-    $preset: null,
+    $schema: $light-schema,
 
     $icon-color: null,
     $text-color: null,
@@ -42,19 +42,10 @@
     $disable-shadow: true,
     $disable-border: true
 ) {
-    $default-theme: (
-        name: 'igx-badge',
-        icon-color: #fff,
-        text-color: #fff,
-        border-color: #fff,
-        background-color: igx-color($palette, 'primary', 500),
-        badge-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1)),
-        border-width: if($disable-border == true, 0, rem(1px)),
-    );
-
-    @if $preset {
-        $default-theme: map-get($preset, map-get($default-theme, 'name'));
-    }
+    $badge-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1));
+    $border-width: if($disable-border == true, 0, rem(1px));
+
+    $theme: apply-palette(map-get($schema, 'igx-badge'), $palette);
 
     @if not($icon-color) and $background-color {
         $icon-color: text-contrast($background-color);
@@ -64,12 +55,14 @@
         $text-color: text-contrast($background-color);
     }
 
-    @return extend($default-theme, (
+    @return extend($theme, (
         palette: $palette,
         icon-color: $icon-color,
         text-color: $text-color,
         border-color: $border-color,
-        background-color: $background-color
+        background-color: $background-color,
+        badge-shadow: $badge-shadow,
+        border-width: $border-width
     ));
 }