@limpiolux/ui-styles 1.0.24 → 1.0.26

package/components.css

@@ -10,7 +10,7 @@
   .form-input {
     @apply w-full bg-zinc-900 border border-zinc-800 rounded-lg px-3 py-2.5 text-sm text-zinc-100
       focus:ring-1 outline-none
-      transition-colors placeholder:text-zinc-600;
+      placeholder:text-zinc-600;
     box-shadow: none;
   }
 
@@ -27,8 +27,9 @@
 
   .btn-primary {
     @apply text-white font-medium py-2.5 px-4 rounded-lg
-      transition-colors active:scale-[0.98] flex items-center justify-center gap-2
+      active:scale-[0.98] flex items-center justify-center gap-2
       disabled:opacity-50 disabled:cursor-not-allowed;
+    transition: transform 150ms ease, opacity 150ms ease;
     background: rgb(var(--color-brand));
   }
 
@@ -38,18 +39,14 @@
 
   .btn-secondary {
     @apply bg-zinc-800 hover:bg-zinc-700 text-zinc-200 font-medium py-2.5 px-4 rounded-lg
-      transition-colors border border-zinc-700 active:scale-[0.98]
+      border border-zinc-700 active:scale-[0.98]
       flex items-center justify-center gap-2;
+    transition: transform 150ms ease, opacity 150ms ease;
   }
 
   .theme-icon-button {
     @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-200;
-    transition:
-      transform 220ms ease,
-      background-color 220ms ease,
-      border-color 220ms ease,
-      color 220ms ease,
-      box-shadow 220ms ease;
+    transition: transform 220ms ease, opacity 220ms ease;
   }
 
   .theme-icon-button:hover {
@@ -68,12 +65,7 @@
   }
 
   .theme-transition-surface {
-    transition:
-      background-color 420ms ease,
-      border-color 420ms ease,
-      box-shadow 420ms ease,
-      color 420ms ease,
-      transform 420ms ease;
+    transition: transform 420ms ease, opacity 420ms ease;
   }
 
   .collapse-panel {
@@ -102,11 +94,7 @@
   .portal-card {
     @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,
-      box-shadow 420ms ease,
-      transform 420ms ease;
+    transition: transform 420ms ease;
   }
 
   .auth-kicker {
@@ -123,10 +111,6 @@
       radial-gradient(circle at top left, rgba(59, 130, 246, 0.22), transparent 28%),
       radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 24%),
       linear-gradient(180deg, rgba(9, 9, 11, 0.95), rgba(9, 9, 11, 1));
-    transition:
-      background-color 420ms ease,
-      color 420ms ease,
-      background-image 420ms ease;
   }
 
   .portal-grid {
@@ -134,7 +118,7 @@
   }
 
   .portal-app-card {
-    @apply rounded-[28px] border border-white/10 bg-white/[0.045] 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-[opacity,transform] duration-300;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
@@ -143,7 +127,7 @@
   }
 
   .portal-widget-card {
-    @apply rounded-[24px] border border-white/10 bg-white/[0.045] p-4 backdrop-blur-xl transition duration-300;
+    @apply rounded-[24px] border border-white/10 bg-white/[0.045] p-4 backdrop-blur-xl transition-[opacity,transform] duration-300;
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px -2px rgba(0, 0, 0, 0.22);
   }
 
