@penaprieto/design-system/dist/components/OTPInput/OTPInput.css

Multi-brand React design system with design tokens from Figma

/* Base OTP Input */
.ds-otp-input {
  display: flex;
  gap: var(--size2, 8px);
  -webkit-font-smoothing: antialiased;
}

/* Field */
.ds-otp-input__field {
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: var(--body-regular-fontFamily, var(--font-family, 'Satoshi', sans-serif));
  font-size: var(--heading-h4-fontSize, 24px);
  font-weight: var(--body-regular-strong-fontWeight, 700);
  line-height: 1;
  color: var(--semantic-text-corp-primary);
  background-color: var(--text-field-bg-default);
  border: 1px solid var(--text-field-border-default);
  border-radius: var(--br-sm, 8px);
  transition: all 0.2s ease-in-out;
  outline: none;
}

.ds-otp-input__field:hover:not(:disabled) {
  border-color: var(--text-field-border-hover);
}

.ds-otp-input__field:focus {
  border-color: var(--text-field-border-focus);
  box-shadow: 0 0 0 3px var(--text-field-focus-ring);
}

.ds-otp-input__field:disabled {
  background-color: var(--text-field-bg-disabled);
  border-color: var(--text-field-border-disabled);
  color: var(--text-field-text-disabled);
  cursor: not-allowed;
}

/* Error */
.ds-otp-input--error .ds-otp-input__field {
  border-color: var(--text-field-border-error);
}

.ds-otp-input--error .ds-otp-input__field:focus {
  border-color: var(--text-field-border-error);
  box-shadow: 0 0 0 3px var(--text-field-error-ring);
}