NumberField theming

The values listed below are exposed as --rozie-number-field-* custom properties, each with a built-in fallback, so NumberField works with zero configuration and re-skins by remapping tokens. The structural rules compile per-leaf and are not consumer-overridable.

:root {
  --rozie-number-field-gap: 0;
  --rozie-number-field-bg: #fff;
  --rozie-number-field-width: 4.5rem;
  --rozie-number-field-focus-ring-width: 2px;
}

Tokens

layout / typography

Token	Default
--rozie-number-field-gap	0
--rozie-number-field-font	inherit
--rozie-number-field-radius	0.5rem

frame

Token	Default
--rozie-number-field-bg	#fff
--rozie-number-field-border-width	1px
--rozie-number-field-border-color	rgba(0, 0, 0, 0.25)

the text input

Token	Default
--rozie-number-field-width	4.5rem
--rozie-number-field-padding	0.375rem 0.5rem
--rozie-number-field-text-align	right
--rozie-number-field-font-size	1rem
--rozie-number-field-color	inherit

focus ring (inset on the input)

Token	Default
--rozie-number-field-focus-ring-width	2px
--rozie-number-field-focus-ring-color	rgba(0, 102, 204, 0.35)

+/- stepper buttons

Token	Default
--rozie-number-field-btn-size	2rem
--rozie-number-field-btn-font-size	1.1rem
--rozie-number-field-btn-color	inherit
--rozie-number-field-btn-bg	rgba(0, 0, 0, 0.04)
--rozie-number-field-btn-hover-bg	rgba(0, 0, 0, 0.08)

disabled

Token	Default
--rozie-number-field-disabled-opacity	0.55

Design-system bridges

Each package ships token presets that map NumberField's tokens onto a known design system's published CSS variables — import base.css first, then a bridge:

import '@rozie-ui/number-field-react/themes/base.css';
import '@rozie-ui/number-field-react/themes/bootstrap.css';
import '@rozie-ui/number-field-react/themes/material.css';
import '@rozie-ui/number-field-react/themes/shadcn.css';

See also

• NumberField — showcase & API — the full prop / event / slot / handle reference.
• NumberField — API reference — every prop, event, slot, and handle verb.
• NumberField — usage examples — idiomatic per-framework consumption code.
• NumberField comparison — how it stacks up against the per-framework libraries.
• NumberField — live demo — the Vue leaf's workspace build running in the page (not yet the published npm package).