# PostNord, Sass Guidelines

PostNords colors, fonts and resets used across our apps.

## SCSS

Remember to use SASS 1.8.0 or above. Change @import statements to @use.

### PostNord CSS resets

Resets 1 rem to 10px to make it easier to work with. **Mandatory if you want to use our web components.**

```css
@use 'node_modules/pn-design-assets/pn-assets/styles/_pn-resets';
```

### PostNord fonts

Import PostNord-Sans fonts in your app.

```css
@use 'node_modules/pn-design-assets/pn-assets/styles/_pn-fonts';
```

### PostNord typography classes

This is all of the font sizes that we've decided on in the design team. In short it's sensible default sizes for all text elements and a bunch of helper classes to align our typography standards cross site.

```css
@use 'node_modules/pn-design-assets/pn-assets/styles/_pn-typography';
```

### Color variables

Our color palette, [you can get an overview of our colors in Storybook](https://portal.postnord.com/web-components/?path=/docs/components-design-tokens-colors--docs).

```css
@use 'node_modules/pn-design-assets/pn-assets/styles/_pn-colors' as *;
.class {
	color: $blue900;
}

@use 'node_modules/pn-design-assets/pn-assets/styles/_pn-colors';
.class {
	color: pn-colors.$blue900;
}

@use 'node_modules/pn-design-assets/pn-assets/styles/_pn-colors' as
	my-custom-name;
.class {
	color: my-custom-name.$blue900;
}
```

### Import all at once

You can import all of our CSS and SCSS files in one go.

```css
@use 'node_modules/pn-design-assets/pn-assets/styles/pn-styles';
```

## SVG & colors assets

You can import our SVG icons and illustrations from this repo. The raw SVG files can be found in `pn-design-assets/pn-assets/illustrations/circle/` and `pn-design-assets/pn-assets/icons/`.
We have provided typed exports of all SVG content with declaration typescript maps.

### Icons

All icons are exported from `pn-design-assets/pn-assets/icons.js` file, we also provide a camelCase version named `iconsCamel.js`

```js
import { arrow_right } from 'pn-design-assets/pn-assets/icons'
import { arrowRight } from 'pn-design-assets/pn-assets/iconsCamel'
// or
import {
	arrow_right,
	arrowRight
} from 'pn-design-assets/pn-assets/icons/arrow_right'
```

### Flags

All flags are exported from `pn-design-assets/pn-assets/flags.js` file, we also provide a camelCase version named `flagsCamel.js`

```js
import { se_flag } from 'pn-design-assets/pn-assets/flags'
import { seFlag } from 'pn-design-assets/pn-assets/flagsCamel'
// or
import { se_flag, seFlag } from 'pn-design-assets/pn-assets/flags/se_flag'
```

### Illustrations

All illustrations are exported from `pn-design-assets/pn-assets/illustrations.js` file, we also provide a camelCase version named `illustrationsCamel.js`

```js
import { company_settings } from 'pn-design-assets/pn-assets/illustrations'
import { companySettings } from 'pn-design-assets/pn-assets/illustrationsCamel'
// or
import {
	company_settings,
	companySettings
} from 'pn-design-assets/pn-assets/flags/company_settings'
```

### Colors

We have all of our colors in the SCSS files mentioned above, but sometimes you need them in your javascript code.

```js
import { blue700 } from 'pn-design-assets/pn-assets/colors'
```

## Typography classes

| Class  | Desktop/Mobile | Line height | Element      |
| ------ | -------------- | ----------- | ------------ |
| pn-2xl | 48px / 32px    | 1.1         |              |
| pn-xl  | 32px / 30px    | 1.1         | `<h1>`       |
| pn-l   | 24px / 24px    | 1.1         | `<h2>`       |
| pn-m   | 20px / 20px    | 1.1         | `<h3>`       |
| pn-s   | 16px / 16px    | 1.5         | `<p>`/`<h4>` |
| pn-xs  | 14px / 14px    | 1.5         |              |
| pn-2xs | 12px / 12px    | 1.5         | `<small>`    |

## Optimize SCSS in your application

Many build tools allow you to append SCSS variables that are exposed to to all your SCSS files/components.
Make sure you only import `_pn-colors.scss`, as it is the only one containing our SCSS variables.
Including `pn-styles.scss` in that step would import the variables, fonts, resets and typography rules in every single component/SCSS file in your project.