🎨 Improved dark mode across Shade and Ghost admin (DES-1397)

apps/admin/src/layout/app-sidebar/app-sidebar-header.tsx

@@ -60,7 +60,7 @@ function AppSidebarHeader({ ...props }: React.ComponentProps<typeof SidebarHeade
                 {showSearch && (
                     <Button
                         variant="outline"
-                        className="flex h-(--control-height) items-center justify-between rounded-full border-transparent pr-2 text-base text-muted-foreground shadow-xs hover:bg-background hover:text-gray-700 hover:shadow-sm dark:bg-gray-950 [&_svg]:stroke-2"
+                        className="flex h-(--control-height) items-center justify-between rounded-full border-transparent bg-white pr-2 text-base text-muted-foreground shadow-xs hover:bg-background hover:text-gray-700 hover:shadow-sm dark:border-gray-900/50 dark:bg-gray-900/30 dark:hover:border-gray-900/80 dark:hover:text-gray-400 [&_svg]:stroke-2"
                         onClick={openSearchModal}
                     >
                         <div className="flex items-center gap-2">

apps/admin/src/layout/app-sidebar/nav-content.tsx

@@ -30,7 +30,7 @@ function PostsNavItemContent({isActive, to}: {isActive: boolean; to: string}) {
             </NavMenuItem.Link>
             <a href="#/editor/post"
                 aria-label="Create new post"
-                className="absolute top-0 right-0 flex size-8 items-center justify-center rounded-full p-0 text-gray-700 ring-sidebar-ring outline-hidden transition-all hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2"
+                className="absolute top-0 right-0 flex size-8 items-center justify-center rounded-full p-0 text-gray-700 ring-sidebar-ring outline-hidden transition-all hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 dark:text-gray-800 dark:hover:text-white"
             >
                 <LucideIcon.Plus
                     size={20}

apps/admin/src/layout/app-sidebar/user-menu.tsx

@@ -131,7 +131,7 @@ function UserMenu(props: UserMenuProps) {
                     </div>
                     <div className="grid flex-1 text-left text-base leading-tight">
                         <span className="truncate font-semibold">{currentUser.data?.name}</span>
-                        <span className="-mt-px truncate text-sm text-muted-foreground">
+                        <span className="-mt-px truncate text-sm text-muted-foreground dark:text-gray-800">
                             {currentUser.data?.email}
                         </span>
                     </div>
@@ -141,7 +141,7 @@ function UserMenu(props: UserMenuProps) {
             <DropdownMenuContent
                 align="start"
                 sideOffset={10}
-                className={`w-[var(--radix-dropdown-menu-trigger-width)] ${showUpgradeBanner ? 'shadow-[0_18px_80px_0_rgba(0,0,0,0.07),0_7.52px_33.422px_0_rgba(0,0,0,0.05),0_4.021px_17.869px_0_rgba(0,0,0,0.04),0_2.254px_10.017px_0_rgba(0,0,0,0.04),0_1.197px_5.32px_0_rgba(0,0,0,0.03),0_0.498px_2.214px_0_rgba(0,0,0,0.02)]' : ''}`}
+                className={`w-[var(--radix-dropdown-menu-trigger-width)] dark:bg-surface-elevated-2 ${showUpgradeBanner ? 'shadow-[0_18px_80px_0_rgba(0,0,0,0.07),0_7.52px_33.422px_0_rgba(0,0,0,0.05),0_4.021px_17.869px_0_rgba(0,0,0,0.04),0_2.254px_10.017px_0_rgba(0,0,0,0.04),0_1.197px_5.32px_0_rgba(0,0,0,0.03),0_0.498px_2.214px_0_rgba(0,0,0,0.02)]' : ''}`}
             >
                 <UserMenuHeader
                     name={currentUser.data?.name}

apps/posts/src/components/label-picker/label-picker.tsx

@@ -291,7 +291,7 @@ const ComboboxPicker: React.FC<ComboboxPickerProps> = ({
     return (
         <div ref={containerRef} className="relative">
             <div
-                className="flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-transparent bg-gray-100 px-3 py-1 text-sm transition-colors focus-within:border-green focus-within:bg-transparent focus-within:shadow-[0_0_0_2px_rgba(48,207,67,.25)] dark:bg-gray-950"
+                className="flex min-h-9 w-full cursor-text flex-wrap items-center gap-1.5 rounded-md border border-control-border bg-surface-elevated px-3 py-1 text-control transition-colors focus-within:border-focus-ring focus-within:ring-2 focus-within:ring-focus-ring/25 dark:bg-transparent"
                 role="combobox"
                 onClick={() => {
                     inputRef.current?.focus();
@@ -301,7 +301,7 @@ const ComboboxPicker: React.FC<ComboboxPickerProps> = ({
                 <SelectedPills labels={selectedLabels} onToggle={onToggle} />
                 <input
                     ref={inputRef}
-                    className="min-w-[80px] flex-1 bg-transparent text-sm outline-hidden placeholder:text-muted-foreground"
+                    className="min-w-[80px] flex-1 bg-transparent text-control outline-hidden placeholder:text-muted-foreground"
                     placeholder={selectedLabels.length === 0 ? 'Search labels...' : ''}
                     value={search}
                     onChange={(e) => {

apps/posts/src/views/Automations/components/automation-header.tsx

@@ -40,7 +40,7 @@ const AutomationHeader: React.FC<AutomationHeaderProps> = ({
     const status = automation?.status;
 
     return (
-        <header className='relative z-10 flex h-14 shrink-0 items-center justify-between bg-background px-4 shadow-sm dark:border-b dark:border-gray-950'>
+        <header className='relative z-10 flex h-14 shrink-0 items-center justify-between bg-surface-elevated px-4 shadow-sm dark:border-b dark:border-gray-950'>
             <div className='flex min-w-0 items-center gap-3'>
                 <Button variant='ghost' asChild>
                     <Link aria-label='Back to automations' to='/automations'>

apps/posts/src/views/Automations/components/automations-help-cards.tsx

@@ -13,7 +13,7 @@ interface HelpCardLayoutProps {
     children?: React.ReactNode;
 }
 
-const cardClass = 'block w-full rounded-xl border border-border bg-card p-6 text-left transition-all hover:shadow-xs hover:bg-accent/50 group/card';
+const cardClass = 'block w-full rounded-xl border border-border bg-card p-6 text-left transition-all hover:shadow-xs hover:bg-table-row-hover group/card';
 
 const HelpCardBody: React.FC<HelpCardLayoutProps> = ({title, description, children}) => (
     <div className='flex items-center gap-6'>

apps/posts/src/views/Automations/components/automations-list.tsx

@@ -52,10 +52,10 @@ const AutomationsList: React.FC<AutomationsListProps> = ({automations = [], isLo
                     return (
                         <TableRow
                             key={automation.slug}
-                            className="grid w-full cursor-pointer grid-cols-[1fr_auto] items-center gap-x-4 p-2 hover:bg-muted/50 lg:p-0"
+                            className="grid w-full cursor-pointer grid-cols-[1fr_auto] items-center gap-x-4 p-2 hover:bg-table-row-hover lg:p-0"
                             data-testid="automation-list-row"
                         >
-                            <TableCell className="static min-w-0 group-hover:bg-transparent lg:p-4">
+                            <TableCell className="static min-w-0 lg:p-4">
                                 <Link
                                     className="before:absolute before:inset-0 before:z-10 before:rounded-sm focus-visible:outline-hidden focus-visible:before:ring-2 focus-visible:before:ring-focus-ring"
                                     to={`/automations/${automation.id}`}
@@ -70,7 +70,7 @@ const AutomationsList: React.FC<AutomationsListProps> = ({automations = [], isLo
                                     </span>
                                 )}
                             </TableCell>
-                            <TableCell className="text-right group-hover:bg-transparent lg:w-32 lg:p-4">
+                            <TableCell className="text-right lg:w-32 lg:p-4">
                                 <AutomationStatusBadge status={automation.status} />
                             </TableCell>
                         </TableRow>

apps/posts/src/views/Automations/components/canvas/automation-canvas.tsx

@@ -512,9 +512,9 @@ const AutomationCanvas: React.FC<AutomationCanvasProps> = ({
     }
 
     return (
-        <div className='relative flex-1 overflow-hidden bg-surface-page' data-testid='automation-canvas'>
+        <div className='relative flex-1 overflow-hidden bg-background' data-testid='automation-canvas'>
             <ReactFlow
-                className='[--xy-background-color:var(--color-grey-50)] [--xy-background-pattern-color:var(--color-grey-500)] [--xy-edge-stroke:var(--color-grey-300)] dark:[--xy-background-color:var(--color-black)] dark:[--xy-background-pattern-color:var(--color-grey-900)] dark:[--xy-edge-stroke:var(--color-grey-800)]'
+                className='[--xy-background-color:var(--color-grey-50)] [--xy-background-pattern-color:var(--color-grey-500)] [--xy-edge-stroke:var(--color-grey-300)] dark:[--xy-background-color:var(--background)] dark:[--xy-background-pattern-color:var(--color-grey-900)] dark:[--xy-edge-stroke:var(--color-grey-800)]'
                 defaultViewport={initialViewport.current}
                 edges={graph.edges}
                 edgesFocusable={false}

apps/posts/src/views/Automations/components/canvas/step-sidebar.tsx

@@ -359,7 +359,7 @@ export const StepSidebar: React.FC<StepSidebarProps> = ({automation, stepId, onD
             aria-hidden={!detail}
             aria-label='Step details'
             className={cn(
-                'absolute inset-y-0 right-0 z-[1] flex w-[calc(100%-6rem)] max-w-none translate-x-full flex-col gap-6 overflow-y-auto bg-background p-6 shadow-sm transition-transform duration-200 ease-out sm:w-[36rem] dark:border-l dark:border-gray-950',
+                'absolute inset-y-0 right-0 z-[1] flex w-[calc(100%-6rem)] max-w-none translate-x-full flex-col gap-6 overflow-y-auto bg-surface-elevated p-6 shadow-sm transition-transform duration-200 ease-out sm:w-[36rem] dark:border-l dark:border-gray-950',
                 detail ? 'translate-x-0' : 'pointer-events-none'
             )}
             data-state={detail ? 'open' : 'closed'}

apps/posts/src/views/PostAnalytics/Newsletter/components/feedback.tsx

@@ -82,7 +82,7 @@ const Feedback: React.FC<FeedbackProps> = ({feedbackStats}) => {
                                             <Avatar className='size-7'>
                                                 {item.member?.avatar_image && <img className='absolute aspect-square size-full' src={item.member?.avatar_image} />}
                                                 <AvatarFallback className='text-white' style={{
-                                                    backgroundColor: `${stringToHslColor(formatMemberName(item.member), '75', '55')}`
+                                                    backgroundColor: `${stringToHslColor(formatMemberName(item.member), '45', '55')}`
                                                 }}>{getMemberInitials(item.member)}</AvatarFallback>
                                             </Avatar>
                                             {formatMemberName(item.member)}

apps/posts/src/views/PostAnalytics/components/post-analytics-header.tsx

@@ -87,7 +87,7 @@ const PostAnalyticsHeader:React.FC<PostAnalyticsHeaderProps> = ({
 
     return (
         <>
-            <header className='z-50 -mx-8 bg-white/70 backdrop-blur-md dark:bg-black'>
+            <header className='z-50 -mx-8 bg-white/70 backdrop-blur-md dark:bg-background'>
                 <div
                     className='relative flex min-h-[102px] w-full items-start justify-between gap-5 px-8 pt-8 pb-0'
                     data-header='header'
@@ -206,7 +206,7 @@ const PostAnalyticsHeader:React.FC<PostAnalyticsHeaderProps> = ({
                     </div>
                 </div>
             </header>
-            <Navbar className='sticky top-0 z-50 -mb-8 transform-gpu flex-col items-start gap-y-0 border-none bg-white/70 py-8 backdrop-blur-md lg:flex-row lg:items-center dark:bg-black'>
+            <Navbar className='sticky top-0 z-50 -mb-8 transform-gpu flex-col items-start gap-y-0 border-none bg-white/70 py-8 backdrop-blur-md lg:flex-row lg:items-center dark:bg-background'>
                 {!isPostLoading && (
                     <PageMenu className='min-h-[34px]' defaultValue={currentTab} responsive>
                         {availableTabs.includes('Overview') && (

apps/posts/src/views/Tags/components/tags-list.tsx

@@ -87,7 +87,7 @@ function TagsList({
                             <TableRow
                                 key={key}
                                 {...props}
-                                className="group grid w-full grid-cols-[1fr_5rem] items-center gap-x-4 p-2 hover:bg-muted/50 md:grid-cols-[1fr_auto_5rem] lg:table-row lg:p-0 [&.group:hover_td]:bg-transparent"
+                                className="group grid w-full grid-cols-[1fr_5rem] items-center gap-x-4 p-2 md:grid-cols-[1fr_auto_5rem] lg:table-row lg:p-0"
                                 data-testid="tag-list-row"
                             >
                                 <TableCell className="static col-start-1 col-end-1 row-start-1 row-end-1 flex min-w-0 flex-col p-0 md:relative lg:table-cell lg:w-1/2 lg:p-4 xl:w-3/5">

apps/posts/src/views/comments/components/comments-list.tsx

@@ -136,7 +136,7 @@ function CommentsList({
                                 <div
                                     key={key}
                                     {...props}
-                                    className='grid w-full grid-cols-1 items-start justify-between gap-4 border-b p-3 hover:bg-muted/50 md:p-5 lg:grid-cols-[minmax(0,1fr)_144px]'
+                                    className='grid w-full grid-cols-1 items-start justify-between gap-4 border-b p-3 hover:bg-table-row-hover md:p-5 lg:grid-cols-[minmax(0,1fr)_144px]'
                                     data-testid="comment-list-row"
                                     onClick={() => {
                                     // Close sidebar when clicking on a comment in the main list

apps/posts/src/views/members/components/bulk-action-modals/delete-modal.tsx

@@ -50,21 +50,19 @@ export function DeleteModal({
                     <DialogTitle>Delete selected members?</DialogTitle>
                 </DialogHeader>
 
-                <div className="text-sm">
-                    {memberCount > 0 ? (
-                        <>
-                            <p>
-                                You&apos;re about to delete <strong>{memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}</strong>.
-                                This is permanent! All Ghost data will be deleted, this will have no effect on subscriptions in Stripe.
-                            </p>
-                            <p className="mt-4">
-                                A backup of your selection will be automatically downloaded to your device before deletion.
-                            </p>
-                        </>
-                    ) : (
-                        <p>No members are selected.</p>
-                    )}
-                </div>
+                {memberCount > 0 ? (
+                    <>
+                        <p>
+                            You&apos;re about to delete <strong>{memberCount.toLocaleString()} {memberCount === 1 ? 'member' : 'members'}</strong>.
+                            This is permanent! All Ghost data will be deleted, this will have no effect on subscriptions in Stripe.
+                        </p>
+                        <p>
+                            A backup of your selection will be automatically downloaded to your device before deletion.
+                        </p>
+                    </>
+                ) : (
+                    <p>No members are selected.</p>
+                )}
 
                 <DialogFooter>
                     <Button variant="outline" onClick={() => handleOpenChange(false)}>

apps/posts/src/views/members/components/members-filters.tsx

@@ -118,8 +118,8 @@ const MembersFilters: React.FC<MembersFiltersProps> = ({
     const hasFilters = filters.length > 0;
     const showIconOnlyTrigger = iconOnly && !hasFilters;
     const addFilterButtonClassName = cn(
-        'border-input bg-white dark:bg-background',
-        showIconOnlyTrigger && 'min-w-[34px] gap-0 px-2 text-[0px] lg:min-w-0 lg:gap-1.5 lg:px-3 lg:text-sm !px-3'
+        'bg-white dark:bg-background',
+        showIconOnlyTrigger && 'min-w-[34px] gap-0 px-2 text-[0px] lg:min-w-0 lg:gap-1.5 lg:px-3 lg:text-base !px-3'
     );
 
     const clearAndSaveButtons = hasFilters ? (

apps/posts/src/views/members/components/members-help-cards.tsx

@@ -11,7 +11,7 @@ interface MembersHelpCardProps {
 const MembersHelpCard: React.FC<MembersHelpCardProps> = ({children, description, title, url}) => {
     return (
         <a
-            className="group/card block rounded-xl border bg-card p-6 transition-all hover:bg-accent/50 hover:shadow-xs"
+            className="group/card block rounded-xl border bg-card p-6 transition-all hover:bg-table-row-hover hover:shadow-xs"
             href={url}
             rel="noopener noreferrer"
             target="_blank"

apps/posts/src/views/members/components/members-list-item.tsx

@@ -228,9 +228,6 @@ function MembersListItem({
     ...props
 }: MembersListItemProps &
     Omit<React.HTMLAttributes<HTMLTableRowElement>, 'onClick'>) {
-    const memberCellStyle = {
-        '--members-sticky-hover-bg': 'color-mix(in oklab, var(--muted) 50%, var(--background))'
-    } as CSSProperties;
     const handleRowClick = (event: React.MouseEvent<HTMLTableRowElement>) => {
         if (isModifiedClick(event)) {
             openMemberInNewTab(item.id, backPath);
@@ -258,7 +255,7 @@ function MembersListItem({
         >
             <TableCell className={cn(
                 'min-w-0 bg-background px-4 py-3 group-hover:bg-[var(--members-sticky-hover-bg)] max-sm:!w-full max-sm:!min-w-0 lg:sticky lg:left-0 lg:z-20'
-            )} style={memberCellStyle}>
+            )}>
                 <MembersListItemName backPath={backPath} item={item} onClick={onClick} />
                 {showPinnedEdge && (
                     <>

apps/shade/src/components/patterns/filters.tsx

@@ -303,11 +303,11 @@ const filterAddButtonVariants = cva(
         variants: {
             variant: {
                 solid: 'border border-input hover:bg-secondary/60',
-                outline: 'border border-border hover:bg-accent'
+                outline: 'border border-control-border hover:bg-interactive-hover dark:hover:bg-interactive-hover'
             },
             size: {
                 lg: 'h-10 gap-1.5 px-4 text-sm [&_svg:not([class*=size-])]:size-4',
-                md: 'h-(--control-height) gap-1.5 px-2.5 [&_svg:not([class*=size-])]:size-4',
+                md: 'h-(--control-height) gap-1.5 px-2.5 text-base [&_svg:not([class*=size-])]:size-4',
                 sm: 'h-8 gap-1.5 px-2.5 text-xs [&_svg:not([class*=size-])]:size-3.5'
             },
             radius: {
@@ -1395,7 +1395,7 @@ function SelectOptionsList<T = unknown>({
                     {(selectedOptions.length > 0 || unselectedOptions.length > 0) && <CommandSeparator />}
                     <div className="p-1.5">
                         <button
-                            className="flex w-full items-center justify-center rounded-xs px-2.5 py-1.5 text-muted-foreground hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
+                            className="flex w-full items-center justify-center rounded-xs px-2.5 py-1.5 text-muted-foreground hover:bg-interactive-hover hover:text-accent-foreground disabled:opacity-50"
                             disabled={isLoadingMore}
                             type="button"
                             onClick={onLoadMore}

apps/shade/src/components/ui/alert-dialog.tsx

@@ -17,7 +17,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({className, ...props}, ref) => (
     <AlertDialogPrimitive.Overlay
         className={cn(
-            'fixed inset-0 z-50 bg-black/30 backdrop-blur-none transform-gpu data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:backdrop-blur-[3px]',
+            'fixed inset-0 z-50 bg-black/30 dark:bg-black/60 transform-gpu data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
             className
         )}
         {...props}

apps/shade/src/components/ui/avatar.tsx

@@ -75,7 +75,7 @@ const Avatar = React.forwardRef<
     const identity = {name: name || undefined, email: email || undefined};
     const hasIdentity = !!(name || email);
     const initials = hasIdentity ? getMemberInitials(identity) : null;
-    const bgColor = hasIdentity ? stringToHslColor(formatMemberName(identity), '75', '55') : undefined;
+    const bgColor = hasIdentity ? stringToHslColor(formatMemberName(identity), '45', '55') : undefined;
 
     return (
         <AvatarPrimitive.Root