From 4577e377bef3be699027a8df68b2bd8e82dc9eb7 Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@sda-se.com>
Date: Thu, 5 Nov 2020 18:41:49 +0100
Subject: [PATCH] Improve styling of outlined chips in dark mode (#3252)

---
 .changeset/strong-moose-cough.md                   | 5 +++++
 packages/core/src/components/Chip/Chip.stories.tsx | 2 ++
 packages/theme/src/baseTheme.ts                    | 5 ++++-
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/strong-moose-cough.md

diff --git a/.changeset/strong-moose-cough.md b/.changeset/strong-moose-cough.md
new file mode 100644
index 0000000000..41a0da7cca
--- /dev/null
+++ b/.changeset/strong-moose-cough.md
@@ -0,0 +1,5 @@
+---
+'@backstage/theme': patch
+---
+
+Improve styling of outlined chips in dark mode.
diff --git a/packages/core/src/components/Chip/Chip.stories.tsx b/packages/core/src/components/Chip/Chip.stories.tsx
index a605666482..87d904ad0e 100644
--- a/packages/core/src/components/Chip/Chip.stories.tsx
+++ b/packages/core/src/components/Chip/Chip.stories.tsx
@@ -39,3 +39,5 @@ export const SmallDeletable = () => (
 export const SmallNotDeletable = () => (
   <Chip label="Small not deletable" size="small" />
 );
+
+export const Outline = () => <Chip label="Outline" variant="outlined" />;
diff --git a/packages/theme/src/baseTheme.ts b/packages/theme/src/baseTheme.ts
index b0797c6506..193f6961d6 100644
--- a/packages/theme/src/baseTheme.ts
+++ b/packages/theme/src/baseTheme.ts
@@ -209,9 +209,12 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides {
         // By default there's no margin, but it's usually wanted, so we add some trailing margin
         marginRight: theme.spacing(1),
         marginBottom: theme.spacing(1),
+        color: theme.palette.grey[900],
+      },
+      outlined: {
+        color: theme.palette.text.primary,
       },
       label: {
-        color: theme.palette.grey[900],
         lineHeight: `${theme.spacing(2.5)}px`,
         fontWeight: theme.typography.fontWeightMedium,
         fontSize: `${theme.spacing(1.75)}px`,