$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%);
}