Colors (색상)

@theme {
  /* Cals Brand Colors - Primary (Pink) */
  --color-cals-primary-50: #fce4ec;
  --color-cals-primary-100: #f8bbd0;
  --color-cals-primary-200: #f48fb1;
  --color-cals-primary-300: #f06292;
  --color-cals-primary-400: #ec407a;
  --color-cals-primary-500: #e91e63;
  --color-cals-primary-600: #d81b60;
  --color-cals-primary-700: #c2185b;
  --color-cals-primary-800: #ad1457;
  --color-cals-primary-900: #880e4f;
}

@theme {
  /* Cals Brand Colors - Secondary (Blue) */
  --color-cals-secondary-50: #e1f5fe;
  --color-cals-secondary-100: #b3e5fc;
  --color-cals-secondary-200: #81d4fa;
  --color-cals-secondary-300: #4fc3f7;
  --color-cals-secondary-400: #29b6f6;
  --color-cals-secondary-500: #03a9f4;
  --color-cals-secondary-600: #039be5;
  --color-cals-secondary-700: #0288d1;
  --color-cals-secondary-800: #0277bd;
  --color-cals-secondary-900: #01579b;
}

@theme {
  /* Cals Brand Colors - Accent (Purple) */
  --color-cals-accent-50: #f3e5f5;
  --color-cals-accent-100: #e1bee7;
  --color-cals-accent-200: #ce93d8;
  --color-cals-accent-300: #ba68c8;
  --color-cals-accent-400: #ab47bc;
  --color-cals-accent-500: #9c27b0;
  --color-cals-accent-600: #8e24aa;
  --color-cals-accent-700: #7b1fa2;
  --color-cals-accent-800: #6a1b9a;
  --color-cals-accent-900: #4a148c;
}

@theme {
  /* Booking Status Colors */
  --color-booking-available: #4caf50;
  --color-booking-pending: #ff9800;
  --color-booking-confirmed: #03a9f4;
  --color-booking-cancelled: #f44336;
  --color-booking-completed: #9c27b0;
}

예약 가능 (available)
  ↓
예약 대기 (pending)
  ↓
예약 확정 (confirmed)
  ↓
예약 완료 (completed) 또는 예약 취소 (cancelled)

@theme {
  /* Semantic Colors (Foundation 상속) */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #f44336;
  --color-info: #2196f3;
}

import { Badge } from "@vortex/ui-cals";
 
export default function BookingStatusExample() {
  return (
    <div className="flex gap-md">
      <Badge variant="booking-available">예약 가능</Badge>
      <Badge variant="booking-pending">예약 대기</Badge>
      <Badge variant="booking-confirmed">예약 확정</Badge>
      <Badge variant="booking-cancelled">예약 취소</Badge>
      <Badge variant="booking-completed">예약 완료</Badge>
    </div>
  );
}

export default function BookingCard({ status }) {
  const statusConfig = {
    available: {
      color: "bg-[#4caf50]",
      text: "예약 가능",
      icon: "✓",
    },
    pending: {
      color: "bg-[#ff9800]",
      text: "예약 대기",
      icon: "⏳",
    },
    confirmed: {
      color: "bg-[#03a9f4]",
      text: "예약 확정",
      icon: "✓",
    },
    cancelled: {
      color: "bg-[#f44336]",
      text: "예약 취소",
      icon: "✗",
    },
    completed: {
      color: "bg-[#9c27b0]",
      text: "예약 완료",
      icon: "★",
    },
  };
 
  const config = statusConfig[status];
 
  return (
    <div className="p-md bg-white border rounded-lg">
      <div className="flex items-center gap-sm mb-md">
        <span
          className={`${config.color} text-white px-sm py-xs rounded text-sm`}
        >
          {config.icon} {config.text}
        </span>
      </div>
      <h3 className="text-lg font-semibold">예약 정보</h3>
      <p className="text-sm text-gray-600 mt-sm">예약 날짜: 2025-01-15</p>
    </div>
  );
}

export default function BookingCalendar() {
  const timeSlots = [
    { time: "09:00", status: "available" },
    { time: "10:00", status: "confirmed" },
    { time: "11:00", status: "pending" },
    { time: "12:00", status: "available" },
    { time: "13:00", status: "completed" },
    { time: "14:00", status: "cancelled" },
  ];
 
  return (
    <div className="grid grid-cols-2 md:grid-cols-3 gap-md">
      {timeSlots.map((slot) => (
        <button
          key={slot.time}
          className={`
            p-md border rounded-lg text-center
            ${
              slot.status === "available"
                ? "bg-green-50 border-[#4caf50] hover:bg-green-100"
                : ""
            }
            ${
              slot.status === "confirmed"
                ? "bg-blue-50 border-[#03a9f4] cursor-not-allowed"
                : ""
            }
            ${
              slot.status === "pending"
                ? "bg-orange-50 border-[#ff9800] cursor-not-allowed"
                : ""
            }
            ${
              slot.status === "completed"
                ? "bg-purple-50 border-[#9c27b0] cursor-not-allowed"
                : ""
            }
            ${
              slot.status === "cancelled"
                ? "bg-red-50 border-[#f44336] cursor-not-allowed"
                : ""
            }
          `}
          disabled={slot.status !== "available"}
        >
          <div className="font-semibold">{slot.time}</div>
          <div className="text-xs mt-xs capitalize">{slot.status}</div>
        </button>
      ))}
    </div>
  );
}

// ✅ Good: 색상 + 아이콘 + 텍스트
<Badge variant="booking-available">
  <CheckCircle size={16} className="mr-xs" />
  예약 가능
</Badge>
 
// ❌ Bad: 색상만 사용
<div className="bg-[#4caf50]"></div>