From 0d3667061fc32fc6b643fca8c1f9aba333d55f57 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 21 Feb 2019 15:15:36 -0500
Subject: [PATCH 1/3] Improve readability of Viewports addons list items

---
 addons/viewport/src/Tool.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/viewport/src/Tool.js b/addons/viewport/src/Tool.js
index 333fbe831bd..d0042f2ea6c 100644
--- a/addons/viewport/src/Tool.js
+++ b/addons/viewport/src/Tool.js
@@ -20,7 +20,7 @@ const createItem = memoize(1000)((id, name, value, change) => ({
   onClick: () => {
     change({ selected: id, expanded: false });
   },
-  right: `${value.width}-${value.height}`,
+  right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
   value,
 }));
 

From 5740caae64671dd17308a70dae4005d21b78c561 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 21 Feb 2019 15:16:13 -0500
Subject: [PATCH 2/3] Fix path so that background addon renders the swatch in
 the listitem

---
 .../backgrounds/src/components/ColorIcon.tsx  | 19 ++++++++++++-------
 .../src/containers/BackgroundSelector.tsx     |  2 +-
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/addons/backgrounds/src/components/ColorIcon.tsx b/addons/backgrounds/src/components/ColorIcon.tsx
index aabdce3ffd4..00da34e6fd1 100644
--- a/addons/backgrounds/src/components/ColorIcon.tsx
+++ b/addons/backgrounds/src/components/ColorIcon.tsx
@@ -1,9 +1,14 @@
 import { styled } from '@storybook/theming';
 
-export const ColorIcon = styled.span(({ background }: { background: string }) => ({
-  borderRadius: '1rem',
-  display: 'block',
-  height: '1rem',
-  width: '1rem',
-  background,
-}));
+export const ColorIcon = styled.span(
+  ({ background }: { background: string }) => ({
+    borderRadius: '1rem',
+    display: 'block',
+    height: '1rem',
+    width: '1rem',
+    background,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
+  }),
+);
diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
index b9b4b3450c6..76f0011a804 100644
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -8,7 +8,7 @@ import { SET_STORIES } from '@storybook/core-events';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { PARAM_KEY } from '../constants';
-import { ColorIcon } from '../components';
+import { ColorIcon } from '../components/ColorIcon';
 import { BackgroundConfig, BackgroundSelectorItem } from '../models';
 
 const iframeId = 'storybook-preview-background';

From 2522d5fc9432a1945623366a22f9a59566463e66 Mon Sep 17 00:00:00 2001
From: domyen <dom@hichroma.com>
Date: Thu, 21 Feb 2019 15:16:54 -0500
Subject: [PATCH 3/3] Make the color swatch more consisten between background
 and color blindness addons

---
 addons/a11y/src/components/ColorBlindness.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/addons/a11y/src/components/ColorBlindness.js b/addons/a11y/src/components/ColorBlindness.js
index 2a480ebacc2..375b9a723d4 100644
--- a/addons/a11y/src/components/ColorBlindness.js
+++ b/addons/a11y/src/components/ColorBlindness.js
@@ -18,6 +18,9 @@ const ColorIcon = styled.span(
   },
   ({ filter }) => ({
     filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
   })
 );