Theme

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

Installation

Install the module

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|