htz-theme

Style 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

Installation

``bash
yarn add @haaretz/htz-theme
`

or alternatively,

`bash
npm install --save @haaretz/htz-theme
`

Usage

The default export of @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

- bps (Object) - An immutable MqOptions
object with breakpoint definitions
- bps.width (Object) - An immutable WidthBpsConfig
object with values of boundary points between named width-breakpoints
- bps.misc (Object) - An immutable MiscBpsConfig
object with values named miscellaneous media-features media queries
- fontStacks (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

- color - A colorGetter
function for retrieving color values from the predefined color palette.
- mq - 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 rhythm

cssReset

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';
`

cssReset is a css-like string that can be injected directly inside a