From af6136c7ec90c16c1fff1881fe6f2adc6c60dbb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Thu, 1 Apr 2021 15:32:46 +0200
Subject: [PATCH 1/8] feat: adding transparency support

---
 lib/components/src/blocks/ColorPalette.tsx | 37 +++++++++++++++-------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 800469aa1d5c..23f2c6812fb8 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -53,9 +53,32 @@ const SwatchLabels = styled.div({
   flexDirection: 'row',
 });
 
-const Swatch = styled.div({
+interface SwatchProps {
+  background: string;
+}
+
+const Swatch = styled.div<SwatchProps>(({ background }) => ({
+  position: 'relative',
   flex: 1,
-});
+  backgroundColor: 'white',
+  backgroundImage: `
+  linear-gradient(45deg, #ccc 25%, transparent 25%),
+  linear-gradient(-45deg, #ccc 25%, transparent 25%),
+  linear-gradient(45deg, transparent 75%, #ccc 75%),
+  linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
+  backgroundSize: '20px 20px',
+  backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0',
+
+  '&::before': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background,
+    content: '""',
+  },
+}));
 
 const SwatchColors = styled.div(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
@@ -122,15 +145,7 @@ interface ColorProps {
 }
 
 function renderSwatch(color: string) {
-  return (
-    <Swatch
-      key={color}
-      title={color}
-      style={{
-        background: color,
-      }}
-    />
-  );
+  return <Swatch key={color} title={color} background={color} />;
 }
 
 function renderSwatchLabel(color: string, colorDescription?: string) {

From 310f9e62570b346a346dae5ca381ac6cb416b69d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Mon, 5 Jul 2021 11:21:03 +0200
Subject: [PATCH 2/8] fix: added the missing property

---
 lib/components/src/blocks/ColorPalette.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 84572ffa089d..f9e7de99c97f 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -145,15 +145,7 @@ interface ColorProps {
 }
 
 function renderSwatch(color: string, index: number) {
-  return (
-    <Swatch
-      key={`${color}-${index}`}
-      title={color}
-      style={{
-        background: color,
-      }}
-    />
-  );
+  return <Swatch key={`${color}-${index}`} title={color} background={color} />;
 }
 
 function renderSwatchLabel(color: string, index: number, colorDescription?: string) {

From 726b124ac43c626e95a573e685872968d397641d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Thu, 8 Jul 2021 17:55:43 +0200
Subject: [PATCH 3/8] fix: change pattern in the background and examples
 examples of usage

---
 .../addon-docs/colorpalette.stories.mdx       |  1 +
 .../src/Colors/colorpalette.stories.mdx       | 10 ++-
 .../src/blocks/ColorPalette.stories.tsx       |  2 +
 lib/components/src/blocks/ColorPalette.tsx    | 65 +++++++++++--------
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
index 98aed2ad2a6c..d0eb054316c5 100644
--- a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
@@ -19,5 +19,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
       Apple60: 'rgba(102,191,60,.6)',
       Apple30: 'rgba(102,191,60,.3)',
     }}
+    isTransparent
   />
 </ColorPalette>
diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx
index 4c868685824a..f6dd7bf18200 100644
--- a/lib/components/src/Colors/colorpalette.stories.mdx
+++ b/lib/components/src/Colors/colorpalette.stories.mdx
@@ -15,7 +15,7 @@ Dark theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.dark).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -29,6 +29,7 @@ Dark theme Colors
                 : acc,
             {}
           )}
+          isTransparent
         />
       );
     }
@@ -49,6 +50,7 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
+          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -58,6 +60,7 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={colors}
+          isTransparent
         />
       );
     }
@@ -72,7 +75,7 @@ Light theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.light).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent/>;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -86,6 +89,7 @@ Light theme Colors
                 : acc,
             {}
           )}
+          isTransparent
         />
       );
     }
@@ -106,6 +110,7 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
+          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -115,6 +120,7 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={colors}
+          isTransparent
         />
       );
     }
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index 2f3830b98a07..d0b2e0ad67af 100644
--- a/lib/components/src/blocks/ColorPalette.stories.tsx
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -24,6 +24,7 @@ export const defaultStyle = () => (
         'rgba(102,191,60,.6)',
         'rgba(102,191,60,.3)',
       ]}
+      isTransparent
     />
     <ColorItem
       title="gradient"
@@ -55,6 +56,7 @@ export const NamedColors = () => (
         Apple60: 'rgba(102,191,60,.6)',
         Apple30: 'rgba(102,191,60,.3)',
       }}
+      isTransparent
     />
     <ColorItem
       title="gradient"
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index f9e7de99c97f..c9e4a1c7ee9d 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -55,29 +55,27 @@ const SwatchLabels = styled.div({
 
 interface SwatchProps {
   background: string;
+  isTransparent?: boolean;
 }
 
-const Swatch = styled.div<SwatchProps>(({ background }) => ({
+const Swatch = styled.div<SwatchProps>(({ background, isTransparent }) => ({
   position: 'relative',
   flex: 1,
-  backgroundColor: 'white',
-  backgroundImage: `
-  linear-gradient(45deg, #ccc 25%, transparent 25%),
-  linear-gradient(-45deg, #ccc 25%, transparent 25%),
-  linear-gradient(45deg, transparent 75%, #ccc 75%),
-  linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
-  backgroundSize: '20px 20px',
-  backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0',
-
-  '&::before': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    background,
-    content: '""',
-  },
+
+  ...(isTransparent && {
+    backgroundColor: 'white',
+    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background,
+      content: '""',
+    },
+  }),
 }));
 
 const SwatchColors = styled.div(({ theme }) => ({
@@ -142,10 +140,18 @@ interface ColorProps {
   title: string;
   subtitle: string;
   colors: Colors;
+  isTransparent?: boolean;
 }
 
-function renderSwatch(color: string, index: number) {
-  return <Swatch key={`${color}-${index}`} title={color} background={color} />;
+function renderSwatch(color: string, index: number, isTransparent: boolean) {
+  return (
+    <Swatch
+      key={`${color}-${index}`}
+      title={color}
+      background={color}
+      isTransparent={isTransparent}
+    />
+  );
 }
 
 function renderSwatchLabel(color: string, index: number, colorDescription?: string) {
@@ -159,11 +165,13 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri
   );
 }
 
-function renderSwatchSpecimen(colors: Colors) {
+function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
   if (Array.isArray(colors)) {
     return (
       <SwatchSpecimen>
-        <SwatchColors>{colors.map((color, index) => renderSwatch(color, index))}</SwatchColors>
+        <SwatchColors>
+          {colors.map((color, index) => renderSwatch(color, index, isTransparent))}
+        </SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
       </SwatchSpecimen>
     );
@@ -171,7 +179,7 @@ function renderSwatchSpecimen(colors: Colors) {
   return (
     <SwatchSpecimen>
       <SwatchColors>
-        {Object.values(colors).map((color, index) => renderSwatch(color, index))}
+        {Object.values(colors).map((color, index) => renderSwatch(color, index, isTransparent))}
       </SwatchColors>
       <SwatchLabels>
         {Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))}
@@ -184,14 +192,19 @@ function renderSwatchSpecimen(colors: Colors) {
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
+export const ColorItem: FunctionComponent<ColorProps> = ({
+  title,
+  subtitle,
+  colors,
+  isTransparent = false,
+}) => {
   return (
     <Item>
       <ItemDescription>
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
+      <Swatches>{renderSwatchSpecimen(colors, isTransparent)}</Swatches>
     </Item>
   );
 };

From 2da73c28d9c2f11a8091876a1644905d0d6dcabe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Thu, 8 Jul 2021 17:55:43 +0200
Subject: [PATCH 4/8] fix: changed pattern in the background and updated
 examples of usage

---
 .../addon-docs/colorpalette.stories.mdx       |  1 +
 .../src/Colors/colorpalette.stories.mdx       | 10 ++-
 .../src/blocks/ColorPalette.stories.tsx       |  2 +
 lib/components/src/blocks/ColorPalette.tsx    | 65 +++++++++++--------
 4 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
index 98aed2ad2a6c..d0eb054316c5 100644
--- a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
@@ -19,5 +19,6 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
       Apple60: 'rgba(102,191,60,.6)',
       Apple30: 'rgba(102,191,60,.3)',
     }}
+    isTransparent
   />
 </ColorPalette>
diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx
index 4c868685824a..f6dd7bf18200 100644
--- a/lib/components/src/Colors/colorpalette.stories.mdx
+++ b/lib/components/src/Colors/colorpalette.stories.mdx
@@ -15,7 +15,7 @@ Dark theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.dark).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -29,6 +29,7 @@ Dark theme Colors
                 : acc,
             {}
           )}
+          isTransparent
         />
       );
     }
