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]>

2 files changed, 141 insertions, 96 deletions

diff --git a/packages/ui/src/styles/index.css b/packages/ui/src/styles/index.css
index 3ed0310ef..7c8548734 100644
--- a/packages/ui/src/styles/index.css
+++ b/packages/ui/src/styles/index.css
@@ -33,8 +33,10 @@
 @import "../components/markdown.css" layer(components);
 @import "../components/message-part.css" layer(components);
 @import "../components/message-nav.css" layer(components);
+@import "../components/morph-chevron.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress-circle.css" layer(components);
+@import "../components/reasoning-icon.css" layer(components);
 @import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
 @import "../components/select.css" layer(components);
diff --git a/packages/ui/src/styles/utilities.css b/packages/ui/src/styles/utilities.css
index 8c954f1fe..990259acc 100644
--- a/packages/ui/src/styles/utilities.css
+++ b/packages/ui/src/styles/utilities.css
@@ -1,131 +1,174 @@
 :root {
-  interpolate-size: allow-keywords;
-
-  [data-popper-positioner] {
-    pointer-events: none;
-  }
-
-  /* ::selection { */
-  /*   background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */
-  /*   background-color: var(--color-primary); */
-  /*   color: var(--color-background); */
-  /* } */
-
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: var(--surface-float-base);
-    border-radius: var(--radius-md);
-  }
-
-  * {
-    scrollbar-color: var(--surface-float-base) transparent;
-  }
+	interpolate-size: allow-keywords;
+
+	/* Transition tokens */
+	--transition-duration: 200ms;
+	--transition-easing: cubic-bezier(0.25, 0, 0.5, 1);
+	--transition-fast: 150ms;
+	--transition-slow: 300ms;
+
+	/* Allow height transitions from 0 to auto */
+	@supports (interpolate-size: allow-keywords) {
+		interpolate-size: allow-keywords;
+	}
+
+	[data-popper-positioner] {
+		pointer-events: none;
+	}
+
+	/* ::selection { */
+	/*   background-color: color-mix(in srgb, var(--color-primary) 33%, transparent); */
+	/*   background-color: var(--color-primary); */
+	/*   color: var(--color-background); */
+	/* } */
+
+	::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	::-webkit-scrollbar-thumb {
+		background-color: var(--surface-float-base);
+		border-radius: var(--radius-md);
+	}
+
+	* {
+		scrollbar-color: var(--surface-float-base) transparent;
+	}
 }
 
 .no-scrollbar {
-  &::-webkit-scrollbar {
-    display: none;
-  }
-  /* Hide scrollbar for IE, Edge and Firefox */
-  & {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+	&::-webkit-scrollbar {
+		display: none;
+	}
+	/* Hide scrollbar for IE, Edge and Firefox */
+	& {
+		-ms-overflow-style: none; /* IE and Edge */
+		scrollbar-width: none; /* Firefox */
+	}
 }
 
 .sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
 }
 
 .truncate-start {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  direction: rtl;
-  text-align: left;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+	direction: rtl;
+	text-align: left;
 }
 
 .text-12-regular {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large); /* 166.667% */
-  letter-spacing: var(--letter-spacing-normal);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-small);
+	font-style: normal;
+	font-weight: var(--font-weight-regular);
+	line-height: var(--line-height-large); /* 166.667% */
+	letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-12-medium {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large); /* 166.667% */
-  letter-spacing: var(--letter-spacing-normal);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-small);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-large); /* 166.667% */
+	letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-12-mono {
-  font-family: var(--font-family-mono);
-  font-feature-settings: var(--font-feature-settings-mono);
-  font-size: var(--font-size-small);
-  font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large); /* 166.667% */
-  letter-spacing: var(--letter-spacing-normal);
+	font-family: var(--font-family-mono);
+	font-feature-settings: var(--font-feature-settings-mono);
+	font-size: var(--font-size-small);
+	font-style: normal;
+	font-weight: var(--font-weight-regular);
+	line-height: var(--line-height-large); /* 166.667% */
+	letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-14-regular {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-x-large); /* 171.429% */
-  letter-spacing: var(--letter-spacing-normal);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-base);
+	font-style: normal;
+	font-weight: var(--font-weight-regular);
+	line-height: var(--line-height-x-large); /* 171.429% */
+	letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-14-medium {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-base);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-large); /* 171.429% */
-  letter-spacing: var(--letter-spacing-normal);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-base);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-large); /* 171.429% */
+	letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-14-mono {
-  font-family: var(--font-family-mono);
-  font-feature-settings: var(--font-feature-settings-mono);
-  font-size: var(--font-size-base);
-  font-style: normal;
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-large); /* 171.429% */
-  letter-spacing: var(--letter-spacing-normal);
+	font-family: var(--font-family-mono);
+	font-feature-settings: var(--font-feature-settings-mono);
+	font-size: var(--font-size-base);
+	font-style: normal;
+	font-weight: var(--font-weight-regular);
+	line-height: var(--line-height-large); /* 171.429% */
+	letter-spacing: var(--letter-spacing-normal);
 }
 
 .text-16-medium {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-large);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-x-large); /* 150% */
-  letter-spacing: var(--letter-spacing-tight);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-large);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-x-large); /* 150% */
+	letter-spacing: var(--letter-spacing-tight);
 }
 
 .text-20-medium {
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-x-large);
-  font-style: normal;
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-x-large); /* 120% */
-  letter-spacing: var(--letter-spacing-tightest);
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-x-large);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: var(--line-height-x-large); /* 120% */
+	letter-spacing: var(--letter-spacing-tightest);
+}
+
+/* Transition utility classes */
+.transition-colors {
+	transition-property: background-color, border-color, color, fill, stroke;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-easing);
+}
+
+.transition-opacity {
+	transition-property: opacity;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-easing);
+}
+
+.transition-transform {
+	transition-property: transform;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-easing);
+}
+
+.transition-shadow {
+	transition-property: box-shadow;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-easing);
+}
+
+.transition-interactive {
+	transition-property:
+		background-color, border-color, color, box-shadow, opacity;
+	transition-duration: var(--transition-duration);
+	transition-timing-function: var(--transition-easing);
 }