<style>
:root {
    --brightness: #fff;
    --highlight: #f9f9f9;
    --midtone: #666;
    --shadow: #404040;
    --darkness: #2d2d2d;
    --cta: #da2f2f;
    --root-font: 'Lato', sans-serif;
    --root-font-2: 'Open Sans', sans-serif
}
</style>

Them import the hdt-scheme declaration to use with your preprocessor:

@import 'hdt-schemes/build/less/_variables.less'
button {
    background: @shadow;
    color: @highlight;
}

Learn more:

What is a histogram?
Why not X?

Accessible

You don't have remember to what color each variable is associated, you only have know that a button with background darkness and text color brightness will have a very intense contrast.

In the same manner it's easy to predict that a paragraph with color shadow in a darkness background would be really hard to read.

By reading a code like these, your brain will be able render the visuals, without having to leave your editor. Even a color blind developer, can understand how the visual would work, without worrying about the colour pallet.

Install

npm install hdt-scheme

Why would you use HDT?

There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton

As a project grows you can start to hate yourself when a appropriate color scheme have not being well chosen.

HDT v2 spec recommends the usage of the following abstract css vars, when developing digital products with themable capabilities: brightness • highlight • midtone • shadow • darkness + cta

Photographers around the world have used cameras built-in and image editing software histograms features, to create visually balanced photos for years. Why not bring these concepts to web design?

What is a histogram?

A histogram can tell if a photo have too much light or too much dark elements, it empower the image producer with data to change the aspec if he wants to. A image histogram is a graph, that shows the tonal distribution in a digital image.

Usally it's represented by blacks, shadows, midtones, highlights, whites. But since we want to keep our variables abstract we have replaced blacks and whites with darkness and brightness.

Brightness and darkness are usually synonyms to white and black, but you must be able to redefine the limit of tone allowed in your theme.

Pure black like #000000 or white like #ffffff, might never be used in one of your current designs so feel free to define something like brown as your darkness and yellow as brigthness.

Why not X?

We consider the following variable naming conventions actually a bad pratices:

Numeral

color1 bg2

Freezed

purple darkBlue

Section based

headerColor footerBackground

Keywords

FAQs

What is @biz-storefront/hdt-scheme?

Is @biz-storefront/hdt-scheme well maintained?

Package last updated on 22 Sep 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install