feat: respect bpmn-js default fill and stroke color (#26)

* add configuration default fill color and default stroke color
* change the color svg icon stroke-width to equal 2 so that the border color is clearer

colors/ColorPopupProvider.js

@@ -29,19 +29,22 @@ const COLORS = [ {
 } ];
 
 
-export default function ColorPopupProvider(config, popupMenu, modeling, translate) {
+export default function ColorPopupProvider(config, bpmnRendererConfig, popupMenu, modeling, translate) {
   this._popupMenu = popupMenu;
   this._modeling = modeling;
   this._translate = translate;
 
   this._colors = config && config.colors || COLORS;
+  this._defaultFillColor = bpmnRendererConfig && bpmnRendererConfig.defaultFillColor || 'white';
+  this._defaultStrokeColor = bpmnRendererConfig && bpmnRendererConfig.defaultStrokeColor || 'rgb(34, 36, 42)';
 
   this._popupMenu.registerProvider('color-picker', this);
 }
 
 
 ColorPopupProvider.$inject = [
   'config.colorPicker',
+  'config.bpmnRenderer',
   'popupMenu',
   'modeling',
   'translate'
@@ -53,14 +56,14 @@ ColorPopupProvider.prototype.getEntries = function(elements) {
 
   var colorIcon = domify(`
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
-      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)"></rect>
+      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)" style="stroke-width:2"></rect>
     </svg>
   `);
 
   var entries = this._colors.map(function(color) {
 
-    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
-    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
+    colorIcon.style.setProperty('--fill-color', color.fill || self._defaultFillColor);
+    colorIcon.style.setProperty('--stroke-color', color.stroke || self._defaultStrokeColor);
 
     return {
       title: self._translate(color.label),