feat: Transitions, spacing, scroll fade, prompt area update (#11168)

Co-authored-by: Github Action <[email protected]>
Co-authored-by: Copilot <[email protected]>
Co-authored-by: aaroniker <[email protected]>

1 files changed, 52 insertions, 50 deletions

diff --git a/packages/ui/src/components/hover-card.css b/packages/ui/src/components/hover-card.css
index 02d1f10ad..2a588adc6 100644
--- a/packages/ui/src/components/hover-card.css
+++ b/packages/ui/src/components/hover-card.css
@@ -1,61 +1,63 @@
 [data-slot="hover-card-trigger"] {
-  display: flex;
-  width: 100%;
-  min-width: 0;
+	display: flex;
+	width: 100%;
+	min-width: 0;
 }
 
 [data-component="hover-card-content"] {
-  z-index: 50;
-  min-width: 200px;
-  max-width: 320px;
-  max-height: calc(100vh - 1rem);
-  border-radius: 8px;
-  background-color: var(--surface-raised-stronger-non-alpha);
-  pointer-events: auto;
-
-  border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
-  background-clip: padding-box;
-  box-shadow: var(--shadow-md);
-
-  transform-origin: var(--kb-hovercard-content-transform-origin);
-
-  &:focus-within {
-    outline: none;
-  }
-
-  &[data-closed] {
-    animation: hover-card-close 0.15s ease-out;
-  }
-
-  &[data-expanded] {
-    animation: hover-card-open 0.15s ease-out;
-  }
-
-  [data-slot="hover-card-body"] {
-    padding: 4px;
-    max-height: inherit;
-    overflow: hidden;
-  }
+	z-index: 50;
+	min-width: 200px;
+	max-width: 320px;
+	max-height: calc(100vh - 1rem);
+	border-radius: 8px;
+	background-color: var(--surface-raised-stronger-non-alpha);
+	pointer-events: auto;
+
+	border: 1px solid color-mix(in oklch, var(--border-base) 50%, transparent);
+	background-clip: padding-box;
+	box-shadow: var(--shadow-md);
+
+	transform-origin: var(--kb-hovercard-content-transform-origin);
+
+	&:focus-within {
+		outline: none;
+	}
+
+	&[data-closed] {
+		animation: hover-card-close var(--transition-duration)
+			var(--transition-easing);
+	}
+
+	&[data-expanded] {
+		animation: hover-card-open var(--transition-duration)
+			var(--transition-easing);
+	}
+
+	[data-slot="hover-card-body"] {
+		padding: 4px;
+		max-height: inherit;
+		overflow: hidden;
+	}
 }
 
 @keyframes hover-card-open {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
+	from {
+		opacity: 0;
+		transform: scale(0.96);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
 }
 
 @keyframes hover-card-close {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
+	from {
+		opacity: 1;
+		transform: scale(1);
+	}
+	to {
+		opacity: 0;
+		transform: scale(0.96);
+	}
 }