4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T8c2,"use client"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/8bit/select"; import { Theme } from "@/lib/themes"; const themes = [ { name: Theme.Default, color: "#000" }, { name: Theme.Sega, color: "#0055a4" }, { name: Theme.Gameboy, color: "#8bac0f" }, { name: Theme.Atari, color: "#7a4009" }, { name: Theme.Nintendo, color: "#104cb0" }, { name: Theme.Arcade, color: "#F07CD4" }, { name: Theme.NeoGeo, color: "#dc2626" }, { name: Theme.SoftPop, color: "#4B3F99" }, { name: Theme.Pacman, color: "#ffcc00" }, { name: Theme.VHS, color: "#8B5CF6" }, { name: Theme.RustyByte, color: "#d2691e" }, { name: Theme.Zelda, color: "oklch(0.75 0.2 90)" }, { name: Theme.DungeonTorch, color: "#c87533" }, { name: Theme.SpaceStation, color: "#2196f3" }, { name: Theme.PixelForest, color: "#4caf50" }, { name: Theme.IceCavern, color: "#81d4fa" }, { name: Theme.LavaCore, color: "#e64a19" }, { name: Theme.GlitchMode, color: "#00ffcc" }, { name: Theme.DwarvenVault, color: "#c8a600" }, { name: Theme.DragonHoard, color: "#c62828" }, { name: Theme.AncientRunes, color: "#009688" }, ]; export function SelectThemeDropdown({ activeTheme, setActiveTheme, }: { activeTheme: Theme; setActiveTheme: (theme: Theme) => void; }) { return ( ); } 52:T1050,"use client"; import { usePathname } from "next/navigation"; import { parseAsStringLiteral, useQueryState } from "nuqs"; import { createContext, type ReactNode, Suspense, useCallback, useContext, useEffect, useRef, useState, } from "react"; import { Theme } from "@/lib/themes"; const COOKIE_NAME = "active_theme"; const DEFAULT_THEME = Theme.Default; function setThemeCookie(theme: Theme) { if (typeof window === "undefined") { return; } // biome-ignore lint/suspicious/noDocumentCookie: Cookie Store API is not widely supported yet document.cookie = `${COOKIE_NAME}=${theme}; path=/; max-age=31536000; SameSite=Lax; ${ window.location.protocol === "https:" ? "Secure;" : "" }`; } interface ThemeContextType { activeTheme: Theme; setActiveTheme: (theme: Theme) => void; } const ThemeContext = createContext(undefined); export function ActiveThemeProvider({ children, initialTheme, }: { children: ReactNode; initialTheme?: Theme; }) { const pathname = usePathname(); const [activeTheme, setActiveThemeState] = useState( () => initialTheme || DEFAULT_THEME ); // Only themes the visitor picked belong in the URL, so that a link can be // copied and shared. Resets on navigation deliberately leave it alone. const [selectedTheme, setSelectedTheme] = useState(null); const setActiveTheme = useCallback((theme: Theme) => { setActiveThemeState(theme); setSelectedTheme(theme); }, []); // biome-ignore lint/correctness/useExhaustiveDependencies: "We want to reset the theme on pathname change" useEffect(() => { queueMicrotask(() => { setActiveThemeState(DEFAULT_THEME); setSelectedTheme(null); }); }, [pathname]); useEffect(() => { setThemeCookie(activeTheme); const targets = [document.body, document.documentElement]; for (const el of targets) { const themeClasses = Array.from(el.classList).filter((className) => className.startsWith("theme-") ); for (const className of themeClasses) { el.classList.remove(className); } el.classList.add(`theme-${activeTheme}`); } }, [activeTheme]); return ( Loading theme preference} > {children} ); } export function useThemeConfig() { const context = useContext(ThemeContext); if (context === undefined) { throw new Error( "useThemeConfig must be used within an ActiveThemeProvider" ); } return context; } export const useUrlTheme = () => useQueryState("theme", parseAsStringLiteral(Object.values(Theme))); // Keeps the active theme and the `theme` query parameter in step, so a theme // can be shared by copying the URL. Kept in its own component because reading // the query string suspends, and the provider itself wraps the whole app. function ActiveThemeUrlSync({ onUrlTheme, selectedTheme, }: { onUrlTheme: (theme: Theme) => void; selectedTheme: Theme | null; }) { const [urlTheme, setUrlTheme] = useUrlTheme(); const synced = useRef(false); // URL -> state, once on mount, so a shared link opens on the right theme. useEffect(() => { if (synced.current) { return; } // Avoid queuing multiple times synced.current = true; if (!urlTheme) { return; } // Setting it directly here would be cancelled by the useEffect above // that resets the theme on pathname change. // Defer to the end of the microtask queue to re-apply it afterwards // to follow the URL as the source of truth. queueMicrotask(() => { onUrlTheme(urlTheme); }); }, [urlTheme, onUrlTheme]); // State -> URL, so picking a theme anywhere produces a shareable link. useEffect(() => { if (selectedTheme) { setUrlTheme(selectedTheme); } }, [selectedTheme, setUrlTheme]); return null; } 53:Tc649,export const Theme = { Default: "default", Sega: "sega", Gameboy: "gameboy", Atari: "atari", Nintendo: "nintendo", Arcade: "arcade", NeoGeo: "neo-geo", SoftPop: "soft-pop", Pacman: "pacman", VHS: "vhs", RustyByte: "rusty-byte", Zelda: "zelda", DungeonTorch: "dungeon-torch", SpaceStation: "space-station", PixelForest: "pixel-forest", IceCavern: "ice-cavern", LavaCore: "lava-core", GlitchMode: "glitch-mode", DwarvenVault: "dwarven-vault", DragonHoard: "dragon-hoard", AncientRunes: "ancient-runes", } as const; export type Theme = (typeof Theme)[keyof typeof Theme]; const themes = [ { name: Theme.Default, color: `:root { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); }`, }, { name: Theme.Sega, color: ` :root { --radius: 0rem; --primary: oklch(0.5 0.2 260); --primary-foreground: oklch(0.9 0.02 260); --background: oklch(0.85 0.1 220); --foreground: oklch(0.1 0.1 280); --card: oklch(0.85 0.1 220); --card-foreground: oklch(0.1 0.1 280); --popover: oklch(0.85 0.1 220); --popover-foreground: oklch(0.1 0.1 280); --secondary: oklch(0.5 0.2 260); --secondary-foreground: oklch(0.1 0.1 280); --muted: oklch(0.1 0.1 280); --muted-foreground: oklch(0.5 0.2 280); --accent: oklch(0.5 0.2 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.6 0.2 20); --border: oklch(0.5 0.2 260); --input: oklch(0.5 0.2 260); --ring: oklch(0.5 0.2 260); --chart-1: oklch(0.5 0.2 260); --chart-2: oklch(0.3 0.2 260); --chart-3: oklch(0.7 0.1 250); --chart-4: oklch(0.6 0.15 250); --chart-5: oklch(0.4 0.15 250); --sidebar: oklch(0.85 0.1 220); --sidebar-foreground: oklch(0.1 0.1 280); --sidebar-primary: oklch(0.5 0.2 260); --sidebar-primary-foreground: oklch(0.9 0.02 260); --sidebar-accent: oklch(0.5 0.2 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.5 0.2 260); --sidebar-ring: oklch(0.5 0.2 260); .dark { --primary: oklch(0.5 0.2 260); --primary-foreground: oklch(0.9 0.02 260); --background: oklch(0.1 0.1 280); --foreground: oklch(0.9 0.02 260); --card: oklch(0.1 0.1 280); --card-foreground: oklch(0.9 0.02 260); --popover: oklch(0.1 0.1 280); --popover-foreground: oklch(0.9 0.02 260); --secondary: oklch(0.5 0.2 260); --secondary-foreground: oklch(0.9 0.02 260); --muted: oklch(0.5 0.2 260); --muted-foreground: oklch(0.85 0.1 220); --accent: oklch(0.5 0.2 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.2 20); --border: oklch(0.5 0.2 260); --input: oklch(0.5 0.2 260); --ring: oklch(0.5 0.2 260); --chart-1: oklch(0.5 0.2 260); --chart-2: oklch(0.3 0.2 260); --chart-3: oklch(0.5 0.2 280); --chart-4: oklch(0.4 0.2 250); --chart-5: oklch(0.4 0.15 250); --sidebar: oklch(0.1 0.1 280); --sidebar-foreground: oklch(0.9 0.05 280); --sidebar-primary: oklch(0.5 0.2 280); --sidebar-primary-foreground: oklch(0.9 0.05 280); --sidebar-accent: oklch(0.5 0.2 280); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.5 0.2 280); --sidebar-ring: oklch(0.5 0.2 280); } }`, }, { name: Theme.Gameboy, color: `:root { --radius: 0rem; --primary: oklch(0.7 0.2 120); --primary-foreground: oklch(0.2 0.1 140); --background: oklch(0.8 0.2 140); --foreground: oklch(0.2 0.1 140); --card: oklch(0.8 0.2 140); --card-foreground: oklch(0.2 0.1 140); --popover: oklch(0.8 0.2 140); --popover-foreground: oklch(0.2 0.1 140); --secondary: oklch(0.7 0.2 120); --secondary-foreground: oklch(0.2 0.1 140); --muted: oklch(0.7 0.2 120); --muted-foreground: oklch(0.2 0.1 140); --accent: oklch(0.3 0.2 140); --accent-foreground: oklch(0.8 0.2 120); --destructive: oklch(0.5 0.3 30); --border: oklch(0.4 0.2 140); --input: oklch(0.4 0.2 140); --ring: oklch(0.8 0.2 120); --chart-1: oklch(0.4 0.2 140); --chart-2: oklch(0.3 0.2 140); --chart-3: oklch(0.4 0.2 140); --chart-4: oklch(0.4 0.2 140); --chart-5: oklch(0.4 0.2 140); --sidebar: oklch(0.8 0.2 140); --sidebar-foreground: oklch(0.2 0.1 140); --sidebar-primary: oklch(0.8 0.2 120); --sidebar-primary-foreground: oklch(0.2 0.1 140); --sidebar-accent: oklch(0.7 0.2 120); --sidebar-accent-foreground: oklch(0.2 0.1 140); --sidebar-border: oklch(0.4 0.2 140); --sidebar-ring: oklch(0.8 0.2 120); } .dark { --primary: oklch(0.7 0.2 120); --primary-foreground: oklch(0.2 0.1 140); --background: oklch(0.2 0.1 140); --foreground: oklch(0.8 0.2 120); --card: oklch(0.2 0.1 140); --card-foreground: oklch(0.8 0.2 120); --popover: oklch(0.2 0.1 140); --popover-foreground: oklch(0.8 0.2 120); --secondary: oklch(0.3 0.1 140); --secondary-foreground: oklch(0.8 0.2 120); --muted: oklch(0.3 0.1 140); --muted-foreground: oklch(0.7 0.2 120); --accent: oklch(0.4 0.2 140); --accent-foreground: oklch(0.8 0.2 120); --destructive: oklch(0.5 0.3 30); --border: oklch(0.4 0.2 140); --input: oklch(0.4 0.2 140); --ring: oklch(0.8 0.2 120); --chart-1: oklch(0.4 0.2 140); --chart-2: oklch(0.3 0.2 140); --chart-3: oklch(0.4 0.2 140); --chart-4: oklch(0.4 0.2 140); --chart-5: oklch(0.4 0.2 140); --sidebar: oklch(0.2 0.1 140); --sidebar-foreground: oklch(0.8 0.2 120); --sidebar-primary: oklch(0.4 0.2 140); --sidebar-primary-foreground: oklch(0.8 0.2 120); --sidebar-accent: oklch(0.3 0.1 140); --sidebar-accent-foreground: oklch(0.8 0.2 120); --sidebar-border: oklch(0.4 0.2 140); --sidebar-ring: oklch(0.8 0.2 120); }`, }, { name: Theme.Atari, color: `:root { --radius: 0rem; --primary: oklch(0.5 0.2 60); --primary-foreground: oklch(0 0 0); --background: oklch(0.7 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --secondary: oklch(0.7 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.7 0 0); --muted-foreground: oklch(0 0 0); --accent: oklch(0.5 0.2 60); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.3 20); --border: oklch(0.5 0.2 60); --input: oklch(0.7 0 0); --ring: oklch(0.7 0 0); --chart-1: oklch(0.7 0 0); --chart-2: oklch(0.5 0.2 60); --chart-3: oklch(0.9 0 0); --chart-4: oklch(0.7 0 0); --chart-5: oklch(0.5 0.3 280); --sidebar: oklch(0.9 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0.5 0.3 280); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.6 0.3 30); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.7 0 0); --sidebar-ring: oklch(0.5 0.3 280); } .dark { --primary: oklch(0.4 0.2 60); --primary-foreground: oklch(0.9 0 0); --background: oklch(0.2 0 0); --foreground: oklch(0.9 0 0); --card: oklch(0.4 0 0); --card-foreground: oklch(0.9 0 0); --popover: oklch(0.4 0 0); --popover-foreground: oklch(0.9 0 0); --secondary: oklch(0.4 0 0); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.4 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.4 0.2 60); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.4 0.3 20); --border: oklch(0.4 0 0); --input: oklch(0.4 0 0); --ring: oklch(0 0 0); --chart-1: oklch(0 0 0); --chart-2: oklch(0.4 0.2 60); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.4 0 0); --chart-5: oklch(0.5 0.3 280); --sidebar: oklch(0.4 0 0); --sidebar-foreground: oklch(0.9 0 0); --sidebar-primary: oklch(0.5 0.3 280); --sidebar-primary-foreground: oklch(0.9 0 0); --sidebar-accent: oklch(0.5 0.3 20); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.4 0 0); --sidebar-ring: oklch(0.5 0.3 280); }`, }, { name: Theme.Nintendo, color: ` :root { --radius: 0rem; --primary: oklch(0.5 0.2 280); --primary-foreground: oklch(0 0 0); --background: oklch(1 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --secondary: oklch(0.7 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.7 0 0); --muted-foreground: oklch(0.4 0 0); --accent: oklch(0.7 0.1 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.2 10); --border: oklch(0.5 0.2 280); --input: oklch(0.5 0.2 280); --ring: oklch(0.5 0.2 280); --chart-1: oklch(0.7 0 0); --chart-2: oklch(0.5 0.2 280); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.4 0 0); --chart-5: oklch(0.5 0.2 280); --sidebar: oklch(0.9 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0.5 0.2 280); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.7 0.1 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.7 0 0); --sidebar-ring: oklch(0.5 0.2 280); .dark { --primary: oklch(0.5 0.2 280); --primary-foreground: oklch(0.9 0.05 280); --background: oklch(0.16 0.05 260); --foreground: oklch(1 0 0); --card: oklch(0.2 0.06 260); --card-foreground: oklch(1 0 0); --popover: oklch(0.2 0.06 260); --popover-foreground: oklch(1 0 0); --secondary: oklch(0.4 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.4 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.4 0.2 280); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.4 0.2 10); --border: oklch(1 0 0); --input: oklch(0.5 0.2 280); --ring: oklch(0.7 0.15 250); --chart-1: oklch(0 0 0); --chart-2: oklch(0.2 0 0); --chart-3: oklch(0.4 0 0); --chart-4: oklch(0.4 0.2 10); --chart-5: oklch(0.5 0.2 280); --sidebar: oklch(0.2 0.06 260); --sidebar-foreground: oklch(0.9 0.05 280); --sidebar-primary: oklch(0.5 0.2 280); --sidebar-primary-foreground: oklch(0.9 0.05 280); --sidebar-accent: oklch(0.7 0.1 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.28 0.05 260); --sidebar-ring: oklch(0.5 0.2 280); } }`, }, { name: Theme.Arcade, color: `:root { --radius: 0rem; --primary: oklch(0.7 0.25 320); --primary-foreground: oklch(0.1 0.05 320); --background: oklch(0.98 0.01 280); --foreground: oklch(0.1 0.05 280); --card: oklch(1 0 0); --card-foreground: oklch(0.1 0.05 280); --popover: oklch(1 0 0); --popover-foreground: oklch(0.1 0.05 280); --secondary: oklch(0.6 0.2 220); --secondary-foreground: oklch(0.1 0.05 220); --muted: oklch(0.95 0.02 280); --muted-foreground: oklch(0.4 0.1 280); --accent: oklch(0.8 0.25 60); --accent-foreground: oklch(0.1 0.05 60); --destructive: oklch(0.7 0.3 20); --border: oklch(0.7 0.25 320); --input: oklch(0.95 0.02 280); --ring: oklch(0.7 0.25 320); --chart-1: oklch(0.7 0.25 320); --chart-2: oklch(0.6 0.2 220); --chart-3: oklch(0.8 0.25 60); --chart-4: oklch(0.7 0.3 20); --chart-5: oklch(0.6 0.25 140); --sidebar: oklch(0.96 0.01 280); --sidebar-foreground: oklch(0.1 0.05 280); --sidebar-primary: oklch(0.7 0.25 320); --sidebar-primary-foreground: oklch(0.1 0.05 320); --sidebar-accent: oklch(0.6 0.2 220); --sidebar-accent-foreground: oklch(0.1 0.05 220); --sidebar-border: oklch(0.7 0.25 320); --sidebar-ring: oklch(0.7 0.25 320); } .dark { --primary: oklch(0.8 0.3 320); --primary-foreground: oklch(0.05 0.02 320); --background: oklch(0.02 0.01 280); --foreground: oklch(0.98 0.01 280); --card: oklch(0.05 0.02 280); --card-foreground: oklch(0.98 0.01 280); --popover: oklch(0.05 0.02 280); --popover-foreground: oklch(0.98 0.01 280); --secondary: oklch(0.7 0.25 220); --secondary-foreground: oklch(0.05 0.02 220); --muted: oklch(0.1 0.03 280); --muted-foreground: oklch(0.8 0.1 280); --accent: oklch(0.9 0.3 60); --accent-foreground: oklch(0.7 0.25 220); --destructive: oklch(0.8 0.35 20); --border: oklch(0.8 0.3 320); --input: oklch(0.1 0.03 280); --ring: oklch(0.6 0.25 320); --chart-1: oklch(0.8 0.3 320); --chart-2: oklch(0.7 0.25 220); --chart-3: oklch(0.9 0.3 60); --chart-4: oklch(0.8 0.35 20); --chart-5: oklch(0.7 0.3 140); --sidebar: oklch(0.03 0.01 280); --sidebar-foreground: oklch(0.98 0.01 280); --sidebar-primary: oklch(0.8 0.3 320); --sidebar-primary-foreground: oklch(0.05 0.02 320); --sidebar-accent: oklch(0.7 0.25 220); --sidebar-accent-foreground: oklch(0.05 0.02 220); --sidebar-border: oklch(0.8 0.3 320); --sidebar-ring: oklch(0.8 0.3 320); }`, }, { name: Theme.NeoGeo, color: `:root { --radius: 0rem; --primary: oklch(0.65 0.25 25); --primary-foreground: oklch(0.98 0.01 25); --background: oklch(0.98 0.03 25); --foreground: oklch(0.15 0.05 25); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.05 25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.05 25); --secondary: oklch(0.9 0.02 25); --secondary-foreground: oklch(0.15 0.05 25); --muted: oklch(0.95 0.01 25); --muted-foreground: oklch(0.45 0.1 25); --accent: oklch(0.75 0.2 25); --accent-foreground: oklch(0.98 0.01 25); --destructive: oklch(0.7 0.3 20); --border: oklch(0.8 0.1 25); --input: oklch(0.95 0.01 25); --ring: oklch(0.65 0.25 25); --chart-1: oklch(0.65 0.25 25); --chart-2: oklch(0.45 0.2 25); --chart-3: oklch(0.8 0.15 25); --chart-4: oklch(0.6 0.25 25); --chart-5: oklch(0.7 0.2 25); --sidebar: oklch(0.96 0.01 25); --sidebar-foreground: oklch(0.15 0.05 25); --sidebar-primary: oklch(0.65 0.25 25); --sidebar-primary-foreground: oklch(0.98 0.01 25); --sidebar-accent: oklch(0.9 0.02 25); --sidebar-accent-foreground: oklch(0.15 0.05 25); --sidebar-border: oklch(0.8 0.1 25); --sidebar-ring: oklch(0.65 0.25 25); } .dark { --primary: oklch(0.75 0.3 25); --primary-foreground: oklch(0.05 0.02 25); --background: oklch(0.05 0.02 25); --foreground: oklch(0.95 0.01 25); --card: oklch(0.1 0.03 25); --card-foreground: oklch(0.95 0.01 25); --popover: oklch(0.1 0.03 25); --popover-foreground: oklch(0.95 0.01 25); --secondary: oklch(0.15 0.05 25); --secondary-foreground: oklch(0.95 0.01 25); --muted: oklch(0.15 0.05 25); --muted-foreground: oklch(0.7 0.1 25); --accent: oklch(0.2 0.08 25); --accent-foreground: oklch(0.95 0.01 25); --destructive: oklch(0.8 0.35 20); --border: oklch(0.2 0.08 25); --input: oklch(0.15 0.05 25); --ring: oklch(0.55 0.25 25); --chart-1: oklch(0.75 0.3 25); --chart-2: oklch(0.55 0.25 25); --chart-3: oklch(0.85 0.2 25); --chart-4: oklch(0.65 0.3 25); --chart-5: oklch(0.75 0.25 25); --sidebar: oklch(0.08 0.03 25); --sidebar-foreground: oklch(0.95 0.01 25); --sidebar-primary: oklch(0.75 0.3 25); --sidebar-primary-foreground: oklch(0.05 0.02 25); --sidebar-accent: oklch(0.15 0.05 25); --sidebar-accent-foreground: oklch(0.95 0.01 25); --sidebar-border: oklch(0.2 0.08 25); --sidebar-ring: oklch(0.75 0.3 25); }`, }, { name: Theme.SoftPop, color: ` :root { --background: oklch(0.9789 0.0082 121.6272); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0.5106 0.2301 276.9656); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.7038 0.123 182.5025); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9551 0 0); --muted-foreground: oklch(0.3211 0 0); --accent: oklch(0.7686 0.1647 70.0804); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); --border: oklch(0 0 0); --input: oklch(0.5555 0 0); --ring: oklch(0.7853 0.1041 274.7134); --chart-1: oklch(0.5106 0.2301 276.9656); --chart-2: oklch(0.7038 0.123 182.5025); --chart-3: oklch(0.7686 0.1647 70.0804); --chart-4: oklch(0.6559 0.2118 354.3084); --chart-5: oklch(0.7227 0.192 149.5793); --sidebar: oklch(0.9789 0.0082 121.6272); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0.5106 0.2301 276.9656); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.7686 0.1647 70.0804); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0 0 0); --sidebar-ring: oklch(0.7853 0.1041 274.7134); --font-sans: DM Sans, sans-serif; --font-serif: DM Sans, sans-serif; --font-mono: Space Mono, monospace; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13); --tracking-normal: normal; --spacing: 0.25rem; } .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.2455 0.0217 257.2823); --card-foreground: oklch(1 0 0); --popover: oklch(0.2455 0.0217 257.2823); --popover-foreground: oklch(1 0 0); --primary: oklch(0.6801 0.1583 276.9349); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.7845 0.1325 181.912); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.3211 0 0); --muted-foreground: oklch(0.8452 0 0); --accent: oklch(0.879 0.1534 91.6054); --accent-foreground: oklch(0.7845 0.1325 181.912); --destructive: oklch(0.7106 0.1661 22.2162); --destructive-foreground: oklch(0 0 0); --border: oklch(0.4459 0 0); --input: oklch(1 0 0); --ring: oklch(0.6801 0.1583 276.9349); --chart-1: oklch(0.6801 0.1583 276.9349); --chart-2: oklch(0.7845 0.1325 181.912); --chart-3: oklch(0.879 0.1534 91.6054); --chart-4: oklch(0.7253 0.1752 349.7607); --chart-5: oklch(0.8003 0.1821 151.711); --sidebar: oklch(0 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.6801 0.1583 276.9349); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.879 0.1534 91.6054); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(1 0 0); --sidebar-ring: oklch(0.6801 0.1583 276.9349); --font-sans: DM Sans, sans-serif; --font-serif: DM Sans, sans-serif; --font-mono: Space Mono, monospace; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13); }`, }, { name: Theme.VHS, color: ` :root { --background: oklch(0.9768 0.0142 308.299); --foreground: oklch(0.2905 0.1432 302.7167); --card: oklch(1 0 0); --card-foreground: oklch(0.2905 0.1432 302.7167); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2905 0.1432 302.7167); --primary: oklch(0.5915 0.2569 322.8961); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.5575 0.2525 302.3212); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9464 0.0327 307.1745); --muted-foreground: oklch(0.4383 0.1983 303.7241); --accent: oklch(0.903 0.0732 319.6198); --accent-foreground: oklch(0.3807 0.1661 304.9874); --destructive: oklch(0.5246 0.199 3.9582); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9024 0.0604 306.703); --input: oklch(0.9024 0.0604 306.703); --ring: oklch(0.5876 0.1389 241.9661); --chart-1: oklch(0.5915 0.2569 322.8961); --chart-2: oklch(0.5575 0.2525 302.3212); --chart-3: oklch(0.5876 0.1389 241.9661); --chart-4: oklch(0.6002 0.1038 184.704); --chart-5: oklch(0.5916 0.218 0.5844); --sidebar: oklch(0.9768 0.0142 308.299); --sidebar-foreground: oklch(0.2905 0.1432 302.7167); --sidebar-primary: oklch(0.5915 0.2569 322.8961); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.903 0.0732 319.6198); --sidebar-accent-foreground: oklch(0.3807 0.1661 304.9874); --sidebar-border: oklch(0.9024 0.0604 306.703); --sidebar-ring: oklch(0.5876 0.1389 241.9661); --font-sans: VT323; --font-serif: VT323; --font-mono: VT323; --radius: 0.3rem; --shadow-2xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.05); --shadow-xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.05); --shadow-sm: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-md: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 2px 4px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-lg: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 4px 6px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 8px 10px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-2xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.25); --tracking-normal: 0.05rem; --spacing: 0.25rem; .dark { --background: oklch(0.166 0.0254 298.9423); --foreground: oklch(0.9024 0.0604 306.703); --card: oklch(0.1962 0.0365 301.0125); --card-foreground: oklch(0.9024 0.0604 306.703); --popover: oklch(0.1962 0.0365 301.0125); --popover-foreground: oklch(0.9024 0.0604 306.703); --primary: oklch(0.6668 0.2591 322.1499); --primary-foreground: oklch(0.2795 0.0368 260.031); --secondary: oklch(0.6268 0.2325 303.9004); --secondary-foreground: oklch(0.9464 0.0327 307.1745); --muted: oklch(0.2591 0.0611 305.6368); --muted-foreground: oklch(0.7161 0.0091 56.259); --accent: oklch(0.2932 0.1309 325.661); --accent-foreground: oklch(0.833 0.1322 321.4337); --destructive: oklch(0.5246 0.199 3.9582); --destructive-foreground: oklch(0.9482 0.0276 342.2585); --border: oklch(0.2905 0.1432 302.7167); --input: oklch(0.2905 0.1432 302.7167); --ring: oklch(0.6847 0.1479 237.3225); --chart-1: oklch(0.6668 0.2591 322.1499); --chart-2: oklch(0.6268 0.2325 303.9004); --chart-3: oklch(0.6847 0.1479 237.3225); --chart-4: oklch(0.7038 0.123 182.5025); --chart-5: oklch(0.6559 0.2118 354.3084); --sidebar: oklch(0.166 0.0254 298.9423); --sidebar-foreground: oklch(0.9024 0.0604 306.703); --sidebar-primary: oklch(0.6668 0.2591 322.1499); --sidebar-primary-foreground: oklch(0.2795 0.0368 260.031); --sidebar-accent: oklch(0.2932 0.1309 325.661); --sidebar-accent-foreground: oklch(0.833 0.1322 321.4337); --sidebar-border: oklch(0.2905 0.1432 302.7167); --sidebar-ring: oklch(0.6847 0.1479 237.3225); --font-sans: VT323; --font-serif: VT323; --font-mono: VT323; --radius: 0.3rem; --shadow-2xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-sm: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-md: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 2px 4px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-lg: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 4px 6px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 8px 10px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-2xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.5); } `, }, { name: Theme.Pacman, color: ` :root { --background: oklch(1 0 0); --foreground: oklch(0.2101 0.0318 264.6645); --card: oklch(0.9846 0.0017 247.8389); --card-foreground: oklch(0.2101 0.0318 264.6645); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2101 0.0318 264.6645); --primary: oklch(0.8369 0.1644 84.4286); --primary-foreground: oklch(0.2857 0.0639 53.8133); --secondary: oklch(0.6231 0.188 259.8145); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.967 0.0029 264.5419); --muted-foreground: oklch(0.551 0.0234 264.3637); --accent: oklch(0.9319 0.0316 255.5855); --accent-foreground: oklch(0.4244 0.1809 265.6377); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); --border: oklch(0.8823 0.0571 254.1284); --input: oklch(0.8823 0.0571 254.1284); --ring: oklch(0.6231 0.188 259.8145); --chart-1: oklch(0.8369 0.1644 84.4286); --chart-2: oklch(0.6231 0.188 259.8145); --chart-3: oklch(0.6368 0.2078 25.3313); --chart-4: oklch(0.7227 0.192 149.5793); --chart-5: oklch(0.6268 0.2325 303.9004); --sidebar: oklch(0.9846 0.0017 247.8389); --sidebar-foreground: oklch(0.2101 0.0318 264.6645); --sidebar-primary: oklch(0.8369 0.1644 84.4286); --sidebar-primary-foreground: oklch(0.2857 0.0639 53.8133); --sidebar-accent: oklch(0.9319 0.0316 255.5855); --sidebar-accent-foreground: oklch(0.4244 0.1809 265.6377); --sidebar-border: oklch(0.8823 0.0571 254.1284); --sidebar-ring: oklch(0.6231 0.188 259.8145); --font-sans: Press Start 2P; --font-serif: Press Start 2P; --font-mono: Press Start 2P; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); --tracking-normal: 0.05rem; --spacing: 0.25rem; .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(0.9451 0.1243 101.5399); --primary-foreground: oklch(0.2857 0.0639 53.8133); --secondary: oklch(0.6231 0.188 259.8145); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.2046 0 0); --muted-foreground: oklch(0.7155 0 0); --accent: oklch(0.3791 0.1378 265.5222); --accent-foreground: oklch(0.9319 0.0316 255.5855); --destructive: oklch(0.5143 0.1978 16.935); --destructive-foreground: oklch(0.9356 0.0309 17.7172); --border: oklch(0.4882 0.2172 264.3763); --input: oklch(0.4882 0.2172 264.3763); --ring: oklch(0.7137 0.1434 254.624); --chart-1: oklch(0.9451 0.1243 101.5399); --chart-2: oklch(0.7137 0.1434 254.624); --chart-3: oklch(0.7106 0.1661 22.2162); --chart-4: oklch(0.8003 0.1821 151.711); --chart-5: oklch(0.7217 0.1767 305.5038); --sidebar: oklch(0 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.9451 0.1243 101.5399); --sidebar-primary-foreground: oklch(0.2857 0.0639 53.8133); --sidebar-accent: oklch(0.3791 0.1378 265.5222); --sidebar-accent-foreground: oklch(0.9319 0.0316 255.5855); --sidebar-border: oklch(0.4882 0.2172 264.3763); --sidebar-ring: oklch(0.7137 0.1434 254.624); --font-sans: Press Start 2P; --font-serif: Press Start 2P; --font-mono: Press Start 2P; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); } `, }, { name: Theme.RustyByte, color: ` :root { --radius: 0.25rem; --primary: oklch(0.65 0.18 40); --primary-foreground: oklch(0.98 0.02 95); --background: oklch(0.96 0.02 95); --foreground: oklch(0.2 0.05 40); --card: oklch(0.96 0.02 95); --card-foreground: oklch(0.2 0.05 40); --popover: oklch(0.96 0.02 95); --popover-foreground: oklch(0.2 0.05 40); --secondary: oklch(0.85 0.1 50); --secondary-foreground: oklch(0.25 0.06 40); --muted: oklch(0.9 0.05 80); --muted-foreground: oklch(0.45 0.05 40); --accent: oklch(0.7 0.15 30); --accent-foreground: oklch(0.98 0.02 95); --destructive: oklch(0.55 0.25 20); --border: oklch(0.82 0.05 60); --input: oklch(0.82 0.05 60); --ring: oklch(0.65 0.18 40); --chart-1: oklch(0.65 0.18 40); --chart-2: oklch(0.55 0.15 20); --chart-3: oklch(0.75 0.12 50); --chart-4: oklch(0.5 0.1 60); --chart-5: oklch(0.7 0.2 30); --sidebar: oklch(0.9 0.05 80); --sidebar-foreground: oklch(0.2 0.05 40); --sidebar-primary: oklch(0.65 0.18 40); --sidebar-primary-foreground: oklch(0.98 0.02 95); --sidebar-accent: oklch(0.75 0.12 50); --sidebar-accent-foreground: oklch(0.2 0.05 40); --sidebar-border: oklch(0.82 0.05 60); --sidebar-ring: oklch(0.65 0.18 40); .dark { --primary: oklch(0.7 0.2 40); --primary-foreground: oklch(0.1 0.02 40); --background: oklch(0.15 0.05 40); --foreground: oklch(0.95 0.02 95); --card: oklch(0.18 0.05 40); --card-foreground: oklch(0.95 0.02 95); --popover: oklch(0.18 0.05 40); --popover-foreground: oklch(0.95 0.02 95); --secondary: oklch(0.35 0.08 40); --secondary-foreground: oklch(0.95 0.02 95); --muted: oklch(0.25 0.05 40); --muted-foreground: oklch(0.8 0.05 80); --accent: oklch(0.6 0.15 30); --accent-foreground: oklch(0.98 0.02 95); --destructive: oklch(0.55 0.25 20); --border: oklch(0.25 0.05 40); --input: oklch(0.25 0.05 40); --ring: oklch(0.5 0.2 40); --chart-1: oklch(0.65 0.18 40); --chart-2: oklch(0.55 0.15 20); --chart-3: oklch(0.75 0.12 50); --chart-4: oklch(0.5 0.1 60); --chart-5: oklch(0.7 0.2 30); --sidebar: oklch(0.18 0.05 40); --sidebar-foreground: oklch(0.95 0.02 95); --sidebar-primary: oklch(0.7 0.2 40); --sidebar-primary-foreground: oklch(0.95 0.02 95); --sidebar-accent: oklch(0.55 0.15 20); --sidebar-accent-foreground: oklch(0.95 0.02 95); --sidebar-border: oklch(0.25 0.05 40); --sidebar-ring: oklch(0.7 0.2 40); } `, }, { name: Theme.Zelda, color: ` :root { --radius: 0.25rem; --primary: oklch(0.75 0.2 90); --primary-foreground: oklch(0.1 0.02 10); --background: oklch(0.95 0.02 95); /* light parchment */ --foreground: oklch(0.5 0.15 120); /* deep forest green */ --card: oklch(0.96 0.02 95); --card-foreground: oklch(0.15 0.05 120); --popover: oklch(0.96 0.02 95); --popover-foreground: oklch(0.15 0.05 120); --secondary: oklch(0.5 0.15 120); --secondary-foreground: oklch(0.95 0.02 95); --muted: oklch(0.9 0.02 120); --muted-foreground: oklch(0.4 0.05 120); --accent: oklch(0.85 0.2 90); --accent-foreground: oklch(0.1 0.02 10); --destructive: oklch(0.55 0.25 30); --border: oklch(0.6 0.05 90); --input: oklch(0.6 0.05 90); --ring: oklch(0.75 0.2 90); --chart-1: oklch(0.75 0.2 90); /* golden */ --chart-2: oklch(0.5 0.15 120); /* forest green */ --chart-3: oklch(0.85 0.2 90); /* light gold */ --chart-4: oklch(0.15 0.05 120); /* dark green */ --chart-5: oklch(0.95 0.02 95); /* parchment */ --sidebar: oklch(0.9 0.02 95); --sidebar-foreground: oklch(0.15 0.05 120); --sidebar-primary: oklch(0.75 0.2 90); --sidebar-primary-foreground: oklch(0.1 0.02 10); --sidebar-accent: oklch(0.5 0.15 120); --sidebar-accent-foreground: oklch(0.95 0.02 95); --sidebar-border: oklch(0.6 0.05 90); --sidebar-ring: oklch(0.75 0.2 90); .dark { --primary: oklch(0.85 0.2 90); --primary-foreground: oklch(0.05 0.02 10); --background: oklch(0.15 0.05 120); --foreground: oklch(0.95 0.02 95); --card: oklch(0.12 0.02 20); --card-foreground: oklch(0.95 0.02 95); --popover: oklch(0.12 0.02 20); --popover-foreground: oklch(0.95 0.02 95); --secondary: oklch(0.35 0.1 120); --secondary-foreground: oklch(0.95 0.02 95); --muted: oklch(0.25 0.02 120); --muted-foreground: oklch(0.8 0.02 95); --accent: oklch(0.9 0.2 90); --accent-foreground: oklch(0.05 0.02 10); --destructive: oklch(0.55 0.25 30); --border: oklch(0.25 0.02 90); --input: oklch(0.25 0.02 90); --ring: oklch(0.35 0.1 120); --chart-1: oklch(0.75 0.2 90); --chart-2: oklch(0.5 0.15 120); --chart-3: oklch(0.85 0.2 90); --chart-4: oklch(0.15 0.05 120); --chart-5: oklch(0.1 0.02 20); --sidebar: oklch(0.12 0.02 20); --sidebar-foreground: oklch(0.95 0.02 95); --sidebar-primary: oklch(0.85 0.2 90); --sidebar-primary-foreground: oklch(0.05 0.02 10); --sidebar-accent: oklch(0.5 0.15 120); --sidebar-accent-foreground: oklch(0.95 0.02 95); --sidebar-border: oklch(0.25 0.02 90); --sidebar-ring: oklch(0.85 0.2 90); } `, }, { name: Theme.DungeonTorch, color: `:root { --radius: 0.65rem; --background: oklch(0.95 0.01 60); --foreground: oklch(0.2 0.02 40); --card: oklch(0.92 0.015 55); --card-foreground: oklch(0.2 0.02 40); --popover: oklch(0.95 0.01 60); --popover-foreground: oklch(0.2 0.02 40); --primary: oklch(0.65 0.15 55); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.85 0.03 50); --secondary-foreground: oklch(0.25 0.02 40); --muted: oklch(0.88 0.02 55); --muted-foreground: oklch(0.45 0.03 45); --accent: oklch(0.7 0.12 45); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.78 0.03 50); --input: oklch(0.78 0.03 50); --ring: oklch(0.65 0.15 55); } .dark { --radius: 0.65rem; --background: oklch(0.15 0.02 40); --foreground: oklch(0.92 0.03 55); --card: oklch(0.18 0.02 42); --card-foreground: oklch(0.92 0.03 55); --popover: oklch(0.15 0.02 40); --popover-foreground: oklch(0.92 0.03 55); --primary: oklch(0.7 0.15 55); --primary-foreground: oklch(0.12 0.01 40); --secondary: oklch(0.25 0.03 45); --secondary-foreground: oklch(0.88 0.03 55); --muted: oklch(0.22 0.02 42); --muted-foreground: oklch(0.6 0.04 50); --accent: oklch(0.65 0.12 45); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.3 0.03 45); --input: oklch(0.3 0.03 45); --ring: oklch(0.7 0.15 55); } `, }, { name: Theme.SpaceStation, color: `:root { --radius: 0.65rem; --background: oklch(0.96 0.01 240); --foreground: oklch(0.18 0.02 240); --card: oklch(0.93 0.015 235); --card-foreground: oklch(0.18 0.02 240); --popover: oklch(0.96 0.01 240); --popover-foreground: oklch(0.18 0.02 240); --primary: oklch(0.6 0.15 220); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.88 0.02 235); --secondary-foreground: oklch(0.22 0.02 240); --muted: oklch(0.9 0.015 235); --muted-foreground: oklch(0.45 0.03 240); --accent: oklch(0.7 0.12 60); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.82 0.02 235); --input: oklch(0.82 0.02 235); --ring: oklch(0.6 0.15 220); } .dark { --radius: 0.65rem; --background: oklch(0.13 0.02 240); --foreground: oklch(0.9 0.02 220); --card: oklch(0.16 0.02 238); --card-foreground: oklch(0.9 0.02 220); --popover: oklch(0.13 0.02 240); --popover-foreground: oklch(0.9 0.02 220); --primary: oklch(0.65 0.15 220); --primary-foreground: oklch(0.1 0.01 240); --secondary: oklch(0.22 0.03 235); --secondary-foreground: oklch(0.88 0.02 220); --muted: oklch(0.2 0.02 238); --muted-foreground: oklch(0.58 0.03 230); --accent: oklch(0.65 0.12 60); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.28 0.03 235); --input: oklch(0.28 0.03 235); --ring: oklch(0.65 0.15 220); } `, }, { name: Theme.PixelForest, color: `:root { --radius: 0.65rem; --background: oklch(0.95 0.02 140); --foreground: oklch(0.2 0.03 140); --card: oklch(0.92 0.025 138); --card-foreground: oklch(0.2 0.03 140); --popover: oklch(0.95 0.02 140); --popover-foreground: oklch(0.2 0.03 140); --primary: oklch(0.55 0.15 145); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.85 0.03 135); --secondary-foreground: oklch(0.25 0.03 140); --muted: oklch(0.88 0.02 138); --muted-foreground: oklch(0.45 0.04 140); --accent: oklch(0.65 0.1 85); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.78 0.03 138); --input: oklch(0.78 0.03 138); --ring: oklch(0.55 0.15 145); } .dark { --radius: 0.65rem; --background: oklch(0.14 0.03 140); --foreground: oklch(0.88 0.03 138); --card: oklch(0.17 0.03 142); --card-foreground: oklch(0.88 0.03 138); --popover: oklch(0.14 0.03 140); --popover-foreground: oklch(0.88 0.03 138); --primary: oklch(0.6 0.15 145); --primary-foreground: oklch(0.12 0.02 140); --secondary: oklch(0.23 0.04 140); --secondary-foreground: oklch(0.85 0.03 138); --muted: oklch(0.2 0.03 140); --muted-foreground: oklch(0.55 0.04 140); --accent: oklch(0.6 0.1 85); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.28 0.04 140); --input: oklch(0.28 0.04 140); --ring: oklch(0.6 0.15 145); } `, }, { name: Theme.IceCavern, color: `:root { --radius: 0.65rem; --background: oklch(0.96 0.01 250); --foreground: oklch(0.18 0.02 250); --card: oklch(0.93 0.015 248); --card-foreground: oklch(0.18 0.02 250); --popover: oklch(0.96 0.01 250); --popover-foreground: oklch(0.18 0.02 250); --primary: oklch(0.6 0.12 230); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.88 0.02 245); --secondary-foreground: oklch(0.22 0.02 250); --muted: oklch(0.9 0.015 248); --muted-foreground: oklch(0.48 0.03 245); --accent: oklch(0.85 0.06 230); --accent-foreground: oklch(0.15 0.02 250); --destructive: oklch(0.55 0.2 25); --border: oklch(0.82 0.02 245); --input: oklch(0.82 0.02 245); --ring: oklch(0.6 0.12 230); } .dark { --radius: 0.65rem; --background: oklch(0.12 0.02 250); --foreground: oklch(0.9 0.02 235); --card: oklch(0.15 0.02 248); --card-foreground: oklch(0.9 0.02 235); --popover: oklch(0.12 0.02 250); --popover-foreground: oklch(0.9 0.02 235); --primary: oklch(0.65 0.12 230); --primary-foreground: oklch(0.1 0.01 250); --secondary: oklch(0.2 0.03 248); --secondary-foreground: oklch(0.88 0.02 235); --muted: oklch(0.18 0.02 248); --muted-foreground: oklch(0.55 0.03 240); --accent: oklch(0.75 0.06 230); --accent-foreground: oklch(0.1 0.01 250); --destructive: oklch(0.55 0.2 25); --border: oklch(0.25 0.03 248); --input: oklch(0.25 0.03 248); --ring: oklch(0.65 0.12 230); } `, }, { name: Theme.LavaCore, color: `:root { --radius: 0.65rem; --background: oklch(0.95 0.01 30); --foreground: oklch(0.18 0.02 25); --card: oklch(0.92 0.015 28); --card-foreground: oklch(0.18 0.02 25); --popover: oklch(0.95 0.01 30); --popover-foreground: oklch(0.18 0.02 25); --primary: oklch(0.6 0.2 30); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.85 0.03 28); --secondary-foreground: oklch(0.22 0.02 25); --muted: oklch(0.88 0.02 28); --muted-foreground: oklch(0.45 0.03 30); --accent: oklch(0.75 0.15 70); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.55 0.22 25); --border: oklch(0.78 0.03 28); --input: oklch(0.78 0.03 28); --ring: oklch(0.6 0.2 30); } .dark { --radius: 0.65rem; --background: oklch(0.1 0.02 25); --foreground: oklch(0.9 0.03 35); --card: oklch(0.13 0.02 27); --card-foreground: oklch(0.9 0.03 35); --popover: oklch(0.1 0.02 25); --popover-foreground: oklch(0.9 0.03 35); --primary: oklch(0.65 0.2 30); --primary-foreground: oklch(0.08 0.01 25); --secondary: oklch(0.2 0.03 28); --secondary-foreground: oklch(0.88 0.03 35); --muted: oklch(0.17 0.02 27); --muted-foreground: oklch(0.55 0.04 30); --accent: oklch(0.7 0.15 70); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.22 25); --border: oklch(0.25 0.03 28); --input: oklch(0.25 0.03 28); --ring: oklch(0.65 0.2 30); } `, }, { name: Theme.GlitchMode, color: `:root { --radius: 0.65rem; --background: oklch(0.96 0 0); --foreground: oklch(0.15 0 0); --card: oklch(0.93 0 0); --card-foreground: oklch(0.15 0 0); --popover: oklch(0.96 0 0); --popover-foreground: oklch(0.15 0 0); --primary: oklch(0.65 0.2 195); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.88 0.01 0); --secondary-foreground: oklch(0.2 0 0); --muted: oklch(0.9 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.6 0.2 330); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.82 0 0); --input: oklch(0.82 0 0); --ring: oklch(0.65 0.2 195); } .dark { --radius: 0.65rem; --background: oklch(0.05 0 0); --foreground: oklch(0.9 0.02 195); --card: oklch(0.08 0 0); --card-foreground: oklch(0.9 0.02 195); --popover: oklch(0.05 0 0); --popover-foreground: oklch(0.9 0.02 195); --primary: oklch(0.7 0.2 195); --primary-foreground: oklch(0.05 0 0); --secondary: oklch(0.15 0.01 0); --secondary-foreground: oklch(0.85 0.02 195); --muted: oklch(0.12 0 0); --muted-foreground: oklch(0.55 0.03 195); --accent: oklch(0.65 0.2 330); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.2 0.02 195); --input: oklch(0.2 0.02 195); --ring: oklch(0.7 0.2 195); } `, }, { name: Theme.DwarvenVault, color: `:root { --radius: 0.65rem; --background: oklch(0.94 0.01 80); --foreground: oklch(0.2 0.02 70); --card: oklch(0.91 0.015 78); --card-foreground: oklch(0.2 0.02 70); --popover: oklch(0.94 0.01 80); --popover-foreground: oklch(0.2 0.02 70); --primary: oklch(0.65 0.12 80); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.85 0.02 75); --secondary-foreground: oklch(0.25 0.02 70); --muted: oklch(0.88 0.015 78); --muted-foreground: oklch(0.45 0.03 75); --accent: oklch(0.6 0.1 55); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.78 0.02 78); --input: oklch(0.78 0.02 78); --ring: oklch(0.65 0.12 80); } .dark { --radius: 0.65rem; --background: oklch(0.14 0.01 70); --foreground: oklch(0.88 0.03 80); --card: oklch(0.17 0.015 72); --card-foreground: oklch(0.88 0.03 80); --popover: oklch(0.14 0.01 70); --popover-foreground: oklch(0.88 0.03 80); --primary: oklch(0.7 0.12 80); --primary-foreground: oklch(0.12 0.01 70); --secondary: oklch(0.23 0.02 72); --secondary-foreground: oklch(0.85 0.03 80); --muted: oklch(0.2 0.015 72); --muted-foreground: oklch(0.55 0.03 78); --accent: oklch(0.6 0.1 55); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.28 0.02 72); --input: oklch(0.28 0.02 72); --ring: oklch(0.7 0.12 80); } `, }, { name: Theme.DragonHoard, color: `:root { --radius: 0.65rem; --background: oklch(0.95 0.01 50); --foreground: oklch(0.18 0.02 30); --card: oklch(0.92 0.015 48); --card-foreground: oklch(0.18 0.02 30); --popover: oklch(0.95 0.01 50); --popover-foreground: oklch(0.18 0.02 30); --primary: oklch(0.55 0.2 20); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.85 0.03 50); --secondary-foreground: oklch(0.22 0.02 30); --muted: oklch(0.88 0.02 48); --muted-foreground: oklch(0.45 0.03 40); --accent: oklch(0.72 0.12 80); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.78 0.03 48); --input: oklch(0.78 0.03 48); --ring: oklch(0.55 0.2 20); } .dark { --radius: 0.65rem; --background: oklch(0.08 0.01 30); --foreground: oklch(0.88 0.04 50); --card: oklch(0.11 0.015 32); --card-foreground: oklch(0.88 0.04 50); --popover: oklch(0.08 0.01 30); --popover-foreground: oklch(0.88 0.04 50); --primary: oklch(0.6 0.2 20); --primary-foreground: oklch(0.08 0.01 30); --secondary: oklch(0.18 0.02 35); --secondary-foreground: oklch(0.85 0.04 50); --muted: oklch(0.15 0.015 32); --muted-foreground: oklch(0.55 0.04 45); --accent: oklch(0.68 0.12 80); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.22 0.02 35); --input: oklch(0.22 0.02 35); --ring: oklch(0.6 0.2 20); } `, }, { name: Theme.AncientRunes, color: `:root { --radius: 0.65rem; --background: oklch(0.94 0.01 190); --foreground: oklch(0.2 0.02 185); --card: oklch(0.91 0.015 188); --card-foreground: oklch(0.2 0.02 185); --popover: oklch(0.94 0.01 190); --popover-foreground: oklch(0.2 0.02 185); --primary: oklch(0.55 0.12 185); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.85 0.02 188); --secondary-foreground: oklch(0.25 0.02 185); --muted: oklch(0.88 0.015 188); --muted-foreground: oklch(0.48 0.03 185); --accent: oklch(0.68 0.08 80); --accent-foreground: oklch(0.15 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.78 0.02 188); --input: oklch(0.78 0.02 188); --ring: oklch(0.55 0.12 185); } .dark { --radius: 0.65rem; --background: oklch(0.14 0.02 185); --foreground: oklch(0.88 0.02 190); --card: oklch(0.17 0.02 187); --card-foreground: oklch(0.88 0.02 190); --popover: oklch(0.14 0.02 185); --popover-foreground: oklch(0.88 0.02 190); --primary: oklch(0.6 0.12 185); --primary-foreground: oklch(0.12 0.01 185); --secondary: oklch(0.22 0.02 187); --secondary-foreground: oklch(0.85 0.02 190); --muted: oklch(0.2 0.02 187); --muted-foreground: oklch(0.55 0.03 188); --accent: oklch(0.63 0.08 80); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.55 0.2 25); --border: oklch(0.28 0.02 187); --input: oklch(0.28 0.02 187); --ring: oklch(0.6 0.12 185); } `, }, ]; export const getThemeCode = (theme: Theme) => themes.find((t) => t.name === theme)?.color; 54:T10cc,import type * as SelectPrimitive from "@radix-ui/react-select"; import { type VariantProps, cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Select as ShadcnSelect, SelectContent as ShadcnSelectContent, SelectGroup as ShadcnSelectGroup, SelectItem as ShadcnSelectItem, SelectLabel as ShadcnSelectLabel, SelectScrollDownButton as ShadcnSelectScrollDownButton, SelectScrollUpButton as ShadcnSelectScrollUpButton, SelectSeparator as ShadcnSelectSeparator, SelectTrigger as ShadcnSelectTrigger, SelectValue as ShadcnSelectValue, } from "@/components/ui/select"; import "@/components/ui/8bit/styles/retro.css"; export const inputVariants = cva("", { variants: { font: { normal: "", retro: "retro", }, }, defaultVariants: { font: "retro", }, }); export interface BitSelectProps extends React.SelectHTMLAttributes, VariantProps { asChild?: boolean; } function Select({ ...props }: React.ComponentProps) { return ; } function SelectGroup({ ...props }: React.ComponentProps) { return ; } interface BitSelectValueProps extends React.ComponentProps, VariantProps { asChild?: boolean; } function SelectValue({ ...props }: BitSelectValueProps) { const { font } = props; return ( ); } interface BitSelectTriggerProps extends React.ComponentProps, VariantProps { asChild?: boolean; } function SelectTrigger({ children, ...props }: BitSelectTriggerProps) { const { className, font } = props; return (

