<commit_before>import React, { Component } from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './Theme'
import Header from './components/Header';
import Footer from './components/Footer';
import Demo from './components/Demo';
import { Flex, Box } from 'grid-styled'
import { Div, Main, H3, P, Pre, Code, A } from 'styled-system-html'

class App extends Component {
  render() {
    return (
      <div className="App">
        <ThemeProvider theme={theme}>
          <Div>
            <Header />
            <Main mx="auto" p={4} css={{maxWidth:'1200px'}}>
              <H3 pb={3}>Usage</H3>
              <P pb={2} width={[1,1,1/2]}><Code p={3} bg="gray0" css={{border:'solid 1px',borderColor:theme.colors.gray1}}>npm i styed-system-html</Code></P>
              <Flex flexWrap="wrap" pb={[3,3,3,4]}>
                <Box width={[1,1,1,1/2]} pr={[0,0,0,4]}>
                  <P>Create a <A color="blue" href="https://www.styled-components.com/docs/advanced">theme</A> with <A color="blue" href="http://jxnblk.com/styled-system/api">settings</A> for colors, typography and spacing.</P>
                  <Pre p={3} bg="gray0" css={{border:'solid 1px',borderColor:theme.colors.gray1}}><Code>{`const theme = {
  colors : {'primary':'#071'},
  space : [0,4,8,16,32,64,128]
}`}</Code></Pre>
                </Box>
                <Box width={[1,1,1,1/2]} pl={[0,0,0,4]}>
                  <P>Apply your theme to the element components.</P>
                  <Pre mb={4} p={3} bg="gray0" css={{border:'solid 1px',borderColor:theme.colors.gray1}}><Code>{`<H2 pb={2} color="green">Hello</H2>`}</Code></Pre>
                  <P>For more info, see <A color="blue" fontWeight="bold" href="http://jxnblk.com/styled-system/">Styled System</A> by <A color="blue" fontWeight="bold" href="http://jxnblk.com"><NAME></A>.</P>
                </Box>
              </Flex>
              <H3 pb={3} m={0}>Live Code Example</H3>
              <Demo />
            </Main>
            <Footer />
          </Div>
        </ThemeProvider>
      </div>
    )
  }
}

export default App
<commit_msg>update docs code example<commit_after>import React, { Component } from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './Theme'
import Header from './components/Header';
import Footer from './components/Footer';
import Demo from './components/Demo';
import { Flex, Box } from 'grid-styled'
import { Div, Main, H3, P, Pre, Code, A } from 'styled-system-html'

class App extends Component {
  render() {
    return (
      <div className="App">
        <ThemeProvider theme={theme}>
          <Div>
            <Header />
            <Main mx="auto" p={4} css={{maxWidth:'1200px'}}>
              <H3 pb={3}>Usage</H3>
              <P pb={2} width={[1,1,1/2]}><Code p={3} bg="gray0" css={{border:'solid 1px',borderColor:theme.colors.gray1}}>npm i styed-system-html</Code></P>
              <Flex flexWrap="wrap" pb={[3,3,3,4]}>
                <Box width={[1,1,1,1/2]} pr={[0,0,0,4]}>
                  <P>Create a <A color="blue" href="https://www.styled-components.com/docs/advanced">theme</A> with <A color="blue" href="http://jxnblk.com/styled-system/api">settings</A> for colors, typography and spacing.</P>
                  <Pre p={3} bg="gray0" css={{border:'solid 1px',borderColor:theme.colors.gray1}}><Code>{`const theme = {
  colors : {'primary':'#071'},
  space : [0,4,8,16,32,64,128]
}`}</Code></Pre>
                </Box>
                <Box width={[1,1,1,1/2]} pl={[0,0,0,4]}>
                  <P>Apply your theme to the element components.</P>
                  <Pre mb={4} p={3} bg="gray0" css={{border:'solid 1px',borderColor:theme.colors.gray1}}><Code>{`<H2 pb={2} color="primary">Hello</H2>`}</Code></Pre>
                  <P>For more info, see <A color="blue" fontWeight="bold" href="http://jxnblk.com/styled-system/">Styled System</A> by <A color="blue" fontWeight="bold" href="http://jxnblk.com"><NAME></A>.</P>
                </Box>
              </Flex>
              <H3 pb={3} m={0}>Live Code Example</H3>
              <Demo />
            </Main>
            <Footer />
          </Div>
        </ThemeProvider>
      </div>
    )
  }
}

export default App

{'fraction_non_alphanumeric': 0.202603550295858, 'fraction_numerical': 0.0336094674556213, 'mean_word_length': 2.5275459098497497, 'pattern_counts': {'":': 0, '<': 103, '<?xml version=': 0, '>': 103, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4352806', 'n_tokens_mistral': 1485, 'n_tokens_neox': 1437, 'n_words': 297}