Skip to content

Commit b1fc395

Browse files
ciiayciiay
authored
fix(theme): integrate with RHDH (#659)
* fix(theme): integrate with RHDH (#572) * fix(theme): integrate with RHDH Signed-off-by: Yi Cai <yicai@redhat.com> * some minor ref changes Signed-off-by: Yi Cai <yicai@redhat.com> * minor fix Signed-off-by: Yi Cai <yicai@redhat.com> * fix outlined button style issue Signed-off-by: Yi Cai <yicai@redhat.com> * added changeset Signed-off-by: Yi Cai <yicai@redhat.com> * changed changeset Signed-off-by: Yi Cai <yicai@redhat.com> * updated package.json and yarn.lock Signed-off-by: Yi Cai <yicai@redhat.com> * yarn dedupe Signed-off-by: Yi Cai <yicai@redhat.com> * yarn build:api-reports Signed-off-by: Yi Cai <yicai@redhat.com> --------- Signed-off-by: Yi Cai <yicai@redhat.com> * fix: removed ignored packages from changeset Signed-off-by: Yi Cai <yicai@redhat.com> * update changeset Signed-off-by: Yi Cai <yicai@redhat.com> * Revert "update changeset" This reverts commit 97a5a0a. --------- Signed-off-by: Yi Cai <yicai@redhat.com>
1 parent 0084602 commit b1fc395

12 files changed

Lines changed: 174 additions & 119 deletions

File tree

‎workspaces/theme/.changeset/quick-jobs-play.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-theme': patch
3+
---
4+
5+
Some UI bug fix.

‎workspaces/theme/.changeset/version-bump-1-36-1.md‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
11
---
2-
'@red-hat-developer-hub/backstage-plugin-bc-test': minor
3-
'@red-hat-developer-hub/backstage-plugin-mui4-test': minor
4-
'@red-hat-developer-hub/backstage-plugin-mui5-test': minor
52
'@red-hat-developer-hub/backstage-plugin-theme': minor
63
---
74

‎workspaces/theme/plugins/theme/package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"@backstage/core-plugin-api": "^1.10.4",
3333
"@backstage/theme": "^0.6.4",
3434
"@material-ui/icons": "^4.11.3",
35+
"@mui/icons-material": "^5.17.1",
3536
"@mui/material": "^5.0.0",
3637
"react": "^16.13.1 || ^17.0.0 || ^18.0.0"
3738
},
@@ -71,5 +72,8 @@
7172
"@ciiay",
7273
"@debsmita1",
7374
"@divyanshiGupta"
74-
]
75+
],
76+
"dependencies": {
77+
"@mui/icons-material": "^5.17.1"
78+
}
7579
}

‎workspaces/theme/plugins/theme/report.api.md‎

