igniteui-theming 1.0.2 → 1.1.1

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

@@ -0,0 +1,133 @@
+/* stylelint-disable max-line-length */
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
+/// @param {Color} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.
+/// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.
+/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.
+/// @param {Color} $font-brush [null] - Sets the brush to use for the label font.
+/// @param {Color} $minor-tick-brush [null] - Sets the brush to use for the minor tickmarks.
+/// @param {Number} $minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks.
+/// @param {List} $range-brushes [null] - Sets a collection of brushes to be used as the palette for bullet graph ranges.
+/// @param {List} $range-outlines [null] - Sets a collection of brushes to be used as the palette for bullet graph outlines.
+/// @param {Color} $scale-background-brush [null] - Sets the background brush for the scale.
+/// @param {Color} $scale-background-outline [null] - Sets the background outline for the scale.
+/// @param {Number} $scale-background-thickness [null] - Sets the background outline thickness for the scale.
+/// @param {Number} $target-value-breadth [null] - Sets the breadth of the target value element.
+/// @param {Color} $target-value-brush [null] - Sets the brush to use when rendering the fill of the comparative marker.
+/// @param {Color} $target-value-outline [null] - Sets the brush to use when rendering the outline of the target value.
+/// @param {Number} $target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar.
+/// @param {Color} $tick-brush [null] - Sets the brush to use for the major tickmarks.
+/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.
+/// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.
+/// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function bullet-graph-theme(
+    $schema: $light-schema,
+    $target: 'angular',
+
+    $backing-brush: null,
+    $backing-outline: null,
+    $backing-stroke-thickness: null,
+    $font-brush: null,
+    $minor-tick-brush: null,
+    $minor-tick-thickness: null,
+    $range-brushes: null,
+    $range-outlines: null,
+    $scale-background-brush: null,
+    $scale-background-outline: null,
+    $scale-background-thickness: null,
+    $target-value-breadth: null,
+    $target-value-brush: null,
+    $target-value-outline: null,
+    $target-value-thickness: null,
+    $tick-brush: null,
+    $tick-stroke-thickness: null,
+    $value-brush: null,
+    $value-outline: null,
+    $value-stroke-thickness: null,
+) {
+    $name: 'bullet-graph';
+    $selector: map.get(
+        (
+            'angular': 'igx-bullet-graph',
+            'webc': 'igc-bullet-graph',
+            'blazor': 'igb-bullet-graph'
+        ),
+        $target
+    );
+    $chart-schema: ();
+
+    @if map.has-key($schema, $name) {
+        $chart-schema: map.get($schema, $name);
+    } @else {
+        $chart-schema: $schema;
+    }
+
+    $theme: digest-schema($chart-schema);
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            backing-brush: $backing-brush,
+            backing-outline: $backing-outline,
+            backing-stroke-thickness: $backing-stroke-thickness,
+            font-brush: $font-brush,
+            minor-tick-brush: $minor-tick-brush,
+            minor-tick-thickness: $minor-tick-thickness,
+            range-brushes: $range-brushes,
+            range-outlines: $range-outlines,
+            scale-background-brush: $scale-background-brush,
+            scale-background-outline: $scale-background-outline,
+            scale-background-thickness: $scale-background-thickness,
+            target-value-breadth: $target-value-breadth,
+            target-value-brush: $target-value-brush,
+            target-value-outline: $target-value-outline,
+            target-value-thickness: $target-value-thickness,
+            tick-brush: $tick-brush,
+            tick-stroke-thickness: $tick-stroke-thickness,
+            value-brush: $value-brush,
+            value-outline: $value-outline,
+            value-stroke-thickness: $value-stroke-thickness,
+        )
+    );
+}
+
+/// Adds typography styles for the graph component.
+/// @access private
+/// @group typography
+/// @requires {mixin} type-style
+@mixin graph-typography($target: 'angular') {
+    $selector: map.get(
+        (
+            'angular': 'igx-bullet-graph',
+            'webc': 'igc-bullet-graph',
+            'blazor': 'igb-bullet-graph'
+        ),
+        $target
+    );
+
+    #{$selector} {
+        --bullet-graph-font: var(--ig-font-family, inherit);
+    }
+}

