diff --git a/lib/index.js b/lib/index.js index 436831c..4c1a5b6 100644 --- a/lib/index.js +++ b/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); diff --git a/test/index.test.html b/test/index.test.html index 2fe557f..3f4ff05 100644 --- a/test/index.test.html +++ b/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'); + }); });