fix(#544): color icon always default color to avoid white on white

Signed-off-by: peterpeterparker <[email protected]>

Author: peterpeterparker

webcomponents/inline-editor/CHANGELOG.md

@@ -1,12 +1,18 @@
+# 1.3.1 (2020-05-15)
+
+### Fix
+
+- color icon always default color to avoid white on white
+
 # 1.3.0 (2020-05-15)
 
-### Feat
+### Features
 
 - update color component
 
 # 1.2.1 (2020-05-11)
 
-### Feat
+### Features
 
 - update Stencil for Gatsby build
 

webcomponents/inline-editor/src/components/components/action-image/action-image.scss

@@ -73,8 +73,8 @@ div {
     width: 20px;
     height: 20px;
 
-    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M136.5 77.7l37 67L32 285.7 216.4 464l152.4-148.6 54.4-11.4L166.4 48l-29.9 29.7zm184 208H114.9l102.8-102.3 102.8 102.3zM423.3 304s-56.7 61.5-56.7 92.1c0 30.7 25.4 55.5 56.7 55.5 31.3 0 56.7-24.9 56.7-55.5S423.3 304 423.3 304z'/%3E%3C/svg%3E");
-    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M136.5 77.7l37 67L32 285.7 216.4 464l152.4-148.6 54.4-11.4L166.4 48l-29.9 29.7zm184 208H114.9l102.8-102.3 102.8 102.3zM423.3 304s-56.7 61.5-56.7 92.1c0 30.7 25.4 55.5 56.7 55.5 31.3 0 56.7-24.9 56.7-55.5S423.3 304 423.3 304z'/%3E%3C/svg%3E");
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'%3E%3Ctitle%3Eionicons-v5-m%3C/title%3E%3Cpath d='M416,480c-35.29,0-64-29.11-64-64.88,0-33.29,28.67-65.4,44.08-82.64,1.87-2.1,3.49-3.91,4.68-5.31a19.94,19.94,0,0,1,30.55,0c1.13,1.31,2.63,3,4.36,4.93,15.5,17.3,44.33,49.51,44.33,83.05C480,450.89,451.29,480,416,480Z'/%3E%3Cpath d='M398.23,276.64,166.89,47.22a52.1,52.1,0,0,0-73.6,0l-4.51,4.51A53.2,53.2,0,0,0,72.89,89.06,51.66,51.66,0,0,0,88.14,126l41.51,41.5L45,252a44.52,44.52,0,0,0-13,32,42.81,42.81,0,0,0,13.5,30.84l131.24,126a44,44,0,0,0,61.08-.18L361.93,320.38a15.6,15.6,0,0,1,8.23-4.29,69.21,69.21,0,0,1,11.93-.86h.3a22.53,22.53,0,0,0,15.84-38.59ZM152.29,144.85l-41.53-41.52a20,20,0,0,1,0-28.34l5.16-5.15a20.07,20.07,0,0,1,28.39,0L186,111.21Z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'%3E%3Ctitle%3Eionicons-v5-m%3C/title%3E%3Cpath d='M416,480c-35.29,0-64-29.11-64-64.88,0-33.29,28.67-65.4,44.08-82.64,1.87-2.1,3.49-3.91,4.68-5.31a19.94,19.94,0,0,1,30.55,0c1.13,1.31,2.63,3,4.36,4.93,15.5,17.3,44.33,49.51,44.33,83.05C480,450.89,451.29,480,416,480Z'/%3E%3Cpath d='M398.23,276.64,166.89,47.22a52.1,52.1,0,0,0-73.6,0l-4.51,4.51A53.2,53.2,0,0,0,72.89,89.06,51.66,51.66,0,0,0,88.14,126l41.51,41.5L45,252a44.52,44.52,0,0,0-13,32,42.81,42.81,0,0,0,13.5,30.84l131.24,126a44,44,0,0,0,61.08-.18L361.93,320.38a15.6,15.6,0,0,1,8.23-4.29,69.21,69.21,0,0,1,11.93-.86h.3a22.53,22.53,0,0,0,15.84-38.59ZM152.29,144.85l-41.53-41.52a20,20,0,0,1,0-28.34l5.16-5.15a20.07,20.07,0,0,1,28.39,0L186,111.21Z'/%3E%3C/svg%3E");
   }
 }
 

webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx

@@ -823,8 +823,6 @@ export class DeckdeckgoInlineEditor {
   }
 
   private renderSelectionActions() {
-    const styleColor = this.color ? {'--deckgo-inline-editor-button-color': this.color} : {};
-
     return [
       <deckgo-ie-style-actions
         mobile={this.mobile}
@@ -838,7 +836,7 @@ export class DeckdeckgoInlineEditor {
       this.renderFontSizeAction(),
 
       <deckgo-ie-action-button mobile={this.mobile} onAction={() => this.openColorPicker()}>
-        <deckgo-ie-action-image cssClass={'pick-color'} style={styleColor}></deckgo-ie-action-image>
+        <deckgo-ie-action-image cssClass={'pick-color'}></deckgo-ie-action-image>
       </deckgo-ie-action-button>,
 
       this.renderSeparator(),