@limpiolux/ui-styles 1.0.19 → 1.0.21

package/components.css

@@ -100,7 +100,8 @@
   .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;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] backdrop-blur-xl;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
     transition:
       background-color 420ms ease,
       border-color 420ms ease,
@@ -133,15 +134,17 @@
   }
 
   .portal-app-card {
-    @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;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] backdrop-blur-xl relative overflow-hidden p-5 transition duration-300;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-widget-grid {
-    @apply grid gap-4 md:grid-cols-2 xl:grid-cols-4;
+    @apply grid gap-4 md:grid-cols-2 lg: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;
+    @apply rounded-[24px] border border-white/10 bg-white/[0.045] p-4 backdrop-blur-xl transition duration-300;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-widget-card:hover {
@@ -198,41 +201,25 @@
   }
 
   .portal-launchpad-icon {
-    @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.18);
-    background:
-      radial-gradient(ellipse at 28% 8%, rgba(255, 255, 255, 0.62), transparent 50%),
-      radial-gradient(circle at bottom right, rgba(var(--color-brand) / 0.22), transparent 52%),
-      linear-gradient(160deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%);
-    color: #f8fdff;
+    @apply inline-flex h-[62px] w-[62px] items-center justify-center rounded-[16px] sm:h-[70px] sm:w-[70px];
+    background: linear-gradient(160deg, rgb(var(--color-brand)) 0%, rgb(var(--color-brand-strong)) 100%);
+    color: #ffffff;
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.38),
-      inset 0 -20px 28px -18px rgba(0, 0, 0, 0.2),
-      0 24px 48px -28px rgba(0, 117, 169, 0.52),
-      0 2px 8px -2px rgba(0, 0, 0, 0.18);
-    backdrop-filter: blur(20px) saturate(2);
-    -webkit-backdrop-filter: blur(20px) saturate(2);
-    transition:
-      transform 220ms ease,
-      border-color 220ms ease,
-      box-shadow 220ms ease,
-      background 220ms ease;
+      0 4px 14px -4px rgba(var(--color-brand) / 0.52),
+      0 1px 4px rgba(0, 0, 0, 0.18);
+    transition: box-shadow 220ms ease;
   }
 
   .portal-launchpad-card:hover .portal-launchpad-icon,
   .portal-launchpad-card:focus-visible .portal-launchpad-icon {
-    transform: translateY(-2px);
-    border-color: rgba(var(--color-brand) / 0.32);
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.44),
-      inset 0 -20px 28px -18px rgba(0, 0, 0, 0.16),
-      0 32px 56px -28px rgba(0, 117, 169, 0.64),
-      0 4px 14px -4px rgba(0, 0, 0, 0.2);
+      0 8px 22px -6px rgba(var(--color-brand) / 0.64),
+      0 2px 8px rgba(0, 0, 0, 0.18);
   }
 
   .portal-launchpad-title {
-    @apply mt-3 text-sm font-semibold tracking-tight sm:text-base;
-    color: #f4f4f5;
+    @apply mt-2.5 text-sm font-medium tracking-tight;
+    color: #d4d4d8;
   }
 
   .portal-launchpad-subtitle {
@@ -267,15 +254,17 @@
   }
 
   .portal-home-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 backdrop-blur-xl;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-dashboard-grid {
-    @apply mt-5 grid gap-5 md:mt-8 md:gap-6 xl:grid-cols-[1.45fr_0.95fr];
+    @apply mt-5 grid gap-5 md:mt-8 md:gap-6 lg:grid-cols-[1.4fr_1fr];
   }
 
   .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;
+    @apply rounded-[30px] border border-white/10 bg-white/[0.045] p-5 backdrop-blur-xl md:p-6;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-dashboard-side {
@@ -283,7 +272,8 @@
   }
 
   .portal-side-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 shadow-2xl shadow-black/30 backdrop-blur-xl;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-5 backdrop-blur-xl;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
   .portal-side-hero {
@@ -452,7 +442,8 @@
   }
 
   .auth-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-6 shadow-2xl shadow-black/30 backdrop-blur-xl md:p-8;
+    @apply rounded-[28px] border border-white/10 bg-white/[0.045] p-6 backdrop-blur-xl md:p-8;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
     transition:
       background-color 420ms ease,
       border-color 420ms ease,
@@ -804,13 +795,19 @@
   }
 
   .portal-header-panel {
-    @apply flex flex-col gap-4 p-5 md:flex-row md:items-end md:justify-between md:p-6;
+    @apply flex flex-col gap-3 p-4 sm:flex-row sm:items-center sm:justify-between md:items-end md:p-5 lg:p-6;
   }
 
   .portal-stat-card {
-    @apply flex h-11 items-center rounded-2xl border px-3;
+    @apply hidden sm:flex h-9 items-center gap-1.5 rounded-xl border px-2.5;
     border-color: rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.05);
