@limpiolux/ui-styles 1.0.20 → 1.0.22

package/components.css

@@ -43,7 +43,7 @@
   }
 
   .theme-icon-button {
-    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
+    @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-200;
     transition:
       transform 220ms ease,
       background-color 220ms ease,
@@ -100,7 +100,8 @@
   .portal-panel,
   .portal-header-panel,
   .portal-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] shadow-2xl shadow-black/30 backdrop-blur-xl;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] backdrop-blur-xl;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
     transition:
       background-color 420ms ease,
       border-color 420ms ease,
@@ -133,15 +134,17 @@
   }
 
   .portal-app-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] shadow-2xl shadow-black/30 backdrop-blur-xl relative overflow-hidden p-5 transition duration-300;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] backdrop-blur-xl relative overflow-hidden p-5 transition duration-300;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-widget-grid {
-    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
+    @apply grid gap-4 md:grid-cols-2 lg:grid-cols-4;
   }
 
   .portal-widget-card {
-    @apply rounded-[24px] border border-white/10 bg-white/[0.045] p-4 shadow-2xl shadow-black/30 backdrop-blur-xl transition duration-300;
+    @apply rounded-[24px] border border-white/10 bg-white/[0.045] p-4 backdrop-blur-xl transition duration-300;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-widget-card:hover {
@@ -251,15 +254,17 @@
   }
 
   .portal-home-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 backdrop-blur-xl;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-dashboard-grid {
-    @apply mt-5 grid gap-5 md:mt-8 md:gap-6 xl:grid-cols-[1.45fr_0.95fr];
+    @apply mt-5 grid gap-5 md:mt-8 md:gap-6 lg:grid-cols-[1.4fr_1fr];
   }
 
   .portal-dashboard-main {
-    @apply rounded-[30px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl md:p-6;
+    @apply rounded-[30px] border border-white/10 bg-white/[0.045] p-5 backdrop-blur-xl md:p-6;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-dashboard-side {
@@ -267,7 +272,8 @@
   }
 
   .portal-side-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 backdrop-blur-xl;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-side-hero {
@@ -436,7 +442,8 @@
   }
 
   .auth-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-6 shadow-2xl shadow-black/30 backdrop-blur-xl md:p-8;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-6 backdrop-blur-xl md:p-8;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
     transition:
       background-color 420ms ease,
       border-color 420ms ease,
@@ -813,11 +820,11 @@
   }
 
   .portal-toolbar-button {
-    @apply h-11 min-w-11 rounded-2xl px-0;
+    @apply h-9 min-w-9 rounded-xl px-0;
   }
 
   .portal-toolbar-icon {
-    @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
+    @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-200;
     transition:
       transform 220ms ease,
       background-color 220ms ease,

package/light.css

@@ -383,6 +383,7 @@
 .light .portal-widget-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-widget-card:hover {
@@ -514,16 +515,19 @@
 .light .portal-home-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-dashboard-main {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-side-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-side-hero {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limpiolux/ui-styles",
-  "version": "1.0.20",
+  "version": "1.0.22",
   "description": "Shared design system — Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {