From 1b7c12675d74a2cd4a2e9b6a29b4ff857afe3e54 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 12:55:28 -0400
Subject: [PATCH 01/24] add config option modeBarStyle, update logo

---
 src/components/modebar/modebar.js | 44 ++++++++++++++++++++++---------
 src/css/_modebar.scss             | 27 +++++++------------
 src/fonts/ploticon/ploticon.svg   | 14 ++++++++++
 src/plot_api/plot_api.js          | 11 +++++++-
 src/plot_api/plot_config.js       |  7 +++++
 tasks/util/pull_font_svg.js       | 17 +++++++++++-
 6 files changed, 87 insertions(+), 33 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 445ad3e5088..fbecb9c3cd6 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -52,6 +52,11 @@ proto.update = function(graphInfo, buttons) {
     }
     else this.element.className = 'modebar';
 
+    if(context.modeBarStyle.orientation === 'v') {
+        this.element.className += ' vertical';
+    }
+    this.element.style.backgroundColor = context.modeBarStyle.bgcolor;
+
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
     var needsNewLogo = (this.hasLogo !== context.displaylogo);
@@ -62,7 +67,7 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons);
+        this.updateButtons(buttons, context.modeBarStyle.iconColor);
 
         if(context.displaylogo) {
             this.element.appendChild(this.getLogo());
@@ -73,7 +78,7 @@ proto.update = function(graphInfo, buttons) {
     this.updateActiveButton();
 };
 
-proto.updateButtons = function(buttons) {
+proto.updateButtons = function(buttons, iconColor) {
     var _this = this;
 
     this.buttons = buttons;
@@ -93,6 +98,7 @@ proto.updateButtons = function(buttons) {
             }
             _this.buttonsNames.push(buttonName);
 
+            buttonConfig.color = iconColor;
             var button = _this.createButton(buttonConfig);
             _this.buttonElements.push(button);
             group.appendChild(button);
@@ -157,6 +163,7 @@ proto.createButton = function(config) {
     if(config.toggle) d3.select(button).classed('active', true);
 
     var icon = config.icon;
+    if(config.color) icon.color = config.color;
     if(typeof icon === 'function') {
         button.appendChild(icon());
     }
@@ -173,6 +180,7 @@ proto.createButton = function(config) {
  * @Param {object} thisIcon
  * @Param {number} thisIcon.width
  * @Param {string} thisIcon.path
+ * @Param {string} thisIcon.color
  * @Return {HTMLelement}
  */
 proto.createIcon = function(thisIcon) {
@@ -180,24 +188,34 @@ proto.createIcon = function(thisIcon) {
             Number(thisIcon.height) :
             thisIcon.ascent - thisIcon.descent,
         svgNS = 'http://www.w3.org/2000/svg',
-        icon = document.createElementNS(svgNS, 'svg'),
-        path = document.createElementNS(svgNS, 'path');
+        icon = document.createElementNS(svgNS, 'svg');
 
     icon.setAttribute('height', '1em');
     icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
     icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
-    path.setAttribute('d', thisIcon.path);
+    if(thisIcon.path) {
+        var path = document.createElementNS(svgNS, 'path');
+        path.setAttribute('d', thisIcon.path);
 
-    if(thisIcon.transform) {
-        path.setAttribute('transform', thisIcon.transform);
-    }
-    else if(thisIcon.ascent !== undefined) {
-        // Legacy icon transform calculation
-        path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+        if(thisIcon.transform) {
+            path.setAttribute('transform', thisIcon.transform);
+        }
+        else if(thisIcon.ascent !== undefined) {
+            // Legacy icon transform calculation
+            path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
+        }
+
+        if(thisIcon.color) {
+            path.setAttribute('fill', thisIcon.color);
+        }
+
+        icon.appendChild(path);
     }
 
-    icon.appendChild(path);
+    if(thisIcon.svg) {
+        icon.innerHTML = thisIcon.svg;
+    }
 
     return icon;
 };
@@ -272,7 +290,7 @@ proto.getLogo = function() {
     a.setAttribute('data-title', Lib._(this.graphInfo, 'Produced with Plotly'));
     a.className = 'modebar-btn plotlyjsicon modebar-btn--logo';
 
-    a.appendChild(this.createIcon(Icons.plotlylogo));
+    a.appendChild(this.createIcon(Icons.newplotlylogo));
 
     group.appendChild(a);
     return group;
diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss
index adb85a6878a..b651fb40aa1 100644
--- a/src/css/_modebar.scss
+++ b/src/css/_modebar.scss
@@ -3,7 +3,6 @@
     top: 2px;
     right: 2px;
     z-index: 1001;
-    background: rgba(255,255,255,0.7);
 }
 
 .modebar--hover {
@@ -23,13 +22,8 @@
     position: relative;
     vertical-align: middle;
     white-space: nowrap;
-
-    &:first-child {
-        margin-left: 0px;
-    }
 }
 
-
 .modebar-btn {
     position: relative;
     font-size: 16px;
@@ -43,20 +37,17 @@
         position: relative;
         top: 2px;
     }
+}
 
-    path {
-        fill: rgba(0,31,95,0.3);
-    }
-
-    &.active path, &:hover path {
-        fill: rgba(0,22,72,0.5);
-    }
-
-    &.modebar-btn--logo {
-        padding: 3px 1px;
+.modebar.vertical {
+    .modebar-group {
+        display: block;
+        float: none;
+        margin: 0 auto;
 
-        path {
-            fill: $color-brand-primary !important;
+        .modebar-btn {
+            display:block;
+            text-align: center;
         }
     }
 }
diff --git a/src/fonts/ploticon/ploticon.svg b/src/fonts/ploticon/ploticon.svg
index 5007169983b..4a303241af7 100644
--- a/src/fonts/ploticon/ploticon.svg
+++ b/src/fonts/ploticon/ploticon.svg
@@ -27,5 +27,19 @@
 <glyph glyph-name="selectbox" unicode="&#xe812;" d="m0 850l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-285l0-143 143 0 0 143-143 0z m857 0l0-143 143 0 0 143-143 0z m-857-286l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z m285 0l0-143 143 0 0 143-143 0z m286 0l0-143 143 0 0 143-143 0z" horiz-adv-x="1000" />
 <glyph glyph-name="spikeline" unicode="&#57408;" d="M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z"/>
 </font>
+
+<g id="newplotlylogo" data-width="132" data-height="132">
+  <rect fill="#119dff" width="132" height="132" rx="6" ry="6"/>
+  <circle fill="#25fefd" cx="78" cy="54" r="6"/>
+  <circle fill="#25fefd" cx="102" cy="30" r="6"/>
+  <circle fill="#25fefd" cx="78" cy="30" r="6"/>
+  <circle fill="#25fefd" cx="54" cy="30" r="6"/>
+  <circle fill="#25fefd" cx="30" cy="30" r="6"/>
+  <circle fill="#25fefd" cx="30" cy="54" r="6"/>
+  <path fill="#fff" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"/>
+  <path fill="#fff" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"/>
+  <path fill="#fff" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"/>
+  <path fill="#fff" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"/>
+</g>
 </defs>
 </svg>
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 4fe0a28da59..0b87a6b30a0 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -428,7 +428,7 @@ function setPlotContext(gd, config) {
         keys = Object.keys(config);
         for(i = 0; i < keys.length; i++) {
             key = keys[i];
-            if(key === 'editable' || key === 'edits') continue;
+            if(key === 'editable' || key === 'edits' || key === 'modeBarStyle') continue;
             if(key in context) {
                 if(key === 'setBackground' && config[key] === 'opaque') {
                     context[key] = opaqueSetBackground;
@@ -465,6 +465,15 @@ function setPlotContext(gd, config) {
                 }
             }
         }
+        if(config.modeBarStyle) {
+            keys = Object.keys(config.modeBarStyle);
+            for(i = 0; i < keys.length; i++) {
+                key = keys[i];
+                if(key in context.modeBarStyle) {
+                    context.modeBarStyle[key] = config.modeBarStyle[key];
+                }
+            }
+        }
     }
 
     // staticPlot forces a bunch of others:
diff --git a/src/plot_api/plot_config.js b/src/plot_api/plot_config.js
index 574b618e0a7..0bc7702437a 100644
--- a/src/plot_api/plot_config.js
+++ b/src/plot_api/plot_config.js
@@ -102,6 +102,13 @@ module.exports = {
     // display the mode bar (true, false, or 'hover')
     displayModeBar: 'hover',
 
+    // mode bar style
+    modeBarStyle: {
+        orientation: 'h',
+        bgcolor: 'rgba(255,255,255,0.7)',
+        iconColor: 'rgba(0, 31, 95, 0.3)'
+    },
+
     /*
      * remove mode bar button by name
      * (see ../components/modebar/buttons.js for the list of names)
diff --git a/tasks/util/pull_font_svg.js b/tasks/util/pull_font_svg.js
index b509b98a512..2903153badc 100644
--- a/tasks/util/pull_font_svg.js
+++ b/tasks/util/pull_font_svg.js
@@ -2,7 +2,7 @@ var fs = require('fs');
 var xml2js = require('xml2js');
 
 var parser = new xml2js.Parser();
-
+var builder = new xml2js.Builder({ headless: true, rootName: 'g', renderOpts: {'newline': ''}});
 
 module.exports = function pullFontSVG(data, pathOut) {
     parser.parseString(data, function(err, result) {
@@ -28,6 +28,21 @@ module.exports = function pullFontSVG(data, pathOut) {
             };
         });
 
+        // Load SVG
+        var svgs = result.svg.defs[0].g;
+        svgs.forEach(function(g) {
+            var name = g.$.id,
+                width = parseFloat(g.$['data-width']),
+                height = parseFloat(g.$['data-height']);
+            delete g.$;
+            chars[name] = {
+                name: name,
+                width: width,
+                height: height,
+                svg: builder.buildObject(g)
+            };
+        });
+
         // turn remaining double quotes into single
         var charStr = JSON.stringify(chars, null, 4).replace(/\"/g, '\'');
 

From 947eaf26699125c08c2ea82356fdc8647b0b846a Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 14:27:14 -0400
Subject: [PATCH 02/24] fix margins and alignments of modeBar buttons

---
 src/css/_modebar.scss           | 4 +++-
 src/fonts/ploticon/ploticon.svg | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss
index b651fb40aa1..4082f4a6574 100644
--- a/src/css/_modebar.scss
+++ b/src/css/_modebar.scss
@@ -28,6 +28,7 @@
     position: relative;
     font-size: 16px;
     padding: 3px 4px;
+    height: 22px;
     /* display: inline-block; including this breaks 3d interaction in .embed mode. Chrome bug? */
     cursor: pointer;
     line-height: normal;
@@ -43,7 +44,8 @@
     .modebar-group {
         display: block;
         float: none;
-        margin: 0 auto;
+        margin-left: 0px;
+        margin-top: 8px;
 
         .modebar-btn {
             display:block;
diff --git a/src/fonts/ploticon/ploticon.svg b/src/fonts/ploticon/ploticon.svg
index 4a303241af7..e8fbfcd1e50 100644
--- a/src/fonts/ploticon/ploticon.svg
+++ b/src/fonts/ploticon/ploticon.svg
@@ -11,8 +11,8 @@
 <glyph glyph-name="camera-retro" unicode="&#xe802;" d="m518 386q0 8-5 13t-13 5q-37 0-63-27t-26-63q0-8 5-13t13-5 12 5 5 13q0 23 16 38t38 16q8 0 13 5t5 13z m125-73q0-59-42-101t-101-42-101 42-42 101 42 101 101 42 101-42 42-101z m-572-320h858v71h-858v-71z m643 320q0 89-62 152t-152 62-151-62-63-152 63-151 151-63 152 63 62 151z m-571 358h214v72h-214v-72z m-72-107h858v143h-462l-36-71h-360v-72z m929 143v-714q0-30-21-51t-50-21h-858q-29 0-50 21t-21 51v714q0 30 21 51t50 21h858q29 0 50-21t21-51z" horiz-adv-x="1000" />
 <glyph glyph-name="zoombox" unicode="&#xe803;" d="m1000-25l-250 251c40 63 63 138 63 218 0 224-182 406-407 406-224 0-406-182-406-406s183-406 407-406c80 0 155 22 218 62l250-250 125 125z m-812 250l0 438 437 0 0-438-437 0z m62 375l313 0 0-312-313 0 0 312z" horiz-adv-x="1000" />
 <glyph glyph-name="pan" unicode="&#xe804;" d="m1000 350l-187 188 0-125-250 0 0 250 125 0-188 187-187-187 125 0 0-250-250 0 0 125-188-188 186-187 0 125 252 0 0-250-125 0 187-188 188 188-125 0 0 250 250 0 0-126 187 188z" horiz-adv-x="1000" />
-<glyph glyph-name="zoom_plus" unicode="&#xe805;" d="m1 787l0-875 875 0 0 875-875 0z m687-500l-187 0 0-187-125 0 0 187-188 0 0 125 188 0 0 187 125 0 0-187 187 0 0-125z" horiz-adv-x="1000" />
-<glyph glyph-name="zoom_minus" unicode="&#xe806;" d="m0 788l0-876 875 0 0 876-875 0z m688-500l-500 0 0 125 500 0 0-125z" horiz-adv-x="1000" />
+<glyph glyph-name="zoom_plus" unicode="&#xe805;" d="m1 787l0-875 875 0 0 875-875 0z m687-500l-187 0 0-187-125 0 0 187-188 0 0 125 188 0 0 187 125 0 0-187 187 0 0-125z" horiz-adv-x="875" />
+<glyph glyph-name="zoom_minus" unicode="&#xe806;" d="m0 788l0-876 875 0 0 876-875 0z m688-500l-500 0 0 125 500 0 0-125z" horiz-adv-x="875" />
 <glyph glyph-name="autoscale" unicode="&#xe807;" d="m250 850l-187 0-63 0 0-62 0-188 63 0 0 188 187 0 0 62z m688 0l-188 0 0-62 188 0 0-188 62 0 0 188 0 62-62 0z m-875-938l0 188-63 0 0-188 0-62 63 0 187 0 0 62-187 0z m875 188l0-188-188 0 0-62 188 0 62 0 0 62 0 188-62 0z m-125 188l-1 0-93-94-156 156 156 156 92-93 2 0 0 250-250 0 0-2 93-92-156-156-156 156 94 92 0 2-250 0 0-250 0 0 93 93 157-156-157-156-93 94 0 0 0-250 250 0 0 0-94 93 156 157 156-157-93-93 0 0 250 0 0 250z" horiz-adv-x="1000" />
 <glyph glyph-name="tooltip_basic" unicode="&#xe808;" d="m375 725l0 0-375-375 375-374 0-1 1125 0 0 750-1125 0z" horiz-adv-x="1500" />
 <glyph glyph-name="tooltip_compare" unicode="&#xe809;" d="m187 786l0 2-187-188 188-187 0 0 937 0 0 373-938 0z m0-499l0 1-187-188 188-188 0 0 937 0 0 376-938-1z" horiz-adv-x="1125" />

From 212612b3b95082bcbf4f91ac502b3ae97e32c2b8 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 15:10:33 -0400
Subject: [PATCH 03/24] specify default style in modebar tests

---
 src/components/modebar/modebar.js  | 2 +-
 test/jasmine/tests/modebar_test.js | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index fbecb9c3cd6..c1e8b3f0c47 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -163,11 +163,11 @@ proto.createButton = function(config) {
     if(config.toggle) d3.select(button).classed('active', true);
 
     var icon = config.icon;
-    if(config.color) icon.color = config.color;
     if(typeof icon === 'function') {
         button.appendChild(icon());
     }
     else {
+        if(icon) icon.color = config.color;
         button.appendChild(this.createIcon(icon || Icons.question));
     }
     button.setAttribute('data-gravity', config.gravity || 'n');
diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index d0e447d21a4..09ecf9bce67 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -38,6 +38,11 @@ describe('ModeBar', function() {
             _context: {
                 displaylogo: true,
                 displayModeBar: true,
+                modeBarStyle: {
+                    orientation: 'h',
+                    bgcolor: 'rgba(255,255,255,0.7)',
+                    iconColor: 'rgba(0, 31, 95, 0.3)'
+                },
                 modeBarButtonsToRemove: [],
                 modeBarButtonsToAdd: [],
                 locale: 'en',

From 37952232fb7ee4903fb8802a3b423dd03b8d979a Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 17:02:34 -0400
Subject: [PATCH 04/24] increase sizeo of plot.ly logo

---
 src/css/_modebar.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss
index 4082f4a6574..753735b6959 100644
--- a/src/css/_modebar.scss
+++ b/src/css/_modebar.scss
@@ -38,6 +38,10 @@
         position: relative;
         top: 2px;
     }
+
+    &.modebar-btn--logo {
+        font-size: 20px;
+    }
 }
 
 .modebar.vertical {

From e870e340dc699482bda9e2f268d057574d3290c8 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 17:36:47 -0400
Subject: [PATCH 05/24] fix rendering of logo in IE

---
 src/components/modebar/modebar.js | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index c1e8b3f0c47..29690a5ac80 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -188,13 +188,14 @@ proto.createIcon = function(thisIcon) {
             Number(thisIcon.height) :
             thisIcon.ascent - thisIcon.descent,
         svgNS = 'http://www.w3.org/2000/svg',
-        icon = document.createElementNS(svgNS, 'svg');
-
-    icon.setAttribute('height', '1em');
-    icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
-    icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
+        icon;
 
     if(thisIcon.path) {
+        icon = document.createElementNS(svgNS, 'svg');
+        icon.setAttribute('height', '1em');
+        icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
+        icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
+
         var path = document.createElementNS(svgNS, 'path');
         path.setAttribute('d', thisIcon.path);
 
@@ -214,9 +215,12 @@ proto.createIcon = function(thisIcon) {
     }
 
     if(thisIcon.svg) {
-        icon.innerHTML = thisIcon.svg;
+        icon = document.createElement('div');
+        icon.innerHTML = '<svg height="1em" width="' + (thisIcon.width / iconHeight) + 'em" viewbox="0, 0, ' + thisIcon.width + ',' + thisIcon.height + '" xmlns="">' + thisIcon.svg + '</svg>';
     }
 
+
+
     return icon;
 };
 

From a4d39480bc71ebc3e0fac66d29287f8fc2deafea Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 17:44:13 -0400
Subject: [PATCH 06/24] fix no-multiple-empty-lines

---
 src/components/modebar/modebar.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 29690a5ac80..9eaf443cdc7 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -219,8 +219,6 @@ proto.createIcon = function(thisIcon) {
         icon.innerHTML = '<svg height="1em" width="' + (thisIcon.width / iconHeight) + 'em" viewbox="0, 0, ' + thisIcon.width + ',' + thisIcon.height + '" xmlns="">' + thisIcon.svg + '</svg>';
     }
 
-
-
     return icon;
 };
 

From 61d1c7b63d7b38e64d699d6a4df5abfbcf314d0f Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 18:05:04 -0400
Subject: [PATCH 07/24] slurp entire SVG, uses DOMParser instead of innerHTML

---
 src/components/modebar/modebar.js | 11 ++++----
 src/fonts/ploticon/ploticon.svg   | 44 ++++++++++++++++++++++---------
 tasks/util/pull_font_svg.js       | 16 +++++------
 3 files changed, 43 insertions(+), 28 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 9eaf443cdc7..71b82cd6fd1 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -14,7 +14,7 @@ var isNumeric = require('fast-isnumeric');
 
 var Lib = require('../../lib');
 var Icons = require('../../../build/ploticon');
-
+var Parser = new DOMParser();
 
 /**
  * UI controller for interactive plots
@@ -192,8 +192,6 @@ proto.createIcon = function(thisIcon) {
 
     if(thisIcon.path) {
         icon = document.createElementNS(svgNS, 'svg');
-        icon.setAttribute('height', '1em');
-        icon.setAttribute('width', (thisIcon.width / iconHeight) + 'em');
         icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
 
         var path = document.createElementNS(svgNS, 'path');
@@ -215,10 +213,13 @@ proto.createIcon = function(thisIcon) {
     }
 
     if(thisIcon.svg) {
-        icon = document.createElement('div');
-        icon.innerHTML = '<svg height="1em" width="' + (thisIcon.width / iconHeight) + 'em" viewbox="0, 0, ' + thisIcon.width + ',' + thisIcon.height + '" xmlns="">' + thisIcon.svg + '</svg>';
+        var svgDoc = Parser.parseFromString(thisIcon.svg, 'application/xml');
+        icon = svgDoc.childNodes[0];
     }
 
+    icon.setAttribute('height', '1em');
+    icon.setAttribute('width', '1em');
+
     return icon;
 };
 
diff --git a/src/fonts/ploticon/ploticon.svg b/src/fonts/ploticon/ploticon.svg
index e8fbfcd1e50..663b45ee7a3 100644
--- a/src/fonts/ploticon/ploticon.svg
+++ b/src/fonts/ploticon/ploticon.svg
@@ -28,18 +28,36 @@
 <glyph glyph-name="spikeline" unicode="&#57408;" d="M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z"/>
 </font>
 
-<g id="newplotlylogo" data-width="132" data-height="132">
-  <rect fill="#119dff" width="132" height="132" rx="6" ry="6"/>
-  <circle fill="#25fefd" cx="78" cy="54" r="6"/>
-  <circle fill="#25fefd" cx="102" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="78" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="54" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="30" cy="30" r="6"/>
-  <circle fill="#25fefd" cx="30" cy="54" r="6"/>
-  <path fill="#fff" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"/>
-  <path fill="#fff" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"/>
-  <path fill="#fff" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"/>
-  <path fill="#fff" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"/>
-</g>
+<svg id="newplotlylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #119dff;
+      }
+
+      .cls-2 {
+        fill: #25fefd;
+      }
+
+      .cls-3 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>plotly-logomark</title>
+  <g id="symbol">
+    <rect class="cls-1" width="132" height="132" rx="6" ry="6"/>
+    <circle class="cls-2" cx="78" cy="54" r="6"/>
+    <circle class="cls-2" cx="102" cy="30" r="6"/>
+    <circle class="cls-2" cx="78" cy="30" r="6"/>
+    <circle class="cls-2" cx="54" cy="30" r="6"/>
+    <circle class="cls-2" cx="30" cy="30" r="6"/>
+    <circle class="cls-2" cx="30" cy="54" r="6"/>
+    <path class="cls-3" d="M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z"/>
+    <path class="cls-3" d="M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z"/>
+    <path class="cls-3" d="M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z"/>
+    <path class="cls-3" d="M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z"/>
+  </g>
+</svg>
 </defs>
 </svg>
diff --git a/tasks/util/pull_font_svg.js b/tasks/util/pull_font_svg.js
index 2903153badc..5fe807d6de4 100644
--- a/tasks/util/pull_font_svg.js
+++ b/tasks/util/pull_font_svg.js
@@ -2,7 +2,7 @@ var fs = require('fs');
 var xml2js = require('xml2js');
 
 var parser = new xml2js.Parser();
-var builder = new xml2js.Builder({ headless: true, rootName: 'g', renderOpts: {'newline': ''}});
+var builder = new xml2js.Builder({ headless: true, rootName: 'svg', renderOpts: {'newline': ''}});
 
 module.exports = function pullFontSVG(data, pathOut) {
     parser.parseString(data, function(err, result) {
@@ -29,17 +29,13 @@ module.exports = function pullFontSVG(data, pathOut) {
         });
 
         // Load SVG
-        var svgs = result.svg.defs[0].g;
-        svgs.forEach(function(g) {
-            var name = g.$.id,
-                width = parseFloat(g.$['data-width']),
-                height = parseFloat(g.$['data-height']);
-            delete g.$;
+        var svgs = result.svg.defs[0].svg;
+        svgs.forEach(function(svg) {
+            var name = svg.$.id;
+            delete svg.$.id;
             chars[name] = {
                 name: name,
-                width: width,
-                height: height,
-                svg: builder.buildObject(g)
+                svg: builder.buildObject(svg)
             };
         });
 

From 1d4ac7eb054822efd2140f2a0452bfb2e5aa7c7f Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 18:13:32 -0400
Subject: [PATCH 08/24] add build artefact for icons

---
 build/plotcss.js  | 12 +++++-------
 build/ploticon.js |  8 ++++++--
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/build/plotcss.js b/build/plotcss.js
index afed129a1d9..ddd6c83098a 100644
--- a/build/plotcss.js
+++ b/build/plotcss.js
@@ -31,17 +31,15 @@ var rules = {
     "X .cursor-n-resize": "cursor:n-resize;",
     "X .cursor-ne-resize": "cursor:ne-resize;",
     "X .cursor-grab": "cursor:-webkit-grab;cursor:grab;",
-    "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;background:rgba(255,255,255,0.7);",
+    "X .modebar": "position:absolute;top:2px;right:2px;z-index:1001;",
     "X .modebar--hover": "opacity:0;-webkit-transition:opacity 0.3s ease 0s;-moz-transition:opacity 0.3s ease 0s;-ms-transition:opacity 0.3s ease 0s;-o-transition:opacity 0.3s ease 0s;transition:opacity 0.3s ease 0s;",
     "X:hover .modebar--hover": "opacity:1;",
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;margin-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
-    "X .modebar-group:first-child": "margin-left:0px;",
-    "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;cursor:pointer;line-height:normal;box-sizing:border-box;",
+    "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
     "X .modebar-btn svg": "position:relative;top:2px;",
-    "X .modebar-btn path": "fill:rgba(0,31,95,0.3);",
-    "X .modebar-btn.active path,X .modebar-btn:hover path": "fill:rgba(0,22,72,0.5);",
-    "X .modebar-btn.modebar-btn--logo": "padding:3px 1px;",
-    "X .modebar-btn.modebar-btn--logo path": "fill:#447adb !important;",
+    "X .modebar-btn.modebar-btn--logo": "font-size:20px;",
+    "X .modebar.vertical .modebar-group": "display:block;float:none;margin-left:0px;margin-top:8px;",
+    "X .modebar.vertical .modebar-group .modebar-btn": "display:block;text-align:center;",
     "X [data-title]:before,X [data-title]:after": "position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:none;opacity:0;z-index:1001;pointer-events:none;top:110%;right:50%;",
     "X [data-title]:hover:before,X [data-title]:hover:after": "display:block;opacity:1;",
     "X [data-title]:before": "content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1002;margin-top:-12px;border-bottom-color:#69738a;margin-right:-6px;",
diff --git a/build/ploticon.js b/build/ploticon.js
index f7bcbcd4781..32ca5008ae9 100644
--- a/build/ploticon.js
+++ b/build/ploticon.js
@@ -32,13 +32,13 @@ module.exports = {
         'transform': 'matrix(1 0 0 -1 0 850)'
     },
     'zoom_plus': {
-        'width': 1000,
+        'width': 875,
         'height': 1000,
         'path': 'm1 787l0-875 875 0 0 875-875 0z m687-500l-187 0 0-187-125 0 0 187-188 0 0 125 188 0 0 187 125 0 0-187 187 0 0-125z',
         'transform': 'matrix(1 0 0 -1 0 850)'
     },
     'zoom_minus': {
-        'width': 1000,
+        'width': 875,
         'height': 1000,
         'path': 'm0 788l0-876 875 0 0 876-875 0z m688-500l-500 0 0 125 500 0 0-125z',
         'transform': 'matrix(1 0 0 -1 0 850)'
@@ -120,5 +120,9 @@ module.exports = {
         'height': 1000,
         'path': 'M512 409c0-57-46-104-103-104-57 0-104 47-104 104 0 57 47 103 104 103 57 0 103-46 103-103z m-327-39l92 0 0 92-92 0z m-185 0l92 0 0 92-92 0z m370-186l92 0 0 93-92 0z m0-184l92 0 0 92-92 0z',
         'transform': 'matrix(1.5 0 0 -1.5 0 850)'
+    },
+    'newplotlylogo': {
+        'name': 'newplotlylogo',
+        'svg': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'><defs><style>&#xD;\n      .cls-1 {&#xD;\n        fill: #119dff;&#xD;\n      }&#xD;\n&#xD;\n      .cls-2 {&#xD;\n        fill: #25fefd;&#xD;\n      }&#xD;\n&#xD;\n      .cls-3 {&#xD;\n        fill: #fff;&#xD;\n      }&#xD;\n    </style></defs><title>plotly-logomark</title><g id=\'symbol\'><rect class=\'cls-1\' width=\'132\' height=\'132\' rx=\'6\' ry=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'54\' r=\'6\'/><circle class=\'cls-2\' cx=\'102\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'54\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'54\' r=\'6\'/><path class=\'cls-3\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/><path class=\'cls-3\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/><path class=\'cls-3\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/><path class=\'cls-3\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/></g></svg>'
     }
 };

From ff9d801ad66cab21a3be34bb2f5e30d2d54c7091 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 2 Oct 2018 23:42:57 -0400
Subject: [PATCH 09/24] move plot.ly logo on top for vertical modebar

---
 build/plotcss.js                  | 1 -
 src/components/modebar/modebar.js | 7 ++++++-
 src/css/_modebar.scss             | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/build/plotcss.js b/build/plotcss.js
index ddd6c83098a..5db2becb0a4 100644
--- a/build/plotcss.js
+++ b/build/plotcss.js
@@ -37,7 +37,6 @@ var rules = {
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;margin-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
     "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
     "X .modebar-btn svg": "position:relative;top:2px;",
-    "X .modebar-btn.modebar-btn--logo": "font-size:20px;",
     "X .modebar.vertical .modebar-group": "display:block;float:none;margin-left:0px;margin-top:8px;",
     "X .modebar.vertical .modebar-group .modebar-btn": "display:block;text-align:center;",
     "X [data-title]:before,X [data-title]:after": "position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:none;opacity:0;z-index:1001;pointer-events:none;top:110%;right:50%;",
diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 71b82cd6fd1..16d1471aa7c 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -70,7 +70,12 @@ proto.update = function(graphInfo, buttons) {
         this.updateButtons(buttons, context.modeBarStyle.iconColor);
 
         if(context.displaylogo) {
-            this.element.appendChild(this.getLogo());
+            if(context.modeBarStyle.orientation === 'v') {
+                this.element.prepend(this.getLogo());
+            } else {
+                this.element.appendChild(this.getLogo());
+            }
+
             this.hasLogo = true;
         }
     }
diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss
index 753735b6959..4d08e5d7ea5 100644
--- a/src/css/_modebar.scss
+++ b/src/css/_modebar.scss
@@ -40,7 +40,7 @@
     }
 
     &.modebar-btn--logo {
-        font-size: 20px;
+
     }
 }
 

From 397a6de3a729db9bf482546ba2c928785d2737c5 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Wed, 3 Oct 2018 13:40:30 -0400
Subject: [PATCH 10/24] move modeBarStyle from config to layout options

---
 src/components/modebar/modebar.js | 10 ++++++----
 src/plot_api/plot_api.js          | 11 +----------
 src/plot_api/plot_config.js       |  7 -------
 src/plots/layout_attributes.js    | 24 ++++++++++++++++++++++++
 src/plots/plots.js                |  4 ++++
 5 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 16d1471aa7c..5d05d658cbc 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -46,16 +46,18 @@ proto.update = function(graphInfo, buttons) {
     this.graphInfo = graphInfo;
 
     var context = this.graphInfo._context;
+    var fullLayout = this.graphInfo._fullLayout;
 
     if(context.displayModeBar === 'hover') {
         this.element.className = 'modebar modebar--hover';
     }
     else this.element.className = 'modebar';
 
-    if(context.modeBarStyle.orientation === 'v') {
+    if(fullLayout.modeBarStyle.orientation === 'v') {
         this.element.className += ' vertical';
+        buttons = buttons.reverse();
     }
-    this.element.style.backgroundColor = context.modeBarStyle.bgcolor;
+    this.element.style.backgroundColor = fullLayout.modeBarStyle.bgcolor;
 
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
@@ -67,10 +69,10 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons, context.modeBarStyle.iconColor);
+        this.updateButtons(buttons, fullLayout.modeBarStyle.iconColor);
 
         if(context.displaylogo) {
-            if(context.modeBarStyle.orientation === 'v') {
+            if(fullLayout.modeBarStyle.orientation === 'v') {
                 this.element.prepend(this.getLogo());
             } else {
                 this.element.appendChild(this.getLogo());
diff --git a/src/plot_api/plot_api.js b/src/plot_api/plot_api.js
index 0b87a6b30a0..4fe0a28da59 100644
--- a/src/plot_api/plot_api.js
+++ b/src/plot_api/plot_api.js
@@ -428,7 +428,7 @@ function setPlotContext(gd, config) {
         keys = Object.keys(config);
         for(i = 0; i < keys.length; i++) {
             key = keys[i];
-            if(key === 'editable' || key === 'edits' || key === 'modeBarStyle') continue;
+            if(key === 'editable' || key === 'edits') continue;
             if(key in context) {
                 if(key === 'setBackground' && config[key] === 'opaque') {
                     context[key] = opaqueSetBackground;
@@ -465,15 +465,6 @@ function setPlotContext(gd, config) {
                 }
             }
         }
-        if(config.modeBarStyle) {
-            keys = Object.keys(config.modeBarStyle);
-            for(i = 0; i < keys.length; i++) {
-                key = keys[i];
-                if(key in context.modeBarStyle) {
-                    context.modeBarStyle[key] = config.modeBarStyle[key];
-                }
-            }
-        }
     }
 
     // staticPlot forces a bunch of others:
diff --git a/src/plot_api/plot_config.js b/src/plot_api/plot_config.js
index 0bc7702437a..574b618e0a7 100644
--- a/src/plot_api/plot_config.js
+++ b/src/plot_api/plot_config.js
@@ -102,13 +102,6 @@ module.exports = {
     // display the mode bar (true, false, or 'hover')
     displayModeBar: 'hover',
 
-    // mode bar style
-    modeBarStyle: {
-        orientation: 'h',
-        bgcolor: 'rgba(255,255,255,0.7)',
-        iconColor: 'rgba(0, 31, 95, 0.3)'
-    },
-
     /*
      * remove mode bar button by name
      * (see ../components/modebar/buttons.js for the list of names)
diff --git a/src/plots/layout_attributes.js b/src/plots/layout_attributes.js
index 9e422717d4c..cb588fb522b 100644
--- a/src/plots/layout_attributes.js
+++ b/src/plots/layout_attributes.js
@@ -224,5 +224,29 @@ module.exports = {
             'or a logo image, for example. To omit one of these items on the plot,',
             'make an item with matching `templateitemname` and `visible: false`.'
         ].join(' ')
+    },
+    modeBarStyle: {
+        orientation: {
+            valType: 'enumerated',
+            values: ['v', 'h'],
+            dflt: 'h',
+            role: 'info',
+            editType: 'modebar',
+            description: 'Sets the orientation of the modebar.'
+        },
+        bgcolor: {
+            valType: 'color',
+            role: 'style',
+            dflt: 'rgba(255,255,255,0.7)',
+            editType: 'modebar',
+            description: 'Sets the background color of the modebar.'
+        },
+        iconColor: {
+            valType: 'color',
+            role: 'style',
+            dflt: 'rgba(0, 31, 95, 0.3)',
+            editType: 'modebar',
+            description: 'Sets the color of the icons in the modebar.'
+        }
     }
 };
diff --git a/src/plots/plots.js b/src/plots/plots.js
index 8f172d14ba0..9efe853db70 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1334,6 +1334,10 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 
     coerce('datarevision');
 
+    coerce('modeBarStyle.orientation');
+    coerce('modeBarStyle.bgcolor');
+    coerce('modeBarStyle.iconColor');
+
     Registry.getComponentMethod(
         'calendars',
         'handleDefaults'

From baeb1bc98813fb112810906d8e1c421237bbcccc Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Wed, 3 Oct 2018 13:44:35 -0400
Subject: [PATCH 11/24] update modebar tests with modeBarStyle in layout
 instead of config

---
 test/jasmine/tests/modebar_test.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index 09ecf9bce67..3fccb25cd5a 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -32,17 +32,17 @@ describe('ModeBar', function() {
                 dragmode: 'zoom',
                 _paperdiv: d3.select(getMockContainerTree()),
                 _has: Plots._hasPlotType,
-                _subplots: {xaxis: xaxes || [], yaxis: yaxes || []}
+                _subplots: {xaxis: xaxes || [], yaxis: yaxes || []},
+                modeBarStyle: {
+                    orientation: 'h',
+                    bgcolor: 'rgba(255,255,255,0.7)',
+                    iconColor: 'rgba(0, 31, 95, 0.3)'
+                }
             },
             _fullData: [],
             _context: {
                 displaylogo: true,
                 displayModeBar: true,
-                modeBarStyle: {
-                    orientation: 'h',
-                    bgcolor: 'rgba(255,255,255,0.7)',
-                    iconColor: 'rgba(0, 31, 95, 0.3)'
-                },
                 modeBarButtonsToRemove: [],
                 modeBarButtonsToAdd: [],
                 locale: 'en',

From 254f158816d25985a1f56495aa621de7932d4cb1 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Wed, 3 Oct 2018 14:39:29 -0400
Subject: [PATCH 12/24] set proper editType on layout attribute modeBar

---
 src/plots/layout_attributes.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plots/layout_attributes.js b/src/plots/layout_attributes.js
index cb588fb522b..553ee0a036b 100644
--- a/src/plots/layout_attributes.js
+++ b/src/plots/layout_attributes.js
@@ -237,7 +237,7 @@ module.exports = {
         bgcolor: {
             valType: 'color',
             role: 'style',
-            dflt: 'rgba(255,255,255,0.7)',
+            dflt: 'rgba(255, 255, 255, 0.7)',
             editType: 'modebar',
             description: 'Sets the background color of the modebar.'
         },
@@ -247,6 +247,7 @@ module.exports = {
             dflt: 'rgba(0, 31, 95, 0.3)',
             editType: 'modebar',
             description: 'Sets the color of the icons in the modebar.'
-        }
+        },
+        editType: 'modebar'
     }
 };

From f9e8777ba0db5c17b0803c7e75e91517f135421b Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Wed, 3 Oct 2018 16:05:16 -0400
Subject: [PATCH 13/24] modeBarStyle managed in css, new layout attribute
 activeIconColor

---
 src/components/modebar/modebar.js  | 26 +++++++++++++++-----------
 src/lib/index.js                   | 27 +++++++++++++++++++++++----
 src/plots/layout_attributes.js     |  7 +++++++
 src/plots/plots.js                 |  1 +
 test/jasmine/tests/modebar_test.js |  6 ++++++
 5 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 5d05d658cbc..7d61130bb11 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -45,8 +45,12 @@ var proto = ModeBar.prototype;
 proto.update = function(graphInfo, buttons) {
     this.graphInfo = graphInfo;
 
-    var context = this.graphInfo._context;
-    var fullLayout = this.graphInfo._fullLayout;
+    var context = this.graphInfo._context,
+        fullLayout = this.graphInfo._fullLayout,
+        modeBarId = 'modebar-' + fullLayout._uid;
+
+    this.element.setAttribute('id', modeBarId);
+    this._uid = modeBarId;
 
     if(context.displayModeBar === 'hover') {
         this.element.className = 'modebar modebar--hover';
@@ -57,7 +61,11 @@ proto.update = function(graphInfo, buttons) {
         this.element.className += ' vertical';
         buttons = buttons.reverse();
     }
-    this.element.style.backgroundColor = fullLayout.modeBarStyle.bgcolor;
+
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modeBarStyle.bgcolor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modeBarStyle.iconColor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
 
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
@@ -69,7 +77,7 @@ proto.update = function(graphInfo, buttons) {
     if(needsNewButtons || needsNewLogo || needsNewLocale) {
         this.removeAllButtons();
 
-        this.updateButtons(buttons, fullLayout.modeBarStyle.iconColor);
+        this.updateButtons(buttons);
 
         if(context.displaylogo) {
             if(fullLayout.modeBarStyle.orientation === 'v') {
@@ -85,7 +93,7 @@ proto.update = function(graphInfo, buttons) {
     this.updateActiveButton();
 };
 
-proto.updateButtons = function(buttons, iconColor) {
+proto.updateButtons = function(buttons) {
     var _this = this;
 
     this.buttons = buttons;
@@ -105,7 +113,6 @@ proto.updateButtons = function(buttons, iconColor) {
             }
             _this.buttonsNames.push(buttonName);
 
-            buttonConfig.color = iconColor;
             var button = _this.createButton(buttonConfig);
             _this.buttonElements.push(button);
             group.appendChild(button);
@@ -174,7 +181,6 @@ proto.createButton = function(config) {
         button.appendChild(icon());
     }
     else {
-        if(icon) icon.color = config.color;
         button.appendChild(this.createIcon(icon || Icons.question));
     }
     button.setAttribute('data-gravity', config.gravity || 'n');
@@ -200,6 +206,7 @@ proto.createIcon = function(thisIcon) {
     if(thisIcon.path) {
         icon = document.createElementNS(svgNS, 'svg');
         icon.setAttribute('viewBox', [0, 0, thisIcon.width, iconHeight].join(' '));
+        icon.setAttribute('class', 'icon');
 
         var path = document.createElementNS(svgNS, 'path');
         path.setAttribute('d', thisIcon.path);
@@ -212,10 +219,6 @@ proto.createIcon = function(thisIcon) {
             path.setAttribute('transform', 'matrix(1 0 0 -1 0 ' + thisIcon.ascent + ')');
         }
 
-        if(thisIcon.color) {
-            path.setAttribute('fill', thisIcon.color);
-        }
-
         icon.appendChild(path);
     }
 
@@ -316,6 +319,7 @@ proto.removeAllButtons = function() {
 
 proto.destroy = function() {
     Lib.removeElement(this.container.querySelector('.modebar'));
+    Lib.deleteRelatedStyleRule(this._uid);
 };
 
 function createModeBar(gd, buttons) {
diff --git a/src/lib/index.js b/src/lib/index.js
index 50a1e39948b..e0b6576d8ca 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -679,14 +679,24 @@ lib.removeElement = function(el) {
  * by all calls to this function
  */
 lib.addStyleRule = function(selector, styleString) {
-    if(!lib.styleSheet) {
-        var style = document.createElement('style');
+    lib.addRelatedStyleRule('global', selector, styleString);
+};
+
+/**
+ * for dynamically adding style rules
+ * to a stylesheet uniquely identified by a uid
+ */
+lib.addRelatedStyleRule = function(uid, selector, styleString) {
+    var id = 'plotly.js-style-' + uid,
+        style = document.getElementById(id);
+    if(!style) {
+        style = document.createElement('style');
+        style.setAttribute('id', id);
         // WebKit hack :(
         style.appendChild(document.createTextNode(''));
         document.head.appendChild(style);
-        lib.styleSheet = style.sheet;
     }
-    var styleSheet = lib.styleSheet;
+    var styleSheet = style.sheet;
 
     if(styleSheet.insertRule) {
         styleSheet.insertRule(selector + '{' + styleString + '}', 0);
@@ -697,6 +707,15 @@ lib.addStyleRule = function(selector, styleString) {
     else lib.warn('addStyleRule failed');
 };
 
+/**
+ * to remove from the page a stylesheet identified by a given uid
+ */
+lib.deleteRelatedStyleRule = function(uid) {
+    var id = 'plotly.js-style-' + uid,
+        style = document.getElementById(id);
+    if(style) style.remove();
+};
+
 lib.isIE = function() {
     return typeof window.navigator.msSaveBlob !== 'undefined';
 };
diff --git a/src/plots/layout_attributes.js b/src/plots/layout_attributes.js
index 553ee0a036b..3b904694e89 100644
--- a/src/plots/layout_attributes.js
+++ b/src/plots/layout_attributes.js
@@ -248,6 +248,13 @@ module.exports = {
             editType: 'modebar',
             description: 'Sets the color of the icons in the modebar.'
         },
+        activeIconColor: {
+            valType: 'color',
+            role: 'style',
+            dflt: 'rgba(0, 22, 72, 0.5)',
+            editType: 'modebar',
+            description: 'Sets the color of the active or hovered on icons in the modebar.'
+        },
         editType: 'modebar'
     }
 };
diff --git a/src/plots/plots.js b/src/plots/plots.js
index 9efe853db70..13c8f91ac52 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1337,6 +1337,7 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
     coerce('modeBarStyle.orientation');
     coerce('modeBarStyle.bgcolor');
     coerce('modeBarStyle.iconColor');
+    coerce('modeBarStyle.activeIconColor');
 
     Registry.getComponentMethod(
         'calendars',
diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index 3fccb25cd5a..6671ec2fd29 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -293,9 +293,15 @@ describe('ModeBar', function() {
         it('removes the mode bar entirely', function() {
             var modeBarParent = modeBar.element.parentNode;
 
+            var style = document.querySelector('style[id*="modebar"]');
+            expect(style).toBeTruthy();
+
             modeBar.destroy();
 
             expect(modeBarParent.querySelector('.modebar')).toBeNull();
+
+            style = document.querySelector('style[id*="modebar"]');
+            expect(style).toBeNull();
         });
     });
 

From fc47c72847f0b0a79f6a80844b7fde1e93dfd7ed Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Wed, 3 Oct 2018 17:05:45 -0400
Subject: [PATCH 14/24] =?UTF-8?q?remove=20=F0=9F=90=AB=20in=20modebar=20la?=
 =?UTF-8?q?yout=20attributes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modebar/modebar.js  | 12 ++++++------
 src/plots/layout_attributes.js     |  6 +++---
 src/plots/plots.js                 |  8 ++++----
 test/jasmine/tests/modebar_test.js |  5 +++--
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 7d61130bb11..bd8632b021f 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -57,15 +57,15 @@ proto.update = function(graphInfo, buttons) {
     }
     else this.element.className = 'modebar';
 
-    if(fullLayout.modeBarStyle.orientation === 'v') {
+    if(fullLayout.modebar.orientation === 'v') {
         this.element.className += ' vertical';
         buttons = buttons.reverse();
     }
 
-    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modeBarStyle.bgcolor);
-    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modeBarStyle.iconColor);
-    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
-    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + fullLayout.modeBarStyle.activeIconColor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modebar.bgcolor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modebar.color);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modebar.activecolor);
+    Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn.active .icon path', 'fill: ' + fullLayout.modebar.activecolor);
 
     // if buttons or logo have changed, redraw modebar interior
     var needsNewButtons = !this.hasButtons(buttons);
@@ -80,7 +80,7 @@ proto.update = function(graphInfo, buttons) {
         this.updateButtons(buttons);
 
         if(context.displaylogo) {
-            if(fullLayout.modeBarStyle.orientation === 'v') {
+            if(fullLayout.modebar.orientation === 'v') {
                 this.element.prepend(this.getLogo());
             } else {
                 this.element.appendChild(this.getLogo());
diff --git a/src/plots/layout_attributes.js b/src/plots/layout_attributes.js
index 3b904694e89..bbb48187b45 100644
--- a/src/plots/layout_attributes.js
+++ b/src/plots/layout_attributes.js
@@ -225,7 +225,7 @@ module.exports = {
             'make an item with matching `templateitemname` and `visible: false`.'
         ].join(' ')
     },
-    modeBarStyle: {
+    modebar: {
         orientation: {
             valType: 'enumerated',
             values: ['v', 'h'],
@@ -241,14 +241,14 @@ module.exports = {
             editType: 'modebar',
             description: 'Sets the background color of the modebar.'
         },
-        iconColor: {
+        color: {
             valType: 'color',
             role: 'style',
             dflt: 'rgba(0, 31, 95, 0.3)',
             editType: 'modebar',
             description: 'Sets the color of the icons in the modebar.'
         },
-        activeIconColor: {
+        activecolor: {
             valType: 'color',
             role: 'style',
             dflt: 'rgba(0, 22, 72, 0.5)',
diff --git a/src/plots/plots.js b/src/plots/plots.js
index 13c8f91ac52..3b52c87512a 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1334,10 +1334,10 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 
     coerce('datarevision');
 
-    coerce('modeBarStyle.orientation');
-    coerce('modeBarStyle.bgcolor');
-    coerce('modeBarStyle.iconColor');
-    coerce('modeBarStyle.activeIconColor');
+    coerce('modebar.orientation');
+    coerce('modebar.bgcolor');
+    coerce('modebar.color');
+    coerce('modebar.activecolor');
 
     Registry.getComponentMethod(
         'calendars',
diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index 6671ec2fd29..a2114880185 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -33,10 +33,11 @@ describe('ModeBar', function() {
                 _paperdiv: d3.select(getMockContainerTree()),
                 _has: Plots._hasPlotType,
                 _subplots: {xaxis: xaxes || [], yaxis: yaxes || []},
-                modeBarStyle: {
+                modebar: {
                     orientation: 'h',
                     bgcolor: 'rgba(255,255,255,0.7)',
-                    iconColor: 'rgba(0, 31, 95, 0.3)'
+                    color: 'rgba(0, 31, 95, 0.3)',
+                    activecolor: 'rgba(0, 31, 95, 1)'
                 }
             },
             _fullData: [],

From 0046f12a6390db25ec0779917f21bfe5f0a51615 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Thu, 4 Oct 2018 11:48:37 -0400
Subject: [PATCH 15/24] more robust test for modeBar.destroy

---
 test/jasmine/tests/modebar_test.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index a2114880185..fb66a1dc60f 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -29,6 +29,7 @@ describe('ModeBar', function() {
     function getMockGraphInfo(xaxes, yaxes) {
         return {
             _fullLayout: {
+                _uid: '6ea6a7',
                 dragmode: 'zoom',
                 _paperdiv: d3.select(getMockContainerTree()),
                 _has: Plots._hasPlotType,
@@ -292,16 +293,19 @@ describe('ModeBar', function() {
 
     describe('modeBar.destroy', function() {
         it('removes the mode bar entirely', function() {
-            var modeBarParent = modeBar.element.parentNode;
+            var modeBarParent = modeBar.element.parentNode,
+                gd = getMockGraphInfo(),
+                styleSelector = 'style[id*="modebar-' + gd._fullLayout._uid + '"]';
 
-            var style = document.querySelector('style[id*="modebar"]');
+
+            var style = document.querySelector(styleSelector);
             expect(style).toBeTruthy();
 
             modeBar.destroy();
 
             expect(modeBarParent.querySelector('.modebar')).toBeNull();
 
-            style = document.querySelector('style[id*="modebar"]');
+            style = document.querySelector(styleSelector);
             expect(style).toBeNull();
         });
     });

From b7c2355e735bab6aacb806416a208e8601b5437c Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Thu, 4 Oct 2018 13:49:41 -0400
Subject: [PATCH 16/24] place tooltips on the left of vertical modebars

---
 build/plotcss.js      |  2 ++
 src/css/_tooltip.scss | 17 ++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/build/plotcss.js b/build/plotcss.js
index 5db2becb0a4..8e293304052 100644
--- a/build/plotcss.js
+++ b/build/plotcss.js
@@ -43,6 +43,8 @@ var rules = {
     "X [data-title]:hover:before,X [data-title]:hover:after": "display:block;opacity:1;",
     "X [data-title]:before": "content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1002;margin-top:-12px;border-bottom-color:#69738a;margin-right:-6px;",
     "X [data-title]:after": "content:attr(data-title);background:#69738a;color:white;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;margin-right:-18px;border-radius:2px;",
+    "X .vertical [data-title]:before,X .vertical [data-title]:after": "top:0%;right:200%;",
+    "X .vertical [data-title]:before": "border:6px solid transparent;border-left-color:#69738a;margin-top:8px;margin-right:-30px;",
     "X .select-outline": "fill:none;stroke-width:1;shape-rendering:crispEdges;",
     "X .select-outline-1": "stroke:white;",
     "X .select-outline-2": "stroke:black;stroke-dasharray:2px 2px;",
diff --git a/src/css/_tooltip.scss b/src/css/_tooltip.scss
index 1f113a4af7f..596ed44d936 100644
--- a/src/css/_tooltip.scss
+++ b/src/css/_tooltip.scss
@@ -51,7 +51,7 @@ $successColor: hsl(121, 32%, 40%) !default;
         opacity: 1;
     }
 
-    // Arrow
+    // Top arrow
     &:before {
         content: '';
         position: absolute;
@@ -78,3 +78,18 @@ $successColor: hsl(121, 32%, 40%) !default;
         border-radius: 2px;
     }
 }
+
+.vertical [data-title] {
+  &:before, &:after {
+    top: 0%;
+    right: 200%;
+  }
+
+  // Right arrow
+  &:before {
+    border: $arrowBorderWidth solid transparent;
+    border-left-color: $defaultColor;
+    margin-top: $verticalPadding;
+    margin-right: -1 * ($arrowOffsetX + 2 *  $arrowBorderWidth);
+  }
+}

From 31d6fb21f36f0e4fbadf9159f2ccb5665279fd92 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Thu, 4 Oct 2018 14:19:04 -0400
Subject: [PATCH 17/24] in modebar plotly logo has same position in both
 orientations (v|h)

---
 build/plotcss.js      | 3 ++-
 src/css/_modebar.scss | 5 +++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/build/plotcss.js b/build/plotcss.js
index 8e293304052..669cf65d480 100644
--- a/build/plotcss.js
+++ b/build/plotcss.js
@@ -37,7 +37,8 @@ var rules = {
     "X .modebar-group": "float:left;display:inline-block;box-sizing:border-box;margin-left:8px;position:relative;vertical-align:middle;white-space:nowrap;",
     "X .modebar-btn": "position:relative;font-size:16px;padding:3px 4px;height:22px;cursor:pointer;line-height:normal;box-sizing:border-box;",
     "X .modebar-btn svg": "position:relative;top:2px;",
-    "X .modebar.vertical .modebar-group": "display:block;float:none;margin-left:0px;margin-top:8px;",
+    "X .modebar.vertical": "top:-1px;",
+    "X .modebar.vertical .modebar-group": "display:block;float:none;margin-left:0px;margin-bottom:8px;",
     "X .modebar.vertical .modebar-group .modebar-btn": "display:block;text-align:center;",
     "X [data-title]:before,X [data-title]:after": "position:absolute;-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:none;opacity:0;z-index:1001;pointer-events:none;top:110%;right:50%;",
     "X [data-title]:hover:before,X [data-title]:hover:after": "display:block;opacity:1;",
diff --git a/src/css/_modebar.scss b/src/css/_modebar.scss
index 4d08e5d7ea5..a7e128bb573 100644
--- a/src/css/_modebar.scss
+++ b/src/css/_modebar.scss
@@ -45,14 +45,15 @@
 }
 
 .modebar.vertical {
+    top: -1px;
     .modebar-group {
         display: block;
         float: none;
         margin-left: 0px;
-        margin-top: 8px;
+        margin-bottom: 8px;
 
         .modebar-btn {
-            display:block;
+            display: block;
             text-align: center;
         }
     }

From 97f25e259c04e1c0c2b3f8e20efbbba43958cbf7 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Thu, 4 Oct 2018 14:45:38 -0400
Subject: [PATCH 18/24] fix to change modebar style on relayout

---
 src/components/modebar/modebar.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index bd8632b021f..6928d133aa3 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -62,6 +62,7 @@ proto.update = function(graphInfo, buttons) {
         buttons = buttons.reverse();
     }
 
+    Lib.deleteRelatedStyleRule(modeBarId);
     Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId, 'background-color: ' + fullLayout.modebar.bgcolor);
     Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn .icon path', 'fill: ' + fullLayout.modebar.color);
     Lib.addRelatedStyleRule(modeBarId, '#' + modeBarId + ' .modebar-btn:hover .icon path', 'fill: ' + fullLayout.modebar.activecolor);

From dc7877b553af7cfce3a8c284b7e6de597bb22488 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Thu, 4 Oct 2018 15:00:59 -0400
Subject: [PATCH 19/24] trim whitespace in plotly logo's svg

---
 build/ploticon.js               |  2 +-
 src/fonts/ploticon/ploticon.svg | 14 +-------------
 2 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/build/ploticon.js b/build/ploticon.js
index 32ca5008ae9..eb6ecadccac 100644
--- a/build/ploticon.js
+++ b/build/ploticon.js
@@ -123,6 +123,6 @@ module.exports = {
     },
     'newplotlylogo': {
         'name': 'newplotlylogo',
-        'svg': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'><defs><style>&#xD;\n      .cls-1 {&#xD;\n        fill: #119dff;&#xD;\n      }&#xD;\n&#xD;\n      .cls-2 {&#xD;\n        fill: #25fefd;&#xD;\n      }&#xD;\n&#xD;\n      .cls-3 {&#xD;\n        fill: #fff;&#xD;\n      }&#xD;\n    </style></defs><title>plotly-logomark</title><g id=\'symbol\'><rect class=\'cls-1\' width=\'132\' height=\'132\' rx=\'6\' ry=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'54\' r=\'6\'/><circle class=\'cls-2\' cx=\'102\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'54\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'54\' r=\'6\'/><path class=\'cls-3\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/><path class=\'cls-3\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/><path class=\'cls-3\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/><path class=\'cls-3\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/></g></svg>'
+        'svg': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'><defs><style>.cls-1 {fill: #119dff;} .cls-2 {fill: #25fefd;} .cls-3 {fill: #fff;}</style></defs><title>plotly-logomark</title><g id=\'symbol\'><rect class=\'cls-1\' width=\'132\' height=\'132\' rx=\'6\' ry=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'54\' r=\'6\'/><circle class=\'cls-2\' cx=\'102\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'78\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'54\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'30\' r=\'6\'/><circle class=\'cls-2\' cx=\'30\' cy=\'54\' r=\'6\'/><path class=\'cls-3\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/><path class=\'cls-3\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/><path class=\'cls-3\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/><path class=\'cls-3\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/></g></svg>'
     }
 };
diff --git a/src/fonts/ploticon/ploticon.svg b/src/fonts/ploticon/ploticon.svg
index 663b45ee7a3..e2a07ec54d4 100644
--- a/src/fonts/ploticon/ploticon.svg
+++ b/src/fonts/ploticon/ploticon.svg
@@ -30,19 +30,7 @@
 
 <svg id="newplotlylogo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 132">
   <defs>
-    <style>
-      .cls-1 {
-        fill: #119dff;
-      }
-
-      .cls-2 {
-        fill: #25fefd;
-      }
-
-      .cls-3 {
-        fill: #fff;
-      }
-    </style>
+    <style>.cls-1 {fill: #119dff;} .cls-2 {fill: #25fefd;} .cls-3 {fill: #fff;}</style>
   </defs>
   <title>plotly-logomark</title>
   <g id="symbol">

From f5cc0e9cd36f4683b69aed5ae00f6ff8135ed5c6 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Thu, 4 Oct 2018 17:06:50 -0400
Subject: [PATCH 20/24] =?UTF-8?q?=F0=9F=94=92=20down=20modebar=20styling?=
 =?UTF-8?q?=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 test/jasmine/tests/modebar_test.js | 111 ++++++++++++++++++++++++++---
 1 file changed, 102 insertions(+), 9 deletions(-)

diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js
index fb66a1dc60f..8c2267bb3cf 100644
--- a/test/jasmine/tests/modebar_test.js
+++ b/test/jasmine/tests/modebar_test.js
@@ -9,6 +9,7 @@ var Registry = require('@src/registry');
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
 var selectButton = require('../assets/modebar_button');
+var failTest = require('../assets/fail_test');
 
 
 describe('ModeBar', function() {
@@ -293,20 +294,12 @@ describe('ModeBar', function() {
 
     describe('modeBar.destroy', function() {
         it('removes the mode bar entirely', function() {
-            var modeBarParent = modeBar.element.parentNode,
-                gd = getMockGraphInfo(),
-                styleSelector = 'style[id*="modebar-' + gd._fullLayout._uid + '"]';
-
-
-            var style = document.querySelector(styleSelector);
-            expect(style).toBeTruthy();
+            var modeBarParent = modeBar.element.parentNode;
 
             modeBar.destroy();
 
             expect(modeBarParent.querySelector('.modebar')).toBeNull();
 
-            style = document.querySelector(styleSelector);
-            expect(style).toBeNull();
         });
     });
 
@@ -1245,4 +1238,104 @@ describe('ModeBar', function() {
             });
         });
     });
+
+    describe('modebar styling', function() {
+        var gd,
+            colors = ['rgba(128, 128, 128, 0.7)', 'rgba(255, 0, 128, 0.2)'],
+            targetBtn = 'pan2d', button, style;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+
+        afterEach(function() {
+            Plotly.purge(gd);
+            destroyGraphDiv();
+        });
+
+        function checkButtonColor(button, color) {
+            var paths = button.node.querySelector('path');
+            var style = window.getComputedStyle(paths);
+            expect(style.fill).toBe(color);
+        }
+
+        it('create an associated style element and destroy it on purge', function(done) {
+            var styleSelector, style;
+            Plotly.plot(gd, [], {})
+            .then(function() {
+                styleSelector = 'style[id*="modebar-' + gd._fullLayout._uid + '"]';
+
+                style = document.querySelector(styleSelector);
+                expect(style).toBeTruthy();
+            })
+            .then(function() {
+                Plotly.purge(gd);
+                style = document.querySelector(styleSelector);
+                expect(style).toBeNull();
+            })
+            .then(done);
+        });
+
+        it('changes icon colors', function(done) {
+            Plotly.plot(gd, [], {modebar: { color: colors[0]}})
+            .then(function() {
+                button = selectButton(gd._fullLayout._modeBar, targetBtn);
+                checkButtonColor(button, colors[0]);
+            })
+            .then(function() {Plotly.relayout(gd, 'modebar.color', colors[1]);})
+            .then(function() {
+                checkButtonColor(button, colors[1]);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('changes active icon colors', function(done) {
+            Plotly.plot(gd, [], {modebar: { activecolor: colors[0]}})
+            .then(function() {
+                button = selectButton(gd._fullLayout._modeBar, targetBtn);
+                button.click();
+                checkButtonColor(button, colors[0]);
+            })
+            .then(function() {Plotly.relayout(gd, 'modebar.activecolor', colors[1]);})
+            .then(function() {
+                checkButtonColor(button, colors[1]);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('changes background color', function(done) {
+            Plotly.plot(gd, [], {modebar: { bgcolor: colors[0]}})
+            .then(function() {
+                style = window.getComputedStyle(gd._fullLayout._modeBar.element);
+                expect(style.backgroundColor).toBe(colors[0]);
+            })
+            .then(function() {Plotly.relayout(gd, 'modebar.bgcolor', colors[1]);})
+            .then(function() {
+                style = window.getComputedStyle(gd._fullLayout._modeBar.element);
+                expect(style.backgroundColor).toBe(colors[1]);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+
+        it('changes orientation', function(done) {
+            var modeBarEl, size;
+
+            Plotly.plot(gd, [], {modebar: { orientation: 'v' }})
+            .then(function() {
+                modeBarEl = gd._fullLayout._modeBar.element;
+                size = modeBarEl.getBoundingClientRect();
+                expect(size.width < size.height).toBeTruthy();
+            })
+            .then(function() {Plotly.relayout(gd, 'modebar.orientation', 'h');})
+            .catch(failTest)
+            .then(function() {
+                size = modeBarEl.getBoundingClientRect();
+                expect(size.width > size.height).toBeTruthy();
+            })
+            .then(done);
+        });
+    });
 });

From 452f9bc6ffe78b51f2b393182d3cbffafd16a13e Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Fri, 5 Oct 2018 12:02:45 -0400
Subject: [PATCH 21/24] by default modebar colors contrasts with paper_bgcolor

---
 src/plots/layout_attributes.js | 3 ---
 src/plots/plots.js             | 6 +++---
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/plots/layout_attributes.js b/src/plots/layout_attributes.js
index bbb48187b45..103a0b234f7 100644
--- a/src/plots/layout_attributes.js
+++ b/src/plots/layout_attributes.js
@@ -237,21 +237,18 @@ module.exports = {
         bgcolor: {
             valType: 'color',
             role: 'style',
-            dflt: 'rgba(255, 255, 255, 0.7)',
             editType: 'modebar',
             description: 'Sets the background color of the modebar.'
         },
         color: {
             valType: 'color',
             role: 'style',
-            dflt: 'rgba(0, 31, 95, 0.3)',
             editType: 'modebar',
             description: 'Sets the color of the icons in the modebar.'
         },
         activecolor: {
             valType: 'color',
             role: 'style',
-            dflt: 'rgba(0, 22, 72, 0.5)',
             editType: 'modebar',
             description: 'Sets the color of the active or hovered on icons in the modebar.'
         },
diff --git a/src/plots/plots.js b/src/plots/plots.js
index 3b52c87512a..a891210877d 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1335,9 +1335,9 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
     coerce('datarevision');
 
     coerce('modebar.orientation');
-    coerce('modebar.bgcolor');
-    coerce('modebar.color');
-    coerce('modebar.activecolor');
+    coerce('modebar.bgcolor', Color.addOpacity(layoutOut.paper_bgcolor, 0.5));
+    coerce('modebar.color', Color.contrast(layoutOut.modebar.bgcolor, 30, 30));
+    coerce('modebar.activecolor', Color.contrast(layoutOut.modebar.bgcolor));
 
     Registry.getComponentMethod(
         'calendars',

From 266d63be79eea6015e428d888ea0205a7e7f3b66 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Fri, 5 Oct 2018 12:13:54 -0400
Subject: [PATCH 22/24] fix default modebar colors

---
 src/plots/plots.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plots/plots.js b/src/plots/plots.js
index a891210877d..e7ffd2dd643 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1336,8 +1336,8 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 
     coerce('modebar.orientation');
     coerce('modebar.bgcolor', Color.addOpacity(layoutOut.paper_bgcolor, 0.5));
-    coerce('modebar.color', Color.contrast(layoutOut.modebar.bgcolor, 30, 30));
-    coerce('modebar.activecolor', Color.contrast(layoutOut.modebar.bgcolor));
+    coerce('modebar.color', Color.contrast(layoutOut.paper_bgcolor, 30, 30));
+    coerce('modebar.activecolor', Color.contrast(layoutOut.paper_bgcolor));
 
     Registry.getComponentMethod(
         'calendars',

From ff3f9f65471e850f5f0dfa85575e9d13bc1ced35 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Fri, 5 Oct 2018 14:20:39 -0400
Subject: [PATCH 23/24] improve default modebar colors

---
 src/plots/plots.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plots/plots.js b/src/plots/plots.js
index e7ffd2dd643..84718b06090 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1336,8 +1336,8 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 
     coerce('modebar.orientation');
     coerce('modebar.bgcolor', Color.addOpacity(layoutOut.paper_bgcolor, 0.5));
-    coerce('modebar.color', Color.contrast(layoutOut.paper_bgcolor, 30, 30));
-    coerce('modebar.activecolor', Color.contrast(layoutOut.paper_bgcolor));
+    coerce('modebar.color', Color.contrast(Color.rgb(layoutOut.modebar.bgcolor), 30, 30));
+    coerce('modebar.activecolor', Color.contrast(Color.rgb(layoutOut.modebar.bgcolor)));
 
     Registry.getComponentMethod(
         'calendars',

From db9edd18589922987d443d562adc2b5f7f72d8f6 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Fri, 5 Oct 2018 15:33:25 -0400
Subject: [PATCH 24/24] improve default modebar color

---
 src/plots/plots.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/plots/plots.js b/src/plots/plots.js
index 84718b06090..648b340094b 100644
--- a/src/plots/plots.js
+++ b/src/plots/plots.js
@@ -1336,8 +1336,9 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
 
     coerce('modebar.orientation');
     coerce('modebar.bgcolor', Color.addOpacity(layoutOut.paper_bgcolor, 0.5));
-    coerce('modebar.color', Color.contrast(Color.rgb(layoutOut.modebar.bgcolor), 30, 30));
-    coerce('modebar.activecolor', Color.contrast(Color.rgb(layoutOut.modebar.bgcolor)));
+    var modebarDefaultColor = Color.contrast(Color.rgb(layoutOut.modebar.bgcolor));
+    coerce('modebar.color', Color.addOpacity(modebarDefaultColor, 0.3));
+    coerce('modebar.activecolor', Color.addOpacity(modebarDefaultColor, 0.7));
 
     Registry.getComponentMethod(
         'calendars',