@finos/perspective-viewer/src/themes/pro-dark.less

The `<perspective-viewer>` Custom Element, frontend for Perspective.js

// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
// ┃ This file is part of the Perspective library, distributed under the terms ┃
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

@import "icons.less";
@import "intl.less";

@import url("ref://pro.less");

// Register theme for auto-detection
perspective-viewer,
perspective-viewer[theme="Pro Dark"] {
    --theme-name: "Pro Dark";
}

perspective-viewer[theme="Pro Dark"] {
    @include perspective-viewer-pro-dark;
}

perspective-copy-menu[theme="Pro Dark"],
perspective-export-menu[theme="Pro Dark"],
perspective-dropdown[theme="Pro Dark"],
perspective-date-column-style[theme="Pro Dark"],
perspective-datetime-column-style[theme="Pro Dark"],
perspective-number-column-style[theme="Pro Dark"],
perspective-string-column-style[theme="Pro Dark"] {
    @include perspective-modal-pro-dark;
}

@mixin perspective-viewer-pro-dark {
    @include perspective-viewer-pro;
    @include perspective-viewer-pro-dark--colors;
    @include perspective-viewer-pro-dark--datagrid;
    @include perspective-viewer-pro-dark--d3fc;
    @include perspective-viewer-pro-dark--openlayers;
}

@mixin perspective-modal-pro-dark {
    @include perspective-modal-pro;
    @include perspective-viewer-pro-dark--colors;

    background-color: #242526;
    border: 1px solid #4c505b;
}

@mixin perspective-viewer-pro-dark--colors {
    background-color: #242526;
    color: white;
    --icon--color: white;
    --active--color: #2770a9;
    --error--color: #ff9485;
    --inactive--color: #61656e;
    --inactive--border-color: #4c505b;
    --plugin--background: #242526;
    --modal-target--background: rgba(255, 255, 255, 0.05);
    --active--background: rgba(39, 113, 170, 0.5);
    --expression--operator-color: #c5c9d0;
    --expression--function-color: #22a0ce;
    --expression--error-color: rgb(255, 136, 136);
    --calendar--filter: invert(1);
    --warning--color: #242526;
    --warning--background: var(--icon--color);

    --select-arrow--background-image: var(
        --select-arrow-light--background-image
    );

    --select-arrow--hover--background-image: var(
        --select-arrow-dark--background-image
    );

    // Syntax
    --code-editor-symbol--color: white;
    --code-editor-literal--color: #7dc3f0;
    --code-editor-operator--color: rgb(23, 166, 123);
    --code-editor-comment--color: rgb(204, 120, 48);
    --code-editor-column--color: #e18ee1;
    // --code-editor-unknown--color: rgb(204, 120, 48);
}

@mixin perspective-viewer-pro-dark--openlayers {
    --map-tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
    --map-attribution--filter: invert(1) hue-rotate(180deg);
    --map-element-background: #212c2f;
    --map-category-1: rgb(71, 120, 194);
    --map-category-2: rgb(204, 120, 48);
    --map-category-3: rgb(158, 84, 192);
    --map-category-4: rgb(51, 150, 153);
    --map-category-5: rgb(102, 114, 143);
    --map-category-6: rgb(211, 103, 189);
    --map-category-7: rgb(109, 124, 77);
    --map-category-8: rgb(221, 99, 103);
    --map-category-9: rgb(120, 104, 206);
    --map-category-10: rgb(23, 166, 123);
    --map-gradient: linear-gradient(#dd6367 0%, #242526 50%, #3289c8 100%);
}

@mixin perspective-viewer-pro-dark--datagrid {
    --rt-pos-cell--color: #7dc3f0;
    --rt-neg-cell--color: #ff9485;
}

@mixin perspective-viewer-pro-dark--d3fc {
    --d3fc-legend--text: #c5c9d0;
    --d3fc-treedata--labels: white;
    --d3fc-treedata--hover-highlight: white;
    --d3fc-tooltip--color: white;
    --d3fc-axis-ticks--color: #c5c9d0;
    --d3fc-axis--lines: #61656e;
    --d3fc-gridline--color: #3b3f46;
    --d3fc-tooltip--background: rgba(42, 44, 47, 1);
    --d3fc-tooltip--border-color: #242526;
    --d3fc-legend--background: var(--plugin--background);

    --d3fc-series: rgb(71, 120, 194);
    --d3fc-series-1: rgb(71, 120, 194);
    --d3fc-series-2: rgb(204, 120, 48);
    --d3fc-series-3: rgb(158, 84, 192);
    --d3fc-series-4: rgb(51, 150, 153);
    --d3fc-series-5: rgb(102, 114, 143);
    --d3fc-series-6: rgb(211, 103, 189);
    --d3fc-series-7: rgb(109, 124, 77);
    --d3fc-series-8: rgb(221, 99, 103);
    --d3fc-series-9: rgb(120, 104, 206);
    --d3fc-series-10: rgb(23, 166, 123);

    --d3fc-full--gradient: linear-gradient(
        #dd6367 0%,
        #242526 50%,
        #3289c8 100%
    );

    --d3fc-positive--gradient: linear-gradient(#242526 0%, #3289c8 100%);
    --d3fc-negative--gradient: linear-gradient(#dd6367 0%, #242526 100%);
}

// :host select {
//     background-image: url("../svg/dropdown-selector.svg");
// }