From 7e3b0ae400a59361df25b5bc09259a70e8974675 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 11:23:25 -0400
Subject: [PATCH 01/12] refactor plotly icon svg

---
 src/fonts/ploticon.js | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 7c368c69d42..3ff596b9a8b 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -165,6 +165,30 @@ module.exports = {
     },
     'newplotlylogo': {
         'name': 'newplotlylogo',
-        'svg': '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'><defs><style>.cls-1 {fill: #3f4f75;} .cls-2 {fill: #80cfbe;} .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>'
+        'svg': [
+            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'>',
+            ' <defs>',
+            '  <style>',
+            '   .cls-1 {fill: #3f4f75;}',
+            '   .cls-2 {fill: #80cfbe;}',
+            '   .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>'
+        ].join('')
     }
 };

From f9051e6574bc809b97e4615538bca1f85eadfa28 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 11:28:45 -0400
Subject: [PATCH 02/12] replace styles of new logo

---
 src/fonts/ploticon.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 3ff596b9a8b..3d6a3605596 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -167,16 +167,26 @@ module.exports = {
         'name': 'newplotlylogo',
         'svg': [
             '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'>',
-            ' <defs>',
-            '  <style>',
-            '   .cls-1 {fill: #3f4f75;}',
-            '   .cls-2 {fill: #80cfbe;}',
-            '   .cls-3 {fill: #fff;}',
-            '  </style>',
-            ' </defs>',
+            '<defs>',
+            ' <style>',
+            '  .cls-1{fill:#8c99cd;}',
+            '  .cls-2{fill:url(#linear-gradient);}',
+            '  .cls-3{fill:#777;}',
+            ' </style>',
+            ' <linearGradient id=\'linear-gradient\' x1=\'20.32\' y1=\'42.71\' x2=\'115.98\' y2=\'42.71\' gradientTransform=\'translate(-1.21 -2.82)\' gradientUnits=\'userSpaceOnUse\'>',
+            '  <stop offset=\'0\' stop-color=\'#ff2c6d\'/>',
+            '  <stop offset=\'0.4\' stop-color=\'#cd74a6\'/>',
+            '  <stop offset=\'1\' stop-color=\'#7fe4ff\'/>',
+            ' </linearGradient>',
+            '</defs>',
             ' <title>plotly-logomark</title>',
             ' <g id=\'symbol\'>',
-            '  <rect class=\'cls-1\' width=\'132\' height=\'132\' rx=\'6\' ry=\'6\'/>',
+            '  <circle class=\'cls-1\' cx=\'78\' cy=\'54\' r=\'6\'/>',
+            '  <circle class=\'cls-1\' cx=\'102\' cy=\'30\' r=\'6\'/>',
+            '  <circle class=\'cls-1\' cx=\'78\' cy=\'30\' r=\'6\'/>',
+            '  <circle class=\'cls-1\' 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\'/>',
             '  <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\'/>',

From f569bc611c5ff3db707196ea62619c4ce697bcad Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 11:37:04 -0400
Subject: [PATCH 03/12] adjust logo scale now that there is no bg

---
 src/fonts/ploticon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 3d6a3605596..e06654da6cb 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -166,7 +166,7 @@ module.exports = {
     'newplotlylogo': {
         'name': 'newplotlylogo',
         'svg': [
-            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'>',
+            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'21 21 90 90\'>',
             '<defs>',
             ' <style>',
             '  .cls-1{fill:#8c99cd;}',

From 3076565598bc1830cb95cdb437302091e821a641 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 11:57:21 -0400
Subject: [PATCH 04/12] add stroke to ensure visible logo on 777 bg

---
 src/fonts/ploticon.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index e06654da6cb..137d45f1475 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -171,7 +171,7 @@ module.exports = {
             ' <style>',
             '  .cls-1{fill:#8c99cd;}',
             '  .cls-2{fill:url(#linear-gradient);}',
-            '  .cls-3{fill:#777;}',
+            '  .cls-3{fill:#777; stroke:#FFF; strokewidth:2;}',
             ' </style>',
             ' <linearGradient id=\'linear-gradient\' x1=\'20.32\' y1=\'42.71\' x2=\'115.98\' y2=\'42.71\' gradientTransform=\'translate(-1.21 -2.82)\' gradientUnits=\'userSpaceOnUse\'>',
             '  <stop offset=\'0\' stop-color=\'#ff2c6d\'/>',

From 8170412738ce07d05aecb25c9bd882320cb30fe0 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 12:10:24 -0400
Subject: [PATCH 05/12] remove unused class and background circles

---
 src/fonts/ploticon.js | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 137d45f1475..b7f77c011c5 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -169,7 +169,6 @@ module.exports = {
             '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'21 21 90 90\'>',
             '<defs>',
             ' <style>',
-            '  .cls-1{fill:#8c99cd;}',
             '  .cls-2{fill:url(#linear-gradient);}',
             '  .cls-3{fill:#777; stroke:#FFF; strokewidth:2;}',
             ' </style>',
@@ -181,12 +180,6 @@ module.exports = {
             '</defs>',
             ' <title>plotly-logomark</title>',
             ' <g id=\'symbol\'>',
-            '  <circle class=\'cls-1\' cx=\'78\' cy=\'54\' r=\'6\'/>',
-            '  <circle class=\'cls-1\' cx=\'102\' cy=\'30\' r=\'6\'/>',
-            '  <circle class=\'cls-1\' cx=\'78\' cy=\'30\' r=\'6\'/>',
-            '  <circle class=\'cls-1\' 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\'/>',
             '  <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\'/>',

From a82b97c31c3f05e8795e7bde28d5ab58d532e298 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 12:12:53 -0400
Subject: [PATCH 06/12] order items in logo

---
 src/fonts/ploticon.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index b7f77c011c5..7a390ce1766 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -169,8 +169,8 @@ module.exports = {
             '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'21 21 90 90\'>',
             '<defs>',
             ' <style>',
+            '  .cls-1{fill:#777; stroke:#FFF; strokewidth:2;}',
             '  .cls-2{fill:url(#linear-gradient);}',
-            '  .cls-3{fill:#777; stroke:#FFF; strokewidth:2;}',
             ' </style>',
             ' <linearGradient id=\'linear-gradient\' x1=\'20.32\' y1=\'42.71\' x2=\'115.98\' y2=\'42.71\' gradientTransform=\'translate(-1.21 -2.82)\' gradientUnits=\'userSpaceOnUse\'>',
             '  <stop offset=\'0\' stop-color=\'#ff2c6d\'/>',
@@ -180,16 +180,16 @@ module.exports = {
             '</defs>',
             ' <title>plotly-logomark</title>',
             ' <g id=\'symbol\'>',
-            '  <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=\'78\' cy=\'54\' 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\'/>',
+            '  <path class=\'cls-1\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
+            '  <path class=\'cls-1\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
+            '  <path class=\'cls-1\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
+            '  <path class=\'cls-1\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
             ' </g>',
             '</svg>'
         ].join('')

From 72d74bf8978fa9192848dfb2f0ab73d7869daadc Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 12:27:01 -0400
Subject: [PATCH 07/12] simplify logo without gradient style

---
 src/fonts/ploticon.js | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 7a390ce1766..5f703acd38c 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -169,27 +169,25 @@ module.exports = {
             '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'21 21 90 90\'>',
             '<defs>',
             ' <style>',
-            '  .cls-1{fill:#777; stroke:#FFF; strokewidth:2;}',
-            '  .cls-2{fill:url(#linear-gradient);}',
+            '  .cls-0{fill:#777; stroke:#FFF; strokewidth:2;}',
+            '  .cls-1{fill:#F26;}',
+            '  .cls-2{fill:#D69;}',
+            '  .cls-3{fill:#BAC;}',
+            '  .cls-4{fill:#9EF;}',
             ' </style>',
-            ' <linearGradient id=\'linear-gradient\' x1=\'20.32\' y1=\'42.71\' x2=\'115.98\' y2=\'42.71\' gradientTransform=\'translate(-1.21 -2.82)\' gradientUnits=\'userSpaceOnUse\'>',
-            '  <stop offset=\'0\' stop-color=\'#ff2c6d\'/>',
-            '  <stop offset=\'0.4\' stop-color=\'#cd74a6\'/>',
-            '  <stop offset=\'1\' stop-color=\'#7fe4ff\'/>',
-            ' </linearGradient>',
             '</defs>',
             ' <title>plotly-logomark</title>',
             ' <g id=\'symbol\'>',
-            '  <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=\'78\' cy=\'54\' r=\'6\'/>',
+            '  <circle class=\'cls-4\' cx=\'102\' cy=\'30\' r=\'6\'/>',
+            '  <circle class=\'cls-3\' cx=\'78\' cy=\'30\' r=\'6\'/>',
+            '  <circle class=\'cls-3\' cx=\'78\' cy=\'54\' 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-1\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
-            '  <path class=\'cls-1\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
-            '  <path class=\'cls-1\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
-            '  <path class=\'cls-1\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
+            '  <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\'/>',
             ' </g>',
             '</svg>'
         ].join('')

From 5963038ee5ce494b7c79a6c618ad0fc877c59ebd Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Wed, 15 Jun 2022 15:11:50 -0400
Subject: [PATCH 08/12] log for PR 6232

---
 draftlogs/6232_change.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 draftlogs/6232_change.md

diff --git a/draftlogs/6232_change.md b/draftlogs/6232_change.md
new file mode 100644
index 00000000000..0c8446d6502
--- /dev/null
+++ b/draftlogs/6232_change.md
@@ -0,0 +1 @@
+ - Display Plotly's new logo in the modebar [[#6232](https://github.com/plotly/plotly.js/pull/6232)

From da5cc5fec09b88fc7fc9ebae43263549132111ec Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Thu, 16 Jun 2022 09:53:36 -0400
Subject: [PATCH 09/12] use contrast color with new logo

---
 src/components/modebar/modebar.js | 21 +++++++++++++++++++--
 src/fonts/ploticon.js             | 10 +++++-----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index 35eec9fc6a6..f412d2f91c1 100644
--- a/src/components/modebar/modebar.js
+++ b/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) {
diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 5f703acd38c..114eba4c841 100644
--- a/src/fonts/ploticon.js
+++ b/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('')

From 20616dd28281107ecacd40754cbd91ef8c4a8492 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Tue, 5 Jul 2022 19:20:44 -0400
Subject: [PATCH 10/12] revert changes to modebar.js for dynamic background

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

diff --git a/src/components/modebar/modebar.js b/src/components/modebar/modebar.js
index f412d2f91c1..35eec9fc6a6 100644
--- a/src/components/modebar/modebar.js
+++ b/src/components/modebar/modebar.js
@@ -4,7 +4,6 @@ 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;
 
@@ -63,12 +62,6 @@ 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);
@@ -82,7 +75,7 @@ proto.update = function(graphInfo, buttons) {
         this.updateButtons(buttons);
 
         if(context.watermark || context.displaylogo) {
-            var logoGroup = this.getLogo(graphInfo);
+            var logoGroup = this.getLogo();
             if(context.watermark) {
                 logoGroup.className = logoGroup.className + ' watermark';
             }
@@ -299,7 +292,7 @@ function jsVersion(str) {
 /**
  * @return {HTMLDivElement} The logo image wrapped in a group
  */
-proto.getLogo = function(graphInfo) {
+proto.getLogo = function() {
     var group = this.createGroup();
     var a = document.createElement('a');
 
@@ -310,15 +303,6 @@ proto.getLogo = function(graphInfo) {
 
     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;
 };
@@ -334,7 +318,6 @@ 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) {

From cdb34fffe3a634dc3250797ce24d4b6206e6582a Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <arch.mojtaba.samimi@gmail.com>
Date: Tue, 5 Jul 2022 19:48:11 -0400
Subject: [PATCH 11/12] use logo with black background

---
 src/fonts/ploticon.js | 34 ++++++++++++++++++----------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/fonts/ploticon.js b/src/fonts/ploticon.js
index 114eba4c841..90d44457266 100644
--- a/src/fonts/ploticon.js
+++ b/src/fonts/ploticon.js
@@ -166,28 +166,30 @@ module.exports = {
     'newplotlylogo': {
         'name': 'newplotlylogo',
         'svg': [
-            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'21 21 90 90\'>',
+            '<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 132 132\'>',
             '<defs>',
             ' <style>',
-            '  .cls-bg-contrast{}',
-            '  .cls-1{fill:#F26;}',
-            '  .cls-2{fill:#D69;}',
-            '  .cls-3{fill:#BAC;}',
-            '  .cls-4{fill:#9EF;}',
+            '  .cls-0{fill:#000;}',
+            '  .cls-1{fill:#FFF;}',
+            '  .cls-2{fill:#F26;}',
+            '  .cls-3{fill:#D69;}',
+            '  .cls-4{fill:#BAC;}',
+            '  .cls-5{fill:#9EF;}',
             ' </style>',
             '</defs>',
             ' <title>plotly-logomark</title>',
             ' <g id=\'symbol\'>',
-            '  <circle class=\'cls-4\' cx=\'102\' cy=\'30\' r=\'6\'/>',
-            '  <circle class=\'cls-3\' cx=\'78\' cy=\'30\' r=\'6\'/>',
-            '  <circle class=\'cls-3\' cx=\'78\' cy=\'54\' r=\'6\'/>',
-            '  <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-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\'/>',
+            '  <rect class=\'cls-0\' x=\'0\' y=\'0\' width=\'132\' height=\'132\' rx=\'18\' ry=\'18\'/>',
+            '  <circle class=\'cls-5\' cx=\'102\' cy=\'30\' r=\'6\'/>',
+            '  <circle class=\'cls-4\' cx=\'78\' cy=\'30\' r=\'6\'/>',
+            '  <circle class=\'cls-4\' cx=\'78\' cy=\'54\' r=\'6\'/>',
+            '  <circle class=\'cls-3\' 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-1\' d=\'M30,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,30,72Z\'/>',
+            '  <path class=\'cls-1\' d=\'M78,72a6,6,0,0,0-6,6v24a6,6,0,0,0,12,0V78A6,6,0,0,0,78,72Z\'/>',
+            '  <path class=\'cls-1\' d=\'M54,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,54,48Z\'/>',
+            '  <path class=\'cls-1\' d=\'M102,48a6,6,0,0,0-6,6v48a6,6,0,0,0,12,0V54A6,6,0,0,0,102,48Z\'/>',
             ' </g>',
             '</svg>'
         ].join('')

From 032637ff1837654c8213e9cb72de1672a9072139 Mon Sep 17 00:00:00 2001
From: Mojtaba Samimi <33888540+archmoj@users.noreply.github.com>
Date: Wed, 6 Jul 2022 16:57:19 -0400
Subject: [PATCH 12/12] Update draftlogs/6232_change.md

Co-authored-by: Alex Johnson <alex@plot.ly>
---
 draftlogs/6232_change.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/draftlogs/6232_change.md b/draftlogs/6232_change.md
index 0c8446d6502..17a96c7cedb 100644
--- a/draftlogs/6232_change.md
+++ b/draftlogs/6232_change.md
@@ -1 +1 @@
- - Display Plotly's new logo in the modebar [[#6232](https://github.com/plotly/plotly.js/pull/6232)
+ - Display Plotly's new logo in the modebar [[#6232](https://github.com/plotly/plotly.js/pull/6232)]