@limpiolux/ui-styles 1.0.16 → 1.0.18

package/components.css

@@ -280,6 +280,62 @@
     @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;
@@ -559,7 +615,7 @@
   /* ── Soft tabs ── */
 
   .soft-tab {
-    @apply relative inline-flex shrink-0 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;
@@ -609,7 +665,38 @@
   }
 
   .soft-tab-label {
-    @apply relative z-10 font-medium tracking-tight;
+    @apply relative z-10 inline-flex items-center gap-2 font-medium tracking-tight;
+  }
+
+  .soft-tab-icon {
+    @apply inline-flex shrink-0;
+  }
+
+  .soft-tab-text {
+    display: inline-block;
+    max-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    opacity: 0;
+    transform: translateX(-2px);
+    transition:
+      max-width 220ms ease,
+      opacity 180ms ease,
+      transform 220ms ease;
+  }
+
+  .soft-tab-active .soft-tab-text {
+    max-width: 8rem;
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  @media (min-width: 768px) {
+    .soft-tab-text {
+      max-width: 8rem;
+      opacity: 1;
+      transform: translateX(0);
+    }
   }
 
   /* ── Navigation ── */
@@ -718,7 +805,12 @@
   }
 
   .portal-toolbar {
-    @apply flex flex-wrap items-center gap-2 md:justify-end;
+    @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 {

package/light.css

@@ -519,6 +519,48 @@
   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);

package/package.json

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