@@ -401,7 +385,11 @@
   }
 
   .auth-hero-panel {
-    @apply relative overflow-hidden p-8 md:p-10;
+    @apply relative overflow-hidden p-5 sm:p-6 lg:p-10;
+  }
+
+  .auth-hero-kicker {
+    @apply text-xs font-medium uppercase tracking-[0.18em] text-zinc-500;
   }
 
   .auth-hero-backdrop {
@@ -430,24 +418,20 @@
   }
 
   .auth-hero-wordmark {
-    @apply mt-3 h-14 w-auto md:h-16;
+    @apply mt-3 h-12 w-auto lg:h-16;
   }
 
   .auth-hero-title {
-    @apply max-w-xl text-3xl font-semibold tracking-tight text-zinc-100 md:text-[2.6rem];
+    @apply max-w-xl text-2xl font-semibold tracking-tight text-zinc-100 lg:text-[2.6rem];
   }
 
   .auth-hero-body {
-    @apply mt-4 max-w-xl text-sm leading-6 text-zinc-400 md:text-base;
+    @apply mt-4 max-w-xl text-sm leading-6 text-zinc-400 lg:text-base;
   }
 
   .auth-card {
     @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,
-      box-shadow 420ms ease;
   }
 
   .auth-title {
@@ -464,7 +448,6 @@
 
   .auth-link {
     @apply text-sm font-medium text-zinc-400;
-    transition: color 180ms ease;
   }
 
   .auth-link:hover {
@@ -473,11 +456,7 @@
 
   .auth-support-panel {
     @apply rounded-[24px] border border-white/10 bg-white/[0.03] p-4;
-    transition:
-      background-color 320ms ease,
-      border-color 320ms ease,
-      box-shadow 320ms ease,
-      transform 320ms ease;
+    transition: transform 320ms ease;
     box-shadow:
       inset 0 1px 0 rgba(255, 255, 255, 0.03),
       0 18px 34px -30px rgba(15, 23, 42, 0.24);
@@ -820,12 +799,7 @@
 
   .portal-toolbar-icon {
     @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-white/10 bg-white/5 text-zinc-200;
-    transition:
-      transform 220ms ease,
-      background-color 220ms ease,
-      border-color 220ms ease,
-      color 220ms ease,
-      box-shadow 220ms ease;
+    transition: transform 220ms ease, opacity 220ms ease;
   }
 
   .portal-toolbar-icon:hover {
@@ -835,7 +809,7 @@
   }
 
   .portal-card {
-    @apply relative overflow-hidden p-5 transition duration-300;
+    @apply relative overflow-hidden p-5 transition-[opacity,transform] duration-300;
   }
 
   .portal-card:hover {
@@ -872,7 +846,7 @@
   }
 
   .portal-selection-card {
-    @apply rounded-2xl border p-4 text-left transition;
+    @apply rounded-2xl border p-4 text-left transition-[opacity,transform];
     border-color: rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.03);
   }
@@ -1045,10 +1019,11 @@
       inset 0 -1px 0 rgba(0, 0, 0, 0.1);
     backdrop-filter: blur(20px) saturate(1.4);
     -webkit-backdrop-filter: blur(20px) saturate(1.4);
-    transition: border-color 200ms ease, box-shadow 200ms ease;
+    transition: transform 200ms ease;
   }
 
   .kpi-card:hover {
+    transform: translateY(-2px);
     border-color: rgba(255, 255, 255, 0.14);
     box-shadow:
       0 12px 40px -8px rgba(0, 0, 0, 0.35),
@@ -1082,13 +1057,11 @@
       inset 0 -1px 0 rgba(0, 0, 0, 0.08);
     backdrop-filter: blur(24px) saturate(1.5);
     -webkit-backdrop-filter: blur(24px) saturate(1.5);
-    transition:
-      border-color 220ms ease,
-      box-shadow 220ms ease,
-      background 220ms ease;
+    transition: transform 220ms ease;
   }
 
   .liquid-glass:hover {
+    transform: translateY(-2px);
     border-color: rgba(255, 255, 255, 0.16);
     box-shadow:
       0 12px 44px -8px rgba(0, 0, 0, 0.32),
@@ -1190,7 +1163,7 @@
     border-radius: 0.35rem;
     background-color: transparent;
     cursor: pointer;
-    transition: all 140ms ease;
+    transition: transform 140ms ease, opacity 140ms ease;
   }
 
   .form-check-input[type="radio"] {
@@ -1221,7 +1194,7 @@
     background: rgb(var(--color-zinc-700));
     position: relative;
     cursor: pointer;
-    transition: background-color 180ms ease;
+    transition: transform 180ms ease, opacity 180ms ease;
   }
 
   .form-switch .form-check-input::before,

package/package.json

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