Slated light mode

This commit is contained in:
Konstantin Wohlwend 2025-09-10 11:35:03 -07:00
parent 38cc461569
commit bd14f6be6a
8 changed files with 13 additions and 13 deletions

View File

@ -7,7 +7,7 @@ export default function Footer () {
<footer>
<Separator />
<div className="flex flex-col md:flex-row p-4 gap-4 backdrop-blur-md bg-white/20 dark:bg-black/20">
<div className="flex flex-col md:flex-row p-4 gap-4 backdrop-blur-md bg-slate-200/20 dark:bg-black/20">
<div className="flex flex-col gap-4 md:flex-1">
<ul className="flex gap-4 flex-grow">
{[

View File

@ -427,7 +427,7 @@ export default function SetupPage(props: { toMetrics: () => void }) {
<X className="w-4 h-4 ml-1 mt-0.5" />
</Button>
</div>
<div className="flex gap-4 justify-center items-center border rounded-2xl py-4 px-8 backdrop-blur-md bg-white/20 dark:bg-black/20">
<div className="flex gap-4 justify-center items-center border rounded-2xl py-4 px-8 backdrop-blur-md bg-slate-200/20 dark:bg-black/20">
<GlobeIllustration />
<div className="flex flex-col gap-4">

View File

@ -511,14 +511,14 @@ export default function SidebarLayout(props: { projectId: string, children?: Rea
return (
<div className="w-full flex">
{/* Left Sidebar */}
<div className="flex-col border-r min-w-[240px] h-screen sticky top-0 hidden md:flex backdrop-blur-md bg-white/20 dark:bg-black/20 z-[10]">
<div className="flex-col border-r min-w-[240px] h-screen sticky top-0 hidden md:flex backdrop-blur-md bg-slate-200/20 dark:bg-black/20 z-[10]">
<SidebarContent projectId={props.projectId} />
</div>
{/* Main Content Area */}
<div className="flex flex-col flex-grow w-0">
{/* Header */}
<div className="h-14 border-b flex items-center justify-between sticky top-0 backdrop-blur-md bg-white/20 dark:bg-black/20 z-10 px-4 md:px-6">
<div className="h-14 border-b flex items-center justify-between sticky top-0 backdrop-blur-md bg-slate-200/20 dark:bg-black/20 z-10 px-4 md:px-6">
<div className="hidden md:flex">
<HeaderBreadcrumb projectId={props.projectId} />
</div>
@ -558,7 +558,7 @@ export default function SidebarLayout(props: { projectId: string, children?: Rea
</div>
{/* Stack Companion - Sticky positioned like left sidebar */}
<div className="h-screen sticky top-0 backdrop-blur-md bg-white/20 dark:bg-black/20 z-[10]">
<div className="h-screen sticky top-0 backdrop-blur-md bg-slate-200/20 dark:bg-black/20 z-[10]">
<StackCompanion onExpandedChange={setCompanionExpanded} />
</div>
</div>

View File

@ -125,8 +125,8 @@ function EditableInput({
tabIndex={readOnly ? -1 : undefined}
className={cn(
"w-full px-1 py-0 h-[unset] border-transparent",
/* Hover */ !readOnly && "hover:ring-1 hover:ring-slate-300 dark:hover:ring-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 hover:cursor-pointer",
/* Focus */ !readOnly && "focus:cursor-[unset] focus-visible:ring-slate-500 dark:focus-visible:ring-slate-50 focus-visible:bg-slate-100 dark:focus-visible:bg-slate-800",
/* Hover */ !readOnly && "hover:ring-1 hover:ring-slate-300 dark:hover:ring-gray-500 hover:bg-slate-50 dark:hover:bg-gray-800 hover:cursor-pointer",
/* Focus */ !readOnly && "focus:cursor-[unset] focus-visible:ring-slate-500 dark:focus-visible:ring-gray-50 focus-visible:bg-slate-100 dark:focus-visible:bg-gray-800",
readOnly && "focus-visible:ring-0 cursor-default",
shiftTextToLeft && "ml-[-7px]",
inputClassName,

View File

@ -1815,7 +1815,7 @@ function BigIconButton({ icon, children, ...props }: { icon: React.ReactNode} &
return (
<Button
variant="outline"
className={cn("h-20 w-20 p-1 rounded-full backdrop-blur-md bg-white/20 dark:bg-black/20")}
className={cn("h-20 w-20 p-1 rounded-full backdrop-blur-md bg-slate-200/20 dark:bg-black/20")}
{...props}
>
{icon}

View File

@ -34,8 +34,8 @@
--success: 120 40% 50%;
--success-foreground: 0 0% 98%;
--border: 240 5.9% 80%;
--border-in-card: 240 5.9% 80%;
--border: 240 5.9% 90%;
--border-in-card: 240 5.9% 90%;
--input: 240 5.9% 80%;
--input-in-card: 240 5.9% 80%;
--ring: 240 10% 3.9%;

View File

@ -11,7 +11,7 @@ export function Navbar({ ...props }) {
const { resolvedTheme, setTheme } = useTheme();
return (
<header
className={`sticky top-0 z-30 flex items-center justify-between border-b backdrop-blur-md bg-white/20 dark:bg-black/20 px-4 shrink-0 ${props.className || ""}`}
className={`sticky top-0 z-30 flex items-center justify-between border-b backdrop-blur-md bg-slate-200/20 dark:bg-black/20 px-4 shrink-0 ${props.className || ""}`}
style={{ height: `50px` }}
>
<div className="flex items-center justify-center">

View File

@ -214,8 +214,8 @@ export function StackCompanion({ className, onExpandedChange }: StackCompanionPr
{/* Single Expanding Sidebar */}
<div
className={cn(
"h-screen bg-background border-l shadow-lg flex relative",
isExpanded ? "" : "w-12",
"h-screen border-l flex relative",
isExpanded ? "shadow-lg" : "w-12",
!isResizing ? "transition-all duration-300 ease-in-out" : ""
)}
style={isExpanded ? { width: `${width}px` } : undefined}