Ember Brand colours component in Styleguide

brand-colours.js

import Component from '@ember/component';
import layout from './template';
const { getComputedStyle } = window;

/**
 * This component is used in the styleguide to look up our brand colours
 * and render them.
 *
 * To be used in conjunction with:
 * 
 * .brand-colours::before {
 *   content: quote(inspect($brand-colours));
 * }
 *
 */
export default Component.extend({
  layout,
  classNames: ['brand-colours'],

  didInsertElement() {
    this._super(...arguments);

    this.set('colours', this._getColours());
  },

  _getColours() {
    return getComputedStyle(this.element, ':before')
      .content.match(/\((.*)\)/)[1]
      .split(', ')
      .reduce((result, current) => {
        const [name, colour] = current.split(': ');
        result[name] = colour;
        return result;
      }, {});
  }
});