@holoviz/panel 0.14.4 → 1.0.0-a.2

package/dist/bundled/bootstrapdarktheme/bootstrap_dark.css

@@ -0,0 +1,170 @@
+:root, :host, [data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text: #0a58ca;
+  --bs-secondary-text: #6c757d;
+  --bs-success-text: #146c43;
+  --bs-info-text: #087990;
+  --bs-warning-text: #997404;
+  --bs-danger-text: #b02a37;
+  --bs-light-text: #6c757d;
+  --bs-dark-text: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #f8f9fa;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #e9ecef;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-2xl: 2rem;
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--bs-body-color-rgb), 0.075);
+  --bs-emphasis-color: #000;
+  --bs-form-control-bg: var(--bs-body-bg);
+  --bs-form-control-disabled-bg: var(--bs-secondary-bg);
+  --bs-highlight-bg: #fff3cd;
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 576px;
+  --bs-breakpoint-md: 768px;
+  --bs-breakpoint-lg: 992px;
+  --bs-breakpoint-xl: 1200px;
+  --bs-breakpoint-xxl: 1400px;
+}
+
+:root, :host, [data-bs-theme=dark] {
+  --bs-body-color: #adb5bd;
+  --bs-body-color-rgb: 173, 181, 189;
+  --bs-body-bg: #212529;
+  --bs-body-bg-rgb: 33, 37, 41;
+  --bs-emphasis-color: #f8f9fa;
+  --bs-emphasis-color-rgb: 248, 249, 250;
+  --bs-secondary-color: rgba(173, 181, 189, 0.75);
+  --bs-secondary-color-rgb: 173, 181, 189;
+  --bs-secondary-bg: #343a40;
+  --bs-secondary-bg-rgb: 52, 58, 64;
+  --bs-tertiary-color: rgba(173, 181, 189, 0.5);
+  --bs-tertiary-color-rgb: 173, 181, 189;
+  --bs-tertiary-bg: #2b3035;
+  --bs-tertiary-bg-rgb: 43, 48, 53;
+  --bs-emphasis-color: #fff;
+  --bs-primary-text: #6ea8fe;
+  --bs-secondary-text: #dee2e6;
+  --bs-success-text: #75b798;
+  --bs-info-text: #6edff6;
+  --bs-warning-text: #ffda6a;
+  --bs-danger-text: #ea868f;
+  --bs-light-text: #f8f9fa;
+  --bs-dark-text: #dee2e6;
+  --bs-primary-bg-subtle: #031633;
+  --bs-secondary-bg-subtle: #212529;
+  --bs-success-bg-subtle: #051b11;
+  --bs-info-bg-subtle: #032830;
+  --bs-warning-bg-subtle: #332701;
+  --bs-danger-bg-subtle: #2c0b0e;
+  --bs-light-bg-subtle: #343a40;
+  --bs-dark-bg-subtle: #1a1d20;
+  --bs-primary-border-subtle: #084298;
+  --bs-secondary-border-subtle: #495057;
+  --bs-success-border-subtle: #0f5132;
+  --bs-info-border-subtle: #055160;
+  --bs-warning-border-subtle: #664d03;
+  --bs-danger-border-subtle: #842029;
+  --bs-light-border-subtle: #495057;
+  --bs-dark-border-subtle: #343a40;
+  --bs-heading-color: #fff;
+  --bs-link-color: #6ea8fe;
+  --bs-link-hover-color: #9ec5fe;
+  --bs-link-color-rgb: 110, 168, 254;
+  --bs-link-hover-color-rgb: 158, 197, 254;
+  --bs-code-color: #e685b5;
+  --bs-border-color: #495057;
+  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
+}

package/dist/bundled/bootstrapdefaulttheme/bootstrap_default.css

