@aotearoan/sass-farbig v5.0.0
SASS Farbig
Introduction
SASS Farbig is an HCL (aka LCH) color space based SASS lib to help generate color palettes for use in design systems and applications based on any input color. The aim is to create light and dark theme palettes that provide WCAG compliant contrast ratios of at least 4.5:1 for readability.
SASS Farbig provides the basic SASS functions for palette generation from a single reference color.
All color calculations were ported directly from chroma.js
What's new in Version 3.0.0
The fixed palettes have been removed in favour of dynamically generated palettes based on the reference colors. This allows for generation of palettes with wider color ranges which more closely (if not exactly) match the reference color.
How it works
The generator determines the L1 color i.e, the closest color with the same hue as the reference color which is light enough to meet a contrast ratio of 4.5 with dark (#242424) text. Similarly the D1 color is determined by finding the closest color to the reference color which is dark enough to meet a contrast ratio of 4.5 with light (#eeeeee) text.
Once these colors are determined the HCL/LCH chroma and luminance curves are generated specifically for the reference color and used to create the remaining color steps.
How to use
Basic usage
View the test palettes here.
First import the project:
yarn add -D @aotearoan/sass-farbig
Then add the SASS import:
@import '~@aotearoan/sass-farbig'
And generate a palette for a given base color:
$color: #6c29d4
$palette: generate-palette($color)
This will output the following palette map:
$palette: (
l5: #f6e9ff,
l4: #ebd4ff,
l3: #ddbcfe,
l2: #cba1fa,
l1: #b683f3,
d1: #7f50ba,
d2: #644190,
d3: #4d346b,
d4: #39294c,
d5: #292033,
);
There are also three Neutral (grayscale) palettes available (neutral, low-contrast and high-contrast). These can be generated by calling:
$neutral-palette: neutral-palette();
$low-contrast-palette: low-contrast-palette();
$high-contrast-palette: high-contrast-palette();
Use the generate-color-classes
mixin to generate classes for each step:
$prefix: 'app-primary'
$color: #6c29d4
$palette: generate-palette($color)
@include generate-color-classes($prefix, $palette)
This will generate classes for colors and background colors e.g.:
.app-primary-color-l5 {
color: #f6e9ff
}
.app-primary-bg-color-l5 {
background-color: #f6e9ff
}
// and so on...
Global variables
The default text colors are defined as:
$color-text-light: #242424 !default // light mode dark text color
$color-text-dark: #eeeeee !default // dark mode light text color
Luminance curves (steps) are defined for neutral, low & high contrast color palettes only. For generating color palettes luminance and chroma curves are derived from the reference color:
// hcl luminance curves used to generate neutral color palettes
$neutral-luminance-curve: (94, 88, 81, 73, 64, 44, 35, 27, 20, 14)!default;
$low-contrast-luminance-curve: (88, 81, 72, 60, 48, 68, 55, 44, 35, 28)!default;
$high-contrast-luminance-curve: (100, 95, 90, 85, 80, 20, 15, 10, 5, 0)!default;
NOTE: Low contrast fails readability at L1, D1 & D2 - it is recommended to invert the text color if using these (as seen on the demo page).
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Run your tests
yarn run test
Lints and fixes files
yarn run lint
Run your unit tests
yarn run test:unit