Secure Fields theming

secureFields.addCardNumberField({
  placeholder: "Enter card number",
  styles: {
    color: "black",
    fontSize: "18px",
    ":focus": {
      color: "blue",
    },
  },
});

{
  placeholder: "Enter card number";
}

{
  pattern: "[A-Z]{1,}[0-9]{1,}[A-Z]{0,}\\s[0-9]{1,}[A-Z]{0,}"; // naive UK zip codes pattern match
}

/* Applied to each field */
.secure-fields__input {
}
/* Applied to the card number field */
.secure-fields__input--number {
}
/* Applied to the expiry date field */
.secure-fields__input--expiry-date {
}
/* Applied to the security code field */
.secure-fields__input--security-code {
}
/* Applied to a focused field */
.secure-fields__input[data-secure-fields-focused] {
}
/* Applied to an invalid field */
.secure-fields__input[data-secure-fields-invalid] {
}
/* Applied to an autofilled field */
.secure-fields__input[data-secure-fields-autofilled] {
}

const styles = {
  // Default styles (any of the supported CSS property)
  color: ...,
  // Rules applied when the field has its value autofilled by a browser / extension
  ':autofill': { ... },
  // Rules applied when the field is hovered
  ':hover': { ... },
  // Rules applied when the field is focused
  ':focus': { ... },
  // Rules applied when the field is disabled
  ':disabled': { ... },
  // Rules applied when the field is valid
  ':valid': { ... },
  // Rules applied when the field is invalid
  ':invalid': { ... },
  // Rules applied to the field placeholder
  '::placeholder': { ... },
}

backgroundColor;
boxShadow;
caretColor;
color;
colorScheme;
cursor;
font;
fontFamily;
fontFeatureSettings;
fontKerning;
fontSize;
fontSizeAdjust;
fontStretch;
fontStyle;
fontVariant;
fontVariantAlternates;
fontVariantCaps;
fontVariantEastAsian;
fontVariantLigatures;
fontVariantNumeric;
fontVariationSettings;
fontWeight;
letterSpacing;
lineHeight;
opacity;
padding;
textAlign;
textShadow;
textRendering;
transition;
MozOsxFontSmoothing;
WebkitFontSmoothing;

cardNumberField.addEventListener('input', function(evt) {
  if (evt.schema && evt.schema === "visa") {
    //change logo where appropriate
  }
});