Repository navigation
refactor(ui): size each shared component's glyphs itself - #3720
Merged
Merged
Conversation
The desktop's glyph defaults (.settings-icon, .icon-button-glyph, .settings-chevron, .credential-check, and the state glyph's box) were unlayered, so they beat every shared component's own glyph rule and the app had to exclude shared internals with :where(:not(.luke-…)). They now sit in the desktop's base layer, under the components layer, so a component's slot sizes its glyph by its own contract and the defaults reach only the window's own markup. - Delete the :not(.luke-…) exclusions, the dead .link-icon rule, and the app's .luke-menu-item-glyph and .luke-hover-card-* glyph rules. - Menu glyph slots size a picture as they size a glyph. - Hover-card glyph slots size whatever they hold, a face excepted. - Menu and picker end glyphs wear the end's ink. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
charleslpan
enabled auto-merge
October 18, 2026 21:41
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
A face's picture fills its own disc, so the slot no longer reaches through a mark into an Avatar's picture. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This branch was successfully deployed
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.
Phase 4, Q5. Shared components now size their own glyphs. App CSS no longer names
.luke-*internals to size a glyph.The cause
The desktop's glyph defaults were unlayered:
.settings-icon14px,.icon-button-glyph15px,.settings-chevron11px,.credential-check12px green,.link-icon9px, and.state-glyph's box.@luke/ui's ownGlyphsvgs wear these classes. An unlayered rule beats every rule in thecomponentslayer, so it overrode each shared component's glyph rule. That is why #3674 added the:where(:not(.luke-…))exclusions.The fix
@layer base(settings.css,desktop.css,base.css), belowcomponents. A shared component's slot now sizes its glyph by its own rule, and the defaults reach only the window's own markup. I chose this over enumerating every desktop container by selector: these classes sit on dozens of glyphs in dozens of places, and a selector list would miss some.:not(.luke-chip *, .luke-menu-item-end > *, .luke-combobox-option-end > *)and:not(.luke-button-face > *)exclusions;.luke-menu-item-glyph .repository-picture;.luke-hover-card-glyph/-sub/-row-glyph { --state-glyph-size }(scope moved from Q3 to here);.link-icon, which no longer had a bare use (everyExternalIconsits in a Button, IconButton, menu item, or the update pill).@luke/ui:menu.css: the glyph slot sizes animgstanding directly in it as it sizes ansvg, so a repository picture fits without an app rule. A face's picture inside a mark still fills its own disc. The end slot's glyph wears the end's ink.combobox.css: the end slot's glyph wears the end's ink.hover-card.css: the head and row glyph slots size whatever child they hold, aStateGlyphspan included. A face (Avatar, or a mark holding one) keeps its own size.How I checked sizes
I measured every glyph's box, ink, opacity and margin on the Linux fixture, before and after. That covered two sets:
The ones that stay the same: the desktop's own markup, a
StateGlyphin a hover card's head (14px) and rows (16px), app marks in hover-card slots (actor marks, PR marks, attention marks, file icons), and avatar-held state glyphs.Visible changes
Each glyph now takes its component's own size where the app's default used to override it. Every change is cleanup-level:
.icon-button-glyph(15px) or.settings-icon(14px, e.g. ⌘K's task and settings rows) now draw at the menu glyph's 16px, like the lucide glyphs beside them..settings-icon(the Settings sidebar's page icons) go from 14px to the control icon, 15px, as the main sidebar's already are;.settings-iconglyph (e.g. the sidebar's Restart pill) goes from 14 to 15px. A.credential-check(the dictation strip's Finish) goes from 12 to 15px and stays green.CallIconat the empty-state size, 40px, like every other empty state, instead of 15px.0.8eminstead of 11px..settings-iconglyph keeps its 0.85 opacity everywhere.Screenshots (Linux Xvfb,
--fixture smoke, synthetic data, 2×)Not verified on a Mac. The fixture has no hover cards, dictation, call transcript, or connected integration, so I measured those through the slot matrix rather than screenshots.
🤖 Generated with Claude Code