import { Meta, Typeset, Unstyled, Source } from '@storybook/blocks';
import { Example } from '../doc-blocks';
import '../../less/astro/main.less';

<Meta title="Core/Typography" />

export const typography = {
  type: {
    primary: 'Roboto'
  },
  weight: {
    regular: '400',
    bold: '700',
    extrabold: '800',
    black: '900',
  },
  size: {
  }
}

export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

# Typography

This page goes over the typography styles of Solstice Assets.

## Type Scale

The root `font-size` is 10px. Therefore, 1rem = 10px.

However, the default `font-size` of text is 14px. This is applied to the `<body>`
and all paragraphs. 

<table>
  <thead>
    <tr>
      <th>Scale</th>
      <th>Size</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <Unstyled>
          <h1>Heading 1</h1>
        </Unstyled>
      </td>
      <td>
        4rem (40px)
      </td>
    </tr>
    <tr>
      <td>
        <Unstyled>
          <h2>Heading 2</h2>
        </Unstyled>
      </td>
      <td>
        3rem (30px)
      </td>
    </tr>
    <tr>
      <td>
        <Unstyled>
          <h3>Heading 3</h3>
        </Unstyled>
      </td>
      <td>
        2.4rem (24px)
      </td>
    </tr>
  </tbody>
</table>

## Block Text Elements

### Paragraph

A paragraph can be made with the `<p>` tag. Paragraphs receive a bottom margin
of half their computed `line-height` (10px by default).
 

<Example>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in fermentum
  leo. Phasellus congue semper sapien. Quisque vitae est arcu. Nam eget commodo
  purus. Etiam at rhoncus augue, et tristique est. Duis ut ipsum condimentum,
  elementum velit a, pulvinar diam. Mauris justo risus, commodo quis consequat
  sed, aliquam et justo. Phasellus a commodo arcu. Integer imperdiet faucibus
  ex non ullamcorper.
</Example>

#### Leads

Make a paragraph stand out by adding the `lead` class.

<Example>
  <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
</Example>

## Inline Text Elements

### Italics

For emphasizing a snippet of text with italics, use the `<em>` tag.

<Example>
  <em>Lorem ipsum dolor sit amet.</em>
</Example>

<Unstyled>
  <div class="alert alert-info margin-y-20">
    Feel free to use the `<i>` tag. It is mostly used for voice, technical
    terms, etc.
  </div>
</Unstyled>

### Bold Text

For emphasizing a snippet of text with a heavier font weight, use the `<strong>` tag.

<Example>
  <strong>Lorem ipsum dolor sit amet.</strong>
</Example>

<Unstyled>
  <div class="alert alert-info margin-y-20">
    Feel free to use the `<b>` tag.
    It is meant to highlight words or phrases without conveying additional
    importance.
  </div>
</Unstyled>

### Underlined Text

To underline text, use the `<u>` tag.

<Example>
  <u>Lorem ipsum dolor sit amet.</u>
</Example>

### Marked Text

You can use the mark tag, `<mark>`, to highlight text.

<Example>
  <>Lorem ipsum <mark>dolor</mark> sit amet.</>
</Example>

### Inserted Text

To indicate that text has been added to the document, use the `<ins>` tag.

<Example>
  <ins>Lorem ipsum dolor sit amet.</ins>
</Example>

### Deleted Text

To indicate that text has been deleted, use the `<del>` tag.

<Example>
  <del>Lorem ipsum dolor sit amet.</del>
</Example>

### Small Text

For de-emphasizing inline or blocks of text, use the `<small>` tag to set text
at 85% the size of the parent. Heading elements receive their own font-size for
nested `<small>` elements.

You may alternatively use an inline element with `.small` in place of any
`<small>`.

<Example>
  <small>Lorem ipsum dolor sit amet.</small>
</Example>

### Links

<Example>
  <a href="https://www.eclipse.org/" target="_blank">eclipse.org</a>
</Example>

