@limpiolux/ui-styles 1.0.18 → 1.0.20

package/components.css

@@ -182,7 +182,7 @@
   }
 
   .portal-launchpad-grid {
-    @apply grid grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4;
+    @apply grid grid-cols-2 gap-x-4 gap-y-6 sm:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4;
   }
 
   .portal-launchpad-card {
@@ -198,39 +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.14);
-    background:
-      radial-gradient(circle at top left, rgba(255, 255, 255, 0.42), transparent 54%),
-      radial-gradient(circle at bottom right, rgba(var(--color-brand) / 0.18), transparent 52%),
-      linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
-    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.28),
-      inset 0 -16px 24px -20px rgba(0, 0, 0, 0.24),
-      0 24px 42px -28px rgba(0, 117, 169, 0.46);
-    backdrop-filter: blur(18px);
-    -webkit-backdrop-filter: blur(18px);
-    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.28);
     box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.32),
-      inset 0 -16px 24px -20px rgba(0, 0, 0, 0.18),
-      0 28px 52px -30px rgba(0, 117, 169, 0.58);
+      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 {
@@ -269,7 +255,7 @@
   }
 
   .portal-dashboard-grid {
-    @apply mt-8 grid gap-6 xl:grid-cols-[1.45fr_0.95fr];
+    @apply mt-5 grid gap-5 md:mt-8 md:gap-6 xl:grid-cols-[1.45fr_0.95fr];
   }
 
   .portal-dashboard-main {
@@ -615,7 +601,8 @@
   /* ── Soft tabs ── */
 
   .soft-tab {
-    @apply relative inline-flex shrink-0 items-center justify-center rounded-xl px-3 py-2 text-sm md:px-3.5;
+    @apply relative inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm md:px-3.5;
+    flex: 1 0 0%;
     background: transparent;
     border-color: transparent;
     color: #a1a1aa;
@@ -627,6 +614,12 @@
       opacity 160ms ease;
   }
 
+  @media (min-width: 768px) {
+    .soft-tab {
+      flex: 0 0 auto;
+    }
+  }
+
   .soft-tab:hover {
     color: #e4e4e7;
   }
@@ -795,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 {
@@ -1930,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,25 +479,22 @@
 }
 
 .light .portal-launchpad-icon {
-  border-color: rgba(186, 230, 253, 0.92);
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.98), transparent 50%),
-    radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.14), transparent 54%),
-    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(224, 242, 254, 0.82));
-  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.92),
-    inset 0 -16px 24px -22px rgba(8, 47, 73, 0.08),
-    0 20px 36px -28px rgba(14, 116, 144, 0.32);
+    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 {
@@ -994,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.18",
+  "version": "1.0.20",
   "description": "Shared design system — Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {