[agent-pipeline] pipe-20260310020928-52l9 round-3
This commit is contained in:
DDD1542
parent
d692a3b22f
commit
42673f57a0
|
|
@ -442,3 +442,95 @@ select {
|
|||
}
|
||||
|
||||
/* ===== End of Global Styles ===== */
|
||||
|
||||
/* ===== Dark Mode Compatibility Layer ===== */
|
||||
/* 하드코딩된 Tailwind 색상 → 다크 모드 자동 변환 */
|
||||
/* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
|
||||
|
||||
/* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
|
||||
.dark .bg-white { background-color: hsl(var(--card)) !important; }
|
||||
.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
|
||||
|
||||
/* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
|
||||
.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
||||
.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
||||
.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
|
||||
.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
|
||||
|
||||
/* --- 3. 보더: gray → 시맨틱 토큰 --- */
|
||||
.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
|
||||
|
||||
/* --- 4. 호버: gray → 시맨틱 토큰 --- */
|
||||
.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
|
||||
.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
|
||||
|
||||
/* --- 5. Emerald (성공/완료 상태) --- */
|
||||
.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
|
||||
.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
|
||||
.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
|
||||
.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
|
||||
.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
|
||||
.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
|
||||
.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
|
||||
.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
|
||||
.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
|
||||
|
||||
/* --- 6. Amber/Yellow (경고/주의 상태) --- */
|
||||
.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
|
||||
.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
|
||||
.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
|
||||
.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
|
||||
.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
|
||||
.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
|
||||
.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
|
||||
.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
|
||||
.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
|
||||
.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
|
||||
.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
|
||||
.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
|
||||
.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
|
||||
|
||||
/* --- 7. Blue (정보/프라이머리 상태) --- */
|
||||
.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
|
||||
.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
|
||||
.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
|
||||
.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
|
||||
.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
|
||||
.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
|
||||
.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
|
||||
|
||||
/* --- 8. Red (에러/삭제 상태) --- */
|
||||
.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
|
||||
.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
|
||||
.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
|
||||
.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
|
||||
.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
|
||||
.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
|
||||
.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
|
||||
|
||||
/* --- 9. Green (성공 - emerald 변형) --- */
|
||||
.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
|
||||
.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
|
||||
.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
|
||||
.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
|
||||
.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
|
||||
|
||||
/* --- 10. Slate (gray 변형) --- */
|
||||
.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
||||
.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
||||
.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
|
||||
|
||||
/* ===== End Dark Mode Compatibility Layer ===== */
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@ const buttonVariants = cva(
|
|||
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
success:
|
||||
"bg-success text-success-foreground shadow-xs hover:bg-success/90 focus-visible:ring-success/20 dark:focus-visible:ring-success/40",
|
||||
warning:
|
||||
"bg-warning text-warning-foreground shadow-xs hover:bg-warning/90 focus-visible:ring-warning/20 dark:focus-visible:ring-warning/40",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
|
|
|
|||
Loading…
Reference in New Issue