AU-color-a11y not respecting AU-color-background #fff

Open svict4 opened this issue 5 years ago • 7 comments

Bug Report

[X] I’ve read and understood the Contributing guidelines and have done my best effort to follow them.
[X] I’ve read and agree to the Code of Conduct.
[X] I’ve searched for any related issues and avoided creating a duplicate issue.

What happened

After updating @gov.au/core from 3.1.1 to 3.2.0 and regenerating my styles, my background went from it's set AU-color-background of #fff to #black

What I expected to happen

Respect AU-color-background

Reproducing

I am using GovCMS UIKit Starter, but at the moment I don't believe it's to do with that project.

Module name: core
Module version: 3.2.0
Pancake version: 1.3.1
Node version: v11.4.0
npm version: 6.6.0

Pancake settings in your `package.json

"pancake": {
    "auto-save": true,
    "plugins": true,
    "ignore": [],
    "json": {
      "enable": false,
      "location": "assets/uikit",
      "name": "uikit",
      "content": {
        "name": true,
        "version": true,
        "dependencies": true,
        "path": true,
        "settings": true
      }
    },
    "css": {
      "minified": true,
      "modules": false,
      "browsers": [
        "last 2 versions",
        "ie 10"
      ],
      "location": "assets/uikit/css/",
      "name": "uikit.min.css"
    },
    "sass": {
      "modules": false,
      "location": "assets/uikit/sass/",
      "name": "uikit.scss"
    },
    "js": {
      "minified": true,
      "modules": true,
      "location": "assets/uikit/js/",
      "name": "uikit.min.js"
    },
    "react": {
      "location": "assets/uikit/react/"
    }
  }

Steps to reproduce:

Set your global colours:

$AU-color-foreground-action: #008490 !default;
$AU-color-foreground-focus: #9263de !default;
$AU-color-foreground-text: #313131 !default;
$AU-color-background: #ffffff !default;

Compile sass
😭

I've traced this back to https://github.com/govau/design-system-components/blob/da652cbab7ee3417812676314d1e1e5418f89059/packages/core/src/sass/_globals.scss#L840 as commenting out that line keeps everything white.

Something weird with AU-color-a11y determining that black is an accessible background colour with the above palette.

I haven't had much time to debug this further to see if AU-color-lowest-contrast() is spitting out the wrong colour.

Attachments

Feb 17 '19 04:02 svict4

My core _globals.scss file looks like the below:

/*! @gov.au/core v3.2.0 */

//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// Core module globals
//
// Content:
// - functions
//   - AU-replace
//   - AU-svguri
//   - AU-factorial
//   - AU-pow
//   - AU-color-luminance
//   - AU-color-contrast
//   - AU-color-a11y
// - mixins
//   - AU-space
//   - AU-clearfix
//   - AU-media
//   - AU-sronly
//   - AU-outline
//   - AU-focus
//   - AU-fontgrid
// - variables
//   - AU-pixelfallback
//   - AU-media-*
//   - AU-media-*
//   - AU-rem
//   - AU-unit
//   - AU-font
//   - AU-font-monospace
//   - AU-fontsize-map
//   - AU-lineheight-map
//   - AU-maxwidth
//   - AU-color-*
//   - AU-border-radius
//
//  Error messages all start with a movie quote. Here are some in reserve:
//  - Nobody puts Baby in a corner;
//  - May the Force be with you;
//  - You call that an error? This is an Error!
//  - This... Is... ERROR!
//--------------------------------------------------------------------------------------------------------------------------------------------------------------

//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// SASS VERSIONING
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
$name: "@gov.au/core";
$version: "3.2.0";
$dependencies: (
	
);

@include versioning-add( $name, $version, $dependencies ); //adding dependencies to global scope

//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// GLOBAL FUNCTIONS
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
/**
 * AU-replace - Replace a string with a string
 * http://codepen.io/jakob-e/pen/doMoML
 *
 * @author @eriksen_dk <https://twitter.com/eriksen_dk>
 *
 * @param  {string} $string  - The haystack string to be manipulated
 * @param  {string} $search  - The needle to be replace
 * @param  {string} $replace - The replacement
 *
 * @return {string}          - The manipulated string with replaced values
 */
@function AU-replace( $string, $search, $replace: '' ) {
	@if type-of( $string ) != 'string' {
		@error "I have a bad feeling about this; the AU-replace first argument must be a string!";
	}

	@if type-of( $search ) != 'string' {
		@error "We’ll always have Paris; the AU-replace second argument must be a string!";
	}

	@if type-of( $replace ) != 'string' {
		@error "Hasta la vista, baby; the AU-replace third argument must be a string!";
	}

	$index: str-index( $string, $search );

	@return if( $index,
		str-slice( $string, 1, $index - 1 ) +
		$replace +
		AU-replace(
			str-slice( $string, $index + str-length( $search )
		), $search, $replace ),
		$string
	);
}


/**
 * AU-svguri - Generate an optimized SVG data-uri
 * https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
 * http://codepen.io/jakob-e/pen/doMoML
 *
 * @author @eriksen_dk <https://twitter.com/eriksen_dk>
 *
 * @param  {string} $svg - The SVG to be converted
 *
 * @return {string}      - An optimized data-uri
 */
@function AU-svguri( $svg ) {
	@if type-of( $svg ) != 'string' {
		@error "With great power comes great responsibility; the AU-svguri function only takes a string!";
	}

	@if not str-index( $svg, xmlns ) { // Add missing namespace
		$svg: AU-replace( $svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"' );
	}

	$encoded:'';
	$slice: 2000;
	$index: 0;
	$loops: ceil( str-length( $svg ) / $slice ); // Chunk up string in order to avoid "stack level too deep" error

	@for $i from 1 through $loops {
		$chunk: str-slice( $svg, $index, $index + $slice - 1 );

		$chunk: AU-replace( $chunk,'"', "'" );
		$chunk: AU-replace( $chunk,'	', " " );
		$chunk: AU-replace( $chunk,"\a", " " );
		$chunk: AU-replace( $chunk,'  ', " " );
		$chunk: AU-replace( $chunk,'%', '%25' );
		$chunk: AU-replace( $chunk,'&', '%26' );
		$chunk: AU-replace( $chunk,'#', '%23' );
		$chunk: AU-replace( $chunk,'{', '%7B' );
		$chunk: AU-replace( $chunk,'}', '%7D' );
		$chunk: AU-replace( $chunk,'<', '%3C' );
		$chunk: AU-replace( $chunk,'>', '%3E' );

		/*    The maybe list

			 Keep size and compile time down
			 ... only add on documented fail

		 $chunk: AU-replace( $chunk, '|', '%7C' );
		 $chunk: AU-replace( $chunk, '[', '%5B' );
		 $chunk: AU-replace( $chunk, ']', '%5D' );
		 $chunk: AU-replace( $chunk, '^', '%5E' );
		 $chunk: AU-replace( $chunk, '`', '%60' );
		 $chunk: AU-replace( $chunk, ';', '%3B' );
		 $chunk: AU-replace( $chunk, '?', '%3F' );
		 $chunk: AU-replace( $chunk, ':', '%3A' );
		 $chunk: AU-replace( $chunk, '@', '%40' );
		 $chunk: AU-replace( $chunk, '=', '%3D' );
		*/

		$encoded: #{ $encoded }#{ $chunk };
		$index: $index + $slice;
	}

	@return url("data:image/svg+xml,#{ $encoded }");
}


