Merge branch 'gbpark-node' of http://39.117.244.52:3000/kjs/ERP-node into jskim-node
This commit is contained in:
kjs
@@ -65,28 +65,28 @@
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
}
|
||||
|
||||
/* ===== CSS Variables (shadcn/ui Official) ===== */
|
||||
/* ===== CSS Variables (Vivid Blue Theme) ===== */
|
||||
:root {
|
||||
/* Light Theme Colors - HSL Format */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--foreground: 224 71% 4%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card-foreground: 224 71% 4%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--popover-foreground: 224 71% 4%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--secondary: 220 14.3% 95.9%;
|
||||
--secondary-foreground: 220.9 39.3% 11%;
|
||||
--muted: 220 14.3% 95.9%;
|
||||
--muted-foreground: 220 8.9% 46.1%;
|
||||
--accent: 220 14.3% 95.9%;
|
||||
--accent-foreground: 220.9 39.3% 11%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
--border: 220 13% 88%;
|
||||
--input: 220 13% 88%;
|
||||
--ring: 217.2 91.2% 59.8%;
|
||||
|
||||
/* Success Colors (Emerald) */
|
||||
--success: 142 76% 36%;
|
||||
@@ -111,66 +111,83 @@
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Sidebar Colors */
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-background: 220 20% 97%;
|
||||
--sidebar-foreground: 224 71% 4%;
|
||||
--sidebar-primary: 217.2 91.2% 59.8%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 220 14.3% 95.9%;
|
||||
--sidebar-accent-foreground: 220.9 39.3% 11%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
/* ===== Dark Theme ===== */
|
||||
/* ===== Dark Theme (Palantir-Inspired) ===== */
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
/* 배경: 팔란티어 스타일 깊은 네이비 */
|
||||
--background: 222 47% 6%;
|
||||
--foreground: 210 20% 95%;
|
||||
|
||||
/* Success Colors (Emerald) - Dark */
|
||||
--success: 142 76% 36%;
|
||||
/* 카드: 배경보다 약간 밝게 (레이어 구분) */
|
||||
--card: 220 40% 9%;
|
||||
--card-foreground: 210 20% 95%;
|
||||
|
||||
/* 팝오버: 카드와 동일 */
|
||||
--popover: 220 40% 9%;
|
||||
--popover-foreground: 210 20% 95%;
|
||||
|
||||
/* Primary: 다크 배경에서 약간 더 밝은 블루 */
|
||||
--primary: 217 91% 65%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
|
||||
/* Secondary: 어두운 슬레이트 */
|
||||
--secondary: 220 25% 14%;
|
||||
--secondary-foreground: 210 20% 90%;
|
||||
|
||||
/* Muted: 차분한 회색-네이비 */
|
||||
--muted: 220 20% 13%;
|
||||
--muted-foreground: 215 15% 58%;
|
||||
|
||||
/* Accent: secondary와 유사 */
|
||||
--accent: 220 25% 16%;
|
||||
--accent-foreground: 210 20% 90%;
|
||||
|
||||
/* Destructive: 다크에서 더 밝은 레드 */
|
||||
--destructive: 0 72% 51%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
/* Border: 팔란티어 스타일 - 보더가 더 잘 보임 */
|
||||
--border: 220 20% 18%;
|
||||
--input: 220 20% 18%;
|
||||
--ring: 217 91% 65%;
|
||||
|
||||
/* Success (Emerald) - 다크 배경용 밝기 조정 */
|
||||
--success: 142 70% 42%;
|
||||
--success-foreground: 0 0% 100%;
|
||||
|
||||
/* Warning Colors (Amber) - Dark */
|
||||
--warning: 38 92% 50%;
|
||||
--warning-foreground: 0 0% 100%;
|
||||
/* Warning (Amber) - 다크 배경용 밝기 조정 */
|
||||
--warning: 38 92% 55%;
|
||||
--warning-foreground: 0 0% 10%;
|
||||
|
||||
/* Info Colors (Cyan) - Dark */
|
||||
--info: 188 94% 43%;
|
||||
/* Info (Cyan) - 다크 배경용 밝기 조정 */
|
||||
--info: 188 90% 48%;
|
||||
--info-foreground: 0 0% 100%;
|
||||
|
||||
/* Chart Colors - Dark */
|
||||
--chart-1: 220 70% 50%;
|
||||
--chart-2: 160 60% 45%;
|
||||
--chart-3: 30 80% 55%;
|
||||
--chart-4: 280 65% 60%;
|
||||
--chart-5: 340 75% 55%;
|
||||
/* Chart Colors - 다크 배경에서 선명한 컬러 */
|
||||
--chart-1: 220 70% 55%;
|
||||
--chart-2: 160 60% 48%;
|
||||
--chart-3: 30 80% 58%;
|
||||
--chart-4: 280 65% 63%;
|
||||
--chart-5: 340 75% 58%;
|
||||
|
||||
/* Sidebar Colors - Dark */
|
||||
--sidebar-background: 222.2 84% 4.9%;
|
||||
--sidebar-foreground: 210 40% 98%;
|
||||
--sidebar-primary: 217.2 91.2% 59.8%;
|
||||
--sidebar-primary-foreground: 222.2 47.4% 11.2%;
|
||||
--sidebar-accent: 217.2 32.6% 17.5%;
|
||||
--sidebar-accent-foreground: 210 40% 98%;
|
||||
--sidebar-border: 217.2 32.6% 17.5%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
/* Sidebar - 메인 배경보다 약간 어둡게 */
|
||||
--sidebar-background: 222 47% 5%;
|
||||
--sidebar-foreground: 210 20% 90%;
|
||||
--sidebar-primary: 217 91% 65%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 220 25% 14%;
|
||||
--sidebar-accent-foreground: 210 20% 90%;
|
||||
--sidebar-border: 220 20% 16%;
|
||||
--sidebar-ring: 217 91% 65%;
|
||||
}
|
||||
|
||||
/* ===== Base Styles ===== */
|
||||
@@ -459,3 +476,166 @@ 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; }
|
||||
|
||||
/* --- 11. bg-white opacity 변형 --- */
|
||||
.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
|
||||
.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
|
||||
.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
|
||||
.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
|
||||
.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
|
||||
|
||||
/* --- 12. text-black → foreground --- */
|
||||
.dark .text-black { color: hsl(var(--foreground)) !important; }
|
||||
|
||||
/* --- 13. bg/text/border - purple (관리 UI) --- */
|
||||
.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
|
||||
.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
|
||||
.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
|
||||
.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
|
||||
.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
|
||||
.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
|
||||
.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
|
||||
.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
|
||||
|
||||
/* --- 14. bg/text/border - indigo --- */
|
||||
.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
|
||||
.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
|
||||
.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
|
||||
.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
|
||||
.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
|
||||
|
||||
/* --- 15. bg/text - pink/rose (상태 뱃지) --- */
|
||||
.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
|
||||
.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
|
||||
.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
|
||||
.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
|
||||
.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
|
||||
.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
|
||||
.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
|
||||
.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
|
||||
|
||||
/* --- 16. bg/text - cyan/teal (정보/상태) --- */
|
||||
.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
|
||||
.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
|
||||
.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
|
||||
.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
|
||||
.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
|
||||
.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
|
||||
.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
|
||||
.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
|
||||
|
||||
/* --- 17. bg/text - orange (경고 변형) --- */
|
||||
.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
|
||||
.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
|
||||
.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
|
||||
.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
|
||||
.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
|
||||
.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
|
||||
.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
|
||||
|
||||
/* --- 18. bg/text/border - violet (필터/관계 표시) --- */
|
||||
.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
|
||||
.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
|
||||
.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
|
||||
.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
|
||||
.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
|
||||
.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
|
||||
.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
|
||||
.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
|
||||
|
||||
/* --- 19. bg/text/border - amber (조인/경고) --- */
|
||||
.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
|
||||
.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
|
||||
|
||||
/* ===== End Dark Mode Compatibility Layer ===== */
|
||||
|
||||
Reference in New Issue
Block a user