@perspective-dev/viewer 4.3.0 → 4.4.0

package/src/{less/config-selector.less → css/config-selector.css}

@@ -1,69 +1,61 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@mixin icon {
-    background-repeat: no-repeat;
-    background-color: var(--icon--color);
-    content: "";
-    display: inline-block;
-    -webkit-mask-size: cover;
-    mask-size: cover;
-}
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     #top_panel.dragdrop-highlight {
         .psp-text-field {
-            border-bottom-color: var(--icon--color) !important;
+            border-bottom-color: var(--psp--color) !important;
         }
 
         .pivot-column-border {
-            border-color: var(--icon--color) !important;
+            border-color: var(--psp--color) !important;
         }
     }
 
     #top_panel.group-rollup-mode-total {
         #group_by {
             width: 100%;
-            // height: 26px;
+            /* height: 26px; */
             .pivot-column {
                 .pivot-column-total {
                     min-height: 24px;
                     margin-bottom: 4px;
                     &:before {
-                        background-color: var(--plugin--background);
+                        background-color: var(--psp--background-color);
                     }
                 }
 
                 .column_name {
-                    color: var(--inactive--color);
+                    color: var(--psp-inactive--color);
                 }
 
                 .type-icon {
-                    background-color: var(--inactive--color);
+                    background-color: var(--psp-inactive--color);
                 }
 
                 &:hover .pivot-column-border {
-                    border-color: var(--inactive--color, #ababab);
+                    border-color: var(--psp-inactive--color, #ababab);
                 }
 
-                // input {
-                //     background-color: var(--plugin--background);
-                //     pointer-events: none;
-                //     border: 1px solid var(--inactive--color);
-                //     color: var(--inactive--color) !important;
-                //     // &:placeholder {
+                /* input { */
+                /*     background-color: var(--psp--background-color); */
+                /*     pointer-events: none; */
+                /*     border: 1px solid var(--psp-inactive--color); */
+                /*     color: var(--psp-inactive--color) !important; */
+                /*     // &:placeholder { */
 
-                //     // }
-                // }
+                /*     // } */
+                /* } */
             }
         }
     }
@@ -80,24 +72,24 @@
             margin: 0 6.5px 4px 6.5px;
             cursor: pointer;
             height: 14px;
-        }
-
-        .row_close:before {
-            height: 14px;
-            width: 14px;
+            display: inline-block;
             background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            content: "";
+            background-color: var(--psp--color);
             -webkit-mask-size: cover;
             mask-size: cover;
-            display: inline-block;
-            -webkit-mask-image: var(--column-checkbox-on--mask-image);
-            mask-image: var(--column-checkbox-on--mask-image);
-        }
+            -webkit-mask-image: var(--psp-icon--checkbox-on--mask-image);
+            mask-image: var(--psp-icon--checkbox-on--mask-image);
+
+            &:before {
+                line-height: 0;
+                content: var(--psp-icon--checkbox-on--mask-image);
+                visibility: hidden;
+            }
 
