Style object migration v1 v2

Quickstart

codesandbox playground (edit the style object) https://codesandbox.io/s/goofy-architecture-w6qxb?file=/index.html

v1 to v2 migration

v1 Style object

(to be deprecated)

paypal
  .PaymentFields({
    fundingSource: paypal.FUNDING.IDEAL,
    style: {
      base: {
        backgroundColor: "#fafbff",
        color: "#7c7d84",
        fontSize: "16px",
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        lineHeight: "1.4",
        letterSpacing: "0.3",
      },
      input: {
        backgroundColor: "white",
        fontSize: "16px",
        color: "#7f8084",
        borderColor: "#d7d8dc",
        borderRadius: "5px",
        borderWidth: "1px",
        padding: "1rem",
      },
      invalid: {
        color: "#FF385C",
      },
      active: {
        color: "#a4a4a4",
        backgroundColor: "#fdfdff",
        borderColor: "#b8b9bf",
      },
    },
    fields: {
      name: {
        value: "",
      },
    },
  })
  .render("#ideal-fields");

v2 Style object

has the addition of 2 objects variables rules

variables give quick control to adjust overall theme styles, these map to the stylesheets cssVariables

rules give granular css overwrites for full stying control

paypal
  .PaymentFields({
    fundingSource: paypal.FUNDING.IDEAL,
    style: {
      variables: {
        fontFamily: "'Helvetica Neue', Arial, sans-serif",
        fontSizeBase: "0.9375rem",
        fontSizeSm: "0.93rem",
        fontSizeM: "0.93rem",
        fontSizeLg: "1.0625rem",
        textColor: "#2c2e2f",
        colorTextPlaceholder: "#2c2e2f",
        colorBackground: "#fff",
        colorInfo: "#0dcaf0",
        colorDanger: "#d20000",
        borderRadius: "0.2rem",
        borderColor: "#dfe1e5",
        borderWidth: "1px",
        borderFocusColor: "black",
        spacingUnit: "10px",
      },
      rules: {
        ".Input": {
            backgroundColor: "#fff",
            color: "#000"
        },
        ".Input:hover": {},
        ".Input:focus": {
        },
        ".Input:active": {},
        ".Input--invalid": {},
        ".Label": {},
        ".Error": {
          marginTop: '2px',
        },
      },
    },
    fields: {
      name: {
        value: "",
      },
    },
  })
  .render("#ideal-fields");

Variables

Can be used to make adjustments to the overall theme configuration

fontFamily - font family
fontSizeBase - base font size
fontSizeSm - small font size
fontSizeM - medium font size
fontSizeLg - large font size
textColor - text color of inputs
colorTextPlaceholder - placeholder text color
colorBackground - background color of inputs
colorDanger - invalid state color
borderRadius - input border radius of elements
borderColor - input border color 
borderWidth - input border width
borderFocusColor - active border color 
spacingUnit - spacing between elements 

Rules

css like hash map of CSS properties to element seletor (note css properties are written in cammel case) element selectors .Label .Input .Error

    '.Error': {
      marginTop: '8px',
    },

supports psudo selectors :hover :focus

'.Input:focus': {
   boxShadow: '0 0 0 0.1rem rgb(13 110 253 / 25%)',
},

invalid state

elements are appended with --invalid

'.Input--invalid': {
  backgroundColor: "#eee"
},