Slated light mode

Author: N2D4

apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/footer.tsx

@@ -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">
             {[

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/(overview)/setup-page.tsx

@@ -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">

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx

@@ -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>

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/users/[userId]/page-client.tsx

@@ -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,

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/widget-playground/page-client.tsx

@@ -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}

apps/dashboard/src/app/globals.css

@@ -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%;

apps/dashboard/src/components/navbar.tsx

@@ -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">

apps/dashboard/src/components/stack-companion.tsx

@@ -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}