package/sass/themes/charts/_index.scss

@@ -0,0 +1,12 @@
+@forward 'category-chart-theme';
+@forward 'data-chart-theme';
+@forward 'doughnut-chart-theme';
+@forward 'financial-chart-theme';
+@forward 'funnel-chart-theme';
+@forward 'gauge-theme';
+@forward 'geo-map-theme';
+@forward 'graph-theme';
+@forward 'pie-chart-theme';
+@forward 'shape-chart-theme';
+@forward 'sparkline-theme';
+@forward 'theme';

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

@@ -0,0 +1,108 @@
+/* stylelint-disable max-line-length */
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
+/// @param {List} $brushes [series] - Defines the palette from which automatically assigned series colors are selected.
+/// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {Number} $label-extent [null] - Sets the pixel amount by which the labels are offset from the edge of the slices.
+/// @param {Color} $label-inner-color [null] - Sets the color for labels rendered inside of the pie chart.
+/// @param {Color} $label-outer-color [null] - Sets the color for labels rendered outside of the pie chart.
+/// @param {String} $labels-position [null] - Sets the position of chart labels. Valid values are: 'none', 'center', 'insideEnd', 'outsideEnd', and 'bestFit'.
+/// @param {Number} $leader-line-margin [null] - Sets the margin between a label and the end of its leader line.
+/// @param {String} $leader-line-type [null] - Sets what type of leader lines will be used for the outside end labels. Valid values are: 'straight', 'spline', and 'arc'.
+/// @param {String} $leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'.
+/// @param {Number} $radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: pie-chart-theme($brushes: (red, orange, blue));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function pie-chart-theme(
+    $schema: $light-material-schema,
+    $target: 'angular',
+
+    $brushes: null,
+    $outlines: null,
+    $label-extent: null,
+    $label-inner-color: null,
+    $label-outer-color: null,
+    $labels-position: null,
+    $leader-line-margin: null,
+    $leader-line-type: null,
+    $leader-line-visibility: null,
+    $radius-factor: null,
+) {
+    $name: 'pie-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-pie-chart',
+            'webc': 'igc-pie-chart',
+            'blazor': 'igb-pie-chart'
+        ),
+        $target
+    );
+    $chart-schema: ();
+
+    @if map.has-key($schema, $name) {
+        $chart-schema: map.get($schema, $name);
+    } @else {
+        $chart-schema: $schema;
+    }
+
+    $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,
+    ));
+}
+
+/// Adds typography styles for the pie-chart component.
+/// Uses the 'body-2'
+/// category from the typographic scale.
+/// @group typography
+/// @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') {
+    $name: 'pie-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-pie-chart',
+            'webc': 'igc-pie-chart',
+            'blazor': 'igb-pie-chart'
+        ),
+        $target
+    );
+    $text: map.get($categories, 'text');
+    $text-styles: type-scale-category($type-scale, $text);
+
+    #{$selector} {
+        @include font-var('text-style', $text-styles, $name);
+    }
+}

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

