| author | ![gravatar for 269035359+t3-code[bot]@users.noreply.github.com](https://s.gravatar.com/avatar/c0d8176b1da14b8abdd5067ff3098cf6?d=identicon&s=14) t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> 2026-09-24 19:19:41-03:00 |
| committer |  GitHub <noreply@github.com> 2026-09-24 19:19:41-03:00 |
| log | 720490adc9b8f3676c614f3611d8c7fd9f4dd368 |
| tree | 96572a4f071b70ba0e324203e2457962ed871626 |
| parent | a36af0637a63ebf316beb5db5670be226df01cbc |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): normalize disabled control opacity (#11441)
Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com>
Co-authored-by: Utkarsh Patil <73941998+UtkarshUsername@users.noreply.github.com>8 files changed, 12 insertions(+), 12 deletions(-)
apps/web/src/components/GitActionsControl.tsx+1-1
| ... | @@ -636,7 +636,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) { | ... | @@ -636,7 +636,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) { |
| 636 | return ( | 636 | return ( |
| 637 | <div | 637 | <div |
| 638 | key={option.value} | 638 | key={option.value} |
| 639 | className="relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-55 dark:border-transparent dark:bg-white/[0.035]" | 639 | className="relative flex cursor-not-allowed items-center gap-3 rounded-lg border border-border bg-background px-3 py-3 text-left opacity-64 dark:border-transparent dark:bg-white/[0.035]" |
| 640 | > | 640 | > |
| 641 | <option.Icon className="size-5 shrink-0 text-muted-foreground" aria-hidden /> | 641 | <option.Icon className="size-5 shrink-0 text-muted-foreground" aria-hidden /> |
| 642 | <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground"> | 642 | <span className="min-w-0 flex-1 truncate text-sm font-medium text-foreground"> |
apps/web/src/components/ThreadTerminalDrawer.tsx+4-4
| ... | @@ -1447,7 +1447,7 @@ export default function ThreadTerminalDrawer({ | ... | @@ -1447,7 +1447,7 @@ export default function ThreadTerminalDrawer({ |
| 1447 | <TerminalActionButton | 1447 | <TerminalActionButton |
| 1448 | className={`p-1 text-foreground/90 transition-colors ${ | 1448 | className={`p-1 text-foreground/90 transition-colors ${ |
| 1449 | hasReachedSplitLimit | 1449 | hasReachedSplitLimit |
| 1450 | ? "cursor-not-allowed opacity-45 hover:bg-transparent" | 1450 | ? "cursor-not-allowed opacity-64 hover:bg-transparent" |
| 1451 | : "hover:bg-accent" | 1451 | : "hover:bg-accent" |
| 1452 | }`} | 1452 | }`} |
| 1453 | onClick={onSplitTerminalAction} | 1453 | onClick={onSplitTerminalAction} |
| ... | @@ -1459,7 +1459,7 @@ export default function ThreadTerminalDrawer({ | ... | @@ -1459,7 +1459,7 @@ export default function ThreadTerminalDrawer({ |
| 1459 | <TerminalActionButton | 1459 | <TerminalActionButton |
| 1460 | className={`p-1 text-foreground/90 transition-colors ${ | 1460 | className={`p-1 text-foreground/90 transition-colors ${ |
| 1461 | hasReachedSplitLimit | 1461 | hasReachedSplitLimit |
| 1462 | ? "cursor-not-allowed opacity-45 hover:bg-transparent" | 1462 | ? "cursor-not-allowed opacity-64 hover:bg-transparent" |
| 1463 | : "hover:bg-accent" | 1463 | : "hover:bg-accent" |
| 1464 | }`} | 1464 | }`} |
| 1465 | onClick={onSplitTerminalVerticalAction} | 1465 | onClick={onSplitTerminalVerticalAction} |
| ... | @@ -1592,7 +1592,7 @@ export default function ThreadTerminalDrawer({ | ... | @@ -1592,7 +1592,7 @@ export default function ThreadTerminalDrawer({ |
| 1592 | <TerminalActionButton | 1592 | <TerminalActionButton |
| 1593 | className={`inline-flex h-full items-center px-1 text-foreground/90 transition-colors ${ | 1593 | className={`inline-flex h-full items-center px-1 text-foreground/90 transition-colors ${ |
| 1594 | hasReachedSplitLimit | 1594 | hasReachedSplitLimit |
| 1595 | ? "cursor-not-allowed opacity-45 hover:bg-transparent" | 1595 | ? "cursor-not-allowed opacity-64 hover:bg-transparent" |
| 1596 | : "hover:bg-accent/70" | 1596 | : "hover:bg-accent/70" |
| 1597 | }`} | 1597 | }`} |
| 1598 | onClick={onSplitTerminalAction} | 1598 | onClick={onSplitTerminalAction} |
| ... | @@ -1603,7 +1603,7 @@ export default function ThreadTerminalDrawer({ | ... | @@ -1603,7 +1603,7 @@ export default function ThreadTerminalDrawer({ |
| 1603 | <TerminalActionButton | 1603 | <TerminalActionButton |
| 1604 | className={`inline-flex h-full items-center border-l border-border/70 px-1 text-foreground/90 transition-colors ${ | 1604 | className={`inline-flex h-full items-center border-l border-border/70 px-1 text-foreground/90 transition-colors ${ |
| 1605 | hasReachedSplitLimit | 1605 | hasReachedSplitLimit |
| 1606 | ? "cursor-not-allowed opacity-45 hover:bg-transparent" | 1606 | ? "cursor-not-allowed opacity-64 hover:bg-transparent" |
| 1607 | : "hover:bg-accent/70" | 1607 | : "hover:bg-accent/70" |
| 1608 | }`} | 1608 | }`} |
| 1609 | onClick={onSplitTerminalVerticalAction} | 1609 | onClick={onSplitTerminalVerticalAction} |
apps/web/src/components/chat/ChatComposer.tsx+1-1
| ... | @@ -6401,7 +6401,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) | ... | @@ -6401,7 +6401,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps) |
| 6401 | <button | 6401 | <button |
| 6402 | type="button" | 6402 | type="button" |
| 6403 | data-chat-composer-transition-actions="true" | 6403 | data-chat-composer-transition-actions="true" |
| 6404 | className="flex size-8 shrink-0 items-center justify-center rounded-full bg-message-action text-message-action-foreground hover:bg-message-action-hover disabled:opacity-30" | 6404 | className="flex size-8 shrink-0 items-center justify-center rounded-full bg-message-action text-message-action-foreground hover:bg-message-action-hover disabled:opacity-64" |
| 6405 | disabled={collapsedComposerPrimaryActionDisabled} | 6405 | disabled={collapsedComposerPrimaryActionDisabled} |
| 6406 | aria-label={collapsedComposerPrimaryActionLabel} | 6406 | aria-label={collapsedComposerPrimaryActionLabel} |
| 6407 | onPointerDown={(event) => event.preventDefault()} | 6407 | onPointerDown={(event) => event.preventDefault()} |
apps/web/src/components/chat/ComposerPrimaryActions.tsx+1-1
| ... | @@ -215,7 +215,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ | ... | @@ -215,7 +215,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({ |
| 215 | <button | 215 | <button |
| 216 | type="submit" | 216 | type="submit" |
| 217 | className={cn( | 217 | className={cn( |
| 218 | "relative isolate flex h-9 w-9 items-center justify-center overflow-hidden rounded-full shadow-xs transition-all duration-150 enabled:cursor-pointer enabled:inset-shadow-2xs enabled:inset-shadow-white/16 hover:scale-105 active:inset-shadow-black/8 active:shadow-none disabled:pointer-events-none disabled:opacity-30 disabled:shadow-none disabled:hover:scale-100 sm:h-8 sm:w-8", | 218 | "relative isolate flex h-9 w-9 items-center justify-center overflow-hidden rounded-full shadow-xs transition-all duration-150 enabled:cursor-pointer enabled:inset-shadow-2xs enabled:inset-shadow-white/16 hover:scale-105 active:inset-shadow-black/8 active:shadow-none disabled:pointer-events-none disabled:opacity-64 disabled:shadow-none disabled:hover:scale-100 sm:h-8 sm:w-8", |
| 219 | stageBackdropVariant | 219 | stageBackdropVariant |
| 220 | ? "bg-transparent text-white enabled:shadow-black/24 enabled:hover:brightness-110" | 220 | ? "bg-transparent text-white enabled:shadow-black/24 enabled:hover:brightness-110" |
| 221 | : "bg-message-action text-message-action-foreground enabled:shadow-message-action/24 hover:bg-message-action-hover", | 221 | : "bg-message-action text-message-action-foreground enabled:shadow-message-action/24 hover:bg-message-action-hover", |
apps/web/src/components/settings/AddProviderInstanceDialog.tsx+1-1
| ... | @@ -287,7 +287,7 @@ export function AddProviderInstanceDialog({ | ... | @@ -287,7 +287,7 @@ export function AddProviderInstanceDialog({ |
| 287 | value={option.value} | 287 | value={option.value} |
| 288 | disabled | 288 | disabled |
| 289 | className={cn( | 289 | className={cn( |
| 290 | "relative flex cursor-not-allowed items-center gap-3 rounded-lg bg-card/60 px-3 py-3 text-left opacity-55 outline-none ring-1 ring-black/5 dark:bg-white/2 dark:ring-white/5", | 290 | "relative flex cursor-not-allowed items-center gap-3 rounded-lg bg-card/60 px-3 py-3 text-left opacity-64 outline-none ring-1 ring-black/5 dark:bg-white/2 dark:ring-white/5", |
| 291 | )} | 291 | )} |
| 292 | > | 292 | > |
| 293 | <IconComponent className="size-4 shrink-0 text-muted-foreground" aria-hidden /> | 293 | <IconComponent className="size-4 shrink-0 text-muted-foreground" aria-hidden /> |
apps/web/src/components/settings/settingsLayout.tsx+1-1
| ... | @@ -427,7 +427,7 @@ export function SettingsRow({ | ... | @@ -427,7 +427,7 @@ export function SettingsRow({ |
| 427 | tabIndex={rowProps.id ? -1 : rowProps.tabIndex} | 427 | tabIndex={rowProps.id ? -1 : rowProps.tabIndex} |
| 428 | data-slot="settings-row" | 428 | data-slot="settings-row" |
| 429 | className={cn( | 429 | className={cn( |
| 430 | "@container/settings-row rounded-xl px-3 sm:px-4 aria-disabled:opacity-50 aria-disabled:[&_*]:text-muted-foreground", | 430 | "@container/settings-row rounded-xl px-3 sm:px-4 aria-disabled:opacity-64 aria-disabled:[&_*]:text-muted-foreground", |
| 431 | children ? "pt-3 pb-1" : "py-3", | 431 | children ? "pt-3 pb-1" : "py-3", |
| 432 | className, | 432 | className, |
| 433 | )} | 433 | )} |
apps/web/src/components/ui/discovery-list.tsx+1-1
| ... | @@ -24,7 +24,7 @@ export function DiscoveryListRow({ | ... | @@ -24,7 +24,7 @@ export function DiscoveryListRow({ |
| 24 | <button | 24 | <button |
| 25 | type="button" | 25 | type="button" |
| 26 | {...props} | 26 | {...props} |
| 27 | className="group flex w-full items-center gap-3 px-3 py-3 text-left hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" | 27 | className="group flex w-full items-center gap-3 px-3 py-3 text-left hover:bg-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64" |
| 28 | > | 28 | > |
| 29 | {icon} | 29 | {icon} |
| 30 | <div className="flex min-w-0 flex-1 flex-col"> | 30 | <div className="flex min-w-0 flex-1 flex-col"> |
apps/web/src/components/ui/sidebar.tsx+2-2
| ... | @@ -654,7 +654,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { | ... | @@ -654,7 +654,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) { |
| 654 | } | 654 | } |
| 655 | 655 | ||
| 656 | const sidebarMenuButtonVariants = cva( | 656 | const sidebarMenuButtonVariants = cva( |
| 657 | "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground", | 657 | "peer/menu-button flex w-full cursor-pointer items-center gap-[var(--sidebar-control-gap)] overflow-hidden text-left outline-hidden ring-ring transition-[width,height,padding] hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-64 aria-disabled:pointer-events-none aria-disabled:opacity-64 data-[active=true]:bg-sidebar-row-selected data-[active=true]:font-medium data-[active=true]:text-sidebar-foreground data-[state=open]:hover:bg-sidebar-row-hover data-[state=open]:hover:text-sidebar-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-[var(--sidebar-content-inset)]! [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-[var(--sidebar-icon-color)] hover:[&>svg]:text-sidebar-foreground active:[&>svg]:text-sidebar-foreground data-[active=true]:[&>svg]:text-sidebar-foreground", |
| 658 | { | 658 | { |
| 659 | defaultVariants: { | 659 | defaultVariants: { |
| 660 | size: "default", | 660 | size: "default", |
| ... | @@ -767,7 +767,7 @@ function SidebarMenuSubButton({ | ... | @@ -767,7 +767,7 @@ function SidebarMenuSubButton({ |
| 767 | }) { | 767 | }) { |
| 768 | const defaultProps = { | 768 | const defaultProps = { |
| 769 | className: cn( | 769 | className: cn( |
| 770 | "-translate-x-px flex h-7 min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-ring hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-muted-foreground", | 770 | "-translate-x-px flex h-7 min-w-0 cursor-pointer items-center gap-2 overflow-hidden rounded-lg px-2 text-sidebar-foreground outline-hidden ring-ring hover:bg-sidebar-row-hover hover:text-sidebar-foreground focus-visible:ring-2 active:bg-sidebar-row-active active:text-sidebar-foreground disabled:pointer-events-none disabled:opacity-64 aria-disabled:pointer-events-none aria-disabled:opacity-64 [&>span:last-child]:truncate [&>svg:not([class*='size-'])]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-muted-foreground", |
| 771 | "data-[active=true]:bg-sidebar-row-selected data-[active=true]:text-sidebar-foreground", | 771 | "data-[active=true]:bg-sidebar-row-selected data-[active=true]:text-sidebar-foreground", |
| 772 | size === "sm" && "text-xs", | 772 | size === "sm" && "text-xs", |
| 773 | size === "md" && "text-sm", | 773 | size === "md" && "text-sm", |