xi/sass-planifolia

Vanilla Sass helper functions

Sass-Planifolia - Vanilla Sass helper functions

This is a collection of vanilla Sass helper functions, mostly centered around colors. It currently consists of only two modules:

• contrast for WCAG compatible color contrast functions
• color for color functions with supper for different color spaces, e.g. CIELAB, CIELUV, or HSLuv

These modules can be imported individually. The only define mixins and variables. They will not output any CSS. This means that importing them does not add a single byte to your CSS.

See the full documentation for more details.

Quick start

npm install sass-planifolia

Import it in your Sass files:

@use "node_modules/sass-planifolia/sass/contrast";
@use "node_modules/sass-planifolia/sass/color";

.test {
    background-color: red;

    // pick between two colors (default: black and white) to get good contrast
    color: contrast.color(red);

    // mix orange with black or white to get good contrast to red
    border-color: contrast.stretch(red, orange);

    // mix red with black in a perceptually uniform color space
    box-shadow: 0 0 1em color.shade(red, 0.5, 'lab');
}

What is not included?

• Vendor prefixes, polyfills or browser hacks. There are plenty of librariers for that.
• pt/px/em/rem conversion. That is (a) not possible and (b) not helpful. Each unit has its specific use case. Learn to use the right units directly!

Similar libraries

• CSS Color Moudle Level 4 and CSS Color Module Level 5 are W3C Working Drafts (as of 2022-04-28) that would add similar features to CSS itself.
• PostCSS and Parcel both implement some of the functionality of CSS Color Module Level 4/5.
• oddbird/blend is yet another Sass library that implements similar features. The main difference is that the contrast function do not take transparency into account.

sass-planifolia's Issues

rad value conversion

@xi thanks for sharing your fast compiling math functions – very impressive results :-)
To speed up and simplify to-rad-value – consider using native fixed unit conversion:

//  convert to rad and strip unit 
@function rad-value($x){ 
    @return (0rad + $x)/1rad; 
}

.x {
    num : rad-value(4.71239);    
    rad : rad-value(4.71239rad);    
    deg : rad-value(270deg);
    turn: rad-value(.75turn);
    grad: rad-value(300grad); 
}

.x {
  num:  4.71239;
  rad:  4.71239;
  deg:  4.71239;
  turn: 4.71239;
  grad: 4.71239;
}

Add $contrast as third parameter of contrast-color() function.

Add $contrast as third parameter of contrast-color() function.
If both colors meet the contrast requirements, $color1 will be used.

Example:

  $color: #6170c2;
  background-color: $color;
  color: contrast-color($color, white, black, 4.5); 
  // contrast($color, white) => 4.56;
  // contrast($color, black) => 4.6

Result CSS:

  background-color: #6170c2;
  color: white; 

Hue parameter in lch() output in radians

lch() functions work with hue in radians, but by standard, hue must be in degrees.
It's may be good to have some solution to be enable working with degrees.

Here some useful links:
https://drafts.csswg.org/css-color-4/#specifying-lab-lch
http://www.brucelindbloom.com/index.html?Eqn_LCH_to_Lab.html
http://www.brucelindbloom.com/index.html?Eqn_Lab_to_LCH.html