igniteui-theming 1.0.2 → 1.1.0

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

@@ -0,0 +1,60 @@
+/* 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 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 [color: ('gray', 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 [color: ('gray', 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 [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
+$material-data-chart: (
+    'margin': null,
+    'title-text-color': (
+        color: ('gray', 900)
+    ),
+    'title-margin': null,
+    'subtitle-text-color': (
+        color: ('gray', 600)
+    ),
+    'subtitle-margin': null,
+    'brushes': series,
+    'marker-brushes': series,
+    'outlines': series,
+    'marker-outlines': series,
+    'plot-area-background': (
+        color: ('surface', 500)
+    ),
+    'title-horizontal-alignment': null,
+    'subtitle-horizontal-alignment': null,
+);
+
+/// Generates a fluent data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-data-chart
+$fluent-data-chart: $material-data-chart;
+
+/// Generates a bootstrap data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-data-chart
+$bootstrap-data-chart: $material-data-chart;
+
+/// Generates an indigo data-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-data-chart
+$indigo-data-chart: $material-data-chart;

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

@@ -0,0 +1,50 @@
+/* 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 doughnut 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 {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.
+/// @see $default-palette
+$material-doughnut-chart: (
+    '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 {Map} $material-doughnut-chart
+$fluent-doughnut-chart: $material-doughnut-chart;
+
+/// Generates a bootstrap doughnut-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-doughnut-chart
+$bootstrap-doughnut-chart: $material-doughnut-chart;
+
+/// Generates an indigo doughnut-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-doughnut-chart
+$indigo-doughnut-chart: $material-doughnut-chart;

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

@@ -0,0 +1,140 @@
+/* stylelint-disable max-line-length */
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/didimmova" target="_blank">Dilyana Dimova</a>
+////
+
+/// Generates a material 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
+$material-financial-chart: (
+    '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 {Map} $material-financial-chart
+$fluent-financial-chart: $material-financial-chart;
+
+/// Generates a bootstrap financial-chart schema.
+/// @type {Map}
+/// @requires {Map} $material-financial-chart
+$bootstrap-financial-chart: $material-financial-chart;
+
+/// Generates an indigo financial-chart schema.
+/// @type {Map}
+/// @requires {Map} $material-financial-chart
+$indigo-financial-chart: $material-financial-chart;

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

@@ -0,0 +1,48 @@
+/* stylelint-disable max-line-length */
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+////
+
+/// Generates a material 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
+$material-funnel-chart: (
+    '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 {Map} $material-funnel-chart
+$fluent-funnel-chart: $material-funnel-chart;
+
+/// Generates a bootstrap funnel-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-funnel-chart
+$bootstrap-funnel-chart: $material-funnel-chart;
+
+/// Generates an indigo funnel-chart schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-funnel-chart
+$indigo-funnel-chart: $material-funnel-chart;

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

@@ -0,0 +1,132 @@
+/* stylelint-disable max-line-length */
+@use '../../../../utils/map' as *;
+
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/SisIvanova" target="_blank">Silvia Ivanova</a>
+////
+
+/// Generates a material gauge schema.
+/// @type {Map}
+/// @property {Color} backing-brush [(color: 'surface', darken: 8%)] - Sets the color to use to fill the backing of the linear gauge.
+/// @property {Color} backing-outline [(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 [(color: 'surface', rgba: .62)] - Sets the color to use for the label font.
+/// @property {Color} minor-tick-brush [(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 [(color: 'primary')] - Sets the color to use for the needle element.
+/// @property {Color} needle-outline [(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 [(color: 'surface', darken: 8%)] - Sets the color to use to fill the scale of the linear gauge.
+/// @property {Color} tick-brush [(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
+$material-gauge: (
+    'backing-brush': (
+        color: 'surface',
+    ),
+    'backing-outline': (
+        color: 'surface',
+    ),
+    'backing-stroke-thickness': null,
+    'font-brush': (
+        contrast-color: ('surface', 500),
+    ),
+    'minor-tick-brush': (
+        contrast-color: ('surface', 500),
+    ),
+    'minor-tick-stroke-thickness': null,
+    'needle-brush': (
+        color: 'primary',
+    ),
+    'needle-outline': (
+        color: 'surface',
+    ),
+    'needle-stroke-thickness': null,
+    'range-brushes': series,
+    'range-outlines': series,
+    'scale-brush': (
+        color: 'surface',
+    ),
+    'tick-brush': (
+        contrast-color: ('surface', 500)
+    ),
+    'tick-stroke-thickness': null
+);
+
+/// Generates a material 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 [(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 {Map} $material-gauge
+$material-linear-gauge: extend(
+    $material-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: (
+            color: 'surface',
+        ),
+        scale-stroke-thickness: null,
+    )
+);
+
+/// Generates a material radial gauge schema.
+/// @type {Map}
+/// @property {Color} needle-pivot-brush [color: 'primary'] - Sets the color of the needle pivot point.
+/// @property {Color} needle-pivot-outline [color: 'surface'] - Sets the outline color of the needle pivot point.
+/// @requires {function} extend
+/// @requires {Map} $material-gauge
+$material-radial-gauge: extend(
+    $material-gauge,
+    (
+        needle-pivot-brush: (
+            color: 'primary',
+        ),
+        needle-pivot-outline: (
+            color: 'surface',
+        )
+    )
+);
+
+/// Generates a material fluent gauge schemas.
+/// @type {Map}
+/// @requires {Map} $material-linear-gauge
+$fluent-linear-gauge: $material-linear-gauge;
+
+/// Generates a material fluent gauge schemas.
+/// @type {Map}
+/// @requires {Map} $material-radial-gauge
+$fluent-radial-gauge: $material-radial-gauge;
+
+/// Generates a material bootstrap gauge schemas.
+/// @type {Map}
+/// @requires {Map} $material-linear-gauge
+$bootstrap-linear-gauge: $material-linear-gauge;
+
+/// Generates a material bootstrap gauge schemas.
+/// @type {Map}
+/// @requires {Map} $material-radial-gauge
+$bootstrap-radial-gauge: $material-radial-gauge;
+
+/// Generates a material indigo gauge schemas.
+/// @type {Map}
+/// @requires {Map} $material-linear-gauge
+$indigo-linear-gauge: $material-linear-gauge;
+
+/// Generates a material indigo gauge schemas.
+/// @type {Map}
+/// @requires {Map} $material-radial-gauge
+$indigo-radial-gauge: $material-radial-gauge;

package/sass/themes/schemas/charts/light/_geo-map.scss

@@ -0,0 +1,35 @@
+/* stylelint-disable max-line-length */
+
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a material 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
+$material-geo-map: (
+    'plot-area-background': (
+        color: 'surface'
+    )
+);
+
+/// Generates a fluent geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-geo-map
+$fluent-geo-map: $material-geo-map;
+
+/// Generates a bootstrap geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-geo-map
+$bootstrap-geo-map: $material-geo-map;
+
+/// Generates an indigo geo map schema.
+/// @type {Map}
+/// @requires {function} extend
+/// @requires {Map} $material-geo-map
+$indigo-geo-map: $material-geo-map;

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

@@ -0,0 +1,86 @@
+/* stylelint-disable max-line-length */
+
+////
+/// @group schemas
+/// @access public
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// Generates a material graph schema.
+/// @type {Map}
+/// @prop {Color} backing-brush [(color: 'surface', darken: 5%)] - Sets the brush to use to fill the backing of the bullet graph.
+/// @prop {Color} backing-outline [(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 [(contrast-color: 'surface')] - Sets the brush to use for the label font.
+/// @prop {Color} minor-tick-brush [(contrast-color: 'surface')] - 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 [(color: 'primary')] - Sets the background brush for the scale.
+/// @prop {Color} scale-background-outline [(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 [color('gray', 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 [(contrast-color: 'surface')] - 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 [(color: ('gray', 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
+$material-graph: (
+    'backing-brush': (
+        color: 'surface',
+    ),
+    'backing-outline': (
+        color: 'surface',
+    ),
+    'backing-stroke-thickness': null,
+    'font-brush': (
+        contrast-color: ('surface', 500)
+    ),
+    'minor-tick-brush': (
+        contrast-color: ('surface', 500)
+    ),
+    'minor-tick-thickness': null,
+    'range-brushes': series,
+    'range-outlines': series,
+    'scale-background-brush': (
+        color: 'primary',
+    ),
+    'scale-background-outline': (
+        color: 'surface',
+    ),
+    'scale-background-thickness': null,
+    'target-value-breadth': null,
+    'target-value-brush': (
+        color: ('gray', 800),
+    ),
+    'target-value-outline': null,
+    'target-value-thickness': null,
+    'tick-brush': (
+        contrast-color: ('surface', 500)
+    ),
+    'tick-stroke-thickness': null,
+    'value-brush': (
+        color: ('gray', 800),
+    ),
+    'value-outline': null,
+    'value-stroke-thickness': null,
+);
+
+/// Generates a fluent graph schema.
+/// @type {Map}
+/// @requires {Map} $material-graph
+$fluent-graph: $material-graph;
+
+/// Generates a bootstrap graph schema.
+/// @type {Map}
+/// @requires {Map} $material-graph
+$bootstrap-graph: $material-graph;
+
+/// Generates an indigo graph schema.
+/// @type {Map}
+/// @requires {Map} $material-graph
+$indigo-graph: $material-graph;

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

@@ -0,0 +1,68 @@
+@use './category-chart' as *;
+@use './data-chart' as *;
+@use './doughnut-chart' as *;
+@use './financial-chart' as *;
+@use './funnel-chart' as *;
+@use './gauge' as *;
+@use './geo-map' as *;
+@use './graph' as *;
+@use './pie-chart' as *;
+@use './shape-chart' as *;
+@use './sparkline' as *;
+
+$light-material-schema: (
+    category-chart: $material-category-chart,
+    data-chart: $material-data-chart,
+    doughnut-chart: $material-doughnut-chart,
+    financial-chart: $material-financial-chart,
+    funnel-chart: $material-funnel-chart,
+    linear-gauge: $material-linear-gauge,
+    radial-gauge: $material-radial-gauge,
+    geo-map: $material-geo-map,
+    bullet-graph: $material-graph,
+    pie-chart: $material-pie-chart,
+    shape-chart: $material-shape-chart,
+    sparkline: $material-sparkline,
+);
+$light-bootstrap-schema: (
+    category-chart: $bootstrap-category-chart,
+    data-chart: $bootstrap-data-chart,
+    doughnut-chart: $bootstrap-doughnut-chart,
+    financial-chart: $bootstrap-financial-chart,
+    funnel-chart: $bootstrap-funnel-chart,
+    linear-gauge: $bootstrap-linear-gauge,
+    radial-gauge: $bootstrap-radial-gauge,
+    geo-map: $bootstrap-geo-map,
+    bullet-graph: $bootstrap-graph,
+    pie-chart: $bootstrap-pie-chart,
+    shape-chart: $bootstrap-shape-chart,
+    sparkline: $bootstrap-sparkline,
+);
+$light-fluent-schema: (
+    category-chart: $fluent-category-chart,
+    data-chart: $fluent-data-chart,
+    doughnut-chart: $fluent-doughnut-chart,
+    financial-chart: $fluent-financial-chart,
+    funnel-chart: $fluent-funnel-chart,
+    linear-gauge: $fluent-linear-gauge,
+    radial-gauge: $fluent-radial-gauge,
+    geo-map: $fluent-geo-map,
+    bullet-graph: $fluent-graph,
+    pie-chart: $fluent-pie-chart,
+    shape-chart: $fluent-shape-chart,
+    sparkline: $fluent-sparkline,
+);
+$light-indigo-schema: (
+    category-chart: $indigo-category-chart,
+    data-chart: $indigo-data-chart,
+    doughnut-chart: $indigo-doughnut-chart,
+    financial-chart: $indigo-financial-chart,
+    funnel-chart: $indigo-funnel-chart,
+    linear-gauge: $indigo-linear-gauge,
+    radial-gauge: $indigo-radial-gauge,
+    geo-map: $indigo-geo-map,
+    bullet-graph: $indigo-graph,
+    pie-chart: $indigo-pie-chart,
+    shape-chart: $indigo-shape-chart,
+    sparkline: $indigo-sparkline,
+);