ui-design-styling（ui 设计风格）

ryOS UI Design & Styling

The 4 Themes

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)

macOS Aqua (macosx)

Windows XP (xp)

Windows 98 (win98)

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

Dial Example

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

Window Materials

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