import { Meta } from '@storybook/addon-docs';
import '../../src/css/base/_typefaces.scss';

<Meta title="Base/Typescale" />

<style>
  {`
    .sbdocs-p {
        max-width:62ch;
    }
    .swatch {
        margin-top: 0 !important;
        margin-bottom: 48px !important;
    }
    .swatch__sample {
        margin-bottom: 12px;
    }
    .swatch__sample-row {
        font-weight:400 !important;
    }
    .font-size-minus-1 > .swatch__sample-row {
        font-size: 0.875rem;
        line-height: 1.2857142;
    }
    .font-size-minus-2 > .swatch__sample-row {
        font-size: 0.75rem;
        line-height: 1.33333333333;
    }
    .font-size-baseline > .swatch__sample-row {
        font-size: 1rem;
        line-height: 1.3125;
    }
    .font-size-plus-1 > .swatch__sample-row {
        font-size: 1.25rem;
        line-height: 1.33333333333;
    }
    .font-size-plus-2 > .swatch__sample-row {
        font-size: 1.3125rem;
        line-height: 1.33333333333;
    }
    .font-size-plus-3 > .swatch__sample-row {
        font-size: 1.5rem;
        line-height: 1.33333333333;
    }
    .font-size-plus-4 > .swatch__sample-row {
        font-size: 2rem;
        line-height: 1.3125;
    }
    .font-size-plus-5 > .swatch__sample-row {
        font-size: 2.25rem;
        line-height: 1.33333333333;
    }
    .font-size-plus-6 > .swatch__sample-row {
        font-size: 3rem;
        line-height: 1.25;
    }
    .font-size-plus-7 > .swatch__sample-row {
        font-size: 3.375rem;
        line-height: 1.18518518518;
    }
    .font-size-plus-8 > .swatch__sample-row {
        font-size: 3.75rem;
        line-height: 1.2;
    }
    .swatch__label {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    .swatch__label code {
        margin-bottom: 8px !important;
    }
    .swatch__label-pre {
        font-size: 13px;
        font-family: monospace;
    }
  `}
</style>

# Typescale

## Font size minus 2

<div class="swatch">
    <div class="swatch__sample font-size-minus-2">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-minus-2</pre></div>
        <div><pre class="swatch__label-pre">.font-size-minus-2</pre></div>
    </div>
</div>

## Font size minus 1

<div class="swatch">
    <div class="swatch__sample font-size-minus-1">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-minus-1</pre></div>
        <div><pre class="swatch__label-pre">.font-size-minus-1</pre></div>
    </div>
</div>

## Font size baseline

<div class="swatch">
    <div class="swatch__sample font-size-baseline">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-minus-baseline</pre></div>
        <div><pre class="swatch__label-pre">.font-size-minus-baseline</pre></div>
    </div>
</div>

## Font size plus 1

<div class="swatch">
    <div class="swatch__sample font-size-plus-1">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-1</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-1</pre></div>
    </div>
</div>

## Font size plus 2

<div class="swatch">
    <div class="swatch__sample font-size-plus-2">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-2</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-2</pre></div>
    </div>
</div>

## Font size plus 3

<div class="swatch">
    <div class="swatch__sample font-size-plus-3">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-3</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-3</pre></div>
    </div>
</div>

## Font size plus 4

<div class="swatch">
    <div class="swatch__sample font-size-plus-4">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-4</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-4</pre></div>
    </div>
</div>

## Font size plus 5

<div class="swatch">
    <div class="swatch__sample font-size-plus-5">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-5</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-5</pre></div>
    </div>
</div>

## Font size plus 6

<div class="swatch">
    <div class="swatch__sample font-size-plus-6">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-6</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-6</pre></div>
    </div>
</div>

## Font size plus 7

<div class="swatch">
    <div class="swatch__sample font-size-plus-7">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-7</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-7</pre></div>
    </div>
</div>

## Font size plus 8

<div class="swatch">
    <div class="swatch__sample font-size-plus-8">
        <div class="swatch__sample-row">As seen in a broad historical perspective, Modernism’s ascetic, Spartan look still has a towering position of strength and dignity. Modernism’s inherent notion of timeless values as opposed to transient values still greatly appeals to my intellectual being</div>
    </div>
    <div class="swatch__label">
        <div><pre class="swatch__label-pre">@include font-size-plus-8</pre></div>
        <div><pre class="swatch__label-pre">.font-size-plus-8</pre></div>
    </div>
</div>