Skip to content

style: white outline button and capsule tabs fill - #588

Draft
ishigakijunichi wants to merge 1 commit into
tailor-platform:mainfrom
ishigakijunichi:style/outline-button-and-tabs-fill
Draft

ishigakijunichi wants to merge 1 commit into
tailor-platform:mainfrom
ishigakijunichi:style/outline-button-and-tabs-fill

Conversation

@ishigakijunichi

@ishigakijunichi ishigakijunichi commented Oct 8, 2026 •

Copy link
Copy Markdown

Summary

  • Button outline: transparent background (like Input) instead of --background (#FAFAFA, slightly gray), and no shadow. In the cream and bloom themes 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 own hover:bg-accent).
  • Tabs 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 lighter bg-input/60 in dark mode) instead of the tinted bg-primary/10. The default tabs variant is unchanged.

The shadow removal for secondary and the form controls is in a separate PR (#587).

Why

  • Outline buttons look grayed out on white surfaces. outline used --background (#FAFAFA). When a button is placed on a white surface such as bg-card, only the button turns slightly gray, which looks inconsistent and can make it look as if it is being hovered.
  • Mismatch next to form controls. Inputs and date pickers are transparent (white on a card), so an outline button placed beside them looks visibly different in tone. That small difference lowers the perceived design quality of forms and toolbars. Making the button transparent too means it always matches the surface and the controls around it. The shadow is removed in the same PR so the button reads as flat as the inputs next to it.
  • Capsule Tabs follow the same reasoning. The active tab should read as a lighter "raised" pill on the track, independent of the theme colour. The previous tinted bg-primary/10 changed with the theme. The track is now translucent black instead of the fixed --background gray, 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 run in packages/core — snapshots updated; the only failures are the 17 pre-existing data-table localStorage tests, which fail identically on main
  • Checked /showcase/primitives in light and dark
  • Changeset added (patch)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@ishigakijunichi
ishigakijunichi force-pushed the style/outline-button-and-tabs-fill branch from 0bf78f3 to 518336d Compare October 9, 2026 00:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant