vaadin-date-picker-theme.js

const template = document.createElement('template');
template.setAttribute('style', 'display: none;');
template.innerHTML = `<dom-module id="material-text-field" theme-for="vaadin-text-field">
    <template>
        <style>
            :host {
                background-color: #e1e9fd;
                border-radius: 4px;
                padding: 6px 12px;
                width: 60px;
            }

            [part="value"] {
                background-color: #e1e9fd;
                border: 0;
                height: 20px;
                font-family: 'Roboto', sans-serif;
                font-size: 15px;
                text-align: center;
                width: 60px;
            }

            [part="value"]:focus {
                border: 0;
                outline: none;
                outline-offset: 0;
            }
        </style>
    </template>
</dom-module><dom-module id="vaadin-date-picker-theme" theme-for="vaadin-date-picker">
    <template>
        <style>
            :host {
                width: 84px;
            }

            [part="overlay-header"] {
                border: 0;
            }

            [part="clear-button"] {
                display: none;
            }

            [part="overlay"] {
                background-color: rgba(33, 33, 33, 0.98);
                border-radius: 4px;
                box-sizing: border-box;
                color: white;
                font-family: 'Roboto', sans-serif;
                font-size: 14px;
                margin-top: 8px;
                max-height: 400px;
                max-width: 389px;
            }

            [part="toggle-button"] {
                display: none;
            }
        </style>
    </template>
</dom-module><dom-module id="vaadin-date-picker-overlay-theme" theme-for="vaadin-date-picker-overlay">
    <template>
        <style>
            :host {
                box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.3);
            }

            [part="overlay-header"] {
                background: #262626;
                border-bottom: 1px solid #333;
                padding: 1em;
                position: relative;
            }

            [part="months"] {
                padding: 16px;
                width: 300px;
            }

            [part="clear-button"],
            [part="toggle-button"] {
                height: 1.4em;
                width: 1.4em;
                font-size: 1.4em;
                margin-left: 0.6em;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            [part="today-button"],
            [part="cancel-button"] {
                margin: 0;
            }

            [part="years-toggle-button"] {
                background: #262626;
                align-items: center;
            }

            [part="years-toggle-button"]::before {
                font-size: 1.4em;
                line-height: 1em;
            }

            [part="years"] {
                background: linear-gradient(to right, #333, #212121);
                border-left: 1px solid #353535;
                color: #c3c3c3;
                cursor: pointer;
                width: 55px;
            }

            [part="years"]::before {
                border-left-color: #fff;
                z-index: 1;
            }

            [part="toolbar"] {
                padding: 1em;
                background: linear-gradient(#292929, #212121);
                border-top: 1px solid #444;
            }

            [part="year-number"],
            [part="year-separator"] {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50%;
                transform: translateY(-50%);
            }

            [part="year-separator"]::after {
                font-family: 'vaadin-date-picker-icons';
                content: "\\e903";
                font-size: 4px;
            }
        </style>
    </template>
</dom-module><dom-module id="vaadin-button-theme" theme-for="vaadin-button">
    <template>
        <style>
            [part="button"] {
                background-color: transparent;
                border: 0;
                color: inherit;
                font: inherit;
                font-weight: 500;
                margin: 0;
                outline: none;
                padding: 3px 8px;
                text-transform: uppercase;
            }
        </style>
    </template>
</dom-module><dom-module id="vaadin-month-calendar-theme" theme-for="vaadin-month-calendar">
    <template>
        <style>
            :host {
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

            [part="weekday"]:empty,
            [part="week-numbers"] {
                width: 2em;
            }

            [part="month-header"],
            [part="weekday"],
            [part="week-number"],
            [part="date"] {
                text-align: center;
                cursor: default;
                box-sizing: border-box;
                padding: 0.5em 0;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            [part="month-header"],
            [part="date"][selected] {
                font-weight: 600;
            }

            [part="weekday"],
            [part="week-number"] {
                opacity: 0.5;
            }

            [part="week-number"],
            [part="date"] {
                height: 2.5em;
            }

            [part="date"]:not(:empty) {
                cursor: pointer;
            }

            [part="date"][disabled] {
                opacity: 0.3;
                cursor: default;
            }

            [part="date"][focused] {
                background: rgba(157, 194, 255, 0.08);
                border-radius: 50%;
                font-weight: 600;
                margin: 0 3.9px;
                width: 2.5em;
            }

            [part="date"][selected] {
                background: rgba(157, 194, 255, 0.33);
                border-radius: 50%;
                font-weight: 600;
                margin: 0 3.9px;
                width: 2.5em;
            }
        </style>
    </template>
</dom-module>`;

document.head.appendChild(template.content);