Add css vars for default accessibility color schemes

lib/index.js

@@ -1,7 +1,23 @@
 import _ from 'lodash';
 
+const colorSchemes =  {
+      "black_on_white": {
+        "color": "black",
+        "backgroundColor": "white"
+      },
+      "white_on_black": {
+        "color": "white",
+        "backgroundColor": "black"
+      },
+      "black_on_rose": {
+        "color": "black",
+        "backgroundColor": "mistyrose"
+      },
+    }
+
 export default class PiePlayer extends HTMLElement {
 
+
   constructor() {
     super();
     this._pies = {};
@@ -27,7 +43,10 @@ export default class PiePlayer extends HTMLElement {
   }
 
   connectedCallback() {
-
+    this.style.setProperty('--pie-default-color', 'black');
+    this.style.setProperty('--pie-default-background-color', 'white');
+    this.style.color = 'var(--pie-default-color)';
+    this.style.backgroundColor = 'var(--pie-default-background-color)';
     let event = new CustomEvent('pie.player-ready', { bubbles: true });
     this.dispatchEvent(event);
   }
@@ -69,8 +88,18 @@ export default class PiePlayer extends HTMLElement {
     });
   };
 
+
+  _updateColorContrast(colorContrast){
+
+    if (colorContrast) {
+      this.style.setProperty('--pie-default-color', colorSchemes[colorContrast].color);
+      this.style.setProperty('--pie-default-background-color', colorSchemes[colorContrast].backgroundColor);
+    }
+  }
   _update() {
 
+    this._updateColorContrast(this._env && this._env.accessibility && this._env.accessibility.colorContrast);
+
     let dispatchModelUpdated = () => {
       let event = new CustomEvent('pie.model-updated');
       this.dispatchEvent(event);

test/index.test.html

@@ -76,6 +76,11 @@
       it('calls controller.model', function(){
         sinon.assert.calledWith(mockController.model, [{id: '1'}], {mode: 'gather'});
       });
+      it('changes default colors using colorContrast property', function(){
+        el.env = {mode:'gather', accessibility: {colorContrast: 'white_on_black'}};
+        expect(el.style['--pie-default-color']).not.to.be.null;
+        expect(el.style.getPropertyValue('--pie-default-color')).to.eql('white');
+      });
     });
   </script>
 </body>