@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/{less/form/code-editor.less → css/form/code-editor.css}

@@ -1,16 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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";
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     #editor {
@@ -19,7 +18,6 @@
         position: relative;
         overflow-x: visible;
         overflow-y: auto;
-        @include scrollbar;
 
         #editor-height-sizer {
             height: 100px;
@@ -33,13 +31,13 @@
         }
 
         #line_numbers {
-            color: var(--inactive--color);
-            background-color: var(--plugin--background, white);
+            color: var(--psp-inactive--color);
+            background-color: var(--psp--background-color, white);
             box-sizing: border-box;
             display: flex;
             flex-direction: column;
             flex: 0 0 auto;
-            font-family: var(--interface-monospace--font-family, monospace);
+            font-family: var(--psp-interface-monospace--font-family, monospace);
             font-weight: 400;
             overflow: hidden;
             padding: 6px 0 6px 6px;
@@ -59,25 +57,25 @@
         pre#content {
             margin: 0 6px 6px 0;
             padding: 6px 0;
-            // margin-left: 36px;
+            /* margin-left: 36px; */
             box-sizing: border-box;
             pointer-events: none;
             font-weight: 400;
-            font-family: var(--interface-monospace--font-family, monospace);
+            font-family: var(--psp-interface-monospace--font-family, monospace);
             color: var(--code-editor-error--color, red);
             white-space: pre;
             overflow: hidden;
 
             span {
-                // display: contents;
+                /* display: contents; */
             }
 
             .comment {
-                color: var(--code-editor-comment--color, orange);
+                color: var(--psp-code-editor--comment--color, orange);
             }
 
             .operator {
-                color: var(--code-editor-operator--color, green);
+                color: var(--psp-code-editor--operator--color, green);
             }
 
             .unknown {
@@ -85,19 +83,19 @@
             }
 
             .symbol {
-                color: var(--code-editor-symbol--color, #242526);
+                color: var(--psp-code-editor--symbol--color, #242526);
             }
 
             .column {
-                color: var(--code-editor-column--color, purple);
+                color: var(--psp-code-editor--column--color, purple);
             }
 
             .literal {
-                color: var(--code-editor-literal--color, blue);
+                color: var(--psp-code-editor--literal--color, blue);
             }
 
             .error_highlight {
-                // background-color:
+                /* background-color: */
                 color: var(--code-editor-error--color, red);
                 background-color: rgba(255, 0, 0, 0.1);
                 border: 0px solid var(--code-editor-error--color, red);
@@ -107,12 +105,10 @@
         }
 
         #textarea_editable {
-            @include scrollbar;
-
             position: absolute;
             width: 100%;
             height: 100%;
-            font-family: var(--interface-monospace--font-family, monospace);
+            font-family: var(--psp-interface-monospace--font-family, monospace);
             font-size: 1em;
             resize: none;
             padding: 6px 0;
@@ -120,7 +116,7 @@
             border: none;
             outline: none;
             color: transparent;
-            caret-color: var(--code-editor-symbol--color, #242526);
+            caret-color: var(--psp-code-editor--symbol--color, #242526);
             white-space: pre;
             box-sizing: border-box;
             background-color: transparent;

package/src/{less/form/debug.less → css/form/debug.css}

@@ -1,18 +1,19 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     div.tab-title#Debug:before {
-        content: var(--debug-tab-label--content, "Debug JSON");
+        content: var(--psp-label--debug-tab--content, "Debug JSON");
     }
 
     #debug-panel-overflow {
@@ -47,7 +48,7 @@
                 appearance: none;
                 background-color: transparent;
                 border-radius: 3px;
-                border: 1px solid var(--icon--color);
+                border: 1px solid var(--psp--color);
                 color: inherit;
                 cursor: pointer;
                 flex: 0 1 100px;
@@ -59,8 +60,8 @@
                 overflow: hidden;
                 width: 0px;
                 &:not([disabled]):hover {
-                    background-color: var(--icon--color);
-                    color: var(--plugin--background);
+                    background-color: var(--psp--color);
+                    color: var(--psp--background-color);
                 }
 
                 &[disabled] {
@@ -79,10 +80,10 @@
         }
 
         #editor {
-            background-color: var(--plugin--background);
-            border: 1px solid var(--inactive--color);
+            background-color: var(--psp--background-color);
+            border: 1px solid var(--psp-inactive--color);
             border-radius: 2px;
-            // height: 100%;
+            /* height: 100%; */
         }
     }
 }

package/src/{less/function-dropdown.less → css/function-dropdown.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     position: fixed;

package/src/css/plugin-selector.css

@@ -0,0 +1,261 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+
+:host {
+    #settings_panel {
+        #plugin_selector_container.open ~ * {
+            opacity: 0;
+        }
+
+        #plugin_selector_container {
+            min-height: var(
+                --psp-plugin-selector--height,
+                var(--psp-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(--psp-inactive--color, #6e6e6e);
+                margin-top: 2px;
+            }
+
+            .plugin-selector-options {
+                overflow-y: auto;
+            }
+
+            &.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(--psp--color, #042121);
+                /* background: var(--psp--background-color); */
+
+                .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(
+                    --psp-plugin-selector--height,
+                    var(--psp-status-bar--height, 48px)
+                );
+                min-height: var(
+                    --psp-plugin-selector--height,
+                    var(--psp-status-bar--height, 48px)
+                );
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid transparent;
+                box-shadow: 0px 1px var(--psp-inactive--color, #6e6e6e);
+                cursor: pointer;
+            }
+
+            .plugin-select-item > .icon {
+                display: inline-block;
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                background-repeat: no-repeat;
+                background-color: var(--psp--color);
+            }
+
+            .plugin-select-item:hover {
+                background-color: var(--psp--color, #042121);
+                color: var(--psp--background-color, #fdfffd);
+            }
+
+            .plugin-select-item:hover > .icon {
+                background-color: var(--psp--background-color, #fdfffd);
+            }
+
+            .plugin-select-item[data-plugin="Candlestick"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--candlestick--content
+                );
+                mask-image: var(--psp-plugin-selector--candlestick--content);
+                &:before {
+                    content: var(--psp-plugin-selector--candlestick--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Heatmap"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--heatmap--content
+                );
+                mask-image: var(--psp-plugin-selector--heatmap--content);
+                &:before {
+                    content: var(--psp-plugin-selector--heatmap--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Map Scatter"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--map-scatter--content
+                );
+                mask-image: var(--psp-plugin-selector--map-scatter--content);
+                &:before {
+                    content: var(--psp-plugin-selector--map-scatter--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="OHLC"] > .icon {
+                -webkit-mask-image: var(--psp-plugin-selector--ohlc--content);
+                mask-image: var(--psp-plugin-selector--ohlc--content);
+                &:before {
+                    content: var(--psp-plugin-selector--ohlc--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Sunburst"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--sunburst--content
+                );
+                mask-image: var(--psp-plugin-selector--sunburst--content);
+                &:before {
+                    content: var(--psp-plugin-selector--sunburst--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Treemap"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--treemap--content
+                );
+                mask-image: var(--psp-plugin-selector--treemap--content);
+                &:before {
+                    content: var(--psp-plugin-selector--treemap--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="X Bar"] > .icon {
+                -webkit-mask-image: var(--psp-plugin-selector--x-bar--content);
+                mask-image: var(--psp-plugin-selector--x-bar--content);
+                &:before {
+                    content: var(--psp-plugin-selector--x-bar--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="X/Y Line"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--x-y-line--content
+                );
+                mask-image: var(--psp-plugin-selector--x-y-line--content);
+                &:before {
+                    content: var(--psp-plugin-selector--x-y-line--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="X/Y Scatter"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--x-y-scatter--content
+                );
+                mask-image: var(--psp-plugin-selector--x-y-scatter--content);
+                &:before {
+                    content: var(--psp-plugin-selector--x-y-scatter--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Y Area"] > .icon {
+                -webkit-mask-image: var(--psp-plugin-selector--y-area--content);
+                mask-image: var(--psp-plugin-selector--y-area--content);
+                &:before {
+                    content: var(--psp-plugin-selector--y-area--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Y Bar"] > .icon {
+                -webkit-mask-image: var(--psp-plugin-selector--y-bar--content);
+                mask-image: var(--psp-plugin-selector--y-bar--content);
+                &:before {
+                    content: var(--psp-plugin-selector--y-bar--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Y Line"] > .icon {
+                -webkit-mask-image: var(--psp-plugin-selector--y-line--content);
+                mask-image: var(--psp-plugin-selector--y-line--content);
+                &:before {
+                    content: var(--psp-plugin-selector--y-line--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Y Scatter"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--y-scatter--content
+                );
+                mask-image: var(--psp-plugin-selector--y-scatter--content);
+                &:before {
+                    content: var(--psp-plugin-selector--y-scatter--content);
+                    visibility: hidden;
+                }
+            }
+
+            .plugin-select-item[data-plugin="Datagrid"] > .icon {
+                -webkit-mask-image: var(
+                    --psp-plugin-selector--datagrid--content
+                );
+                mask-image: var(--psp-plugin-selector--datagrid--content);
+                &:before {
+                    content: var(--psp-plugin-selector--datagrid--content);
+                    visibility: hidden;
+                }
+            }
+        }
+
+        #plugin_selector {
+            flex-grow: 1;
+        }
+    }
+}

package/src/{less/render-warning.less → css/render-warning.css}

@@ -1,20 +1,21 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// @amber400: #ffca28;
+/* @amber400: #ffca28; */
 
 :host {
     .plugin_information {
-        color: var(--warning--color, inherit);
+        color: var(--psp-warning--color, inherit);
         box-sizing: border-box;
         display: flex;
         position: absolute;
@@ -30,7 +31,7 @@
         align-items: center;
 
         &.plugin_information--warning {
-            background: var(--warning--background, #ffca28);
+            background: var(--psp-warning--background, #ffca28);
         }
 
         .plugin_information__text {
@@ -45,13 +46,13 @@
         }
 
         .plugin_information__icon:before {
-            content: var(--overflow-hint-icon--content);
+            content: var(--psp-icon-overflow-hint--content);
             height: 20px;
             font-family: var(
                 --overflow_hint--font-family,
-                var(--button--font-family, inherit)
+                var(--psp-button--font-family, inherit)
             );
-            color: var(--overflow-hint-icon--color);
+            color: var(--psp-icon-overflow-hint--color);
             padding: var(--overflow-hint-icon--padding, 0 12px 0 6px);
             font-size: 16px;
         }