orcs-design-system/es/components/Typography/index.js

TeamForm's Design System, aka: ORCS

import styled from "styled-components";
import { typography, space, layout, color, variant, compose } from "styled-system";
import css from "@styled-system/css";
import shouldForwardProp from "@styled-system/should-forward-prop";
import { themeGet } from "@styled-system/theme-get";
const typeStyles = compose(typography, color, space, layout);
export const H1 = styled("h1").withConfig({
  displayName: "Typography__H1",
  componentId: "sc-1613j99-0"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.6")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.7")(props)
    },
    small: {
      fontSize: themeGet("fontSizes.5")(props)
    }
  }
}), typeStyles);
export const H2 = styled("h2").withConfig({
  displayName: "Typography__H2",
  componentId: "sc-1613j99-1"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.5")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.6")(props)
    },
    small: {
      fontSize: themeGet("fontSizes.4")(props)
    }
  }
}), typeStyles);
export const H3 = styled("h3").withConfig({
  displayName: "Typography__H3",
  componentId: "sc-1613j99-2"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.4")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.5")(props)
    },
    small: {
      fontSize: themeGet("fontSizes.3")(props)
    }
  }
}), typeStyles);
export const H4 = styled("h4").withConfig({
  displayName: "Typography__H4",
  componentId: "sc-1613j99-3"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.3")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.4")(props)
    },
    small: {
      fontSize: themeGet("fontSizes.2")(props)
    }
  }
}), typeStyles);
export const H5 = styled("h5").withConfig({
  displayName: "Typography__H5",
  componentId: "sc-1613j99-4"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.2")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.3")(props)
    },
    small: {
      fontSize: themeGet("fontSizes.1")(props)
    }
  }
}), typeStyles);
export const H6 = styled("h6").withConfig({
  displayName: "Typography__H6",
  componentId: "sc-1613j99-5"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.1")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.2")(props)
    },
    small: {
      fontSize: themeGet("fontSizes.0")(props)
    }
  }
}), typeStyles);
export const P = styled("p").withConfig({
  displayName: "Typography__P",
  componentId: "sc-1613j99-6"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.2")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.3")(props)
    }
  }
}), typeStyles);
export const Small = styled("small").withConfig({
  shouldForwardProp,
  displayName: "Typography__Small",
  componentId: "sc-1613j99-7"
}).attrs({
  className: "Small"
})(props => css({
  fontSize: themeGet("fontSizes.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), typeStyles);
export const Text = styled("span").withConfig({
  displayName: "Typography__Text",
  componentId: "sc-1613j99-8"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.2")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  textTransform: props.uppercase ? "uppercase" : "none",
  wordBreak: props.breakWord ? "break-word" : "normal"
}), props => variant({
  prop: "weight",
  variants: {
    light: {
      fontWeight: themeGet("fontWeights.0")(props)
    },
    bold: {
      fontWeight: themeGet("fontWeights.2")(props)
    }
  }
}), props => variant({
  prop: "sizing",
  variants: {
    large: {
      fontSize: themeGet("fontSizes.3")(props)
    }
  }
}), typeStyles);
export const Quote = styled("blockquote").withConfig({
  displayName: "Typography__Quote",
  componentId: "sc-1613j99-9"
})(props => css({
  display: "block",
  fontSize: themeGet("fontSizes.3")(props),
  fontWeight: themeGet("fontWeights.1")(props),
  borderLeftStyle: "solid",
  borderLeftWidth: 3,
  borderLeftColor: "greyLight",
  p: 4,
  em: {
    display: "block",
    fontStyle: "italic",
    fontSize: themeGet("fontSizes.2")(props),
    color: themeGet("colors.greyDark")(props)
  }
}), typeStyles);
export const Code = styled("div").withConfig({
  displayName: "Typography__Code",
  componentId: "sc-1613j99-10"
})(props => css({
  padding: 3,
  fontSize: themeGet("fontSizes.2")(props),
  fontFamily: "monospace",
  backgroundColor: themeGet("colors.warningLightest")(props)
}));
export default {
  H1,
  H2,
  H3,
  H4,
  H5,
  H6,
  P,
  Text,
  Quote,
  Small,
  Code
};