import { Meta } from "@storybook/addon-docs";
import Code from "./assets/code-brackets.svg";
import Colors from "./assets/colors.svg";
import Comments from "./assets/comments.svg";
import Direction from "./assets/direction.svg";
import Flow from "./assets/flow.svg";
import Plugin from "./assets/plugin.svg";
import Repo from "./assets/repo.svg";
import StackAlt from "./assets/stackalt.svg";

<Meta title="Guidelines/Typography" />

<style>{`
  .line-length-demo {
    width: 100%;
    overflow: hidden;
    padding: var(--spacing-4);
    border: 1px solid var(--neutral-50);
  }
  .line-length-demo-inner {
    position: relative;
    padding-top: var(--spacing-8);
  }
  .line-length-demo-40 {
    position: absolute;
    top: var(--spacing-0);
    left: 270px;
    background-color: var(--warning-500);
    color: var(--white);
    display: flex;
    line-height: 1;
    height: var(--spacing-7);
    width: var(--spacing-7);
    border-radius: var(--radius-full);
    justify-content: center;
    align-items: center;
    font-size: var(--sizing-sm);
    font-weight: 700;
    transform: translateX(var(--spacing-neg-3-5));
  }
  .line-length-demo-40::after {
    content: "";
    width: 1px;
    height: var(--spacing-10);
    position: absolute;
    top: 100%;
    background-color: var(--warning-500);
  }
  .line-length-demo-60 {
    position: absolute;
    top: var(--spacing-0);
    left: 440px;
    background-color: var(--success-500);
    color: var(--white);
    display: flex;
    line-height: 1;
    height: var(--spacing-7);
    width: var(--spacing-7);
    border-radius: var(--radius-full);
    justify-content: center;
    align-items: center;
    font-size: var(--sizing-sm);
    font-weight: 700;
    transform: translateX(var(--spacing-neg-3-5));
  }
  .line-length-demo-60::after {
    content: "";
    width: 1px;
    height: var(--spacing-10);
    position: absolute;
    top: 100%;
    background-color: var(--success-500);
  }
  .line-length-demo-80 {
    position: absolute;
    top: var(--spacing-0);
    left: 550px;
    background-color: var(--success-500);
    color: var(--white);
    display: flex;
    line-height: 1;
    height: var(--spacing-7);
    width: var(--spacing-7);
    border-radius: var(--radius-full);
    justify-content: center;
    align-items: center;
    font-size: var(--sizing-sm);
    font-weight: 700;
    transform: translateX(var(--spacing-neg-3-5));
  }
  .line-length-demo-80::after {
    content: "";
    width: 1px;
    height: var(--spacing-10);
    position: absolute;
    top: 100%;
    background-color: var(--success-500);
  }
  .line-length-demo-100 {
    position: absolute;
    top: var(--spacing-0);
    left: 680px;
    background-color: var(--danger-500);
    color: var(--white);
    display: flex;
    line-height: 1;
    height: var(--spacing-7);
    width: var(--spacing-7);
    border-radius: var(--radius-full);
    justify-content: center;
    align-items: center;
    font-size: var(--sizing-sm);
    font-weight: 700;
    transform: translateX(var(--spacing-neg-3-5));
  }
  .line-length-demo-100::after {
    content: "";
    width: 1px;
    height: var(--spacing-10);
    position: absolute;
    top: 100%;
    background-color: var(--danger-500);
  }
  .line-length-demo p {
    margin: 0;
    resize: horizontal;
    overflow: auto;
    width: 440px;
    max-width: 100%;
  }

  .mono-demo {
    font-family: var(--font-mono) !important;
  }



  
`}</style>

# Typography

Luminary Design System provides a constrained, purposeful set of typographic styles that we use to present user interface and content as clearly and efficiently as possible.

## Typographic scale

We use the [following typographic scale](?path=/docs/tokens-font-size--page) to communicate visual hierarchy in text and to create a predictable sizing for headers and text content. Our typographic scale is purposefully harmonious with our spacing scale. The base font-size is 16px.

## Line length

Set the reading environment to suit the reader. Shorter lines are usually more comfortable to the reader. As the line length increases, the user’s eye has to travel further from the end of one line to the beginning of the next, making it harder to track their progress vertically. Aim for an average line length of 50–90 characters, including spaces.

Please keep in mind that our users can control the application layout width, meaning that a line length can not always be specified. For this reason, it’s good practice to design for an ideal line length range, and use responsive design techniques to anticipate different contexts.

<div className="line-length-demo">
  <div className="line-length-demo-inner">
    <span class="line-length-demo-40">40</span>
    <span class="line-length-demo-60">60</span>
    <span class="line-length-demo-80">80</span>
    <span class="line-length-demo-100">100</span>
    <p>
      Bacon ipsum dolor amet pork loin shankle pork chop, sausage tongue pig
      turducken flank ham pork belly cow landjaeger swine jerky alcatra.
      Hamburger fatback ham hock pork jerky shoulder. Strip steak tenderloin
      jerky short ribs brisket. Tri-tip bacon pig kielbasa. Tongue drumstick
      burgdoggen boudin frankfurter. Porchetta beef ribs picanha, jowl pig
      prosciutto turducken shoulder tail spare ribs tri-tip chuck.
    </p>
  </div>
</div>

## Brand Typefaces

@TODO Define fonts used for marketing related material (landing pages, marketing sites, social media etc)

## Product Typefaces

### Main font: Inter

For digital products we use [**Inter**](https://rsms.me/inter/) for both Airpool and Stream. Inter, which is carefully crafted and designed for computer screens specifically. It features a tall x-height to aid in readability of mixed-case and lower-case text. Several OpenType features are provided as well, like contextual alternates.

### Supportive Monospace font: Azeret Mono

For numeric values that are stacked, a Monospace font works better for readability. For this we've added a Monospace font that works together with Inter.

<span className="mono-demo">123.00.123.1234567890 </span>
<span> Normal Text</span>

Both fonts are imported by default, so no need to import them in your app.