From 9791a7f30635c35cc885f64fc151e10f711994ec Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 14 May 2020 13:53:54 +0200
Subject: [PATCH 01/15] feat: add color white and remove purple (breaking
 change)

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../components/color/deckdeckgo-color.scss    | 10 ++-
 .../src/components/color/deckdeckgo-color.tsx | 11 ++-
 webcomponents/color/src/index.html            | 30 ++++----
 .../color/src/utils/deckdeckgo-palette.ts     | 70 +++++++++++--------
 4 files changed, 69 insertions(+), 52 deletions(-)
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.scss b/webcomponents/color/src/components/color/deckdeckgo-color.scss
index 5f34e4929..668224472 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.scss
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.scss
@@ -22,22 +22,22 @@ div.color-container {
     padding: 0;
 
     outline: var(--deckgo-button-outline, none);
-    border: var(--deckgo-button-border, none);
   }
 
   button {
     cursor: pointer;
 
+    border: 1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));
     border-radius: var(--deckgo-button-border-radius, 50%);
 
     background: var(--deckdeckgo-palette-color-hex);
 
     &.selected {
-      box-shadow: 0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb), 0.4);
+      box-shadow: 0 0 8px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4);
     }
 
     &:not(.selected):hover {
-      box-shadow: 0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb), 0.4);
+      box-shadow: 0 0 8px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4);
     }
   }
 
