Use the green token instead of a hardcoded hex on product pages - #3847
Open
ChristopherChudzicki wants to merge 2 commits into
Open
Use the green token instead of a hardcoded hex on product pages#3847ChristopherChudzicki wants to merge 2 commits into
ChristopherChudzicki wants to merge 2 commits into
Conversation
OpenAPI ChangesNo changes detected Unexpected changes? Ensure your branch is up-to-date with |
Contributor
There was a problem hiding this comment.
Pull request overview
Replaces hardcoded green values with the shared design token and temporarily updates smoot-design.
Changes:
- Uses
theme.custom.colors.greenfor savings and financial-aid text. - Pins smoot-design to a prerelease requiring replacement before merge.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
CertificateTrackCard.tsx |
Uses the green theme token. |
ProgramSavingsBlock.tsx |
Uses the green theme token. |
frontends/main/package.json |
Pins the prerelease dependency. |
frontends/ol-components/package.json |
Updates the peer dependency. |
yarn.lock |
Locks the prerelease version. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| "@mitodl/hacksnack": "^0.1.2", | ||
| "@mitodl/mitxonline-api-axios": "2026.8.18", | ||
| "@mitodl/smoot-design": "6.33.1", | ||
| "@mitodl/smoot-design": "0.0.0-cf492ea", |
| }, | ||
| "peerDependencies": { | ||
| "@mitodl/smoot-design": "6.33.1", | ||
| "@mitodl/smoot-design": "0.0.0-cf492ea", |
ChristopherChudzicki
force-pushed
the
cc/13051-theme-green
branch
from
August 27, 2026 16:09
7d46444 to
e2db445
Compare
ChristopherChudzicki
added
the
Needs Review
Two product-page spots hardcoded #008000 because the `green` token was #00AD00, which fails WCAG AA as text on a white card. smoot-design now ships #008000 as `green`, so both can use the token: - `CertificateTrackCard`: the approved financial-aid link. Drops the APPROVED_GREEN constant and reads the token off the styled callback's theme, along with the comment paragraph that justified the raw hex. - `ProgramSavingsBlock`: the "Save $X" text. Part of mitodl/hq#13051. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
6.33.4 is the first release carrying the green token change from mitodl/smoot-design#255 (#00AD00 -> #008000), which the product-page checkmarks read via theme.custom.colors.green. Note this also carries everything else between 6.33.1 and 6.33.4. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
ChristopherChudzicki
force-pushed
the
cc/13051-theme-green
branch
from
August 28, 2026 20:50
e2db445 to
6ab5148
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What are the relevant tickets?
https://github.com/mitodl/hq/issues/13051 — Learn half. Smoot side: mitodl/smoot-design#255
Description (What does it do?)
Now that smoot's
greentoken is#008000, the two product-page spots that hardcoded that hex can use the token instead. Also pins@mitodl/smoot-designto the pre-release off #255 so the swap is visible in review.CertificateTrackCard.tsx: the approved financial-aid link. DropsAPPROVED_GREENand the comment paragraph that justified it, and reads the token off the styled callback's theme.ProgramSavingsBlock.tsx: the "Save $X" text.frontends/{main,ol-components}/package.json+yarn.lock:6.33.1→0.0.0-cf492ea.Two things worth knowing before merging:
0.0.0-cf492eais a pre-release. Re-pin to the semantic release once Disallow blank values in some LearningResource auxillary model fields: #255 merges. It also carries everything between6.33.1and smoot main, not just the green.#008000and look identical after. What darkens is everywhere Learn already used the token:TrackCard,WhatYoullLearnSectioncheckmarks,ReceiptOrderSummary,CourseEnrollmentDialog,ContractAdminPage/RowActionMenu, plus Alertsuccessand the feedback drawer 👍 from smoot itself.Screenshots (if appropriate):
example before/after:
How can this be tested?
Don't bother. But if you really want to:
Product pages are the densest place to see it. On a course page with financial aid available and a program page with a savings line:
Nothing should look different in kind anywhere — no washed-out or mismatched greens, and no green next to a different green.
yarn typecheckandyarn lint-checkpass;main(209 suites / 2659 tests) andol-components(22 / 193) pass against the pre-release.