@limpiolux/ui-styles 1.0.14 → 1.0.16

package/components.css

@@ -182,7 +182,7 @@
   }
 
   .portal-launchpad-grid {
-    @apply grid gap-x-6 gap-y-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
+    @apply grid grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4;
   }
 
   .portal-launchpad-card {
@@ -198,7 +198,7 @@
   }
 
   .portal-launchpad-icon {
-    @apply inline-flex h-24 w-24 items-center justify-center rounded-[30px] border;
+    @apply inline-flex h-20 w-20 items-center justify-center rounded-[28px] border sm:h-24 sm:w-24;
     border-color: rgba(255, 255, 255, 0.14);
     background:
       radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 54%),
@@ -229,7 +229,7 @@
   }
 
   .portal-launchpad-title {
-    @apply mt-3 text-base font-semibold tracking-tight;
+    @apply mt-3 text-sm font-semibold tracking-tight sm:text-base;
     color: #f4f4f5;
   }
 
@@ -260,6 +260,98 @@
     transform: translateY(0);
   }
 
+  .portal-home-grid {
+    @apply 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-dashboard-grid {
+    @apply mt-8 grid gap-6 xl:grid-cols-[1.45fr_0.95fr];
+  }
+
+  .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;
+  }
+
+  .portal-dashboard-side {
+    @apply grid gap-5;
+  }
+
+  .portal-section-kicker {
+    @apply text-[11px] font-medium uppercase tracking-[0.22em];
+    color: #71717a;
+  }
+
+  .portal-section-title {
+    @apply mt-2 text-2xl font-semibold tracking-tight;
+    color: #f4f4f5;
+  }
+
+  .portal-section-copy {
+    @apply mt-2 text-sm leading-6;
+    color: #a1a1aa;
+  }
+
+  .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;
   }
@@ -467,7 +559,7 @@
   /* ── Soft tabs ── */
 
   .soft-tab {
-    @apply relative inline-flex items-center justify-center rounded-xl px-3.5 py-2 text-sm;
+    @apply relative inline-flex shrink-0 items-center justify-center rounded-xl px-3.5 py-2 text-sm;
     background: transparent;
     border-color: transparent;
     color: #a1a1aa;
@@ -488,7 +580,7 @@
   }
 
   .soft-tab-track {
-    @apply relative inline-flex items-center gap-1 overflow-hidden rounded-2xl p-1;
+    @apply relative flex w-full items-center gap-1 overflow-x-auto rounded-2xl p-1 md:inline-flex md:w-auto;
     border: 1px solid rgba(63, 63, 70, 0.78);
     background:
       linear-gradient(180deg, rgba(39, 39, 42, 0.28), rgba(24, 24, 27, 0.32)),
@@ -502,6 +594,11 @@
       0 18px 34px -28px rgba(0, 0, 0, 0.34);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
+    scrollbar-width: none;
+  }
+
+  .soft-tab-track::-webkit-scrollbar {
+    display: none;
   }
 
   .soft-tab-slider {
@@ -611,25 +708,25 @@
   }
 
   .portal-header-panel {
-    @apply flex flex-col gap-4 p-6 md:flex-row md:items-end md:justify-between;
+    @apply flex flex-col gap-4 p-5 md:flex-row md:items-end md:justify-between md:p-6;
   }
 
   .portal-stat-card {
-    @apply flex h-12 items-center rounded-2xl border px-3.5;
+    @apply flex h-11 items-center rounded-2xl border px-3;
     border-color: rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.05);
   }
 
   .portal-toolbar {
-    @apply flex flex-wrap items-center justify-end gap-3;
+    @apply flex flex-wrap items-center gap-2 md:justify-end;
   }
 
   .portal-toolbar-button {
-    @apply h-12 min-w-12 rounded-2xl px-0;
+    @apply h-11 min-w-11 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;
+    @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-white/10 bg-white/5 text-zinc-200;
     transition:
       transform 220ms ease,
       background-color 220ms ease,

package/light.css

@@ -509,6 +509,62 @@
   color: #0369a1;
 }
 
+.light .portal-home-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.light .portal-dashboard-main {
+  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-section-kicker {
+  color: #52525b;
+}
+
+.light .portal-section-title {
+  color: #18181b;
+}
+
+.light .portal-section-copy {
+  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.14",
+  "version": "1.0.16",
   "description": "Shared design system — Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {