Skip to content

[@mantine/core] Stepper: fix separator color #7795

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 8, 2025

Conversation

gdostie
Copy link
Contributor

@gdostie gdostie commented May 7, 2025

Hello 👋 I noticed that the Stepper separator had a different color between horizontal and vertical orientations. For instance you can see this on the docs website:

Vertical Horizontal
image image
mantine-color-gray-1 mantine-color-gray-2

While looking at the code I saw some dead code so I figured I would open a PR with a small cleanup. Here's a summary of what I did:

  • getStyles('separator') is only every applied when orientation === 'horizontal' so the whole rule for .separator &:where([data-orientation='vertical']) can be deleted.
  • defined --stepper-outline-color variable to make sure both orientations use the same color for the separator.
    • I chose the one that was previously applied for horizontal orientation (gray 2), let me know if that works for you.
    • I also apply this color to the non completed step background since it was the same for vertical, but I am unsure if it is ok (looks okay to me, but can revert if needed).
  • defined a --stepper-outline-thickness variable for ease of customization

Here is a before and after

Before After
image image
image image
image image
image image

@rtivital rtivital changed the base branch from master to v7 May 8, 2025 06:40
@rtivital rtivital changed the base branch from v7 to master May 8, 2025 06:44
@rtivital rtivital merged commit a747b6f into mantinedev:master May 8, 2025
1 check passed
@rtivital
Copy link
Member

rtivital commented May 8, 2025

Thanks!

rtivital pushed a commit that referenced this pull request May 8, 2025
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.

2 participants