Skip to content

feat(tokens): add zIndex as a global design token#3357

Open
starboyvarun wants to merge 1 commit intorazorpay:masterfrom
starboyvarun:feat/add-zindex-design-tokens
Open

feat(tokens): add zIndex as a global design token#3357
starboyvarun wants to merge 1 commit intorazorpay:masterfrom
starboyvarun:feat/add-zindex-design-tokens

Conversation

@starboyvarun
Copy link
Copy Markdown

Description

Adds zIndex as a first-class global design token in the Blade token system, resolving TODOs that have been present across Popover, Tooltip, and SpotlightPopoverTour components.

Previously, z-index values lived as hardcoded numbers in utils/componentZIndices.ts with a top-level comment // TODO: Move these properly to tokens at some point. Four component files each had their own // TODO: Tokenize zIndex values comment. This PR resolves all of them.

Changes

  • New: packages/blade/src/tokens/global/zIndex.ts — defines semantic z-index layers (hide, base, sticky, overlay, drawer, dropdown, popover) with JSDoc comments, following the same pattern as spacing.ts and motion.ts
  • Updated: tokens/global/index.ts — exports the new ZIndex type and zIndex constant alongside all other global tokens
  • Updated: tokens/theme/theme.ts — adds zIndex: ZIndex to ThemeTokens, making it overridable via createTheme()
  • Updated: tokens/theme/bladeTheme.ts — includes zIndex in the default Blade theme object
  • Updated: utils/componentZIndices.ts — removes hardcoded numbers, now reads from the zIndex token (fully backward-compatible; no existing imports need to change)
  • Removed 4 resolved // TODO: Tokenize zIndex values comments from Popover.web.tsx, Popover.native.tsx, TourPopover.web.tsx, Tooltip.native.tsx

Additional Information

The values are completely unchanged — this is a pure architectural refactor. All existing component imports of componentZIndices continue to work without any modification.

After this change, consumers who need custom z-index layering (e.g. white-label integrations) can override via createTheme({ zIndex: { popover: 2000 } }).

Component Checklist

  • Update Component Status Page — N/A (token-only change, no new component)
  • Perform Manual Testing in Other Browsers — N/A (no visual change, values are identical)
  • Add KitchenSink Story — N/A
  • Add Interaction Tests — N/A
  • Add changeset

- Add zIndex.ts to src/tokens/global/ with semantic layer names
  (hide, base, sticky, overlay, drawer, dropdown, popover)
- Export ZIndex type from global token index
- Add zIndex field to ThemeTokens type so it is overridable via createTheme()
- Add zIndex to bladeTheme default token values
- Update componentZIndices utility to reference token values instead of hardcoded numbers
- Remove resolved TODO: Tokenize zIndex values comments from Popover, TourPopover, Tooltip
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented Apr 28, 2026

🦋 Changeset detected

Latest commit: 3021d8e

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

This PR includes changesets to release 1 package
Name Type
@razorpay/blade Patch

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

✅ PR title follows Conventional Commits specification.

@codesandbox-ci
Copy link
Copy Markdown

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 3021d8e:

Sandbox Source
razorpay/blade: basic Configuration

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