# Theme

> source: [scss/variables](../../src/scss/_variables.scss)

The theme variables is for setting basic style in SCSS. This document is guide for writing custom-theme variables file.

## Fonts

### font-family

- `$font-base`: Base text font-family. e.g., sans-serif.
- `$font-accent`: Font-family for displaying accent such as title. e.g., serif.

### font-size

- `$font-size`
- `$font-size-small`
- `$font-size-large`

### font-weight

- `$font-weight-light`
- `$font-weight-normal`
- `$font-weight-bold`

## Colors

### theme-colors

- `$primary-color`
- `$primary-color-accent`
- `$secondary-color`

### background-colors

- `$background-color`
- `$background-color-invert`
- `$background-color-shade`

### text-colors

- `$text-color`
- `$text-color-invert`
- `$text-color-weak`
- `$text-color-strong`
- `$text-color-light`
- `$text-color-dark`
- `$text-color-middle`

### color-variables

- `$default-color`
- `$light-color`
- `$dark-color`
- `$shade-color`
- `$info-color`
- `$success-color`
- `$danger-color`
- `$error-color`
- `$warning-color`
- `$link-color`
- `$shadow-color`
- `$border-color`
- `$disabled-color`

### [color-set](color-set.md)

## Misc

- `$default-focus-outline`
- `$outline-color`
- `$body-line-height`
- `$position-default-offset`

### transition

- `$transition-time`
- `$transition-timing-function`
- `$transition-all`

### border-radius

- `$radius-normal`
- `$radius-small`
- `$radius-large`
- `$radius-button`

### box-shadow

- `$shadow-near`
- `$shadow-normal`
- `$shadow-far`
- `$shadow-inset-near`
- `$shadow-inset-normal`
- `$shadow-inset-far`