@perspective-dev/viewer-datagrid 4.3.0 → 4.4.0

package/src/{less/regular_table.less → css/regular_table.css}

@@ -1,53 +1,41 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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.less";
-@import "./mitered-headers.less";
-@import "./row-hover.less";
-@import "./sub-cell-scroll.less";
-@import "./scrollbar.less";
-
-// Row Selection
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
-
-// // TODO this makes the UI flash a CSS layout for a millsiecond when toggling
-// // settings butit could be fixed.
-
-// perspective-viewer:not([settings]) {
-//     @include settings-not-open;
-// }
-
-// :host-context(perspective-viewer:not([settings])) {
-//     @include settings-not-open;
-// }
-
-// @mixin settings-not-open {
-//     regular-table table tr.rt-autosize + tr th {
-//         height: 0px;
-//         span {
-//             display: none;
-//         }
-//     }
-// }
-
-@mixin settings-open {
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
+/* 
+
+/* Row Selection */
+
+/* // TODO this makes the UI flash a CSS layout for a millsiecond when toggling */
+/* // settings butit could be fixed. */
+
+/* perspective-viewer:not([settings]) { */
+/*     @include settings-not-open; */
+/* } */
+
+/* :host-context(perspective-viewer:not([settings])) { */
+/*     @include settings-not-open; */
+/* } */
+
+/* @mixin settings-not-open { */
+/*     regular-table table tr.rt-autosize + tr th { */
+/*         height: 0px; */
+/*         span { */
+/*             display: none; */
+/*         } */
+/*     } */
+/* } */
+
+perspective-viewer,
+:host {
     .psp-menu-enabled {
         padding: 0 6px;
         font-size: 8px;
@@ -56,65 +44,55 @@
 
     .psp-menu-enabled:hover,
     tr:not(.rt-autosize) th.psp-menu-open {
-        color: var(--plugin--background);
-        background-color: var(--icon--color);
-        border-bottom-color: var(--icon--color);
+        color: var(--psp--background-color);
+        background-color: var(--psp--color);
+        border-bottom-color: var(--psp--color);
         cursor: pointer;
     }
 
     tr:not(.rt-autosize) th.psp-menu-open {
         &:before {
-            @include icon;
+            background-repeat: no-repeat;
+            background-color: var(--psp--color);
+            content: "";
+            display: inline-block;
+            -webkit-mask-size: cover;
+            mask-size: cover;
             height: 8px;
             width: 10px;
-            -webkit-mask-image: var(--column-settings-icon--mask-image);
-            mask-image: var(--column-settings-icon--mask-image);
+            -webkit-mask-image: var(--psp-icon--column-settings--mask-image);
+            mask-image: var(--psp-icon--column-settings--mask-image);
             margin-right: 4px;
-            background-color: var(--plugin--background);
+            background-color: var(--psp--background-color);
         }
     }
 
     td.psp-menu-open {
         box-shadow:
-            inset -2px 0px 0px var(--icon--color),
-            inset 2px 0px 0px var(--icon--color);
+            inset -2px 0px 0px var(--psp--color),
+            inset 2px 0px 0px var(--psp--color);
     }
 
     tr:first-child td.psp-menu-open {
-        border-top-color: var(--icon--color) !important;
+        border-top-color: var(--psp--color) !important;
     }
 
     tr:last-child td.psp-menu-open {
         box-shadow:
-            inset -2px 0px 0px var(--icon--color),
-            inset 2px 0px 0px var(--icon--color),
-            inset 0px -2px 0px var(--icon--color);
+            inset -2px 0px 0px var(--psp--color),
+            inset 2px 0px 0px var(--psp--color),
+            inset 0px -2px 0px var(--psp--color);
     }
 }
 
-perspective-viewer {
-    @include settings-open;
-}
-
-:host {
-    @include settings-open;
-}
-
-@mixin viewer-table-styles {
+perspective-viewer,
+:host-context(perspective-viewer) {
     regular-table table thead tr:last-child th {
         border-bottom-width: 1px;
-        border-bottom-color: var(--inactive--border-color, #8b868045);
+        border-bottom-color: var(--psp-inactive--border-color, #8b868045);
     }
 }
 
-perspective-viewer {
-    @include viewer-table-styles;
-}
-
-:host-context(perspective-viewer) {
-    @include viewer-table-styles;
-}
-
 .psp-sort-enabled:hover {
     cursor: pointer;
 }
@@ -159,96 +137,131 @@ td:focus {
     outline-width: 1px;
 }
 
-@mixin table-no-dragging {
+perspective-viewer.dragging,
+:host-context(perspective-viewer.dragging) {
     regular-table {
         pointer-events: none;
     }
 }
-perspective-viewer.dragging {
-    @include table-no-dragging;
-}
-:host-context(perspective-viewer.dragging) {
-    @include table-no-dragging;
-}
 
 .psp-header-border:last-child {
     border-right-width: 0px;
 }
 
 .psp-header-sort-desc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-desc-icon--mask-image);
-    mask-image: var(--sort-desc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-desc--mask-image);
+    mask-image: var(--psp-icon--sort-desc--mask-image);
 }
 
 .psp-header-sort-asc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-asc-icon--mask-image);
-    mask-image: var(--sort-asc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-asc--mask-image);
+    mask-image: var(--psp-icon--sort-asc--mask-image);
 }
 
 .psp-header-sort-col-desc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
-    mask-image: var(--sort-col-desc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image);
+    mask-image: var(--psp-icon--sort-col-desc--mask-image);
 }
 
 .psp-header-sort-col-asc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
-    mask-image: var(--sort-col-asc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image);
+    mask-image: var(--psp-icon--sort-col-asc--mask-image);
 }
 
 .psp-header-sort-abs-desc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
