@biz-storefront/hdt-scheme
v1.1.0
Published
Histogram driven themes style scheme
Downloads
8
Maintainers
bizcommerceReadme
Histogram driven themes - V2
A colour scheme inspired by photography knowledge, to make your styles remarkable, composable, accessible and "themable".
▁▁▁▁▁▂▂▂▂▂▃▃▃▃▃▅▅▅▅▅▇▇▇▇▇
brightness • highlight • midtone • shadow • darkness + cta
Usage
We recomend to declare your variables in a style html tag inside the <head> of your document, so can be "SSRed" from any serve-side language.
<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-schemeWhy 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