@perspective-dev/viewer 5.3.0 → 5.4.0

package/src/svg/radio-off.svg

@@ -1,3 +1,3 @@
-<svg width="14" height="14" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="5.5" cy="5.5" r="3" stroke="#3F4343" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 11 11" fill="none" stroke="#042121" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="5.5" cy="5.5" r="5"/>
+</svg>

package/src/svg/radio-on.svg

@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <circle cx="5.5" cy="5.5" r="3.5" fill="#3F4343"/>
-    <rect x="0.5" y="0.5" width="10" height="10" rx="5" stroke="#3F4343"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 11 11" fill="none" stroke="#042121" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="5.5" cy="5.5" r="5"/>
+    <circle cx="5.5" cy="5.5" r="3" fill="#042121" stroke="none"/>
 </svg>

package/src/svg/status_ok.svg

@@ -1,26 +1,3 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M10 13.5V14.5" stroke="#042121" />
-    <path d="M9 13.5V14.5" stroke="#042121" />
-    <path d="M11 13.5V14.5" stroke="#042121" />
-    <path d="M12 13.5V14.5" stroke="#042121" />
-    <path d="M13 12.5V13.5" stroke="#042121" />
-    <path d="M14 11.5V12.5" stroke="#042121" />
-    <path d="M14 10.5V11.5" stroke="#042121" />
-    <path d="M14 9.5V10.5" stroke="#042121" />
-    <path d="M14 8.5V9.5" stroke="#042121" />
-    <path d="M14 7.5V8.5" stroke="#042121" />
-    <path d="M13 6.5V7.5" stroke="#042121" />
-    <path d="M12 5.5V6.5" stroke="#042121" />
-    <path d="M11 5.5V6.5" stroke="#042121" />
-    <path d="M10 5.5V6.5" stroke="#042121" />
-    <path d="M9 5.5V6.5" stroke="#042121" />
-    <path d="M8 5.5V6.5" stroke="#042121" />
-    <path d="M7 6.5V7.5" stroke="#042121" />
-    <path d="M6 7.5V8.5" stroke="#042121" />
-    <path d="M6 8.5V9.5" stroke="#042121" />
-    <path d="M6 9.5V10.5" stroke="#042121" />
-    <path d="M6 10.5V11.5" stroke="#042121" />
-    <path d="M6 11.5V12.5" stroke="#042121" />
-    <path d="M7 12.5V13.5" stroke="#042121" />
-    <path d="M8 13.5V14.5" stroke="#042121" />
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#042121" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="10" cy="10" r="4.5"/>
+</svg>

package/src/svg/string-type.svg

@@ -1,8 +1,4 @@
-<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <defs></defs>
-    <path d="M 6.283 5.275 L 6.309 5.275 L 6.792 6.855 L 5.806 6.855 L 6.283 5.275 Z M 7.295 8.501 L 8.144 8.501 L 6.825 4.387 L 5.819 4.387 L 4.5 8.501 L 5.303 8.501 L 5.61 7.489 L 6.988 7.489 L 7.295 8.501 Z" fill="#042121"></path>
-    <mask id="path-2-inside-1_720_7867" fill="white">
-        <rect width="10" height="9" rx="0.833" x="1.5" y="2"></rect>
-    </mask>
-    <rect width="10" height="9" rx="0.833" stroke="#042121" stroke-width="2" mask="url(#path-2-inside-1_720_7867)" x="1.5" y="2"></rect>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="#042121" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <rect x="1.5" y="2" width="10" height="9" rx="1"/>
+    <path d="M4.5 8.5l2-4.5 2 4.5M5.2 7h2.6" stroke-width="0.9"/>
+</svg>

package/src/svg/theme-icon.svg

@@ -1,5 +1,5 @@
-<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="6" y="5" width="8.43346" height="1.9167" rx="0.766678" stroke="#042121"/>
-<path d="M14.2021 6.15002H14.4333C14.8567 6.15002 15.2 6.49328 15.2 6.9167V8.47955C15.2 8.90297 14.8567 9.24623 14.4333 9.24623H10.9832C10.5598 9.24623 10.2166 9.58948 10.2166 10.0129V11.9001" stroke="#042121"/>
-<path d="M9.06665 12.2834C9.06665 12.0717 9.23828 11.9 9.44999 11.9H10.6C10.8117 11.9 10.9833 12.0717 10.9833 12.2834V15.7334C10.9833 16.1568 10.6401 16.5001 10.2167 16.5001H9.83333C9.4099 16.5001 9.06665 16.1568 9.06665 15.7334V12.2834Z" stroke="#042121"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21" fill="none" stroke="#042121"
+    stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
+    <circle cx="10.5" cy="10.5" r="5" />
+    <path d="M10.5 5.5a5 5 0 0 1 0 10z" fill="#042121" stroke="none" />
+</svg>

package/src/themes/blueprint.css

@@ -0,0 +1,133 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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="Blueprint"],
+perspective-viewer [theme="Blueprint"] {
+    --psp-theme-name: "Blueprint";
+}
+
+perspective-viewer[theme="Blueprint"],
+perspective-viewer [theme="Blueprint"] {
+    --theme-bg0: #0c2f6b;
+    --theme-bg1: #103a80;
+    --theme-bg2: #1b478f;
+    --theme-bg3: #2a58a8;
+
+    --theme-fg0: #e6f0ff;
+    --theme-fg1: #a9c4ee;
+    --theme-fg2: #5b84c6;
+
+    --theme-line: #3b6fc4;
+    --theme-cyan: #7fd3ff;
+    --theme-yellow: #ffd166;
+    --theme-orange: #ff8a65;
+    --theme-green: #b8e986;
+    --theme-pink: #ff9ecf;
+    --theme-white: #ffffff;
+    --theme-lavender: #c3b1ff;
+    --theme-mint: #5ee7c7;
+    --theme-magenta: #f6a6ff;
+    --theme-sky: #9cc3ff;
+
+    background-color: var(--theme-bg0);
+    color: var(--theme-fg0);
+    color-scheme: dark;
+    --psp--color: var(--theme-fg0);
+    --psp-active--color: var(--theme-cyan);
+    --psp-error--color: var(--theme-orange);
+    --psp-inactive--color: var(--theme-fg2);
+    --psp-inactive--border-color: var(--theme-bg3);
+    --psp--background-color: var(--theme-bg0);
+    --psp-active--background: rgba(127, 211, 255, 0.3);
+    --psp-expression--operator--color: var(--theme-fg1);
+    --psp-expression--function--color: var(--theme-cyan);
+    --psp-expression--psp-error--color: var(--theme-orange);
+    --psp-calendar--filter: invert(1);
+    --psp-input--filter: invert(1);
+    --psp-warning--color: var(--theme-bg0);
+    --psp-warning--background: var(--theme-yellow);
+
+    --psp-status-icon--connected--color: var(--theme-green);
+    --psp-status-icon--initializing--color: var(--theme-yellow);
+    --psp-status-icon--psp-error--color: var(--theme-orange);
+
+    --psp-code-editor--symbol--color: var(--theme-fg0);
+    --psp-code-editor--literal--color: var(--theme-cyan);
+    --psp-code-editor--operator--color: var(--theme-yellow);
+    --psp-code-editor--comment--color: var(--theme-fg2);
+    --psp-code-editor--column--color: var(--theme-green);
+
+    --psp-datagrid--pos-cell--color: var(--theme-cyan);
+    --psp-datagrid--neg-cell--color: var(--theme-orange);
+    --psp-datagrid--hover--border-color: var(--theme-line);
+
+    --psp-charts--legend--color: var(--theme-fg1);
+    --psp-charts--treemap--labels: var(--theme-fg0);
+    --psp-charts--treemap--hover-highlight: var(--theme-white);
+    --psp-charts--tooltip--color: var(--theme-fg0);
+    --psp-charts--axis-ticks--color: var(--theme-fg0);
+    --psp-charts--axis-lines--color: var(--theme-fg2);
+    --psp-charts--gridline--color: var(--theme-bg2);
+    --psp-charts--tooltip--background: var(--theme-bg1);
+    --psp-charts--tooltip--border-color: var(--theme-line);
+    --psp-charts--legend--background: var(--psp--background-color);
+
+    --psp-charts--series--color: var(--theme-cyan);
+    --psp-charts--series-1--color: var(--theme-cyan);
+    --psp-charts--series-2--color: var(--theme-yellow);
+    --psp-charts--series-3--color: var(--theme-orange);
+    --psp-charts--series-4--color: var(--theme-green);
+    --psp-charts--series-5--color: var(--theme-pink);
+    --psp-charts--series-6--color: var(--theme-white);
+    --psp-charts--series-7--color: var(--theme-lavender);
+    --psp-charts--series-8--color: var(--theme-mint);
+    --psp-charts--series-9--color: var(--theme-magenta);
+    --psp-charts--series-10--color: var(--theme-sky);
+    --psp-datagrid--series-1--color: var(--theme-cyan);
+    --psp-datagrid--series-2--color: var(--theme-yellow);
+    --psp-datagrid--series-3--color: var(--theme-orange);
+    --psp-datagrid--series-4--color: var(--theme-green);
+    --psp-datagrid--series-5--color: var(--theme-pink);
+    --psp-datagrid--series-6--color: var(--theme-white);
+    --psp-datagrid--series-7--color: var(--theme-lavender);
+    --psp-datagrid--series-8--color: var(--theme-mint);
+    --psp-datagrid--series-9--color: var(--theme-magenta);
+    --psp-datagrid--series-10--color: var(--theme-sky);
+
+    --psp-charts--gradient--background: linear-gradient(
+        var(--theme-orange) 0%,
+        var(--theme-bg0) 50%,
+        var(--theme-cyan) 100%
+    );
+
+    --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: var(--theme-bg1);
+    --psp-openlayers--category-1--color: var(--theme-cyan);
+    --psp-openlayers--category-2--color: var(--theme-yellow);
+    --psp-openlayers--category-3--color: var(--theme-orange);
+    --psp-openlayers--category-4--color: var(--theme-green);
+    --psp-openlayers--category-5--color: var(--theme-pink);
+    --psp-openlayers--category-6--color: var(--theme-white);
+    --psp-openlayers--category-7--color: var(--theme-lavender);
+    --psp-openlayers--category-8--color: var(--theme-mint);
+    --psp-openlayers--category-9--color: var(--theme-magenta);
+    --psp-openlayers--category-10--color: var(--theme-sky);
+    --psp-openlayers--gradient--background: linear-gradient(
+        var(--theme-orange) 0%,
+        var(--theme-bg0) 50%,
+        var(--theme-cyan) 100%
+    );
+}