+    color: #71717a;
+  }
+
+  .portal-stat-value {
+    @apply text-xs font-semibold;
+    color: #d4d4d8;
   }
 
   .portal-toolbar {
@@ -1939,4 +1936,45 @@
   .fade.show {
     opacity: 1;
   }
+
+  /* ── Portal footer ── */
+
+  .portal-footer {
+    @apply mt-10 py-4 text-center text-xs tracking-wide;
+    color: #52525b;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+  }
+
+  /* ── User avatar ── */
+
+  .portal-user-avatar {
+    @apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl text-xs font-semibold uppercase;
+    background: rgba(var(--color-brand) / 0.16);
+    border: 1px solid rgba(var(--color-brand) / 0.2);
+    color: rgb(var(--color-brand-soft));
+  }
+
+  /* ── Role / permission chips (toggle style) ── */
+
+  .portal-role-chip {
+    @apply inline-flex cursor-pointer items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition-colors;
+    border-color: rgba(255, 255, 255, 0.1);
+    background: rgba(255, 255, 255, 0.04);
+    color: #71717a;
+  }
+
+  .portal-role-chip:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: #a1a1aa;
+  }
+
+  .portal-role-chip-active {
+    border-color: rgba(var(--color-brand) / 0.32);
+    background: rgba(var(--color-brand) / 0.12);
+    color: #c6ecfb;
+  }
+
+  .portal-role-chip-active:hover {
+    background: rgba(var(--color-brand) / 0.18);
+  }
 }

package/light.css

@@ -361,6 +361,11 @@
 .light .portal-stat-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.82);
+  color: #71717a;
+}
+
+.light .portal-stat-value {
+  color: #18181b;
 }
 
 .light .portal-toolbar-icon {
@@ -378,6 +383,7 @@
 .light .portal-widget-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-widget-card:hover {
@@ -474,28 +480,22 @@
 }
 
 .light .portal-launchpad-icon {
-  border-color: rgba(186, 230, 253, 0.92);
-  background:
-    radial-gradient(ellipse at 28% 8%, rgba(255, 255, 255, 0.98), transparent 48%),
-    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.18), transparent 54%),
-    linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(224, 242, 254, 0.82) 100%);
-  color: rgb(var(--color-brand-strong));
+  background: linear-gradient(160deg, rgb(var(--color-brand)) 0%, rgb(var(--color-brand-strong)) 100%);
+  color: #ffffff;
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.96),
-    inset 0 -20px 28px -20px rgba(8, 47, 73, 0.07),
-    0 20px 40px -28px rgba(14, 116, 144, 0.36),
-    0 2px 8px -2px rgba(14, 116, 144, 0.12);
-  backdrop-filter: blur(20px) saturate(1.6);
-  -webkit-backdrop-filter: blur(20px) saturate(1.6);
+    0 4px 14px -4px rgba(var(--color-brand) / 0.44),
+    0 1px 4px rgba(14, 116, 144, 0.14);
 }
 
 .light .portal-launchpad-card:hover .portal-launchpad-icon,
 .light .portal-launchpad-card:focus-visible .portal-launchpad-icon {
-  border-color: rgba(125, 211, 252, 0.98);
   box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.96),
-    inset 0 -16px 24px -22px rgba(8, 47, 73, 0.06),
-    0 24px 42px -28px rgba(14, 116, 144, 0.38);
+    0 8px 22px -6px rgba(var(--color-brand) / 0.56),
+    0 2px 8px rgba(14, 116, 144, 0.16);
+}
+
+.light .portal-launchpad-title {
+  color: #27272a;
 }
 
 .light .portal-launchpad-title {
@@ -515,16 +515,19 @@
 .light .portal-home-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-dashboard-main {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-side-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 2px 12px -4px rgba(15, 23, 42, 0.12);
 }
 
 .light .portal-side-hero {
@@ -997,3 +1000,41 @@
 .light .text-orange {
   color: #c2410c !important;
 }
+
+/* ── Portal footer ── */
+
+.light .portal-footer {
+  color: #71717a;
+  border-top-color: rgba(0, 0, 0, 0.08);
+}
+
+/* ── User avatar ── */
+
+.light .portal-user-avatar {
+  background: rgba(var(--color-brand) / 0.1);
+  border-color: rgba(var(--color-brand) / 0.18);
+  color: rgb(var(--color-brand-strong));
+}
+
+/* ── Role / permission chips ── */
+
+.light .portal-role-chip {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+  color: #52525b;
+}
+
+.light .portal-role-chip:hover {
+  background: #ffffff;
+  color: #27272a;
+}
+
+.light .portal-role-chip-active {
+  border-color: rgba(var(--color-brand) / 0.3);
+  background: rgba(var(--color-brand) / 0.1);
+  color: rgb(var(--color-brand-strong));
+}
+
+.light .portal-role-chip-active:hover {
+  background: rgba(var(--color-brand) / 0.15);
+}

package/package.json

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