-        .row_close:hover:before {
-            -webkit-mask-image: var(--column-checkbox-hover--mask-image);
-            mask-image: var(--column-checkbox-hover--mask-image);
+            &:hover {
+                -webkit-mask-image: var(--psp-icon--checkbox-hover--mask-image);
+                mask-image: var(--psp-icon--checkbox-hover--mask-image);
+            }
         }
 
         .pivot-column {
@@ -109,8 +101,8 @@
             .pivot-column-border {
                 flex: 1 1 auto;
                 overflow: hidden;
-                background-color: var(--plugin--background);
-                border: 1px solid var(--inactive--color, #ababab);
+                background-color: var(--psp--background-color);
+                border: 1px solid var(--psp-inactive--color, #ababab);
                 border-radius: 2px;
                 display: flex;
                 align-items: center;
@@ -127,7 +119,7 @@
             }
 
             &:hover .pivot-column-border {
-                border-color: var(--icon--color);
+                border-color: var(--psp--color);
             }
 
             .pivot-column-draggable {
@@ -140,19 +132,27 @@
                 cursor: move;
             }
 
-            &:not(.column-empty) .pivot-column-border:before {
+            &:not(.column-empty) .pivot-column-border > .drag-handle {
                 flex: 0 0 auto;
-                height: 12px;
-                width: 5px;
-                -webkit-mask-image: var(--column-drag-handle--mask-image);
-                mask-image: var(--column-drag-handle--mask-image);
                 margin: 0px 0 0 6px;
                 background-repeat: no-repeat;
-                background-color: var(--icon--color);
-                content: "";
+                background-color: var(--psp--color);
                 display: inline-block;
                 -webkit-mask-size: cover;
                 mask-size: cover;
+                -webkit-mask-image: var(
+                    --psp-icon--psp-icon--column-drag-handle--mask-image
+                );
+                mask-image: var(
+                    --psp-icon--psp-icon--column-drag-handle--mask-image
+                );
+
+                &:before {
+                    content: var(
+                        --psp-icon--psp-icon--column-drag-handle--mask-image
+                    );
+                    visibility: hidden;
+                }
             }
 
             span {
@@ -161,16 +161,16 @@
 
             span:first-child {
                 text-overflow: ellipsis;
-                // max-width: 250px;
+                /* max-width: 250px; */
                 overflow: hidden;
             }
 
-            // Column is being dragged-over, e.g. this is the drop indicator.
+            /* Column is being dragged-over, e.g. this is the drop indicator. */
             & .config-drop {
-                background-color: #8b868045;
+                background-color: var(--psp-placeholder--background);
                 margin-right: 7px;
                 margin-bottom: 4px;
-                border: 1px solid var(--icon--color);
+                border: 1px solid var(--psp--color);
                 border-radius: 2px;
                 overflow: visible;
                 flex: 1 1 auto;
@@ -185,7 +185,7 @@
                     right: 5px;
                     bottom: 5px;
                     border-radius: 2px;
-                    background-color: var(--icon--color);
+                    background-color: var(--psp--color);
                     opacity: 0.3;
                 }
 
@@ -200,23 +200,19 @@
         }
 
         #group_by label.pivot-selector-label:before {
-            content: var(--group-by-label--content, "Group By");
+            content: var(--psp-label--group-by--content, "Group By");
         }
 
         #split_by label.pivot-selector-label:before {
-            content: var(--split-by-label--content, "Split By");
+            content: var(--psp-label--split-by--content, "Split By");
         }
 
         #sort label.pivot-selector-label:before {
-            content: var(--sort-label--content, "Order By");
+            content: var(--psp-label--sort--content, "Order By");
         }
 
         #filter label.pivot-selector-label:before {
-            content: var(--filter-label--content, "Where");
-        }
-
-        .highlight-drop {
-            background-color: rgba(0, 0, 0, 0.5);
+            content: var(--psp-label--filter--content, "Where");
         }
 
         .rrow {
@@ -270,18 +266,6 @@
             margin: 0;
             padding: 0 0 0 0;
             min-height: 26px;
-            // margin-bottom: -1px;
-
-            // // Comma separators
-            // &> :not(.config-drop):after {
-            //     width: 0px;
-            //     content: ",";
-            // }
-
-            // &> :last-child:after {
-            //     display: none;
-            //     content: "" !important;
-            // }
         }
 
         .psp-text-field__input + label {
@@ -289,9 +273,8 @@
             height: 20px;
             line-height: 17px;
             box-sizing: border-box;
-            // color: var(--inactive--color);
             white-space: nowrap;
-            padding: var(--column-drop-container--padding, 0px);
+            padding: 0px;
             font-size: var(--label--font-size, 0.75em);
             display: inline-block;
         }
