From c994dc112c86abc3e661bcecbe0e3cf13a8be717 Mon Sep 17 00:00:00 2001
From: AquaWolf <3daquawolf@gmail.com>
Date: Mon, 3 Mar 2025 21:16:27 +0100
Subject: [PATCH] added new App changes and background for theme

---
 packages/www/src/App.tsx     | 29 ++---------------------------
 packages/www/src/ui/theme.ts |  9 +++++----
 2 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/packages/www/src/App.tsx b/packages/www/src/App.tsx
index 965e7da9..aad73ca6 100644
--- a/packages/www/src/App.tsx
+++ b/packages/www/src/App.tsx
@@ -6,7 +6,6 @@ import '@fontsource/geist-sans/600.css';
 import '@fontsource/geist-sans/700.css';
 import '@fontsource/geist-sans/800.css';
 import '@fontsource/geist-sans/900.css';
-import { TeamCreate } from './pages/new';
 import { PlayComponent } from './pages/play';
 import { styled } from "@macaron-css/solid";
 import { useStorage } from './providers/account';
@@ -35,10 +34,10 @@ globalStyle("html", {
     // Hardcode colors
     "@media": {
         "(prefers-color-scheme: light)": {
-            backgroundColor: "hsla(0,0%,98%)",
+            backgroundColor: "#f5f5f5",
         },
         "(prefers-color-scheme: dark)": {
-            backgroundColor: "hsla(0,0%,0%)",
+            backgroundColor: "#1e1e1e",
         },
     },
 });
@@ -91,32 +90,8 @@ export const App: Component = () => {
                         <AuthProvider>
                             {props.children}
                         </AuthProvider>
-                        // <CommandBar>
-                        //         <ReplicacheStatusProvider>
-                        //             <DummyProvider>
-                        //                 <DummyConfigProvider>
-                        //                     <FlagsProvider>
-                        //                         <RealtimeProvider />
-                        //                         <LocalProvider>
-                        //                             <LocalLogsProvider>
-                        //                                 <GlobalCommands />
-                        //                                 {props.children}
-                        //                             </LocalLogsProvider>
-                        //                         </LocalProvider>
-                        //                     </FlagsProvider>
-                        //                 </DummyConfigProvider>
-                        //             </DummyProvider>
-                        //         </ReplicacheStatusProvider>
-                        //     </AuthProvider>
-                        // </CommandBar>
                     )}
                 >
-                    {/* <Route path="local" component={Local} />
-                        <Route path="debug" component={DebugRoute} />
-                        <Route path="design" component={Design} />
-                        <Route path="workspace" component={WorkspaceCreate} />
-                        <Route path=":workspaceSlug">{WorkspaceRoute}</Route> */}
-                    <Route path="new" component={TeamCreate} />
                     <Route path="play/:id" component={PlayComponent} />
                     <Route
                         path="/"
diff --git a/packages/www/src/ui/theme.ts b/packages/www/src/ui/theme.ts
index c51974ef..5f6fbddd 100644
--- a/packages/www/src/ui/theme.ts
+++ b/packages/www/src/ui/theme.ts
@@ -210,8 +210,8 @@ const light = (() => {
     }
 
     const background = {
-        d100: 'hsla(0,0%,100%)',
-        d200: 'hsla(0,0%,98%)'
+        d100: '#f5f5f5',
+        d200: 'oklch(from #f5f5f5 calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h)'
     };
 
     const contrastFg = '#ffffff';
@@ -371,9 +371,10 @@ const dark = (() => {
     }
 
     const background = {
-        d100: 'hsla(0,0%,4%)',
-        d200: 'hsla(0,0%,0%)'
+        d200: '#171717',
+        d100: "oklch(from #171717 calc(l + (-0.06 * clamp(0, calc((l - 0.714) * 1000), 1) + 0.03)) c h)"
     };
+    
     const contrastFg = '#ffffff';
     const focusBorder = `0 0 0 1px ${grayAlpha.d600}, 0px 0px 0px 4px rgba(255,255,255,0.24)`;
     const focusColor = blue.d900