/**
 * AU-factorial - Returns the factorial of a non-negative integer.
 * https://github.com/terkel/mathsass
 *
 * @author Pascal Duez @pascalduez <http://pascalduez.me/>
 *
 * @param  {integer} $number - A non-negative integer.
 *
 * @return {integer}         - The factorial log
 */
@function AU-factorial( $number ) {
	@if $number < 0 or $number != floor( $number ) {
		@error "You talking to me?; the AU-factorial function only takes positive numbers.";
	}

	$factorial: 1;

	@while $number > 0 {
		$factorial: $factorial * $number;
		$number: $number - 1;
	}

	@return $factorial;
}


/**
 * AU-pow - Returns base to the exponent power.
 * https://github.com/terkel/mathsass
 *
 * @author Pascal Duez @pascalduez <http://pascalduez.me/>
 *
 * @param  {integers} $base     - The base number
 * @param  {integers} $exponent - The exponent to which to raise base
 *
 * @return {integers}           - The result of the math
 */
@function AU-pow( $base, $exponent ) {
	@if $exponent < 0 {
		@error "I can see dead people; the AU-pow function only takes positive numbers as the second argument.";
	}

	// Constants
	$LN2:   0.6931471805599453;
	$SQRT2: 1.4142135623730951;

	// full number
	@if $exponent == floor( $exponent ) {
		$rest: 1;

		@if $exponent < 0 {
			$exponent: $exponent * -1;
		}

		@while $exponent > 0 {
			@if $exponent % 2 == 1 {
				$rest: $rest * $base;
			}

			$exponent: floor($exponent * 0.5);
			$base: $base * $base;
		}

		@return if( $exponent < 0, 1 / $rest, $rest );
	}

	// decimal number
	@else {
		@if $base <= 0 {
			@return 0 / 0;
		}

		$normalized: ( $base / $SQRT2 );
		$log: 0;

		@if $normalized < 0 {
			$normalized: $normalized * -1;
		}

		@if $normalized < 0.5 {
			@while $normalized < 0.5 {
				$normalized: $normalized * 2;
				$log: $log - 1;
			}
		}

		@else if $normalized >= 1 {
			@while $normalized >= 1 {
				$normalized: $normalized / 2;
				$log: $log + 1;
			}
		}

		$divider: 1;
		$deviderExponent: $log;

		$baseExponent: if( $deviderExponent >= 0, 2, 1 / 2 );

		@if $deviderExponent < 0 {
			$deviderExponent: $deviderExponent * -1;
		}

		@while $deviderExponent > 0 {
			@if $deviderExponent % 2 == 1 {
				$divider: $divider * $baseExponent;
			}
			$baseExponent: $baseExponent * $baseExponent;
			$deviderExponent: floor( $deviderExponent * 0.5 );
		}

		$base: $base / $divider;
		$base: ( $base - 1 ) / ( $base + 1 );
		$base2: $base * $base;
		$iterator: 1;
		$tempBase: $base;
		$tempBase2: null;

		@while $tempBase2 != $tempBase {
			$base: $base * $base2;
			$iterator: $iterator + 2;
			$tempBase2: $tempBase;
			$tempBase: $tempBase + $base / $iterator;
		}

		$logarithm: ( $LN2 * $log + 2 * $tempBase ) * $exponent;
		$return: 0;

		@for $quarter from 0 to 24 {
			$return: $return + AU-pow( $logarithm, $quarter ) / AU-factorial( $quarter );
		}

		@return $return;
	}
}


