👩‍🎨 Style Guide

This package is a high level abstraction of our site-wide CSS for haldi.com. It makes use of CSS variables and TypeScript to make the same values available in CSS and JS. Optionally, this package supports TailwindCSS as well to really speed development up, while keeping it customized.

Installation

# Standard NPM install
npm i @haldi/style-guide

Usage

The goal of this abstraction is to provide a consistent base for all our CSS in a single package which we can then import into each of our services. Each consumer can take this base and further customize it as necessary. This will enable us to update our branding in the future quickly and consistently.

Using CSS imports

This will import the whole style-guide so we only want to do this once. However, if we want to make use of the pure CSS variables you can also import the variables independently to prevent duplication.

@import '@haldi/style-guide';

/* or */

@import '@haldi/style-guide/dist/variables';

TypeScript / Javscript

Each time we create :root CSS variables we create the equivalent in TypeScript. Then we export the same API for both CSS/TS and generate types while we compile the TypeScript to Javascript.

import { color, font, grid, media } from '@haldi/style-guide';

// Simple Component
const Component = () => {
  return (
    <div style={{ color: color.primary }}>
      <h1>Hello World!</h1>
    </div>
  );
};