use contrast color with new logo

Author: archmoj

src/components/modebar/modebar.js

@@ -4,6 +4,7 @@ var d3 = require('@plotly/d3');
 var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
+var Color = require('../color');
 var Icons = require('../../fonts/ploticon');
 var version = require('../../version').version;
 
@@ -62,6 +63,12 @@ proto.update = function(graphInfo, buttons) {
     Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + style.activecolor);
     Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + style.activecolor);
 
+    // logo constrast color
+    var logoId = modeBarId + '-logo';
+    var logoSelector = context.displayModeBar === 'hover' ? '.plotlyjsicon' : '';
+    Lib.deleteRelatedStyleRule(logoId);
+    Lib.addRelatedStyleRule(logoId, logoSelector + ' .cls-bg-contrast', 'fill: ' + Color.contrast(fullLayout.paper_bgcolor));
+
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
     var needsNewLogo = (this.hasLogo !== context.displaylogo);
@@ -75,7 +82,7 @@ proto.update = function(graphInfo, buttons) {
         this.updateButtons(buttons);
 
         if(context.watermark || context.displaylogo) {
-            var logoGroup = this.getLogo();
+            var logoGroup = this.getLogo(graphInfo);
             if(context.watermark) {
                 logoGroup.className = logoGroup.className + ' watermark';
             }
@@ -292,7 +299,7 @@ function jsVersion(str) {
 /**
  * @return {HTMLDivElement} The logo image wrapped in a group
  */
-proto.getLogo = function() {
+proto.getLogo = function(graphInfo) {
     var group = this.createGroup();
     var a = document.createElement('a');
 
@@ -303,6 +310,15 @@ proto.getLogo = function() {
 
     a.appendChild(this.createIcon(Icons.newplotlylogo));
 
+    var context = graphInfo._context;
+    var fullLayout = graphInfo._fullLayout;
+    var modeBarId = 'modebar-' + fullLayout._uid;
+
+    var logoId = modeBarId + '-logo';
+    var logoSelector = context.displayModeBar === 'hover' ? '.plotlyjsicon' : '';
+    Lib.deleteRelatedStyleRule(logoId);
+    Lib.addRelatedStyleRule(logoId, logoSelector + ' .cls-bg-contrast', 'fill: ' + Color.contrast(fullLayout.paper_bgcolor));
+
     group.appendChild(a);
     return group;
 };
@@ -318,6 +334,7 @@ proto.removeAllButtons = function() {
 proto.destroy = function() {
     Lib.removeElement(this.container.querySelector('.modebar'));
     Lib.deleteRelatedStyleRule(this._uid);
+    Lib.deleteRelatedStyleRule(this._uid + '-logo');
 };
 
 function createModeBar(gd, buttons) {

src/fonts/ploticon.js

@@ -169,7 +169,7 @@ module.exports = {
             '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'21 21 90 90\'>',
             '<defs>',
             ' <style>',
-            '  .cls-0{fill:#777; stroke:#FFF; strokewidth:2;}',
+            '  .cls-bg-contrast{}',
             '  .cls-1{fill:#F26;}',
             '  .cls-2{fill:#D69;}',
             '  .cls-3{fill:#BAC;}',
@@ -184,10 +184,10 @@ module.exports = {
             '  <circle class=\'cls-2\' cx=\'54\' cy=\'30\' r=\'6\'/>',
             '  <circle class=\'cls-1\' cx=\'30\' cy=\'30\' r=\'6\'/>',
             '  <circle class=\'cls-1\' cx=\'30\' cy=\'54\' r=\'6\'/>',
-            '  <path class=\'cls-0\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
-            '  <path class=\'cls-0\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
-            '  <path class=\'cls-0\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
-            '  <path class=\'cls-0\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
+            '  <path class=\'cls-bg-contrast\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
+            '  <path class=\'cls-bg-contrast\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
+            '  <path class=\'cls-bg-contrast\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
+            '  <path class=\'cls-bg-contrast\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
             ' </g>',
             '</svg>'
         ].join('')