Theme

Theme your Teft design to better reflect your product’s brand.

Installation

Install the module

``bash
npm install @teft/theme
`

Variables

|Name|Default value|Explanation|
|-|-|-|
|--teft-theme-site-width|75rem|Width of the site. Also used to define "wide" elements in the WordPress editor|
|--teft-theme-content-width|36rem|Width of the content, ex paragraphs, images...|
|--teft-theme-site-padding|3rem|How much padding there should be from the browser window to the site|
|--teft-theme-gap|3rem|Global gap variable used in ex. defining the gap between columns|
|--teft-theme-block-margin|5rem|Margin between blocks|
|--teft-theme-negative-block-margin|-3rem|Move blocks closer to eachother. Ex two paragraph block don't want the full block margin (5rem - 3rem = 2rem)|
|--teft-theme-primary-color|#1897ec|Primary color|
|--teft-theme-on-primary-color|#fff|Color used if primary color is the background color|
|--teft-theme-secondary-color|#e9e9e9|Secondary color|
|--teft-theme-on-secondary-color|#000|Color used if secondary color is the background color|
|--teft-theme-body-font-color|#222|Main body font color|
|--teft-theme-header-font-color|var(--teft-theme-body-font-color)|Main heading font color|
|--teft-theme-alert-color|#c60f13|Alert color|
|--teft-theme-on-alert-color|#fff|Color used if alert color is the background color|
|--teft-theme-success-color|#5da423|Success color|
|--teft-theme-on-success-color|#fff|Color used if success color is the background color|
|--teft-theme-warning-color|#ffae00|Warning color|
|--teft-theme-on-warning-color|#fff|Color used if warning color is the background color|
|--teft-theme-disabled-color|#ccc|Disabled color|
|--teft-theme-on-disabled-color|#fff`|Color used if disabled color is the background color|