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 = () => ( ); + +export const Outline = () => ; 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`,