How to use the typography function in typography

To help you get started, we’ve selected a few typography examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Vincit / knex-db-manager / doc / utils / typography.js View on Github external
import Typography from 'typography'
import theme from 'typography-theme-lawton'
import CodePlugin from 'typography-plugin-code'

theme.scaleRatio = 1.618;
theme.plugins = [
  new CodePlugin(),
];

const typography = new Typography(theme)

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles()
}

export default typography
github Takumon / blog / src / utils / typography.js View on Github external
color: '#c85740'
  },
  'a:hover': {
    opacity: '0.7',
    boxShadow: '0 1px 0 0 currentColor'
  },
  'a.gatsby-resp-image-link': {
    boxShadow: 'none',
  },
})



delete Wordpress2016.googleFonts

const typography = new Typography(Wordpress2016)

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles()
}

const { rhythm, scale } = typography;
export { rhythm, scale, typography as default };
github gatsbyjs / gatsby / examples / using-drupal / src / utils / typography.js View on Github external
// Make baseFontSize on mobile 17px.
        html: {
          fontSize: `${(17 / 16) * 100}%`,
        },
      },
      [MOBILE_MEDIA_QUERY]: {
        // Make baseFontSize on mobile 16px.
        html: {
          fontSize: `${(16 / 16) * 100}%`,
        },
      },
    }
  },
}

const typography = new Typography(options)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles()
}

export default typography
github doczjs / gatsby-starter-docz / src / utils / typography.js View on Github external
FairyGates.bodyFontFamily = ['Source Sans Pro']

FairyGates.overrideThemeStyles = () => {
  return {
    a: {
      color: colors.primary,
      background: 'none',
      textShadow: 'none',
    },
    blockquote: {
      borderLeftColor: colors.primary,
    },
  }
}

const typography = new Typography(FairyGates)

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles()
}

export default typography
export const rhythm = typography.rhythm
export const scale = typography.scale
github codesandbox / codesandbox-client / packages / homepage / src / utils / typography.js View on Github external
// Make baseFontSize on mobile 17px.
        html: {
          fontSize: `${(17 / 16) * 100}%`,
        },
      },
      [MOBILE_MEDIA_QUERY]: {
        // Make baseFontSize on mobile 16px.
        html: {
          fontSize: `${(16 / 16) * 100}%`,
        },
      },
    };
  },
};

const typography = new Typography(options);

// Hot reload typography in development.
if (process.env.NODE_ENV !== `production`) {
  typography.injectStyles();
}

export default typography;
github openregister / specification / src / utils / typography.js View on Github external
import Typography from 'typography';
import githubTheme from 'typography-theme-github';

const typography = new Typography(githubTheme);

export default typography;
export const rhythm = typography.rhythm;
github bottenderjs / bottenderjs.github.io / src / utils / typography.js View on Github external
import Typography from 'typography';
import kirkhamTheme from 'typography-theme-kirkham';

const typography = new Typography(
  Object.assign(kirkhamTheme, {
    baseFontSize: '18px',
    headerFontFamily: [
      '-apple-system',
      'BlinkMacSystemFont',
      'Segoe UI',
      'Roboto',
      'Oxygen',
      'Ubuntu',
      'Cantarell',
      'Fira Sans',
      'Droid Sans',
      'Helvetica Neue',
      'sans-serif',
    ],
    bodyFontFamily: [
github reactiflux / reactiflux.com / src / utils / typography.js View on Github external
width: 'calc(100vw - 2.25rem)',
      tableLayout: 'fixed',
      wordWrap: 'break-word',
    },
    '@media (min-width:768px)': {
      table: {
        width: '100%',
      },
    },
    'th:first-child, td:first-child': {
      width: '30%',
    },
  }),
};

const typography = new Typography(options);

export default typography;
github uber / react-vis / www / src / lib / typography.js View on Github external
import Typography from 'typography'
import '../fonts/fonts.css'

export const headerFontFamily = 'UberMove'
export const bodyFontFamily = 'UberMoveText'

const typography = new Typography({
  baseFontSize: '18px',
  baseLineHeight: 1.55,
  headerLineHeight: 1.4,
  headerFontFamily: [headerFontFamily, 'sans-serif'],
  bodyFontFamily: [bodyFontFamily, 'sans-serif'],
  headerColor: 'hsla(0,0%,0%,0.9)',
  bodyColor: 'hsla(0,0%,0%,0.8)',

  overrideStyles: ({rhythm}) => ({
    h1: {
      color: 'hsla(0,0%,0%,0.75)',
      fontFamily: headerFontFamily,
    },
    'h1 code, h2 code, h3 code, h4 code, h5 code, h6 code': {
      fontSize: 'inherit',
    },