igniteui-theming 1.0.2 → 1.1.1

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

@@ -0,0 +1,325 @@
+/* stylelint-disable max-line-length */
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</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 {String} $title-alignment [null] - The horizontal alignment to use for the title.
+/// @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 {String} $subtitle-alignment [null] - Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control.
+/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series brushes colors are selected.
+/// @param {List} $marker-brushes [null]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @param {List} $negative-brushes [null] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall.
+/// @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 series marker outline colors are selected.
+/// @param {List} $negative-outlines [null] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall.
+/// @param {List} $indicator-brushes [null] - Defines the brushes used for financial indicators.
+/// @param {List} $indicator-negative-brushes [null] - Defines the brushes used for negative elements in financial indicators.
+/// @param {Number} $indicator-thickness [null]- Defines the palette from which automatically assigned series marker brushes colors are selected.
+/// @param {Color} $plot-area-background [null]- Gets or sets the brush used as the background for the current Chart object's plot area.
+/// @param {Number} $thickness [null] - Sets the thickness for all series in a chart.
+/// @param {Number} $toolbar-height [null] - Sets the height of the tooolbar.
+/// @param {List} $trend-line-brushes [null] - 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} $volume-brushes [null]- Defines the brushes to use for filling volume series in the volume pane.
+/// @param {List} $volume-outlines [null] - Defines the brushes to use for outlining volume series in the volume pane.
+/// @param {Number} $volume-thickness [null]- Defines the outline thickness of volume series in the volume pane.
+/// @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-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 {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-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 {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.
+/// @param {String} $zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane.
+/// @param {Number} $zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: financial-chart-theme($title-alignment: left, $brushes: red, blue, yellow, pink);
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function financial-chart-theme(
+    $schema: $light-material-schema,
+    $target: 'angular',
+
+    $margin: null,
+    $title-alignment: null,
+    $title-text-color: null,
+    $title-margin: null,
+    $subtitle-text-color: null,
+    $subtitle-margin: null,
+    $subtitle-alignment: null,
+    $brushes: null,
+    $outlines: null,
+    $marker-brushes: null,
+    $marker-outlines: null,
+    $plot-area-background: null,
+    $indicator-brushes: null,
+    $indicator-negative-brushes: null,
+    $indicator-thickness: null,
+    $negative-brushes: null,
+    $negative-outlines: null,
+    $overlay-brushes: null,
+    $overlay-outlines: null,
+    $overlay-thickness: null,
+    $thickness: null,
+    $toolbar-height: null,
+    $trend-line-brushes: null,
+    $trend-line-thickness: null,
+    $volume-brushes: null,
+    $volume-outlines: null,
+    $volume-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-margin: null,
+    $x-axis-title-text-color: 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-margin: null,
+    $y-axis-title-text-color: null,
+    $zoom-slider-x-axis-major-stroke: null,
+    $zoom-slider-x-axis-major-stroke-thickness: null
+) {
+    $name: 'financial-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-financial-chart',
+            'webc': 'igc-financial-chart',
+            'blazor': 'igb-financial-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);
+    $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, 'x-axis-title-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,
+            margin: $margin,
+            title-alignment: $title-alignment,
+            title-text-color: $title-text-color,
+            title-margin: $title-margin,
+            subtitle-text-color: $subtitle-text-color,
+            subtitle-margin: $subtitle-margin,
+            subtitle-alignment: $subtitle-alignment,
+            brushes: $brushes,
+            outlines: $outlines,
+            marker-brushes: $marker-brushes,
+            marker-outlines: $marker-outlines,
+            plot-area-background: $plot-area-background,
+            indicator-brushes: $indicator-brushes,
+            indicator-negative-brushes: $indicator-negative-brushes,
+            indicator-thickness: $indicator-thickness,
+            negative-brushes: $negative-brushes,
+            negative-outlines: $negative-outlines,
+            overlay-brushes: $overlay-brushes,
+            overlay-outlines: $overlay-outlines,
+            overlay-thickness: $overlay-thickness,
+            thickness: $thickness,
+            toolbar-height: $toolbar-height,
+            trend-line-brushes: $trend-line-brushes,
+            trend-line-thickness: $trend-line-thickness,
+            volume-brushes: $volume-brushes,
+            volume-outlines: $volume-outlines,
+            volume-thickness: $volume-thickness,
+            x-axis-label-margin: $x-axis-label-margin,
+            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-margin: $x-axis-title-margin,
+            x-axis-title-text-color: $x-axis-title-text-color,
+            y-axis-label-margin: $y-axis-label-margin,
+            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-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
+        )
+    );
+}
+
+/// Adds typography styles for the financial-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 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'
+        ),
+        $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/_funnel-chart-theme.scss

