Styles

CSS variables

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

Signature

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-signature-bg`	`var(--hub-input-bg, var(--hub-sys-surface, #fff))`	color	Drawing-surface background
`--hub-signature-color`	`var(--hub-input-color, var(--hub-sys-text-primary, #212529))`	color	Field text colour
`--hub-signature-border-color`	`var(--hub-input-border-color, var(--hub-sys-border, #ced4da))`	color	Drawing-surface border colour
`--hub-signature-border-width`	`var(--hub-input-border-width, 1px)`	length	Drawing-surface border thickness
`--hub-signature-border-radius`	`var(--hub-input-border-radius, var(--hub-ref-radius-md, 0.375rem))`	length	Drawing-surface corner radius
`--hub-signature-focus-border-color`	`var(--hub-input-focus-border-color, var(--hub-sys-color-primary, #0d6efd))`	color	Border colour while the surface holds keyboard focus
`--hub-signature-focus-shadow`	`var(--hub-input-focus-box-shadow, 0 0 0 0.25rem rgb(13 110 253 / 25%))`	shadow	Focus ring around the drawing surface
`--hub-signature-label-color`	`var(--hub-label-color, var(--hub-sys-text-primary, #212529))`	color	Field label colour
`--hub-signature-label-font-size`	`var(--hub-label-font-size, var(--hub-ref-font-size-sm, 0.875rem))`	length	Field label font size
`--hub-signature-font-size`	`var(--hub-input-font-size, 1rem)`	length	Field font size
`--hub-signature-actions-gap`	`var(--hub-ref-space-2, 0.5rem)`	length	Gap between the clear / undo / redo actions

Styling and theming

Match the form theme

The field inherits the forms token family and accepts a local signature token override.