Space: improve hero contrast and typography#14
Conversation
Force explicit light text on the hero and markdown surfaces, add stronger display/body font choices, and keep the visible test-count metric synced to the current 594 passing tests.
There was a problem hiding this comment.
Pull request overview
This PR updates the Hugging Face Space UI styling to improve contrast/typography on dark surfaces, and adds a small regression test to guard the expected CSS/font choices.
Changes:
- Strengthen hero + Markdown contrast by explicitly forcing light text colors via new CSS variables and selector overrides.
- Introduce clearer display/body typography choices (Georgia for display; Trebuchet MS stack for body).
- Add an app-level test asserting key CSS selectors/fonts exist and bump the displayed “Passing tests” metric to 594.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
hf-space/app.py |
Adds new CSS variables and overrides to force readable light text and update hero/markdown typography. |
hf-space/app_logic.py |
Updates the visible “Passing tests” metric value to match the new test count. |
tests/test_hf_space_app.py |
Adds a regression test that loads the Space app module and checks key CSS selectors/font strings. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
| def _load_app_module(): | ||
| path = Path(__file__).resolve().parents[1] / "hf-space" / "app.py" | ||
| sys.path.insert(0, str(path.parent)) | ||
| spec = importlib.util.spec_from_file_location("hf_space_app", path) | ||
| if spec is None or spec.loader is None: | ||
| raise RuntimeError("Unable to load hf-space/app.py") | ||
| module = importlib.util.module_from_spec(spec) | ||
| try: | ||
| spec.loader.exec_module(module) | ||
| return module | ||
| finally: | ||
| sys.path.pop(0) |
| .gradio-container .prose code, | ||
| .gradio-container .prose a { | ||
| color: var(--slip-prose) !important; | ||
| font-family: "Trebuchet MS", Verdana, sans-serif; | ||
| } | ||
|
|
| .hero-shell { | ||
| border: 1px solid var(--slip-line); | ||
| border-radius: 28px; | ||
| padding: 28px; | ||
| background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); | ||
| box-shadow: 0 24px 80px rgba(0,0,0,0.24); | ||
| color: var(--slip-text); | ||
| } | ||
|
|
||
| .hero-shell, | ||
| .hero-shell * { | ||
| color: var(--slip-text); | ||
| } |
Inspect the Space app source text instead of importing app.py so the core repository test matrix stays dependency-free.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 135fdb6fd6
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
|
|
||
|
|
||
| def test_custom_css_forces_light_text_and_non_default_fonts() -> None: | ||
| app = _load_app_module() |
There was a problem hiding this comment.
This test now imports hf-space/app.py unconditionally, but app.py has a top-level import gradio as gr; in environments that follow .github/workflows/ci.yml (pip install -e ".[dev]") the dev extra in pyproject.toml does not install Gradio, so this test can fail with ModuleNotFoundError before running assertions. Please gate this test (or its loader) behind a Gradio availability check so the core test suite remains runnable with the documented dev dependencies.
Useful? React with 👍 / 👎.
Summary\n- force explicit light text on the Slipstream Lab hero and markdown surfaces\n- add stronger display/body font choices so the page reads cleanly on the dark background\n- add an app-level regression test for the contrast/typography CSS and sync the visible test-count metric to 594\n\n## Validation\n- PYTHONPATH=src pytest tests -q\n- ruff check hf-space tests/test_hf_space_app.py tests/test_hf_space_app_logic.py\n- python -m py_compile hf-space/app.py hf-space/app_logic.py\n- live Space runtime plus served CSS/config smoke checks\n