Merge branch 'it17535090' into 'develop'

It17535090

See merge request !4

BE-Aeasthatic-Quality-Check/colorcube-master/.eslintrc.json

+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:react/recommended"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 12,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off"
+    }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/.gitignore

+# Mac image stores
+.DS_Store
+
+# Build files that aren't needed
+node_modules/
+/src/scss/libraries/neat/
+/src/scss/libraries/bourbon/
+/src/css/styles.css.map

BE-Aeasthatic-Quality-Check/colorcube-master/assets/css/main.css

+body {
+	font-family: 'Arial', sans-serif;
+	background-image: url('gridme.png');
+}
+
+h1 {
+	text-align: center;
+	text-shadow: 0px 1px 3px black;
+	font-size: 80px;
+}
+
+p
+{
+	text-shadow: 0px 1px 3px #999999;
+}
+
+div
+{
+	font-size: 25px;
+	text-shadow: 0px 1px 3px #999999;
+}
+
+
+.colorResults {
+
+	width: 100px;
+	height: 100px;
+	float: left;
+	margin: 5px 5px 5px 5px;
+	padding: 5px 5px 5px 5px;
+	color: #ffffff;
+	text-shadow: 1px 1px 1px black;
+
+}
+
+.thumb {
+	height: 250px;
+	/*border: 1px solid #000;*/
+	margin: 10px 10px 10px 10px;
+	-moz-box-shadow: 0px 2px 8px 0px #555;
+	-webkit-box-shadow: 0px 2px 8px 0px #555;
+	box-shadow: 0px 2px 8px 0px #555;
+}
+
+.swatch
+{
+	width: 50px;
+	height: 50px;
+	float: left;
+	margin: 5px 5px 5px 5px;
+	padding: 5px 5px 5px 5px;
+	color: #ffffff;
+	text-shadow: 1px 1px 1px black;
+	border: 1px solid #999999;
+}
+
+#scheme
+{
+	display: none;
+	width: 400px;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/css/scss/styles.scss

+// The files that compile
+
+@import 'abstracts/index';
+@import 'base/index';
+@import 'layout/index';
+@import 'components/index';

BE-Aeasthatic-Quality-Check/colorcube-master/assets/js/detection.js

+/*
+ *
+ * This is for uploading files to the page, standard HTML5 jazz.
+ *
+ * */
+function handleFileSelect(evt)
+{
+	var files = evt.target.files;
+
+	// Loop through the FileList and render image files as thumbnails
+	for (var i = 0, f; f = files[i]; i++)
+	{
+
+		// Only process image files
+		if (!f.type.match('image.*'))
+		{
+			continue;
+		}
+
+		var reader = new FileReader();
+
+		// Capture the file info
+		reader.onload = (function(theFile)
+		{
+			return function(e)
+			{
+				// Render thumbnail.
+				var span = document.createElement('span');
+				span.innerHTML = ['<img class="thumb" onclick="javascript:analyze(this, event);" src="', e.target.result, '" title="', escape(theFile.name), '"/>'].join('');
+				document.getElementById('list').insertBefore(span, null);
+			};
+		})(f);
+
+		// Read the image file as data URL
+		reader.readAsDataURL(f);
+	}
+	var message = document.getElementById('message');
+	message.innerHTML = 'Click any image to get theme colors!';
+}
+
+/*
+* This portion was created by referencing the article
+* "Using python and k-means to find the dominant colors in images"
+* By Charles Leifer
+* */
+
+// You can see the Python version of this in Charles Leifer's article
+function euclidean(point1, point2)
+{
+	var s = 0;
+	for (var i = 0, l = point1.length; i < l; i++)
+	{
+		s += Math.pow(point1[i] - point2[i], 2)
+	}
+	return Math.sqrt(s);
+}
+
+// There are various ways to convert rgb to hex, I found this on Stack Overflow.
+function rgbToHex(rgb)
+{
+	function toHex(c)
+	{
+		var hex = parseInt(c).toString(16);
+		return hex.length == 1 ? '0' + hex : hex;
+	}
+	return '#' + toHex(rgb[0]) + toHex(rgb[1]) + toHex(rgb[2]);
+	
+}
+
+function calculateCenter(points, n)
+{
+	var values = []
+
+	// Here we're populating the values array with 0s just so we know what size it should be (n)
+	for (var i = 0; i < n; i++)
+	{
+		values.push(0);
+	}
+
+	var plength = 0;
+
+	for (var i = 0, l = points.length; i < l; i++)
+	{
+		plength++;
+		for (var j = 0; j < n; j++)
+		{
+			values[j] += points[i][j];
+		}
+	}
+
+	// Using the average to get the centers
+	for (var i = 0; i < n; i++)
+	{
+		values[i] = values[i] / plength;
+	}
+
+	return values;
+}
+
+// I basically just took this from Charles Leifer.
+function k_mean(points, k, min_diff)
+{
+	plength = points.length;
+	colorGroup = [];
+	seen = [];
+	while (colorGroup.length < k)
+	{
+		idx = parseInt(Math.random() * plength);
+		found = false;
+		for (var i = 0; i < seen.length; i++)
+		{
+			if (idx === seen[i])
+			{
+				found = true;
+				break;
+			}
+		}
+		if (!found)
+		{
+			seen.push(idx);
+			colorGroup.push([points[idx], [points[idx]]]);
+		}
+	}
+
+	while (true)
+	{
+		plists = [];
+		for (var i = 0; i < k; i++)
+		{
+			plists.push([]);
+		}
+
+		for (var j = 0; j < plength; j++)
+		{
+			var p = points[j], smallest_distance = 10000000, idx = 0;
+			for (var i = 0; i < k; i++)
+			{
+				var distance = euclidean(p, colorGroup[i][0]);
+				if (distance < smallest_distance)
+				{
+					smallest_distance = distance;
+					idx = i;
+				}
+			}
+			plists[idx].push(p);
+		}
+
+		var diff = 0;
+		for (var i = 0; i < k; i++)
+		{
+			var old = colorGroup[i], list = plists[i], center = calculateCenter(plists[i], 3), new_cluster = [center, (plists[i])], dist = euclidean(old[0], center);
+			colorGroup[i] = new_cluster
+			diff = diff > dist ? diff : dist;
+		}
+		if (diff < min_diff)
+		{
+			break;
+		}
+	}
+	return colorGroup;
+}
+
+// Here's where we to actual interaction with the webpage
+function processimg(img, canvaselement)
+{
+	var points = [];
+
+	// Drawing the given image onto a canvas 250x250 in size
+	canvaselement.drawImage(img, 0, 0, 250, 250);
+
+	// Getting data from said canvas.  This *DOES* get every pixel in the image.
+	// Luckily, it's fast.
+	dataCanvas = canvaselement.getImageData(0, 0, 250, 250).data;
+
+	// Populating the points array with colors from the image
+	for (var i = 0, l = dataCanvas.length; i < l; i += 4)
+	{
+		var r = dataCanvas[i], g = dataCanvas[i + 1], b = dataCanvas[i + 2];
+		points.push([r, g, b]);
+	}
+
+	var totals = k_mean(points, 3, 1), hex = [];
+
+	// If you try and convert the RGB to Hex directly here, it takes FOREVER,
+	// but if you have the helper method above, it works fast.  Strange.
+	for (var i = 0; i < totals.length; i++)
+	{
+		hex.push(rgbToHex(totals[i][0]));
+	}
+
+	return hex;
+}
+
+function pick(img, canvaselement, x, y)
+{
+	var pickedColor = "hay";
+
+	xx = x;
+	yy = y;
+
+	var imgData = canvaselement.getImageData(xx, yy, 1, 1).data;
+
+	pickedColor = rgbToHex(imgData);
+
+	return pickedColor;
+}
+
+// This is called when the user clicks an image.
+function analyze(img_elem, event)
+{
+	// This is getting the canvas from the page and the image in it
+	canvaselement = document.getElementById('canvas').getContext('2d'), img = new Image();
+	//var coords = relMouseCoords(document.getElementById('canvas'), event);
+
+	img.onload = function()
+	{
+		var message = document.getElementById('message');
+		//Hopefully we'll never see the "Loading..." message but it's here just in case
+		message.innerHTML = 'Loading...';
+		var colors = processimg(img, canvaselement);
+
+		// Showing the message of processing the image to the user
+		message.innerHTML = 'Theme Colors';
+		console.log(colors.length, 'length');
+		
+		document.getElementById('ts0').value = colors[0];
+		document.getElementById('ts1').value = colors[1];
+		document.getElementById('ts2').value = colors[2];
+		document.getElementById('ts3').value = colorfun;
+		document.getElementById('color1').style.backgroundColor = colors[0];
+		document.getElementById('color1').innerHTML = colors[0];
+		document.getElementById('color2').style.backgroundColor = colors[1];
+		document.getElementById('color2').innerHTML = colors[1];
+		document.getElementById('color3').style.backgroundColor = colors[2];
+		document.getElementById('color3').innerHTML = colors[2];
+		
+		
+		var colorfun = pick(img, canvaselement, event.offsetX, event.offsetY);
+		// pass in coordinates
+
+		document.getElementById('pickedColor').style.backgroundColor = colorfun;
+		document.getElementById('pickedColor').innerHTML = colorfun;
+		
+		document.getElementById('scheme').style.display="block";
+		
+		createSwatches(colorfun);
+		
+	}
+
+	img.src = img_elem.src;
+}
+
+// This is for the swatches that are generated from the picked color.
+function createSwatches(hex)
+{
+	nHex = hex;
+
+	// The light and dark values could potentially be changed so colors are changed based on these hues.  
+	// It's this way just in case we expand it to include such functionality.
+	var lightRGB = new Array(255, 255, 255);
+	var darkRGB = new Array(0, 0, 0);
+	var colorValues = new Array();
+	var swatch = new Array();
+
+	baseColor = hexToRGB(nHex);
+	opArray = new Array(1.0, .75, .50, .25, .10, .85, .75, .50, .25, .10);
+	for ( i = 0; i < 10; i++)
+	{
+		nMask = i < 5 ? lightRGB : darkRGB;
+
+		nColor = setColorHue(baseColor, opArray[i], nMask);
+
+		nHex = toHex(nColor[0]) + toHex(nColor[1]) + toHex(nColor[2]);
+
+		colorValues[i] = new Array();
+		colorValues[i][0] = nHex;
+		colorValues[i][1] = nColor;
+		
+		// Actually putting the swatches on the page
+		document.getElementById("s"+i).style.backgroundColor = "#" + nHex;
+	}
+}
+
+// Actually crating the hues with different lightness
+function setColorHue(originColor, opacityPercent, maskRGB)
+{
+	returnColor = new Array();
+	for ( w = 0; w < originColor.length; w++)
+		returnColor[w] = Math.round(originColor[w] * opacityPercent) + Math.round(maskRGB[w] * (1.0 - opacityPercent));
+	return returnColor;
+}
+
+// Helper method for sonverting to HEX
+function toHex(dec) {
+	hex=dec.toString(16);
+	if(hex.length==1)hex="0"+hex;
+	if(hex==100)hex="FF";
+	return hex.toUpperCase();
+}
+
+//Converting HEX to RGB
+function hexToRGB(hex)
+{
+	var r = hexToR(hex);
+	var g = hexToG(hex);
+	var b = hexToB(hex);
+
+	function hexToR(h)
+	{
+		return parseInt((cutHex(h)).substring(0, 2), 16)
+	}
+
+	function hexToG(h)
+	{
+		return parseInt((cutHex(h)).substring(2, 4), 16)
+	}
+
+	function hexToB(h)
+	{
+		return parseInt((cutHex(h)).substring(4, 6), 16)
+	}
+
+	function cutHex(h)
+	{
+		return (h.charAt(0) == "#") ? h.substring(1, 7) : h
+	}
+
+	return new Array(r, g, b);
+}
+
+
+// This is currently not used.  Maybe if we start playing with hues and everything, it'll be useful!
+/*
+ function HueShift(h,s) {
+ h+=s;
+ while (h>=360.0) h-=360.0;
+ while (h<0.0) h+=360.0;
+ return h;
+ }
+
+ function convertToHSV(hex)
+ {
+ var r = hexToR(hex);
+ var g = hexToG(hex);
+ var b = hexToB(hex);
+
+ function hexToR(h)
+ {
+ return parseInt((cutHex(h)).substring(0, 2), 16)
+ }
+
+ function hexToG(h)
+ {
+ return parseInt((cutHex(h)).substring(2, 4), 16)
+ }
+
+ function hexToB(h)
+ {
+ return parseInt((cutHex(h)).substring(4, 6), 16)
+ }
+
+ function cutHex(h)
+ {
+ return (h.charAt(0) == "#") ? h.substring(1, 7) : h
+ }
+
+ var computedH = 0;
+ var computedS = 0;
+ var computedV = 0;
+
+ r = r / 255;
+ g = g / 255;
+ b = b / 255;
+ var minRGB = Math.min(r, Math.min(g, b));
+ var maxRGB = Math.max(r, Math.max(g, b));
+
+ // Black-gray-white
+ if (minRGB == maxRGB)
+ {
+ computedV = minRGB;
+ return [0, 0, computedV];
+ }
+
+ // Colors other than black-gray-white:
+ var d = (r == minRGB) ? g - b : ((b == minRGB) ? r - g : b - r);
+ var h = (r == minRGB) ? 3 : ((b == minRGB) ? 1 : 5);
+ computedH = 60 * (h - d / (maxRGB - minRGB));
+ computedS = (maxRGB - minRGB) / maxRGB;
+ computedV = maxRGB;
+ return [computedH, computedS, computedV];
+
+ }
+ */
\ No newline at end of file

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/_fonts.scss

+// External or internally hosted fonts
+// Two ways we can go about adding custom fonts: 
+
+// ## Hosted Google fonts
+// Drop the @import tag here and define the font families
+
+@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i|Source+Sans+Pro:300,500,700&display=swap');
+
+$font-serif-family: 'Playfair Display';
+$font-serif-weight-normal: 400;
+$font-serif-style-italic: 400i;
+
+$font-sans-family: 'Source Sans Pro';
+$font-sans-weight-normal: 300;
+$font-sans-weight-semi: 500;
+$font-sans-weight-bold: 700;
+
+$project-lineheight-base: 1.5;
+$project-lineheight-loose: 1.6875;
+$project-lineheight-tight: 1.25;
+
+// Set defaults
+$font-family-base: $font-sans-family, 'Healvetica Neue', sans-serif;
+$font-weight-base: $font-sans-weight-normal;
+$font-weight-bold: $font-sans-weight-bold;
+
+$font-family-serif: $font-serif-family, serif;

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/_functions.scss

+////
+/// Oomph Scaffold Functions
+/// @access public
+/// @group Oomph Functions
+/// @author Oomph, Inc. UX Engineers
+/// @parameter none
+/// @require no 3rd party requirements
+////
+
+
+/// Remove (strip) Units
+/// @author Bourbon / Thoughbot
+/// @parameter {Value} $value -Value, assumed number with unit
+/// @example  scss - Usage
+///   line-height: strip-unit(1.5em);
+/// @example css - Output
+///   line-height: 1.5;
+@function strip-unit($value) {
+  @return ($value / ($value * 0 + 1));
+}
+
+
+/// px()
+/// Change a unitless value to px
+/// @author jhogue
+/// @require strip-unit()
+/// @param {float} $value - Numeric value assumed to be pixels
+/// @example scss - Usage
+///   width: px(48);
+/// @example css - Output
+///   width: 48px;
+@function px($value) {
+  @if not unitless($value) {
+    $value: strip-unit($value);
+  }
+  @return ($value * 1px);
+}
+
+
+/// em()
+/// Change a (assumed) pixel value to an em
+/// @author Bourbon / Thoughbot
+/// @require strip-unit()
+/// @param {float} $value - Numeric value assumed to be pixels
+/// @param {float} $base - (optional) Numeric value for the pixel multiplier
+/// @example scss - Usage
+///   font-size: em(24);
+///   width: em(48, 24);
+/// @example css - Output
+///   font-size: 1.5em;
+///   width: 2em;
+@function em($value, $base: 16) {
+  @if not unitless($value) {
+    $value: strip-unit($value);
+  }
+  @if not unitless($base) {
+    $base: strip-unit($base);
+  }
+  @return ($value / $base) * 1em;
+}
+
+
+/// rem()
+/// Change a (assumed) pixel value to an rem
+/// @author Bourbon / Thoughbot
+/// @require strip-unit()
+/// @param {float} $value - Numeric value assumed to be pixels
+/// @param {float} $base - (very optional) Numeric value for the pixel multiplier
+/// @example scss - Usage
+///   width: rem(48);
+/// @example css - Output
+///   width: 3rem;
+@function rem($value, $base: 16px) {
+  @if not unitless($value) {
+    $value: strip-unit($value);
+  }
+  @if not unitless($base) {
+    $base: strip-unit($base);
+  }
+  @return ($value / $base) * 1rem;
+}
+
+
+/// clearfix()
+/// Clearfix still useful, though less and less
+/// @author Bourbon / Thoughbot
+/// @require {None}
+/// @param {None}
+/// @example scss - Usage
+///   .element {
+///     @include clearfix;
+///   }
+/// @example css - Output
+///   .element::after {
+///     clear: both;
+///     content: "";
+///     display: block;
+///   }
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: "";
+    display: block;
+  }
+}
+
+
+/// percent-color() =
+/// Emulate the way Adobe Illustrator allows percentages of defined global colors
+/// @link http://thesassway.com/intermediate/mixins-for-semi-transparent-colors
+/// @require Bourbon strip-units(), SASS opacify() and mix()
+/// @param $color - A color as Hex, RGB or HSL. Percent as numeric
+/// @param $percent - Optional background color for mixing function
+/// @param $background [white]
+/// @example scss - Usage
+///   background-color: percent-color(#666, 50%);
+/// @example css - Output
+///   background-color: #ccc;
+@function percent-color($color, $percent, $background: white) {
+  $percent: strip-unit($percent);
+  $opaque: opacify($color, 1);
+  $solid-color: mix($opaque, $background, $percent);
+  @return $solid-color;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/_index.scss

+// Import all Abstracts
+
+// Helpful functions and mixins for every project
+@import 'functions';
+@import 'mixins/clamping';
+@import 'mixins/fluid-units';
+@import 'mixins/fluid-typography';
+@import 'mixins/hacks';
+@import 'mixins/maintain-ratio';
+@import 'mixins/screen-reader';
+@import 'mixins/show-hide';
+
+// Fonts should load at the top of the CSS file
+@import 'fonts';
+
+// Project Variables — things that need to be defined before BS4
+@import 'project-vars/breakpoints';
+@import 'project-vars/colors';
+@import 'project-vars/spacing';
+@import 'project-vars/type-sizes';
+@import 'project-vars/vars';

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_clamping.scss

+/// Various ways to do line clamping
+/// @author jhogue
+///
+/// @param {String} Max-width value
+///
+/// @example scss - Usage
+///   // .element {
+///   //   @include single-line-clamp(em(240));
+///   // }
+///
+/// @example css - Output
+///   // .element {
+///   //   max-width: 15em;
+///   //   overflow: hidden;
+///   //   text-overflow: ellipsis;
+///   //   white-space: nowrap;
+///   // }
+///
+@mixin single-line-clamp($width) {
+  max-width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/// Simple approach for multi-lines
+/// @author jhogue
+///
+/// @param {Numeric} Number of lines to clamp to
+/// @param {String} Font-size
+/// @param {String} Line-height
+///
+/// @example scss - Usage
+///   // .element {
+///   //   @include multi-line-clamp(2);
+///   // }
+///
+/// @example css - Output
+///   // .element {
+///   //   position: relative;
+///   //   overflow: hidden;
+///   //   max-height: 3.125rem;
+///   //   padding-right: 1em;
+///   // }
+///   // .element::before,
+///   // .element::after {
+///   //   position: absolute;
+///   //   bottom: 0;
+///   //   right: 0;
+///   // }
+///   // .element::before {
+///   //   z-index: 2;
+///   //   content: '\2026';
+///   // }
+///   // .element::after {
+///   //   content: "";
+///   //   z-index: 1;
+///   //   width: 1em;
+///   //   height: 1em;
+///   // }
+///
+/// @example With more complicated $font-size declaration
+///   // .element {
+///   //   @include multi-line-clamp(2, rem(map-get(map-get($type-sizes, x-large), h3)));
+///   // }
+///
+@mixin multi-line-clamp($lines, $fs: $font-size-base, $lh: $line-height-base) {
+  // Set up the variables
+  $lines: $lines * 1rem;
+  $fs: strip-unit($fs);
+  $lh: strip-unit($lh);
+  
+  position: relative;
+  overflow: hidden;
+  max-height: ($lh * $fs) * $lines;
+  padding-right: 1em; // space for ellipsis
+  
+  &::before,
+  &::after {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+  
+  &::before {
+    z-index: 2;
+    content: '\2026';
+  }
+  
+  &::after {
+    content: "";
+    z-index: 1;
+    width: 1em;
+    height: 1em;
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_fluid-typography.scss

+
+/// Deep getter to go into the $type-sizes array
+/// @author jhogue
+///
+/// @require {map} $type-sizes
+///
+/// @require {function} type-of
+/// @require {function} map-get
+///
+/// @param {String} Breakpoint map key name
+/// @param {String} Element name [base]
+///
+/// @example scss - Usage
+///    font-size: px(one-type-size('x-large', 'h1'));
+///
+/// @example css - Output
+///    font-size: 31px;
+///
+@function one-type-size($element, $break: null, $unit: 1rem) {
+  @if $break == null {
+    // No breakpoint name is defined, so grab the first one
+    $keys: map-keys($type-sizes);
+    $break: nth($keys, 1);
+  }
+  @if type-of($type-sizes) != 'map' {
+    @error 'A list named $type-sizes is undefined. [Function one-type-size()]';
+  }
+  @if type-of(map-get($type-sizes, $break)) != 'map' {
+    @error 'Can’t reach into the $type-sizes map for another map. [Function one-type-size()]';
+  }
+  $elementsize: map-get(map-get($type-sizes, $break), $element);
+  
+  // Not sure I like this. We assume pixels in and REM/EM out with this math
+  @return strip-unit(rem($elementsize)) * $unit;
+}
+
+
+/// Use fluid-units() to output all sizes for a typographic element
+/// @author jhogue
+///
+/// @require {map} $type-sizes
+/// @require {map} $project-breakpoints
+///
+/// @require {function} type-of
+/// @require {function} map-keys
+/// @require {function} map-has-key
+/// @require {function} nth
+/// @require {function} length
+/// @require {function} em
+///
+/// @require {function} bp
+///
+/// @require {mixin} one-type-size
+/// @require {mixin} fluid-units
+///
+/// @param {String} Element name [base]
+/// @param {String} Render mobile values [true]
+///
+/// @example scss - Usage
+///   @include one-element-size(h1);
+///
+/// @example css - Output
+///   h1 {
+///     font-size: 1.9375em;
+///   }
+///   @media (min-width: 30em) {
+///     h1 {
+///       font-size: calc(1.9375em + 0.8125 * (100vw - 30em) / 55);
+///     }
+///   }
+///   @media (min-width: 85em) {
+///     h1 {
+///       font-size: calc(1.9375em + 0.8125 * 1em);
+///     }
+///   }
+///
+@mixin fluid-type-sizes($elem: 'base', $mobile: true) {
+  @if type-of($type-sizes) != 'map' {
+    @error 'A list named $type-sizes is undefined. [Mixin one-element-size()]';
+  }
+
+  // List only the keys from the $type-sizes list.
+  // Expects only two. Only uses the first and last
+  $keys: map-keys($type-sizes);
+  $first-key: nth($keys, 1);
+  $last-key: nth($keys, length($keys));
+
+  // Change these key values into a typographic value
+  // by getting the matching key/value pair from the $type-sizes array
+  $min-value: strip-unit((one-type-size($elem, $first-key)));
+  $max-value: strip-unit((one-type-size($elem, $last-key)));
+
+  // Use the same keys to grab the corresponding breakpoints
+  @if type-of($project-breakpoints) != 'map' {
+    @error 'A list named $project-breakpoints is undefined. [Mixin one-element-size()]';
+  }
+  @if not map-has-key($project-breakpoints, $first-key) {
+    @error 'Your $type-sizes map key "#{$first-key}" does not have a corresponding key in $project-breakpoints. [Mixin one-element-size()]';
+  }
+  @if not map-has-key($project-breakpoints, $last-key) {
+    @error 'Your $type-sizes map key "#{$last-key}" does not have a corresponding key in $project-breakpoints. [Mixin one-element-size()]';
+  }
+
+  $min-vw: strip-unit(rem(bp($first-key)));
+  $max-vw: strip-unit(rem(bp($last-key)));
+
+  // Finally, use this mixin to set the base size and max size within the viewport range
+  @if $min-value != $max-value {
+    // Min and Max are different, so output the crazy calc function
+    @include fluid-units('font-size', $min-value, $max-value, $min-vw, $max-vw, 1rem, $mobile);
+  } @else {
+    font-size: ($min-value * 1rem);
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_fluid-units.scss

+/// fluid-units() =
+/// Set a minimum value, maximum value, and use calc() to fluidly go from one to the other in between
+/// @author J. Hogue @artinruins
+/// @link http://www.sassmeister.com/gist/7f22e44ace49b5124eec
+/// @link Inspired by http://madebymike.com.au/writing/precise-control-responsive-typography/
+///
+/// @require All numbers passed must be the same unit and unitless. The last parameter is the unit of the output
+///
+/// @param {List} $properties
+///   List one or multiple properties to assign values to
+///
+/// @param {String} $min-value
+/// @param {String} $max-value
+///   Min/Max values for the measurement. Both should be unitless values.
+///
+/// @param {String} $min-vw
+/// @param {String} $max-vw
+///   Min/Max viewport width. Which viewport "locks" should the fluid measurements start and end at?
+///
+/// @param {String} $unit
+///   Assumes 1rem by default
+///
+/// @example scss - Usage with CSS vars
+///  // .element {
+///  //   @include fluid-units('padding-top' 'padding-bottom', 1, 3, (480/16), (1200/16), 1rem);
+///  // }
+///
+/// @example css - Output
+///  // .element {
+///  //   padding-top: 1rem;
+///  //   padding-bottom: 1rem;
+///  // }
+///  // @media (min-width: 30rem) {
+///  //   .element {
+///  //     padding-top: calc(1rem + (3 - 1) * (100vw - 30rem) / 35);
+///  //     padding-bottom: calc(1rem + (3 - 1) * (100vw - 30rem) / 35);
+///  //   }
+///  // }
+///  // @media (min-width: 75rem) {
+///  //   .element {
+///  //     padding-top: 3rem;
+///  //     padding-bottom: 3rem;
+///  //   }
+///  // }
+///
+
+/// Helper function
+@function fluid-calc($min-value, $max-value, $min-vw, $max-vw, $unit: 1rem) {
+  @return calc(#{$min-value * $unit} + (#{$max-value} - #{$min-value}) * ((100vw - #{$min-vw * $unit}) / #{$max-vw - $min-vw}));
+}
+
+/// Actual mixin
+@mixin fluid-units($properties, $min-value, $max-value, $min-vw, $max-vw, $unit: 1rem, $mobile: true) {
+  
+  // Strip units if not unitless
+  $min-value: strip-unit($min-value);
+  $max-value: strip-unit($max-value);
+  $min-vw: strip-unit($min-vw);
+  $max-vw: strip-unit($max-vw);
+  
+  // Mobile-first: declare the $min-value as the default for any property passed
+  @if ($mobile == true) {
+    @each $property in $properties {
+      #{$property}: #{$min-value * $unit};
+    }
+  }
+
+  // Now declare the creamy, fluid center using a media query at the min-width
+  @media (min-width: #{$min-vw * $unit}) {
+    @each $property in $properties {
+      #{$property}: fluid-calc($min-value, $max-value, $min-vw, $max-vw, $unit);
+    }
+  }
+
+  // Finally, stop the crazy fluidity and set the max value at the max viewport width
+  @media (min-width: #{$max-vw * $unit}) {
+    @each $property in $properties {
+      #{$property}: #{$max-value * $unit};
+    }
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_hacks.scss

+///
+/// Store useful Browser Hacks here
+/// Test them to pass the Linter and then document them for everyone else
+///
+/// See http://browserhacks.com/ for some inspiration when you encounter a browser that needs hacking
+///
+
+// Target old IE only — works for IE10 and 11, not newer
+@mixin hack-for-old-ie() {
+  @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
+    @content;
+  }
+}
+
+// Target ANY Firefox browser
+@mixin hack-for-any-firefox() {
+  // stylelint-disable function-url-quotes
+  @-moz-document url-prefix() {
+    @content;
+  }
+  // stylelint-enable function-url-quotes
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_maintain-ratio.scss

+//// maintain-ratio(), proportional-container() and image-cover() =
+///
+/// Set a container to crop an element and maintain an aspect ratio
+/// Use proportional-container() and image-cover() together:
+///
+/// @link https://gist.github.com/brianmcallister/2932463
+///
+/// @example scss - Usage
+///   .container {
+///     @include proportional-container(16 9);
+///
+///     .element {
+///       @include image-cover();
+///     }
+///   }
+///
+/// @example css - Output
+///   .container {
+///     position: relative;
+///     overflow: hidden;
+///     z-index: 1;
+///     width: 100%;
+///     height: 0;
+///     padding-bottom: 56.25%;
+///   }
+///   .container .element {
+///    transform: translateX(-50%);
+///    top: 0;
+///    left: 50%;
+///    width: auto;
+///    max-width: none;
+///    height: 100%;
+///   }
+////
+
+
+/// maintain-ratio() =
+/// Helper mixin that calculates a percentage padding value to "fix" the proportions of a container to an aspect ratio
+/// @author jhogue
+///
+/// @param {list} Ratio [1 1]
+///
+/// @require {function} length
+/// @require {function} percentage
+/// @require {function} nth
+///
+/// @example scss - Usage
+///   @include maintain-ratio(16 9)
+///
+/// @example css - Output
+///   width: 100%;
+///   height: 0;
+///   padding-bottom: 56.25%;
+///
+@mixin maintain-ratio($ratio: 1 1) {
+  @if length($ratio) < 2 or length($ratio) > 2 {
+    @warn "$ratio must be a list with two values.";
+  }
+  width: 100%;
+  height: 0;
+  padding-bottom: percentage(nth($ratio, 2) / nth($ratio, 1));
+}
+
+/// proportional-container() =
+/// Sets a container to "crop" an element to a fixed aspect ratio
+/// @author jhogue
+///
+/// @param {list} Ratio [1 1]
+///
+/// @require {mixin} maintain-ratio
+///
+/// @example scss - Usage
+///   @include proportional-container(16 9)
+///
+/// @example css - Output
+///   position: relative;
+///   overflow: hidden;
+///   z-index: 1;
+///   height: 0;
+///   padding-bottom: 56.25%;
+///   width: 100%
+///
+@mixin proportional-container($ratio: 1 1) {
+  @include maintain-ratio($ratio);
+  position: relative;
+  overflow: hidden;
+  z-index: 1;
+}
+
+/// image-cover() =
+/// Sets a container to "crop" an element to a fixed aspect ratio
+/// @author jhogue
+///
+/// @param {String} $center ['100% auto']
+///   Accepts '100% auto' (width height), 'auto 100%' (width height), or 'contain'
+///
+/// @require {library} Bourbon
+/// @require {mixin} transform
+///
+/// @example scss - Usage
+///  @include image-cover(auto 100%)
+///
+@mixin image-cover($center: '100% auto') {
+  $allowed: ('100% auto','auto 100%','contain');
+
+  @if not index($allowed, $center) {
+    @error "Keyword `#{$center}` for mixin 'image-cover' is not allowed. `#{$allowed}` is expected.";
+  }
+  position: absolute;
+  z-index: 2;
+
+  @if ($center == 'contain') {
+    // Keep the entire element inside the container
+    @include transform(translate(-50%,-50%));
+    top: 50%;
+    left: 50%;
+    width: auto;
+    height: auto;
+    max-height: 100%;
+  } @else if ($center == '100% auto') {
+    // Fill the width, let the height be what it needs to be
+    @include transform(translateY(-50%));
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: auto;
+  } @else {
+    // Default: Fill the height, let the width be what it needs to be
+    @include transform(translateX(-50%));
+    top: 0;
+    left: 50%;
+    width: auto;
+    max-width: none;
+    height: 100%;
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_screen-reader.scss

+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+  border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+    clip-path: none;
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/mixins/_show-hide.scss

+// Utilities to make hiding or showing an element quicker
+
+@mixin hide {
+  display: none;
+  visibility: hidden;
+}
+
+@mixin show($d: block) {
+  display: $d;
+  visibility: visible;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/project-vars/_breakpoints.scss

+//
+// Breakpoints
+//
+
+$project-breakpoints: (
+  // List as unitless pixels
+  base: 440,  // 620-440= 180
+  small: 620,  // 760-620= 140
+  medium: 760,  // 960-760= 200
+  large: 960,  // 1200-960= 240
+  x-large: 1200, // 1520-1200 = 320
+  xx-large: 1520  // 1520-1200 = 320
+);
+
+$project-maxwidths: (
+  base: 1380,
+  text: 800
+);
+
+// Helpers
+@function bp($bp) {
+  @return em(map-get($project-breakpoints, $bp));
+}
+
+// For responsive typography
+// Declare a minimum and maximum viewport size for fluidity to happen within
+$min-vw: strip-unit(em(bp(base)));
+$max-vw: strip-unit(em(bp(large)));
+
+$maxwidth-container: em(map-get($project-maxwidths, base));
+$maxwidth-text: em(map-get($project-maxwidths, text));

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/project-vars/_colors.scss

+//
+// Color system
+//
+
+$white: #fff;
+$black: #1a1818; // slightly warm black h0 s5 b10
+
+// Oomph color palette
+$project-colors: (
+  red: #d62901,
+  teal: #70BDC1,
+  blue: #4a7090,
+  denim: #2d5070,
+  orange: #e89424,
+  green: #008a65,
+  white: $white,
+  grey-100: #f8f2f2, // h0 s2 b97
+  grey-300: #b8aeae, // h0 s5 b72
+  grey-400: #aaa2a2, // h0 s5 b65
+  grey-700: #474444, // h0 s5 b28
+  grey-800: #333030, // h0 s5 b20
+  black: $black,
+  blackest: #0f0e0e
+);
+
+// Helper
+@function palette($color) {
+  @return map-get($project-colors, $color);
+}
+
+
+// Project colors
+$project-color-body-bg__dark: palette(blackest);
+$project-color-main-bg__dark: palette(black);
+$project-color-body-fg__dark: palette(grey-400);
+
+$project-color-body-bg__light: palette(white);
+$project-color-main-bg__light: palette(grey-100);
+$project-color-body-fg__light: palette(grey-800);
+
+// Links
+$link-color__dark: palette(teal); 
+$link-decoration: underline;
+$link-hover-color__dark: palette(grey-100);
+$link-hover-decoration: none;
+
+$link-color__light: palette(blue); 
+$link-hover-color__light: palette(grey-800);
+
+// Other 
+$code-color__dark: palette(green);
+
+$border-color__dark: rgba($white, 0.15);
+$border-color__light: rgba($black, 0.15);
+
+$pass__dark: #14cc45;
+$fail__dark: #f23900;
+$edge__dark: #fe6;
+
+$pass__light: #0b8428;
+$fail__light: #c63606;
+$edge__light: #b45e09;

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/project-vars/_spacing.scss

+// Establishing some vertical rhythm for block elements
+// We use em so that they scale based on the font size of the element and breakpoint
+$project-vertical-rhythm: ($project-lineheight-base * 1rem);
+
+// Horizontal spacing
+$inside-min: 1rem;
+$inside-max: 2rem;
+
+$outside-min: 1rem;
+$outside-max: 3rem;
+
+$vertical-min: $project-vertical-rhythm;
+$vertical-max: ($project-vertical-rhythm * 3);

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/project-vars/_type-sizes.scss

+//
+// Fluid Type-size system
+//
+
+////
+/// Required list of sizes for typographics elements
+/// 1) Decide which breakpoint that the fluidity will begin and end.
+///    These should correspond to named keys in the $rpp-breakpoints map
+/// 3) Set base font sizes for mobile first
+/// 4) Set the desired sizes for desktop
+/// Mixins will fluidly change between the two values
+////
+
+
+/// Typographic Scales Map
+/// List as unitless pixels, use SASS function to convert to whatever you want
+///
+$type-sizes: (
+
+  // 1.125 typographic scale base 15
+  small: (
+    small: 13,
+    base: 15,
+    h6: 15,
+    h5: 16,
+    h4: 18,
+    h3: 20,
+    h2: 22,
+    h1: 24,
+    display-4: 27,
+    display-3: 30,
+    display-2: 33,
+    display-1: 37
+  ),
+
+  // 1.22 typographic scale base 18
+  x-large: (
+    small: 15,
+    base: 18,
+    h6: 18,
+    h5: 21,
+    h4: 25,
+    h3: 30,
+    h2: 36,
+    h1: 43,
+    display-4: 52,
+    display-3: 63,
+    display-2: 76,
+    display-1: 92
+  ),
+);

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/abstracts/project-vars/_vars.scss

+//
+// General variables
+//
+
+$transition: all 250ms ease;
+$kerning: 0.03125em;
+
+// Focus styles
+$focus-outline-width: 0.125rem;
+$focus-outline-style: solid;
+
+// Z Indices
+$z-indices: (
+  base: 1,
+);
+
+// Z-index helper
+@function z($name: base) {
+  @return map-get($z-indices, $name);
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/base/_global.scss

+
+pre {
+  line-height: 1.8;
+  padding: $vertical-min $inside-min;
+  margin-bottom: 1.375rem;
+}
+
+hr {
+  border: 0;
+  color: transparent;
+  height: 0px;
+  margin: 0;
+  padding: 0;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/base/_index.scss

+// Base Styles
+@import 'reset';
+@import 'global';
+@import 'media';
+@import 'typography';
+@import 'utilities';

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/base/_media.scss

+// Default starting point for media.
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+video {
+  height: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+iframe {
+  max-width: 100%;
+  width: 100%;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/base/_reset.scss

+// A simple, modern reset without a lot of opinions
+// https://hankchizljaw.com/wrote/a-modern-css-reset/
+
+// Box sizing rules
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+// Set core body defaults
+body {
+  //line-height: 1.5;
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  
+  // Since we replaced BS4 Reboot, need to declare some things:
+  font-family: $font-family-base;
+  font-size: 100%;
+  font-weight: $font-weight-base;
+  line-height: $project-lineheight-base;
+  color: $project-color-body-fg__dark;
+  text-align: left;
+  background-color: $project-color-body-bg__dark;
+  
+  @media (max-width: bp(small)) {
+    text-rendering: optimizeLegibility;
+  }
+}
+
+// Remove styles on ul, ol elements with a class attribute
+//ul[class],
+//ol[class] {
+//  list-style: none;
+//  margin: 0; // be careful, though, this can be have more specificity than we want
+//}
+.list-unstyled {
+  margin: 0;
+}
+
+// A elements that don't have a class get default styles
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+// Make images easier to work with
+img {
+  max-width: 100%;
+  display: block;
+}
+
+// Natural flow and rhythm in articles by default
+.rhythm > * + * {
+  margin-top: $project-vertical-rhythm;
+}
+
+// Inherit fonts for inputs and buttons
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+a {
+  color: $link-color__dark;
+  text-decoration: $link-decoration;
+  -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+
+  transition: $transition;
+
+  &:hover,
+  &:focus {
+    color: $link-hover-color__dark;
+    text-decoration: $link-hover-decoration;
+  }
+}
+
+// And undo these styles for placeholder links/named anchors (without href)
+// which have not been made explicitly keyboard-focusable (without tabindex).
+// See https://github.com/twbs/bootstrap/issues/19402
+a:not([href]):not([tabindex]) {
+  color: inherit;
+  text-decoration: none;
+
+  &:hover,
+  &:focus {
+    color: inherit;
+    text-decoration: none;
+    outline: 0;
+  }
+}
+
+// Suppress the focus outline on elements that cannot be accessed via keyboard.
+// This prevents an unwanted focus outline from appearing around elements that
+// might still respond to pointer events.
+// Credit: https://github.com/suitcss/base
+[tabindex="-1"]:focus {
+  outline: 0 !important;
+}
+
+// Remove all animations and transitions for people that prefer not to see them
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
\ No newline at end of file

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/base/_typography.scss

+// Resets of Bootstrap
+
+b,
+strong,
+th,
+dt {
+  font-weight: $font-weight-bold;
+  letter-spacing: $kerning;
+}
+
+// All display and utility classes
+//.display-1,
+//.display-2,
+//.display-3,
+//.display-4 {}
+
+.display-1 {
+  @include fluid-type-sizes('display-1');
+  line-height: 1.105;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+}
+
+.display-2 {
+  @include fluid-type-sizes('display-2');
+  line-height: 1;
+  margin-top: 1.625rem;
+  margin-bottom: 1.5rem;
+}
+
+.display-3 {
+  @include fluid-type-sizes('display-3');
+  line-height: 1.1875;
+  margin-top: 2rem;
+  margin-bottom: 1.25rem;
+}
+
+.display-4 {
+  @include fluid-type-sizes('display-4');
+  line-height: 1.375;
+  margin-top: -0.5rem;
+  margin-bottom: 0.875rem;
+}
+
+// All headers and utility classes
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  font-family: $font-family-serif;
+  font-weight: normal;
+}
+
+// Set Type fluidly
+h1,
+.h1 {
+  @include fluid-type-sizes('h1');
+  //margin-top: 1.875rem;
+  //margin-bottom: 1.625rem;
+}
+
+h2,
+.h2 {
+  @include fluid-type-sizes('h2');
+  //line-height: 1.333;
+  //margin-top: 2.125rem;
+  //margin-bottom: 1.375rem;
+}
+
+h3,
+.h3 {
+  @include fluid-type-sizes('h3');
+  //font-weight: $font-weight-bold;
+  //margin-top: 2.5rem;
+  //margin-bottom: 1.25rem;
+}
+
+h4,
+.h4 {
+  @include fluid-type-sizes('h4');
+  //margin-top: -0.25rem;
+  //margin-bottom: 1.5rem;
+}
+
+h5,
+.h5 {
+  @include fluid-type-sizes('h5');
+  font-weight: $font-weight-bold;
+  //margin-top: 1.625rem;
+  //margin-bottom: 0.25rem;
+}
+
+h6,
+.h6 {
+  @include fluid-type-sizes('h6');
+  font-weight: $font-weight-bold;
+  letter-spacing: $kerning;
+  //line-height: 1.35;
+  //margin-top: 1.625rem;
+  //margin-bottom: 0.125rem;
+  text-transform: uppercase;
+}
+
+// Base size applied to elements (not containers)
+p,
+blockquote,
+address,
+li,
+dt,
+dd,
+label,
+input,
+.text-size-normal {
+  @include fluid-type-sizes('base', false);
+}
+
+// Margin bottoms
+// p already declared properly via BS4
+//blockquote,
+//address,
+//ul,
+//ol,
+//dl {
+//  margin-bottom: $paragraph-margin-bottom;
+//}
+
+// A little more space after list-items
+li {
+  padding-bottom: 0.125rem;
+}
+
+details {
+  padding-bottom: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+summary {
+  
+  > * {
+    display: inline-block;
+  }
+  
+  &::-webkit-details-marker {
+    font-size: 1.75em;
+  }
+}
+
+
+// Type utilities
+small,
+.text-small {
+  @include fluid-type-sizes('small');
+}
+
+.text-uppercase {
+  letter-spacing: $kerning;
+  text-transform: uppercase;
+}
+
+.text-italic {
+  font-family: $font-family-serif;
+  font-style: italic;
+  letter-spacing: $kerning;
+}
+
+abbr,
+.text-abbr {
+  font-size: 93.75%;
+  letter-spacing: $kerning;
+  text-transform: uppercase;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/base/_utilities.scss

+
+// Spacing
+.u__space__outer {
+  @include fluid-units (
+    'padding-left' 'padding-right',
+    $outside-min,
+    $outside-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__inner {
+  @include fluid-units (
+    'padding-left' 'padding-right',
+    $inside-min,
+    $inside-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__vertical {
+  @include fluid-units (
+    'padding-top' 'padding-bottom',
+    $vertical-min,
+    $vertical-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__vertical--top {
+  @include fluid-units (
+    'padding-top',
+    $vertical-min,
+    $vertical-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.u__space__vertical--bottom {
+  @include fluid-units (
+    'padding-bottom',
+    $vertical-min,
+    $vertical-max,
+    $min-vw,
+    $max-vw,
+    1rem
+  );
+}
+
+.text-align-left {
+  text-align: left;
+}
+
+.text-align-center {
+  text-align: center;
+}
+
+.text-align-right {
+  text-align: right;
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/components/_colorcube.scss

+.cc {
+  &__brand {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: space-between;
+    
+    &__title {
+      
+      a {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        padding-top: 0.5rem;
+        text-decoration: none;
+
+        img {
+          margin: 0 1rem -0.625rem 0;
+        }
+      }
+    }
+    
+    &__subtitle {}
+  }
+  
+  &__form {
+    
+    &__textarea {
+      height: 10.5em;
+      width: 100%;
+    }
+    
+    &__input {
+      padding: 0.75rem;
+    }
+    
+    &__row &__label {
+      display: inline-block;
+      padding: 0.75rem;
+      width: 4em;
+    }
+    
+    &__row &__input {
+      width: 6em;
+    }
+    
+    &__button {
+      border: 0;
+      cursor: pointer;
+      display: inline-block;
+      font-weight: $font-sans-weight-bold;
+      padding: 0.5rem 1.5rem;
+      text-transform: uppercase;
+      transition: $transition;
+      -webkit-appearance: none;
+    }
+  }
+  
+  &__results {
+    @include hide;
+
+    &__title {}
+    
+    &__content {}
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/components/_index.scss

+// Component Styles: page sections
+@import 'page';
+@import 'colorcube';
+@import 'results';
+@import 'theme';

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/components/_page.scss

+
+.p {
+  &__header {
+    background-color: $project-color-body-bg__dark;
+  }
+  
+  &__main {
+    background-color: $project-color-main-bg__dark;
+  }
+  
+  &__footer {
+    background-color: $project-color-body-bg__dark;
+    
+    small {
+      color: palette(grey-300);
+    }
+    
+    &__logo {
+      float: left;
+      margin-right: $inside-min;
+    }
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/components/_results.scss

+$swatch-border-width: 5px;
+$swatch-size: rem(120);
+
+.results {
+  
+  &__row {
+    display: flex;
+    flex-flow: row nowrap;
+    padding-top: 1rem;
+
+    &__header {}
+  }
+
+  &__col {
+    padding-bottom: 1rem;
+    flex: 1 0 auto;
+  }
+  
+  &__row &__row {
+    border: 0;
+    flex: 1 0 50%;
+    padding-top: 0;
+  }
+}
+
+// Specific Columns
+.ratios {
+
+  &__original {
+    flex: 0 0 ($swatch-size * 1.5);
+  }
+
+  &__on-light {}
+
+  &__on-dark {}
+  
+  &__custom {
+    input {
+      padding: 0.25rem 0.5rem;
+      width: 6em;
+    }
+  }
+}
+
+
+// Original color
+.original {
+  
+  &__label {
+    padding-bottom: 0.5rem;
+  }
+
+  &__hsl {
+    float: left;
+    
+    p {
+      padding: 0.375rem 0 0.375rem;
+    }
+  }
+
+  &__swatch {
+    float: right;
+    height: $swatch-size;
+    width: ($swatch-size * 0.75);
+  }
+}
+
+// Modifications column
+.mod {
+  &__label {
+    padding-bottom: 0.5rem;
+  }
+  
+  &__swatch {
+    float: left;
+    margin-right: 0.5rem;
+    height: $swatch-size;
+    width: ($swatch-size * 0.75);
+  }
+  
+  &__controls {
+    label {
+      display: inline-block;
+      font-weight: $font-sans-weight-bold;
+      width: 1em;
+    }
+    
+    input {
+      margin: 0 0 -1px;
+      padding: 0.375rem 0 0.375rem 0.5rem;
+      
+      &::-webkit-inner-spin-button {
+        opacity: 1; // always show (negate autohide for Chrome)
+      }
+    }
+  }
+}
+
+.color-ratio {
+  
+  &__wrapper {
+    .icon {
+      display: inline-block;
+      font-size: rem(24);
+      text-align: center;
+      width: 0.875em;
+    }
+  }
+
+  &__passfail {
+    b {
+      @include sr-only;
+    }
+  }
+
+  &__wrapper + &__wrapper {
+    margin-top: - $swatch-border-width;
+  }
+
+  &__label {
+    padding-bottom: 0.5rem;
+    
+    .target-45 &,
+    .target-3 & {
+      @include hide;
+    }
+    
+    .ratios__on-light &,
+    .ratios__on-dark & {
+      padding: 0.5rem 0 0.75rem;
+    }
+  }
+
+  &__swatch {
+    border-style: solid;
+    border-width: $swatch-border-width;
+    display: inline-block;
+    font-weight: $font-sans-weight-semi;
+    line-height: $project-lineheight-tight;
+    overflow: hidden;
+    padding: 0.625rem 0.5rem;
+    position: relative;
+    text-align: center;
+    vertical-align: middle;
+    width: 7rem;
+  }
+  
+  .fail &__swatch::before {
+    border: 2px solid currentColor;
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 150%;
+    transform: translate(-50%, -50%) rotate(-33deg);
+  }
+
+  .target-7 &__swatch {}
+
+  .target-45 &__swatch {}
+  
+  .target-3 &__swatch {}
+
+  &__passfail {
+    text-transform: uppercase;
+  }
+  
+  &__results {
+    display: inline-block;
+    padding-left: 0.5rem;
+    vertical-align: middle;
+  }
+}
+
+.level {
+  
+  &--AAplus,
+  &--AAAplus {
+    font-size: rem(24);
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/components/_theme.scss

+// All color applications stored here
+
+// Default colors and scheme: "dark mode"
+pre {
+  background-color: rgba($code-color__dark, 0.1);
+  border-top: 3px solid rgba($code-color__dark, 0.5);
+  border-bottom: 3px solid rgba($code-color__dark, 0.5);
+}
+
+hr {
+  background-color: transparent;
+  border-top: 1px solid $border-color__dark;
+}
+
+.text-light {
+  color: palette(grey-100);
+}
+
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  color: palette(grey-100);
+}
+
+details {
+  border-bottom: 1px solid $border-color__dark;
+}
+
+summary {
+  &::-webkit-details-marker {
+    color: palette(white);
+  }
+}
+
+.cc {
+  &__brand {
+    &__title {
+      a {
+        color: palette(grey-100);
+      }
+    }
+  }
+  
+  &__form {
+    
+    &__label {
+      color: palette(grey-100);
+    }
+    
+    &__input {
+      color: palette(grey-300);
+      background-color: $project-color-body-bg__dark;
+      border: 1px solid $border-color__dark;
+    }
+    
+    &__button {
+      background-color: palette(teal);
+      color: palette(blackest);
+      
+      &:hover,
+      &:focus {
+        background-color: palette(blue);
+        color: palette(white);
+      }
+      
+      &:active {
+        background-color: palette(red);
+        color: palette(white);
+      }
+    }
+  }
+}
+
+.results {
+  &__row {
+    border-bottom: 1px solid $border-color__dark;
+  }
+}
+
+.color-ratio {
+  
+  &__wrapper {
+    &.pass .icon { color: $pass__dark; }
+
+    &.edge .icon { color: $edge__dark; }
+
+    &.fail .icon { color: $fail__dark; }
+  }
+  
+  &__label {
+    strong {
+      color: palette(white);
+    }
+  }
+}
+
+
+// Alternate theme: "light mode"
+@media (prefers-color-scheme: light) {
+  body {
+    color: $project-color-body-fg__light;
+    background-color: $project-color-body-bg__light;
+  }
+  
+  a {
+    color: $link-color__light;
+    
+    &:hover,
+    &:focus {
+      color: $link-hover-color__light;
+    }
+  }
+  
+  .p {
+    &__header {
+      background-color: $project-color-body-bg__light;
+    }
+    
+    &__main {
+      background-color: $project-color-main-bg__light;
+    }
+    
+    &__footer {
+      background-color: $project-color-body-bg__light;
+      
+      small {
+        color: palette(grey-700);
+      }
+    }
+  }
+  
+  .text-light {
+    color: palette(grey-700);
+  }
+  
+  hr {
+    border-top: 1px solid $border-color__light;
+  }
+  
+  h1,
+  .h1,
+  h2,
+  .h2,
+  h3,
+  .h3,
+  h4,
+  .h4,
+  h5,
+  .h5,
+  h6,
+  .h6 {
+    color: palette(grey-700);
+  }
+  
+  details {
+    border-bottom: 1px solid $border-color__light;
+  }
+  
+  summary {
+    &::-webkit-details-marker {
+      color: palette(black);
+    }
+  }
+  
+  .cc {
+    &__brand {
+      &__title {
+        a {
+          color: palette(grey-800);
+        }
+      }
+    }
+
+    &__form {
+      &__label {
+        color: palette(grey-700);
+      }
+      
+      &__input {
+        color: palette(grey-700);
+        background-color: $project-color-body-bg__light;
+        border: 1px solid $border-color__light;
+      }
+      
+      &__button {
+        background-color: palette(blue);
+        color: palette(white);
+        
+        &:hover,
+        &:focus {
+          background-color: palette(teal);
+          color: palette(black);
+        }
+      }
+    }
+  }
+  
+  .results {
+    &__row {
+      border-bottom: 1px solid $border-color__light;
+    }
+  }
+  
+  .color-ratio {
+    &__wrapper {
+      &.pass .icon { color: $pass__light; }
+  
+      &.edge .icon { color: $edge__light; }
+  
+      &.fail .icon { color: $fail__light; }
+    }
+    
+    &__label {
+      strong {
+        color: palette(black);
+      }
+    }
+  }
+}

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/layout/_grid.scss

+//
+// Grid
+//
+
+.g {
+  &__row {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    margin: 0 - $inside-min;
+  }
+  
+  &__col {
+    flex: 1 0 100%;
+    max-width: 100%;
+    padding: 0 $inside-min;
+  }
+  
+  &--wide {
+    flex: 1 1 100%;
+    min-width: 100%;
+  }
+  
+  &--two {
+    @media (min-width: bp(small)) {
+      flex: 1 0 50%;
+      max-width: 50%;
+    }
+  }
+  
+  &--three {
+    @media (min-width: bp(medium)) {
+      flex: 1 0 33.3%;
+      max-width: 33.3%;
+    }
+  }
+}
\ No newline at end of file

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/layout/_index.scss

+// Base Styles
+@import 'layout';
+@import 'grid';

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/layout/_layout.scss

+//
+// Layout
+//
+
+.l {
+  &__max {
+    margin: 0 auto;
+    max-width: $maxwidth-container;
+    
+    &--text {
+      margin: 0 auto;
+      max-width: $maxwidth-text;
+    }
+  }
+  
+  &__header {}
+  
+  &__main {}
+  
+  &__foot {}
+}
\ No newline at end of file

BE-Aeasthatic-Quality-Check/colorcube-master/assets/scss/styles.scss

+// The files that compile
+
+@import 'abstracts/index';
+@import 'base/index';
+@import 'layout/index';
+@import 'components/index';

BE-Aeasthatic-Quality-Check/colorcube-master/index.html

-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
 		<meta charset="UTF-8">
@@ -168,24 +167,6 @@
 	</article>
   </main>
 
-  <!-- <footer class="l__foot u__space__vertical p__footer">
-	<div class="l__max--text u__space__outer">
-	  <details class="rhythm">
-		<summary><h2>What is this?</h2></summary>
-		<p>ColorCube is an accessibility (<abbr title="">a11y</abbr>) tool aimed at designers and developers. From a list of colors, we produce performance information with common color combinations. And then we give you the tools to adjust those colors until they pass the recommended color contrast ratios.</p>
-		<p><strong class="text-light">Why?</strong> At Oomph we believe a better web is an accessible web for all. We wanted a tool that could be used before a project starts &mdash; one that helps assess how an existing brand color palette performs. Starting early means that we can make adjustments early to avoid non-accessible color combinations later. </p>
-		<p>Corporate brand color palettes often do not take accessibility into account. And their colors are hard to change. By changing the saturation or brightness of a color <em>but not the hue</em> the color intention is preserved. Most users may not even notice that the color has been adjusted for readability.</p>
-	  </details>
-	  <div class="rhythm legal">
-		<a class="p__footer__logo" href="//oomphinc.com" title="Visit the Oomph website">
-		  <img src="assets/img/oomph-square.png" width="90" alt="Oomph, Inc" />
-		</a>
-		<p><small>Made with <span aria-title="love">&#10084</span> in 2017 at Oomph, Inc. Last update October, 2019. Open source project with MIT license. <a title="Go to GitHub in a new window." target="_blank"  href="https://github.com/oomphinc/colorcube">Contribute to the GitHub repo</a>.</small></p>
-		<p><small><strong class="text-uppercase">Disclaimer:</strong> The algorithm used in this tool and subsequent results are based on the luminosity algorithm recommended in the WCAG 2.0 guidelines to test for contrast. This tool is for general assessment purposes only and not a guarantee of compliance. This open-source visual tool is not optimized for screen readers. </small></p>
-	  </div>
-	</div>
-  </footer> -->
-  
   <script
       src="https://code.jquery.com/jquery-3.4.1.min.js"
       integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

BE-Aeasthatic-Quality-Check/colorcube-master/index1.html

+<html>
+    <head>
+		<meta charset="UTF-8">
+		<title>Slide Quality Checker</title>
+		<link rel="stylesheet" href="assets/css/styles.css" type="text/css">
+		
+		<meta name="twitter:card" content="summary">
+		<meta name="twitter:site" content="@oomphinc">
+		<meta name="og:title" content="ColorCube: Evaluate Accessible Color Palettes">
+		<meta name="twitter:title" content="ColorCube: Evaluate Accessible Color Palettes">
+		<meta name="og:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
+		<meta name="twitter:description" content="Adjust color values to meet WCAG Level AA or AAA standards for legible color combinations.">
+		<meta name="og:image" content="assets/img/ColorCube-screenshot.png">
+		<meta name="twitter:image" content="assets/img/ColorCube-screenshot.png">
+		<meta name="twitter:image:alt" content="We are sorry, but this tool is not optimized for the visually impaired.">
+	   
+		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<title>[Color Detector]</title>
+		<script type="text/javascript" src="./assets/js/detection.js"></script>
+		<link rel="stylesheet" type="text/css" media="screen" href="./assets/css/main.css" />
+	</head>
+<body>
+
+<header class="l__header p__header">
+    <div class="l__max u__space__outer cc__brand">
+      <h2 class="cc__brand__title" style="text-align: center">
+        <!-- <a href="." title="Press to reload page and start over with default values"> -->
+          <img class="cc__brand__logo" src="assets/img/presently.jpeg" alt="" width="390">
+        Slide Quality Checker
+        <!-- </a> -->
+      </h2>
+    </div>
+</header>
+<div class="cc__form__submit g--wide text-align-center">
+    
+    <a href="index.html">
+    <img src = "/Users/chithuwedage/Downloads/color accuracy.webp" width="200" height="100">
+    <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Color Accuracy" style="align-items:center">
+    </a>
+
+    <img src = "/Users/chithuwedage/Downloads/CSC-Reviewer-Grammar.png" width="200" height="100">
+    <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Grammer Checker">
+
+    <a href="index2.html">
+    <img src = "/Users/chithuwedage/Downloads/color-blind.jpeg" width="200" height="100">
+    <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Visual Accessibility Checker">
+    </a>
+
+    <img src = "/Users/chithuwedage/Downloads/images (2).jpeg" width="200" height="100">
+    <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Visibility Checker">
+    
+    <!-- <img src = "/Users/chithuwedage/Downloads/object detector.png" width="200" height="100">
+    <input id="brand-color-button" name="brand-color-button" type="submit" class="cc__form__button" value="Object preparation"> -->
+
+   
+</div>
+</body>
+
+  </html>
\ No newline at end of file

BE-Aeasthatic-Quality-Check/colorcube-master/index2.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="Checks the contrast of your color design based on Web Content Accessibility Guidelines (WCAG) 2.0."
+    />
+    <title>Color Contrast Checker</title>
+
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicons/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicons/favicon-16x16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/favicons/apple-touch-icon.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
+    <link rel="mask-icon" href="%PUBLIC_URL%/favicons/safari-pinned-tab.svg" color="#172F36" />
+    <meta name="theme-color" content="#172F36" />
+
+    <!-- Facebook -->
+    <meta property="og:url" content="https://color-contrast.netlify.app/" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Color Contrast Checker" />
+    <meta
+      property="og:description"
+      content="Checks the contrast of your color design based on Web Content Accessibility Guidelines (WCAG) 2.0."
+    />
+    <meta property="og:image" content="%PUBLIC_URL%/favicons/android-chrome-256x256.png" />
+    <meta property="og:site_name" content="Color Contrast Checker" />
+
+    <noscript>
+      <style>
+        html {
+          box-sizing: border-box;
+        }
+
+        * {
+          box-sizing: inherit;
+        }
+
+        body {
+          margin: 0;
+          padding: 0;
+          background-color: #172f36;
+          color: #ffffff;
+          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+            "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+        }
+
+        .wrapper {
+          min-height: 100vh;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .container {
+          width: 100%;
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 0 6vw;
+        }
+
+        h1 {
+          margin-top: 0;
+        }
+      </style>
+    </noscript>
+  </head>
+  <body>
+    <noscript>
+      <div class="wrapper">
+        <div class="container">
+          <h1>Please enable Javascript</h1>
+          <p>It seems like you disabled Javascript in your browser.</p>
+          <p>You need to enable Javascript to run this app.</p>
+        </div>
+      </div>
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>

BE-Aeasthatic-Quality-Check/colorcube-master/license.md

+MIT License
+
+Copyright (c) 2017 Oomph, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.