yp.js: Appearance

The form is a <yp-root> custom element. It renders in a shadow DOM, so your page styles do not leak into it. You theme it in three ways: the appearance option, CSS custom properties, and shadow parts. The default theme is light with a blue accent.

Appearance Option

Pass appearance to elements(). It has two fields.

Field	Type	Description
variables	object, optional	Design tokens. Each key maps to a --yp- custom property. { primary: '#335cff' } sets --yp-primary.
rules	string, optional	Raw CSS applied inside the form. Use it for fine styling that the tokens do not cover.

yp('pub_xxx').elements({
  token: 'token_xxx',
  container: '#payment',
  appearance: {
    variables: {
      'primary': '#335cff',
      'radius': '12px',
      'font': 'Poppins, sans-serif',
    },
    rules: `[part="button"] { text-transform: uppercase; }`,
  },
});

Custom Properties

Set any --yp-* property on the yp-root element to override a token.

Property	Description
--yp-primary	Accent color for buttons and focus.
--yp-primary-hover	Accent color on hover.
--yp-primary-foreground	Text color on the accent.
--yp-background	Form background.
--yp-card	Card surface.
--yp-foreground	Main text color.
--yp-muted-foreground	Secondary text color.
--yp-border	Border color.
--yp-destructive	Error color.
--yp-success	Success color.
--yp-ring	Focus ring color.
--yp-radius	Corner radius. --yp-radius-sm and --yp-radius-lg follow it.
--yp-font	Font family.

yp-root {
  --yp-primary: #335cff;
  --yp-radius: 12px;
}

Shadow Parts

Target inner elements from your page with ::part().

yp-root::part(input) {
  border-width: 2px;
}

yp-root::part(button) {
  letter-spacing: 0.02em;
}

Available parts: widget, selector, form, field, label, input, hint, error, button, dialog, overlay, loader, help, guide, sandbox, code.

Dark Theme

Set data-theme="dark" on the yp-root element. The form reads it and switches. The element is created during mount(), so set the attribute after the ready event.

const payment = yp('pub_xxx').elements({ token: 'token_xxx', container: '#payment' });

payment.on('ready', () => {
  document.querySelector('#payment yp-root').setAttribute('data-theme', 'dark');
});

payment.mount();