feat(blade): rebranding whitelabel fix

[anuraghazra]

No description provided.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9cb5617

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

[github-actions]

✅ PR title follows Conventional Commits specification.

[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 9cb5617:

Sandbox	Source
razorpay/blade: basic	Configuration

[chaitanyadeorukhkar]

Lets use the primary color on carousel's quotes like we do on master? Right now it always remains blue

[chaitanyadeorukhkar]

Focus ring color is not changing for multiple components like Checkbox, Radio, Accordion, Switch, Chips... can you check this once? I created a common getFocusRingStyles function that uses surface.border.primary.muted which should ideally change as per the white labeled theme

[chaitanyadeorukhkar]

Carousel's button's arrow icons should also follow the primary color, right?

[anuraghazra]

Focus ring color

Now that you mention it, I wonder if we should keep the focus ring color static and not tie it with brand color.

The focus ring is an fundamental accessibility requirement, if brand color becomes very light then focus ring color won't be visible to the user and could cause accessibility issues.

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

[anuraghazra]

Carousel's button's arrow icons should also follow the primary color, right?

Nope, rebranded carousel nav buttons icons are staticBlack.

[anuraghazra]

Lets use the primary color on carousel's quotes like we do on master? Right now it always remains blue

Done.

[chaitanyadeorukhkar]

Focus ring color

Now that you mention it, I wonder if we should keep the focus ring color static and not tie it with brand color.

The focus ring is an fundamental accessibility requirement, if brand color becomes very light then focus ring color won't be visible to the user and could cause accessibility issues.

https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

Hmm. That is fair. I think that we can think about on its own but right now we're using primary color token for the focus ring ideally, it should use the primary color when it changes as well?

[chaitanyadeorukhkar]

Carousel's button's arrow icons should also follow the primary color, right?

Nope, rebranded carousel nav buttons icons are staticBlack.

Why are they blue in this screenshot then? 🤔

[chaitanyadeorukhkar]

@anuraghazra Tests are failing. Mostly looks good to me. Just need to check

1. Focus ring color
2. Carousel's blue button

[anuraghazra]

Why are they blue in this screenshot then? 🤔

Wierd, are you checking the correct chromati link? Because it's not possible for it to be blue.

[chaitanyadeorukhkar]

Why are they blue in this screenshot then? 🤔

Wierd, are you checking the correct chromati link? Because it's not possible for it to be blue.

Might be the wrong link. Checked again. Looks good

[anuraghazra]

Focus ring color

I've standardized all components to use the getFocusRingColor function.