@@ -65,6 +65,10 @@ div.color-container {
       outline: var(--deckgo-button-more-outline, none);
       border: var(--deckgo-button-more-border, none);
 
+      &.selected {
+        border: 1px solid var(--deckdeckgo-palette-color-hex, var(--deckgo-button-more-border));
+      }
+
       background: var(--deckgo-button-more-background, transparent);
     }
 
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.tsx b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
index 4d0762a31..04ee06555 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.tsx
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
@@ -7,7 +7,7 @@ import {DeckdeckgoPalette, DeckdeckgoPaletteColor, DEFAULT_PALETTE} from '../../
 @Component({
   tag: 'deckgo-color',
   styleUrl: 'deckdeckgo-color.scss',
-  shadow: true
+  shadow: true,
 })
 export class DeckdeckgoColor {
   @Element() el: HTMLElement;
@@ -151,7 +151,7 @@ export class DeckdeckgoColor {
 
     const color: DeckdeckgoPaletteColor = {
       hex: selectedColor,
-      rgb: rgb
+      rgb: rgb,
     };
 
     this.applyColorHexChange(selectedColor, rgb);
@@ -228,9 +228,14 @@ export class DeckdeckgoColor {
       return this.palette.map((element: DeckdeckgoPalette) => {
         const style = {
           '--deckdeckgo-palette-color-hex': `${element.color.hex}`,
-          '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`
+          '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`,
         };
 
+        if (element.display) {
+          style['--deckdeckgo-palette-border-color'] = element.display.borderColor;
+          style['--deckdeckgo-palette-box-shadow-color'] = element.display.boxShadowColor;
+        }
+
         return (
           <button
             aria-label={element.alt}
diff --git a/webcomponents/color/src/index.html b/webcomponents/color/src/index.html
index 25a510b18..8889d48f3 100644
--- a/webcomponents/color/src/index.html
+++ b/webcomponents/color/src/index.html
@@ -1,20 +1,18 @@
 <!DOCTYPE html>
 <html dir="ltr" lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
-  <title>DeckDeckGo - Color</title>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <title>DeckDeckGo - Color</title>
 
-  <script type="module" src="/build/deckdeckgo-color.esm.js"></script>
-  <script nomodule src="/build/deckdeckgo-color.js"></script>
-
-</head>
-<body>
-
-  <div style="width: 160px">
-    <deckgo-color color-hex="#FFD084">
-      <span slot="more">...</span>
-    </deckgo-color>
-  </div>
-</body>
+    <script type="module" src="/build/deckdeckgo-color.esm.js"></script>
+    <script nomodule src="/build/deckdeckgo-color.js"></script>
+  </head>
+  <body>
+    <div style="width: 160px;">
+      <deckgo-color color-hex="#FFD084" style="--deckgo-button-more-border: 1px solid green;">
+        <span slot="more">...</span>
+      </deckgo-color>
+    </div>
+  </body>
 </html>
diff --git a/webcomponents/color/src/utils/deckdeckgo-palette.ts b/webcomponents/color/src/utils/deckdeckgo-palette.ts
index 54ab1722f..92525c160 100644
--- a/webcomponents/color/src/utils/deckdeckgo-palette.ts
+++ b/webcomponents/color/src/utils/deckdeckgo-palette.ts
@@ -3,87 +3,97 @@ export interface DeckdeckgoPaletteColor {
   rgb?: string;
 }
 
+export interface DeckdeckgoPaletteDisplayColor {
+  borderColor: string;
+  boxShadowColor: string;
+}
+
 export interface DeckdeckgoPalette {
   color: DeckdeckgoPaletteColor;
   alt?: string;
+  display?: DeckdeckgoPaletteDisplayColor;
 }
 
 export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [
   {
     color: {
-      hex: '#FF6900',
-      rgb: '255,105,0'
+      hex: '#8ED1FC',
+      rgb: '142,209,252',
     },
-    alt: 'Orange'
+    alt: 'Light blue',
   },
   {
     color: {
-      hex: '#FCB900',
-      rgb: '252,185,0'
+      hex: '#0693E3',
+      rgb: '6,147,227',
     },
-    alt: 'Yellow'
+    alt: 'Blue',
   },
   {
     color: {
       hex: '#7BDCB5',
-      rgb: '123,220,181'
+      rgb: '123,220,181',
     },
-    alt: 'Light green'
+    alt: 'Light green',
   },
   {
     color: {
       hex: '#00D084',
-      rgb: '0,208,132'
+      rgb: '0,208,132',
     },
-    alt: 'Green'
+    alt: 'Green',
   },
   {
     color: {
-      hex: '#8ED1FC',
-      rgb: '142,209,252'
+      hex: '#FCB900',
+      rgb: '252,185,0',
     },
-    alt: 'Light blue'
+    alt: 'Yellow',
   },
   {
     color: {
-      hex: '#0693E3',
-      rgb: '6,147,227'
+      hex: '#FF6900',
+      rgb: '255,105,0',
     },
-    alt: 'Blue'
+    alt: 'Orange',
   },
   {
     color: {
-      hex: '#ABB8C3',
-      rgb: '171,184,195'
+      hex: '#F78DA7',
+      rgb: '247,141,167',
     },
-    alt: 'Grey'
+    alt: 'Pink',
   },
   {
     color: {
       hex: '#EB144C',
-      rgb: '235,20,76'
+      rgb: '235,20,76',
     },
-    alt: 'Red'
+    alt: 'Red',
   },
   {
     color: {
-      hex: '#F78DA7',
-      rgb: '247,141,167'
+      hex: '#ffffff',
+      rgb: '255,255,255',
+    },
+    alt: 'White',
+    display: {
+      borderColor: '#ddd',
+      boxShadowColor: '221,221,221',
     },
-    alt: 'Pink'
   },
   {
     color: {
-      hex: '#9900EF',
-      rgb: '153,0,239'
+      hex: '#ABB8C3',
+      rgb: '171,184,195',
     },
-    alt: 'Violet'
+    alt: 'Grey',
   },
   {
     color: {
       hex: '#000000',
-      rgb: '0,0,0'
+      rgb: '0,0,0',
     },
-    alt: 'Black'
-  }
+    alt: 'Black',
+  },
 ];

From dadfcf629f122bbab1edfd2405ab616f22bd1205 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 14 May 2020 14:56:21 +0200
Subject: [PATCH 02/15] feat(#544): display the color's name description

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 webcomponents/color/CHANGELOG.md              | 12 +++++-
 webcomponents/color/src/components.d.ts       |  2 +
 .../components/color/deckdeckgo-color.scss    | 11 +++++
 .../src/components/color/deckdeckgo-color.tsx | 41 ++++++++++++++++++-
 .../color/src/components/color/readme.md      | 10 ++---
 webcomponents/color/src/index.html            |  3 +-
 6 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/webcomponents/color/CHANGELOG.md b/webcomponents/color/CHANGELOG.md
index 25a079ffb..9e4ee9b49 100644
--- a/webcomponents/color/CHANGELOG.md
+++ b/webcomponents/color/CHANGELOG.md
@@ -1,6 +1,16 @@
+# 2.0.0 (2020-05-14)
+
+### Breaking
+
+- add color "white" and remove "purple"
+
+### Features
+
+- display the color's name description (can be optionally be set as hidden)
+
 # 1.1.1 (2020-05-11)
 
-### Feat
+### Features
 
 - update Stencil for Gatsby build
 
diff --git a/webcomponents/color/src/components.d.ts b/webcomponents/color/src/components.d.ts
index 93fdbdaaa..e58c2f3d3 100644
--- a/webcomponents/color/src/components.d.ts
+++ b/webcomponents/color/src/components.d.ts
@@ -10,6 +10,7 @@ export namespace Components {
     interface DeckgoColor {
         "colorHex": string;
         "colorRgb": string;
+        "label": boolean;
         "more": boolean;
         "moreAlt": string;
         "palette": DeckdeckgoPalette[];
@@ -30,6 +31,7 @@ declare namespace LocalJSX {
     interface DeckgoColor {
         "colorHex"?: string;
         "colorRgb"?: string;
+        "label"?: boolean;
         "more"?: boolean;
         "moreAlt"?: string;
         "onColorChange"?: (event: CustomEvent<DeckdeckgoPaletteColor>) => void;
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.scss b/webcomponents/color/src/components/color/deckdeckgo-color.scss
index 668224472..d79fe4b1d 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.scss
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.scss
@@ -86,3 +86,14 @@ div.color-container {
     }
   }
 }
+
+p.color-label {
+  margin: var(--deckgo-color-label-margin, 0);
+  padding: var(--deckgo-color-label-padding, 12px 8px);
+  font-size: var(--deckgo-color-label-font-size, 12px);
+  text-align: var(--deckgo-color-label-text-align, center);
+
+  small {
+    font-weight: var(--deckgo-color-label-color-font-weight, 300);
+  }
+}
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.tsx b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
index 04ee06555..9cd47e33a 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.tsx
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
@@ -20,6 +20,8 @@ export class DeckdeckgoColor {
   @Prop() colorHex: string;
   @Prop() colorRgb: string;
 
+  @Prop() label: boolean = true;
+
   @State()
   private selectedColorHex: string;
 
@@ -32,6 +34,9 @@ export class DeckdeckgoColor {
   @State()
   private selectedCustomColorRgb: string;
 
+  @State()
+  private selectedColorLabel: string;
+
   @Event()
   colorChange: EventEmitter<DeckdeckgoPaletteColor>;
 
@@ -40,6 +45,7 @@ export class DeckdeckgoColor {
   constructor() {
     this.debounceInitSelectedColorPalette = debounce(async () => {
       this.selectedColorPalette = await this.initSelectedColorPalette();
+      await this.initSelectedColorPaletteAlt();
 
       this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
     }, 150);
@@ -50,6 +56,7 @@ export class DeckdeckgoColor {
     this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
 
     this.selectedColorPalette = await this.initSelectedColorPalette();
+    await this.initSelectedColorPaletteAlt();
 
     if (!this.selectedColorPalette) {
       this.selectedCustomColorRgb = this.selectedColorRgb;
@@ -91,7 +98,7 @@ export class DeckdeckgoColor {
   }
 
   private pickColor(paletteColor: DeckdeckgoPalette): Promise<void> {
-    return new Promise<void>((resolve) => {
+    return new Promise<void>(async (resolve) => {
       if (!this.palette || this.palette.length <= 0) {
         resolve();
         return;
@@ -104,6 +111,8 @@ export class DeckdeckgoColor {
 
       this.selectedColorPalette = true;
 
+      await this.initSelectedColorPaletteAlt();
+
       this.selectedCustomColorRgb = undefined;
 
       resolve();
@@ -212,6 +221,19 @@ export class DeckdeckgoColor {
     });
   }
 
+  private async initSelectedColorPaletteAlt(): Promise<void> {
+    if (!this.palette || this.palette.length <= 0) {
+      this.selectedColorLabel = undefined;
+      return undefined;
+    }
+
+    const palette: DeckdeckgoPalette = this.palette.find((element: DeckdeckgoPalette) => {
+      return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
+    });
+
+    this.selectedColorLabel = palette ? palette.alt : undefined;
+  }
+
   render() {
     return (
       <Host>
@@ -219,6 +241,7 @@ export class DeckdeckgoColor {
           {this.renderPalette()}
           {this.renderMore()}
         </div>
+        {this.renderLabel()}
       </Host>
     );
   }
@@ -277,4 +300,20 @@ export class DeckdeckgoColor {
       return undefined;
     }
   }
+
+  private renderLabel() {
+    if (!this.label) {
+      return undefined;
+    }
+
+    const color: string = `${
+      this.selectedColorHex ? this.selectedColorHex : `rgb(${this.selectedCustomColorRgb ? this.selectedCustomColorRgb : this.selectedColorRgb})`
+    }`;
+
+    return (
+      <p class="color-label">
+        <span>{this.selectedColorLabel ? this.selectedColorLabel : <slot name="custom-label">Custom</slot>}</span> <small>{color}</small>
+      </p>
+    );
+  }
 }
diff --git a/webcomponents/color/src/components/color/readme.md b/webcomponents/color/src/components/color/readme.md
index b452e25f8..1414d3b40 100644
--- a/webcomponents/color/src/components/color/readme.md
+++ b/webcomponents/color/src/components/color/readme.md
@@ -1,28 +1,24 @@
 # my-component
 
-
-
 <!-- Auto Generated Below -->
 
-
 ## Properties
 
 | Property   | Attribute   | Description | Type                  | Default           |
 | ---------- | ----------- | ----------- | --------------------- | ----------------- |
 | `colorHex` | `color-hex` |             | `string`              | `undefined`       |
 | `colorRgb` | `color-rgb` |             | `string`              | `undefined`       |
+| `label`    | `label`     |             | `boolean`             | `true`            |
 | `more`     | `more`      |             | `boolean`             | `true`            |
 | `moreAlt`  | `more-alt`  |             | `string`              | `'More'`          |
 | `palette`  | --          |             | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` |
 
-
 ## Events
 
 | Event         | Description | Type                                  |
 | ------------- | ----------- | ------------------------------------- |
 | `colorChange` |             | `CustomEvent<DeckdeckgoPaletteColor>` |
 
+---
 
-----------------------------------------------
-
-*Built with [StencilJS](https://stenciljs.com/)*
+_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/color/src/index.html b/webcomponents/color/src/index.html
index 8889d48f3..0bbd4db63 100644
--- a/webcomponents/color/src/index.html
+++ b/webcomponents/color/src/index.html
@@ -9,9 +9,10 @@
     <script nomodule src="/build/deckdeckgo-color.js"></script>
   </head>
   <body>
-    <div style="width: 160px;">
+    <div style="width: 240px;">
       <deckgo-color color-hex="#FFD084" style="--deckgo-button-more-border: 1px solid green;">
         <span slot="more">...</span>
+        <span slot="custom-label">Spécial</span>
       </deckgo-color>
     </div>
   </body>

From f04f9bf082553432f8213f3cb958142ff1bed0ed Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Thu, 14 May 2020 19:01:33 +0200
Subject: [PATCH 03/15] feat(#544): dont' display color label if not set

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../color/src/components/color/deckdeckgo-color.scss          | 1 +
 webcomponents/color/src/components/color/deckdeckgo-color.tsx | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.scss b/webcomponents/color/src/components/color/deckdeckgo-color.scss
index d79fe4b1d..f935f030b 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.scss
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.scss
@@ -91,6 +91,7 @@ p.color-label {
   margin: var(--deckgo-color-label-margin, 0);
   padding: var(--deckgo-color-label-padding, 12px 8px);
   font-size: var(--deckgo-color-label-font-size, 12px);
+  min-height: var(--deckgo-color-label-min-height, 15px);
   text-align: var(--deckgo-color-label-text-align, center);
 
   small {
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.tsx b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
index 9cd47e33a..84e524321 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.tsx
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
@@ -306,6 +306,10 @@ export class DeckdeckgoColor {
       return undefined;
     }
 
+    if (!this.selectedColorHex && !this.selectedCustomColorRgb && !this.selectedColorRgb) {
+      return <p class="color-label"></p>;
+    }
+
     const color: string = `${
       this.selectedColorHex ? this.selectedColorHex : `rgb(${this.selectedCustomColorRgb ? this.selectedCustomColorRgb : this.selectedColorRgb})`
     }`;

From 64f45f8289c0151a9914a7e11f31c4af7d65bf81 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 07:04:00 +0200
Subject: [PATCH 04/15] refactor(#544): move label to separate component

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 webcomponents/color/package.json              |  2 +-
 webcomponents/color/src/components.d.ts       | 21 ++++++++++++
 .../components/color/deckdeckgo-color.scss    | 12 -------
 .../src/components/color/deckdeckgo-color.tsx | 18 ++++------
 .../color/src/components/color/readme.md      | 24 -------------
 .../label/deckdeckgo-color-label.scss         | 11 ++++++
 .../label/deckdeckgo-color-label.tsx          | 34 +++++++++++++++++++
 webcomponents/color/stencil.config.ts         | 21 +++++-------
 8 files changed, 83 insertions(+), 60 deletions(-)
 delete mode 100644 webcomponents/color/src/components/color/readme.md
 create mode 100644 webcomponents/color/src/components/label/deckdeckgo-color-label.scss
 create mode 100644 webcomponents/color/src/components/label/deckdeckgo-color-label.tsx

diff --git a/webcomponents/color/package.json b/webcomponents/color/package.json
index ac9fc1e90..e3a360c77 100644
--- a/webcomponents/color/package.json
+++ b/webcomponents/color/package.json
@@ -16,7 +16,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "stencil build --docs",
+    "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
diff --git a/webcomponents/color/src/components.d.ts b/webcomponents/color/src/components.d.ts
index e58c2f3d3..0574bb3a7 100644
--- a/webcomponents/color/src/components.d.ts
+++ b/webcomponents/color/src/components.d.ts
@@ -15,6 +15,12 @@ export namespace Components {
         "moreAlt": string;
         "palette": DeckdeckgoPalette[];
     }
+    interface DeckgoColorLabel {
+        "colorHex": string;
+        "colorLabel": string;
+        "colorRgb": string;
+        "customColorRgb": string;
+    }
 }
 declare global {
     interface HTMLDeckgoColorElement extends Components.DeckgoColor, HTMLStencilElement {
@@ -23,8 +29,15 @@ declare global {
         prototype: HTMLDeckgoColorElement;
         new (): HTMLDeckgoColorElement;
     };
+    interface HTMLDeckgoColorLabelElement extends Components.DeckgoColorLabel, HTMLStencilElement {
+    }
+    var HTMLDeckgoColorLabelElement: {
+        prototype: HTMLDeckgoColorLabelElement;
+        new (): HTMLDeckgoColorLabelElement;
+    };
     interface HTMLElementTagNameMap {
         "deckgo-color": HTMLDeckgoColorElement;
+        "deckgo-color-label": HTMLDeckgoColorLabelElement;
     }
 }
 declare namespace LocalJSX {
@@ -37,8 +50,15 @@ declare namespace LocalJSX {
         "onColorChange"?: (event: CustomEvent<DeckdeckgoPaletteColor>) => void;
         "palette"?: DeckdeckgoPalette[];
     }
+    interface DeckgoColorLabel {
+        "colorHex"?: string;
+        "colorLabel"?: string;
+        "colorRgb"?: string;
+        "customColorRgb"?: string;
+    }
     interface IntrinsicElements {
         "deckgo-color": DeckgoColor;
+        "deckgo-color-label": DeckgoColorLabel;
     }
 }
 export { LocalJSX as JSX };
@@ -46,6 +66,7 @@ declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "deckgo-color": LocalJSX.DeckgoColor & JSXBase.HTMLAttributes<HTMLDeckgoColorElement>;
+            "deckgo-color-label": LocalJSX.DeckgoColorLabel & JSXBase.HTMLAttributes<HTMLDeckgoColorLabelElement>;
         }
     }
 }
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.scss b/webcomponents/color/src/components/color/deckdeckgo-color.scss
index f935f030b..668224472 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.scss
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.scss
@@ -86,15 +86,3 @@ div.color-container {
     }
   }
 }
-
-p.color-label {
-  margin: var(--deckgo-color-label-margin, 0);
-  padding: var(--deckgo-color-label-padding, 12px 8px);
-  font-size: var(--deckgo-color-label-font-size, 12px);
-  min-height: var(--deckgo-color-label-min-height, 15px);
-  text-align: var(--deckgo-color-label-text-align, center);
-
-  small {
-    font-weight: var(--deckgo-color-label-color-font-weight, 300);
-  }
-}
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.tsx b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
index 84e524321..08b5c693e 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.tsx
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
@@ -306,18 +306,14 @@ export class DeckdeckgoColor {
       return undefined;
     }
 
-    if (!this.selectedColorHex && !this.selectedCustomColorRgb && !this.selectedColorRgb) {
-      return <p class="color-label"></p>;
-    }
-
-    const color: string = `${
-      this.selectedColorHex ? this.selectedColorHex : `rgb(${this.selectedCustomColorRgb ? this.selectedCustomColorRgb : this.selectedColorRgb})`
-    }`;
-
     return (
-      <p class="color-label">
-        <span>{this.selectedColorLabel ? this.selectedColorLabel : <slot name="custom-label">Custom</slot>}</span> <small>{color}</small>
-      </p>
+      <deckgo-color-label
+        colorHex={this.selectedColorHex}
+        colorRgb={this.selectedColorRgb}
+        colorLabel={this.selectedColorLabel}
+        customColorRgb={this.selectedCustomColorRgb}>
+        <slot name="custom-label">Custom</slot>
+      </deckgo-color-label>
     );
   }
 }
diff --git a/webcomponents/color/src/components/color/readme.md b/webcomponents/color/src/components/color/readme.md
deleted file mode 100644
index 1414d3b40..000000000
--- a/webcomponents/color/src/components/color/readme.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# my-component
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property   | Attribute   | Description | Type                  | Default           |
-| ---------- | ----------- | ----------- | --------------------- | ----------------- |
-| `colorHex` | `color-hex` |             | `string`              | `undefined`       |
-| `colorRgb` | `color-rgb` |             | `string`              | `undefined`       |
-| `label`    | `label`     |             | `boolean`             | `true`            |
-| `more`     | `more`      |             | `boolean`             | `true`            |
-| `moreAlt`  | `more-alt`  |             | `string`              | `'More'`          |
-| `palette`  | --          |             | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` |
-
-## Events
-
-| Event         | Description | Type                                  |
-| ------------- | ----------- | ------------------------------------- |
-| `colorChange` |             | `CustomEvent<DeckdeckgoPaletteColor>` |
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/color/src/components/label/deckdeckgo-color-label.scss b/webcomponents/color/src/components/label/deckdeckgo-color-label.scss
new file mode 100644
index 000000000..99e4c5144
--- /dev/null
+++ b/webcomponents/color/src/components/label/deckdeckgo-color-label.scss
@@ -0,0 +1,11 @@
+p.color-label {
+  margin: var(--deckgo-color-label-margin, 0);
+  padding: var(--deckgo-color-label-padding, 12px 8px);
+  font-size: var(--deckgo-color-label-font-size, 12px);
+  min-height: var(--deckgo-color-label-min-height, 15px);
+  text-align: var(--deckgo-color-label-text-align, center);
+
+  small {
+    font-weight: var(--deckgo-color-label-color-font-weight, 300);
+  }
+}
diff --git a/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx b/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx
new file mode 100644
index 000000000..4d7f17961
--- /dev/null
+++ b/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx
@@ -0,0 +1,34 @@
+import {Component, h, Prop} from '@stencil/core';
+
+@Component({
+  tag: 'deckgo-color-label',
+  styleUrl: 'deckdeckgo-color-label.scss',
+  shadow: true,
+})
+export class DeckdeckgoColorLabel {
+  @Prop()
+  colorHex: string;
+
+  @Prop()
+  colorRgb: string;
+
+  @Prop()
+  colorLabel: string;
+
+  @Prop()
+  customColorRgb: string;
+
+  render() {
+    if (!this.colorHex && !this.customColorRgb && !this.colorRgb) {
+      return <p class="color-label"></p>;
+    }
+
+    const color: string = `${this.colorHex ? this.colorHex : `rgb(${this.customColorRgb ? this.customColorRgb : this.colorRgb})`}`;
+
+    return (
+      <p class="color-label">
+        <span>{this.colorLabel ? this.colorLabel : <slot></slot>}</span> <small>{color}</small>
+      </p>
+    );
+  }
+}
diff --git a/webcomponents/color/stencil.config.ts b/webcomponents/color/stencil.config.ts
index 3ee31fd3c..fc60827d7 100644
--- a/webcomponents/color/stencil.config.ts
+++ b/webcomponents/color/stencil.config.ts
@@ -1,27 +1,24 @@
-import { Config } from '@stencil/core';
+import {Config} from '@stencil/core';
 
-import { sass } from '@stencil/sass';
-import { postcss } from '@stencil/postcss';
+import {sass} from '@stencil/sass';
+import {postcss} from '@stencil/postcss';
 import autoprefixer from 'autoprefixer';
 
 export const config: Config = {
   namespace: 'deckdeckgo-color',
   outputTargets: [
     {
-      type: 'dist'
-    },
-    {
-      type: 'docs-readme'
+      type: 'dist',
     },
     {
       type: 'www',
-      serviceWorker: null // disable service workers
-    }
+      serviceWorker: null, // disable service workers
+    },
   ],
   plugins: [
     sass(),
     postcss({
-      plugins: [autoprefixer()]
-    })
-  ]
+      plugins: [autoprefixer()],
+    }),
+  ],
 };

From be27138cad21b15784bc062deeb8ab44cc72f59e Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 07:52:24 +0200
Subject: [PATCH 05/15] feat(#544): display color label in hex

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../label/deckdeckgo-color-label.tsx          | 48 +++++++++++++++++--
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx b/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx
index 4d7f17961..d3bc59098 100644
--- a/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx
+++ b/webcomponents/color/src/components/label/deckdeckgo-color-label.tsx
@@ -1,4 +1,4 @@
-import {Component, h, Prop} from '@stencil/core';
+import {Component, h, Prop, State, Watch} from '@stencil/core';
 
 @Component({
   tag: 'deckgo-color-label',
@@ -18,16 +18,56 @@ export class DeckdeckgoColorLabel {
   @Prop()
   customColorRgb: string;
 
+  @State()
+  private color: string;
+
+  async componentWillLoad() {
+    this.color = await this.initColorHex();
+  }
+
+  @Watch('colorHex')
+  @Watch('colorRgb')
+  @Watch('customColorRgb')
+  async watchColors() {
+    this.color = await this.initColorHex();
+  }
+
+  async initColorHex(): Promise<string> {
+    if (this.colorHex) {
+      return this.colorHex;
+    }
+
+    if (this.customColorRgb) {
+      return this.rgbToHex(this.customColorRgb);
+    }
+
+    return this.rgbToHex(this.colorRgb);
+  }
+
+  // https://stackoverflow.com/a/42429333/5404186
+  async rgbToHex(rgb: string | undefined): Promise<string | undefined> {
+    if (!rgb) {
+      return undefined;
+    }
+
+    const toHex = (rgb): string => `#${rgb.map((v) => v.toString(16).padStart(2, '0')).join('')}`;
+    const extractRgb = (rgb): number[] =>
+      rgb
+        .match(/(\d+),\s*(\d+),\s*(\d+)/)
+        .splice(1, 3)
+        .map((v) => Number(v));
+
+    return toHex(extractRgb(rgb));
+  }
+
   render() {
     if (!this.colorHex && !this.customColorRgb && !this.colorRgb) {
       return <p class="color-label"></p>;
     }
 
-    const color: string = `${this.colorHex ? this.colorHex : `rgb(${this.customColorRgb ? this.customColorRgb : this.colorRgb})`}`;
-
     return (
       <p class="color-label">
-        <span>{this.colorLabel ? this.colorLabel : <slot></slot>}</span> <small>{color}</small>
+        <span>{this.colorLabel ? this.colorLabel : <slot></slot>}</span> <small>{this.color}</small>
       </p>
     );
   }

From 3e87ef0707229f6113462c7d64709760299bc29a Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 07:59:57 +0200
Subject: [PATCH 06/15] release: color v2.0.0

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 CHANGELOG.md                          | 2 +-
 webcomponents/color/package-lock.json | 2 +-
 webcomponents/color/package.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 264371286..e4f715d85 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,7 +14,7 @@
 ### Web Components: Update
 
 - charts: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/charts/CHANGELOG.md))
-- color: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
+- color: v2.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/color/CHANGELOG.md))
 - core: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
 - demo: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/demo/CHANGELOG.md))
 - drag-resize-rotate: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md))
diff --git a/webcomponents/color/package-lock.json b/webcomponents/color/package-lock.json
index 19f137a11..f95d90b5a 100644
--- a/webcomponents/color/package-lock.json
+++ b/webcomponents/color/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/color",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/color/package.json b/webcomponents/color/package.json
index e3a360c77..77df725ff 100644
--- a/webcomponents/color/package.json
+++ b/webcomponents/color/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/color",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "A color picker developed with Web Components",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

From 48ff39792a7809a1550e5d56d030b706593b6d35 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 08:03:19 +0200
Subject: [PATCH 07/15] feat: update color component

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 webcomponents/inline-editor/package-lock.json             | 8 ++++----
 webcomponents/inline-editor/package.json                  | 2 +-
 .../components/actions/color-actions/color-actions.tsx    | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/webcomponents/inline-editor/package-lock.json b/webcomponents/inline-editor/package-lock.json
index 92155d675..4c5006daf 100644
--- a/webcomponents/inline-editor/package-lock.json
+++ b/webcomponents/inline-editor/package-lock.json
@@ -40,11 +40,11 @@
       }
     },
     "@deckdeckgo/color": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-1.1.0.tgz",
-      "integrity": "sha512-xMgA+Vyn5wnDBVWEW58FBjhkY95XmTK3A24IKCkUUgGZNO8BoRnzPLD+/2IPpIXtLEzs+oawOi5wjvev8d6bFw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-2.0.0.tgz",
+      "integrity": "sha512-Jl9HN2Iqubag/yEkcYGYBfeDGYmQ7g37+nP/ei/AUnD1e1mdcU92hPcY/kFaVMCWyOuuVIMqFFaQSuyxDMN1Sw==",
       "requires": {
-        "@deckdeckgo/utils": "^1.0.0"
+        "@deckdeckgo/utils": "^1.1.0"
       }
     },
     "@deckdeckgo/utils": {
diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json
index 149393846..6b9178d05 100644
--- a/webcomponents/inline-editor/package.json
+++ b/webcomponents/inline-editor/package.json
@@ -22,7 +22,7 @@
     "test.watch": "stencil test --spec --e2e --watchAll"
   },
   "dependencies": {
-    "@deckdeckgo/color": "^1.1.0",
+    "@deckdeckgo/color": "^2.0.0",
     "@deckdeckgo/utils": "^1.1.0"
   },
   "devDependencies": {
diff --git a/webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx b/webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx
index 19ac14bb7..d2ca77272 100644
--- a/webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx
+++ b/webcomponents/inline-editor/src/components/actions/color-actions/color-actions.tsx
@@ -50,7 +50,7 @@ export class ColorActions {
 
     return (
       <Host class={cssClass}>
-        <deckgo-color onColorChange={($event: CustomEvent) => this.selectColor($event)} more={false} palette={this.palette}>
+        <deckgo-color label={false} onColorChange={($event: CustomEvent) => this.selectColor($event)} more={false} palette={this.palette}>
           <div slot="more"></div>
         </deckgo-color>
       </Host>

From 360a8d9c13a840013722912024a8315546f9489f Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 08:04:00 +0200
Subject: [PATCH 08/15] docs: update release date

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 webcomponents/color/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webcomponents/color/CHANGELOG.md b/webcomponents/color/CHANGELOG.md
index 9e4ee9b49..354b585f5 100644
--- a/webcomponents/color/CHANGELOG.md
+++ b/webcomponents/color/CHANGELOG.md
@@ -1,4 +1,4 @@
-# 2.0.0 (2020-05-14)
+# 2.0.0 (2020-05-15)
 
 ### Breaking
 

From f13dcdf21b2f74bd2874e8b42b312c6f6d1300a7 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 08:04:32 +0200
Subject: [PATCH 09/15] release: inline v1.3.0

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 CHANGELOG.md                                  | 2 +-
 webcomponents/inline-editor/CHANGELOG.md      | 6 ++++++
 webcomponents/inline-editor/package-lock.json | 2 +-
 webcomponents/inline-editor/package.json      | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e4f715d85..a0cbddc95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,7 @@
 - demo: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/demo/CHANGELOG.md))
 - drag-resize-rotate: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md))
 - highlight-code: v1.0.5 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
-- inline-editor: v1.2.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
+- inline-editor: v1.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
 - lazy-img: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/lazy-img/CHANGELOG.md))
 - qrcode: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/qrcode/CHANGELOG.md))
 - remote: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/remote/CHANGELOG.md))
