@perspective-dev/viewer 5.2.0 → 5.3.1

package/src/svg/lock.svg

@@ -0,0 +1,7 @@
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="6.5" y="9.5" width="8" height="7" stroke="#666" />
+    <path d="M13 9V8.5C13 7.11929 11.8807 6 10.5 6V6C9.11929 6 8 7.11929 8 8.5V9" stroke="#666" />
+    <path
+        d="M11.4911 13C11.4911 13.5523 11.0434 14 10.4911 14C9.93878 14 9.49107 13.5523 9.49107 13C9.49107 12.4477 9.93878 12 10.4911 12C11.0434 12 11.4911 12.4477 11.4911 13Z"
+        fill="#666" />
+</svg>

package/src/themes/blueprint.css

@@ -0,0 +1,190 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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%
+    );
+}
+
+perspective-context-menu[theme="Blueprint"],
+perspective-copy-menu[theme="Blueprint"],
+perspective-export-menu[theme="Blueprint"],
+perspective-dropdown[theme="Blueprint"],
+perspective-date-column-style[theme="Blueprint"],
+perspective-datetime-column-style[theme="Blueprint"],
+perspective-number-column-style[theme="Blueprint"],
+perspective-string-column-style[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);
+
+    border: 1px solid #2a58a8;
+}

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;
@@ -81,6 +75,16 @@ perspective-viewer [theme="Botanical"] {
     --psp-charts--series-8--color: rgb(210, 140, 80);
     --psp-charts--series-9--color: rgb(130, 120, 190);
     --psp-charts--series-10--color: rgb(170, 200, 110);
+    --psp-datagrid--series-1--color: rgb(90, 158, 75);
+    --psp-datagrid--series-2--color: rgb(206, 176, 104);
+    --psp-datagrid--series-3--color: rgb(160, 110, 180);
+    --psp-datagrid--series-4--color: rgb(80, 170, 150);
+    --psp-datagrid--series-5--color: rgb(140, 170, 90);
+    --psp-datagrid--series-6--color: rgb(200, 120, 140);
+    --psp-datagrid--series-7--color: rgb(100, 150, 190);
+    --psp-datagrid--series-8--color: rgb(210, 140, 80);
+    --psp-datagrid--series-9--color: rgb(130, 120, 190);
+    --psp-datagrid--series-10--color: rgb(170, 200, 110);
 
     --psp-charts--gradient--background: linear-gradient(
         #e8836a 0%,
@@ -103,6 +107,7 @@ perspective-string-column-style[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;
@@ -118,14 +123,6 @@ perspective-string-column-style[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
-    );
-
     --psp-code-editor--symbol--color: #e0ead8;
     --psp-code-editor--literal--color: #a8d8a0;
     --psp-code-editor--operator--color: rgb(206, 176, 104);

package/src/themes/defaults.css

@@ -8,25 +8,13 @@
  * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
  * ┃ 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,
@@ -36,27 +24,6 @@ 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 */
     --psp-button--font-size: 16px;
     --psp-config-button--padding: 15px 8px 6px 8px;
     --psp-column-selector--font-size: 16px;
@@ -65,7 +32,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,82 +39,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-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;
@@ -167,6 +60,8 @@ perspective-string-column-style {
     --psp-openlayers--attribution--filter: initial;
     --psp-charts--series-11--color: initial;
     --psp-charts--series-12--color: initial;
+    --psp-datagrid--series-11--color: initial;
+    --psp-datagrid--series-12--color: initial;
     --psp-charts--map-tiles--url: initial;
     --psp-column-type--boolean--color: initial;
     --psp-column-type--date--color: initial;
@@ -180,7 +75,6 @@ perspective-string-column-style {
     --psp-status-icon--psp-error--color: initial;
 }
 
-/* Modal defaults */
 perspective-context-menu,
 perspective-copy-menu,
 perspective-export-menu,

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);
@@ -78,6 +71,16 @@ perspective-viewer [theme="Dracula"] {
     --psp-charts--series-8--color: rgb(221, 99, 103);
     --psp-charts--series-9--color: rgb(120, 104, 206);
     --psp-charts--series-10--color: rgb(23, 166, 123);
+    --psp-datagrid--series-1--color: rgb(71, 120, 194);
+    --psp-datagrid--series-2--color: rgb(204, 120, 48);
+    --psp-datagrid--series-3--color: rgb(158, 84, 192);
+    --psp-datagrid--series-4--color: rgb(51, 150, 153);
+    --psp-datagrid--series-5--color: rgb(102, 114, 143);
+    --psp-datagrid--series-6--color: rgb(211, 103, 189);
+    --psp-datagrid--series-7--color: rgb(109, 124, 77);
+    --psp-datagrid--series-8--color: rgb(221, 99, 103);
+    --psp-datagrid--series-9--color: rgb(120, 104, 206);
+    --psp-datagrid--series-10--color: rgb(23, 166, 123);
     --psp-charts--gradient--background: linear-gradient(
         #dd6367 0%,
         #242526 50%,
@@ -148,6 +151,13 @@ perspective-viewer [theme="Dracula"] {
     --psp-charts--series-5--color: var(--theme-purple);
     --psp-charts--series-6--color: var(--theme-pink);
     --psp-charts--series-7--color: var(--theme-orange);
+    --psp-datagrid--series-1--color: var(--theme-blue);
+    --psp-datagrid--series-2--color: var(--theme-red);
+    --psp-datagrid--series-3--color: var(--theme-green);
+    --psp-datagrid--series-4--color: var(--theme-yellow);
+    --psp-datagrid--series-5--color: var(--theme-purple);
+    --psp-datagrid--series-6--color: var(--theme-pink);
+    --psp-datagrid--series-7--color: var(--theme-orange);
 
     --psp-charts--gradient--background: linear-gradient(
         var(--theme-red),
@@ -163,6 +173,7 @@ perspective-dropdown[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;
@@ -177,12 +188,6 @@ perspective-dropdown[theme="Dracula"] {
     --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);