5.1.2 • Published 2 months ago
@teft/theme v5.1.2
Theme
Theme your Teft design to better reflect your product’s brand.
Installation
Install the module
npm install @teft/themeVariables
| 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 |