codesignd Patterns

$color--pagebg: #f2f2f2 !default;
$color--text: #000 !default;
$color--warn: #e63a16 !default;

// Passive colors include some primary brand color
$color--passive: mix($color--brand-primary, #ddd, 3%) !default;
$color--passive-dark: darken($color--passive, 10%) !default;
$color--passive-light: lighten($color--passive, 5%) !default;

// Mixin for the page pattern background
@mixin background--pagepattern {
	background-color: $color--pagebg;
	background: -cdd-img-url('pagepattern.svg'), none;
}

// Color helper classes
.color--pagebg {
	color: $color--pagebg;
}
.background--pagebg {
	background: $color--pagebg;
}

.background--pagepattern {
	@include background--pagepattern;
}

.color--text {
	color: $color--text;
}
.background--text {
	background: $color--text;
}

.color--warn {
	color: $color--warn;
}
.background--warn {
	background: $color--warn;
}

.color--passive {
	color: $color--passive;
}
.background--passive {
	background: $color--passive;
}

.color--passive-dark {
	color: $color--passive-dark;
}
.background--passive-dark {
	background: $color--passive-dark;
}

.color--passive-light {
	color: $color--passive-light;
}
.background--passive-light {
	background: $color--passive-light;
}

.color--brand-primary {
	color: $color--brand-primary;
}
.background--brand-primary {
	background: $color--brand-primary;
}

.color--brand-primary-alternate {
	color: $color--brand-primary-alternate;
}
.background--brand-primary-alternate {
	background: $color--brand-primary-alternate;
}

.color--brand-secondary {
	color: $color--brand-secondary;
}
.background--brand-secondary {
	background: $color--brand-secondary;
}

.color--brand-secondary-alternate {
	color: $color--brand-secondary-alternate;
}
.background--brand-secondary-alternate {
	background: $color--brand-secondary-alternate;
}

// Set the main colors on body
body {
	color: $color--text;
	@include background--pagepattern;
	
	@media print {
		background: none;
	}
}

// Selection background
::selection {
	background: lighten($color--brand-primary, 30%);
}