igniteui-theming 1.0.2 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

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

@@ -0,0 +1,319 @@
+/* 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/SisIvanova" target="_blank">Silvia Ivanova</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 {List} $brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected.
+/// @param {List} $marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @param {List} $negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
+/// @param {List} $outlines [series] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {List} $marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected.
+/// @param {List} $negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
+/// @param {String} $title-alignment [null] - The horizontal alignment to use for the title.
+/// @param {List} $title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title.
+/// @param {Color} $title-text-color [null] - Sets the color of the chart title.
+/// @param {String} $title-text-style [null] - Sets the CSS font property of the chart title.
+/// @param {List} $subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
+/// @param {String} $subtitle-alignment [null] - The horizontal alignment to use for the subtitle.
+/// @param {Color} $subtitle-text-color [null] - Sets the color of the chart subtitle.
+/// @param {String} $subtitle-text-style [null] - Sets the CSS font property of the chart subtitle.
+/// @param {Number} $thickness [null] - Sets the thickness for all series in a chart.
+/// @param {List} $trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart.
+/// @param {Number} $trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble.
+/// @param {List} $x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis.
+/// @param {Color} $x-axis-label-text-color [null] - Sets the color of labels on the X-axis.
+/// @param {String} $x-axis-label-text-style [null] - Sets the CSS font property for labels on X-axis.
+/// @param {String} $x-axis-label-vertical-alignment [null] - Sets the 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 {Number} $x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis.
+/// @param {Color} $x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis.
+/// @param {Number} $x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis.
+/// @param {String} $x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title.
+/// @param {List} $x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis.
+/// @param {Color} $x-axis-title-text-color [null] - Sets the color of the title on the X-axis.
+/// @param {String} $x-axis-title-text-style [null] - Sets the CSS font property for the title on the X-axis.
+/// @param {List} $y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis.
+/// @param {Color} $y-axis-label-text-color [null] - Sets the color of labels on the Y-axis.
+/// @param {String} $y-axis-label-text-style [null] - Sets the CSS font property for labels on Y-axis.
+/// @param {String} $y-axis-label-vertical-alignment [null] - Sets the 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 the horizontal alignment of the Y-axis title.
+/// @param {List} $y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis.
+/// @param {Color} $y-axis-title-text-color [null] - Sets the color of a title on the Y-axis.
+/// @param {String} $y-axis-title-text-style [null] - Sets the CSS font property for the title on the Y-axis.
+/// @param {Number} $y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis.
+/// @param {Color} $y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis.
+/// @param {Number} $y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $custom-chart-theme: category-chart-theme($brushes: (red, green, blue));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($custom-chart-theme);
+@function category-chart-theme(
+    $schema: $light-material-schema,
+    $target: 'angular',
+
+    $margin: null,
+    $brushes: null,
+    $marker-brushes: null,
+    $negative-brushes: null,
+    $outlines: null,
+    $marker-outlines: null,
+    $negative-outlines: null,
+    $title-margin: null,
+    $title-alignment: null,
+    $title-text-color: null,
+    $title-text-style: null,
+    $subtitle-margin: null,
+    $subtitle-alignment: null,
+    $subtitle-text-color: null,
+    $subtitle-text-style: 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-text-style: 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-tick-length: null,
+    $x-axis-tick-stroke: null,
+    $x-axis-tick-stroke-thickness: null,
+    $x-axis-title-alignment: null,
+    $x-axis-title-margin: null,
+    $x-axis-title-text-color: null,
+    $x-axis-title-text-style: null,
+    $y-axis-label-margin: null,
+    $y-axis-label-text-color: null,
+    $y-axis-label-text-style: 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-margin: null,
+    $y-axis-title-text-color: null,
+    $y-axis-title-text-style: null,
+    $y-axis-tick-length: null,
+    $y-axis-tick-stroke: null,
+    $y-axis-tick-stroke-thickness: null
+) {
+    $name: 'category-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-category-chart',
+            'webc': 'igc-category-chart',
+            'blazor': 'igb-category-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');
+    $x-axis-title-margin-default: map.get($theme, 'x-axis-title-margin');
+    $y-axis-label-margin-default: map.get($theme, 'y-axis-label-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($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-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($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,
+            brushes: $brushes,
+            marker-brushes: $marker-brushes,
+            negative-brushes: $negative-brushes,
+            outlines: $outlines,
+            marker-outlines: $marker-outlines,
+            negative-outlines: $negative-outlines,
+            title-alignment: $title-alignment,
+            title-text-color: $title-text-color,
+            title-text-style: $title-text-style,
+            subtitle-alignment: $subtitle-alignment,
+            subtitle-text-color: $subtitle-text-color,
+            subtitle-text-style: $subtitle-text-style,
+            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-text-style: $x-axis-label-text-style,
+            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-tick-length: $x-axis-tick-length,
+            x-axis-tick-stroke: $x-axis-tick-stroke,
+            x-axis-tick-stroke-thickness: $x-axis-tick-stroke-thickness,
+            x-axis-title-alignment: $x-axis-title-alignment,
+            x-axis-title-text-color: $x-axis-title-text-color,
+            x-axis-title-text-style: $x-axis-title-text-style,
+            y-axis-label-text-color: $y-axis-label-text-color,
+            y-axis-label-text-style: $y-axis-label-text-style,
+            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-text-color: $y-axis-title-text-color,
+            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
+        )
+    );
+}
+
+/// Adds typography styles for the category-chart component.
+/// Uses the 'h6', 'subtitle-1' and 'body-2'
+/// category from the typographic scale.
+/// @group typography
+/// @param {Map} $type-scale - A typographic scale as produced by type-scale.
+/// @param {Map} $categories [(
+/// 'title': 'h6',
+/// 'subtitle': 'subtitle-1,
+/// 'x-axis-label-text-style': 'body-2',
+/// 'y-axis-label-text-style': 'body-2',
+/// 'x-axis-title-text-style': 'body-2',
+/// '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') {
+    $name: 'category-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-category-chart',
+            'webc': 'igc-category-chart',
+            'blazor': 'igb-category-chart'
+        ),
+        $target
+    );
+    $title: map.get($categories, 'title');
+    $subtitle: map.get($categories, 'subtitle');
+    $x-axis-label-text-style: map.get($categories, 'x-axis-label-text-style');
+    $x-axis-title-text-style: map.get($categories, 'x-axis-title-text-style');
+    $y-axis-label-text-style: map.get($categories, 'y-axis-label-text-style');
+    $y-axis-title-text-style: map.get($categories, 'y-axis-title-text-style');
+    $title-styles: type-scale-category($type-scale, $title);
+    $subtitle-styles: type-scale-category($type-scale, $subtitle);
+    $x-axis-label-styles: type-scale-category($type-scale, $x-axis-label-text-style);
+    $x-axis-title-styles: type-scale-category($type-scale, $x-axis-title-text-style);
+    $y-axis-label-styles: type-scale-category($type-scale, $y-axis-label-text-style);
+    $y-axis-title-styles: type-scale-category($type-scale, $y-axis-title-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-label-text-style', $x-axis-label-styles, $name);
+        @include font-var('x-axis-title-text-style', $x-axis-title-styles, $name);
+        @include font-var('y-axis-label-text-style', $y-axis-label-styles, $name);
+        @include font-var('y-axis-title-text-style', $y-axis-title-styles, $name);
+    }
+}

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

@@ -0,0 +1,142 @@
+/* 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-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 {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] - Defines the palette from which automatically assigned marker brushes are selected.
+/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {List} $marker-outlines [null] - Defines the palette from which automatically assigned marker outlines are selected.
+/// @param {Color} $plot-area-background [null] - Sets the brush used as the background for the current Chart object's plot area.
+/// @param {String} $title-horizontal-alignment [null] - The horizontal alignment to use for the title. Valid options are 'left', 'center', and 'right';
+/// @param {String} $subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. Valid options are 'left', 'center', and 'right';
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: data-chart-theme($brushes: (orange, blue, pink));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function data-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,
+    $plot-area-background: null,
+    $title-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'
+        ),
+        $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');
+
+    @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');
+    }
+
+    @return extend(
+        $theme,
+        $margin,
+        $title-margin,
+        $subtitle-margin,
+        (
+            name: $name,
+            selector: $selector,
+            title-text-color: $title-text-color,
+            subtitle-text-color: null,
+            brushes: $brushes,
+            outlines: $outlines,
+            marker-brushes: $marker-brushes,
+            marker-outlines: $marker-outlines,
+            plot-area-background: $plot-area-background,
+            title-horizontal-alignment: $title-horizontal-alignment,
+            subtitle-horizontal-alignment: $subtitle-horizontal-alignment,
+        )
+    );
+}
+
+/// Adds typography styles for the data-chart component.
+/// Uses the 'h6' and 'subtitle-1'
+/// category from the typographic scale.
+/// @group typography
+/// @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') {
+    $name: 'data-chart';
+    $title: map.get($categories, 'title');
+    $subtitle: map.get($categories, 'subtitle');
+    $title-styles: type-scale-category($type-scale, $title);
+    $subtitle-styles: type-scale-category($type-scale, $subtitle);
+    $selector: map.get(
+        (
+            'angular': 'igx-data-chart',
+            'webc': 'igc-data-chart',
+            'blazor': 'igb-data-chart'
+        ),
+        $target
+    );
+
+    #{$selector} {
+        @include font-var('title-text-style', $title-styles, $name);
+        @include font-var('subtitle-text-style', $subtitle-styles, $name);
+    }
+}

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

@@ -0,0 +1,81 @@
+@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 {Color} $others-category-fill [null] - Sets the fill color for others category.
+/// @param {Number} $others-category-opacity [null] - Sets the opacity for others category.
+/// @param {Color} $others-category-stroke [null] - Sets the others category stroke color.
+/// @param {Number} $others-category-stroke-thickness [null] - Sets the others category stroke thickness.
+/// @param {Color} $selected-slice-fill [null] - Sets the fill color of the selected slice.
+/// @param {Number} $selected-slice-opacity [null] - Sets the opacity of the selected slice.
+/// @param {Color} $selected-slice-stroke [null] - Sets the stroke color of the selected slice.
+/// @param {Number} $selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: doughnut-chart-theme($brushes: (orange, blue, pink));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function doughnut-chart-theme(
+    $schema: $light-material-schema,
+    $target: 'angular',
+
+    $brushes: null,
+    $outlines: null,
+    $others-category-fill: null,
+    $others-category-opacity: null,
+    $others-category-stroke: null,
+    $others-category-stroke-thickness: null,
+    $selected-slice-fill: null,
+    $selected-slice-opacity: null,
+    $selected-slice-stroke: null,
+    $selected-slice-stroke-thickness: null,
+) {
+    $name: 'doughnut-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-doughnut-chart',
+            'webc': 'igc-doughnut-chart',
+            'blazor': 'igb-doughnut-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: 'ring-series',
+            selector: $selector,
+            brushes: $brushes,
+            outlines: $outlines,
+            others-category-fill: $others-category-fill,
+            others-category-opacity: $others-category-opacity,
+            others-category-stroke: $others-category-stroke,
+            others-category-stroke-thickness: $others-category-stroke-thickness,
+            selected-slice-fill: $selected-slice-fill,
+            selected-slice-opacity: $selected-slice-opacity,
+            selected-slice-stroke: $selected-slice-stroke,
+            selected-slice-stroke-thickness: $selected-slice-stroke-thickness,
+        )
+    );
+}