@limpiolux/ui-styles 1.0.13 → 1.0.15

package/components.css

@@ -43,7 +43,7 @@
   }
 
   .theme-icon-button {
-    @apply inline-flex h-14 w-14 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
+    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
     transition:
       transform 220ms ease,
       background-color 220ms ease,
@@ -182,18 +182,15 @@
   }
 
   .portal-launchpad-grid {
-    @apply grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
+    @apply grid gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
   }
 
   .portal-launchpad-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.04] p-5 text-center shadow-2xl shadow-black/30 backdrop-blur-xl transition duration-300;
+    @apply flex flex-col items-center rounded-[28px] bg-transparent p-2 text-center transition duration-300;
   }
 
   .portal-launchpad-card:hover {
-    transform: translateY(-5px);
-    border-color: rgba(var(--color-brand) / 0.3);
-    background: rgba(255, 255, 255, 0.075);
-    box-shadow: 0 24px 50px -28px rgba(0, 117, 169, 0.42);
+    transform: translateY(-4px) scale(1.01);
   }
 
   .portal-launchpad-icon-wrap {
@@ -201,19 +198,38 @@
   }
 
   .portal-launchpad-icon {
-    @apply inline-flex h-24 w-24 items-center justify-center rounded-[28px] border;
-    border-color: rgba(var(--color-brand) / 0.2);
+    @apply inline-flex h-24 w-24 items-center justify-center rounded-[30px] border;
+    border-color: rgba(255, 255, 255, 0.14);
     background:
-      radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 56%),
-      linear-gradient(180deg, rgba(var(--color-brand) / 0.22), rgba(var(--color-brand) / 0.1));
+      radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 54%),
+      radial-gradient(circle at bottom right, rgba(var(--color-brand) / 0.18), transparent 52%),
+      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
     color: #f8fdff;
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.18),
-      0 20px 32px -24px rgba(0, 117, 169, 0.68);
+      inset 0 1px 0 rgba(255, 255, 255, 0.28),
+      inset 0 -16px 24px -20px rgba(0, 0, 0, 0.24),
+      0 24px 42px -28px rgba(0, 117, 169, 0.46);
+    backdrop-filter: blur(18px);
+    -webkit-backdrop-filter: blur(18px);
+    transition:
+      transform 220ms ease,
+      border-color 220ms ease,
+      box-shadow 220ms ease,
+      background 220ms ease;
+  }
+
+  .portal-launchpad-card:hover .portal-launchpad-icon,
+  .portal-launchpad-card:focus-visible .portal-launchpad-icon {
+    transform: translateY(-2px);
+    border-color: rgba(var(--color-brand) / 0.28);
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.32),
+      inset 0 -16px 24px -20px rgba(0, 0, 0, 0.18),
+      0 28px 52px -30px rgba(0, 117, 169, 0.58);
   }
 
   .portal-launchpad-title {
-    @apply mt-4 text-base font-semibold tracking-tight;
+    @apply mt-3 text-base font-semibold tracking-tight;
     color: #f4f4f5;
   }
 
@@ -244,6 +260,71 @@
     transform: translateY(0);
   }
 
+  .portal-home-grid {
+    @apply mt-10 grid gap-5 lg:grid-cols-3;
+  }
+
+  .portal-home-card {
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl;
+  }
+
+  .portal-home-header {
+    @apply flex items-start gap-4;
+  }
+
+  .portal-home-icon {
+    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border;
+    border-color: rgba(var(--color-brand) / 0.2);
+    background: rgba(var(--color-brand) / 0.1);
+    color: rgb(var(--color-brand-soft));
+  }
+
+  .portal-home-kicker {
+    @apply text-[11px] font-medium uppercase tracking-[0.18em];
+    color: #71717a;
+  }
+
+  .portal-home-title {
+    @apply mt-2 text-lg font-semibold tracking-tight;
+    color: #f4f4f5;
+  }
+
+  .portal-home-copy {
+    @apply mt-2 text-sm leading-6;
+    color: #a1a1aa;
+  }
+
+  .portal-home-list {
+    @apply mt-5 space-y-3;
+  }
+
+  .portal-home-item {
+    @apply rounded-2xl border p-4 transition duration-200;
+    border-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .portal-home-item:hover {
+    border-color: rgba(var(--color-brand) / 0.18);
+    background: rgba(255, 255, 255, 0.05);
+    transform: translateY(-1px);
+  }
+
+  .portal-home-item-title {
+    @apply text-sm font-medium;
+    color: #f4f4f5;
+  }
+
+  .portal-home-item-copy {
+    @apply mt-1 text-sm leading-6;
+    color: #a1a1aa;
+  }
+
+  .portal-home-item-meta {
+    @apply mt-3 inline-flex items-center gap-2 text-xs font-medium uppercase tracking-[0.16em];
+    color: rgb(var(--color-brand-soft));
+  }
+
   .auth-hero-panel {
     @apply relative overflow-hidden p-8 md:p-10;
   }
@@ -599,7 +680,7 @@
   }
 
   .portal-stat-card {
-    @apply flex h-14 items-center rounded-2xl border px-4;
+    @apply flex h-12 items-center rounded-2xl border px-3.5;
     border-color: rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.05);
   }
