Theme (Example)

You're viewing a WIP version of the theme.

import colors from './colors';
import buttons from './buttons';
import typography from './typography';

const theme = {
  colors,
  buttons,
  typography,
};

export default theme;

Colors#

const colors = {
  primary: {
    900: '#007974',
    700: '#7EA2A0',
  },
  secondary: {
    900: '#1D7EEF',
    700: '#5098EB',
  },
  black: {
    900: '#000',
    700: '#585858',
    400: '#8D8A8A',
    200: '#bbb',
  },
  red: {
    200: '#F88383',
  },
  white: '#fff',
  stateColors: {
    danger: '#FF4B4B',
    success: '#2ABF24',
    warning: '#F89D33',
  },
};

Buttons#

import colors from '../colors';
import { StateAndColor } from '../../interfaces';

const buttons = {
  default: {
    fontSize: '12pt',
    borderRadius: '0.3rem',
  },
  sizes: {
    xlarge: `padding: 1rem 2rem;`,
    large: `padding: 0.7rem 2rem;`,
    medium: `padding: 0.4rem 1.8rem; font-size: 10pt;`,
    small: `padding: 0.3rem 1.6rem; font-size: 8pt;`,
  },
  primary: ({ state, bg, gradients }: StateAndColor) =>
    gradients
      ? `
    color: ${colors.white};
    background-image: ${
      state
        ? colors.stateColors[state]
        : `linear-gradient(to right, ${gradients[0]} 0%, ${gradients[1]} 50%, ${gradients[0]} 100%);`
    };
    background-size: 200% auto;
    border: none;

    &:hover {
      background-position: 100% 0;
    }
  `
      : `
    color: ${colors.white};
    background: ${
      state ? colors.stateColors[state] : bg || colors.primary[900]
    };
    border: 1px solid transparent;

    &:hover {
      background: ${
        state ? colors.stateColors[state] : bg || colors.primary[700]
      };
    }
  `,
  secondary: ({ state, borderColor }: StateAndColor) => `
    color: ${
      state ? colors.stateColors[state] : borderColor || colors.primary[900]
    };
    background: ${colors.white};
    border: ${
      state ? colors.stateColors[state] : borderColor || colors.primary[900]
    } 1px solid;
    
    svg {
      stroke: ${colors.primary[900]};
      transition: .3s all;
    }

    &:hover {
      background: ${
        state ? colors.stateColors[state] : borderColor || colors.primary[900]
      };
      color: ${colors.white};
      border-color: ${
        state ? colors.stateColors[state] : borderColor || colors.primary[900]
      } 1px solid;

      svg {
        stroke: ${colors.white};
        transition: .3s all;
      }
    }
  `,
  ghost: ({ state, color }: StateAndColor) => `
    color: ${state ? colors.stateColors[state] : color};
    background: none;
    border: none;
  `,
};

Typography#

const typography = {
  defaultTypo: {
    fontSize: '12pt',
    lineHeight: '1.5',
    fontWeight: 400,
    letterSpacing: '0.05em',
  },
  title: {
    fontSize: '32pt',
    lineHeight: '1.5',
    fontWeight: 400,
    letterSpacing: '0.05em',
  },
  subtitle: {
    fontSize: '24pt',
    lineHeight: '1.5',
    fontWeight: 400,
    letterSpacing: '0.05em',
  },
  paragraph: {
    fontSize: '18pt',
    lineHeight: '1.5',
    fontWeight: 400,
    letterSpacing: '0.05em',
  },
  content: {
    fontSize: '14pt',
    lineHeight: '1.5',
    fontWeight: 400,
    letterSpacing: '0.05em',
  },
  fonts: {
    primary: '-apple-system, sans-serif',
  },
};