package/src/themes/botanical.css

@@ -8,7 +8,8 @@
  * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
  * ┃ 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";
 
@@ -24,6 +25,7 @@ perspective-viewer [theme="Botanical"] {
     /* perspective-viewer-botanical--colors */
     background-color: #1a2e1a;
     color: #e0ead8;
+    color-scheme: dark;
     --psp--color: #e0ead8;
     --psp-active--color: #5a9e4b;
     --psp-error--color: #e8836a;
@@ -39,14 +41,6 @@ perspective-viewer [theme="Botanical"] {
     --psp-warning--color: #1a2e1a;
     --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
-    );
-
     /* Syntax */
     --psp-code-editor--symbol--color: #e0ead8;
     --psp-code-editor--literal--color: #a8d8a0;
@@ -101,46 +95,3 @@ perspective-viewer [theme="Botanical"] {
     --psp-charts--map-tiles--url: "http://{a-c}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png";
     --psp-charts--map-tiles--attribution-: "I <3 Open Source";
 }
-
-perspective-context-menu[theme="Botanical"],
-perspective-copy-menu[theme="Botanical"],
-perspective-export-menu[theme="Botanical"],
-perspective-dropdown[theme="Botanical"],
-perspective-date-column-style[theme="Botanical"],
-perspective-datetime-column-style[theme="Botanical"],
-perspective-number-column-style[theme="Botanical"],
-perspective-string-column-style[theme="Botanical"] {
-    /* perspective-viewer-botanical--colors */
-    background-color: #1a2e1a;
-    color: #e0ead8;
-    --psp--color: #e0ead8;
-    --psp-active--color: #5a9e4b;
-    --psp-error--color: #e8836a;
-    --psp-inactive--color: #526b4a;
-    --psp-inactive--border-color: #3d5c3d;
-    --psp--background-color: #1a2e1a;
-    --psp-active--background: rgba(90, 158, 75, 0.5);
-    --psp-expression--operator--color: #b8c9ad;
-    --psp-expression--function--color: #7bc96f;
-    --psp-expression--psp-error--color: rgb(232, 131, 106);
-    --psp-calendar--filter: invert(1);
-    --psp-input--filter: invert(1);
-    --psp-warning--color: #1a2e1a;
-    --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: #e0ead8;
-    --psp-code-editor--literal--color: #a8d8a0;
-    --psp-code-editor--operator--color: rgb(206, 176, 104);
-    --psp-code-editor--comment--color: rgb(120, 160, 100);
-    --psp-code-editor--column--color: #c9a0d8;
-
-    border: 1px solid #3d5c3d;
-}

package/src/themes/defaults.css

@@ -8,55 +8,14 @@
  * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
  * ┃ 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.css";
 @import "./intl.css";
 
 perspective-viewer,
-/* Per-panel light-DOM descendants (the plugin + `<PanelTab>`, both carrying a
-   `theme` attribute) get the complete base too — so each panel resolves real
-   `color`/`font-family` and every `--psp-*` from its OWN theme instead of
-   inheriting the active panel's. Theme overrides refine this via the matching
-   `perspective-viewer [theme="X"]` rule.
-
-   `:where()` gives this clause ZERO specificity, so the panel's own
-   `[theme="X"]` override (specificity 0,1,1) ALWAYS wins over this default base.
-   Without it the two would tie at (0,1,1) and import order would decide — and
-   because every theme file `@import`s `defaults.css`, the base is inlined after
-   later overrides and the default would leak over the panel's theme. A
-   zero-specificity rule still beats inheritance, so the base values apply where
-   the override is silent. */
-:where(perspective-viewer [theme]),
-perspective-context-menu,
-perspective-copy-menu,
-perspective-export-menu,
-perspective-dropdown,
-perspective-date-column-style,
-perspective-datetime-column-style,
-perspective-number-column-style,
-perspective-string-column-style {
-    /* Colors */
-    --psp--color: #161616;
-
-    color: var(--psp--color);
-
-    --psp-inactive--color: #ababab;
-    --psp-inactive--border-color: #dadada;
-    --psp-active--color: #2670a9;
-    --psp-error--color: #ff471e;
-    --psp--background-color: #ffffff;
-    --psp-icon-overflow-hint--color: rgba(0, 0, 0, 0.2);
-    --psp-select--background-color: none;
-    --psp-warning--background: #042121;
-    --psp-warning--color: #fdfffd;
-
-    /* TODO deprecate me */
-    --psp-icon-overflow-hint--color: #fdfffd;
-    /* Colors */
-    --psp-placeholder--background: #8b868045;
-
-    /* Dimensions */
+:where(perspective-viewer [theme]) {
     --psp-button--font-size: 16px;
     --psp-config-button--padding: 15px 8px 6px 8px;
     --psp-column-selector--font-size: 16px;
@@ -65,7 +24,6 @@ perspective-string-column-style {
     --psp-top-panel-row--display: inline-flex;
     --psp-button--min-width: 33px;
 
-    /* Fonts */
     font-family:
         "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
         "Liberation Mono", monospace;
@@ -73,92 +31,9 @@ perspective-string-column-style {
         "ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas",
         "Liberation Mono", monospace;
 
-    /* Colors (select arrow defaults) */
-    --psp-icon--select-arrow--mask-image: var(
-        --psp-icon--select-arrow-dark--mask-image
-    );
-    --psp-icon--select-arrow-hover--mask-image: var(
-        --psp-icon--select-arrow-light--mask-image
-    );
-
-    /* webgl */
     --psp-label--webgl-y1--content: "arrow_upward";
     --psp-label--webgl-y2--content: "arrow_downward";
-    --psp-charts--treemap-axis--lines: none;
-    --psp-charts--tooltip--background-color: rgba(155, 155, 155, 0.8);
-    --psp-charts--tooltip--color: #161616;
-    --psp-charts--tooltip--border-color: #fff;
-    --psp-charts--tooltip--box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
-    --psp-charts--gridline--color: #eaedef;
-    --psp-charts--axis-ticks--color: #161616;
-    --psp-charts--axis-lines--color: #c5c9d0;
-    --psp-charts--legend--background: var(--psp--background-color);
-    --psp-charts--series--color: rgba(31, 119, 180, 0.8);
-    --psp-charts--series-1--color: #0366d6;
-    --psp-charts--series-2--color: #ff7f0e;
-    --psp-charts--series-3--color: #2ca02c;
-    --psp-charts--series-4--color: #d62728;
-    --psp-charts--series-5--color: #9467bd;
-    --psp-charts--series-6--color: #8c564b;
-    --psp-charts--series-7--color: #e377c2;
-    --psp-charts--series-8--color: #7f7f7f;
-    --psp-charts--series-9--color: #bcbd22;
-    --psp-charts--series-10--color: #17becf;
-    --psp-datagrid--series-1--color: #0366d6;
-    --psp-datagrid--series-2--color: #ff7f0e;
-    --psp-datagrid--series-3--color: #2ca02c;
-    --psp-datagrid--series-4--color: #d62728;
-    --psp-datagrid--series-5--color: #9467bd;
-    --psp-datagrid--series-6--color: #8c564b;
-    --psp-datagrid--series-7--color: #e377c2;
-    --psp-datagrid--series-8--color: #7f7f7f;
-    --psp-datagrid--series-9--color: #bcbd22;
-    --psp-datagrid--series-10--color: #17becf;
-    --psp-charts--gradient--background: linear-gradient(
-        #4d342f 0%,
-        #e4521b 22.5%,
-        #feeb65 42.5%,
-        #f0f0f0 50%,
-        #dcedc8 57.5%,
-        #42b3d5 67.5%,
-        #1a237e 100%
-    );
-
-    /* Datagrid */
-    --psp-datagrid--pos-cell--color: #338dcd;
-    --psp-datagrid--neg-cell--color: #ff471e;
-
-    /* OpenLayers */
-    --psp-openlayers--tile-url: "http://{a-c}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png";
-    --psp-openlayers--element--background: #fff;
-    --psp-openlayers--category-1--color: #0366d6;
-    --psp-openlayers--category-2--color: #ff7f0e;
-    --psp-openlayers--category-3--color: #2ca02c;
-    --psp-openlayers--category-4--color: #d62728;
-    --psp-openlayers--category-5--color: #9467bd;
-    --psp-openlayers--category-6--color: #8c564b;
-    --psp-openlayers--category-7--color: #e377c2;
-    --psp-openlayers--category-8--color: #7f7f7f;
-    --psp-openlayers--category-9--color: #bcbd22;
-    --psp-openlayers--category-10--color: #17becf;
-    --psp-openlayers--gradient--background: linear-gradient(
-        #4d342f 0%,
-        #e4521b 22.5%,
-        #feeb65 42.5%,
-        #f0f0f0 50%,
-        #dcedc8 57.5%,
-        #42b3d5 67.5%,
-        #1a237e 100%
-    );
 
-    /* Completeness anchors for per-panel theming. These are color/appearance
-       vars that some themes (e.g. Pro Dark) set but the light default does not
-       — so without a base value an unthemed/light panel would *inherit* them
-       from a differently-themed (active) panel, mixing themes. `initial` makes
-       the custom property the guaranteed-invalid value: consumers fall back to
-       their own default (identical to the current unthemed rendering) AND the
-       element no longer inherits a neighboring panel's value. A theme that
-       wants a real value overrides it in its `[theme="X"]` block as usual. */
     --psp-active--background: initial;
     --psp-calendar--filter: initial;
     --psp-charts--legend--color: initial;
@@ -191,19 +66,3 @@ perspective-string-column-style {
     --psp-status-icon--initializing--color: initial;
     --psp-status-icon--psp-error--color: initial;
 }
-
-/* Modal defaults */
-perspective-context-menu,
-perspective-copy-menu,
-perspective-export-menu,
-perspective-dropdown,
-perspective-date-column-style,
-perspective-datetime-column-style,
-perspective-number-column-style,
-perspective-string-column-style {
-    background-color: white;
-    border: 1px solid var(--psp-inactive--color);
-    border-radius: 0 0 2px 2px;
-    --psp-label--column-style-pos-color--content: "+";
-    --psp-label--column-style-neg-color--content: "-";
-}

package/src/themes/dracula.css

@@ -23,6 +23,7 @@ perspective-viewer [theme="Dracula"] {
     /* perspective-viewer-pro-dark--colors (overrides) */
     background-color: #242526;
     color: white;
+    color-scheme: dark;
     --psp--color: white;
     --psp-active--color: #2770a9;
     --psp-error--color: #ff9485;
@@ -38,14 +39,6 @@ perspective-viewer [theme="Dracula"] {
     --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);
@@ -172,66 +165,3 @@ perspective-viewer [theme="Dracula"] {
         var(--theme-blue)
     ) !important;
 }
-
-perspective-context-menu[theme="Dracula"],
-perspective-copy-menu[theme="Dracula"],
-perspective-export-menu[theme="Dracula"],
-perspective-dropdown[theme="Dracula"] {
-    /* 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-input--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-dracula--colors */
-    --theme-bg0: #191a22;
-    --theme-bg1: #282a36;
-    --theme-bg2: #44475a;
-    --theme-gray: #928374;
-    --theme-fg0: #f8f8f2;
-    --theme-fg1: #6272a4;
-    --theme-fg2: #44475a;
-    --theme-red: #ff5555;
-    --theme-green: #50fa7b;
-    --theme-yellow: #f1fa8c;
-    --theme-blue: #8be9fd;
-    --theme-purple: #bd93f9;
-    --theme-orange: #ffb86c;
-    --theme-pink: #ff79c6;
-
-    color: var(--theme-fg0);
-    --psp--color: var(--theme-fg1);
-    --psp-inactive--color: var(--theme-fg2);
-    --psp-inactive--border-color: var(--theme-bg2);
-    --psp--background-color: var(--theme-bg1);
-    --psp-status-icon--connected--color: var(--theme-green);
-    --psp-status-icon--initializing--color: var(--theme-yellow);
-    --psp-status-icon--psp-error--color: var(--theme-red);
-
-    background-color: var(--theme-bg0);
-}