Skip to content

v6: Restyle Tooltip#4278

Merged
trevor-scheer merged 2 commits into
graphiql-6from
trevor/restyle-tooltip
May 15, 2026
Merged

v6: Restyle Tooltip#4278
trevor-scheer merged 2 commits into
graphiql-6from
trevor/restyle-tooltip

Conversation

@trevor-scheer
Copy link
Copy Markdown
Contributor

@trevor-scheer trevor-scheer commented May 15, 2026

Summary

  • Migrate Tooltip CSS to v6 OKLCH tokens (--bg-elevated, --border-default, --fg-default).
  • Add --shadow-popover to tokens.css (dark + light variants) and use it in Tooltip. Future Dialog and DropdownMenu PRs reuse this token.
  • Pin tooltip font-size to --font-size-small (11px) rather than inherit: tooltips are floating UI primitives and should render at a consistent size regardless of where they're anchored.
  • Add Storybook stories: Primitives/Tooltip (Default + TopPlacement).

Test plan

  • Open Storybook Primitives/Tooltip and verify both Default and TopPlacement render correctly.
  • Toggle to light theme (system preference or set data-theme="light" on the Storybook root). Shadow should soften for the lighter surface.
  • Hover any toolbar button in the example app. Tooltip should match the design.

Refs: #4219

Updates tooltip styles to consume v6 OKLCH tokens. Adds a
`--shadow-popover` token to tokens.css so future popover-family
components share the same shadow recipe.
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 15, 2026

🦋 Changeset detected

Latest commit: e75ac0d

The changes in this PR will be included in the next version bump.

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

@github-actions
Copy link
Copy Markdown
Contributor

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

@trevor-scheer trevor-scheer marked this pull request as ready for review May 15, 2026 06:12
@trevor-scheer trevor-scheer merged commit 34695e8 into graphiql-6 May 15, 2026
13 checks passed
@trevor-scheer trevor-scheer deleted the trevor/restyle-tooltip branch May 15, 2026 06:12
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