Never Paint Mohawks

    @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);

    Keywords

    none

    Install

    npm i @haaretz/hdc-theme

    DownloadsWeekly Downloads

    37

    Version

    0.1.0

    License

    UNLICENSED

    Unpacked Size

    3 MB

    Total Files

    371

    Last publish

    Collaborators

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