refactor(ui): style interactive avatars in Avatar itself - #9413
Merged
alexcarpenter merged 1 commit intoAug 12, 2026
Merged
Conversation
Apply an `interactive` StyleX style when `Avatar.Root` composes onto another element, instead of relying on the Mosaic Button. Drops the `--cl-color-avatar-icon` token and updates the pen glyph to the 16px grid.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 28bb829 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
alexcarpenter
commented
Aug 12, 2026
Comment on lines
+99
to
103
| d='M12.03 3.972a1.59 1.59 0 0 0-2.261 0l-.01.01-5.056 4.89a1.25 1.25 0 0 0-.351.627l-.61 2.747 2.542-.598a1.25 1.25 0 0 0 .59-.325L12.085 6.2c.573-.638.549-1.62-.057-2.228M8.71 2.909a3.09 3.09 0 0 1 4.383.005 3.126 3.126 0 0 1 .06 4.341l-5.228 5.138a2.75 2.75 0 0 1-1.298.715l-3.705.872a.75.75 0 0 1-.904-.893l.87-3.914a2.75 2.75 0 0 1 .772-1.38z' | ||
| fill='currentColor' | ||
| fillRule='evenodd' | ||
| clipRule='evenodd' | ||
| />, |
Member
Author
There was a problem hiding this comment.
this icon is not the same as what we were pulling from causing issues. we shouldn't need to specify a viewBox override to get things to align. will need to get a fix from design.
alexcarpenter
commented
Aug 12, 2026
|
|
||
| '--cl-color-card': 'light-dark(oklch(1 0 0), oklch(0.205 0 0))', | ||
| '--cl-color-card-foreground': 'light-dark(oklch(0.145 0 0), oklch(0.985 0 0))', | ||
| '--cl-color-avatar-icon': 'light-dark(oklch(0.145 0 0), oklch(0.985 0 0))', |
Member
Author
There was a problem hiding this comment.
Lets avoid adding to many specific vars like this.
austincalvelage
approved these changes
Aug 12, 2026
alexcarpenter
merged commit Aug 12, 2026
926c92a
into
austin/user-profile-03-avatar-button
11 checks passed
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
2 participants
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.
Description
Stacked on #9378.
Avatar.Rootnow owns its interactive appearance instead of borrowing it from the MosaicButton. When arenderprop composes the root onto another element, the root applies aninteractiveStyleX style: no border, pointer cursor (not-allowedwhen disabled), and afocus-visibleoutline. The:is(button)selectors that patched the border and min-size aroundButtonare gone, and demos compose onto a plain<button>.Also removes the
--cl-color-avatar-icontoken (the icon slot inherits its color) and replaces the pen glyph with a 16px-grid path, so it no longer needs aviewBoxoverride.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change