ryokun6/ui-design-styling

ryOS UI Design & Styling

The 4 Themes

| Theme | ID | Key Traits | |-------|-----|------------| | System 7 | system7 | Black/white, square corners, Chicago font, dotted patterns | | macOS Aqua | macosx | Pinstripes, traffic lights, glossy buttons, Lucida Grande | | Windows XP | xp | Blue gradients, Luna style, soft shadows, Tahoma | | Windows 98 | win98 | Gray 3D bevels, classic blue title bars, MS Sans Serif |

Essential Utilities

import { cn } from "@/lib/utils";
import { useTheme } from "@/contexts/ThemeContext";

const { osTheme } = useTheme();

// Theme-conditional classes
className={cn(
  "base-classes",
  osTheme === "macosx" && "aqua-specific",
  osTheme === "system7" && "system7-specific"
)}

OS-Aware Tailwind Classes

className="bg-os-window-bg"        // Window background
className="border-os-window"       // Window border
className="rounded-os"             // Theme-appropriate radius
className="font-os-ui"             // UI font stack
className="font-os-mono"           // Monospace font
className="shadow-os-window"       // Window shadow
className="h-os-titlebar"          // Title bar height

CSS Variables

Access via var(--name):

--os-font-ui, --os-font-mono
--os-color-window-bg, --os-color-window-border
--os-color-titlebar-active-bg, --os-color-titlebar-inactive-bg
--os-color-button-face, --os-color-button-highlight, --os-color-button-shadow
--os-color-selection-bg, --os-color-selection-text
--os-metrics-border-width, --os-metrics-radius
--os-metrics-titlebar-height, --os-metrics-menubar-height

---

Theme-Specific Styling

System 7

<div className={cn(
  "border-2 border-black bg-white rounded-none",
  "font-chicago text-black",
  "shadow-[2px_2px_0px_0px_rgba(0,0,0,0.5)]"
)}>

macOS Aqua

<div className={cn(
  "bg-[#E8E8E8] border border-black/30",
  "rounded-lg font-lucida-grande",
  "shadow-[0_3px_10px_rgba(0,0,0,0.3)]"
)}>
  <button className="aqua-button primary">OK</button>
</div>

Windows XP

<div className={cn(
  "bg-[#ECE9D8] border-[3px] border-[#0054E3]",
  "rounded-[0.5rem] font-tahoma",
  "shadow-[0_4px_8px_rgba(0,0,0,0.25)]"
)}>

Windows 98

<div className={cn(
  "bg-[#C0C0C0] border-2 rounded-none font-ms-sans-serif",
  "border-t-white border-l-white",
  "border-b-[#808080] border-r-[#808080]"
)}>

---

Theme Specifications

System 7 (system7)

| Property | Value | |----------|-------| | Fonts | Chicago, Monaco (mono) | | Window BG | #FFFFFF | | Border | 2px solid #000000 | | Radius | 0px | | Selection | Black bg, white text | | Shadow | 2px 2px 0px 0px rgba(0,0,0,0.5) |

macOS Aqua (macosx)

| Property | Value | |----------|-------| | Fonts | Lucida Grande, Monaco (mono) | | Window BG | #E8E8E8 | | Border | 0.5px solid rgba(0,0,0,0.3) | | Radius | 0.45rem (8px) | | Selection | #3875D7 bg, white text | | Shadow | 0 3px 10px rgba(0,0,0,0.3) | | Traffic Lights | Red #FF5F57, Yellow #FEBC2E, Green #28C840 |

Windows XP (xp)

| Property | Value | |----------|-------| | Fonts | Tahoma, Consolas (mono) | | Window BG | #ECE9D8 | | Border | 3px solid #0054E3 | | Radius | 0.5rem (8px) | | Selection | #316AC5 bg, white text | | Shadow | 0 4px 8px rgba(0,0,0,0.25) | | Title Bar | Blue gradient #0A246A → #0054E3 |

Windows 98 (win98)

| Property | Value | |----------|-------| | Fonts | MS Sans Serif, Fixedsys (mono) | | Window BG | #C0C0C0 | | Raised Bevel | border: 2px solid; border-color: #FFF #808080 #808080 #FFF | | Sunken Bevel | border: 2px solid; border-color: #808080 #FFF #FFF #808080 | | Radius | 0px | | Selection | #000080 bg, white text | | Title Bar | Gradient #000080 → #1084D0 |

---

Component Patterns

Theme-Adaptive Button

import { Button } from "@/components/ui/button";

<Button variant="default">Standard</Button>
<Button variant="retro">Retro Style</Button>
<Button variant="aqua">Aqua (macOS)</Button>

Aqua Buttons (CSS classes)

<button className="aqua-button">Default</button>
<button className="aqua-button primary">Primary (pulsing)</button>
<button className="aqua-button secondary">Secondary</button>

Win98 3D Button

<button className={cn(
  "px-4 py-1 bg-[#C0C0C0]",
  "border-2 border-t-white border-l-white",
  "border-b-[#808080] border-r-[#808080]",
  "active:border-t-[#808080] active:border-l-[#808080]",
  "active:border-b-white active:border-r-white"
)}>

Glassmorphism

<div className="bg-white/80 backdrop-blur-lg rounded-lg">
<div className="bg-black/40 backdrop-blur-xl text-white">

Theme-Aware Panel

<div className={cn(
  "p-4 bg-os-window-bg border-os-window rounded-os",
  osTheme === "system7" && "border-2 border-black",
  osTheme === "macosx" && "shadow-md",
  osTheme === "win98" && "border-2 border-t-white border-l-white border-b-[#808080] border-r-[#808080]"
)}>

---

Custom Components

| Component | Usage | |-----------|-------| | AudioBars | Frequency visualization | | PlaybackBars | Equalizer animation | | VolumeBar | Horizontal volume indicator | | Dial | Circular dial control (sm/md/lg) | | RightClickMenu | Context menu wrapper |

Dial Example

import { Dial } from "@/components/ui/dial";
<Dial value={50} onChange={setValue} size="md" label="Volume" />

---

Window Materials

| Mode | Use Case | |------|----------| | default | Standard opaque windows | | transparent | Semi-transparent (iPod, Photo Booth) | | notitlebar | Immersive with floating controls (Videos) |

---

Best Practices

1. Always search for existing patterns before creating new styles or components
2. Always use cn() for conditional class merging
3. Use OS-aware classes (bg-os-*, border-os-*) when available
4. Check theme with useTheme() for complex conditional rendering
5. Prefer CSS variables over hardcoded colors
6. Test all 4 themes when adding styled components x