/**
 * AU-color-luminance - Calculate color luminance
 *
 * https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss
 * Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
 * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
 *
 * @author Pelle Wessman @voxpelli <http://kodfabrik.se/>
 *
 * @param  {string} $color - The color to calculate the luminance from
 *
 * @return {float}          - The luminance
 */
@function AU-color-luminance( $color ) {
	@if type-of( $color ) != 'color' {
		@error "Go ahead, make my day; the AU-color-luminance function only takes a color!";
	}

	$rgba: red( $color ), green( $color ), blue( $color );
	$rgba2: ();

	@for $i from 1 through 3 {
		$rgb: nth( $rgba, $i );
		$rgb: $rgb / 255;

		$rgb: if( $rgb < .03928, $rgb / 12.92, AU-pow( ( $rgb + .055 ) / 1.055, 2.4 ) );

		$rgba2: append( $rgba2, $rgb );
	}

	@return .2126 * nth( $rgba2, 1 ) + .7152 * nth( $rgba2, 2 ) + 0.0722 * nth( $rgba2, 3 );
}


/**
 * AU-color-contrast - Get the contrast ratio of two colors and warn when it is below WCAG 2.0 AA standard 4.5:1
 *
 * https://github.com/voxpelli/sass-color-helpers/blob/master/stylesheets/color-helpers/_contrast.scss
 * Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
 * Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
 *
 * @author Pelle Wessman @voxpelli <http://kodfabrik.se/>
 *
 * @param  {string}   $foreground - Color one
 * @param  {string}   $background - Color two
 * @param  {boolean}  $silent     - If the logs get printed in the terminal
 * @param  {boolean}  $rounded    - If the value is rounded or not
 *
 * @return {integer}              - The contrast ratio
 */
