@limpiolux/ui-styles 1.0.6 → 1.0.8

package/components.css

@@ -95,7 +95,11 @@
     overflow: hidden;
   }
 
-  .glass-panel {
+  .glass-panel,
+  .auth-hero-panel,
+  .portal-panel,
+  .portal-header-panel,
+  .portal-card {
     @apply rounded-[28px] border border-white/10 bg-white/[0.045] shadow-2xl shadow-black/30 backdrop-blur-xl;
     transition:
       background-color 420ms ease,
@@ -112,8 +116,28 @@
     @apply inline-flex h-14 items-center justify-center rounded-[20px] border border-white/10 bg-white/5 px-4;
   }
 
+  .portal-shell {
+    @apply min-h-screen px-4 py-6 md:px-8 md:py-8;
+    background-image:
+      radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 28%),
+      radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 24%),
+      linear-gradient(180deg, rgba(9, 9, 11, 0.95), rgba(9, 9, 11, 1));
+    transition:
+      background-color 420ms ease,
+      color 420ms ease,
+      background-image 420ms ease;
+  }
+
+  .portal-grid {
+    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-3;
+  }
+
+  .portal-app-card {
+    @apply portal-card;
+  }
+
   .auth-hero-panel {
-    @apply glass-panel relative overflow-hidden p-8 md:p-10;
+    @apply relative overflow-hidden p-8 md:p-10;
   }
 
   .auth-hero-backdrop {
@@ -439,11 +463,11 @@
   /* ── Portal surfaces ── */
 
   .portal-panel {
-    @apply glass-panel p-5;
+    @apply p-5;
   }
 
   .portal-header-panel {
-    @apply glass-panel flex flex-col gap-4 p-6 md:flex-row md:items-end md:justify-between;
+    @apply flex flex-col gap-4 p-6 md:flex-row md:items-end md:justify-between;
   }
 
   .portal-stat-card {
@@ -453,7 +477,7 @@
   }
 
   .portal-card {
-    @apply glass-panel relative overflow-hidden p-5 transition duration-300;
+    @apply relative overflow-hidden p-5 transition duration-300;
   }
 
   .portal-card:hover {
@@ -523,6 +547,96 @@
     color: #e0f2fe;
   }
 
+  .portal-title {
+    color: #f4f4f5;
+  }
+
+  .portal-body {
+    color: #a1a1aa;
+  }
+
+  .portal-code {
+    color: #d4d4d8;
+  }
+
+  .portal-muted {
+    color: #71717a;
+  }
+
+  .portal-directory-title {
+    color: #f0f9ff;
+  }
+
+  .portal-directory-text {
+    color: rgba(224, 242, 254, 0.8);
+  }
+
+  .portal-directory-search-icon {
+    color: rgba(224, 242, 254, 0.6);
+  }
+
+  .portal-directory-empty {
+    color: rgba(224, 242, 254, 0.7);
+  }
+
+  .portal-directory-name {
+    color: #f0f9ff;
+  }
+
+  .portal-directory-meta {
+    color: rgba(224, 242, 254, 0.8);
+  }
+
+  .portal-directory-fine {
+    color: rgba(224, 242, 254, 0.6);
+  }
+
+  .portal-directory-in-portal-badge {
+    @apply rounded-full border px-2.5 py-1 text-[11px] uppercase tracking-[0.18em];
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.1);
+    color: #e0f2fe;
+  }
+
+  .portal-warning-text {
+    color: rgba(254, 243, 199, 0.8);
+  }
+
+  .portal-success-badge {
+    border-color: rgba(110, 231, 183, 0.2);
+    background: rgba(110, 231, 183, 0.1);
+    color: #d1fae5;
+  }
+
+  .portal-inactive-badge {
+    border-color: rgba(252, 211, 77, 0.2);
+    background: rgba(252, 211, 77, 0.1);
+    color: #fef3c7;
+  }
+
+  .portal-it-badge {
+    @apply rounded-full border px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.18em];
+    border-color: rgba(251, 191, 36, 0.2);
+    background: rgba(251, 191, 36, 0.1);
+    color: #fde68a;
+  }
+
+  .portal-system-badge {
+    border-color: rgba(56, 189, 248, 0.2);
+    background: rgba(56, 189, 248, 0.1);
+    color: #bae6fd;
+  }
+
+  .portal-custom-badge {
+    border-color: rgba(52, 211, 153, 0.2);
+    background: rgba(52, 211, 153, 0.1);
+    color: #a7f3d0;
+  }
+
+  .portal-custom-label {
+    color: #6ee7b7;
+  }
+
   /* ── Glass toolbar ── */
 
   .glass-toolbar {

package/light.css

@@ -35,6 +35,13 @@
   box-shadow: 0 20px 36px -30px rgba(15, 23, 42, 0.18);
 }
 
+.light .portal-shell {
+  background-image:
+    radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 28%),
+    radial-gradient(circle at top right, rgba(16, 185, 129, 0.12), transparent 24%),
+    linear-gradient(180deg, rgba(250, 250, 250, 0.96), rgba(244, 244, 245, 1));
+}
+
 .light .auth-hero-backdrop {
   background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 36%);
 }
@@ -403,6 +410,82 @@
   color: #0369a1;
 }
 
+.light .portal-title {
+  color: #18181b;
+}
+
+.light .portal-body {
+  color: #52525b;
+}
+
+.light .portal-code,
+.light .portal-muted {
+  color: #3f3f46;
+}
+
+.light .portal-directory-title,
+.light .portal-directory-name {
+  color: #0c4a6e;
+}
+
+.light .portal-directory-text,
+.light .portal-directory-meta {
+  color: rgba(8, 47, 73, 0.8);
+}
+
+.light .portal-directory-search-icon {
+  color: #0ea5e9;
+}
+
+.light .portal-directory-empty,
+.light .portal-directory-fine {
+  color: rgba(8, 47, 73, 0.7);
+}
+
+.light .portal-directory-in-portal-badge {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: #f4f4f5;
+  color: #0369a1;
+}
+
+.light .portal-warning-text {
+  color: rgba(180, 83, 9, 0.9);
+}
+
+.light .portal-success-badge {
+  border-color: rgba(110, 231, 183, 0.9);
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.light .portal-inactive-badge {
+  border-color: rgba(252, 211, 77, 0.88);
+  background: #fffbeb;
+  color: #b45309;
+}
+
+.light .portal-it-badge {
+  border-color: rgba(252, 211, 77, 0.88);
+  background: #fffbeb;
+  color: #b45309;
+}
+
+.light .portal-system-badge {
+  border-color: rgba(125, 211, 252, 0.88);
+  background: #f0f9ff;
+  color: #0369a1;
+}
+
+.light .portal-custom-badge {
+  border-color: rgba(110, 231, 183, 0.88);
+  background: #ecfdf5;
+  color: #047857;
+}
+
+.light .portal-custom-label {
+  color: #047857;
+}
+
 /* ── Glass / KPI ── */
 
 .light .glass-toolbar {

package/package.json

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