igniteui-theming 1.4.2 → 1.4.3-beta.2

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

@@ -41,14 +41,14 @@
     $outer-label-text-color: null,
     $outer-label-visibility: null,
     $outline-thickness: null,
-    $text-color: null,
+    $text-color: null
 ) {
     $name: 'funnel-chart';
     $selector: map.get(
         (
             'angular': 'igx-funnel-chart',
             'webc': 'igc-funnel-chart',
-            'blazor': 'igb-funnel-chart'
+            'blazor': 'igb-funnel-chart',
         ),
         $target
     );
@@ -62,29 +62,33 @@
 
     $theme: digest-schema($chart-schema);
 
-    @return extend($theme, (
-        name: $name,
-        selector: $selector,
-        brushes: $brushes,
-        outlines: $outlines,
-        outer-label-alignment: $outer-label-alignment,
-        outer-label-text-color: $outer-label-text-color,
-        outer-label-visibility: $outer-label-visibility,
-        outline-thickness: $outline-thickness,
-        text-color: $text-color,
-    ));
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            brushes: $brushes,
+            outlines: $outlines,
+            outer-label-alignment: $outer-label-alignment,
+            outer-label-text-color: $outer-label-text-color,
+            outer-label-visibility: $outer-label-visibility,
+            outline-thickness: $outline-thickness,
+            text-color: $text-color,
+        )
+    );
 }
 
-@mixin funnel-chart-typography($type-scale, $categories: (
-    outer-label-text-style: 'h1',
-    text-style: 'subtitle-1',
-), $target: 'angular') {
+@mixin funnel-chart-typography(
+    $type-scale,
+    $categories: (outer-label-text-style: 'h1', text-style: 'subtitle-1'),
+    $target: 'angular'
+) {
     $name: 'funnel-chart';
     $selector: map.get(
         (
             'angular': 'igx-funnel-chart',
             'webc': 'igc-funnel-chart',
-            'blazor': 'igb-funnel-chart'
+            'blazor': 'igb-funnel-chart',
         ),
         $target
     );

package/sass/themes/charts/_gauge-theme.scss

@@ -43,17 +43,13 @@
 ///   $custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($custom-gauge-theme);
-@function linear-gauge-theme(
-    $schema: $light-material-schema,
-    $target: 'angular',
-    $rest...
-) {
+@function linear-gauge-theme($schema: $light-material-schema, $target: 'angular', $rest...) {
     $name: 'linear-gauge';
     $selector: map.get(
         (
             'angular': 'igx-linear-gauge',
             'webc': 'igc-linear-gauge',
-            'blazor': 'igb-linear-gauge'
+            'blazor': 'igb-linear-gauge',
         ),
         $target
     );
@@ -73,7 +69,7 @@
         (
             name: $name,
             selector: $selector,
-        ),
+        )
     );
 }
 
@@ -103,17 +99,13 @@
 ///   $custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($custom-gauge-theme);
-@function radial-gauge-theme(
-    $schema: $light-material-schema,
-    $target: 'angular',
-    $rest...
-) {
+@function radial-gauge-theme($schema: $light-material-schema, $target: 'angular', $rest...) {
     $name: 'radial-gauge';
     $selector: map.get(
         (
             'angular': 'igx-radial-gauge',
             'webc': 'igc-radial-gauge',
-            'blazor': 'igb-radial-gauge'
+            'blazor': 'igb-radial-gauge',
         ),
         $target
     );
@@ -133,7 +125,7 @@
         (
             name: $name,
             selector: $selector,
-        ),
+        )
     );
 }
 
@@ -146,7 +138,7 @@
         (
             'angular': 'igx-linear-gauge',
             'webc': 'igc-linear-gauge',
-            'blazor': 'igb-linear-gauge'
+            'blazor': 'igb-linear-gauge',
         ),
         $target
     );
