@perspective-dev/workspace 4.3.0 → 4.4.1

package/src/css/tabbar.css

@@ -0,0 +1,378 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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 {
+    .lm-TabBar-tabLabel {
+        background-color: transparent;
+        border: none;
+        color: var(--psp--color, #666);
+        cursor: pointer;
+        padding: 0px 6px;
+        margin: 0;
+        margin-left: 15.5px;
+        margin-right: auto;
+        flex: 0 1 auto;
+        border-radius: 3px;
+        &:hover {
+            background-color: var(--psp--color);
+            color: var(--psp--background-color);
+        }
+    }
+
+    /* .p-TabBar-tabLabel[value="[untitled]"] { */
+    /*     color: #ddd !important; */
+    /* } */
+
+    .lm-TabBar-tabLabel:focus {
+        outline: none;
+        color: var(--workspace-secondary--color, #666) !important;
+        cursor: text;
+    }
+
+    .lm-TabBar-tab.lm-mod-closable > .lm-TabBar-tabCloseIcon:before {
+        content: var(--close-button--content, "\2715");
+    }
+
+    .lm-TabBar-tab > .lm-TabBar-tabConfigIcon:before {
+        content: var(--open-settings-button--content, "\1F527");
+        font-family: var(--settings--font-family, "Arial");
+        transition: color 0.5s ease;
+    }
+
+    .lm-TabBar-tab.lm-mod-current.settings_open
+        > .lm-TabBar-tabConfigIcon:before {
+        content: var(--close-settings-button--content, "\1F527");
+    }
+
+    .lm-TabBar-tab.lm-mod-current.linked > .lm-TabBar-tabConfigIcon:before {
+        color: #22a0ce;
+    }
+
+    .lm-TabBar-tab > .lm-TabBar-tabConfigIcon {
+        opacity: 0;
+        pointer-events: none;
+    }
+
+    .lm-TabBar-tab.lm-mod-current > .lm-TabBar-tabConfigIcon {
+        opacity: 1;
+        pointer-events: all;
+    }
+
+    .lm-mod-current {
+        .lm-TabBar-tabConfigIcon,
+        .lm-TabBar-tabCloseIcon {
+            color: inherit;
+            transition: color 0.2s ease-out;
+        }
+
+        .lm-TabBar-tabConfigIcon:hover,
+        .lm-TabBar-tabCloseIcon:hover {
+            color: #1a7da1;
+            transition: color 0.2s ease-out;
+        }
+    }
+
+    .lm-BoxPanel {
+        overflow: scroll !important;
+    }
+
+    .lm-TabBar,
+    .lm-TabBar-tab {
+        position: relative;
+
+        overflow: visible !important;
+    }
+
+    .lm-TabBar-tabLabel:empty::after {
+        content: "untitled";
+        color: #aaa;
+    }
+
+    .lm-mod-current .lm-TabBar-tabLabel:empty::after {
+        color: #ddd;
+    }
+
+    .lm-TabBar-tabLabel:empty::after {
+        content: "untitled";
+    }
+
+    .divider {
+        left: 32px;
+        bottom: 0;
+        position: absolute;
+        right: 32px;
+
+        height: 1px;
+        background-color: var(--psp-workspace--tabbar--border-color);
+        margin-bottom: 0px;
+    }
+
+    .lm-TabBar-tab .drag-handle {
+        pointer-events: all;
+        height: 12px;
+        width: 14px;
+        -webkit-mask-image: var(--psp-icon--column-drag-handle--mask-image);
+        mask-image: var(--psp-icon--column-drag-handle--mask-image);
+        padding: 12px 0 12px 12px;
+        background-repeat: no-repeat;
+        background-color: var(--psp--color, red);
+        content: "";
+        display: inline-block;
+        -webkit-mask-size: cover;
+        mask-size: auto;
+        mask-position: center;
+        mask-repeat: no-repeat;
+    }
+
+    .lm-TabBar {
+        /* z-index: -1; */
+        pointer-events: none;
+        .lm-TabBar-tabCloseIcon {
+            pointer-events: all;
+        }
+
+        .bookmarks-button {
+            pointer-events: all;
+        }
+    }
+
+    .lm-TabBar-tab.lm-mod-hidden {
+        display: flex !important;
+        opacity: 0.5;
+    }
+
+    .lm-TabBar-tab.lm-mod-current .divider {
+        display: block;
+    }
+
+    .pfm-button-base {
+        background: white !important;
+    }
+
+    .pfm-button-base:active {
+        background: #016bc6 !important;
+    }
+
+    .lm-TabBar-content {
+        padding: 0px;
+        border-bottom: 0px solid #fff !important;
+        border-left: #eaeaea;
+        border-right: #eaeaea;
+    }
+
+    .lm-TabBar-tab.lm-mod-current {
+        .shadow {
+            margin: -1px;
+            position: absolute;
+            width: calc(100% + 2px);
+            height: 200%;
+            pointer-events: none;
+            left: 0px;
+        }
+
+        &.settings_open .shadow {
+            box-shadow: none;
+        }
+    }
+
+    .lm-TabBar-tab {
+        /* margin: 0px 4px; */
+        border-color: #eaeaea;
+        align-items: center;
+    }
+
+    .lm-TabBar-content.inactive-blur > .lm-TabBar-tab {
+        background-color: var(
+            --workspace-inactive-blur--background-color,
+            transparent
+        );
+    }
+
+    .condensed .lm-TabBar-content {
+        & > .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabConfigIcon {
+            display: block;
+        }
+
+        & > .lm-TabBar-tab.lm-mod-current.settings_open {
+            .lm-TabBar-tabLabel {
+                margin-left: 0px;
+            }
+        }
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.settings_open {
+        border-width: 1px 1px 0px 1px !important;
+        border-color: var(--psp-workspace--tabbar--border-color, #ddd);
+
+        .lm-TabBar-tabToolbar {
+            display: flex;
+        }
+
+        .divider {
+            height: 1px;
+            margin-bottom: 0px;
+            background-color: var(--psp-workspace--tabbar--border-color, #ddd);
+        }
+
+        &:last-child:first-child .divider {
+            transition: none;
+        }
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current.perspective_updating {
+        .lm-TabBar-tabConfigIcon {
+            display: none;
+        }
+
+        .lm-TabBar-tabLoadingIcon {
+            display: block;
+        }
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab {
+        max-width: 100000px !important;
+        flex: 0 1 100000px !important;
+        background: none;
+        color: #737373;
+        height: 40px !important;
+        max-height: 40px !important;
+        margin-bottom: -40px;
+        transform: none !important;
+        transition: color 0.2s ease-out;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab {
+        color: #ccc;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab {
+        color: #ccc;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab:hover {
+        color: #ccc;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
+        color: var(--workspace-secondary--color, #666);
+    }
+
+    .lm-TabBar-tab.lm-mod-current .lm-TabBar-tabLabel {
+        white-space: nowrap !important;
+    }
+
+    .lm-TabBar-tabLabel {
+        font-family: inherit;
+        font-size: 12px;
+        line-height: 22px;
+        text-align: start;
+        white-space: normal !important;
+        word-break: break-all;
+    }
+
+    .lm-TabBar-tabCloseIcon,
+    .lm-TabBar-tabConfigIcon {
+        cursor: pointer !important;
+        line-height: 22px !important;
+        padding-right: 16.5px !important;
+    }
+
+    .lm-TabBar-tabConfigIcon {
+        padding-left: 8px;
+        padding-right: 8px !important;
+    }
+
+    .lm-TabBar-tabLoadingIcon {
+        padding-left: 11px;
+        padding-right: 12px;
+    }
+
+    .bottom .lm-TabBar-tab {
+        flex-basis: 10000px !important;
+        max-width: 10000px !important;
+    }
+
+    .lm-TabBar-content > .lm-TabBar-tab.lm-mod-current {
+        color: var(--workspace-tabbar--color, #666) !important;
+        /* border: var(--psp-workspace--tabbar--border, 1px solid #ddd); */
+        /* border-width: var(--psp-workspace--tabbar-tab--border-width); */
+        /* box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color); */
+        /* border-radius: var(--psp-workspace--tabbar--border-radius, 6px) */
+        /*     var(--psp-workspace--tabbar--border-radius, 6px) 0 0; */
+        /* background-color: var(--workspace-tabbar--background-color, white); */
+        background: none;
+        height: 40px !important;
+        max-height: 40px !important;
+        margin-bottom: -40px;
+        border: 0 solid transparent;
+        border-width: 1px 1px 0px 1px;
+    }
+
+    .bottom .lm-TabBar-tab.lm-mod-current {
+        border: none;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #ccc;
+    }
+
+    .perspective-workspace.context-menu * .lm-TabBar.context-focus {
+        opacity: 1;
+    }
+
+    .perspective-workspace.context-menu * .lm-TabBar,
+    .perspective-workspace.context-menu
+        .lm-Widget.workspace-widget:not(.context-focus)
+        .viewer-container {
+        opacity: 0.2;
+    }
+
+    .bookmarks-button {
+        margin-left: 11px;
+        margin-right: -13px;
+        height: 20px;
+        border-radius: 3px;
+        border: 1px solid var(--psp-inactive--color);
+        background-color: var(--psp--background-color);
+
+        &:hover {
+            background-color: var(--psp--color);
+            border-color: var(--psp--color);
+        }
+    }
+
+    .bookmarks {
+        background-repeat: no-repeat;
+        background-color: var(--psp--color);
+        content: "";
+        display: inline-block;
+        -webkit-mask-size: cover;
+        mask-size: cover;
+        cursor: pointer;
+        width: 20px;
+        height: 12px;
+        -webkit-mask-image: var(--psp-icon--bookmarks--mask-image);
+        mask-image: var(--psp-icon--bookmarks--mask-image);
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-size: auto;
+        mask-size: auto;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        padding: 4px 6px;
+
+        &:hover {
+            background-color: var(--psp--background-color);
+        }
+    }
+}

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

@@ -1,55 +1,54 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@border-color: 1px solid #eaeaea;
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 ::slotted(.workspace-master-widget) {
-    --status-bar--display: none;
-    --config-button-icon--content: var(
+    --psp-status-bar--display: none;
+    --psp-label--config-button--content: var(
         --open-settings-button--content,
         "\1F527"
     ) !important;
 }
 
 .workspace-master-widget[settings] {
-    --config-button-icon--content: var(
+    --psp-label--config-button--content: var(
         --close-settings-button--content,
         "\1F527"
     ) !important;
 }
 
 :not(.workspace-master-widget).widget-maximize {
-    --config-button-icon--content: var(
+    --psp-label--config-button--content: var(
         --open-settings-button--content,
         "\1F527"
     ) !important;
 }
 
 :not(.workspace-master-widget).widget-maximize[settings] {
-    --config-button-icon--content: var(
+    --psp-label--config-button--content: var(
         --close-settings-button--content,
         "\1F527"
     ) !important;
 }
 
 .lm-DockPanel-widget {
-    border: @border-color;
+    border: 1px solid #eaeaea;
     border-width: 0px !important;
     min-width: 300px;
     min-height: 200px;
 }
 
 :not.workspace-master-widget {
-    --config-button-icon--content: "" !important;
+    --psp-label--config-button--content: "" !important;
 }
 
 .context-menu > perspective-viewer.context-focus {
@@ -66,7 +65,7 @@
 }
 
 :host {
-    --bookmarks--mask-image: url("../svg/bookmark-icon.svg");
+    --psp-icon--bookmarks--mask-image: url("../svg/bookmark-icon.svg");
 }
 
 ::slotted(perspective-viewer) {
@@ -79,17 +78,19 @@
     width: 100%;
     height: 100%;
     overflow: visible !important;
-    --close-button--display: flex;
+    --psp-close-button--display: flex;
 }
 
 ::slotted(perspective-viewer.bookmarks-container:not([settings])) {
-    --status-ok-icon--mask-image: var(--bookmarks--mask-image) !important;
-    --status-ok-icon--border-color: var(--inactive--color);
-    --status-ok-icon--hover--border-color: var(--icon--color);
-    --status-ok-icon--hover--background-color: var(--icon--color);
-    --status-ok-icon--hover--color: var(--plugin--background);
-    --status-ok-icon--cursor: pointer;
-    --status-indicator--pointer-events: all;
+    --psp-icon--status-ok--mask-image: var(
+        --psp-icon--bookmarks--mask-image
+    ) !important;
+    --psp-status-icon--ok--border-color: var(--psp-inactive--color);
+    --psp-status-icon--ok-hover--border-color: var(--psp--color);
+    --psp-status-icon--ok-hover--background-color: var(--psp--color);
+    --psp-status-icon--ok-hover--color: var(--psp--background-color);
+    --psp-status-icon--ok--cursor: pointer;
+    --psp-status-icon--pointer-events: all;
 }
 
 ::slotted(perspective-viewer::part(status-indicator)) {
@@ -98,7 +99,7 @@
 }
 
 ::slotted(perspective-viewer:not(.widget-maximize)) {
-    --status-bar--padding: 0 36px 0 8px;
+    --psp-status-bar--padding: 0 36px 0 8px;
 }
 
 :host-context(.lm-mod-override-cursor) {

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

@@ -1,24 +1,26 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
-
-@border-color: 1px solid #eaedef;
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 .lm-DockPanel:not([data-mode="single-document"]) .viewer-container {
-    border: var(--workspace-tabbar--border, 1px solid var(--inactive--color));
-    border-width: var(--workspace-tabbar--border-width);
-    border-radius: var(--workspace-tabbar--border-radius, 6px)
-        var(--workspace-tabbar--border-radius, 6px)
-        var(--workspace-tabbar--border-radius, 6px)
-        var(--workspace-tabbar--border-radius, 6px);
+    border: var(
+        --psp-workspace--tabbar--border,
+        1px solid var(--psp-inactive--color)
+    );
+    border-width: var(--psp-workspace--tabbar--border-width);
+    border-radius: var(--psp-workspace--tabbar--border-radius, 6px)
+        var(--psp-workspace--tabbar--border-radius, 6px)
+        var(--psp-workspace--tabbar--border-radius, 6px)
+        var(--psp-workspace--tabbar--border-radius, 6px);
 }
 
 .viewer-container {
@@ -37,6 +39,6 @@
 .workspace-widget {
     display: flex;
     flex-direction: column;
-    border: @border-color;
+    border: 1px solid #eaedef;
     border-width: 0px !important;
 }

package/src/{less/workspace.less → css/workspace.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). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 @import "@lumino/widgets/style/widget.css";
 @import "@lumino/widgets/style/accordionpanel.css";
@@ -21,17 +22,28 @@
 @import "@lumino/widgets/style/tabbar.css";
 @import "@lumino/widgets/style/tabpanel.css";
 
-@import "./injected.less";
+/* @import "@lumino/widgets/style/widget.css";
+@import "@lumino/widgets/style/accordionpanel.css";
+@import "@lumino/widgets/style/commandpalette.css";
+@import "@lumino/widgets/style/dockpanel.css";
+@import "@lumino/widgets/style/menu.css";
+@import "@lumino/widgets/style/menubar.css";
+@import "@lumino/widgets/style/scrollbar.css";
+@import "@lumino/widgets/style/splitpanel.css";
+@import "@lumino/widgets/style/tabbar.css";
+@import "@lumino/widgets/style/tabpanel.css"; */
+@import "@lumino/widgets/style/index.css";
 
-:host {
-    @import "./tabbar.less";
-    @import "./dockpanel.less";
-    @import "./widget.less";
+@import "./injected.css";
+@import "./tabbar.css";
+@import "./dockpanel.css";
+@import "./widget.css";
 
-    --workspace-spacing: 3px;
+:host {
+    --psp-workspace--spacing: 3px;
 
-    // width: 100%;
-    // height: 100%;
+    /* width: 100%; */
+    /* height: 100%; */
 
     .workspace {
         width: 100%;
@@ -44,7 +56,9 @@
     }
 
     div.lm-SplitPanel-handle {
-        background-color: var(--workspace-split-panel-handle--background-color);
+        background-color: var(
+            --psp-workspace--split-panel-handle--background-color
+        );
     }
 
     .master-panel {

package/src/svg/bookmark-icon.svg

@@ -1,4 +1,4 @@
-<svg width="20" height="11" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="20" height="20" viewBox="0 0 20 11" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M3.66214 6.96476L0.5 9.86338V0.5H7.5V9.86338L4.33786 6.96476L4 6.65505L3.66214 6.96476Z" stroke="#042121"/>
     <path d="M15 4L17 6L19 4" stroke="#042121" stroke-linecap="round"/>
 </svg>