@limpiolux/ui-styles 1.0.25 → 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);
   }
 
@@ -448,10 +432,6 @@
   .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 {
@@ -468,7 +448,6 @@
 
   .auth-link {
     @apply text-sm font-medium text-zinc-400;
-    transition: color 180ms ease;
   }
 
   .auth-link:hover {
@@ -477,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);
@@ -824,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 {
@@ -839,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 {
@@ -876,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);
   }
@@ -1049,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),
@@ -1086,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),
@@ -1194,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"] {
@@ -1225,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.25",
+  "version": "1.0.26",
   "description": "Shared design system — Limpiolux liquid glass theme with auth, portal and dark/light mode support",
   "type": "module",
   "exports": {