@@ -316,19 +299,18 @@
             margin-right: 28px;
             margin-top: 9px;
             select:hover {
-                color: var(--icon--color, inherit);
+                color: var(--psp--color, inherit);
             }
         }
 
         .group_rollup_wrapper {
-            width: 48px;
             margin-bottom: -30px;
             flex: 0 1 auto;
-            color: var(--inactive--color);
+            color: var(--psp-inactive--color);
             padding-top: 15px;
-            font-size: 9px;
+            font-size: var(--label--font-size, 0.75em);
             select {
-                font-size: 9px !important;
+                font-size: var(--label--font-size);
             }
         }
 
@@ -340,21 +322,21 @@
             user-select: none;
             padding: 0;
             align-self: center;
-            // margin-bottom: -23px;
-            // margin-top: 11.5px;
-            // align-self: flex-end;
+            /* margin-bottom: -23px; */
+            /* margin-top: 11.5px; */
+            /* align-self: flex-end; */
             z-index: 1;
             min-height: 0px;
-            // margin-right: 30px;
+            /* margin-right: 30px; */
 
             &:hover:before {
-                color: var(--icon--color, inherit);
+                color: var(--psp--color, inherit);
             }
 
             &:before {
-                font-family: var(--button--font-family, inherit);
-                color: var(--inactive--color, #666);
-                content: var(--transpose-button--content, "Swap");
+                font-family: var(--psp-button--font-family, inherit);
+                color: var(--psp-inactive--color, #666);
+                content: var(--psp-label--transpose-button--content, "Swap");
             }
         }
     }
