Otp theming

Every cosmetic value Otp renders is a --rozie-otp-* custom property with a built-in fallback, so the component works with zero configuration and stays fully re-skinnable. The structural rules compile per-leaf and are not consumer-overridable — only the values below flow through tokens.

css

.rozie-otp {
  --rozie-otp-gap: 0.5rem;
  --rozie-otp-accent: #0066cc;
  --rozie-otp-cell-size: 2.75rem;
  --rozie-otp-filled-border-color: var(--rozie-otp-accent);
}

Tokens

layout / typography

Token	Default
`--rozie-otp-gap`	`0.5rem`
`--rozie-otp-font`	`inherit`

accent — the single color most consumers will set; caret + focus + filled border derive from it

Token	Default
`--rozie-otp-accent`	`#0066cc`

per-cell box model

Token	Default
`--rozie-otp-cell-size`	`2.75rem`
`--rozie-otp-font-size`	`1.25rem`
`--rozie-otp-font-weight`	`600`
`--rozie-otp-color`	`inherit`
`--rozie-otp-bg`	`#fff`
`--rozie-otp-border-width`	`1px`
`--rozie-otp-border-color`	`rgba(0, 0, 0, 0.25)`
`--rozie-otp-radius`	`0.5rem`

filled cell (a cell that already holds a character)

Token	Default
`--rozie-otp-filled-border-color`	`var(--rozie-otp-accent)`

focus ring

Token	Default
`--rozie-otp-focus-ring-width`	`3px`
`--rozie-otp-focus-ring-color`	`rgba(0, 102, 204, 0.25)`

placeholder character color

Token	Default
`--rozie-otp-placeholder-color`	`rgba(0, 0, 0, 0.3)`

disabled

Token	Default
`--rozie-otp-disabled-opacity`	`0.55`
`--rozie-otp-disabled-bg`	`rgba(0, 0, 0, 0.04)`

Design-system bridges

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

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

Otp theming ​

Tokens ​

layout / typography ​

per-cell box model ​

filled cell (a cell that already holds a character) ​

focus ring ​

placeholder character color ​

disabled ​

Design-system bridges ​

See also ​