Add styleguide classes.

services/web/public/stylesheets/app/ol-style-guide.less

@@ -0,0 +1,65 @@
+.renderColorSwatchClasses(@colorName) {
+	@colorVal: @@colorName;
+	@colorValRed: red(@colorVal);
+	@colorValGreen: green(@colorVal);
+	@colorValBlue: blue(@colorVal);
+	@colorValAsRGB: 'rgb(@{colorValRed}, @{colorValGreen}, @{colorValBlue})';
+
+	&.@{colorName} {
+		.color-swatch {
+			background-color: @colorVal;
+		}
+		.color-less-var::before {
+			content: '@@{colorName}';
+		}
+		.color-hex-val::before {
+			content: '@{colorVal}';
+		}
+		.color-rgb-val::before {
+			content: '@{colorValAsRGB}';
+		}
+	}
+}
+
+.color-row {
+	display: flex;
+	justify-content: space-between;
+}
+
+.color-box {
+	background: white;
+	margin: 10px 4px;
+	flex: 1;
+	border-radius: 4px;
+	.renderColorSwatchClasses(ol-blue-gray-1);
+	.renderColorSwatchClasses(ol-blue-gray-2);
+	.renderColorSwatchClasses(ol-blue-gray-3);
+	.renderColorSwatchClasses(ol-blue-gray-4);
+	.renderColorSwatchClasses(ol-blue-gray-5);
+	.renderColorSwatchClasses(ol-blue-gray-6);
+	.renderColorSwatchClasses(ol-green);
+	.renderColorSwatchClasses(ol-dark-green);
+	.renderColorSwatchClasses(ol-blue);
+	.renderColorSwatchClasses(ol-dark-blue);
+	.renderColorSwatchClasses(ol-red);
+	.renderColorSwatchClasses(ol-dark-red);
+}
+
+.color-swatch {
+	height: 100px;
+	width: 100px;
+	margin: 10px auto;
+	border-radius: 4px;
+}
+
+.color-label {
+	display: flex;
+	flex-direction: column;
+	margin: 0 3px 10px;
+}
+
+.color-label pre {
+	font-size: 12px;
+	line-height: 1.8em;
+	margin: 0 auto;
+}

services/web/public/stylesheets/ol-style.less

@@ -1,3 +1,4 @@
 // Core variables and mixins
 @import "core/ol-variables.less";
+@import "app/ol-style-guide.less";
 @import "_style_includes.less";