Naive Props Mutation

    @stnew/typography
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    @stnew/typography

    Responsive typography system for styled-components. Leverages styled-system under the hood.

    Install

    npm install @stnew/typography

    Setup

    @stnew/typography lets you define type styles in you styled-components theme.

    Before anything, make sure you wrap your app or component in <ThemeProvider>.

    Next, extend your theme object with a typeStyles prop.

    const theme = {
      ...
      typeStyles: {
        heading: {
          fontSize: [32, 48, 64],
          lineHeight: 1.1,
        },
        subhead: {
          fontSize: [21, 24, 32],
          lineHeight: 1.1,
        },
        body: {
          fontSize: [16, 18, 21],
          lineHeight: 1.4,
        }
      }
    }

    Import the <Text> component from @stnew/typography and use the typeStyle prop to style your typography.

    import React from "react";
    import { Text } from "@stnew/typography";
    
    export const MyComponent = props => (
      <article>
        <Text as="h1" typeStyle="heading">
          Aliens attack Earth!
        </Text>
        <Text as="h2" typeStyle="subhead">
          All hope is lost
        </Text>
        <Text typeStyle="body">{props.body}</Text>
      </article>
    );

    Props

    Prop Type Default Description
    as string p render as specified tag
    typeStyle string body Mapped to the keys in the theme.typeStyles object.

    The only custom prop is typeStyle. The as polymorphic prop lets you render any tag you want using your defined styles.

    All other props are passed through, so you can easily extend the component if you like. Since this leverages styled-components, you can wrap the <Text> component in styled() and use the passed props in a custom component.

    <Text as="cite" typeStyle="small">
      Hello World
    </Text>

    typeStyles

    The typeStyles property on the theme object will accept anything as a key. It's up to you how to define your typography styles. Any prop from typography, color, space, and layout in the styled-system API is valid.

    const theme = {
      ...
      typeStyles: {
        hero: {
          fontFamily: 'Helvetica, sans-serif',
          fontSize: [55, 73, 81],
          fontWeight: 700,
          lineHeight: 1.1,
          letterSpacing: '-0.02em',
          color: ['black', 'grey', 'white']
        },
        highlight: {
          backgroundColor: 'yellow',
          paddingLeft: '0.5em',
          paddingRight: '0.5em',
        },
        code: {
          fontSize: [16, 18],
          fontFamily: 'monospace',
          lineHeight: 1.25
        }
      }
    }

    Responsive props

    Every prop accepts an array of values that make it responsive.

        fontSize: [16, 24, 32],
        color: ['red', 'green', 'blue']

    These are controlled by styled-system's breakpoints and can redefined in your theme object. Learn more about array props.

    Why not Variants?

    Variants in styled-system only accept CSS style objects, limiting the ability to use the responsive features. But, this is a super useful tool, and textStyles and colorStyles are passed to <Text> so they can be used in conjuction.

    // theme.js
    const theme = {
      textStyles: {
        caps: {
          textTransform: 'uppercase',
        }
      },
      typeStyles: {
        heading: {
          fontSize: [32, 48, 64],
          lineHeight: 1.1,
        }
      }
    }
    
    // Component.js
    <Text typeStyle="heading" textStyle="caps">Hello World</Text>

    Install

    npm i @stnew/typography

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    8.44 kB

    Total Files

    7

    Last publish

    Collaborators

    • artofrawr
    • ryanhefner
    • cabe
    • returningsam