Стили

Миксины и стили

Override the `--hub-milestone-*` 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 their defaults. Token-based and self-contained.

Theming with hub-milestones-theme

Kickoff

Project scoped and approved.

Build

The current step, in progress.

Launch

Not started yet.

Миксин	Параметры	Описание
Theming
`hub-milestones-theme()`	`$node-color--hub-milestone-node-color` `$node-text--hub-milestone-node-text` `$node-size--hub-milestone-node-size` `$node-font-size--hub-milestone-node-font-size` `$connector-bg--hub-milestone-connector-bg` `$connector-pending-bg--hub-milestone-connector-pending-bg` `$connector-thickness--hub-milestone-connector-thickness` `$pending-bg--hub-milestone-pending-bg` `$pending-border--hub-milestone-pending-border` `$pending-color--hub-milestone-pending-color` `$error-bg--hub-milestone-error-bg` `$body-color--hub-milestone-body-color` `$body-muted--hub-milestone-body-muted` `$gap--hub-milestone-gap` `$spacing--hub-milestone-spacing`	One-call token theming for `<hub-milestones>`

CSS-переменные

Тематизируйте каждый пиксель с помощью 20 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.

Milestones

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.

Переменная	По умолчанию	Тип	Описание
`--hub-milestone-body-color`	`var(--hub-sys-text-primary, #212529)`	color	Основной цвет текста тела.
`--hub-milestone-body-muted`	`var(--hub-sys-text-muted, #6c757d)`	string	Приглушённый / вторичный цвет текста тела.
`--hub-milestone-connector-bg`	`var(--hub-milestone-node-color)`	color	Заливка соединителя между завершёнными / активными узлами.
`--hub-milestone-connector-pending-bg`	`var(--hub-sys-border-color-default, #dee2e6)`	color	Заливка соединителя, ведущего к ожидающему узлу.
`--hub-milestone-connector-thickness`	`3px`	length	Толщина соединительной линии.
`--hub-milestone-error-bg`	`var(--hub-sys-color-danger, #dc3545)`	color	Фон узла с ошибкой.
`--hub-milestone-gap`	`1rem`	length	Промежуток между линией узлов и содержимым тела.
`--hub-milestone-node-color`	`var(--hub-sys-color-primary, #0d6efd)`	color	Фон узла для завершённых / активных состояний. `color` отдельного узла переопределяет это.
`--hub-milestone-node-font-size`	`1.05rem`	length	Размер шрифта содержимого узла (число / метка).
`--hub-milestone-node-size`	`2.75rem`	length	Диаметр круга узла.
`--hub-milestone-node-text`	`var(--hub-ref-color-white, #ffffff)`	color	Цвет содержимого узла на цветных узлах.
`--hub-milestone-pending-bg`	`var(--hub-sys-surface-elevated, #f8f9fa)`	color	Фон ожидающего узла.
`--hub-milestone-pending-border`	`var(--hub-sys-border-color-default, #dee2e6)`	border	Цвет границы ожидающего узла.
`--hub-milestone-pending-color`	`var(--hub-sys-text-muted, #6c757d)`	color	Цвет содержимого ожидающего узла.
`--hub-milestone-spacing`	`1.75rem`	length	Расстояние между последовательными шагами.
`--hub-milestone-pulse-color`	`var(--hub-milestone-node-color)`	color	Цвет волны пульсации активного узла. По умолчанию — акцент узла, поэтому учитывает переопределение `color` для узла.
`--hub-milestone-pulse-duration`	`1.6s`	transition	Длительность одного цикла пульсации.
`--hub-milestone-pulse-spread`	`0.75rem`	length	Насколько далеко волна пульсации расходится от узла.
`--hub-milestone-reveal-duration`	`0.5s`	transition	Длительность заполнения каждого коннектора во время раскрытия.
`--hub-milestone-reveal-stagger`	`0.14s`	string	Задержка между заполнением соседних коннекторов, создающая каскадное раскрытие.