@@ -154,7 +146,7 @@
         (
             'angular': 'igx-radial-gauge',
             'webc': 'igc-radial-gauge',
-            'blazor': 'igb-radial-gauge'
+            'blazor': 'igb-radial-gauge',
         ),
         $target
     );

package/sass/themes/charts/_geo-map-theme.scss

@@ -23,17 +23,13 @@
 ///   $my-map-theme: geo-map-theme($width: 550px);
 ///   // Pass the theme to the css-vars mixin
 ///   @include css-vars($my-map-theme);
-@function geo-map-theme(
-    $schema: $light-material-schema,
-    $target: 'angular',
-    $plot-area-background: null
-) {
+@function geo-map-theme($schema: $light-material-schema, $target: 'angular', $plot-area-background: null) {
     $name: 'geo-map';
     $selector: map.get(
         (
             'angular': 'igx-geographic-map',
             'webc': 'igc-geographic-map',
-            'blazor': 'igb-geographic-map'
+            'blazor': 'igb-geographic-map',
         ),
         $target
     );
@@ -47,9 +43,12 @@
 
     $theme: digest-schema($chart-schema);
 
-    @return extend( $theme, (
-        name: $name,
-        selector: $selector,
-        plot-area-background: $plot-area-background,
-    ));
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            plot-area-background: $plot-area-background,
+        )
+    );
 }

package/sass/themes/charts/_graph-theme.scss

@@ -65,14 +65,14 @@
     $tick-stroke-thickness: null,
     $value-brush: null,
     $value-outline: null,
-    $value-stroke-thickness: null,
+    $value-stroke-thickness: null
 ) {
     $name: 'bullet-graph';
     $selector: map.get(
         (
             'angular': 'igx-bullet-graph',
             'webc': 'igc-bullet-graph',
-            'blazor': 'igb-bullet-graph'
+            'blazor': 'igb-bullet-graph',
         ),
         $target
     );
@@ -124,7 +124,7 @@
         (
             'angular': 'igx-bullet-graph',
             'webc': 'igc-bullet-graph',
-            'blazor': 'igb-bullet-graph'
+            'blazor': 'igb-bullet-graph',
         ),
         $target
     );

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

@@ -45,14 +45,14 @@
     $leader-line-margin: null,
     $leader-line-type: null,
     $leader-line-visibility: null,
-    $radius-factor: null,
+    $radius-factor: null
 ) {
     $name: 'pie-chart';
     $selector: map.get(
         (
             'angular': 'igx-pie-chart',
             'webc': 'igc-pie-chart',
-            'blazor': 'igb-pie-chart'
+            'blazor': 'igb-pie-chart',
         ),
         $target
     );
@@ -66,20 +66,23 @@
 
     $theme: digest-schema($chart-schema);
 
-    @return extend( $theme, (
-        name: $name,
-        selector: $selector,
-        brushes: $brushes,
-        outlines: $outlines,
-        label-extent: $label-extent,
-        label-inner-color: $label-inner-color,
-        label-outer-color: $label-outer-color,
-        labels-position: $labels-position,
-        leader-line-margin: $leader-line-margin,
-        leader-line-type: $leader-line-type,
-        leader-line-visibility: $leader-line-visibility,
-        radius-factor: $radius-factor,
-    ));
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            brushes: $brushes,
+            outlines: $outlines,
+            label-extent: $label-extent,
+            label-inner-color: $label-inner-color,
+            label-outer-color: $label-outer-color,
+            labels-position: $labels-position,
+            leader-line-margin: $leader-line-margin,
+            leader-line-type: $leader-line-type,
+            leader-line-visibility: $leader-line-visibility,
+            radius-factor: $radius-factor,
+        )
+    );
 }
 
 /// Adds typography styles for the pie-chart component.
@@ -89,15 +92,13 @@
 /// @param {Map} $type-scale - A typographic scale as produced by type-scale.
 /// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
