feat(webkit): sync Global Header structure and chrome with updated Figma#661
Merged
Conversation
Match the Webkit GlobalHeader design (node 4310:19617): symmetric horizontal padding (--spacing-md both sides), --spacing-md shell gap, and the canonical --border-default bottom border. Adjust start/end region gaps (--spacing-xs / --spacing-sm) to the Figma values. Update the spec's Figma reference, Purpose, and Tokens table accordingly.
Mirror the Figma GlobalHeader structure (node 4310:19617) without breaking changes. Add GlobalHeader.Container, a shrink-0 flex wrapper that groups the menu trigger and brand as the Figma "Container" region, and expose the center region under its Figma name via GlobalHeader.Nav as an alias of the existing Middle (Middle is retained). Both additions are purely additive: no export path, prop, event, or slot changes, and existing compositions render identically.
gab-az
force-pushed
the
feat/global-header-figma-structure
branch
from
e754172 to
f53cf33
Compare
robsongajunior
approved these changes
Jun 26, 2026
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
3 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.
Summary
Syncs the Global Header component with the updated Webkit Figma design (node
4310:19617) in two non-breaking steps. Region parity with Figma is now 1:1.Commits
fix(webkit): align Global Header chrome with updated FigmaVisual/token alignment of the existing implementation:
--spacing-mdboth sides; waspl-md/pr-xxl).--spacing-md.--border-default(the old--border-mutedisn't in the theme's border set).--spacing-xs/--spacing-smper Figma.feat(webkit): add Global Header Container region and Nav aliasStructural refactor, fully additive:
GlobalHeader.Container— ashrink-0flex wrapper that groups the menu trigger + brand, mirroring the FigmaContainerregion.GlobalHeader.Nav— the Figma name for the center region, exposed as an alias of the existingMiddle(Middleretained).Region parity (Figma ↔ code)
ContainerGlobalHeader.Container(new)LeftGlobalHeader.LeftBrandGlobalHeader.BrandNavGlobalHeader.Nav(alias;.Middlekept)RightGlobalHeader.RightNon-breaking guarantees
./layout/global-headercompound export).defineOptions.namechanges.Containeris opt-in — existing compositions placingLeft/Branddirectly in the root render identically.Verification
lint-staged(eslint--fix+ prettier) passed on both commits.vue-tsc --noEmit: zero errors in global-header (pre-existing unrelated errors indata/tableandnavigation-menuonly).🤖 Generated with Claude Code