@mixd-id/web-scaffold 0.1.230406254 → 0.1.230406255

package/package.json

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

package/src/components/Alert.vue

@@ -190,9 +190,12 @@ export default{
 
 .alert{
 	@apply fixed top-0 left-0 flex w-screen h-screen;
-	@apply items-center justify-center bg-black/70 backdrop-blur-md;
+	@apply items-center justify-center bg-white/50 backdrop-blur-md;
 	z-index: 60;
 }
+[data-theme="dark"] .alert{
+  @apply bg-black/50;
+}
 
 .alert>*{
 	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;

package/src/components/Confirm.vue

@@ -112,9 +112,12 @@ export default{
 
 .confirm{
 	@apply fixed top-0 left-0 flex w-screen h-screen px-8;
-	@apply items-center justify-center bg-black/70 backdrop-blur-md;
+	@apply items-center justify-center bg-white/50 backdrop-blur-md;
 	z-index: 60;
 }
+[data-theme="dark"] .confirm{
+  @apply bg-black/50;
+}
 
 .confirm>*{
 	@apply max-h-[60vh] overflow-y-auto bg-base-500 rounded-xl;

package/src/components/ContextMenu.vue

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

@@ -4,7 +4,7 @@
          class="flex-1 flex flex-row">
 
       <div v-if="computedPresetMode === 'sidebar' && config.sidebarOpen"
-           class="relative flex flex-col border-r-[1px] border-text-50 backdrop-blur-lg"
+           class="relative flex flex-col border-r-[1px] border-text-50 panel-400"
            :style="sidebarWidth">
 
         <PresetBar :config="config"
@@ -48,7 +48,7 @@
             </div>
 
             <div class="flex flex-row gap-2 gap-1" v-if="Boolean(toolbar)">
-              <Textbox class="flex-1 backdrop-blur-lg md:w-[240px]" placeholder="Search..." clearable="1"
+              <Textbox class="flex-1 md:w-[240px]" placeholder="Search..." clearable="1"
                        v-model="preset.search"
                        @clear="delete preset.search; load()"
                        @keyup.enter="load">
@@ -85,7 +85,7 @@
 
         <VirtualTable v-if="presetView === 'table'"
                       :columns="columns"
-                      class="flex-1 rounded-lg backdrop-blur-lg"
+                      class="flex-1 rounded-lg panel-400"
                       :items="data.items"
                       @scroll-end="loadNext">
 
@@ -110,7 +110,7 @@
                      :config="config">
           <template #item="{ item }">
             <slot name="gridItem" :item="item">
-              <div class="flex flex-row bg-base-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden">
+              <div class="flex flex-row panel-400 rounded-lg overflow-hidden md:rounded-lg overflow-hidden">
                 <div>
                   <Image :src="item.imageUrl" class="bg-text-50 w-[64px] h-[64px] rounded-lg" />
                 </div>

package/src/components/Modal.vue

@@ -288,13 +288,16 @@ export default{
 
 .bW9k{
 	@apply z-20 hidden w-[100vw] h-[100vh];
-	@apply bg-black/50 backdrop-blur-md;
+	@apply bg-white/50 backdrop-blur-md;
   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
 }
+[data-theme="dark"] .bW9k{
+  @apply bg-black/50;
+}
 .bW9l{
 	@apply flex items-center justify-center;
 }
@@ -305,7 +308,7 @@ export default{
 
 .modal{
 	@apply fixed;
-	@apply bg-base-400 dark:bg-base-300;
+	@apply panel-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden transition-all;
 }

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-50;
+  @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 panel-500;
   @apply flex items-center justify-center overflow-hidden;
   transition:  border 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/Textbox.vue

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

package/src/themes/default/index.js

@@ -1,6 +1,6 @@
 const Plugin = require('tailwindcss/plugin')
 
-const plugin = Plugin(function({ addBase, config, theme }) {
+const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
 
   addBase({
 
@@ -16,6 +16,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       "--h-cp": '2.7rem',
       "--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',
@@ -100,7 +101,7 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       'text-rendering': 'optimizeLegibility',
       'fontSize': '15px',
       'touchAction': "pan-x pan-y",
-      'backgroundColor': 'rgba(var(--base-300), 100)'
+      'backgroundColor': 'rgb(var(--base-300))'
     },
 
     '@media screen and (orientation: portrait)': {
@@ -172,6 +173,10 @@ const plugin = Plugin(function({ addBase, config, theme }) {
       transform: 'scale(1)',
     },
 
+  })
+
+  addUtilities({
+
     '.slidedown-enter-active, .slidedown-leave-active': {
       transition: 'all 300ms cubic-bezier(0.25, 1, 0.5, 1)',
       transform: 'translate3d(0, 0, 0)'
@@ -220,7 +225,31 @@ const plugin = Plugin(function({ addBase, config, theme }) {
     '.slideout-enter-from, .slideout-leave-to': {
       opacity: 0,
       transform: 'scale(.9)'
-    }
+    },
+
+    '.panel-50': {
+      '--webkit-backdrop-filter': 'var(--panel-50-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-50-backdrop-filter)',
+      'background-color': 'rgb(var(--base-50))',
+    },
+
+    '.panel-300': {
+      '--webkit-backdrop-filter': 'var(--panel-300-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-300-backdrop-filter)',
+      'background-color': 'rgb(var(--base-300))',
+    },
+
+    '.panel-400': {
+      '--webkit-backdrop-filter': 'var(--panel-400-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-400-backdrop-filter)',
+      'background-color': 'rgb(var(--base-400))',
+    },
+
+    '.panel-500': {
+      '--webkit-backdrop-filter': 'var(--panel-500-backdrop-filter)',
+      'backdrop-filter': 'var(--panel-500-backdrop-filter)',
+      'background-color': 'rgb(var(--base-500))',
+    },
 
   })