forked from
whey.party/red-dwarf
an independent Bluesky client using Constellation, PDS Queries, and other services
debug color palette visualizer
+34
-1
+1
src/routes/__root.tsx
+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
+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
+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
+
}