chetanraj

const fontSizes = [12, 14, 16, 18, 20, 24, 36, 48, 80, 96];
const fontWeights = [100, 200, 300, 400, 500, 600, 700, 800, 900];
const lineHeights = [1, 1.25, 1.5];
const radii = ['0px', '2px', '4px', '8px', '16px', '48px'];
const space = [0, 4, 8, 16, 24, 32, 48, 64, 128, 256, 512];

const theme = {
	breakpoints: [32, 48, 64],

	space,

chetanraj

export const PrimaryButton = styled(Button)(
	color: #fff;
	background: blue;
);

export const SecondaryButton = styled(Button)(
  	color: #fff;
	background: orange;
);

chetanraj

import styled from 'styled-components';
import { border, color, compose, flexbox, layout, position, shadow, space, typography } from 'styled-system';


export const Div = styled('div')(
	compose(border, space, layout, typography, color, position, shadow, flexbox)
);

export const Flex = styled(Div)`
	display: flex;

chetanraj

export const theme = {
	breakpoints: [32, 48, 64],
	space: [0, 4, 8, 16, 24, 32, 48, 64, 128, 256, 512],
	fontSizes: [12, 14, 16, 18, 20, 24, 36, 48, 80, 96],
	fontWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
	lineHeights: {
		normal: 1,
		title: 1.25,
		paragraph: 1.5
	},

chetanraj

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)

chetanraj

import RehypeReact from "rehype-react"

const renderAst = new RehypeReact({
  createElement: React.createElement,
  components: {
    h1: Title,
    p: Paragraph,
  },
}).Compiler;

chetanraj

import styled from "styled-components";

export const Title = styled.h1`
  font-size: 3em;
  text-align: center;
  color: yellowgreen;
`;

export const Paragraph = styled.p`
  font-size: 1em;

chetanraj

{
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-classes`,
          options: {
            classMap: {
              "heading[depth=1]": "text-2xl",
              "heading[depth=2]": "text-xl",

chetanraj

import React from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
	color: ${props => props.disabled ? `${props.theme.colors.gray}`	: `${props.theme.colors.darkgray}`};
	font-size: ${props => `${props.theme.fontSizes[2]}px`};
	border: 1px solid;
	border-color: ${props => props.theme.colors[props.borderColor] || props.theme.colors.lightgray};
	background: ${props => props.theme.colors[props.bg] || props.theme.colors.white};
	border-radius: ${props => `${props.theme.radii[2]}`};

chetanraj

export const theme = {
	breakpoints: [32, 48, 64],
	space: [0, 4, 8, 16, 24, 32, 48, 64, 128, 256, 512],
	fontSizes: [12, 14, 16, 18, 20, 24, 36, 48, 80, 96],
	fontWeights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
	lineHeights: {
		normal: 1,
		title: 1.25,
		paragraph: 1.5
	},