fix: match outlined chips' text and close icon to the Chips design by ChristopherChudzicki · Pull Request #279 · mitodl/smoot-design

ChristopherChudzicki · 2026-10-21T20:14:55Z

What are the relevant tickets?

N/A

Description (What does it do?)

Brings the outlined and outlinedWhite chips in line with the design system's Chips component:

Text is darkGray2 at rest and on hover, where it was darkGray1. All 16 Outline and Outline-White variants in the Figma set use Dark Gray 2.
The close icon sits 4px from the label, with the chip 4px narrower on that side (16/12px at large, 12/8px at the default size). It was 8px, with 14px (large) or 10px (medium) after the icon.

This brings smoot in line with Figma rather than changing the design. The page designs that use these chips keep the component's Dark Gray 2 rather than overriding it:

The program page's label is a plain Outline-White large instance; it overrides only the font weight (Subtitle S2, which mit-learn already applies with sx), not the colour.
The topics listing's sub-topic chips are Outline-White large instances with no overrides.

Implementation details

Four color values in the two variants' rest and :hover rules, plus one deleteIcon margin (0 -2px 0 8px → 0 -4px 0 4px).
The colour reaches every outlined/outlinedWhite chip that doesn't set its own text colour. The margin reaches only chips with onDelete, which no mit-learn page uses today.

Screenshots (if appropriate):

mit-learn, before (6.38.0) and after (this branch, built locally):

/topics/ sub-topic chips, desktop

/topics/ sub-topic chips, mobile

Program page label

How can this be tested?

smoot has no Chip stories, so this is checked in mit-learn with this build installed:

/topics/: the sub-topic chips' text is darker than on 6.38.0, at rest and on hover, at desktop and mobile widths.
A program page, e.g. /programs/program-v1:MITxT+SCM: the label chip above the title is darker.

Agent-Run Checks

yarn typecheck, eslint and the repo's prek hooks pass.
mit-learn, computed styles before and after, at 1440px and 390px: /topics/ sub-topic chips (8 of 8) and the program page label (1 of 1) go from rgb(64, 70, 76) to rgb(33, 35, 38), at rest and on hover; borders, fills and sizes unchanged.
mit-learn, contract admin page's status badges: 0 style or pixel changes (they set their own colours).

Additional Context

On its own, this also darkens the hover text of mit-learn's homepage trending chips: smoot's outlined hover colour wins over the one they set themselves. They're a separate design (Figma's TrendingPill), so Bump smoot-design for the outlined chip fix, keeping the homepage trending chips unchanged mit-learn#4136 (draft) pins them to today's colour and carries the bump.
The design's × looks grey rather than the text colour; I couldn't pin its exact value, so it still inherits the text colour here.

🤖 Co-authored with Claude Code

The design system's Chips component draws every Outline and Outline-White variant with Dark Gray 2 text, at rest and on hover, and sets the close icon 4px from the label with the chip's padding 4px narrower on that side (16/12 at large, 12/8 at the default size). The theme drew Dark Gray 1 text and an 8px gap with 14px (large) or 10px (medium) of padding after the icon. The colour change reaches every outlined and outlinedWhite chip that does not set its own text colour. The margin change reaches only chips with onDelete. Figma: MIT Design System, Chips (node 692:4835). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

agent-optibot

Summary

Refines chip styling by balancing delete-icon spacing and using a lighter dark-gray text color across outlined and filled chips.

Key Changes

Adjusts delete-icon margins to maintain consistent four-pixel label spacing.
Updates outlined and filled chip text and hover colors to darkGray2.

All Relevant File Changes (click to expand)

src/components/ThemeProvider/chips.tsx: Refines delete-icon spacing and updates chip text color styling.

💬 Feedback & Commands

Share feedback on my comments with 👍 👎 — I'll stop raising issues you push back on. Think I missed something? Adjust my sensitivity →

5 things I can do →

#optibot review — I'll re-review your latest changes (incremental)
#optibot full review — I'll re-review the entire PR from scratch
#optibot fix — I'll apply my suggested fixes to your code
#optibot compliance — I'll run a compliance check on your changes
#optibot release notes — I'll write up release notes for your production release

💡 Tip: I can audit every dependency change before it reaches main — one compromised package can take down your entire system. Try Supply Chain Agent.

agent-optibot

Status: Code Looks Good 👍

