Wagtail 4.1 corrected color conversions

README.md

To run this:

./node_modules/.bin/sass colors.scss

colors.scss

@use 'sass:color';
@use 'sass:math';

// Sass function to limit a number to one decimal place.
@function round-1($number) {
  @return math.round($number * 10) / 10;
}

$black-hex: #000000;
// @debug 'HSL black: #{$black-hex} hsl(#{hue($black-hex)} #{saturation($black-hex)} #{lightness($black-hex)})';
@debug 'Dec black: #{$black-hex} hsl(#{round-1(hue($black-hex))} #{round-1(saturation($black-hex))} #{round-1(lightness($black-hex))})';
$grey-600-hex: #262626;
// @debug 'HSL grey-600: #{$grey-600-hex} hsl(#{hue($grey-600-hex)} #{saturation($grey-600-hex)} #{lightness($grey-600-hex)})';
@debug 'Dec grey-600: #{$grey-600-hex} hsl(#{round-1(hue($grey-600-hex))} #{round-1(saturation($grey-600-hex))} #{round-1(lightness($grey-600-hex))})';
$grey-400-hex: #5c5c5c;
// @debug 'HSL grey-400: #{$grey-400-hex} hsl(#{hue($grey-400-hex)} #{saturation($grey-400-hex)} #{lightness($grey-400-hex)})';
@debug 'Dec grey-400: #{$grey-400-hex} hsl(#{round-1(hue($grey-400-hex))} #{round-1(saturation($grey-400-hex))} #{round-1(lightness($grey-400-hex))})';
$grey-200-hex: #929292;
// @debug 'HSL grey-200: #{$grey-200-hex} hsl(#{hue($grey-200-hex)} #{saturation($grey-200-hex)} #{lightness($grey-200-hex)})';
@debug 'Dec grey-200: #{$grey-200-hex} hsl(#{round-1(hue($grey-200-hex))} #{round-1(saturation($grey-200-hex))} #{round-1(lightness($grey-200-hex))})';
$grey-150-hex: #c8c8c8;
// @debug 'HSL grey-150: #{$grey-150-hex} hsl(#{hue($grey-150-hex)} #{saturation($grey-150-hex)} #{lightness($grey-150-hex)})';
@debug 'Dec grey-150: #{$grey-150-hex} hsl(#{round-1(hue($grey-150-hex))} #{round-1(saturation($grey-150-hex))} #{round-1(lightness($grey-150-hex))})';
$grey-100-hex: #e0e0e0;
// @debug 'HSL grey-100: #{$grey-100-hex} hsl(#{hue($grey-100-hex)} #{saturation($grey-100-hex)} #{lightness($grey-100-hex)})';
@debug 'Dec grey-100: #{$grey-100-hex} hsl(#{round-1(hue($grey-100-hex))} #{round-1(saturation($grey-100-hex))} #{round-1(lightness($grey-100-hex))})';
$grey-50-hex: #f6f6f8;
// @debug 'HSL grey-50: #{$grey-50-hex} hsl(#{hue($grey-50-hex)} #{saturation($grey-50-hex)} #{lightness($grey-50-hex)})';
@debug 'Dec grey-50: #{$grey-50-hex} hsl(#{round-1(hue($grey-50-hex))} #{round-1(saturation($grey-50-hex))} #{round-1(lightness($grey-50-hex))})';
$white-hex: #ffffff;
// @debug 'HSL white: #{$white-hex} hsl(#{hue($white-hex)} #{saturation($white-hex)} #{lightness($white-hex)})';
@debug 'Dec white: #{$white-hex} hsl(#{round-1(hue($white-hex))} #{round-1(saturation($white-hex))} #{round-1(lightness($white-hex))})';
$primary-hex: #2e1f5e;
// @debug 'HSL primary: #{$primary-hex} hsl(#{hue($primary-hex)} #{saturation($primary-hex)} #{lightness($primary-hex)})';
@debug 'Dec primary: #{$primary-hex} hsl(#{round-1(hue($primary-hex))} #{round-1(saturation($primary-hex))} #{round-1(lightness($primary-hex))})';
$primary-200-hex: #261a4e;
// @debug 'HSL primary-200: #{$primary-200-hex} hsl(#{hue($primary-200-hex)} #{saturation($primary-200-hex)} #{lightness($primary-200-hex)})';
@debug 'Dec primary-200: #{$primary-200-hex} hsl(#{round-1(hue($primary-200-hex))} #{round-1(saturation($primary-200-hex))} #{round-1(lightness($primary-200-hex))})';
$secondary-600-hex: #004345;
// @debug 'HSL secondary-600: #{$secondary-600-hex} hsl(#{hue($secondary-600-hex)} #{saturation($secondary-600-hex)} #{lightness($secondary-600-hex)})';
@debug 'Dec secondary-600: #{$secondary-600-hex} hsl(#{round-1(hue($secondary-600-hex))} #{round-1(saturation($secondary-600-hex))} #{round-1(lightness($secondary-600-hex))})';
$secondary-400-hex: #005b5e;
// @debug 'HSL secondary-400: #{$secondary-400-hex} hsl(#{hue($secondary-400-hex)} #{saturation($secondary-400-hex)} #{lightness($secondary-400-hex)})';
@debug 'Dec secondary-400: #{$secondary-400-hex} hsl(#{round-1(hue($secondary-400-hex))} #{round-1(saturation($secondary-400-hex))} #{round-1(lightness($secondary-400-hex))})';
$secondary-hex: #007d7e;
// @debug 'HSL secondary: #{$secondary-hex} hsl(#{hue($secondary-hex)} #{saturation($secondary-hex)} #{lightness($secondary-hex)})';
@debug 'Dec secondary: #{$secondary-hex} hsl(#{round-1(hue($secondary-hex))} #{round-1(saturation($secondary-hex))} #{round-1(lightness($secondary-hex))})';
$secondary-100-hex: #00b0b1;
// @debug 'HSL secondary-100: #{$secondary-100-hex} hsl(#{hue($secondary-100-hex)} #{saturation($secondary-100-hex)} #{lightness($secondary-100-hex)})';
@debug 'Dec secondary-100: #{$secondary-100-hex} hsl(#{round-1(hue($secondary-100-hex))} #{round-1(saturation($secondary-100-hex))} #{round-1(lightness($secondary-100-hex))})';
$secondary-75-hex: #80d7d8;
// @debug 'HSL secondary-75: #{$secondary-75-hex} hsl(#{hue($secondary-75-hex)} #{saturation($secondary-75-hex)} #{lightness($secondary-75-hex)})';
@debug 'Dec secondary-75: #{$secondary-75-hex} hsl(#{round-1(hue($secondary-75-hex))} #{round-1(saturation($secondary-75-hex))} #{round-1(lightness($secondary-75-hex))})';
$secondary-50-hex: #f2fcfc;
// @debug 'HSL secondary-50: #{$secondary-50-hex} hsl(#{hue($secondary-50-hex)} #{saturation($secondary-50-hex)} #{lightness($secondary-50-hex)})';
@debug 'Dec secondary-50: #{$secondary-50-hex} hsl(#{round-1(hue($secondary-50-hex))} #{round-1(saturation($secondary-50-hex))} #{round-1(lightness($secondary-50-hex))})';
$info-100-hex: #1f7e9a;
// @debug 'HSL info-100: #{$info-100-hex} hsl(#{hue($info-100-hex)} #{saturation($info-100-hex)} #{lightness($info-100-hex)})';
@debug 'Dec info-100: #{$info-100-hex} hsl(#{round-1(hue($info-100-hex))} #{round-1(saturation($info-100-hex))} #{round-1(lightness($info-100-hex))})';
$info-50-hex: #e2f5fc;
// @debug 'HSL info-50: #{$info-50-hex} hsl(#{hue($info-50-hex)} #{saturation($info-50-hex)} #{lightness($info-50-hex)})';
@debug 'Dec info-50: #{$info-50-hex} hsl(#{round-1(hue($info-50-hex))} #{round-1(saturation($info-50-hex))} #{round-1(lightness($info-50-hex))})';
$positive-100-hex: #1b8666;
// @debug 'HSL positive-100: #{$positive-100-hex} hsl(#{hue($positive-100-hex)} #{saturation($positive-100-hex)} #{lightness($positive-100-hex)})';
@debug 'Dec positive-100: #{$positive-100-hex} hsl(#{round-1(hue($positive-100-hex))} #{round-1(saturation($positive-100-hex))} #{round-1(lightness($positive-100-hex))})';
$positive-50-hex: #e0fbf4;
// @debug 'HSL positive-50: #{$positive-50-hex} hsl(#{hue($positive-50-hex)} #{saturation($positive-50-hex)} #{lightness($positive-50-hex)})';
@debug 'Dec positive-50: #{$positive-50-hex} hsl(#{round-1(hue($positive-50-hex))} #{round-1(saturation($positive-50-hex))} #{round-1(lightness($positive-50-hex))})';
$warning-100-hex: #faa500;
// @debug 'HSL warning-100: #{$warning-100-hex} hsl(#{hue($warning-100-hex)} #{saturation($warning-100-hex)} #{lightness($warning-100-hex)})';
@debug 'Dec warning-100: #{$warning-100-hex} hsl(#{round-1(hue($warning-100-hex))} #{round-1(saturation($warning-100-hex))} #{round-1(lightness($warning-100-hex))})';
$warning-50-hex: #faecd5;
// @debug 'HSL warning-50: #{$warning-50-hex} hsl(#{hue($warning-50-hex)} #{saturation($warning-50-hex)} #{lightness($warning-50-hex)})';
@debug 'Dec warning-50: #{$warning-50-hex} hsl(#{round-1(hue($warning-50-hex))} #{round-1(saturation($warning-50-hex))} #{round-1(lightness($warning-50-hex))})';
$critical-200-hex: #cd4444;
// @debug 'HSL critical-200: #{$critical-200-hex} hsl(#{hue($critical-200-hex)} #{saturation($critical-200-hex)} #{lightness($critical-200-hex)})';
@debug 'Dec critical-200: #{$critical-200-hex} hsl(#{round-1(hue($critical-200-hex))} #{round-1(saturation($critical-200-hex))} #{round-1(lightness($critical-200-hex))})';
$critical-100-hex: #fd5765;
// @debug 'HSL critical-100: #{$critical-100-hex} hsl(#{hue($critical-100-hex)} #{saturation($critical-100-hex)} #{lightness($critical-100-hex)})';
@debug 'Dec critical-100: #{$critical-100-hex} hsl(#{round-1(hue($critical-100-hex))} #{round-1(saturation($critical-100-hex))} #{round-1(lightness($critical-100-hex))})';
$critical-50-hex: #fde9e9;
// @debug 'HSL critical-50: #{$critical-50-hex} hsl(#{hue($critical-50-hex)} #{saturation($critical-50-hex)} #{lightness($critical-50-hex)})';
@debug 'Dec critical-50: #{$critical-50-hex} hsl(#{round-1(hue($critical-50-hex))} #{round-1(saturation($critical-50-hex))} #{round-1(lightness($critical-50-hex))})';