diff --git a/webcomponents/inline-editor/CHANGELOG.md b/webcomponents/inline-editor/CHANGELOG.md
index 5039c3194..69e84a469 100644
--- a/webcomponents/inline-editor/CHANGELOG.md
+++ b/webcomponents/inline-editor/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.3.0 (2020-05-15)
+
+### Feat
+
+- update color component
+
 # 1.2.1 (2020-05-11)
 
 ### Feat
diff --git a/webcomponents/inline-editor/package-lock.json b/webcomponents/inline-editor/package-lock.json
index 4c5006daf..ea83282a7 100644
--- a/webcomponents/inline-editor/package-lock.json
+++ b/webcomponents/inline-editor/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/inline-editor",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json
index 6b9178d05..66a4a6ca2 100644
--- a/webcomponents/inline-editor/package.json
+++ b/webcomponents/inline-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/inline-editor",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A WYSIWYG HTML Inline Editor Web Component",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

From 9b6cbbf16d02d5ccab007693a0d5e4c2d5a1cf3f Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 08:05:44 +0200
Subject: [PATCH 10/15] docs: documented in docs app

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 webcomponents/inline-editor/package.json      |  2 +-
 .../actions/align-actions/readme.md           | 44 ----------
 .../actions/color-actions/readme.md           | 41 ---------
 .../actions/font-size-actions/readme.md       | 40 ---------
 .../actions/image-actions/readme.md           | 48 ----------
 .../components/actions/link-actions/readme.md | 37 --------
 .../components/actions/list-actions/readme.md | 44 ----------
 .../actions/style-actions/readme.md           | 43 ---------
 .../components/action-button/readme.md        | 45 ----------
 .../components/action-image/readme.md         | 33 -------
 .../components/components/separator/readme.md | 29 -------
 .../components/components/triangle/readme.md  | 27 ------
 .../src/components/inline-editor/readme.md    | 87 -------------------
 13 files changed, 1 insertion(+), 519 deletions(-)
 delete mode 100644 webcomponents/inline-editor/src/components/actions/align-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/actions/color-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/actions/font-size-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/actions/image-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/actions/link-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/actions/list-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/actions/style-actions/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/components/action-button/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/components/action-image/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/components/separator/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/components/triangle/readme.md
 delete mode 100644 webcomponents/inline-editor/src/components/inline-editor/readme.md

diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json
index 66a4a6ca2..472d1f3d7 100644
--- a/webcomponents/inline-editor/package.json
+++ b/webcomponents/inline-editor/package.json
@@ -16,7 +16,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "stencil build --docs",
+    "build": "stencil build",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll"
diff --git a/webcomponents/inline-editor/src/components/actions/align-actions/readme.md b/webcomponents/inline-editor/src/components/actions/align-actions/readme.md
deleted file mode 100644
index b77868a0d..000000000
--- a/webcomponents/inline-editor/src/components/actions/align-actions/readme.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# deckgo-ie-align-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property       | Attribute       | Description | Type                                                             | Default     |
-| -------------- | --------------- | ----------- | ---------------------------------------------------------------- | ----------- |
-| `anchorEvent`  | --              |             | `MouseEvent \| TouchEvent`                                       | `undefined` |
-| `containers`   | `containers`    |             | `string`                                                         | `undefined` |
-| `contentAlign` | `content-align` |             | `ContentAlign.CENTER \| ContentAlign.LEFT \| ContentAlign.RIGHT` | `undefined` |
-| `mobile`       | `mobile`        |             | `boolean`                                                        | `undefined` |
-| `sticky`       | `sticky`        |             | `boolean`                                                        | `undefined` |
-
-## Events
-
-| Event           | Description | Type               |
-| --------------- | ----------- | ------------------ |
-| `alignModified` |             | `CustomEvent<any>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Depends on
-
-- [deckgo-ie-action-button](../../components/action-button)
-- [deckgo-ie-action-image](../../components/action-image)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-align-actions --> deckgo-ie-action-button
-  deckgo-ie-align-actions --> deckgo-ie-action-image
-  deckgo-inline-editor --> deckgo-ie-align-actions
-  style deckgo-ie-align-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/actions/color-actions/readme.md b/webcomponents/inline-editor/src/components/actions/color-actions/readme.md
deleted file mode 100644
index 416cc7080..000000000
--- a/webcomponents/inline-editor/src/components/actions/color-actions/readme.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# deckgo-ie-color-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property    | Attribute | Description | Type                  | Default     |
-| ----------- | --------- | ----------- | --------------------- | ----------- |
-| `color`     | `color`   |             | `string`              | `undefined` |
-| `mobile`    | `mobile`  |             | `boolean`             | `undefined` |
-| `palette`   | --        |             | `DeckdeckgoPalette[]` | `undefined` |
-| `selection` | --        |             | `Selection`           | `undefined` |
-
-## Events
-
-| Event           | Description | Type                |
-| --------------- | ----------- | ------------------- |
-| `colorModified` |             | `CustomEvent<void>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Depends on
-
-- deckgo-color
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-color-actions --> deckgo-color
-  deckgo-inline-editor --> deckgo-ie-color-actions
-  style deckgo-ie-color-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/actions/font-size-actions/readme.md b/webcomponents/inline-editor/src/components/actions/font-size-actions/readme.md
deleted file mode 100644
index 52525586b..000000000
--- a/webcomponents/inline-editor/src/components/actions/font-size-actions/readme.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# deckgo-ie-font-size-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property   | Attribute   | Description | Type                                                                                                                                     | Default     |
-| ---------- | ----------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `fontSize` | `font-size` |             | `FontSize.LARGE \| FontSize.MEDIUM \| FontSize.SMALL \| FontSize.XXX_LARGE \| FontSize.XX_LARGE \| FontSize.X_LARGE \| FontSize.X_SMALL` | `undefined` |
-| `mobile`   | `mobile`    |             | `boolean`                                                                                                                                | `undefined` |
-| `sticky`   | `sticky`    |             | `boolean`                                                                                                                                | `undefined` |
-
-## Events
-
-| Event              | Description | Type                |
-| ------------------ | ----------- | ------------------- |
-| `fontSizeModified` |             | `CustomEvent<void>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Depends on
-
-- [deckgo-ie-action-button](../../components/action-button)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-font-size-actions --> deckgo-ie-action-button
-  deckgo-inline-editor --> deckgo-ie-font-size-actions
-  style deckgo-ie-font-size-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/actions/image-actions/readme.md b/webcomponents/inline-editor/src/components/actions/image-actions/readme.md
deleted file mode 100644
index cf903ab30..000000000
--- a/webcomponents/inline-editor/src/components/actions/image-actions/readme.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# deckgo-ie-image-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property              | Attribute                | Description | Type                        | Default      |
-| --------------------- | ------------------------ | ----------- | --------------------------- | ------------ |
-| `anchorEvent`         | --                       |             | `MouseEvent \| TouchEvent`  | `undefined`  |
-| `containers`          | `containers`             |             | `string`                    | `undefined`  |
-| `imgAnchor`           | `img-anchor`             |             | `string`                    | `undefined`  |
-| `imgDidChange`        | --                       |             | `EventEmitter<HTMLElement>` | `undefined`  |
-| `imgPropertyCssFloat` | `img-property-css-float` |             | `string`                    | `'cssFloat'` |
-| `imgPropertyWidth`    | `img-property-width`     |             | `string`                    | `'width'`    |
-| `mobile`              | `mobile`                 |             | `boolean`                   | `undefined`  |
-
-## Events
-
-| Event         | Description | Type                |
-| ------------- | ----------- | ------------------- |
-| `imgModified` |             | `CustomEvent<void>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Depends on
-
-- [deckgo-ie-action-button](../../components/action-button)
-- [deckgo-ie-action-image](../../components/action-image)
-- [deckgo-ie-separator](../../components/separator)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-image-actions --> deckgo-ie-action-button
-  deckgo-ie-image-actions --> deckgo-ie-action-image
-  deckgo-ie-image-actions --> deckgo-ie-separator
-  deckgo-inline-editor --> deckgo-ie-image-actions
-  style deckgo-ie-image-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/actions/link-actions/readme.md b/webcomponents/inline-editor/src/components/actions/link-actions/readme.md
deleted file mode 100644
index e2152e164..000000000
--- a/webcomponents/inline-editor/src/components/actions/link-actions/readme.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# deckgo-ie-link-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property         | Attribute         | Description | Type                                                                                                                                                                             | Default     |
-| ---------------- | ----------------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `anchorLink`     | --                |             | `AnchorLink`                                                                                                                                                                     | `undefined` |
-| `linkCreated`    | --                |             | `EventEmitter<HTMLElement>`                                                                                                                                                      | `undefined` |
-| `mobile`         | `mobile`          |             | `boolean`                                                                                                                                                                        | `undefined` |
-| `selection`      | --                |             | `Selection`                                                                                                                                                                      | `undefined` |
-| `toolbarActions` | `toolbar-actions` |             | `ToolbarActions.ALIGNMENT \| ToolbarActions.COLOR \| ToolbarActions.FONT_SIZE \| ToolbarActions.IMAGE \| ToolbarActions.LINK \| ToolbarActions.LIST \| ToolbarActions.SELECTION` | `undefined` |
-
-## Events
-
-| Event          | Description | Type                   |
-| -------------- | ----------- | ---------------------- |
-| `linkModified` |             | `CustomEvent<boolean>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-inline-editor --> deckgo-ie-link-actions
-  style deckgo-ie-link-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/actions/list-actions/readme.md b/webcomponents/inline-editor/src/components/actions/list-actions/readme.md
deleted file mode 100644
index 85e5af2ed..000000000
--- a/webcomponents/inline-editor/src/components/actions/list-actions/readme.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# deckgo-ie-list-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property        | Attribute        | Description | Type                                           | Default     |
-| --------------- | ---------------- | ----------- | ---------------------------------------------- | ----------- |
-| `contentList`   | `content-list`   |             | `ContentList.ORDERED \| ContentList.UNORDERED` | `undefined` |
-| `disabledTitle` | `disabled-title` |             | `boolean`                                      | `false`     |
-| `mobile`        | `mobile`         |             | `boolean`                                      | `undefined` |
-| `selection`     | --               |             | `Selection`                                    | `undefined` |
-| `sticky`        | `sticky`         |             | `boolean`                                      | `undefined` |
-
-## Events
-
-| Event          | Description | Type                |
-| -------------- | ----------- | ------------------- |
-| `listModified` |             | `CustomEvent<void>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Depends on
-
-- [deckgo-ie-action-button](../../components/action-button)
-- [deckgo-ie-action-image](../../components/action-image)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-list-actions --> deckgo-ie-action-button
-  deckgo-ie-list-actions --> deckgo-ie-action-image
-  deckgo-inline-editor --> deckgo-ie-list-actions
-  style deckgo-ie-list-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/actions/style-actions/readme.md b/webcomponents/inline-editor/src/components/actions/style-actions/readme.md
deleted file mode 100644
index d6541c351..000000000
--- a/webcomponents/inline-editor/src/components/actions/style-actions/readme.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# deckgo-ie-style-actions
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property        | Attribute        | Description | Type        | Default     |
-| --------------- | ---------------- | ----------- | ----------- | ----------- |
-| `bold`          | `bold`           |             | `boolean`   | `undefined` |
-| `disabledTitle` | `disabled-title` |             | `boolean`   | `false`     |
-| `italic`        | `italic`         |             | `boolean`   | `undefined` |
-| `mobile`        | `mobile`         |             | `boolean`   | `undefined` |
-| `selection`     | --               |             | `Selection` | `undefined` |
-| `underline`     | `underline`      |             | `boolean`   | `undefined` |
-
-## Events
-
-| Event       | Description | Type               |
-| ----------- | ----------- | ------------------ |
-| `initStyle` |             | `CustomEvent<any>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Depends on
-
-- [deckgo-ie-action-button](../../components/action-button)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-style-actions --> deckgo-ie-action-button
-  deckgo-inline-editor --> deckgo-ie-style-actions
-  style deckgo-ie-style-actions fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/components/action-button/readme.md b/webcomponents/inline-editor/src/components/components/action-button/readme.md
deleted file mode 100644
index d0d9411c8..000000000
--- a/webcomponents/inline-editor/src/components/components/action-button/readme.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# deckgo-ie-action-button
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property        | Attribute        | Description | Type      | Default     |
-| --------------- | ---------------- | ----------- | --------- | ----------- |
-| `cssClass`      | `css-class`      |             | `string`  | `undefined` |
-| `disableAction` | `disable-action` |             | `boolean` | `false`     |
-| `mobile`        | `mobile`         |             | `boolean` | `undefined` |
-
-## Events
-
-| Event    | Description | Type                   |
-| -------- | ----------- | ---------------------- |
-| `action` |             | `CustomEvent<UIEvent>` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-ie-align-actions](../../actions/align-actions)
-- [deckgo-ie-font-size-actions](../../actions/font-size-actions)
-- [deckgo-ie-image-actions](../../actions/image-actions)
-- [deckgo-ie-list-actions](../../actions/list-actions)
-- [deckgo-ie-style-actions](../../actions/style-actions)
-- [deckgo-inline-editor](../../inline-editor)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-align-actions --> deckgo-ie-action-button
-  deckgo-ie-font-size-actions --> deckgo-ie-action-button
-  deckgo-ie-image-actions --> deckgo-ie-action-button
-  deckgo-ie-list-actions --> deckgo-ie-action-button
-  deckgo-ie-style-actions --> deckgo-ie-action-button
-  deckgo-inline-editor --> deckgo-ie-action-button
-  style deckgo-ie-action-button fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/components/action-image/readme.md b/webcomponents/inline-editor/src/components/components/action-image/readme.md
deleted file mode 100644
index f2e1862f6..000000000
--- a/webcomponents/inline-editor/src/components/components/action-image/readme.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# deckgo-ie-action-image
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property   | Attribute   | Description | Type     | Default     |
-| ---------- | ----------- | ----------- | -------- | ----------- |
-| `cssClass` | `css-class` |             | `string` | `undefined` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-ie-align-actions](../../actions/align-actions)
-- [deckgo-ie-image-actions](../../actions/image-actions)
-- [deckgo-ie-list-actions](../../actions/list-actions)
-- [deckgo-inline-editor](../../inline-editor)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-align-actions --> deckgo-ie-action-image
-  deckgo-ie-image-actions --> deckgo-ie-action-image
-  deckgo-ie-list-actions --> deckgo-ie-action-image
-  deckgo-inline-editor --> deckgo-ie-action-image
-  style deckgo-ie-action-image fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/components/separator/readme.md b/webcomponents/inline-editor/src/components/components/separator/readme.md
deleted file mode 100644
index 93200c805..000000000
--- a/webcomponents/inline-editor/src/components/components/separator/readme.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# deckgo-ie-separator
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property | Attribute | Description | Type      | Default     |
-| -------- | --------- | ----------- | --------- | ----------- |
-| `mobile` | `mobile`  |             | `boolean` | `undefined` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-ie-image-actions](../../actions/image-actions)
-- [deckgo-inline-editor](../../inline-editor)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-ie-image-actions --> deckgo-ie-separator
-  deckgo-inline-editor --> deckgo-ie-separator
-  style deckgo-ie-separator fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/components/triangle/readme.md b/webcomponents/inline-editor/src/components/components/triangle/readme.md
deleted file mode 100644
index 61829f8a6..000000000
--- a/webcomponents/inline-editor/src/components/components/triangle/readme.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# deckgo-ie-triangle
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property | Attribute | Description | Type      | Default     |
-| -------- | --------- | ----------- | --------- | ----------- |
-| `mobile` | `mobile`  |             | `boolean` | `undefined` |
-
-## Dependencies
-
-### Used by
-
-- [deckgo-inline-editor](../../inline-editor)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-inline-editor --> deckgo-ie-triangle
-  style deckgo-ie-triangle fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_
diff --git a/webcomponents/inline-editor/src/components/inline-editor/readme.md b/webcomponents/inline-editor/src/components/inline-editor/readme.md
deleted file mode 100644
index 211c96a20..000000000
--- a/webcomponents/inline-editor/src/components/inline-editor/readme.md
+++ /dev/null
@@ -1,87 +0,0 @@
-# deckgo-inline-editor
-
-<!-- Auto Generated Below -->
-
-## Properties
-
-| Property              | Attribute                | Description | Type                  | Default                   |
-| --------------------- | ------------------------ | ----------- | --------------------- | ------------------------- |
-| `align`               | `align`                  |             | `boolean`             | `true`                    |
-| `attachTo`            | --                       |             | `HTMLElement`         | `undefined`               |
-| `containers`          | `containers`             |             | `string`              | `'h1,h2,h3,h4,h5,h6,div'` |
-| `customActions`       | `custom-actions`         |             | `string`              | `undefined`               |
-| `fontSize`            | `font-size`              |             | `boolean`             | `true`                    |
-| `imgAnchor`           | `img-anchor`             |             | `string`              | `'img'`                   |
-| `imgEditable`         | `img-editable`           |             | `boolean`             | `false`                   |
-| `imgPropertyCssFloat` | `img-property-css-float` |             | `string`              | `'float'`                 |
-| `imgPropertyWidth`    | `img-property-width`     |             | `string`              | `'width'`                 |
-| `list`                | `list`                   |             | `boolean`             | `true`                    |
-| `mobile`              | `mobile`                 |             | `boolean`             | `false`                   |
-| `palette`             | --                       |             | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE`         |
-| `stickyDesktop`       | `sticky-desktop`         |             | `boolean`             | `false`                   |
-| `stickyMobile`        | `sticky-mobile`          |             | `boolean`             | `false`                   |
-
-## Events
-
-| Event                    | Description | Type                        |
-| ------------------------ | ----------- | --------------------------- |
-| `customAction`           |             | `CustomEvent<InlineAction>` |
-| `imgDidChange`           |             | `CustomEvent<HTMLElement>`  |
-| `linkCreated`            |             | `CustomEvent<HTMLElement>`  |
-| `stickyToolbarActivated` |             | `CustomEvent<boolean>`      |
-
-## Methods
-
-### `reset(clearSelection: boolean, blurActiveElement?: boolean) => Promise<void>`
-
-#### Returns
-
-Type: `Promise<void>`
-
-## Dependencies
-
-### Depends on
-
-- [deckgo-ie-triangle](../components/triangle)
-- [deckgo-ie-link-actions](../actions/link-actions)
-- [deckgo-ie-color-actions](../actions/color-actions)
-- [deckgo-ie-image-actions](../actions/image-actions)
-- [deckgo-ie-align-actions](../actions/align-actions)
-- [deckgo-ie-list-actions](../actions/list-actions)
-- [deckgo-ie-font-size-actions](../actions/font-size-actions)
-- [deckgo-ie-style-actions](../actions/style-actions)
-- [deckgo-ie-action-button](../components/action-button)
-- [deckgo-ie-action-image](../components/action-image)
-- [deckgo-ie-separator](../components/separator)
-
-### Graph
-
-```mermaid
-graph TD;
-  deckgo-inline-editor --> deckgo-ie-triangle
-  deckgo-inline-editor --> deckgo-ie-link-actions
-  deckgo-inline-editor --> deckgo-ie-color-actions
-  deckgo-inline-editor --> deckgo-ie-image-actions
-  deckgo-inline-editor --> deckgo-ie-align-actions
-  deckgo-inline-editor --> deckgo-ie-list-actions
-  deckgo-inline-editor --> deckgo-ie-font-size-actions
-  deckgo-inline-editor --> deckgo-ie-style-actions
-  deckgo-inline-editor --> deckgo-ie-action-button
-  deckgo-inline-editor --> deckgo-ie-action-image
-  deckgo-inline-editor --> deckgo-ie-separator
-  deckgo-ie-color-actions --> deckgo-color
-  deckgo-ie-image-actions --> deckgo-ie-action-button
-  deckgo-ie-image-actions --> deckgo-ie-action-image
-  deckgo-ie-image-actions --> deckgo-ie-separator
-  deckgo-ie-align-actions --> deckgo-ie-action-button
-  deckgo-ie-align-actions --> deckgo-ie-action-image
-  deckgo-ie-list-actions --> deckgo-ie-action-button
-  deckgo-ie-list-actions --> deckgo-ie-action-image
-  deckgo-ie-font-size-actions --> deckgo-ie-action-button
-  deckgo-ie-style-actions --> deckgo-ie-action-button
-  style deckgo-inline-editor fill:#f9f,stroke:#333,stroke-width:4px
-```
-
----
-
-_Built with [StencilJS](https://stenciljs.com/)_

From a92821a92f053cc9f2f4a2dee8a66286ee0a8e31 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 08:54:15 +0200
Subject: [PATCH 11/15] fix(#544): color icon always default color to avoid
 white on white

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 webcomponents/inline-editor/CHANGELOG.md               | 10 ++++++++--
 .../components/action-image/action-image.scss          |  4 ++--
 .../inline-editor/deckdeckgo-inline-editor.tsx         |  4 +---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/webcomponents/inline-editor/CHANGELOG.md b/webcomponents/inline-editor/CHANGELOG.md
index 69e84a469..cf3a2b2a9 100644
--- a/webcomponents/inline-editor/CHANGELOG.md
+++ b/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
 
diff --git a/webcomponents/inline-editor/src/components/components/action-image/action-image.scss b/webcomponents/inline-editor/src/components/components/action-image/action-image.scss
index 1b0417e55..f42e71833 100644
--- a/webcomponents/inline-editor/src/components/components/action-image/action-image.scss
+++ b/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");
   }
 }
 