@@ -609,7 +690,23 @@
   }
 
   .portal-toolbar-button {
-    @apply h-14 rounded-2xl px-5;
+    @apply h-12 min-w-12 rounded-2xl px-0;
+  }
+
+  .portal-toolbar-icon {
+    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
+    transition:
+      transform 220ms ease,
+      background-color 220ms ease,
+      border-color 220ms ease,
+      color 220ms ease,
+      box-shadow 220ms ease;
+  }
+
+  .portal-toolbar-icon:hover {
+    transform: translateY(-1px);
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.14);
   }
 
   .portal-card {

package/light.css

@@ -363,6 +363,18 @@
   background: rgba(255, 255, 255, 0.82);
 }
 
+.light .portal-toolbar-icon {
+  background: rgba(255, 255, 255, 0.82);
+  border-color: rgba(212, 212, 216, 0.92);
+  color: #3f3f46;
+  box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.18);
+}
+
+.light .portal-toolbar-icon:hover {
+  background: #ffffff;
+  border-color: rgba(161, 161, 170, 0.36);
+}
+
 .light .portal-widget-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
@@ -454,27 +466,35 @@
 }
 
 .light .portal-launchpad-card {
-  border-color: rgba(212, 212, 216, 0.92);
-  background: rgba(255, 255, 255, 0.84);
+  background: transparent;
 }
 
 .light .portal-launchpad-card:hover {
-  border-color: rgba(186, 230, 253, 0.92);
-  background: rgba(255, 255, 255, 0.96);
-  box-shadow: 0 26px 48px -34px rgba(0, 117, 169, 0.28);
+  background: transparent;
 }
 
 .light .portal-launchpad-icon {
   border-color: rgba(186, 230, 253, 0.92);
   background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), transparent 52%),
-    linear-gradient(180deg, rgba(224, 242, 254, 0.98), rgba(186, 230, 253, 0.86));
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.98), transparent 50%),
+    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.14), transparent 54%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(224, 242, 254, 0.82));
   color: rgb(var(--color-brand-strong));
   box-shadow:
     inset 0 1px 0 rgba(255, 255, 255, 0.92),
+    inset 0 -16px 24px -22px rgba(8, 47, 73, 0.08),
     0 20px 36px -28px rgba(14, 116, 144, 0.32);
 }
 
+.light .portal-launchpad-card:hover .portal-launchpad-icon,
+.light .portal-launchpad-card:focus-visible .portal-launchpad-icon {
+  border-color: rgba(125, 211, 252, 0.98);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.96),
+    inset 0 -16px 24px -22px rgba(8, 47, 73, 0.06),
+    0 24px 42px -28px rgba(14, 116, 144, 0.38);
+}
+
 .light .portal-launchpad-title {
   color: #18181b;
 }
@@ -489,6 +509,45 @@
   color: #0369a1;
 }
 
+.light .portal-home-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.light .portal-home-icon {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: rgba(240, 249, 255, 0.92);
+  color: rgb(var(--color-brand-strong));
+}
+
+.light .portal-home-kicker {
+  color: #52525b;
+}
+
+.light .portal-home-title,
+.light .portal-home-item-title {
+  color: #18181b;
+}
+
+.light .portal-home-copy,
+.light .portal-home-item-copy {
+  color: #52525b;
+}
+
+.light .portal-home-item {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.light .portal-home-item:hover {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: #ffffff;
+}
+
+.light .portal-home-item-meta {
+  color: rgb(var(--color-brand-strong));
+}
+
 .light .portal-title {
   color: #18181b;
 }

package/package.json

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