@perspective-dev/viewer 4.3.0 → 4.4.1

package/src/themes/solarized-dark.css

@@ -0,0 +1,135 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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="Solarized Dark"] {
+    --psp-theme-name: "Solarized Dark";
+}
+
+perspective-viewer[theme="Solarized Dark"] {
+    /* perspective-viewer-solarized--colors */
+    color: #586e75;
+    background-color: #eee8d5;
+    --psp--color: #586e75;
+    --psp-active--color: #268bd2;
+    --psp-error--color: #cb4b16;
+    --psp-inactive--color: #93a1a1;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: #fdf6e3;
+    --psp-column-type--float--color: #268bd2;
+    --psp-column-type--string--color: #cb4b16;
+    --psp-column-type--date--color: #2aa198;
+    --psp-column-type--boolean--color: #b58900;
+
+    /* perspective-viewer-solarized--datagrid */
+    --psp-datagrid--pos-cell--color: #268bd2 !important;
+    --psp-datagrid--neg-cell--color: #cb4b16 !important;
+    --psp-datagrid--hover--border-color: #ccc;
+    --psp-datagrid--border-color: #93a1a1;
+
+    /* perspective-viewer-solarized--d3fc */
+    --psp-d3fc--treemap--labels: black;
+    --psp-d3fc--treemap--hover-highlight: black;
+    --psp-d3fc--axis-ticks--color: #586e75;
+    --psp-d3fc--gridline--color: #eee8d5;
+    --psp-d3fc--series--color: #268bd2;
+    --psp-d3fc--series-1--color: #268bd2;
+    --psp-d3fc--series-2--color: #cb4b16;
+    --psp-d3fc--series-3--color: #b58900;
+    --psp-d3fc--series-4--color: #859900;
+    --psp-d3fc--series-5--color: #2aa198;
+    --psp-d3fc--series-6--color: #6c71c4;
+    --psp-d3fc--series-7--color: #d33682;
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #268bd2 0%,
+        #2aa198,
+        #859900,
+        #b58900,
+        #cb4b16,
+        #dc322f,
+        #d33682 100%
+    );
+
+    /* perspective-viewer-solarized-dark--colors */
+    color: #93a1a1;
+    background-color: #002b36;
+
+    --psp-inactive--color: #586e75;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: #073642;
+
+    --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
+    );
+
+    /* perspective-viewer-solarized-dark--d3fc */
+    --psp-d3fc--treemap--labels: white;
+    --psp-d3fc--treemap--hover-highlight: white;
+    --psp-d3fc--axis-ticks--color: #93a1a1;
+    --psp-d3fc--axis-lines--color: #93a1a1;
+    --psp-d3fc--gridline--color: #002b36;
+    --psp-d3fc--legend--color: #93a1a1;
+
+    --psp-d3fc--full-gradient--background: linear-gradient(
+        #cb4b16 0%,
+        #073642 50%,
+        #268bd2 100%
+    );
+
+    --psp-d3fc--neg-gradient--background: linear-gradient(
+        #cb4b16 0%,
+        #073642 100%
+    );
+}
+
+perspective-copy-menu[theme="Solarized Dark"],
+perspective-export-menu[theme="Solarized Dark"],
+perspective-dropdown[theme="Solarized Dark"],
+perspective-date-column-style[theme="Solarized Dark"],
+perspective-datetime-column-style[theme="Solarized Dark"],
+perspective-number-column-style[theme="Solarized Dark"],
+perspective-string-column-style[theme="Solarized Dark"] {
+    /* perspective-viewer-solarized--colors */
+    color: #586e75;
+    --psp--color: #586e75;
+    --psp-active--color: #268bd2;
+    --psp-error--color: #cb4b16;
+    --psp-inactive--color: #93a1a1;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: #fdf6e3;
+    --psp-column-type--float--color: #268bd2;
+    --psp-column-type--string--color: #cb4b16;
+    --psp-column-type--date--color: #2aa198;
+    --psp-column-type--boolean--color: #b58900;
+
+    /* perspective-viewer-solarized-dark--colors */
+    color: #93a1a1;
+    --psp-inactive--color: #586e75;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: #073642;
+
+    --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
+    );
+
+    background-color: #073642;
+}

package/src/themes/solarized.css

