an independent Bluesky client using Constellation, PDS Queries, and other services
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

debug color palette visualizer

+34 -1
+1
src/routes/__root.tsx
··· 219 219 } 220 220 221 221 function RootDocument({ children }: { children: React.ReactNode }) { 222 + useAtomCssVar(hueAtom, "--tw-gray-hue"); 222 223 // useAtomCssVar(hueBaseAtom, "--system-hue-base"); 223 224 // useAtomCssVar(hueAccentAtom, "--system-hue-accent"); 224 225 // useAtomCssVar(hueContrastAtom, "--system-hue-contrast");
+1 -1
src/routes/root-copy.tsx
··· 161 161 } 162 162 163 163 function RootDocument({ children }: { children: React.ReactNode }) { 164 - useAtomCssVar(hueAtom, "--tw-gray-hue"); 164 + //useAtomCssVar(hueAtom, "--tw-gray-hue"); 165 165 const location = useLocation(); 166 166 const navigate = useNavigate(); 167 167 const { agent } = useAuth();
+32
src/routes/settings.tsx
··· 298 298 Change the colors of the app 299 299 </span> 300 300 <div className="z-[1] flex flex-row items-center gap-4"> 301 + <span>gray</span> 301 302 <SliderComponent atom={hueAtom} max={360} /> 302 303 <button 303 304 onClick={() => setHue(defaulthue ?? 28)} ··· 307 308 Reset 308 309 </button> 309 310 </div> 311 + <Colors /> 310 312 </div> 311 313 ); 312 314 } ··· 433 435 </Slider.Root> 434 436 ); 435 437 }; 438 + 439 + type palette = "base" | "accent" | "contrast" | "muted" | "gray" 440 + const palettes: palette[] = ["base", "accent", "contrast", "muted", "gray"] 441 + type index = "50" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900" | "950" 442 + const indexes: index[] = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"] 443 + function ColorRow({palette, index}: {palette: palette, index:index}){ 444 + return( 445 + <div className="flex flex-col gap-0"> 446 + <div className={`h-6 w-32`} style={{backgroundColor: `var(--color-${palette}-${index})`}} /> 447 + {/* <div className={`h-6 w-32 bg-${palette}-${index}`} /> */} 448 + </div> 449 + ) 450 + } 451 + function ColorSet({palette}:{palette: palette}) { 452 + return( 453 + <div className="flex flex-col gap-2"> 454 + <span className="text-black">{palette}</span> 455 + {indexes.map((i)=>(<ColorRow palette={palette} index={i} key={i}/>))} 456 + </div> 457 + ) 458 + } 459 + function Colors() { 460 + return( 461 + <div className="flex flex-row gap-2 bg-white"> 462 + {palettes.map((i)=>(<ColorSet palette={i} key={i}/>))} 463 + {/* DUMMY DIV TO TRICK THE TREE-SHAKER */} 464 + <div className="hidden bg-base-50 bg-base-100 bg-base-200 bg-base-300 bg-base-400 bg-base-500 bg-base-600 bg-base-700 bg-base-800 bg-base-900 bg-base-950 bg-accent-50 bg-accent-100 bg-accent-200 bg-accent-300 bg-accent-400 bg-accent-500 bg-accent-600 bg-accent-700 bg-accent-800 bg-accent-900 bg-accent-950 bg-contrast-50 bg-contrast-100 bg-contrast-200 bg-contrast-300 bg-contrast-400 bg-contrast-500 bg-contrast-600 bg-contrast-700 bg-contrast-800 bg-contrast-900 bg-contrast-950 bg-muted-50 bg-muted-100 bg-muted-200 bg-muted-300 bg-muted-400 bg-muted-500 bg-muted-600 bg-muted-700 bg-muted-800 bg-muted-900 bg-muted-950" /> 465 + </div> 466 + ) 467 + }