@mixd-id/web-scaffold 0.1.230406395 → 0.1.230406397

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406395",
+  "version": "0.1.230406397",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Checkbox.vue

@@ -19,7 +19,7 @@
 
 <script>
 
-import { parseBoolean } from "../utils/helpers.mjs";
+import {parseBoolean} from "../utils/helpers.mjs";
 
 export default {
 
@@ -151,7 +151,7 @@ export default {
 }
 
 .indicator{
-	@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-500;
+	@apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-300;
 	@apply flex items-center justify-center overflow-hidden;
 	transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/ContextMenu.vue

@@ -312,7 +312,7 @@ export default {
 <style module>
 
 .contextMenu{
-	@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-xl;
+	@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
 	@apply border-[2px] border-text-200 shadow-2xl whitespace-nowrap;
 	transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 	opacity: 0;
@@ -326,7 +326,7 @@ export default {
 @media screen(md){
 
 	.contextMenu{
-		@apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-lg;
+		@apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-lg;
 		@apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
 		transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
 		opacity: 0;

package/src/components/Datepicker.vue

@@ -293,7 +293,7 @@ export default{
 .datepicker {
 	@apply min-h-[var(--h-cp)];
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
 	@apply cursor-pointer;
 }
 .datepicker:not(.readonly){

package/src/components/Dropdown.vue

@@ -161,7 +161,7 @@ export default {
 
 .dropdown{
 	@apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
-	@apply border-[1px] border-text-200 bg-base-500;
+	@apply border-[1px] border-text-200 bg-base-300;
 }
 .dropdown:not(.readonly){
 	@apply hover:border-text-300;

package/src/components/List.vue

@@ -99,7 +99,7 @@
                   </template>
                 </Textbox>
 
-                <div v-if="$slots.gridItem"
+                <div v-if="false && $slots.gridItem"
                      class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-text-50 rounded-lg">
                   <Radio v-model="preset.view"
                          name="view"
@@ -132,7 +132,7 @@
               <VirtualTable
                   ref="table"
                   :columns="columns"
-                  class="flex-1 rounded-lg panel-400"
+                  class="flex-1 bg-base-300"
                   :items="data.items"
                   :enumCache="enumCache"
                   @scroll-end="loadNext"
@@ -206,7 +206,7 @@
           <VirtualTable v-else-if="presetView === 'table'"
                         ref="table"
                         :columns="preset.columns"
-                        class="flex-1 rounded-lg panel-400"
+                        class="flex-1 panel-400"
                         :items="data.extItems"
                         :enumCache="enumCache"
                         @scroll-end="loadExtNext">

package/src/components/ListItem.vue

@@ -144,7 +144,6 @@ export default{
 <style module>
 
 .comp{
-  @apply bg-base-500;
 }
 
 .comp .dragover{

package/src/components/Modal.vue

@@ -354,7 +354,7 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply panel-400;
+	@apply bg-base-300 dark:bg-base-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
 }

package/src/components/MultilineText.vue

@@ -137,7 +137,7 @@ export default{
 <style module>
 
 .textarea{
-	@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-text-200 bg-base-300 rounded-lg overflow-hidden;
 }
 .textarea textarea{
 	@apply flex-1 outline-none p-2 bg-transparent resize-none;

package/src/components/Radio.vue

@@ -85,7 +85,7 @@ export default{
 }
 
 .indicator{
-  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-500;
+  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-300;
   @apply flex items-center justify-center overflow-hidden;
   transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/Textarea.vue

@@ -144,7 +144,7 @@ export default{
 
 .textarea{
 	@apply min-h-[var(--h-cp)];
-	@apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
+	@apply flex items-start border-[1px] border-text-200 bg-base-300 rounded-lg overflow-hidden;
 	@apply !max-h-[200px];
 }
 .textarea textarea{

package/src/components/Textbox.vue

@@ -181,7 +181,7 @@ export default{
 
 .textbox{
 	@apply flex items-center;
-  @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
+  @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
 	@apply overflow-hidden;
 }
 

package/src/components/TreeViewItem.vue

@@ -402,7 +402,7 @@ export default{
 <style module>
 
 .item{
-	@apply bg-base-300 dark:bg-base-400 flex flex-row py-1 items-center rounded-lg mb-1;
+	@apply bg-base-300 flex flex-row py-1 items-center rounded-lg mb-1;
 	@apply border-[1px] border-transparent cursor-pointer;
 }
 .item.active{

package/src/components/VirtualTable.vue

@@ -36,46 +36,51 @@
       </div>
 		</div>
 
-		<div ref="cont" class="flex-1 overflow-y-auto">
-      <div class="flex-1 flex flex-row">
+		<div ref="cont" class="flex-1 overflow-y-auto" @scroll.passive="handleScroll">
+      <div v-if="state === 3" class="flex items-center justify-center p-8">
+        <svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+      </div>
+
+      <div v-else class="flex-1 flex flex-row">
 
-        <div :style="freezeLeftScrollerStyle">
+        <div v-if="state !== 2" :style="freezeLeftScrollerStyle">
           <div :class="$style.spacer" :style="spacerStyle">
             <table :class="$style.table" class="flex-1 overflow-x-auto">
               <thead>
-              <tr>
-                <th v-for="column in freezeLeftColumns" :style="thStyle(column)"></th>
-                <th :class="$style.spacer"></th>
-              </tr>
+                <tr>
+                  <th v-for="column in freezeLeftColumns" :style="thStyle(column)"></th>
+                  <th :class="$style.spacer"></th>
+                </tr>
               </thead>
-              <tbody ref="tbody">
-              <tr v-for="(item, index) in visibleItems" :key="item"
-                  @click="select(item, index)"
-                  :class="trClass(item, index)">
-                <td v-for="(column, columnIndex) in freezeLeftColumns"
-                    :class="tdClass(item, column)"
-                    @click="$emit('item-click', item, column)">
-
-                  <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
-                  <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
-
-                  <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                  <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                  <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
-
-                </td>
-                <td :class="$style.spacer"></td>
-              </tr>
+              <tbody>
+                <tr @mouseover="hover(item, index)" @mouseout="hoverIndex = -1" v-for="(item, index) in visibleItems" :key="item"
+                    @click="select(item, index)"
+                    :class="trClass(item, index)">
+                  <td v-for="(column, columnIndex) in freezeLeftColumns"
+                      :class="tdClass(item, column)"
+                      @click="$emit('item-click', item, column)">
+
+                    <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
+                    <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
+
+                    <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index">
+                      <div :class="columnClass(column, item)">&nbsp;</div>
+                    </slot>
+                    <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index">
+                      <div :class="columnClass(column, item)">&nbsp;</div>
+                    </slot>
+                    <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
+
+                  </td>
+                  <td :class="$style.spacer"></td>
+                </tr>
               </tbody>
             </table>
           </div>
         </div>
 
-        <div ref="xcont" class="flex-1 overflow-x-auto overflow-y-hidden">
-          <div v-if="state === 3" ref="spinner" class="flex-1 flex items-center justify-center p-8">
-            <svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-          </div>
-          <div ref="scroller" v-else-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
+        <div ref="xcont" class="flex-1 overflow-x-auto overflow-y-hidden" @scroll.passive="handleScrollX">
+          <div ref="scroller" v-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
             <div :class="$style.spacer" ref="spacer" :style="spacerStyle">
 
               <table :class="$style.table" class="flex-1 overflow-x-auto">
@@ -86,7 +91,7 @@
                   </tr>
                 </thead>
                 <tbody ref="tbody">
-                  <tr v-for="(item, index) in visibleItems" :key="item"
+                  <tr @mouseover="hover(item, index)" @mouseout="hoverIndex = -1" v-for="(item, index) in visibleItems" :key="item"
                       @click="select(item, index)"
                       :class="trClass(item, index)">
                     <td v-for="(column, columnIndex) in unfreezedColumns"
@@ -96,8 +101,12 @@
                       <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
                       <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
 
-                      <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
-                      <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index"></slot>
+                      <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index">
+                        <div :class="columnClass(column, item)">&nbsp;</div>
+                      </slot>
+                      <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index">
+                        <div :class="columnClass(column, item)">&nbsp;</div>
+                      </slot>
                       <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
 
                     </td>
@@ -105,7 +114,8 @@
                 </tr>
                 </tbody>
               </table>
-              <div v-if="state === 2" ref="spinner" class="h-[44px] relative">
+
+              <div v-if="state === 2" class="h-[44px] relative">
                 <div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
                   <svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
                 </div>
@@ -119,24 +129,26 @@
             <h5 class="text-text-300">No data available</h5>
           </div>
           <slot name="end"></slot>
-          <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
-            <table :class="$style.table">
-              <tbody>
-              <tr>
-                <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
-                  <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
-                  <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
-                  <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
-                </td>
-                <td :class="$style.spacer"></td>
-              </tr>
-              </tbody>
-            </table>
-          </div>
         </div>
 
+      </div>
+
+      <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
+        <table :class="$style.table">
+          <tbody>
+          <tr>
+            <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
+              <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
+              <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
+              <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
+            </td>
+            <td :class="$style.spacer"></td>
+          </tr>
+          </tbody>
+        </table>
       </div>
 		</div>
+
 	</div>
 </template>
 
@@ -200,9 +212,12 @@ export default{
 			maxVisibleItems: 0,
 			isOnEndScroll: false,
 			selectedIndex: -1,
+			hoverIndex: -1,
 			state: 1,
       scrolled: false,
-      scrollerCache: {}
+      scrollerCache: {},
+      observer1: null,
+      observer2: null,
 		}
 	},
 
@@ -212,11 +227,6 @@ export default{
       return this.datasourceColumns ?? this.columns
     },
 
-    xContStyle(){
-      return {
-      }
-    },
-
     cItems(){
       return this.value?.items ?? this.items
     },
@@ -327,30 +337,23 @@ export default{
 
 	mounted(){
 
-		this.$refs.cont.addEventListener(
-			"scroll",
-			this.handleScroll,
-			this.passiveScrollSupported() ? { passive: true } : false
-		)
-
-		this.$refs.xcont.addEventListener(
-			"scroll",
-			this.handleScrollX,
-			this.passiveScrollSupported() ? { passive: true } : false
-		)
-
-    this.$refs.xcont.style.minHeight = `${this.$refs.cont.clientHeight}px`
-
-		this.resize()
-
-    const observer = new MutationObserver((mutationsList) => {
+    this.observer1 = new MutationObserver(_ => {
       this.resize()
     });
-    observer.observe(this.$el, { attributes: true });
+    this.observer1.observe(this.$el, { attributes: true });
 
+    this.observer2 = new ResizeObserver(_ => {
+      this.resize()
+    });
+    this.observer2.observe(this.$refs.cont)
 	},
 
-	methods: {
+  unmounted() {
+    this.observer1.disconnect()
+    this.observer2.disconnect()
+  },
+
+  methods: {
 
 		resetState(){
 			this.state = 1
@@ -362,6 +365,7 @@ export default{
 
 			return [
 				this.selectedIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trSelected : '',
+				this.hoverIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trHover : '',
 				highlight ? this.$style.highlight : ''
 			].join(' ')
 		},
@@ -379,6 +383,10 @@ export default{
 			}
 		},
 
+    hover(item, index){
+      this.hoverIndex = (item && item.id) ? item.id : this.visibleStartIndex + index
+    },
+
 		thStyle(column){
 			const width = parseInt(column.width ?? this.defaultColumnWidth)
 			return {
@@ -399,6 +407,10 @@ export default{
 		async resize(){
 
 			this.$nextTick(() => {
+        if(this.$refs.xcont){
+          this.$refs.xcont.style.minHeight = `${this.$refs.cont.clientHeight}px`
+        }
+
 				if(this.$refs.calc){
 					const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
 						window.getComputedStyle(this.$el).height :
@@ -744,6 +756,12 @@ export default{
         id: (this.items ?? [])[this.visibleStartIndex]?.id,
         index: this.visibleStartIndex
       }
+    },
+
+    state(to){
+      if(to === 1){
+        this.$nextTick(() => this.resize())
+      }
     }
 
 	}
@@ -755,8 +773,8 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col overflow-hidden bg-base-500;
-	@apply border-[1px] border-text-50 rounded-sm;
+	@apply flex flex-col overflow-hidden bg-base-300;
+	@apply border-[1px] border-text-50 rounded-lg;
 }
 
 .comp>*:last-child{
@@ -799,25 +817,21 @@ export default{
 .table th{
 	@apply relative text-left;
 }
-.table th:nth-child(odd){
-}
 
 .table tbody td{
 	@apply border-b-[1px] border-text-50;
 }
-.table tbody td:nth-child(odd){
-}
 
-.table tbody tr:hover{
-	@apply bg-primary-50;
+.table tbody tr.trHover{
+  @apply bg-base-500;
 }
 
 .table tbody tr.trSelected{
-	@apply bg-primary-100;
+	@apply bg-primary-50;
 }
 
 .highlight{
-	@apply bg-primary-50 transition-all;
+	@apply bg-text-50 transition-all;
 }
 
 .tdDiv{

package/src/themes/default/index.js

@@ -17,14 +17,14 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       "--h-cp-lg": '3.6rem',
 
       '--base-50': '235, 237, 240',
-      '--base-300': '235, 237, 240',
-      '--base-400': '245, 247, 250',
-      '--base-500': '255, 255, 255',
+      '--base-300': '255, 255, 255',
+      '--base-400': '248, 247, 248',
+      '--base-500': '248, 247, 248',
       '--base': '255, 255, 255',
 
-      "--text-50": '224, 224, 224',
-      "--text-100": '218, 218, 218',
-      "--text-200": '197, 197, 197',
+      "--text-50": '238, 238, 238',
+      "--text-100": '223, 223, 223',
+      "--text-200": '217, 217, 217',
       "--text-300": '176, 176, 176',
       "--text-400": '116, 116, 116',
       "--text-500": '86, 86, 86',
@@ -69,14 +69,14 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
     'html[data-theme="dark"], .html[data-theme="dark"]': {
 
       "--base-50": '22, 26, 33',
-      "--base-300": '0, 0, 0',
-      "--base-400": '17, 21, 28',
-      "--base-500": '22, 26, 33',
+      "--base-300": '17, 21, 28',
+      "--base-400": '0, 0, 0',
+      "--base-500": '0, 0, 0',
       "--base": '22, 26, 33',
 
       "--text-50": '33, 39, 46',
       "--text-100": '48, 54, 61',
-      "--text-200": '63, 69, 76',
+      "--text-200": '58, 64, 71',
       "--text-300": '87, 87, 87',
       "--text-400": '191, 193, 197',
       "--text-500": '191, 193, 197',
@@ -109,7 +109,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
       'text-rendering': 'optimizeLegibility',
       'fontSize': '15px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgb(var(--base-300))'
+      'backgroundColor': 'rgb(var(--base-500))',
     },
 
     '@media screen and (orientation: portrait)': {

package/src/utils/wss.mjs

@@ -165,7 +165,7 @@ class WSS extends EventEmitter2{
         default:
           this.emit('disconnect', null, [])
 
-          const retryAfter = (num => num > 60000 ? 60000 : num)(import.meta.env.DEV ? 1000 : Math.pow(1.5, ++this._retryCount) * 1000)
+          const retryAfter = (num => num > 60000 ? 60000 : num)(import.meta.env.DEV ? 1000 : Math.pow(1.2, ++this._retryCount) * 1000)
           window.setTimeout(() => this.connect(true), retryAfter)
           break
       }

package/src/widgets/PresetBar.vue

@@ -19,7 +19,7 @@
           </div>
 
           <ListItem :items="config.presets"
-                    class="mt-1 rounded-lg overflow-hidden"
+                    class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
                     container-class="divide-y divide-text-50"
                     @reorder="(from, to) => { config.presets.splice(to, 0, config.presets.splice(from, 1)[0]); apply() }">
             <template v-slot="{ item }">
@@ -267,7 +267,7 @@
             <ListItem v-if="Array.isArray(preset.sorts) && preset.sorts.length > 0"
                       :items="preset.sorts"
                       @reorder="(from, to) => { preset.sorts.splice(to, 0, preset.sorts.splice(from, 1)[0]); apply() }"
-                      container-class="flex flex-col rounded-lg border-[1px] border-text-50 bg-base-300 divide-y divide-text-50">
+                      container-class="flex flex-col rounded-lg">
               <template v-slot="{ item, index }">
                 <div class="flex flex-row items-center gap-3 p-1">
                   <div data-reorder>

package/src/widgets/PresetBarPivot.vue

@@ -19,7 +19,7 @@
         </div>
         <ListItem :items="pivot.rows"
                   @reorder="(from, to) => { pivot.rows.splice(to, 0, pivot.rows.splice(from, 1)[0]); apply() }"
-                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-300 rounded-lg p-0.5"
                   container-class="divide-y divide-text-50">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
@@ -58,7 +58,7 @@
         </div>
         <ListItem :items="pivot.values"
                   @reorder="(from, to) => { pivot.values.splice(to, 0, pivot.values.splice(from, 1)[0]); }"
-                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-300 rounded-lg p-0.5"
                   container-class="divide-y divide-text-50">
           <template v-slot="{ item, index }">
             <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
@@ -102,7 +102,7 @@
         </div>
         <ListItem :items="pivot.columns"
                   @reorder="(from, to) => { pivot.columns.splice(to, 0, pivot.columns.splice(from, 1)[0]); pivot.manualColumns = true; apply() }"
-                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
+                  class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-300 rounded-lg p-0.5"
                   container-class="divide-y divide-text-50">
           <template v-slot="{ item, index }">
             <div class="flex flex-row gap-2 items-center px-2 bg-base-500">

package/src/widgets/WebPageBuilder.vue

@@ -6,7 +6,7 @@
 
     <div class="flex-1 flex flex-col bg-base-400">
 
-      <div class="p-3 pr-5 sticky top-0 flex justify-center gap-4 bg-base-400 dark:bg-base-300 border-b-[1px] border-text-50">
+      <div class="p-3 pr-5 sticky top-0 flex justify-center gap-4 bg-base-400 border-b-[1px] border-text-50">
         <div class="flex-1 flex flex-row gap-4 items-center">
 
           <button ref="close" class=" p-1"
@@ -81,7 +81,7 @@
 
       <div class="flex-1 flex flex-row">
 
-        <div class="flex flex-row bg-base-400 dark:bg-base-300 border-r-[1px] border-text-50"
+        <div class="flex flex-row bg-base-400 border-r-[1px] border-text-50"
              :style="section1Style">
 
           <div class="flex-1 flex flex-col overflow-y-auto">
@@ -490,7 +490,7 @@
           </div>
         </div>
 
-        <div v-if="currentItem" class="flex flex-col bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
+        <div v-if="currentItem" class="flex flex-col bg-base-400 border-l-[1px] border-text-50"
              @click="currentArea = 'properties'"
              :style="section3Style">