@@ -0,0 +1,120 @@
+:root, :host, [data-bs-theme=light] {
+  --bs-blue: #0d6efd;
+  --bs-indigo: #6610f2;
+  --bs-purple: #6f42c1;
+  --bs-pink: #d63384;
+  --bs-red: #dc3545;
+  --bs-orange: #fd7e14;
+  --bs-yellow: #ffc107;
+  --bs-green: #198754;
+  --bs-teal: #20c997;
+  --bs-cyan: #0dcaf0;
+  --bs-black: #000;
+  --bs-white: #fff;
+  --bs-gray: #6c757d;
+  --bs-gray-dark: #343a40;
+  --bs-gray-100: #f8f9fa;
+  --bs-gray-200: #e9ecef;
+  --bs-gray-300: #dee2e6;
+  --bs-gray-400: #ced4da;
+  --bs-gray-500: #adb5bd;
+  --bs-gray-600: #6c757d;
+  --bs-gray-700: #495057;
+  --bs-gray-800: #343a40;
+  --bs-gray-900: #212529;
+  --bs-primary: #0d6efd;
+  --bs-secondary: #6c757d;
+  --bs-success: #198754;
+  --bs-info: #0dcaf0;
+  --bs-warning: #ffc107;
+  --bs-danger: #dc3545;
+  --bs-light: #f8f9fa;
+  --bs-dark: #212529;
+  --bs-primary-rgb: 13, 110, 253;
+  --bs-secondary-rgb: 108, 117, 125;
+  --bs-success-rgb: 25, 135, 84;
+  --bs-info-rgb: 13, 202, 240;
+  --bs-warning-rgb: 255, 193, 7;
+  --bs-danger-rgb: 220, 53, 69;
+  --bs-light-rgb: 248, 249, 250;
+  --bs-dark-rgb: 33, 37, 41;
+  --bs-primary-text: #0a58ca;
+  --bs-secondary-text: #6c757d;
+  --bs-success-text: #146c43;
+  --bs-info-text: #087990;
+  --bs-warning-text: #997404;
+  --bs-danger-text: #b02a37;
+  --bs-light-text: #6c757d;
+  --bs-dark-text: #495057;
+  --bs-primary-bg-subtle: #cfe2ff;
+  --bs-secondary-bg-subtle: #f8f9fa;
+  --bs-success-bg-subtle: #d1e7dd;
+  --bs-info-bg-subtle: #cff4fc;
+  --bs-warning-bg-subtle: #fff3cd;
+  --bs-danger-bg-subtle: #f8d7da;
+  --bs-light-bg-subtle: #fcfcfd;
+  --bs-dark-bg-subtle: #ced4da;
+  --bs-primary-border-subtle: #9ec5fe;
+  --bs-secondary-border-subtle: #e9ecef;
+  --bs-success-border-subtle: #a3cfbb;
+  --bs-info-border-subtle: #9eeaf9;
+  --bs-warning-border-subtle: #ffe69c;
+  --bs-danger-border-subtle: #f1aeb5;
+  --bs-light-border-subtle: #e9ecef;
+  --bs-dark-border-subtle: #adb5bd;
+  --bs-white-rgb: 255, 255, 255;
+  --bs-black-rgb: 0, 0, 0;
+  --bs-body-color-rgb: 33, 37, 41;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+  --bs-body-font-family: var(--bs-font-sans-serif);
+  --bs-body-font-size: 1rem;
+  --bs-body-font-weight: 400;
+  --bs-body-line-height: 1.5;
+  --bs-body-color: #212529;
+  --bs-emphasis-color: #000;
+  --bs-emphasis-color-rgb: 0, 0, 0;
+  --bs-secondary-color: rgba(33, 37, 41, 0.75);
+  --bs-secondary-color-rgb: 33, 37, 41;
+  --bs-secondary-bg: #e9ecef;
+  --bs-secondary-bg-rgb: 233, 236, 239;
+  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
+  --bs-tertiary-color-rgb: 33, 37, 41;
+  --bs-tertiary-bg: #f8f9fa;
+  --bs-tertiary-bg-rgb: 248, 249, 250;
+  --bs-body-bg: #fff;
+  --bs-body-bg-rgb: 255, 255, 255;
+  --bs-link-color: #0d6efd;
+  --bs-link-color-rgb: 13, 110, 253;
+  --bs-link-decoration: underline;
+  --bs-link-hover-color: #0a58ca;
+  --bs-link-hover-color-rgb: 10, 88, 202;
+  --bs-code-color: #d63384;
+  --bs-highlight-bg: #fff3cd;
+  --bs-border-width: 1px;
+  --bs-border-style: solid;
+  --bs-border-color: #dee2e6;
+  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
+  --bs-border-radius: 0.375rem;
+  --bs-border-radius-sm: 0.25rem;
+  --bs-border-radius-lg: 0.5rem;
+  --bs-border-radius-xl: 1rem;
+  --bs-border-radius-2xl: 2rem;
+  --bs-border-radius-pill: 50rem;
+  --bs-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(var(--bs-body-color-rgb), 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(var(--bs-body-color-rgb), 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(var(--bs-body-color-rgb), 0.075);
+  --bs-emphasis-color: #000;
+  --bs-form-control-bg: var(--bs-body-bg);
+  --bs-form-control-disabled-bg: var(--bs-secondary-bg);
+  --bs-highlight-bg: #fff3cd;
+  --bs-breakpoint-xs: 0;
+  --bs-breakpoint-sm: 576px;
+  --bs-breakpoint-md: 768px;
+  --bs-breakpoint-lg: 992px;
+  --bs-breakpoint-xl: 1200px;
+  --bs-breakpoint-xxl: 1400px;
+}

package/dist/bundled/bootstraptemplate/bootstrap.css

@@ -1,128 +1,170 @@
-body {
-  height: 100vh
+:root, :host {
+    --bs-primary-color: var(--panel-on-primary-color);
+    --bs-primary-bg: var(--panel-primary-color);
+    --bs-secondary-color: var(--panel-on-secondary-color);
+    --bs-secondary-bg: var(--panel-secondary-color);
+    --bs-form-control-bg: var(--panel-background-color);
+    --bs-body-bg: var(--panel-background-color);
+    --bs-body-color: var(--panel-on-background-color);
+    --bs-surface-bg: var(--panel-surface-color);
+    --bs-surface-color: var(--panel-on-surface-color);
+    --bokeh-base-font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
 }
 
-#container {
-  padding:0px;
+html {
+    scrollbar-face-color: var(--bs-surface-bg);
+    scrollbar-base-color: var(--bs-surface-bg);
+    scrollbar-3dlight-color: var(--bs-surface-bg);
+    scrollbar-highlight-color: var(--bs-surface-bg);
+    scrollbar-track-color: var(--bs-body-bg);
+    scrollbar-arrow-color: var(--bs-body-bg);
+    scrollbar-shadow-color: var(--bs-surface-bg);
 }
 
-#content {
-  height: 100vh;
-  margin: 0px;
+::-webkit-scrollbar {
+    width: 12px;
 }
 
-#sidebar {
-  padding-top: 15px;
-  padding-bottom: 15px;
-  padding-left: 5px;
-  padding-right: 10px;
-  transition: all 0.2s cubic-bezier(0.945, 0.020, 0.270, 0.665);
-  transform-origin: center left; /* Set the transformed position of sidebar to center left side. */
-  overflow-y: auto;
-  height: 100%;
+::-webkit-scrollbar-track {
+    background-color: var(--bs-body-bg);
+    border-radius: 10px;
 }
 
-#sidebar.active {
-  width: 0px;
-  overflow-y: hidden;
-  padding: 0px;
+::-webkit-scrollbar-thumb {
+    background-color: var(--bs-surface-bg);
 }
 
-#main {
-  overflow-y: auto;
-  padding-right: 20px;
-  padding-bottom: 20px;
-  padding-top: 10px;
-  padding-left: 10px;
+::-webkit-scrollbar-corner {
+    background-color: var(--bs-surface-bg);
 }
 
-#sidebarCollapse {
-  background: none;
-  border: none;
+body {
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    height: 100vh
 }
 
-#header-items {
-  width: 100%;
-  margin-left: 15px;
+#container {
+    padding: 0px;
+}
+
+/* Header */
+
+#header {
+    background-color: var(--bs-primary-bg);
+    color: var(--bs-primary-color);
 }
 
-.navbar .bk-menu {
-  color: black
+.navbar-toggle {
+    background: none;
+    border: none;
+    padding-left: 10px;
 }
 
 a.navbar-brand {
-  padding-left: 10px;
-  display: flex;
-  align-items: center;
-  font-size: 1.5em;
+    padding-left: 10px;
+    display: flex;
+    align-items: center;
+    font-size: 1.5em;
+}
+
+#header .title {
+    color: var(--bs-primary-color);
+    text-decoration: none;
+    text-decoration-line: none;
+    text-decoration-style: initial;
+    text-decoration-color: initial;
+    font-weight: 400;
+    font-size: 1.5em;
+    padding-left: 0.5em;
+    line-height: 2em;
+    white-space: nowrap;
 }
 
-.title {
-  color: #fff;
-  text-decoration: none;
-  text-decoration-line: none;
-  text-decoration-style: initial;
-  text-decoration-color: initial;
-  font-weight: 400;
-  font-size: 1.5em;
-  line-height: 2em;
-  white-space: nowrap;
+#header-items {
+    display: block;
+    margin-left: 15px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .app-header {
-  display: contents;
-  padding-left: 10px;
+    display: contents;
+    padding-left: 10px;
 }
 
 .app-header a.title:hover {
-  text-decoration: none;
-  color: white;
+    color: var(--bs-primary-color);
+    text-decoration: none;
 }
 
 img.app-logo {
-  padding-right: 10px;
-  font-size: 28px;
-  height: 30px;
-  max-width: inherit;
+    padding-right: 10px;
+    font-size: 28px;
+    height: 30px;
+    max-width: inherit;
 }
 
-p.bk.card-button {
-  display: none;
+/* Sidebar */
+
+#sidebar {
+    border-right: 1px solid var(--bs-border-color);
+    height: 100%;
+    overflow: hidden auto;
+    padding: 15px 10px 15px 5px;
 }
 
+#sidebar.collapsing {
+    display: block;
+    width: 0;
+}
+
+/* Main Area */
+
+#content {
+    height: 100vh;
+    margin: 0px;
+}
+
+#main {
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    overflow-y: auto;
+    padding: 10px 20px 20px 10px;
+}
+
+/* Modal */
+
 .pn-modal {
-  overflow-y: auto;
+    overflow-y: auto;
 }
 
 .pn-modal-content {
-  display: block;
+    display: block;
+    min-height: 42px;
 }
 
 .pn-modal-close {
-  position: relative;
-  float: right;
-  z-index: 100;
-  width: 40px;
-  height: 40px;
-  border-radius: 4px;
-  border: 1px solid rgba(0,0,0,.2);
-  padding: 0px;
-  background: transparent;
-  border-top: 0;
-  border-right: 0;
+    height: 40px;
+    float: right;
+    padding: 0px;
+    position: relative;
+    width: 40px;
+    z-index: 100;
 }
 
 .pn-modal-close:hover,
 .pn-modal-close:focus {
-  text-decoration: none;
-  cursor: pointer;
+    cursor: pointer;
+    font-weight: 800;
+    text-decoration: none;
 }
 
 .pn-busy-container {
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  margin-left: auto;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    margin-left: auto;
 }
 
 @media (min-width: 576px) {

package/dist/bundled/darktheme/dark.css

@@ -1,107 +1,34 @@
-body {
-  color: white;
-  background-color: #121212;
-}
-
-#header {
-  background-color: #2f2f2f;
-}
-
-#main {
-  color: white;
-  background-color: #121212;
-}
-
-#sidebar {
-  color: white;
-  border-color: #2f2f2f !important;
-  background-color: #121212;
-}
-
-.bk.card, .bk.accordion {
-  color: white;
-  background-color: #2f2f2f;
-}
-
-.bk.card-header, .bk.accordion-header {
-  color: white;
-  background-color: #292929 !important;
-}
-
-/* DataFrame Widget */
-.bk-root .slick-header-columns {
-  color: white;
-  font-weight: bold;
-  background: none;
-}
-
-.bk-root .slick-header-column:hover {
-  background: #292929;
-}
-
-.bk-root .slick-row.even {
-  background: none;
-}
-
-.bk-root .slick-row.odd {
-  background: #3f3f3f;
-}
-
-.bk-root .slick-cell.selected {
-  background: #3f3f80;
-}
-
-/* DataFrame Pane */
-table.panel-df {
-  color: white;
-}
-
-.panel-df tbody tr:nth-child(odd) {
-  background: #3f3f3f;
-}
-
-.panel-df tr:hover {
-    background: #3f3f80 !important;
-    cursor: pointer;
-}
-
-/* Tabs layout */
-.bk-root .bk-tabs-header .bk-tab {
-  color: white;
-  background: #2f2f2f;
-  border: none;
-}
-
-.bk-root .bk-tabs-header .bk-tab:hover {
-  color: white;
-  background: #4f4f4f;
-}
-
-.bk-root .bk-tabs-header .bk-tab.bk-active {
-  color: white;
-  background: #3f3f3f;
-  border: none;
-}
-
-html {
-  scrollbar-face-color: #646464;
-  scrollbar-base-color: #646464;
-  scrollbar-3dlight-color: #646464;
-  scrollbar-highlight-color: #646464;
-  scrollbar-track-color: #000;
-  scrollbar-arrow-color: #000;
-  scrollbar-shadow-color: #646464;
-  scrollbar-dark-shadow-color: #646464;
-}
-
-::-webkit-scrollbar-button {  background-color: #666; }
-::-webkit-scrollbar-track {  background-color: #646464;}
-::-webkit-scrollbar-track-piece { background-color: #000;}
-::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
-::-webkit-scrollbar-corner { background-color: #646464;}}
-::-webkit-resizer { background-color: #666;}
-
-.bk.pn-loading:before {
-  background-color: inherit;
-  border-color: inherit;
+:host, :root {
+    --panel-primary-color: #0072B5;
+    --panel-primary-rgb: 0,114,181;
+    --panel-on-primary-color: #ffffff;
+    --panel-on-primary-rgb: 255,255,255;
+    --panel-secondary-color: #343a40;
+    --panel-secondary-rgb: 52,58,64;
+    --panel-on-secondary-color: #ffffff;
+    --panel-on-secondary-rgb: 255,255,255;
+    --panel-background-color: #212529;
+    --panel-background-rgb: 33,37,41;
+    --panel-on-background-color: #ffffff;
+    --panel-on-background-rgb: 255,255,255;
+    --panel-surface-color: #2b3035;
+    --panel-surface-rgb: 59,59,59;
+    --panel-on-surface-color: #ffffff;
+    --panel-on-surface-rgb: 255,255,255;
+    --primary-bg-color: #0d6efd;
+    --secondary-bg-color: #6c757d;
+    --success-bg-color: #198754;
+    --danger-bg-color: #dc3545;
+    --warning-bg-color: #ffc107;
+    --info-bg-color: #0dcaf0;
+    --light-bg-color: #f8f9fa;
+    --dark-bg-color: #212529;
+    --primary-text-color: #ffffff;
+    --secondary-text-color: #ffffff;
+    --success-text-color: #ffffff;
+    --danger-text-color: #ffffff;
+    --warning-text-color: #000000;
+    --info-text-color: #000000;
+    --light-text-color: #000000;
+    --dark-text-color: #ffffff;
 }