refactor: rebrand SpotlightPopoverTour

[snitin315]

• No breaking changes.

[changeset-bot]

⚠️ No Changeset found

Latest commit: db76400

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[codesandbox-ci]

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 db76400:

Sandbox	Source
razorpay/blade: basic	Configuration

[github-actions]

✅ PR title follows Conventional Commits specification.

[kamleshchandnani]

why are we using interactive color on a box? should be surface right?

[snitin315]

Hmm, this value is mapped in the codemod. I think we should update this with surface.border.gray.muted.

blade/packages/blade/codemods/brand-refresh/transformers/colorTokensMapping.json

Line 45 in b0e37d8

"brand.gray.400.lowContrast": "interactive.border.gray.faded",

interactive.border.gray.faded & surface.border.gray.muted have the same value.

blade/packages/blade/src/tokens/theme/bladeTheme.ts

Line 39 in b0e37d8

muted: globalColors.neutral.blueGrayLight.a100,

blade/packages/blade/src/tokens/theme/bladeTheme.ts

Line 300 in b0e37d8

faded: globalColors.neutral.blueGrayLight.a100,

[anuraghazra]

@snitin315 put this on a TODO somewhere, we will take this up as a separate PR.
Let's merge this component. This is just an example file.

// cc @kamleshchandnani

[kamleshchandnani]

why separate PR? one line change hai lets do it?

[anuraghazra]

Are we sure about this token? We are setting border color in backgroundColor.

And I'm not sure we should also map this to border on the colorMapping.json file - since we don't know if it's being used as border/background or surface.

[snitin315]

This was previously discussed in #1883 (comment)

So currently, we migrate every token to surface tokens by default via the colorMapping.json , then we try to update these tokens contextually based on usage wherever possible.

blade/packages/blade/codemods/brand-refresh/transformers/index.ts

Line 113 in 40dd304

// Update color token value based on the context

blade/packages/blade/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts

Line 38 in 40dd304

it('should update token values contextually', async () => {

However, the issue with brand.gray.* tokens is that not all the tokens have their equivalent in surface tokens. hence we have them mapped to border.*. So we need designers inputs here.

@kamleshchandnani @anuraghazra