@@ -0,0 +1,95 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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="Solarized"] {
+    --psp-theme-name: "Solarized";
+}
+
+perspective-viewer[theme="Solarized"] {
+    /* perspective-viewer-solarized--colors */
+    color: #586e75;
+    background-color: #eee8d5;
+    --psp--color: #586e75;
+    --psp-active--color: #268bd2;
+    --psp-error--color: #cb4b16;
+    --psp-inactive--color: #93a1a1;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: #fdf6e3;
+
+    /* Column type indicators */
+    --psp-column-type--float--color: #268bd2;
+    --psp-column-type--string--color: #cb4b16;
+    --psp-column-type--date--color: #2aa198;
+    --psp-column-type--boolean--color: #b58900;
+
+    /* perspective-viewer-solarized--datagrid */
+    --psp-datagrid--pos-cell--color: #268bd2 !important;
+    --psp-datagrid--neg-cell--color: #cb4b16 !important;
+    --psp-datagrid--hover--border-color: #ccc;
+    --psp-datagrid--border-color: #93a1a1;
+
+    /* perspective-viewer-solarized--d3fc */
+    --psp-d3fc--treemap--labels: black;
+    --psp-d3fc--treemap--hover-highlight: black;
+
+    --psp-d3fc--axis-ticks--color: #586e75;
+    --psp-d3fc--gridline--color: #eee8d5;
+    --psp-d3fc--series--color: #268bd2;
+    --psp-d3fc--series-1--color: #268bd2;
+    --psp-d3fc--series-2--color: #cb4b16;
+    --psp-d3fc--series-3--color: #b58900;
+    --psp-d3fc--series-4--color: #859900;
+    --psp-d3fc--series-5--color: #2aa198;
+
+    --psp-d3fc--series-6--color: #6c71c4;
+    --psp-d3fc--series-7--color: #d33682;
+
+    --psp-d3fc--pos-gradient--background: linear-gradient(
+        #268bd2 0%,
+        #2aa198,
+        #859900,
+        #b58900,
+        #cb4b16,
+        #dc322f,
+        #d33682 100%
+    );
+}
+
+x {
+    color: #cb4b16;
+}
+
+perspective-copy-menu[theme="Solarized"],
+perspective-export-menu[theme="Solarized"],
+perspective-dropdown[theme="Solarized"],
+perspective-date-column-style[theme="Solarized"],
+perspective-datetime-column-style[theme="Solarized"],
+perspective-number-column-style[theme="Solarized"],
+perspective-string-column-style[theme="Solarized"] {
+    /* perspective-viewer-solarized--colors */
+    color: #586e75;
+    --psp--color: #586e75;
+    --psp-active--color: #268bd2;
+    --psp-error--color: #cb4b16;
+    --psp-inactive--color: #93a1a1;
+    --psp-inactive--border-color: var(--psp-inactive--color);
+    --psp--background-color: #fdf6e3;
+    --psp-column-type--float--color: #268bd2;
+    --psp-column-type--string--color: #cb4b16;
+    --psp-column-type--date--color: #2aa198;
+    --psp-column-type--boolean--color: #b58900;
+
+    background-color: #fdf6e3;
+}

package/src/themes/themes.css

@@ -0,0 +1,23 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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";
+@import "./phosphor.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/ts/extensions.ts

@@ -26,7 +26,6 @@ export class PerspectiveSelectDetail {
     column_names?: string[];
     removeConfigs: ViewConfigUpdate[];
     insertConfigs: ViewConfigUpdate[];
-
     constructor(
         selected: boolean,
         row: Record<string, unknown>,
@@ -49,6 +48,7 @@ export class PerspectiveSelectDetail {
         return this.insertConfigs.flatMap((x) => x.filter ?? []);
     }
 }
+
 import type {
     ExportDropDownMenuElement,
     CopyDropDownMenuElement,
@@ -190,6 +190,12 @@ export interface PerspectiveViewerElementExt {
         options?: { signal: AbortSignal },
     ): void;
 
+    addEventListener(
+        name: "perspective-global-filter",
+        cb: (e: CustomEvent<PerspectiveSelectEventDetail>) => void,
+        options?: { signal: AbortSignal },
+    ): void;
+
     addEventListener(
         name: "perspective-toggle-settings",
         cb: (e: CustomEvent) => void,
@@ -228,6 +234,7 @@ export interface PerspectiveViewerElementExt {
 
     removeEventListener(name: "perspective-click", cb: any): void;
     removeEventListener(name: "perspective-select", cb: any): void;
+    removeEventListener(name: "perspective-global-filter", cb: any): void;
     removeEventListener(name: "perspective-toggle-settings", cb: any): void;
     removeEventListener(
         name: "perspective-toggle-settings-before",

package/src/ts/perspective-viewer.ts

@@ -37,6 +37,7 @@ export { HTMLPerspectiveViewerPluginElement } from "./plugin";
 export type * from "./extensions.ts";
 export { PerspectiveSelectDetail } from "./extensions.ts";
 export type * from "./ts-rs/ViewerConfigUpdate.d.ts";
+export type * from "./ts-rs/ViewerConfig.d.ts";
 export type * from "./ts-rs/ColumnConfigValues.d.ts";
 export type * from "./ts-rs/Filter.d.ts";
 export type * from "./ts-rs/FilterTerm.d.ts";

package/src/ts/plugin.ts

@@ -157,13 +157,13 @@ export interface IPerspectiveViewerPlugin {
      * Like `update()`, but for when the dimensions of the plugin have changed
      * and the underlying data has not.
      */
-    resize(): Promise<void>;
+    resize(view: View): Promise<void>;
 
     /**
      * Notify the plugin that the style environment has changed.  Useful for
      * plugins which read CSS styles via `window.getComputedStyle()`.
      */
-    restyle(): Promise<void>;
+    restyle(view: View): Promise<void>;
 
     /**
      * Save this plugin's state to a JSON-serializable value.  While this value
@@ -176,17 +176,17 @@ export interface IPerspectiveViewerPlugin {
      * reload.  For example, `@perspective-dev/viewer-d3fc` uses
      * `plugin_config` to remember the user-repositionable legend coordinates.
      */
-    save(): Promise<any>;
+    save(): any;
 
     /**
      * Restore this plugin to a state previously returned by `save()`.
      */
-    restore(config: any): Promise<void>;
+    restore(config: any): void;
 
     /**
      * Free any resources acquired by this plugin and prepare to be deleted.
      */
-    delete(): Promise<void>;
+    delete(): void;
 }
 
 /**
@@ -257,19 +257,19 @@ export class HTMLPerspectiveViewerPluginElement
         this.innerHTML = "";
     }
 
-    async resize(): Promise<void> {
+    async resize(view: View): Promise<void> {
         // Not Implemented
     }
 
-    async restyle(): Promise<void> {
+    async restyle(view: View): Promise<void> {
         // Not Implemented
     }
 
-    async save(): Promise<any> {
+    save(): any {
         // Not Implemented
     }
 
-    async restore(): Promise<void> {
+    restore(): void {
         // Not Implemented
     }
 

package/src/ts/ts-rs/NumberForegroundMode.ts

@@ -1,3 +1,3 @@
 // This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
 
-export type NumberForegroundMode = "disabled" | "color" | "bar";
+export type NumberForegroundMode = "disabled" | "color" | "bar" | "label-bar";

package/src/ts/ts-rs/ViewerConfig.ts

@@ -0,0 +1,15 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+import type { Aggregate } from "./Aggregate.js";
+import type { ColumnConfigValues } from "./ColumnConfigValues.js";
+import type { Expressions } from "./Expressions.js";
+import type { Filter } from "./Filter.js";
+import type { FilterReducer } from "./FilterReducer.js";
+import type { GroupRollupMode } from "./GroupRollupMode.js";
+import type { Sort } from "./Sort.js";
+import type { JsonValue } from "./serde_json/JsonValue.js";
+
+/**
+ * The state of an entire `custom_elements::PerspectiveViewerElement` component
+ * and its `Plugin`.
+ */
+export type ViewerConfig<V = string> = { version: V, columns_config: { [key in string]?: ColumnConfigValues }, plugin: string, plugin_config: JsonValue, settings: boolean, table: string | null, theme: string | null, title: string | null, group_by: Array<string>, split_by: Array<string>, sort: Array<Sort>, filter: Array<Filter>, group_rollup_mode: GroupRollupMode, filter_op?: FilterReducer, expressions: Expressions, columns: Array<string | null>, aggregates: { [key in string]?: Aggregate }, group_by_depth?: number | null, };