import { Meta, Story } from "@storybook/addon-docs/blocks";
import { typography } from "./typography";

<Meta title="Getting Started/Development Guide/Typography" />

<style>{`
.docblock-typeset {
  border-radius: 4px;
  background: #ffffff;
  box-shadow: rgba(0,0,0,0.10) 0 1px 3px 0;
  border: 1px solid rgba(0,0,0,.1);
  margin: 25px 0 40px;
  padding: 30px 20px;
}

.size-row {
  margin-bottom: 1rem;
  display: flex;
  align-items: baseline;
}

.size-row--label {
  margin-right: 30px;
  color: var(--c-gray);
  font-size: 12px;
  min-width: 105px;
}
`}</style>

# Typography

Below is the information about StorefrontUI's default typography.

## Font

- Primary: Roboto (`--font-family--primary`)
- Secondary: Raleway (`--font-family--secondary`)

## Weight

- 300 (`--font-weight--light`)
- 400 (`--font-weight--normal`)
- 500 (`--font-weight--medium`)
- 600 (`--font-weight--semibold`)
- 700 (`--font-weight--bold`)

## Sizes

You can modify the given standard sizes using the corresponding CSS variables:

<div class="docblock-typeset">
  {Object.keys(typography.size).map((key) => (
    <div class="size-row">
      <div class="size-row--label">--font-size--{key}</div>
      <div
        style={{
          lineHeight: 1.2,
          fontWeight: 500,
          fontSize: typography.size[key],
        }}
      >
        Was he a beast if music could move him so?
      </div>
    </div>
  ))}
</div>

The sizes are defined [here](https://github.com/vuestorefront/storefront-ui/blob/develop/packages/shared/styles/variables/_typography.scss)

## Icon sizes

<Story id="components-atoms-icon--icon-sizes" />

Each size used from this list for the icon will be converted to a proper size class, following the syntax `sf-icon--size-<size>`. For example `sf-icon--size-xxs`. These classes for sizes are defined [here](https://github.com/DivanteLtd/storefront-ui/blob/develop/packages/shared/styles/components/atoms/SfIcon.scss)

You can apply any size from the list above to an icon, simply by passing the size's label to `size` prop, e.g

```html
<sf-icon size="xxs" />
```

or by importing the list of icon sizes from `@storefront-ui/shared/variables/sizes` and using the desired size variable, e.g

```html
<template>
  <sf-icon :size="iconSize" />
</template>
<script>
  import { sizes } from "@storefront-ui/shared/variables/sizes";
  export default {
    data() {
      return {
        iconSize: sizes.xxs,
      };
    },
  };
</script>
```

More information on `SfIcon` can be found [here](?path=/story/atoms-icon--common)