Skip to content

Commit 1400a76

Browse files
authored
Reduce stepper track size from 0.25rem to 0.125rem
This further relaxes the component by taking away the attention from the track itself, allowing bubbles and text to be more easily readable at a glance without feeling overcrowded. The industry standard is 1px or 2px at max. As a result, the stepper tracker has been reduced to down to `2px` from `4px` For reference: - Tailwind UI practices `2px` width: https://tailwindcss.com/plus/ui-blocks/application-ui/navigation/progress-bars#component-4b1efed043d1ab5688c705f2e27524f3 - Material UI practices `1px` width: https://material.angular.dev/components/stepper/overview - Preline UI practices `1px` width: https://preline.co/docs/stepper.html - Flowbite UI practices `1px` width: https://flowbite.com/docs/components/stepper/ - ReUI practices `1px` width: https://reui.io/patterns/stepper
1 parent 8ad8613 commit 1400a76

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

scss/_stepper.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ $stepper-tokens: defaults(
1515
--stepper-gap: 1rem,
1616
--stepper-font-size: var(--font-size-sm),
1717
--stepper-bg: var(--bg-2),
18-
--stepper-track-size: .25rem,
18+
--stepper-track-size: .125rem,
1919
--stepper-active-color: var(--primary-contrast),
2020
--stepper-active-bg: var(--primary-bg),
2121
),

0 commit comments

Comments
 (0)