overleaf/services/web/frontend/stylesheets/app/ol-style-guide.less

.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 {
			font-size: 10px;
			content: '@{colorValAsRGB}';
		}
	}
}

.color-row {
	display: flex;
	justify-content: space-between;
}

.color-box {
	background: white;
	margin: 10px 4px;
	border-radius: 4px;
	width: 16.666%;
	.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;
}