Skip to content

Commit 92acbbf

Browse files
GurinderRawalaGurinderRawala
authored
new theme colors (#201)
* new theme colors * fixes
1 parent b6e13b1 commit 92acbbf

File tree

7 files changed

+219
-210
lines changed

7 files changed

+219
-210
lines changed

‎packages/grafana-data/src/themes/createColors.ts‎

Lines changed: 61 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -90,79 +90,84 @@ export type ThemeColorsInput = DeepPartial<ThemeColorsBase<ThemeRichColor>>;
9090
class DarkColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
9191
mode: ThemeColorsMode = 'dark';
9292

93-
// Used to get more white opacity colors
94-
whiteBase = '209, 209, 209';
93+
whiteBase = '255, 255, 255';
9594

96-
border = {
97-
weak: `rgba(${this.whiteBase}, 0.12)`,
98-
medium: `rgba(${this.whiteBase}, 0.20)`,
99-
strong: `rgba(${this.whiteBase}, 0.30)`,
95+
primary = {
96+
main: '#F04006',
97+
border: '#46404F',
98+
text: '#F5F4F6',
10099
};
101100

102101
text = {
103-
primary: '#fff',
104-
secondary: '#ffffff90',
105-
disabled: '#9DA7B8',
106-
link: '#F0E4B6',
107-
maxContrast: '#F0E4B6',
102+
primary: '#F5F4F6',
103+
secondary: '#D5D3DD',
104+
disabled: '#D5D3DA',
105+
link: '#F04006',
106+
maxContrast: palette.white,
108107
};
109108

110-
primary = {
111-
main: '#ff570ae5',
112-
text: '#e94900',
113-
border: '#ffffff00',
109+
border = {
110+
weak: `rgba(${this.whiteBase}, 0.12)`,
111+
medium: `rgba(${this.whiteBase}, 0.30)`,
112+
strong: `rgba(${this.whiteBase}, 0.40)`,
114113
};
115114

116115
secondary = {
117-
main: '#F06929',
118-
shade: '#F0692955',
116+
main: '#F04006',
117+
shade: '#9E240E',
118+
contrastText: `rgba(${this.whiteBase}, 1)`,
119119
text: this.text.primary,
120-
contrastText: `rgb(${this.whiteBase})`,
121-
border: `rgba(${this.whiteBase}, 0.08)`,
120+
border: this.border.weak,
122121
};
123122

124-
info = this.primary;
123+
info = {
124+
main: '#51A2FF',
125+
text: palette.blueDarkText,
126+
};
125127

126128
error = {
127-
main: palette.redDarkMain,
129+
main: '#FF6467',
128130
text: palette.redDarkText,
131+
border: palette.redDarkText,
129132
};
130133

131134
success = {
132-
main: '#4BBF73',
133-
text: '#318B50',
135+
main: '#05DF72',
136+
text: palette.greenDarkText,
134137
};
135138

136139
warning = {
137-
main: '#CF8E07',
138-
text: this.text.primary,
140+
main: '#FDC700',
141+
text: palette.orangeDarkText,
139142
};
140143

141144
background = {
142-
canvas: '#161618', //palette.gray05,
143-
primary: '#23242a', //palette.gray10,
144-
secondary: '#5E5855', //palette.gray15,
145+
primary: '#141116',
146+
canvas: '#141116',
147+
secondary: '#211E25',
145148
};
146149

147150
action = {
148-
hover: `rgba(${this.whiteBase}, 0.16)`,
149-
selected: `rgba(${this.whiteBase}, 0.12)`,
151+
hover: `rgba(${this.whiteBase}, 0.12)`,
152+
selected: '#F04006',
150153
selectedBorder: palette.orangeDarkMain,
151-
focus: `rgba(${this.whiteBase}, 0.16)`,
152154
hoverOpacity: 0.08,
153-
disabledText: this.text.disabled,
155+
focus: `rgba(${this.whiteBase}, 0.12)`,
154156
disabledBackground: `rgba(${this.whiteBase}, 0.04)`,
157+
disabledText: this.text.disabled,
155158
disabledOpacity: 0.38,
156159
};
157160

158161
gradients = {
159-
brandHorizontal: 'linear-gradient(270deg, #F55F3E 0%, #FF8833 100%)',
160-
brandVertical: 'linear-gradient(0.01deg, #F55F3E 0.01%, #FF8833 99.99%)',
162+
brandHorizontal: 'linear-gradient(90deg, #FF570A 0%, #F04006 100%)',
163+
brandVertical: 'linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%)',
161164
};
162165

163166
contrastThreshold = 3;
167+
164168
hoverFactor = 0.03;
165-
tonalOffset = 0.15;
169+
170+
tonalOffset = 0.2;
166171
}
167172

168173
class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
@@ -171,63 +176,63 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
171176
blackBase = '45, 51, 62';
172177

173178
primary = {
174-
main: '#FF570AE5',
175-
border: '#D7D7C7',
176-
text: '#101828',
179+
main: '#F04006',
180+
border: '#D5D3DD',
181+
text: '#141116',
177182
};
178183

179184
text = {
180-
primary: '#101828',
181-
secondary: '#363636',
182-
disabled: '#9DA7B8',
183-
link: '#FF4702',
185+
primary: '#141116',
186+
secondary: '#3A3441',
187+
disabled: '#AFACB3',
188+
link: '#F04006',
184189
maxContrast: palette.black,
185190
};
186191

187192
border = {
188193
weak: `rgba(${this.blackBase}, 0.12)`,
189194
medium: `rgba(${this.blackBase}, 0.30)`,
190-
strong: `rgba(${this.blackBase}, 0.40)`,
195+
strong: `rgba(${this.blackBase}, .4)`,
191196
};
192197

193198
secondary = {
194-
main: '#FF4702',
195-
shade: '#FC9A6990',
199+
main: '#F04006',
200+
shade: '#FFCFA8',
196201
contrastText: `rgba(${this.blackBase}, 1)`,
197202
text: this.text.primary,
198203
border: this.border.weak,
199204
};
200205

201206
info = {
202-
main: '#64B6F7',
207+
main: '#51A2FF',
203208
text: palette.blueLightText,
204209
};
205210

206211
error = {
207-
main: palette.redLightMain,
212+
main: '#FF6467',
208213
text: palette.redLightText,
209214
border: palette.redLightText,
210215
};
211216

212217
success = {
213-
main: '#83D39E',
218+
main: '#05DF72',
214219
text: palette.greenLightText,
215220
};
216221

217222
warning = {
218-
main: '#F3D086',
223+
main: '#FDC700',
219224
text: palette.orangeLightText,
220225
};
221226

222227
background = {
223-
primary: '#F5F5F5',
228+
primary: '#FFFFFF',
224229
canvas: '#FFFFFF',
225-
secondary: '#FFFFFF',
230+
secondary: '#F5F4F6',
226231
};
227232

228233
action = {
229234
hover: `rgba(${this.blackBase}, 0.12)`,
230-
selected: `#F27A40`,
235+
selected: '#F04006',
231236
selectedBorder: palette.orangeLightMain,
232237
hoverOpacity: 0.08,
233238
focus: `rgba(${this.blackBase}, 0.12)`,
@@ -237,12 +242,14 @@ class LightColors implements ThemeColorsBase<Partial<ThemeRichColor>> {
237242
};
238243

239244
gradients = {
240-
brandHorizontal: 'linear-gradient(90deg, #FF8833 0%, #F53E4C 100%)',
241-
brandVertical: 'linear-gradient(0.01deg, #F53E4C -31.2%, #FF8833 113.07%)',
245+
brandHorizontal: 'linear-gradient(90deg, #FF570A 0%, #F04006 100%)',
246+
brandVertical: 'linear-gradient(0.01deg, #FF570A -31.2%, #F04006 113.07%)',
242247
};
243248

244249
contrastThreshold = 3;
250+
245251
hoverFactor = 0.03;
252+
246253
tonalOffset = 0.2;
247254
}
248255

‎public/app/features/dashboard/containers/DashboardPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -116,9 +116,7 @@ type OwnProps = {
116116
export type DashboardPageProps = OwnProps &
117117
GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams>;
118118

119-
export type Props = Themeable2 &
120-
GrafanaRouteComponentProps<DashboardPageRouteParams, DashboardPageRouteSearchParams> &
121-
ConnectedProps<typeof connector>;
119+
export type Props = Themeable2 & DashboardPageProps & ConnectedProps<typeof connector>;
122120

123121
export interface State {
124122
editPanel: PanelModel | null;
@@ -383,9 +381,11 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
383381
const kioskMode = getKioskMode(this.props.queryParams);
384382

385383
if (!dashboard) {
384+
this.props?.isLoading?.(true);
386385
return FNDashboard ? <FnLoader /> : <DashboardLoading initPhase={this.props.initPhase} />;
387386
}
388387

388+
this.props?.isLoading?.(false);
389389
const inspectPanel = this.getInspectPanel();
390390
const showSubMenu = !editPanel && !kioskMode && !this.props.queryParams.editview;
391391

‎public/app/features/variables/pickers/PickerRenderer.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,15 +70,17 @@ const COMMON_PICKER_LABEL_STYLE: CSSProperties = {
7070
function PickerLabel({ variable }: PropsWithChildren<Props>): ReactElement | null {
7171
const labelOrName = useMemo(() => variable.label || variable.name, [variable]);
7272
const { FNDashboard } = useSelector<StoreState, FnGlobalState>(({ fnGlobalState }) => fnGlobalState);
73-
const { colors: { mode } } = useTheme2();
73+
const {
74+
colors: { background, text },
75+
} = useTheme2();
7476

7577
const fnLabelStyle = useMemo(
7678
() => ({
7779
...COMMON_PICKER_LABEL_STYLE,
78-
color: mode === 'light' ? '#2D333E' : '#DBD9D7',
79-
backgroundColor: mode === 'light' ? '#F6F6F1': '#23242a',
80+
color: text.primary,
81+
backgroundColor: background.canvas,
8082
}),
81-
[mode]
83+
[background, text]
8284
);
8385

8486
if (variable.hide !== VariableHide.dontHide) {

‎public/app/fn-app/fn-app-provider.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import app from '../fn_app';
1818
import { FNDashboardProps } from './types';
1919

2020
type FnAppProviderProps = Pick<FNDashboardProps, 'fnError'> & {
21-
store: Store<StoreState>
21+
store: Store<StoreState>;
2222
};
2323

2424
export const FnAppProvider: FC<PropsWithChildren<FnAppProviderProps>> = (props) => {

‎public/microfrontends/fn_dashboard/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,16 @@
1010
<script nonce="">
1111
window.fnData = {
1212
themePaths: {
13-
light: '../../../public/build/grafana.light.485c55b1c2950f6001af.css',
14-
dark: '../../../public/build/grafana.dark.93afaa54e9b1395b4d54.css',
13+
light: '../../../public/build/grafana.light.014e7717596b1ae793cd.css',
14+
dark: '../../../public/build/grafana.dark.a2d738431fce3ebf70b9.css',
1515
}
1616
};
1717
</script>
1818

1919

2020
<script nonce="" src="../../../public/build/runtime~fn_dashboard.551314fa089c5f51c211.js" type="text/javascript"></script>
2121

22-
<script nonce="" src="../../../public/build/fn_dashboard.cba3a3077df2f940f692.js" type="text/javascript"></script>
22+
<script nonce="" src="../../../public/build/fn_dashboard.0a5f240b55d61360ccc0.js" type="text/javascript"></script>
2323

2424
</body>
2525
</html>

0 commit comments

Comments
 (0)