Otp theming

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

css

:root {
  --rozie-otp-gap: 0.5rem;
  --rozie-otp-accent: #0066cc;
  --rozie-otp-cell-size: 2.75rem;
  --rozie-otp-focus-ring-width: 3px;
}

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`

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)`

Defaulted where Otp reads them

Public, but declared nowhere by base.css: the fallback below applies only while no scope sets the token, and it is resolved at the component itself — so it follows a value set on any ancestor (a token it defaults to included).

Token	Default
`--rozie-otp-filled-border-color`	`var(--rozie-otp-accent, #0066cc)`

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 ​

focus ring ​

placeholder character color ​

disabled ​

Defaulted where Otp reads them ​

Design-system bridges ​

See also ​