Unify chips into a 3-class system; drop tags from blog rows - #9
Merged
Conversation
Replace 11 ad-hoc chip/pill/tag treatments with one primitive: - .chip (normal pill) and .chip--sm (thin mono-uppercase) - modifiers: .chip--interactive (accent hover + .is-active), state colors .chip--live / .chip--beta / .chip--soon, .chip__count badge - .hashtag for borderless inline #tags Migrated: homepage recent cards, topic tabs, and tool cards; blog filter; blog/topic/tag rows; tag cloud; blog byline; playground grid status + tool detail; search dialog chips. Removed the two colliding .tool-tag definitions and dead per-status rules. Interactive chips now share one accent hover/active behaviour everywhere. Blog list rows show only the topic pill; #tags removed (kept on the article page and /tags where they aid navigation, not list scanning). Calculator segmented controls keep .filter-chip (a tool control, not a content tag) and stay out of the chip vocabulary.
Deploying mlsystems with
|
| Latest commit: |
d47bb47
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7acdc418.mlsystems.pages.dev |
| Branch Preview URL: | https://feature-chip-system.mlsystems.pages.dev |
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
1 participant
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.
Collapses 11 ad-hoc chip/pill/tag treatments into a single primitive so a chip looks and behaves the same everywhere — change it once, it changes site-wide. Build + type-check pass; verified in the browser on home, blog, tags, blog post, search dialog (light + dark), playground grid, and a tool detail page.
The system (3 classes, well under the "max 4")
.chip— normal pill (topic tabs, blog filter, tag cloud, search dialog).chip--sm— thin mono-uppercase pill (topic-on-row, byline, tool tags/status).hashtag— borderless inline#tagModifiers compose onto either shape:
.chip--interactive— accent (blue) hover +.is-activeaccent fill. Configurable: add it only where a chip should react. Unifies the blog filter (was a black fill), topic tabs, tag cloud, and the search dialog into one hover/active behaviour..chip--live/.chip--beta/.chip--soon.chip__count— the trailing count badgeProduct change: tags removed from blog list rows
Blog rows now show only the topic pill. The
#tagsare gone from the archive/topic/tag list rows — they're a search/discovery mechanism (they power/tagsand SEO), not a browsing signal, and standard editorial lists show one category per row. Tags are kept on the article page byline and the/tagsindex, where they aid navigation rather than clutter scanning.Cleanup
.tool-tagdefinitions (a plain-text one and a pill one shared the same name)..tool-card-status/.tag-cloud-item/.blog-row-*/.article-topicCSS..search-empty aso it no longer overrides chip colour (chips were rendering accent-by-default in the dialog's empty state).Intentionally left alone
The calculator segmented controls (
.filter-chip) and the Playground showcase status labels (.playground-tool-tag) are tool controls, not content tags, so they stay out of the chip vocabulary.Best judged on the Cloudflare preview — check the blog archive rows (no more tag pile), the topic tabs, and the search dialog in both themes.