@limpiolux/ui-styles 1.0.4 → 1.0.6

package/components.css

@@ -365,6 +365,25 @@
     box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.24);
   }
 
+  .sidebar-action {
+    @apply flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors;
+    color: #a1a1aa;
+  }
+
+  .sidebar-action:hover {
+    color: #e4e4e7;
+    background: rgba(39, 39, 42, 0.72);
+  }
+
+  .sidebar-action-danger {
+    color: rgba(239, 68, 68, 0.8);
+  }
+
+  .sidebar-action-danger:hover {
+    color: rgba(248, 113, 113, 1);
+    background: rgba(39, 39, 42, 0.72);
+  }
+
   /* ── Brand surfaces ── */
 
   .brand-panel {
@@ -417,6 +436,93 @@
     background: rgb(var(--color-brand-strong));
   }
 
+  /* ── Portal surfaces ── */
+
+  .portal-panel {
+    @apply glass-panel p-5;
+  }
+
+  .portal-header-panel {
+    @apply glass-panel flex flex-col gap-4 p-6 md:flex-row md:items-end md:justify-between;
+  }
+
+  .portal-stat-card {
+    @apply rounded-2xl border px-4 py-3 text-right;
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .portal-card {
+    @apply glass-panel relative overflow-hidden p-5 transition duration-300;
+  }
+
+  .portal-card:hover {
+    transform: translateY(-4px);
+    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.07);
+  }
+
+  .portal-card-inset {
+    @apply rounded-2xl border p-4;
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .portal-card-icon {
+    @apply inline-flex h-12 w-12 items-center justify-center rounded-2xl border;
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.05);
+    color: #f4f4f5;
+  }
+
+  .portal-role-badge {
+    @apply rounded-full border px-3 py-1 text-xs font-medium uppercase tracking-[0.18em];
+    border-color: rgba(56, 189, 248, 0.2);
+    background: rgba(56, 189, 248, 0.1);
+    color: #bae6fd;
+  }
+
+  .portal-permission-chip {
+    @apply rounded-full border px-2.5 py-1 text-[11px];
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.04);
+    color: #a1a1aa;
+  }
+
+  .portal-selection-card {
+    @apply rounded-2xl border p-4 text-left transition;
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.03);
+  }
+
+  .portal-selection-card:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
+
+  .portal-selection-card-active {
+    border-color: rgba(56, 189, 248, 0.3);
+    background: rgba(56, 189, 248, 0.1);
+  }
+
+  .portal-directory-panel {
+    @apply mt-6 rounded-[24px] border p-5;
+    border-color: rgba(56, 189, 248, 0.2);
+    background: rgba(56, 189, 248, 0.1);
+  }
+
+  .portal-directory-result {
+    @apply rounded-2xl border p-4;
+    border-color: rgba(125, 211, 252, 0.15);
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  .portal-directory-tag {
+    @apply rounded-full border px-2.5 py-1 text-[11px] uppercase tracking-[0.18em];
+    border-color: rgba(125, 211, 252, 0.2);
+    background: rgba(125, 211, 252, 0.1);
+    color: #e0f2fe;
+  }
+
   /* ── Glass toolbar ── */
 
   .glass-toolbar {

package/light.css

@@ -281,6 +281,24 @@
   box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.2);
 }
 
+.light .sidebar-action {
+  color: #52525b;
+}
+
+.light .sidebar-action:hover {
+  color: #18181b;
+  background: #f4f4f5;
+}
+
+.light .sidebar-action-danger {
+  color: #b91c1c;
+}
+
+.light .sidebar-action-danger:hover {
+  color: #991b1b;
+  background: #fef2f2;
+}
+
 /* ── Brand surfaces ── */
 
 .light .brand-panel {
@@ -322,6 +340,69 @@
   color: rgb(var(--color-brand-strong));
 }
 
+.light .portal-stat-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.light .portal-card:hover {
+  border-color: rgba(161, 161, 170, 0.42);
+  background: rgba(255, 255, 255, 0.88);
+}
+
+.light .portal-card-inset {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.light .portal-card-icon {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.92);
+  color: #27272a;
+}
+
+.light .portal-role-badge {
+  border-color: rgba(125, 211, 252, 0.4);
+  background: #f0f9ff;
+  color: #0369a1;
+}
+
+.light .portal-permission-chip {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: #f4f4f5;
+  color: #52525b;
+}
+
+.light .portal-selection-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+}
+
+.light .portal-selection-card:hover {
+  background: #fafafa;
+}
+
+.light .portal-selection-card-active {
+  border-color: rgba(125, 211, 252, 0.72);
+  background: #f0f9ff;
+}
+
+.light .portal-directory-panel {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: #f0f9ff;
+}
+
+.light .portal-directory-result {
+  border-color: rgba(186, 230, 253, 0.88);
+  background: rgba(255, 255, 255, 0.92);
+}
+
+.light .portal-directory-tag {
+  border-color: rgba(186, 230, 253, 0.88);
+  background: #ffffff;
+  color: #0369a1;
+}
+
 /* ── Glass / KPI ── */
 
 .light .glass-toolbar {

package/package.json

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