diff --git a/src/index.css b/src/index.css index 150c0fc..8283801 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +1,4 @@ -/* GenomicX Design Tokens — imported from front-end-template */ +/* GenomicX Design Tokens — ronaQC light-first standard */ *, *::before, @@ -10,8 +10,6 @@ :root { /* --- Shared (theme-independent) --- */ - --gx-accent: #14B8A6; - --gx-accent-hover: #2DD4BF; --gx-indigo: #6366F1; --gx-success: #14B8A6; --gx-warning: #F59E0B; @@ -34,23 +32,65 @@ --gx-space-4: 1rem; --gx-space-6: 1.5rem; --gx-space-8: 2rem; + + /* --- LIGHT THEME (default) --- */ + --gx-bg: #f8fafc; + --gx-bg-alt: #f1f5f9; + --gx-surface: #ffffff; + --gx-surface-hover: #f1f5f9; + --gx-bg-elevated: #ffffff; /* backward compat alias for --gx-surface */ + --gx-border: #e2e8f0; + --gx-text: #0f172a; + --gx-text-muted: #64748b; + --gx-text-inverted: #ffffff; + --gx-text-bright: #0f172a; /* backward compat alias for --gx-text */ + --gx-accent: #0d9488; + --gx-accent-hover: #0f766e; + --gx-accent-dim: rgba(13, 148, 136, 0.08); + --gx-accent-15: rgba(13, 148, 136, 0.12); + --gx-indigo-dim: rgba(99, 102, 241, 0.08); + --gx-nav-bg: rgba(255, 255, 255, 0.9); + --gx-code-bg: #f1f5f9; + --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); + --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); + color-scheme: light; + + /* App-specific: allele badges */ + --gx-exact-bg: #ecfdf5; + --gx-exact: #059669; + --gx-exact-border: #a7f3d0; + --gx-novel-bg: #fffbeb; + --gx-novel: #b45309; + --gx-novel-border: #fde68a; + --gx-nohit-bg: #fef2f2; + --gx-nohit: #dc2626; + --gx-nohit-border: #fecaca; + --gx-missing: #94a3b8; + --gx-tag-bg: #f0fdfa; + --gx-tag-text: #115e59; + --gx-tag-border: #99f6e4; + --gx-gradient: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%); } -/* --- DARK THEME (default) --- */ -:root, +/* --- DARK THEME --- */ [data-theme="dark"] { - --gx-bg: #0F172A; - --gx-bg-alt: #1E293B; - --gx-bg-elevated: #253349; - --gx-text: #E2E8F0; - --gx-text-muted: #94A3B8; - --gx-text-bright: #F1F5F9; + --gx-bg: #0f172a; + --gx-bg-alt: #1e293b; + --gx-surface: #1e293b; + --gx-surface-hover: #334155; + --gx-bg-elevated: #1e293b; /* backward compat alias for --gx-surface */ --gx-border: #334155; - --gx-accent-dim: rgba(20, 184, 166, 0.1); - --gx-accent-15: rgba(20, 184, 166, 0.15); + --gx-text: #f1f5f9; + --gx-text-muted: #94a3b8; + --gx-text-inverted: #0f172a; + --gx-text-bright: #f1f5f9; /* backward compat alias for --gx-text */ + --gx-accent: #2dd4bf; + --gx-accent-hover: #14b8a6; + --gx-accent-dim: rgba(45, 212, 191, 0.1); + --gx-accent-15: rgba(45, 212, 191, 0.15); --gx-indigo-dim: rgba(99, 102, 241, 0.1); --gx-nav-bg: rgba(15, 23, 42, 0.9); - --gx-code-bg: #0F172A; + --gx-code-bg: #0f172a; --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); color-scheme: dark; @@ -72,73 +112,43 @@ --gx-gradient: linear-gradient(135deg, #2dd4bf 0%, #22d3ee 100%); } -/* --- LIGHT THEME --- */ -[data-theme="light"] { - --gx-bg: #FFFFFF; - --gx-bg-alt: #F8FAFC; - --gx-bg-elevated: #F1F5F9; - --gx-text: #334155; - --gx-text-muted: #64748B; - --gx-text-bright: #0F172A; - --gx-border: #E2E8F0; - --gx-accent-dim: rgba(20, 184, 166, 0.08); - --gx-accent-15: rgba(20, 184, 166, 0.12); - --gx-indigo-dim: rgba(99, 102, 241, 0.08); - --gx-nav-bg: rgba(255, 255, 255, 0.9); - --gx-code-bg: #F1F5F9; - --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); - --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); - color-scheme: light; - - /* App-specific: allele badges */ - --gx-exact-bg: #ecfdf5; - --gx-exact: #059669; - --gx-exact-border: #a7f3d0; - --gx-novel-bg: #fffbeb; - --gx-novel: #b45309; - --gx-novel-border: #fde68a; - --gx-nohit-bg: #fef2f2; - --gx-nohit: #dc2626; - --gx-nohit-border: #fecaca; - --gx-missing: #94a3b8; - --gx-tag-bg: #f0fdfa; - --gx-tag-text: #115e59; - --gx-tag-border: #99f6e4; - --gx-gradient: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%); -} - /* --- System preference auto-detection --- */ -@media (prefers-color-scheme: light) { +@media (prefers-color-scheme: dark) { :root:not([data-theme]) { - --gx-bg: #FFFFFF; - --gx-bg-alt: #F8FAFC; - --gx-bg-elevated: #F1F5F9; - --gx-text: #334155; - --gx-text-muted: #64748B; - --gx-text-bright: #0F172A; - --gx-border: #E2E8F0; - --gx-accent-dim: rgba(20, 184, 166, 0.08); - --gx-accent-15: rgba(20, 184, 166, 0.12); - --gx-indigo-dim: rgba(99, 102, 241, 0.08); - --gx-nav-bg: rgba(255, 255, 255, 0.9); - --gx-code-bg: #F1F5F9; - --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); - --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1); - color-scheme: light; - --gx-exact-bg: #ecfdf5; - --gx-exact: #059669; - --gx-exact-border: #a7f3d0; - --gx-novel-bg: #fffbeb; - --gx-novel: #b45309; - --gx-novel-border: #fde68a; - --gx-nohit-bg: #fef2f2; - --gx-nohit: #dc2626; - --gx-nohit-border: #fecaca; - --gx-missing: #94a3b8; - --gx-tag-bg: #f0fdfa; - --gx-tag-text: #115e59; - --gx-tag-border: #99f6e4; - --gx-gradient: linear-gradient(135deg, #0d9488 0%, #06b6d4 100%); + --gx-bg: #0f172a; + --gx-bg-alt: #1e293b; + --gx-surface: #1e293b; + --gx-surface-hover: #334155; + --gx-bg-elevated: #1e293b; + --gx-border: #334155; + --gx-text: #f1f5f9; + --gx-text-muted: #94a3b8; + --gx-text-inverted: #0f172a; + --gx-text-bright: #f1f5f9; + --gx-accent: #2dd4bf; + --gx-accent-hover: #14b8a6; + --gx-accent-dim: rgba(45, 212, 191, 0.1); + --gx-accent-15: rgba(45, 212, 191, 0.15); + --gx-indigo-dim: rgba(99, 102, 241, 0.1); + --gx-nav-bg: rgba(15, 23, 42, 0.9); + --gx-code-bg: #0f172a; + --gx-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + --gx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); + color-scheme: dark; + --gx-exact-bg: #052e1c; + --gx-exact: #4ade80; + --gx-exact-border: #166534; + --gx-novel-bg: #2d1f04; + --gx-novel: #fbbf24; + --gx-novel-border: #854d0e; + --gx-nohit-bg: #2d0f0f; + --gx-nohit: #f87171; + --gx-nohit-border: #7f1d1d; + --gx-missing: #4b5e6d; + --gx-tag-bg: #0d2d2a; + --gx-tag-text: #5eead4; + --gx-tag-border: #134e4a; + --gx-gradient: linear-gradient(135deg, #2dd4bf 0%, #22d3ee 100%); } }