@limpiolux/ui-styles 1.0.15 → 1.0.17

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;
   }
 
@@ -261,13 +261,96 @@
   }
 
   .portal-home-grid {
-    @apply mt-10 grid gap-5 lg:grid-cols-3;
+    @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-side-card {
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl;
+  }
+
+  .portal-side-hero {
+    @apply rounded-[24px] border p-4;
+    border-color: rgba(var(--color-brand) / 0.18);
+    background:
+      radial-gradient(circle at top right, rgba(var(--color-brand) / 0.18), transparent 42%),
+      rgba(255, 255, 255, 0.04);
+  }
+
+  .portal-side-list {
+    @apply mt-4 space-y-3;
+  }
+
+  .portal-side-item {
+    @apply flex items-start gap-3 rounded-2xl border p-4 transition duration-200;
+    border-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .portal-side-item:hover {
+    border-color: rgba(var(--color-brand) / 0.18);
+    background: rgba(255, 255, 255, 0.05);
+    transform: translateY(-1px);
+  }
+
+  .portal-side-icon {
+    @apply inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl border;
+    border-color: rgba(var(--color-brand) / 0.18);
+    background: rgba(var(--color-brand) / 0.08);
+    color: rgb(var(--color-brand-soft));
+  }
+
+  .portal-side-item-title {
+    @apply text-sm font-medium;
+    color: #f4f4f5;
+  }
+
+  .portal-side-item-copy {
+    @apply mt-1 text-sm leading-6;
+    color: #a1a1aa;
+  }
+
+  .portal-side-chip-row {
+    @apply mt-4 flex flex-wrap gap-2;
+  }
+
+  .portal-side-chip {
+    @apply rounded-full border px-3 py-1 text-[11px] font-medium uppercase tracking-[0.16em];
+    border-color: rgba(var(--color-brand) / 0.16);
+    background: rgba(var(--color-brand) / 0.08);
+    color: rgb(var(--color-brand-soft));
+  }
+
+  .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;
   }
@@ -532,7 +615,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 py-2 text-sm md:px-3.5;
     background: transparent;
     border-color: transparent;
     color: #a1a1aa;
@@ -553,7 +636,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)),
@@ -567,6 +650,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 {
@@ -676,25 +764,30 @@
   }
 
   .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 w-full items-center gap-2 overflow-x-auto pb-1 md:w-auto md:justify-end md:overflow-visible md:pb-0;
+    scrollbar-width: none;
+  }
+
+  .portal-toolbar::-webkit-scrollbar {
+    display: none;
   }
 
   .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

@@ -514,6 +514,53 @@
   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-side-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.light .portal-side-hero {
+  border-color: rgba(186, 230, 253, 0.92);
+  background:
+    radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 42%),
+    rgba(255, 255, 255, 0.92);
+}
+
+.light .portal-side-item {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.light .portal-side-item:hover {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: #ffffff;
+}
+
+.light .portal-side-icon {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: rgba(240, 249, 255, 0.92);
+  color: rgb(var(--color-brand-strong));
+}
+
+.light .portal-side-item-title {
+  color: #18181b;
+}
+
+.light .portal-side-item-copy {
+  color: #52525b;
+}
+
+.light .portal-side-chip {
+  border-color: rgba(186, 230, 253, 0.88);
+  background: #f0f9ff;
+  color: rgb(var(--color-brand-strong));
+}
+
 .light .portal-home-icon {
   border-color: rgba(186, 230, 253, 0.92);
   background: rgba(240, 249, 255, 0.92);
@@ -524,6 +571,18 @@
   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;

package/package.json

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