igniteui-theming 1.0.2 → 1.1.1

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

@@ -0,0 +1,51 @@
+/* stylelint-disable max-line-length */
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a material 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 [30] - 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 [color: ('gray', 700)] - 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.
+$material-pie-chart: (
+    'brushes': series,
+    'outlines': series,
+    'label-extent': 30,
+    'label-inner-color': null,
+    'label-outer-color': (
+        color: ('gray', 700)
+    ),
+    '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 {Map} $material-pie-chart
+/// @see $material-pie-chart
+$fluent-pie-chart: $material-pie-chart;
+
+/// Generates a bootstrap pie chart schema.
+/// @type {Map}
+/// @requires {Map} $material-pie-chart
+/// @see $material-pie-chart
+$bootstrap-pie-chart: $material-pie-chart;
+
+/// Generates an indigo pie chart schema.
+/// @type {Map}
+/// @requires {Map} $material-pie-chart
+/// @see $material-pie-chart
+$indigo-pie-chart: $material-pie-chart;

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

@@ -0,0 +1,115 @@
+/* stylelint-disable max-line-length */
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a material 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
+$material-shape-chart: (
+    'margin': null,
+    'title-alignment': null,
+    'title-text-color': (
+        color: ('gray', 900)
+    ),
+    'title-margin': null,
+    'subtitle-alignment': null,
+    'subtitle-text-color': (
+        color: ('gray', 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 {Map} $material-shape-chart
+$fluent-shape-chart: $material-shape-chart;
+
+/// Generates a bootstrap shape-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-shape-chart
+$bootstrap-shape-chart: $material-shape-chart;
+
+/// Generates an indigo shape-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-shape-chart
+$indigo-shape-chart: $material-shape-chart;

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

@@ -0,0 +1,71 @@
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a material base sparkline schema.
+/// @type {Map}
+/// @prop {Color} brush [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
+$material-sparkline: (
+    'brush': (
+        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 {Map} $material-sparkline
+$fluent-sparkline: $material-sparkline;
+
+/// Generates a bootstrap sparkline schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-sparkline
+$bootstrap-sparkline: $material-sparkline;
+
+/// Generates an indigo sparkline schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-sparkline
+$indigo-sparkline: $material-sparkline;

package/sass/typography/_mixins.scss

@@ -3,6 +3,7 @@
 @use 'sass:list';
 @use '../utils/meta' as *;
 @use './types';
+@use '../themes/mixins' as *;
 
 ////
 /// @group Typography
@@ -73,6 +74,31 @@
     }
 }
 
+/// 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 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: type-scale-category($type-scale, 'h1');
+///   @include font-var('h1-font', $h1-style);
+@mixin font-var($name, $type-style, $prefix: null) {
+    $ff: var(--ig-font-family);
+    $fz: map.get($type-style, 'font-size');
+    $fw: map.get($type-style, 'font-weight');
+
+    // unused for now
+    $fs: map.get($type-style, 'font-style');
+    $lh: map.get($type-style, 'line-height');
+    $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 css-vars-from-theme((
+        #{$name}: #{$fw $fz $ff},
+    ), $prefix);
+}
+
 /// Adds typography styles for h1-h6, paragraph and creates custom typography class selectors.
 /// The produced styles are based on the passed typeface and type scale.
 /// @access public

package/sass/typography/charts/_index.scss

@@ -0,0 +1,19 @@
+@use '../../themes/charts/category-chart-theme' as *;
+@use '../../themes/charts/data-chart-theme' as *;
+@use '../../themes/charts/financial-chart-theme' as *;
+@use '../../themes/charts/funnel-chart-theme' as *;
+@use '../../themes/charts/gauge-theme' as *;
+@use '../../themes/charts/graph-theme' as *;
+@use '../../themes/charts/pie-chart-theme' as *;
+@use '../../themes/charts/shape-chart-theme' as *;
+
+@mixin charts-typography($type-scale, $target: 'angular') {
+    @include category-chart-typography($type-scale: $type-scale, $target: $target);
+    @include data-chart-typography($type-scale: $type-scale, $target: $target);
+    @include financial-chart-typography($type-scale: $type-scale, $target: $target);
+    @include funnel-chart-typography($type-scale: $type-scale, $target: $target);
+    @include gauge-typography($target: $target);
+    @include graph-typography($target: $target);
+    @include pie-chart-typography($type-scale: $type-scale, $target: $target);
+    @include shape-chart-typography($type-scale: $type-scale, $target: $target);
+}