Estilos

Mixins y estilos

Override the shared `--hub-progress-*`, `--hub-meter-*` and `--hub-ring-*` tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted as CSS custom properties, so the rest keep each component's own defaults. Token-based and self-contained (no Bootstrap dependency).

Theming with hub-metrics-theme

Storage used72%

Bandwidth48%

72%Health

Mixin	Parámetros	Descripción
Theming
`hub-metrics-theme()`	`$accent--hub-progress-accent--hub-ring-indicator` `$track--hub-progress-track-bg--hub-meter-track-bg--hub-ring-track` `$low--hub-meter-low-bg--hub-ring-low-color` `$optimum--hub-meter-optimum-bg` `$high--hub-meter-high-bg--hub-ring-high-color` `$radius--hub-progress-radius--hub-meter-radius`	One-call theming for the metrics primitives

Variables CSS

Personaliza cada detalle con 17 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.

Metrics

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	Por defecto	Tipo	Descripción
`--hub-progress-track-bg`	`color-mix(in oklch, var(--hub-progress-accent) 16%, transparent)`	color	Progress track background (subtle accent tint)
`--hub-progress-indicator-bg`	`var(--hub-progress-accent)`	color	Filled progress indicator colour
`--hub-progress-height`	`var(--hub-ref-space-2, 0.5rem)`	length	Progress bar thickness (sm/md/lg override it)
`--hub-progress-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Progress bar corner radius
`--hub-meter-track-bg`	`color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 16%, transparent)`	color	Meter track background
`--hub-meter-low-bg`	`var(--hub-sys-color-danger, #dc3545)`	color	Meter fill when the value is below target
`--hub-meter-optimum-bg`	`var(--hub-sys-color-success, #198754)`	color	Meter fill when the value is on target
`--hub-meter-high-bg`	`var(--hub-sys-color-warning, #ffc107)`	color	Meter fill when the value is above target
`--hub-meter-height`	`var(--hub-ref-space-2, 0.5rem)`	length	Meter bar thickness
`--hub-meter-radius`	`var(--hub-ref-radius-pill, 50rem)`	length	Meter bar corner radius
`--hub-ring-size`	`4rem`	length	Ring outer diameter (overridden per-instance from size)
`--hub-ring-thickness`	`var(--hub-ref-space-2, 0.5rem)`	string	Ring stroke width (overridden per-instance from thickness)
`--hub-ring-track`	`color-mix(in oklch, var(--hub-sys-color-neutral, #6c757d) 20%, transparent)`	color	Ring track stroke colour
`--hub-ring-indicator`	`var(--hub-sys-color-primary, #0d6efd)`	color	Ring indicator stroke colour (neutral band)
`--hub-ring-caption-color`	`var(--hub-sys-text-primary, #212529)`	color	Ring centre caption colour
`--hub-ring-low-color`	`var(--hub-sys-color-danger, #dc3545)`	color	Ring stroke below the low threshold
`--hub-ring-high-color`	`var(--hub-sys-color-success, #198754)`	color	Ring stroke at/above the high threshold