# Text

## Basic usage

```js
<SilkeBox gap="s" column>
  <SilkeText>span - Default text uses span tag</SilkeText>
  <SilkeText kind="p">p - Same style as default using p tag</SilkeText>
  <SilkeText kind="small">small - The quick brown fox jumps</SilkeText>
</SilkeBox>
```

```js
<SilkeBox gap="s" column>
  <SilkeText size="large" kind="p">
    This is a paragraph, Large text
  </SilkeText>
  <SilkeTextSmall kind="p">This is a paragraph, SilkeTextSmall</SilkeTextSmall>
  <SilkeTextMicro kind="p">This is a paragraph, SilkeTextMicro</SilkeTextMicro>
</SilkeBox>
```

## Brand font (Roboto Flex - Different font variation settings)

```js
<SilkeBox gap="s" column>
  <SilkeText brandFont size="large" kind="p">
    This is a paragraph, Large text
  </SilkeText>
  <SilkeTextSmall brandFont kind="p">
    This is a paragraph, SilkeTextSmall
  </SilkeTextSmall>
  <SilkeTextMicro brandFont kind="p">
    This is a paragraph, SilkeTextMicro
  </SilkeTextMicro>
</SilkeBox>
```

## Titles

Titles use alternative Roboto Flex font-family.

```js
<SilkeBox gap="s" column>
  <SilkeTitle kind="xl" tag="h1">
    H1 - The quick brown fox jumps
  </SilkeTitle>
  <SilkeTitle kind="l" tag="h1">
    H1 - The quick brown fox jumps
  </SilkeTitle>
  <SilkeTitle kind="m" tag="h1">
    H1 - The quick brown fox jumps
  </SilkeTitle>
  <SilkeTitle kind="s" tag="h1">
    H1 - The quick brown fox jumps
  </SilkeTitle>
  <SilkeTitle kind="xs" tag="h1">
    H1 - The quick brown fox jumps
  </SilkeTitle>
</SilkeBox>
```

## Title shorthands

Titles can also be created with these shorthands. Tag prop specifies HTML tag.

```js
<>
  <SilkeTitleXlarge>The quick brown fox jumps</SilkeTitleXlarge>
  <SilkeTitleLarge>The quick brown fox jumps</SilkeTitleLarge>
  <SilkeTitleXlarge tag="h5">The quick brown fox jumps, h5 tag</SilkeTitleXlarge>
  <SilkeTitleLarge tag="h3">The quick brown fox jumps, h3 tag</SilkeTitleLarge>
  <SilkeTitleMedium tag="h1">The quick brown fox jumps, h1 tag</SilkeTitleMedium>
  <SilkeTitleSmall tag="h4">The quick brown fox jumps, h4 tag</SilkeTitleSmall>
</>
```

## Text color

```js
<SilkeBox gap column>
  <SilkeText>Default text color</SilkeText>
  <SilkeText color="neutral-80">Secondary text color</SilkeText>
  <SilkeText color="primary">Primary text color</SilkeText>
  <SilkeText color="error-30">Error text color</SilkeText>
  <SilkeText color="neutral-40">Disabled text color</SilkeText>
</SilkeBox>
```

## Font weight

```js
<SilkeBox gap column>
  <SilkeText>Default font weight</SilkeText>
  <SilkeText weight="light">Light font weight</SilkeText>
  <SilkeText weight="strong">Strong font weight</SilkeText>
</SilkeBox>
```

## Elipsis overflow

```js
<SilkeBox style={{ width: 500 }}>
  {[1, 2, 3, 4, 5].map((i) => (
    <SilkeText flex overflow>
      This text is to wide for this box
    </SilkeText>
  ))}
</SilkeBox>
```

## Playground

```js
const [color, setColor] = React.useState(null);
const [weight, setWeight] = React.useState(null);

<SilkeBox gap column>
  <SilkeBox gap>
    <SilkeBox>
      {[null, 'primary', 'error'].map((c) => (
        <SilkeButton
          label={c || 'default'}
          kind={color === c ? 'primary' : 'secondary'}
          onClick={() => setColor(c)}
        />
      ))}
    </SilkeBox>
    <SilkeBox>
      {[null, 'light', 'strong'].map((c) => (
        <SilkeButton
          label={c || 'default'}
          kind={color === c ? 'primary' : 'secondary'}
          onClick={() => setColor(c)}
        />
      ))}
    </SilkeBox>
  </SilkeBox>
  {['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'small'].map((kind) => (
    <SilkeText key={kind} kind={kind} color={color} weight={weight}>
      {kind} Weight: {weight || 'default'} Color: {color || 'default'}
    </SilkeText>
  ))}
</SilkeBox>;
```

### HTML formatted text

Not sure what to do here but made, currently silke will apply to the real blocks through the core css

TODO: Review the margin rules for text blocks

```js
<>
  <h1>H1 - The quick brown fox jumps</h1>
  <h2>H2 - The quick brown fox jumps</h2>
  <h3>H3 - The quick brown fox jumps</h3>
  <h4>H4 - The quick brown fox jumps</h4>
  <h5>H5 - The quick brown fox jumps</h5>

  <p>p - The quick brown fox jumps</p>
  <p>
    <small>Small - The quick brown fox jumps</small>
  </p>
  <p>
    <a>A - Not visited link</a> <a href="#">A - Visited link</a>
  </p>
  <p>
    hr - Horizontal rule before
    <hr />
    hr - Horizontal rule after
  </p>

  <pre>pre - {'<pre>hello world</pre>'}</pre>
  <blockquote>blockquote - A quote about something</blockquote>

  <ul>
    <li>ul-li - Unordered item 1</li>
    <li>ul-li - Unordered item 2</li>
  </ul>
  <ol>
    <li>ol-li - Ordered item 1</li>
    <li>ol-li - Ordered item 2</li>
  </ol>
</>
```

### Black and white, white and black, big and small

```js
<SilkeBox>
  <SilkeBox bg="gray10" flex pad column>
    <SilkeText color="dark" size="large">
      Positive applications
    </SilkeText>
    <SilkeText color="dark" size="micro">
      Micro font size
    </SilkeText>
    <SilkeText color="dark" size="small">
      Small font size
    </SilkeText>
    <SilkeText color="dark" size="base">
      Base font size is the default
    </SilkeText>
    <SilkeText color="dark" size="large">
      Large font size
    </SilkeText>
  </SilkeBox>
  <SilkeBox bg="neutral-5" flex pad column>
    <SilkeText size="large">Negative applications</SilkeText>
    <SilkeText size="micro">Micro font size</SilkeText>
    <SilkeText size="small">Small font size</SilkeText>
    <SilkeText size="base">Base font size is the default</SilkeText>
    <SilkeText size="large">Large font size</SilkeText>
  </SilkeBox>
</SilkeBox>
```