global styles shared across HashiCorp sites

Usage no npm install needed!

<script type="module">
  import hashicorpMktgGlobalStyles from 'https://cdn.skypack.dev/@hashicorp/mktg-global-styles';


Global Styles

Global styles used across HashiCorp sites.

The Rundown

The primary import is style.css, which contains a few important styles:

  • a css normalize (src)
  • a range of custom media queries (src)
  • all of our standard fonts (src)
  • a range of css custom properties covering brand colors (src)
  • a range of css custom properties covering standard font stacks (src)
  • a number of classes for applying type styles (src)
  • the .g-grid-container class which is our standard content container (src)

Each of these can be imported individually, but this is not recommended. They are separated for internal organization rather than external consumption

Work Needed

This package is severely out of date and generally needs a lot of additional work, most of which will be breaking. A short list of what needs to change follows:

  • code-highlighting.css is no longer used, instead code highlighting styles are imported from @hashicorp/nextjs-scripts
  • all of the temporary-to-remove files need to be evaluated and culled
  • several files have cross-referenced css imports, which are not necessary. for example, since global imports our color variables, it does not need to be imported in any other file, or it will be doubled. these imports are relics from when we compiled variables rather than using them as-is
  • the global file needs to be broken apart into pieces and assembled within style.css