# Custom css properties
You will need to define custom properties, or import the defaults from this package.

## All
```css
@import 'itp-css/properties/all.css';
```

```javascript
import 'itp-css/properties/all.css';
```

## Animation
```css
@import 'itp-css/properties/animation.css';
```

```javascript
import 'itp-css/properties/animation.css';
```

### Includes

```css
  --animationDurationPrimary
  --animationDurationSecondary
  --animationDurationTertiary
  --animationEasingPrimary
  --animationEasingSecondary
```

## Breakpoints
```css
@import 'itp-css/properties/breakpoints.css';
```

```javascript
import 'itp-css/properties/breakpoints.css';
```

### Includes

```css
  --bp1
  --bp2
  --bp3
  --bp4
  --bp5
```

## Colors
```css
@import 'itp-css/properties/colors.css';
```

```javascript
import 'itp-css/properties/colors.css';
```

### Includes

```css
  --color-black
  --colorNeutral100
  --colorNeutral200
  --colorNeutral-300
  --colorNeutral-400
  --colorNeutral500
  --colorPrimary100
  --colorPrimary200
  --colorPrimary-300
  --colorPrimary-400
  --colorPrimary-500
  --colorPrimary
  --color-white
```

## Form
```css
@import 'itp-css/properties/form.css';
```

```javascript
import 'itp-css/properties/form.css';
```

### Includes

```css
  --fieldsetBorder
  --fieldsetMarginBottom
  --labelFontSize
  --labelLineHeight
  --labelMarginBottom
  --legendFontSize
  --legendLineHeight
  --legendMarginBottom
  --placeholderColor
  --placeholderFontFamily
  --placeholderFontStyle
```

## Page
```css
@import 'itp-css/properties/page.css';
```

```javascript
import 'itp-css/properties/page.css';
```

### Includes

```css
  --htmlBackgroundColor
  --htmlFontFamily
  --htmlFontSize
  --htmlFontWeight
  --htmlLineHeight
  --bodyColor
  --bodySelectionBackgroundColor
  --bodySelectionColor
  --bodySelectionTextShadow
```

## Typography
```css
@import 'itp-css/properties/typography.css';
```

```javascript
import 'itp-css/properties/typography.css';
```

### Includes

#### Modular scale
Configure at http://modularscale.com/

```css
  --ms-1
  --ms-2
  --ms-3
  --ms0
  --ms1
  --ms10
  --ms11
  --ms12
  --ms2
  --ms3
  --ms4
  --ms5
  --ms6
  --ms7
  --ms8
  --ms9
```

#### Font settings
```css
  --fontFamilyPrimary
  --fontFamilySecondary
  --fontSizePrimary
  --fontWeightPrimary
  --fontWeightSecondary
  --fontWeightTertiary
  --lineHeightPrimary
```

#### Baseline unit
The baseline unit is a global unit used to calculate the perfect line-height based on the primary font-size and line-height.

Our default: 16 x 1,5 = 24

```css
  --baseline-unit
```

#### Typography
```css
  --h1FontFamily
  --h1FontSize
  --h1FontWeight
  --h1LineHeight
  --h1MarginBottom

  --h2FontFamily
  --h2FontSize
  --h2FontWeight
  --h2LineHeight
  --h2MarginBottom

  --h3FontFamily
  --h3FontSize
  --h3FontWeight
  --h3LineHeight
  --h3MarginBottom

  --h4FontFamily
  --h4FontSize
  --h4FontWeight
  --h4LineHeight
  --h4MarginBottom

  --h5FontFamily
  --h5FontSize
  --h5FontWeight
  --h5LineHeight
  --h5MarginBottom

  --h6FontFamily
  --h6FontSize
  --h6FontWeight
  --h6LineHeight
  --h6MarginBottom

  --baseFontSize
  --baseIndent
  --baseLineHeight
  --baseMarginBottom

  --blockquoteFontSize
  --blockquoteFontStyle
  --blockquoteLineHeight
  --blockquoteMarginBottom

  --smallFontSize
  --smallLineHeight
  --smallMarginBottom

  --horizontalRuleBorderColor
  --horizontalRuleBorderStyle
  --horizontalRuleBorderWidth
  --horizontalRuleMarginBottom

  --linkColorFocus
  --linkColorHover
  --linkColorVisited
  --linkColor
  --linkDecorationHover
  --linkDecoration
  --linkFontWeight
  --linkOutlineFocus
  --linkOutline
  --linkTransition
```

## UI
```css
@import 'itp-css/properties/ui.css';
```

```javascript
import 'itp-css/properties/ui.css';
```

```css
  --border-style
  --border-width
  --radius
```

---
[Back to overview](../README.md)