-    mask-image: var(--sort-abs-desc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-desc--mask-image);
 }
 
 .psp-header-sort-abs-asc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
-    mask-image: var(--sort-abs-asc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-asc--mask-image);
 }
 
 .psp-header-sort-abs-col-desc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
-    mask-image: var(--sort-abs-col-desc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
 }
 
 .psp-header-sort-abs-col-asc:after {
-    @include icon;
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    content: "";
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
     width: 14px;
     height: 11px;
     margin-left: 4px;
-    -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
-    mask-image: var(--sort-abs-col-asc-icon--mask-image);
+    -webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
+    mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
 }
 
 tbody th:last-of-type {
-    border-right: 1px solid var(--inactive--border-color, #8b868045);
+    border-right: 1px solid var(--psp-inactive--border-color, #8b868045);
     overflow: hidden;
     text-overflow: ellipsis;
 }
@@ -256,7 +269,7 @@ tbody th:empty {
     background-image: linear-gradient(
         to right,
         transparent 9px,
-        var(--inactive--border-color, #eee) 10px,
+        var(--psp-inactive--border-color, #eee) 10px,
         transparent 11px
     );
     background-repeat: no-repeat;
@@ -272,17 +285,17 @@ regular-table:not(.flat-group-rollup-mode) {
     }
 
     .psp-tree-label:before {
-        color: var(--icon--color);
-        font-family: var(--button--font-family, inherit);
+        color: var(--psp--color);
+        font-family: var(--psp-button--font-family, inherit);
         padding-right: 11px;
     }
 
     .psp-tree-label-expand:before {
-        content: var(--tree-label-expand--content, "+");
+        content: var(--psp-label--tree-expand--content, "+");
     }
 
     .psp-tree-label-collapse:before {
-        content: var(--tree-label-collapse--content, "-");
+        content: var(--psp-label--tree-collapse--content, "-");
     }
 
     .psp-tree-label-expand,
@@ -291,8 +304,8 @@ regular-table:not(.flat-group-rollup-mode) {
     }
 
     .psp-tree-label:hover:before {
-        color: var(--active--color);
-        text-shadow: 0px 0px 5px var(--active--color);
+        color: var(--psp-active--color);
+        text-shadow: 0px 0px 5px var(--psp-active--color);
     }
 }
 
@@ -307,10 +320,10 @@ regular-table:not(.flat-group-rollup-mode) {
     text-align: left;
 }
 .psp-positive:not(:focus) {
-    color: var(--rt-pos-cell--color);
+    color: var(--psp-datagrid--pos-cell--color);
 }
 .psp-negative:not(:focus) {
-    color: var(--rt-neg-cell--color);
+    color: var(--psp-datagrid--neg-cell--color);
 }
 
 regular-table table tbody td {
@@ -329,6 +342,7 @@ regular-table table tbody td {
 }
 
 regular-table table {
+    font-size: 1em;
     user-select: none;
     color: inherit;
     border-collapse: separate;
@@ -339,7 +353,7 @@ regular-table table {
 
     td,
     th {
-        border-color: var(--inactive--border-color, #8b868045);
+        border-color: var(--psp-inactive--border-color, #8b868045);
         height: 23px;
     }
 
@@ -371,10 +385,10 @@ regular-table table {
 
     td.psp-select-region,
     th.psp-select-region {
-        // transition: background-color 0.5s, color 0.5s, border-color 0.5s;
-        background-color: var(--icon--color) !important;
-        color: var(--plugin--background) !important;
-        border-color: var(--plugin--background) !important;
+        /* transition: background-color 0.5s, color 0.5s, border-color 0.5s; */
+        background-color: var(--psp--color) !important;
+        color: var(--psp--background-color) !important;
+        border-color: var(--psp--background-color) !important;
     }
 }
 
@@ -387,63 +401,56 @@ regular-table
     tr:hover
     + tr
     td.psp-select-region:not(.psp-row-selected):not(.psp-row-subselected) {
-    border-color: var(--plugin--background) !important;
+    border-color: var(--psp--background-color) !important;
 }
 
 regular-table tbody tr:hover {
     td.psp-select-region.psp-menu-open {
         &:not(.psp-row-selected):not(.psp-row-subselected) {
             box-shadow:
-                inset -2px 0px 0px var(--plugin--background),
-                inset 2px 0px 0px var(--plugin--background);
+                inset -2px 0px 0px var(--psp--background-color),
+                inset 2px 0px 0px var(--psp--background-color);
         }
     }
 }
 
 :host-context(perspective-viewer[settings]) td.psp-select-region.psp-menu-open {
     box-shadow:
-        inset -2px 0px 0px var(--plugin--background),
-        inset 2px 0px 0px var(--plugin--background);
-}
-
-// This is a design/architecture bug. When the datagrid draws during a sidepanel
-// collapse/uncollapse, the `settings` attribute is set to the _previous_ state
-// as this collapse takes a while and we dont want the new state CSS to apply
-// until the drawing is done. However, this causes the datagrid to draw its
-// _first_ frame as if its in the wrong state, as it detects sidepanel state
-// via HTML attribute checking.
-@mixin design-slash-architecture-bug {
-    regular-table #psp-column-edit-buttons:after {
-        content: none;
-    }
+        inset -2px 0px 0px var(--psp--background-color),
+        inset 2px 0px 0px var(--psp--background-color);
 }
 
+/* This is a design/architecture bug. When the datagrid draws during a sidepanel */
+/* collapse/uncollapse, the `settings` attribute is set to the _previous_ state */
+/* as this collapse takes a while and we dont want the new state CSS to apply */
+/* until the drawing is done. However, this causes the datagrid to draw its */
+/* _first_ frame as if its in the wrong state, as it detects sidepanel state */
+/* via HTML attribute checking. */
 regular-table
     #psp-column-edit-buttons
     th:not(.rt-group-corner)
     span:not(.rt-column-resize):before {
-    content: var(--datagrid-column-edit-button--content, "Edit");
-}
-
-perspective-viewer:not([settings]) {
-    @include design-slash-architecture-bug;
+    content: var(--psp-datagrid--column-edit-button--content, "Edit");
 }
 
+perspective-viewer:not([settings]),
 :host-context(perspective-viewer:not([settings])) {
-    @include design-slash-architecture-bug;
+    regular-table #psp-column-edit-buttons:after {
+        content: none;
+    }
 }
 
-// Style the last row of the `<thead>` so that is has a bottom border.
+/* Style the last row of the `<thead>` so that is has a bottom border. */
 regular-table table thead tr:last-child:after {
     width: 10000px;
     box-sizing: border-box;
     display: block;
     height: 23px;
     content: " ";
-    border-bottom: 1px solid var(--inactive--border-color);
+    border-bottom: 1px solid var(--psp-inactive--border-color);
 }
 
-// Extend every row to the right edge of the page with a fake column.
+/* Extend every row to the right edge of the page with a fake column. */
 regular-table table tbody tr:after {
     width: 10000px;
     box-sizing: border-box;
@@ -454,15 +461,15 @@ regular-table table tbody tr:after {
 }
 
 regular-table table tbody tr:not(:first-child):after {
-    border-top: 1px solid var(--inactive--border-color);
+    border-top: 1px solid var(--psp-inactive--border-color);
 }
 
 regular-table table tbody tr:hover:not(:first-child):after {
-    border-top: 1px solid var(--rt-hover--border-color);
+    border-top: 1px solid var(--psp-datagrid--hover--border-color);
 }
 
 regular-table table tbody tr:hover + tr:after {
-    border-top: 1px solid var(--rt-hover--border-color);
+    border-top: 1px solid var(--psp-datagrid--hover--border-color);
 }
 
 @keyframes pulse_pos {

package/src/{less/row-hover.less → css/row-hover.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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 regular-table {
     tbody {
@@ -18,24 +19,29 @@ regular-table {
             th.psp-tree-label:not(.psp-row-selected):not(.psp-row-subselected),
         tr:hover td:not(.psp-row-selected):not(.psp-row-subselected),
         tr:hover:after {
-            border-color: var(--rt-hover--border-color, #c5c9d080) !important;
-            box-shadow: 0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+            border-color: var(
+                --psp-datagrid--hover--border-color,
+                #c5c9d080
+            ) !important;
+            box-shadow: 0px 1px 0px
+                var(--psp-datagrid--hover--border-color, #c5c9d080);
 
             &.psp-menu-open {
                 box-shadow:
-                    inset -2px 0px 0px var(--icon--color),
-                    inset 2px 0px 0px var(--icon--color),
-                    0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+                    inset -2px 0px 0px var(--psp--color),
+                    inset 2px 0px 0px var(--psp--color),
+                    0px 1px 0px
+                        var(--psp-datagrid--hover--border-color, #c5c9d080);
             }
         }
 
         tr:last-child:hover
             td:not(.psp-row-selected):not(.psp-row-subselected).psp-menu-open {
             box-shadow:
-                inset -2px 0px 0px var(--icon--color),
-                inset 2px 0px 0px var(--icon--color),
-                inset 0px -2px 0px var(--icon--color),
-                0px 1px 0px var(--rt-hover--border-color, #c5c9d080);
+                inset -2px 0px 0px var(--psp--color),
+                inset 2px 0px 0px var(--psp--color),
+                inset 0px -2px 0px var(--psp--color),
+                0px 1px 0px var(--psp-datagrid--hover--border-color, #c5c9d080);
         }
 
         tr:hover
@@ -71,7 +77,7 @@ regular-table {
             th:first-child:empty ~ th:empty + th:not(:empty),
             td:first-child {
                 border-left-color: var(
-                    --rt-hover--border-color,
+                    --psp-datagrid--hover--border-color,
                     #c5c9d080
                 ) !important;
             }
@@ -79,7 +85,7 @@ regular-table {
             th:last-child,
             td:last-child {
                 border-right-color: var(
-                    --rt-hover--border-color,
+                    --psp-datagrid--hover--border-color,
                     #c5c9d080
                 ) !important;
             }

package/src/{less/scrollbar.less → css/scrollbar.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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-// Scrollbar styling
+/* Scrollbar styling */
 regular-table {
     outline: none;
 
-    // webkit (chrome, safari, etc) scrollbar styling
+    /* webkit (chrome, safari, etc) scrollbar styling */
     &::-webkit-scrollbar,
     &::-webkit-scrollbar-corner {
         background-color: transparent;
@@ -24,8 +25,8 @@ regular-table {
 
     &::-webkit-scrollbar-thumb {
         background-clip: content-box;
-        background: var(--icon--color);
-        border: 5.5px solid var(--plugin--background);
+        background: var(--psp--color);
+        border: 5.5px solid var(--psp--background-color);
         max-height: 50%;
         max-width: 50%;
         min-width: 10%;