Ratio update (#153)

* add mathsass

* remove less accurate math functions

* add decimals to floor

* ignore bower components

* reference math functions

* update jade

* add pass/fail tests for all colours in palette

* whoops

* update dependencies

.gitignore

@@ -5,3 +5,4 @@ test/output/
 demos/local
 .DS_Store
 node_modules/
+bower_components/

README.md

@@ -208,7 +208,7 @@ opinion |               background
 hero |                  background
 hero-opinion |          background
 hero-highlight |        background
-**Section colors** | 
+**Section colors** |
 section-life-arts |     all
 section-life-arts-alt | all
 section-magazine |      all

bower.json

@@ -1,8 +1,13 @@
 {
   "name": "o-colors",
-  "main": ["main.scss"],
+  "main": [
+    "main.scss"
+  ],
   "ignore": [
     "test",
     ".travis.yml"
-  ]
+  ],
+  "dependencies": {
+    "mathsass": "^0.10.1"
+  }
 }

main.scss

@@ -1,8 +1,8 @@
+@import 'mathsass/dist/math';
 @import 'src/scss/variables';
 
 @import 'src/scss/tools/error';
 @import 'src/scss/tools/color';
-@import 'src/scss/tools/maths';
 @import 'src/scss/tools/a11y';
 
 @import 'src/scss/palette';

src/scss/_palette.scss

@@ -48,7 +48,7 @@ $o-colors-palette: map-merge((
 	'candy':                 #ff7faa,
 	'wasabi':                #96cc28,
 
-	'jade':                  #00b359,
+	'jade':                  #00994d,
 	'crimson':               #cc0000,
 
 	'org-b2c':               #4e96eb,

src/scss/tools/_color.scss

@@ -84,7 +84,12 @@
 		$ratio: 1 / $ratio;
 	}
 
-	$ratio: (round($ratio*10)/10);
+	$ratio: preciseFloor($ratio);
 
 	@return $ratio;
 }
+
+@function preciseFloor($number, $decimals: 2) {
+	$multiplier: pow(10, $decimals);
+	@return floor($number * $multiplier) / $multiplier;
+}

test/scss/_functions.test.scss

@@ -16,7 +16,7 @@
 			@include assert-equal(oColorsGetPaletteColor('lemon'), (#ffec1a));
 			@include assert-equal(oColorsGetPaletteColor('candy'), (#ff7faa));
 			@include assert-equal(oColorsGetPaletteColor('wasabi'), (#96cc28));
-			@include assert-equal(oColorsGetPaletteColor('jade'), (#00b359));
+			@include assert-equal(oColorsGetPaletteColor('jade'), (#00994d));
 			@include assert-equal(oColorsGetPaletteColor('crimson'), (#cc0000));
 			@include assert-equal(oColorsGetPaletteColor('org-b2c'), (#4e96eb));
 			@include assert-equal(oColorsGetPaletteColor('org-b2c-dark'), (#3a70af));

test/scss/_mixins.test.scss

@@ -27,7 +27,7 @@
 				@include expect($selector: false) {
 					.test-colors {
 						background-color: #f2dfce;
-						color: #00b359;
+						color: #00994d;
 					}
 				};
 			};

test/scss/_palette.test.scss

@@ -0,0 +1,95 @@
+@include describe('verify accesibility of core palette colours') {
+	@include describe('PASS') {
+		@include test('$color on #ffffff (white)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('black'), #ffffff), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('claret'), #ffffff), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('oxford'), #ffffff), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('teal'), #ffffff), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('slate'), #ffffff), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('velvet'), #ffffff), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('jade'), #ffffff), ('AA18'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('crimson'), #ffffff), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c'), #ffffff), ('AA18'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c-dark'), #ffffff), ('AA'));
+		};
+
+		@include test('$color on #fff1e5 (paper)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('black'), #fff1e5), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('claret'), #fff1e5), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('oxford'), #fff1e5), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('teal'), #fff1e5), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('slate'), #fff1e5), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('velvet'), #fff1e5), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('jade'), #fff1e5), ('AA18'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('crimson'), #fff1e5), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c'), #ffffff), ('AA18'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c-dark'), #ffffff), ('AA'));
+		};
+
+		@include test('$color on #000000 (black)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c-light'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('paper'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wheat'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('sky'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('mandarin'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('lemon'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('candy'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wasabi'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('white'), #000000), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('teal'), #000000), ('AA18'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('crimson'), #000000), ('AA18'));
+		};
+
+		@include test('$color on #262a33 (slate)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c-light'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('paper'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wheat'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('sky'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('mandarin'), #262a33), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('lemon'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('candy'), #262a33), ('AA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wasabi'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('white'), #262a33), ('AAA'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('teal'), #000000), ('AA18'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('crimson'), #000000), ('AA18'));
+		};
+	};
+
+	@include describe('FAIL') {
+		@include test('$color on #ffffff (white)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wheat'), #ffffff), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('sky'), #ffffff), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('mandarin'), #ffffff), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('lemon'), #ffffff), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('candy'), #ffffff), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wasabi'), #ffffff), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c-light'), #ffffff), ('fail'));
+		};
+
+		@include test('$color on #fff1e5 (paper)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wheat'), #fff1e5), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('sky'), #fff1e5), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('mandarin'), #fff1e5), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('lemon'), #fff1e5), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('candy'), #fff1e5), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('wasabi'), #fff1e5), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('org-b2c-light'), #fff1e5), ('fail'));
+		};
+
+		@include test('$color on #000000 (black)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('slate'), #000000), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('claret'), #000000), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('oxford'), #000000), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('velvet'), #000000), ('fail'));
+		};
+
+		@include test('$color on #262a33 (slate)') {
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('black'), #262a33), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('claret'), #262a33), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('oxford'), #262a33), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('velvet'), #262a33), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('teal'), #262a33), ('fail'));
+			@include assert-equal(oColorsGetWCAGRating(oColorsGetPaletteColor('crimson'), #262a33), ('fail'));
+		};
+	}
+}

test/scss/index.test.scss

@@ -1,12 +1,11 @@
 @import 'true';
-
-
 @import '../../main';
+
 $_test-environment: true;
 
 @import 'tools/a11y.test';
 @import 'tools/color.test';
-@import 'tools/maths.test';
 
 @import 'functions.test';
+@import 'palette.test';
 @import 'mixins.test';

test/scss/tools/_color.test.scss

@@ -17,14 +17,7 @@
 	@include describe('oColorsGetContrastRatio') {
 		@include test('calculate the contrast ratio between two colors') {
 			@include assert-equal(oColorsGetContrastRatio(#ffffff, #fff1e5), (1.1));
-			@include assert-equal(oColorsGetContrastRatio(#000000, #fff1e5), (18.5));
-		};
-	};
-
-	@include describe('oColorsGetContrastRatio') {
-		@include test('calculate the contrast ratio between two colors') {
-			@include assert-equal(oColorsGetContrastRatio(#ffffff, #fff1e5), (1.1));
-			@include assert-equal(oColorsGetContrastRatio(#000000, #fff1e5), (18.5));
+			@include assert-equal(oColorsGetContrastRatio(#000000, #fff1e5), (18.96));
 		};
 	};
 };