@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/themes/themes.css

@@ -0,0 +1,22 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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 "./pro.css";
+@import "./pro-dark.css";
+@import "./monokai.css";
+@import "./solarized.css";
+@import "./solarized-dark.css";
+@import "./vaporwave.css";
+@import "./gruvbox.css";
+@import "./gruvbox-dark.css";
+@import "./dracula.css";
+@import "./botanical.css";

package/src/themes/vaporwave.css

@@ -0,0 +1,256 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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 "./defaults.css";
+
+perspective-viewer,
+perspective-viewer[theme="Vaporwave"] {
+    --psp-theme-name: "Vaporwave";
+}
+
+perspective-viewer[theme="Vaporwave"] {
+    /* perspective-viewer-pro-dark--colors (overrides) */
+    background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--psp-error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    /* perspective-viewer-pro-dark--datagrid */
+    --psp-datagrid--pos-cell--color: #7dc3f0;
+    --psp-datagrid--neg-cell--color: #ff9485;
+
+    /* perspective-viewer-pro-dark--d3fc (overrides) */
+    --psp-d3fc--legend--color: #c5c9d0;
+    --psp-d3fc--treemap--labels: white;
+    --psp-d3fc--treemap--hover-highlight: white;
+    --psp-d3fc--tooltip--color: white;
+    --psp-d3fc--axis-ticks--color: #c5c9d0;
+    --psp-d3fc--axis-lines--color: #61656e;
+    --psp-d3fc--gridline--color: #3b3f46;
+    --psp-d3fc--tooltip--background: rgba(42, 44, 47, 1);
+    --psp-d3fc--tooltip--border-color: #242526;
+    --psp-d3fc--legend--background: var(--psp--background-color);
+    --psp-d3fc--series--color: rgb(71, 120, 194);
+    --psp-d3fc--series-1--color: rgb(71, 120, 194);
+    --psp-d3fc--series-2--color: rgb(204, 120, 48);
+    --psp-d3fc--series-3--color: rgb(158, 84, 192);
+    --psp-d3fc--series-4--color: rgb(51, 150, 153);
+    --psp-d3fc--series-5--color: rgb(102, 114, 143);
+    --psp-d3fc--series-6--color: rgb(211, 103, 189);
+    --psp-d3fc--series-7--color: rgb(109, 124, 77);
+    --psp-d3fc--series-8--color: rgb(221, 99, 103);
+    --psp-d3fc--series-9--color: rgb(120, 104, 206);
+    --psp-d3fc--series-10--color: rgb(23, 166, 123);
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #242526 0%,
+        #3289c8 100%
+    );
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 100%
+    );
+
+    /* perspective-viewer-pro-dark--openlayers (overrides) */
+    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
+    --psp-openlayers--attribution--filter: invert(1) hue-rotate(180deg);
+    --psp-openlayers--element--background: #212c2f;
+    --psp-openlayers--category-1--color: rgb(71, 120, 194);
+    --psp-openlayers--category-2--color: rgb(204, 120, 48);
+    --psp-openlayers--category-3--color: rgb(158, 84, 192);
+    --psp-openlayers--category-4--color: rgb(51, 150, 153);
+    --psp-openlayers--category-5--color: rgb(102, 114, 143);
+    --psp-openlayers--category-6--color: rgb(211, 103, 189);
+    --psp-openlayers--category-7--color: rgb(109, 124, 77);
+    --psp-openlayers--category-8--color: rgb(221, 99, 103);
+    --psp-openlayers--category-9--color: rgb(120, 104, 206);
+    --psp-openlayers--category-10--color: rgb(23, 166, 123);
+    --psp-openlayers--gradient--background: linear-gradient(
+        #dd6367 0%,
+        #242526 50%,
+        #3289c8 100%
+    );
+
+    /* perspective-viewer-vaporwave--colors */
+    color: #49acff;
+    background-color: rgb(7, 8, 29) !important;
+    --psp--color: #49acff;
+    --psp-inactive--color: rgb(19, 33, 50) !important;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: rgb(7, 8, 29) !important;
+
+    /* perspective-viewer-vaporwave--animation */
+    --psp-status-icon--updating-keyframes-start--filter: opacity(1);
+    --psp-status-icon--updating-keyframes-end--filter: opacity(0);
+    --psp-status-icon--updating-keyframes-start--transform: scale(1);
+    --psp-status-icon--updating-keyframes-end--transform: scale(0.5);
+    --psp-status-icon--keyframes-start--transform: scale(1.25);
+    --psp-status-icon--keyframes-end--transform: scale(1);
+
+    /* perspective-viewer-vaporwave--datagrid */
+    --pp-color-1: #092132;
+    --pp-color-2: #42b6e6;
+    --psp-datagrid--pos-cell--color: #42b6e6 !important;
+    --psp-datagrid--hover--border-color: var(--pp-color-1) !important;
+
+    /* FIXME: broken in shadow DOM */
+    regular-table table tbody th:empty {
+        background: linear-gradient(
+            to right,
+            transparent 9px,
+            rgb(19, 33, 50) 10px,
+            transparent 11px
+        );
+        background-repeat: no-repeat;
+        background-position: 0px -10px;
+    }
+
+    /* perspective-viewer-vaporwave--d3fc */
+    --psp-d3fc--axis-ticks--color: #49acff;
+    --psp-d3fc--gridline--color: rgb(19, 33, 50);
+    --psp-d3fc--series--color: #01cdfe;
+    --psp-d3fc--series-1--color: #01cdfe;
+    --psp-d3fc--series-2--color: #ff71ce;
+    --psp-d3fc--series-3--color: #05ffa1;
+    --psp-d3fc--series-4--color: #b967ff;
+    --psp-d3fc--series-5--color: #fffb96;
+
+    --psp-d3fc--series-6--color: hsl(192, 99%, 25%);
+    --psp-d3fc--series-7--color: hsl(321, 100%, 36%);
+    --psp-d3fc--series-8--color: hsl(192, 99%, 25%);
+    --psp-d3fc--series-9--color: hsl(157, 100%, 25%);
+    --psp-d3fc--series-10--color: hsl(272, 100%, 35%);
+
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #f3d431,
+        #efb92d,
+        #ed9c25,
+        #eb7e20,
+        #e75d1e,
+        #d14632,
+        #b03e38,
+        #8c3a36,
+        #643633,
+        #07081d
+    ) !important;
+
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #07081d,
+        #2e4463,
+        #1e588a,
+        #086da7,
+        #0082b9,
+        #039ac7,
+        #12b1d4,
+        #2bc8e2,
+        #3ddff0,
+        #61f4fb
+    ) !important;
+
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #f3d431,
+        #efb92d,
+        #ed9c25,
+        #eb7e20,
+        #e75d1e,
+        #d14632,
+        #b03e38,
+        #8c3a36,
+        #643633,
+        #07081d,
+        #2e4463,
+        #1e588a,
+        #086da7,
+        #0082b9,
+        #039ac7,
+        #12b1d4,
+        #2bc8e2,
+        #3ddff0,
+        #61f4fb
+    ) !important;
+}
+
+perspective-copy-menu[theme="Vaporwave"],
+perspective-export-menu[theme="Vaporwave"],
+perspective-dropdown[theme="Vaporwave"],
+perspective-date-column-style[theme="Vaporwave"],
+perspective-datetime-column-style[theme="Vaporwave"],
+perspective-number-column-style[theme="Vaporwave"],
+perspective-string-column-style[theme="Vaporwave"] {
+    /* perspective-viewer-pro-dark--colors (overrides) */
+    background-color: #242526;
+    color: white;
+    --psp--color: white;
+    --psp-active--color: #2770a9;
+    --psp-error--color: #ff9485;
+    --psp-inactive--color: #61656e;
+    --psp-inactive--border-color: #4c505b;
+    --psp--background-color: #242526;
+    --psp-active--background: rgba(39, 113, 170, 0.5);
+    --psp-expression--operator--color: #c5c9d0;
+    --psp-expression--function--color: #22a0ce;
+    --psp-expression--psp-error--color: rgb(255, 136, 136);
+    --psp-calendar--filter: invert(1);
+    --psp-warning--color: #242526;
+    --psp-warning--background: var(--psp--color);
+    --psp-icon--select-arrow--mask-image: var(
+        --psp-icon--select-arrow-light--mask-image
+    );
+    --psp-icon--select-arrow-hover--mask-image: var(
+        --psp-icon--select-arrow-dark--mask-image
+    );
+    --psp-code-editor--symbol--color: white;
+    --psp-code-editor--literal--color: #7dc3f0;
+    --psp-code-editor--operator--color: rgb(23, 166, 123);
+    --psp-code-editor--comment--color: rgb(204, 120, 48);
+    --psp-code-editor--column--color: #e18ee1;
+
+    border: 1px solid #4c505b;
+
+    /* perspective-viewer-vaporwave--colors */
+    color: #49acff;
+    --psp--color: #49acff;
+    --psp-inactive--color: rgb(19, 33, 50) !important;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: rgb(7, 8, 29) !important;
+
+    background-color: #07081d;
+}

