/**
 * DevExtreme (esm/__internal/viz/core/themes/material/index.js)
 * Version: 24.1.7-build-24272-1937
 * Build date: Sat Sep 28 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */
const FONT_FAMILY = "'Roboto', 'RobotoFallback', 'Helvetica', 'Arial', sans-serif";
const LIGHT_TITLE_COLOR = "rgba(0,0,0,0.87)";
const LIGHT_LABEL_COLOR = "rgba(0,0,0,0.54)";
const DARK_TITLE_COLOR = "rgba(255,255,255,0.87)";
const DARK_LABEL_COLOR = "rgba(255,255,255,0.54)";
const DARK_BACKGROUND_COLOR = "#363640";
const WHITE = "#ffffff";
const BLACK = "#000000";
const RANGE_COLOR = "#b5b5b5";
const AREA_LAYER_COLOR = "#686868";
const LINE_COLOR = "#c7c7c7";
const TARGET_COLOR = "#8e8e8e";
const POSITIVE_COLOR = "#b8b8b8";
const LABEL_BORDER_COLOR = "#494949";
const BREAK_STYLE_COLOR = "#818181";
const themes = [{
    baseThemeName: "generic.light",
    theme: {
        name: "material",
        defaultPalette: "Material",
        font: {
            family: FONT_FAMILY
        },
        title: {
            margin: {
                top: 20,
                bottom: 20,
                left: 0,
                right: 0
            },
            font: {
                size: 20,
                family: FONT_FAMILY,
                weight: 500
            },
            horizontalAlignment: "left",
            subtitle: {
                font: {
                    size: 14
                },
                horizontalAlignment: "left"
            }
        },
        tooltip: {
            shadow: {
                opacity: 0
            },
            border: {
                visible: false
            },
            paddingLeftRight: 8,
            paddingTopBottom: 6,
            arrowLength: 0,
            location: "edge",
            color: "#616161",
            font: {
                color: WHITE
            },
            cornerRadius: 4
        },
        chart: {
            commonAxisSettings: {
                minorTick: {
                    opacity: .5
                },
                label: {
                    font: {
                        size: 11
                    }
                }
            },
            commonAnnotationSettings: {
                font: {
                    color: WHITE
                },
                border: {
                    color: "#616161"
                },
                color: "#616161",
                arrowLength: 14,
                arrowWidth: 0,
                shadow: {
                    opacity: .08,
                    offsetY: 4,
                    blur: 8
                },
                cornerRadius: 4
            }
        },
        pie: {
            title: {
                horizontalAlignment: "center",
                subtitle: {
                    horizontalAlignment: "center"
                }
            }
        },
        polar: {
            commonAxisSettings: {
                minorTick: {
                    opacity: .5
                }
            },
            title: {
                horizontalAlignment: "center",
                subtitle: {
                    horizontalAlignment: "center"
                }
            }
        },
        funnel: {
            title: {
                horizontalAlignment: "center",
                subtitle: {
                    horizontalAlignment: "center"
                }
            }
        },
        gauge: {
            title: {
                horizontalAlignment: "center",
                subtitle: {
                    horizontalAlignment: "center"
                }
            }
        },
        barGauge: {
            title: {
                horizontalAlignment: "center",
                subtitle: {
                    horizontalAlignment: "center"
                }
            }
        },
        rangeSelector: {
            sliderHandle: {
                opacity: .5
            }
        },
        treeMap: {
            group: {
                label: {
                    font: {
                        weight: 500
                    }
                }
            }
        }
    }
}, {
    baseThemeName: "material",
    theme: {
        name: "material.light",
        gridColor: "#e0e0e0",
        axisColor: LIGHT_LABEL_COLOR,
        primaryTitleColor: LIGHT_TITLE_COLOR,
        legend: {
            font: {
                color: LIGHT_LABEL_COLOR
            }
        },
        chart: {
            scrollBar: {
                color: "#bfbfbf",
                opacity: .7
            }
        },
        gauge: {
            rangeContainer: {
                backgroundColor: "rgba(0,0,0,0.2)"
            }
        },
        barGauge: {
            backgroundColor: "#efefef"
        }
    }
}, {
    baseThemeName: "material",
    theme: {
        name: "material.dark",
        gridColor: "#515159",
        backgroundColor: "#363640",
        axisColor: DARK_LABEL_COLOR,
        font: {
            color: DARK_LABEL_COLOR
        },
        primaryTitleColor: DARK_TITLE_COLOR,
        secondaryTitleColor: DARK_TITLE_COLOR,
        tooltip: {
            color: "#000"
        },
        export: {
            backgroundColor: "#363640",
            font: {
                color: "#dbdbdb"
            },
            button: {
                default: {
                    color: "#dedede",
                    borderColor: "#4d4d4d",
                    backgroundColor: "#363640"
                },
                hover: {
                    color: "#dedede",
                    borderColor: "#6c6c6c",
                    backgroundColor: "#3f3f4b"
                },
                focus: {
                    color: "#dedede",
                    borderColor: "#8d8d8d",
                    backgroundColor: "#494956"
                },
                active: {
                    color: "#dedede",
                    borderColor: "#8d8d8d",
                    backgroundColor: "#494956"
                }
            },
            shadowColor: "#292929"
        },
        "chart:common": {
            commonSeriesSettings: {
                label: {
                    border: {
                        color: "#494949"
                    }
                },
                valueErrorBar: {
                    color: WHITE
                }
            }
        },
        "chart:common:axis": {
            constantLineStyle: {
                color: WHITE
            }
        },
        "chart:common:annotation": {
            border: {
                color: "#000"
            },
            color: "#000"
        },
        chart: {
            commonPaneSettings: {
                border: {
                    color: "#494949"
                }
            },
            commonAxisSettings: {
                breakStyle: {
                    color: "#818181"
                }
            },
            zoomAndPan: {
                dragBoxStyle: {
                    color: WHITE
                }
            }
        },
        gauge: {
            rangeContainer: {
                backgroundColor: "#b5b5b5"
            },
            valueIndicators: {
                _default: {
                    color: "#b5b5b5"
                },
                rangebar: {
                    color: "#84788b"
                },
                twocolorneedle: {
                    secondColor: "#ba544d"
                },
                trianglemarker: {
                    color: "#b7918f"
                },
                textcloud: {
                    color: "#ba544d"
                }
            }
        },
        barGauge: {
            backgroundColor: "#3c3c3c"
        },
        rangeSelector: {
            scale: {
                tick: {
                    color: WHITE,
                    opacity: .32
                },
                minorTick: {
                    color: WHITE,
                    opacity: .1
                },
                breakStyle: {
                    color: "#818181"
                }
            },
            selectedRangeColor: "#b5b5b5",
            sliderMarker: {
                color: "#b5b5b5",
                font: {
                    color: "#363640"
                }
            },
            sliderHandle: {
                color: WHITE,
                opacity: .2
            },
            shutter: {
                color: WHITE,
                opacity: .1
            }
        },
        map: {
            background: {
                borderColor: "#3f3f3f"
            },
            layer: {
                label: {
                    stroke: BLACK,
                    font: {
                        color: WHITE
                    }
                }
            },
            "layer:area": {
                borderColor: "#363640",
                color: "#686868",
                hoveredBorderColor: WHITE,
                selectedBorderColor: WHITE
            },
            "layer:line": {
                color: "#c77244",
                hoveredColor: "#ff5d04",
                selectedColor: "#ff784f"
            },
            "layer:marker:bubble": {
                hoveredBorderColor: WHITE,
                selectedBorderColor: WHITE
            },
            "layer:marker:pie": {
                hoveredBorderColor: WHITE,
                selectedBorderColor: WHITE
            },
            legend: {
                border: {
                    color: "#3f3f3f"
                },
                font: {
                    color: WHITE
                }
            },
            controlBar: {
                borderColor: "#c7c7c7",
                color: "#363640"
            }
        },
        treeMap: {
            group: {
                color: "#4c4c4c",
                label: {
                    font: {
                        color: "#a3a3a3"
                    }
                }
            }
        },
        sparkline: {
            lineColor: "#c7c7c7",
            firstLastColor: "#c7c7c7",
            barPositiveColor: "#b8b8b8",
            barNegativeColor: "#8e8e8e",
            winColor: "#b8b8b8",
            lossColor: "#8e8e8e",
            pointColor: "#363640"
        },
        bullet: {
            targetColor: "#8e8e8e"
        },
        funnel: {
            item: {
                border: {
                    color: "#363640"
                }
            }
        },
        sankey: {
            label: {
                font: {
                    color: WHITE
                }
            }
        }
    }
}];

