@limpiolux/ui-styles 1.0.19 → 1.0.20

package/components.css

@@ -198,41 +198,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 {
@@ -804,13 +788,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 +1929,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 {
@@ -474,28 +479,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 {
@@ -997,3 +996,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.20",
   "description": "Shared design system — Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {