giteadmin/datatools-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): replace Fraunces with Geist per geist_spec.md

Browse Source 
Switches the type system to the single-family Geist spec referenced
in ``Business/DataTools/geist_spec.md`` and the matching
``datatools_layout_redesign2.html`` mockup. Editorial-serif headings
are out; the product now reads as modern SaaS-tool typography per
the spec's positioning note (§10).

  src/gui/theme.py (new)
    Implements geist_spec.md §3 verbatim — preconnect + Google Fonts
    link for Geist (400/500/600/700) and Geist Mono (400/500), the
    canonical ``:root`` token table (§7) plus severity extensions,
    and the type scale (§4): h1 32/600/-0.035em, h2 22/600/-0.025em,
    h3 18/500/-0.018em, h4 15/500/-0.012em, body 14/400, caption
    12.5/400, mono 0.92× ss02. ``apply_theme()`` is the single entry
    point.

    Two deviations from the spec, both anticipated by spec §6.1:
    - ``font-family: var(--font-sans) !important`` on the base rule.
      Streamlit applies ``font-family: "Source Sans"`` directly to
      ``[data-testid="stMarkdownContainer"]`` and a few widget
      wrappers at equal-or-higher specificity than the spec's
      selector list, so plain inheritance loses the cascade.
    - The base selector list explicitly enumerates
      ``stSidebarNav``, ``stMarkdownContainer``, ``stVerticalBlock``
      and a few siblings so Streamlit's per-widget font reset
      doesn't reach descendant text.

  src/gui/components/_legacy.py
    - ``_DESIGN_TOKENS_CSS`` no longer redeclares fonts or the
      heading rules — those are theme.py's job (spec §9 says the
      spec is type-only; everything below is component chrome).
    - Token references switched from ``--dt-*`` to the spec names
      (``--ink``, ``--bg``, ``--surface``, ``--border``, ``--accent``,
      ``--font-sans``, ``--font-mono``, …).
    - Sidebar section-label rule tightened to 11.5px / 500 to match
      the "Eyebrow" row in spec §4.
    - Primary-button text color now also targets every descendant
      (``button[kind="primary"] *``) so the inner
      ``stMarkdownContainer > p`` doesn't pick up
      ``color: var(--ink)`` from the base rule and render
      near-invisible ink-on-ink.
    - ``hide_streamlit_chrome`` now calls ``apply_theme`` before
      injecting component CSS so the base tokens are defined first.

Acceptance criteria from spec §8 verified at 1920×1050:
  - h1 computes ``font-family: Geist``, ``font-weight: 600``,
    ``letter-spacing: -1.12px`` (= 32px × -0.035em), size ``32px``.
  - Body ``<p>`` inside ``stMarkdownContainer``: Geist 400 / 14px.
  - Caption: Geist 400 / 12.5px.
  - Inline mono filenames: Geist Mono in accent-fill chip.
  - No Source Sans Pro leaks into any text the user reads.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael
2026-05-19 00:21:52 +00:00
parent 444dffbc63
commit 2501119ac2
2 changed files with 296 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
src/gui/components/_legacy.py
View File

