@limpiolux/ui-styles 1.0.9 → 1.0.11

package/components.css

@@ -136,6 +136,103 @@
     @apply rounded-[28px] border border-white/10 bg-white/[0.045] shadow-2xl shadow-black/30 backdrop-blur-xl relative overflow-hidden p-5 transition duration-300;
   }
 
+  .portal-widget-grid {
+    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
+  }
+
+  .portal-widget-card {
+    @apply rounded-[24px] border border-white/10 bg-white/[0.045] p-4 shadow-2xl shadow-black/30 backdrop-blur-xl transition duration-300;
+  }
+
+  .portal-widget-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(255, 255, 255, 0.16);
+    background: rgba(255, 255, 255, 0.065);
+  }
+
+  .portal-widget-header {
+    @apply flex items-start justify-between gap-3;
+  }
+
+  .portal-widget-icon {
+    @apply inline-flex h-11 w-11 items-center justify-center rounded-2xl border;
+    border-color: rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.06);
+    color: rgb(var(--color-brand-soft));
+  }
+
+  .portal-widget-kicker {
+    @apply text-[11px] font-medium uppercase tracking-[0.2em];
+    color: #71717a;
+  }
+
+  .portal-widget-value {
+    @apply mt-3 text-2xl font-semibold tracking-tight;
+    color: #f4f4f5;
+  }
+
+  .portal-widget-body {
+    @apply mt-1 text-sm leading-6;
+    color: #a1a1aa;
+  }
+
+  .portal-widget-link {
+    @apply mt-4 inline-flex items-center gap-2 text-sm font-medium;
+    color: rgb(var(--color-brand-soft));
+  }
+
+  .portal-launchpad-grid {
+    @apply grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
+  }
+
+  .portal-launchpad-card {
+    @apply rounded-[28px] border border-white/10 bg-white/[0.04] p-5 text-left shadow-2xl shadow-black/30 backdrop-blur-xl transition duration-300;
+  }
+
+  .portal-launchpad-card:hover {
+    transform: translateY(-5px);
+    border-color: rgba(var(--color-brand) / 0.3);
+    background: rgba(255, 255, 255, 0.075);
+    box-shadow: 0 24px 50px -28px rgba(0, 117, 169, 0.42);
+  }
+
+  .portal-launchpad-icon-wrap {
+    @apply flex items-center justify-center;
+  }
+
+  .portal-launchpad-icon {
+    @apply inline-flex h-20 w-20 items-center justify-center rounded-[26px] border;
+    border-color: rgba(var(--color-brand) / 0.2);
+    background:
+      radial-gradient(circle at top left, rgba(255, 255, 255, 0.24), transparent 56%),
+      linear-gradient(180deg, rgba(var(--color-brand) / 0.22), rgba(var(--color-brand) / 0.1));
+    color: #f8fdff;
+    box-shadow:
+      inset 0 1px 0 rgba(255, 255, 255, 0.18),
+      0 20px 32px -24px rgba(0, 117, 169, 0.68);
+  }
+
+  .portal-launchpad-title {
+    @apply mt-4 text-base font-semibold tracking-tight;
+    color: #f4f4f5;
+  }
+
+  .portal-launchpad-subtitle {
+    @apply mt-1 text-sm leading-6;
+    color: #a1a1aa;
+  }
+
+  .portal-launchpad-meta {
+    @apply mt-4 flex items-center justify-between gap-3;
+  }
+
+  .portal-launchpad-role {
+    @apply rounded-full border px-3 py-1 text-[11px] font-medium uppercase tracking-[0.18em];
+    border-color: rgba(var(--color-brand) / 0.24);
+    background: rgba(var(--color-brand) / 0.1);
+    color: #d7f1fb;
+  }
+
   .auth-hero-panel {
     @apply relative overflow-hidden p-8 md:p-10;
   }
@@ -149,8 +246,28 @@
     @apply h-20 w-auto md:h-28;
   }
 
+  .auth-hero-frame {
+    @apply relative h-full;
+  }
+
+  .auth-hero-icon {
+    @apply absolute left-0 top-0 h-9 w-auto md:h-10;
+  }
+
+  .auth-hero-content {
+    @apply flex h-full items-center justify-center;
+  }
+
+  .auth-hero-copy {
+    @apply w-full max-w-xl text-left;
+  }
+
+  .auth-hero-wordmark {
+    @apply mt-3 h-14 w-auto md:h-16;
+  }
+
   .auth-hero-title {
-    @apply mt-5 max-w-xl text-3xl font-semibold tracking-tight text-zinc-100 md:text-[2.6rem];
+    @apply max-w-xl text-3xl font-semibold tracking-tight text-zinc-100 md:text-[2.6rem];
   }
 
   .auth-hero-body {

package/light.css

@@ -363,6 +363,38 @@
   background: rgba(255, 255, 255, 0.82);
 }
 
+.light .portal-widget-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.light .portal-widget-card:hover {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: rgba(255, 255, 255, 0.94);
+}
+
+.light .portal-widget-icon {
+  border-color: rgba(186, 230, 253, 0.88);
+  background: rgba(240, 249, 255, 0.92);
+  color: rgb(var(--color-brand-strong));
+}
+
+.light .portal-widget-kicker {
+  color: #52525b;
+}
+
+.light .portal-widget-value {
+  color: #18181b;
+}
+
+.light .portal-widget-body {
+  color: #52525b;
+}
+
+.light .portal-widget-link {
+  color: rgb(var(--color-brand-strong));
+}
+
 .light .portal-card:hover {
   border-color: rgba(161, 161, 170, 0.42);
   background: rgba(255, 255, 255, 0.88);
@@ -421,6 +453,42 @@
   color: #0369a1;
 }
 
+.light .portal-launchpad-card {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+}
+
+.light .portal-launchpad-card:hover {
+  border-color: rgba(186, 230, 253, 0.92);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 26px 48px -34px rgba(0, 117, 169, 0.28);
+}
+
+.light .portal-launchpad-icon {
+  border-color: rgba(186, 230, 253, 0.92);
+  background:
+    radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), transparent 52%),
+    linear-gradient(180deg, rgba(224, 242, 254, 0.98), rgba(186, 230, 253, 0.86));
+  color: rgb(var(--color-brand-strong));
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.92),
+    0 20px 36px -28px rgba(14, 116, 144, 0.32);
+}
+
+.light .portal-launchpad-title {
+  color: #18181b;
+}
+
+.light .portal-launchpad-subtitle {
+  color: #52525b;
+}
+
+.light .portal-launchpad-role {
+  border-color: rgba(186, 230, 253, 0.88);
+  background: #f0f9ff;
+  color: #0369a1;
+}
+
 .light .portal-title {
   color: #18181b;
 }

package/package.json

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