diff --git a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx b/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx
index bb810f13a..1bb79fea2 100644
--- a/webcomponents/inline-editor/src/components/inline-editor/deckdeckgo-inline-editor.tsx
+++ b/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(),

From e9b686dc8c96ec933f3742b07ff7c63c388735ee Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 08:54:41 +0200
Subject: [PATCH 12/15] release: inline v1.3.1

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 CHANGELOG.md                                  | 2 +-
 webcomponents/inline-editor/package-lock.json | 2 +-
 webcomponents/inline-editor/package.json      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0cbddc95..845e88df7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,7 +19,7 @@
 - demo: v1.0.4 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/demo/CHANGELOG.md))
 - drag-resize-rotate: v1.0.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/drag-resize-rotate/CHANGELOG.md))
 - highlight-code: v1.0.5 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
-- inline-editor: v1.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
+- inline-editor: v1.3.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
 - lazy-img: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/lazy-img/CHANGELOG.md))
 - qrcode: v1.0.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/qrcode/CHANGELOG.md))
 - remote: v1.1.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/remote/CHANGELOG.md))
diff --git a/webcomponents/inline-editor/package-lock.json b/webcomponents/inline-editor/package-lock.json
index ea83282a7..b78b228c0 100644
--- a/webcomponents/inline-editor/package-lock.json
+++ b/webcomponents/inline-editor/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/inline-editor",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/webcomponents/inline-editor/package.json b/webcomponents/inline-editor/package.json
index 472d1f3d7..ab360e0ad 100644
--- a/webcomponents/inline-editor/package.json
+++ b/webcomponents/inline-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/inline-editor",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A WYSIWYG HTML Inline Editor Web Component",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