@@ -0,0 +1,98 @@
+/* stylelint-disable max-line-length */
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access private
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</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 [null] - Defines the palette from which automatically assigned series colors are nelected.
+/// @param {List} $outlines [null] - Defines the palette from which automatically assigned series outline colors are selected.
+/// @param {String} $outer-label-alignment [null] - Sets which side of the chart the outer labels should appear.
+/// @param {Color} $outer-label-text-color [null] - Sets the Color used for the outer labels.
+/// @param {Color} $outer-label-visibility [null] - Sets whether the outer labels are visible.
+/// @param {Number} $outline-thickness [null] - Sets the thickness of outline around slices.
+/// @param {Color} $text-color - [null] Sets the Color used for the inner labels.
+///
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $my-chart-theme: funnel-chart-theme($brushes: (orange, blue, pink));
+///   // Pass the theme to the css-vars mixin
+///   @include css-vars($my-chart-theme);
+@function funnel-chart-theme(
+    $schema: $light-material-schema,
+    $target: 'angular',
+
+    $brushes: null,
+    $outlines: null,
+    $outer-label-alignment: null,
+    $outer-label-text-color: null,
+    $outer-label-visibility: null,
+    $outline-thickness: null,
+    $text-color: null,
+) {
+    $name: 'funnel-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-funnel-chart',
+            'webc': 'igc-funnel-chart',
+            'blazor': 'igb-funnel-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,
+        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') {
+    $name: 'funnel-chart';
+    $selector: map.get(
+        (
+            'angular': 'igx-funnel-chart',
+            'webc': 'igc-funnel-chart',
+            'blazor': 'igb-funnel-chart'
+        ),
+        $target
+    );
+    $outer-label-text-style: map.get($categories, 'outer-label-text-style');
+    $text-style: map.get($categories, 'text-style');
+    $outer-label: type-scale-category($type-scale, $outer-label-text-style);
+    $text: type-scale-category($type-scale, $text-style);
+
+    #{$selector} {
+        @include font-var('outer-label-text-style', $outer-label, $name);
+        @include font-var('text-style', $text, $name);
+    }
+}

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

@@ -0,0 +1,167 @@
+/* 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 {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.
+/// @param {Color} $backing-outline [null] - Sets the color 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 color to use for the label font.
+/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.
+/// @param {Number} $needle-breadth [null] - Sets the needle breadth.
+/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.
+/// @param {Number} $needle-inner-base-width [null] - Sets the width of the needle's inner base.
+/// @param {Number} $needle-inner-point-width [null] - Sets the width of the needle's inner point.
+/// @param {Number} $needle-outer-base-width [null] - Sets the width of the needle's outer base.
+/// @param {Number} $needle-outer-point-width [null] - Sets the width of the needle's outer point.
+/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.
+/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.
+/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.
+/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.
+/// @param {Color} $scale-outline [null] - Sets the color to use for the outline of the scale.
+/// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.
+/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
+/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $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-schema,
+    $target: 'angular',
+    $rest...
+) {
+    $name: 'linear-gauge';
+    $selector: map.get(
+        (
+            'angular': 'igx-linear-gauge',
+            'webc': 'igc-linear-gauge',
+            'blazor': 'igb-linear-gauge'
+        ),
+        $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,
+        keywords($rest),
+        (
+            name: $name,
+            selector: $selector,
+        ),
+    );
+}
+
+/// @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 {Map} $width [null] - The width of the gauge in pixels, string (px) or percentage (%).
+/// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%).
+/// @param {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.
+/// @param {Color} $backing-outline [null] - Sets the color 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 color to use for the label font.
+/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.
+/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.
+/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.
+/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.
+/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.
+/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.
+/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.
+/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.
+/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.
+/// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.
+/// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $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-schema,
+    $target: 'angular',
+    $rest...
+) {
+    $name: 'radial-gauge';
+    $selector: map.get(
+        (
+            'angular': 'igx-radial-gauge',
+            'webc': 'igc-radial-gauge',
+            'blazor': 'igb-radial-gauge'
+        ),
+        $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,
+        keywords($rest),
+        (
+            name: $name,
+            selector: $selector,
+        ),
+    );
+}
+
+/// Adds typography styles for the linear-gauge component.
+/// @access private
+/// @group typography
+/// @requires {mixin} type-style
+@mixin gauge-typography($target: 'angular') {
+    $linear-selector: map.get(
+        (
+            'angular': 'igx-linear-gauge',
+            'webc': 'igc-linear-gauge',
+            'blazor': 'igb-linear-gauge'
+        ),
+        $target
+    );
+    $radial-selector: map.get(
+        (
+            'angular': 'igx-radial-gauge',
+            'webc': 'igc-radial-gauge',
+            'blazor': 'igb-radial-gauge'
+        ),
+        $target
+    );
+
+    #{$linear-selector} {
+        --linear-gauge-font: var(--ig-font-family, inherit);
+    }
+
+    #{$radial-selector} {
+        --radial-gauge-font: var(--ig-font-family, inherit);
+    }
+}

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

@@ -0,0 +1,53 @@
+/* stylelint-disable max-line-length */
+@use 'sass:map';
+@use '../index' as *;
+@use '../schemas/charts' as *;
+@use '../../utils' as *;
+@use '../../typography' as *;
+
+////
+/// @group themes
+/// @access private
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</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 {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area.
+/// @requires $light-schema
+/// @requires extend
+///
+/// @example scss
+///   $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-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'
+        ),
+        $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,
+        plot-area-background: $plot-area-background,
+    ));
+}