_globals.scss

/*! [replace-name] v[replace-version] */

//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// 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: "[replace-name]";
$version: "[replace-version]";
$dependencies: (
	[replace-dependencies]
);

//--------------------------------------------------------------------------------------------------------------------------------------------------------------
// 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' and $breakpoint != 'xl' {
		@error "There’s no crying in baseball; the AU-media mixin only takes the following breakpoint strings: xs, sm, md, lg, xl";
	}

	@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;
		}
	}

	@if( $breakpoint == "xl" ) {
		@media (min-width: $AU-media-xl) {
			@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: 0;
 $AU-media-sm: 576px; // media query breakpoints
 $AU-media-md: 768px;
 $AU-media-lg: 992px;
 $AU-media-xl: 1200px;

/**
 * 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-foreground-hint:   #6f777b !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% );
$AU-color-foreground-alt-hint:     #61696B !default;


// 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:   #d60000 !default;
$AU-color-success: #0b996c !default;
$AU-color-warning: #f69900 !default;
$AU-color-info:    #00bfe9 !default;


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