authorgravatar for maria@kuuro.netmaria-rcks <maria@kuuro.net> 2026-07-22 19:08:21-04:00
committergravatar for maria@kuuro.netmaria <maria@kuuro.net> 2026-07-23 01:13:29-04:00
logb6a2563db7c0cd1b2df56540852d48c3c96aeaac
tree1cb4090eeabc5b7bfd2d948804a0925ef4fb8721
parentc5ff51ec1fff1a9f0447b0336d645ab0f089db62

style(web): polish dark mode dialogs

4 files changed, 83 insertions(+), 35 deletions(-)

apps/web/src/components/GitActionsControl.tsx+33-24
...@@ -544,9 +544,12 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -544,9 +544,12 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
544544
545 return (545 return (
546 <Dialog open={props.open} onOpenChange={handleOpenChange}>546 <Dialog open={props.open} onOpenChange={handleOpenChange}>
547 <DialogPopup className="workflow-dialog-surface max-w-xl overflow-hidden before:hidden">547 <DialogPopup
548 backdropClassName="bg-black/40 backdrop-blur-none"
549 className="workflow-dialog-surface max-w-xl overflow-hidden before:hidden"
550 >
548 <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-transparent">551 <div className="flex min-h-0 flex-col overflow-hidden border-foreground/10 bg-transparent">
549 <DialogHeader className="border-b border-border/70 bg-foreground/[0.025]">552 <DialogHeader className="border-b border-border/70 bg-foreground/[0.025] dark:border-transparent dark:bg-transparent">
550 <DialogTitle>Publish repository</DialogTitle>553 <DialogTitle>Publish repository</DialogTitle>
551 <DialogDescription>554 <DialogDescription>
552 Pick where to host it, then point us at a repo to push to.555 Pick where to host it, then point us at a repo to push to.
...@@ -567,10 +570,10 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -567,10 +570,10 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
567 className={cn(570 className={cn(
568 "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",571 "grid min-w-0 grid-cols-[1rem_minmax(0,1fr)] gap-x-2 rounded-lg border px-3 py-2 text-left",
569 index === publishWizardStep572 index === publishWizardStep
570 ? "border-primary bg-primary/10 ring-1 ring-primary/25"573 ? "border-primary bg-primary/10 ring-1 ring-primary/25 dark:border-transparent"
571 : isComplete574 : isComplete
572 ? "border-border bg-background"575 ? "border-border bg-background dark:border-transparent dark:bg-white/[0.05]"
573 : "border-border bg-muted/40",576 : "border-border bg-muted/40 dark:border-transparent dark:bg-white/[0.025]",
574 !isClickable && "cursor-default",577 !isClickable && "cursor-default",
575 )}578 )}
576 >579 >
...@@ -602,7 +605,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -602,7 +605,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
602 </div>605 </div>
603 </DialogHeader>606 </DialogHeader>
604607
605 <DialogPanel className="space-y-5 border-b border-border/70 bg-muted/20 px-6 py-5">608 <DialogPanel className="space-y-5 border-b border-border/70 bg-muted/20 px-6 py-5 dark:border-transparent dark:bg-transparent">
606 <AnimatedHeight>609 <AnimatedHeight>
607 <div className={cn("space-y-2", publishWizardStep !== 0 && "hidden")}>610 <div className={cn("space-y-2", publishWizardStep !== 0 && "hidden")}>
608 <span611 <span
...@@ -627,7 +630,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -627,7 +630,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
627 return (630 return (
628 <div631 <div
629 key={option.value}632 key={option.value}
630 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"633 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]"
631 >634 >
632 <option.Icon635 <option.Icon
633 className="size-5 shrink-0 text-muted-foreground"636 className="size-5 shrink-0 text-muted-foreground"
...@@ -670,8 +673,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -670,8 +673,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
670 "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",673 "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-3 text-left outline-none transition-[background-color,border-color,box-shadow]",
671 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",674 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
672 isSelected675 isSelected
673 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"676 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35 dark:border-transparent dark:bg-primary/10 dark:shadow-none dark:ring-1 dark:ring-primary/30"
674 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",677 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50 dark:border-transparent dark:bg-white/[0.035] dark:hover:bg-accent",
675 )}678 )}
676 >679 >
677 <option.Icon className="size-5 shrink-0" aria-hidden />680 <option.Icon className="size-5 shrink-0" aria-hidden />
...@@ -756,8 +759,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -756,8 +759,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
756 "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left outline-none transition-[background-color,border-color,box-shadow]",759 "relative flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 text-left outline-none transition-[background-color,border-color,box-shadow]",
757 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",760 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
758 isSelected761 isSelected
759 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35"762 ? "border-primary bg-background shadow-sm ring-2 ring-primary/35 dark:border-transparent dark:bg-primary/10 dark:shadow-none dark:ring-1 dark:ring-primary/30"
760 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50",763 : "border-border bg-background hover:border-foreground/20 hover:bg-muted/50 dark:border-transparent dark:bg-white/[0.035] dark:hover:bg-accent",
761 )}764 )}
762 >765 >
763 <option.Icon766 <option.Icon
...@@ -831,8 +834,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -831,8 +834,8 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
831 "rounded-md border px-3 py-1.5 text-center text-sm font-medium outline-none transition",834 "rounded-md border px-3 py-1.5 text-center text-sm font-medium outline-none transition",
832 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",835 "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
833 isSelected836 isSelected
834 ? "border-primary bg-background ring-2 ring-primary/35 text-foreground"837 ? "border-primary bg-background ring-2 ring-primary/35 text-foreground dark:border-transparent dark:bg-primary/10 dark:ring-1 dark:ring-primary/30"
835 : "border-border bg-background text-muted-foreground hover:border-foreground/20 hover:text-foreground",838 : "border-border bg-background text-muted-foreground hover:border-foreground/20 hover:text-foreground dark:border-transparent dark:bg-white/[0.035]",
836 )}839 )}
837 >840 >
838 {value === "ssh" ? "SSH" : "HTTPS"}841 {value === "ssh" ? "SSH" : "HTTPS"}
...@@ -849,7 +852,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -849,7 +852,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
849 <div852 <div
850 role="status"853 role="status"
851 aria-live="polite"854 aria-live="polite"
852 className="flex items-center gap-2 rounded-md border border-input bg-muted/40 px-3 py-2 text-xs text-muted-foreground"855 className="flex items-center gap-2 rounded-md border border-input bg-muted/40 px-3 py-2 text-xs text-muted-foreground dark:border-transparent dark:bg-white/[0.035]"
853 >856 >
854 <Spinner className="size-3.5" aria-hidden />857 <Spinner className="size-3.5" aria-hidden />
855 Publishing repository to {publishProviderLabel}...858 Publishing repository to {publishProviderLabel}...
...@@ -884,7 +887,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -884,7 +887,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
884 : `Remote "${publishResult.remoteName}" is set up. Make a commit and push it to share your code.`}887 : `Remote "${publishResult.remoteName}" is set up. Make a commit and push it to share your code.`}
885 </p>888 </p>
886 </div>889 </div>
887 <div className="flex items-center gap-2 rounded-lg border border-input bg-muted/40 px-3 py-2">890 <div className="flex items-center gap-2 rounded-lg border border-input bg-muted/40 px-3 py-2 dark:border-transparent dark:bg-white/[0.035]">
888 <currentPublishProvider.Icon className="size-3.5 shrink-0 text-muted-foreground" />891 <currentPublishProvider.Icon className="size-3.5 shrink-0 text-muted-foreground" />
889 <span className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">892 <span className="min-w-0 flex-1 truncate font-mono text-xs text-foreground">
890 {publishResult.repository.nameWithOwner}893 {publishResult.repository.nameWithOwner}
...@@ -905,7 +908,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -905,7 +908,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
905 </Button>908 </Button>
906 </>909 </>
907 ) : (910 ) : (
908 <div className="rounded-md border border-input bg-background px-3 py-2 text-xs text-muted-foreground">911 <div className="rounded-md border border-input bg-background px-3 py-2 text-xs text-muted-foreground dark:border-transparent dark:bg-white/[0.035]">
909 Publish result unavailable.912 Publish result unavailable.
910 </div>913 </div>
911 )}914 )}
...@@ -913,7 +916,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {...@@ -913,7 +916,7 @@ function PublishRepositoryDialog(props: PublishRepositoryDialogProps) {
913 </AnimatedHeight>916 </AnimatedHeight>
914 </DialogPanel>917 </DialogPanel>
915918
916 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025]">919 <DialogFooter className="dark:border-transparent dark:bg-transparent">
917 {publishWizardStep === 2 ? (920 {publishWizardStep === 2 ? (
918 <Button size="sm" onClick={() => handleOpenChange(false)}>921 <Button size="sm" onClick={() => handleOpenChange(false)}>
919 Done922 Done
...@@ -1736,7 +1739,7 @@ export default function GitActionsControl({...@@ -1736,7 +1739,7 @@ export default function GitActionsControl({
1736 >1739 >
1737 <ChevronDownIcon aria-hidden="true" className="size-4" />1740 <ChevronDownIcon aria-hidden="true" className="size-4" />
1738 </MenuTrigger>1741 </MenuTrigger>
1739 <MenuPopup align="end" className="command-menu-surface w-full">1742 <MenuPopup align="end" className="w-full">
1740 {gitActionMenuItems.map((item) => {1743 {gitActionMenuItems.map((item) => {
1741 const disabledReason = getMenuActionDisabledReason({1744 const disabledReason = getMenuActionDisabledReason({
1742 item,1745 item,
...@@ -1825,13 +1828,16 @@ export default function GitActionsControl({...@@ -1825,13 +1828,16 @@ export default function GitActionsControl({
1825 }1828 }
1826 }}1829 }}
1827 >1830 >
1828 <DialogPopup className="workflow-dialog-surface before:hidden">1831 <DialogPopup
1832 backdropClassName="bg-black/40 backdrop-blur-none"
1833 className="command-palette-dialog-surface workflow-dialog-surface before:hidden"
1834 >
1829 <DialogHeader>1835 <DialogHeader>
1830 <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>1836 <DialogTitle>{COMMIT_DIALOG_TITLE}</DialogTitle>
1831 <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>1837 <DialogDescription>{COMMIT_DIALOG_DESCRIPTION}</DialogDescription>
1832 </DialogHeader>1838 </DialogHeader>
1833 <DialogPanel className="space-y-4">1839 <DialogPanel className="space-y-4">
1834 <div className="space-y-3 rounded-lg border border-input bg-muted/40 p-3 text-xs">1840 <div className="space-y-3 rounded-lg border border-input bg-muted/40 p-3 text-xs dark:border-transparent dark:bg-white/[0.035]">
1835 <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">1841 <div className="grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-1">
1836 <span className="text-muted-foreground">Branch</span>1842 <span className="text-muted-foreground">Branch</span>
1837 <span className="flex items-center justify-between gap-2">1843 <span className="flex items-center justify-between gap-2">
...@@ -1880,7 +1886,7 @@ export default function GitActionsControl({...@@ -1880,7 +1886,7 @@ export default function GitActionsControl({
1880 <p className="font-medium">none</p>1886 <p className="font-medium">none</p>
1881 ) : (1887 ) : (
1882 <div className="space-y-2">1888 <div className="space-y-2">
1883 <ScrollArea className="h-44 rounded-md border border-input bg-background">1889 <ScrollArea className="h-44 rounded-md border border-input bg-background dark:border-transparent dark:bg-white/[0.025]">
1884 <div className="space-y-1 p-1">1890 <div className="space-y-1 p-1">
1885 {allFiles.map((file) => {1891 {allFiles.map((file) => {
1886 const isExcluded = excludedFiles.has(file.path);1892 const isExcluded = excludedFiles.has(file.path);
...@@ -1955,7 +1961,7 @@ export default function GitActionsControl({...@@ -1955,7 +1961,7 @@ export default function GitActionsControl({
1955 />1961 />
1956 </div>1962 </div>
1957 </DialogPanel>1963 </DialogPanel>
1958 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025]">1964 <DialogFooter className="dark:border-transparent dark:bg-transparent">
1959 <Button1965 <Button
1960 variant="outline"1966 variant="outline"
1961 size="sm"1967 size="sm"
...@@ -1998,14 +2004,17 @@ export default function GitActionsControl({...@@ -1998,14 +2004,17 @@ export default function GitActionsControl({
1998 }2004 }
1999 }}2005 }}
2000 >2006 >
2001 <DialogPopup className="workflow-dialog-surface max-w-xl before:hidden">2007 <DialogPopup
2008 backdropClassName="bg-black/40 backdrop-blur-none"
2009 className="workflow-dialog-surface max-w-xl before:hidden"
2010 >
2002 <DialogHeader>2011 <DialogHeader>
2003 <DialogTitle>2012 <DialogTitle>
2004 {pendingDefaultBranchActionCopy?.title ?? "Run action on default refName?"}2013 {pendingDefaultBranchActionCopy?.title ?? "Run action on default refName?"}
2005 </DialogTitle>2014 </DialogTitle>
2006 <DialogDescription>{pendingDefaultBranchActionCopy?.description}</DialogDescription>2015 <DialogDescription>{pendingDefaultBranchActionCopy?.description}</DialogDescription>
2007 </DialogHeader>2016 </DialogHeader>
2008 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025] sm:flex-wrap sm:items-center">2017 <DialogFooter className="dark:border-transparent dark:bg-transparent sm:flex-wrap sm:items-center">
2009 <Button2018 <Button
2010 className="w-full sm:mr-auto sm:w-auto"2019 className="w-full sm:mr-auto sm:w-auto"
2011 variant="outline"2020 variant="outline"
apps/web/src/components/ProjectScriptsControl.tsx+11-8
...@@ -364,7 +364,10 @@ export default function ProjectScriptsControl({...@@ -364,7 +364,10 @@ export default function ProjectScriptsControl({
364 }}364 }}
365 open={dialogOpen}365 open={dialogOpen}
366 >366 >
367 <DialogPopup className="workflow-dialog-surface before:hidden">367 <DialogPopup
368 backdropClassName="bg-black/40 backdrop-blur-none"
369 className="command-palette-dialog-surface workflow-dialog-surface before:hidden"
370 >
368 <DialogHeader>371 <DialogHeader>
369 <DialogTitle>{isEditing ? "Edit Action" : "Add Action"}</DialogTitle>372 <DialogTitle>{isEditing ? "Edit Action" : "Add Action"}</DialogTitle>
370 <DialogDescription>373 <DialogDescription>
...@@ -382,7 +385,7 @@ export default function ProjectScriptsControl({...@@ -382,7 +385,7 @@ export default function ProjectScriptsControl({
382 <Button385 <Button
383 type="button"386 type="button"
384 variant="outline"387 variant="outline"
385 className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:data-pressed:before:shadow-[0_-1px_--theme(--color-white/6%)]"388 className="size-9 shrink-0 hover:bg-popover active:bg-popover data-pressed:bg-popover data-pressed:shadow-xs/5 data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:border-transparent dark:bg-white/[0.035] dark:data-pressed:before:shadow-none"
386 aria-label="Choose icon"389 aria-label="Choose icon"
387 />390 />
388 }391 }
...@@ -397,10 +400,10 @@ export default function ProjectScriptsControl({...@@ -397,10 +400,10 @@ export default function ProjectScriptsControl({
397 <button400 <button
398 key={entry.id}401 key={entry.id}
399 type="button"402 type="button"
400 className={`relative flex flex-col items-center gap-2 rounded-md border px-2 py-2 text-xs ${403 className={`relative flex flex-col items-center gap-2 rounded-md border px-2 py-2 text-xs dark:border-transparent ${
401 isSelected404 isSelected
402 ? "border-primary/70 bg-primary/10"405 ? "border-primary/70 bg-primary/10 dark:ring-1 dark:ring-primary/30"
403 : "border-border/70 hover:bg-accent/60"406 : "border-border/70 hover:bg-accent/60 dark:bg-white/[0.035]"
404 }`}407 }`}
405 onClick={() => {408 onClick={() => {
406 setIcon(entry.id);409 setIcon(entry.id);
...@@ -458,7 +461,7 @@ export default function ProjectScriptsControl({...@@ -458,7 +461,7 @@ export default function ProjectScriptsControl({
458 Open this URL in the in-app preview when this action runs.461 Open this URL in the in-app preview when this action runs.
459 </p>462 </p>
460 </div>463 </div>
461 <label className="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm">464 <label className="flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035]">
462 <span>Run automatically on worktree creation</span>465 <span>Run automatically on worktree creation</span>
463 <Switch466 <Switch
464 checked={runOnWorktreeCreate}467 checked={runOnWorktreeCreate}
...@@ -466,7 +469,7 @@ export default function ProjectScriptsControl({...@@ -466,7 +469,7 @@ export default function ProjectScriptsControl({
466 />469 />
467 </label>470 </label>
468 <label471 <label
469 className={`flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm ${472 className={`flex items-center justify-between gap-3 rounded-md border border-border/70 px-3 py-2 text-sm dark:border-transparent dark:bg-white/[0.035] ${
470 previewUrl.trim().length === 0 ? "opacity-60" : ""473 previewUrl.trim().length === 0 ? "opacity-60" : ""
471 }`}474 }`}
472 >475 >
...@@ -480,7 +483,7 @@ export default function ProjectScriptsControl({...@@ -480,7 +483,7 @@ export default function ProjectScriptsControl({
480 {validationError && <p className="text-sm text-destructive">{validationError}</p>}483 {validationError && <p className="text-sm text-destructive">{validationError}</p>}
481 </form>484 </form>
482 </DialogPanel>485 </DialogPanel>
483 <DialogFooter className="dark:border-white/5 dark:bg-white/[0.025]">486 <DialogFooter className="dark:border-transparent dark:bg-transparent">
484 {isEditing && (487 {isEditing && (
485 <Button488 <Button
486 type="button"489 type="button"
apps/web/src/components/ui/dialog.tsx+3-1
...@@ -49,17 +49,19 @@ function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props)...@@ -49,17 +49,19 @@ function DialogViewport({ className, ...props }: DialogPrimitive.Viewport.Props)
4949
50function DialogPopup({50function DialogPopup({
51 className,51 className,
52 backdropClassName,
52 children,53 children,
53 showCloseButton = true,54 showCloseButton = true,
54 bottomStickOnMobile = true,55 bottomStickOnMobile = true,
55 ...props56 ...props
56}: DialogPrimitive.Popup.Props & {57}: DialogPrimitive.Popup.Props & {
58 backdropClassName?: string;
57 showCloseButton?: boolean;59 showCloseButton?: boolean;
58 bottomStickOnMobile?: boolean;60 bottomStickOnMobile?: boolean;
59}) {61}) {
60 return (62 return (
61 <DialogPortal>63 <DialogPortal>
62 <DialogBackdrop />64 <DialogBackdrop className={backdropClassName} />
63 <DialogViewport65 <DialogViewport
64 className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}66 className={cn(bottomStickOnMobile && "max-sm:grid-rows-[1fr_auto] max-sm:p-0 max-sm:pt-12")}
65 >67 >
apps/web/src/index.css+36-2
...@@ -404,13 +404,22 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -404,13 +404,22 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
404404
405 .workflow-dialog-surface {405 .workflow-dialog-surface {
406 border-color: transparent;406 border-color: transparent;
407 background: color-mix(in srgb, var(--popover) 82%, transparent);407 background: var(--secondary);
408 -webkit-backdrop-filter: blur(16px);408 -webkit-backdrop-filter: blur(16px);
409 backdrop-filter: blur(16px);409 backdrop-filter: blur(16px);
410 box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);410 box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%);
411 }411 }
412412
413 .command-palette-dialog-surface {
414 border-color: transparent !important;
415 background: var(--secondary) !important;
416 -webkit-backdrop-filter: blur(16px);
417 backdrop-filter: blur(16px);
418 box-shadow: 0 24px 64px -24px rgb(0 0 0 / 65%) !important;
419 }
420
413 .dark .dropdown-glass {421 .dark .dropdown-glass {
422 background: color-mix(in srgb, var(--secondary) 80%, var(--background));
414 box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%);423 box-shadow: 0 18px 44px -18px rgb(0 0 0 / 80%);
415 }424 }
416425
...@@ -425,7 +434,32 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil...@@ -425,7 +434,32 @@ html[data-mobile-composer-route-transition="true"]::view-transition-old(t3-mobil
425 }434 }
426435
427 .dark .workflow-dialog-surface {436 .dark .workflow-dialog-surface {
428 background: color-mix(in srgb, var(--popover) 76%, transparent);437 background: var(--secondary);
438 -webkit-backdrop-filter: blur(16px);
439 backdrop-filter: blur(16px);
440 }
441
442 .dark .command-palette-dialog-surface {
443 box-shadow: none !important;
444 }
445
446 .dark
447 .command-palette-dialog-surface
448 :is([data-slot="input-control"], [data-slot="textarea-control"]) {
449 background: var(--secondary) !important;
450 }
451
452 .dark
453 .command-palette-dialog-surface
454 :is([data-slot="input-control"], [data-slot="textarea-control"]):not(:has(:focus-visible)) {
455 border-color: transparent !important;
456 box-shadow: none !important;
457 }
458
459 .dark
460 .command-palette-dialog-surface
461 :is([data-slot="input-control"], [data-slot="textarea-control"])::before {
462 box-shadow: none !important;
429 }463 }
430464
431 .dark .chat-composer-context-strip::before {465 .dark .chat-composer-context-strip::before {