Styles

Mixins and styles

Override any of the `--hub-stepper-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).

Theming with hub-stepper-theme

The active step follows the themed accent.

Mixin	Parameters	Description
Theming
`hub-stepper-theme()`	`$accent--hub-stepper-accent` `$surface--hub-stepper-surface-color` `$background--hub-stepper-background-color` `$text--hub-stepper-text-color` `$border--hub-stepper-border-color` `$gap--hub-stepper-gap` `$disabled-opacity--hub-stepper-disabled-opacity` `$nav-bg--hub-stepper-nav-bg` `$nav-padding-x--hub-stepper-nav-padding-x` `$nav-padding-y--hub-stepper-nav-padding-y` `$nav-border-width--hub-stepper-nav-border-width` `$nav-border-color--hub-stepper-nav-border-color` `$nav-gap--hub-stepper-nav-gap` `$nav-link-color--hub-stepper-nav-link-color` `$nav-link-hover-color--hub-stepper-nav-link-hover-color` `$nav-link-hover-bg--hub-stepper-nav-link-hover-bg` `$nav-link-active-color--hub-stepper-nav-link-active-color` `$nav-link-active-bg--hub-stepper-nav-link-active-bg` `$nav-link-active-border-color--hub-stepper-nav-link-active-border-color` `$nav-link-disabled-color--hub-stepper-nav-link-disabled-color` `$trigger-padding-x--hub-stepper-nav-trigger-padding-x` `$trigger-padding-y--hub-stepper-nav-trigger-padding-y` `$trigger-gap--hub-stepper-nav-trigger-gap` `$trigger-font-size--hub-stepper-nav-trigger-font-size` `$controls-gap--hub-stepper-controls-gap` `$controls-justify--hub-stepper-controls-justify` `$control-padding-x--hub-stepper-control-padding-x` `$control-padding-y--hub-stepper-control-padding-y` `$control-font-size--hub-stepper-control-font-size` `$sidebar-width--hub-stepper-sidebar-width`	One-call theming for `<hub-stepper>`

CSS variables

Theme every pixel with 43 CSS variables. Override them at :root or scope them to a wrapper.

Stepper

Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.

Variable	Default	Type	Description
`--hub-stepper-accent`	`var(--hub-sys-color-primary, #0d6efd)`	color	Semantic accent — re-based per variant; drives the active step pill + next/submit controls
`--hub-stepper-primary-color`	`var(--hub-stepper-accent)`	color	Primary accent (active state, progress).
`--hub-stepper-background-color`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Back-button / secondary surface background.
`--hub-stepper-text-color`	`var(--hub-sys-text-primary, #212529)`	color	Base text color.
`--hub-stepper-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Border color of the stepper surface.
`--hub-stepper-surface-color`	`var(--hub-sys-surface-page, #ffffff)`	color	Step content background.
`--hub-stepper-nav-bg`	`var(--hub-sys-surface-page, transparent)`	color	Background of the nav bar
`--hub-stepper-nav-border-width`	`0`	length	Border width of the nav bar
`--hub-stepper-nav-border-color`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Border color of the nav bar
`--hub-stepper-nav-link-color`	`var(--hub-sys-text-primary, #212529)`	color	Navigation step label color.
`--hub-stepper-nav-link-hover-color`	`var(--hub-sys-link-hover-color, #0a58ca)`	color	Nav trigger text color on hover
`--hub-stepper-nav-link-hover-bg`	`var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075))`	color	Nav trigger background on hover
`--hub-stepper-nav-link-active-color`	`var(--hub-stepper-accent-on, #ffffff)`	color	Active step indicator text color.
`--hub-stepper-nav-link-active-bg`	`var(--hub-stepper-accent)`	color	Active step indicator background.
`--hub-stepper-nav-link-active-border-color`	`var(--hub-stepper-accent)`	color	Nav trigger border in the current step
`--hub-stepper-nav-link-disabled-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Disabled step label color.
`--hub-stepper-gap`	`var(--hub-ref-space-3, 1rem)`	length	Gap between stepper layout regions.
`--hub-stepper-nav-gap`	`var(--hub-ref-space-1, 0.25rem)`	length	Gap between nav trigger items
`--hub-stepper-nav-trigger-gap`	`var(--hub-ref-space-1, 0.25rem)`	length	Internal gap between icon and label inside trigger
`--hub-stepper-nav-trigger-padding-y`	`var(--hub-ref-space-2, 0.5rem)`	length	Vertical padding of nav trigger
`--hub-stepper-nav-trigger-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Horizontal padding of nav trigger
`--hub-stepper-nav-trigger-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Font size of nav trigger label
`--hub-stepper-nav-trigger-line-height`	`var(--hub-ref-line-height-sm, 1.25)`	number	Line height of nav trigger label
`--hub-stepper-controls-justify`	`flex-end`	string	justify-content of the controls bar
`--hub-stepper-controls-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gap between the navigation controls.
`--hub-stepper-control-padding-y`	`0.375rem`	length	Vertical padding of control buttons
`--hub-stepper-control-padding-x`	`var(--hub-ref-space-3, 1rem)`	length	Horizontal padding of control buttons
`--hub-stepper-control-font-size`	`var(--hub-ref-font-size-sm, 0.875rem)`	length	Font size of control buttons
`--hub-stepper-control-line-height`	`var(--hub-ref-line-height-sm, 1.25)`	number	Line height of control buttons
`--hub-stepper-disabled-opacity`	`var(--hub-sys-opacity-50, 0.5)`	number	Opacity applied to disabled steps.
`--hub-stepper-sidebar-min-width`	`160px`	length	Minimum width of sidebar nav (sidebar layout)
`--hub-stepper-sidebar-ideal-width`	`20vw`	length	Ideal width of sidebar nav used in clamp()
`--hub-stepper-sidebar-max-width`	`240px`	length	Maximum width of sidebar nav (sidebar layout)
`--hub-stepper-sidebar-width`	`clamp( var(--hub-stepper-sidebar-min-width), var(--hub-stepper-sidebar-ideal-width), var(--hub-stepper-sidebar-max-width) )`	length	Sidebar width in the `sidebar` layout.
`--hub-stepper-content-border-width`	`0`	length	Border width of the content panel
`--hub-stepper-animation-duration`	`var(--hub-sys-transition-duration-base, 260ms)`	transition	Step transition duration.
`--hub-stepper-animation-easing`	`var(--hub-sys-transition-timing-function-base, ease)`	transition	Easing function of step transition animations
`--hub-stepper-animation-distance`	`var(--hub-ref-space-4, 1.5rem)`	transition	Slide distance for enter/exit step animations
`--hub-stepper-content-padding-x`	`0`	length	Content horizontal padding
`--hub-stepper-content-padding-y`	`0`	length	Content vertical padding
`--hub-stepper-nav-padding-x`	`0`	length	Nav horizontal padding
`--hub-stepper-nav-padding-y`	`0`	length	Nav vertical padding
`--hub-stepper-nav-title-max-width`	`12rem`	length	Max width of a step nav title before ellipsis