Install

Nothing is published to a registry, so projects link it locally. Edits to the library are live in every linked project.

# register the library once, from its own checkout
cd ~/zed-projects/higreg-ds && npm link

# then in each project that wants it
npm link @pipejesus/higreg-ds

// or pin the path, which survives a clean install
"dependencies": {
  "@pipejesus/higreg-ds": "file:../higreg-ds"
}

In your entry stylesheet, in this order. There is a note further down on what the first line is for.

@import "tailwindcss";
@import "@pipejesus/higreg-ds";

That is the whole installation. This page does exactly those two lines.

Optional. portfolio-dark applies to :root by default, so a page with no data-theme still looks right. Name one when you want two themes on a page.

<html data-theme="portfolio-dark">
  <body>
    <a class="btn btn-primary">START A PROJECT</a>
  </body>
</html>

Two things, and neither of them is a component.

A reset — base.css never zeroes a margin or sets box-sizing, and every component assumes both. And the nine variables base.css reads: the page ground, the two families, the body size and the field corner.

That is the whole of it. Every component reads a --ds-* variable directly, so the component layer needs no build step at all.

Every layer has a subpath of its own: primitives, components, sections, modules, themes. Useful if you want the tokens and none of the components, or a few components and not the rest.

/* tokens and base only — bring your own components */
@import "@pipejesus/higreg-ds/theme";
@import "@pipejesus/higreg-ds/themes/portfolio-dark";
@import "@pipejesus/higreg-ds/base";

/* or one component at a time */
@import "@pipejesus/higreg-ds/components/button";