shadcn + radix color + useTheme, technically

packages/react/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "default",
+  "style": "new-york",
   "rsc": false,
   "tsx": true,
   "tailwind": {

packages/react/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^1.1.2",
     "@tanstack/react-query": "^4.35.0",
     "class-variance-authority": "^0.7.0",
@@ -37,6 +38,7 @@
     "zustand": "^4.4.1"
   },
   "devDependencies": {
+    "@radix-ui/colors": "^3.0.0-rc.4",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
@@ -60,6 +62,7 @@
     "typescript-plugin-css-modules": "^5.0.1",
     "unocss": "^0.56.1",
     "unocss-preset-autoprefixer": "^0.0.6",
-    "vite": "^4.4.9"
+    "vite": "^4.4.9",
+    "windy-radix-palette": "^1.0.0-rc.0"
   }
-}
+}

packages/react/src/components/layout/useFrame.ts

@@ -1,10 +1,9 @@
-import { proxy } from 'valtio';
-import { useSnapshot } from 'valtio';
+import { proxyWithPersist } from '@/valtio-persist';
 
 const MobileSizeBreak = 768;
 const FooterSizeBreak = 500;
 
-export const frameContext = proxy({
+export const frameContext = proxyWithPersist('page_pref', {
   pageIsFullscreen: false,
   siteIsSmall: window.innerWidth < MobileSizeBreak,
   sidebarShouldBeFullscreen: window.innerWidth < FooterSizeBreak,
@@ -18,7 +17,7 @@ export const frameContext = proxy({
   },
 
   // it's always open at init unless it's small.
-  sidebarOpen: window.innerWidth < MobileSizeBreak,
+  sidebarOpen: window.innerWidth > MobileSizeBreak,
   // sidebar would stay open if it could.
   sidebarPrefOpen: true,
 
@@ -58,5 +57,5 @@ export const frameContext = proxy({
     frameContext.sidebarOpen = true;
     frameContext.sidebarPrefOpen = frameContext.sidebarOpen;
   }
-})
+}, ['sidebarPrefOpen'])
 

packages/react/src/hooks/useTheme.ts

@@ -0,0 +1,52 @@
+import { proxyWithPersist } from "@/valtio-persist/index";
+import { useEffect } from "react";
+import { useSnapshot } from "valtio/react";
+
+export const cssVariablesStore = proxyWithPersist('page-theme', {
+
+  '--background': '0 0% 100%',
+  '--foreground': '222.2 84% 4.9%',
+  '--primary': '222.2 47.4% 11.2%',
+  '--primary-foreground': '210 40% 98%',
+  '--secondary': '210 40% 96.1%',
+  '--secondary-foreground': '222.2 47.4% 11.2%',
+  '--muted': '210 40% 96.1%',
+  '--muted-foreground': '215.4 16.3% 46.9%',
+  '--accent': '210 40% 96.1%',
+  '--accent-foreground': '222.2 47.4% 11.2%',
+  '--destructive': '0 84.2% 60.2%',
+  '--destructive-foreground': '210 40% 98%',
+  '--border': '214.3 31.8% 91.4%',
+  '--input': '214.3 31.8% 91.4%',
+  '--ring': '222.2 84% 4.9%',
+
+}, ['--background', '--foreground', '--primary', '--primary-foreground', '--secondary', '--muted', '--accent', '--destructive', '--border', '--input', '--ring']);
+
+
+export function useThemeInit() {
+  const snap = useSnapshot(cssVariablesStore);
+
+  useEffect(() => {
+    const setCssVariable = (property: string, value: string) => {
+      document.documentElement.style.setProperty(property, value);
+    };
+
+    setCssVariable('--background', snap['--background']);
+    setCssVariable('--foreground', snap['--foreground']);
+    setCssVariable('--primary', snap['--primary']);
+    setCssVariable('--primary-foreground', snap['--primary-foreground']);
+    setCssVariable('--secondary', snap['--secondary']);
+    setCssVariable('--secondary-foreground', snap['--secondary-foreground']);
+    setCssVariable('--muted', snap['--muted']);
+    setCssVariable('--muted-foreground', snap['--muted-foreground']);
+    setCssVariable('--accent', snap['--accent']);
+    setCssVariable('--accent-foreground', snap['--accent-foreground']);
+    setCssVariable('--destructive', snap['--destructive']);
+    setCssVariable('--destructive-foreground', snap['--destructive-foreground']);
+    setCssVariable('--border', snap['--border']);
+    setCssVariable('--input', snap['--input']);
+    setCssVariable('--ring', snap['--ring']);
+  }, [snap]); // This effect runs whenever the snapshot (and thus the state) changes
+
+  return null; // This component doesn't need to render anything visible
+};

packages/react/src/index.css

@@ -1,75 +1,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
     --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    /* other radix / shadcn variables are stored and configured by 
+      @link{./hooks/useTheme.ts} 
+    */
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

packages/react/src/main.tsx

@@ -3,12 +3,16 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import "uno.css";
 import { Frame } from "./components/layout/Frame.tsx";
+import { useThemeInit } from "./hooks/useTheme.ts";
 
+function App() {
+  useThemeInit();
+
+  return <Frame />;
+}
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    {/* <Theme accentColor="amber" appearance="dark"> */}
-    <Frame />
-    {/* </Theme> */}
+    <App />
   </React.StrictMode>,
 );

packages/react/src/valtio-persist/index.ts

@@ -11,14 +11,14 @@ const pick = <T extends {}, K extends keyof T>(obj: T, ...keys: K[]) => (
 /**
  * Creates a proxy object with persistence, allowing you to store and retrieve data from local storage.
  */
-function proxyWithPersist<T extends object>(key: string, initialObject: T, persistFields: (keyof T)[]) {
+export function proxyWithPersist<T extends object>(key: string, initialObject: T, persistFields: (keyof T)[]): T {
   if (typeof window === "undefined") return proxy(initialObject);
   const storageItem = localStorage.getItem(key);
 
-  const state = proxy({
+  const state = proxy<T>({
     ...initialObject,
     ...(storageItem !== null ? JSON.parse(storageItem) : {})
-  });
+  } as T);
 
   subscribe(state, () => {
     const subobject = pick(initialObject, ...persistFields)

packages/react/tailwind.config.js

@@ -72,5 +72,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require("windy-radix-palette")],
 }