@dering-hall/dh-theme v0.3.7

Dering Hall's Theme

Usage

// Theme
import theme from '@dering-hall/dh-theme';

Available theme object:

{
  "buttons": {
    "primary": {
      "color": "#242424",
      "backgroundColor": "transparent",
      "border": "1px solid #242424",
      "hover": {
        "backgroundColor": "#242424",
        "color": "#fff",
        "borderColor": "#242424"
      },
      "disabled": {
        "backgroundColor": "rgba(36,36,36, 0.5)",
        "color": "#fff",
        "borderColor": "rgba(36,36,36, 0.5)"
      }
    },
    "primaryWhite": {
      "color": "#fff",
      "backgroundColor": "transparent",
      "border": "1px solid #fff",
      "hover": {
        "backgroundColor": "#fff",
        "color": "#242424"
      }
    },
    "primaryInverted": {
      "color": "#fff",
      "backgroundColor": "#242424",
      "border": "1px solid #242424",
      "hover": {
        "backgroundColor": "transparent",
        "color": "#242424",
        "borderColor": "#242424"
      }
    },
    "secondary": {
      "borderColor": "#6d6d6a",
      "color": "#242424",
      "backgroundColor": "transparent",
      "hover": {
        "borderColor": "#242424"
      },
      "disabled": {
        "color": "rgba(109,109,106, 0.5)",
        "borderColor": "rgba(109,109,106, 0.5)"
      }
    }
  },
  "text": {
    "primary": "#242424",
    "secondary": "#6d6d6a"
  },
  "links": {
    "color": "#242424"
  },
  "forms": {
    "input": {
      "borderColor": "#cdcbc5",
      "bgColor": "#f9f8f7"
    },
    "placeholder": {
      "color": "#d4d4d4"
    }
  },
  "colors": {
    "primary": {
      "black": "#242424",
      "red": "#b33232",
      "white": "#fff"
    },
    "secondary": {
      "beige": "#f5f3eb",
      "blue": "#273050",
      "blueGreen": "#d6d9d5",
      "gold": "#af9b79",
      "lightGold": "#b8a98b",
      "grey": "#ece9e4",
      "darkGrey": "#7d8087",
      "taupe": "#cdcbc5"
    },
    "stroke": "#cdcbc5"
  },
  "typography": {
    "serif": "Starling Book, serif",
    "sansSerif": "Monument Grotesk, sans-serif",
    "h1": {
      "fontFamily": "Starling Book, serif",
      "fontSize": 135,
      "lineHeight": 1,
      "letterSpacing": -5
    },
    "h1Alt": {
      "fontFamily": "Monument Grotesk, sans-serif",
      "fontSize": 130,
      "lineHeight": "125px",
      "letterSpacing": -3
    },
    "h2": {
      "fontFamily": "Starling Book, serif",
      "fontSize": 75,
      "lineHeight": 1,
      "letterSpacing": -2.7
    },
    "h2Alt": {
      "fontFamily": "Starling Book, serif",
      "fontSize": 33,
      "lineHeight": "41px",
      "letterSpacing": -0.65
    },
    "h4": {
      "fontFamily": "Monument Grotesk, sans-serif",
      "fontSize": 32,
      "lineHeight": "40px"
    },
    "h4Alt": {
      "fontFamily": "Starling Book, serif",
      "fontSize": 36,
      "lineHeight": "40px"
    },
    "pLarge": {
      "fontFamily": "Monument Grotesk, sans-serif",
      "fontSize": 27,
      "lineHeight": "37px"
    },
    "p": {
      "fontFamily": "Monument Grotesk, sans-serif",
      "fontSize": 23,
      "lineHeight": "32px"
    },
    "pSmall": {
      "fontFamily": "Monument Grotesk, sans-serif",
      "fontSize": 19,
      "lineHeight": "25px"
    },
    "pXSmall": {
      "fontFamily": "Monument Grotesk, sans-serif",
      "fontSize": 16,
      "lineHeight": "20px"
    }
  }
}

// Colors
import { primary, secondary } from '@dering-hall/dh-theme/colors';
import { grey } from '@dering-hall/dh-theme/colors'; // gives you 'grey' color object
import grey from '@dering-hall/dh-theme/colors/grey'; // gives you 'grey' default color

// Media Queries
import { tablet, desktop, desktopWide, desktopExtraWide } from '@dering-hall/dh-theme/breakpoints'; // gives you px values
import mq from '@dering-hall/dh-theme/breakpoints'; // gives you media queries declarations object

// {
//   tablet: '@media (min-width:48em)',
//   desktop: '@media (min-width:64em)',
//   desktopWide: '@media (min-width:90em)',
//   desktopExtraWide: '@media (min-width:137.5em)',
//   navigation: '@media ((min-width: 971px))',
// }

// GoogleMap styles and icons
import { styles, showroomIcon, youAreHereIcon } from '@dering-hall/dh-theme/styles/googlemap';

// Util
import { hexToRgb, rgba, pxToEm } from '@dering-hall/dh-theme/util';

Release

Make sure you are logged into NPM before running the publish command!

$ npm login # if needed
$ npm run release [<newversion> | major | minor | patch] # default to patch, i.e. will increment 0.0.1 to 0.0.2