function getMaterialColorScheme(accentName, themeName, accentColor) {
    return {
        theme: {
            name: `material.${accentName}.${themeName}`,
            rangeSelector: {
                selectedRangeColor: accentColor,
                sliderMarker: {
                    color: accentColor
                },
                sliderHandle: {
                    color: accentColor
                }
            },
            map: {
                "layer:marker:dot": {
                    color: accentColor
                },
                "layer:marker:bubble": {
                    color: accentColor
                },
                legend: {
                    markerColor: accentColor
                }
            },
            bullet: {
                color: accentColor
            },
            gauge: {
                valueIndicators: {
                    rangebar: {
                        color: accentColor
                    },
                    textcloud: {
                        color: accentColor
                    }
                }
            }
        },
        baseThemeName: `material.${themeName}`
    }
}
const materialAccents = {
    blue: "#03a9f4",
    lime: "#cddc39",
    orange: "#ff5722",
    purple: "#9c27b0",
    teal: "#009688"
};
Object.keys(materialAccents).forEach((accent => {
    const color = materialAccents[accent];
    themes.push(getMaterialColorScheme(accent, "light", color), getMaterialColorScheme(accent, "dark", color), {
        theme: {
            name: `material.${accent}.light.compact`
        },
        baseThemeName: `material.${accent}.light`
    }, {
        theme: {
            name: `material.${accent}.dark.compact`
        },
        baseThemeName: `material.${accent}.dark`
    })
}));
export default themes;