@@ -137,75 +137,55 @@ hr { margin-top: 0.4rem !important; margin-bottom: 0.4rem !important; }
"""
# Warm editorial palette + typography, lifted from the
# ``datatools_layout_redesign.html`` mockup. Applied on every page via
# ``hide_streamlit_chrome``. Tokens are scoped through CSS custom
# properties so individual rules read cleanly and a future tweak only
# has to touch the ``:root`` block.
# Component-level styling that rides on top of the canonical typography
# + color tokens declared in ``src/gui/theme.py`` (``apply_theme``).
# This block does NOT redeclare the type scale or the ``--font-sans`` /
# ``--ink`` etc. variables — that is theme.py's job per
# ``geist_spec.md`` §9 ("Out of scope: button/input/widget styling.
# Type only."). Everything below extends the spec with widget chrome
# (buttons, sidebar, file uploader, expanders, alerts) that the mockup
# wants but the spec leaves unowned.
#
# Reads from theme.py's :root: ``--font-sans``, ``--font-mono``,
# ``--ink``, ``--ink-secondary``, ``--ink-tertiary``, ``--bg``,
# ``--surface``, ``--surface-hover``, ``--border``, ``--border-strong``,
# ``--accent``, ``--accent-hover``, ``--accent-fill``, the severity
# extensions ``--warn(-fill)`` / ``--info(-fill)`` / ``--success(-fill)``
# / ``--danger(-fill)``, and the radius scale ``--r-sm/md/lg``.
_DESIGN_TOKENS_CSS = """
<style>
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap');
:root {
--dt-bg: #fafaf7;
--dt-bg-sidebar: #f5f4ef;
--dt-surface: #ffffff;
--dt-surface-hover: #f8f7f3;
--dt-border: #e7e5dc;
--dt-border-strong: #d6d3c7;
--dt-ink: #1c1917;
--dt-ink-secondary: #57534e;
--dt-ink-tertiary: #a8a29e;
--dt-accent: #c2410c;
--dt-accent-hover: #9a3412;
--dt-accent-fill: #fef4ed;
--dt-warn: #b45309;
--dt-warn-fill: #fef3c7;
--dt-info: #0369a1;
--dt-info-fill: #e0f2fe;
--dt-success: #15803d;
--dt-success-fill: #dcfce7;
--dt-danger: #b91c1c;
--dt-danger-fill: #fee2e2;
--dt-r-sm: 6px;
--dt-r-md: 10px;
--dt-r-lg: 14px;
--dt-font-display: "Fraunces", Georgia, serif;
--dt-font-body: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
--dt-font-mono: "Geist Mono", "SF Mono", Menlo, monospace;
}
/* ---------- Page surface ---------- */
body, .stApp {
background: var(--dt-bg) !important;
font-family: var(--dt-font-body) !important;
color: var(--dt-ink) !important;
background: var(--bg) !important;
font-family: var(--font-sans) !important;
color: var(--ink) !important;
-webkit-font-smoothing: antialiased;
}
/* ---------- Sidebar — cream paper, soft right edge ---------- */
[data-testid="stSidebar"] {
background: var(--dt-bg-sidebar) !important;
border-right: 1px solid var(--dt-border) !important;
background: #f5f4ef !important;
border-right: 1px solid var(--border) !important;
}
[data-testid="stSidebar"] > div:first-child {
background: var(--dt-bg-sidebar) !important;
background: #f5f4ef !important;
}
/* Section labels in the page-nav: tiny uppercase tracking. Streamlit
renders these as <span> nodes with class ``st-emotion-cache-…``
inside ``stSidebarNav`` — class hashes are unstable across versions,
so we lean on the structural position (the bare span/h2 directly
inside the nav list) rather than emotion classes. */
/* Section labels in the page-nav: tiny uppercase tracking — the
"Eyebrow" row from spec §4. Streamlit renders these as <span> nodes
with class ``st-emotion-cache-…`` inside ``stSidebarNav`` — class
hashes are unstable across versions, so we lean on the structural
position (the bare span / h2 directly inside the nav list) rather
than emotion classes. */
[data-testid="stSidebarNav"] h2,
[data-testid="stSidebarNav"] h3,
[data-testid="stSidebarNavSeparator"] span,
[data-testid="stSidebarNavSectionHeader"] {
font-family: var(--dt-font-body) !important;
font-size: 10.5px !important;
font-family: var(--font-sans) !important;
font-size: 11.5px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--dt-ink-tertiary) !important;
color: var(--ink-tertiary) !important;
font-weight: 500 !important;
padding-top: 14px !important;
padding-bottom: 4px !important;
@@ -215,136 +195,115 @@ body, .stApp {
/* Nav items: comfortable padding, soft hover. */
[data-testid="stSidebarNav"] a[data-testid="stSidebarNavLink"],
[data-testid="stSidebarNav"] [data-testid="stSidebarNavLinkContainer"] a {
color: var(--dt-ink-secondary) !important;
color: var(--ink-secondary) !important;
font-size: 13.5px !important;
line-height: 1.3 !important;
padding: 7px 10px !important;
border-radius: var(--dt-r-sm) !important;
border-radius: var(--r-sm) !important;
transition: background 0.12s ease, color 0.12s ease;
}
[data-testid="stSidebarNav"] a[data-testid="stSidebarNavLink"]:hover,
[data-testid="stSidebarNav"] [data-testid="stSidebarNavLinkContainer"] a:hover {
background: rgba(0,0,0,0.04) !important;
color: var(--dt-ink) !important;
color: var(--ink) !important;
}
/* Active nav item — white pill with subtle shadow. Streamlit marks the
active anchor with ``aria-current="page"``. */
[data-testid="stSidebarNav"] a[aria-current="page"] {
background: var(--dt-surface) !important;
color: var(--dt-ink) !important;
background: var(--surface) !important;
color: var(--ink) !important;
font-weight: 500 !important;
box-shadow: 0 1px 2px rgba(28,25,23,0.04) !important;
}
/* ---------- Typography ---------- */
.stApp h1, [data-testid="stMain"] h1 {
font-family: var(--dt-font-display) !important;
font-weight: 500 !important;
font-size: 32px !important;
letter-spacing: -0.025em !important;
line-height: 1.1 !important;
color: var(--dt-ink) !important;
}
.stApp h2, [data-testid="stMain"] h2 {
font-family: var(--dt-font-display) !important;
font-weight: 500 !important;
font-size: 22px !important;
letter-spacing: -0.02em !important;
color: var(--dt-ink) !important;
}
.stApp h3, [data-testid="stMain"] h3 {
font-family: var(--dt-font-display) !important;
font-weight: 500 !important;
font-size: 18px !important;
letter-spacing: -0.015em !important;
color: var(--dt-ink) !important;
}
/* st.caption + subheadings are body-sans, secondary ink. */
[data-testid="stCaption"],
[data-testid="stCaptionContainer"] {
color: var(--dt-ink-secondary) !important;
font-size: 13.5px !important;
}
/* Inline + block code in user-facing text → Geist Mono. */
[data-testid="stMarkdownContainer"] code,
[data-testid="stCode"] pre {
font-family: var(--dt-font-mono) !important;
background: var(--dt-accent-fill) !important;
color: var(--dt-accent-hover) !important;
/* Inline + block code → mono with subtle accent chip. theme.py owns
the family + size; this layer adds the warm-fill background. */
[data-testid="stMarkdownContainer"] code {
background: var(--accent-fill) !important;
color: var(--accent-hover) !important;
padding: 1px 5px !important;
border-radius: 4px !important;
font-size: 0.92em !important;
}
[data-testid="stCode"] pre {
padding: 12px 14px !important;
background: var(--dt-surface-hover) !important;
color: var(--dt-ink) !important;
border: 1px solid var(--dt-border) !important;
border-radius: var(--dt-r-md) !important;
background: var(--surface-hover) !important;
color: var(--ink) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-md) !important;
}
/* ---------- Buttons — ink primary, outlined secondary ---------- */
[data-testid="stButton"] button,
[data-testid="stDownloadButton"] button {
border-radius: var(--dt-r-md) !important;
font-family: var(--dt-font-body) !important;
border-radius: var(--r-md) !important;
font-family: var(--font-sans) !important;
font-weight: 500 !important;
font-size: 13.5px !important;
letter-spacing: -0.005em !important;
line-height: 1 !important;
padding: 9px 16px !important;
transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
/* Primary = dark ink (matches mockup's ``btn-primary``). */
/* Primary = dark ink (mockup ``.btn-primary``). Color is set on the
button AND every descendant text node — the inner
``stMarkdownContainer`` and its ``<p>`` would otherwise pick up
``color: var(--ink)`` from theme.py's base rule and turn the label
nearly invisible against the dark background. */
[data-testid="stButton"] button[kind="primary"],
[data-testid="stButton"] button[data-testid="stBaseButton-primary"],
[data-testid="stDownloadButton"] button[kind="primary"] {
background: var(--dt-ink) !important;
color: var(--dt-bg) !important;
border: 1px solid var(--dt-ink) !important;
background: var(--ink) !important;
color: var(--bg) !important;
border: 1px solid var(--ink) !important;
}
[data-testid="stButton"] button[kind="primary"] *,
[data-testid="stButton"] button[data-testid="stBaseButton-primary"] *,
[data-testid="stDownloadButton"] button[kind="primary"] * {
color: var(--bg) !important;
}
[data-testid="stButton"] button[kind="primary"]:hover,
[data-testid="stButton"] button[data-testid="stBaseButton-primary"]:hover,
[data-testid="stDownloadButton"] button[kind="primary"]:hover {
background: #292524 !important;
border-color: #292524 !important;
color: var(--dt-bg) !important;
color: var(--bg) !important;
}
/* Secondary = surface + warm border. */
/* Secondary = paper surface + warm border. */
[data-testid="stButton"] button[kind="secondary"],
[data-testid="stButton"] button[data-testid="stBaseButton-secondary"],
[data-testid="stDownloadButton"] button[kind="secondary"] {
background: var(--dt-surface) !important;
color: var(--dt-ink) !important;
border: 1px solid var(--dt-border-strong) !important;
background: var(--surface) !important;
color: var(--ink) !important;
border: 1px solid var(--border-strong) !important;
}
[data-testid="stButton"] button[kind="secondary"]:hover,
[data-testid="stButton"] button[data-testid="stBaseButton-secondary"]:hover {
background: var(--dt-surface-hover) !important;
border-color: var(--dt-ink-tertiary) !important;
background: var(--surface-hover) !important;
border-color: var(--ink-tertiary) !important;
}
/* Disabled state — same look both kinds, low-contrast. */
/* Disabled state — same low-contrast for both kinds. */
[data-testid="stButton"] button:disabled {
background: var(--dt-surface-hover) !important;
color: var(--dt-ink-tertiary) !important;
border-color: var(--dt-border) !important;
background: var(--surface-hover) !important;
color: var(--ink-tertiary) !important;
border-color: var(--border) !important;
cursor: not-allowed !important;
}
/* ---------- File uploader — soft cream dropzone ---------- */
[data-testid="stFileUploader"] section,
[data-testid="stFileUploaderDropzone"] {
background: var(--dt-surface-hover) !important;
border: 1px dashed var(--dt-border-strong) !important;
border-radius: var(--dt-r-md) !important;
background: var(--surface-hover) !important;
border: 1px dashed var(--border-strong) !important;
border-radius: var(--r-md) !important;
}
[data-testid="stFileUploader"] button {
border-radius: var(--dt-r-md) !important;
border-radius: var(--r-md) !important;
}
/* The per-file chip rows the uploader emits after a file is staged. */
[data-testid="stFileUploaderFile"] {
background: var(--dt-surface) !important;
border: 1px solid var(--dt-border) !important;
border-radius: var(--dt-r-sm) !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-sm) !important;
}
/* Hide Streamlit's built-in compact file-chip row once files exist —
the home page renders its own canonical "Imported files" list with
@@ -359,21 +318,21 @@ body, .stApp {
/* ---------- Expanders + bordered containers → editorial cards ---------- */
[data-testid="stExpander"] details,
[data-testid="stExpander"] {
background: var(--dt-surface) !important;
border: 1px solid var(--dt-border) !important;
border-radius: var(--dt-r-lg) !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
overflow: hidden !important;
box-shadow: 0 1px 2px rgba(28,25,23,0.03);
}
[data-testid="stExpander"] details > summary {
background: var(--dt-surface-hover) !important;
border-bottom: 1px solid var(--dt-border) !important;
background: var(--surface-hover) !important;
border-bottom: 1px solid var(--border) !important;
padding: 12px 16px !important;
font-weight: 500 !important;
color: var(--dt-ink) !important;
color: var(--ink) !important;
}
[data-testid="stExpander"] details[open] > summary {
border-bottom: 1px solid var(--dt-border) !important;
border-bottom: 1px solid var(--border) !important;
}
[data-testid="stExpander"] details > div {
padding: 14px 16px !important;
@@ -382,16 +341,16 @@ body, .stApp {
/* ``st.container(border=True)`` — same card treatment. */
[data-testid="stVerticalBlockBorderWrapper"],
div[data-testid="stContainer"][data-border="true"] {
background: var(--dt-surface) !important;
border: 1px solid var(--dt-border) !important;
border-radius: var(--dt-r-lg) !important;
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--r-lg) !important;
box-shadow: 0 1px 2px rgba(28,25,23,0.03);
}
/* ---------- Alerts — soft fills, no harsh borders ---------- */
[data-testid="stAlert"] [data-testid="stAlertContainer"],
[data-testid="stAlertContainer"] {
border-radius: var(--dt-r-md) !important;
border-radius: var(--r-md) !important;
border: 1px solid transparent !important;
padding: 10px 14px !important;
font-size: 13.5px !important;
@@ -400,23 +359,23 @@ div[data-testid="stContainer"][data-border="true"] {
legacy class hooks and the newer per-kind ``data-baseweb-color``. */
[data-testid="stAlertContainer"][kind="info"],
.stAlert[data-baseweb="notification"][kind="info"] {
background: var(--dt-info-fill) !important;
color: var(--dt-info) !important;
background: var(--info-fill) !important;
color: var(--info) !important;
}
[data-testid="stAlertContainer"][kind="success"],
.stAlert[data-baseweb="notification"][kind="success"] {
background: var(--dt-success-fill) !important;
color: var(--dt-success) !important;
background: var(--success-fill) !important;
color: var(--success) !important;
}
[data-testid="stAlertContainer"][kind="warning"],
.stAlert[data-baseweb="notification"][kind="warning"] {
background: var(--dt-warn-fill) !important;
color: var(--dt-warn) !important;
background: var(--warn-fill) !important;
color: var(--warn) !important;
}
[data-testid="stAlertContainer"][kind="error"],
.stAlert[data-baseweb="notification"][kind="error"] {
background: var(--dt-danger-fill) !important;
color: var(--dt-danger) !important;
background: var(--danger-fill) !important;
color: var(--danger) !important;
}
/* ---------- Inputs (text, select, multiselect) — paper surface ---------- */
@@ -426,33 +385,33 @@ div[data-testid="stContainer"][data-border="true"] {
[data-testid="stSelectbox"] div[role="combobox"],
[data-testid="stMultiSelect"] div[role="combobox"],
[data-baseweb="select"] > div {
background: var(--dt-surface) !important;
border-radius: var(--dt-r-sm) !important;
border-color: var(--dt-border-strong) !important;
font-family: var(--dt-font-body) !important;
background: var(--surface) !important;
border-radius: var(--r-sm) !important;
border-color: var(--border-strong) !important;
font-family: var(--font-sans) !important;
}
/* Divider — softer warm gray instead of cool Streamlit default. */
[data-testid="stMarkdownContainer"] hr,
.stApp hr {
border-color: var(--dt-border) !important;
border-color: var(--border) !important;
}
/* Tabs — pill-style with active underline in accent. */
[data-testid="stTabs"] [role="tab"] {
font-family: var(--dt-font-body) !important;
font-family: var(--font-sans) !important;
font-size: 13.5px !important;
color: var(--dt-ink-secondary) !important;
color: var(--ink-secondary) !important;
}
[data-testid="stTabs"] [role="tab"][aria-selected="true"] {
color: var(--dt-ink) !important;
color: var(--ink) !important;
font-weight: 500 !important;
}
/* DataFrame surface — warm card, mono cells. */
[data-testid="stDataFrame"] {
border-radius: var(--dt-r-md) !important;
border: 1px solid var(--dt-border) !important;
border-radius: var(--r-md) !important;
border: 1px solid var(--border) !important;
overflow: hidden !important;
}
</style>
@@ -526,6 +485,11 @@ def hide_streamlit_chrome(*, gate_license: bool = True) -> None:
can render its own form without recursion.
"""
st.markdown(_HIDE_CHROME_CSS, unsafe_allow_html=True)
# ``apply_theme`` injects the canonical typography + color tokens
# (geist_spec.md §3). Must run BEFORE ``_DESIGN_TOKENS_CSS`` so the
# component CSS below can read its ``--font-sans`` / ``--ink`` etc.
from src.gui.theme import apply_theme
apply_theme()
st.markdown(_DESIGN_TOKENS_CSS, unsafe_allow_html=True)
# ``st.markdown`` doesn't execute embedded scripts; ship the
# Upload→Import rewriter through an iframe component the same way