github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-22 14:03:46 -05:00
Code Issues 114 Packages Projects Releases 24 Wiki Activity

[PR #1529] [MERGED] fix(tinytorch/ux): restore dark-mode contrast on preface + missing overrides #15548

New Issue
Closed
opened 2026-05-20 13:56:53 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-05-20 13:56:53 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/harvard-edge/cs249r_book/pull/1529
Author: @farhan523
Created: 4/25/2026
Status: ✅ Merged
Merged: 4/25/2026
Merged by: @profvjreddi

Base: dev ← Head: fix/tinytorch-dark-mode-contrast

📝 Commits (1)

  • bd94fdd fix(tinytorch/ux): restore dark-mode contrast on preface + missing component overrides

📊 Changes

2 files changed (+66 additions, -20 deletions)

View changed files

📝 tinytorch/quarto/assets/styles/dark-mode.scss (+45 -0)
📝 tinytorch/quarto/preface.qmd (+21 -20)

📄 Description

Background

TinyTorch v0.1.10 has dark-on-dark text in dark mode that makes body copy and persona cards invisible , visible on the Welcome page, the home page comparison cards, and the milestone roster. Two structural causes:

  1. Several qmd files (preface, tito/*) use inline style="background: #..." which beats CSS class specificity, so dark-mode rules never apply.

What's in this PR

tinytorch/quarto/preface.qmd refactor (HTML branches only — when-format="pdf" untouched):

  • "Why does this matter?" inline <div> → ::: {.callout-note} (inherits ecosystem dark cascade).
  • "MLSysBook / TinyTorch" comparison + "Who This Is For" 4-card grid → existing .who-grid / .who-card classes. Colored left-borders kept inline because they're mode-invariant accents.

tinytorch/quarto/assets/styles/dark-mode.scss gap-fill — adds dark overrides for components defined in style.scss with hardcoded light colors:

  • .comparison-title
  • .tier-foundation, .tier-architecture, .tier-optimization, .tier-olympics
  • .milestone-card (and nested .milestone-year, .milestone-name, .milestone-desc, :hover)
  • .ml-timeline-tech
  • .preview-badge (light yellow → translucent amber)
  • .callout-body / .callout-content text-color cascade for nested p / li / span / div — mirrors the pattern in shared/styles/_ecosystem-base-dark.scss:577-584.

Light mode visually unchanged.

Test plan

  • cd tinytorch/quarto && quarto render --to html succeeds for all 52 pages
  • _build/preface.html in dark mode — all body text + four persona cards visible
  • _build/index.html and _build/big-picture.html — tier cards and milestone roster visible in dark
  • Light mode unchanged vs dev (no regressions)
  • PDF render still works on a sample page

Known follow-ups (deferred)

  • tito/milestones.qmd, tito/overview.qmd, tito/data.qmd, tito/modules.qmd, tito/troubleshooting.qmd — still contain inline style= blocks with the same failure mode.
  • Latent issue surfaced during this work: $accent: #F59E0B redeclared in dark-mode.scss defaults block doesn't propagate to lighten($accent, ...) calls in the rules block — they resolve to the light accent #D4740C.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/harvard-edge/cs249r_book/pull/1529 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 4/25/2026 **Status:** ✅ Merged **Merged:** 4/25/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/tinytorch-dark-mode-contrast` --- ### 📝 Commits (1) - [`bd94fdd`](https://github.com/harvard-edge/cs249r_book/commit/bd94fddac056740c32e4ba856a8cecd875396888) fix(tinytorch/ux): restore dark-mode contrast on preface + missing component overrides ### 📊 Changes **2 files changed** (+66 additions, -20 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/quarto/assets/styles/dark-mode.scss` (+45 -0) 📝 `tinytorch/quarto/preface.qmd` (+21 -20) </details> ### 📄 Description ## Background TinyTorch v0.1.10 has dark-on-dark text in dark mode that makes body copy and persona cards invisible , visible on the Welcome page, the home page comparison cards, and the milestone roster. Two structural causes: 1. Several qmd files (preface, tito/*) use inline `style="background: #..."` which beats CSS class specificity, so dark-mode rules never apply. ## What's in this PR **`tinytorch/quarto/preface.qmd` refactor** (HTML branches only — `when-format="pdf"` untouched): - "Why does this matter?" inline `<div>` → `::: {.callout-note}` (inherits ecosystem dark cascade). - "MLSysBook / TinyTorch" comparison + "Who This Is For" 4-card grid → existing `.who-grid` / `.who-card` classes. Colored left-borders kept inline because they're mode-invariant accents. **`tinytorch/quarto/assets/styles/dark-mode.scss` gap-fill** — adds dark overrides for components defined in `style.scss` with hardcoded light colors: - `.comparison-title` - `.tier-foundation`, `.tier-architecture`, `.tier-optimization`, `.tier-olympics` - `.milestone-card` (and nested `.milestone-year`, `.milestone-name`, `.milestone-desc`, `:hover`) - `.ml-timeline-tech` - `.preview-badge` (light yellow → translucent amber) - `.callout-body` / `.callout-content` text-color cascade for nested `p / li / span / div` — mirrors the pattern in `shared/styles/_ecosystem-base-dark.scss:577-584`. Light mode visually unchanged. ## Test plan - [ ] `cd tinytorch/quarto && quarto render --to html` succeeds for all 52 pages - [ ] `_build/preface.html` in dark mode — all body text + four persona cards visible - [ ] `_build/index.html` and `_build/big-picture.html` — tier cards and milestone roster visible in dark - [ ] Light mode unchanged vs `dev` (no regressions) - [ ] PDF render still works on a sample page ## Known follow-ups (deferred) - `tito/milestones.qmd`, `tito/overview.qmd`, `tito/data.qmd`, `tito/modules.qmd`, `tito/troubleshooting.qmd` — still contain inline `style=` blocks with the same failure mode. - Latent issue surfaced during this work: `$accent: #F59E0B` redeclared in `dark-mode.scss` defaults block doesn't propagate to `lighten($accent, ...)` calls in the rules block — they resolve to the light accent `#D4740C`. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-05-20 13:56:53 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area: book
area: collabs
area: kits
area: labs
area: socratiq
area: tinytorch
area: tools
area: website
bug
dependencies
format: epub
format: pdf
javascript
link-health
link-rot
priority-high
pull-request
Mirrored from GitHub Pull Request
 staffml
type: bug
type: citation
type: code
type: errata
type: improvement
type: new
type: question
vault-sli
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#15548
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?