orcs-design-system/es/GlobalStyles.js

TeamForm's Design System, aka: ORCS

import { createGlobalStyle } from "styled-components";
import { themeGet } from "@styled-system/theme-get";
// GLOBAL STYLES
// For browser reset, setting global box sizing and font sizing etc.

const GlobalStyles = createGlobalStyle(["html{box-sizing:border-box;line-height:1.15;line-height:calc(2px + 2ex + 2px);}html *{line-height:calc(2px + 2ex + 2px);}*,*:before,*:after{box-sizing:inherit;}html,body{height:100%;width:100%;margin:", ";}body{font-family:", ";color:", ";}html{font-size:62.5%;}body{font-size:", ";}main{display:flex;align-items:stretch;align-content:stretch;width:100%;}section{height:", ";width:100%;overflow-y:scroll;}img{border-style:none;}small{font-size:80%;}p{margin:", ";}h1,h2,h3,h4,h5,h6{font-weight:", ";font-family:", ";margin:", ";}h1{font-size:", "}h2{font-size:", "}h3{font-size:", "}h4{font-size:", "}h5{font-size:", "}h6{font-size:", "}a,p,small,li,h1,h2,h3,h4,h5,h6{word-break:break-word;}"], props => themeGet("space.0")(props), props => themeGet("fonts.main")(props), props => themeGet("colors.greyDarkest")(props), props => themeGet("fontSizes.2")(props), props => themeGet("appScale.navBarSize")(props), props => themeGet("space.0")(props), props => themeGet("fontWeights.1")(props), props => themeGet("fonts.main")(props), props => themeGet("space.0")(props), props => themeGet("fontSizes.6")(props), props => themeGet("fontSizes.5")(props), props => themeGet("fontSizes.4")(props), props => themeGet("fontSizes.3")(props), props => themeGet("fontSizes.2")(props), props => themeGet("fontSizes.1")(props));
export default GlobalStyles;