@privy-eng/theme

styled-components theme for Privy - https://styled-components.com

Usage

import theme from '@privy-eng/theme';
...
 <ThemeProvider theme={theme}>
    ...
 </ThemeProvider>

Example usage with styled-components

const StyledButton = styled.button`
  ...
  background: ${({ theme }) => theme.darkestPurple};
`;

Privys styled-components Theme

{
  /*--- FONTS ---*/
  openSansFamily: `'Libre Franklin', 'Helvetica Neue', Helvetica, Arial, sans-serif`,
  monospaceFamily: `Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace`,
  /*--- TRANSITIONS ---*/
  easeAll: `all 0.2s ease`,
  easeAll300: `all 0.3s ease`,

  /*--- PRIMARY COLORS ---*/
  darkestPurple: `#222A4C`,
  darkerPurple: `#29335C`,
  darkPurple: `#434A88`,
  purple: `#6465AF`,
  lightPurple: `#ECEEF2`,
  lighterPurple: `#8E959F`,
  warmDarkPurple: `#354876`,

  teal: `#24B9AF`,
  darkTeal: `#197278`,
  lightTeal: `#00B3AF`,

  green: `#3F937E`,
  orange: `#F3A712`,
  red: `#C44536`,
  coral: `#EF6544`,

  /*--- BACKGROUND COLORS ---*/
  beige: `#EFF0F4`,
  lightGray: `#FCFCFF`,
  gray4: `#D0D5D8`,
  seaweed: `#1E7F8A`,
  nickel: `#757270`,
  rose: `#DF2935`,
  mango: `#FFB630`,
  transparentGray: `rgba(239, 240, 244, 0.64)`,

  /*--- BORDER COLORS ---*/
  beige2: `#B6BDC7`,
  beige3: `#E9EBEF`,

  /*--- TEXT COLORS ---*/
  gray: `#393E41`, // #555F66,   // default text color
  gray2: `#545D68`, // #75838a, // for light text on beige bg
  gray3: `#737D89`, // #B0B7B8, // for light text on white bg
  white: `#fdfdfd`,
  olive: `#403f37`
};