Animation improvement

Author: Ohswedd

css/components/tooltip.css

@@ -17,14 +17,15 @@
   padding: 0;
   overflow: hidden;
   border-radius: var(--radius-md);
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-md);
   font-size: clamp(0.75rem, 1vw, 0.875rem);
   line-height: 1.2;
   opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease;
+  transform: scale(0.95);
+  transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease, padding 0.25s ease;
   pointer-events: none;
   width: max-content;
-  z-index: 1000;
+  z-index: var(--z-50);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -36,7 +37,7 @@
 .tooltip:focus .tooltip-text {
   opacity: 1;
   max-height: 200px;
-  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
+  padding: clamp(var(--space-1), 1vw, var(--space-2)) clamp(var(--space-2), 2vw, var(--space-4));
   overflow: visible;
 }
 
@@ -51,7 +52,7 @@
 
 /* Position Variants */
 [data-position="top"] .tooltip-text {
-  bottom: calc(100% + 0.5rem);
+  bottom: calc(100% + var(--space-2));
   left: 50%;
   transform: translateX(-50%);
 }
@@ -65,7 +66,7 @@
 
 [data-position="right"] .tooltip-text {
   top: 50%;
-  left: calc(100% + 0.5rem);
+  left: calc(100% + var(--space-2));
   transform: translateY(-50%);
 }
 [data-position="right"] .tooltip-text::after {
@@ -77,7 +78,7 @@
 }
 
 [data-position="bottom"] .tooltip-text {
-  top: calc(100% + 0.5rem);
+  top: calc(100% + var(--space-2));
   left: 50%;
   transform: translateX(-50%);
 }
@@ -91,7 +92,7 @@
 
 [data-position="left"] .tooltip-text {
   top: 50%;
-  right: calc(100% + 0.5rem);
+  right: calc(100% + var(--space-2));
   transform: translateY(-50%);
 }
 [data-position="left"] .tooltip-text::after {
@@ -104,35 +105,41 @@
 
 /* Color Variants */
 [data-variant="primary"] .tooltip-text {
-  background-color: var(--primary);
-  color: white;
+  background-color: var(--primary-bg);
+  color: var(--primary-text);
 }
 [data-variant="secondary"] .tooltip-text {
-  background-color: var(--secondary);
-  color: white;
+  background-color: var(--secondary-bg);
+  color: var(--secondary-text);
 }
 [data-variant="success"] .tooltip-text {
-  background-color: var(--success);
-  color: white;
+  background-color: var(--success-bg);
+  color: var(--success-text);
 }
 [data-variant="danger"] .tooltip-text {
-  background-color: var(--danger);
-  color: white;
+  background-color: var(--danger-bg);
+  color: var(--danger-text);
 }
 [data-variant="warning"] .tooltip-text {
-  background-color: var(--warning);
-  color: var(--neutral-900);
+  background-color: var(--warning-bg);
+  color: var(--warning-text);
 }
 [data-variant="info"] .tooltip-text {
-  background-color: var(--info);
-  color: white;
+  background-color: var(--info-bg);
+  color: var(--info-text);
 }
 
 /* Accessibility Improvements */
 .tooltip:focus .tooltip-text,
 .tooltip:active .tooltip-text {
   opacity: 1;
   max-height: 200px;
-  padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.5rem, 2vw, 1rem);
+  padding: clamp(var(--space-1), 1vw, var(--space-2)) clamp(var(--space-2), 2vw, var(--space-4));
+  transform: scale(1);
   overflow: visible;
 }
+
+/* Smooth Fade Out */
+.tooltip .tooltip-text {
+  will-change: opacity, transform;
+}