Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.pylon.mortgage/llms.txt

Use this file to discover all available pages before exploring further.

This page documents all available theme properties for customizing Pylon Elements.

​
Theme structure

type Theme = {
  Global?: GlobalTheme;
  Components?: ComponentsTheme;
  Page?: CSSObject;
};

​
GlobalTheme

type GlobalTheme = {
  fonts?: Fonts;
  colors?: Colors;
};

​
Fonts

type Fonts = {
  fontFamily?: string;
  fontUrls?: string[];
};

​
Colors

type Colors = {
  core?: CoreColors;
  text?: TextColors;
  background?: BackgroundColors;
  loanStatus?: LoanStatusColors;
};

​
CoreColors

type CoreColors = {
  primary?: string;
  neutral?: string;
  error?: string;
  warning?: string;
  success?: string;
};

​
TextColors

type TextColors = {
  primary?: string;
  secondary?: string;
  disabled?: string;
  contrast?: string;
  error?: string;
  warning?: string;
  success?: string;
};

​
BackgroundColors

type BackgroundColors = {
  application?: string;
  content?: string;
};

​
LoanStatusColors

type LoanStatusColors = {
  approved?: string;
  inReview?: string;
  preApproved?: string;
  withdrawn?: string;
  suspended?: string;
  declined?: string;
};

​
ComponentsTheme

type ComponentsTheme = {
  Typography?: Typography;
  Container?: Container;
  Button?: Button;
  Form?: Form;
  Communications?: Communications;
};

​
Typography

type Typography = {
  Title?: CSSObject;
  SubTitle?: CSSObject;
  CardTitle?: CSSObject;
  CardSubTitle?: CSSObject;
  LabelPrimary?: CSSObject;
  LabelSecondary?: CSSObject;
  Link?: CSSObject;
  Body?: CSSObject;
  SubText?: CSSObject;
};

​
Container

type Container = {
  Card?: CSSObject;
  ApprovalStatus?: CSSObject;
  Loader?: CSSObject;
  LoanProgressDetailed?: CSSObject;
  LoanProgressSimple?: CSSObject;
};

​
Button

type Button = {
  Primary?: CSSObject;
  Neutral?: CSSObject;
  Negative?: CSSObject;
  ListItem?: CSSObject;
};

​
Form

type Form = {
  TextInput?: CSSObject;
  Chip?: CSSObject;
  CheckBox?: CSSObject;
  Radio?: CSSObject;
  Tags?: CSSObject;
  Select?: CSSObject;
  InlineErrorMessage?: CSSObject;
  ErrorAlert?: CSSObject;
};

​
Communications

type Communications = {
  PreapprovalLetter?: PreapprovalLetter;
};

​
PreapprovalLetter

type PreapprovalLetter = {
  primaryColor?: string;
  normalFontUrl?: string;
  boldFontUrl?: string;
};

​
Page

type Page = {
  Page?: CSSObject;
};

​
CSSObject

The CSSObject type uses the CSSType module and includes all properties and values available in CSS. It’s an infinitely nested object that supports all CSS properties.

​
Example

const theme: Theme = {
  Global: {
    fonts: {
      fontFamily: "Inter, sans-serif",
      fontUrls: [
        "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
      ],
    },
    colors: {
      core: {
        primary: "#0066CC",
        neutral: "#666666",
        error: "#CC0000",
        warning: "#FF9900",
        success: "#00AA00",
      },
      text: {
        primary: "#000000",
        secondary: "#666666",
      },
      background: {
        application: "#FFFFFF",
        content: "#F5F5F5",
      },
    },
  },
  Components: {
    Button: {
      Primary: {
        backgroundColor: "#0066CC",
        color: "#FFFFFF",
        borderRadius: "4px",
      },
    },
  },
};