@guyn/coat
Version:
Let your HTML put on a coat
120 lines (116 loc) • 20.1 kB
Markdown
# Defaults
There are a few you things you can edit, like the colors and borders.
**All defaults for the theme**
| Variable | Default value |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Colors** | |
| color-primary | `$color-primary` |
| color-secondary | `$color-secondary` |
| color-dark | `$color-dark` |
| color-light | `$color-light` |
| color-white | `$color-white` |
| color-black | `$color-black` |
| **Basics** | |
| padding | 2rem |
| margin | 1em |
| transition-time | 0.3s |
| transition-bezier | ease-in-out |
| transition | 0.3s ease-in-out |
| background-color | `$color-white` |
| max-width | 960px |
| border-radius | 0.25em |
| border-color | `$color-light` |
| border-width | 1px |
| font-family | "-apple-system BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 'sans-serif'" |
| font-color | currentColor |
| **Heading** | |
| heading-step | 0.5 |
| heading-font-family | inherit |
| **Content Links** | |
| link-font-color | `$color-primary` |
| link-background-color | transparent |
| link-font-color-hover | `$color-primary` |
| link-background-color-hover | black |
| link-border-bottom | 2px solid rgba(`$color-primary`,0.25) |
| **List** | |
| list-prefix-border-radius | 0 |
| list-prefix-background-color | transparent |
| list-prefix-width | auto |
| list-prefix-symbol | "--" |
| list-prefix-font-color | `$color-primary` |
| **Code Examples** | |
| code-font-family | "'Consolas','Bitstream Vera Sans Mono' , 'Courier New' , Courier , monospace" |
| code-font-color | `$color-dark` |
| code-font-size | 1em |
| code-selection | `$color-primary` |
| code-line-height | 1 |
| code-border-color | `$color-light` |
| code-padding | 0.5em |
| code-background-color | rgba(`$color-primary`, 0.25) |
| code-border-radius | 0.25em |
| **Code Block** | |
| code-block-font-family | "'Consolas' 'Bitstream Vera Sans Mono' , 'Courier New' ,Courier ,monospace" |
| code-block-font-color | `$color-dark` |
| code-block-font-size | 1em |
| code-block-selection | `$color-primary` |
| code-block-line-height | 2 |
| code-block-border-color | `$color-light` |
| code-block-padding | 0.5em 1em |
| code-block-background-color | #f7f7f7 |
| code-block-border-radius | 0.25em |
| **Tables** | |
| table-border-radius | 0.2em |
| table-background-color | transparent |
| table-text-color | currentColor |
| table-cell-padding | 0.5em 1em |
| table-border | 1px solid `$color-primary` |
| **Header navigation** | |
| header-nav-border | 1px solid rgba(`$color-black` ,0.25) |
| header-nav-background-color | transparent |
| header-nav-background-color-hover | transparent |
| header-nav-font-background-color | transparent |
| header-nav-font-background-color-hover | transparent |
| header-nav-font-color | `$color-dark` |
| header-nav-font-color-hover | `$color-primary` |
| header-nav-font-opacity | 1 |
| header-nav-font-opacity-hover | 1 |
| header-nav-sub-font-background-color | `$color-secondary` |
| header-nav-sub-font-background-color-hover | `$color-black` |
| header-nav-sub-font-opacity | 1 |
| header-nav-sub-font-opacity-hover | 1 |
| header-nav-sub-font-color | `$color-white` |
| header-nav-sub-font-color-hover | `$color-white` |
| header-nav-border-radius | 0.25em |
| header-nav-padding | 1em |
| **Footer navigation** | |
| footer-nav-border | 1px 0 0 0 solid rgba(`$color-black`, 0.25) |
| footer-nav-background-color | transparent |
| footer-nav-font-background-color | transparent |
| footer-nav-font-background-color-hover | transparent |
| footer-nav-font-color | `$color-dark` |
| footer-nav-font-color-hover | `$color-primary` |
| footer-nav-font-opacity | 1 |
| footer-nav-font-opacity-hover | 1 |
| footer-nav-sub-font-background-color | transparent |
| footer-nav-sub-font-background-color-hover | transparent |
| footer-nav-sub-font-opacity | 0.5 |
| footer-nav-sub-font-opacity-hover | 1 |
| footer-nav-sub-font-color | currentColor |
| footer-nav-sub-font-color-hover | `$color-primary` |
| footer-nav-border-radius | 0.25em |
| footer-nav-padding | 1em |
| **Sidebar navigation** | |
| sidebar-nav-background-color | `$color-white` |
| sidebar-nav-font-color | `$color-dark` |
| sidebar-nav-font-color-hover | `$color-primary` |
| sidebar-nav-font-opacity | 1 |
| sidebar-nav-font-opacity-hover | 1 |
| sidebar-nav-font-background-color | `$color-white` |
| sidebar-nav-sub-font-background-color | `$color-white` |
| sidebar-nav-sub-font-background-color-hover | inherit |
| sidebar-nav-sub-font-opacity | 0.5 |
| sidebar-nav-sub-font-opacity-hover | 1 |
| sidebar-nav-sub-font-color | currentColor |
| sidebar-nav-sub-font-color-hover | `$color-primary` |
| sidebar-nav-border-radius | 0.25em |
| sidebar-nav-padding | 1em |