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);

// Shared color variant configuration for typography components
const createColorVariants = props => variant({
  prop: "variant",
  variants: {
    primary: {
      color: themeGet("colors.primary")(props)
    },
    secondary: {
      color: themeGet("colors.secondary")(props)
    },
    success: {
      color: themeGet("colors.successLight")(props)
    },
    warning: {
      color: themeGet("colors.warning")(props)
    },
    danger: {
      color: themeGet("colors.danger")(props)
    },
    grey: {
      color: themeGet("colors.grey")(props)
    },
    greyDark: {
      color: themeGet("colors.greyDark")(props)
    },
    greyDarkest: {
      color: themeGet("colors.greyDarkest")(props)
    }
  }
});
export const H1 = /*#__PURE__*/styled("h1").withConfig({
  displayName: "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, createColorVariants);
export const H2 = /*#__PURE__*/styled("h2").withConfig({
  displayName: "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, createColorVariants);
export const H3 = /*#__PURE__*/styled("h3").withConfig({
  displayName: "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, createColorVariants);
export const H4 = /*#__PURE__*/styled("h4").withConfig({
  displayName: "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, createColorVariants);
export const H5 = /*#__PURE__*/styled("h5").withConfig({
  displayName: "H5",
  componentId: "sc-1613j99-4"
})(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, createColorVariants);
export const H6 = /*#__PURE__*/styled("h6").withConfig({
  displayName: "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, createColorVariants);
export const P = /*#__PURE__*/styled("p").withConfig({
  displayName: "P",
  componentId: "sc-1613j99-6"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.0")(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, createColorVariants);
export const Small = /*#__PURE__*/styled("small").withConfig({
  shouldForwardProp,
  displayName: "Small",
  componentId: "sc-1613j99-7"
}).attrs({
  className: "Small"
})(props => css({
  fontSize: themeGet("fontSizes.0")(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, createColorVariants);
export const Text = /*#__PURE__*/styled("span").withConfig({
  displayName: "Text",
  componentId: "sc-1613j99-8"
})(props => css({
  fontFamily: themeGet("fonts.main")(props),
  fontSize: themeGet("fontSizes.0")(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, createColorVariants);
export const Quote = /*#__PURE__*/styled("blockquote").withConfig({
  displayName: "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 = /*#__PURE__*/styled("div").withConfig({
  displayName: "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
};