-@mixin pie-chart-typography($type-scale, $categories: (
-    text: 'body-2',
-), $target: 'angular') {
+@mixin pie-chart-typography($type-scale, $categories: (text: 'body-2'), $target: 'angular') {
     $name: 'pie-chart';
     $selector: map.get(
         (
             'angular': 'igx-pie-chart',
             'webc': 'igc-pie-chart',
-            'blazor': 'igb-pie-chart'
+            'blazor': 'igb-pie-chart',
         ),
         $target
     );

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

@@ -103,14 +103,14 @@
     $y-axis-stroke-thickness: null,
     $y-axis-title-alignment: null,
     $y-axis-title-color: null,
-    $y-axis-title-margin: null,
+    $y-axis-title-margin: null
 ) {
     $name: 'shape-chart';
     $selector: map.get(
         (
             'angular': 'igx-shape-chart',
             'webc': 'igc-shape-chart',
-            'blazor': 'igb-shape-chart'
+            'blazor': 'igb-shape-chart',
         ),
         $target
     );
@@ -232,20 +232,24 @@
 /// 'y-axis-title-text-style': 'h3',
 /// )] - The categories from the typographic scale used for type styles.
 /// @requires {mixin} type-style
-@mixin shape-chart-typography($type-scale, $categories: (
-    'title': 'h6',
-    'subtitle': 'subtitle-1',
-    'x-axis-label-text-style': 'h4',
-    'y-axis-label-text-style': 'h4',
-    'x-axis-title-text-style': 'h3',
-    'y-axis-title-text-style': 'h3',
-), $target: 'angular') {
+@mixin shape-chart-typography(
+    $type-scale,
+    $categories: (
+        'title': 'h6',
+        'subtitle': 'subtitle-1',
+        'x-axis-label-text-style': 'h4',
+        'y-axis-label-text-style': 'h4',
+        'x-axis-title-text-style': 'h3',
+        'y-axis-title-text-style': 'h3'
+    ),
+    $target: 'angular'
+) {
     $name: 'shape-chart';
     $selector: map.get(
         (
             'angular': 'igx-shape-chart',
             'webc': 'igc-shape-chart',
-            'blazor': 'igb-shape-chart'
+            'blazor': 'igb-shape-chart',
         ),
         $target
     );

package/sass/themes/charts/_sparkline-theme.scss

@@ -65,14 +65,14 @@
     $trend-line-thickness: null,
     $horizontal-axis-brush: null,
     $vertical-axis-brush: null,
-    $normal-range-fill: null,
+    $normal-range-fill: null
 ) {
     $name: 'sparkline';
     $selector: map.get(
         (
             'angular': 'igx-sparkline',
             'webc': 'igc-sparkline',
-            'blazor': 'igb-sparkline'
+            'blazor': 'igb-sparkline',
         ),
         $target
     );

package/sass/themes/schemas/_index.scss

@@ -1,35 +1,12 @@
 @use 'sass:map';
-@use './charts/index' as charts;
+@use 'charts';
+@use 'components';
 
-$light-material-schema: map.merge(
-    charts.$light-material-schema,
-    ()
-);
-$light-bootstrap-schema: map.merge(
-    charts.$light-bootstrap-schema,
-    ()
-);
-$light-fluent-schema: map.merge(
-    charts.$light-fluent-schema,
-    ()
-);
-$light-indigo-schema: map.merge(
-    charts.$light-indigo-schema,
-    ()
-);
-$dark-material-schema: map.merge(
-    charts.$dark-material-schema,
-    ()
-);
-$dark-bootstrap-schema: map.merge(
-    charts.$dark-bootstrap-schema,
-    ()
-);
-$dark-fluent-schema: map.merge(
-    charts.$dark-fluent-schema,
-    ()
-);
-$dark-indigo-schema: map.merge(
-    charts.$dark-indigo-schema,
-    ()
-);
+$light-material-schema: map.merge(charts.$light-material-schema, components.$light-material-schema);
+$light-bootstrap-schema: map.merge(charts.$light-bootstrap-schema, components.$light-bootstrap-schema);
+$light-fluent-schema: map.merge(charts.$light-fluent-schema, components.$light-fluent-schema);
+$light-indigo-schema: map.merge(charts.$light-indigo-schema, components.$light-indigo-schema);
+$dark-material-schema: map.merge(charts.$dark-material-schema, components.$dark-material-schema);
+$dark-bootstrap-schema: map.merge(charts.$dark-bootstrap-schema, components.$dark-bootstrap-schema);
+$dark-fluent-schema: map.merge(charts.$dark-fluent-schema, components.$dark-fluent-schema);
+$dark-indigo-schema: map.merge(charts.$dark-indigo-schema, components.$dark-indigo-schema);

package/sass/themes/schemas/charts/light/_category-chart.scss

@@ -64,7 +64,9 @@
 /// @property {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
 $material-category-chart: (
     'margin': (
-        expand-shorthand: (null)
+        expand-shorthand: (
+            null,
+        ),
     ),
     'brushes': series,
     'marker-brushes': series,
@@ -74,31 +76,46 @@ $material-category-chart: (
     'negative-outlines': hsl(347deg 82% 64%),
     'title-alignment': null,
     'title-margin': (
-        expand-shorthand: (null),
-        map-keys-prefix: 'title'
+        expand-shorthand: (
+            null,
+        ),
+        map-keys-prefix: 'title',
     ),
     'title-text-color': (
-        color: ('gray', 900),
+        color: (
+            'gray',
+            900,
+        ),
     ),
     'title-text-style': null,
     'subtitle-margin': (
-        expand-shorthand: (null),
-        map-keys-prefix: 'subtitle'
+        expand-shorthand: (
+            null,
+        ),
+        map-keys-prefix: 'subtitle',
     ),
     'subtitle-alignment': null,
     'subtitle-text-color': (
-        color: ('gray', 700),
+        color: (
+            'gray',
+            700,
+        ),
     ),
     'subtitle-text-style': null,
     'thickness': null,
     'trend-line-brushes': series,
     'trend-line-thickness': null,
     'x-axis-label-margin': (
-        expand-shorthand: (null),
-        map-keys-prefix: 'x-axis-label'
+        expand-shorthand: (
+            null,
+        ),
+        map-keys-prefix: 'x-axis-label',
     ),
     'x-axis-label-text-color': (
-        color: ('gray', 700),
+        color: (
+            'gray',
+            700,
+        ),
     ),
     'x-axis-label-text-style': null,
     'x-axis-label-vertical-alignment': null,
@@ -108,34 +125,53 @@ $material-category-chart: (
     'x-axis-minor-stroke-thickness': null,
     'x-axis-strip': null,
     'x-axis-stroke': (
-        color: ('gray', 500),
+        color: (
+            'gray',
+            500,
+        ),
     ),
     'x-axis-stroke-thickness': null,
     'x-axis-tick-length': null,
     'x-axis-tick-stroke': (
-        color: ('gray', 500),
+        color: (
+            'gray',
+            500,
+        ),
     ),
     'x-axis-tick-stroke-thickness': null,
     'x-axis-title-alignment': null,
     'x-axis-title-margin': (
-        expand-shorthand: (null),
-        map-keys-prefix: 'x-axis-title'
+        expand-shorthand: (
+            null,
+        ),
+        map-keys-prefix: 'x-axis-title',
     ),
     'x-axis-title-text-color': (
-        color: ('gray', 900),
+        color: (
+            'gray',
+            900,
+        ),
     ),
     'x-axis-title-text-style': null,
     'y-axis-label-margin': (
-        expand-shorthand: (null),
-        map-keys-prefix: 'y-axis-label'
+        expand-shorthand: (
+            null,
+        ),
+        map-keys-prefix: 'y-axis-label',
     ),
     'y-axis-label-text-color': (
-        color: ('gray', 700),
+        color: (
+            'gray',
+            700,
+        ),
     ),
     'y-axis-label-text-style': null,
     'y-axis-label-vertical-alignment': null,
     'y-axis-major-stroke': (
-        color: ('gray', 300),
+        color: (
+            'gray',
+            300,
+        ),
     ),
     'y-axis-major-stroke-thickness': null,
     'y-axis-minor-stroke': null,
@@ -145,18 +181,26 @@ $material-category-chart: (
     'y-axis-stroke-thickness': null,
     'y-axis-title-alignment': null,
     'y-axis-title-margin': (
-        expand-shorthand: (null),
-        map-keys-prefix: 'y-axis-title'
+        expand-shorthand: (
+            null,
+        ),
+        map-keys-prefix: 'y-axis-title',
     ),
     'y-axis-title-text-color': (
-        color: ('gray', 900),
+        color: (
+            'gray',
+            900,
+        ),
     ),
     'y-axis-title-text-style': null,
     'y-axis-tick-length': null,
     'y-axis-tick-stroke': (
-        color: ('gray', 500),
+        color: (
+            'gray',
+            500,
+        ),
     ),
-    'y-axis-tick-stroke-thickness': null
+    'y-axis-tick-stroke-thickness': null,
 );
 
 /// Generates a fluent category-chart schema.

package/sass/themes/schemas/charts/light/_data-chart.scss

@@ -23,11 +23,17 @@
 $material-data-chart: (
     'margin': null,
     'title-text-color': (
-        color: ('gray', 900)
+        color: (
+            'gray',
+            900,
+        ),
     ),
     'title-margin': null,
     'subtitle-text-color': (
-        color: ('gray', 600)
+        color: (
+            'gray',
+            600,
+        ),
     ),
     'subtitle-margin': null,
     'brushes': series,
@@ -35,7 +41,10 @@ $material-data-chart: (
     'outlines': series,
     'marker-outlines': series,
     'plot-area-background': (
-        color: ('surface', 500)
+        color: (
+            'surface',
+            500,
+        ),
     ),
     'title-horizontal-alignment': null,
     'subtitle-horizontal-alignment': null,

package/sass/themes/schemas/charts/light/_financial-chart.scss

@@ -121,7 +121,7 @@ $material-financial-chart: (
     'y-axis-title-margin': null,
     'y-axis-title-text-color': null,
     'zoom-slider-x-axis-major-stroke': null,
-    'zoom-slider-x-axis-major-stroke-thickness': null
+    'zoom-slider-x-axis-major-stroke-thickness': null,
 );
 
 /// Generates a fluent financial-chart schema.

package/sass/themes/schemas/charts/light/_gauge.scss

@@ -33,10 +33,16 @@ $material-gauge: (
     ),
     'backing-stroke-thickness': null,
     'font-brush': (
-        contrast-color: ('surface', 500),
+        contrast-color: (
+            'surface',
+            500,
+        ),
     ),
     'minor-tick-brush': (
-        contrast-color: ('surface', 500),
+        contrast-color: (
+            'surface',
+            500,
+        ),
     ),
     'minor-tick-stroke-thickness': null,
     'needle-brush': (
@@ -52,9 +58,12 @@ $material-gauge: (
         color: 'surface',
     ),
     'tick-brush': (
-        contrast-color: ('surface', 500)
+        contrast-color: (
+            'surface',
+            500,
+        ),
     ),
-    'tick-stroke-thickness': null
+    'tick-stroke-thickness': null,
 );
 
 /// Generates a material linear gauge schema.
@@ -97,7 +106,7 @@ $material-radial-gauge: extend(
         ),
         needle-pivot-outline: (
             color: 'surface',
-        )
+        ),
     )
 );
 

package/sass/themes/schemas/charts/light/_geo-map.scss

@@ -12,8 +12,8 @@
 /// @prop {String} plot-area-background [null] - Gets or sets the brush used as the background for the current Map object's plot area.
 $material-geo-map: (
     'plot-area-background': (
-        color: 'surface'
-    )
+        color: 'surface',
+    ),
 );
 
 /// Generates a fluent geo map schema.