From 591b3caa77841cb503a587a582f4b08e9abe8e5f Mon Sep 17 00:00:00 2001 From: Gabrielle von Koss Date: Tue, 24 Apr 2018 14:22:28 +0100 Subject: [PATCH] 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 | 1 + README.md | 2 +- bower.json | 9 ++- main.scss | 2 +- src/scss/_palette.scss | 2 +- src/scss/tools/_color.scss | 7 ++- src/scss/tools/_maths.scss | 36 ------------ test/scss/_functions.test.scss | 2 +- test/scss/_mixins.test.scss | 2 +- test/scss/_palette.test.scss | 95 ++++++++++++++++++++++++++++++++ test/scss/index.test.scss | 5 +- test/scss/tools/_color.test.scss | 9 +-- test/scss/tools/_maths.test.scss | 15 ----- 13 files changed, 117 insertions(+), 70 deletions(-) delete mode 100644 src/scss/tools/_maths.scss create mode 100644 test/scss/_palette.test.scss delete mode 100644 test/scss/tools/_maths.test.scss diff --git a/.gitignore b/.gitignore index 77788ad8..8f3f9d5e 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ test/output/ demos/local .DS_Store node_modules/ +bower_components/ diff --git a/README.md b/README.md index 4e1ed6d5..23f1d497 100644 --- a/README.md +++ b/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 diff --git a/bower.json b/bower.json index 65d09be1..6d616bb4 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,13 @@ { "name": "o-colors", - "main": ["main.scss"], + "main": [ + "main.scss" + ], "ignore": [ "test", ".travis.yml" - ] + ], + "dependencies": { + "mathsass": "^0.10.1" + } } diff --git a/main.scss b/main.scss index 76aed81c..f0c5e178 100644 --- a/main.scss +++ b/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'; diff --git a/src/scss/_palette.scss b/src/scss/_palette.scss index be4a20c6..1f85a9be 100644 --- a/src/scss/_palette.scss +++ b/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, diff --git a/src/scss/tools/_color.scss b/src/scss/tools/_color.scss index 15ba2b14..27d17392 100644 --- a/src/scss/tools/_color.scss +++ b/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; +} diff --git a/src/scss/tools/_maths.scss b/src/scss/tools/_maths.scss deleted file mode 100644 index 824e9df4..00000000 --- a/src/scss/tools/_maths.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Square root maths function -// -// @param {Number} $root - Number to find the square root of -// Code from: https://gist.github.com/jlong/f06f5843104ee10006fe -@function sqrt($root) { - $x0: 1; - $x1: $x0; - - @for $idx from 1 through 10 { - $x1: $x0 - ($x0 * $x0 - abs($root)) / (2 * $x0); - $x0: $x1; - } - - @return $x1; -} - -/// Power of maths function -/// -/// @param {Number} $number - Number -/// @param {Number} $exponent - Exponent -/// From: https://css-tricks.com/snippets/sass/power-function/ -@function pow($number, $exponent) { - $value: 1; - - @if $exponent > 0 { - @for $idx from 1 through $exponent { - $value: $value * $number; - } - } @else if $exponent < 0 { - @for $idx from 1 through -$exponent { - $value: $value / $number; - } - } - - @return $value; -} diff --git a/test/scss/_functions.test.scss b/test/scss/_functions.test.scss index 4c5cde91..7ba154e2 100644 --- a/test/scss/_functions.test.scss +++ b/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)); diff --git a/test/scss/_mixins.test.scss b/test/scss/_mixins.test.scss index 3276866d..ec24214e 100644 --- a/test/scss/_mixins.test.scss +++ b/test/scss/_mixins.test.scss @@ -27,7 +27,7 @@ @include expect($selector: false) { .test-colors { background-color: #f2dfce; - color: #00b359; + color: #00994d; } }; }; diff --git a/test/scss/_palette.test.scss b/test/scss/_palette.test.scss new file mode 100644 index 00000000..198bcf19 --- /dev/null +++ b/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')); + }; + } +} diff --git a/test/scss/index.test.scss b/test/scss/index.test.scss index b379c855..2ee5157f 100644 --- a/test/scss/index.test.scss +++ b/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'; diff --git a/test/scss/tools/_color.test.scss b/test/scss/tools/_color.test.scss index eedd13c6..7654bdc5 100644 --- a/test/scss/tools/_color.test.scss +++ b/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)); }; }; }; diff --git a/test/scss/tools/_maths.test.scss b/test/scss/tools/_maths.test.scss deleted file mode 100644 index a1e47379..00000000 --- a/test/scss/tools/_maths.test.scss +++ /dev/null @@ -1,15 +0,0 @@ -@include describe('Math functions') { - @include describe('sqrt') { - @include it('finds the square root of a number') { - @include assert-equal(sqrt(4), (2)); - @include assert-equal(sqrt(121), (11)); - }; - }; - - @include describe('pow') { - @include it('finds the power of an exponent for a number') { - @include assert-equal(pow(1, 9), (1)); - @include assert-equal(pow(3, 3), (27)); - }; - }; -};