/** * Hotel ERP - Solarized Dark Theme * * Ethan Schoonover의 Solarized 컬러 팔레트를 기반으로 한 * 따뜻한 톤의 어두운 테마입니다. * * Colors from: https://ethanschoonover.com/solarized/ * * @see design_guide.md */ [data-theme="solarized-dark"] { /* ========================================== * Solarized Color Palette * ========================================== */ --sol-base03: #002b36; --sol-base02: #073642; --sol-base01: #586e75; --sol-base00: #657b83; --sol-base0: #839496; --sol-base1: #93a1a1; --sol-base2: #eee8d5; --sol-base3: #fdf6e3; --sol-yellow: #b58900; --sol-orange: #cb4b16; --sol-red: #dc322f; --sol-magenta: #d33682; --sol-violet: #6c71c4; --sol-blue: #268bd2; --sol-cyan: #2aa198; --sol-green: #859900; /* ========================================== * Primary Colors (Solarized Cyan) * ========================================== */ --primary: var(--sol-cyan); --primary-hover: #35b5ab; --primary-light: rgba(42, 161, 152, 0.2); --primary-dark: #1a7770; /* ========================================== * Background Colors * ========================================== */ --bg-body: var(--sol-base03); --bg-sidebar: var(--sol-base02); --bg-sidebar-hover: var(--sol-base01); --bg-sidebar-active: var(--sol-cyan); --bg-card: var(--sol-base02); --bg-card-hover: var(--sol-base01); --bg-card-active: var(--sol-base00); --bg-input: var(--sol-base03); --bg-input-disabled: var(--sol-base02); --bg-table-header: var(--sol-base01); --bg-table-row-hover: rgba(88, 110, 117, 0.3); --bg-table-row-striped: rgba(7, 54, 66, 0.5); --bg-dropdown: var(--sol-base02); --bg-modal: var(--sol-base02); --bg-modal-overlay: rgba(0, 43, 54, 0.8); --bg-tooltip: var(--sol-base01); --bg-badge: var(--sol-base01); --bg-code: var(--sol-base03); /* Surface Colors (PrimeVue compatibility) */ --surface-ground: var(--sol-base02); --surface-section: var(--sol-base03); --surface-card: var(--sol-base02); --surface-hover: var(--sol-base01); --surface-border: var(--sol-base01); --surface-200: var(--sol-base01); /* ========================================== * Text Colors * ========================================== */ --text-main: var(--sol-base0); --text-sub: var(--sol-base1); --text-muted: var(--sol-base01); --text-disabled: var(--sol-base01); --text-inverse: var(--sol-base03); --text-link: var(--sol-blue); --text-link-hover: var(--sol-cyan); --text-sidebar: var(--sol-base1); --text-sidebar-muted: var(--sol-base0); --text-tooltip: var(--sol-base1); --text-placeholder: var(--sol-base01); /* ========================================== * Border Colors * ========================================== */ --border-color: var(--sol-base01); --border-light: var(--sol-base02); --border-dark: var(--sol-base00); --border-focus: var(--sol-cyan); --border-error: var(--sol-red); /* ========================================== * Semantic Colors Override * ========================================== */ --success: var(--sol-green); --success-light: rgba(133, 153, 0, 0.2); --success-dark: #a5bf00; --danger: var(--sol-red); --danger-light: rgba(220, 50, 47, 0.2); --danger-dark: #e55855; --warning: var(--sol-yellow); --warning-light: rgba(181, 137, 0, 0.2); --warning-dark: #d9a500; --info: var(--sol-blue); --info-light: rgba(38, 139, 210, 0.2); --info-dark: #52a5de; --primary-light: rgba(42, 161, 152, 0.2); --secondary-light: rgba(108, 113, 196, 0.2); /* ========================================== * Shadows * ========================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.32); --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.36); --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.36); --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.40); /* ========================================== * Component-Specific Colors * ========================================== */ /* Buttons */ --btn-primary-bg: var(--sol-cyan); --btn-primary-text: var(--sol-base03); --btn-primary-hover-bg: #35b5ab; --btn-secondary-bg: var(--sol-base01); --btn-secondary-text: var(--sol-base1); --btn-secondary-border: var(--sol-base00); --btn-secondary-hover-bg: var(--sol-base00); /* Inputs */ --input-bg: var(--bg-input); --input-text: var(--text-main); --input-border: var(--border-color); --input-focus-border: var(--sol-cyan); --input-focus-ring: transparent; /* Tables */ --table-header-bg: var(--bg-table-header); --table-header-text: var(--sol-base1); --table-border: var(--border-color); --table-row-hover: var(--bg-table-row-hover); /* Tabs */ --tab-bg: transparent; --tab-active-bg: var(--sol-base01); --tab-active-border: var(--sol-cyan); --tab-text: var(--sol-base0); --tab-active-text: var(--sol-base1); /* Badges - Solarized accent colors */ --badge-default-bg: var(--sol-base01); --badge-default-text: var(--sol-base0); --badge-primary-bg: rgba(42, 161, 152, 0.2); --badge-primary-text: var(--sol-cyan); --badge-success-bg: rgba(133, 153, 0, 0.2); --badge-success-text: var(--sol-green); --badge-danger-bg: rgba(220, 50, 47, 0.2); --badge-danger-text: var(--sol-red); --badge-warning-bg: rgba(181, 137, 0, 0.2); --badge-warning-text: var(--sol-yellow); --badge-info-bg: rgba(38, 139, 210, 0.2); --badge-info-text: var(--sol-blue); --badge-secondary-bg: rgba(108, 113, 196, 0.2); --badge-secondary-text: var(--sol-violet); --badge-orange-bg: rgba(203, 75, 22, 0.2); --badge-orange-text: var(--sol-orange); /* Secondary Colors (Solarized Violet) */ --secondary: var(--sol-violet); --secondary-hover: #7d82d4; --secondary-light: rgba(108, 113, 196, 0.2); --secondary-dark: #8a8fe0; /* Accent Gold (Solarized Yellow) */ --accent-gold: var(--sol-yellow); --accent-gold-hover: #c99b00; --accent-gold-light: rgba(181, 137, 0, 0.2); --accent-gold-dark: #d9ac00; /* Scrollbar */ --scrollbar-track: var(--sol-base02); --scrollbar-thumb: var(--sol-base01); --scrollbar-thumb-hover: var(--sol-base00); /* Focus Ring */ --focus-ring-color: var(--sol-base1); --focus-ring-offset: 2px; /* Selection */ --selection-bg: rgba(42, 161, 152, 0.3); --selection-text: inherit; }