@haaretz/hdc-theme

0.1.0 • Public • Published

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

yarn add @haaretz/htz-theme

or alternatively,

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:

import htzTheme from '@haaretz/htz-theme'

Properties

  • 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

Methods

  • 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.

import {cssReset} from '@haaretz/htz-theme';

cssReset is a css-like string that can be injected directly inside a <style>, either using the Fela renderer's renderStatic() method:

renderer.renderStatic(cssReset);

Readme

Keywords

none

Package Sidebar

Install

npm i @haaretz/hdc-theme

Weekly Downloads

7

Version

0.1.0

License

UNLICENSED

Unpacked Size

3 MB

Total Files

371

Last publish

Collaborators

  • eranm6
  • haaretz-owner
  • maozzadok
  • tbanin
  • txhawks