retro-css-architecture

レトロ CSS アーキテクチャ

カスタムプロパティ、ピクセルフォント、レスポンシブパターンを使用して、8 ビットコンポーネントの CSS を整理します。

必須インポート

すべての 8 ビットコンポーネントで、レトロスタイルシートをインポートする必要があります。

import "@/components/ui/8bit/styles/retro.css";

ピクセルフォント

本格的な 8 ビットのタイポグラフィには、「Press Start 2P」を使用します。

.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

クラスまたはフォントバリアントで適用します。

<Button className="retro">START GAME</Button>

// or via font prop
<Button font="retro">START GAME</Button>

ピクセル化された画像

ピクセルアート画像をくっきりと表示するには、次のようにします。

.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

<Image src="/pixel-art.png" className="pixelated" />

ダークモードの色

ダークモードのバリアントを使用し、セマンティックな色名を指定します。

<div className="border-foreground dark:border-ring" />
<div className="bg-foreground dark:bg-ring" />

レスポンシブなピクセルサイズ

レトロな雰囲気を出すため、ピクセル値を統一します。

{/* Standard pixel sizes */}
<div className="size-1.5" />      {/* Corner pixels */}
<div className="h-1.5 w-3" />     {/* Shadow segments */}
<div className="border-y-6" />     {/* Card borders */}

{/* Mobile considerations */}
<div className="h-[5px] md:h-1.5" />

CSS の整理

レトロ専用のスタイルは components/ui/8bit/styles/retro.css にまとめます。

/* Import pixel font */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

/* Font class */
.retro {
  font-family: "Press Start 2P", system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* Image handling */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

コンポーネントレベルの CSS

コンポーネント固有のスタイリングには、Tailwind ユーティリティを使用します。

<div
  className={cn(
    "relative border-y-6 border-foreground dark:border-ring",
    "rounded-none active:translate-y-1 transition-transform",
    className
  )}
/>

主な原則

1. retro.css をインポート - すべての 8 ビットコンポーネントで必須です
2. ピクセルフォント - 本格的な見た目には「Press Start 2P」を使用します
3. ピクセル化された画像 - スプライトに image-rendering: pixelated を適用します
4. サイズの統一 - 固定のピクセル値（1.5、3、6px）を使用します
5. ダークモード - dark: プレフィックスを付けて、セマンティックな色を使用します
6. rounded-none - レトロな雰囲気を出すため、すべての角丸をなくします
7. Tailwind を優先 - カスタム CSS より先にユーティリティを使用します

参考ファイル

• components/ui/8bit/styles/retro.css - グローバルなレトロスタイル
• components/ui/8bit/button.tsx - CSS クラスの使用例