No blocking issues found.

📌 Reviewed up to the latest commit · ⏱️ Review completed in 1 minute

🔄 re-review this PR

github-actions · 2026-10-21T20:26:30Z

Pre-release workflow has completed successfully.
Published version: 0.0.0-8f8796b

To update a previously-installed version with yarn:

yarn up @mitodl/smoot-design@0.0.0-8f8796b

ahtesham-quraish

LGTM!

github-actions · 2026-10-23T13:25:52Z

🎉 This PR is included in version 6.39.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

6.39.1 carries mitodl/smoot-design#279: outlined and outlinedWhite chips draw Dark Gray 2 text, and the close icon sits 4px from the label. It also brings #263 (FeedbackDrawer) and #274 (ContactUsLauncher, plus an AiChat input whose accessible name follows a placeholder when one is passed); mit-learn uses neither FeedbackDrawer nor ContactUsLauncher, and passes AiChat no placeholder. ol-components declares smoot as an exact-version peer, so it moves with main. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

6.39.1 is 6.39.0 plus mitodl/smoot-design#279 and nothing else: outlined and outlinedWhite chips draw Dark Gray 2 text, and the close icon sits 4px from the label. ol-components declares smoot as an exact-version peer, so it moves with main. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

…nding chips unchanged (#4136) * Pin the homepage trending chips' hover text to the colour they render On smoot 6.38.0 the hover text on the homepage's trending chips is smoot's outlined/outlinedWhite hover colour, Dark Gray 1: smoot's `.MuiChip-clickable:hover` rule (specificity 0,3,0) outranks TrendingChip's `&:hover` (0,2,0), which is also why its background and border overrides need `!important`. The Dark Gray 2 that TrendingChip declared for outlinedWhite never applied, and Explore All (outlined) declared none. smoot's chips are moving to Dark Gray 2 to match the design system's Chips component, but the homepage's trending pills are a separate design. Setting Dark Gray 1 here with `!important` keeps them as they are on either smoot. Measured on local dev against both smoot 6.38.0 and a build with the chip change: every computed colour, border, background, padding and font on all six chips, at rest and on hover, is identical to today. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> * Bump smoot-design to 6.39.1 for the outlined chip fix 6.39.1 is 6.39.0 plus mitodl/smoot-design#279 and nothing else: outlined and outlinedWhite chips draw Dark Gray 2 text, and the close icon sits 4px from the label. ol-components declares smoot as an exact-version peer, so it moves with main. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

agent-optibot Bot reviewed Oct 21, 2026

View reviewed changes

This was referenced Oct 21, 2026

Bump smoot-design for the outlined chip fix, keeping the homepage trending chips unchanged mitodl/mit-learn#4136

Merged

Channel page redesign: filter counts, the search card, the tab row, an empty state, and a white topic hero mitodl/mit-learn#4133

Merged

ahtesham-quraish self-assigned this Oct 23, 2026

ahtesham-quraish added the Needs Review An open Pull Request that is ready for review label Oct 23, 2026

ahtesham-quraish approved these changes Oct 23, 2026

View reviewed changes

ChristopherChudzicki merged commit c18f699 into main Oct 23, 2026
11 checks passed

ChristopherChudzicki deleted the cc/chip-outlined-match-figma branch October 23, 2026 13:13

github-actions Bot added the released label Oct 23, 2026

Navigation Menu

Repository navigation

fix: match outlined chips' text and close icon to the Chips design - #279

fix: match outlined chips' text and close icon to the Chips design#279
ChristopherChudzicki merged 1 commit into
mainfrom
cc/chip-outlined-match-figma

ChristopherChudzicki commented Oct 21, 2026 •

edited

Loading

Uh oh!

agent-optibot Bot left a comment

Uh oh!

agent-optibot Bot left a comment

Uh oh!

github-actions Bot commented Oct 21, 2026

Uh oh!

ahtesham-quraish left a comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 23, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

ChristopherChudzicki commented Oct 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Screenshots (if appropriate):

How can this be tested?

Agent-Run Checks

Additional Context

Uh oh!

agent-optibot Bot left a comment

Choose a reason for hiding this comment

Summary

Key Changes

Uh oh!

agent-optibot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 21, 2026

Uh oh!

ahtesham-quraish left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 23, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ChristopherChudzicki commented Oct 21, 2026 •

edited

Loading