package/src/less/column-dropdown.less

@@ -1,95 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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 "dom/scrollbar.less";
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    box-sizing: border-box;
-    position: fixed;
-    z-index: 10000;
-    outline: none;
-    font-size: 0.75em;
-    border: inherit;
-    // box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    user-select: none;
-    background-color: var(--icon--color, #fff) !important;
-    color: var(--plugin--background, #333) !important;
-    // padding: 6px 8px;
-    border: 1px solid var(--icon--color) !important;
-    max-width: 300px;
-    overflow: hidden;
-    max-height: 600px;
-    overflow: auto;
-    @include scrollbar;
-
-    display: flex;
-    flex-direction: column;
-
-    .selected {
-        background-color: var(--plugin--background) !important;
-        color: var(--icon--color) !important;
-    }
-
-    span {
-        cursor: pointer;
-        padding: 4px 5px;
-    }
-
-    .no-results {
-        padding: 3px 24px 6px 11px;
-        color: var(--error--color);
-        font-size: 8px;
-    }
-
-    .no-results:before {
-        content: var(--no-results--content, "Invalid Column");
-    }
-
-    #add-expression {
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 12px;
-            margin-right: 5px;
-            -webkit-mask-image: var(--add-expression-icon--mask-image);
-            mask-image: var(--add-expression-icon--mask-image);
-        }
-    }
-}
-
-:host(:hover) {
-    .selected {
-        background-color: var(--icon--color, #fff) !important;
-        color: var(--plugin--background, #333) !important;
-    }
-
-    span:hover,
-    span.selected:hover {
-        background-color: var(--plugin--background) !important;
-        color: var(--icon--color) !important;
-    }
-}
-
-:host(.no-results) {
-    overflow: hidden;
-    background-color: transparent !important;
-    border: none !important;
-}

package/src/less/dom/checkbox.less

@@ -1,100 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-:host {
-    input[type="checkbox"].alternate {
-        appearance: none;
-        height: 14px;
-        width: 14px;
-        padding: 0px;
-        cursor: pointer;
-        outline: none;
-        margin: 0 5px;
-
-        &:before {
-            @include icon;
-            width: 14px;
-            height: 14px;
-            font-family: var(--button--font-family, inherit);
-            background-color: var(--icon--color, #ccc);
-            -webkit-mask-image: var(--inactive-column-selector--content, none);
-            mask-image: var(--inactive-column-selector--content, none);
-        }
-
-        &:hover {
-            border-radius: 2px;
-            outline: 1px solid var(--icon--color);
-        }
-
-        &:checked:hover {
-            background-color: var(--icon--color, #ccc);
-            &:before {
-                background-color: var(--plugin--background, #ccc);
-            }
-        }
-
-        &:checked:before {
-            -webkit-mask-image: var(--active-column-selector--content, none);
-            mask-image: var(--active-column-selector--content, none);
-        }
-    }
-
-    input[type="checkbox"] {
-        float: left;
-        appearance: none;
-        height: 14px;
-        width: 14px;
-        padding: 0px;
-        cursor: pointer;
-        outline: none;
-        margin: 0 5px 0 0;
-
-        &:checked:before {
-            -webkit-mask-image: var(--column-checkbox-on--mask-image);
-            mask-image: var(--column-checkbox-on--mask-image);
-        }
-
-        &[disabled]:before {
-            opacity: 0.2s;
-        }
-
-        &:before {
-            @include icon;
-            height: 13px;
-            width: 13px;
-            -webkit-mask-image: var(--column-checkbox-off--mask-image);
-            mask-image: var(--column-checkbox-off--mask-image);
-        }
-
-        &:hover {
-            background-color: transparent;
-        }
-
-        &:hover:before {
-            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-            mask-image: var(--column-checkbox-hover--mask-image);
-        }
-    }
-
-    input[type="checkbox"]:not(:disabled) {
-        cursor: pointer;
-    }
-}

package/src/less/plugin-selector.less

@@ -1,183 +0,0 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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 "dom/scrollbar.less";
-
-:host {
-    #settings_panel {
-        #plugin_selector_container.open ~ * {
-            opacity: 0;
-        }
-
-        #plugin_selector_container {
-            min-height: var(
-                --plugin-selector--height,
-                var(--status-bar--height, 48px)
-            );
-            display: flex;
-            white-space: nowrap;
-            flex-direction: column;
-            flex: 0 0 auto;
-
-            // Overflow the padding bounds of the container
-            // TODO these bounds exist to protext the resizer and scrollbar (left &
-            // right resp) but we really should find a way to remove it and delegate
-            // to sub-containers.
-            margin: 0 0px 0 -9px;
-
-            #plugin_selector_border {
-                height: 2px;
-                min-height: 2px;
-                width: 100%;
-                background-color: var(--inactive--color, #6e6e6e);
-                margin-top: 2px;
-            }
-
-            .plugin-selector-options {
-                overflow-y: auto;
-                @include scrollbar;
-            }
-
-            &.open {
-                position: absolute;
-                margin: 0;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-
-                // This element is first in the container but visually "overlaps"
-                // when expanded
-                z-index: 3;
-                color: var(--icon--color, #042121);
-                // background: var(--plugin--background);
-
-                .plugin-select-item {
-                    padding-left: 8px;
-                }
-            }
-
-            .plugin-select-item-name {
-                padding-left: 10px;
-                font-size: 1.33333em;
-            }
-
-            .plugin-select-item-name:before {
-                // This value is set in a `style` tag from Yew!
-                content: var(--default-column-title);
-            }
-
-            .plugin-select-item {
-                // width: 48px;
-                padding-left: 9px;
-                height: var(
-                    --plugin-selector--height,
-                    var(--status-bar--height, 48px)
-                );
-                min-height: var(
-                    --plugin-selector--height,
-                    var(--status-bar--height, 48px)
-                );
-                display: flex;
-                align-items: center;
-                border-bottom: 1px solid transparent;
-                box-shadow: 0px 1px var(--inactive--color, #6e6e6e);
-                cursor: pointer;
-            }
-
-            // Hadn't seen this technique before, makes sizing/positioning these
-            // trivial.  There's some indication this doesn't work on non-chrome
-            // https://stackoverflow.com/questions/36259410/how-to-set-size-of-svg-image-in-before-pseudo-class
-            // https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css
-            .plugin-select-item:before {
-                content: "";
-                display: inline-block;
-                height: 35px;
-                width: 40px;
-                -webkit-mask-size: cover;
-                mask-size: cover;
-                background-repeat: no-repeat;
-                background-color: var(--icon--color);
-            }
-
-            .plugin-select-item:hover {
-                background-color: var(--icon--color, #042121);
-                color: var(--plugin--background, #fdfffd);
-            }
-
-            .plugin-select-item:hover:before {
-                background-color: var(--plugin--background, #fdfffd);
-            }
-
-            .plugin-select-item[data-plugin="Candlestick"]:before {
-                // mask-image: var(--plugin-selector-candlestick--content);
-                -webkit-mask-image: var(--plugin-selector-candlestick--content);
-            }
-
-            .plugin-select-item[data-plugin="Heatmap"]:before {
-                -webkit-mask-image: var(--plugin-selector-heatmap--content);
-            }
-
-            .plugin-select-item[data-plugin="Map Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-map-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="OHLC"]:before {
-                -webkit-mask-image: var(--plugin-selector-ohlc--content);
-            }
-
-            .plugin-select-item[data-plugin="Sunburst"]:before {
-                -webkit-mask-image: var(--plugin-selector-sunburst--content);
-            }
-
-            .plugin-select-item[data-plugin="Treemap"]:before {
-                -webkit-mask-image: var(--plugin-selector-treemap--content);
-            }
-
-            .plugin-select-item[data-plugin="X Bar"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-bar--content);
-            }
-
-            .plugin-select-item[data-plugin="X/Y Line"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-y-line--content);
-            }
-
-            .plugin-select-item[data-plugin="X/Y Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-x-y-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Area"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-area--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Bar"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-bar--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Line"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-line--content);
-            }
-
-            .plugin-select-item[data-plugin="Y Scatter"]:before {
-                -webkit-mask-image: var(--plugin-selector-y-scatter--content);
-            }
-
-            .plugin-select-item[data-plugin="Datagrid"]:before {
-                -webkit-mask-image: var(--plugin-selector-datagrid--content);
-            }
-        }
-
-        #plugin_selector {
-            flex-grow: 1;
-        }
-    }
-}