Paul Trowbridge
738e1919ce
Port light/dark mode from pf_app: ThemeProvider context, CSS custom properties (Pro Dark palette), dark overrides for Tailwind classes, and Perspective viewer theme sync in Pivot. Toggle button in sidebar header. Improve toggle icons to Feather-style stroke SVGs. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
98 lines
4.4 KiB
CSS
98 lines
4.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root, .light {
|
|
--bg-primary: #f3f4f6;
|
|
--bg-secondary: #ffffff;
|
|
--bg-tertiary: #f9fafb;
|
|
--text-primary: #1f2937;
|
|
--text-secondary: #374151;
|
|
--text-muted: #9ca3af;
|
|
--border-color: #e5e7eb;
|
|
--border-light: #f3f4f6;
|
|
--accent-bg: #eff6ff;
|
|
--accent-text: #1d4ed8;
|
|
}
|
|
|
|
/* Dark palette tuned to Perspective's "Pro Dark" theme:
|
|
bg #242526, tooltip #2a2c2f, gridline #3b3f46, inactive #61656e,
|
|
inactive border #4c505b, active #2770a9, legend #c5c9d0. */
|
|
.dark {
|
|
--bg-primary: #242526;
|
|
--bg-secondary: #2a2c2f;
|
|
--bg-tertiary: #3b3f46;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #c5c9d0;
|
|
--text-muted: #61656e;
|
|
--border-color: #4c505b;
|
|
--border-light: #3b3f46;
|
|
--accent-bg: rgba(39, 113, 170, 0.32);
|
|
--accent-text: #4778c2;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
background-color: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.dark .bg-white { background-color: var(--bg-secondary); }
|
|
.dark .bg-gray-50 { background-color: var(--bg-tertiary); }
|
|
.dark .bg-gray-100 { background-color: var(--bg-tertiary); }
|
|
.dark .bg-gray-200 { background-color: var(--bg-tertiary); }
|
|
.dark .bg-gray-300 { background-color: var(--bg-tertiary); }
|
|
.dark .text-gray-300 { color: var(--text-muted); }
|
|
.dark .text-gray-400 { color: var(--text-muted); }
|
|
.dark .text-gray-500 { color: var(--text-muted); }
|
|
.dark .text-gray-600 { color: var(--text-secondary); }
|
|
.dark .text-gray-700 { color: var(--text-secondary); }
|
|
.dark .text-gray-800 { color: var(--text-primary); }
|
|
.dark .text-gray-900 { color: var(--text-primary); }
|
|
.dark .bg-blue-50 { background-color: var(--accent-bg); }
|
|
.dark .bg-blue-100 { background-color: var(--accent-bg); }
|
|
.dark .text-blue-400 { color: var(--accent-text); }
|
|
.dark .text-blue-600 { color: var(--accent-text); }
|
|
.dark .text-blue-700 { color: var(--accent-text); }
|
|
.dark .text-blue-800 { color: var(--accent-text); }
|
|
.dark .border-blue-200 { border-color: var(--accent-text); }
|
|
.dark .border-blue-300 { border-color: var(--accent-text); }
|
|
.dark .hover\:bg-blue-50:hover { background-color: var(--accent-bg); }
|
|
|
|
/* Status accents — desaturated to sit on Pro Dark's neutral background */
|
|
.dark .bg-green-50 { background-color: #1a3d2c; }
|
|
.dark .text-green-600 { color: #6ee7b7; }
|
|
.dark .text-green-700 { color: #6ee7b7; }
|
|
.dark .text-green-400 { color: #6ee7b7; }
|
|
.dark .bg-amber-50 { background-color: #3a2e14; }
|
|
.dark .text-amber-800 { color: #f5c66f; }
|
|
.dark .border-amber-200 { border-color: #5a4a26; }
|
|
.dark .bg-amber-200 { background-color: #5a4a26; }
|
|
.dark .hover\:bg-amber-300:hover { background-color: #6b5830; }
|
|
.dark .bg-red-50 { background-color: #3d1f1f; }
|
|
.dark .text-red-500 { color: #ff9485; }
|
|
.dark .text-red-700 { color: #ff9485; }
|
|
.dark .border-gray-100 { border-color: var(--border-light); }
|
|
.dark .border-gray-200 { border-color: var(--border-color); }
|
|
.dark .border-gray-300 { border-color: var(--border-color); }
|
|
.dark .border-blue-100 { border-color: var(--border-color); }
|
|
.dark .border-b { border-color: var(--border-color); }
|
|
.dark .border-t { border-color: var(--border-color); }
|
|
.dark .border-r { border-color: var(--border-color); }
|
|
.dark .border-l { border-color: var(--border-color); }
|
|
.dark .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary); }
|
|
.dark .hover\:bg-gray-100:hover { background-color: var(--bg-tertiary); }
|
|
.dark .hover\:bg-gray-200:hover { background-color: var(--bg-tertiary); }
|
|
.dark .hover\:text-gray-500:hover { color: var(--text-secondary); }
|
|
.dark .hover\:text-gray-600:hover { color: var(--text-secondary); }
|
|
.dark .hover\:text-gray-700:hover { color: var(--text-primary); }
|
|
.dark .hover\:text-gray-800:hover { color: var(--text-primary); }
|
|
.dark .hover\:border-gray-300:hover { border-color: var(--border-color); }
|
|
.dark .hover\:border-gray-400:hover { border-color: var(--border-color); }
|
|
.dark .focus\:border-gray-300:focus { border-color: var(--border-color); }
|
|
.dark .focus\:border-blue-400:focus { border-color: var(--accent-text); }
|
|
.dark ::selection { background-color: var(--accent-bg); color: var(--text-primary); }
|
|
.dark input { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
|
|
.dark select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
|
|
.dark textarea { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
|
|
.dark .bg-transparent { background-color: transparent; }
|