Migrated ScrollPanel

assets/styles/layout/variables/main/_dark.scss

@@ -1,8 +1,8 @@
 :root[class="p-dark"] {
     --primary-color-default:var(--p-dark-primary-400);
     --primary-color-inverse-default:var(--p-dark-zinc-900);
-    --text-color: var(--p-surface-0);
+    --text-color: var(--p-dark-surface-0);
-    --text-secondary-color: var(--p-surface-400);
+    --text-secondary-color: var(--p-dark-surface-400);
     --card-border: 1px solid transparent;
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;

components/lib/theme/aura/index.js

@@ -5,6 +5,7 @@ import divider from 'primevue/theme/aura/divider';
 import fieldset from 'primevue/theme/aura/fieldset';
 import global from 'primevue/theme/aura/global';
 import panel from 'primevue/theme/aura/panel';
+import scrollpanel from 'primevue/theme/aura/scrollpanel';
 import splitter from 'primevue/theme/aura/splitter';
 
 export default {
@@ -148,6 +149,7 @@ export default {
         divider,
         fieldset,
         panel,
-        splitter
+        splitter,
+        scrollpanel
     }
 };

components/lib/theme/aura/scrollpanel/index.js

@@ -0,0 +1,67 @@
+export default {
+    css: `
+.p-scrollpanel-wrapper {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    z-index: 1;
+    float: left;
+}
+
+.p-scrollpanel-content {
+    height: calc(100% + 18px);
+    width: calc(100% + 18px);
+    padding: 0 18px 18px 0;
+    position: relative;
+    overflow: auto;
+    box-sizing: border-box;
+    scrollbar-width: none;
+}
+
+.p-scrollpanel-content::-webkit-scrollbar {
+    display: none;
+}
+
+.p-scrollpanel-bar {
+    position: relative;
+    border-radius: 3px;
+    z-index: 2;
+    cursor: pointer;
+    opacity: 0;
+    outline-color: transparent;
+    transition: outline-color var(--p-transition-duration);
+    background: var(--p-dark-surface-800, var(--p-surface-100));
+    border: 0 none;
+    transition: outline-color var(--p-transition-duration), opacity var(--p-transition-duration);
+}
+
+.p-scrollpanel-bar:focus-visible {
+    outline: var(--p-focus-ring-width) var(--p-focus-ring-style) var(--p-focus-ring-color);
+    outline-offset: var(--p-focus-ring-offset);
+}
+
+.p-scrollpanel-bar-y {
+    width: 9px;
+    top: 0;
+}
+
+.p-scrollpanel-bar-x {
+    height: 9px;
+    bottom: 0;
+}
+
+.p-scrollpanel-hidden {
+    visibility: hidden;
+}
+
+.p-scrollpanel:hover .p-scrollpanel-bar,
+.p-scrollpanel:active .p-scrollpanel-bar {
+    opacity: 1;
+}
+
+.p-scrollpanel-grabbed {
+    user-select: none;
+}
+`
+};