[PR #1557] [MERGED] fix(tinytorch/ux): coverage for accent text + light-gradient panels #8265

New Issue

GiteaMirror · 2026-04-27T17:37:33-05:00

GiteaMirror commented

2026-04-27 17:37:33 -05:00

📋 Pull Request Information

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

Base: dev ← Head: fix/tinytorch-dark-mode-accent-text-colors

📝 Commits (1)

2b475f0 fix(tinytorch/ux): dark-mode coverage for accent text + light-gradient panels

📊 Changes

1 file changed (+20 additions, -0 deletions)

View changed files

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

📄 Description

Background

Two narrow extensions to the inline-style safety net in dark-mode.scss. Found while QA'ing the tito reference pages and resources.html in dark mode after the previous round of fixes.

Changes

tinytorch/quarto/assets/styles/dark-mode.scss (one file, +20 lines):

Saturated 700-shade accent text colours used inline on h4 section headers across tito/data.qmd, tito/modules.qmd, tito/overview.qmd were failing WCAG AA on the #2d2d2d card surface (~2–3.5:1 contrast). Flip each to a 400-shade variant of the same hue so semantic colour coding (blue / purple / green / amber sections) survives instead of being flattened to slate:

Before	After	Used by
`#1976d2` blue-700	`#60a5fa` blue-400	tito/data, tito/modules, tito/overview
`#7b1fa2` purple-700	`#c084fc` purple-400	tito/data, tito/modules, tito/overview
`#15803d` green-700	`#4ade80` green-400	tito/modules
`#d97706` amber-600	`#fbbf24` amber-400	tito/modules, tito/overview

Light-gradient panels weren't being caught by the existing [style*="background: #X"] selectors because the linear-gradient( prefix breaks substring matching. Add a selector that matches the gradient prefix and flips the soft-blue gradient on resources.qmd:13 to the same #2d2d2d surface as solid-fill panels.

Test plan

cd tinytorch/quarto && quarto render --to html succeeds for all 52 pages
Dark mode visual check on tito/modules.html — h4 section headers (Check Environment, Start Module, Resume Work, Export & Complete, Check Progress) keep their semantic blue / purple / green / amber tint but in lightened form, readable on #2d2d2d
Same check on tito/overview.html and tito/data.html
resources.html in dark mode — formerly soft-blue gradient panel now renders as #2d2d2d card with readable text
Light mode unchanged — dark-mode.scss is loaded only in dark mode per _quarto.yml:251-254

_{🔄 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/1557 **Author:** [@farhan523](https://github.com/farhan523) **Created:** 4/26/2026 **Status:** ✅ Merged **Merged:** 4/26/2026 **Merged by:** [@profvjreddi](https://github.com/profvjreddi) **Base:** `dev` ← **Head:** `fix/tinytorch-dark-mode-accent-text-colors` --- ### 📝 Commits (1) - [`2b475f0`](https://github.com/harvard-edge/cs249r_book/commit/2b475f08fb318b1cbf7e29d632485893fc7ff771) fix(tinytorch/ux): dark-mode coverage for accent text + light-gradient panels ### 📊 Changes **1 file changed** (+20 additions, -0 deletions) <details> <summary>View changed files</summary> 📝 `tinytorch/quarto/assets/styles/dark-mode.scss` (+20 -0) </details> ### 📄 Description ## Background Two narrow extensions to the inline-style safety net in `dark-mode.scss`. Found while QA'ing the tito reference pages and `resources.html` in dark mode after the previous round of fixes. ## Changes **`tinytorch/quarto/assets/styles/dark-mode.scss`** (one file, +20 lines): 1. **Saturated 700-shade accent text colours** used inline on h4 section headers across `tito/data.qmd`, `tito/modules.qmd`, `tito/overview.qmd` were failing WCAG AA on the `#2d2d2d` card surface (~2–3.5:1 contrast). Flip each to a 400-shade variant of the same hue so semantic colour coding (blue / purple / green / amber sections) survives instead of being flattened to slate: | Before | After | Used by | |---|---|---| | `#1976d2` blue-700 | `#60a5fa` blue-400 | tito/data, tito/modules, tito/overview | | `#7b1fa2` purple-700 | `#c084fc` purple-400 | tito/data, tito/modules, tito/overview | | `#15803d` green-700 | `#4ade80` green-400 | tito/modules | | `#d97706` amber-600 | `#fbbf24` amber-400 | tito/modules, tito/overview | 2. **Light-gradient panels** weren't being caught by the existing `[style*="background: #X"]` selectors because the `linear-gradient(` prefix breaks substring matching. Add a selector that matches the gradient prefix and flips the soft-blue gradient on `resources.qmd:13` to the same `#2d2d2d` surface as solid-fill panels. ## Test plan - [ ] `cd tinytorch/quarto && quarto render --to html` succeeds for all 52 pages - [ ] Dark mode visual check on `tito/modules.html` — h4 section headers (Check Environment, Start Module, Resume Work, Export & Complete, Check Progress) keep their semantic blue / purple / green / amber tint but in lightened form, readable on `#2d2d2d` - [ ] Same check on `tito/overview.html` and `tito/data.html` - [ ] `resources.html` in dark mode — formerly soft-blue gradient panel now renders as `#2d2d2d` card with readable text - [ ] Light mode unchanged — `dark-mode.scss` is loaded only in dark mode per `_quarto.yml:251-254` --- <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:37:33 -05:00

GiteaMirror closed this issue

2026-04-27 17:37:37 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/cs249r_book#8265