snp-connection-monitoring/frontend/src/index.css
HYOJIN 88e25abe14 feat(frontend): 디자인 시스템 적용 및 전체 UI 개선 (#42)
- 디자인 시스템 CSS 변수 토큰 적용 (success/warning/danger/info)
- PeriodFilter 공통 컴포넌트 생성 및 통계 페이지 적용
- SERVICE_BADGE_VARIANTS 공통 상수 추출
- 통계/요청로그/키관리/관리자 페이지 레퍼런스 디자인 반영
- 테이블 규격 통일 (h-8/h-7, px-3 py-1, text-xs, Button xs)
- 타이틀 아이콘 전체 페이지 통일
- 카드 테두리 디자인 통일 (border + rounded-xl)
- FHD 1920x1080 최적화
2026-04-17 14:45:27 +09:00

177 lines
5.1 KiB
CSS

@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/* === Brand Scales (고정, 테마 불변) === */
/* Primary (Slate Blue) 50~950 */
--color-primary-50: #F5F7F9;
--color-primary-100: #E5EBF2;
--color-primary-200: #D2DAE5;
--color-primary-300: #B7C5D7;
--color-primary-400: #8AA5C7;
--color-primary-500: #6D94C5;
--color-primary-600: #507FB9;
--color-primary-700: #3B669C;
--color-primary-800: #2D507B;
--color-primary-900: #1B2C41;
--color-primary-950: #0E1A2B;
/* Secondary (Powder Blue) 50~950 */
--color-secondary-50: #F5F7F9;
--color-secondary-100: #E6EDF5;
--color-secondary-200: #D1DAE5;
--color-secondary-300: #B7C8D7;
--color-secondary-400: #89AAC8;
--color-secondary-500: #CBDCEB;
--color-secondary-600: #6B9AC8;
--color-secondary-700: #4E88BB;
--color-secondary-800: #396E9D;
--color-secondary-900: #1B2F41;
--color-secondary-950: #0E1A2B;
/* Accent (Warm Sand) 50~950 */
--color-accent-50: #F9F8F6;
--color-accent-100: #F2EDE4;
--color-accent-200: #E4E0D7;
--color-accent-300: #D5CDB9;
--color-accent-400: #C4B48C;
--color-accent-500: #E8DFCA;
--color-accent-600: #B59854;
--color-accent-700: #9A7E3E;
--color-accent-800: #786230;
--color-accent-900: #3F351D;
--color-accent-950: #2B2312;
/* Chart Palette (고정) */
--color-chart-1: #507FB9;
--color-chart-2: #B59854;
--color-chart-3: #B5607D;
--color-chart-4: #3D998A;
--color-chart-5: #8B6DB5;
--color-chart-6: #C07850;
/* Typography */
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
/* === 테마 전환 변수 (Light 기본값) === */
--color-success: #059669;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
--color-bg-base: #F5EFE6;
--color-bg-surface: #FFFFFF;
--color-bg-elevated: #FFFFFF;
--color-border: #D5D2CC;
--color-border-strong: #9198A1;
--color-text-primary: #1E2329;
--color-text-secondary: #5C6570;
--color-text-tertiary: #9198A1;
--color-primary: #507FB9;
--color-primary-hover: #3B669C;
--color-primary-active: #2D507B;
--color-primary-subtle: #F5F7F9;
--color-primary-text: #2D507B;
--color-secondary: #CBDCEB;
--color-secondary-hover: #89AAC8;
--color-secondary-active: #4E88BB;
--color-secondary-subtle: #F5F7F9;
--color-secondary-text: #396E9D;
--color-accent: #E8DFCA;
--color-accent-hover: #C4B48C;
--color-accent-active: #B59854;
--color-accent-subtle: #F9F8F6;
--color-accent-text: #786230;
}
/* === Dark Theme (.dark 클래스 기반) === */
.dark {
--color-success: #34D399;
--color-warning: #FBBF24;
--color-danger: #FCA5A5;
--color-info: #38BDF8;
--color-bg-base: #131416;
--color-bg-surface: #1E2023;
--color-bg-elevated: #282A2E;
--color-border: #3A3C41;
--color-border-strong: #5C6570;
--color-text-primary: #F4F5F5;
--color-text-secondary: #9198A1;
--color-text-tertiary: #5C6570;
--color-primary: #B7C5D7;
--color-primary-hover: #D2DAE5;
--color-primary-active: #8AA5C7;
--color-primary-subtle: #1B2C41;
--color-primary-text: #D2DAE5;
--color-secondary: #B7C8D7;
--color-secondary-hover: #D1DAE5;
--color-secondary-active: #89AAC8;
--color-secondary-subtle: #1B2F41;
--color-secondary-text: #D1DAE5;
--color-accent: #D5CDB9;
--color-accent-hover: #E4E0D7;
--color-accent-active: #C4B48C;
--color-accent-subtle: #3F351D;
--color-accent-text: #E4E0D7;
--color-chart-1: #6D94C5;
--color-chart-2: #C4B48C;
--color-chart-3: #D4839B;
--color-chart-4: #5BB5A6;
--color-chart-5: #B79FD4;
--color-chart-6: #D4956B;
}
/* === Dark Theme (OS 기본 설정 기반) === */
@media (prefers-color-scheme: dark) {
:root:not(.light) {
--color-success: #34D399;
--color-warning: #FBBF24;
--color-danger: #FCA5A5;
--color-info: #38BDF8;
--color-bg-base: #131416;
--color-bg-surface: #1E2023;
--color-bg-elevated: #282A2E;
--color-border: #3A3C41;
--color-border-strong: #5C6570;
--color-text-primary: #F4F5F5;
--color-text-secondary: #9198A1;
--color-text-tertiary: #5C6570;
--color-primary: #B7C5D7;
--color-primary-hover: #D2DAE5;
--color-primary-active: #8AA5C7;
--color-primary-subtle: #1B2C41;
--color-primary-text: #D2DAE5;
--color-secondary: #B7C8D7;
--color-secondary-hover: #D1DAE5;
--color-secondary-active: #89AAC8;
--color-secondary-subtle: #1B2F41;
--color-secondary-text: #D1DAE5;
--color-accent: #D5CDB9;
--color-accent-hover: #E4E0D7;
--color-accent-active: #C4B48C;
--color-accent-subtle: #3F351D;
--color-accent-text: #E4E0D7;
--color-chart-1: #6D94C5;
--color-chart-2: #C4B48C;
--color-chart-3: #D4839B;
--color-chart-4: #5BB5A6;
--color-chart-5: #B79FD4;
--color-chart-6: #D4956B;
}
}
/* Dark mode date input calendar icon */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(1);
}