diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss index 7af7f06a635..5bb9261c440 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss @@ -31,6 +31,18 @@ @return ($pixels / $context) * 1rem; } +/// Relative value(em/rem) to pixel. +/// @access public +/// @param {number|string} $num - The relative value to be converted. +/// @param {number|string} $context [$browser-context] - The base context to convert against. +@function px($num, $context: $browser-context) { + @if type-of $num == 'number' { + @return ($num / ($num * 0 + 1)) * 16px; + } + + @return $num; +} + /// Calculates the luminance for a given color. /// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests. /// @@ -403,17 +415,19 @@ /// @function resolve-value($ctx, $extra: null) { $result: null; + @each $fn, $args in $ctx { @if function-exists($fn) { @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') { $result: call(get-function($fn), $extra, $args...); } @else if $result != null { - $result: call(get-function($fn), $result, $args...) + $result: call(get-function($fn), $result, $args...); } @else { - $result: call(get-function($fn), $args...) + $result: call(get-function($fn), $args); } } } + @return $result; } @@ -423,6 +437,21 @@ @return hsl(random(360), 100%, 50%); } +@function igx-generate-series-colors($palette) { + @return ( + igx-color($palette, 'primary'), + igx-color($palette, 'secondary'), + rgb(249, 98, 50), + rgb(60, 189, 201), + rgb(220, 63, 118), + rgb(255, 152, 0), + rgb(78, 98, 207), + rgb(84, 194, 90), + rgb(121, 85, 72), + rgb(154, 154, 154) + ); +} + /// Applies an `igx-palette` to a given theme schema. /// @access private /// @param {Map} $schema - A theme schema. @@ -448,6 +477,12 @@ } @else { $result: extend($result, (#{$key}: $value)); } + + @if $value == 'series' { + $result: extend($result, ( + #{$key}: #{igx-generate-series-colors($palette)} + )); + } } @return $result; } @@ -567,3 +602,47 @@ @function if-rtl($if, $else: null) { @return if-ltr($else, $if); } + +@function expand-shorthand($list) { + $len: length($list); + + $margins: ( + 'margin-top': null, + 'margin-right': null, + 'margin-bottom': null, + 'margin-left': null, + ); + + @for $i from 1 through 4 { + $n: $i % $len; + $n: if($n != 0, $n, $len); + + @if $len == 3 and $i == 4 { + $n: 2; + } + + $key: nth(map-keys($margins), $i); + $value: nth($list, $n); + + $margins: map-merge($margins, ($key: $value)); + } + + @return $margins; +} + +@function map-keys-prefix($map, $prefix, $separator: '-') { + $keys: map-keys($map); + $len: length($keys); + $result: (); + + @for $i from 1 through $len { + $key: nth($keys, $i); + + $result: map-merge($result, ( + '#{$prefix}#{$separator}#{$key}': map-get($map, $key)) + ); + } + + @return $result; +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss index c2d20ae2616..bdb597f88b7 100644 --- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss +++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_mixins.scss @@ -238,12 +238,14 @@ /// :root { /// @include css-vars-from-theme($my-theme); /// } -@mixin css-vars-from-theme($theme) { - $prefix: map-get($theme, 'name'); - +@mixin css-vars-from-theme($theme, $prefix: null) { @each $key, $value in $theme { @if $key != 'name' and $key != 'palette' and type-of($value) != 'map' { - --#{$prefix}-#{$key}: #{$value}; + @if $prefix { + --#{$prefix}-#{$key}: #{$value}; + } @else { + --#{$key}: #{$value}; + } } } } @@ -269,9 +271,10 @@ /// @requires {mixin} css-vars-from-theme @mixin igx-css-vars($theme) { $scope: if(is-root(), ':root', '&'); + $prefix: map-get($theme, 'name'); #{$scope} { - @include css-vars-from-theme($theme); + @include css-vars-from-theme($theme, $prefix); } } diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss new file mode 100644 index 00000000000..e49234b6ac5 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_category-chart-theme.scss @@ -0,0 +1,296 @@ +//// +/// @group themes +/// @access public +/// @author Silvia Ivanova +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $custom-chart-theme: igx-category-chart-theme($brushes: (red, green, blue)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($custom-chart-theme); +@function igx-category-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + $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, + 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 'h1', 'h3', 'h4', 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': 'h1', +/// 'subtitle': 'subtitle-1, +/// 'x-axis-label-text-style': 'h3', +/// 'y-axis-label-text-style': 'h3', +/// 'x-axis-title-text-style': 'h4', +/// 'y-axis-title-text-style': 'h4', +/// )] - The categories from the typographic scale used for type styles. +/// @requires {mixin} igx-type-style +@mixin igx-category-chart-typography($type-scale, $categories: ( + 'title': 'h1', + 'subtitle': 'subtitle-1', + 'x-axis-label-text-style': 'h4', + 'x-axis-title-text-style': 'h3', + 'y-axis-label-text-style': 'h4', + 'y-axis-title-text-style': 'h3', +)) { + $name: 'category-chart'; + $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: igx-type-scale-category($type-scale, $title); + $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); + $x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label); + $x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title); + $y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style); + $y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style); + + @include igx-font-var('title-text-style', $title-styles, $name); + @include igx-font-var('subtitle-text-style', $subtitle-styles, $name); + @include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name); + @include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name); + @include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name); + @include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name); +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss new file mode 100644 index 00000000000..efde2deabca --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_data-chart-theme.scss @@ -0,0 +1,120 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-data-chart-theme($brushes: (orange, blue, pink)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-data-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + $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, + 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 'h1' 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')] - The categories from the typographic scale used for type styles. +/// @requires {mixin} igx-type-style +@mixin igx-data-chart-typography($type-scale, $categories: ( + title: 'h1', + subtitle: 'subtitle-1', +)) { + $name: 'data-chart'; + $title: map-get($categories, 'title'); + $subtitle: map-get($categories, 'subtitle'); + + $title-styles: igx-type-scale-category($type-scale, $title); + $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); + + @include igx-font-var('title-text-style', $title-styles, $name); + @include igx-font-var('subtitle-text-style', $subtitle-styles, $name); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss new file mode 100644 index 00000000000..40daf229a77 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_doughnut-chart-theme.scss @@ -0,0 +1,69 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-doughnut-chart-theme($brushes: (orange, blue, pink)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-doughnut-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend( + $theme, + ( + name: 'ring-series', + 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, + ) + ); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss new file mode 100644 index 00000000000..d67f3220c0e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_financial-chart-theme.scss @@ -0,0 +1,289 @@ +//// +/// @group themes +/// @access private +/// @author Dilyana Dimova +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-financial-chart-theme($title-alignment: left, $brushes: red, blue, yellow, pink); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-financial-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + $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, + 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 + ) + ); +} + +@mixin igx-financial-chart-typography($type-scale, $categories: ( + 'title': 'h1', + 'subtitle': 'subtitle-1', + 'x-axis-label-text-style': 'h4', + 'x-axis-title-text-style': 'h3', + 'y-axis-label-text-style': 'h4', + 'y-axis-title-text-style': 'h3', +)) { + $name: 'financial-chart'; + $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: igx-type-scale-category($type-scale, $title); + $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); + $x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label-text-style); + $x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title-text-style); + $y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style); + $y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style); + + @include igx-font-var('title-text-style', $title-styles, $name); + @include igx-font-var('subtitle-text-style', $subtitle-styles, $name); + @include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name); + @include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name); + @include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name); + @include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss new file mode 100644 index 00000000000..c9bea0f1bac --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_funnel-chart-theme.scss @@ -0,0 +1,76 @@ +//// +/// @group themes +/// @access private +/// @author Marin Popov +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @param {List} $brushes [null] - Defines the palette from which automatically assigned series colors are selected. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-funnel-chart-theme($brushes: (orange, blue, pink)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-funnel-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend($theme, ( + name: $name, + 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 igx-funnel-chart-typography($type-scale, $categories: ( + outer-label-text-style: 'h1', + text-style: 'subtitle-1', +)) { + $name: 'funnel-chart'; + $outer-label-text-style: map-get($categories, 'outer-label-text-style'); + $text-style: map-get($categories, 'text-style'); + + $outer-label: igx-type-scale-category($type-scale, $outer-label-text-style); + $text: igx-type-scale-category($type-scale, $text-style); + + @include igx-font-var('outer-label-text-style', $outer-label, $name); + @include igx-font-var('text-style', $text, $name); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss new file mode 100644 index 00000000000..b5b32c29fbc --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_gauge-theme.scss @@ -0,0 +1,129 @@ +//// +/// @group themes +/// @access public +/// @author Silvia Ivanova +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $custom-gauge-theme: igx-linear-gauge-theme($brushes: (red, green, blue)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($custom-gauge-theme); +@function igx-linear-gauge-theme( + $palette: $default-palette, + $schema: $light-schema, + $rest... +) { + $name: 'linear-gauge'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend( + $theme, + keywords($rest), + ( + name: $name, + ), + ); +} + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $custom-gauge-theme: igx-radial-gauge-theme($brushes: (red, green, blue)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($custom-gauge-theme); +@function igx-radial-gauge-theme( + $palette: $default-palette, + $schema: $light-schema, + $rest... +) { + $name: 'radial-gauge'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend( + $theme, + keywords($rest), + ( + name: $name, + ), + ); +} + +/// Adds typography styles for the linear-gauge component. +/// @access private +/// @group typography +/// @requires {mixin} igx-type-style +@mixin igx-gauge-typography() { + $scope: if(is-root(), ':root', '&'); + + #{$scope} { + @include css-vars-from-theme((font: inherit), 'linear-gauge'); + @include css-vars-from-theme((font: inherit), 'radial-gauge'); + } +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss new file mode 100644 index 00000000000..c63cdbc9e71 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_geo-map-theme.scss @@ -0,0 +1,39 @@ +//// +/// @group themes +/// @access private +/// @author Dilyana Dimova +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @param {String} $plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area. +/// @requires $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-map-theme: igx-geo-map-theme($width: 550px); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-map-theme); +@function igx-geo-map-theme( + $palette: $default-palette, + $schema: $light-schema, + $plot-area-background: null +) { + $name: 'geo-map'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend( $theme, ( + name: $name, + plot-area-background: $plot-area-background + )); +} diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss new file mode 100644 index 00000000000..690777ba12f --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_graph-theme.scss @@ -0,0 +1,113 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-bullet-graph-theme($brushes: (orange, blue, pink)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-bullet-graph-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend( + $theme, + ( + name: $name, + 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} igx-type-style +@mixin igx-graph-typography() { + $scope: if(is-root(), ':root', '&'); + + #{$scope} { + @include css-vars-from-theme((font: inherit), 'bullet-graph'); + } +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss new file mode 100644 index 00000000000..ffda53f06fb --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_pie-chart-theme.scss @@ -0,0 +1,68 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-pie-chart-theme($brushes: (red, orange, blue)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-pie-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + + @return extend( $theme, ( + name: $name, + 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, + )); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss new file mode 100644 index 00000000000..9613072bd23 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_shape-chart-theme.scss @@ -0,0 +1,248 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-chart-theme: igx-shape-chart-theme($brushes: (orange, blue, pink)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-chart-theme); +@function igx-shape-chart-theme( + $palette: $default-palette, + $schema: $light-schema, + $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'; + $chart-schema: (); + + @if map-has-key($schema, $name) { + $chart-schema: map-get($schema, $name); + } @else { + $chart-schema: $schema; + } + + $theme: apply-palette($chart-schema, $palette); + $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, + 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 data-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} igx-type-style +@mixin igx-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', +)) { + $name: 'shape-chart'; + $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: igx-type-scale-category($type-scale, $title); + $subtitle-styles: igx-type-scale-category($type-scale, $subtitle); + $x-axis-title-styles: igx-type-scale-category($type-scale, $x-axis-title-text-style); + $x-axis-label-styles: igx-type-scale-category($type-scale, $x-axis-label-text-style); + $y-axis-title-styles: igx-type-scale-category($type-scale, $y-axis-title-text-style); + $y-axis-label-styles: igx-type-scale-category($type-scale, $y-axis-label-text-style); + + @include igx-font-var('title-text-style', $title-styles, $name); + @include igx-font-var('subtitle-text-style', $subtitle-styles, $name); + @include igx-font-var('x-axis-title-text-style', $x-axis-title-styles, $name); + @include igx-font-var('x-axis-label-text-style', $x-axis-label-styles, $name); + @include igx-font-var('y-axis-title-text-style', $y-axis-title-styles, $name); + @include igx-font-var('y-axis-label-text-style', $y-axis-label-styles, $name); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss new file mode 100644 index 00000000000..a799325525a --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/components/charts/_sparkline-theme.scss @@ -0,0 +1,102 @@ +//// +/// @group themes +/// @access public +/// @author Simeon Simeonoff +//// + +/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component. +/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component. +/// +/// @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 $default-palette +/// @requires $light-schema +/// @requires apply-palette +/// @requires extend +/// +/// @example scss +/// $my-sparkline-theme: igx-sparkline-theme($brushes: (orange, blue, pink)); +/// // Pass the theme to the igx-css-vars mixin +/// @include igx-css-vars($my-sparkline-theme); +@function igx-sparkline-theme( + $palette: $default-palette, + $schema: $light-schema, + + $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'; + $sparkline-schema: (); + + @if map-has-key($schema, $name) { + $sparkline-schema: map-get($schema, $name); + } @else { + $sparkline-schema: $schema; + } + + $theme: apply-palette($sparkline-schema, $palette); + + @return extend( + $theme, + ( + name: $name, + 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, + ) + ); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss index 7c8bbe3ec33..7991f398f49 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss @@ -17,6 +17,17 @@ @import '../components/calendar/calendar-theme'; @import '../components/card/card-theme'; @import '../components/carousel/carousel-theme'; +@import '../components/charts/data-chart-theme'; +@import '../components/charts/doughnut-chart-theme'; +@import '../components/charts/gauge-theme'; +@import '../components/charts/financial-chart-theme'; +@import '../components/charts/graph-theme'; +@import '../components/charts/category-chart-theme'; +@import '../components/charts/geo-map-theme'; +@import '../components/charts/pie-chart-theme'; +@import '../components/charts/sparkline-theme'; +@import '../components/charts/funnel-chart-theme'; +@import '../components/charts/shape-chart-theme'; @import '../components/checkbox/checkbox-theme'; @import '../components/chip/chip-theme'; @import '../components/column-hiding/column-hiding-theme'; @@ -214,6 +225,90 @@ )); } + @if not(index($exclude, 'data-chart')) { + @include igx-css-vars(igx-data-chart-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'doughnut-chart')) { + @include igx-css-vars(igx-doughnut-chart-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'linear-gauge')) { + @include igx-css-vars(igx-linear-gauge-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'radial-gauge')) { + @include igx-css-vars(igx-radial-gauge-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'financial-chart')) { + @include igx-css-vars(igx-financial-chart-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'bullet-graph')) { + @include igx-css-vars(igx-bullet-graph-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'category-chart')) { + @include igx-css-vars(igx-category-chart-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'geo-map')) { + @include igx-css-vars(igx-geo-map-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'pie-chart')) { + @include igx-css-vars(igx-pie-chart-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'sparkline')) { + @include igx-css-vars(igx-sparkline-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'funnel-chart')) { + @include igx-css-vars(igx-funnel-chart-theme( + $palette, + $schema, + )); + } + + @if not(index($exclude, 'shape-chart')) { + @include igx-css-vars(igx-shape-chart-theme( + $palette, + $schema, + )); + } + @if not(index($exclude, 'igx-checkbox')) { @include igx-checkbox(igx-checkbox-theme( $palette, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss new file mode 100644 index 00000000000..e752febb7e6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_category-chart.scss @@ -0,0 +1,81 @@ +@import '../light/category-chart'; + +//// +/// @group schemas +/// @access private +/// @author Silvia Ivanova +//// + +/// Generates the base dark category-chart schema. +/// @type {Map} +/// @prop {Color} title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the chart title. +/// @prop {Color} subtitle-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the chart subtitle. +/// @prop {Color} x-axis-label-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of labels on the X-axis. +/// @prop {Color} x-axis-tick-stroke [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color to apply to tickmarks along the X-axis. +/// @prop {Color} x-axis-title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the title on the X-axis. +/// @prop {Color} y-axis-label-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of labels on the Y-axis. +/// @prop {Color} y-axis-tick-stroke [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color to apply to tickmarks along the Y-axis. +/// @prop {Color} y-axis-title-text-color [igx-color: ('grays', 400), hexrgba: #fff] - Sets the color of the title on the Y-axis. +$_base-dark-category-chart: ( + title-text-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + subtitle-text-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + x-axis-label-text-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + x-axis-title-text-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + x-axis-tick-stroke: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + y-axis-label-text-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + y-axis-title-text-color: ( + igx-color: ('grays', 400), + hexrgba: #fff + ), + + y-axis-tick-stroke: ( + igx-color: ('grays', 400), + hexrgba: #fff + ) +); + +/// Generates a dark category-chart schema based on a mix of $_light-category-chart and $_base-dark-category-chart +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-category-chart +/// @requires $_base-dark-category-chart +/// @see $default-palette +$_dark-category-chart: extend($_light-category-chart, $_base-dark-category-chart); + +/// Generates a dark fluent category-chart schema based on a mix of $_fluent-category-chart and $_base-dark-category-chart +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-category-chart +/// @requires $_base-dark-category-chart +$_dark-fluent-category-chart: extend($_fluent-category-chart, $_base-dark-category-chart); + +/// Generates a bootstrap category-chart schema based on a mix of $_bootstrap-category-chart and $_base-dark-category-chart +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-category-chart +/// @requires $_base-dark-category-chart +$_dark-bootstrap-category-chart: extend($_bootstrap-category-chart, $_base-dark-category-chart); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss new file mode 100644 index 00000000000..37d775d5e96 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_data-chart.scss @@ -0,0 +1,26 @@ +@import '../light/data-chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark data chart schema. +/// @type {Map} +/// @requires $_light-data-chart +/// @see $default-palette +$_dark-data-chart: extend($_light-data-chart); + +/// Generates a dark fluent data-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-data-chart +$_dark-fluent-data-chart: extend($_fluent-data-chart); + +/// Generates a dark bootstrap data-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-data-chart +$_dark-bootstrap-data-chart: extend($_bootstrap-data-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss new file mode 100644 index 00000000000..05b0eec2d74 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_doughnut-chart.scss @@ -0,0 +1,26 @@ +@import '../light/doughnut-chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark doughnut chart schema. +/// @type {Map} +/// @requires $_light-doughnut-chart +/// @see $default-palette +$_dark-doughnut-chart: extend($_light-doughnut-chart); + +/// Generates a dark fluent doughnut-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-doughnut-chart +$_dark-fluent-doughnut-chart: extend($_fluent-doughnut-chart); + +/// Generates a dark bootstrap doughnut-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-doughnut-chart +$_dark-bootstrap-doughnut-chart: extend($_bootstrap-doughnut-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss new file mode 100644 index 00000000000..c5081067215 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_financial-chart.scss @@ -0,0 +1,25 @@ +@import '../light/financial-chart'; + +//// +/// @group schemas +/// @access private +/// @author Dilyana Dimova +//// + +/// Generates a dark financial chart schema. +/// @type {Map} +/// @requires $_light-financial-chart +/// @see $default-palette +$_dark-financial-chart: extend($_light-financial-chart); + +/// Generates a dark fluent financial-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-financial-chart +$_dark-fluent-financial-chart: extend($_fluent-financial-chart); + +/// Generates a dark bootstrap financial-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-financial-chart +$_dark-bootstrap-financial-chart: extend($_bootstrap-financial-chart); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss new file mode 100644 index 00000000000..02a2176235c --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_funnel-chart.scss @@ -0,0 +1,25 @@ +@import '../light/funnel-chart'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a dark funnel chart schema. +/// @type {Map} +/// @requires $_light-funnel-chart +/// @see $default-palette +$_dark-funnel-chart: extend($_light-funnel-chart); + +/// Generates a dark fluent funnel-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-funnel-chart +$_dark-fluent-funnel-chart: extend($_fluent-funnel-chart); + +/// Generates a dark bootstrap funnel-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-funnel-chart +$_dark-bootstrap-funnel-chart: extend($_bootstrap-funnel-chart); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss new file mode 100644 index 00000000000..2ec1b18ac99 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_gauge.scss @@ -0,0 +1,43 @@ +@import '../light/gauge'; + +//// +/// @group schemas +/// @access private +/// @author Silvia Ivanova +//// + +/// Generates dark gauge schemas. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-linear-gauge +$_dark-linear-gauge: extend($_light-linear-gauge); + +/// Generates dark gauge schemas. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-radial-gauge +$_dark-radial-gauge: extend($_light-radial-gauge); + +/// Generates a dark fluent gauge schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-linear-gauge +$_dark-fluent-linear-gauge: extend($_fluent-linear-gauge); + +/// Generates a dark fluent gauge schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-radial-gauge +$_dark-fluent-radial-gauge: extend($_fluent-radial-gauge); + +/// Generates a dark bootstrap gauge schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-linear-gauge +$_dark-bootstrap-linear-gauge: extend($_bootstrap-linear-gauge); + +/// Generates a dark bootstrap gauge schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-radial-gauge +$_dark-bootstrap-radial-gauge: extend($_bootstrap-radial-gauge); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss new file mode 100644 index 00000000000..e3ad80228fe --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_geo-map.scss @@ -0,0 +1,28 @@ +@import '../light/geo-map'; + +//// +/// @group schemas +/// @access private +/// @author Dilyana Dimova +//// + +/// Generates a dark base geo map schema. +/// @type {Map} +/// @requires $_light-geo-map +/// @see $_light-geo-map +$_dark-geo-map: extend($_light-geo-map); + +/// Generates a dark fluent geo map schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-geo-map +/// @see $_fluent-geo-map +$_dark-fluent-geo-map: extend($_fluent-geo-map); + +/// Generates a dark bootstrap geo map schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-geo-map +/// @see $_bootstrap-geo-map +$_dark-bootstrap-geo-map: extend($_bootstrap-geo-map); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss new file mode 100644 index 00000000000..a1a0a5bdbe9 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_graph.scss @@ -0,0 +1,26 @@ +@import '../light/graph'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark graph schema. +/// @type {Map} +/// @requires $_light-graph +/// @see $default-palette +$_dark-graph: extend($_light-graph); + +/// Generates a dark fluent graph schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-graph +$_dark-fluent-graph: extend($_fluent-graph); + +/// Generates a dark bootstrap graph schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-graph +$_dark-bootstrap-graph: extend($_bootstrap-graph); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss index 55abd101b9b..28a09a2b512 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_index.scss @@ -13,15 +13,22 @@ @import './calendar'; @import './card'; @import './carousel'; +@import './category-chart'; @import './checkbox'; @import './chip'; @import './column-hiding'; @import './combo'; @import './dialog'; +@import './data-chart'; +@import './doughnut-chart'; @import './date-range-picker'; @import './divider'; @import './drop-down'; @import './expansion-panel'; +@import './gauge'; +@import './financial-chart'; +@import './graph'; +@import './funnel-chart'; @import './grid'; @import './grid-filtering'; @import './pagination'; @@ -31,15 +38,19 @@ @import './icon'; @import './input-group'; @import './list'; +@import './geo-map'; @import './navbar'; @import './navdrawer'; @import './overlay'; @import './progress'; +@import './pie-chart'; @import './radio'; @import './ripple'; @import './scrollbar'; +@import './shape-chart'; @import './slider'; @import './snackbar'; +@import './sparkline'; @import './splitter'; @import './switch'; @import './tabs'; @@ -59,34 +70,46 @@ /// @property {Map} igx-calendar [$_dark-calendar] /// @property {Map} igx-card [$_dark-card] /// @property {Map} igx-carousel [$_dark-carousel] +/// @property {Map} category-chart [$_dark-category-chart] /// @property {Map} igx-checkbox [$_dark-checkbox] /// @property {Map} igx-chip [$_dark-chip] /// @property {Map} igx-column-hiding [$_dark-column-hiding] /// @property {Map} igx-combo [$_dark-combo] /// @property {Map} igx-dialog [$_dark-dialog] +/// @property {Map} data-chart [$_dark-data-chart] +/// @property {Map} doughnut-chart [$_dark-doughnut-chart] /// @property {Map} igx-date-range-picker [$_dark-date-range-picker] /// @property {Map} igx-divider [$_dark-divider] /// @property {Map} igx-drop-down [$_dark-drop-down] /// @property {Map} igx-expansion-panel [$_dark-expansion-panel] +/// @property {Map} linear-gauge [$_dark-linear-gauge] +/// @property {Map} radial-gauge [$_dark-radial-gauge] +/// @property {Map} financial-chart [$_dark-financial-chart] +/// @property {Map} bullet-graph [$_dark-graph] /// @property {Map} igx-grid [$_dark-grid] /// @property {Map} igx-grid-filtering [$_dark-grid-filtering] /// @property {Map} igx-paginator [$_dark-pagination] +/// @property {Map} funnel-chart [$_dark-funnel-chart] /// @property {Map} igx-grid-summary [$_dark-grid-summary] /// @property {Map} igx-grid-toolbar [$_dark-grid-toolbar] /// @property {Map} igx-highlight [$_dark-highlight] /// @property {Map} igx-icon [$_dark-icon] /// @property {Map} igx-input-group [$_dark-input-group] /// @property {Map} igx-list [$_dark-list] +/// @property {Map} geo-map [$_dark-geo-map] /// @property {Map} igx-navbar [$_dark-navbar] /// @property {Map} igx-navdrawer [$_dark-navdrawer] /// @property {Map} igx-overlay [$_dark-overlay] /// @property {Map} igx-progress-linear [$_dark-progress-linear] /// @property {Map} igx-progress-circular [$_dark-progress-circular] +/// @property {Map} pie-chart [$_dark-pie-chart] /// @property {Map} igx-radio [$_dark-radio] /// @property {Map} igx-ripple [$_dark-ripple] /// @property {Map} igx-scrollbar [$_dark-scrollbar] +/// @property {Map} shape-chart [$_dark-shape-chart] /// @property {Map} igx-slider [$_dark-slider] /// @property {Map} igx-snackbar [$_dark-snackbar] +/// @property {Map} sparkline [$_dark-sparkline] /// @property {Map} igx-splitter [$_dark-splitter] /// @property {Map} igx-switch [$_dark-switch] /// @property {Map} igx-tabs [$_dark-tabs] @@ -104,15 +127,23 @@ $dark-schema: ( igx-calendar: $_dark-calendar, igx-card: $_dark-card, igx-carousel: $_dark-carousel, + category-chart: $_dark-category-chart, igx-checkbox: $_dark-checkbox, igx-chip: $_dark-chip, igx-column-hiding: $_dark-column-hiding, igx-combo: $_dark-combo, igx-dialog: $_dark-dialog, + data-chart: $_dark-data-chart, + doughnut-chart: $_dark-doughnut-chart, igx-date-range: $_dark-date-range-picker, igx-divider: $_dark-divider, igx-drop-down: $_dark-drop-down, igx-expansion-panel: $_dark-expansion-panel, + linear-gauge: $_dark-linear-gauge, + radial-gauge: $_dark-radial-gauge, + financial-chart: $_dark-financial-chart, + bullet-graph: $_dark-graph, + funnel-chart: $_dark-funnel-chart, igx-grid: $_dark-grid, igx-grid-filtering: $_dark-grid-filtering, igx-paginator: $_dark-pagination, @@ -122,16 +153,20 @@ $dark-schema: ( igx-icon: $_dark-icon, igx-input-group: $_dark-input-group, igx-list: $_dark-list, + geo-map: $_dark-geo-map, igx-navbar: $_dark-navbar, igx-navdrawer: $_dark-navdrawer, igx-overlay: $_dark-overlay, igx-linear-bar: $_dark-progress-linear, igx-circular-bar: $_dark-progress-circular, + pie-chart: $_dark-pie-chart, igx-radio: $_dark-radio, igx-ripple: $_dark-ripple, igx-scrollbar: $_dark-scrollbar, + shape-chart: $_dark-shape-chart, igx-slider: $_dark-slider, igx-snackbar: $_dark-snackbar, + sparkline: $_dark-sparkline, igx-splitter: $_dark-splitter, igx-switch: $_dark-switch, igx-tabs: $_dark-tabs, @@ -152,34 +187,46 @@ $dark-schema: ( /// @property {map} igx-calendar [$_dark-fluent-calendar], /// @property {map} igx-card [$_dark-fluent-card], /// @property {map} igx-carousel [$_dark-fluent-carousel], +/// @property {map} category-chart [$_dark-fluent-category-chart] /// @property {map} igx-checkbox [$_dark-fluent-checkbox], /// @property {map} igx-chip [$_dark-fluent-chip], /// @property {map} igx-column-hiding [$_dark-fluent-column-hiding], /// @property {map} igx-combo [$_dark-fluent-combo], /// @property {map} igx-dialog [$_dark-fluent-dialog], +/// @property {Map} data-chart [$_dark-fluent-data-chart] +/// @property {Map} doughnut-chart [$_dark-fluent-doughnut-chart] /// @property {map} igx-date-range-picker [$_dark-fluent-date-range-picker], /// @property {map} igx-divider [$_dark-fluent-divider], /// @property {map} igx-drop-down [$_dark-fluent-drop-down], /// @property {map} igx-expansion-panel [$_dark-fluent-expansion-panel], +/// @property {Map} linear-gauge [$_dark-fluent-linear-gauge] +/// @property {Map} radial-gauge [$_dark-fluent-radial-gauge] +/// @property {map} financial-chart [$_dark-fluent-financial-chart] +/// @property {map} bullet-graph [$_dark-fluent-graph], /// @property {map} igx-grid [$_dark-fluent-grid], /// @property {map} igx-grid-filtering [$_dark-fluent-grid-filtering], /// @property {map} igx-paginator [$_dark-fluent-pagination], +/// @property {map} funnel-chart [$_dark-fluent-funnel-chart], /// @property {map} igx-grid-summary [$_dark-fluent-grid-summary], /// @property {map} igx-grid-toolbar [$_dark-fluent-grid-toolbar], /// @property {map} igx-highlight [$_dark-fluent-highlight], /// @property {map} igx-icon [$_dark-fluent-icon], /// @property {map} igx-input-group [$_dark-fluent-input-group], /// @property {map} igx-list [$_dark-fluent-list], +/// @property {Map} geo-map [$_dark-fluent-geo-map] /// @property {map} igx-navbar [$_dark-fluent-navbar], /// @property {map} igx-navdrawer [$_dark-fluent-navdrawer], /// @property {map} igx-overlay [$_dark-fluent-overlay], /// @property {map} igx-linear-bar [$_dark-fluent-progress-linear], /// @property {map} igx-circular-bar [$_dark-fluent-progress-circular], +/// @property {Map} pie-chart [$_dark-fluent-pie-chart], /// @property {map} igx-radio [$_dark-fluent-radio], /// @property {map} igx-ripple [$_dark-fluent-ripple], /// @property {map} igx-scrollbar [$_dark-fluent-scrollbar], +/// @property {map} shape-chart [$_dark-fluent-shape-chart], /// @property {map} igx-slider [$_dark-fluent-slider], /// @property {map} igx-snackbar [$_dark-fluent-snackbar], +/// @property {map} sparkline [$_dark-fluent-sparkline], /// @property {map} igx-splitter [$_dark-fluent-splitter], /// @property {map} igx-switch [$_dark-fluent-switch], /// @property {map} igx-tabs [$_dark-fluent-tabs], @@ -197,34 +244,46 @@ $dark-fluent-schema: ( igx-calendar: $_dark-fluent-calendar, igx-card: $_dark-fluent-card, igx-carousel: $_dark-fluent-carousel, + category-chart: $_dark-fluent-category-chart, igx-checkbox: $_dark-fluent-checkbox, igx-chip: $_dark-fluent-chip, igx-column-hiding: $_dark-fluent-column-hiding, igx-combo: $_dark-fluent-combo, igx-dialog: $_dark-fluent-dialog, + data-chart: $_dark-fluent-data-chart, + doughnut-chart: $_dark-fluent-doughnut-chart, igx-date-range: $_dark-fluent-date-range-picker, igx-divider: $_dark-fluent-divider, igx-drop-down: $_dark-fluent-drop-down, igx-expansion-panel: $_dark-fluent-expansion-panel, + linear-gauge: $_dark-fluent-linear-gauge, + radial-gauge: $_dark-fluent-radial-gauge, + financial-chart: $_dark-fluent-financial-chart, + bullet-graph: $_dark-fluent-graph, igx-grid: $_dark-fluent-grid, igx-grid-filtering: $_dark-fluent-grid-filtering, igx-paginator: $_dark-fluent-pagination, + funnel-chart: $_dark-fluent-funnel-chart, igx-grid-summary: $_dark-fluent-grid-summary, igx-grid-toolbar: $_dark-fluent-grid-toolbar, igx-highlight: $_dark-fluent-highlight, igx-icon: $_dark-fluent-icon, igx-input-group: $_dark-fluent-input-group, igx-list: $_dark-fluent-list, + geo-map: $_dark-fluent-geo-map, igx-navbar: $_dark-fluent-navbar, igx-navdrawer: $_dark-fluent-navdrawer, igx-overlay: $_dark-fluent-overlay, igx-linear-bar: $_dark-fluent-progress-linear, igx-circular-bar: $_dark-fluent-progress-circular, + pie-chart: $_dark-fluent-pie-chart, igx-radio: $_dark-fluent-radio, igx-ripple: $_dark-fluent-ripple, igx-scrollbar: $_dark-fluent-scrollbar, + shape-chart: $_dark-fluent-shape-chart, igx-slider: $_dark-fluent-slider, igx-snackbar: $_dark-fluent-snackbar, + sparkline: $_dark-fluent-sparkline, igx-splitter: $_dark-fluent-splitter, igx-switch: $_dark-fluent-switch, igx-tabs: $_dark-fluent-tabs, @@ -245,34 +304,46 @@ $dark-fluent-schema: ( /// @property {map} igx-calendar [$_dark-bootstrap-calendar], /// @property {map} igx-card [$_dark-bootstrap-card], /// @property {map} igx-carousel [$_dark-bootstrap-carousel], +/// @property {map} category-chart [$_dark-bootstrap-category-chart] /// @property {map} igx-checkbox [$_dark-bootstrap-checkbox], /// @property {map} igx-chip [$_dark-bootstrap-chip], /// @property {map} igx-column-hiding [$_dark-bootstrap-column-hiding], /// @property {map} igx-combo [$_dark-bootstrap-combo], /// @property {map} igx-dialog [$_dark-bootstrap-dialog], +/// @property {Map} data-chart [$_dark-bootstrap-data-chart] +/// @property {Map} doughnut-chart [$_dark-bootstrap-doughnut-chart] /// @property {map} igx-date-range-picker [$_dark-bootstrap-date-range-picker], /// @property {map} igx-divider [$_dark-bootstrap-divider], /// @property {map} igx-drop-down [$_dark-bootstrap-drop-down], /// @property {map} igx-expansion-panel [$_dark-bootstrap-expansion-panel], +/// @property {Map} linear-gauge [$_dark-bootstrap-linear-gauge] +/// @property {Map} radial-gauge [$_dark-bootstrap-radial-gauge] +/// @property {map} financial-chart [$_dark-bootstrap-financial-chart] +/// @property {map} bullet-graph [$_dark-bootstrap-graph], /// @property {map} igx-grid [$_dark-bootstrap-grid], /// @property {map} igx-grid-filtering [$_dark-bootstrap-grid-filtering], /// @property {map} igx-paginator [$_dark-bootstrap-pagination], +/// @property {map} funnel-chart [$_dark-bootstrap-funnel-chart], /// @property {map} igx-grid-summary [$_dark-bootstrap-grid-summary], /// @property {map} igx-grid-toolbar [$_dark-bootstrap-grid-toolbar], /// @property {map} igx-highlight [$_dark-bootstrap-highlight], /// @property {map} igx-icon [$_dark-bootstrap-icon], /// @property {map} igx-input-group [$_dark-bootstrap-input-group], /// @property {map} igx-list [$_dark-bootstrap-list], +/// @property {Map} geo-map [$_dark-bootstrap-geo-map] /// @property {map} igx-navbar [$_dark-bootstrap-navbar], /// @property {map} igx-navdrawer [$_dark-bootstrap-navdrawer], /// @property {map} igx-overlay [$_dark-bootstrap-overlay], /// @property {map} igx-linear-bar [$_dark-bootstrap-progress-linear], /// @property {map} igx-circular-bar [$_dark-bootstrap-progress-circular], +/// @property {Map} pie-chart [$_dark-bootstrap-pie-chart], /// @property {map} igx-radio [$_dark-bootstrap-radio], /// @property {map} igx-ripple [$_dark-bootstrap-ripple], /// @property {map} igx-scrollbar [$_dark-bootstrap-scrollbar], +/// @property {map} shape-chart [$_dark-bootstrap-shape-chart], /// @property {map} igx-slider [$_dark-bootstrap-slider], /// @property {map} igx-snackbar [$_dark-bootstrap-snackbar], +/// @property {map} sparkline [$_dark-bootstrap-sparkline], /// @property {map} igx-splitter [$_dark-bootstrap-splitter], /// @property {map} igx-switch [$_dark-bootstrap-switch], /// @property {map} igx-tabs [$_dark-bootstrap-tabs], @@ -290,34 +361,46 @@ $dark-bootstrap-schema: ( igx-calendar: $_dark-bootstrap-calendar, igx-card: $_dark-bootstrap-card, igx-carousel: $_dark-bootstrap-carousel, + category-chart: $_dark-bootstrap-category-chart, igx-checkbox: $_dark-bootstrap-checkbox, igx-chip: $_dark-bootstrap-chip, igx-column-hiding: $_dark-bootstrap-column-hiding, igx-combo: $_dark-bootstrap-combo, igx-dialog: $_dark-bootstrap-dialog, + data-chart: $_dark-bootstrap-data-chart, + doughnut-chart: $_dark-bootstrap-doughnut-chart, igx-date-range: $_dark-bootstrap-date-range-picker, igx-divider: $_dark-bootstrap-divider, igx-drop-down: $_dark-bootstrap-drop-down, igx-expansion-panel: $_dark-bootstrap-expansion-panel, + linear-gauge: $_dark-bootstrap-linear-gauge, + radial-gauge: $_dark-bootstrap-radial-gauge, + financial-chart: $_dark-bootstrap-financial-chart, + bullet-graph: $_dark-bootstrap-graph, igx-grid: $_dark-bootstrap-grid, igx-grid-filtering: $_dark-bootstrap-grid-filtering, igx-paginator: $_dark-bootstrap-pagination, + funnel-chart: $_dark-bootstrap-funnel-chart, igx-grid-summary: $_dark-bootstrap-grid-summary, igx-grid-toolbar: $_dark-bootstrap-grid-toolbar, igx-highlight: $_dark-bootstrap-highlight, igx-icon: $_dark-bootstrap-icon, igx-input-group: $_dark-bootstrap-input-group, igx-list: $_dark-bootstrap-list, + geo-map: $_dark-bootstrap-geo-map, igx-navbar: $_dark-bootstrap-navbar, igx-navdrawer: $_dark-bootstrap-navdrawer, igx-overlay: $_dark-bootstrap-overlay, igx-linear-bar: $_dark-bootstrap-progress-linear, igx-circular-bar: $_dark-bootstrap-progress-circular, + pie-chart: $_dark-bootstrap-pie-chart, igx-radio: $_dark-bootstrap-radio, igx-ripple: $_dark-bootstrap-ripple, igx-scrollbar: $_dark-bootstrap-scrollbar, + shape-chart: $_dark-bootstrap-shape-chart, igx-slider: $_dark-bootstrap-slider, igx-snackbar: $_dark-bootstrap-snackbar, + sparkline: $_dark-bootstrap-sparkline, igx-splitter: $_dark-bootstrap-splitter, igx-switch: $_dark-bootstrap-switch, igx-tabs: $_dark-bootstrap-tabs, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss new file mode 100644 index 00000000000..53732a88024 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_pie-chart.scss @@ -0,0 +1,29 @@ +@import '../light/pie-chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark base pie chart schema. +/// @type {Map} +/// @requires $_light-pie-chart +/// @see $_light-pie-chart +$_dark-pie-chart: extend($_light-pie-chart); + +/// Generates a dark fluent pie chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-pie-chart +/// @see $_fluent-pie-chart +$_dark-fluent-pie-chart: extend($_fluent-pie-chart); + +/// Generates a dark bootstrap pie chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-pie-chart +/// @see $_bootstrap-pie-chart +$_dark-fluent-pie-chart: extend($_fluent-pie-chart); +$_dark-bootstrap-pie-chart: extend($_bootstrap-pie-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss new file mode 100644 index 00000000000..3d0fae107f7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_shape-chart.scss @@ -0,0 +1,26 @@ +@import '../light/shape-chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark shape chart schema. +/// @type {Map} +/// @requires $_light-shape-chart +/// @see $default-palette +$_dark-shape-chart: extend($_light-shape-chart); + +/// Generates a dark fluent shape-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-shape-chart +$_dark-fluent-shape-chart: extend($_fluent-shape-chart); + +/// Generates a dark bootstrap shape-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-shape-chart +$_dark-bootstrap-shape-chart: extend($_bootstrap-shape-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss new file mode 100644 index 00000000000..65417666b7a --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_sparkline.scss @@ -0,0 +1,26 @@ +@import '../light/sparkline'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a dark sparkline schema. +/// @type {Map} +/// @requires $_light-sparkline +/// @see $default-palette +$_dark-sparkline: extend($_light-sparkline); + +/// Generates a dark fluent sparkline schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_fluent-sparkline +$_dark-fluent-sparkline: extend($_fluent-sparkline); + +/// Generates a dark bootstrap sparkline schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_bootstrap-sparkline +$_dark-bootstrap-sparkline: extend($_bootstrap-sparkline); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss new file mode 100644 index 00000000000..3b729f6648d --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_category-chart.scss @@ -0,0 +1,232 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Silvia Ivanova +//// + +/// Generates a light category chart schema. +/// @type {Map} +/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content. +/// @property {List} brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected. +/// @property {List} marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected. +/// @property {List} negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall. +/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. +/// @property {List} marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected. +/// @property {List} negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall. +/// @property {String} title-alignment [null] - The horizontal alignment to use for the title. +/// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title. +/// @property {Color} title-text-color [null] - Sets the color of the chart title. +/// @property {String} title-text-style [null] - Sets the CSS font property of the chart title. +/// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle. +/// @property {String} subtitle-alignment [null] - The horizontal alignment to use for the subtitle. +/// @property {Color} subtitle-text-color [null] - Sets the color of the chart subtitle. +/// @property {String} subtitle-text-style [null] - Sets the CSS font property of the chart subtitle. +/// @property {Number} thickness [null] - Sets the thickness for all series in a chart. +/// @property {List} trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart. +/// @property {Number} trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble. +/// @property {List} x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis. +/// @property {Color} x-axis-label-text-color [null] - Sets the color of labels on the X-axis. +/// @property {String} x-axis-label-text-style [null] - Sets the CSS font property for labels on X-axis. +/// @property {String} x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels. +/// @property {Color} x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis. +/// @property {Number} x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis. +/// @property {Color} x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis. +/// @property {Number} x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis. +/// @property {Color} x-axis-strip [null] - Sets the color to apply to stripes along the X-axis. +/// @property {Color} x-axis-stroke [null] - Sets the color to apply to the X-axis line. +/// @property {Number} x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line. +/// @property {Number} x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis. +/// @property {Color} x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis. +/// @property {Number} x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis. +/// @property {String} x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title. +/// @property {List} x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis. +/// @property {Color} x-axis-title-text-color [null] - Sets the color of the title on the X-axis. +/// @property {String} x-axis-title-text-style [null] - Sets the CSS font property for the title on the X-axis. +/// @property {List} y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis. +/// @property {Color} y-axis-label-text-color [null] - Sets the color of labels on the Y-axis. +/// @property {String} y-axis-label-text-style [null] - Sets the CSS font property for labels on Y-axis. +/// @property {String} y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels. +/// @property {Color} y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis. +/// @property {Number} y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis. +/// @property {Color} y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis. +/// @property {Number} y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis. +/// @property {Color} y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis. +/// @property {Color} y-axis-stroke [null] - Sets the color to apply to the Y-axis line. +/// @property {Number} y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line. +/// @property {String} y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title. +/// @property {List} y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis. +/// @property {Color} y-axis-title-text-color [null] - Sets the color of a title on the Y-axis. +/// @property {String} y-axis-title-text-style [null] - Sets the CSS font property for the title on the Y-axis. +/// @property {Number} y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis. +/// @property {Color} y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis. +/// @property {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis. +/// @see $default-palette +$_light-category-chart: extend( + ( + 'margin': ( + expand-shorthand: (null) + ), + + 'brushes': series, + + 'marker-brushes': series, + + 'negative-brushes': series, + + 'outlines': series, + + 'marker-outlines': series, + + 'negative-outlines': series, + + 'title-alignment': null, + + 'title-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'title' + ), + + 'title-text-color': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + 'title-text-style': null, + + 'subtitle-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'subtitle' + ), + + 'subtitle-alignment': null, + + 'subtitle-text-color': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + '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' + ), + + 'x-axis-label-text-color': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + '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': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + 'x-axis-tick-stroke-thickness': null, + + 'x-axis-title-alignment': null, + + 'x-axis-title-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'x-axis-title' + ), + + 'x-axis-title-text-color': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + 'x-axis-title-text-style': null, + + 'y-axis-label-margin': ( + expand-shorthand: (null), + map-keys-prefix: 'y-axis-label' + ), + + 'y-axis-label-text-color': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + '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': ( + expand-shorthand: (null), + map-keys-prefix: 'y-axis-title' + ), + + 'y-axis-title-text-color': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + 'y-axis-title-text-style': null, + + 'y-axis-tick-length': null, + + 'y-axis-tick-stroke': ( + igx-color: ('grays', 700), + hexrgba: #fff + ), + + 'y-axis-tick-stroke-thickness': null + ) +); + +/// Generates a fluent category-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-category-chart +$_fluent-category-chart: extend($_light-category-chart); + +/// Generates a bootstrap category-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-category-chart +$_bootstrap-category-chart: extend($_light-category-chart); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss new file mode 100644 index 00000000000..9e7774de3e4 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_data-chart.scss @@ -0,0 +1,69 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light base data chart schema. +/// @type {Map} +/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content. +/// @property {Color} title-text-color [igx-color: ('grays', 900)] - Sets the color of the chart title. +/// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title. +/// @property {Color} subtitle-text-color [igx-color: ('grays', 600)] - Sets the color of the chart subtitle. +/// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle. +/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected. +/// @property {List} marker-brushes [series] - Defines the palette from which automatically assigned marker brushes are selected. +/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. +/// @property {List} marker-outlines [series] - Defines the palette from which automatically assigned marker outlines are selected. +/// @property {Color} plot-area-background [igx-color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area. +/// @property {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title. +/// @property {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle. +/// @see $default-palette +$_light-data-chart: extend( + ( + 'margin': null, + + 'title-text-color': ( + igx-color: ('grays', 900) + ), + + 'title-margin': null, + + 'subtitle-text-color': ( + igx-color: ('grays', 600) + ), + + 'subtitle-margin': null, + + 'brushes': series, + + 'marker-brushes': series, + + 'outlines': series, + + 'marker-outlines': series, + + 'plot-area-background': ( + igx-color: ('surface', 500) + ), + + 'title-horizontal-alignment': null, + + 'subtitle-horizontal-alignment': null, + ) +); + +/// Generates a fluent data-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-data-chart +$_fluent-data-chart: extend($_light-data-chart); + +/// Generates a bootstrap data-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-data-chart +$_bootstrap-data-chart: extend($_light-data-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss new file mode 100644 index 00000000000..d537307f2d0 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_doughnut-chart.scss @@ -0,0 +1,49 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light base doughnut chart schema. +/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected. +/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. +/// @property {Color} others-category-fill [null] - Sets the fill color for others category. +/// @property {Number} others-category-opacity [null] - Sets the opacity for others category. +/// @property {Color} others-category-stroke [null] - Sets the others category stroke color. +/// @property {Number} others-category-stroke-thickness [null] - Sets the others category stroke thickness. +/// @property {Color} selected-slice-fill [null] - Sets the fill color of the selected slice. +/// @property {Number} selected-slice-opacity [null] - Sets the opacity of the selected slice. +/// @property {Color} selected-slice-stroke [null] - Sets the stroke color of the selected slice. +/// @property {Number} selected-slice-stroke-thickness [null] - Sets the stroke thickness of the selected slice. +/// @type {Map} +/// @see $default-palette +$_light-doughnut-chart: extend( + ( + 'brushes': series, + 'outlines': series, + '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, + ) +); + +/// Generates a fluent doughnut-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-doughnut-chart +$_fluent-doughnut-chart: extend($_light-doughnut-chart); + +/// Generates a bootstrap doughnut-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-doughnut-chart +$_bootstrap-doughnut-chart: extend($_light-doughnut-chart); + + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss new file mode 100644 index 00000000000..58aa4e44c8d --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_financial-chart.scss @@ -0,0 +1,141 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Dilyana Dimova +//// + +/// Generates a light base chart schema. +/// @type {Map} +/// @prop {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content. +/// @prop {String} title-alignment [null] - The horizontal alignment to use for the title. +/// @prop {Color} title-text-color [null] - Sets the color of the chart title. +/// @prop {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title. +/// @prop {Color} subtitle-text-color [null] - Sets the color of the chart subtitle. +/// @prop {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle. +/// @prop {String} subtitle-alignment [null] - Gets or sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control. +/// @prop {List} brushes [series] - Defines the palette from which automatically assigned series brushes colors are selected. +/// @prop {List} marker-brushes [series]- Defines the palette from which automatically assigned series marker brushes colors are selected. +/// @prop {List} negative-brushes [series] - Defines the palette used for coloring negative items in a chart type with contextual coloring, such as Waterfall. +/// @prop {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. +/// @prop {List} marker-outlines [series] - Defines the palette from which automatically assigned series marker outline colors are selected. +/// @prop {List} negative-outlines [series] - Defines the brushes used for drawing negative elements in a chart type with contextual coloring, such as Waterfall. +/// @prop {List} indicator-brushes [series] - Defines the brushes used for financial indicators. +/// @prop {List} indicator-negative-brushes [series] - Defines the brushes used for negative elements in financial indicators. +/// @prop {Number} indicator-thickness [null]- Defines the palette from which automatically assigned series marker brushes colors are selected. +/// @prop {Color} plot-area-background [null]- Gets or sets the brush used as the background for the current Chart object's plot area. +/// @prop {Number} thickness [null] - Sets the thickness for all series in a chart. +/// @prop {Number} toolbar-height [null] - Sets the height of the tooolbar. +/// @prop {List} trend-line-brushes [series] - Defines the palette of brushes used for coloring trend lines in a chart. +/// @prop {Number} trend-line-thickness [null] - Sets the thickness of the trend lines in a chart of type point, line, spline or bubble. +/// @prop {List} volume-brushes [series]- Defines the brushes to use for filling volume series in the volume pane. +/// @prop {List} volume-outlines [series] - Defines the brushes to use for outlining volume series in the volume pane. +/// @prop {Number} volume-thickness [null]- Defines the outline thickness of volume series in the volume pane. +/// @prop {List} x-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the X-axis. +/// @prop {Color} x-axis-label-text-color [null] - Sets the color of labels on the X-axis. +/// @prop {String} x-axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels. +/// @prop {Color} x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis. +/// @prop {Number} x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis. +/// @prop {Color} x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis. +/// @prop {Number} x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis. +/// @prop {Color} x-axis-strip [null] - Sets the color to apply to stripes along the X-axis. +/// @prop {Color} x-axis-stroke [null] - Sets the color to apply to the X-axis line. +/// @prop {Number} x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line. +/// @prop {Number} x-axis-tick-length [null] - Sets the length of tickmarks along the X-axis. +/// @prop {Color} x-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the X-axis. +/// @prop {Number} x-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the X-axis. +/// @prop {String} x-axis-title-alignment [null] - Sets the horizontal alignment of the X-axis title. +/// @prop {List} x-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the X-axis. +/// @prop {Color} x-axis-title-text-color [null] - Sets the color of the title on the X-axis. +/// @prop {List} y-axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the Y-axis. +/// @prop {Color} y-axis-label-text-color [null] - Sets the color of labels on the Y-axis. +/// @prop {String} y-axis-label-vertical-alignment [null] - Sets the vertical alignment of Y-axis labels. +/// @prop {Color} y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the y-axis. +/// @prop {Number} y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis. +/// @prop {Color} y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis. +/// @prop {Number} y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis. +/// @prop {Color} y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis. +/// @prop {Color} y-axis-stroke [null] - Sets the color to apply to the Y-axis line. +/// @prop {Number} y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line. +/// @prop {String} y-axis-title-alignment [null] - Sets the horizontal alignment of the Y-axis title. +/// @prop {List} y-axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on the Y-axis. +/// @prop {Color} y-axis-title-text-color [null] - Sets the color of a title on the Y-axis. +/// @prop {Number} y-axis-tick-length [null] - Sets the length of tickmarks along the Y-axis. +/// @prop {Color} y-axis-tick-stroke [null] - Sets the color to apply to tickmarks along the Y-axis. +/// @prop {Number} y-axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along the Y-axis. +/// @prop {String} zoom-slider-x-axis-major-stroke [null] - Gets or sets stroke brush of major gridlines on x-axis of the zoom slider pane. +/// @prop {Number} zoom-slider-x-axis-major-stroke-thickness [null] - Gets or sets thickness of major gridlines on x-axis of the zoom slider pane. +/// @see $default-palette +$_light-financial-chart: extend( + ( + 'margin': null, + 'title-alignment': null, + 'title-text-color': null, + 'title-margin': null, + 'subtitle-text-color': null, + 'subtitle-margin': null, + 'subtitle-alignment': null, + 'brushes': series, + 'outlines': series, + 'marker-brushes': series, + 'marker-outlines': series, + 'plot-area-background': null, + 'indicator-brushes': series, + 'indicator-negative-brushes': series, + 'indicator-thickness': null, + 'negative-brushes': series, + 'negative-outlines': series, + 'overlay-brushes': series, + 'overlay-outlines': series, + 'overlay-thickness': series, + 'thickness': null, + 'toolbar-height': null, + 'trend-line-brushes': series, + 'trend-line-thickness': null, + 'volume-brushes': series, + 'volume-outlines': series, + '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 + ) +); + +/// Generates a fluent financial-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-financial-chart +$_fluent-financial-chart: extend($_light-financial-chart); + +/// Generates a bootstrap financial-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-financial-chart +$_bootstrap-financial-chart: extend($_light-financial-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss new file mode 100644 index 00000000000..0f7d2a239d6 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_funnel-chart.scss @@ -0,0 +1,45 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Marin Popov +//// + +/// Generates a light funnel chart schema. +/// @type {Map} +/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected. +/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. +/// @property {String} outer-label-alignment [null] - Sets which side of the chart the outer labels should appear. +/// @property {Color} outer-label-text-color [null] - Sets the Color used for the outer labels. +/// @property {String} outer-label-text-style [null] - Sets the text style for outer labels. +/// @property {Color} outer-label-visibility [null] - Sets whether the outer labels are visible. +/// @property {Number} outline-thickness [null] - Sets the thickness of outline around slices. +/// @property {Color} text-color [null] - Sets the Color used for the inner labels. +/// @property {String} text-style [null] - Sets the text style for inner labels. +/// @see $default-palette +$_light-funnel-chart: extend( + ( + 'brushes': series, + 'outlines': series, + 'outer-label-alignment': null, + 'outer-label-text-color': null, + 'outer-label-text-style': null, + 'outer-label-visibility': null, + 'outline-thickness': null, + 'text-color': null, + 'text-style': null, + ) +); + +/// Generates a fluent funnel-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-funnel-chart +$_fluent-funnel-chart: extend($_light-funnel-chart); + +/// Generates a bootstrap funnel-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-funnel-chart +$_bootstrap-funnel-chart: extend($_light-funnel-chart); diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss new file mode 100644 index 00000000000..1812c5c5707 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_gauge.scss @@ -0,0 +1,155 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Silvia Ivanova +//// + +/// Generates a light gauge schema. +/// @type {Map} +/// @property {Color} backing-brush [(igx-color: 'surface', darken: 8%)] - Sets the color to use to fill the backing of the linear gauge. +/// @property {Color} backing-outline [(igx-color: 'surface', darken: 8%)] - Sets the color to use for the outline of the backing. +/// @property {Number} backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline. +/// @property {Color} font-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the label font. +/// @property {Color} minor-tick-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks. +/// @property {Number} minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks. +/// @property {Color} needle-brush [(igx-color: 'primary')] - Sets the color to use for the needle element. +/// @property {Color} needle-outline [(igx-color: 'surface')] - Sets the color to use for the outline of needle element. +/// @property {Number} needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element. +/// @property {List} range-brushes [series] - Sets a collection of colors to be used as the palette for linear gauge ranges. +/// @property {List} range-outlines [series] - Sets a collection of colors to be used as the palette for linear gauge outlines. +/// @property {Color} scale-brush [(igx-color: 'surface', darken: 8%)] - Sets the color to use to fill the scale of the linear gauge. +/// @property {Color} tick-brush [(igx-color: 'surface', rgba: .62)] - Sets the color to use for the major tickmarks. +/// @property {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks. +/// @see $default-palette +$_light-gauge: extend( + ( + 'backing-brush': ( + igx-color: 'surface', + darken: 5% + ), + + 'backing-outline': ( + igx-color: 'surface', + darken: 8% + ), + + 'backing-stroke-thickness': null, + + 'font-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + + 'minor-tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + + 'minor-tick-stroke-thickness': null, + + 'needle-brush': ( + igx-color: 'primary', + ), + + 'needle-outline': ( + igx-color: 'surface', + ), + + 'needle-stroke-thickness': null, + + 'range-brushes': series, + + 'range-outlines': series, + + 'scale-brush': ( + igx-color: 'surface', + darken: 8% + ), + + 'tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + + 'tick-stroke-thickness': null + ) +); + +/// Generates a light linear gauge schema. +/// @type {Map} +/// @property {Number} needle-breadth [null] - Sets the needle breadth. +/// @property {Number} needle-inner-base-width [null] - Sets the width of the needle's inner base. +/// @property {Number} needle-inner-point-width [null] - Sets the width of the needle's inner point. +/// @property {Number} needle-outer-base-width [null] - Sets the width of the needle's outer base. +/// @property {Number} needle-outer-point-width [null] - Sets the width of the needle's outer point. +/// @property {Color} scale-outline [(igx-color: 'surface', darken: 8%)] - Sets the color to use for the outline of the scale. +/// @property {Number} scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline. +/// @requires {function} extend +/// @requires $_light-gauge +$_light-linear-gauge: extend( + $_light-gauge, + ( + needle-breadth: null, + + needle-inner-base-width: null, + + needle-inner-point-width: null, + + needle-outer-base-width: null, + + needle-outer-point-width: null, + + scale-outline: ( + igx-color: 'surface', + darken: 8% + ), + + scale-stroke-thickness: null, + ) +); + +/// Generates a light radial gauge schema. +/// @type {Map} +/// @property {Color} needle-pivot-brush [igx-color: 'primary'] - Sets the color of the needle pivot point. +/// @property {Color} needle-pivot-outline [igx-color: 'surface'] - Sets the outline color of the needle pivot point. +/// @requires {function} extend +/// @requires $_light-gauge +$_light-radial-gauge: extend( + $_light-gauge, + ( + needle-pivot-brush: ( + igx-color: 'primary', + ), + + needle-pivot-outline: ( + igx-color: 'surface', + ) + ) +); + +/// Generates a light fluent gauge schemas. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-linear-gauge +$_fluent-linear-gauge: extend($_light-linear-gauge); + +/// Generates a light fluent gauge schemas. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-radial-gauge +$_fluent-radial-gauge: extend($_light-radial-gauge); + +/// Generates a light bootstrap gauge schemas. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-linear-gauge +$_bootstrap-linear-gauge: extend($_light-linear-gauge); + +/// Generates a light bootstrap gauge schemas. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-radial-gauge +$_bootstrap-radial-gauge: extend($_light-radial-gauge); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss new file mode 100644 index 00000000000..093ceb4b367 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_geo-map.scss @@ -0,0 +1,32 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light geo map schema. +/// @type {Map} +/// @prop {String} plot-area-background [null]- Gets or sets the brush used as the background for the current Map object's plot area. +/// @see $default-palette +$_light-geo-map: extend( + ( + 'plot-area-background': ( + igx-color: 'surface' + ) + ) +); + +/// Generates a fluent geo map schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-geo-map +/// @see $_light-geo-map +$_fluent-geo-map: extend($_light-geo-map); + +/// Generates a bootstrap geo map schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-geo-map +/// @see $_light-geo-map +$_bootstrap-geo-map: extend($_light-geo-map); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss new file mode 100644 index 00000000000..8ad34df0ddd --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_graph.scss @@ -0,0 +1,89 @@ +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light graph schema. +/// @type {Map} +/// @prop {Color} backing-brush [(igx-color: 'surface', darken: 5%)] - Sets the brush to use to fill the backing of the bullet graph. +/// @prop {Color} backing-outline [(igx-color: 'surface', darken: 8%)] - Sets the brush to use for the outline of the backing. +/// @prop {Number} backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline. +/// @prop {Color} font-brush [(igx-contrast-color: 'surface', rgba: .62)] - Sets the brush to use for the label font. +/// @prop {Color} minor-tick-brush [(igx-contrast-color: 'surface', rgba: .62)] - Sets the brush to use for the minor tickmarks. +/// @prop {Number} minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks. +/// @prop {List} range-brushes [series] - Sets a collection of brushes to be used as the palette for bullet graph ranges. +/// @prop {List} range-outlines [series] - Sets a collection of brushes to be used as the palette for bullet graph outlines. +/// @prop {Color} scale-background-brush [(igx-color: 'primary')] - Sets the background brush for the scale. +/// @prop {Color} scale-background-outline [(igx-color: 'surface')] - Sets the background outline for the scale. +/// @prop {Number} scale-background-thickness [null] - Sets the background outline thickness for the scale. +/// @prop {Number} target-value-breadth [null] - Sets the breadth of the target value element. +/// @prop {Color} target-value-brush [igx-color('grays', 800)] - Sets the brush to use when rendering the fill of the comparative marker. +/// @prop {Color} target-value-outline [null] - Sets the brush to use when rendering the outline of the target value. +/// @prop {Number} target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar. +/// @prop {Color} tick-brush [(igx-contrast-color: 'surface', rgba: .62)] - Sets the brush to use for the major tickmarks. +/// @prop {Number} tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks. +/// @prop {Color} value-brush [(igx-color: ('grays', 800))] - Sets the brush to use for the actual value element. +/// @prop {Color} value-outline [null] - Sets the brush to use for the outline of actual value element. +/// @prop {Number} value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element. +/// @see $default-palette +$_light-graph: extend( + ( + 'backing-brush': ( + igx-color: 'surface', + darken: 5% + ), + 'backing-outline': ( + igx-color: 'surface', + darken: 8% + ), + 'backing-stroke-thickness': null, + 'font-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + 'minor-tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + 'minor-tick-thickness': null, + 'range-brushes': series, + 'range-outlines': series, + 'scale-background-brush': ( + igx-color: 'primary', + ), + 'scale-background-outline': ( + igx-color: 'surface', + ), + 'scale-background-thickness': null, + 'target-value-breadth': null, + 'target-value-brush': ( + igx-color: ('grays', 800), + ), + 'target-value-outline': null, + 'target-value-thickness': null, + 'tick-brush': ( + igx-contrast-color: 'surface', + rgba: .62 + ), + 'tick-stroke-thickness': null, + 'value-brush': ( + igx-color: ('grays', 800), + ), + 'value-outline': null, + 'value-stroke-thickness': null, + ) +); + +/// Generates a fluent graph schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-graph +$_fluent-graph: extend($_light-graph); + +/// Generates a bootstrap graph schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-graph +$_bootstrap-graph: extend($_light-graph); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss index 89dcd983175..3d854322316 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_index.scss @@ -14,15 +14,22 @@ @import './calendar'; @import './card'; @import './carousel'; +@import './category-chart'; @import './checkbox'; @import './chip'; @import './column-hiding'; @import './combo'; @import './dialog'; +@import './data-chart'; +@import './doughnut-chart'; +@import './funnel-chart'; @import './date-range-picker'; @import './divider'; @import './drop-down'; @import './expansion-panel'; +@import './gauge'; +@import './financial-chart'; +@import './graph'; @import './grid'; @import './grid-filtering'; @import './pagination'; @@ -34,13 +41,17 @@ @import './list'; @import './navbar'; @import './navdrawer'; +@import './geo-map'; @import './overlay'; +@import './pie-chart'; @import './progress'; @import './radio'; @import './ripple'; @import './scrollbar'; +@import './shape-chart'; @import './slider'; @import './snackbar'; +@import './sparkline'; @import './splitter'; @import './switch'; @import './tabs'; @@ -61,6 +72,10 @@ /// @property {Map} igx-calendar [$_light-calendar] /// @property {Map} igx-card [$_light-card] /// @property {Map} igx-carousel [$_light-carousel] +/// @property {Map} category-chart [$_light-category-chart] +/// @property {Map} data-chart [$_light-data-chart] +/// @property {Map} doughnut-chart [$_light-dough-chart] +/// @property {Map} funnel-chart [$_light-funnel-chart] /// @property {Map} igx-checkbox [$_light-checkbox] /// @property {Map} igx-chip [$_light-chip] /// @property {Map} igx-column-hiding [$_light-column-hiding] @@ -70,6 +85,10 @@ /// @property {Map} igx-divider [$_light-divider] /// @property {Map} igx-drop-down [$_light-drop-down] /// @property {Map} igx-expansion-panel [$_light-expansion-panel] +/// @property {Map} linear-gauge [$_light-linear-gauge] +/// @property {Map} radial-gauge [$_light-radial-gauge] +/// @property {Map} financial-chart [$_light-financial-chart] +/// @property {Map} bullet-graph [$_light-graph] /// @property {Map} igx-grid [$_light-grid] /// @property {Map} igx-grid-filtering [$_light-grid-filtering] /// @property {Map} igx-paginator [$_light-pagination] @@ -79,16 +98,20 @@ /// @property {Map} igx-icon [$_light-icon] /// @property {Map} igx-input-group [$_light-input-group] /// @property {Map} igx-list [$_light-list] +/// @property {Map} geo-map [$_light-geo-map] /// @property {Map} igx-navbar [$_light-navbar] /// @property {Map} igx-navdrawer [$_light-navdrawer] /// @property {Map} igx-overlay [$_light-overlay] +/// @property {Map} pie-chart [$_light-pie-chart] /// @property {Map} igx-progress-linear [$_light-progress-linear] /// @property {Map} igx-progress-circular [$_light-progress-circular] /// @property {Map} igx-radio [$_light-radio] /// @property {Map} igx-ripple [$_light-ripple] /// @property {Map} igx-scrollbar [$_light-scrollbar] +/// @property {Map} shape-chart [$_light-shape-chart] /// @property {Map} igx-slider [$_light-slider] /// @property {Map} igx-snackbar [$_light-snackbar] +/// @property {Map} sparkline [$_light-sparkline] /// @property {Map} igx-splitter [$_light-splitter] /// @property {Map} igx-switch [$_light-switch] /// @property {Map} igx-tabs [$_light-tabs] @@ -106,6 +129,10 @@ $light-schema: ( igx-calendar: $_light-calendar, igx-card: $_light-card, igx-carousel: $_light-carousel, + category-chart: $_light-category-chart, + data-chart: $_light-data-chart, + doughnut-chart: $_light-doughnut-chart, + funnel-chart: $_light-funnel-chart, igx-checkbox: $_light-checkbox, igx-chip: $_light-chip, igx-column-hiding: $_light-column-hiding, @@ -115,6 +142,10 @@ $light-schema: ( igx-divider: $_light-divider, igx-drop-down: $_light-drop-down, igx-expansion-panel: $_light-expansion-panel, + linear-gauge: $_light-linear-gauge, + radial-gauge: $_light-radial-gauge, + financial-chart: $_light-financial-chart, + bullet-graph: $_light-graph, igx-grid: $_light-grid, igx-grid-filtering: $_light-grid-filtering, igx-paginator: $_light-pagination, @@ -124,16 +155,20 @@ $light-schema: ( igx-icon: $_light-icon, igx-input-group: $_light-input-group, igx-list: $_light-list, + geo-map: $_light-geo-map, igx-navbar: $_light-navbar, igx-navdrawer: $_light-navdrawer, igx-overlay: $_light-overlay, igx-linear-bar: $_light-progress-linear, igx-circular-bar: $_light-progress-circular, + pie-chart: $_light-pie-chart, igx-radio: $_light-radio, igx-ripple: $_light-ripple, + shape-chart: $_light-shape-chart, igx-scrollbar: $_light-scrollbar, igx-slider: $_light-slider, igx-snackbar: $_light-snackbar, + sparkline: $_light-sparkline, igx-splitter: $_light-splitter, igx-switch: $_light-switch, igx-tabs: $_light-tabs, @@ -154,15 +189,23 @@ $light-fluent-schema: ( igx-calendar: $_fluent-calendar, igx-card: $_fluent-card, igx-carousel: $_fluent-carousel, + category-chart: $_fluent-category-chart, igx-checkbox: $_fluent-checkbox, igx-chip: $_fluent-chip, igx-column-hiding: $_fluent-column-hiding, igx-combo: $_fluent-combo, igx-dialog: $_fluent-dialog, + data-chart: $_fluent-data-chart, + doughnut-chart: $_fluent-doughnut-chart, + funnel-chart: $_fluent-funnel-chart, igx-date-range: $_fluent-date-range-picker, igx-divider: $_fluent-divider, igx-drop-down: $_fluent-drop-down, igx-expansion-panel: $_fluent-expansion-panel, + linear-gauge: $_fluent-linear-gauge, + radial-gauge: $_fluent-radial-gauge, + financial-chart: $_fluent-financial-chart, + bullet-graph: $_fluent-graph, igx-grid: $_fluent-grid, igx-grid-filtering: $_fluent-grid-filtering, igx-paginator: $_fluent-pagination, @@ -172,16 +215,20 @@ $light-fluent-schema: ( igx-icon: $_fluent-icon, igx-input-group: $_fluent-input-group, igx-list: $_fluent-list, + geo-map: $_fluent-geo-map, igx-navbar: $_fluent-navbar, igx-navdrawer: $_fluent-navdrawer, igx-overlay: $_fluent-overlay, igx-linear-bar: $_fluent-progress-linear, igx-circular-bar: $_fluent-progress-circular, + pie-chart: $_fluent-pie-chart, igx-radio: $_fluent-radio, igx-ripple: $_fluent-ripple, + shape-chart: $_fluent-shape-chart, igx-scrollbar: $_fluent-scrollbar, igx-slider: $_fluent-slider, igx-snackbar: $_fluent-snackbar, + sparkline: $_fluent-sparkline, igx-splitter: $_fluent-splitter, igx-switch: $_fluent-switch, igx-tabs: $_fluent-tabs, @@ -202,15 +249,23 @@ $light-bootstrap-schema: ( igx-calendar: $_bootstrap-calendar, igx-card: $_bootstrap-card, igx-carousel: $_bootstrap-carousel, + category-chart: $_bootstrap-category-chart, igx-checkbox: $_bootstrap-checkbox, igx-chip: $_bootstrap-chip, igx-column-hiding: $_bootstrap-column-hiding, igx-combo: $_bootstrap-combo, igx-dialog: $_bootstrap-dialog, + data-chart: $_bootstrap-data-chart, + doughnut-chart: $_bootstrap-doughnut-chart, + funnel-chart: $_bootstrap-funnel-chart, igx-date-range: $_bootstrap-date-range-picker, igx-divider: $_bootstrap-divider, igx-drop-down: $_bootstrap-drop-down, igx-expansion-panel: $_bootstrap-expansion-panel, + linear-gauge: $_bootstrap-linear-gauge, + radial-gauge: $_bootstrap-radial-gauge, + financial-chart: $_bootstrap-financial-chart, + bullet-graph: $_bootstrap-graph, igx-grid: $_bootstrap-grid, igx-grid-filtering: $_bootstrap-grid-filtering, igx-paginator: $_bootstrap-pagination, @@ -220,16 +275,20 @@ $light-bootstrap-schema: ( igx-icon: $_bootstrap-icon, igx-input-group: $_bootstrap-input-group, igx-list: $_bootstrap-list, + geo-map: $_bootstrap-geo-map, igx-navbar: $_bootstrap-navbar, igx-navdrawer: $_bootstrap-navdrawer, igx-overlay: $_bootstrap-overlay, igx-linear-bar: $_bootstrap-progress-linear, igx-circular-bar: $_bootstrap-progress-circular, + pie-chart: $_bootstrap-pie-chart, igx-radio: $_bootstrap-radio, igx-ripple: $_bootstrap-ripple, + shape-chart: $_bootstrap-shape-chart, igx-scrollbar: $_bootstrap-scrollbar, igx-slider: $_bootstrap-slider, igx-snackbar: $_bootstrap-snackbar, + sparkline: $_bootstrap-sparkline, igx-splitter: $_bootstrap-splitter, igx-switch: $_bootstrap-switch, igx-tabs: $_bootstrap-tabs, diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss new file mode 100644 index 00000000000..78ce0fb2d4e --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_pie-chart.scss @@ -0,0 +1,50 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light pie chart schema. +/// @type {Map} +/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected. +/// @property {List} outlines [series] - Defines the palette from which automatically assigned series outline colors are selected. +/// @property {Number} label-extent [null] - Sets the pixel amount by which the labels are offset from the edge of the slices. +/// @property {Color} label-inner-color [null] - Sets the color for labels rendered inside of the pie chart. +/// @property {Color} label-outer-color [null] - Sets the color for labels rendered outside of the pie chart. +/// @property {String} labels-position [null] - Sets the position of chart labels. Valid values are: 'none', 'center', 'insideEnd', 'outsideEnd', and 'bestFit'. +/// @property {Number} leader-line-margin [null] - Sets the margin between a label and the end of its leader line. +/// @property {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'. +/// @property {String} leader-line-visibility [null] - Sets whether the leader lines are visible. Valid values are: 'visible' and 'collapsed'. +/// @property {Number} radius-factor [null] - Sets the scaling factor of the chart's radius. Value between 0 and 1. +/// @see $default-palette +$_light-pie-chart: extend( + ( + 'brushes': series, + 'outlines': series, + '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, + ) +); + +/// Generates a fluent pie chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-pie-chart +/// @see $_light-pie-chart +$_fluent-pie-chart: extend($_light-pie-chart); + +/// Generates a bootstrap pie chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-pie-chart +/// @see $_light-pie-chart +$_bootstrap-pie-chart: extend($_light-pie-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss new file mode 100644 index 00000000000..7b625911a2d --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_shape-chart.scss @@ -0,0 +1,116 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light base shape chart schema. +/// @type {Map} +/// @property {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content. +/// @property {Color} title-alignment [null] - Sets horizontal alignment which determines the title position, relative to the left and right edges of the control. +/// @property {Color} title-text-color [null] - Sets the color of the chart title. +/// @property {List} title-margin [null] - Sets the margin (top, right, bottom, left) of the chart title. +/// @property {String} subtitle-alignment [null] - Sets horizontal alignment which determines the subtitle position, relative to the left and right edges of the control. +/// @property {Color} subtitle-text-color [null] - Sets the color of the chart subtitle. +/// @property {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle. +/// @property {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected. +/// @property {List} marker-brushes [series] - Sets the palette of brushes used for rendering fill area of data point markers. +/// @property {List} outlines [series] - Sets the palette of brushes to use for outlines on the chart series. +/// @property {List} marker-outlines [series] - Sets the palette of brushes used for rendering outlines of data point markers. +/// +/// @property {Number} thickness [null] - Sets the thickness for all series in this chart. +/// @property {List} trend-line-brushes [series] - Sets the palette of brushes to used for coloring trend lines in this chart. +/// @property {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. +/// @property {List} x-axis-label-margin [null] - Sets the margin of labels on the X-axis. +/// @property {Color} x-axis-label-text-color [null] - Sets color of labels on the X-axis. +/// @property {String} x-axis-label-vertical-alignment [null] - Sets Vertical alignment of X-axis labels. +/// @property {Color} x-axis-major-stroke [null] - Sets the color to apply to major gridlines along the X-axis. +/// @property {Number} x-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the X-axis. +/// @property {Color} x-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the X-axis. +/// @property {Number} x-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the X-axis. +/// @property {Color} x-axis-strip [null] - Sets the color to apply to stripes along the X-axis. +/// @property {Color} x-axis-stroke [null] - Sets the color to apply to the X-axis line. +/// @property {Number} x-axis-stroke-thickness [null] - Sets the thickness to apply to the X-axis line. +/// @property {String} x-axis-title-alignment [null] - Sets Horizontal alignment of the X-axis title. +/// @property {Color} x-axis-title-color [null] - Sets color of title on the X-axis. +/// @property {List} x-axis-title-margin [null] - Sets the margin around the title on the X-axis. +/// @property {List} y-axis-label-margin [null] - Sets the margin of labels on the Y-axis. +/// @property {Color} y-axis-label-text-color [null] - Sets color of labels on the Y-axis. +/// @property {String} y-axis-label-vertical-alignment [null] - Sets Vertical alignment of Y-axis labels. +/// @property {Color} y-axis-major-stroke [null] - Sets the color to apply to major gridlines along the Y-axis. +/// @property {Number} y-axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines along the Y-axis. +/// @property {Color} y-axis-minor-stroke [null] - Sets the color to apply to minor gridlines along the Y-axis. +/// @property {Number} y-axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along the Y-axis. +/// @property {Color} y-axis-strip [null] - Sets the color to apply to stripes along the Y-axis. +/// @property {Color} y-axis-stroke [null] - Sets the color to apply to the Y-axis line. +/// @property {Number} y-axis-stroke-thickness [null] - Sets the thickness to apply to the Y-axis line. +/// @property {String} y-axis-title-alignment [null] - Sets Horizontal alignment of the Y-axis title. +/// @property {Color} y-axis-title-color [null] - Sets color of title on the Y-axis. +/// @property {List} y-axis-title-margin [null] - Sets the margin around the title on the Y-axis. +/// @see $default-palette +$_light-shape-chart: extend( + ( + 'margin': null, + 'title-alignment': null, + + 'title-text-color': ( + igx-color: ('grays', 900) + ), + 'title-margin': null, + 'subtitle-alignment': null, + + 'subtitle-text-color': ( + igx-color: ('grays', 600) + ), + + 'subtitle-margin': null, + 'brushes': series, + 'marker-brushes': series, + 'outlines': series, + 'marker-outlines': series, + 'thickness': null, + 'trend-line-brushes': series, + '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, + ) +); + +/// Generates a fluent shaep-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-shape-chart +$_fluent-shape-chart: extend($_light-shape-chart); + +/// Generates a bootstrap shape-chart schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-shape-chart +$_bootstrap-shape-chart: extend($_light-shape-chart); + diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss new file mode 100644 index 00000000000..e92cf45e1e7 --- /dev/null +++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_sparkline.scss @@ -0,0 +1,70 @@ +// @import '../shape/chart'; + +//// +/// @group schemas +/// @access private +/// @author Simeon Simeonoff +//// + +/// Generates a light base sparkline schema. +/// @type {Map} +/// @prop {Color} brush [igx-color: ('primary', 500)] - Sets the sparkline brush. +/// @prop {Number} line-thickness [null] - Sets the line thickness of the sparkline. +/// @prop {Color} marker-brush [null] - Sets the marker brush of the sparkline. +/// @prop {Color} marker-size [null] - Sets the marker size of the sparkline. +/// @prop {Color} first-marker-brush [null] - Sets the first marker brush of the sparkline. +/// @prop {Number} first-marker-size [null] - Sets the first marker size of the sparkline. +/// @prop {Color} last-marker-brush [null] - Sets the last marker brush of the sparkline. +/// @prop {Number} last-marker-size [null] - Sets the last marker size of the sparkline. +/// @prop {Color} low-marker-brush [null] - Sets the low marker brush of the sparkline. +/// @prop {Number} low-marker-size [null] - Sets the low marker size of the sparkline. +/// @prop {Color} high-marker-brush [null] - Sets the high marker brush of the sparkline. +/// @prop {Number} high-marker-size [null] - Sets the high marker size of the sparkline. +/// @prop {Color} negative-brush [null] - Sets the negative brush of the sparkline. +/// @prop {Color} negative-marker-brush [null] - Sets the negative marker brush of the sparkline. +/// @prop {Number} negative marker-size [null] - Sets the negative marker size of the sparkline. +/// @prop {Color} trend-line-brush [null] - Sets the trendline brush of the sparkline. +/// @prop {Color} trend-line-thickness [null] - Sets the thickness of the sparkline's trendline. +/// @prop {Color} horizontal-axis-brush [null] - Sets the horizontal axis line brush of the sparkline. +/// @prop {Color} vertical-axis-brush [null] - Sets the vertical axis line brush of the sparkline. +/// @prop {Color} normal-range-fill [null] - Sets the normal range brush of the sparkline. +/// @see $default-palette +$_light-sparkline: extend( + ( + 'brush': ( + igx-color: ('primary', 500) + ), + '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, + ) +); + +/// Generates a fluent sparkline schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-sparkline +$_fluent-sparkline: extend($_light-sparkline); + +/// Generates a bootstrap sparkline schema. +/// @type {Map} +/// @requires {function} extend +/// @requires $_light-sparkline +$_bootstrap-sparkline: extend($_light-sparkline); + diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss index bf87a32c5ff..5c26a102103 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_base.scss @@ -233,3 +233,29 @@ } @content; } + +/// Transforms a type style map into a font style rule assigned to a css variable. +/// @param {String} $name - The custom CSS variable name. +/// @param {Map} $type-style - A type style map reference as produces by igx-type-style. +/// @param {String} $prefix [null] - Optional prefix. +/// @example scss Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax. +/// $h1-style: igx-type-scale-category($type-scale, 'h1'); +/// @include igx-font-var('h1-font', $h1-style); +@mixin igx-font-var($name, $type-style, $prefix: null) { + $fs: map-get($type-style, 'font-style'); + $fz: map-get($type-style, 'font-size'); + $fw: map-get($type-style, 'font-weight'); + $lh: map-get($type-style, 'line-height'); + + // unused for now + $tt: map-get($type-style, 'text-transform'); + $ls: map-get($type-style, 'letter-spacing'); + $mt: map-get($type-style, 'margin-top'); + $mb: map-get($type-style, 'margin-bottom'); + + @include igx-css-vars(( + 'name': $prefix, + #{$name}: #{$fs $fw $fz}/#{$lh} inherit, + )); +} + diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss index 624e1cc7353..1288c68c6c5 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_typography.scss @@ -9,21 +9,27 @@ @import '../components/button/button-theme'; @import '../components/calendar/calendar-theme'; @import '../components/card/card-theme'; +@import '../components/charts/data-chart-theme'; +@import '../components/charts/financial-chart-theme'; +@import '../components/charts/funnel-chart-theme'; +@import '../components/charts/gauge-theme'; +@import '../components/charts/graph-theme'; +@import '../components/charts/shape-chart-theme'; @import '../components/checkbox/checkbox-theme'; @import '../components/chip/chip-theme'; @import '../components/column-hiding/column-hiding-theme'; +@import '../components/date-range-picker/date-range-picker-theme'; @import '../components/dialog/dialog-theme'; @import '../components/drop-down/drop-down-theme'; -@import '../components/date-range-picker/date-range-picker-theme'; @import '../components/expansion-panel/expansion-panel-theme'; @import '../components/grid/excel-filtering-theme'; @import '../components/input/input-group-theme'; +@import '../components/list/list-theme'; @import '../components/navbar/navbar-theme'; @import '../components/navdrawer/navdrawer-theme'; -@import '../components/list/list-theme'; @import '../components/radio/radio-theme'; -@import '../components/snackbar/snackbar-theme'; @import '../components/slider/slider-theme'; +@import '../components/snackbar/snackbar-theme'; @import '../components/switch/switch-theme'; @import '../components/tabs/tabs-theme'; @import '../components/time-picker/time-picker-theme'; @@ -82,27 +88,33 @@ } // Call the individual component styles with the type scale - @include igx-button-typography($type-scale); - @include igx-bottom-nav-typography($type-scale); + @include _excel-filtering-typography($type-scale); @include igx-banner-typography($type-scale); + @include igx-bottom-nav-typography($type-scale); + @include igx-button-typography($type-scale); @include igx-calendar-typography($type-scale); @include igx-card-typography($type-scale); @include igx-checkbox-typography($type-scale); @include igx-chip-typography($type-scale); @include igx-column-hiding-typography($type-scale); + @include igx-data-chart-typography($type-scale); + @include igx-date-range-typography($type-scale); @include igx-dialog-typography($type-scale); @include igx-drop-down-typography($type-scale); - @include igx-date-range-typography($type-scale); @include igx-expansion-panel-typography($type-scale); - @include _excel-filtering-typography($type-scale); + @include igx-financial-chart-typography($type-scale); + @include igx-funnel-chart-typography($type-scale); + @include igx-gauge-typography(); + @include igx-graph-typography(); @include igx-input-group-typography($type-scale); + @include igx-list-typography($type-scale); @include igx-navbar-typography($type-scale); @include igx-navdrawer-typography($type-scale); - @include igx-list-typography($type-scale); @include igx-radio-typography($type-scale); + @include igx-shape-chart-typography($type-scale); + @include igx-slider-typography($type-scale); @include igx-snackbar-typography($type-scale); @include igx-switch-typography($type-scale); - @include igx-slider-typography($type-scale); @include igx-tabs-typography($type-scale); @include igx-time-picker-typography($type-scale); @include igx-toast-typography($type-scale); diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts index 6863d243d62..080857217f5 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts @@ -5721,8 +5721,9 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements * ``` */ public navigateTo(rowIndex: number, visibleColIndex = -1, cb: Function = null) { - if (rowIndex < 0 || rowIndex > this.dataView.length - 1 - || (visibleColIndex !== -1 && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) { + const totalItems = (this as any).totalItemCount ?? this.dataView.length - 1; + if (rowIndex < 0 || rowIndex > totalItems || (visibleColIndex !== -1 + && this.columnList.map(col => col.visibleIndex).indexOf(visibleColIndex) === -1)) { return; } if (this.dataView.slice(rowIndex, rowIndex + 1).find(rec => rec.expression || rec.childGridsData)) { @@ -5820,9 +5821,24 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements private executeCallback(rowIndex, visibleColIndex = -1, cb: Function = null) { if (!cb) { return; } + let row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex); + if (!row) { + if ((this as any).totalItemCount) { + this.verticalScrollContainer.onDataChanged.pipe(first()).subscribe(() => { + this.cdr.detectChanges(); + row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex); + const cbArgs = this.getNavigationArguments(row, visibleColIndex); + cb(cbArgs); + }); + } + return; + } + const args = this.getNavigationArguments(row, visibleColIndex); + cb(args); + } + + private getNavigationArguments(row, visibleColIndex) { let targetType, target; - const row = this.summariesRowList.filter(s => s.index !== 0).concat(this.rowList.toArray()).find(r => r.index === rowIndex); - if (!row) { return; } switch (row.nativeElement.tagName.toLowerCase()) { case 'igx-grid-groupby-row': targetType = GridKeydownTargetType.groupRow; @@ -5842,8 +5858,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements target = visibleColIndex !== -1 ? row.cells.find(c => c.visibleColumnIndex === visibleColIndex) : row.cells.first; break; } - const args = { targetType: targetType, target: target }; - cb(args); + return { targetType: targetType, target: target }; } private getNextDataRowIndex(currentRowIndex, previous = false): number { diff --git a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts index bbb73c421c3..d1cc4c263d7 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts @@ -359,6 +359,7 @@ export class IgxGridNavigationService { } protected findLastDataRowIndex(): number { + if ((this.grid as any).totalItemCount) { return (this.grid as any).totalItemCount - 1; } let i = this.grid.dataView.length; while (i--) { if (this.isDataRow(i)) { @@ -376,7 +377,8 @@ export class IgxGridNavigationService { } protected isValidPosition(rowIndex: number, colIndex: number): boolean { - if (rowIndex < 0 || colIndex < 0 || this.grid.dataView.length - 1 < rowIndex || this.lastColumnIndex < colIndex) { + const length = (this.grid as any).totalItemCount ?? this.grid.dataView.length; + if (rowIndex < 0 || colIndex < 0 || length - 1 < rowIndex || this.lastColumnIndex < colIndex) { return false; } return this.activeNode.column !== colIndex && !this.isDataRow(rowIndex, true) ? false : true; diff --git a/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts b/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts index 5d649104366..2146bff54d9 100644 --- a/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts +++ b/src/app/grid-remote-virtualization-with-scroll/grid-remote-virtualization-scroll.sample.ts @@ -1,7 +1,7 @@ import { Component, ViewChild, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core'; import { IgxGridComponent } from 'igniteui-angular'; import { debounceTime } from 'rxjs/operators'; -import { RemoteVirtService } from '../shared/remote.service - Copy'; +import { RemoteVirtService } from '../shared/remoteProductsData.service'; @Component({ selector: 'app-grid-remote-virtualization-scroll', diff --git a/src/app/shared/remote.service - Copy.ts b/src/app/shared/remoteProductsData.service.ts similarity index 100% rename from src/app/shared/remote.service - Copy.ts rename to src/app/shared/remoteProductsData.service.ts