From e6ffac8fb9ea30c128a33aa3695f9693facb2603 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 12:41:42 +0200
Subject: [PATCH 13/15] feat(#544): display color value

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 studio/package-lock.json                           | 14 +++++++-------
 studio/package.json                                |  4 ++--
 .../app/popovers/editor/app-color/app-color.scss   |  4 ++--
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/studio/package-lock.json b/studio/package-lock.json
index 608613488..c4cf74dae 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -55,9 +55,9 @@
       }
     },
     "@deckdeckgo/color": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-1.1.1.tgz",
-      "integrity": "sha512-NMJ7ElCLcgQB8psEt42H2mguF3shPjnz3mT7zUidBUkrm+WJHSKn3Nn7IK7+qW9tzmkfa3iDMf053B+7CjDpog==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-2.0.0.tgz",
+      "integrity": "sha512-Jl9HN2Iqubag/yEkcYGYBfeDGYmQ7g37+nP/ei/AUnD1e1mdcU92hPcY/kFaVMCWyOuuVIMqFFaQSuyxDMN1Sw==",
       "requires": {
         "@deckdeckgo/utils": "^1.1.0"
       }
@@ -105,11 +105,11 @@
       }
     },
     "@deckdeckgo/inline-editor": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.2.1.tgz",
-      "integrity": "sha512-t4xF/6htg1HG1ShwQ++rtB17aNOjMp4AEzSXCsg1XvkBX8CE3Ts8Ej2aO2uywoIw2jMYaLJ3aUxUMBqWVonasw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.3.1.tgz",
+      "integrity": "sha512-l45A9X19BPK0eXMRJxOAcAhgnN8O7XKi7qyYnyautoeFWR8CLLfRmAvGI5ZFJOYZXX52+SVBvky+B6PBzwP4xw==",
       "requires": {
-        "@deckdeckgo/color": "^1.1.0",
+        "@deckdeckgo/color": "^2.0.0",
         "@deckdeckgo/utils": "^1.1.0"
       }
     },
