////////////////////////////// // Compass Extension Imports ////////////////////////////// @import 'color-schemer'; /// Tint and Shade @function tint($colour, $amount) { @return mix(#fff, $colour, $amount); } @function shade($colour, $amount) { @return mix(#000, $colour, $amount); } $color-stack-amounts: 25%, 50%, 75%, 85%, 90% !default; $colour-stack-amounts: $color-stack-amounts !default; // Create a colour stack using the given colours and tints @function colour-stack($main, $secondary, $amounts...) { @if length($amounts) == 0 { $amounts: $colour-stack-amounts; } @else if length($amounts) == 1 { $amounts: nth($amounts, 1); } $stack: $main; @each $amount in $amounts { $stack: join($stack, mix($secondary, nth($stack, 1), $amount)); } @return $stack; } @function color-stack($main, $secondary, $amounts...) { @if length($amounts) > 0 { @return colour-stack($main, $secondary, $amounts); } @else { @return colour-stack($main, $secondary); } } @function tint-stack($colour, $amounts...) { @if length($amounts) > 0 { @return colour-stack($colour, #fff, $amounts); } @else { @return colour-stack($colour, #fff); } } @function shade-stack($colour, $amounts...) { @if length($amounts) > 0 { @return colour-stack($colour, #000, $amounts); } @else { @return colour-stack($colour, #000); } } ////////////////////////////// // Creates an even scale from one color to another ////////////////////////////// $color-scale-shades: 6 !default; $colour-scale-shades: $color-scale-shades !default; @function colour-scale($main, $secondary, $shades: $colour-scale-shades) { @return color-scale($main, $secondary, $shades); } @function color-scale($main, $secondary, $shades: $color-scale-shades) { $list: $main; $red1: red($main); $red2: red($secondary); $red-diff: (($red1 - $red2) / (($shades - 1))); $grn1: green($main); $grn2: green($secondary); $grn-diff: (($grn1 - $grn2) / (($shades - 1))); $blu1: blue($main); $blu2: blue($secondary); $blu-diff: (($blu1 - $blu2) / (($shades - 1))); $red-hold: $red1; $grn-hold: $grn1; $blu-hold: $blu1; @for $i from 2 through $shades { $red-hold: $red-hold - ($red-diff); $grn-hold: $grn-hold - ($grn-diff); $blu-hold: $blu-hold - ($blu-diff); $color-hold: rgb($red-hold, $grn-hold, $blu-hold); $list: append($list, $color-hold); } @return $list; }