""" theme.py -------- Visual design system for the Traffic Scene Interpretation System UI. Design direction: a dark traffic-monitoring "control room" console rather than a generic AI demo page. Colors are drawn from real traffic signals (green/amber/red) so the congestion badge means something, not just decorates. Stat readouts use a monospace face to evoke CCTV on-screen text. Panels are captioned like camera feeds (e.g. "CAM 01 · RAW"). Token system: Color bg-primary #0B0E13, bg-panel #141A22, border #232B35, accent-amber #FFB020, signal-green #35D399, signal-red #FF5C5C, text-primary #E8ECF1, text-muted #8B95A3 Type Display: Space Grotesk · Body: Inter · Data/mono: IBM Plex Mono """ import streamlit as st CSS = """ """ def inject(): st.markdown(CSS, unsafe_allow_html=True) def masthead(): st.markdown( """ """, unsafe_allow_html=True, ) def hero(eyebrow: str, title: str, subtitle: str): st.markdown( f"""

{eyebrow}

{title}

{subtitle}

""", unsafe_allow_html=True, ) def feed_caption(tag: str, label: str): st.markdown( f'

{tag} {label}

', unsafe_allow_html=True, ) def chip_row(counts: dict): if not counts: st.markdown( '

' 'STATUSNO OBJECTS DETECTED

', unsafe_allow_html=True, ) return chips = "".join( f'

{label.upper()}{count}

' for label, count in sorted(counts.items(), key=lambda x: -x[1]) ) st.markdown(f'

{chips}

', unsafe_allow_html=True) def congestion_badge(label: str): variant_map = { "Free flowing": ("tsis-badge-free", "FREE FLOWING"), "Moderate traffic": ("tsis-badge-moderate", "MODERATE TRAFFIC"), "Congested": ("tsis-badge-congested", "CONGESTED"), } variant_class, display_text = variant_map.get(label, ("tsis-badge-moderate", label.upper())) st.markdown( f'

{display_text}

', unsafe_allow_html=True, )