Initial public commit

shared/1-globals/colors/colors.html.php

@@ -0,0 +1,38 @@
+<div class="preview-canvas">
+	<h1>Color previews</h1>
+	
+	<ul class="palette">
+		<li class="palette__color">
+			<div class="palette__swatch background--pagebg"></div>
+			<p class="palette__label">pagebg</p>
+		</li>
+		<li class="palette__color">
+			<div class="palette__swatch background--pagepattern"></div>
+			<p class="palette__label">pagepattern</p>
+		</li>
+		<li class="palette__color">
+			<div class="palette__swatch background--text"></div>
+			<p class="palette__label">text</p>
+		</li>
+		<li class="palette__color">
+			<div class="palette__swatch background--warn"></div>
+			<p class="palette__label">warn</p>
+		</li>
+	</ul>
+	<ul class="palette">
+		<li class="palette__color">
+			<div class="palette__swatch background--passive-light"></div>
+			<p class="palette__label">passive-light</p>
+		</li>
+		<li class="palette__color">
+			<div class="palette__swatch background--passive"></div>
+			<p class="palette__label">passive</p>
+		</li>
+		<li class="palette__color">
+			<div class="palette__swatch background--passive-dark"></div>
+			<p class="palette__label">passive-dark</p>
+		</li>
+	</ul>
+	
+	<p>Brand colors are specific to each site, so please also see the site-specific color previews.</p>
+</div>

shared/1-globals/colors/colors.scss

@@ -0,0 +1,104 @@
+$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%);
+}

shared/1-globals/colors/pagepattern.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
+	<filter id="f" color-interpolation-filters="sRGB">
+		<feTurbulence type="fractalNoise" baseFrequency="0.2" numOctaves="5" result="noise"/>
+		<feDiffuseLighting in="noise" lighting-color="white" diffuseConstant="1" surfaceScale="0.3">
+			<feDistantLight azimuth="90" elevation="50"/>
+		</feDiffuseLighting>
+	</filter>
+	<rect width="500" height="500" filter="url(#f)" fill="#f2f2f2" opacity="0.2"/>
+</svg>