@@ -362,64 +344,98 @@
     .sort-icon {
         display: inline-flex;
         margin-left: auto;
-        // margin-right: 8px;
+        /* margin-right: 8px; */
         cursor: pointer;
-        font-family: var(--button--font-family, inherit);
+        font-family: var(--psp-button--font-family, inherit);
+        background-repeat: no-repeat;
+        background-color: var(--psp--color);
+        -webkit-mask-size: cover;
+        mask-size: cover;
 
         &:hover {
             opacity: 1;
-            color: var(--active--color, inherit);
+            color: var(--psp-active--color, inherit);
         }
 
-        &:before {
-            @include icon;
-            width: 16px;
-            height: 16px;
-        }
-
-        &.desc:before {
-            -webkit-mask-image: var(--sort-desc-icon--mask-image);
-            mask-image: var(--sort-desc-icon--mask-image);
+        &.desc {
+            -webkit-mask-image: var(--psp-icon--sort-desc--mask-image);
+            mask-image: var(--psp-icon--sort-desc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-desc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.asc:before {
-            -webkit-mask-image: var(--sort-asc-icon--mask-image);
-            mask-image: var(--sort-asc-icon--mask-image);
+        &.asc {
+            -webkit-mask-image: var(--psp-icon--sort-asc--mask-image);
+            mask-image: var(--psp-icon--sort-asc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-asc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.none:before {
-            -webkit-mask-image: var(--sort-none-icon--mask-image);
-            mask-image: var(--sort-none-icon--mask-image);
+        &.none {
+            -webkit-mask-image: var(--psp-icon--sort-none--mask-image);
+            mask-image: var(--psp-icon--sort-none--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-none--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.asc.abs:before {
-            -webkit-mask-image: var(--sort-abs-asc-icon--mask-image);
-            mask-image: var(--sort-abs-asc-icon--mask-image);
+        &.asc.abs {
+            -webkit-mask-image: var(--psp-icon--sort-abs-asc--mask-image);
+            mask-image: var(--psp-icon--sort-abs-asc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-abs-asc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.desc.abs:before {
-            -webkit-mask-image: var(--sort-abs-desc-icon--mask-image);
-            mask-image: var(--sort-abs-desc-icon--mask-image);
+        &.desc.abs {
+            -webkit-mask-image: var(--psp-icon--sort-abs-desc--mask-image);
+            mask-image: var(--psp-icon--sort-abs-desc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-abs-desc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.col.asc:before {
-            -webkit-mask-image: var(--sort-col-asc-icon--mask-image);
-            mask-image: var(--sort-col-asc-icon--mask-image);
+        &.col.asc {
+            -webkit-mask-image: var(--psp-icon--sort-col-asc--mask-image);
+            mask-image: var(--psp-icon--sort-col-asc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-col-asc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.col.desc:before {
-            -webkit-mask-image: var(--sort-col-desc-icon--mask-image);
-            mask-image: var(--sort-col-desc-icon--mask-image);
+        &.col.desc {
+            -webkit-mask-image: var(--psp-icon--sort-col-desc--mask-image);
+            mask-image: var(--psp-icon--sort-col-desc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-col-desc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.col.asc.abs:before {
-            -webkit-mask-image: var(--sort-abs-col-asc-icon--mask-image);
-            mask-image: var(--sort-abs-col-asc-icon--mask-image);
+        &.col.asc.abs {
+            -webkit-mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
+            mask-image: var(--psp-icon--sort-abs-col-asc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-abs-col-asc--mask-image);
+                visibility: hidden;
+            }
         }
 
-        &.col.desc.abs:before {
-            -webkit-mask-image: var(--sort-abs-col-desc-icon--mask-image);
-            mask-image: var(--sort-abs-col-desc-icon--mask-image);
+        &.col.desc.abs {
+            -webkit-mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
+            mask-image: var(--psp-icon--sort-abs-col-desc--mask-image);
+            &:before {
+                content: var(--psp-icon--sort-abs-col-desc--mask-image);
+                visibility: hidden;
+            }
         }
     }
 }

package/src/{less/containers/dropdown-menu.less → css/containers/dropdown-menu.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     position: fixed;
@@ -26,23 +27,23 @@
     min-width: 80px;
 
     code {
-        font-family: var(--interface-monospace--font-family), monospace;
+        font-family: var(--psp-interface-monospace--font-family), monospace;
     }
 
     input {
         margin: 0;
         padding: 0;
         border: none;
-        border-bottom: 1px solid var(--inactive--color, #ccc);
+        border-bottom: 1px solid var(--psp-inactive--color, #ccc);
         background: transparent;
-        font-family: var(--interface-monospace--font-family), monospace;
+        font-family: var(--psp-interface-monospace--font-family), monospace;
         color: inherit;
         outline: none;
     }
 
     .invalid {
-        color: var(--error--color, #ff0000);
-        border-color: var(--error--color, #ff0000);
+        color: var(--psp-error--color, #ff0000);
+        border-color: var(--psp-error--color, #ff0000);
     }
 
     .selected {
@@ -50,7 +51,7 @@
     }
 
     .dropdown-group-label {
-        color: var(--inactive--color);
+        color: var(--psp-inactive--color);
 
         &:not(:first-of-type) {
             margin-top: 16px;
@@ -88,7 +89,7 @@
     }
 
     .dropdown-group-container span:hover {
-        background-color: var(--icon--color);
-        color: var(--plugin--background);
+        background-color: var(--psp--color);
+        color: var(--psp--background-color);
     }
 }

package/src/{less/containers/pairs-list.less → css/containers/pairs-list.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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 .pairs-list {
     ul {
@@ -24,7 +25,7 @@
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        border-bottom: solid 1px var(--inactive--border-color);
+        border-bottom: solid 1px var(--psp-inactive--border-color);
         margin-bottom: 12px;
     }
 

package/src/{themes/variables.less → css/containers/scroll-panel.css}

@@ -1,24 +1,27 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
-@green50: #70c77f;
+:host {
+    .scroll-panel-container {
+        width: 100%;
+    }
 
-@grey20: #eaedef;
-@grey60: #c5c9d0;
-@grey200: #61656e;
-@grey300: #4c505b;
-@grey400: #44484f;
-@grey500: #3b3f46;
-@grey600: #2f3136;
-@grey700: #2a2c2f;
-@grey800: #242526;
-@grey900: #161616;
+    .scroll-panel-auto-width {
+        height: 1px;
+        margin-top: -1px;
+    }
+
+    .scroll-panel-content {
+        position: relative;
+    }
+}