@function AU-color-contrast( $foreground, $background, $silent: false, $rounded: true ) {
	@if type-of( $foreground ) != 'color' {
		@error "Elementary, my dear Watson; the AU-color-contrast function only takes a color as first argument!";
	}

	@if type-of( $background ) != 'color' {
		@error "You can’t handle the truth; the AU-color-contrast function only takes a color as second argument!";
	}

	$luminance1: AU-color-luminance( $foreground ) + .05;
	$luminance2: AU-color-luminance( $background ) + .05;
	$ratio: $luminance1 / $luminance2;

	@if $luminance2 > $luminance1 {
		$ratio: 1 / $ratio;
	}

	@if $ratio < 4.5 and $silent == false {
		@warn "Houston, we have a problem; contrast ratio of #{ $foreground } on #{ $background } is bad, just #{ $ratio }";
	}

	@if $rounded == true {
		$ratio: round( $ratio * 10 ) / 10;
	}

	@return $ratio;
}



/**
 * AU-color-a11y - The function to find the nearest accessible color
 *
 * https://github.com/alex-page/sass-a11ycolor
 *
 * @author Alex Page @aalexpaage <http://alexpage.com.au>
 *
 * @param  {Color}           $toMakeA11y           - The color that is to be changed
 * @param  {Color}           $background           - The background color to compare against toMakeA11y for the contrast
 * @param  {'small'|'large'} $ratioKey   ['small'] - The keyword 'small' or 'large' to set the WCAG 2.1 contrast ration or 3.0 or 4.5
 * @param  {Number}          $steps      [0.1]     - The step size our function is searching for a new color in. The bigger the number the faster the process
 *                                                    the rougher the found color.
 *
 * @return {Color}                                 - Returns the nearest accessible color
 */