@@ -0,0 +1,271 @@
+/* stylelint-disable max-line-length */
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
+/// @param {List} $margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
+/// @param {Color} $title-alignment [null] - Sets horizontal alignment which determines the title position, relative to the left and right edges of the control.
+/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
+/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @param {String} $subtitle-alignment [null] - Sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
+/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected.
+/// @param {List} $marker-brushes [null] - Sets the palette of brushes used for rendering fill area of data point markers.
+/// @param {List} $outlines [null] - Sets the palette of brushes to use for outlines on the chart series.
+/// @param {List} $marker-outlines [null] - Sets the palette of brushes used for rendering outlines of data point markers.
+/// @param {Number} $thickness [null] - Sets the thickness for all series in this chart.
+/// @param {List} $trend-line-brushes [null] - Sets the palette of brushes to used for coloring trend lines in this chart.
+/// @param {Number} $trend-line-thickness [null] - Sets the thickness of the trend lines in this chart. This property applies only to these chart types: point, line, spline, and bubble.
+/// @param {List} $x-axis-label-margin [null] - Sets the margin of labels on the X-axis.
+/// @param {Color} $x-axis-label-text-color [null] - Sets color of labels on the X-axis.
+/// @param {String} $x-axis-label-vertical-alignment [null] - Sets Vertical alignment of X-axis labels.
+/// @param {Color} $x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis.
+/// @param {Number} $x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis.
+/// @param {Color} $x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis.
+/// @param {Number} $x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis.
+/// @param {Color} $x-axis-strip [null] - Sets the color to apply to stripes along the X-axis.
+/// @param {Color} $x-axis-stroke [null] - Sets the color to apply to the X-axis line.
+/// @param {Number} $x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line.
+/// @param {String} $x-axis-title-alignment [null] - Sets Horizontal alignment of the X-axis title.
+/// @param {Color} $x-axis-title-color [null] - Sets color of title on the X-axis.
+/// @param {List} $x-axis-title-margin [null] - Sets the margin around the title on the X-axis.
+/// @param {List} $y-axis-label-margin [null] - Sets the margin of labels on the Y-axis.
+/// @param {Color} $y-axis-label-text-color [null] - Sets color of labels on the Y-axis.
+/// @param {String} $y-axis-label-vertical-alignment [null] - Sets Vertical alignment of Y-axis labels.
+/// @param {Color} $y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the Y-axis.
+/// @param {Number} $y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis.
+/// @param {Color} $y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis.
+/// @param {Number} $y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis.
+/// @param {Color} $y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis.
+/// @param {Color} $y-axis-stroke [null] - Sets the color to apply to the Y-axis line.
+/// @param {Number} $y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line.
+/// @param {String} $y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title.
+/// @param {Color} $y-axis-title-color [null] - Sets color of title on the Y-axis.
+/// @param {List} $y-axis-title-margin [null] - Sets the margin around the title on the Y-axis.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: shape-chart-theme($brushes: (orange, blue, pink));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function shape-chart-theme(
+    $schema: $light-material-schema,
+    $target: 'angular',
+
+    $margin: null,
+    $title-text-color: null,
+    $title-margin: null,
+    $subtitle-text-color: null,
+    $subtitle-margin: null,
+    $brushes: null,
+    $outlines: null,
+    $marker-brushes: null,
+    $marker-outlines: null,
+    $thickness: null,
+    $trend-line-brushes: null,
+    $trend-line-thickness: null,
+    $x-axis-label-margin: null,
+    $x-axis-label-text-color: null,
+    $x-axis-label-vertical-alignment: null,
+    $x-axis-major-stroke: null,
+    $x-axis-major-stroke-thickness: null,
+    $x-axis-minor-stroke: null,
+    $x-axis-minor-stroke-thickness: null,
+    $x-axis-strip: null,
+    $x-axis-stroke: null,
+    $x-axis-stroke-thickness: null,
+    $x-axis-title-alignment: null,
+    $x-axis-title-color: null,
+    $x-axis-title-margin: null,
+    $y-axis-label-margin: null,
+    $y-axis-label-text-color: null,
+    $y-axis-label-vertical-alignment: null,
+    $y-axis-major-stroke: null,
+    $y-axis-major-stroke-thickness: null,
+    $y-axis-minor-stroke: null,
+    $y-axis-minor-stroke-thickness: null,
+    $y-axis-strip: null,
+    $y-axis-stroke: null,
+    $y-axis-stroke-thickness: null,
+    $y-axis-title-alignment: null,
+    $y-axis-title-color: null,
+    $y-axis-title-margin: null,
+) {
+    $name: 'shape-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-shape-chart',
+            'webc': 'igc-shape-chart',
+            'blazor': 'igb-shape-chart'
+        ),
+        $target
+    );
+    $chart-schema: ();
+
+    @if map.has-key($schema, $name) {
+        $chart-schema: map.get($schema, $name);
+    } @else {
+        $chart-schema: $schema;
+    }
+
+    $theme: digest-schema($chart-schema);
+    $margin-default: map.get($theme, 'margin');
+    $title-margin-default: map.get($theme, 'title-margin');
+    $subtitle-margin-default: map.get($theme, 'subtitle-margin');
+    $x-axis-label-margin-default: map.get($theme, 'x-axis-label-margin');
+    $y-axis-label-margin-default: map.get($theme, 'y-axis-label-margin');
+    $x-axis-title-margin-default: map.get($theme, 'x-axis-title-margin');
+    $y-axis-title-margin-default: map.get($theme, 'y-axis-title-margin');
+
+    @if not($margin) {
+        $margin: $margin-default;
+    } @else {
+        $margin: expand-shorthand(($margin));
+    }
+
+    @if not($title-margin) {
+        $title-margin: $title-margin-default;
+    } @else {
+        $title-margin: map-keys-prefix(expand-shorthand(($title-margin)), 'title');
+    }
+
+    @if not($subtitle-margin) {
+        $subtitle-margin: $subtitle-margin-default;
+    } @else {
+        $subtitle-margin: map-keys-prefix(expand-shorthand(($subtitle-margin)), 'subtitle');
+    }
+
+    @if not($x-axis-label-margin) {
+        $x-axis-label-margin: $x-axis-label-margin-default;
+    } @else {
+        $x-axis-label-margin: map-keys-prefix(expand-shorthand(($x-axis-label-margin)), 'x-axis-label');
+    }
+
+    @if not($y-axis-label-margin) {
+        $y-axis-label-margin: $y-axis-label-margin-default;
+    } @else {
+        $y-axis-label-margin: map-keys-prefix(expand-shorthand(($y-axis-label-margin)), 'y-axis-label');
+    }
+
+    @if not($x-axis-title-margin) {
+        $x-axis-title-margin: $x-axis-title-margin-default;
+    } @else {
+        $x-axis-title-margin: map-keys-prefix(expand-shorthand(($x-axis-title-margin)), 'x-axis-title');
+    }
+
+    @if not($y-axis-title-margin) {
+        $y-axis-title-margin: $y-axis-title-margin-default;
+    } @else {
+        $y-axis-title-margin: map-keys-prefix(expand-shorthand(($y-axis-title-margin)), 'y-axis-title');
+    }
+
+    @return extend(
+        $theme,
+        $margin,
+        $title-margin,
+        $subtitle-margin,
+        $x-axis-label-margin,
+        $x-axis-title-margin,
+        $y-axis-label-margin,
+        $y-axis-title-margin,
+        (
+            name: $name,
+            selector: $selector,
+            title-text-color: $title-text-color,
+            subtitle-text-color: $subtitle-text-color,
+            brushes: $brushes,
+            outlines: $outlines,
+            thickness: $thickness,
+            trend-line-brushes: $trend-line-brushes,
+            trend-line-thickness: $trend-line-thickness,
+            x-axis-label-text-color: $x-axis-label-text-color,
+            x-axis-label-vertical-alignment: $x-axis-label-vertical-alignment,
+            x-axis-major-stroke: $x-axis-major-stroke,
+            x-axis-major-stroke-thickness: $x-axis-major-stroke-thickness,
+            x-axis-minor-stroke: $x-axis-minor-stroke,
+            x-axis-minor-stroke-thickness: $x-axis-minor-stroke-thickness,
+            x-axis-strip: $x-axis-strip,
+            x-axis-stroke: $x-axis-stroke,
+            x-axis-stroke-thickness: $x-axis-stroke-thickness,
+            x-axis-title-alignment: $x-axis-title-alignment,
+            x-axis-title-color: $x-axis-title-color,
+            y-axis-label-text-color: $y-axis-label-text-color,
+            y-axis-label-vertical-alignment: $y-axis-label-vertical-alignment,
+            y-axis-major-stroke: $y-axis-major-stroke,
+            y-axis-major-stroke-thickness: $y-axis-major-stroke-thickness,
+            y-axis-minor-stroke: $y-axis-minor-stroke,
+            y-axis-minor-stroke-thickness: $y-axis-minor-stroke-thickness,
+            y-axis-strip: $y-axis-strip,
+            y-axis-stroke: $y-axis-stroke,
+            y-axis-stroke-thickness: $y-axis-stroke-thickness,
+            y-axis-title-alignment: $y-axis-title-alignment,
+            y-axis-title-color: $y-axis-title-color,
+        )
+    );
+}
+
+/// Adds typography styles for the shape-chart component.
+/// Uses the 'h3', 'h4', 'h6', and 'subtitle-1'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.
+/// @param {Map} $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',
+/// )] - 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') {
+    $name: 'shape-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-shape-chart',
+            'webc': 'igc-shape-chart',
+            'blazor': 'igb-shape-chart'
+        ),
+        $target
+    );
+    $title: map.get($categories, 'title');
+    $subtitle: map.get($categories, 'subtitle');
+    $x-axis-title-text-style: map.get($categories, 'x-axis-title-text-style');
+    $x-axis-label-text-style: map.get($categories, 'x-axis-label-text-style');
+    $y-axis-title-text-style: map.get($categories, 'y-axis-title-text-style');
+    $y-axis-label-text-style: map.get($categories, 'y-axis-label-text-style');
+    $title-styles: type-scale-category($type-scale, $title);
+    $subtitle-styles: type-scale-category($type-scale, $subtitle);
+    $x-axis-title-styles: type-scale-category($type-scale, $x-axis-title-text-style);
+    $x-axis-label-styles: type-scale-category($type-scale, $x-axis-label-text-style);
+    $y-axis-title-styles: type-scale-category($type-scale, $y-axis-title-text-style);
+    $y-axis-label-styles: type-scale-category($type-scale, $y-axis-label-text-style);
+
+    #{$selector} {
+        @include font-var('title-text-style', $title-styles, $name);
+        @include font-var('subtitle-text-style', $subtitle-styles, $name);
+        @include font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
+        @include font-var('x-axis-label-text-style', $x-axis-label-styles, $name);
+        @include font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
+        @include font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
+    }
+}

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

