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, 131 insertions, 130 deletions

diff --git a/packages/ui/src/components/switch.css b/packages/ui/src/components/switch.css
index 89e844732..4951e5998 100644
--- a/packages/ui/src/components/switch.css
+++ b/packages/ui/src/components/switch.css
@@ -1,132 +1,133 @@
 [data-component="switch"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: default;
-
-  [data-slot="switch-input"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  [data-slot="switch-control"] {
-    display: inline-flex;
-    align-items: center;
-    width: 28px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 3px;
-    border: 1px solid var(--border-weak-base);
-    background: var(--surface-base);
-    transition:
-      background-color 150ms,
-      border-color 150ms;
-  }
-
-  [data-slot="switch-thumb"] {
-    width: 14px;
-    height: 14px;
-    box-sizing: content-box;
-
-    border-radius: 2px;
-    border: 1px solid var(--border-base);
-    background: var(--icon-invert-base);
-
-    /* shadows/shadow-xs */
-    box-shadow:
-      0 1px 2px -1px rgba(19, 16, 16, 0.04),
-      0 1px 2px 0 rgba(19, 16, 16, 0.06),
-      0 1px 3px 0 rgba(19, 16, 16, 0.08);
-
-    transform: translateX(-1px);
-    transition:
-      transform 150ms,
-      background-color 150ms;
-  }
-
-  [data-slot="switch-label"] {
-    user-select: none;
-    color: var(--text-base);
-    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);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-description"] {
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-error"] {
-    color: var(--text-error);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &:focus-within:not([data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-focus);
-    box-shadow: 0 0 0 2px var(--surface-focus);
-  }
-
-  &[data-checked] [data-slot="switch-control"] {
-    box-sizing: border-box;
-    border-color: var(--icon-strong-base);
-    background-color: var(--icon-strong-base);
-  }
-
-  &[data-checked] [data-slot="switch-thumb"] {
-    border: none;
-    transform: translateX(12px);
-    background-color: var(--icon-invert-base);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-  }
-
-  &[data-disabled] [data-slot="switch-control"] {
-    border-color: var(--border-disabled);
-    background-color: var(--surface-disabled);
-  }
-
-  &[data-disabled] [data-slot="switch-thumb"] {
-    background-color: var(--icon-disabled);
-  }
-
-  &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--border-error);
-  }
-
-  &[data-readonly] {
-    cursor: default;
-    pointer-events: none;
-  }
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	cursor: default;
+
+	[data-slot="switch-input"] {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+
+	[data-slot="switch-control"] {
+		display: inline-flex;
+		align-items: center;
+		width: 28px;
+		height: 16px;
+		flex-shrink: 0;
+		border-radius: 3px;
+		border: 1px solid var(--border-weak-base);
+		background: var(--surface-base);
+		transition-property: background-color, border-color, box-shadow;
+		transition-duration: var(--transition-duration);
+		transition-timing-function: var(--transition-easing);
+	}
+
+	[data-slot="switch-thumb"] {
+		width: 14px;
+		height: 14px;
+		box-sizing: content-box;
+
+		border-radius: 2px;
+		border: 1px solid var(--border-base);
+		background: var(--icon-invert-base);
+
+		/* shadows/shadow-xs */
+		box-shadow:
+			0 1px 2px -1px rgba(19, 16, 16, 0.04),
+			0 1px 2px 0 rgba(19, 16, 16, 0.06),
+			0 1px 3px 0 rgba(19, 16, 16, 0.08);
+
+		transform: translateX(-1px);
+		transition-property: transform, background-color, border-color;
+		transition-duration: var(--transition-duration);
+		transition-timing-function: var(--transition-easing);
+	}
+
+	[data-slot="switch-label"] {
+		user-select: none;
+		color: var(--text-base);
+		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);
+		letter-spacing: var(--letter-spacing-normal);
+	}
+
+	[data-slot="switch-description"] {
+		color: var(--text-base);
+		font-family: var(--font-family-sans);
+		font-size: 12px;
+		font-weight: var(--font-weight-regular);
+		line-height: var(--line-height-normal);
+		letter-spacing: var(--letter-spacing-normal);
+	}
+
+	[data-slot="switch-error"] {
+		color: var(--text-error);
+		font-family: var(--font-family-sans);
+		font-size: 12px;
+		font-weight: var(--font-weight-regular);
+		line-height: var(--line-height-normal);
+		letter-spacing: var(--letter-spacing-normal);
+	}
+
+	&:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+		border-color: var(--border-hover);
+		background-color: var(--surface-hover);
+	}
+
+	&:focus-within:not([data-readonly]) [data-slot="switch-control"] {
+		border-color: var(--border-focus);
+		box-shadow: 0 0 0 2px var(--surface-focus);
+	}
+
+	&[data-checked] [data-slot="switch-control"] {
+		box-sizing: border-box;
+		border-color: var(--icon-strong-base);
+		background-color: var(--icon-strong-base);
+	}
+
+	&[data-checked] [data-slot="switch-thumb"] {
+		border: none;
+		transform: translateX(12px);
+		background-color: var(--icon-invert-base);
+	}
+
+	&[data-checked]:hover:not([data-disabled], [data-readonly])
+		[data-slot="switch-control"] {
+		border-color: var(--border-hover);
+		background-color: var(--surface-hover);
+	}
+
+	&[data-disabled] {
+		cursor: not-allowed;
+	}
+
+	&[data-disabled] [data-slot="switch-control"] {
+		border-color: var(--border-disabled);
+		background-color: var(--surface-disabled);
+	}
+
+	&[data-disabled] [data-slot="switch-thumb"] {
+		background-color: var(--icon-disabled);
+	}
+
+	&[data-invalid] [data-slot="switch-control"] {
+		border-color: var(--border-error);
+	}
+
+	&[data-readonly] {
+		cursor: default;
+		pointer-events: none;
+	}
 }