From 0dfd31bb8f454b4944c5c8a54af39d032449a2d6 Mon Sep 17 00:00:00 2001 From: Mark007-R Date: Thu, 17 Sep 2026 15:47:26 +0530 Subject: [PATCH] Restyle the UI to the portfolio design system Moves the interface onto the same visual system as the portfolio site: a warm near-black ground (the dark variant), Fraunces headings, Inter body text, JetBrains Mono labels, pill buttons and card surfaces, with a crimson accent (#F0655A). Presentation only: routes, form fields, element ids and application logic are unchanged. --- .streamlit/config.toml | 9 + app.py | 203 ++------------- pages/1_Predict.py | 129 +--------- pages/2_Performance.py | 161 ++++-------- pages/3_Transactions.py | 175 +++++-------- pages/4_Ops.py | 91 ++----- ui_theme.py | 532 ++++++++++++++++++++++++++++++++++++++++ 7 files changed, 692 insertions(+), 608 deletions(-) create mode 100644 .streamlit/config.toml create mode 100644 ui_theme.py diff --git a/.streamlit/config.toml b/.streamlit/config.toml new file mode 100644 index 0000000..05fd5e2 --- /dev/null +++ b/.streamlit/config.toml @@ -0,0 +1,9 @@ +# Native Streamlit widgets share the mark.dev after-dark palette with ui_theme.py +# (MODE = "dark"). Night accent for this project: Crimson. +[theme] +base = "dark" +primaryColor = "#F0655A" +backgroundColor = "#14110f" +secondaryBackgroundColor = "#1f1a17" +textColor = "#f4ede4" +font = "sans serif" diff --git a/app.py b/app.py index 052daaa..150045a 100644 --- a/app.py +++ b/app.py @@ -7,6 +7,8 @@ from pathlib import Path import json +from ui_theme import apply_theme + st.set_page_config( page_title="SENTINEL Fraud Detection", layout="wide", @@ -14,201 +16,24 @@ page_icon="S", ) -# Shared CSS theme -st.markdown(""" - -""", unsafe_allow_html=True) +# Shared mark.dev theme — MODE and accent live in ui_theme.py (tokens, type, widgets, SENTINEL components) +apply_theme() # Sidebar with st.sidebar: st.markdown(""" -
-
S
-

SENTINEL

-

FRAUD DETECTION SYSTEM

+
+
S
+

SENTINEL

+

FRAUD DETECTION SYSTEM

""", unsafe_allow_html=True) st.markdown("---") st.markdown(""" -
-

NAVIGATION

-

+

+
NAVIGATION
+

Home Dashboard
Predict Fraud
Performance Metrics
@@ -219,9 +44,9 @@ st.markdown("---") st.markdown(""" -

-

POWERED BY

-

+

+
POWERED BY
+

XGBoost Classifier
Pandas + scikit-learn
DVC Pipeline diff --git a/pages/1_Predict.py b/pages/1_Predict.py index a80b640..44f7e41 100644 --- a/pages/1_Predict.py +++ b/pages/1_Predict.py @@ -8,132 +8,12 @@ import sys sys.path.insert(0, str(Path(__file__).parent.parent)) from src.predict import predict_dataframe +from ui_theme import apply_theme st.set_page_config(page_title="Predict Fraud - SENTINEL", layout="wide", page_icon="S") -# Dark theme CSS -st.markdown(""" - -""", unsafe_allow_html=True) +# Shared mark.dev theme (MODE and accent live in ui_theme.py) +apply_theme() st.markdown("""

@@ -413,8 +293,7 @@ ) st.markdown(""" -
+
Predictions powered by XGBoost trained on PaySim and Sparkov datasets
""", unsafe_allow_html=True) diff --git a/pages/2_Performance.py b/pages/2_Performance.py index 4593d45..d184ab0 100644 --- a/pages/2_Performance.py +++ b/pages/2_Performance.py @@ -8,89 +8,18 @@ import plotly.graph_objects as go import plotly.express as px -st.set_page_config(page_title="Performance - SENTINEL", layout="wide", page_icon="S") - -# Dark theme CSS -st.markdown(""" - -""", unsafe_allow_html=True) +# Shared mark.dev theme (MODE and accent live in ui_theme.py) +apply_theme() -# Plotly dark theme layout -PLOTLY_LAYOUT = dict( - paper_bgcolor="rgba(0,0,0,0)", - plot_bgcolor="rgba(17, 24, 39, 0.5)", - font=dict(color="#94a3b8", family="Inter"), - title_font=dict(color="#e2e8f0", size=16), - xaxis=dict(gridcolor="rgba(147, 197, 253, 0.08)", zerolinecolor="rgba(147, 197, 253, 0.1)"), - yaxis=dict(gridcolor="rgba(147, 197, 253, 0.08)", zerolinecolor="rgba(147, 197, 253, 0.1)"), - margin=dict(l=40, r=40, t=50, b=40), -) +# Charts sit on the theme ground: ui_theme.style_fig() applies the layout and +# repaints stock-plotly trace colours; render with theme=None so Streamlit does +# not repaint them again in its own palette. +CHART_MARGIN = dict(l=40, r=40, t=50, b=40) st.markdown("""
@@ -178,21 +107,23 @@ go.Bar( x=list(metrics_for_chart.keys()), y=list(metrics_for_chart.values()), - marker_color=['#3b82f6', '#60a5fa', '#06b6d4', '#8b5cf6'], + marker_color=ui_theme.colorway()[:4], text=[f"{v:.4f}" for v in metrics_for_chart.values()], textposition='auto', - textfont=dict(color="#e2e8f0"), + insidetextfont=dict(color=ui_theme.ON_ACCENT), + outsidetextfont=dict(color=ui_theme.INK), ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title="Classification Metrics Comparison", yaxis_title="Score", xaxis_title="Metric", height=400, showlegend=False, - **PLOTLY_LAYOUT, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) with col2: support_data = { @@ -208,17 +139,19 @@ go.Pie( labels=support_df['Class'], values=support_df['Count'], - marker_colors=['#3b82f6', '#ef4444'], - textfont=dict(color="#e2e8f0"), + marker_colors=[ui_theme.NEUTRAL, ui_theme.BAD], + insidetextfont=dict(color=ui_theme.ON_ACCENT), + outsidetextfont=dict(color=ui_theme.INK), hole=0.4, ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title="Class Distribution in Test Set", height=400, - **{k: v for k, v in PLOTLY_LAYOUT.items() if k not in ('xaxis', 'yaxis')}, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) with tab2: st.markdown("### Confusion Matrix") @@ -237,21 +170,23 @@ y=['Actual Negative', 'Actual Positive'], text=cm_data, texttemplate='%{text}', - textfont={"size": 18, "color": "#e2e8f0"}, - colorscale=[[0, '#1e293b'], [0.5, '#3b82f6'], [1, '#93c5fd']], + textfont={"size": 18}, # colour left to plotly: contrasts per cell + colorscale=ui_theme.colorscale(), showscale=True, - colorbar=dict(title="Count", tickfont=dict(color="#94a3b8")), + colorbar=dict(title="Count", tickfont=dict(color=ui_theme.INK_2), + outlinecolor=ui_theme.LINE), )) - fig.update_layout( + ui_theme.style_fig( + fig, title="Confusion Matrix", xaxis_title="Predicted Label", yaxis_title="True Label", height=500, - **PLOTLY_LAYOUT, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) col1, col2 = st.columns(2) @@ -297,30 +232,32 @@ y=tpr_data, mode='lines', name=f'ROC Curve (AUC = {auc_score:.4f})', - line=dict(color='#3b82f6', width=3), + line=dict(color=ui_theme.ACCENT, width=3), fill='tozeroy', - fillcolor='rgba(59, 130, 246, 0.1)', + fillcolor=ui_theme._rgba(ui_theme.ACCENT, 0.12), ), go.Scatter( x=[0, 1], y=[0, 1], mode='lines', name='Random Classifier', - line=dict(color='#475569', width=2, dash='dash'), + line=dict(color=ui_theme.INK_3, width=2, dash='dash'), ), ]) - fig.update_layout( + ui_theme.style_fig( + fig, title=f"ROC Curve (AUC = {auc_score:.4f})", xaxis_title="False Positive Rate", yaxis_title="True Positive Rate", height=500, hovermode='closest', - legend=dict(x=0.55, y=0.1, font=dict(color="#94a3b8")), - **PLOTLY_LAYOUT, + legend=dict(x=0.55, y=0.1, bgcolor="rgba(0,0,0,0)", + font=dict(color=ui_theme.INK_2)), + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) else: st.info("ROC curve data not available in metrics file. Re-run evaluation to generate it.") @@ -348,24 +285,27 @@ orientation='h', marker=dict( color=importance_df['Importance'], - colorscale=[[0, '#1e3a5f'], [0.5, '#3b82f6'], [1, '#93c5fd']], + colorscale=ui_theme.bar_scale(), ), text=importance_df['Importance'].apply(lambda x: f"{x:.4f}"), textposition='auto', - textfont=dict(color="#e2e8f0"), + insidetextfont=dict(color=ui_theme.ON_ACCENT), + outsidetextfont=dict(color=ui_theme.INK), ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title="Top 20 Most Important Features", xaxis_title="Importance Score", yaxis_title="Feature", height=600, - yaxis=dict(autorange="reversed", gridcolor="rgba(147, 197, 253, 0.08)"), - **{k: v for k, v in PLOTLY_LAYOUT.items() if k != 'yaxis'}, + yaxis=dict(autorange="reversed", gridcolor=ui_theme.LINE, + linecolor=ui_theme.LINE_STRONG), + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) st.markdown("#### All Features") st.dataframe(importance_df, use_container_width=True, hide_index=True) @@ -418,8 +358,7 @@ ) st.markdown(""" -
+
Model trained with DVC pipeline | Metrics generated by evaluate.py
""", unsafe_allow_html=True) diff --git a/pages/3_Transactions.py b/pages/3_Transactions.py index 15e1c4e..c7b0282 100644 --- a/pages/3_Transactions.py +++ b/pages/3_Transactions.py @@ -7,89 +7,18 @@ import plotly.express as px from pathlib import Path +import ui_theme +from ui_theme import apply_theme + st.set_page_config(page_title="Transactions - SENTINEL", layout="wide", page_icon="S") -# Dark theme CSS -st.markdown(""" - -""", unsafe_allow_html=True) +# Shared mark.dev theme (MODE and accent live in ui_theme.py) +apply_theme() -# Plotly dark theme layout -PLOTLY_LAYOUT = dict( - paper_bgcolor="rgba(0,0,0,0)", - plot_bgcolor="rgba(17, 24, 39, 0.5)", - font=dict(color="#94a3b8", family="Inter"), - title_font=dict(color="#e2e8f0", size=16), - xaxis=dict(gridcolor="rgba(147, 197, 253, 0.08)", zerolinecolor="rgba(147, 197, 253, 0.1)"), - yaxis=dict(gridcolor="rgba(147, 197, 253, 0.08)", zerolinecolor="rgba(147, 197, 253, 0.1)"), - margin=dict(l=40, r=40, t=50, b=40), -) +# Charts sit on the theme ground: ui_theme.style_fig() applies the layout and +# repaints stock-plotly trace colours; render with theme=None so Streamlit does +# not repaint them again in its own palette. +CHART_MARGIN = dict(l=40, r=40, t=50, b=40) st.markdown("""
@@ -162,10 +91,11 @@ df, x='amount', nbins=50, title='Transaction Amount Distribution', labels={'amount': 'Amount ($)', 'count': 'Frequency'}, + color_discrete_sequence=ui_theme.colorway(), ) - fig.update_traces(marker_color='#3b82f6') - fig.update_layout(height=400, **PLOTLY_LAYOUT) - st.plotly_chart(fig, use_container_width=True) + fig.update_traces(marker_color=ui_theme.ACCENT) + ui_theme.style_fig(fig, height=400, margin=CHART_MARGIN) + st.plotly_chart(fig, use_container_width=True, theme=None) with col2: if 'is_fraud' in df.columns: @@ -174,13 +104,14 @@ title='Amount Distribution by Class', labels={'is_fraud': 'Class', 'amount': 'Amount ($)'}, color='is_fraud', - color_discrete_map={0: '#3b82f6', 1: '#ef4444'}, + color_discrete_map={0: ui_theme.NEUTRAL, 1: ui_theme.BAD}, ) else: - fig = px.box(df, y='amount', title='Amount Distribution') + fig = px.box(df, y='amount', title='Amount Distribution', + color_discrete_sequence=ui_theme.colorway()) - fig.update_layout(height=400, **PLOTLY_LAYOUT) - st.plotly_chart(fig, use_container_width=True) + ui_theme.style_fig(fig, height=400, margin=CHART_MARGIN) + st.plotly_chart(fig, use_container_width=True, theme=None) col3, col4 = st.columns(2) @@ -209,21 +140,23 @@ x=bracket_dist.index.astype(str), y=bracket_dist.values, marker=dict( - color=['#1e3a5f', '#2563eb', '#3b82f6', '#60a5fa', '#93c5fd'], + color=ui_theme.ramp(5), ), text=bracket_dist.values, textposition='auto', - textfont=dict(color="#e2e8f0"), + insidetextfont=dict(color=ui_theme.ON_ACCENT), + outsidetextfont=dict(color=ui_theme.INK), ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title='Transactions by Amount Bracket', xaxis_title='Amount Range', yaxis_title='Count', height=400, - **PLOTLY_LAYOUT, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) with tab2: st.markdown("### Pattern & Anomaly Detection") @@ -240,17 +173,19 @@ go.Pie( labels=fraud_dist.index, values=fraud_dist.values, - marker_colors=['#3b82f6', '#ef4444'], + marker_colors=[ui_theme.NEUTRAL, ui_theme.BAD], hole=0.45, - textfont=dict(color="#e2e8f0"), + insidetextfont=dict(color=ui_theme.ON_ACCENT), + outsidetextfont=dict(color=ui_theme.INK), ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title="Fraud vs Legitimate Transactions", height=400, - **{k: v for k, v in PLOTLY_LAYOUT.items() if k not in ('xaxis', 'yaxis')}, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) fraud_rate = (df['is_fraud'] == 1).sum() / len(df) * 100 fraud_stats = pd.DataFrame({ @@ -307,20 +242,21 @@ x=time_dist.index, y=time_dist.values, mode='lines+markers', - line=dict(color='#3b82f6', width=2), - marker=dict(color='#60a5fa', size=6), + line=dict(color=ui_theme.ACCENT, width=2), + marker=dict(color=ui_theme.ACCENT, size=6), fill='tozeroy', - fillcolor='rgba(59, 130, 246, 0.1)', + fillcolor=ui_theme._rgba(ui_theme.ACCENT, 0.12), ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title=f'Transactions Over {selected_time_col}', xaxis_title=selected_time_col, yaxis_title='Count', height=400, - **PLOTLY_LAYOUT, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) with col2: if 'is_fraud' in df.columns: @@ -329,20 +265,22 @@ go.Bar( x=fraud_by_time.index, y=fraud_by_time.values, - marker_color='#ef4444', + marker_color=ui_theme.BAD, text=fraud_by_time.values, textposition='auto', - textfont=dict(color="#e2e8f0"), + insidetextfont=dict(color=ui_theme.ON_ACCENT), + outsidetextfont=dict(color=ui_theme.INK), ) ]) - fig.update_layout( + ui_theme.style_fig( + fig, title=f'Frauds Over {selected_time_col}', xaxis_title=selected_time_col, yaxis_title='Fraud Count', height=400, - **PLOTLY_LAYOUT, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) else: st.info(""" **Time-based analysis not available.** Ensure your dataset includes temporal features @@ -374,10 +312,11 @@ df, x=feature, nbins=30, title=f'Distribution of {feature}', labels={feature: feature, 'count': 'Frequency'}, + color_discrete_sequence=ui_theme.colorway(), ) - fig.update_traces(marker_color='#3b82f6') - fig.update_layout(height=350, **PLOTLY_LAYOUT) - st.plotly_chart(fig, use_container_width=True) + fig.update_traces(marker_color=ui_theme.ACCENT) + ui_theme.style_fig(fig, height=350, margin=CHART_MARGIN) + st.plotly_chart(fig, use_container_width=True, theme=None) else: st.info("No numeric features available for distribution analysis") @@ -397,22 +336,23 @@ z=correlation_matrix.values, x=correlation_matrix.columns, y=correlation_matrix.columns, - colorscale=[[0, '#1e3a5f'], [0.25, '#2563eb'], [0.5, '#1e293b'], [0.75, '#dc2626'], [1, '#fca5a5']], + colorscale=ui_theme.diverging(), zmid=0, zmin=-1, zmax=1, - textfont=dict(color="#e2e8f0"), + textfont=dict(color=ui_theme.INK), )) - fig.update_layout( + ui_theme.style_fig( + fig, title='Feature Correlation Matrix', height=700, xaxis_title='Features', yaxis_title='Features', - **PLOTLY_LAYOUT, + margin=CHART_MARGIN, ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) st.markdown("#### Highly Correlated Pairs (|r| > 0.7)") @@ -454,8 +394,7 @@ st.markdown(f"**{len(df):,}** rows, **{len(df.columns)}** columns available for export") st.markdown(""" -
+
Transaction data processed with Pandas | Features engineered in preprocessing stage
""", unsafe_allow_html=True) diff --git a/pages/4_Ops.py b/pages/4_Ops.py index f93a183..ee46d95 100644 --- a/pages/4_Ops.py +++ b/pages/4_Ops.py @@ -21,6 +21,9 @@ import plotly.graph_objects as go import streamlit as st +import ui_theme +from ui_theme import apply_theme + REPO_ROOT = Path(__file__).resolve().parent.parent RESULTS = REPO_ROOT / "results" @@ -28,44 +31,9 @@ st.set_page_config(page_title="Ops - SENTINEL", layout="wide", page_icon="S") -st.markdown( - """ - -""", - unsafe_allow_html=True, -) +# Shared mark.dev theme (MODE and accent live in ui_theme.py). The ops-title, +# ops-sub and metric-card classes used below are styled there as well. +apply_theme() st.markdown('
SENTINEL MLOps Dashboard
', unsafe_allow_html=True) st.markdown( @@ -204,39 +172,36 @@ def _metric(label: str, value: str, delta: str | None = None, bad: bool = False) x=drift_daily["day"], y=drift_daily["proba_psi"], name="Prediction PSI", - marker_color=["#f87171" if f else "#3b82f6" for f in drift_daily["fired"]], + marker_color=[ui_theme.BAD if f else ui_theme.NEUTRAL for f in drift_daily["fired"]], hovertemplate="day %{x}
PSI=%{y:.3f}", ) ) fig.add_hline( y=0.25, line_dash="dot", - line_color="#facc15", + line_color=ui_theme.WARN, annotation_text="PSI threshold = 0.25", annotation_position="top right", - annotation_font_color="#facc15", + annotation_font_color=ui_theme.WARN, ) injection_day = drift_summary.get("injection_day", 23) fig.add_vline( x=injection_day, line_dash="dash", - line_color="#fb7185", + line_color=ui_theme.INFO, annotation_text=f"injected day {injection_day}", annotation_position="top", - annotation_font_color="#fb7185", + annotation_font_color=ui_theme.INFO, ) - fig.update_layout( + ui_theme.style_fig( + fig, height=380, - template="plotly_dark", - paper_bgcolor="rgba(0,0,0,0)", - plot_bgcolor="rgba(0,0,0,0)", - font_color="#e2e8f0", showlegend=False, xaxis_title="day", yaxis_title="PSI on predicted probability", margin=dict(l=20, r=20, t=20, b=20), ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) pre_psi = drift_daily.loc[drift_daily["day"] < injection_day, "proba_psi"].max() post_psi = drift_daily.loc[drift_daily["day"] >= injection_day, "proba_psi"].min() @@ -322,21 +287,19 @@ def _metric(label: str, value: str, delta: str | None = None, bad: bool = False) color="phase", barmode="group", height=330, + color_discrete_sequence=ui_theme.colorway(), color_discrete_map={ - "alias_flip_seconds": "#3b82f6", - "audit_tag_seconds": "#a78bfa", - "total_seconds": "#facc15", + "alias_flip_seconds": ui_theme.colorway()[0], + "audit_tag_seconds": ui_theme.colorway()[1], + "total_seconds": ui_theme.colorway()[3], }, ) - fig.update_layout( - template="plotly_dark", - paper_bgcolor="rgba(0,0,0,0)", - plot_bgcolor="rgba(0,0,0,0)", - font_color="#e2e8f0", + ui_theme.style_fig( + fig, margin=dict(l=20, r=20, t=20, b=20), legend_title_text="", ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) # --------------------------------------------------------------------------- @@ -370,19 +333,17 @@ def _metric(label: str, value: str, delta: str | None = None, bad: bool = False) color="backend", markers=True, height=320, - color_discrete_map={"Pandas": "#3b82f6", "Dask": "#34d399"}, + color_discrete_sequence=ui_theme.colorway(), + color_discrete_map={"Pandas": ui_theme.colorway()[0], "Dask": ui_theme.colorway()[1]}, ) - fig.update_layout( - template="plotly_dark", - paper_bgcolor="rgba(0,0,0,0)", - plot_bgcolor="rgba(0,0,0,0)", - font_color="#e2e8f0", + ui_theme.style_fig( + fig, xaxis_title="rows processed", yaxis_title="rows / sec", margin=dict(l=20, r=20, t=20, b=20), legend_title_text="", ) - st.plotly_chart(fig, use_container_width=True) + st.plotly_chart(fig, use_container_width=True, theme=None) # --------------------------------------------------------------------------- diff --git a/ui_theme.py b/ui_theme.py new file mode 100644 index 0000000..b8cd68d --- /dev/null +++ b/ui_theme.py @@ -0,0 +1,532 @@ +"""Shared visual theme for Streamlit apps — mark.dev paper (or mark.dev after dark) with one project accent. + +Copy this file into a repo as ``ui_theme.py`` (next to the app, or inside the +package), set MODE and the three ACCENT values from the palette, and call +``apply_theme()`` right after ``st.set_page_config(...)`` on EVERY page script +(multipage apps run each page on its own, so CSS does not carry over). + +Pair it with ``.streamlit/config.toml`` at the repo root so native widgets +(sliders, checkboxes, focus rings) pick up the same colours. + +Light (MODE = "light"): + [theme] + base = "light" + primaryColor = "" + backgroundColor = "#fefaf5" + secondaryBackgroundColor = "#faf2e9" + textColor = "#1c1714" + font = "sans serif" + +Dark (MODE = "dark"): + [theme] + base = "dark" + primaryColor = "" + backgroundColor = "#14110f" + secondaryBackgroundColor = "#1f1a17" + textColor = "#f4ede4" + font = "sans serif" +""" +from __future__ import annotations + +import streamlit as st + +# ---- the only values that change between projects ------------------------- +MODE = "dark" # "light" = mark.dev paper, "dark" = mark.dev after dark +ACCENT = "#F0655A" # main accent (buttons, links, active tab, metric values) +ACCENT_STRONG = "#F4877E" # hover / pressed +ACCENT_SOFT = "#D0564C" # partner for gradients and secondary marks +# --------------------------------------------------------------------------- + +_PALETTES = { + "light": dict( + paper="#fefaf5", paper_alt="#faf2e9", card="#fffdfa", + ink="#1c1714", ink_2="#57504a", ink_3="#756c65", + line="#e9dbcd", line_strong="#d8c3b2", on_accent="#fefaf5", + header="rgba(254, 250, 245, .82)", placeholder="#a89a8f", + shadow_sm="0 1px 2px rgba(60, 40, 20, .04), 0 4px 16px rgba(60, 40, 20, .05)", + shadow_md="0 2px 4px rgba(60, 40, 20, .05), 0 14px 38px rgba(60, 40, 20, .09)", + neutrals=("#8c7b6b", "#c9a27e", "#3b3230", "#b9ad9f"), dots=1.0, + ), + "dark": dict( + paper="#14110f", paper_alt="#1a1613", card="#1f1a17", + ink="#f4ede4", ink_2="#c9bcae", ink_3="#9a8c7f", + line="#2f2823", line_strong="#463b33", on_accent="#14110f", + header="rgba(20, 17, 15, .82)", placeholder="#7d6f63", + shadow_sm="0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28)", + shadow_md="0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45)", + neutrals=("#b3a595", "#d9b48f", "#f4ede4", "#7d6f63"), dots=0.75, + ), +} + + +def _palette() -> dict: + return _PALETTES["dark" if MODE == "dark" else "light"] + + +# module-level names for app code that builds inline HTML (resolved from MODE above) +PAPER = _palette()["paper"] +PAPER_ALT = _palette()["paper_alt"] +CARD = _palette()["card"] +INK = _palette()["ink"] +INK_2 = _palette()["ink_2"] +INK_3 = _palette()["ink_3"] +LINE = _palette()["line"] +LINE_STRONG = _palette()["line_strong"] +ON_ACCENT = _palette()["on_accent"] +FONT_DISPLAY = "'Fraunces', Georgia, 'Times New Roman', serif" +FONT_BODY = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" +FONT_MONO = "'JetBrains Mono', ui-monospace, Consolas, monospace" + + +def _rgba(hex_color: str, alpha: float) -> str: + h = hex_color.lstrip("#") + r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4)) + return f"rgba({r}, {g}, {b}, {alpha})" + + +def colorway() -> list[str]: + """Categorical chart colours: accent first, then warm neutrals that sit on the ground.""" + n = _palette()["neutrals"] + return [ACCENT, n[0], ACCENT_SOFT, n[1], n[2], n[3]] + + +def sequential(n: int = 6) -> list[str]: + """Ground-to-accent ramp for heatmaps / ordered categories.""" + h = ACCENT.lstrip("#") + r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4)) + g0 = _palette()["paper_alt"].lstrip("#") + base = tuple(int(g0[i:i + 2], 16) for i in (0, 2, 4)) + out = [] + for i in range(n): + t = 0.15 + 0.85 * i / max(n - 1, 1) + out.append("#%02x%02x%02x" % tuple(round(base[k] + (c - base[k]) * t) + for k, c in enumerate((r, g, b)))) + return out + + +def plotly_layout(**overrides) -> dict: + """Transparent plotly layout that blends into the ground. + + Render with ``st.plotly_chart(fig, theme=None)`` — Streamlit's default chart + theme otherwise repaints the traces. Do not add a ``title_font`` without a + title: Streamlit then prints "undefined". Prefer ``style_fig(fig)``. + """ + p = _palette() + layout = dict( + paper_bgcolor="rgba(0,0,0,0)", + plot_bgcolor="rgba(0,0,0,0)", + font=dict(family="Inter, -apple-system, Segoe UI, sans-serif", color=p["ink_2"], size=13), + colorway=colorway(), + xaxis=dict(gridcolor=p["line"], linecolor=p["line_strong"], zerolinecolor=p["line"]), + yaxis=dict(gridcolor=p["line"], linecolor=p["line_strong"], zerolinecolor=p["line"]), + legend=dict(bgcolor="rgba(0,0,0,0)", font=dict(color=p["ink_2"])), + hoverlabel=dict(bgcolor=p["card"], bordercolor=p["line_strong"], font=dict(color=p["ink"])), + ) + layout.update(overrides) + return layout + + +# plotly's stock palette — traces still wearing these get repainted by style_fig() +_PLOTLY_DEFAULTS = {"#636efa", "#ef553b", "#00cc96", "#ab63fa", "#ffa15a", + "#19d3f3", "#ff6692", "#b6e880", "#ff97ff", "#fecb52"} + + +def style_fig(fig, **layout_overrides): + """Apply the layout AND recolour traces, then render with theme=None. + + plotly express stamps its own colour onto each trace at creation time, so + setting ``colorway`` afterwards does nothing — hence the second pass. Even + better: pass ``color_discrete_sequence=ui_theme.colorway()`` to the px call. + """ + fig.update_layout(**plotly_layout(**layout_overrides)) + palette, i = colorway(), 0 + for trace in fig.data: + for holder in ("marker", "line"): + obj = getattr(trace, holder, None) + colour = getattr(obj, "color", None) if obj is not None else None + if isinstance(colour, str) and colour.lower() in _PLOTLY_DEFAULTS: + obj.color = palette[i % len(palette)] + i += 1 + return fig + + +def _dots_svg() -> str: + fill = ACCENT.replace("#", "%23") + k = _palette()["dots"] + dots = [(52, 71, 1.4, .28), (178, 38, .9, .22), (312, 95, 1.6, .3), (458, 52, 1, .24), + (546, 128, 1.3, .26), (96, 188, 1.1, .25), (236, 222, 1.5, .28), (392, 176, .9, .2), + (508, 246, 1.4, .27), (28, 298, 1.2, .24), (158, 344, 1.6, .3), (286, 312, 1, .22), + (430, 366, 1.3, .26), (566, 402, 1.1, .23), (72, 452, 1.5, .29), (204, 486, .9, .21), + (348, 438, 1.4, .27), (482, 528, 1.2, .25), (128, 566, 1.3, .26), (268, 592, 1, .22), + (412, 556, 1.5, .28), (588, 486, .9, .2)] + circles = "".join(f"%3Ccircle cx='{x}' cy='{y}' r='{r}' opacity='{round(o * k, 3)}'/%3E" + for x, y, r, o in dots) + return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E" + f"%3Cg fill='{fill}'%3E{circles}%3C/g%3E%3C/svg%3E") + + +def theme_css() -> str: + p = _palette() + tint = _rgba(ACCENT, .08 if MODE == "dark" else .06) + glow = _rgba(ACCENT, .22 if MODE == "dark" else .14) + line_accent = _rgba(ACCENT, .32 if MODE == "dark" else .24) + return f""" + +""" + + +# =========================================================================== +# SENTINEL extensions (Fraud-Detection-MLOps) — status colours, chart scales +# and the app's own components. Everything below resolves from MODE/ACCENT +# above, exactly like the shared half, so nothing here hardcodes light or dark. +# =========================================================================== + +_STATUS = { + "light": dict(ok="#3f7a3a", ok_tint="rgba(63, 122, 58, .10)", + warn="#a86a12", warn_tint="rgba(168, 106, 18, .10)", + bad="#b3261e", bad_tint="rgba(179, 38, 30, .08)", + info="#2f5f8a", info_tint="rgba(47, 95, 138, .09)"), + "dark": dict(ok="#6fbf73", ok_tint="rgba(111, 191, 115, .12)", + warn="#e0a445", warn_tint="rgba(224, 164, 69, .12)", + bad="#f07167", bad_tint="rgba(240, 113, 103, .12)", + info="#7fb0e0", info_tint="rgba(127, 176, 224, .12)"), +} + + +def _status() -> dict: + return _STATUS["dark" if MODE == "dark" else "light"] + + +# status colours keep their meaning in every project; always shown on their tint +OK = _status()["ok"] +WARN = _status()["warn"] +BAD = _status()["bad"] +INFO = _status()["info"] +NEUTRAL = _palette()["neutrals"][0] # first warm neutral of the colorway + + +def colorscale(n: int = 6) -> list[list]: + """``sequential()`` as a plotly colorscale — low values recede into the ground.""" + steps = sequential(n) + return [[i / (len(steps) - 1), c] for i, c in enumerate(steps)] + + +def bar_scale() -> list[list]: + """Warm neutral -> accent, for bars coloured by value (both ends stay visible).""" + return [[0.0, NEUTRAL], [1.0, ACCENT]] + + +def ramp(n: int = 5) -> list[str]: + """``bar_scale()`` as n discrete colours, for ordered bar categories.""" + a = [int(NEUTRAL.lstrip("#")[i:i + 2], 16) for i in (0, 2, 4)] + b = [int(ACCENT.lstrip("#")[i:i + 2], 16) for i in (0, 2, 4)] + return ["#%02x%02x%02x" % tuple(round(a[k] + (b[k] - a[k]) * i / max(n - 1, 1)) for k in range(3)) + for i in range(n)] + + +def diverging() -> list[list]: + """info -> ground -> accent, for correlation matrices centred on zero.""" + return [[0.0, INFO], [0.5, PAPER_ALT], [1.0, ACCENT]] + + +def components_css() -> str: + """SENTINEL's own components, re-expressed in the shared tokens. + + The class names are the ones app.py and pages/*.py already emit in their + markdown blocks — style hooks only, so they keep their names. + """ + s = _status() + return f""" + +""" + + +def apply_theme() -> None: + st.markdown(theme_css(), unsafe_allow_html=True) + st.markdown(components_css(), unsafe_allow_html=True) # SENTINEL components + + +def eyebrow(text: str) -> None: + """Small mono uppercase label above a heading, like mark.dev's status badge.""" + st.markdown( + f"
{text}
", + unsafe_allow_html=True, + )