@@ -0,0 +1,114 @@
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.
+/// @param {Map} $target ['angular'] - The target platform to be used when scoping the theme variables.
+///
+/// @param {Color} $brush [null] - Sets the sparkline brush.
+/// @param {Number} $line-thickness [null] - Sets the line thickness of the sparkline.
+/// @param {Color} $marker-brush [null] - Sets the marker brush of the sparkline.
+/// @param {Color} $marker-size [null] - Sets the marker size of the sparkline.
+/// @param {Color} $first-marker-brush [null] - Sets the first marker brush of the sparkline.
+/// @param {Number} $first-marker-size [null] - Sets the first marker size of the sparkline.
+/// @param {Color} $last-marker-brush [null] - Sets the last marker brush of the sparkline.
+/// @param {Number} $last-marker-size [null] - Sets the last marker size of the sparkline.
+/// @param {Color} $low-marker-brush [null] - Sets the low marker brush of the sparkline.
+/// @param {Number} $low-marker-size [null] - Sets the low marker size of the sparkline.
+/// @param {Color} $high-marker-brush [null] - Sets the high marker brush of the sparkline.
+/// @param {Number} $high-marker-size [null] - Sets the high marker size of the sparkline.
+/// @param {Color} $negative-brush [null] - Sets the negative brush of the sparkline.
+/// @param {Color} $negative-marker-brush [null] - Sets the negative marker brush of the sparkline.
+/// @param {Number} $negative marker-size [null] - Sets the negative marker size of the sparkline.
+/// @param {Color} $trend-line-brush [null] - Sets the trendline brush of the sparkline.
+/// @param {Color} $trend-line-thickness [null] - Sets the thickness of the sparkline's trendline.
+/// @param {Color} $horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline.
+/// @param {Color} $vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline.
+/// @param {Color} $normal-range-fill [null] - Sets the normal range brush of the sparkline.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-sparkline-theme: sparkline-theme($brushes: (orange, blue, pink));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-sparkline-theme);
+@function sparkline-theme(
+    $schema: $light-schema,
+    $target: 'angular',
+
+    $brush: null,
+    $line-thickness: null,
+    $marker-brush: null,
+    $marker-size: null,
+    $first-marker-brush: null,
+    $first-marker-size: null,
+    $last-marker-brush: null,
+    $last-marker-size: null,
+    $low-marker-brush: null,
+    $low-marker-size: null,
+    $high-marker-brush: null,
+    $high-marker-size: null,
+    $negative-brush: null,
+    $negative-marker-brush: null,
+    $negative-marker-size: null,
+    $trend-line-brush: null,
+    $trend-line-thickness: null,
+    $horizontal-axis-brush: null,
+    $vertical-axis-brush: null,
+    $normal-range-fill: null,
+) {
+    $name: 'sparkline';
+    $selector: map.get(
+        (
+            'angular': 'igx-sparkline',
+            'webc': 'igc-sparkline',
+            'blazor': 'igb-sparkline'
+        ),
+        $target
+    );
+    $sparkline-schema: ();
+
+    @if map.has-key($schema, $name) {
+        $sparkline-schema: map.get($schema, $name);
+    } @else {
+        $sparkline-schema: $schema;
+    }
+
+    $theme: digest-schema($sparkline-schema);
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            selector: $selector,
+            brush: $brush,
+            line-thickness: $line-thickness,
+            marker-brush: $marker-brush,
+            marker-size: $marker-size,
+            first-marker-brush: $first-marker-brush,
+            first-marker-size: $first-marker-size,
+            last-marker-brush: $last-marker-brush,
+            last-marker-size: $last-marker-size,
+            low-marker-brush: $low-marker-brush,
+            low-marker-size: $low-marker-size,
+            high-marker-brush: $high-marker-brush,
+            high-marker-size: $high-marker-size,
+            negative-brush: $negative-brush,
+            negative-marker-brush: $negative-marker-brush,
+            negative-marker-size: $negative-marker-size,
+            trend-line-brush: $trend-line-brush,
+            trend-line-thickness: $trend-line-thickness,
+            horizontal-axis-brush: $horizontal-axis-brush,
+            vertical-axis-brush: $vertical-axis-brush,
+            normal-range-fill: $normal-range-fill,
+        )
+    );
+}

package/sass/themes/charts/_theme.scss

@@ -0,0 +1,27 @@
+@use '../mixins' as *;
+@use './category-chart-theme' as *;
+@use './data-chart-theme' as *;
+@use './doughnut-chart-theme' as *;
+@use './financial-chart-theme' as *;
+@use './funnel-chart-theme' as *;
+@use './gauge-theme' as *;
+@use './geo-map-theme' as *;
+@use './graph-theme' as *;
+@use './pie-chart-theme' as *;
+@use './shape-chart-theme' as *;
+@use './sparkline-theme' as *;
+
+@mixin chart-themes($schema, $target: 'angular') {
+    @include css-vars(category-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(data-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(doughnut-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(financial-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(funnel-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(linear-gauge-theme($schema: $schema, $target: $target));
+    @include css-vars(radial-gauge-theme($schema: $schema, $target: $target));
+    @include css-vars(geo-map-theme($schema: $schema, $target: $target));
+    @include css-vars(bullet-graph-theme($schema: $schema, $target: $target));
+    @include css-vars(pie-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(shape-chart-theme($schema: $schema, $target: $target));
+    @include css-vars(sparkline-theme($schema: $schema, $target: $target));
+}