How to use @theme-ui/typography - 5 common examples

To help you get started, we’ve selected a few @theme-ui/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 doczjs / docz / core / gatsby-theme-docz / src / theme / index.js View on Github external
import moraga from 'typography-theme-moraga'
import { toTheme } from '@theme-ui/typography'
import { merge } from 'lodash/fp'

import * as modes from './modes'
import prism from './prism'
import styles from './styles'

moraga.headerWeight = 700
const typography = toTheme(moraga)

export default merge(typography, {
  initialColorMode: 'light',
  // Show errors above playground editor
  showLiveError: true,
  // Show preview of the code inside playground
  showLivePreview: true,
  // Show editor when a playground is rendered
  showPlaygroundEditor: true,
  // Show dark/light mode switch toggle in header
  showDarkModeSwitch: true,
  // Display edit this page button on every page
  showMarkdownEditButton: true,
  // Wrap the playground editor and preview in iframes to avoid style/script collisions
  useScopingInPlayground: false,
  colors: {
github doczjs / docz / core / docz-components / src / theme / index.ts View on Github external
//@ts-ignore
import moraga from 'typography-theme-moraga';
//@ts-ignore
import { toTheme } from '@theme-ui/typography';
import { merge, get } from 'lodash';

import * as modes from './modes';
import prism from './prism';
import { Theme } from '../types';

moraga.headerWeight = 700;
const typography = toTheme(moraga);

const getTheme = (theme?: Theme): Theme =>
  merge(theme, typography, {
    prism,
    initialColorMode: 'light',
    colors: {
      ...modes.light,
      modes: {
        dark: modes.dark,
      },
    },
    fonts: {
      monospace: 'Inconsolata',
    },
    fontSizes: [12, 14, 16, 20, 24, 32, 48, 64],
    fontWeights: {
github system-ui / theme-ui / packages / docs / src / components / typography-layout.js View on Github external
export default props => {
  const [themeName, setTheme] = useState(themeNames[0])

  const typographyTheme = typographyThemes[themeName]
  const theme = toTheme(typographyTheme)
  theme.styles.h1 = {
    fontSize: [5, 5],
  }

  return (
    <div>
      
         {
            setTheme(e.target.value)</div>
github gatsbyjs / gatsby / packages / gatsby-theme-blog / src / gatsby-plugin-theme-ui / typography.js View on Github external
import "typeface-montserrat"
import "typeface-merriweather"
import { toTheme } from "@theme-ui/typography"
import wordpress2016 from "typography-theme-wordpress-2016"

export default toTheme(wordpress2016)
github pomber / site / src / gatsby-plugin-theme-ui / index.js View on Github external
import "typeface-montserrat"
import "typeface-merriweather"
import { toTheme } from "@theme-ui/typography"
import typography from "typography-theme-wordpress-2016"
import merge from "deepmerge"

const typographyTheme = toTheme(typography)

const innerMargin = 85
const content = 420

const darkerBlue = "#0f8f5e"
const lightBlue = "#aaf6d9"
const lighterBlue = "#ebfcf6"

const theme = merge.all([
  typographyTheme,
  {
    colors: {
      background: "#FAF9F5",
      text: "rgb(51,51,51)",
      darkBackground: "#202226",
      lightText: "#DFDDD9",

@theme-ui/typography

Utilities for integrating Typography.js themes with Theme UI

MIT
Latest version published 22 days ago

Package Health Score

93 / 100
Full package analysis

Popular @theme-ui/typography functions