Repository navigation
style: white outline button and capsule tabs fill - #588
Draft
ishigakijunichi wants to merge 1 commit into
Draft
ishigakijunichi wants to merge 1 commit into
ishigakijunichi wants to merge 1 commit into
Conversation
3 tasks done
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
ishigakijunichi
force-pushed
the
style/outline-button-and-tabs-fill
branch
from
October 9, 2026 00:25
0bf78f3 to
518336d
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.
Summary
outline: transparent background (like Input) instead of--background(#FAFAFA, slightly gray), and no shadow. In thecreamandbloomthemes the outline button was already forced to transparent by a theme override; that override is no longer needed and is removed (the hover colour comes from the button's ownhover:bg-accent).capsule: the track is now a translucent black (bg-black/5) instead of the fixed--background, and the active tab uses--card(white in light mode, a slightly lighterbg-input/60in dark mode) instead of the tintedbg-primary/10. Thedefaulttabs variant is unchanged.The shadow removal for
secondaryand the form controls is in a separate PR (#587).Why
outlineused--background(#FAFAFA). When a button is placed on a white surface such asbg-card, only the button turns slightly gray, which looks inconsistent and can make it look as if it is being hovered.bg-primary/10changed with the theme. The track is now translucent black instead of the fixed--backgroundgray, so it stays a subtle darker tone on whatever surface it sits on.Before / After
Screenshots are from the showcase app with the default theme.
button
Light
Dark
tabs
Light
Dark
Test plan
pnpm vitest runinpackages/core— snapshots updated; the only failures are the 17 pre-existingdata-tablelocalStorage tests, which fail identically onmain/showcase/primitivesin light and dark