retro-css-architecture

Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.

1. Zaimportuj arkusz stylów retro do każdego komponentu 8-bitowego, dodając import "@/components/ui/8bit/styles/retro.css"; na górze pliku TSX.

2. Zastosuj klasę retro do elementów tekstowych, aby uaktywnić pikselową czcionkę Press Start 2P — możesz użyć className="retro" lub właściwości font="retro" w komponentach Button i innych elementach.

3. Dla grafik pixel artu dodaj klasę pixelated (className="pixelated"), aby zapewnić ostre, niezmiękczane renderowanie obrazów — użyj właściwości CSS image-rendering: pixelated lub crisp-edges.

4. Kontroluj kolory za pomocą semantycznych nazw klas z wariantami trybu ciemnego, na przykład border-foreground dark:border-ring dla obramowań lub bg-foreground dark:bg-ring dla tła.

5. Utrzymuj spójny rozmiar pikseli w całym projekcie, korzystając z predefiniowanych wartości (np. size-1.5 dla narożnych pikseli, border-y-6 dla obramowań kart) i dostosuj je do urządzeń mobilnych za pomocą breakpointów responsywnych (h-[5px] md:h-1.5).

6. Przechowuj wszystkie style specyficzne dla retro w pliku components/ui/8bit/styles/retro.css, importując tam czcionkę z Google Fonts i definiując klasy bazowe dla spójności całego systemu designu.