igniteui-theming 1.4.2 → 1.4.3-beta.2

package/sass/bem/_index.scss

@@ -153,7 +153,7 @@ $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val,
     // Return early if possible
     $mods: $m or $mod or $mods;
 
-    @if not ($elem or $mods) {
+    @if not($elem or $mods) {
         @return $block;
     }
 
@@ -176,7 +176,7 @@ $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val,
     }
 
     @if meta.type-of($mods) != 'list' {
-        $mods: ($mods, );
+        $mods: ($mods);
     }
 
     $bemcls: '';
@@ -352,7 +352,13 @@ $bem--sep-mod-val: if(meta.variable-exists(bem--sep-mod-val), $bem--sep-mod-val,
             @error 'Nesting a Modifier inside a pseudo-selector is not supported: #{$this} #{$mod}';
         }
 
-        $mod-classes: list.append($mod-classes, #{bem-selector($block: $this, $m: $mod)});
+        $mod-classes: list.append(
+            $mod-classes,
+            #{bem-selector(
+                    $block: $this,
+                    $m: $mod,
+                )}
+        );
     }
 
     @at-root {

package/sass/color/_charts.scss

@@ -26,7 +26,7 @@ $brushes-regular: (
     rgb(247 210 98),
     rgb(168 168 183),
     rgb(224 81 169),
-    rgb(248 161 95),
+    rgb(248 161 95)
 );
 
 /// A list of color values to be used as color-blind brushes in charts.

package/sass/color/_functions.scss

@@ -55,7 +55,7 @@ $_enhanced-accessibility: false;
     $success: #4eb862,
     $warn: #faa419,
     $error: #ff134a,
-    $variant: null,
+    $variant: null
 ) {
     $color-shades: types.$IColorShades;
     $gray-shades: types.$IGrayShades;
@@ -95,12 +95,7 @@ $_enhanced-accessibility: false;
 /// @returns {Map} - A map consisting of hsla color shades and their respective contrast colors.
 /// @example scss
 ///   $special-color-shades: shades('accent', #09f, (50,100,200,300,400,500,600,700,800,900))
-@function shades(
-    $name,
-    $color,
-    $shades,
-    $surface: null
-) {
+@function shades($name, $color, $shades, $surface: null) {
     $result: ();
 
     @each $variant in $shades {
@@ -128,44 +123,31 @@ $_enhanced-accessibility: false;
 /// @require {function} luminance
 /// @require {function} to-fixed
 /// @returns {Map} - A map containing a list of HSL values and a raw color value.
-@function shade(
-    $name,
-    $color,
-    $shade,
-    $surface: null,
-) {
+@function shade($name, $color, $shade, $surface: null) {
     $h: var(--ig-#{$name}-h);
     $s: var(--ig-#{$name}-s);
     $l: var(--ig-#{$name}-l);
 
     @if #{$name} == 'gray' {
         $lum: luminance($surface);
-        $color: if($color, $color, if($lum > .5, #000, #fff));
+        $color: if($color, $color, if($lum > 0.5, #000, #fff));
         $lmap: map.get(multipliers.$grayscale, 'l');
         $len: list.length($lmap);
         $i: list.index(map.keys($lmap), $shade);
-        $l: list.nth(map.values($lmap), if($lum > .5, $len - $i + 1, $i));
-
-        @return (
-            raw: hsl(
-                to-fixed(color.hue($color)),
-                to-fixed(color.saturation($color)),
-                $l
-            ),
-            hsl: #{$h, $s, $l}
-        );
+        $l: list.nth(map.values($lmap), if($lum > 0.5, $len - $i + 1, $i));
+
+        @return (raw: hsl(to-fixed(color.hue($color)), to-fixed(color.saturation($color)), $l), hsl: #{$h, $s, $l});
     } @else {
         $sx: map.get(multipliers.$color, 's', $shade);
         $lx: map.get(multipliers.$color, 'l', $shade);
-
-        @return (
-            raw: hsl(
-                to-fixed(color.hue($color)),
-                to-fixed(color.saturation($color) * $sx),
-                to-fixed(color.lightness($color) * $lx)
-            ),
-            hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})}
+        $raw: hsl(
+            to-fixed(color.hue($color)),
+            to-fixed(color.saturation($color) * $sx),
+            to-fixed(color.lightness($color) * $lx)
         );
+        $hsl: #{$h, calc(#{$s} * #{$sx}), calc(#{$l} * #{$lx})};
+
+        @return (raw: $raw, hsl: $hsl);
     }
 }
 
@@ -193,11 +175,7 @@ $_enhanced-accessibility: false;
     $c: map.get($palette or types.$IPalette, #{$color});
     $a: var(--ig-#{$color}-a);
     $s: #{var(--ig-#{$color}-#{$variant})};
-    $contrast: if(
-        meta.type-of($variant) == string,
-        string.index($variant, 'contrast'),
-        false
-    );
+    $contrast: if(meta.type-of($variant) == string, string.index($variant, 'contrast'), false);
     $meta: if($palette, map.get($palette, '_meta'), null);
 
     @if not($c) {
@@ -205,11 +183,7 @@ $_enhanced-accessibility: false;
     }
 
     @if not($palette) or not($meta) {
-        @return if(
-            $contrast,
-            $s,
-            hsla($s, if($opacity, $opacity, $a)),
-        );
+        @return if($contrast, $s, hsla($s, if($opacity, $opacity, $a)));
     }
 
     @return rgba(map.get($c, $variant), $alpha: if($opacity, $opacity, 1));
@@ -248,11 +222,7 @@ $_enhanced-accessibility: false;
 ///      background: #09f
 ///      color: text-contrast(#09f)
 ///    }
-@function text-contrast(
-    $background,
-    $foreground: white,
-    $contrast: 'AAA'
-) {
+@function text-contrast($background, $foreground: white, $contrast: 'AAA') {
     @if meta.type-of($foreground) != 'list' and meta.type-of($background) != 'color' {
         @return $background;
     }
@@ -261,7 +231,7 @@ $_enhanced-accessibility: false;
         (
             'a': 3,
             'aa': 4.5,
-            'aaa': 7
+            'aaa': 7,
         ),
         string.to-lower-case($contrast)
     );
@@ -341,8 +311,8 @@ $_enhanced-accessibility: false;
 ///   contrast(#09f, #000);
 /// @returns {Number} - The contrast ratio between the background and foreground colors.
 @function contrast($background, $foreground) {
-    $backLum: luminance($background) + .05;
-    $foreLum: luminance($foreground) + .05;
+    $backLum: luminance($background) + 0.05;
+    $foreLum: luminance($foreground) + 0.05;
 
     @return to-fixed(math.div(math.max($backLum, $foreLum), math.min($backLum, $foreLum)));
 }
@@ -361,7 +331,7 @@ $_enhanced-accessibility: false;
         $g: math.div(color.green($color), 255);
         $b: math.div(color.blue($color), 255);
 
-        @return .2126 * _lcv($r) + .7152 * _lcv($g) + .0722 * _lcv($b);
+        @return 0.2126 * _lcv($r) + 0.7152 * _lcv($g) + 0.0722 * _lcv($b);
     }
 
     @return $color;
@@ -374,11 +344,7 @@ $_enhanced-accessibility: false;
 /// @returns {Number} - The calculated linear channel value
 @function _lcv($value) {
     /* stylelint-disable number-max-precision */
-    @return if(
-        $value < .03928,
-        math.div($value, 12.92),
-        math.pow(math.div($value + .055, 1.055), 2.4)
-    );
+    @return if($value < 0.03928, math.div($value, 12.92), math.pow(math.div($value + 0.055, 1.055), 2.4));
 }
 
 /// Returns a list of colors to be used as chart brushes.

package/sass/color/_multipliers.scss

@@ -1,10 +1,10 @@
 $color: (
     s: (
         50: 1.23,
-        100: .8,
-        200: .64,
-        300: .73,
-        400: .875,
+        100: 0.8,
+        200: 0.64,
+        300: 0.73,
+        400: 0.875,
         500: 1,
         600: 1.26,
         700: 1.52,
@@ -13,7 +13,7 @@ $color: (
         'A100': 1.23,
         'A200': 1.22,
         'A400': 1.23,
-        'A700': 1.23
+        'A700': 1.23,
     ),
     l: (
         50: 1.78,
@@ -22,15 +22,15 @@ $color: (
         300: 1.19,
         400: 1.08,
         500: 1,
-        600: .89,
-        700: .81,
-        800: .73,
-        900: .64,
+        600: 0.89,
+        700: 0.81,
+        800: 0.73,
+        900: 0.64,
         'A100': 1.34,
         'A200': 1.16,
-        'A400': .91,
-        'A700': .65
-    )
+        'A400': 0.91,
+        'A700': 0.65,
+    ),
 );
 $grayscale: (
     l: (
@@ -43,6 +43,6 @@ $grayscale: (
         600: 88%,
         700: 93%,
         800: 96%,
-        900: 98%
-    )
+        900: 98%,
+    ),
 );

package/sass/color/_types.scss

@@ -40,4 +40,9 @@ $IPaletteMeta: (
 /// A map with all palette colors and palette meta
 /// @type Map
 /// @access private
-$IPalette: map.merge($IPaletteColors, (_meta: $IPaletteMeta));
+$IPalette: map.merge(
+    $IPaletteColors,
+    (
+        _meta: $IPaletteMeta,
+    )
+);

package/sass/color/presets/dark/_bootstrap.scss

@@ -29,5 +29,5 @@ $palette: palette(
     $success: #198754,
     $warn: #ffc107,
     $error: #dc3545,
-    $variant: 'bootstrap'
+    $variant: 'bootstrap',
 );

package/sass/color/presets/dark/_fluent.scss

@@ -28,7 +28,7 @@ $palette: palette(
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
-    $variant: 'fluent'
+    $variant: 'fluent',
 );
 
 /// Generates the dark fluent word palette.
@@ -50,7 +50,7 @@ $word-palette: palette(
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
-    $variant: 'fluent'
+    $variant: 'fluent',
 );
 
 /// Generates the dark fluent excel palette.
@@ -72,5 +72,5 @@ $excel-palette: palette(
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
-    $variant: 'fluent'
+    $variant: 'fluent',
 );

package/sass/color/presets/dark/_indigo.scss

@@ -29,5 +29,5 @@ $palette: palette(
     $success: #689f38,
     $warn: #ff9800,
     $error: #cf1a2b,
-    $variant: 'indigo'
+    $variant: 'indigo',
 );

package/sass/color/presets/dark/_material.scss

@@ -28,5 +28,5 @@ $palette: palette(
     $success: #4eb862,
     $warn: #faa419,
     $error: #ff134a,
-    $variant: 'material'
+    $variant: 'material',
 );

package/sass/color/presets/light/_bootstrap.scss

@@ -29,5 +29,5 @@ $palette: palette(
     $success: #198754,
     $warn: #ffc107,
     $error: #dc3545,
-    $variant: 'bootstrap'
+    $variant: 'bootstrap',
 );

package/sass/color/presets/light/_extra.scss

@@ -27,7 +27,7 @@ $green-palette: palette(
     $info: #1377d5,
     $success: #4eb862,
     $warn: #fbb13c,
-    $error: #ff134a
+    $error: #ff134a,
 );
 
 /// Generates the light purple palette.
@@ -48,5 +48,5 @@ $purple-palette: palette(
     $info: #1377d5,
     $success: #4eb862,
     $warn: #fbb13c,
-    $error: #ff134a
+    $error: #ff134a,
 );

package/sass/color/presets/light/_fluent.scss

@@ -28,7 +28,7 @@ $palette: palette(
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
-    $variant: 'fluent'
+    $variant: 'fluent',
 );
 
 /// Generates the light fluent word palette.
@@ -50,7 +50,7 @@ $word-palette: palette(
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
-    $variant: 'fluent'
+    $variant: 'fluent',
 );
 
 /// Generates the dark green palette.
@@ -72,5 +72,5 @@ $excel-palette: palette(
     $success: #107c10,
     $warn: #797673,
     $error: #a80000,
-    $variant: 'fluent'
+    $variant: 'fluent',
 );

package/sass/color/presets/light/_indigo.scss

@@ -29,5 +29,5 @@ $palette: palette(
     $success: #689f38,
     $warn: #ff9800,
     $error: #cf1a2b,
-    $variant: 'indigo'
+    $variant: 'indigo',
 );

package/sass/color/presets/light/_material.scss

@@ -28,5 +28,5 @@ $palette: palette(
     $success: #4eb862,
     $warn: #faa419,
     $error: #ff134a,
-    $variant: 'material'
+    $variant: 'material',
 );

package/sass/elevations/presets/_index.scss

@@ -13,8 +13,4 @@ $color-2: rgba(0 0 0 / 12%) !default;
 /// @access private
 $color-3: rgba(0 0 0 / 8%) !default;
 
-@forward './material' as material-* with(
-    $color-1: $color-1,
-    $color-2: $color-2,
-    $color-3: $color-3
-);
+@forward './material' as material-* with($color-1: $color-1, $color-2: $color-2, $color-3: $color-3);

package/sass/elevations/presets/_material.scss

@@ -98,7 +98,7 @@ $elevations: (
     21: $_21,
     22: $_22,
     23: $_23,
-    24: $_24
+    24: $_24,
 );
 
 // @end-sass-export-section

package/sass/themes/_functions.scss

@@ -38,22 +38,12 @@
 
         // Special case for chart elevation literals
         @if string.index($key, 'elevation') {
-            $result: map.merge(
-                $result,
-                (
-                    #{$key}: #{elevation($value)}
-                )
-            );
+            $result: map.merge($result, (#{$key}: #{elevation($value)}));
         }
 
         // Special case for chart brushes
         @if $value == 'series' {
-            $result: map.merge(
-                $result,
-                (
-                    #{$key}: #{color.chart-brushes()}
-                )
-            );
+            $result: map.merge($result, (#{$key}: #{color.chart-brushes()}));
         }
     }
 

package/sass/themes/_index.scss

@@ -1,3 +1,4 @@
 @forward 'functions';
 @forward 'mixins';
 @forward 'charts';
+@forward 'schemas';

package/sass/themes/_mixins.scss

@@ -148,10 +148,9 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
 ///   }
 @mixin sizable() {
     --is-large: clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-large, 3), 1);
-    --is-medium:
-        min(
-            clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
-            clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
-        );
+    --is-medium: min(
+        clamp(0, (var(--component-size, 1) + 1) - var(--ig-size-medium, 2), 1),
+        clamp(0, var(--ig-size-large, 3) - var(--component-size, 1), 1)
+    );
     --is-small: clamp(0, var(--ig-size-medium) - var(--component-size, 1), 1);
 }

package/sass/themes/charts/_category-chart-theme.scss

@@ -140,7 +140,7 @@
         (
             'angular': 'igx-category-chart',
             'webc': 'igc-category-chart',
-            'blazor': 'igb-category-chart'
+            'blazor': 'igb-category-chart',
         ),
         $target
     );
@@ -261,7 +261,7 @@
             y-axis-title-text-style: $y-axis-title-text-style,
             y-axis-tick-length: $y-axis-tick-length,
             y-axis-tick-stroke: $y-axis-tick-stroke,
-            y-axis-tick-stroke-thickness: $y-axis-tick-stroke-thickness
+            y-axis-tick-stroke-thickness: $y-axis-tick-stroke-thickness,
         )
     );
 }
@@ -280,20 +280,24 @@
 /// 'y-axis-title-text-style': 'body-2',
 /// )] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
-@mixin category-chart-typography($type-scale, $categories: (
-    'title': 'h6',
-    'subtitle': 'subtitle-1',
-    'x-axis-label-text-style': 'body-2',
-    'x-axis-title-text-style': 'body-2',
-    'y-axis-label-text-style': 'body-2',
-    'y-axis-title-text-style': 'body-2',
-), $target: 'angular') {
+@mixin category-chart-typography(
+    $type-scale,
+    $categories: (
+        'title': 'h6',
+        'subtitle': 'subtitle-1',
+        'x-axis-label-text-style': 'body-2',
+        'x-axis-title-text-style': 'body-2',
+        'y-axis-label-text-style': 'body-2',
+        'y-axis-title-text-style': 'body-2'
+    ),
+    $target: 'angular'
+) {
     $name: 'category-chart';
     $selector: map.get(
         (
             'angular': 'igx-category-chart',
             'webc': 'igc-category-chart',
-            'blazor': 'igb-category-chart'
+            'blazor': 'igb-category-chart',
         ),
         $target
     );

package/sass/themes/charts/_data-chart-theme.scss

@@ -49,14 +49,14 @@
     $marker-outlines: null,
     $plot-area-background: null,
     $title-horizontal-alignment: null,
-    $subtitle-horizontal-alignment: null,
+    $subtitle-horizontal-alignment: null
 ) {
     $name: 'data-chart';
     $selector: map.get(
         (
             'angular': 'igx-data-chart',
             'webc': 'igc-data-chart',
-            'blazor': 'igb-data-chart'
+            'blazor': 'igb-data-chart',
         ),
         $target
     );
@@ -119,10 +119,7 @@
 /// @param {Map} $type-scale - A typographic scale as produced by type-scale.
 /// @param {Map} $categories [(title: 'h6', subtitle: 'subtitle-1')] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
-@mixin data-chart-typography($type-scale, $categories: (
-    title: 'h6',
-    subtitle: 'subtitle-1',
-), $target: 'angular') {
+@mixin data-chart-typography($type-scale, $categories: (title: 'h6', subtitle: 'subtitle-1'), $target: 'angular') {
     $name: 'data-chart';
     $title: map.get($categories, 'title');
     $subtitle: map.get($categories, 'subtitle');
@@ -132,7 +129,7 @@
         (
             'angular': 'igx-data-chart',
             'webc': 'igc-data-chart',
-            'blazor': 'igb-data-chart'
+            'blazor': 'igb-data-chart',
         ),
         $target
     );

package/sass/themes/charts/_doughnut-chart-theme.scss

@@ -42,14 +42,14 @@
     $selected-slice-fill: null,
     $selected-slice-opacity: null,
     $selected-slice-stroke: null,
-    $selected-slice-stroke-thickness: null,
+    $selected-slice-stroke-thickness: null
 ) {
     $name: 'doughnut-chart';
     $selector: map.get(
         (
             'angular': 'igx-doughnut-chart',
             'webc': 'igc-doughnut-chart',
-            'blazor': 'igb-doughnut-chart'
+            'blazor': 'igb-doughnut-chart',
         ),
         $target
     );

package/sass/themes/charts/_financial-chart-theme.scss

@@ -145,7 +145,7 @@
         (
             'angular': 'igx-financial-chart',
             'webc': 'igc-financial-chart',
-            'blazor': 'igb-financial-chart'
+            'blazor': 'igb-financial-chart',
         ),
         $target
     );
@@ -267,7 +267,7 @@
             y-axis-title-margin: $y-axis-title-margin,
             y-axis-title-text-color: $y-axis-title-text-color,
             zoom-slider-x-axis-major-stroke: $zoom-slider-x-axis-major-stroke,
-            zoom-slider-x-axis-major-stroke-thicknes: $zoom-slider-x-axis-major-stroke-thickness
+            zoom-slider-x-axis-major-stroke-thicknes: $zoom-slider-x-axis-major-stroke-thickness,
         )
     );
 }
@@ -286,20 +286,24 @@
 /// 'y-axis-title-text-style': 'body-2',
 /// )] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
-@mixin financial-chart-typography($type-scale, $categories: (
-    'title': 'h6',
-    'subtitle': 'subtitle-1',
-    'x-axis-label-text-style': 'body-2',
-    'x-axis-title-text-style': 'body-2',
-    'y-axis-label-text-style': 'body-2',
-    'y-axis-title-text-style': 'body-2',
-), $target: 'angular') {
+@mixin financial-chart-typography(
+    $type-scale,
+    $categories: (
+        'title': 'h6',
+        'subtitle': 'subtitle-1',
+        'x-axis-label-text-style': 'body-2',
+        'x-axis-title-text-style': 'body-2',
+        'y-axis-label-text-style': 'body-2',
+        'y-axis-title-text-style': 'body-2'
+    ),
+    $target: 'angular'
+) {
     $name: 'financial-chart';
     $selector: map.get(
         (
             'angular': 'igx-financial-chart',
             'webc': 'igc-financial-chart',
-            'blazor': 'igb-financial-chart'
+            'blazor': 'igb-financial-chart',
         ),
         $target
     );