{children} ); } export interface BitSelectContentProps extends React.ComponentProps, VariantProps { asChild?: boolean; } function SelectContent({ className, children, ...props }: BitSelectContentProps) { const { font } = props; return ( {children} ); } function SelectLabel({ className, ...props }: React.ComponentProps) { return ; } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ); } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ; } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ; } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ; } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, }; 55:T9d3e,/** biome-ignore-all lint/suspicious/noDuplicateCustomProperties: We're overriding for dark mode */ @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar: var(--sidebar); --color-chart-5: var(--chart-5); --color-chart-4: var(--chart-4); --color-chart-3: var(--chart-3); --color-chart-2: var(--chart-2); --color-chart-1: var(--chart-1); --color-ring: var(--ring); --color-input: var(--input); --color-border: var(--border); --color-destructive: var(--destructive); --color-accent-foreground: var(--accent-foreground); --color-accent: var(--accent); --color-muted-foreground: var(--muted-foreground); --color-muted: var(--muted); --color-secondary-foreground: var(--secondary-foreground); --color-secondary: var(--secondary); --color-primary-foreground: var(--primary-foreground); --color-primary: var(--primary); --color-popover-foreground: var(--popover-foreground); --color-popover: var(--popover); --color-card-foreground: var(--card-foreground); --color-card: var(--card); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); } :root { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.2 0 0); --chart-2: oklch(0.4 0 0); --chart-3: oklch(0.6 0 0); --chart-4: oklch(0.8 0 0); --chart-5: oklch(0.3 0 0); --radius: 0rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.95 0 0); --chart-2: oklch(0.8 0 0); --chart-3: oklch(0.65 0 0); --chart-4: oklch(0.5 0 0); --chart-5: oklch(0.75 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .theme-default { :root { --radius: 0.65rem; --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.9 0 0); --chart-2: oklch(0.7 0 0); --chart-3: oklch(0.5 0 0); --chart-4: oklch(0.3 0 0); --chart-5: oklch(0.8 0 0); --radius: 0rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.95 0 0); --chart-2: oklch(0.8 0 0); --chart-3: oklch(0.65 0 0); --chart-4: oklch(0.5 0 0); --chart-5: oklch(0.75 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } } .theme-sega { --radius: 0rem; --primary: oklch(0.5 0.2 260); --primary-foreground: oklch(0.9 0.02 260); --background: oklch(0.85 0.1 220); --foreground: oklch(0.1 0.1 280); --card: oklch(0.85 0.1 220); --card-foreground: oklch(0.1 0.1 280); --popover: oklch(0.85 0.1 220); --popover-foreground: oklch(0.1 0.1 280); --secondary: oklch(0.5 0.2 260); --secondary-foreground: oklch(0.1 0.1 280); --muted: oklch(0.1 0.1 280); --muted-foreground: oklch(0.5 0.2 280); --accent: oklch(0.5 0.2 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.6 0.2 20); --border: oklch(0.5 0.2 260); --input: oklch(0.5 0.2 260); --ring: oklch(0.5 0.2 260); --chart-1: oklch(0.5 0.2 260); --chart-2: oklch(0.3 0.2 260); --chart-3: oklch(0.7 0.1 250); --chart-4: oklch(0.6 0.15 250); --chart-5: oklch(0.4 0.15 250); --sidebar: oklch(0.85 0.1 220); --sidebar-foreground: oklch(0.1 0.1 280); --sidebar-primary: oklch(0.5 0.2 260); --sidebar-primary-foreground: oklch(0.9 0.02 260); --sidebar-accent: oklch(0.5 0.2 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.5 0.2 260); --sidebar-ring: oklch(0.5 0.2 260); @variant dark { --primary: oklch(0.5 0.2 260); --primary-foreground: oklch(0.9 0.02 260); --background: oklch(0.1 0.1 280); --foreground: oklch(0.9 0.02 260); --card: oklch(0.1 0.1 280); --card-foreground: oklch(0.9 0.02 260); --popover: oklch(0.1 0.1 280); --popover-foreground: oklch(0.9 0.02 260); --secondary: oklch(0.5 0.2 260); --secondary-foreground: oklch(0.9 0.02 260); --muted: oklch(0.5 0.2 260); --muted-foreground: oklch(0.85 0.1 220); --accent: oklch(0.5 0.2 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.2 20); --border: oklch(0.5 0.2 260); --input: oklch(0.5 0.2 260); --ring: oklch(0.5 0.2 260); --chart-1: oklch(0.5 0.2 260); --chart-2: oklch(0.3 0.2 260); --chart-3: oklch(0.5 0.2 280); --chart-4: oklch(0.4 0.2 250); --chart-5: oklch(0.4 0.15 250); --sidebar: oklch(0.1 0.1 280); --sidebar-foreground: oklch(0.9 0.05 280); --sidebar-primary: oklch(0.5 0.2 280); --sidebar-primary-foreground: oklch(0.9 0.05 280); --sidebar-accent: oklch(0.5 0.2 280); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.5 0.2 280); --sidebar-ring: oklch(0.5 0.2 280); } } .theme-nintendo { --radius: 0rem; --primary: oklch(0.5 0.2 280); --primary-foreground: oklch(0 0 0); --background: oklch(1 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --secondary: oklch(0.7 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.7 0 0); --muted-foreground: oklch(0.4 0 0); --accent: oklch(0.7 0.1 260); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.2 10); --border: oklch(0.5 0.2 280); --input: oklch(0.5 0.2 280); --ring: oklch(0.5 0.2 280); --chart-1: oklch(0.7 0 0); --chart-2: oklch(0.5 0.2 280); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.4 0 0); --chart-5: oklch(0.5 0.2 280); --sidebar: oklch(0.9 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0.5 0.2 280); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.7 0.1 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.7 0 0); --sidebar-ring: oklch(0.5 0.2 280); @variant dark { --primary: oklch(0.5 0.2 280); --primary-foreground: oklch(0.9 0.05 280); --background: oklch(0.16 0.05 260); --foreground: oklch(1 0 0); --card: oklch(0.2 0.06 260); --card-foreground: oklch(1 0 0); --popover: oklch(0.2 0.06 260); --popover-foreground: oklch(1 0 0); --secondary: oklch(0.4 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.4 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.4 0.2 280); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.4 0.2 10); --border: oklch(1 0 0); --input: oklch(0.5 0.2 280); --ring: oklch(0.7 0.15 250); --chart-1: oklch(0 0 0); --chart-2: oklch(0.2 0 0); --chart-3: oklch(0.4 0 0); --chart-4: oklch(0.4 0.2 10); --chart-5: oklch(0.5 0.2 280); --sidebar: oklch(0.2 0.06 260); --sidebar-foreground: oklch(0.9 0.05 280); --sidebar-primary: oklch(0.5 0.2 280); --sidebar-primary-foreground: oklch(0.9 0.05 280); --sidebar-accent: oklch(0.7 0.1 260); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.28 0.05 260); --sidebar-ring: oklch(0.5 0.2 280); } } .theme-gameboy { --radius: 0rem; --primary: oklch(0.7 0.2 120); --primary-foreground: oklch(0.2 0.1 140); --background: oklch(0.8 0.2 140); --foreground: oklch(0.2 0.1 140); --card: oklch(0.8 0.2 140); --card-foreground: oklch(0.2 0.1 140); --popover: oklch(0.8 0.2 140); --popover-foreground: oklch(0.2 0.1 140); --secondary: oklch(0.7 0.2 120); --secondary-foreground: oklch(0.2 0.1 140); --muted: oklch(0.7 0.2 120); --muted-foreground: oklch(0.2 0.1 140); --accent: oklch(0.3 0.2 140); --accent-foreground: oklch(0.8 0.2 120); --destructive: oklch(0.5 0.3 30); --border: oklch(0.4 0.2 140); --input: oklch(0.4 0.2 140); --ring: oklch(0.8 0.2 120); --chart-1: oklch(0.4 0.2 140); --chart-2: oklch(0.3 0.2 140); --chart-3: oklch(0.4 0.2 140); --chart-4: oklch(0.4 0.2 140); --chart-5: oklch(0.4 0.2 140); --sidebar: oklch(0.8 0.2 140); --sidebar-foreground: oklch(0.2 0.1 140); --sidebar-primary: oklch(0.8 0.2 120); --sidebar-primary-foreground: oklch(0.2 0.1 140); --sidebar-accent: oklch(0.7 0.2 120); --sidebar-accent-foreground: oklch(0.2 0.1 140); --sidebar-border: oklch(0.4 0.2 140); --sidebar-ring: oklch(0.8 0.2 120); @variant dark { --primary: oklch(0.7 0.2 120); --primary-foreground: oklch(0.2 0.1 140); --background: oklch(0.2 0.1 140); --foreground: oklch(0.8 0.2 120); --card: oklch(0.2 0.1 140); --card-foreground: oklch(0.8 0.2 120); --popover: oklch(0.2 0.1 140); --popover-foreground: oklch(0.8 0.2 120); --secondary: oklch(0.3 0.1 140); --secondary-foreground: oklch(0.8 0.2 120); --muted: oklch(0.3 0.1 140); --muted-foreground: oklch(0.7 0.2 120); --accent: oklch(0.4 0.2 140); --accent-foreground: oklch(0.8 0.2 120); --destructive: oklch(0.5 0.3 30); --border: oklch(0.4 0.2 140); --input: oklch(0.4 0.2 140); --ring: oklch(0.8 0.2 120); --chart-1: oklch(0.4 0.2 140); --chart-2: oklch(0.3 0.2 140); --chart-3: oklch(0.4 0.2 140); --chart-4: oklch(0.4 0.2 140); --chart-5: oklch(0.4 0.2 140); --sidebar: oklch(0.2 0.1 140); --sidebar-foreground: oklch(0.8 0.2 120); --sidebar-primary: oklch(0.4 0.2 140); --sidebar-primary-foreground: oklch(0.8 0.2 120); --sidebar-accent: oklch(0.3 0.1 140); --sidebar-accent-foreground: oklch(0.8 0.2 120); --sidebar-border: oklch(0.4 0.2 140); --sidebar-ring: oklch(0.8 0.2 120); } } .theme-atari { --radius: 0rem; --primary: oklch(0.5 0.2 60); --primary-foreground: oklch(0 0 0); --background: oklch(0.7 0 0); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --secondary: oklch(0.7 0 0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.7 0 0); --muted-foreground: oklch(0 0 0); --accent: oklch(0.5 0.2 60); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.5 0.3 20); --border: oklch(0.5 0.2 60); --input: oklch(0.7 0 0); --ring: oklch(0.7 0 0); --chart-1: oklch(0.7 0 0); --chart-2: oklch(0.5 0.2 60); --chart-3: oklch(0.9 0 0); --chart-4: oklch(0.7 0 0); --chart-5: oklch(0.5 0.3 280); --sidebar: oklch(0.9 0 0); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0.5 0.3 280); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.6 0.3 30); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.7 0 0); --sidebar-ring: oklch(0.5 0.3 280); @variant dark { --primary: oklch(0.4 0.2 60); --primary-foreground: oklch(0.9 0 0); --background: oklch(0.2 0 0); --foreground: oklch(0.9 0 0); --card: oklch(0.4 0 0); --card-foreground: oklch(0.9 0 0); --popover: oklch(0.4 0 0); --popover-foreground: oklch(0.9 0 0); --secondary: oklch(0.4 0 0); --secondary-foreground: oklch(0.9 0 0); --muted: oklch(0.4 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.4 0.2 60); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.4 0.3 20); --border: oklch(0.4 0 0); --input: oklch(0.4 0 0); --ring: oklch(0 0 0); --chart-1: oklch(0 0 0); --chart-2: oklch(0.4 0.2 60); --chart-3: oklch(0.7 0 0); --chart-4: oklch(0.4 0 0); --chart-5: oklch(0.5 0.3 280); --sidebar: oklch(0.4 0 0); --sidebar-foreground: oklch(0.9 0 0); --sidebar-primary: oklch(0.5 0.3 280); --sidebar-primary-foreground: oklch(0.9 0 0); --sidebar-accent: oklch(0.5 0.3 20); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.4 0 0); --sidebar-ring: oklch(0.5 0.3 280); } } .theme-arcade { --radius: 0rem; --primary: oklch(0.7 0.25 320); --primary-foreground: oklch(0.1 0.05 320); --background: oklch(0.98 0.01 280); --foreground: oklch(0.1 0.05 280); --card: oklch(1 0 0); --card-foreground: oklch(0.1 0.05 280); --popover: oklch(1 0 0); --popover-foreground: oklch(0.1 0.05 280); --secondary: oklch(0.6 0.2 220); --secondary-foreground: oklch(0.1 0.05 220); --muted: oklch(0.95 0.02 280); --muted-foreground: oklch(0.4 0.1 280); --accent: oklch(0.8 0.25 60); --accent-foreground: oklch(0.1 0.05 60); --destructive: oklch(0.7 0.3 20); --border: oklch(0.7 0.25 320); --input: oklch(0.95 0.02 280); --ring: oklch(0.7 0.25 320); --chart-1: oklch(0.7 0.25 320); --chart-2: oklch(0.6 0.2 220); --chart-3: oklch(0.8 0.25 60); --chart-4: oklch(0.7 0.3 20); --chart-5: oklch(0.6 0.25 140); --sidebar: oklch(0.96 0.01 280); --sidebar-foreground: oklch(0.1 0.05 280); --sidebar-primary: oklch(0.7 0.25 320); --sidebar-primary-foreground: oklch(0.1 0.05 320); --sidebar-accent: oklch(0.6 0.2 220); --sidebar-accent-foreground: oklch(0.1 0.05 220); --sidebar-border: oklch(0.7 0.25 320); --sidebar-ring: oklch(0.7 0.25 320); @variant dark { --primary: oklch(0.8 0.3 320); --primary-foreground: oklch(0.05 0.02 320); --background: oklch(0.02 0.01 280); --foreground: oklch(0.98 0.01 280); --card: oklch(0.05 0.02 280); --card-foreground: oklch(0.98 0.01 280); --popover: oklch(0.05 0.02 280); --popover-foreground: oklch(0.98 0.01 280); --secondary: oklch(0.7 0.25 220); --secondary-foreground: oklch(0.05 0.02 220); --muted: oklch(0.1 0.03 280); --muted-foreground: oklch(0.8 0.1 280); --accent: oklch(0.9 0.3 60); --accent-foreground: oklch(0.7 0.25 220); --destructive: oklch(0.8 0.35 20); --border: oklch(0.8 0.3 320); --input: oklch(0.1 0.03 280); --ring: oklch(0.6 0.25 320); --chart-1: oklch(0.8 0.3 320); --chart-2: oklch(0.7 0.25 220); --chart-3: oklch(0.9 0.3 60); --chart-4: oklch(0.8 0.35 20); --chart-5: oklch(0.7 0.3 140); --sidebar: oklch(0.03 0.01 280); --sidebar-foreground: oklch(0.98 0.01 280); --sidebar-primary: oklch(0.8 0.3 320); --sidebar-primary-foreground: oklch(0.05 0.02 320); --sidebar-accent: oklch(0.7 0.25 220); --sidebar-accent-foreground: oklch(0.05 0.02 220); --sidebar-border: oklch(0.8 0.3 320); --sidebar-ring: oklch(0.8 0.3 320); } } .theme-neo-geo { --radius: 0rem; --primary: oklch(0.65 0.25 25); --primary-foreground: oklch(0.98 0.01 25); --background: oklch(0.98 0.03 25); --foreground: oklch(0.15 0.05 25); --card: oklch(1 0 0); --card-foreground: oklch(0.15 0.05 25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.15 0.05 25); --secondary: oklch(0.9 0.02 25); --secondary-foreground: oklch(0.15 0.05 25); --muted: oklch(0.95 0.01 25); --muted-foreground: oklch(0.45 0.1 25); --accent: oklch(0.75 0.2 25); --accent-foreground: oklch(0.98 0.01 25); --destructive: oklch(0.7 0.3 20); --border: oklch(0.8 0.1 25); --input: oklch(0.95 0.01 25); --ring: oklch(0.65 0.25 25); --chart-1: oklch(0.65 0.25 25); --chart-2: oklch(0.45 0.2 25); --chart-3: oklch(0.8 0.15 25); --chart-4: oklch(0.6 0.25 25); --chart-5: oklch(0.7 0.2 25); --sidebar: oklch(0.96 0.01 25); --sidebar-foreground: oklch(0.15 0.05 25); --sidebar-primary: oklch(0.65 0.25 25); --sidebar-primary-foreground: oklch(0.98 0.01 25); --sidebar-accent: oklch(0.9 0.02 25); --sidebar-accent-foreground: oklch(0.15 0.05 25); --sidebar-border: oklch(0.8 0.1 25); --sidebar-ring: oklch(0.65 0.25 25); @variant dark { --primary: oklch(0.75 0.3 25); --primary-foreground: oklch(0.05 0.02 25); --background: oklch(0.05 0.02 25); --foreground: oklch(0.95 0.01 25); --card: oklch(0.1 0.03 25); --card-foreground: oklch(0.95 0.01 25); --popover: oklch(0.1 0.03 25); --popover-foreground: oklch(0.95 0.01 25); --secondary: oklch(0.15 0.05 25); --secondary-foreground: oklch(0.95 0.01 25); --muted: oklch(0.15 0.05 25); --muted-foreground: oklch(0.7 0.1 25); --accent: oklch(0.2 0.08 25); --accent-foreground: oklch(0.95 0.01 25); --destructive: oklch(0.8 0.35 20); --border: oklch(0.2 0.08 25); --input: oklch(0.15 0.05 25); --ring: oklch(0.55 0.25 25); --chart-1: oklch(0.75 0.3 25); --chart-2: oklch(0.55 0.25 25); --chart-3: oklch(0.85 0.2 25); --chart-4: oklch(0.65 0.3 25); --chart-5: oklch(0.75 0.25 25); --sidebar: oklch(0.08 0.03 25); --sidebar-foreground: oklch(0.95 0.01 25); --sidebar-primary: oklch(0.75 0.3 25); --sidebar-primary-foreground: oklch(0.05 0.02 25); --sidebar-accent: oklch(0.15 0.05 25); --sidebar-accent-foreground: oklch(0.95 0.01 25); --sidebar-border: oklch(0.2 0.08 25); --sidebar-ring: oklch(0.75 0.3 25); } } .theme-soft-pop { --background: oklch(0.9789 0.0082 121.6272); --foreground: oklch(0 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0 0 0); --primary: oklch(0.5106 0.2301 276.9656); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.7038 0.123 182.5025); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9551 0 0); --muted-foreground: oklch(0.3211 0 0); --accent: oklch(0.7686 0.1647 70.0804); --accent-foreground: oklch(0.7845 0.1325 181.912); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); --border: oklch(0 0 0); --input: oklch(0.5555 0 0); --ring: oklch(0.7853 0.1041 274.7134); --chart-1: oklch(0.5106 0.2301 276.9656); --chart-2: oklch(0.7038 0.123 182.5025); --chart-3: oklch(0.7686 0.1647 70.0804); --chart-4: oklch(0.6559 0.2118 354.3084); --chart-5: oklch(0.7227 0.192 149.5793); --sidebar: oklch(0.9789 0.0082 121.6272); --sidebar-foreground: oklch(0 0 0); --sidebar-primary: oklch(0.5106 0.2301 276.9656); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.7686 0.1647 70.0804); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(0 0 0); --sidebar-ring: oklch(0.7853 0.1041 274.7134); --font-sans: DM Sans, sans-serif; --font-serif: DM Sans, sans-serif; --font-mono: Space Mono, monospace; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13); --tracking-normal: normal; --spacing: 0.25rem; @variant dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.2455 0.0217 257.2823); --card-foreground: oklch(1 0 0); --popover: oklch(0.2455 0.0217 257.2823); --popover-foreground: oklch(1 0 0); --primary: oklch(0.6801 0.1583 276.9349); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.7845 0.1325 181.912); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.3211 0 0); --muted-foreground: oklch(0.8452 0 0); --accent: oklch(0.879 0.1534 91.6054); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.7106 0.1661 22.2162); --destructive-foreground: oklch(0 0 0); --border: oklch(0.4459 0 0); --input: oklch(1 0 0); --ring: oklch(0.6801 0.1583 276.9349); --chart-1: oklch(0.6801 0.1583 276.9349); --chart-2: oklch(0.7845 0.1325 181.912); --chart-3: oklch(0.879 0.1534 91.6054); --chart-4: oklch(0.7253 0.1752 349.7607); --chart-5: oklch(0.8003 0.1821 151.711); --sidebar: oklch(0 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.6801 0.1583 276.9349); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.879 0.1534 91.6054); --sidebar-accent-foreground: oklch(0 0 0); --sidebar-border: oklch(1 0 0); --sidebar-ring: oklch(0.6801 0.1583 276.9349); --font-sans: DM Sans, sans-serif; --font-serif: DM Sans, sans-serif; --font-mono: Space Mono, monospace; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.03); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.13); } } .theme-vhs { --background: oklch(0.9768 0.0142 308.299); --foreground: oklch(0.2905 0.1432 302.7167); --card: oklch(1 0 0); --card-foreground: oklch(0.2905 0.1432 302.7167); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2905 0.1432 302.7167); --primary: oklch(0.5915 0.2569 322.8961); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.5575 0.2525 302.3212); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.9464 0.0327 307.1745); --muted-foreground: oklch(0.4383 0.1983 303.7241); --accent: oklch(0.903 0.0732 319.6198); --accent-foreground: oklch(0.3807 0.1661 304.9874); --destructive: oklch(0.5246 0.199 3.9582); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9024 0.0604 306.703); --input: oklch(0.9024 0.0604 306.703); --ring: oklch(0.5876 0.1389 241.9661); --chart-1: oklch(0.5915 0.2569 322.8961); --chart-2: oklch(0.5575 0.2525 302.3212); --chart-3: oklch(0.5876 0.1389 241.9661); --chart-4: oklch(0.6002 0.1038 184.704); --chart-5: oklch(0.5916 0.218 0.5844); --sidebar: oklch(0.9768 0.0142 308.299); --sidebar-foreground: oklch(0.2905 0.1432 302.7167); --sidebar-primary: oklch(0.5915 0.2569 322.8961); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.903 0.0732 319.6198); --sidebar-accent-foreground: oklch(0.3807 0.1661 304.9874); --sidebar-border: oklch(0.9024 0.0604 306.703); --sidebar-ring: oklch(0.5876 0.1389 241.9661); --font-sans: VT323; --font-serif: VT323; --font-mono: VT323; --radius: 0.3rem; --shadow-2xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.05); --shadow-xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.05); --shadow-sm: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-md: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 2px 4px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-lg: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 4px 6px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1), 0px 8px 10px 0px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-2xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.25); --tracking-normal: 0.05rem; --spacing: 0.25rem; @variant dark { --background: oklch(0.166 0.0254 298.9423); --foreground: oklch(0.9024 0.0604 306.703); --card: oklch(0.1962 0.0365 301.0125); --card-foreground: oklch(0.9024 0.0604 306.703); --popover: oklch(0.1962 0.0365 301.0125); --popover-foreground: oklch(0.9024 0.0604 306.703); --primary: oklch(0.6668 0.2591 322.1499); --primary-foreground: oklch(0.2795 0.0368 260.031); --secondary: oklch(0.6268 0.2325 303.9004); --secondary-foreground: oklch(0.9464 0.0327 307.1745); --muted: oklch(0.2591 0.0611 305.6368); --muted-foreground: oklch(0.7161 0.0091 56.259); --accent: oklch(0.2932 0.1309 325.661); --accent-foreground: oklch(0.833 0.1322 321.4337); --destructive: oklch(0.5246 0.199 3.9582); --destructive-foreground: oklch(0.9482 0.0276 342.2585); --border: oklch(0.2905 0.1432 302.7167); --input: oklch(0.2905 0.1432 302.7167); --ring: oklch(0.6847 0.1479 237.3225); --chart-1: oklch(0.6668 0.2591 322.1499); --chart-2: oklch(0.6268 0.2325 303.9004); --chart-3: oklch(0.6847 0.1479 237.3225); --chart-4: oklch(0.7038 0.123 182.5025); --chart-5: oklch(0.6559 0.2118 354.3084); --sidebar: oklch(0.166 0.0254 298.9423); --sidebar-foreground: oklch(0.9024 0.0604 306.703); --sidebar-primary: oklch(0.6668 0.2591 322.1499); --sidebar-primary-foreground: oklch(0.2795 0.0368 260.031); --sidebar-accent: oklch(0.2932 0.1309 325.661); --sidebar-accent-foreground: oklch(0.833 0.1322 321.4337); --sidebar-border: oklch(0.2905 0.1432 302.7167); --sidebar-ring: oklch(0.6847 0.1479 237.3225); --font-sans: VT323; --font-serif: VT323; --font-mono: VT323; --radius: 0.3rem; --shadow-2xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-xs: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.1); --shadow-sm: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 1px 2px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-md: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 2px 4px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-lg: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 4px 6px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.2), 0px 8px 10px 0px hsl(198.6301 88.664% 48.4314% / 0.2); --shadow-2xl: 0px 0px 8px 1px hsl(198.6301 88.664% 48.4314% / 0.5); } } .theme-pacman { --background: oklch(1 0 0); --foreground: oklch(0.2101 0.0318 264.6645); --card: oklch(0.9846 0.0017 247.8389); --card-foreground: oklch(0.2101 0.0318 264.6645); --popover: oklch(1 0 0); --popover-foreground: oklch(0.2101 0.0318 264.6645); --primary: oklch(0.8369 0.1644 84.4286); --primary-foreground: oklch(0.2857 0.0639 53.8133); --secondary: oklch(0.6231 0.188 259.8145); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.967 0.0029 264.5419); --muted-foreground: oklch(0.551 0.0234 264.3637); --accent: oklch(0.9319 0.0316 255.5855); --accent-foreground: oklch(0.4244 0.1809 265.6377); --destructive: oklch(0.6368 0.2078 25.3313); --destructive-foreground: oklch(1 0 0); --border: oklch(0.8823 0.0571 254.1284); --input: oklch(0.8823 0.0571 254.1284); --ring: oklch(0.6231 0.188 259.8145); --chart-1: oklch(0.8369 0.1644 84.4286); --chart-2: oklch(0.6231 0.188 259.8145); --chart-3: oklch(0.6368 0.2078 25.3313); --chart-4: oklch(0.7227 0.192 149.5793); --chart-5: oklch(0.6268 0.2325 303.9004); --sidebar: oklch(0.9846 0.0017 247.8389); --sidebar-foreground: oklch(0.2101 0.0318 264.6645); --sidebar-primary: oklch(0.8369 0.1644 84.4286); --sidebar-primary-foreground: oklch(0.2857 0.0639 53.8133); --sidebar-accent: oklch(0.9319 0.0316 255.5855); --sidebar-accent-foreground: oklch(0.4244 0.1809 265.6377); --sidebar-border: oklch(0.8823 0.0571 254.1284); --sidebar-ring: oklch(0.6231 0.188 259.8145); --font-sans: "Press Start 2P"; --font-serif: "Press Start 2P"; --font-mono: "Press Start 2P"; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); --tracking-normal: 0.05rem; --spacing: 0.25rem; @variant dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(0.9451 0.1243 101.5399); --primary-foreground: oklch(0.2857 0.0639 53.8133); --secondary: oklch(0.6231 0.188 259.8145); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.2046 0 0); --muted-foreground: oklch(0.7155 0 0); --accent: oklch(0.3791 0.1378 265.5222); --accent-foreground: oklch(0.9319 0.0316 255.5855); --destructive: oklch(0.5143 0.1978 16.935); --destructive-foreground: oklch(0.9356 0.0309 17.7172); --border: oklch(0.4882 0.2172 264.3763); --input: oklch(0.4882 0.2172 264.3763); --ring: oklch(0.7137 0.1434 254.624); --chart-1: oklch(0.9451 0.1243 101.5399); --chart-2: oklch(0.7137 0.1434 254.624); --chart-3: oklch(0.7106 0.1661 22.2162); --chart-4: oklch(0.8003 0.1821 151.711); --chart-5: oklch(0.7217 0.1767 305.5038); --sidebar: oklch(0 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.9451 0.1243 101.5399); --sidebar-primary-foreground: oklch(0.2857 0.0639 53.8133); --sidebar-accent: oklch(0.3791 0.1378 265.5222); --sidebar-accent-foreground: oklch(0.9319 0.0316 255.5855); --sidebar-border: oklch(0.4882 0.2172 264.3763); --sidebar-ring: oklch(0.7137 0.1434 254.624); --font-sans: "Press Start 2P"; --font-serif: "Press Start 2P"; --font-mono: "Press Start 2P"; --radius: 0rem; --shadow-2xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-xs: 0px 0px 0px 0px hsl(0 0% 0% / 0); --shadow-sm: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 1px 2px -1px hsl(0 0% 0% / 0); --shadow-md: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 2px 4px -1px hsl(0 0% 0% / 0); --shadow-lg: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 4px 6px -1px hsl(0 0% 0% / 0); --shadow-xl: 0px 0px 0px 0px hsl(0 0% 0% / 0), 0px 8px 10px -1px hsl(0 0% 0% / 0); --shadow-2xl: 0px 0px 0px 0px hsl(0 0% 0% / 0); } } .theme-rusty-byte { --radius: 0.25rem; --primary: oklch(0.65 0.18 40); --primary-foreground: oklch(0.98 0.02 95); --background: oklch(0.96 0.02 95); --foreground: oklch(0.2 0.05 40); --card: oklch(0.96 0.02 95); --card-foreground: oklch(0.2 0.05 40); --popover: oklch(0.96 0.02 95); --popover-foreground: oklch(0.2 0.05 40); --secondary: oklch(0.85 0.1 50); --secondary-foreground: oklch(0.25 0.06 40); --muted: oklch(0.9 0.05 80); --muted-foreground: oklch(0.45 0.05 40); --accent: oklch(0.7 0.15 30); --accent-foreground: oklch(0.98 0.02 95); --destructive: oklch(0.55 0.25 20); --border: oklch(0.82 0.05 60); --input: oklch(0.82 0.05 60); --ring: oklch(0.65 0.18 40); --chart-1: oklch(0.65 0.18 40); --chart-2: oklch(0.55 0.15 20); --chart-3: oklch(0.75 0.12 50); --chart-4: oklch(0.5 0.1 60); --chart-5: oklch(0.7 0.2 30); --sidebar: oklch(0.9 0.05 80); --sidebar-foreground: oklch(0.2 0.05 40); --sidebar-primary: oklch(0.65 0.18 40); --sidebar-primary-foreground: oklch(0.98 0.02 95); --sidebar-accent: oklch(0.75 0.12 50); --sidebar-accent-foreground: oklch(0.2 0.05 40); --sidebar-border: oklch(0.82 0.05 60); --sidebar-ring: oklch(0.65 0.18 40); .dark { --primary: oklch(0.7 0.2 40); --primary-foreground: oklch(0.1 0.02 40); --background: oklch(0.15 0.05 40); --foreground: oklch(0.95 0.02 95); --card: oklch(0.18 0.05 40); --card-foreground: oklch(0.95 0.02 95); --popover: oklch(0.18 0.05 40); --popover-foreground: oklch(0.95 0.02 95); --secondary: oklch(0.35 0.08 40); --secondary-foreground: oklch(0.95 0.02 95); --muted: oklch(0.25 0.05 40); --muted-foreground: oklch(0.8 0.05 80); --accent: oklch(0.6 0.15 30); --accent-foreground: oklch(0.98 0.02 95); --destructive: oklch(0.55 0.25 20); --border: oklch(0.25 0.05 40); --input: oklch(0.25 0.05 40); --ring: oklch(0.5 0.2 40); --chart-1: oklch(0.65 0.18 40); --chart-2: oklch(0.55 0.15 20); --chart-3: oklch(0.75 0.12 50); --chart-4: oklch(0.5 0.1 60); --chart-5: oklch(0.7 0.2 30); --sidebar: oklch(0.18 0.05 40); --sidebar-foreground: oklch(0.95 0.02 95); --sidebar-primary: oklch(0.7 0.2 40); --sidebar-primary-foreground: oklch(0.95 0.02 95); --sidebar-accent: oklch(0.55 0.15 20); --sidebar-accent-foreground: oklch(0.95 0.02 95); --sidebar-border: oklch(0.25 0.05 40); --sidebar-ring: oklch(0.7 0.2 40); } } .theme-zelda { --radius: 0.25rem; /* GOLDEN YELLOW PRIMARY */ --primary: oklch(0.75 0.2 90); --primary-foreground: oklch(0.1 0.02 10); /* BACKGROUND / FOREGROUND */ --background: oklch(0.95 0.02 95); /* light parchment */ --foreground: oklch(0.5 0.15 120); /* deep forest green */ /* CARDS */ --card: oklch(0.96 0.02 95); --card-foreground: oklch(0.15 0.05 120); /* POPOVER */ --popover: oklch(0.96 0.02 95); --popover-foreground: oklch(0.15 0.05 120); /* SECONDARY (FOREST GREEN) */ --secondary: oklch(0.5 0.15 120); --secondary-foreground: oklch(0.95 0.02 95); /* MUTED */ --muted: oklch(0.9 0.02 120); --muted-foreground: oklch(0.4 0.05 120); /* ACCENT (LIGHT GOLD) */ --accent: oklch(0.85 0.2 90); --accent-foreground: oklch(0.1 0.02 10); /* DESTRUCTIVE (RED HEART / DANGER) */ --destructive: oklch(0.55 0.25 30); --border: oklch(0.6 0.05 90); --input: oklch(0.6 0.05 90); --ring: oklch(0.75 0.2 90); /* CHART COLORS */ --chart-1: oklch(0.75 0.2 90); /* golden */ --chart-2: oklch(0.5 0.15 120); /* forest green */ --chart-3: oklch(0.85 0.2 90); /* light gold */ --chart-4: oklch(0.15 0.05 120); /* dark green */ --chart-5: oklch(0.95 0.02 95); /* parchment */ /* SIDEBAR */ --sidebar: oklch(0.9 0.02 95); --sidebar-foreground: oklch(0.15 0.05 120); --sidebar-primary: oklch(0.75 0.2 90); --sidebar-primary-foreground: oklch(0.1 0.02 10); --sidebar-accent: oklch(0.5 0.15 120); --sidebar-accent-foreground: oklch(0.95 0.02 95); --sidebar-border: oklch(0.6 0.05 90); --sidebar-ring: oklch(0.75 0.2 90); @variant dark { --primary: oklch(0.85 0.2 90); --primary-foreground: oklch(0.05 0.02 10); --background: oklch(0.15 0.05 120); --foreground: oklch(0.95 0.02 95); --card: oklch(0.12 0.02 20); --card-foreground: oklch(0.95 0.02 95); --popover: oklch(0.12 0.02 20); --popover-foreground: oklch(0.95 0.02 95); --secondary: oklch(0.35 0.1 120); --secondary-foreground: oklch(0.95 0.02 95); --muted: oklch(0.25 0.02 120); --muted-foreground: oklch(0.8 0.02 95); --accent: oklch(0.9 0.2 90); --accent-foreground: oklch(0.05 0.02 10); --destructive: oklch(0.55 0.25 30); --border: oklch(0.25 0.02 90); --input: oklch(0.25 0.02 90); --ring: oklch(0.35 0.1 120); --chart-1: oklch(0.75 0.2 90); --chart-2: oklch(0.5 0.15 120); --chart-3: oklch(0.85 0.2 90); --chart-4: oklch(0.15 0.05 120); --chart-5: oklch(0.1 0.02 20); --sidebar: oklch(0.12 0.02 20); --sidebar-foreground: oklch(0.95 0.02 95); --sidebar-primary: oklch(0.85 0.2 90); --sidebar-primary-foreground: oklch(0.05 0.02 10); --sidebar-accent: oklch(0.5 0.15 120); --sidebar-accent-foreground: oklch(0.95 0.02 95); --sidebar-border: oklch(0.25 0.02 90); --sidebar-ring: oklch(0.85 0.2 90); } } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","nuqs",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nuqs","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"nuqs"}]]}]}]]}],["$","$L4f",null,{"namespace":"@catalogs","registryDependencies":["select"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/select-theme-dropdown.tsx","content":"$51","type":"registry:component","target":"components/select-theme-dropdown.tsx"},{"path":"components/active-theme.tsx","content":"$52","type":"registry:component","target":"components/active-theme.tsx"},{"path":"lib/themes.ts","content":"$53","type":"registry:component","target":"lib/themes.ts"},{"path":"components/ui/8bit/select.tsx","content":"$54","type":"registry:component","target":"components/ui/8bit/select.tsx"},{"path":"components/ui/8bit/styles/retro.css","content":"@import url(\"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap\");\n\n.retro {\n font-family:\n \"Press Start 2P\",\n system-ui,\n -apple-system,\n sans-serif;\n line-height: 1.5;\n letter-spacing: 0.5px;\n}\n\n.pixelated {\n image-rendering: pixelated;\n image-rendering: crisp-edges;\n}","type":"registry:component","target":"components/ui/8bit/styles/retro.css"},{"path":"app/retro-globals.css","content":"$55","type":"registry:component","target":"app/retro-globals.css"}],"className":"h-[70svh] min-h-80"}]]}]