// stylelint-disable max-line-length
@use '../../../../utils/map' as *;

////
/// @package theming
/// @group schemas
/// @access public
////

/// Generates a base data chart schema.
/// @access private
/// @type Map
$light-data-chart: (
    _meta: (
        name: 'data-chart',
        variant: 'light',
    ),
);

/// Generates a material base data chart schema.
/// @type Map
/// @prop {List} margin [null] - Sets the margin (top, right, bottom, left) of the chart content.
/// @prop {Color} title-text-color [color: ('gray', 900)] - 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 [color: ('gray', 600)] - Sets the color of the chart subtitle.
/// @prop {List} subtitle-margin [null] - Sets the margins (top, right, bottom, left) of the chart subtitle.
/// @prop {List} brushes [series] - Defines the palette from which automatically assigned series colors are selected.
/// @prop {List} marker-brushes [series] - Defines the palette from which automatically assigned marker brushes are selected.
/// @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 marker outlines are selected.
/// @prop {Color} plot-area-background [color: ('surface', 500)] - Sets the brush used as the background for the current Chart object's plot area.
/// @prop {String} title-horizontal-alignment [null] - The horizontal alignment to use for the title.
/// @prop {String} subtitle-horizontal-alignment [null] - The horizontal alignment to use for the subtitle.
/// @prop {List} axis-label-margin [null] - Sets the margin (top, right, bottom, left) of labels on the both axes.
/// @prop {Color} axis-label-text-color [color: ('gray', 700)] - Sets the color of labels on both axes.
/// @prop {String} axis-label-text-style [null] - Sets the CSS font property for labels on both axes.
/// @prop {String} axis-label-vertical-alignment [null] - Sets the vertical alignment of X-axis labels.
/// @prop {Color} axis-major-stroke [null] - Sets the color to apply to major gridlines along both axes.
/// @prop {Number} axis-major-stroke-thickness [null] - Sets the thickness to apply to major gridlines on both axes.
/// @prop {Color} axis-minor-stroke [null] - Sets the color to apply to minor gridlines along  both axes.
/// @prop {Number} axis-minor-stroke-thickness [null] - Sets the thickness to apply to minor gridlines along both axes.
/// @prop {Color} axis-strip [null] - Sets the color to apply to stripes along both axes.
/// @prop {Color} axis-stroke [color: ('gray', 500)] - Sets the color to apply to both axes.
/// @prop {Number} axis-stroke-thickness [null] - Sets the thickness to apply to both axes.
/// @prop {Number} axis-tick-length [null] - Sets the length of tickmarks along both axes.
/// @prop {Color} axis-tick-stroke [color: ('gray', 500)] - Sets the color to apply to tickmarks along both axes.
/// @prop {Number} axis-tick-stroke-thickness [null] - Sets the thickness to apply to tickmarks along both axes.
/// @prop {String} axis-title-alignment [null] - Sets the horizontal alignment of both axes.
/// @prop {List} axis-title-margin [null] - Sets the margin (top, right, bottom, left) of a title on both axes.
/// @prop {Color} axis-title-text-color [color: ('gray', 900)] - Sets the color of the title on the X-axis.
/// @prop {String} axis-title-text-style [null] - Sets the CSS font property for the title on both axes.
$material-data-chart: extend(
    $light-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,
        axis-label-margin: (
            expand-shorthand: (
                null,
            ),
            map-keys-prefix: 'axis-label',
        ),
        axis-label-text-color: (
            color: (
                'gray',
                700,
            ),
        ),
        axis-label-text-style: null,
        axis-label-vertical-alignment: null,
        axis-stroke: (
            color: (
                'gray',
                500,
            ),
        ),
        axis-stroke-thickness: null,
        axis-major-stroke: null,
        axis-major-stroke-thickness: null,
        axis-minor-stroke: null,
        axis-minor-stroke-thickness: null,
        axis-strip: null,
        axis-tick-length: null,
        axis-tick-stroke: (
            color: (
                'gray',
                500,
            ),
        ),
        axis-tick-stroke-thickness: null,
        axis-title-alignment: null,
        axis-title-margin: (
            expand-shorthand: (
                null,
            ),
            map-keys-prefix: 'axis-title',
        ),
        axis-title-text-color: (
            color: (
                'gray',
                900,
            ),
        ),
        axis-title-text-style: null,
        _meta: (
            theme: 'material',
        ),
    )
);

/// Generates a fluent data-chart schema.
/// @type Map
/// @requires {function} extend
/// @requires $material-data-chart
$fluent-data-chart: extend(
    $material-data-chart,
    (
        _meta: (
            theme: 'fluent',
        ),
    )
);

/// Generates a bootstrap data-chart schema.
/// @type Map
/// @requires {function} extend
/// @requires $material-data-chart
$bootstrap-data-chart: extend(
    $material-data-chart,
    (
        _meta: (
            theme: 'bootstrap',
        ),
    )
);

/// Generates an indigo data-chart schema.
/// @type Map
/// @requires {function} extend
/// @requires $material-data-chart
$indigo-data-chart: extend(
    $material-data-chart,
    (
        _meta: (
            theme: 'indigo',
        ),
    )
);