@limpiolux/ui-styles 1.1.4 → 1.1.6

package/components.css

@@ -874,6 +874,110 @@
     border-color: rgba(255, 255, 255, 0.14);
   }
 
+  .dashboard-ghost-button {
+    @apply inline-flex items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-40;
+    border-color: rgba(39, 39, 42, 0.92);
+    background: rgba(24, 24, 27, 0.5);
+    color: #d4d4d8;
+  }
+
+  .dashboard-ghost-button:hover {
+    background: rgba(39, 39, 42, 0.92);
+    color: #ffffff;
+  }
+
+  .mobile-pager-button {
+    @apply flex items-center justify-center rounded-lg border transition-colors disabled:cursor-not-allowed disabled:opacity-40;
+    height: 2rem;
+    width: 2rem;
+    border-color: rgba(39, 39, 42, 0.92);
+    background: rgba(24, 24, 27, 0.7);
+    color: #d4d4d8;
+  }
+
+  .mobile-pager-button:active {
+    background: rgba(39, 39, 42, 0.92);
+    color: #ffffff;
+  }
+
+  .mobile-pager-indicator {
+    @apply flex items-center justify-center rounded-lg border text-center;
+    min-width: 5.25rem;
+    height: 2rem;
+    padding: 0 0.75rem;
+    border-color: rgba(63, 63, 70, 0.7);
+    background: rgba(24, 24, 27, 0.6);
+  }
+
+  .mobile-pager-indicator-text {
+    @apply whitespace-nowrap font-semibold;
+    font-size: 12px;
+    color: #f4f4f5;
+  }
+
+  .mobile-pager-size-trigger {
+    @apply flex items-center gap-1.5 rounded-lg border px-2.5 font-medium transition-colors;
+    height: 2rem;
+    border-color: rgba(39, 39, 42, 0.92);
+    background: rgba(24, 24, 27, 0.7);
+    color: #e4e4e7;
+    font-size: 11px;
+  }
+
+  .mobile-pager-size-trigger:active {
+    background: rgba(39, 39, 42, 0.92);
+  }
+
+  .mobile-pager-size-menu {
+    @apply rounded-xl border p-1 shadow-2xl;
+    width: 5.5rem;
+    border-color: rgba(39, 39, 42, 0.92);
+    background: rgba(9, 9, 11, 0.95);
+    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(20px) saturate(1.5);
+    -webkit-backdrop-filter: blur(20px) saturate(1.5);
+  }
+
+  .mobile-pager-size-option {
+    @apply flex w-full items-center justify-center rounded-lg px-2 py-2 text-sm transition-colors;
+    color: #d4d4d8;
+  }
+
+  .mobile-pager-size-option:active {
+    background: rgba(39, 39, 42, 0.92);
+  }
+
+  .mobile-pager-size-option-active {
+    color: #d7f1fb;
+    border-color: rgba(var(--color-brand) / 0.18);
+    background: rgba(var(--color-brand) / 0.05);
+  }
+
+  .compact-choice-track {
+    @apply inline-flex items-center gap-1 rounded-2xl border p-1;
+    border-color: rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.04);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(18px) saturate(1.4);
+    -webkit-backdrop-filter: blur(18px) saturate(1.4);
+  }
+
+  .compact-choice-button {
+    @apply inline-flex min-w-[42px] items-center justify-center rounded-xl px-2.5 py-1.5 text-[11px] font-semibold transition-colors;
+    color: #a1a1aa;
+  }
+
+  .compact-choice-button:hover {
+    color: #f4f4f5;
+    background: rgba(39, 39, 42, 0.72);
+  }
+
+  .compact-choice-button-active {
+    color: #d7f1fb;
+    background: rgba(var(--color-brand) / 0.16);
+    box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.24);
+  }
+
   .portal-card {
     @apply relative overflow-hidden p-5 transition-[opacity,transform] duration-300;
   }
@@ -1069,6 +1173,33 @@
     -webkit-backdrop-filter: blur(40px) saturate(1.8);
   }
 
+  .mobile-sheet-handle {
+    @apply mx-auto h-1.5 w-12 rounded-full;
+    background: rgba(113, 113, 122, 0.85);
+  }
+
+  .mobile-top-sheet {
+    border-bottom-left-radius: 28px;
+    border-bottom-right-radius: 28px;
+    box-shadow: 0 28px 56px -24px rgba(0, 0, 0, 0.48);
+  }
+
+  .mobile-bottom-sheet {
+    border-top-left-radius: 28px;
+    border-top-right-radius: 28px;
+    box-shadow: 0 -24px 48px -24px rgba(0, 0, 0, 0.46);
+  }
+
+  @media (max-width: 767px) {
+    .mobile-top-sheet {
+      max-height: calc(100dvh - 0.75rem);
+    }
+
+    .mobile-bottom-sheet {
+      max-height: min(82dvh, 44rem);
+    }
+  }
+
   /* ── KPI cards ── */
 
   .kpi-card {

package/light.css

@@ -382,6 +382,89 @@
   border-color: rgba(161, 161, 170, 0.36);
 }
 
+.light .dashboard-ghost-button {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+  color: #3f3f46;
+  box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.18);
+}
+
+.light .dashboard-ghost-button:hover {
+  background: #ffffff;
+  border-color: rgba(161, 161, 170, 0.36);
+  color: #18181b;
+}
+
+.light .mobile-pager-button {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+  color: #3f3f46;
+}
+
+.light .mobile-pager-button:active {
+  background: #ffffff;
+  color: #18181b;
+}
+
+.light .mobile-pager-indicator {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.light .mobile-pager-indicator-text {
+  color: #18181b;
+}
+
+.light .mobile-pager-size-trigger {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.82);
+  color: #18181b;
+}
+
+.light .mobile-pager-size-trigger:active {
+  background: #ffffff;
+}
+
+.light .mobile-pager-size-menu {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 24px 48px -28px rgba(15, 23, 42, 0.18);
+}
+
+.light .mobile-pager-size-option {
+  color: #3f3f46;
+}
+
+.light .mobile-pager-size-option:active {
+  background: #f4f4f5;
+}
+
+.light .mobile-pager-size-option-active {
+  color: #083344;
+  background: rgba(var(--color-brand) / 0.1);
+}
+
+.light .compact-choice-track {
+  border-color: rgba(212, 212, 216, 0.92);
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.12);
+}
+
+.light .compact-choice-button {
+  color: #52525b;
+}
+
+.light .compact-choice-button:hover {
+  color: #18181b;
+  background: #f4f4f5;
+}
+
+.light .compact-choice-button-active {
+  color: #083344;
+  background: rgba(var(--color-brand) / 0.1);
+  box-shadow: inset 0 0 0 1px rgba(var(--color-brand) / 0.18);
+}
+
 .light .portal-widget-card {
   border-color: rgba(212, 212, 216, 0.92);
   background: rgba(255, 255, 255, 0.84);
@@ -705,6 +788,10 @@
   box-shadow: 0 28px 50px -30px rgba(15, 23, 42, 0.22);
 }
 
+.light .mobile-sheet-handle {
+  background: rgba(161, 161, 170, 0.92);
+}
+
 .light .kpi-card {
   border-color: rgba(0, 0, 0, 0.08);
   background: linear-gradient(

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@limpiolux/ui-styles",
-  "version": "1.1.4",
-  "description": "Shared design system \u2014 Limpiolux liquid glass theme with auth, portal and dark/light mode support",
+  "version": "1.1.6",
+  "description": "Shared design system \u2026 Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {
     ".": "./index.css",