Lines changed: 112 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
44
55
```ts
6+
67
import { AppTheme } from '@backstage/core-plugin-api';
78
import { Theme } from '@mui/material/styles';
89
import { UnifiedThemeOptions } from '@backstage/theme';
@@ -12,18 +13,18 @@ export type BackstageThemePalette = UnifiedThemeOptions['palette'];
1213

1314
// @public (undocumented)
1415
export interface Branding {
15-
// (undocumented)
16-
theme?: {
17-
[key: string]: ThemeConfig;
18-
};
16+
// (undocumented)
17+
theme?: {
18+
[key: string]: ThemeConfig;
19+
};
1920
}
2021

2122
// @public (undocumented)
2223
export interface Config {
23-
// (undocumented)
24-
app: {
25-
branding?: Branding;
26-
};
24+
// (undocumented)
25+
app: {
26+
branding?: Branding;
27+
};
2728
}
2829

2930
// @public (undocumented)
@@ -34,120 +35,124 @@ export const getThemes: () => AppTheme[];
3435

3536
// @public (undocumented)
3637
export interface RHDHThemePalette {
37-
// (undocumented)
38-
cards?: {
39-
headerTextColor: string;
40-
headerBackgroundColor: string;
41-
headerBackgroundImage: string;
42-
};
43-
// (undocumented)
44-
general: {
45-
disabled: string;
46-
disabledBackground: string;
47-
paperBackgroundImage: string;
48-
paperBorderColor: string;
49-
popoverBoxShadow: string;
50-
cardBackgroundColor: string;
51-
cardBorderColor: string;
52-
headerBottomBorderColor: string;
53-
mainSectionBackgroundColor: string;
54-
formControlBackgroundColor: string;
55-
sideBarBackgroundColor?: string;
56-
sidebarBackgroundColor: string;
57-
sidebarItemSelectedBackgroundColor: string;
58-
tableTitleColor: string;
59-
tableSubtitleColor: string;
60-
tableColumnTitleColor: string;
61-
tableRowHover: string;
62-
tableBorderColor: string;
63-
tableBackgroundColor: string;
64-
tabsDisabledBackgroundColor: string;
65-
tabsBottomBorderColor: string;
66-
contrastText: string;
67-
};
68-
// (undocumented)
69-
primary: {
70-
main: string;
71-
focusVisibleBorder: string;
72-
};
73-
// (undocumented)
74-
secondary: {
75-
main: string;
76-
focusVisibleBorder: string;
77-
};
38+
// (undocumented)
39+
cards?: {
40+
headerTextColor: string;
41+
headerBackgroundColor: string;
42+
headerBackgroundImage: string;
43+
};
44+
// (undocumented)
45+
general: {
46+
disabled: string;
47+
disabledBackground: string;
48+
paperBackgroundImage: string;
49+
paperBorderColor: string;
50+
popoverBoxShadow: string;
51+
cardBackgroundColor: string;
52+
cardBorderColor: string;
53+
headerBottomBorderColor: string;
54+
mainSectionBackgroundColor: string;
55+
formControlBackgroundColor: string;
56+
sideBarBackgroundColor?: string;
57+
sidebarBackgroundColor: string;
58+
sidebarItemSelectedBackgroundColor: string;
59+
tableTitleColor: string;
60+
tableSubtitleColor: string;
61+
tableColumnTitleColor: string;
62+
tableRowHover: string;
63+
tableBorderColor: string;
64+
tableBackgroundColor: string;
65+
tabsDisabledBackgroundColor: string;
66+
tabsBottomBorderColor: string;
67+
contrastText: string;
68+
appBarBackgroundColor: string;
69+
appBarBackgroundImage: string;
70+
};
71+
// (undocumented)
72+
primary: {
73+
main: string;
74+
focusVisibleBorder: string;
75+
};
76+
// (undocumented)
77+
secondary: {
78+
main: string;
79+
focusVisibleBorder: string;
80+
};
7881
}
7982

8083
// @public (undocumented)
8184
export interface ThemeConfig {
82-
// (undocumented)
83-
defaultPageTheme?: string;
84-
// (undocumented)
85-
fontFamily?: UnifiedThemeOptions['fontFamily'];
86-
// (undocumented)
87-
htmlFontSize?: UnifiedThemeOptions['htmlFontSize'];
88-
mode?: 'light' | 'dark';
89-
// (undocumented)
90-
options?: ThemeConfigOptions;
91-
// (undocumented)
92-
pageTheme?: Record<string, ThemeConfigPageTheme>;
93-
// (undocumented)
94-
palette?: ThemeConfigPalette;
95-
// (undocumented)
96-
typography?: UnifiedThemeOptions['typography'];
97-
variant?: 'rhdh' | 'backstage';
85+
// (undocumented)
86+
defaultPageTheme?: string;
87+
// (undocumented)
88+
fontFamily?: UnifiedThemeOptions['fontFamily'];
89+
// (undocumented)
90+
htmlFontSize?: UnifiedThemeOptions['htmlFontSize'];
91+
mode?: 'light' | 'dark';
92+
// (undocumented)
93+
options?: ThemeConfigOptions;
94+
// (undocumented)
95+
pageTheme?: Record<string, ThemeConfigPageTheme>;
96+
// (undocumented)
97+
palette?: ThemeConfigPalette;
98+
// (undocumented)
99+
typography?: UnifiedThemeOptions['typography'];
100+
variant?: 'rhdh' | 'backstage';
98101
}
99102

100103
// @public (undocumented)
101104
export interface ThemeConfigOptions {
102-
// (undocumented)
103-
accordions?: 'patternfly' | 'mui';
104-
// (undocumented)
105-
buttons?: 'patternfly' | 'mui';
106-
// (undocumented)
107-
cards?: 'patternfly' | 'mui';
108-
// (undocumented)
109-
checkbox?: 'patternfly' | 'mui';
110-
// (undocumented)
111-
components?: 'rhdh' | 'backstage' | 'mui';
112-
// (undocumented)
113-
dialogs?: 'patternfly' | 'mui';
114-
// (undocumented)
115-
headers?: 'patternfly' | 'mui';
116-
// (undocumented)
117-
inputs?: 'patternfly' | 'mui';
118-
// (undocumented)
119-
pages?: 'patternfly' | 'mui';
120-
// (undocumented)
121-
paper?: 'patternfly' | 'mui';
122-
// (undocumented)
123-
rippleEffect?: 'on' | 'off';
124-
// (undocumented)
125-
sidebars?: 'patternfly' | 'mui';
126-
// (undocumented)
127-
tables?: 'patternfly' | 'mui';
128-
// (undocumented)
129-
tabs?: 'patternfly' | 'mui';
130-
// (undocumented)
131-
toolbars?: 'patternfly' | 'mui';
105+
// (undocumented)
106+
accordions?: 'patternfly' | 'mui';
107+
// (undocumented)
108+
appBar?: 'patternfly' | 'mui';
109+
// (undocumented)
110+
buttons?: 'patternfly' | 'mui';
111+
// (undocumented)
112+
cards?: 'patternfly' | 'mui';
113+
// (undocumented)
114+
checkbox?: 'patternfly' | 'mui';
115+
// (undocumented)
116+
components?: 'rhdh' | 'backstage' | 'mui';
117+
// (undocumented)
118+
dialogs?: 'patternfly' | 'mui';
119+
// (undocumented)
120+
headers?: 'patternfly' | 'mui';
121+
// (undocumented)
122+
inputs?: 'patternfly' | 'mui';
123+
// (undocumented)
124+
pages?: 'patternfly' | 'mui';
125+
// (undocumented)
126+
paper?: 'patternfly' | 'mui';
127+
// (undocumented)
128+
rippleEffect?: 'on' | 'off';
129+
// (undocumented)
130+
sidebars?: 'patternfly' | 'mui';
131+
// (undocumented)
132+
tables?: 'patternfly' | 'mui';
133+
// (undocumented)
134+
tabs?: 'patternfly' | 'mui';
135+
// (undocumented)
136+
toolbars?: 'patternfly' | 'mui';
132137
}
133138

134139
// @public (undocumented)
135140
export interface ThemeConfigPageTheme {
136-
// (undocumented)
137-
backgroundColor?: string | string[];
138-
// (undocumented)
139-
backgroundImage?: string;
140-
// (undocumented)
141-
colors?: string | string[];
142-
// (undocumented)
143-
fontColor?: string;
144-
// (undocumented)
145-
shape?: string;
141+
// (undocumented)
142+
backgroundColor?: string | string[];
143+
// (undocumented)
144+
backgroundImage?: string;
145+
// (undocumented)
146+
colors?: string | string[];
147+
// (undocumented)
148+
fontColor?: string;
149+
// (undocumented)
150+
shape?: string;
146151
}
147152

148153
// @public (undocumented)
149154
export type ThemeConfigPalette = BackstageThemePalette & {
150-
rhdh?: RHDHThemePalette;
155+
rhdh?: RHDHThemePalette;
151156
};
152157

153158
// @public (undocumented)
@@ -169,4 +174,5 @@ export const useThemeOptions: (themeConfig: ThemeConfig) => UnifiedThemeOptions;
169174
export const useThemes: () => AppTheme[];
170175

171176
// (No @packageDocumentation comment for this package)
177+
172178
```