@@ -49,6 +50,7 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
+          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -58,6 +60,7 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={colors}
+          isTransparent
         />
       );
     }
@@ -72,7 +75,7 @@ Light theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.light).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent/>;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -86,6 +89,7 @@ Light theme Colors
                 : acc,
             {}
           )}
+          isTransparent
         />
       );
     }
@@ -106,6 +110,7 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
+          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -115,6 +120,7 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={colors}
+          isTransparent
         />
       );
     }
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index 2f3830b98a07..d0b2e0ad67af 100644
--- a/lib/components/src/blocks/ColorPalette.stories.tsx
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -24,6 +24,7 @@ export const defaultStyle = () => (
         'rgba(102,191,60,.6)',
         'rgba(102,191,60,.3)',
       ]}
+      isTransparent
     />
     <ColorItem
       title="gradient"
@@ -55,6 +56,7 @@ export const NamedColors = () => (
         Apple60: 'rgba(102,191,60,.6)',
         Apple30: 'rgba(102,191,60,.3)',
       }}
+      isTransparent
     />
     <ColorItem
       title="gradient"
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index f9e7de99c97f..c9e4a1c7ee9d 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -55,29 +55,27 @@ const SwatchLabels = styled.div({
 
 interface SwatchProps {
   background: string;
+  isTransparent?: boolean;
 }
 
-const Swatch = styled.div<SwatchProps>(({ background }) => ({
+const Swatch = styled.div<SwatchProps>(({ background, isTransparent }) => ({
   position: 'relative',
   flex: 1,
-  backgroundColor: 'white',
-  backgroundImage: `
-  linear-gradient(45deg, #ccc 25%, transparent 25%),
-  linear-gradient(-45deg, #ccc 25%, transparent 25%),
-  linear-gradient(45deg, transparent 75%, #ccc 75%),
-  linear-gradient(-45deg, transparent 75%, #ccc 75%)`,
-  backgroundSize: '20px 20px',
-  backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0',
-
-  '&::before': {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    background,
-    content: '""',
-  },
+
+  ...(isTransparent && {
+    backgroundColor: 'white',
+    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+
+    '&::before': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      background,
+      content: '""',
+    },
+  }),
 }));
 
 const SwatchColors = styled.div(({ theme }) => ({
@@ -142,10 +140,18 @@ interface ColorProps {
   title: string;
   subtitle: string;
   colors: Colors;
+  isTransparent?: boolean;
 }
 
-function renderSwatch(color: string, index: number) {
-  return <Swatch key={`${color}-${index}`} title={color} background={color} />;
+function renderSwatch(color: string, index: number, isTransparent: boolean) {
+  return (
+    <Swatch
+      key={`${color}-${index}`}
+      title={color}
+      background={color}
+      isTransparent={isTransparent}
+    />
+  );
 }
 
 function renderSwatchLabel(color: string, index: number, colorDescription?: string) {
@@ -159,11 +165,13 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri
   );
 }
 
-function renderSwatchSpecimen(colors: Colors) {
+function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
   if (Array.isArray(colors)) {
     return (
       <SwatchSpecimen>
-        <SwatchColors>{colors.map((color, index) => renderSwatch(color, index))}</SwatchColors>
+        <SwatchColors>
+          {colors.map((color, index) => renderSwatch(color, index, isTransparent))}
+        </SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
       </SwatchSpecimen>
     );
@@ -171,7 +179,7 @@ function renderSwatchSpecimen(colors: Colors) {
   return (
     <SwatchSpecimen>
       <SwatchColors>
-        {Object.values(colors).map((color, index) => renderSwatch(color, index))}
+        {Object.values(colors).map((color, index) => renderSwatch(color, index, isTransparent))}
       </SwatchColors>
       <SwatchLabels>
         {Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))}
@@ -184,14 +192,19 @@ function renderSwatchSpecimen(colors: Colors) {
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
+export const ColorItem: FunctionComponent<ColorProps> = ({
+  title,
+  subtitle,
+  colors,
+  isTransparent = false,
+}) => {
   return (
     <Item>
       <ItemDescription>
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
+      <Swatches>{renderSwatchSpecimen(colors, isTransparent)}</Swatches>
     </Item>
   );
 };

From 8f2e20948b04703324635a8cec5f7af3a8686869 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Thu, 8 Jul 2021 19:04:05 +0200
Subject: [PATCH 5/8] fix: moved background pattern to parent

---
 lib/components/src/blocks/ColorPalette.tsx | 51 ++++++++++------------
 1 file changed, 23 insertions(+), 28 deletions(-)

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index c9e4a1c7ee9d..3705810d6671 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -55,36 +55,38 @@ const SwatchLabels = styled.div({
 
 interface SwatchProps {
   background: string;
-  isTransparent?: boolean;
 }
 
-const Swatch = styled.div<SwatchProps>(({ background, isTransparent }) => ({
+const Swatch = styled.div<SwatchProps>(({ background }) => ({
   position: 'relative',
   flex: 1,
 
-  ...(isTransparent && {
-    backgroundColor: 'white',
-    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
-
-    '&::before': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      background,
-      content: '""',
-    },
-  }),
+  '&::before': {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background,
+    content: '""',
+  },
 }));
 
-const SwatchColors = styled.div(({ theme }) => ({
+interface SwatchColorsProps {
+  isTransparent: boolean;
+}
+const SwatchColors = styled.div<SwatchColorsProps>(({ theme, isTransparent }) => ({
   ...getBlockBackgroundStyle(theme),
   display: 'flex',
   flexDirection: 'row',
   height: 50,
   marginBottom: 5,
   overflow: 'hidden',
+
+  ...(isTransparent && {
+    backgroundColor: 'white',
+    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+  }),
 }));
 
 const SwatchSpecimen = styled.div({
@@ -144,14 +146,7 @@ interface ColorProps {
 }
 
 function renderSwatch(color: string, index: number, isTransparent: boolean) {
-  return (
-    <Swatch
-      key={`${color}-${index}`}
-      title={color}
-      background={color}
-      isTransparent={isTransparent}
-    />
-  );
+  return <Swatch key={`${color}-${index}`} title={color} background={color} />;
 }
 
 function renderSwatchLabel(color: string, index: number, colorDescription?: string) {
@@ -169,7 +164,7 @@ function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
   if (Array.isArray(colors)) {
     return (
       <SwatchSpecimen>
-        <SwatchColors>
+        <SwatchColors isTransparent={isTransparent}>
           {colors.map((color, index) => renderSwatch(color, index, isTransparent))}
         </SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
@@ -178,7 +173,7 @@ function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
   }
   return (
     <SwatchSpecimen>
-      <SwatchColors>
+      <SwatchColors isTransparent={isTransparent}>
         {Object.values(colors).map((color, index) => renderSwatch(color, index, isTransparent))}
       </SwatchColors>
       <SwatchLabels>
@@ -196,7 +191,7 @@ export const ColorItem: FunctionComponent<ColorProps> = ({
   title,
   subtitle,
   colors,
-  isTransparent = false,
+  isTransparent,
 }) => {
   return (
     <Item>

From a1d0785937aa528c3037980c997025df4a1805cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Thu, 8 Jul 2021 19:13:01 +0200
Subject: [PATCH 6/8] fix: removed unused props

---
 lib/components/src/blocks/ColorPalette.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 3705810d6671..763bff60c0f9 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -145,7 +145,7 @@ interface ColorProps {
   isTransparent?: boolean;
 }
 
-function renderSwatch(color: string, index: number, isTransparent: boolean) {
+function renderSwatch(color: string, index: number) {
   return <Swatch key={`${color}-${index}`} title={color} background={color} />;
 }
 
@@ -165,7 +165,7 @@ function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
     return (
       <SwatchSpecimen>
         <SwatchColors isTransparent={isTransparent}>
-          {colors.map((color, index) => renderSwatch(color, index, isTransparent))}
+          {colors.map((color, index) => renderSwatch(color, index))}
         </SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
       </SwatchSpecimen>
@@ -174,7 +174,7 @@ function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
   return (
     <SwatchSpecimen>
       <SwatchColors isTransparent={isTransparent}>
-        {Object.values(colors).map((color, index) => renderSwatch(color, index, isTransparent))}
+        {Object.values(colors).map((color, index) => renderSwatch(color, index))}
       </SwatchColors>
       <SwatchLabels>
         {Object.keys(colors).map((color, index) => renderSwatchLabel(color, index, colors[color]))}

From ce37c7ece665ac7e171b490ed455a89ecd1930c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?= <bartlomiej@krakowski.dev>
Date: Mon, 12 Jul 2021 20:35:49 +0200
Subject: [PATCH 7/8] revert: removed isTransparent prop

---
 .../addon-docs/colorpalette.stories.mdx       |  1 -
 .../src/Colors/colorpalette.stories.mdx       | 10 ++-----
 .../src/blocks/ColorPalette.stories.tsx       |  2 --
 lib/components/src/blocks/ColorPalette.tsx    | 30 +++++--------------
 4 files changed, 10 insertions(+), 33 deletions(-)

diff --git a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
index d0eb054316c5..98aed2ad2a6c 100644
--- a/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
+++ b/examples/official-storybook/stories/addon-docs/colorpalette.stories.mdx
@@ -19,6 +19,5 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
       Apple60: 'rgba(102,191,60,.6)',
       Apple30: 'rgba(102,191,60,.3)',
     }}
-    isTransparent
   />
 </ColorPalette>
diff --git a/lib/components/src/Colors/colorpalette.stories.mdx b/lib/components/src/Colors/colorpalette.stories.mdx
index f6dd7bf18200..4c868685824a 100644
--- a/lib/components/src/Colors/colorpalette.stories.mdx
+++ b/lib/components/src/Colors/colorpalette.stories.mdx
@@ -15,7 +15,7 @@ Dark theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.dark).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent />;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -29,7 +29,6 @@ Dark theme Colors
                 : acc,
             {}
           )}
-          isTransparent
         />
       );
     }
@@ -50,7 +49,6 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
-          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -60,7 +58,6 @@ Dark theme Backgrounds
           key={k}
           title={k}
           colors={colors}
-          isTransparent
         />
       );
     }
@@ -75,7 +72,7 @@ Light theme Colors
 <ColorPalette>
   {Object.entries(convert(themes.light).color).map(([k, v]) => {
     if (typeof v === 'string' && (v.match(/^#/) || v.match(/^rgb/) || k.match(/color/i))) {
-      return <ColorItem key={k} title={k} colors={{ [k]: v }} isTransparent/>;
+      return <ColorItem key={k} title={k} colors={{ [k]: v }} />;
     } else if (typeof v === 'object') {
       return (
         <ColorItem
@@ -89,7 +86,6 @@ Light theme Colors
                 : acc,
             {}
           )}
-          isTransparent
         />
       );
     }
@@ -110,7 +106,6 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={{ [k]: v }}
-          isTransparent
         />
       );
     } else if (typeof v === 'object') {
@@ -120,7 +115,6 @@ Light theme Backgrounds
           key={k}
           title={k}
           colors={colors}
-          isTransparent
         />
       );
     }
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
index d0b2e0ad67af..2f3830b98a07 100644
--- a/lib/components/src/blocks/ColorPalette.stories.tsx
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -24,7 +24,6 @@ export const defaultStyle = () => (
         'rgba(102,191,60,.6)',
         'rgba(102,191,60,.3)',
       ]}
-      isTransparent
     />
     <ColorItem
       title="gradient"
@@ -56,7 +55,6 @@ export const NamedColors = () => (
         Apple60: 'rgba(102,191,60,.6)',
         Apple30: 'rgba(102,191,60,.3)',
       }}
-      isTransparent
     />
     <ColorItem
       title="gradient"
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index 763bff60c0f9..b866dcd7425b 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -72,21 +72,15 @@ const Swatch = styled.div<SwatchProps>(({ background }) => ({
   },
 }));
 
-interface SwatchColorsProps {
-  isTransparent: boolean;
-}
-const SwatchColors = styled.div<SwatchColorsProps>(({ theme, isTransparent }) => ({
+const SwatchColors = styled.div(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
   display: 'flex',
   flexDirection: 'row',
   height: 50,
   marginBottom: 5,
   overflow: 'hidden',
-
-  ...(isTransparent && {
-    backgroundColor: 'white',
-    backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
-  }),
+  backgroundColor: 'white',
+  backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
 }));
 
 const SwatchSpecimen = styled.div({
@@ -142,7 +136,6 @@ interface ColorProps {
   title: string;
   subtitle: string;
   colors: Colors;
-  isTransparent?: boolean;
 }
 
 function renderSwatch(color: string, index: number) {
@@ -160,20 +153,18 @@ function renderSwatchLabel(color: string, index: number, colorDescription?: stri
   );
 }
 
-function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
+function renderSwatchSpecimen(colors: Colors) {
   if (Array.isArray(colors)) {
     return (
       <SwatchSpecimen>
-        <SwatchColors isTransparent={isTransparent}>
-          {colors.map((color, index) => renderSwatch(color, index))}
-        </SwatchColors>
+        <SwatchColors>{colors.map((color, index) => renderSwatch(color, index))}</SwatchColors>
         <SwatchLabels>{colors.map((color, index) => renderSwatchLabel(color, index))}</SwatchLabels>
       </SwatchSpecimen>
     );
   }
   return (
     <SwatchSpecimen>
-      <SwatchColors isTransparent={isTransparent}>
+      <SwatchColors>
         {Object.values(colors).map((color, index) => renderSwatch(color, index))}
       </SwatchColors>
       <SwatchLabels>
@@ -187,19 +178,14 @@ function renderSwatchSpecimen(colors: Colors, isTransparent: boolean) {
  * A single color row your styleguide showing title, subtitle and one or more colors, used
  * as a child of `ColorPalette`.
  */
-export const ColorItem: FunctionComponent<ColorProps> = ({
-  title,
-  subtitle,
-  colors,
-  isTransparent,
-}) => {
+export const ColorItem: FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
   return (
     <Item>
       <ItemDescription>
         <ItemTitle>{title}</ItemTitle>
         <ItemSubtitle>{subtitle}</ItemSubtitle>
       </ItemDescription>
-      <Swatches>{renderSwatchSpecimen(colors, isTransparent)}</Swatches>
+      <Swatches>{renderSwatchSpecimen(colors)}</Swatches>
     </Item>
   );
 };

From f5295a299e76241fe354935f2ca9fc79b6cd27a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bart=C5=82omiej=20Krakowski?=
 <48633090+bart-krakowski@users.noreply.github.com>
Date: Tue, 13 Jul 2021 22:21:24 +0200
Subject: [PATCH 8/8] fix: added the background-clip property

---
 lib/components/src/blocks/ColorPalette.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
index b866dcd7425b..7bf50d6f4970 100644
--- a/lib/components/src/blocks/ColorPalette.tsx
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -81,6 +81,7 @@ const SwatchColors = styled.div(({ theme }) => ({
   overflow: 'hidden',
   backgroundColor: 'white',
   backgroundImage: `repeating-linear-gradient(-45deg, #ccc, #ccc 1px, #fff 1px, #fff 16px)`,
+  backgroundClip: 'padding-box'
 }));
 
 const SwatchSpecimen = styled.div({