@function AU-color-a11y( $toMakeA11y, $background, $ratioKey: 'small' ) {
	@if type-of( $toMakeA11y ) != 'color' {
		@error "Where we’re going, we don’t need roads; the AU-a11ycolor function only takes a color as the first attribute!";
	}

	@if type-of( $background ) != 'color' {
		@error "You shall not pass; the AU-a11ycolor function only takes a color as the second attribute!";
	}

	@if $ratioKey != 'small' and $ratioKey != 'large' {
		@error "I have always depended on the kindness of strangers; the AU-a11ycolor function only takes 'small' or 'large' as third attribute.";
	}


	$ratios: (
		'large': 3,
		'small': 4.5,
	);
	$ratio: map-get( $ratios, $ratioKey );

	// Check the ratio straight away, if it passes return the value as hex
	@if AU-color-contrast( $toMakeA11y, $background, true, false ) >= $ratio {
		@return $toMakeA11y;
	}

	// Ratio didn't pass so we need to find the nearest color
	$a11yLightness: lightness( $toMakeA11y );
	$minHexDiff: 100 / 255; // 255 Colors / 100% HSL

	$isBlackBgContrast: AU-color-contrast( #000, $background, true, false ) >= $ratio;
	$isWhiteBgContrast: AU-color-contrast( #fff, $background, true, false ) >= $ratio;
	$minLightness: 0;
	$maxLightness: 100;
	$isDarkColor: false;

	// If our colour passes contrast on black and white
	@if $isBlackBgContrast and $isWhiteBgContrast {
		// Change the min lightness if the color is light
		@if( $a11yLightness >= 50 ) {
			$minLightness: $a11yLightness;
		}
		// Change the max lightness if the color is dark
		@else {
			$maxLightness: $a11yLightness;
			$isDarkColor: true;
		}
	}
	@else if $isBlackBgContrast {
		$maxLightness: $a11yLightness;
		$isDarkColor: true;
	}
	// It didn't pass on black
	@else {
		$minLightness: $a11yLightness;
	}

	// The color to return
	$foundColor: '';

	// Binary search until we find the colour that meets contrast
	@while( $foundColor == '' ) {
		$midLightness: ( $minLightness + $maxLightness ) / 2;
		$midColor: hsl(
			hue( $toMakeA11y ),
			saturation( $toMakeA11y ),
			$midLightness
		);
		$resetColor: mix( $midColor, $midColor );

		// If we meet contrast
		@if AU-color-contrast( $resetColor, $background, true, false ) >= $ratio {
			// The colour is in the minimal lightness range for one hexadecimal
			@if $maxLightness - $minLightness < $minHexDiff {
				$foundColor: $resetColor;
			}

			@if $isDarkColor {
				$minLightness: $midLightness;
			}
			@else {
				$maxLightness: $midLightness;
			}
		}
		// We don't meet contrast
		@else if $isDarkColor {
			$maxLightness: $midLightness;
		}
		@else {
			$minLightness: $midLightness;
		}
	}

	@return $foundColor;
}


/**
 * AU-color-lowest-contrast - Find the lowest contrast color
 *
 * @param  {Colors}          $colors     - The color to find the lowest contrast
 * @param  {Color}           $background - The background color to compare the colors against
 *
 * @return {Color}                       - Returns the lowest contrast color
 */
 @function AU-color-lowest-contrast( $colors, $background ){
	$current-lowest: nth( $colors, 1 );

	// Loop through the $colors list
	@each $color in $colors {
		$colorContrast: AU-color-contrast( $color, $background, true, false );
		$lowestContrast: AU-color-contrast( $current-lowest, $background, true, false );

		// If the constast is lower make it the new lowest
		@if $colorContrast < $lowestContrast {
			$current-lowest: $color;
		}
	}

	@return $current-lowest;
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// GLOBAL MIXINS
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
/**
 * AU-space - Mixin for setting a properties value to snap to the grid, with a fallback for REM.
 *
 * @param  {string} $property - The css property to apply the spacing ( padding, margin )
 * @param  {number} $values   - The values of the property ( 0, 20px, 1unit, 5% )
 *
 * @return {number}           - The space in px and rems
 */
@mixin AU-space( $property, $values, $pixelfallback: $AU-pixelfallback ) {
	$unit: $AU-unit; // The grid unit to use
	$output: ();
	$fallback: ();
	$has_fallback: false;

	@if type-of( $property ) != 'string' {
		@error "I’m sorry Dave, I can’t do that; the AU-space function only takes a string as first argument!";
	}

	// Loop through the $values list
	@each $value in $values {
		// This is a pixel on unitless unit. Let’s convert it to rems
		@if type-of( $value ) == 'number' and unit( $value ) == 'unit' {
			$value: $value / 1unit; // This is to remove the unit value
			$rem: $value / ( ( $value / $unit ) * 0 + 1 );

			$fallback: join( $fallback, round( $value * ( $unit * $unit ) ) + 0px );
			$output: join( $output, #{ $rem }rem );

			$has_fallback: true;
		}

		// We don’t know what this is so we don’t change it.
		@else {
			$fallback: join( $fallback, $value );
			$output: join( $output, $value );
		}
	}

	@if( $has_fallback and $pixelfallback ) {
		#{ $property }: $fallback;
		#{ $property }: $output;
	}
	@else {
		#{ $property }: $output;
	}
}


/**
 * AU-clearfix - Clearing floats
 */
@mixin AU-clearfix() {
	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}


/**
 * AU-media - Create media queries and wraps the @content code inside of it
 *
 * @param  {keywords} $breakpoint - Either one of the following keywords: xs, sm, md, lg
 *
 * @return {string}               - The code passed in via @content wrapped inside a media query
 */
@mixin AU-media( $breakpoint ) {
	@if type-of( $breakpoint ) != 'string' {
		@error "Captain I’m giving it all she’s got but; the AU-media mixin only takes a string!";
	}

	@if $breakpoint != 'xs' and $breakpoint != 'sm' and $breakpoint != 'md' and $breakpoint != 'lg' {
		@error "There’s no crying in baseball; the AU-media mixin only takes the following breakpoint strings: xs, sm, md, lg";
	}

	@if( $breakpoint == "xs" ) {
		@media (min-width: $AU-media-xs) {
			@content;
		}
	}

	@if( $breakpoint == "sm" ) {
		@media (min-width: $AU-media-sm) {
			@content;
		}
	}

	@if( $breakpoint == "md" ) {
		@media (min-width: $AU-media-md) {
			@content;
		}
	}

	@if( $breakpoint == "lg" ) {
		@media (min-width: $AU-media-lg) {
			@content;
		}
	}
}


/**
 * AU-sronly - Hide an element from the screen but not a screen reader
 */
@mixin AU-sronly() {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	border: 0;
}


/**
 * AU-outline - Create outline based on the theme the user is using.
 *
 * @param  {keywords} $theme - `dark` or default ( `light` )
 *
 * @return {string}          - The code
 */
@mixin AU-outline( $theme: 'light' ) {
	@if $theme == 'dark' {
		outline: 3px solid $AU-colordark-foreground-focus;
	}
	@else {
		outline: 3px solid $AU-color-foreground-focus;

		// Only add the offset if it's the default style
		outline-offset: 2px;
	}
}


/**
 * AU-focus - Add the outline to focus
 */
@mixin AU-focus( $theme: 'light' ) {
	&:focus {
		@include AU-outline( $theme );
	}

	// Remove Modzilla inner HTML dotted line. github.com/necolas/normalize.css/blob/master/normalize.css#L285
	&::-moz-focus-inner {
		border: 0;
	}
}


/**
 * AU-fontgrid Mixin for setting font-size and line-height that snaps to the grid.
 *
 * @param  {keywords} $fontsize-key   -  Either one of the following keywords: xs, sm, md, lg, xl, xxl, xxxl
 * @param  {keywords} $lineheight-key -  Either one of the following keywords: heading, nospace, default
 *
 * @return {string}                   - The code; fontsize in REM, with PX fallback, and unitless line-height which matches vertical grid
*/
@mixin AU-fontgrid( $fontsize-key, $lineheight-key: 'default' ) {

	@if type-of( $fontsize-key ) != 'string' {
		@error "Going somewhere, Solo?; the AU-fontgrid mixin fontsize key takes a string!";
	}

	@if type-of( $lineheight-key ) != 'string' {
		@error "Tell Jabba I've got his money; the AU-fontgrid mixin lineheight key takes a string!";
	}

	@if not map-has-key( $AU-fontsize-map, $fontsize-key ) {
		@error "You shall not pass; the AU-fontgrid mixin only takes the following fontsize keys strings: " + map-keys( $AU-fontsize-map );
	}

	@if not map-has-key( $AU-lineheight-map, $lineheight-key ) {
		@error "There's a snake in my boot; the AU-fontgrid mixin only takes the following lineheight keys strings: " + map-keys( $AU-lineheight-map );
	}

	// Get the value from supplied key for pixel and calculate the rem value
	$fontsize-px: map-get( $AU-fontsize-map, $fontsize-key );
	$fontsize-rem: $fontsize-px / $AU-rem;

	// Change the lineheight if it doesn't hit a AU-unit e.g. 40px font size with 1.5 lineheight = 50px should be 52px
	$lineheight-pixel: round( ( map-get( $AU-lineheight-map, $lineheight-key ) * $fontsize-px ) / $AU-unit ) * $AU-unit;
	$lineheight: $lineheight-pixel / $fontsize-px;

	// Mixin output
	font-size: $fontsize-px + 0px;   // Pixel fallback for non-rem support
	font-size: $fontsize-rem + 0rem; // REM size
	line-height: $lineheight;
}


//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// GLOBAL VARIABLES
//--------------------------------------------------------------------------------------------------------------------------------------------------------------
/**
 * AU-pixelfallback enable pixel fallbacks
 */
$AU-pixelfallback: true !default;

/**
 * AU-media Breakpoints
 */
$AU-media-xs: 576px !default; // media query breakpoints
$AU-media-sm: 768px !default;
$AU-media-md: 992px !default;
$AU-media-lg: 1200px !default;


/**
 * AU-rem value used for REM calculation
 */
$AU-rem: 16 !default;


/**
 * AU-unit used for all type and grid calculations
 */
$AU-unit: 4 !default;


/**
 * AU-font stack
 * AU-font-monospace stack
 */
$AU-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$AU-font-monospace: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace !default;


/**
 * AU-fontsize-map
 *
 * Predetermined pixel sizes from a 1.25 typescale rounded to the nearest $AU-unit (vertical grid)
 */
$AU-fontsize-map: (
	xs:   14,
	sm:   16,
	md:   20,
	lg:   24,
	xl:   32,
	xxl:  40,
	xxxl: 48
) !default;


/**
 * AU-lineheight-map
 *
 * Predetermined lineheight mapped to keyword
 */
$AU-lineheight-map: (
	nospace: 1,
	heading: 1.25,
	default: 1.5
) !default;


/**
 * AU-maxwidth for line lengths (the ‘measure’)
 */
$AU-maxwidth: 42em !default; // Answer to life, the universe, and everything (keeps things readable on wide viewports).


/**
 * Colors light theme
 */
$AU-color-foreground-text:   #313131 !default;
$AU-color-foreground-action: #00698f !default;
$AU-color-foreground-focus:  #9263DE !default;
$AU-color-background:        #ffffff !default;


$AU-color-lowest-contrast: AU-color-lowest-contrast(
	( $AU-color-foreground-text, $AU-color-foreground-action ),
	$AU-color-background
);


// Override the background if it's not accessible and generate shades
$AU-color-background:           AU-color-a11y( $AU-color-background, $AU-color-lowest-contrast );
$AU-color-background-shade:     darken( $AU-color-background, 4% );
$AU-color-background-alt:       darken( $AU-color-background, 8% );
$AU-color-background-alt-shade: darken( $AU-color-background, 12% );


// Generated border and muted colours
$AU-color-foreground-muted:  mix( $AU-color-foreground-text, $AU-color-background );
$AU-color-foreground-border: mix( $AU-color-foreground-text, $AU-color-background );

// If the background is light
@if ( lightness( $AU-color-background ) > 50 ) {
	$AU-color-foreground-muted:  AU-color-a11y( $AU-color-foreground-muted, $AU-color-background-alt-shade );
	$AU-color-foreground-border: AU-color-a11y( $AU-color-foreground-border, $AU-color-background-alt-shade, 'large');
}
@else {
	$AU-color-foreground-muted:  AU-color-a11y( $AU-color-foreground-muted, $AU-color-background );
	$AU-color-foreground-border: AU-color-a11y( $AU-color-foreground-border, $AU-color-background, 'large');
}



/**
 * Colors dark theme
 */
$AU-colordark-foreground-text:   #ffffff !default;
$AU-colordark-foreground-action: #61daff !default;
$AU-colordark-foreground-focus:  #C390F9 !default;
$AU-colordark-background:        #135E70 !default;

$AU-colordark-lowest-contrast: AU-color-lowest-contrast(
	(
		$AU-colordark-foreground-text,
		$AU-colordark-foreground-action,
	),
	$AU-colordark-background
);

// Override the background if it's not accessible and generate shades
$AU-colordark-background:           AU-color-a11y( $AU-colordark-background, $AU-colordark-lowest-contrast );
$AU-colordark-background-shade:     darken( $AU-colordark-background, 4% );
$AU-colordark-background-alt:       darken( $AU-colordark-background, 8% );
$AU-colordark-background-alt-shade: darken( $AU-colordark-background, 12% );

// Generated border and muted colours
$AU-colordark-foreground-muted:  mix( $AU-colordark-foreground-text, $AU-colordark-background );
$AU-colordark-foreground-border: mix( $AU-colordark-foreground-text, $AU-colordark-background );

// If the background is light
@if ( lightness( $AU-colordark-background ) > 50 ) {
	$AU-colordark-foreground-muted:  AU-color-a11y( $AU-colordark-foreground-muted, $AU-colordark-background-alt-shade );
	$AU-colordark-foreground-border: AU-color-a11y( $AU-colordark-foreground-border, $AU-colordark-background-alt-shade, 'large');
}
@else {
	$AU-colordark-foreground-muted:  AU-color-a11y( $AU-colordark-foreground-muted, $AU-colordark-background );
	$AU-colordark-foreground-border: AU-color-a11y( $AU-colordark-foreground-border, $AU-colordark-background, 'large');
}

/**
 * Colors system messages
 */
$AU-color-error:   #ff635c !default;
$AU-color-success: #0cac78 !default;
$AU-color-warning: #f69900 !default;
$AU-color-info:    #00bfe9 !default;


/**
 * AU-border-radius styles
 */
$AU-border-radius: $AU-unit + 0px !default;

Feb 17 '19 05:02 svict4

Here's a codepen that hopefully demonstrates the issue. Happy to be told I'm an idiot if I'm missing something.

Feb 17 '19 05:02 svict4

Hey @svict4 good pick up We have recently patched the core module to adjust our colours when a foreground and background combination is not accessible. The action color #008490 does not meet WCAG AA on background of #ffffff. However the colors that it is being adjusted to are not a11y unfortunately. Will need to investigate this further

Feb 17 '19 05:02 sukhrajghuman

Ah yep I see now using the the template customizer: https://designsystem.gov.au/templates/home/customise/?&text=%23313131&action=%23008490&background=%23FFFFFF&textDark=%23FFFFFF&actionDark=%2361DAFF&backgroundDark=%23135E70

Feb 17 '19 05:02 svict4

Hey @svict4 we were actually toying with the idea of removing the auto-adjust functionality. Instead we would alert the developers in the console that the colour palette selection are not a11y. We believe this is more inline with expected behaviour. What are your thoughts on this?

Feb 25 '19 06:02 sukhrajghuman

Yes that is a better approach. At least then if there are changes to the palette generator, it won't surprise developers. Have the alert suggest an a11y colour palette per the code you've already written.

Feb 26 '19 04:02 svict4

@svict4 I've made a note in the community forum regarding this. I think we should wait for some more feedback until we look to implement switching from forcing the change to warning about it. Keep your 👀 peeled!

https://community.digital.gov.au/t/core/94/14

Feb 26 '19 04:02 azerella

design-system-components design-system-components copied to clipboard

AU-color-a11y not respecting AU-color-background #fff

Bug Report

What happened

What I expected to happen

Reproducing

Steps to reproduce:

Attachments

design-system-components
design-system-components copied to clipboard