Style theme for haaretz branded apps
npm install @haaretz/htz-themeStyle theme for haaretz branded apps
Haaretz applications use Fela for styling components, and this package is
designed to integrate with that workflow, specifically through a themeProvider. While it is
possible that htz-theme will work out of the box with other CSS-in-JS solutions, please take into
account that your millage may vary.
Table of Contents
- Installation
- Usage
- Properties
- Methods
- cssReset
``bash`
yarn add @haaretz/htz-theme
or alternatively,
`bash`
npm install --save @haaretz/htz-theme
is a theme object meant to be used for styling
UIs in line with Haaretz brand guidelines. It contains several methods and properties:`js static
import htzTheme from '@haaretz/htz-theme'
`$3
* (Object) - An immutable MqOptions
object with breakpoint definitions
* (Object) - An immutable WidthBpsConfig
object with values of boundary points between named width-breakpoints
* bps.misc (Object) - An immutable
object with values named miscellaneous media-features media queries
* (Object) - An object containing font-family stacks for different use cases
* direction (rtl) - The application's flow direction
* typeConf (Object) - An immutable TypeConf
object per-breakpoint typographic and vertical-rhythm values$3
*
- A colorGetter
function for retrieving color values from the predefined color palette.
* - A media-query function,
which intelligently returns a media-query scoped css-in-js object based on breakpoints defined
in [theme.bps]()
* pxToRem - A function that
converts px values to rem
at given breakpoints while accounting to changes in vertical rhythm
* type - A Typesetter
function that returns a CSS-in-JS object of typographic styles conforming to a global predefined
typographic scale and vertical rhythmcssReset
In addition to the default theme object,
htz-theme also exports a secondary cssReset module,
which helps reset default user-agent styles and provide a clear canvas, so to speak, as a basis to
build upon.`js static
import {cssReset} from '@haaretz/htz-theme';
` is a css-like string that can be injected directly inside a