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

[PR #1588] [MERGED] fix(tinytorch/ux): light/dark/hybrid contrast for tito CLI cards + tables + code blocks #8295

New Issue
Closed
opened 2026-04-27 17:39:45 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-27 17:39:45 -05:00
Owner
Copy Link

📋 Pull Request Information

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

Base: dev ← Head: fix/tinytorch-light-mode-card-text-contrast

📝 Commits (1)

  • 85073cf fix(tinytorch/ux): light/dark/hybrid contrast for tito CLI cards + tables

📊 Changes

2 files changed (+84 additions, -1 deletions)

View changed files

📝 tinytorch/quarto/assets/styles/dark-mode.scss (+9 -0)
📝 tinytorch/quarto/assets/styles/style.scss (+75 -1)

📄 Description

Summary

Final round of contrast fixes for the tito CLI module pages. With this merge, every page under the tito CLI module is now fully readable in light mode, dark mode, and the hybrid state where data-bs-theme="dark" stays sticky on <html> while the light stylesheet is the active bundle (a state Quarto's color-toggle JS can land users in).

Three coordinated fixes, layered on top of upstream's existing inline-style safety net (2707c0546):

1. Light-fill panel text-color safety net (style.scss + dark-mode.scss)

The bg-flip safety net (lines 213-229 of dark-mode.scss) only fires in dark mode. In light/hybrid the cards stayed light-fill, but text inherited --bs-body-color which [data-bs-theme="dark"] resolves to #dee2e6 (light) — invisible on a light card.

  • New mode-shared rule in style.scss pins text inside inline-styled light-fill cards to #1e293b.
  • Matching color: #e6e6e6 !important line added to the existing bg-flip block in dark-mode.scss so text flips back when the card flips dark.

2. Code blocks inside cards

The previously-merged unscoped pre code { color: #e6e6e6 } was painting plain fenced blocks light grey on the light card surface — visible on the box-drawing console output under "Understanding the Export Process" on tito/modules.qmd. Nested pre code, code overrides inside both safety-net selector lists handle this for both modes.

3. Scope existing global h3 + pre code overrides to [data-bs-theme="dark"]

These were left unscoped earlier to compensate for the hybrid state. The card safety net now handles hybrid for cards, so the global rules can be properly scoped. Fixes the ### Milestone Achievements: \tito milestone status`h3 ontito/data.qmdwhich was rendering as#d0d0d0` on white in true light mode.

4. Table zebra-stripe override

shared/styles/partials/_tables.scss:138-144 sets tbody tr:nth-child(even) { background-color: #fafbfc } unconditionally. On the dark body, light body-text on a light row stripe was invisible. Added a [data-bs-theme="dark"]-scoped rule in style.scss using a subtle white-overlay rgba(255,255,255,0.04) so striping survives in both true dark and hybrid states without hardcoding a specific dark hue.

Before / After

Light mode — tito/modules.qmd "Environment Health" card

Before After
before titomodules qmd Environment Health card
after titomodules qmd Environment Health card

Dark mode — tito/overview.qmd table + headings

Before After
before titooverview qmd table + headings
after titooverview qmd table + headings

Light Mode — tito/data.qmd code blocks

Before After
before data html
after data html

Alot of code and blocks that are improved in tito cli module pages, which can be compared with https://mlsysbook.ai/tinytorch/tito/overview.html and local changes.

Test plan

  • cd tinytorch/quarto && quarto render --to html succeeds for all 52 pages
  • Light mode: tito/modules.html, tito/data.html, tito/overview.html, tito/troubleshooting.html, tito/milestones.html, datasets.html, resources.html — all card content (titles, prose, bullets, code blocks) and h3 section headings readable
  • Dark mode: same pages — same elements readable on the flipped dark surfaces; tables have visible alternating rows
  • Hybrid mode (toggle in-page color scheme button to dark, then DevTools → Rendering → emulate prefers-color-scheme: light) — cards stay light-fill but text + code stays dark; tables get dark stripe via the data-bs-theme selector

Outcome

After this merge, all pages under the tito CLI module (tito/overview, tito/modules, tito/data, tito/milestones, tito/troubleshooting, tito/testing) are fully readable in every theme state. The remaining inline-styled pages elsewhere in the site continue to benefit from the upstream safety net plus these new force-dark/scoped extensions.

🔄 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/1588 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 4/27/2026 **Status:** ✅ Merged **Merged:** 4/27/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/tinytorch-light-mode-card-text-contrast` --- ### 📝 Commits (1) - [`85073cf`](https://github.com/harvard-edge/cs249r_book/commit/85073cfdc7739ef5fa0b906ebc894b1ce3dc0f54) fix(tinytorch/ux): light/dark/hybrid contrast for tito CLI cards + tables ### 📊 Changes **2 files changed** (+84 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/quarto/assets/styles/dark-mode.scss` (+9 -0) 📝 `tinytorch/quarto/assets/styles/style.scss` (+75 -1) </details> ### 📄 Description ## Summary Final round of contrast fixes for the tito CLI module pages. With this merge, **every page under the tito CLI module is now fully readable in light mode, dark mode, and the hybrid state** where `data-bs-theme="dark"` stays sticky on `<html>` while the light stylesheet is the active bundle (a state Quarto's color-toggle JS can land users in). Three coordinated fixes, layered on top of upstream's existing inline-style safety net (`2707c0546`): ### 1. Light-fill panel text-color safety net (`style.scss` + `dark-mode.scss`) The bg-flip safety net (lines 213-229 of `dark-mode.scss`) only fires in dark mode. In light/hybrid the cards stayed light-fill, but text inherited `--bs-body-color` which `[data-bs-theme="dark"]` resolves to `#dee2e6` (light) — invisible on a light card. - New mode-shared rule in `style.scss` pins text inside inline-styled light-fill cards to `#1e293b`. - Matching `color: #e6e6e6 !important` line added to the existing bg-flip block in `dark-mode.scss` so text flips back when the card flips dark. ### 2. Code blocks inside cards The previously-merged unscoped `pre code { color: #e6e6e6 }` was painting plain fenced blocks light grey on the light card surface — visible on the box-drawing console output under "Understanding the Export Process" on `tito/modules.qmd`. Nested `pre code, code` overrides inside both safety-net selector lists handle this for both modes. ### 3. Scope existing global h3 + `pre code` overrides to `[data-bs-theme="dark"]` These were left unscoped earlier to compensate for the hybrid state. The card safety net now handles hybrid for cards, so the global rules can be properly scoped. Fixes the `### Milestone Achievements: \`tito milestone status\`` h3 on `tito/data.qmd` which was rendering as `#d0d0d0` on white in true light mode. ### 4. Table zebra-stripe override `shared/styles/partials/_tables.scss:138-144` sets `tbody tr:nth-child(even) { background-color: #fafbfc }` unconditionally. On the dark body, light body-text on a light row stripe was invisible. Added a `[data-bs-theme="dark"]`-scoped rule in `style.scss` using a subtle white-overlay `rgba(255,255,255,0.04)` so striping survives in both true dark and hybrid states without hardcoding a specific dark hue. ## Before / After **Light mode** — `tito/modules.qmd` "Environment Health" card | Before | After | |---|---| | <img width="1335" height="779" alt="before titomodules qmd Environment Health card" src="https://github.com/user-attachments/assets/3df152ba-3a9f-4c66-8dd4-32ec2fa3c035" /> | <img width="965" height="690" alt="after titomodules qmd Environment Health card" src="https://github.com/user-attachments/assets/576a922d-9978-47b0-8577-63d919314cdf" /> | **Dark mode** — `tito/overview.qmd` table + headings | Before | After | |---|---| | <img width="968" height="732" alt="before titooverview qmd table + headings" src="https://github.com/user-attachments/assets/79fa02fc-c889-47c9-a7e7-138e16efc230" /> | <img width="964" height="731" alt="after titooverview qmd table + headings" src="https://github.com/user-attachments/assets/c0bc961b-dd6b-4507-815d-64a85deb2dce" /> | **Light Mode** — `tito/data.qmd` code blocks | Before | After | |---|---| | <img width="986" height="548" alt="before data html" src="https://github.com/user-attachments/assets/8d2b9be4-d7ba-4e6e-a8cb-149ac3cebea4" /> | <img width="979" height="556" alt="after data html" src="https://github.com/user-attachments/assets/2e20e5cd-6f85-46be-b161-d001d417f264" /> | Alot of code and blocks that are improved in tito cli module pages, which can be compared with https://mlsysbook.ai/tinytorch/tito/overview.html and local changes. ## Test plan - [ ] `cd tinytorch/quarto && quarto render --to html` succeeds for all 52 pages - [ ] Light mode: `tito/modules.html`, `tito/data.html`, `tito/overview.html`, `tito/troubleshooting.html`, `tito/milestones.html`, `datasets.html`, `resources.html` — all card content (titles, prose, bullets, code blocks) and h3 section headings readable - [ ] Dark mode: same pages — same elements readable on the flipped dark surfaces; tables have visible alternating rows - [ ] Hybrid mode (toggle in-page color scheme button to dark, then DevTools → Rendering → emulate `prefers-color-scheme: light`) — cards stay light-fill but text + code stays dark; tables get dark stripe via the data-bs-theme selector ## Outcome After this merge, all pages under the **tito CLI module** (`tito/overview`, `tito/modules`, `tito/data`, `tito/milestones`, `tito/troubleshooting`, `tito/testing`) are fully readable in every theme state. The remaining inline-styled pages elsewhere in the site continue to benefit from the upstream safety net plus these new force-dark/scoped extensions. --- <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-04-27 17:39:45 -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#8295
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?