diff --git a/studio/package.json b/studio/package.json
index 9c87289b9..004e195b9 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -17,13 +17,13 @@
   },
   "dependencies": {
     "@deckdeckgo/charts": "^1.0.2",
-    "@deckdeckgo/color": "^1.1.1",
+    "@deckdeckgo/color": "^2.0.0",
     "@deckdeckgo/core": "^1.0.2",
     "@deckdeckgo/deck-utils": "^2.3.0",
     "@deckdeckgo/demo": "^1.0.4",
     "@deckdeckgo/drag-resize-rotate": "^1.0.2",
     "@deckdeckgo/highlight-code": "^1.0.5",
-    "@deckdeckgo/inline-editor": "^1.2.1",
+    "@deckdeckgo/inline-editor": "^1.3.1",
     "@deckdeckgo/lazy-img": "^1.0.1",
     "@deckdeckgo/math": "^1.0.1",
     "@deckdeckgo/qrcode": "^1.0.1",
diff --git a/studio/src/app/popovers/editor/app-color/app-color.scss b/studio/src/app/popovers/editor/app-color/app-color.scss
index 20c393a88..282dedf1f 100644
--- a/studio/src/app/popovers/editor/app-color/app-color.scss
+++ b/studio/src/app/popovers/editor/app-color/app-color.scss
@@ -3,9 +3,9 @@ app-color {
   @import "../../../../global/theme/editor/editor-popover";
 
   ion-icon.more {
-    font-size: 1.4rem;
+    font-size: 1rem;
     padding-top: 2px;
-    color: var(--ion-color-medium);
+    color: black;
   }
 
   ion-item.item-opacity {

From f484e29493a682fc21261a0ff53699f543331ae5 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 12:53:15 +0200
Subject: [PATCH 14/15] docs(#544): new color component properties

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 CHANGELOG.md                                  |   2 +-
 docs/CHANGELOG.md                             |   6 +
 .../app-components-color.md                   | 175 ++++++++++--------
 docs/package-lock.json                        |  16 +-
 docs/package.json                             |   6 +-
 .../app-components-color.tsx                  |  77 ++++++--
 6 files changed, 175 insertions(+), 107 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 845e88df7..596d0a7c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### Applications
 
-- docs: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
+- docs: v1.3.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
 - remote: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
 
 ### Web Components: New
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index e35858917..d376bb55a 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.3.0 (2020-05-15)
+
+### Features
+
+- new `color` slot, property and styles
+
 # 1.2.0 (2020-05-14)
 
 ### Features
diff --git a/docs/docs/components/app-components-color/app-components-color.md b/docs/docs/components/app-components-color/app-components-color.md
index 26eb1af3e..efd99754c 100644
--- a/docs/docs/components/app-components-color/app-components-color.md
+++ b/docs/docs/components/app-components-color/app-components-color.md
@@ -18,7 +18,7 @@ It is fully configurable in terms of colors, you could define the set of colors
 ## Showcase
 
 <div>
-    <deckgo-color>
+    <deckgo-color style={{width: '240px'}}>
       <span slot="more">...</span>
     </deckgo-color>
 </div>
@@ -77,6 +77,8 @@ The "Color Picker" Web Component could be integrated using the tag `<deckgo-colo
 
 The slot `more` is optional, moreover, the "more" action itself could be turned off.
 
+The slot `custom-label` is optional and can be used to display another label than `Custom` when user selects a custom color.
+
 ### Attributes
 
 This component offers the following options which could be set using attributes:
@@ -88,6 +90,7 @@ This component offers the following options which could be set using attributes:
 | `more`     | `more`      | In case you would not like to offer the "more" options.   | `boolean`             | `true`            |
 | `moreAlt`  | `more-alt`  | An accessibility label for the "more action.              | `string`              | `'More'`          |
 | `palette`  |             | The palette of color (see here under).                    | `DeckdeckgoPalette[]` | `DEFAULT_PALETTE` |
+| `label`    | `label`     | Display a label for the description of the selected color | `boolean`             | `true`            |
 
 #### Palette
 
@@ -113,83 +116,87 @@ The default palette is the following:
 
 ```
 export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [
-  {
-    color: {
-      hex: '#FF6900',
-      rgb: '255,105,0'
+    {
+      color: {
+        hex: '#8ED1FC',
+        rgb: '142,209,252',
+      },
+      alt: 'Light blue',
     },
-    alt: 'Orange'
-  },
-  {
-    color: {
-      hex: '#FCB900',
-      rgb: '252,185,0'
+    {
+      color: {
+        hex: '#0693E3',
+        rgb: '6,147,227',
+      },
+      alt: 'Blue',
     },
-    alt: 'Yellow'
-  },
-  {
-    color: {
-      hex: '#7BDCB5',
-      rgb: '123,220,181'
+    {
+      color: {
+        hex: '#7BDCB5',
+        rgb: '123,220,181',
+      },
+      alt: 'Light green',
     },
-    alt: 'Light green'
-  },
-  {
-    color: {
-      hex: '#00D084',
-      rgb: '0,208,132'
+    {
+      color: {
+        hex: '#00D084',
+        rgb: '0,208,132',
+      },
+      alt: 'Green',
     },
-    alt: 'Green'
-  },
-  {
-    color: {
-      hex: '#8ED1FC',
-      rgb: '142,209,252'
+    {
+      color: {
+        hex: '#FCB900',
+        rgb: '252,185,0',
+      },
+      alt: 'Yellow',
     },
-    alt: 'Light blue'
-  },
-  {
-    color: {
-      hex: '#0693E3',
-      rgb: '6,147,227'
+    {
+      color: {
+        hex: '#FF6900',
+        rgb: '255,105,0',
+      },
+      alt: 'Orange',
     },
-    alt: 'Blue'
-  },
-  {
-    color: {
-      hex: '#ABB8C3',
-      rgb: '171,184,195'
+    {
+      color: {
+        hex: '#F78DA7',
+        rgb: '247,141,167',
+      },
+      alt: 'Pink',
     },
-    alt: 'Grey'
-  },
-  {
-    color: {
-      hex: '#EB144C',
-      rgb: '235,20,76'
+    {
+      color: {
+        hex: '#EB144C',
+        rgb: '235,20,76',
+      },
+      alt: 'Red',
     },
-    alt: 'Red'
-  },
-  {
-    color: {
-      hex: '#F78DA7',
-      rgb: '247,141,167'
+    {
+      color: {
+        hex: '#ffffff',
+        rgb: '255,255,255',
+      },
+      alt: 'White',
+      display: {
+        borderColor: '#ddd',
+        boxShadowColor: '221,221,221',
+      },
     },
-    alt: 'Pink'
-  },
-  {
-    color: {
-      hex: '#9900EF',
-      rgb: '153,0,239'
+    {
+      color: {
+        hex: '#ABB8C3',
+        rgb: '171,184,195',
+      },
+      alt: 'Grey',
     },
-    alt: 'Violet'
-  },
-  {
-    color: {
-      hex: '#000000',
-      rgb: '0,0,0'
+    {
+      color: {
+        hex: '#000000',
+        rgb: '0,0,0',
+      },
+      alt: 'Black',
     },
-    alt: 'Black'
-  }
 ];
 ```
 
@@ -197,20 +204,26 @@ export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [
 
 The following theming options will affect this component if set on its host or parent.
 
-| CSS4 variable                      | Default     | Note                                                          |
-| ---------------------------------- | ----------- | ------------------------------------------------------------- |
-| --deckgo-button-width              | 28px        | The width of a button to select a color and the more button   |
-| --deckgo-button-height             | 28px        | The height of a button to select a color and the more button  |
-| --deckgo-button-margin             | 4px         | The margin of a button to select a color and the more button  |
-| --deckgo-button-outline            | none        | The outline of a button to select a color and the more button |
-| --deckgo-button-border             | none        | The border of a button to select a color and the more button  |
-| --deckgo-button-border-radius      | 50%         | The border radius of a button to select a color               |
-| --deckgo-button-more-border-radius | 50%         | The border radius of the more button                          |
-| --deckgo-button-more-border        | none        | The border of the more button                                 |
-| --deckgo-button-more-outline       | none        | The outline of the more button                                |
-| --deckgo-flex-wrap                 | wrap        | Wrap properties of the buttons' container                     |
-| --deckgo-overflow                  | visible     | Overflow property of the buttons's container                  |
-| --deckgo-button-more-background    | transparent | The background of the more button                             |
+| CSS4 variable                          | Default     | Note                                                          |
+| -------------------------------------- | ----------- | ------------------------------------------------------------- |
+| --deckgo-button-width                  | 28px        | The width of a button to select a color and the more button   |
+| --deckgo-button-height                 | 28px        | The height of a button to select a color and the more button  |
+| --deckgo-button-margin                 | 4px         | The margin of a button to select a color and the more button  |
+| --deckgo-button-outline                | none        | The outline of a button to select a color and the more button |
+| --deckgo-button-border                 | none        | The border of a button to select a color and the more button  |
+| --deckgo-button-border-radius          | 50%         | The border radius of a button to select a color               |
+| --deckgo-button-more-border-radius     | 50%         | The border radius of the more button                          |
+| --deckgo-button-more-border            | none        | The border of the more button                                 |
+| --deckgo-button-more-outline           | none        | The outline of the more button                                |
+| --deckgo-flex-wrap                     | wrap        | Wrap properties of the buttons' container                     |
+| --deckgo-overflow                      | visible     | Overflow property of the buttons's container                  |
+| --deckgo-button-more-background        | transparent | The background of the more button                             |
+| --deckgo-color-label-margin            | 0           | Margin of the color description                               |
+| --deckgo-color-label-padding           | 12px 8px    | Padding of the color description                              |
+| --deckgo-color-label-font-size         | 12px        | Font size of the color description                            |
+| --deckgo-color-label-min-height        | 15px        | Minimal height of the color description                       |
+| --deckgo-color-label-text-align        | center      | Text alignment of the color description                       |
+| --deckgo-color-label-color-font-weight | 300         | Font weight of the hexadecimal value of the color description |
 
 ### Events
 
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 4472be2dc..0d6085fbe 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -55,9 +55,9 @@
       }
     },
     "@deckdeckgo/color": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-1.1.1.tgz",
-      "integrity": "sha512-NMJ7ElCLcgQB8psEt42H2mguF3shPjnz3mT7zUidBUkrm+WJHSKn3Nn7IK7+qW9tzmkfa3iDMf053B+7CjDpog==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-2.0.0.tgz",
+      "integrity": "sha512-Jl9HN2Iqubag/yEkcYGYBfeDGYmQ7g37+nP/ei/AUnD1e1mdcU92hPcY/kFaVMCWyOuuVIMqFFaQSuyxDMN1Sw==",
       "requires": {
         "@deckdeckgo/utils": "^1.1.0"
       }
@@ -112,11 +112,11 @@
       }
     },
     "@deckdeckgo/inline-editor": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.2.1.tgz",
-      "integrity": "sha512-t4xF/6htg1HG1ShwQ++rtB17aNOjMp4AEzSXCsg1XvkBX8CE3Ts8Ej2aO2uywoIw2jMYaLJ3aUxUMBqWVonasw==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.3.1.tgz",
+      "integrity": "sha512-l45A9X19BPK0eXMRJxOAcAhgnN8O7XKi7qyYnyautoeFWR8CLLfRmAvGI5ZFJOYZXX52+SVBvky+B6PBzwP4xw==",
       "requires": {
-        "@deckdeckgo/color": "^1.1.0",
+        "@deckdeckgo/color": "^2.0.0",
         "@deckdeckgo/utils": "^1.1.0"
       }
     },
diff --git a/docs/package.json b/docs/package.json
index 0d6420b90..a2e23f1a7 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-docs",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "The Progressive Web App alternative for simple presentations",
   "license": "MIT",
   "files": [
@@ -15,13 +15,13 @@
   },
   "dependencies": {
     "@deckdeckgo/charts": "^1.0.2",
-    "@deckdeckgo/color": "^1.1.1",
+    "@deckdeckgo/color": "^2.0.0",
     "@deckdeckgo/core": "^1.0.2",
     "@deckdeckgo/deck-utils": "^2.3.0",
     "@deckdeckgo/demo": "^1.0.4",
     "@deckdeckgo/drag-resize-rotate": "^1.0.2",
     "@deckdeckgo/highlight-code": "^1.0.5",
-    "@deckdeckgo/inline-editor": "^1.2.1",
+    "@deckdeckgo/inline-editor": "^1.3.1",
     "@deckdeckgo/lazy-img": "^1.0.1",
     "@deckdeckgo/math": "^1.0.1",
     "@deckdeckgo/qrcode": "^1.0.1",
diff --git a/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx b/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx
index dccb3b459..18cf58710 100644
--- a/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx
+++ b/docs/src/app/pages/docs/components/app-components-color/app-components-color.tsx
@@ -56,7 +56,7 @@ export class AppComponentsColor {
           </ul>
           <h2 id="app-components-color-showcase">Showcase</h2>
           <div>
-            <deckgo-color>
+            <deckgo-color style={{width: '240px'}}>
               <span slot="more">...</span>
             </deckgo-color>
           </div>
@@ -116,6 +116,9 @@ export class AppComponentsColor {
           <p>
             The slot <code>more</code> is optional, moreover, the &quot;more&quot; action itself could be turned off.
           </p>
+          <p>
+            The slot <code>custom-label</code> is optional and can be used to display another label than <code>Custom</code> when user selects a custom color.
+          </p>
           <h3 id="app-components-color-attributes">Attributes</h3>
           <p>This component offers the following options which could be set using attributes:</p>
           <table>
@@ -202,6 +205,21 @@ export class AppComponentsColor {
                   <code>DEFAULT_PALETTE</code>
                 </td>
               </tr>
+              <tr>
+                <td>
+                  <code>label</code>
+                </td>
+                <td>
+                  <code>label</code>
+                </td>
+                <td>Display a label for the description of the selected color</td>
+                <td>
+                  <code>boolean</code>
+                </td>
+                <td>
+                  <code>true</code>
+                </td>
+              </tr>
             </tbody>
           </table>
           <h4 id="app-components-color-palette">Palette</h4>
@@ -223,19 +241,20 @@ export class AppComponentsColor {
           <p>The default palette is the following:</p>
           <deckgo-highlight-code language="javascript">
             <code slot="code">
-              export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#FF6900&#039;,{'\n'} rgb:
-              &#039;255,105,0&#039;{'\n'} &#125;,{'\n'} alt: &#039;Orange&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#FCB900&#039;,
-              {'\n'} rgb: &#039;252,185,0&#039;{'\n'} &#125;,{'\n'} alt: &#039;Yellow&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex:
-              &#039;#7BDCB5&#039;,{'\n'} rgb: &#039;123,220,181&#039;{'\n'} &#125;,{'\n'} alt: &#039;Light green&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color:
-              &#123;{'\n'} hex: &#039;#00D084&#039;,{'\n'} rgb: &#039;0,208,132&#039;{'\n'} &#125;,{'\n'} alt: &#039;Green&#039;{'\n'} &#125;,{'\n'} &#123;
-              {'\n'} color: &#123;{'\n'} hex: &#039;#8ED1FC&#039;,{'\n'} rgb: &#039;142,209,252&#039;{'\n'} &#125;,{'\n'} alt: &#039;Light blue&#039;{'\n'}{' '}
-              &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#0693E3&#039;,{'\n'} rgb: &#039;6,147,227&#039;{'\n'} &#125;,{'\n'} alt:
-              &#039;Blue&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#ABB8C3&#039;,{'\n'} rgb: &#039;171,184,195&#039;{'\n'} &#125;,
-              {'\n'} alt: &#039;Grey&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#EB144C&#039;,{'\n'} rgb: &#039;235,20,76&#039;{'\n'}{' '}
-              &#125;,{'\n'} alt: &#039;Red&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#F78DA7&#039;,{'\n'} rgb:
-              &#039;247,141,167&#039;{'\n'} &#125;,{'\n'} alt: &#039;Pink&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#9900EF&#039;,
-              {'\n'} rgb: &#039;153,0,239&#039;{'\n'} &#125;,{'\n'} alt: &#039;Violet&#039;{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex:
-              &#039;#000000&#039;,{'\n'} rgb: &#039;0,0,0&#039;{'\n'} &#125;,{'\n'} alt: &#039;Black&#039;{'\n'} &#125;{'\n'}];
+              export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#8ED1FC&#039;,{'\n'} rgb:
+              &#039;142,209,252&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Light blue&#039;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex:
+              &#039;#0693E3&#039;,{'\n'} rgb: &#039;6,147,227&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Blue&#039;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;
+              {'\n'} hex: &#039;#7BDCB5&#039;,{'\n'} rgb: &#039;123,220,181&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Light green&#039;,{'\n'} &#125;,{'\n'} &#123;
+              {'\n'} color: &#123;{'\n'} hex: &#039;#00D084&#039;,{'\n'} rgb: &#039;0,208,132&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Green&#039;,{'\n'} &#125;,
+              {'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#FCB900&#039;,{'\n'} rgb: &#039;252,185,0&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Yellow&#039;,
+              {'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#FF6900&#039;,{'\n'} rgb: &#039;255,105,0&#039;,{'\n'} &#125;,{'\n'} alt:
+              &#039;Orange&#039;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#F78DA7&#039;,{'\n'} rgb: &#039;247,141,167&#039;,{'\n'}{' '}
+              &#125;,{'\n'} alt: &#039;Pink&#039;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#EB144C&#039;,{'\n'} rgb:
+              &#039;235,20,76&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Red&#039;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#ffffff&#039;,
+              {'\n'} rgb: &#039;255,255,255&#039;,{'\n'} &#125;,{'\n'} alt: &#039;White&#039;,{'\n'} display: &#123;{'\n'} borderColor: &#039;#ddd&#039;,{'\n'}{' '}
+              boxShadowColor: &#039;221,221,221&#039;,{'\n'} &#125;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#ABB8C3&#039;,{'\n'} rgb:
+              &#039;171,184,195&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Grey&#039;,{'\n'} &#125;,{'\n'} &#123;{'\n'} color: &#123;{'\n'} hex: &#039;#000000&#039;,
+              {'\n'} rgb: &#039;0,0,0&#039;,{'\n'} &#125;,{'\n'} alt: &#039;Black&#039;,{'\n'} &#125;,{'\n'}];
             </code>
           </deckgo-highlight-code>
           <h3 id="app-components-color-theming">Theming</h3>
@@ -309,6 +328,36 @@ export class AppComponentsColor {
                 <td>transparent</td>
                 <td>The background of the more button</td>
               </tr>
+              <tr>
+                <td>--deckgo-color-label-margin</td>
+                <td>0</td>
+                <td>Margin of the color description</td>
+              </tr>
+              <tr>
+                <td>--deckgo-color-label-padding</td>
+                <td>12px 8px</td>
+                <td>Padding of the color description</td>
+              </tr>
+              <tr>
+                <td>--deckgo-color-label-font-size</td>
+                <td>12px</td>
+                <td>Font size of the color description</td>
+              </tr>
+              <tr>
+                <td>--deckgo-color-label-min-height</td>
+                <td>15px</td>
+                <td>Minimal height of the color description</td>
+              </tr>
+              <tr>
+                <td>--deckgo-color-label-text-align</td>
+                <td>center</td>
+                <td>Text alignment of the color description</td>
+              </tr>
+              <tr>
+                <td>--deckgo-color-label-color-font-weight</td>
+                <td>300</td>
+                <td>Font weight of the hexadecimal value of the color description</td>
+              </tr>
             </tbody>
           </table>
           <h3 id="app-components-color-events">Events</h3>

From dcd79cc159bd464b96ad2cf92ea42956aafa62b0 Mon Sep 17 00:00:00 2001
From: peterpeterparker <david.dalbusco@outlook.com>
Date: Fri, 15 May 2020 14:05:30 +0200
Subject: [PATCH 15/15] feat(#544): show opacity

Signed-off-by: peterpeterparker <david.dalbusco@outlook.com>
---
 .../color/app-color-chart/app-color-chart.tsx      | 12 +++++++-----
 .../editor/color/app-color-code/app-color-code.tsx | 14 +++++++++-----
 .../color/app-color-qrcode/app-color-qrcode.tsx    | 10 ++++++----
 .../color/app-color-sides/app-color-sides.tsx      | 10 ++++++----
 .../app-color-text-background.tsx                  | 10 ++++++----
 .../app/popovers/editor/app-color/app-color.scss   |  6 ++++++
 6 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
index c865e35e2..b3af38544 100644
--- a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
+++ b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
@@ -11,11 +11,11 @@ enum ApplyColorType {
   STROKE,
   TEXT,
   AXIS,
-  GRID
+  GRID,
 }
 
 @Component({
-  tag: 'app-color-chart'
+  tag: 'app-color-chart',
 })
 export class AppColorDeckSlide {
   @Element() el: HTMLElement;
@@ -207,7 +207,9 @@ export class AppColorDeckSlide {
       </ion-item>,
 
       <ion-item-divider class="ion-padding-top">
-        <ion-label>Opacity</ion-label>
+        <ion-label>
+          Opacity <small>{this.colorOpacity}%</small>
+        </ion-label>
       </ion-item-divider>,
 
       <ion-item class="item-opacity">
@@ -227,7 +229,7 @@ export class AppColorDeckSlide {
         onColorChange={($event: CustomEvent) => this.selectColor($event)}
         color-rgb={this.color}>
         <ion-icon src="/assets/icons/ionicons/ellipsis-vertical.svg" slot="more" aria-label="More" class="more"></ion-icon>
-      </deckgo-color>
+      </deckgo-color>,
     ];
   }
 
@@ -235,7 +237,7 @@ export class AppColorDeckSlide {
     const options = [
       <ion-select-option value={ApplyColorType.FILL}>Fill</ion-select-option>,
       <ion-select-option value={ApplyColorType.STROKE}>Stroke</ion-select-option>,
-      <ion-select-option value={ApplyColorType.TEXT}>Text</ion-select-option>
+      <ion-select-option value={ApplyColorType.TEXT}>Text</ion-select-option>,
     ];
 
     if (this.chartType != SlideChartType.PIE) {
diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
index 30ef99021..fc3ae859e 100644
--- a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
+++ b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
@@ -11,12 +11,12 @@ enum CodeColorType {
   KEYWORD,
   FUNCTION,
   REGEX,
-  LINE_NUMBERS
+  LINE_NUMBERS,
 }
 
 @Component({
   tag: 'app-color-code',
-  styleUrl: 'app-color-code.scss'
+  styleUrl: 'app-color-code.scss',
 })
 export class AppColorCode {
   @Element() el: HTMLElement;
@@ -323,7 +323,9 @@ export class AppColorCode {
         </ion-item>
 
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.codeColorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
 
         <ion-item class="item-opacity">
@@ -370,7 +372,9 @@ export class AppColorCode {
         </ion-item>
 
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.highlightColorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
 
         <ion-item class="item-opacity">
@@ -393,7 +397,7 @@ export class AppColorCode {
             <ion-icon src="/assets/icons/ionicons/ellipsis-vertical.svg" slot="more" aria-label="More" class="more"></ion-icon>
           </deckgo-color>
         </div>
-      </ion-list>
+      </ion-list>,
     ];
   }
 }
diff --git a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx b/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
index ad293212b..41a6119bc 100644
--- a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
+++ b/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   QR_CODE,
-  BACKGROUND
+  BACKGROUND,
 }
 
 @Component({
-  tag: 'app-color-qrcode'
+  tag: 'app-color-qrcode',
 })
 export class AppColorQRCode {
   @Element() el: HTMLElement;
@@ -158,7 +158,9 @@ export class AppColorQRCode {
           </ion-item>
         </ion-radio-group>
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.colorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
         <ion-item class="item-opacity">
           <ion-range
@@ -182,7 +184,7 @@ export class AppColorQRCode {
         <ion-button shape="round" onClick={() => this.resetColor()} fill="outline" class="delete">
           <ion-label>{this.resetLabelContent()}</ion-label>
         </ion-button>
-      </ion-item>
+      </ion-item>,
     ];
   }
 
diff --git a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
index 9d6fe9640..bc0a52349 100644
--- a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
+++ b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   TEXT,
-  BACKGROUND
+  BACKGROUND,
 }
 
 @Component({
-  tag: 'app-color-sides'
+  tag: 'app-color-sides',
 })
 export class AppColorSides {
   @Element() el: HTMLElement;
@@ -177,7 +177,9 @@ export class AppColorSides {
           </ion-item>
         </ion-radio-group>
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.colorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
         <ion-item class="item-opacity">
           <ion-range
@@ -201,7 +203,7 @@ export class AppColorSides {
         <ion-button shape="round" onClick={() => this.resetColor()} fill="outline" class="delete">
           <ion-label>{this.resetLabelContent()}</ion-label>
         </ion-button>
-      </ion-item>
+      </ion-item>,
     ];
   }
 
diff --git a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
index 824d1196c..dd5f5a0ba 100644
--- a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
+++ b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
 
 enum ApplyColorType {
   TEXT,
-  BACKGROUND
+  BACKGROUND,
 }
 
 @Component({
-  tag: 'app-color-text-background'
+  tag: 'app-color-text-background',
 })
 export class AppColorTextBackground {
   @Element() el: HTMLElement;
@@ -193,7 +193,9 @@ export class AppColorTextBackground {
           </ion-item>
         </ion-radio-group>
         <ion-item-divider class="ion-padding-top">
-          <ion-label>Opacity</ion-label>
+          <ion-label>
+            Opacity <small>{this.colorOpacity}%</small>
+          </ion-label>
         </ion-item-divider>
         <ion-item class="item-opacity">
           <ion-range
@@ -217,7 +219,7 @@ export class AppColorTextBackground {
         <ion-button shape="round" onClick={() => this.resetColor()} fill="outline" class="delete">
           <ion-label>{this.resetLabelContent()}</ion-label>
         </ion-button>
-      </ion-item>
+      </ion-item>,
     ];
   }
 
diff --git a/studio/src/app/popovers/editor/app-color/app-color.scss b/studio/src/app/popovers/editor/app-color/app-color.scss
index 282dedf1f..3bac06535 100644
--- a/studio/src/app/popovers/editor/app-color/app-color.scss
+++ b/studio/src/app/popovers/editor/app-color/app-color.scss
@@ -11,4 +11,10 @@ app-color {
   ion-item.item-opacity {
     --padding-start: 8px;
   }
+
+  ion-item-divider {
+    small {
+      font-size: var(--font-size-very-small);
+    }
+  }
 }
