paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 42 Packages Projects Releases Wiki Activity

Merge pull request #10145 from awanlin/topic/removed-unused-burst-properties

Browse Source 
Removed unused properties from BackstagePaletteAdditions
This commit is contained in:
Fredrik Adelöw
2022-06-30 16:55:31 +02:00
committed by GitHub
parent badefbfd2a 385389d23c
commit 0771e2834f
11 changed files with 74 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/great-roses-pump.md
+1 -1
View File
@@ -4,7 +4,7 @@
Previously, the color of the Entity Context Menu (in the Entity Page Header) was hardcoded as `white`.
This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.palette.bursts.fontColor`.
This was an issue for themes that use a header with a white background. By default, the color of the icon is now `theme.page.fontColor`.
It can now also be overridden in the theme, which is only necessary if the header title, subtitle and three-dots icon need to have different colors. For example:
.changeset/serious-houses-watch.md
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/theme': patch
---
**DEPRECATED**: The `bursts` object from `BackstagePaletteAdditions` has been depreciated and will be removed in a future release
The `genPageTheme` function now includes an optional options object with an optional `fontColor` which defaults to white if not provided.
.changeset/tricky-ravens-visit.md
+6
View File
@@ -0,0 +1,6 @@
---
'@backstage/core-components': patch
'@backstage/plugin-catalog': patch
---
Updated to remove usage of the `bursts` object in the theme palette
packages/core-components/src/layout/Header/Header.tsx
+4 -4
View File
@@ -66,13 +66,13 @@ const useStyles = makeStyles<BackstageTheme>(
alignItems: 'center',
},
title: {
color: theme.palette.bursts.fontColor,
color: theme.page.fontColor,
wordBreak: 'break-word',
fontSize: theme.typography.h3.fontSize,
marginBottom: 0,
},
subtitle: {
color: theme.palette.bursts.fontColor,
color: theme.page.fontColor,
opacity: 0.8,
display: 'inline-block', // prevents margin collapse of adjacent siblings
marginTop: theme.spacing(1),
@@ -83,10 +83,10 @@ const useStyles = makeStyles<BackstageTheme>(
fontSize: 11,
opacity: 0.8,
marginBottom: theme.spacing(1),
color: theme.palette.bursts.fontColor,
color: theme.page.fontColor,
},
breadcrumb: {
color: theme.palette.bursts.fontColor,
color: theme.page.fontColor,
},
breadcrumbType: {
fontSize: 'inherit',
packages/core-components/src/layout/ItemCard/ItemCardHeader.tsx
+1 -1
View File
@@ -27,7 +27,7 @@ const styles = (theme: BackstageTheme) =>
root: {
color: theme.palette.common.white,
padding: theme.spacing(2, 2, 3),
backgroundImage: theme.palette.bursts.gradient.linear,
backgroundImage: theme.getPageTheme({ themeId: 'card' }).backgroundImage,
backgroundPosition: 0,
backgroundSize: 'inherit',
},
packages/core-components/src/layout/Sidebar/MobileSidebar.tsx
+2 -2
View File
@@ -85,14 +85,14 @@ const useStyles = makeStyles<BackstageTheme, { sidebarConfig: SidebarConfig }>(
overlayHeader: {
display: 'flex',
color: theme.palette.bursts.fontColor,
color: theme.palette.text.primary,
alignItems: 'center',
justifyContent: 'space-between',
padding: theme.spacing(2, 3),
},
overlayHeaderClose: {
color: theme.palette.bursts.fontColor,
color: theme.palette.text.primary,
},
marginMobileSidebar: props => ({
packages/theme/api-report.md
+8 -1
View File
@@ -116,7 +116,13 @@ export function createThemeOverrides(theme: BackstageTheme): Overrides;
export const darkTheme: BackstageTheme;
// @public
export function genPageTheme(colors: string[], shape: string): PageTheme;
export function genPageTheme(props: {
colors: string[];
shape: string;
options?: {
fontColor?: string;
};
}): PageTheme;
// @public
export const lightTheme: BackstageTheme;
@@ -126,6 +132,7 @@ export type PageTheme = {
colors: string[];
shape: string;
backgroundImage: string;
fontColor: string;
};
// @public
packages/theme/src/pageTheme.ts
+32 -11
View File
@@ -52,6 +52,7 @@ export const colorVariants: Record<string, string[]> = {
eveningSea: ['#00FFF2', '#035355'],
teal: ['#005B4B'],
pinkSea: ['#C8077A', '#C2297D'],
greens: ['#4BB8A5', '#187656'],
};
/**
@@ -63,12 +64,25 @@ export const colorVariants: Record<string, string[]> = {
* As the background shapes and colors are decorative, we place them onto the
* page as a css background-image instead of an html element of its own.
*/
export function genPageTheme(colors: string[], shape: string): PageTheme {
export function genPageTheme(props: {
colors: string[];
shape: string;
options?: {
fontColor?: string;
};
}): PageTheme {
const { colors, shape, options } = props;
const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
const gradient = `linear-gradient(90deg, ${gradientColors.join(', ')})`;
const backgroundImage = `${shape}, ${gradient}`;
const fontColor = options?.fontColor ?? '#FFFFFF';
return { colors, shape, backgroundImage };
return {
colors: colors,
shape: shape,
backgroundImage: backgroundImage,
fontColor: fontColor,
};
}
/**
@@ -77,13 +91,20 @@ export function genPageTheme(colors: string[], shape: string): PageTheme {
* @public
*/
export const pageTheme: Record<string, PageTheme> = {
home: genPageTheme(colorVariants.teal, shapes.wave),
documentation: genPageTheme(colorVariants.pinkSea, shapes.wave2),
tool: genPageTheme(colorVariants.purpleSky, shapes.round),
service: genPageTheme(colorVariants.marineBlue, shapes.wave),
website: genPageTheme(colorVariants.veryBlue, shapes.wave),
library: genPageTheme(colorVariants.rubyRed, shapes.wave),
other: genPageTheme(colorVariants.darkGrey, shapes.wave),
app: genPageTheme(colorVariants.toastyOrange, shapes.wave),
apis: genPageTheme(colorVariants.teal, shapes.wave2),
home: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave }),
documentation: genPageTheme({
colors: colorVariants.pinkSea,
shape: shapes.wave2,
}),
tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),
service: genPageTheme({
colors: colorVariants.marineBlue,
shape: shapes.wave,
}),
website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),
library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),
other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),
app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),
apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),
card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave }),
};
packages/theme/src/types.ts
+4
View File
@@ -63,6 +63,9 @@ export type BackstagePaletteAdditions = {
tabbar: {
indicator: string;
};
/**
* @deprecated The entire `bursts` section will be removed in a future release
*/
bursts: {
fontColor: string;
slackChannelText: string;
@@ -161,4 +164,5 @@ export type PageTheme = {
colors: string[];
shape: string;
backgroundImage: string;
fontColor: string;
};
plugins/catalog/src/components/EntityContextMenu/EntityContextMenu.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const useStyles = makeStyles(
(theme: BackstageTheme) => {
return {
button: {
color: theme.palette.bursts.fontColor,
color: theme.page.fontColor,
},
};
},
plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx
+8 -8
View File
@@ -110,14 +110,14 @@ const monochromeTheme = (outer: BackstageTheme) =>
...outer,
defaultPageTheme: 'home',
pageTheme: {
home: genPageTheme(['#444'], shapes.wave2),
documentation: genPageTheme(['#474747'], shapes.wave2),
tool: genPageTheme(['#222'], shapes.wave2),
service: genPageTheme(['#aaa'], shapes.wave2),
website: genPageTheme(['#0e0e0e'], shapes.wave2),
library: genPageTheme(['#9d9d9d'], shapes.wave2),
other: genPageTheme(['#aaa'], shapes.wave2),
app: genPageTheme(['#666'], shapes.wave2),
home: genPageTheme({ colors: ['#444'], shape: shapes.wave2 }),
documentation: genPageTheme({ colors: ['#474747'], shape: shapes.wave2 }),
tool: genPageTheme({ colors: ['#222'], shape: shapes.wave2 }),
service: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
website: genPageTheme({ colors: ['#0e0e0e'], shape: shapes.wave2 }),
library: genPageTheme({ colors: ['#9d9d9d'], shape: shapes.wave2 }),
other: genPageTheme({ colors: ['#aaa'], shape: shapes.wave2 }),
app: genPageTheme({ colors: ['#666'], shape: shapes.wave2 }),
},
});