‎workspaces/theme/plugins/theme/src/darkTheme.test.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,9 @@ describe('customDarkTheme', () => {
122122
tabsBottomBorderColor: '#444548',
123123

124124
contrastText: '#FFF',
125+
126+
appBarBackgroundColor: '#1b1d21',
127+
appBarBackgroundImage: 'none',
125128
},
126129
primary: {
127130
main: '#1FA7F8',

‎workspaces/theme/plugins/theme/src/darkTheme.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ export const customDarkTheme = (): ThemeConfigPalette => {
7777
tabsBottomBorderColor: '#444548',
7878

7979
contrastText: '#FFF',
80+
81+
appBarBackgroundColor: '#1b1d21',
82+
appBarBackgroundImage: 'none',
8083
},
8184
primary: {
8285
main: '#1FA7F8',

‎workspaces/theme/plugins/theme/src/lightTheme.test.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,9 @@ describe('customLightTheme', () => {
126126
tabsBottomBorderColor: '#D2D2D2',
127127

128128
contrastText: '#FFF',
129+
130+
appBarBackgroundColor: '#212427',
131+
appBarBackgroundImage: 'none',
129132
},
130133
primary: {
131134
main: '#0066CC',

‎workspaces/theme/plugins/theme/src/lightTheme.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,9 @@ export const customLightTheme = (): ThemeConfigPalette => {
8181
tabsBottomBorderColor: '#D2D2D2',
8282

8383
contrastText: '#FFF',
84+
85+
appBarBackgroundColor: '#212427',
86+
appBarBackgroundImage: 'none',
8487
},
8588
primary: {
8689
main: '#0066CC',

‎workspaces/theme/plugins/theme/src/themes.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ import React from 'react';
1818
import { AppTheme } from '@backstage/core-plugin-api';
1919
import { themes } from '@backstage/theme';
2020

21-
import LightIcon from '@material-ui/icons/WbSunny';
22-
import DarkIcon from '@material-ui/icons/Brightness2';
21+
import LightIcon from '@mui/icons-material/WbSunnyRounded';
22+
import DarkIcon from '@mui/icons-material/Brightness2Rounded';
2323
import { createTheme } from '@mui/material/styles';
2424

2525
import {

‎workspaces/theme/plugins/theme/src/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ export interface RHDHThemePalette {
5050
tabsBottomBorderColor: string;
5151

5252
contrastText: string;
53+
54+
appBarBackgroundColor: string;
55+
appBarBackgroundImage: string;
5356
};
5457

5558
primary: {
@@ -112,6 +115,8 @@ export interface ThemeConfigOptions {
112115
tables?: 'patternfly' | 'mui';
113116

114117
tabs?: 'patternfly' | 'mui';
118+
119+
appBar?: 'patternfly' | 'mui';
115120
}
116121

117122
export interface ThemeConfig {

0 commit comments

Comments
 (0)